@teselia/password 0.0.0-stage → 1.0.1

package/dist/tes-password.js

@@ -0,0 +1,607 @@
+import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, defineCustomElement as o, mergeDefaults as s, normalizeClass as c, onBeforeUnmount as l, onMounted as u, openBlock as d, reactive as f, ref as p, renderList as m, toDisplayString as h, unref as g, useAttrs as _, useHost as ee, useTemplateRef as te, watch as v, watchEffect as y, withModifiers as b } from "vue";
+// ../shared/src/use-announcer.ts
+var x = 500, S = 100;
+function C() {
+	let e = p(""), t;
+	function n() {
+		clearTimeout(t), e.value = "";
+	}
+	function r(r) {
+		n(), t = setTimeout(() => {
+			e.value = r;
+		}, S);
+	}
+	function i(r) {
+		n(), t = setTimeout(() => {
+			e.value = r();
+		}, x);
+	}
+	return l(() => clearTimeout(t)), {
+		announcement: e,
+		announceNow: r,
+		announceOnceTypingPauses: i,
+		clear: n
+	};
+}
+// ../shared/src/use-custom-states.ts
+function ne(e, t) {
+	y(() => {
+		let n = e.states;
+		if (n) for (let [e, r] of Object.entries(t())) r ? n.add(e) : n.delete(e);
+	});
+}
+// src/composables/use-caps-lock.ts
+function re({ props: e, announceNow: t }) {
+	let n = p(!1);
+	function r(r) {
+		let i = r.getModifierState("CapsLock");
+		i && !n.value && t(e.textCapsLock), n.value = i;
+	}
+	function i() {
+		n.value = !1;
+	}
+	return {
+		capsLockOn: n,
+		readCapsLock: r,
+		forgetCapsLock: i
+	};
+}
+// src/core/purpose.ts
+var w = {
+	current: "current-password",
+	new: "new-password"
+};
+function T(e) {
+	return e === "current" || e === "new";
+}
+function E(e) {
+	return T(e) ? e : "current";
+}
+function D(e, t) {
+	return t?.trim() ? t : w[e];
+}
+var O = [
+	"lowercase",
+	"uppercase",
+	"digit",
+	"symbol"
+], k = {
+	lowercase: /\p{Ll}/u,
+	uppercase: /[\p{Lu}\p{Lt}]/u,
+	digit: /\p{Nd}/u,
+	symbol: /[^\p{L}\p{N}\s]/u
+}, A = {
+	lowercase: "lower",
+	uppercase: "upper",
+	digit: "digit",
+	symbol: "special"
+};
+function j(e) {
+	if (e == null || e === "") return null;
+	let t = Number(e);
+	return Number.isInteger(t) && t > 0 ? t : null;
+}
+function M(e) {
+	return O.includes(e);
+}
+function N(e) {
+	let t = j(e.minlength) ?? 8, n = j(e.maxlength), r = String(e.requirements ?? "").toLowerCase().split(/[\s,]+/).filter(Boolean);
+	return {
+		minLength: t,
+		maxLength: n !== null && n >= t ? n : null,
+		classes: O.filter((e) => r.includes(e)),
+		unknown: [...new Set(r.filter((e) => !M(e)))]
+	};
+}
+function P(e) {
+	return [...e].length;
+}
+function F(e, t) {
+	return [{
+		requirement: "length",
+		met: P(e) >= t.minLength
+	}, ...t.classes.map((t) => ({
+		requirement: t,
+		met: k[t].test(e)
+	}))];
+}
+function I(e, t) {
+	return F(e, t).every((e) => e.met);
+}
+function L(e, t) {
+	return t.maxLength !== null && P(e) > t.maxLength;
+}
+function R(e) {
+	return [
+		`minlength: ${e.minLength};`,
+		e.maxLength !== null && `maxlength: ${e.maxLength};`,
+		...e.classes.map((e) => `required: ${A[e]};`),
+		"allowed: lower, upper, digit, special;"
+	].filter(Boolean).join(" ");
+}
+// src/composables/use-field-options.ts
+function ie(e) {
+	let n = t(() => E(e.purpose)), r = t(() => n.value === "new" ? N({
+		minlength: e.minlength,
+		maxlength: e.maxlength,
+		requirements: e.requirements
+	}) : null);
+	return {
+		purpose: n,
+		ruleOptions: r,
+		autocomplete: t(() => D(n.value, e.autocomplete)),
+		rulesForPasswordManagers: t(() => r.value ? R(r.value) : void 0)
+	};
+}
+// src/composables/use-public-events.ts
+function ae(e) {
+	function t(t) {
+		let n = {
+			value: e.value,
+			requirementsMet: e.requirementsMet
+		};
+		e.dispatchEvent(new CustomEvent(t, {
+			bubbles: !0,
+			composed: !0,
+			detail: n
+		}));
+	}
+	return {
+		dispatchInput: () => t("input"),
+		dispatchChange: () => t("change")
+	};
+}
+// src/core/changes.ts
+function z(e, t) {
+	let n = new Map(e.map((e) => [e.requirement, e.met])), r = t.filter((e) => n.get(e.requirement) !== e.met);
+	return r.length === 0 ? null : {
+		met: r.filter((e) => e.met).map((e) => e.requirement),
+		unmet: r.filter((e) => !e.met).map((e) => e.requirement),
+		allMet: t.every((e) => e.met)
+	};
+}
+// src/composables/use-requirements.ts
+function oe({ host: e, props: n, ruleOptions: r, announceOnceTypingPauses: i }) {
+	let a = t(() => r.value ? F(e.state.value, r.value) : []), o = t(() => a.value.map((e) => ({
+		...e,
+		text: l(e.requirement)
+	}))), s = a.value, c = !1;
+	function l(e) {
+		return {
+			length: n.textRuleLength.replaceAll("{minlength}", String(r.value?.minLength ?? "")),
+			lowercase: n.textRuleLowercase,
+			uppercase: n.textRuleUppercase,
+			digit: n.textRuleDigit,
+			symbol: n.textRuleSymbol
+		}[e];
+	}
+	function u(e) {
+		return e.allMet ? n.textAllMet : a.value.filter((t) => e.met.includes(t.requirement) || e.unmet.includes(t.requirement)).map((e) => `${l(e.requirement)}, ${e.met ? n.textRuleMet : n.textRuleUnmet}`).join(". ");
+	}
+	function d() {
+		r.value && (c = !0, i(() => {
+			c = !1;
+			let e = z(s, a.value);
+			return s = a.value, e ? u(e) : "";
+		}));
+	}
+	return v(a, (e) => {
+		c || (s = e);
+	}), {
+		requirementItems: o,
+		reportUserChange: d
+	};
+}
+// src/composables/use-reveal.ts
+function se({ host: e, props: n, input: r, announceNow: i }) {
+	let a = t(() => e.state.revealed), o = t(() => a.value ? "text" : "password"), s = t(() => a.value ? n.textHideLabel : n.textShowLabel);
+	function c() {
+		e.revealed = !e.revealed, i(e.revealed ? n.textShown : n.textHidden);
+	}
+	function d() {
+		e.revealed = !1;
+	}
+	function f(e) {
+		e.target === r.value?.form && d();
+	}
+	return u(() => {
+		window.addEventListener("submit", f, !0), window.addEventListener("reset", f, !0), window.addEventListener("pagehide", d);
+	}), l(() => {
+		window.removeEventListener("submit", f, !0), window.removeEventListener("reset", f, !0), window.removeEventListener("pagehide", d);
+	}), {
+		revealed: a,
+		inputType: o,
+		toggleLabel: s,
+		toggleByUser: c
+	};
+}
+// src/core/validation.ts
+function B({ value: e, required: t, ruleOptions: n, customError: r }, i) {
+	return r ? {
+		flag: "customError",
+		message: r
+	} : e === "" ? t ? {
+		flag: "valueMissing",
+		message: i.required
+	} : null : n ? L(e, n) ? {
+		flag: "tooLong",
+		message: i.tooLong.replaceAll("{maxlength}", String(n.maxLength))
+	} : I(e, n) ? null : {
+		flag: "unmet",
+		message: i.unmet
+	} : null;
+}
+// src/composables/use-validation.ts
+function ce({ host: e, props: n, input: r, ruleOptions: i }) {
+	let { state: a } = e, o = t(() => B({
+		value: a.value,
+		required: n.required,
+		ruleOptions: i.value,
+		customError: a.customError
+	}, {
+		required: n.textRequired,
+		unmet: n.textUnmet,
+		tooLong: n.textTooLong
+	})), s = t(() => a.errorsVisible ? o.value : null);
+	function c() {
+		a.edited = !0, a.customError = "";
+	}
+	function d() {
+		a.errorsVisible = !0;
+	}
+	function f() {
+		a.edited && d();
+	}
+	function p(e) {
+		e.target === r.value?.form && (a.edited = !1, a.errorsVisible = !1, a.customError = "");
+	}
+	return y(() => r.value?.setCustomValidity(o.value?.message ?? ""), { flush: "sync" }), u(() => window.addEventListener("reset", p, !0)), l(() => window.removeEventListener("reset", p, !0)), {
+		visibleError: s,
+		markEdited: c,
+		revealErrors: d,
+		revealErrorsIfEdited: f
+	};
+}
+// src/composables/use-value-sync.ts
+function V({ host: e, input: t }) {
+	function n() {
+		t.value && (e.state.value = t.value.value);
+	}
+	function r(e) {
+		e.target === t.value?.form && setTimeout(n);
+	}
+	return u(() => {
+		n(), window.addEventListener("reset", r, !0);
+	}), l(() => window.removeEventListener("reset", r, !0)), { syncFromInput: n };
+}
+// src/core/ids.ts
+var H = 0;
+function U(e) {
+	return H += 1, `${e}-${H}`;
+}
+// src/props.ts
+var W = {
+	required: !1,
+	disabled: !1,
+	readonly: !1,
+	textShow: "Show",
+	textHide: "Hide",
+	textShowLabel: "Show password",
+	textHideLabel: "Hide password",
+	textShown: "Your password is shown",
+	textHidden: "Your password is hidden",
+	textRequirements: "Your password must have:",
+	textRuleLength: "At least {minlength} characters",
+	textRuleLowercase: "A lowercase letter",
+	textRuleUppercase: "An uppercase letter",
+	textRuleDigit: "A number",
+	textRuleSymbol: "A symbol, like ! or #",
+	textRuleMet: "done",
+	textRuleUnmet: "not yet",
+	textAllMet: "All requirements met",
+	textCapsLock: "Caps Lock is on",
+	textRequired: "Enter a password",
+	textUnmet: "Your password does not meet all the requirements",
+	textTooLong: "Use {maxlength} characters or fewer"
+}, le = { class: "tes-password__field" }, ue = ["for"], de = [
+	"id",
+	"type",
+	"name",
+	"^value",
+	"autocomplete",
+	"passwordrules",
+	"aria-describedby",
+	"aria-invalid",
+	"required",
+	"disabled",
+	"readonly"
+], fe = ["aria-label"], pe = { class: "tes-password__requirements-title" }, me = { class: "tes-password__requirements-list" }, he = {
+	key: 0,
+	class: "tes-password__icon tes-password__icon--met",
+	viewBox: "0 0 16 16",
+	"aria-hidden": "true",
+	focusable: "false"
+}, ge = {
+	key: 1,
+	class: "tes-password__icon tes-password__icon--unmet",
+	viewBox: "0 0 16 16",
+	"aria-hidden": "true",
+	focusable: "false"
+}, G = { class: "tes-password__visually-hidden" }, _e = {
+	role: "status",
+	class: "tes-password__visually-hidden"
+}, K = o(/* @__PURE__ */ a({
+	inheritAttrs: !1,
+	__name: "TesPassword",
+	props: /*@__PURE__*/ s({
+		label: {},
+		name: {},
+		hint: {},
+		required: { type: Boolean },
+		disabled: { type: Boolean },
+		readonly: { type: Boolean },
+		purpose: {},
+		minlength: {},
+		maxlength: {},
+		requirements: {},
+		autocomplete: {},
+		textShow: {},
+		textHide: {},
+		textShowLabel: {},
+		textHideLabel: {},
+		textShown: {},
+		textHidden: {},
+		textRequirements: {},
+		textRuleLength: {},
+		textRuleLowercase: {},
+		textRuleUppercase: {},
+		textRuleDigit: {},
+		textRuleSymbol: {},
+		textRuleMet: {},
+		textRuleUnmet: {},
+		textAllMet: {},
+		textCapsLock: {},
+		textRequired: {},
+		textUnmet: {},
+		textTooLong: {}
+	}, W),
+	setup(a) {
+		let o = a, s = _(), l = ee(), u = te("input"), f = U("tes-password"), p = `${f}-requirements`, y = `${f}-caps-lock`, x = `${f}-hint`, S = `${f}-error`, w = t(() => typeof s.value == "string" ? s.value : void 0), { announcement: T, announceNow: E, announceOnceTypingPauses: D } = C(), { ruleOptions: O, autocomplete: k, rulesForPasswordManagers: A } = ie(o), { revealed: j, inputType: M, toggleLabel: N, toggleByUser: P } = se({
+			host: l,
+			props: o,
+			input: u,
+			announceNow: E
+		}), { syncFromInput: F } = V({
+			host: l,
+			input: u
+		}), { requirementItems: I, reportUserChange: L } = oe({
+			host: l,
+			props: o,
+			ruleOptions: O,
+			announceOnceTypingPauses: D
+		}), { capsLockOn: R, readCapsLock: z, forgetCapsLock: B } = re({
+			props: o,
+			announceNow: E
+		}), { visibleError: H, markEdited: W, revealErrors: K, revealErrorsIfEdited: q } = ce({
+			host: l,
+			props: o,
+			input: u,
+			ruleOptions: O
+		}), J = t(() => {
+			let e = [
+				o.hint && x,
+				I.value.length > 0 && p,
+				R.value && y,
+				H.value && S
+			].filter(Boolean);
+			return e.length > 0 ? e.join(" ") : void 0;
+		}), { dispatchInput: Y, dispatchChange: X } = ae(l);
+		function Z() {
+			W(), F(), L(), Y();
+		}
+		v(() => o.disabled, (e) => {
+			e && (l.revealed = !1);
+		}), ne(l.internals, () => ({
+			invalid: H.value !== null,
+			empty: l.state.value === "",
+			revealed: j.value,
+			"requirements-met": I.value.length > 0 && I.value.every((e) => e.met),
+			"caps-lock": R.value
+		}));
+		function Q() {
+			B(), q();
+		}
+		return (t, o) => (d(), r("div", le, [
+			i("label", {
+				for: g(f),
+				class: "tes-password__label"
+			}, h(a.label), 9, ue),
+			i("div", { class: c(["tes-password__control", { "tes-password__control--invalid": g(H) }]) }, [i("input", {
+				id: g(f),
+				ref_key: "input",
+				ref: u,
+				class: "tes-password__input",
+				type: g(M),
+				name: a.name,
+				"^value": w.value,
+				autocomplete: g(k),
+				passwordrules: g(A),
+				"aria-describedby": J.value,
+				"aria-invalid": g(H) ? "true" : void 0,
+				required: a.required,
+				disabled: a.disabled,
+				readonly: a.readonly,
+				spellcheck: "false",
+				autocapitalize: "off",
+				autocorrect: "off",
+				onInput: b(Z, ["stop"]),
+				onChange: o[0] ||= b((...e) => g(X) && g(X)(...e), ["stop"]),
+				onKeydown: o[1] ||= (...e) => g(z) && g(z)(...e),
+				onKeyup: o[2] ||= (...e) => g(z) && g(z)(...e),
+				onPointerdown: o[3] ||= (...e) => g(z) && g(z)(...e),
+				onBlur: Q,
+				onInvalid: o[4] ||= (...e) => g(K) && g(K)(...e)
+			}, null, 40, de), i("button", {
+				type: "button",
+				class: "tes-password__toggle",
+				"aria-label": g(N),
+				onClick: o[5] ||= (...e) => g(P) && g(P)(...e)
+			}, [i("span", { class: c(["tes-password__toggle-text", { "tes-password__toggle-text--inactive": g(j) }]) }, h(a.textShow), 3), i("span", { class: c(["tes-password__toggle-text", { "tes-password__toggle-text--inactive": !g(j) }]) }, h(a.textHide), 3)], 8, fe)], 2),
+			a.hint ? (d(), r("p", {
+				key: 0,
+				id: x,
+				class: "tes-password__hint"
+			}, h(a.hint), 1)) : n("", !0),
+			g(R) ? (d(), r("p", {
+				key: 1,
+				id: y,
+				class: "tes-password__caps-lock"
+			}, h(a.textCapsLock), 1)) : n("", !0),
+			g(I).length ? (d(), r("div", {
+				key: 2,
+				id: p,
+				class: "tes-password__requirements"
+			}, [i("p", pe, h(a.textRequirements), 1), i("ul", me, [(d(!0), r(e, null, m(g(I), (e) => (d(), r("li", {
+				key: e.requirement,
+				class: c(["tes-password__requirement", { "tes-password__requirement--met": e.met }])
+			}, [
+				e.met ? (d(), r("svg", he, [...o[6] ||= [i("path", { d: "M3.5 8.5l3 3 6-7" }, null, -1)]])) : (d(), r("svg", ge, [...o[7] ||= [i("circle", {
+					cx: "8",
+					cy: "8",
+					r: "5"
+				}, null, -1)]])),
+				i("span", null, h(e.text), 1),
+				i("span", G, ", " + h(e.met ? a.textRuleMet : a.textRuleUnmet), 1)
+			], 2))), 128))])])) : n("", !0),
+			i("p", {
+				id: S,
+				class: "tes-password__error",
+				"aria-live": "polite"
+			}, h(g(H)?.message), 1),
+			i("div", _e, h(g(T)), 1)
+		]));
+	}
+}), { shadowRoot: !1 }), q = class extends K {
+	state = f({
+		revealed: !1,
+		value: "",
+		edited: !1,
+		errorsVisible: !1,
+		customError: ""
+	});
+	internals;
+	pendingValue = null;
+	constructor(e) {
+		super(e), this.internals = this.attachInternals();
+	}
+	get revealed() {
+		return this.state.revealed;
+	}
+	set revealed(e) {
+		e !== this.state.revealed && (this.state.revealed = e, this.syncInputType(), this.dispatchEvent(new CustomEvent("revealchange", {
+			bubbles: !0,
+			composed: !0,
+			detail: { revealed: e }
+		})));
+	}
+	get value() {
+		return this.input?.value ?? this.pendingValue ?? this.defaultValue;
+	}
+	set value(e) {
+		let t = this.input;
+		t ? t.value = e : this.pendingValue = e, this.state.value = e;
+	}
+	get requirementsMet() {
+		if (E(this.getAttribute("purpose")) !== "new") return !0;
+		let e = N({
+			minlength: this.getAttribute("minlength"),
+			maxlength: this.getAttribute("maxlength"),
+			requirements: this.getAttribute("requirements")
+		});
+		return I(this.state.value, e);
+	}
+	get defaultValue() {
+		return this.getAttribute("value") ?? "";
+	}
+	set defaultValue(e) {
+		this.setAttribute("value", e);
+	}
+	get minLength() {
+		return N({ minlength: this.getAttribute("minlength") }).minLength;
+	}
+	set minLength(e) {
+		this.setAttribute("minlength", String(e));
+	}
+	get maxLength() {
+		return N({
+			minlength: 1,
+			maxlength: this.getAttribute("maxlength")
+		}).maxLength ?? -1;
+	}
+	set maxLength(e) {
+		this.setAttribute("maxlength", String(e));
+	}
+	get readOnly() {
+		return this.hasAttribute("readonly");
+	}
+	set readOnly(e) {
+		this.toggleAttribute("readonly", e);
+	}
+	get form() {
+		return this.input?.form ?? null;
+	}
+	get validity() {
+		return (this.input ?? document.createElement("input")).validity;
+	}
+	get validationMessage() {
+		return this.input?.validationMessage ?? "";
+	}
+	get willValidate() {
+		return this.input?.willValidate ?? !1;
+	}
+	setCustomValidity(e) {
+		this.state.customError = e, e && (this.state.errorsVisible = !0);
+	}
+	checkValidity() {
+		return this.input?.checkValidity() ?? !0;
+	}
+	reportValidity() {
+		return this.input?.reportValidity() ?? !0;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.applyPendingValue();
+	}
+	focus(e) {
+		this.input?.focus(e);
+	}
+	get input() {
+		return this.querySelector(".tes-password__input");
+	}
+	syncInputType() {
+		let e = this.input;
+		e && (e.type = this.state.revealed ? "text" : "password");
+	}
+	applyPendingValue() {
+		let e = this.input;
+		e && this.pendingValue !== null && (e.value = this.pendingValue, this.state.value = this.pendingValue, this.pendingValue = null);
+	}
+}, J = ":where(tes-password){--_text:var(--tes-color-text,light-dark(#1f2328,#e8eaee));--_muted:var(--tes-color-muted,light-dark(#59636e,#a3adba));--_bg:var(--tes-color-bg,light-dark(#fff,#16181d));--_border:var(--tes-color-border,light-dark(#7d8590,#7f8a99));--_accent:var(--tes-color-accent,light-dark(#0b5fcc,#7aa7ff));--_on-accent:var(--tes-color-on-accent,light-dark(#fff,#0d1117));--_hover:var(--tes-color-hover,light-dark(#eef3fb,#232a36));--_focus:var(--tes-color-focus,light-dark(#0b5fcc,#7aa7ff));--_error:var(--tes-color-error,light-dark(#c4232b,#ff8a80));--_success:var(--tes-color-success,light-dark(#1f7a3a,#4cc26a));--_radius:var(--tes-radius,.375rem);--_space:var(--tes-space,.5rem);--_control-height:2.75rem;color:var(--_text);font-family:var(--tes-font-family);font-size:var(--tes-font-size);display:inline-block}:where(tes-password[hidden]){display:none}:where(.tes-password__field){gap:calc(var(--_space) / 2);grid-template-columns:minmax(0,1fr);display:grid}:where(.tes-password__label){font-weight:500}:where(.tes-password__control){box-sizing:border-box;block-size:var(--_control-height);border:1px solid var(--_border);border-radius:var(--_radius);background:var(--_bg);display:flex}:where(.tes-password__control--invalid){border:2px solid var(--_error)}:where(.tes-password__control:has(.tes-password__input:focus-visible)){outline:2px solid var(--_focus);outline-offset:2px}:where(.tes-password__input){box-sizing:border-box;border-radius:var(--_radius);min-inline-size:0;color:var(--_text);font:inherit;background:0 0;border:0;outline:none;flex:1;margin:0;padding-inline:.75rem;font-size:max(1em,16px)}:where(.tes-password__toggle){border-radius:var(--_radius);min-inline-size:2.75rem;color:var(--_accent);font:inherit;cursor:pointer;background:0 0;border:0;flex:none;place-items:center;margin:0;padding-inline:.75rem;font-weight:500;display:grid}:where(.tes-password__control:has(.tes-password__input:disabled)){background:color-mix(in srgb, var(--_muted) 12%, var(--_bg))}:where(.tes-password__input:disabled){color:var(--_muted);cursor:not-allowed}:where(.tes-password__input:disabled~.tes-password__toggle){display:none}:where(.tes-password__toggle-text){grid-area:1/1}:where(.tes-password__toggle-text--inactive){visibility:hidden}:where(.tes-password__toggle:hover){background:var(--_hover)}:where(.tes-password__toggle:focus-visible){outline:2px solid var(--_focus);outline-offset:-2px}:where(.tes-password__hint){color:var(--_muted);margin:0;padding-block-start:.25rem;font-size:.875em}:where(.tes-password__caps-lock){margin:0;padding-block-start:.25rem;font-size:.875em;font-weight:500}:where(.tes-password__requirements){color:var(--_muted);padding-block-start:.25rem;font-size:.875em}:where(.tes-password__requirements-title){margin:0}:where(.tes-password__requirements-list){gap:.125rem;margin:.25rem 0 0;padding:0;list-style:none;display:grid}:where(.tes-password__requirement){align-items:center;gap:.375rem;margin:0;display:flex}:where(.tes-password__requirement--met){color:var(--_text)}:where(.tes-password__icon){fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;flex:none;block-size:1em;inline-size:1em}:where(.tes-password__icon--met){stroke:var(--_success);stroke-width:2px}:where(.tes-password__error){color:var(--_error);margin:0;font-size:.875em;font-weight:500}:where(.tes-password__error:empty){display:none}:where(.tes-password__visually-hidden){clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (forced-colors:active){:where(.tes-password__control:has(.tes-password__input:focus-visible)),:where(.tes-password__toggle:focus-visible){outline-color:highlight}:where(.tes-password__input:disabled){color:graytext}}", Y = ":where(tes-password";
+function X(e) {
+	return J.replaceAll(Y, `:where(${e}`);
+}
+function Z(e) {
+	if (typeof document > "u" || typeof CSSStyleSheet > "u") return;
+	let t = new CSSStyleSheet();
+	t.replaceSync(X(e)), document.adoptedStyleSheets = [...document.adoptedStyleSheets, t];
+}
+// src/index.ts
+var Q = "tes-password";
+function $(e = Q) {
+	if (typeof customElements > "u" || customElements.get(e)) return;
+	let t = class extends q {};
+	customElements.define(e, e === "tes-password" ? q : t), Z(e);
+}
+$();
+export { Q as TAG_NAME, q as TesPasswordElement, $ as define };
+
+//# sourceMappingURL=tes-password.js.map