@mkbabb/glass-ui 4.2.0 → 6.0.0

package/dist/sortable-list.js

@@ -1,83 +1,408 @@
-import { t as e } from "./_plugin-vue_export-helper-gLzyemvl.js";
-import { n as t } from "./createContext-Cd23P9j0.js";
-import { t as n } from "./useSortable-DQV_UNDw.js";
-import { computed as r, createBlock as i, defineComponent as a, mergeProps as o, openBlock as s, renderSlot as c, resolveDynamicComponent as l, toRef as u, unref as d, withCtx as f } from "vue";
-//#region src/components/custom/sortable-list/context.ts
-var p = t("glass-ui:sortable", "[glass-ui:sortable] <SortableItem> must be used inside <SortableList>"), m = p.KEY;
-function h(e) {
-	p.provide(e);
+import { t as e } from "./_plugin-vue_export-helper-C1je1s0u.js";
+import { n as t } from "./createContext-FU0n5MGK.js";
+import { Fragment as n, computed as r, createElementBlock as i, createElementVNode as a, defineComponent as o, mergeProps as s, nextTick as c, onScopeDispose as l, openBlock as u, renderSlot as d, shallowRef as f, toDisplayString as p, toRef as m, unref as h, useAttrs as g } from "vue";
+//#region src/components/sortable-list/composables/dropResolver.ts
+var _ = /* @__PURE__ */ new Set();
+function v(e, t, n, r, i) {
+	let a = i ? n : r;
+	for (let n = 0; n < t.length; n++) {
+		let r = e.get(t[n].id);
+		if (!r) continue;
+		let o = r.getBoundingClientRect();
+		if (a < (i ? o.left + o.width / 2 : o.top + o.height / 2)) return n;
+	}
+	return t.length;
+}
+function y(e, t, n) {
+	if (!e.group) return null;
+	for (let r of _) {
+		if (r === e || r.group !== e.group) continue;
+		let i = r.getContainer();
+		if (!i) continue;
+		let a = i.getBoundingClientRect();
+		if (t >= a.left && t <= a.right && n >= a.top && n <= a.bottom) return r;
+	}
+	return null;
+}
+//#endregion
+//#region src/components/sortable-list/composables/touchGate.ts
+function b(e, t) {
+	return t === null ? !0 : e instanceof Element ? e.closest(t) !== null : !1;
+}
+function x(e, t) {
+	if (e && "setPointerCapture" in e) try {
+		return e.setPointerCapture(t), !0;
+	} catch {
+		return !1;
+	}
+	return !0;
+}
+//#endregion
+//#region src/components/sortable-list/composables/transitionTiming.ts
+var S = "is-sortable-drop-above", C = "is-sortable-drop-below", w = "sortable-drag-ghost", T = "is-sortable-dragging";
+function E(e, t, n) {
+	return e < 0 ? {
+		above: !1,
+		below: !1
+	} : t === n ? {
+		above: !1,
+		below: e === n - 1
+	} : {
+		above: e === t,
+		below: !1
+	};
+}
+function D(e) {
+	let t = {
+		[S]: !1,
+		[C]: !1
+	};
+	if (e.isLocalDragging && e.localDrop !== null) {
+		let n = E(e.rowIndex, e.localDrop, e.listLength);
+		n.above && (t[S] = !0), n.below && (t[C] = !0);
+	}
+	if (e.externalDrop !== null && !e.isLocalDragging) {
+		let n = E(e.rowIndex, e.externalDrop, e.listLength);
+		n.above && (t[S] = !0), n.below && (t[C] = !0);
+	}
+	return t;
 }
-var g = p.use, _ = /* @__PURE__ */ a({
+//#endregion
+//#region src/components/sortable-list/composables/dragController.ts
+function O(e) {
+	let t = f(null), n = f(null), r = f(null), i = f(!0), a = null, o = null, s = null, c = null;
+	function l(t) {
+		return e.getItems().findIndex((n) => e.getId(n) === t);
+	}
+	function u(t) {
+		let n = e.getItems().find((n) => e.getId(n) === t);
+		return n === void 0 ? String(t) : e.getLabel(n);
+	}
+	function d(n, i) {
+		if (t.value !== null) return !1;
+		let c = l(n), d = e.elements.get(n);
+		return c < 0 || !(d instanceof HTMLElement) ? !1 : (t.value = n, a = i, o = {
+			index: c,
+			target: null
+		}, r.value = c, s = d, s.classList.add(T), e.announce(`Lifted ${u(n)}, position ${c + 1} of ${e.getItems().length}.`), !0);
+	}
+	function p(n, i, a = !1) {
+		let s = t.value;
+		if (s === null) return;
+		o?.target && o.target !== i && o.target.setExternalDropIndex(null);
+		let c = i ? i.getItems().length + 1 : e.getItems().length, l = Math.max(0, c - 1), d = Math.min(Math.max(n, 0), l);
+		o = {
+			index: d,
+			target: i
+		}, i ? (i.setExternalDropIndex(d), r.value = null) : r.value = d, a && e.announce(`${u(s)}, proposed position ${d + 1} of ${c}.`);
+	}
+	function m() {
+		o?.target?.setExternalDropIndex(null), e.ghost.destroyGhost(), s?.classList.remove(T), s = null, c = null, t.value = null, n.value = null, r.value = null, a = null, o = null, document.removeEventListener("pointermove", S), document.removeEventListener("pointerup", C), document.removeEventListener("pointercancel", w);
+	}
+	function h() {
+		let n = t.value, r = o;
+		if (n === null || r === null) return;
+		let i = e.getItems(), a = i.findIndex((t) => e.getId(t) === n);
+		if (a < 0) {
+			m();
+			return;
+		}
+		let s = i[a], c = e.getLabel(s), l = r.target, u = r.index, d = l ? l.getItems().length + 1 : i.length;
+		if (m(), l) {
+			let t = i.slice();
+			t.splice(a, 1), e.onReorder(t), l.acceptExternal(u, s), e.announce(`Moved ${c} from ${e.handle.label} to ${l.label}, position ${u + 1} of ${d}.`), l.focusItem(n);
+			return;
+		}
+		if (u !== a) {
+			let t = i.slice(), [n] = t.splice(a, 1);
+			t.splice(u, 0, n), e.onReorder(t);
+		}
+		e.announce(`Dropped ${c}, position ${u + 1} of ${i.length}.`), e.focusItem(n);
+	}
+	function g() {
+		let n = t.value;
+		if (n === null) return;
+		let r = l(n), i = u(n);
+		m(), e.announce(`Cancelled moving ${i}. Position ${r + 1} of ${e.getItems().length}.`), e.focusItem(n);
+	}
+	function _() {
+		t.value !== null && m();
+	}
+	function b(t, r) {
+		d(t, "pointer") && (c = r.pointerId, n.value = {
+			x: r.clientX,
+			y: r.clientY
+		}, s && e.ghost.createGhost(s, r.clientX, r.clientY), i.value = x(r.currentTarget, r.pointerId), document.addEventListener("pointermove", S), document.addEventListener("pointerup", C), document.addEventListener("pointercancel", w));
+	}
+	function S(r) {
+		let i = t.value;
+		if (i === null || a !== "pointer" || r.pointerId !== c) return;
+		n.value = {
+			x: r.clientX,
+			y: r.clientY
+		}, e.ghost.updateGhost(r.clientX, r.clientY);
+		let o = y(e.handle, r.clientX, r.clientY);
+		if (o) {
+			p(v(o.getElements(), o.getItems().map((e) => ({ id: o.getId(e) })), r.clientX, r.clientY, e.horizontal), o);
+			return;
+		}
+		let s = e.getItems(), u = l(i), d = v(e.elements, s.map((t) => ({ id: e.getId(t) })), r.clientX, r.clientY, e.horizontal);
+		p(d > u ? d - 1 : d, null);
+	}
+	function C(e) {
+		e.pointerId === c && h();
+	}
+	function w(e) {
+		e.pointerId === c && g();
+	}
+	function E(n, r) {
+		let i = r.key;
+		if (i === " " || i === "Enter") {
+			r.preventDefault(), t.value === null ? d(n, "keyboard") : t.value === n && a === "keyboard" && h();
+			return;
+		}
+		if (t.value !== n || a !== "keyboard") return;
+		if (i === "Escape") {
+			r.preventDefault(), g();
+			return;
+		}
+		let s = o?.index ?? l(n);
+		if (i === "ArrowUp" || i === "ArrowLeft") --s;
+		else if (i === "ArrowDown" || i === "ArrowRight") s += 1;
+		else if (i === "Home") s = 0;
+		else if (i === "End") s = e.getItems().length - 1;
+		else return;
+		r.preventDefault(), p(s, null, !0);
+	}
+	return {
+		dragId: t,
+		pos: n,
+		dropIndex: r,
+		pointerCaptureActive: i,
+		beginPointer: b,
+		onKeydown: E,
+		cancel: g,
+		dispose: _
+	};
+}
+//#endregion
+//#region src/components/sortable-list/composables/ghostRenderer.ts
+function k(e) {
+	return e ? e.replace(/\//g, " ").split(/\s+/).filter(Boolean).some((e) => parseFloat(e) !== 0) : !1;
+}
+function A(e) {
+	let t = getComputedStyle(e).borderRadius;
+	if (k(t)) return t;
+	for (let t of e.querySelectorAll("*")) {
+		let e = getComputedStyle(t).borderRadius;
+		if (k(e)) return e;
+	}
+	return null;
+}
+function j() {
+	let e = null, t = 0, n = 0;
+	function r(r, i, a) {
+		let o = r.getBoundingClientRect();
+		t = i - o.left, n = a - o.top;
+		let s = r.cloneNode(!0);
+		s.classList.add(w);
+		let c = A(r);
+		c && (s.style.borderRadius = c), s.style.position = "fixed", s.style.left = `${o.left}px`, s.style.top = `${o.top}px`, s.style.width = `${o.width}px`, s.style.height = `${o.height}px`, s.style.margin = "0", s.style.pointerEvents = "none", s.style.zIndex = "9999", s.id && s.removeAttribute("id");
+		for (let e of s.querySelectorAll("[id]")) e.removeAttribute("id");
+		document.body.appendChild(s), e = s;
+	}
+	function i(r, i) {
+		e && (e.style.left = `${r - t}px`, e.style.top = `${i - n}px`);
+	}
+	function a() {
+		e && e.parentNode && e.parentNode.removeChild(e), e = null;
+	}
+	return {
+		createGhost: r,
+		updateGhost: i,
+		destroyGhost: a
+	};
+}
+//#endregion
+//#region src/components/sortable-list/composables/useSortable.ts
+var M = "[data-sortable-handle]";
+function N(e) {
+	let { items: t, getId: n, getLabel: i = (e) => String(n(e)), label: a = "Sortable list", onReorder: o, onInsert: s, group: u, handleSelector: d = M, axis: p = "y" } = e, m = /* @__PURE__ */ new Map(), h = /* @__PURE__ */ new Map(), g = f(null), v = f(""), y = null;
+	function x(e) {
+		return t.value.findIndex((t) => n(t) === e);
+	}
+	function S(e) {
+		let r = t.value.find((t) => n(t) === e);
+		return r === void 0 ? String(e) : i(r);
+	}
+	function C(e) {
+		c(() => {
+			m.get(e)?.querySelector("[data-sortable-handle]")?.focus();
+		});
+	}
+	let w = {
+		group: u,
+		label: a,
+		getContainer: () => y,
+		getItems: () => t.value,
+		getId: (e) => n(e),
+		getElements: () => m,
+		setExternalDropIndex: (e) => {
+			g.value = e;
+		},
+		acceptExternal: (e, t) => s?.(e, t),
+		focusItem: C
+	}, T = O({
+		getItems: () => t.value,
+		getId: (e) => n(e),
+		getLabel: (e) => i(e),
+		elements: m,
+		handle: w,
+		onReorder: (e) => o(e),
+		horizontal: p === "x",
+		ghost: j(),
+		announce: (e) => {
+			v.value = e;
+		},
+		focusItem: C
+	});
+	function E(e, n = () => !1) {
+		let i = h.get(e);
+		if (i) return i;
+		let a = r(n), o = {
+			ref: (t) => {
+				t instanceof Element ? m.set(e, t) : m.delete(e);
+			},
+			dataAttrs: { "data-sortable-id": String(e) },
+			disabled: a,
+			class: r(() => {
+				let n = T.dragId.value === null ? -1 : x(T.dragId.value), r = T.dropIndex.value, i = r === null || n < 0 ? null : r > n ? r + 1 : r;
+				return D({
+					rowIndex: x(e),
+					listLength: t.value.length,
+					localDrop: i,
+					isLocalDragging: T.dragId.value !== null,
+					externalDrop: g.value
+				});
+			}),
+			onPointerdown: (t) => {
+				a.value || t.button !== 0 || b(t.target, d) && T.beginPointer(e, t);
+			},
+			onKeydown: (t) => {
+				a.value || T.onKeydown(e, t);
+			}
+		};
+		return h.set(e, o), o;
+	}
+	let k = {
+		ref: (e) => {
+			y = e instanceof Element ? e : null;
+		},
+		dataAttrs: { "data-sortable-container": u ?? "" }
+	};
+	return _.add(w), l(() => {
+		_.delete(w), T.dispose();
+	}), {
+		registerItem: E,
+		container: k,
+		isDragging: r(() => T.dragId.value !== null),
+		dragId: r(() => T.dragId.value),
+		dragPosition: r(() => T.pos.value),
+		dropIndex: r(() => T.dropIndex.value),
+		pointerCaptureActive: r(() => T.pointerCaptureActive.value),
+		announcement: r(() => v.value),
+		getItemLabel: S
+	};
+}
+//#endregion
+//#region src/components/sortable-list/context.ts
+var P = t("glass-ui:sortable-list", "[glass-ui] <SortableItem> must be used inside <SortableList>"), F = P.provide, I = P.use, L = t("glass-ui:sortable-item", "[glass-ui] <SortableHandle> must be used inside <SortableItem>"), R = L.provide, z = L.use, B = ["aria-label"], V = {
+	class: "sr-only",
+	"aria-live": "polite",
+	"aria-atomic": "true"
+}, H = /* @__PURE__ */ o({
+	inheritAttrs: !1,
 	__name: "SortableList",
 	props: {
 		items: {},
 		getId: {},
+		getLabel: {},
+		label: { default: "Sortable list" },
 		group: {},
 		handleSelector: { default: "[data-sortable-handle]" },
-		axis: { default: "y" },
-		as: { default: "div" }
+		axis: { default: "y" }
 	},
 	emits: ["reorder", "insert"],
 	setup(e, { expose: t, emit: r }) {
-		let a = e, p = r, m = n({
-			items: u(a, "items"),
-			getId: a.getId,
-			group: a.group,
-			handleSelector: a.handleSelector,
-			axis: a.axis,
-			onReorder: (e) => p("reorder", e),
-			onInsert: (e, t) => p("insert", e, t)
+		let o = e, c = g(), l = r, f = N({
+			items: m(o, "items"),
+			getId: o.getId,
+			getLabel: o.getLabel,
+			label: o.label,
+			group: o.group,
+			handleSelector: o.handleSelector,
+			axis: o.axis,
+			onReorder: (e) => l("reorder", e),
+			onInsert: (e, t) => l("insert", e, t)
 		});
-		return h(m), t({
-			isDragging: m.isDragging,
-			dragId: m.dragId
-		}), (t, n) => (s(), i(l(e.as), o({ ref: d(m).container.ref }, d(m).container.dataAttrs), {
-			default: f(() => [c(t.$slots, "default", {
-				isDragging: d(m).isDragging.value,
-				dragId: d(m).dragId.value
-			})]),
-			_: 3
-		}, 16));
-	}
-}), v = /* @__PURE__ */ e(/* @__PURE__ */ a({
+		return F(f), t({
+			isDragging: f.isDragging,
+			dragId: f.dragId
+		}), (t, r) => (u(), i(n, null, [a("ul", s({ ref: h(f).container.ref }, {
+			...h(c),
+			...h(f).container.dataAttrs
+		}, { "aria-label": e.label }), [d(t.$slots, "default", {
+			isDragging: h(f).isDragging.value,
+			dragId: h(f).dragId.value
+		})], 16, B), a("span", V, p(h(f).announcement.value), 1)], 64));
+	}
+}), U = ["aria-disabled", "data-disabled"], W = /* @__PURE__ */ e(/* @__PURE__ */ o({
 	__name: "SortableItem",
 	props: {
 		id: {},
-		as: { default: "div" }
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
 	},
 	setup(e) {
-		let t = e, n = g(), a = r(() => n.registerItem(t.id)), u = r(() => n.dragId.value === t.id);
-		return (t, n) => (s(), i(l(e.as), o({
-			ref: a.value.ref,
+		let t = e, n = I(), a = n.registerItem(t.id, () => t.disabled), o = r(() => n.getItemLabel(t.id)), c = r(() => n.dragId.value === t.id);
+		return R({
+			id: t.id,
+			label: o,
+			binding: a
+		}), (t, n) => (u(), i("li", s({
+			ref: h(a).ref,
 			class: [
 				"sortable-item",
-				a.value.class.value,
-				{ "is-sortable-dragging": u.value }
+				h(a).class.value,
+				{ "is-sortable-dragging": c.value }
 			]
-		}, a.value.dataAttrs, { onPointerdown: a.value.onPointerdown }), {
-			default: f(() => [c(t.$slots, "default", { isBeingDragged: u.value }, void 0, !0)]),
-			_: 3
-		}, 16, ["class", "onPointerdown"]));
+		}, h(a).dataAttrs, {
+			"aria-disabled": e.disabled || void 0,
+			"data-disabled": e.disabled || void 0,
+			onPointerdown: n[0] ||= (...e) => h(a).onPointerdown && h(a).onPointerdown(...e),
+			onKeydown: n[1] ||= (...e) => h(a).onKeydown && h(a).onKeydown(...e)
+		}), [d(t.$slots, "default", { isBeingDragged: c.value }, void 0, !0)], 16, U));
 	}
-}), [["__scopeId", "data-v-ca5cd3d7"]]), y = /* @__PURE__ */ e(/* @__PURE__ */ a({
+}), [["__scopeId", "data-v-c8dee7e3"]]), G = [
+	"type",
+	"disabled",
+	"aria-label"
+], K = /* @__PURE__ */ e(/* @__PURE__ */ o({
+	inheritAttrs: !1,
 	__name: "SortableHandle",
-	props: {
-		as: { default: "span" },
-		type: {}
-	},
+	props: { type: { default: "button" } },
 	setup(e) {
-		let t = e, n = r(() => t.as === "span"), a = r(() => t.as === "button" ? { type: t.type } : {});
-		return (t, r) => (s(), i(l(e.as), o({
+		let t = g(), n = z(), a = r(() => t["aria-label"] ?? `Reorder ${n.label.value}`);
+		return (r, o) => (u(), i("button", s(h(t), {
+			type: e.type,
 			class: "sortable-handle",
-			"data-sortable-handle": ""
-		}, a.value, {
-			role: n.value ? "button" : void 0,
-			tabindex: n.value ? 0 : void 0
-		}), {
-			default: f(() => [c(t.$slots, "default", {}, void 0, !0)]),
-			_: 3
-		}, 16, ["role", "tabindex"]));
-	}
-}), [["__scopeId", "data-v-814313b7"]]);
+			"data-sortable-handle": "",
+			disabled: h(n).binding.disabled.value,
+			"aria-label": a.value
+		}), [d(r.$slots, "default", {}, void 0, !0)], 16, G));
+	}
+}), [["__scopeId", "data-v-fd52a6c0"]]);
 //#endregion
-export { m as SORTABLE_CONTEXT, y as SortableHandle, v as SortableItem, _ as SortableList, h as provideSortableContext, g as useSortableContext };
+export { K as SortableHandle, W as SortableItem, H as SortableList };

package/dist/spa-view.d.ts

@@ -1 +1 @@
-export * from "./components/custom/spa-view";
+export * from "./components/spa-view";

package/dist/spa-view.js

@@ -1,6 +1,6 @@
 import { KeepAlive as e, Transition as t, computed as n, createBlock as r, createElementBlock as i, defineComponent as a, openBlock as o, renderSlot as s, resolveDynamicComponent as c, withCtx as l } from "vue";
 //#endregion
-//#region src/components/custom/spa-view/SpaView.vue
+//#region src/components/spa-view/SpaView.vue
 var u = /* @__PURE__ */ a({
 	__name: "SpaView",
 	props: {

package/dist/springPresets-h5VKJQqG.js

@@ -0,0 +1,58 @@
+//#region src/composables/motion/springPresets.ts
+var e = [
+	{
+		name: "smooth",
+		response: .58,
+		dampingFraction: .8,
+		comment: "The settle register — patient entrances, fades and scale-ins: weighty, with a whisper of life (+1.5%), never a dead stop."
+	},
+	{
+		name: "snappy",
+		response: .48,
+		dampingFraction: .74,
+		comment: "The control register — the quick-but-weighty position morph (tab indicator, progress fill, the reveal bloom, page-build): arrives at half-clock with a small gooey overshoot (+3.2%)."
+	},
+	{
+		name: "bouncy",
+		response: .6,
+		dampingFraction: .6,
+		comment: "The playful register — the emphatic one-shot (dialog and success entrances, the completion seal): flowing, not flicking, with a soft 9.5% overshoot and extra inertia."
+	},
+	{
+		name: "gentle",
+		response: .82,
+		dampingFraction: 1,
+		comment: "The gentle register — the patient critically-damped settle (the --ease-convergence alias): a slow inertial arrival at ζ=1.0, so it never overshoots (the convergence reveal depends on it)."
+	},
+	{
+		name: "dock",
+		response: .3,
+		dampingFraction: .82,
+		comment: "The dock register — the brisk iOS liquid morph: response 0.30, damping 0.82, a tiny overshoot (~1.2%). Powers the dock expand/collapse and everything inside it. Apple's liquid is brisk with coupled channels — weight is not slowness."
+	},
+	{
+		name: "press",
+		response: .2,
+		dampingFraction: .8,
+		comment: "The press register — the interactive tap-press: a hair of inertial carry (sub-200ms) with a tiny alive rebound (+1.5%); the interruptible re-seat keeps the gesture continuous."
+	},
+	{
+		name: "transient",
+		response: .62,
+		dampingFraction: .9,
+		comment: "The transient register — the center-seed materialize bloom (Toast and Notification): a deep scale-from with a near-critically-damped settle (~+0.15% overshoot, no flick), reaching 90% at ~0.34s and settling by ~0.46s. Consumed by the --enter-transient-* register."
+	},
+	{
+		name: "eyeglass",
+		response: .36,
+		dampingFraction: .64,
+		comment: "The eyeglass register — the iOS tab-pill loupe travel: snappy-class speed (response 0.36) with dock-class give (ζ 0.64, ~7.3% overshoot) for a leading-edge liquid arrival. The release is edge-asymmetric — a faster lead recovery (~117ms) than trail lag (~270ms)."
+	}
+];
+function t(t) {
+	let n = e.find((e) => e.name === t);
+	if (!n) throw Error(`Unknown spring preset: ${t}`);
+	return n;
+}
+//#endregion
+export { t as n, e as t };

package/dist/status-dot.d.ts

@@ -1 +1 @@
-export * from "./components/custom/status-dot";
+export * from "./components/status-dot";

package/dist/status-dot.js

@@ -1,6 +1,6 @@
-import { t as e } from "./cn-DJXf4yaB.js";
+import { t as e } from "./class-names-5jotTFzp.js";
 import { computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, normalizeClass as o, normalizeStyle as s, openBlock as c, toDisplayString as l, unref as u } from "vue";
-//#region src/components/custom/status-dot/StatusDot.vue?vue&type=script&setup=true&lang.ts
+//#region src/components/status-dot/StatusDot.vue?vue&type=script&setup=true&lang.ts
 var d = ["role"], f = ["data-status"], p = {
 	key: 0,
 	class: "text-xs leading-none text-muted-foreground"

package/dist/styles/accessibility.css

@@ -0,0 +1 @@
+@import "./glass/a11y-fallback.css"; @import "./utilities/a11y-overrides.css"; @media (prefers-contrast: more) { :is( [aria-current]:not([aria-current="false"]), [aria-selected="true"], [aria-pressed="true"], [aria-checked="true"], [data-state="checked"], [data-state="on"] ) { border-color: currentColor !important; border-style: solid !important; border-width: 2px !important; } :is([aria-invalid="true"], :user-invalid) { border-color: var(--destructive) !important; border-style: solid !important; border-width: 2px !important; } } @media (forced-colors: active) { :is( [aria-current]:not([aria-current="false"]), [aria-selected="true"], [aria-pressed="true"], [aria-checked="true"], [data-state="checked"], [data-state="on"] ) { border-color: Highlight !important; border-style: solid !important; border-width: 2px !important; } :is([aria-invalid="true"], :user-invalid) { border-color: Mark !important; border-style: solid !important; border-width: 2px !important; } }