@ac-design/design-system 2.2.0 → 2.3.0

package/dist/lib/components/AcDropdown.vue_vue_type_script_setup_true_lang.js

@@ -1,10 +1,11 @@
 import e from "./AcButton.js";
-import { Teleport as t, Transition as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createVNode as s, defineComponent as c, mergeModels as l, nextTick as u, normalizeClass as d, normalizeStyle as f, onBeforeUnmount as p, onMounted as m, onUpdated as h, openBlock as g, provide as _, ref as v, renderSlot as y, toRef as ee, unref as b, useId as x, useModel as S, useSlots as te, watch as C, withCtx as w } from "vue";
-import { ChevronDown as T, Ellipsis as E } from "@lucide/vue";
+import { fixedFrame as t } from "./fixedFrame.js";
+import { Teleport as n, Transition as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createVNode as c, defineComponent as l, mergeModels as u, nextTick as d, normalizeClass as f, normalizeStyle as ee, onBeforeUnmount as te, onMounted as p, onUpdated as m, openBlock as h, provide as g, ref as _, renderSlot as v, toRef as y, unref as b, useId as x, useModel as S, useSlots as C, watch as w, withCtx as T } from "vue";
+import { ChevronDown as E, Ellipsis as D } from "@lucide/vue";
 //#region src/lib/components/AcDropdown.vue?vue&type=script&setup=true&lang.ts
-var ne = ["aria-label", "disabled"], re = ["aria-labelledby", "aria-label"], D = "[role=\"menuitem\"]:not([aria-disabled=\"true\"])", O = /*@__PURE__*/ c({
+var O = ["aria-label", "disabled"], k = ["aria-labelledby", "aria-label"], A = "[role=\"menuitem\"]:not([aria-disabled=\"true\"])", j = /*@__PURE__*/ l({
 	__name: "AcDropdown",
-	props: /*@__PURE__*/ l({
+	props: /*@__PURE__*/ u({
 		label: { default: "" },
 		menuLabel: { default: "Actions" },
 		align: { default: "start" },
@@ -22,24 +23,24 @@ var ne = ["aria-label", "disabled"], re = ["aria-labelledby", "aria-label"], D =
 		openModifiers: {}
 	}),
 	emits: ["update:open"],
-	setup(c) {
-		let l = c, O = S(c, "open"), k = te(), A = {
+	setup(l) {
+		let u = l, j = S(l, "open"), M = C(), ne = {
 			menu: 240,
 			panel: 320
-		}, j = {
+		}, re = {
 			"top-start": "origin-top-left",
 			"top-end": "origin-top-right",
 			"bottom-start": "origin-bottom-left",
 			"bottom-end": "origin-bottom-right"
-		}, M = {
+		}, ie = {
 			menu: "rounded-10 border-border py-1",
 			panel: "rounded-14 border-border/80 p-2"
-		}, N = x(), P = `${N}-menu`, F = v(null), I = v(null), L = v({}), R = v(!1), z = v(""), B = null, V = "menu", H = "", U, W = r(() => j[`${R.value ? "top" : "bottom"}-${l.align}`]);
+		}, N = x(), P = `${N}-menu`, F = _(null), I = _(null), L = _({}), R = _(!1), z = _(""), B = null, V = "menu", H = "", U, W = i(() => re[`${R.value ? "top" : "bottom"}-${u.align}`]);
 		function G() {
-			B = F.value?.querySelector("button, a[href], [tabindex]") ?? null, B && (B.id || (B.id = `${N}-trigger`), z.value = B.id, B.setAttribute("aria-haspopup", "menu"), B.setAttribute("aria-expanded", String(O.value)), O.value ? B.setAttribute("aria-controls", P) : B.removeAttribute("aria-controls"));
+			B = F.value?.querySelector("button, a[href], [tabindex]") ?? null, B && (B.id || (B.id = `${N}-trigger`), z.value = B.id, B.setAttribute("aria-haspopup", "menu"), B.setAttribute("aria-expanded", String(j.value)), j.value ? B.setAttribute("aria-controls", P) : B.removeAttribute("aria-controls"));
 		}
 		function K() {
-			return [...I.value?.querySelectorAll(D) ?? []];
+			return [...I.value?.querySelectorAll(A) ?? []];
 		}
 		function q(e) {
 			let t = K();
@@ -47,44 +48,44 @@ var ne = ["aria-label", "disabled"], re = ["aria-labelledby", "aria-label"], D =
 			t[e === "first" ? 0 : e === "last" ? t.length - 1 : (e + t.length) % t.length]?.focus();
 		}
 		function J(e) {
-			l.disabled || (V = e, O.value = !0);
+			u.disabled || (V = e, j.value = !0);
 		}
 		function Y(e = !0) {
-			O.value && (O.value = !1, e && B?.focus());
+			j.value && (j.value = !1, e && B?.focus());
 		}
 		function X() {
 			if (!B || !I.value) return;
-			let e = B.getBoundingClientRect(), t = `${Math.min(Math.max(e.width, A[l.variant]), window.innerWidth - 16)}px`;
-			I.value.style.minWidth = t;
-			let { offsetWidth: n, offsetHeight: r } = I.value, i = window.innerHeight - e.bottom - 8 - 8, a = e.top - 8 - 8, o = l.placement === "top" ? a >= r || a > i : i < r && a > i, s = l.align === "end" ? e.right - n : e.left;
-			R.value = !o, L.value = {
-				[o ? "bottom" : "top"]: `${o ? window.innerHeight - e.top + 8 : e.bottom + 8}px`,
-				left: `${Math.max(8, Math.min(s, window.innerWidth - n - 8))}px`,
-				minWidth: t,
-				maxHeight: `${Math.max(o ? a : i, 120)}px`
+			let e = B.getBoundingClientRect(), n = t(), r = `${Math.min(Math.max(e.width, ne[u.variant]), n.width - 16)}px`;
+			I.value.style.minWidth = r;
+			let { offsetWidth: i, offsetHeight: a } = I.value, o = n.bottom - e.bottom - 8 - 8, s = e.top - n.top - 8 - 8, c = u.placement === "top" ? s >= a || s > o : o < a && s > o, l = (u.align === "end" ? e.right - i : e.left) - n.left;
+			R.value = !c, L.value = {
+				[c ? "bottom" : "top"]: `${c ? n.bottom - e.top + 8 : e.bottom + 8 - n.top}px`,
+				left: `${Math.max(8, Math.min(l, n.width - i - 8))}px`,
+				minWidth: r,
+				maxHeight: `${Math.max(c ? s : o, 120)}px`
 			};
 		}
-		function ie(e) {
+		function ae(e) {
 			if (B?.contains(e.target)) {
-				if (O.value) return Y();
+				if (j.value) return Y();
 				J(e.detail === 0 ? "first" : "menu");
 			}
 		}
-		function ae(e) {
+		function oe(e) {
 			if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-				if (e.preventDefault(), O.value) return q(e.key === "ArrowDown" ? "first" : "last");
+				if (e.preventDefault(), j.value) return q(e.key === "ArrowDown" ? "first" : "last");
 				J(e.key === "ArrowDown" ? "first" : "last");
 			}
 		}
-		function oe(e) {
+		function se(e) {
 			let t = K(), n = t.indexOf(document.activeElement);
 			if (e.key === "ArrowDown" || e.key === "ArrowUp") {
 				e.preventDefault();
 				let t = e.key === "ArrowDown" ? 1 : -1;
 				q(n < 0 ? t > 0 ? "first" : "last" : n + t);
-			} else e.key === "Home" || e.key === "End" ? (e.preventDefault(), q(e.key === "Home" ? "first" : "last")) : e.key === "Escape" ? (e.preventDefault(), Y()) : e.key === "Tab" ? Y() : e.key === " " && n >= 0 && t[n].tagName !== "BUTTON" ? (e.preventDefault(), t[n].click()) : e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey && e.key !== " " && se(e.key, t, n);
+			} else e.key === "Home" || e.key === "End" ? (e.preventDefault(), q(e.key === "Home" ? "first" : "last")) : e.key === "Escape" ? (e.preventDefault(), Y()) : e.key === "Tab" ? Y() : e.key === " " && n >= 0 && t[n].tagName !== "BUTTON" ? (e.preventDefault(), t[n].click()) : e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey && e.key !== " " && ce(e.key, t, n);
 		}
-		function se(e, t, n) {
+		function ce(e, t, n) {
 			H += e.toLowerCase(), clearTimeout(U), U = setTimeout(() => H = "", 500);
 			let r = (e) => (e.dataset.acLabel || e.textContent || "").trim().toLowerCase(), i = H.length === 1 ? n + 1 : Math.max(n, 0);
 			[...t.slice(i), ...t.slice(0, i)].find((e) => r(e).startsWith(H))?.focus();
@@ -99,49 +100,49 @@ var ne = ["aria-label", "disabled"], re = ["aria-labelledby", "aria-label"], D =
 		function $(e) {
 			e ? (document.addEventListener("pointerdown", Z, !0), window.addEventListener("scroll", Q, !0), window.addEventListener("resize", Q)) : (document.removeEventListener("pointerdown", Z, !0), window.removeEventListener("scroll", Q, !0), window.removeEventListener("resize", Q));
 		}
-		return _("ac-dropdown", {
+		return g("ac-dropdown", {
 			close: Y,
 			focusMenu: () => I.value?.focus(),
-			variant: ee(l, "variant")
-		}), C(O, async (e) => {
-			G(), $(e), e && (await u(), X(), V === "menu" ? I.value?.focus() : q(V), V = "menu");
-		}), m(G), h(G), p(() => {
+			variant: y(u, "variant")
+		}), w(j, async (e) => {
+			G(), $(e), e && (await d(), X(), V === "menu" ? I.value?.focus() : q(V), V = "menu");
+		}), p(G), m(G), te(() => {
 			$(!1), clearTimeout(U);
-		}), (r, l) => (g(), o("div", {
+		}), (t, i) => (h(), s("div", {
 			ref_key: "root",
 			ref: F,
 			class: "inline-flex",
 			"data-ac-ds": "",
 			"data-testid": "ac-dropdown",
-			onClick: ie,
-			onKeydown: ae
-		}, [k.trigger ? y(r.$slots, "trigger", { open: O.value }, void 0, void 0, 0) : c.label ? (g(), i(e, {
+			onClick: ae,
+			onKeydown: oe
+		}, [M.trigger ? v(t.$slots, "trigger", { open: j.value }, void 0, void 0, 0) : l.label ? (h(), a(e, {
 			key: 1,
-			title: c.label,
+			title: l.label,
 			color: "white",
-			disabled: c.disabled
+			disabled: l.disabled
 		}, {
-			default: w(() => [s(b(T), {
-				class: d(["-mr-1 text-muted transition-transform duration-200", O.value && "rotate-180"]),
+			default: T(() => [c(b(E), {
+				class: f(["-mr-1 text-muted transition-transform duration-200", j.value && "rotate-180"]),
 				"aria-hidden": "true"
 			}, null, 8, ["class"])]),
 			_: 1
-		}, 8, ["title", "disabled"])) : (g(), o("button", {
+		}, 8, ["title", "disabled"])) : (h(), s("button", {
 			key: 2,
 			type: "button",
-			"aria-label": c.menuLabel,
-			disabled: c.disabled,
-			class: d(["inline-flex size-7 cursor-pointer items-center justify-center rounded-8 text-muted transition-colors duration-200 hover:bg-surface-sunken hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", O.value && "bg-surface-sunken text-heading"])
-		}, [s(b(E), {
+			"aria-label": l.menuLabel,
+			disabled: l.disabled,
+			class: f(["inline-flex size-7 cursor-pointer items-center justify-center rounded-8 text-muted transition-colors duration-200 hover:bg-surface-sunken hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", j.value && "bg-surface-sunken text-heading"])
+		}, [c(b(D), {
 			class: "size-4",
 			"aria-hidden": "true"
-		})], 10, ne)), (g(), i(t, { to: "body" }, [s(n, {
+		})], 10, O)), (h(), a(n, { to: "body" }, [c(r, {
 			"enter-active-class": "transition-[opacity,scale] duration-150 ease-out motion-reduce:transition-none",
 			"enter-from-class": "opacity-0 motion-safe:scale-95",
 			"leave-active-class": "transition-[opacity,scale] duration-100 ease-in motion-reduce:transition-none",
 			"leave-to-class": "opacity-0 motion-safe:scale-95"
 		}, {
-			default: w(() => [O.value ? (g(), o("div", {
+			default: T(() => [j.value ? (h(), s("div", {
 				key: 0,
 				id: P,
 				ref_key: "panel",
@@ -149,17 +150,17 @@ var ne = ["aria-label", "disabled"], re = ["aria-labelledby", "aria-label"], D =
 				role: "menu",
 				tabindex: "-1",
 				"aria-orientation": "vertical",
-				"aria-labelledby": (k.trigger || c.label) && z.value ? z.value : void 0,
-				"aria-label": k.trigger || c.label ? void 0 : c.menuLabel,
-				class: d(["ac-scrollbar fixed z-[90] flex w-max max-w-[min(320px,calc(100vw-16px))] flex-col border bg-surface shadow-lg outline-none", [M[c.variant], W.value]]),
-				style: f(L.value),
+				"aria-labelledby": (M.trigger || l.label) && z.value ? z.value : void 0,
+				"aria-label": M.trigger || l.label ? void 0 : l.menuLabel,
+				class: f(["ac-scrollbar fixed z-[90] flex w-max max-w-[min(320px,calc(100vw-16px))] flex-col border bg-surface shadow-lg outline-none", [ie[l.variant], W.value]]),
+				style: ee(L.value),
 				"data-ac-ds": "",
 				"data-testid": "ac-dropdown-menu",
-				onKeydown: oe
-			}, [y(r.$slots, "default")], 46, re)) : a("", !0)]),
+				onKeydown: se
+			}, [v(t.$slots, "default")], 46, k)) : o("", !0)]),
 			_: 3
 		})]))], 544));
 	}
 });
 //#endregion
-export { O as default };
+export { j as default };

package/dist/lib/components/AcErrorState.vue.d.ts

@@ -30,11 +30,11 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     title: string;
     description: string;
     error: undefined;
+    titleTag: "h2" | "h3" | "h4" | "p";
     compact: boolean;
     retrying: boolean;
     retryText: string;
     hideRetry: boolean;
-    titleTag: "h2" | "h3" | "h4" | "p";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/lib/components/AcFormFooter.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,8 @@
 import e from "./AcButton.js";
-import { computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, inject as c, normalizeClass as l, normalizeStyle as u, onBeforeUnmount as d, onMounted as f, openBlock as p, ref as m, renderSlot as h, watch as g } from "vue";
+import { fixedFrame as t } from "./fixedFrame.js";
+import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, inject as l, normalizeClass as u, normalizeStyle as d, onBeforeUnmount as f, onMounted as p, openBlock as m, ref as h, renderSlot as g, watch as _ } from "vue";
 //#region src/lib/components/AcFormFooter.vue?vue&type=script&setup=true&lang.ts
-var _ = { class: "flex min-w-0 items-center gap-2 text-base text-muted" }, v = { class: "ml-auto flex items-center gap-3" }, y = /*@__PURE__*/ s({
+var v = { class: "flex min-w-0 items-center gap-2 text-base text-muted" }, y = { class: "ml-auto flex items-center gap-3" }, b = /*@__PURE__*/ c({
 	__name: "AcFormFooter",
 	props: {
 		submitLabel: { default: "Save" },
@@ -22,58 +23,58 @@ var _ = { class: "flex min-w-0 items-center gap-2 text-base text-muted" }, v = {
 		form: { default: "" }
 	},
 	emits: ["cancel", "save"],
-	setup(s, { emit: y }) {
-		let b = s, x = y, S = c("ac-form", null), C = m(null), w = m(null), T = m({
+	setup(c, { emit: b }) {
+		let x = c, S = b, C = l("ac-form", null), w = h(null), T = h(null), E = h({
 			left: 0,
 			width: 0,
 			height: 0
-		}), E, D = t(() => S?.widthClass.value ?? "");
-		function O(e) {
-			e.currentTarget?.form || x("save");
+		}), D, O = n(() => C?.widthClass.value ?? "");
+		function k(e) {
+			e.currentTarget?.form || S("save");
 		}
-		function k() {
-			if (!C.value || !w.value) return;
-			let e = C.value.getBoundingClientRect();
-			T.value = {
-				left: e.left,
+		function A() {
+			if (!w.value || !T.value) return;
+			let e = w.value.getBoundingClientRect();
+			E.value = {
+				left: e.left - t().left,
 				width: e.width,
-				height: w.value.offsetHeight
+				height: T.value.offsetHeight
 			};
 		}
-		function A() {
-			j(), b.sticky === "viewport" && C.value && w.value && (k(), E = new ResizeObserver(k), E.observe(C.value), E.observe(w.value), window.addEventListener("resize", k));
-		}
 		function j() {
-			E?.disconnect(), E = void 0, window.removeEventListener("resize", k);
+			M(), x.sticky === "viewport" && w.value && T.value && (A(), D = new ResizeObserver(A), D.observe(w.value), D.observe(T.value), window.addEventListener("resize", A));
 		}
-		return g(() => b.sticky, A, { flush: "post" }), f(A), d(j), (t, c) => (p(), i("div", {
+		function M() {
+			D?.disconnect(), D = void 0, window.removeEventListener("resize", A);
+		}
+		return _(() => x.sticky, j, { flush: "post" }), p(j), f(M), (t, n) => (m(), a("div", {
 			ref_key: "root",
-			ref: C,
-			class: l(["mt-4 w-full", [s.sticky === "container" && "sticky bottom-0 z-10", s.sticky !== "viewport" && D.value]]),
-			style: u(s.sticky === "viewport" ? { height: `${T.value.height}px` } : void 0),
+			ref: w,
+			class: u(["mt-4 w-full", [c.sticky === "container" && "sticky bottom-0 z-10", c.sticky !== "viewport" && O.value]]),
+			style: d(c.sticky === "viewport" ? { height: `${E.value.height}px` } : void 0),
 			"data-ac-ds": "",
 			"data-testid": "ac-form-footer"
-		}, [a("div", {
+		}, [o("div", {
 			ref_key: "bar",
-			ref: w,
-			class: l(["border-t border-border bg-surface py-4", s.sticky === "viewport" && "fixed bottom-0 z-40 px-4"]),
-			style: u(s.sticky === "viewport" ? {
-				left: `${T.value.left}px`,
-				width: `${T.value.width}px`
+			ref: T,
+			class: u(["border-t border-border bg-surface py-4", c.sticky === "viewport" && "fixed bottom-0 z-40 px-4"]),
+			style: d(c.sticky === "viewport" ? {
+				left: `${E.value.left}px`,
+				width: `${E.value.width}px`
 			} : void 0)
-		}, [a("div", { class: l(["flex w-full flex-wrap items-center justify-between gap-x-4 gap-y-2", D.value]) }, [a("div", _, [h(t.$slots, "left")]), a("div", v, [h(t.$slots, "right", {}, () => [s.hideCancel ? r("", !0) : (p(), n(e, {
+		}, [o("div", { class: u(["flex w-full flex-wrap items-center justify-between gap-x-4 gap-y-2", O.value]) }, [o("div", v, [g(t.$slots, "left")]), o("div", y, [g(t.$slots, "right", {}, () => [c.hideCancel ? i("", !0) : (m(), r(e, {
 			key: 0,
-			title: s.cancelLabel,
+			title: c.cancelLabel,
 			color: "white",
-			disabled: s.loading,
-			onClick: c[0] ||= (e) => x("cancel")
-		}, null, 8, ["title", "disabled"])), o(e, {
-			title: s.submitLabel,
+			disabled: c.loading,
+			onClick: n[0] ||= (e) => S("cancel")
+		}, null, 8, ["title", "disabled"])), s(e, {
+			title: c.submitLabel,
 			type: "submit",
-			form: s.form || void 0,
-			loading: s.loading,
-			disabled: s.disabled,
-			onClick: O
+			form: c.form || void 0,
+			loading: c.loading,
+			disabled: c.disabled,
+			onClick: k
 		}, null, 8, [
 			"title",
 			"form",
@@ -83,4 +84,4 @@ var _ = { class: "flex min-w-0 items-center gap-2 text-base text-muted" }, v = {
 	}
 });
 //#endregion
-export { y as default };
+export { b as default };

package/dist/lib/components/AcHeader.vue.d.ts

@@ -48,8 +48,8 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     size: "normal" | "compact";
     top: string;
     subtitle: string;
-    sticky: boolean;
     titleTag: "h1" | "h2" | "h3" | "h4";
+    sticky: boolean;
     countLabel: string;
     docsHref: string;
     backButton: boolean;

package/dist/lib/components/AcInput.vue.d.ts

@@ -1,23 +1,31 @@
-import type { Component } from "vue";
+import type { Component, HTMLAttributes } from "vue";
 export interface Props {
-    /** Label above the field. Pass `placeholder` for an example value inside it. */
-    label: string;
+    /** Label above the field. Pass `placeholder` for an example value inside it. Without a label, pass `aria-label`; the placeholder is the accessible name otherwise. */
+    label?: string;
     /** Native `name` attribute. */
     name?: string;
     /** Native input type. `password` adds a show/hide toggle. */
     type?: "text" | "password" | "email" | "number" | "url" | "search";
     /** Marks the field required and adds a red asterisk. */
     required?: boolean;
+    /** Adds the red asterisk without native `required`, for forms that run their own validation on submit. */
+    requiredMark?: boolean;
     /** Disables the field. */
     disabled?: boolean;
     /** Read-only field: a muted fill, and "(read only)" after the label. */
     readonly?: boolean;
     /** Error text under the field. Turns the border and label red and sets `aria-invalid`. */
     errorMsg?: string;
+    /** Turns the border red and sets `aria-invalid` without a message, for forms that print their own. */
+    invalid?: boolean;
     /** Help text between the label and the field. */
     hint?: string;
-    /** `small` 36px or `normal` 42px tall. */
-    size?: "small" | "normal";
+    /** `xsmall` 34px, `small` 36px or `normal` 42px tall. */
+    size?: "xsmall" | "small" | "normal";
+    /** Classes for the `<input>` element itself, e.g. `font-mono`. `class` goes on the wrapper. */
+    inputClass?: HTMLAttributes["class"];
+    /** Shows a spinner in the password toggle and disables it, e.g. while `update:showValue` fetches a stored secret. */
+    revealing?: boolean;
     /** Text of a button attached to the right edge, such as "Copy", "Generate" or "Browse". It emits `addon` when clicked. Also its accessible name when `addon-icon-only` is set. */
     addonLabel?: string;
     /** A Lucide icon component shown in the attached button, before `addon-label`. */
@@ -31,9 +39,15 @@ type __VLS_Slots = {
     prefix?: () => unknown;
     /** Content inside the field after the value: a unit such as `Gi` or `%`, or a status icon. */
     suffix?: () => unknown;
+    /** Content before the label text, such as a 14px icon. */
+    "label-icon"?: () => unknown;
+    /** Content after the label text, such as "(Optional)" or an info tooltip. */
+    "label-extra"?: () => unknown;
 };
 type __VLS_ModelProps = {
     modelValue?: string | number;
+    /** Whether a password shows as plain text. Bind `v-model:show-value` to fetch a stored value before it shows. */
+    "showValue"?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
@@ -42,18 +56,25 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string | number) => any;
     addon: (event: MouseEvent) => any;
+    "update:showValue": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
     onAddon?: ((event: MouseEvent) => any) | undefined;
+    "onUpdate:showValue"?: ((value: boolean) => any) | undefined;
 }>, {
     type: "text" | "password" | "email" | "number" | "url" | "search";
     required: boolean;
+    label: string;
     disabled: boolean;
     name: string;
-    size: "small" | "normal";
-    readonly: boolean;
+    size: "xsmall" | "small" | "normal";
     hint: string;
+    invalid: boolean;
+    readonly: boolean;
     errorMsg: string;
+    requiredMark: boolean;
+    inputClass: string | false | Record<string, any> | import("vue").ClassValue[] | null;
+    revealing: boolean;
     addonLabel: string;
     addonIcon: Component;
     addonIconOnly: boolean;