@moni-labs/moni-ui 0.4.5 → 0.4.6

package/dist/browser/moni-ui.min.js

@@ -3926,11 +3926,28 @@ var ft = rt(class extends it {
 		return ye;
 	}
 }), pt = class extends U {
-	constructor(...e) {
-		super(...e), this.name = "", this.label = "", this.variant = "outlined", this.size = "medium", this.shape = "no-round", this.disabled = !1, this.helper = "", this.errorText = "", this.error = !1, this.value = "#6750a4";
+	static {
+		this.formAssociated = !0;
+	}
+	constructor() {
+		super(), this.name = "", this.label = "", this.variant = "outlined", this.size = "medium", this.shape = "no-round", this.disabled = !1, this.helper = "", this.errorText = "", this.error = !1, this.value = "#6750a4", this._internals = this.attachInternals();
 	}
 	updated(e) {
-		e.has("value") && (this._colorInput && (this._colorInput.value = this.value), this._textInput && (this._textInput.value = this.value)), e.has("disabled") && (this._colorInput && (this._colorInput.disabled = this.disabled), this._textInput && (this._textInput.disabled = this.disabled));
+		e.has("value") && (this._colorInput && (this._colorInput.value = this.value), this._textInput && (this._textInput.value = this.value)), e.has("disabled") && (this._colorInput && (this._colorInput.disabled = this.disabled), this._textInput && (this._textInput.disabled = this.disabled)), this._internals?.setFormValue?.(this.value);
+	}
+	_onColorInput(e) {
+		let t = e.target;
+		this.value = t.value, this._internals?.setFormValue?.(this.value), Je(this, "moni-input", { detail: {
+			value: this.value,
+			originalEvent: e
+		} });
+	}
+	_onColorChange(e) {
+		let t = e.target;
+		this.value = t.value, this._internals?.setFormValue?.(this.value), Je(this, "moni-change", { detail: {
+			value: this.value,
+			originalEvent: e
+		} });
 	}
 	static {
 		this.styles = [
@@ -3986,10 +4003,12 @@ var ft = rt(class extends it {
 				part="color"
 				.value=${this.value}
 				?disabled=${this.disabled}
-				name=${Xe(this.name ? `${this.name}-color` : void 0)}
 				tabindex="-1"
+				@input=${this._onColorInput}
+				@change=${this._onColorChange}
 			/>
 			<input
+				id="input"
 				type="text"
 				part="text"
 				readonly
@@ -3999,6 +4018,7 @@ var ft = rt(class extends it {
 				class=${e ? "active" : ""}
 			/>
 			${this.label ? L`<label
+						for="input"
 						part="label"
 						class=${ft({ active: e })}
 						>${this.label}</label
@@ -5466,9 +5486,9 @@ var Tt = class extends U {
 				></div>` : ""}<nav
 				class=${t}
 				part="nav"
-				role=${e ? "dialog" : void 0}
-				aria-modal=${e ? "true" : void 0}
-				aria-expanded=${e ? this.open ? "true" : "false" : void 0}
+				role=${Xe(e ? "dialog" : void 0)}
+				aria-modal=${Xe(e ? "true" : void 0)}
+				aria-expanded=${Xe(e ? this.open ? "true" : "false" : void 0)}
 			>
 				<slot name="header"></slot>
 				<slot @slotchange=${this._propagateToItems}></slot>
@@ -6819,6 +6839,7 @@ var K = class extends U {
 		return L`<div class=${ft(a)} part="field">
 			${o}
 			<input
+				id="input"
 				type="text"
 				part="input"
 				.value=${r}
@@ -6832,6 +6853,7 @@ var K = class extends U {
 				@keydown=${this._onKeyDown}
 			/>
 			${this.label ? L`<label
+						for="input"
 						part="label"
 						class=${ft({ active: i })}
 						>${this.label}</label
@@ -7524,7 +7546,7 @@ var Pt = class extends U {
 		Promise.resolve().then(() => {
 			let e = this._steps || [];
 			e.length === 0 && (e = Array.from(this.querySelectorAll("moni-step"))), e.forEach((e, t) => {
-				e.index = t, e.orientation = this.orientation, e.completed = t < this.current, e.active = t === this.current;
+				e.index = t, e.orientation = this.orientation, e.completed = t < this.current, e.active = t === this.current, e.setAttribute("role", "listitem");
 			});
 		});
 	}
@@ -8031,6 +8053,7 @@ var Rt = class extends U {
 		return L`<div class=${ft(i)} part="field">
 			${o}
 			<textarea
+				id="input"
 				part="input"
 				rows=${this.rows}
 				maxlength=${Xe(this.maxlength ?? void 0)}
@@ -8042,6 +8065,7 @@ var Rt = class extends U {
 				@input=${this._handleInput}
 			></textarea>
 			${this.label ? L`<label
+						for="input"
 						part="label"
 						class=${ft({ active: n })}
 						>${this.label}</label
@@ -11248,6 +11272,7 @@ var zt = /* @__PURE__ */ c((/* @__PURE__ */ o(((e, t) => {
 		return L`<div class=${ft(r)} part="field">
 			${a}
 			<input
+				id="input"
 				part="input"
 				type=${this.type}
 				placeholder=${i}
@@ -11259,6 +11284,7 @@ var zt = /* @__PURE__ */ c((/* @__PURE__ */ o(((e, t) => {
 				@change=${this._handleChange}
 			/>
 			${this.label ? L`<label
+						for="input"
 						part="label"
 						class=${ft({ active: n })}
 						>${this.label}</label