@ntix/components-scorad 1.0.0 → 1.0.2

package/dist/@ntix/components-scorad.es.js

@@ -15,10 +15,10 @@ var cache = /* @__PURE__ */ new Map(), asCachedStyle = (t) => t == null ? [] : (
 	return { list: (t, n, r) => {
 		if (t.dataset[e]) return;
 		t.dataset[e] = "true";
-		let i = (e, n) => e.find((e) => e instanceof HTMLElement && t.contains(e) && n(e)), a = (e, n, r = () => !0) => !(e instanceof Node) || !t.contains(e) ? null : e == null || e instanceof HTMLElement && r(e) ? e : a(n(e), n, r), o = (e) => a(e?.nextSibling, (e) => e?.nextSibling), s = (e, t) => (n) => n instanceof HTMLElement && (e ?? ((e) => e.classList.contains(t)))(n), c = () => Array.from(t.children).filter(u).reduce((e, t) => e.set(t, t.getBoundingClientRect()), /* @__PURE__ */ new Map()), l = s(r?.gripSelector, "drag-grip"), u = s(r?.itemSelector, "drag-item"), d, f, p, m = 0, h, g, ze = (e) => {
+		let i = (e, n) => e.find((e) => e instanceof HTMLElement && t.contains(e) && n(e)), a = (e, n, r = () => !0) => !(e instanceof Node) || !t.contains(e) ? null : e == null || e instanceof HTMLElement && r(e) ? e : a(n(e), n, r), o = (e) => a(e?.nextSibling, (e) => e?.nextSibling), s = (e, t) => (n) => n instanceof HTMLElement && (e ?? ((e) => e.classList.contains(t)))(n), c = () => Array.from(t.children).filter(u).reduce((e, t) => e.set(t, t.getBoundingClientRect()), /* @__PURE__ */ new Map()), l = s(r?.gripSelector, "drag-grip"), u = s(r?.itemSelector, "drag-item"), d, f, p, m = 0, h, g, _ = (e) => {
 			let n = e.composedPath();
-			d = i(n, l), d && (e.preventDefault(), e.stopPropagation(), window.getSelection()?.removeAllRanges(), f = c(), p = i(n, u), m = e.clientY, h = p.dataset.id, p.classList.add("dragging"), p.style.pointerEvents = "none", p.style.zIndex = "2", t.style.touchAction = "none", t.style.userSelect = "none", document.addEventListener("pointermove", _), document.addEventListener("pointerup", v));
-		}, _ = (e) => {
+			d = i(n, l), d && (e.preventDefault(), e.stopPropagation(), window.getSelection()?.removeAllRanges(), f = c(), p = i(n, u), m = e.clientY, h = p.dataset.id, p.classList.add("dragging"), p.style.pointerEvents = "none", p.style.zIndex = "2", t.style.touchAction = "none", t.style.userSelect = "none", document.addEventListener("pointermove", ze), document.addEventListener("pointerup", v));
+		}, ze = (e) => {
 			if (!p || !f) throw Error("drag item is undefined");
 			let n = f.get(p), r = null;
 			for (let [t, i] of f.entries()) {
@@ -36,7 +36,7 @@ var cache = /* @__PURE__ */ new Map(), asCachedStyle = (t) => t == null ? [] : (
 			p.style.transform = `translateY(${e.clientY - m}px)`;
 		}, v = (e) => {
 			if (!p) throw Error("drag item is undefined");
-			e.stopPropagation(), document.removeEventListener("pointermove", _), document.removeEventListener("pointerup", v), p.classList.remove("dragging"), p.style.transform = "", p.style.pointerEvents = "", p.style.zIndex = "", p = void 0, t.style.touchAction = "", t.style.userSelect = "", h && g && (n(h, g), h = void 0, g = void 0);
+			e.stopPropagation(), document.removeEventListener("pointermove", ze), document.removeEventListener("pointerup", v), p.classList.remove("dragging"), p.style.transform = "", p.style.pointerEvents = "", p.style.zIndex = "", p = void 0, t.style.touchAction = "", t.style.userSelect = "", h && g && (n(h, g), h = void 0, g = void 0);
 		}, y = (e) => {
 			if (!e.altKey) return;
 			let r = (e, r) => {
@@ -62,8 +62,8 @@ var cache = /* @__PURE__ */ new Map(), asCachedStyle = (t) => t == null ? [] : (
 				}
 			}
 		};
-		return t.addEventListener("pointerdown", ze), t.addEventListener("keydown", y), () => {
-			t.removeEventListener("pointerdown", ze), t.removeEventListener("keydown", y);
+		return t.addEventListener("pointerdown", _), t.addEventListener("keydown", y), () => {
+			t.removeEventListener("pointerdown", _), t.removeEventListener("keydown", y);
 		};
 	} };
 })();
@@ -112,7 +112,34 @@ var provideLogger = (() => {
 		if (e) return e;
 		n = Object.getPrototypeOf(n);
 	}
-}, objectKeys = (e) => Object.keys(e);
+};
+function splitPath(e) {
+	return e.split(/\.|\[|\]\.?/).filter((e) => e !== "").map((e) => {
+		let t = Number.parseInt(e);
+		return isNaN(t) ? e : t;
+	});
+}
+function getValue(e, t) {
+	let n = splitPath(t);
+	for (let t = 0; t < n.length; t++) {
+		if (e == null) return;
+		let r = n[t];
+		e = e[r];
+	}
+	return e;
+}
+var objectKeys = (e) => Object.keys(e);
+function setValue(e, t, n) {
+	let r = t.match(/[^.\[\]]+/g);
+	if (!r) return n;
+	let i = { ...e }, a = i;
+	for (let e = 0; e < r.length - 1; e++) {
+		let t = r[e], n = r[e + 1], i = !isNaN(Number(n));
+		t in a ? Array.isArray(a[t]) ? a[t] = [...a[t]] : a[t] = { ...a[t] } : a[t] = i ? [] : {}, a = a[t];
+	}
+	let o = r[r.length - 1];
+	return a[o] = n, i;
+}
 function isPromise(e) {
 	return e != null && typeof e.then == "function";
 }
@@ -127,6 +154,7 @@ var Success = class {
 	orNull() {
 		return this.value;
 	}
+	errors = [];
 }, Failure = class e {
 	constructor(e) {
 		this.errors = e;
@@ -257,22 +285,22 @@ function Component(e = { tag: void 0 }) {
 				r?.read && (this[r.propertyName] = r.read(n));
 			}
 		};
-		let d = o.prototype.connectedCallback ?? n;
+		let u = o.prototype.connectedCallback ?? n;
 		o.prototype.connectedCallback = function() {
 			a.forEach((e) => e()), (i.shadowRoot === "open" || i.shadowRoot === "closed") && !this.__shadowRoot && (this.__shadowRoot = this.attachShadow({
 				delegatesFocus: i.delegatesFocus,
 				mode: i.shadowRoot,
 				slotAssignment: "named"
-			}), this.__shadowRoot.adoptedStyleSheets = i.css), d.call(this), s && s.observe(this);
+			}), this.__shadowRoot.adoptedStyleSheets = i.css), u.call(this), s && s.observe(this);
 		};
-		let f = o.prototype.disconnectedCallback ?? n;
+		let d = o.prototype.disconnectedCallback ?? n;
 		o.prototype.disconnectedCallback = function() {
-			f.call(this), s && s.unobserve(this);
+			d.call(this), s && s.unobserve(this);
 		};
-		let p = o.prototype.beforeRender ?? n, m = o.prototype.render ?? n, h = o.prototype.afterRender ?? n;
+		let f = o.prototype.beforeRender ?? n, m = o.prototype.render ?? n, h = o.prototype.afterRender ?? n;
 		return o.prototype.render = async function() {
 			r.debug("render", this.tagName);
-			let e = p.call(this);
+			let e = f.call(this);
 			if (isPromise(e) && await e, this.__shadowRoot) {
 				let e = this.__shadowRoot, t = m.call(this);
 				isComponentRender(t) ? await t.render(e) : e.innerHTML = t;
@@ -526,25 +554,25 @@ var html$1 = freeze(/* @__PURE__ */ "a.abbr.acronym.address.area.article.aside.a
 function createDOMPurify() {
 	let e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : getGlobal(), t = (e) => createDOMPurify(e);
 	if (t.version = "3.3.0", t.removed = [], !e || !e.document || e.document.nodeType !== NODE_TYPE.document || !e.Element) return t.isSupported = !1, t;
-	let { document: n } = e, r = n, i = r.currentScript, { DocumentFragment: a, HTMLTemplateElement: o, Node: s, Element: c, NodeFilter: l, NamedNodeMap: u = e.NamedNodeMap || e.MozNamedAttrMap, HTMLFormElement: d, DOMParser: f, trustedTypes: p } = e, m = c.prototype, h = lookupGetter(m, "cloneNode"), g = lookupGetter(m, "remove"), ze = lookupGetter(m, "nextSibling"), _ = lookupGetter(m, "childNodes"), v = lookupGetter(m, "parentNode");
+	let { document: n } = e, r = n, i = r.currentScript, { DocumentFragment: a, HTMLTemplateElement: o, Node: s, Element: c, NodeFilter: l, NamedNodeMap: u = e.NamedNodeMap || e.MozNamedAttrMap, HTMLFormElement: d, DOMParser: f, trustedTypes: p } = e, m = c.prototype, h = lookupGetter(m, "cloneNode"), g = lookupGetter(m, "remove"), _ = lookupGetter(m, "nextSibling"), ze = lookupGetter(m, "childNodes"), v = lookupGetter(m, "parentNode");
 	if (typeof o == "function") {
 		let e = n.createElement("template");
 		e.content && e.content.ownerDocument && (n = e.content.ownerDocument);
 	}
-	let y, b = "", { implementation: Be, createNodeIterator: Ve, createDocumentFragment: He, getElementsByTagName: Ue } = n, { importNode: We } = r, x = _createHooksMap();
-	t.isSupported = typeof entries == "function" && typeof v == "function" && Be && Be.createHTMLDocument !== void 0;
-	let { MUSTACHE_EXPR: S, ERB_EXPR: Ge, TMPLIT_EXPR: Ke, DATA_ATTR: qe, ARIA_ATTR: Je, IS_SCRIPT_OR_DATA: Ye, ATTR_WHITESPACE: Xe, CUSTOM_ELEMENT: Ze } = EXPRESSIONS, { IS_ALLOWED_URI: Qe } = EXPRESSIONS, C = null, $e = addToSet({}, [
+	let y, b = "", { implementation: x, createNodeIterator: Be, createDocumentFragment: Ve, getElementsByTagName: He } = n, { importNode: Ue } = r, S = _createHooksMap();
+	t.isSupported = typeof entries == "function" && typeof v == "function" && x && x.createHTMLDocument !== void 0;
+	let { MUSTACHE_EXPR: C, ERB_EXPR: w, TMPLIT_EXPR: We, DATA_ATTR: Ge, ARIA_ATTR: Ke, IS_SCRIPT_OR_DATA: qe, ATTR_WHITESPACE: Je, CUSTOM_ELEMENT: Ye } = EXPRESSIONS, { IS_ALLOWED_URI: Xe } = EXPRESSIONS, T = null, Ze = addToSet({}, [
 		...html$1,
 		...svg$1,
 		...svgFilters,
 		...mathMl$1,
 		...text
-	]), w = null, et = addToSet({}, [
+	]), E = null, Qe = addToSet({}, [
 		...html$2,
 		...svg,
 		...mathMl,
 		...xml
-	]), T = Object.seal(create(null, {
+	]), D = Object.seal(create(null, {
 		tagNameCheck: {
 			writable: !0,
 			configurable: !1,
@@ -563,7 +591,7 @@ function createDOMPurify() {
 			enumerable: !0,
 			value: !1
 		}
-	})), E = null, D = null, O = Object.seal(create(null, {
+	})), O = null, $e = null, k = Object.seal(create(null, {
 		tagCheck: {
 			writable: !0,
 			configurable: !1,
@@ -576,7 +604,7 @@ function createDOMPurify() {
 			enumerable: !0,
 			value: null
 		}
-	})), tt = !0, k = !0, nt = !1, rt = !0, A = !1, j = !0, M = !1, it = !1, at = !1, N = !1, P = !1, F = !1, ot = !0, st = !1, I = !0, L = !1, R = {}, z = null, ct = addToSet({}, [
+	})), et = !0, A = !0, tt = !1, nt = !0, j = !1, M = !0, N = !1, rt = !1, it = !1, P = !1, F = !1, I = !1, at = !0, ot = !1, st = !0, L = !1, R = {}, z = null, ct = addToSet({}, [
 		"annotation-xml",
 		"audio",
 		"colgroup",
@@ -609,7 +637,7 @@ function createDOMPurify() {
 		"source",
 		"image",
 		"track"
-	]), dt = null, ft = addToSet({}, [
+	]), B = null, dt = addToSet({}, [
 		"alt",
 		"class",
 		"for",
@@ -624,10 +652,10 @@ function createDOMPurify() {
 		"value",
 		"style",
 		"xmlns"
-	]), B = "http://www.w3.org/1998/Math/MathML", V = "http://www.w3.org/2000/svg", H = "http://www.w3.org/1999/xhtml", U = H, W = !1, G = null, pt = addToSet({}, [
-		B,
+	]), V = "http://www.w3.org/1998/Math/MathML", H = "http://www.w3.org/2000/svg", U = "http://www.w3.org/1999/xhtml", W = U, G = !1, ft = null, pt = addToSet({}, [
 		V,
-		H
+		H,
+		U
 	], stringToString), K = addToSet({}, [
 		"mi",
 		"mo",
@@ -645,11 +673,11 @@ function createDOMPurify() {
 	}, vt = function() {
 		let e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
 		if (!(X && X === e)) {
-			if ((!e || typeof e != "object") && (e = {}), e = clone(e), J = ht.indexOf(e.PARSER_MEDIA_TYPE) === -1 ? "text/html" : e.PARSER_MEDIA_TYPE, Y = J === "application/xhtml+xml" ? stringToString : stringToLowerCase, C = objectHasOwnProperty(e, "ALLOWED_TAGS") ? addToSet({}, e.ALLOWED_TAGS, Y) : $e, w = objectHasOwnProperty(e, "ALLOWED_ATTR") ? addToSet({}, e.ALLOWED_ATTR, Y) : et, G = objectHasOwnProperty(e, "ALLOWED_NAMESPACES") ? addToSet({}, e.ALLOWED_NAMESPACES, stringToString) : pt, dt = objectHasOwnProperty(e, "ADD_URI_SAFE_ATTR") ? addToSet(clone(ft), e.ADD_URI_SAFE_ATTR, Y) : ft, lt = objectHasOwnProperty(e, "ADD_DATA_URI_TAGS") ? addToSet(clone(ut), e.ADD_DATA_URI_TAGS, Y) : ut, z = objectHasOwnProperty(e, "FORBID_CONTENTS") ? addToSet({}, e.FORBID_CONTENTS, Y) : ct, E = objectHasOwnProperty(e, "FORBID_TAGS") ? addToSet({}, e.FORBID_TAGS, Y) : clone({}), D = objectHasOwnProperty(e, "FORBID_ATTR") ? addToSet({}, e.FORBID_ATTR, Y) : clone({}), R = objectHasOwnProperty(e, "USE_PROFILES") ? e.USE_PROFILES : !1, tt = e.ALLOW_ARIA_ATTR !== !1, k = e.ALLOW_DATA_ATTR !== !1, nt = e.ALLOW_UNKNOWN_PROTOCOLS || !1, rt = e.ALLOW_SELF_CLOSE_IN_ATTR !== !1, A = e.SAFE_FOR_TEMPLATES || !1, j = e.SAFE_FOR_XML !== !1, M = e.WHOLE_DOCUMENT || !1, N = e.RETURN_DOM || !1, P = e.RETURN_DOM_FRAGMENT || !1, F = e.RETURN_TRUSTED_TYPE || !1, at = e.FORCE_BODY || !1, ot = e.SANITIZE_DOM !== !1, st = e.SANITIZE_NAMED_PROPS || !1, I = e.KEEP_CONTENT !== !1, L = e.IN_PLACE || !1, Qe = e.ALLOWED_URI_REGEXP || IS_ALLOWED_URI, U = e.NAMESPACE || H, K = e.MATHML_TEXT_INTEGRATION_POINTS || K, q = e.HTML_INTEGRATION_POINTS || q, T = e.CUSTOM_ELEMENT_HANDLING || {}, e.CUSTOM_ELEMENT_HANDLING && _t(e.CUSTOM_ELEMENT_HANDLING.tagNameCheck) && (T.tagNameCheck = e.CUSTOM_ELEMENT_HANDLING.tagNameCheck), e.CUSTOM_ELEMENT_HANDLING && _t(e.CUSTOM_ELEMENT_HANDLING.attributeNameCheck) && (T.attributeNameCheck = e.CUSTOM_ELEMENT_HANDLING.attributeNameCheck), e.CUSTOM_ELEMENT_HANDLING && typeof e.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements == "boolean" && (T.allowCustomizedBuiltInElements = e.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements), A && (k = !1), P && (N = !0), R && (C = addToSet({}, text), w = [], R.html === !0 && (addToSet(C, html$1), addToSet(w, html$2)), R.svg === !0 && (addToSet(C, svg$1), addToSet(w, svg), addToSet(w, xml)), R.svgFilters === !0 && (addToSet(C, svgFilters), addToSet(w, svg), addToSet(w, xml)), R.mathMl === !0 && (addToSet(C, mathMl$1), addToSet(w, mathMl), addToSet(w, xml))), e.ADD_TAGS && (typeof e.ADD_TAGS == "function" ? O.tagCheck = e.ADD_TAGS : (C === $e && (C = clone(C)), addToSet(C, e.ADD_TAGS, Y))), e.ADD_ATTR && (typeof e.ADD_ATTR == "function" ? O.attributeCheck = e.ADD_ATTR : (w === et && (w = clone(w)), addToSet(w, e.ADD_ATTR, Y))), e.ADD_URI_SAFE_ATTR && addToSet(dt, e.ADD_URI_SAFE_ATTR, Y), e.FORBID_CONTENTS && (z === ct && (z = clone(z)), addToSet(z, e.FORBID_CONTENTS, Y)), I && (C["#text"] = !0), M && addToSet(C, [
+			if ((!e || typeof e != "object") && (e = {}), e = clone(e), J = ht.indexOf(e.PARSER_MEDIA_TYPE) === -1 ? "text/html" : e.PARSER_MEDIA_TYPE, Y = J === "application/xhtml+xml" ? stringToString : stringToLowerCase, T = objectHasOwnProperty(e, "ALLOWED_TAGS") ? addToSet({}, e.ALLOWED_TAGS, Y) : Ze, E = objectHasOwnProperty(e, "ALLOWED_ATTR") ? addToSet({}, e.ALLOWED_ATTR, Y) : Qe, ft = objectHasOwnProperty(e, "ALLOWED_NAMESPACES") ? addToSet({}, e.ALLOWED_NAMESPACES, stringToString) : pt, B = objectHasOwnProperty(e, "ADD_URI_SAFE_ATTR") ? addToSet(clone(dt), e.ADD_URI_SAFE_ATTR, Y) : dt, lt = objectHasOwnProperty(e, "ADD_DATA_URI_TAGS") ? addToSet(clone(ut), e.ADD_DATA_URI_TAGS, Y) : ut, z = objectHasOwnProperty(e, "FORBID_CONTENTS") ? addToSet({}, e.FORBID_CONTENTS, Y) : ct, O = objectHasOwnProperty(e, "FORBID_TAGS") ? addToSet({}, e.FORBID_TAGS, Y) : clone({}), $e = objectHasOwnProperty(e, "FORBID_ATTR") ? addToSet({}, e.FORBID_ATTR, Y) : clone({}), R = objectHasOwnProperty(e, "USE_PROFILES") ? e.USE_PROFILES : !1, et = e.ALLOW_ARIA_ATTR !== !1, A = e.ALLOW_DATA_ATTR !== !1, tt = e.ALLOW_UNKNOWN_PROTOCOLS || !1, nt = e.ALLOW_SELF_CLOSE_IN_ATTR !== !1, j = e.SAFE_FOR_TEMPLATES || !1, M = e.SAFE_FOR_XML !== !1, N = e.WHOLE_DOCUMENT || !1, P = e.RETURN_DOM || !1, F = e.RETURN_DOM_FRAGMENT || !1, I = e.RETURN_TRUSTED_TYPE || !1, it = e.FORCE_BODY || !1, at = e.SANITIZE_DOM !== !1, ot = e.SANITIZE_NAMED_PROPS || !1, st = e.KEEP_CONTENT !== !1, L = e.IN_PLACE || !1, Xe = e.ALLOWED_URI_REGEXP || IS_ALLOWED_URI, W = e.NAMESPACE || U, K = e.MATHML_TEXT_INTEGRATION_POINTS || K, q = e.HTML_INTEGRATION_POINTS || q, D = e.CUSTOM_ELEMENT_HANDLING || {}, e.CUSTOM_ELEMENT_HANDLING && _t(e.CUSTOM_ELEMENT_HANDLING.tagNameCheck) && (D.tagNameCheck = e.CUSTOM_ELEMENT_HANDLING.tagNameCheck), e.CUSTOM_ELEMENT_HANDLING && _t(e.CUSTOM_ELEMENT_HANDLING.attributeNameCheck) && (D.attributeNameCheck = e.CUSTOM_ELEMENT_HANDLING.attributeNameCheck), e.CUSTOM_ELEMENT_HANDLING && typeof e.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements == "boolean" && (D.allowCustomizedBuiltInElements = e.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements), j && (A = !1), F && (P = !0), R && (T = addToSet({}, text), E = [], R.html === !0 && (addToSet(T, html$1), addToSet(E, html$2)), R.svg === !0 && (addToSet(T, svg$1), addToSet(E, svg), addToSet(E, xml)), R.svgFilters === !0 && (addToSet(T, svgFilters), addToSet(E, svg), addToSet(E, xml)), R.mathMl === !0 && (addToSet(T, mathMl$1), addToSet(E, mathMl), addToSet(E, xml))), e.ADD_TAGS && (typeof e.ADD_TAGS == "function" ? k.tagCheck = e.ADD_TAGS : (T === Ze && (T = clone(T)), addToSet(T, e.ADD_TAGS, Y))), e.ADD_ATTR && (typeof e.ADD_ATTR == "function" ? k.attributeCheck = e.ADD_ATTR : (E === Qe && (E = clone(E)), addToSet(E, e.ADD_ATTR, Y))), e.ADD_URI_SAFE_ATTR && addToSet(B, e.ADD_URI_SAFE_ATTR, Y), e.FORBID_CONTENTS && (z === ct && (z = clone(z)), addToSet(z, e.FORBID_CONTENTS, Y)), st && (T["#text"] = !0), N && addToSet(T, [
 				"html",
 				"head",
 				"body"
-			]), C.table && (addToSet(C, ["tbody"]), delete E.tbody), e.TRUSTED_TYPES_POLICY) {
+			]), T.table && (addToSet(T, ["tbody"]), delete O.tbody), e.TRUSTED_TYPES_POLICY) {
 				if (typeof e.TRUSTED_TYPES_POLICY.createHTML != "function") throw typeErrorCreate("TRUSTED_TYPES_POLICY configuration option must provide a \"createHTML\" hook.");
 				if (typeof e.TRUSTED_TYPES_POLICY.createScriptURL != "function") throw typeErrorCreate("TRUSTED_TYPES_POLICY configuration option must provide a \"createScriptURL\" hook.");
 				y = e.TRUSTED_TYPES_POLICY, b = y.createHTML("");
@@ -663,11 +691,11 @@ function createDOMPurify() {
 	]), bt = addToSet({}, [...mathMl$1, ...mathMlDisallowed]), xt = function(e) {
 		let t = v(e);
 		(!t || !t.tagName) && (t = {
-			namespaceURI: U,
+			namespaceURI: W,
 			tagName: "template"
 		});
 		let n = stringToLowerCase(e.tagName), r = stringToLowerCase(t.tagName);
-		return G[e.namespaceURI] ? e.namespaceURI === V ? t.namespaceURI === H ? n === "svg" : t.namespaceURI === B ? n === "svg" && (r === "annotation-xml" || K[r]) : !!yt[n] : e.namespaceURI === B ? t.namespaceURI === H ? n === "math" : t.namespaceURI === V ? n === "math" && q[r] : !!bt[n] : e.namespaceURI === H ? t.namespaceURI === V && !q[r] || t.namespaceURI === B && !K[r] ? !1 : !bt[n] && (mt[n] || !yt[n]) : !!(J === "application/xhtml+xml" && G[e.namespaceURI]) : !1;
+		return ft[e.namespaceURI] ? e.namespaceURI === H ? t.namespaceURI === U ? n === "svg" : t.namespaceURI === V ? n === "svg" && (r === "annotation-xml" || K[r]) : !!yt[n] : e.namespaceURI === V ? t.namespaceURI === U ? n === "math" : t.namespaceURI === H ? n === "math" && q[r] : !!bt[n] : e.namespaceURI === U ? t.namespaceURI === H && !q[r] || t.namespaceURI === V && !K[r] ? !1 : !bt[n] && (mt[n] || !yt[n]) : !!(J === "application/xhtml+xml" && ft[e.namespaceURI]) : !1;
 	}, Z = function(e) {
 		arrayPush(t.removed, { element: e });
 		try {
@@ -687,7 +715,7 @@ function createDOMPurify() {
 				from: n
 			});
 		}
-		if (n.removeAttribute(e), e === "is") if (N || P) try {
+		if (n.removeAttribute(e), e === "is") if (P || F) try {
 			Z(n);
 		} catch {}
 		else try {
@@ -695,26 +723,26 @@ function createDOMPurify() {
 		} catch {}
 	}, St = function(e) {
 		let t = null, r = null;
-		if (at) e = "<remove></remove>" + e;
+		if (it) e = "<remove></remove>" + e;
 		else {
 			let t = stringMatch(e, /^[\r\n\t ]+/);
 			r = t && t[0];
 		}
-		J === "application/xhtml+xml" && U === H && (e = "<html xmlns=\"http://www.w3.org/1999/xhtml\"><head></head><body>" + e + "</body></html>");
+		J === "application/xhtml+xml" && W === U && (e = "<html xmlns=\"http://www.w3.org/1999/xhtml\"><head></head><body>" + e + "</body></html>");
 		let i = y ? y.createHTML(e) : e;
-		if (U === H) try {
+		if (W === U) try {
 			t = new f().parseFromString(i, J);
 		} catch {}
 		if (!t || !t.documentElement) {
-			t = Be.createDocument(U, "template", null);
+			t = x.createDocument(W, "template", null);
 			try {
-				t.documentElement.innerHTML = W ? b : i;
+				t.documentElement.innerHTML = G ? b : i;
 			} catch {}
 		}
 		let a = t.body || t.documentElement;
-		return e && r && a.insertBefore(n.createTextNode(r), a.childNodes[0] || null), U === H ? Ue.call(t, M ? "html" : "body")[0] : M ? t.documentElement : a;
+		return e && r && a.insertBefore(n.createTextNode(r), a.childNodes[0] || null), W === U ? He.call(t, N ? "html" : "body")[0] : N ? t.documentElement : a;
 	}, Ct = function(e) {
-		return Ve.call(e.ownerDocument || e, e, l.SHOW_ELEMENT | l.SHOW_COMMENT | l.SHOW_TEXT | l.SHOW_PROCESSING_INSTRUCTION | l.SHOW_CDATA_SECTION, null);
+		return Be.call(e.ownerDocument || e, e, l.SHOW_ELEMENT | l.SHOW_COMMENT | l.SHOW_TEXT | l.SHOW_PROCESSING_INSTRUCTION | l.SHOW_CDATA_SECTION, null);
 	}, wt = function(e) {
 		return e instanceof d && (typeof e.nodeName != "string" || typeof e.textContent != "string" || typeof e.removeChild != "function" || !(e.attributes instanceof u) || typeof e.removeAttribute != "function" || typeof e.setAttribute != "function" || typeof e.namespaceURI != "string" || typeof e.insertBefore != "function" || typeof e.hasChildNodes != "function");
 	}, Tt = function(e) {
@@ -727,57 +755,57 @@ function createDOMPurify() {
 	}
 	let Et = function(e) {
 		let n = null;
-		if ($(x.beforeSanitizeElements, e, null), wt(e)) return Z(e), !0;
+		if ($(S.beforeSanitizeElements, e, null), wt(e)) return Z(e), !0;
 		let r = Y(e.nodeName);
-		if ($(x.uponSanitizeElement, e, {
+		if ($(S.uponSanitizeElement, e, {
 			tagName: r,
-			allowedTags: C
-		}), j && e.hasChildNodes() && !Tt(e.firstElementChild) && regExpTest(/<[/\w!]/g, e.innerHTML) && regExpTest(/<[/\w!]/g, e.textContent) || e.nodeType === NODE_TYPE.progressingInstruction || j && e.nodeType === NODE_TYPE.comment && regExpTest(/<[/\w]/g, e.data)) return Z(e), !0;
-		if (!(O.tagCheck instanceof Function && O.tagCheck(r)) && (!C[r] || E[r])) {
-			if (!E[r] && Ot(r) && (T.tagNameCheck instanceof RegExp && regExpTest(T.tagNameCheck, r) || T.tagNameCheck instanceof Function && T.tagNameCheck(r))) return !1;
-			if (I && !z[r]) {
-				let t = v(e) || e.parentNode, n = _(e) || e.childNodes;
+			allowedTags: T
+		}), M && e.hasChildNodes() && !Tt(e.firstElementChild) && regExpTest(/<[/\w!]/g, e.innerHTML) && regExpTest(/<[/\w!]/g, e.textContent) || e.nodeType === NODE_TYPE.progressingInstruction || M && e.nodeType === NODE_TYPE.comment && regExpTest(/<[/\w]/g, e.data)) return Z(e), !0;
+		if (!(k.tagCheck instanceof Function && k.tagCheck(r)) && (!T[r] || O[r])) {
+			if (!O[r] && Ot(r) && (D.tagNameCheck instanceof RegExp && regExpTest(D.tagNameCheck, r) || D.tagNameCheck instanceof Function && D.tagNameCheck(r))) return !1;
+			if (st && !z[r]) {
+				let t = v(e) || e.parentNode, n = ze(e) || e.childNodes;
 				if (n && t) {
 					let r = n.length;
 					for (let i = r - 1; i >= 0; --i) {
 						let r = h(n[i], !0);
-						r.__removalCount = (e.__removalCount || 0) + 1, t.insertBefore(r, ze(e));
+						r.__removalCount = (e.__removalCount || 0) + 1, t.insertBefore(r, _(e));
 					}
 				}
 			}
 			return Z(e), !0;
 		}
-		return e instanceof c && !xt(e) || (r === "noscript" || r === "noembed" || r === "noframes") && regExpTest(/<\/no(script|embed|frames)/i, e.innerHTML) ? (Z(e), !0) : (A && e.nodeType === NODE_TYPE.text && (n = e.textContent, arrayForEach([
-			S,
-			Ge,
-			Ke
+		return e instanceof c && !xt(e) || (r === "noscript" || r === "noembed" || r === "noframes") && regExpTest(/<\/no(script|embed|frames)/i, e.innerHTML) ? (Z(e), !0) : (j && e.nodeType === NODE_TYPE.text && (n = e.textContent, arrayForEach([
+			C,
+			w,
+			We
 		], (e) => {
 			n = stringReplace(n, e, " ");
-		}), e.textContent !== n && (arrayPush(t.removed, { element: e.cloneNode() }), e.textContent = n)), $(x.afterSanitizeElements, e, null), !1);
+		}), e.textContent !== n && (arrayPush(t.removed, { element: e.cloneNode() }), e.textContent = n)), $(S.afterSanitizeElements, e, null), !1);
 	}, Dt = function(e, t, r) {
-		if (ot && (t === "id" || t === "name") && (r in n || r in gt)) return !1;
-		if (!(k && !D[t] && regExpTest(qe, t)) && !(tt && regExpTest(Je, t)) && !(O.attributeCheck instanceof Function && O.attributeCheck(t, e))) {
-			if (!w[t] || D[t]) {
-				if (!(Ot(e) && (T.tagNameCheck instanceof RegExp && regExpTest(T.tagNameCheck, e) || T.tagNameCheck instanceof Function && T.tagNameCheck(e)) && (T.attributeNameCheck instanceof RegExp && regExpTest(T.attributeNameCheck, t) || T.attributeNameCheck instanceof Function && T.attributeNameCheck(t, e)) || t === "is" && T.allowCustomizedBuiltInElements && (T.tagNameCheck instanceof RegExp && regExpTest(T.tagNameCheck, r) || T.tagNameCheck instanceof Function && T.tagNameCheck(r)))) return !1;
-			} else if (!dt[t] && !regExpTest(Qe, stringReplace(r, Xe, "")) && !((t === "src" || t === "xlink:href" || t === "href") && e !== "script" && stringIndexOf(r, "data:") === 0 && lt[e]) && !(nt && !regExpTest(Ye, stringReplace(r, Xe, ""))) && r) return !1;
+		if (at && (t === "id" || t === "name") && (r in n || r in gt)) return !1;
+		if (!(A && !$e[t] && regExpTest(Ge, t)) && !(et && regExpTest(Ke, t)) && !(k.attributeCheck instanceof Function && k.attributeCheck(t, e))) {
+			if (!E[t] || $e[t]) {
+				if (!(Ot(e) && (D.tagNameCheck instanceof RegExp && regExpTest(D.tagNameCheck, e) || D.tagNameCheck instanceof Function && D.tagNameCheck(e)) && (D.attributeNameCheck instanceof RegExp && regExpTest(D.attributeNameCheck, t) || D.attributeNameCheck instanceof Function && D.attributeNameCheck(t, e)) || t === "is" && D.allowCustomizedBuiltInElements && (D.tagNameCheck instanceof RegExp && regExpTest(D.tagNameCheck, r) || D.tagNameCheck instanceof Function && D.tagNameCheck(r)))) return !1;
+			} else if (!B[t] && !regExpTest(Xe, stringReplace(r, Je, "")) && !((t === "src" || t === "xlink:href" || t === "href") && e !== "script" && stringIndexOf(r, "data:") === 0 && lt[e]) && !(tt && !regExpTest(qe, stringReplace(r, Je, ""))) && r) return !1;
 		}
 		return !0;
 	}, Ot = function(e) {
-		return e !== "annotation-xml" && stringMatch(e, Ze);
+		return e !== "annotation-xml" && stringMatch(e, Ye);
 	}, kt = function(e) {
-		$(x.beforeSanitizeAttributes, e, null);
+		$(S.beforeSanitizeAttributes, e, null);
 		let { attributes: n } = e;
 		if (!n || wt(e)) return;
 		let r = {
 			attrName: "",
 			attrValue: "",
 			keepAttr: !0,
-			allowedAttributes: w,
+			allowedAttributes: E,
 			forceKeepAttr: void 0
 		}, i = n.length;
 		for (; i--;) {
 			let { name: a, namespaceURI: o, value: s } = n[i], c = Y(a), l = s, u = a === "value" ? l : stringTrim(l);
-			if (r.attrName = c, r.attrValue = u, r.keepAttr = !0, r.forceKeepAttr = void 0, $(x.uponSanitizeAttribute, e, r), u = r.attrValue, st && (c === "id" || c === "name") && (Q(a, e), u = "user-content-" + u), j && regExpTest(/((--!?|])>)|<\/(style|title|textarea)/i, u)) {
+			if (r.attrName = c, r.attrValue = u, r.keepAttr = !0, r.forceKeepAttr = void 0, $(S.uponSanitizeAttribute, e, r), u = r.attrValue, ot && (c === "id" || c === "name") && (Q(a, e), u = "user-content-" + u), M && regExpTest(/((--!?|])>)|<\/(style|title|textarea)/i, u)) {
 				Q(a, e);
 				continue;
 			}
@@ -790,14 +818,14 @@ function createDOMPurify() {
 				Q(a, e);
 				continue;
 			}
-			if (!rt && regExpTest(/\/>/i, u)) {
+			if (!nt && regExpTest(/\/>/i, u)) {
 				Q(a, e);
 				continue;
 			}
-			A && arrayForEach([
-				S,
-				Ge,
-				Ke
+			j && arrayForEach([
+				C,
+				w,
+				We
 			], (e) => {
 				u = stringReplace(u, e, " ");
 			});
@@ -820,63 +848,63 @@ function createDOMPurify() {
 				Q(a, e);
 			}
 		}
-		$(x.afterSanitizeAttributes, e, null);
+		$(S.afterSanitizeAttributes, e, null);
 	}, At = function e(t) {
 		let n = null, r = Ct(t);
-		for ($(x.beforeSanitizeShadowDOM, t, null); n = r.nextNode();) $(x.uponSanitizeShadowNode, n, null), Et(n), kt(n), n.content instanceof a && e(n.content);
-		$(x.afterSanitizeShadowDOM, t, null);
+		for ($(S.beforeSanitizeShadowDOM, t, null); n = r.nextNode();) $(S.uponSanitizeShadowNode, n, null), Et(n), kt(n), n.content instanceof a && e(n.content);
+		$(S.afterSanitizeShadowDOM, t, null);
 	};
 	return t.sanitize = function(e) {
 		let n = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, i = null, o = null, c = null, l = null;
-		if (W = !e, W && (e = "<!-->"), typeof e != "string" && !Tt(e)) if (typeof e.toString == "function") {
+		if (G = !e, G && (e = "<!-->"), typeof e != "string" && !Tt(e)) if (typeof e.toString == "function") {
 			if (e = e.toString(), typeof e != "string") throw typeErrorCreate("dirty is not a string, aborting");
 		} else throw typeErrorCreate("toString is not a function");
 		if (!t.isSupported) return e;
-		if (it || vt(n), t.removed = [], typeof e == "string" && (L = !1), L) {
+		if (rt || vt(n), t.removed = [], typeof e == "string" && (L = !1), L) {
 			if (e.nodeName) {
 				let t = Y(e.nodeName);
-				if (!C[t] || E[t]) throw typeErrorCreate("root node is forbidden and cannot be sanitized in-place");
+				if (!T[t] || O[t]) throw typeErrorCreate("root node is forbidden and cannot be sanitized in-place");
 			}
 		} else if (e instanceof s) i = St("<!---->"), o = i.ownerDocument.importNode(e, !0), o.nodeType === NODE_TYPE.element && o.nodeName === "BODY" || o.nodeName === "HTML" ? i = o : i.appendChild(o);
 		else {
-			if (!N && !A && !M && e.indexOf("<") === -1) return y && F ? y.createHTML(e) : e;
-			if (i = St(e), !i) return N ? null : F ? b : "";
+			if (!P && !j && !N && e.indexOf("<") === -1) return y && I ? y.createHTML(e) : e;
+			if (i = St(e), !i) return P ? null : I ? b : "";
 		}
-		i && at && Z(i.firstChild);
+		i && it && Z(i.firstChild);
 		let u = Ct(L ? e : i);
 		for (; c = u.nextNode();) Et(c), kt(c), c.content instanceof a && At(c.content);
 		if (L) return e;
-		if (N) {
-			if (P) for (l = He.call(i.ownerDocument); i.firstChild;) l.appendChild(i.firstChild);
+		if (P) {
+			if (F) for (l = Ve.call(i.ownerDocument); i.firstChild;) l.appendChild(i.firstChild);
 			else l = i;
-			return (w.shadowroot || w.shadowrootmode) && (l = We.call(r, l, !0)), l;
+			return (E.shadowroot || E.shadowrootmode) && (l = Ue.call(r, l, !0)), l;
 		}
-		let d = M ? i.outerHTML : i.innerHTML;
-		return M && C["!doctype"] && i.ownerDocument && i.ownerDocument.doctype && i.ownerDocument.doctype.name && regExpTest(DOCTYPE_NAME, i.ownerDocument.doctype.name) && (d = "<!DOCTYPE " + i.ownerDocument.doctype.name + ">\n" + d), A && arrayForEach([
-			S,
-			Ge,
-			Ke
+		let d = N ? i.outerHTML : i.innerHTML;
+		return N && T["!doctype"] && i.ownerDocument && i.ownerDocument.doctype && i.ownerDocument.doctype.name && regExpTest(DOCTYPE_NAME, i.ownerDocument.doctype.name) && (d = "<!DOCTYPE " + i.ownerDocument.doctype.name + ">\n" + d), j && arrayForEach([
+			C,
+			w,
+			We
 		], (e) => {
 			d = stringReplace(d, e, " ");
-		}), y && F ? y.createHTML(d) : d;
+		}), y && I ? y.createHTML(d) : d;
 	}, t.setConfig = function() {
-		vt(arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}), it = !0;
+		vt(arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}), rt = !0;
 	}, t.clearConfig = function() {
-		X = null, it = !1;
+		X = null, rt = !1;
 	}, t.isValidAttribute = function(e, t, n) {
 		return X || vt({}), Dt(Y(e), Y(t), n);
 	}, t.addHook = function(e, t) {
-		typeof t == "function" && arrayPush(x[e], t);
+		typeof t == "function" && arrayPush(S[e], t);
 	}, t.removeHook = function(e, t) {
 		if (t !== void 0) {
-			let n = arrayLastIndexOf(x[e], t);
-			return n === -1 ? void 0 : arraySplice(x[e], n, 1)[0];
+			let n = arrayLastIndexOf(S[e], t);
+			return n === -1 ? void 0 : arraySplice(S[e], n, 1)[0];
 		}
-		return arrayPop(x[e]);
+		return arrayPop(S[e]);
 	}, t.removeHooks = function(e) {
-		x[e] = [];
+		S[e] = [];
 	}, t.removeAllHooks = function() {
-		x = _createHooksMap();
+		S = _createHooksMap();
 	}, t;
 }
 var purify = createDOMPurify(), HTMLConfig = { sanitize: (e) => purify.sanitize(e) }, html = (e, ...t) => new HTMLLiteralResult(e.reduce((e, n, r) => {
@@ -901,24 +929,24 @@ function __decorate(e, t, n, r) {
 	else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
 	return i > 3 && a && Object.defineProperty(t, n, a), a;
 }
-var component_default$1 = ":host{--host-display:flex;--host-heading-border:var(--scorad-heading-border,solid 1px currentColor);--host-score-color:var(--scorad-score-color,var(--color));--host-score-background:var(--scorad-score-background,var(--background-color));--host-score-border:var(--scorad-score-border,solid 2px currentColor);gap:var(--host-spacing-unit);flex-wrap:wrap;width:fit-content}scorad-weightings{margin-bottom:var(--host-spacing-unit);align-self:center}section{flex-direction:column;flex:auto;display:flex}h3{border:var(--host-heading-border);width:1.5em;height:1.5em;padding:var(--host-padding-unit);margin:var(--host-spacing-unit);border-radius:50%;justify-content:center;align-items:center;display:inline-flex}scorad-label{flex:100%;font-size:1.2rem}scorad-label>span{padding:var(--host-padding-unit);outline:var(--host-score-border);border-radius:var(--host-border-radius);color:var(--host-score-color);background:var(--host-score-background)}", host_default = "*{box-sizing:border-box}:host{--host-spacing-unit:var(--scorad-spacing-unit,.25rem);--host-padding-unit:var(--scorad-padding-unit,.333rem);--host-border-radius:var(--scorad-border-radius,3px);--host-border-radius-outer:var(--scorad-border-radius-outer,calc(var(--host-border-radius) + var(--host-padding-unit)));display:var(--host-display,inline-flex)}";
+var component_default = ":host{--host-display:flex;--host-heading-border:var(--scorad-heading-border,solid 1px var(--host-color));--host-score-color:var(--scorad-score-color,var(--host-color));--host-score-background:var(--scorad-score-background,var(--host-background-color));--host-score-border:var(--scorad-score-border,solid 1px var(--host-color));gap:var(--host-spacing-unit);flex-wrap:wrap;width:fit-content}h3{aspect-ratio:1;border:var(--host-heading-border);padding:var(--host-padding-unit);margin:0 0 0 calc(-1*var(--host-padding-unit));border-radius:50%;justify-content:center;align-items:center;line-height:0;display:inline-flex}p{padding:var(--host-padding-unit)0 0;margin:0;font-size:.9em}scorad-label{break-inside:avoid;outline:none;flex:5 19rem}#extent-label{flex-basis:100%}#intensity-label{flex-grow:1}#score-label{background:linear-gradient(to bottom,transparent,var(--background-color)75%);flex-basis:100%;font-size:1.2rem;position:sticky;bottom:0}@media print{#score-label{position:relative}}#score-label>span{padding:var(--host-padding-unit);border-radius:var(--host-border-radius);outline:var(--host-score-border);color:var(--host-score-color);background:var(--host-score-background)}scorad-extent,scorad-intensity,scorad-subjective{margin:.6rem calc(-1*var(--host-padding-unit));flex:100%}", host_default = "*{box-sizing:border-box}:host{--host-color-l:var(--color-l,50%);--host-error-color-h:var(--error-color-h,0);--host-color:var(--color,#444);--host-background-color:var(--background-color,#eee);--host-primary-color:var(--primary-color,var(--host-color));--host-error-color:var(--error-color,hsl(var(--host-error-color-h),66.7%,var(--host-color-l)));--host-spacing-unit:var(--scorad-spacing-unit,.25rem);--host-padding-unit:var(--scorad-padding-unit,.333rem);--host-border-radius:var(--scorad-border-radius,3px);--host-border-radius-outer:var(--scorad-border-radius-outer,calc(var(--host-border-radius) + var(--host-padding-unit)));--host-outline-hover:var(--scorad-outline-hover,dashed 2px var(--host-primary-color));--host-outline-focus:var(--scorad-outline-focus,solid 2px var(--host-primary-color));display:var(--host-display,inline-flex);line-height:1.2}@media (prefers-color-scheme:dark){:host{--host-color-l:var(--color-l,70%)}}";
 const SCORAD_EXTENT_MAX_VALUE = 100, SCORAD_INTENSITY_MAX_VALUE = 3, SCORAD_SUBJECTIVE_MAX_VALUE = 10, SCORAD_EXTENT_DEFAULT = {
-	headNeck: -1,
-	anteriorTrunk: -1,
-	posteriorTrunk: -1,
-	upperLimbs: -1,
-	lowerLimbs: -1,
-	genitals: -1
+	headNeck: null,
+	anteriorTrunk: null,
+	posteriorTrunk: null,
+	upperLimbs: null,
+	lowerLimbs: null,
+	genitals: null
 }, SCORAD_INTENSITY_DEFAULT = {
-	erythema: -1,
-	oedemaPapulation: -1,
-	oozingCrusting: -1,
-	excoriations: -1,
-	lichenification: -1,
-	xerosis: -1
+	erythema: null,
+	oedemaPapulation: null,
+	oozingCrusting: null,
+	excoriations: null,
+	lichenification: null,
+	xerosis: null
 }, SCORAD_SUBJECTIVE_DEFAULT = {
-	pruritus: -1,
-	sleeplessness: -1
+	pruritus: null,
+	sleeplessness: null
 }, SCORAD_DEFAULT = {
 	child: !1,
 	extent: SCORAD_EXTENT_DEFAULT,
@@ -939,13 +967,91 @@ const SCORAD_EXTENT_MAX_VALUE = 100, SCORAD_INTENSITY_MAX_VALUE = 3, SCORAD_SUBJ
 	lowerLimbs: .28,
 	genitals: 0
 };
-var component_default$6 = ":host{--host-display:inline-flex;--host-font-size:1rem;justify-content:center;align-items:center;gap:var(--host-spacing-unit);flex-wrap:wrap;position:relative}label{padding:var(--host-padding-unit)}svg{width:calc(50% - var(--host-spacing-unit));padding:var(--host-spacing-unit)0;fill:#0000;stroke:currentColor;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;flex:auto;overflow:visible}path,line{vector-effect:non-scaling-stroke}path{opacity:.333}text,line{opacity:.667}g{outline:none}g[tabindex] path{opacity:1;fill:hsla(var(--scorad-h,0),var(--extent,\"0%\"),50%,var(--opacity,0))}:is(:not(:has(:active)) g[tabindex]:hover path,:not(:has(:active)) g[tabindex]:hover line){stroke-width:2px;stroke:var(--primary-color);stroke-dasharray:2 3.5;opacity:1}g[tabindex]:focus path,g[tabindex]:active path,g[tabindex].selected path,g[tabindex]:focus line,g[tabindex]:active line,g[tabindex].selected line{stroke-width:2px;stroke:var(--primary-color);opacity:1;stroke-dasharray:none!important}g[tabindex] text{fill:currentColor;stroke:none;font-size:var(--host-font-size);text-anchor:end}:is(:not(:has(:active)) g[tabindex]:hover text,g[tabindex]:focus text,g[tabindex]:active text,g[tabindex].selected text){fill:var(--primary-color);opacity:1}", tag$6 = "scorad-extent", HTMLScoradExtentElement = class extends HTMLComponentElement {
+var component_default$6 = ":host{--host-display:inline-flex;--host-font-size:1rem;flex-wrap:wrap;justify-content:center;align-items:center;position:relative}label{padding:var(--host-padding-unit)}svg{min-width:14rem;max-width:18rem;margin:var(--host-padding-unit)0;fill:#0000;stroke:var(--host-color);stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;flex:16rem;overflow:visible}@media print{svg{flex:0 0 14rem;width:14rem}}path,line{vector-effect:non-scaling-stroke}path{opacity:.333}text,line{opacity:.667}g{outline:none}g[tabindex] path{opacity:1;fill:hsla(var(--scorad-h,0),var(--extent,\"0%\"),50%,var(--opacity,0));cursor:grab}:has(:active) g[tabindex] path{cursor:ns-resize}:is(:not(:has(:active)) g[tabindex]:hover path,:not(:has(:active)) g[tabindex]:hover line){stroke-width:2px;stroke:var(--host-primary-color);stroke-dasharray:2 3.5;opacity:1}g[tabindex]:focus path,g[tabindex]:active path,g[tabindex].selected path,g[tabindex]:focus line,g[tabindex]:active line,g[tabindex].selected line{stroke-width:2px;stroke:var(--host-primary-color);opacity:1;stroke-dasharray:none!important}g[tabindex] text{fill:var(--host-color);stroke:none;font-size:var(--host-font-size);text-anchor:end}g[tabindex].posterior-trunk text{text-anchor:start}:is(:not(:has(:active)) g[tabindex]:hover text,g[tabindex]:focus text,g[tabindex]:active text,g[tabindex].selected text){fill:var(--host-primary-color);opacity:1}";
+const selectScoradWeights = (e) => e?.child ? SCORAD_CHILD_WEIGHTS : SCORAD_ADULT_WEIGHTS, validateScoradData = (e) => {
+	let t = [], n = (e, n, r) => {
+		for (let [i, a] of Object.entries(e)) validateScoradData.isValid(a, r) || t.push(validateScoradData.formatError(n, i, r, a));
+	}, r = { ...e?.extent ?? SCORAD_EXTENT_DEFAULT }, i = selectScoradWeights(e);
+	for (let [e, t] of Object.entries(i)) t === 0 && delete r[e];
+	return n(r, "extent", 100), n(e?.intensity ?? SCORAD_INTENSITY_DEFAULT, "intensity", 3), n(e?.subjective ?? SCORAD_SUBJECTIVE_DEFAULT, "subjective", 10), t.length ? Result.Fail(t) : Result.Ok(e);
+};
+validateScoradData.formatError = (e, t, n, r) => `${e}.${t}: must be between 0 and ${n}, but received ${r}.`, validateScoradData.isValid = (e, t) => typeof e == "number" && Number.isFinite(e) && e >= 0 && e <= t;
+const ScoradResources = {
+	child: {
+		text: "child",
+		description: "use weightings for a child"
+	},
+	extent: {
+		headNeck: {
+			text: "head",
+			description: "percentage of the head and neck area affected"
+		},
+		anteriorTrunk: {
+			text: "trunk",
+			description: "percentage of the front torso area affected"
+		},
+		posteriorTrunk: {
+			text: "back",
+			description: "percentage of the back torso area affected"
+		},
+		genitals: {
+			text: "genitals",
+			description: "percentage of the genital area affected"
+		},
+		upperLimbs: {
+			text: "arms",
+			description: "percentage of the arms and shoulders affected"
+		},
+		lowerLimbs: {
+			text: "legs",
+			description: "percentage of the legs and hips affected"
+		}
+	},
+	intensity: {
+		erythema: {
+			text: "Erythema",
+			description: "redness of the skin"
+		},
+		oedemaPapulation: {
+			text: "Oedema/Papulation",
+			description: "swelling and small bumps"
+		},
+		oozingCrusting: {
+			text: "Oozing/Crusting",
+			description: "fluid leakage and dried scabs"
+		},
+		excoriations: {
+			text: "Excoriations",
+			description: "scratch marks"
+		},
+		lichenification: {
+			text: "Lichenification",
+			description: "skin thickening and hardening"
+		},
+		xerosis: {
+			text: "Xerosis",
+			description: "dryness of the skin"
+		}
+	},
+	subjective: {
+		pruritus: {
+			text: "Pruritus",
+			description: "itching"
+		},
+		sleeplessness: {
+			text: "Sleeplessness",
+			description: "difficulty sleeping"
+		}
+	}
+};
+var tag$6 = "scorad-extent", HTMLScoradExtentElement = class extends HTMLComponentElement {
 	connectedCallback() {
 		this.render();
 	}
 	child = !1;
 	value = SCORAD_EXTENT_DEFAULT;
 	score;
+	errors;
 	afterRender() {
 		if (!this.value) {
 			this.value = SCORAD_EXTENT_DEFAULT;
@@ -957,14 +1063,14 @@ var component_default$6 = ":host{--host-display:inline-flex;--host-font-size:1re
 			n.style.setProperty("--extent", `${t}%`), n.style.setProperty("--opacity", `${(t ?? 0) / 100}`);
 			let r = n.querySelector("text");
 			if (!r) return;
-			r.textContent = t >= 0 ? `${t}%` : "--";
+			r.textContent = validateScoradData.isValid(t, 100) ? `${t}%` : ScoradResources.extent[e].text, n.querySelectorAll("path").forEach((t) => t.style.stroke = this.errors?.[e] == null ? "" : "var(--host-error-color)");
 		}
 	}
 	resizeCallback() {
 		if (!this.shadowRoot) return;
 		let e = this.shadowRoot.querySelector("svg");
 		if (!e) return;
-		let t = Math.round(18e3 / e.clientWidth) / 100;
+		let t = Math.round(19e3 / e.clientWidth) / 100;
 		this.style.setProperty("--host-font-size", `${t}rem`);
 	}
 	render() {
@@ -974,28 +1080,28 @@ var component_default$6 = ":host{--host-display:inline-flex;--host-font-size:1re
 				this.value = {
 					...this.value,
 					[e]: n
-				}, this.valueInput(this.value);
+				}, this.errors = void 0, this.valueInput(this.value);
 			};
 			return (n) => {
 				if (!n) return;
 				"ontouchstart" in window && n.addEventListener("touchstart", (e) => {
 					e.preventDefault();
 				}, { passive: !1 }), n.style.touchAction = "none", n.addEventListener("pointerdown", (r) => {
-					r.preventDefault(), r.stopPropagation(), n.focus();
+					r.stopPropagation(), n.focus();
 					let i = this.value[e], a = r.clientY, o = (e) => {
 						e.preventDefault();
-						let n = a - e.clientY;
+						let n = (a - e.clientY) / 2;
 						t(Math.round((i + n) / 5) * 5);
 					}, s = () => {
 						document.removeEventListener("pointermove", o), document.removeEventListener("pointerup", s), document.removeEventListener("pointercancel", s);
 					};
-					document.addEventListener("pointermove", o), document.addEventListener("pointerup", s), document.addEventListener("pointercancel", s);
+					document.addEventListener("pointermove", o), document.addEventListener("pointerup", s), document.addEventListener("pointercancel", s), o(r);
 				});
 				let r, i;
 				n.addEventListener("focus", () => {
 					i = "000", r = this.value[e];
 				}), n.addEventListener("keydown", (n) => {
-					let a = this.value[e], o = n.shiftKey ? 5 : 1;
+					let a = validateScoradData.isValid(this.value[e], 100) ? this.value[e] : 0, o = n.shiftKey ? 5 : 1;
 					switch (n.key) {
 						case "0":
 						case "1":
@@ -1027,7 +1133,7 @@ var component_default$6 = ":host{--host-display:inline-flex;--host-font-size:1re
 			t && (t.textContent = `${this.value[e]}%`);
 		};
 		return html`
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 164 240" width="200">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190 240">
                 <g ${e("headNeck")}
                     class="head-neck" tabindex="0">
                     <text x="40" y="20" ${t("headNeck")}>--</text>
@@ -1072,7 +1178,7 @@ var component_default$6 = ":host{--host-display:inline-flex;--host-font-size:1re
                     <path d="M120,139 100,154 100,230 A1,1 0,0,0 120,230Z"></path>
                 </g>
             </svg>
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 164 240" width="200">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190 240">
                 <g class="head-neck">
                     <path d="M100,45 100,49 Q95,48 90,49 L90,45 A20,22.5 1,1,1 100,45Z"></path>
                 </g>
@@ -1082,8 +1188,8 @@ var component_default$6 = ":host{--host-display:inline-flex;--host-font-size:1re
                 </g>
                 <g ${e("posteriorTrunk")}
                     class="posterior-trunk" tabindex="0">
-                    <text x="40" y="50" ${t("posteriorTrunk")}>--</text>
-                    <line x1="45" y1="46" x2="75" y2="52"></line>
+                    <text x="150" y="50" ${t("posteriorTrunk")}>--</text>
+                    <line x1="145" y1="46" x2="115" y2="52"></line>
                     <path d="M80,58 Q95,52 110,58 L120,130 Q110,152 95,142 L95,142 Q80,152 70,130 L80,60Z"></path>
                 </g>
                 <g class="lower-limbs">
@@ -1096,86 +1202,21 @@ var component_default$6 = ":host{--host-display:inline-flex;--host-font-size:1re
 	valueInput;
 	valueChange;
 };
-__decorate([Att(AttBoolean)], HTMLScoradExtentElement.prototype, "child", void 0), __decorate([Watch("value")], HTMLScoradExtentElement.prototype, "afterRender", null), __decorate([Watch("child")], HTMLScoradExtentElement.prototype, "render", null), __decorate([Event()], HTMLScoradExtentElement.prototype, "valueInput", void 0), __decorate([Event()], HTMLScoradExtentElement.prototype, "valueChange", void 0), HTMLScoradExtentElement = __decorate([Component({
+__decorate([Att(AttBoolean)], HTMLScoradExtentElement.prototype, "child", void 0), __decorate([Att({
+	name: "has-errors",
+	write: (e) => e == null ? void 0 : "",
+	read: !1
+})], HTMLScoradExtentElement.prototype, "errors", void 0), __decorate([Watch("value", "errors")], HTMLScoradExtentElement.prototype, "afterRender", null), __decorate([Watch("child")], HTMLScoradExtentElement.prototype, "render", null), __decorate([Event()], HTMLScoradExtentElement.prototype, "valueInput", void 0), __decorate([Event()], HTMLScoradExtentElement.prototype, "valueChange", void 0), HTMLScoradExtentElement = __decorate([Component({
 	tag: tag$6,
 	css: [host_default, component_default$6],
 	delegatesFocus: !0
 })], HTMLScoradExtentElement);
-var component_default$4 = ":host{--host-display:inline-flex;flex-direction:column;position:relative}scorad-options{margin-left:auto}";
-const ScoradResources = {
-	child: {
-		text: "child",
-		description: "use weightings for a child"
-	},
-	extent: {
-		headNeck: {
-			text: "Head/Neck",
-			description: "percentage of the head and neck area affected"
-		},
-		anteriorTrunk: {
-			text: "Anterior Trunk",
-			description: "percentage of the front torso area affected"
-		},
-		posteriorTrunk: {
-			text: "Posterior Trunk",
-			description: "percentage of the back torso area affected"
-		},
-		genitals: {
-			text: "Genitals",
-			description: "percentage of the genital area affected"
-		},
-		upperLimbs: {
-			text: "Upper Limbs",
-			description: "percentage of the arms and shoulders affected"
-		},
-		lowerLimbs: {
-			text: "Lower Limbs",
-			description: "percentage of the legs and hips affected"
-		}
-	},
-	intensity: {
-		erythema: {
-			text: "Erythema",
-			description: "redness of the skin"
-		},
-		oedemaPapulation: {
-			text: "Oedema/Papulation",
-			description: "swelling and small, raised bumps"
-		},
-		oozingCrusting: {
-			text: "Oozing/Crusting",
-			description: "fluid leakage and dried scabs"
-		},
-		excoriations: {
-			text: "Excoriations",
-			description: "scratch marks"
-		},
-		lichenification: {
-			text: "Lichenification",
-			description: "skin thickening and hardening"
-		},
-		xerosis: {
-			text: "Xerosis",
-			description: "dryness of the skin"
-		}
-	},
-	subjective: {
-		pruritus: {
-			text: "Pruritus",
-			description: "itching"
-		},
-		sleeplessness: {
-			text: "Sleeplessness",
-			description: "difficulty sleeping"
-		}
-	}
-};
-var component_default$5 = ":host{--host-display:inline-flex;--host-option-width:var(--scorad-option-width,1.5em);--host-option-height:var(--scorad-option-height,1.5em);--host-option-border:var(--scorad-option-border,solid 1px var(--color));--host-option-border-selected:var(--scorad-option-border-selected,solid 2px var(--color));--host-option-color:var(--scorad-option-color,var(--color));--host-option-background:var(--scorad-option-background,transparent);--host-option-color-selected:var(--scorad-option-color-selected,var(--background-color));--host-option-background-selected:var(--scorad-option-background-selected,var(--color));gap:var(--host-spacing-unit);padding:calc(1.5*var(--host-padding-unit))0;outline:none;width:max-content;position:relative}span{height:var(--host-option-height);width:var(--host-option-width);outline:var(--host-option-border);border-radius:var(--host-border-radius);padding:calc(.5*var(--host-padding-unit))var(--host-padding-unit);color:var(--host-option-color);background:var(--host-option-background);cursor:pointer;touch-action:none}span:before{content:\"​\";touch-action:none;pointer-events:none}span[aria-selected=true]{outline:var(--host-option-border-selected);color:var(--host-option-color-selected);background:var(--host-option-background-selected)}", tag$5 = "scorad-options", HTMLScoradOptionsElement = class extends HTMLComponentElement {
+var component_default$4 = ":host{--host-display:inline-flex;flex-direction:column;position:relative}scorad-options{align-self:center;margin-left:auto}", component_default$5 = ":host{--host-display:inline-flex;--host-option-width:var(--scorad-option-width,1.5em);--host-option-height:var(--scorad-option-height,1.5em);--host-option-border:var(--scorad-option-border,solid 1px var(--host-color));--host-option-border-selected:var(--scorad-option-border-selected,solid 2px var(--host-color));--host-option-color:var(--scorad-option-color,var(--host-color));--host-option-background:var(--scorad-option-background,transparent);--host-option-color-selected:var(--scorad-option-color-selected,var(--host-background-color));--host-option-background-selected:var(--scorad-option-background-selected,var(--host-color));gap:var(--host-spacing-unit);margin:var(--host-padding-unit)0;outline:none;width:max-content;position:relative}span{height:var(--host-option-height);width:var(--host-option-width);outline:var(--host-option-border);border-radius:var(--host-border-radius);padding:calc(.5*var(--host-padding-unit))var(--host-padding-unit);color:var(--host-option-color);background:var(--host-option-background);cursor:pointer;touch-action:none}span:before{content:\"​\";touch-action:none;pointer-events:none}span[aria-selected=true]{outline:var(--host-option-border-selected);color:var(--host-option-color-selected);background:var(--host-option-background-selected)}", tag$5 = "scorad-options", HTMLScoradOptionsElement = class extends HTMLComponentElement {
 	connectedCallback() {
-		this.render(), this.addEventListener("focusin", this._handleFocusIn, { once: !0 }), this.addEventListener("pointerdown", this._handleDown);
+		this.render(), this.addEventListener("focusin", this._handleFocusIn, { once: !0 }), this.addEventListener("click", this._handleClick);
 	}
 	disconnectedCallback() {
-		this.addEventListener("pointerdown", this._handleDown);
+		this.addEventListener("click", this._handleClick);
 	}
 	_handleFocusIn = () => {
 		this.readonly || (this.committedValue = this.value, this.addEventListener("focusout", this._handleFocusOut, { once: !0 }), this.addEventListener("keydown", this._handleKeydown));
@@ -1183,13 +1224,9 @@ var component_default$5 = ":host{--host-display:inline-flex;--host-option-width:
 	_handleFocusOut = () => {
 		this.removeEventListener("keydown", this._handleKeydown), this.addEventListener("focusin", this._handleFocusIn, { once: !0 }), this.setValue(this.value), this.value !== this.committedValue && this.valueChange(this.value);
 	};
-	_handleDown = (e) => {
-		this.readonly || (e.stopPropagation(), e.preventDefault(), this.focus(), this._handleMove(e), document.addEventListener("pointerup", this._handleUp), document.addEventListener("pointermove", this._handleMove));
-	};
-	_handleUp = (e) => {
-		e.stopPropagation(), document.removeEventListener("pointerup", this._handleUp), document.removeEventListener("pointermove", this._handleMove);
-	};
-	_handleMove = (e) => {
+	_handleClick = (e) => {
+		if (this.readonly) return;
+		e.stopPropagation(), e.preventDefault(), this.focus();
 		let t = e.composedPath()[0];
 		if (!(t instanceof HTMLSpanElement)) return;
 		let n = Number.parseInt(t.dataset.value);
@@ -1262,6 +1299,7 @@ var tag$4 = "scorad-intensity", HTMLScoradIntensityElement = class extends HTMLC
 	}
 	value = SCORAD_INTENSITY_DEFAULT;
 	score;
+	errors;
 	afterRender() {
 		if (this.value == null) {
 			this.value = SCORAD_INTENSITY_DEFAULT;
@@ -1273,7 +1311,7 @@ var tag$4 = "scorad-intensity", HTMLScoradIntensityElement = class extends HTMLC
 			n.dataset.value = `${t}`;
 			let r = n.querySelector("scorad-options");
 			if (!r) return;
-			r.value = t;
+			r.value = t, r.style.setProperty("--host-option-border", this.errors?.[e] == null ? null : "solid 1px var(--host-error-color)");
 		}
 	}
 	render() {
@@ -1303,17 +1341,22 @@ var tag$4 = "scorad-intensity", HTMLScoradIntensityElement = class extends HTMLC
 	valueInput;
 	valueChange;
 };
-__decorate([Watch("value")], HTMLScoradIntensityElement.prototype, "afterRender", null), __decorate([Event()], HTMLScoradIntensityElement.prototype, "valueInput", void 0), __decorate([Event()], HTMLScoradIntensityElement.prototype, "valueChange", void 0), HTMLScoradIntensityElement = __decorate([Component({
+__decorate([Att({
+	name: "has-errors",
+	write: (e) => e == null ? void 0 : "",
+	read: !1
+})], HTMLScoradIntensityElement.prototype, "errors", void 0), __decorate([Watch("value", "errors")], HTMLScoradIntensityElement.prototype, "afterRender", null), __decorate([Event()], HTMLScoradIntensityElement.prototype, "valueInput", void 0), __decorate([Event()], HTMLScoradIntensityElement.prototype, "valueChange", void 0), HTMLScoradIntensityElement = __decorate([Component({
 	tag: tag$4,
 	css: [host_default, component_default$4],
 	delegatesFocus: !0
 })], HTMLScoradIntensityElement);
-var component_default$3 = ":host{--host-display:inline-flex;flex-direction:column;position:relative}scorad-options{margin-left:auto}", tag$3 = "scorad-subjective", HTMLScoradSubjectiveElement = class extends HTMLComponentElement {
+var component_default$3 = ":host{--host-display:inline-flex;--scorad-label-text-min-width:7rem;flex-direction:column;position:relative}scorad-options{align-self:center;margin-left:auto}", tag$3 = "scorad-subjective", HTMLScoradSubjectiveElement = class extends HTMLComponentElement {
 	connectedCallback() {
 		this.render();
 	}
 	value = SCORAD_SUBJECTIVE_DEFAULT;
 	score;
+	errors;
 	afterRender() {
 		if (this.value == null) {
 			this.value = SCORAD_SUBJECTIVE_DEFAULT;
@@ -1325,7 +1368,7 @@ var component_default$3 = ":host{--host-display:inline-flex;flex-direction:colum
 			n.dataset.value = `${t}`;
 			let r = n.querySelector("scorad-options");
 			if (!r) return;
-			r.value = t;
+			r.value = t, r.style.setProperty("--host-option-border", this.errors?.[e] == null ? null : "solid 1px var(--host-error-color)");
 		}
 	}
 	render() {
@@ -1354,12 +1397,16 @@ var component_default$3 = ":host{--host-display:inline-flex;flex-direction:colum
 	valueInput;
 	valueChange;
 };
-__decorate([Watch("value")], HTMLScoradSubjectiveElement.prototype, "afterRender", null), __decorate([Event()], HTMLScoradSubjectiveElement.prototype, "valueInput", void 0), __decorate([Event()], HTMLScoradSubjectiveElement.prototype, "valueChange", void 0), HTMLScoradSubjectiveElement = __decorate([Component({
+__decorate([Att({
+	name: "has-errors",
+	write: (e) => e == null ? void 0 : "",
+	read: !1
+})], HTMLScoradSubjectiveElement.prototype, "errors", void 0), __decorate([Watch("value", "errors")], HTMLScoradSubjectiveElement.prototype, "afterRender", null), __decorate([Event()], HTMLScoradSubjectiveElement.prototype, "valueInput", void 0), __decorate([Event()], HTMLScoradSubjectiveElement.prototype, "valueChange", void 0), HTMLScoradSubjectiveElement = __decorate([Component({
 	tag: tag$3,
 	css: [host_default, component_default$3],
 	delegatesFocus: !0
 })], HTMLScoradSubjectiveElement);
-var component_default$2 = ":host{--host-display:inline-flex;--host-outline-hover:var(--scorad-weightings-outline-hover,dashed 2px var(--primary-color));--host-outline-focus:var(--scorad-weightings-outline-focus,solid 2px var(--primary-color));padding:0 var(--host-padding-unit);border-radius:var(--host-border-radius);justify-content:center;align-items:baseline;position:relative}:host(:hover){outline:var(--host-outline-hover)}:host(:focus-within){outline:var(--host-outline-focus)}scorad-options{--host-option-width:auto;--host-option-height:auto}", tag$2 = "scorad-weightings", HTMLScoradWeightingsElement = class extends HTMLComponentElement {
+var component_default$2 = ":host{--host-display:inline-flex;padding:0 var(--host-padding-unit);border-radius:var(--host-border-radius);justify-content:center;align-items:baseline;position:relative}:host(:hover){outline:var(--host-outline-hover)}:host(:focus-within){outline:var(--host-outline-focus)}scorad-options{--host-option-width:auto;--host-option-height:auto}", tag$2 = "scorad-weightings", HTMLScoradWeightingsElement = class extends HTMLComponentElement {
 	connectedCallback() {
 		this.render();
 	}
@@ -1392,14 +1439,6 @@ __decorate([Watch("value")], HTMLScoradWeightingsElement.prototype, "afterRender
 	css: [host_default, component_default$2],
 	delegatesFocus: !0
 })], HTMLScoradWeightingsElement);
-const selectScoradWeights = (e) => e?.child ? SCORAD_CHILD_WEIGHTS : SCORAD_ADULT_WEIGHTS, validateScoradData = (e) => {
-	let t = [], n = (e, n, r) => {
-		for (let [i, a] of Object.entries(e)) (a < 0 || a > r) && t.push(validateScoradData.formatError(n, i, r, a));
-	}, r = { ...e?.extent ?? SCORAD_EXTENT_DEFAULT }, i = selectScoradWeights(e);
-	for (let [e, t] of Object.entries(i)) t === 0 && delete r[e];
-	return n(r, "extent", 100), n(e?.intensity ?? SCORAD_INTENSITY_DEFAULT, "intensity", 3), n(e?.subjective ?? SCORAD_SUBJECTIVE_DEFAULT, "subjective", 10), t.length ? Result.Fail(t) : Result.Ok(e);
-};
-validateScoradData.formatError = (e, t, n, r) => `${e}.${t}: must be between 0 and ${n}, but received ${r}.`;
 const getScoradScore = (e) => {
 	let t = validateScoradData(e);
 	if (t instanceof Failure) return t;
@@ -1412,11 +1451,38 @@ const getScoradScore = (e) => {
 		total: o
 	});
 };
-var tag$1 = "scorad-component", HTMLScoradElement = class extends HTMLComponentElement {
+var component_default$1 = ":host{--host-display:var(--scorad-label-display,inline-flex);--host-options:var(--scorad-label-options,solid 1px var(--host-color));--host-text-min-width:var(--scorad-label-text-min-width,none);--host-text-max-width:var(--scorad-label-text-max-width,none);grid-column:1/3;grid-template-columns:subgrid;padding:var(--host-padding-unit);border-radius:var(--host-border-radius-outer);flex-wrap:wrap;align-content:baseline;align-items:baseline;position:relative}:host(:hover){outline:var(--host-outline-hover)}:host(:focus-within){outline:var(--host-outline-focus)}:host>label{min-width:var(--host-text-min-width);max-width:var(--host-text-max-width)}:host>label>slot[name=text]{transition:all .2s ease-in-out;display:block}:host>label>slot[name=description]{opacity:0;margin-bottom:-1.1em;transition:all .4s ease-in-out;display:block}:host(:hover)>label>slot[name=text],:host(:focus-within)>label>slot[name=text]{transform:translateY(-.5em)}:host(:hover)>label>slot[name=description],:host(:focus-within)>label>slot[name=description]{opacity:.667;transform:translateY(-.6em)}@media print{:host>label>slot[name=text]{transform:translateY(-.5em)}:host>label>slot[name=description]{opacity:.667;transform:translateY(-.6em)}}:host>label{padding:var(--host-padding-unit);flex:1;padding-left:0}", tag$1 = "scorad-label", HTMLScoradLabelElement = class extends HTMLComponentElement {
+	connectedCallback() {
+		this.render(), this.addEventListener("click", this._handleClick);
+	}
+	diconnectedCallback() {
+		this.removeEventListener("click", this._handleClick);
+	}
+	_handleClick = (e) => {
+		this.querySelector(FOCUSABLE)?.focus();
+	};
+	text = "(label)";
+	description;
+	render() {
+		return html`
+                <label>
+                    <slot name="text"><span>${this.text}</span></slot>
+                    <slot name="description"><small>${this.description}</small></slot>
+                </label>
+                <slot></slot>
+            `;
+	}
+};
+__decorate([Att({ write: !1 })], HTMLScoradLabelElement.prototype, "text", void 0), __decorate([Att({ write: !1 })], HTMLScoradLabelElement.prototype, "description", void 0), HTMLScoradLabelElement = __decorate([Component({
+	tag: tag$1,
+	css: [host_default, component_default$1]
+})], HTMLScoradLabelElement);
+var tag = "scorad-component", HTMLScoradElement = class extends HTMLComponentElement {
 	connectedCallback() {
 		this.render();
 	}
 	value = SCORAD_DEFAULT;
+	showErrors = !1;
 	afterRender() {
 		if (this.value == null) {
 			this.value = SCORAD_DEFAULT;
@@ -1425,21 +1491,25 @@ var tag$1 = "scorad-component", HTMLScoradElement = class extends HTMLComponentE
 		if (!this.shadowRoot) return;
 		let e = this.shadowRoot.querySelector("#score");
 		if (!e) return;
-		let t = getScoradScore(this.value).orNull();
-		e.innerText = `${t?.total ?? "--.--"}`;
-		let n = this.shadowRoot.querySelector("scorad-extent");
-		n && (n.child = this.value?.child ?? !1, n.value = this.value?.extent ?? SCORAD_EXTENT_DEFAULT, n.score = t?.A);
-		let r = this.shadowRoot.querySelector("scorad-weightings");
-		r && (r.value = this.value?.child ?? !1);
-		let i = this.shadowRoot.querySelector("scorad-intensity");
-		i && (i.value = this.value?.intensity ?? SCORAD_INTENSITY_DEFAULT, i.score = t?.B);
-		let a = this.shadowRoot.querySelector("scorad-subjective");
-		a && (a.value = this.value?.subjective ?? SCORAD_SUBJECTIVE_DEFAULT, a.score = t?.B);
+		let t = getScoradScore(this.value).orNull(), n = {}, r = validateScoradData(this.value).errors.reduce((e, t) => {
+			let n = t.indexOf(":");
+			return setValue(e, t.substring(0, n), t.substring(n + 2));
+		}, n);
+		e.innerText = `${t?.total ?? "Get Score"}`, e.style.color = this.showErrors && r != n ? "var(--host-error-color)" : "";
+		let i = this.shadowRoot.querySelector("scorad-subjective");
+		i && (i.value = this.value?.subjective ?? SCORAD_SUBJECTIVE_DEFAULT, i.score = t?.B, this.showErrors && (i.errors = getValue(r, "subjective")));
+		let a = this.shadowRoot.querySelector("scorad-intensity");
+		a && (a.value = this.value?.intensity ?? SCORAD_INTENSITY_DEFAULT, a.score = t?.B, this.showErrors && (a.errors = getValue(r, "intensity")));
+		let o = this.shadowRoot.querySelector("scorad-extent");
+		o && (o.child = this.value?.child ?? !1, o.value = this.value?.extent ?? SCORAD_EXTENT_DEFAULT, o.score = t?.A, this.showErrors && (o.errors = getValue(r, "extent")));
+		let s = this.shadowRoot.querySelector("scorad-weightings");
+		s && (s.value = this.value?.child ?? !1);
 	}
 	render() {
 		return html`
-            <section>
-                <h3>A</h3>            
+            <scorad-label id="extent-label">
+                <h3 slot="text">A</h3>
+                <p slot="description">extent - effected surface area</p>
                 <scorad-weightings ${(e) => {
 			e instanceof HTMLScoradWeightingsElement && e.addEventListener("value-input", (e) => {
 				this.value = {
@@ -1448,7 +1518,7 @@ var tag$1 = "scorad-component", HTMLScoradElement = class extends HTMLComponentE
 				};
 			});
 		}}></scorad-weightings>
-                <scorad-extent ${(e) => {
+                <scorad-extent tabindex="0" ${(e) => {
 			e instanceof HTMLScoradExtentElement && e.addEventListener("value-input", (e) => {
 				this.value = {
 					...this.value,
@@ -1456,11 +1526,12 @@ var tag$1 = "scorad-component", HTMLScoradElement = class extends HTMLComponentE
 				};
 			});
 		}}></scorad-extent>
-            </section>
+            </scorad-label>
 
-            <section>
-                <h3>B</h3>
-                <scorad-intensity ${(e) => {
+            <scorad-label id="intensity-label">
+                <h3 slot="text">B</h3>
+                <p slot="description">intensity - clinical sign severity</p>
+                <scorad-intensity tabindex="0" ${(e) => {
 			e instanceof HTMLScoradIntensityElement && e.addEventListener("value-input", (e) => {
 				this.value = {
 					...this.value,
@@ -1468,11 +1539,12 @@ var tag$1 = "scorad-component", HTMLScoradElement = class extends HTMLComponentE
 				};
 			});
 		}}></scorad-intensity>
-            </section>
+            </scorad-label>
 
-            <section>
-                <h3>C</h3>
-                <scorad-subjective ${(e) => {
+            <scorad-label id="subjective-label">
+                <h3 slot="text">C</h3>
+                <p slot="description">subjective - patient reported symptoms</p>
+                <scorad-subjective tabindex="0" ${(e) => {
 			e instanceof HTMLScoradSubjectiveElement && e.addEventListener("value-input", (e) => {
 				this.value = {
 					...this.value,
@@ -1480,11 +1552,22 @@ var tag$1 = "scorad-component", HTMLScoradElement = class extends HTMLComponentE
 				};
 			});
 		}}></scorad-subjective>
-            </section>
+            </scorad-label>
 
-            <scorad-label
+            <scorad-label id="score-label"
                 text="SCORAD"
                 description="(A / 5) + (7 * B / 2) + C"
+                ${(e) => {
+			e instanceof HTMLScoradLabelElement && e.addEventListener("click", () => {
+				if (!this.shadowRoot) return;
+				this.showErrors = !0, this.afterRender();
+				let e = this.shadowRoot.querySelector("[has-errors]");
+				e && (e.focus({ preventScroll: !0 }), e.scrollIntoView({
+					behavior: "smooth",
+					block: "start"
+				}));
+			});
+		}}
             >
                 <span id="score" tabindex="0"></span>
             </scorad-label>
@@ -1492,32 +1575,9 @@ var tag$1 = "scorad-component", HTMLScoradElement = class extends HTMLComponentE
 	}
 };
 __decorate([Watch("value")], HTMLScoradElement.prototype, "afterRender", null), HTMLScoradElement = __decorate([Component({
-	tag: tag$1,
-	css: [host_default, component_default$1],
+	tag,
+	css: [host_default, component_default],
 	delegatesFocus: !0
 })], HTMLScoradElement);
 const componentsScoradLogger = provideLogger("@ntix/components-scorad", typeof ANTIX_COMPONENTS_SCORAD_LOG_LEVEL > "u" ? LogLevel.warn : ANTIX_COMPONENTS_SCORAD_LOG_LEVEL);
-var component_default = ":host{--host-display:inline-flex;--host-options:var(--scorad-label-options,solid 1px currentColor);--host-hover:var(--scorad-label-hover,dashed 2px var(--primary-color));--host-focus:var(--scorad-label-focus,solid 2px var(--primary-color));padding:var(--host-padding-unit);border-radius:var(--host-border-radius-outer);flex-wrap:wrap;align-items:baseline;position:relative}:host(:hover){outline:var(--host-hover)}:host(:focus-within){outline:var(--host-focus)}:host>label>span{transition:all .2s ease-in-out;display:block}:host>label>small{opacity:0;height:0;transition:all .4s ease-in-out;display:block}:host(:hover)>label>span,:host(:focus-within)>label>span{transform:translateY(-.5em)}:host(:hover)>label>small,:host(:focus-within)>label>small{opacity:.667;transform:translateY(-.6em)}:host>label{padding:var(--host-padding-unit);flex:1;padding-left:0}", tag = "scorad-label", HTMLScoradLabelElement = class extends HTMLComponentElement {
-	connectedCallback() {
-		this.render(), this.addEventListener("mousedown", this._handleClick);
-	}
-	_handleClick = (e) => {
-		this.querySelector(FOCUSABLE)?.focus();
-	};
-	text = "(label)";
-	description;
-	render() {
-		return html`
-                <label>
-                    <span>${this.text}</span>
-                    <small>${this.description}</small>                
-                </label>
-                <slot></slot>
-            `;
-	}
-};
-__decorate([Att({ write: !1 })], HTMLScoradLabelElement.prototype, "text", void 0), __decorate([Att({ write: !1 })], HTMLScoradLabelElement.prototype, "description", void 0), HTMLScoradLabelElement = __decorate([Component({
-	tag,
-	css: [host_default, component_default]
-})], HTMLScoradLabelElement);
 export { HTMLScoradElement, HTMLScoradExtentElement, HTMLScoradIntensityElement, HTMLScoradLabelElement, HTMLScoradOptionsElement, HTMLScoradSubjectiveElement, HTMLScoradWeightingsElement, SCORAD_ADULT_WEIGHTS, SCORAD_CHILD_WEIGHTS, SCORAD_DEFAULT, SCORAD_EXTENT_DEFAULT, SCORAD_EXTENT_MAX_VALUE, SCORAD_INTENSITY_DEFAULT, SCORAD_INTENSITY_MAX_VALUE, SCORAD_SUBJECTIVE_DEFAULT, SCORAD_SUBJECTIVE_MAX_VALUE, ScoradResources, componentsScoradLogger, getScoradScore, selectScoradWeights, validateScoradData };