@ntix/components-scorad 1.0.2 → 1.0.4

package/LICENSE.md

@@ -1,4 +1,4 @@
-# @ntix/components-scorad
+# License: @ntix/components-scorad
 
 Copyright (c) 2025 Antix Software Limited ([antix.co.uk](https://antix.co.uk))
 

package/README.md

@@ -2,12 +2,18 @@
 
 A professional-grade component library for calculating and visualizing SCORAD (SCORing Atopic Dermatitis) assessments. Developed by Antix Software Limited.
 
+**View the interactive demo [antix.co.uk/scorad](https://antix.co.uk/scorad)**
+
 ## Features
 
 - Interactive Body Maps: High-performance SVG-based surface area selection.
 - SCORAD Formula: Sections A (Extent), B (Intensity), and C (Subjective).
 - Custom Elements: Easy integration with any framework or plain HTML.
 
+## Validation & Accuracy
+This component has been mathematically validated against the ETFAD SCORAD reference standards. 
+See [VALIDATION.md](./VALIDATION.md) for the full report and test coverage details.
+
 ## Installation
 
 ```shell
@@ -43,6 +49,28 @@ Then add the component to your HTML:
 <scorad-component></scorad-component>
 ```
 
+## Documentation
+
+### 🧱 Components
+*Primary UI elements for building the assessment.*
+
+- [**Scorad Root**](./docs/component.md) – The main coordinator and score aggregator.
+- [**Extent (Section A)**](./docs/extent.component.md) – Surface area calculation.
+- [**Intensity (Section B)**](./docs/intensity.component.md) – Clinical sign grading.
+- [**Subjective (Section C)**](./docs/subjective.component.md) – Patient-reported symptoms.
+- [**Weightings**](./docs/weightings.component.md) – Adult/Child toggle.
+
+### 📊 Data Models & Logic
+*Records and calculation engines.*
+
+- [**ScoradScore**](./docs/ScoradScore.md) – The output structure (A, B, C, Total).
+- [**ScoradData**](./docs/ScoradData.md) – The complete assessment state.
+- [**getScoradScore**](./docs/getScoradScore.md) – The mathematical formula implementation.
+- [**Clinical Constants**](./docs/constants.md) – Max values and defaults.
+
+### 🌐 Resources
+- [**Localization (ScoradResources)**](./docs/ScoradResources.md) – UI strings and descriptions.
+
 ## Licensing
 
 This package is NOT open-source. Usage is governed by the Antix Software License. 

package/VALIDATION.md

@@ -0,0 +1,39 @@
+# Validation: @ntix/components-scorad
+
+## 1. Overview
+This document outlines the validation procedures and mathematical accuracy of the SCORAD (SCORing Atopic Dermatitis) calculation logic within this package.
+
+## 2. Reference Standard
+The implementation is based on the consensus report of the European Task Force on Atopic Dermatitis (ETFAD).
+
+**Formula:** $Score = \frac{A}{5} + \frac{7B}{2} + C$
+
+- **A (Extent):** Surface area percentage (0–100). Includes adult/child weighting adjustments for head and limbs.
+- **B (Intensity):** Sum of 6 clinical signs (0–3 each), max 18.
+- **C (Subjective):** Sum of Pruritus and Insomnia (0–10 each), max 20.
+
+## 3. Automated Test Suite
+Validation is performed using `vitest` in a `happy-dom` environment. The following critical paths are verified on every build:
+
+### 3.1. Boundary Testing
+- **Minimum Score:** Confirmed $0.00$ when all inputs are zero.
+- **Maximum Score:** Confirmed $103.00$ when all inputs are at maximum capacity.
+
+### 3.2. Weighting & Precision
+- **Intensity Weighting:** Verifies that Intensity (Section B) contributes to the total with a multiplier of $3.5$ (e.g., an Intensity of 3 results in a sub-score of 10.5).
+- **Rounding:** Results are rounded to 2 decimal places to ensure consistency across clinical documentation.
+
+### 3.3. Age-Based Extent (Adult vs Child)
+- Validates the calculation across both adult and pediatric surface area distributions.
+
+## 4. Error Handling & Safety
+The library implements strict validation via `@ntix/components-core`. Calculations will fail with a descriptive `Failure` object if:
+- Extent values exceed physiological maximums.
+- Intensity values fall outside the 0–3 range.
+- Subjective values fall outside the 0–10 range.
+
+## 5. Summary
+The @ntix/components-scorad calculation logic is deemed mathematically sound and compliant with the ETFAD standard for digital SCORAD assessments.
+
+---
+© 2025 Antix Software Limited ([antix.co.uk](https://antix.co.uk)). Prepared for clinical and commercial review.

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

@@ -967,7 +967,7 @@ 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;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}";
+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))}:host(:not([aria-readonly=true])) g[tabindex] path{cursor:grab}:host(:not([aria-readonly=true])) :has(:active) g[tabindex] path{cursor:ns-resize}:is(:host(:not([aria-readonly=true])) :not(:has(:active)) g[tabindex]:hover path,:host(:not([aria-readonly=true])) :not(:has(:active)) g[tabindex]:hover line){stroke-width:2px;stroke:var(--host-primary-color);stroke-dasharray:2 3.5;opacity:1}:host(:not([aria-readonly=true])) g[tabindex]:focus path,:host(:not([aria-readonly=true])) g[tabindex]:active path,:host(:not([aria-readonly=true])) g[tabindex].selected path,:host(:not([aria-readonly=true])) g[tabindex]:focus line,:host(:not([aria-readonly=true])) g[tabindex]:active line,:host(:not([aria-readonly=true])) 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(:host(:not([aria-readonly=true])) :not(:has(:active)) g[tabindex]:hover text,:host(:not([aria-readonly=true])) g[tabindex]:focus text,:host(:not([aria-readonly=true])) g[tabindex]:active text,:host(:not([aria-readonly=true])) 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));
@@ -1046,11 +1046,25 @@ const ScoradResources = {
 };
 var tag$6 = "scorad-extent", HTMLScoradExtentElement = class extends HTMLComponentElement {
 	connectedCallback() {
-		this.render();
+		this.render(), this.addEventListener("focusin", this.handleFocusIn, { once: !0 });
+	}
+	disconnectedCallback() {
+		this.removeEventListener("focusin", this.handleFocusIn);
 	}
+	handleFocusIn = () => {
+		this.readonly || (this.committedValue = this.value, this.addEventListener("focusout", this.handleFocusOut, { once: !0 }));
+	};
+	handleFocusOut = () => {
+		this.addEventListener("focusin", this.handleFocusIn, { once: !0 }), !areEqual(this.value, this.committedValue) && this.valueChange(this.value);
+	};
 	child = !1;
+	readonly = !1;
+	committedValue = SCORAD_EXTENT_DEFAULT;
 	value = SCORAD_EXTENT_DEFAULT;
 	score;
+	setValue = (e) => {
+		this.value = e, this.errors = void 0, this.valueInput(this.value);
+	};
 	errors;
 	afterRender() {
 		if (!this.value) {
@@ -1076,11 +1090,12 @@ var tag$6 = "scorad-extent", HTMLScoradExtentElement = class extends HTMLCompone
 	render() {
 		let e = (e) => {
 			let t = (t) => {
+				if (this.readonly) return;
 				let n = Math.round(Math.min(100, Math.max(0, t)));
-				this.value = {
+				this.setValue({
 					...this.value,
 					[e]: n
-				}, this.errors = void 0, this.valueInput(this.value);
+				});
 			};
 			return (n) => {
 				if (!n) return;
@@ -1203,28 +1218,31 @@ var tag$6 = "scorad-extent", HTMLScoradExtentElement = class extends HTMLCompone
 	valueChange;
 };
 __decorate([Att(AttBoolean)], HTMLScoradExtentElement.prototype, "child", void 0), __decorate([Att({
+	name: "aria-readonly",
+	...AttTrueFalse
+})], HTMLScoradExtentElement.prototype, "readonly", 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({
+})], HTMLScoradExtentElement.prototype, "errors", void 0), __decorate([Watch("value", "errors", "readonly")], 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{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 {
+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)}:host(:not([aria-readonly=true])) span{cursor:pointer}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("click", this._handleClick);
+		this.render(), this.addEventListener("focusin", this.handleFocusIn, { once: !0 }), this.addEventListener("click", this.handleClick);
 	}
 	disconnectedCallback() {
-		this.addEventListener("click", this._handleClick);
+		this.removeEventListener("focusin", this.handleFocusIn), this.removeEventListener("click", this.handleClick);
 	}
-	_handleFocusIn = () => {
-		this.readonly || (this.committedValue = this.value, this.addEventListener("focusout", this._handleFocusOut, { once: !0 }), this.addEventListener("keydown", this._handleKeydown));
+	handleFocusIn = () => {
+		this.readonly || (this.committedValue = this.value, this.addEventListener("focusout", this.handleFocusOut, { once: !0 }), this.addEventListener("keydown", this.handleKeydown));
 	};
-	_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);
+	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);
 	};
-	_handleClick = (e) => {
+	handleClick = (e) => {
 		if (this.readonly) return;
 		e.stopPropagation(), e.preventDefault(), this.focus();
 		let t = e.composedPath()[0];
@@ -1232,7 +1250,7 @@ var component_default$4 = ":host{--host-display:inline-flex;flex-direction:colum
 		let n = Number.parseInt(t.dataset.value);
 		this.setValue(n);
 	};
-	_handleKeydown = (e) => {
+	handleKeydown = (e) => {
 		let t = this.value ?? 0;
 		switch (e.key) {
 			case "ArrowLeft":
@@ -1268,7 +1286,7 @@ var component_default$4 = ":host{--host-display:inline-flex;flex-direction:colum
 	afterRender() {
 		this.shadowRoot && this.shadowRoot.querySelectorAll("span").forEach((e) => {
 			let t = Number.parseInt(e.dataset.value);
-			if (e.ariaSelected = t === this.value ? "true" : "false", !this.showHue) return;
+			if (e.setAttribute("aria-selected", t === this.value ? "true" : "false"), !this.showHue) return;
 			if (t > this.value) {
 				e.style.backgroundColor = "";
 				return;
@@ -1289,7 +1307,7 @@ __decorate([Att({
 })], HTMLScoradOptionsElement.prototype, "max", void 0), __decorate([Att(AttBoolean)], HTMLScoradOptionsElement.prototype, "showHue", void 0), __decorate([Att({
 	name: "aria-readonly",
 	...AttTrueFalse
-})], HTMLScoradOptionsElement.prototype, "readonly", void 0), __decorate([Att({ write: !1 })], HTMLScoradOptionsElement.prototype, "text", void 0), __decorate([Watch("min", "max", "text")], HTMLScoradOptionsElement.prototype, "render", null), __decorate([Watch("value")], HTMLScoradOptionsElement.prototype, "afterRender", null), __decorate([Event()], HTMLScoradOptionsElement.prototype, "valueInput", void 0), __decorate([Event()], HTMLScoradOptionsElement.prototype, "valueChange", void 0), HTMLScoradOptionsElement = __decorate([Component({
+})], HTMLScoradOptionsElement.prototype, "readonly", void 0), __decorate([Att({ write: !1 })], HTMLScoradOptionsElement.prototype, "text", void 0), __decorate([Watch("min", "max", "text")], HTMLScoradOptionsElement.prototype, "render", null), __decorate([Watch("value", "readonly")], HTMLScoradOptionsElement.prototype, "afterRender", null), __decorate([Event()], HTMLScoradOptionsElement.prototype, "valueInput", void 0), __decorate([Event()], HTMLScoradOptionsElement.prototype, "valueChange", void 0), HTMLScoradOptionsElement = __decorate([Component({
 	tag: tag$5,
 	css: [host_default, component_default$5]
 })], HTMLScoradOptionsElement);
@@ -1297,6 +1315,7 @@ var tag$4 = "scorad-intensity", HTMLScoradIntensityElement = class extends HTMLC
 	connectedCallback() {
 		this.render();
 	}
+	readonly = !1;
 	value = SCORAD_INTENSITY_DEFAULT;
 	score;
 	errors;
@@ -1311,7 +1330,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.style.setProperty("--host-option-border", this.errors?.[e] == null ? null : "solid 1px var(--host-error-color)");
+			r.value = t, r.readonly = this.readonly, r.style.setProperty("--host-option-border", this.errors?.[e] == null ? null : "solid 1px var(--host-error-color)");
 		}
 	}
 	render() {
@@ -1321,12 +1340,17 @@ var tag$4 = "scorad-intensity", HTMLScoradIntensityElement = class extends HTMLC
 	}
 	renderLevel(e) {
 		let t = (t) => {
-			t && t.addEventListener("value-input", (t) => {
+			t && (t.addEventListener("value-input", (t) => {
 				this.value = {
 					...this.value,
 					[e]: t.detail
-				}, this.valueInput(this.value);
-			});
+				}, this.errors = void 0, this.valueInput(this.value);
+			}), t.addEventListener("value-change", (t) => {
+				this.value = {
+					...this.value,
+					[e]: t.detail
+				}, this.errors = void 0, this.valueChange(this.value);
+			}));
 		}, n = ScoradResources.intensity[e];
 		return html`
             <scorad-label class="${toKebabCase(e)} row"
@@ -1342,10 +1366,13 @@ var tag$4 = "scorad-intensity", HTMLScoradIntensityElement = class extends HTMLC
 	valueChange;
 };
 __decorate([Att({
+	name: "aria-readonly",
+	...AttTrueFalse
+})], HTMLScoradIntensityElement.prototype, "readonly", void 0), __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({
+})], HTMLScoradIntensityElement.prototype, "errors", void 0), __decorate([Watch("value", "errors", "readonly")], 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
@@ -1354,6 +1381,7 @@ var component_default$3 = ":host{--host-display:inline-flex;--scorad-label-text-
 	connectedCallback() {
 		this.render();
 	}
+	readonly = !1;
 	value = SCORAD_SUBJECTIVE_DEFAULT;
 	score;
 	errors;
@@ -1368,7 +1396,7 @@ var component_default$3 = ":host{--host-display:inline-flex;--scorad-label-text-
 			n.dataset.value = `${t}`;
 			let r = n.querySelector("scorad-options");
 			if (!r) return;
-			r.value = t, r.style.setProperty("--host-option-border", this.errors?.[e] == null ? null : "solid 1px var(--host-error-color)");
+			r.value = t, r.readonly = this.readonly, r.style.setProperty("--host-option-border", this.errors?.[e] == null ? null : "solid 1px var(--host-error-color)");
 		}
 	}
 	render() {
@@ -1398,10 +1426,13 @@ var component_default$3 = ":host{--host-display:inline-flex;--scorad-label-text-
 	valueChange;
 };
 __decorate([Att({
+	name: "aria-readonly",
+	...AttTrueFalse
+})], HTMLScoradSubjectiveElement.prototype, "readonly", void 0), __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({
+})], HTMLScoradSubjectiveElement.prototype, "errors", void 0), __decorate([Watch("value", "errors", "readonly")], 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
@@ -1410,6 +1441,7 @@ var component_default$2 = ":host{--host-display:inline-flex;padding:0 var(--host
 	connectedCallback() {
 		this.render();
 	}
+	readonly = !1;
 	value = !1;
 	afterRender() {
 		if (this.value == null) {
@@ -1418,7 +1450,7 @@ var component_default$2 = ":host{--host-display:inline-flex;padding:0 var(--host
 		}
 		if (!this.shadowRoot) return;
 		let e = this.shadowRoot.querySelector("scorad-options");
-		e && (e.value = this.value ? 1 : 0, e.text = ["Adult", "Child"]);
+		e && (e.value = this.value ? 1 : 0, e.text = ["Adult", "Child"], e.readonly = this.readonly);
 	}
 	render() {
 		return html`
@@ -1434,7 +1466,10 @@ var component_default$2 = ":host{--host-display:inline-flex;padding:0 var(--host
 	valueInput;
 	valueChange;
 };
-__decorate([Watch("value")], HTMLScoradWeightingsElement.prototype, "afterRender", null), __decorate([Event()], HTMLScoradWeightingsElement.prototype, "valueInput", void 0), __decorate([Event()], HTMLScoradWeightingsElement.prototype, "valueChange", void 0), HTMLScoradWeightingsElement = __decorate([Component({
+__decorate([Att({
+	name: "aria-readonly",
+	...AttTrueFalse
+})], HTMLScoradWeightingsElement.prototype, "readonly", void 0), __decorate([Watch("value", "readonly")], HTMLScoradWeightingsElement.prototype, "afterRender", null), __decorate([Event()], HTMLScoradWeightingsElement.prototype, "valueInput", void 0), __decorate([Event()], HTMLScoradWeightingsElement.prototype, "valueChange", void 0), HTMLScoradWeightingsElement = __decorate([Component({
 	tag: tag$2,
 	css: [host_default, component_default$2],
 	delegatesFocus: !0
@@ -1453,12 +1488,12 @@ const getScoradScore = (e) => {
 };
 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);
+		this.render(), this.addEventListener("click", this.handleClick);
 	}
 	diconnectedCallback() {
-		this.removeEventListener("click", this._handleClick);
+		this.removeEventListener("click", this.handleClick);
 	}
-	_handleClick = (e) => {
+	handleClick = (e) => {
 		this.querySelector(FOCUSABLE)?.focus();
 	};
 	text = "(label)";
@@ -1481,6 +1516,7 @@ var tag = "scorad-component", HTMLScoradElement = class extends HTMLComponentEle
 	connectedCallback() {
 		this.render();
 	}
+	readonly = !1;
 	value = SCORAD_DEFAULT;
 	showErrors = !1;
 	afterRender() {
@@ -1497,13 +1533,13 @@ var tag = "scorad-component", HTMLScoradElement = class extends HTMLComponentEle
 		}, 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")));
+		i && (i.value = this.value?.subjective ?? SCORAD_SUBJECTIVE_DEFAULT, i.score = t?.B, i.readonly = this.readonly, 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")));
+		a && (a.value = this.value?.intensity ?? SCORAD_INTENSITY_DEFAULT, a.score = t?.B, a.readonly = this.readonly, 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")));
+		o && (o.child = this.value?.child ?? !1, o.value = this.value?.extent ?? SCORAD_EXTENT_DEFAULT, o.score = t?.A, o.readonly = this.readonly, this.showErrors && (o.errors = getValue(r, "extent")));
 		let s = this.shadowRoot.querySelector("scorad-weightings");
-		s && (s.value = this.value?.child ?? !1);
+		s && (s.value = this.value?.child ?? !1, s.readonly = this.readonly);
 	}
 	render() {
 		return html`
@@ -1511,20 +1547,30 @@ var tag = "scorad-component", HTMLScoradElement = class extends HTMLComponentEle
                 <h3 slot="text">A</h3>
                 <p slot="description">extent - effected surface area</p>
                 <scorad-weightings ${(e) => {
-			e instanceof HTMLScoradWeightingsElement && e.addEventListener("value-input", (e) => {
+			e instanceof HTMLScoradWeightingsElement && (e.addEventListener("value-input", (e) => {
 				this.value = {
 					...this.value,
 					child: e.detail
-				};
-			});
+				}, this.valueInput(this.value);
+			}), e.addEventListener("value-change", (e) => {
+				this.value = {
+					...this.value,
+					child: e.detail
+				}, this.valueChange(this.value);
+			}));
 		}}></scorad-weightings>
                 <scorad-extent tabindex="0" ${(e) => {
-			e instanceof HTMLScoradExtentElement && e.addEventListener("value-input", (e) => {
+			e instanceof HTMLScoradExtentElement && (e.addEventListener("value-input", (e) => {
 				this.value = {
 					...this.value,
 					extent: e.detail
-				};
-			});
+				}, this.valueInput(this.value);
+			}), e.addEventListener("value-change", (e) => {
+				this.value = {
+					...this.value,
+					extent: e.detail
+				}, this.valueChange(this.value);
+			}));
 		}}></scorad-extent>
             </scorad-label>
 
@@ -1532,12 +1578,17 @@ var tag = "scorad-component", HTMLScoradElement = class extends HTMLComponentEle
                 <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) => {
+			e instanceof HTMLScoradIntensityElement && (e.addEventListener("value-input", (e) => {
 				this.value = {
 					...this.value,
 					intensity: e.detail
-				};
-			});
+				}, this.valueInput(this.value);
+			}), e.addEventListener("value-change", (e) => {
+				this.value = {
+					...this.value,
+					intensity: e.detail
+				}, this.valueChange(this.value);
+			}));
 		}}></scorad-intensity>
             </scorad-label>
 
@@ -1545,12 +1596,17 @@ var tag = "scorad-component", HTMLScoradElement = class extends HTMLComponentEle
                 <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) => {
+			e instanceof HTMLScoradSubjectiveElement && (e.addEventListener("value-input", (e) => {
 				this.value = {
 					...this.value,
 					subjective: e.detail
-				};
-			});
+				}, this.valueInput(this.value);
+			}), e.addEventListener("value-change", (e) => {
+				this.value = {
+					...this.value,
+					subjective: e.detail
+				}, this.valueChange(this.value);
+			}));
 		}}></scorad-subjective>
             </scorad-label>
 
@@ -1560,7 +1616,7 @@ var tag = "scorad-component", HTMLScoradElement = class extends HTMLComponentEle
                 ${(e) => {
 			e instanceof HTMLScoradLabelElement && e.addEventListener("click", () => {
 				if (!this.shadowRoot) return;
-				this.showErrors = !0, this.afterRender();
+				this.showErrors = !0;
 				let e = this.shadowRoot.querySelector("[has-errors]");
 				e && (e.focus({ preventScroll: !0 }), e.scrollIntoView({
 					behavior: "smooth",
@@ -1573,8 +1629,13 @@ var tag = "scorad-component", HTMLScoradElement = class extends HTMLComponentEle
             </scorad-label>
         `;
 	}
+	valueInput;
+	valueChange;
 };
-__decorate([Watch("value")], HTMLScoradElement.prototype, "afterRender", null), HTMLScoradElement = __decorate([Component({
+__decorate([Att({
+	name: "aria-readonly",
+	...AttTrueFalse
+})], HTMLScoradElement.prototype, "readonly", void 0), __decorate([Watch("value", "showErrors", "readonly")], HTMLScoradElement.prototype, "afterRender", null), __decorate([Event()], HTMLScoradElement.prototype, "valueInput", void 0), __decorate([Event()], HTMLScoradElement.prototype, "valueChange", void 0), HTMLScoradElement = __decorate([Component({
 	tag,
 	css: [host_default, component_default],
 	delegatesFocus: !0