@mcp-b/web-components 0.2.22 → 0.3.0

package/dist/{slider-B90Il7x3.js → slider-DY-GuC8T.js}

@@ -1,6 +1,6 @@
-import { Localize } from "./utilities/localize.js";
 import { t as __decorate } from "./decorate-DcF3lt7P.js";
-import "./tooltip-DbyoPFNe.js";
+import { Localize } from "./utilities/localize.js";
+import "./tooltip-bSXNhG9l.js";
 import { css, html } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import hostStyles from "@mcp-b/wc-support/styles/host.styles";
@@ -1087,11 +1087,10 @@ var SigveloSlider = class extends SigveloFormControlElement {
 	}
 	connectedCallback() {
 		super.connectedCallback();
-		this.addEventListener("invalid", this.handleHostInvalid);
+		if (this.hasUpdated) this.setupDragging();
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		this.removeEventListener("invalid", this.handleHostInvalid);
 		this.stopDragging();
 	}
 	firstUpdated() {
@@ -1233,10 +1232,26 @@ var SigveloSlider = class extends SigveloFormControlElement {
 				this.valueWhenDraggingStarted = void 0;
 			}
 		});
-		const enabled = !(this.disabled || this.readonly);
+		this.updateDragging();
+	}
+	formDisabledCallback() {
+		super.formDisabledCallback();
+		this.updateDragging();
+	}
+	updateDragging() {
+		const enabled = !(this.effectiveDisabled || this.readonly);
 		this.draggableTrack?.toggle(enabled);
 		this.draggableThumbMin?.toggle(enabled);
 		this.draggableThumbMax?.toggle(enabled);
+		if (!enabled) {
+			this.customStates.set("dragging", false);
+			this.valueWhenDraggingStarted = void 0;
+			this.activeThumb = null;
+			this.lastTrackPosition = null;
+			if (this.tooltip) this.tooltip.open = false;
+			if (this.tooltipMin) this.tooltipMin.open = false;
+			if (this.tooltipMax) this.tooltipMax.open = false;
+		}
 	}
 	updated(changedProperties) {
 		this.updateValidity();
@@ -1257,33 +1272,13 @@ var SigveloSlider = class extends SigveloFormControlElement {
 			if (value !== this.singleValue) this.singleValue = value;
 			else this.internals.setFormValue(String(value));
 		}
-		if (changedProperties.has("disabled")) this.customStates.set("disabled", this.disabled);
-		if (changedProperties.has("disabled") || changedProperties.has("readonly")) {
-			const enabled = !(this.disabled || this.readonly);
-			if (this.isRange) {
-				if (this.draggableThumbMin) this.draggableThumbMin.toggle(enabled);
-				if (this.draggableThumbMax) this.draggableThumbMax.toggle(enabled);
-			}
-			if (this.draggableTrack) this.draggableTrack.toggle(enabled);
-		}
-		if (this.hadUserInteraction || this.wasSubmitted) {
-			this.customStates.set("user-invalid", this.isInvalid);
-			this.customStates.set("user-valid", !this.isInvalid);
-		} else {
-			this.customStates.set("user-invalid", false);
-			this.customStates.set("user-valid", false);
-		}
-	}
-	/** @internal Called when a containing fieldset is disabled. */
-	formDisabledCallback(isDisabled) {
-		this.disabled = isDisabled;
+		if (changedProperties.has("disabled")) this.customStates.set("disabled", this.effectiveDisabled);
+		if (changedProperties.has("disabled") || changedProperties.has("readonly")) this.updateDragging();
 	}
 	/** @internal Called when the form is reset. */
 	formResetCallback() {
 		this.value = Array.isArray(this.defaultValue) ? [...this.defaultValue] : this.defaultValue;
-		this.isInvalid = false;
-		this.hadUserInteraction = false;
-		this.wasSubmitted = false;
+		super.formResetCallback();
 	}
 	/** Clamps a number to min/max while ensuring it's a valid step interval. */
 	clampAndRoundToStep(value) {
@@ -1333,13 +1328,10 @@ var SigveloSlider = class extends SigveloFormControlElement {
 		this.customStates.set("focused", true);
 		this.dispatchEvent(new SigveloFocusEvent());
 	}
-	handleHostInvalid() {
-		this.wasSubmitted = true;
-	}
 	handleKeyDown(event) {
 		const isRtl = this.localize.dir() === "rtl";
 		const target = event.target;
-		if (this.disabled || this.readonly) return;
+		if (this.effectiveDisabled || this.readonly) return;
 		if (this.isRange) {
 			if (target === this.thumbMin) this.activeThumb = "min";
 			else if (target === this.thumbMax) this.activeThumb = "max";
@@ -1377,12 +1369,7 @@ var SigveloSlider = class extends SigveloFormControlElement {
 				newValue = this.clampAndRoundToStep(stepDown);
 				break;
 			case "Enter":
-				if (this.internals.form) {
-					const submitter = [...this.internals.form.elements].find((el) => {
-						return ["button", "input"].includes(el.localName) && el.type === "submit";
-					});
-					this.internals.form.requestSubmit(submitter);
-				}
+				this.submitAssociatedForm();
 				return;
 		}
 		if (newValue === current) return;
@@ -1407,10 +1394,11 @@ var SigveloSlider = class extends SigveloFormControlElement {
 	}
 	handleLabelPointerDown(event) {
 		event.preventDefault();
-		if (!this.disabled) if (this.isRange) this.thumbMin?.focus();
+		if (!this.effectiveDisabled) if (this.isRange) this.thumbMin?.focus();
 		else this.slider.focus();
 	}
 	setValueFromCoordinates(x, y) {
+		if (this.effectiveDisabled || this.readonly) return;
 		const oldValue = this.singleValue;
 		this.singleValue = this.getValueFromCoordinates(x, y);
 		if (this.singleValue !== oldValue) {
@@ -1419,6 +1407,7 @@ var SigveloSlider = class extends SigveloFormControlElement {
 		}
 	}
 	setThumbValueFromCoordinates(x, y, thumb) {
+		if (this.effectiveDisabled || this.readonly) return;
 		const value = this.getValueFromCoordinates(x, y);
 		const oldValue = thumb === "min" ? this.rangeStart : this.rangeEnd;
 		if (thumb === "min") if (value > this.rangeEnd) this.value = [value, value];
@@ -1532,7 +1521,7 @@ var SigveloSlider = class extends SigveloFormControlElement {
 			xl: this.size === "xl",
 			horizontal: this.orientation === "horizontal",
 			vertical: this.orientation === "vertical",
-			disabled: this.disabled
+			disabled: this.effectiveDisabled
 		});
 		const markers = [];
 		if (this.withMarkers) for (let i = this.min; i <= this.max; i += this.step) markers.push(this.getPercentageFromValue(i));
@@ -1610,9 +1599,9 @@ var SigveloSlider = class extends SigveloFormControlElement {
               aria-label="${this.label ? `${this.label} (minimum value)` : "Minimum value"}"
               aria-describedby="description"
               aria-orientation=${this.orientation}
-              aria-disabled=${this.disabled ? "true" : "false"}
+              aria-disabled=${this.effectiveDisabled ? "true" : "false"}
               aria-readonly=${this.readonly ? "true" : "false"}
-              tabindex=${this.disabled ? -1 : 0}
+              tabindex=${this.effectiveDisabled ? -1 : 0}
               @blur=${this.handleBlur}
               @focus=${this.handleFocus}
               @keydown=${this.handleKeyDown}
@@ -1630,9 +1619,9 @@ var SigveloSlider = class extends SigveloFormControlElement {
               aria-label="${this.label ? `${this.label} (maximum value)` : "Maximum value"}"
               aria-describedby="description"
               aria-orientation=${this.orientation}
-              aria-disabled=${this.disabled ? "true" : "false"}
+              aria-disabled=${this.effectiveDisabled ? "true" : "false"}
               aria-readonly=${this.readonly ? "true" : "false"}
-              tabindex=${this.disabled ? -1 : 0}
+              tabindex=${this.effectiveDisabled ? -1 : 0}
               @blur=${this.handleBlur}
               @focus=${this.handleFocus}
               @keydown=${this.handleKeyDown}
@@ -1655,7 +1644,7 @@ var SigveloSlider = class extends SigveloFormControlElement {
           part="slider"
           class=${sliderClasses}
           role="slider"
-          aria-disabled=${this.disabled ? "true" : "false"}
+          aria-disabled=${this.effectiveDisabled ? "true" : "false"}
           aria-readonly=${this.readonly ? "true" : "false"}
           aria-orientation=${this.orientation}
           aria-valuemin=${this.min}
@@ -1664,7 +1653,7 @@ var SigveloSlider = class extends SigveloFormControlElement {
           aria-valuemax=${this.max}
           aria-labelledby="label"
           aria-describedby="description"
-          tabindex=${this.disabled ? -1 : 0}
+          tabindex=${this.effectiveDisabled ? -1 : 0}
           @blur=${this.handleBlur}
           @focus=${this.handleFocus}
           @keydown=${this.handleKeyDown}

package/dist/{slider-B0FVsV1o.d.ts → slider-uQQ-T_kn.d.ts}

@@ -870,9 +870,9 @@ declare class SigveloSlider extends SigveloFormControlElement {
   firstUpdated(): void;
   private stopDragging;
   private setupDragging;
+  formDisabledCallback(): void;
+  private updateDragging;
   updated(changedProperties: PropertyValues<this>): void;
-  /** @internal Called when a containing fieldset is disabled. */
-  formDisabledCallback(isDisabled: boolean): void;
   /** @internal Called when the form is reset. */
   formResetCallback(): void;
   /** Clamps a number to min/max while ensuring it's a valid step interval. */
@@ -883,7 +883,6 @@ declare class SigveloSlider extends SigveloFormControlElement {
   private getValueFromCoordinates;
   private handleBlur;
   private handleFocus;
-  private handleHostInvalid;
   private handleKeyDown;
   private handleLabelPointerDown;
   private setValueFromCoordinates;

package/dist/{splitter-MnD4In9H.js → splitter-DzC0hXGN.js}

@@ -1,5 +1,5 @@
-import { Localize } from "./utilities/localize.js";
 import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { Localize } from "./utilities/localize.js";
 import { css, html } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import hostStyles from "@mcp-b/wc-support/styles/host.styles";
@@ -446,6 +446,10 @@ var SigveloSplitter = class extends SigveloElement {
 	static {
 		this.styles = [hostStyles, splitter_styles_default];
 	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.hasUpdated) this.setupDragging();
+	}
 	firstUpdated() {
 		this.setupDragging();
 		this.updateGridTemplate();
@@ -460,11 +464,16 @@ var SigveloSplitter = class extends SigveloElement {
 			this.updateGridTemplate();
 			this.updateAriaValue();
 		}
-		if (changedProperties.has("disabled")) this.customStates.set("disabled", this.disabled);
+		if (changedProperties.has("disabled")) {
+			this.customStates.set("disabled", this.disabled);
+			this.setupDragging();
+		}
 		if (changedProperties.has("isDragging")) this.customStates.set("dragging", this.isDragging);
 	}
 	disconnectedCallback() {
 		this.dragHandler?.stop();
+		this.isDragging = false;
+		this.customStates.set("dragging", false);
 		super.disconnectedCallback();
 	}
 	handleFocus() {
@@ -504,7 +513,9 @@ var SigveloSplitter = class extends SigveloElement {
 	}
 	setupDragging() {
 		this.dragHandler?.stop();
-		if (this.disabled) return;
+		this.isDragging = false;
+		this.customStates.set("dragging", false);
+		if (this.disabled || !this.isConnected) return;
 		this.dragHandler = new DraggableElement(this.divider, {
 			start: (clientX, clientY) => {
 				this.isDragging = true;

package/dist/{splitter-DBDJAzsp.d.ts → splitter-KQVgGdvP.d.ts}

@@ -301,6 +301,7 @@ declare class SigveloSplitter extends SigveloElement {
   snap: string;
   /** The maximum distance (in pixels) within which the divider will snap to a specified snap point. */
   snapThreshold: number;
+  connectedCallback(): void;
   firstUpdated(): void;
   updated(changedProperties: PropertyValues<this>): void;
   disconnectedCallback(): void;

package/dist/{switch-Cief9M59.d.ts → switch-BUfFo074.d.ts}

@@ -217,20 +217,14 @@ declare class SigveloSwitch extends SigveloFormControlElement {
    * Makes the switch required. Form submission will not be allowed until the switch is checked.
    */
   required: boolean;
-  connectedCallback(): void;
-  disconnectedCallback(): void;
   updated(changedProperties: PropertyValues<this>): void;
-  /** @internal Called when a containing fieldset is disabled. */
-  formDisabledCallback(isDisabled: boolean): void;
   /** @internal Called when the form is reset. */
   formResetCallback(): void;
-  private handleClick;
   private handleBlur;
   private handleChange;
   private handleInput;
   private handleKeyUp;
   private handleFocus;
-  private handleHostInvalid;
   /** Sets the form control's validity */
   private updateValidity;
   /** Sets focus to the switch. */

package/dist/{switch-D0hWr37A.js → switch-Chij-EaQ.js}

@@ -1,5 +1,6 @@
 import "./icon-Df0H7LYB.js";
 import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { mirrorNativeValidity } from "./utilities/form-validity.js";
 import { css, html } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import hostStyles from "@mcp-b/wc-support/styles/host.styles";
@@ -74,9 +75,8 @@ var switch_styles_default = css`
     }
 
     &:has(:focus-visible) {
-      outline: var(--sigvelo-border-style) calc(var(--sigvelo-border-width) + 1px)
-        var(--sigvelo-color-focus);
-      outline-offset: var(--sigvelo-border-width);
+      outline: var(--sigvelo-focus-ring);
+      outline-offset: var(--sigvelo-focus-offset);
     }
 
     /* Thumb */
@@ -429,40 +429,16 @@ var SigveloSwitch = class extends SigveloFormControlElement {
 	get focusableAnchor() {
 		return this.switch;
 	}
-	connectedCallback() {
-		super.connectedCallback();
-		this.addEventListener("invalid", this.handleHostInvalid);
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.removeEventListener("invalid", this.handleHostInvalid);
-	}
 	updated(changedProperties) {
 		this.updateValidity();
 		if (changedProperties.has("checked") || changedProperties.has("value")) this.internals.setFormValue(this.checked ? this.value : null);
-		if (changedProperties.has("disabled")) this.customStates.set("disabled", this.disabled);
-		if (this.hadUserInteraction || this.wasSubmitted) {
-			this.customStates.set("user-invalid", this.isInvalid);
-			this.customStates.set("user-valid", !this.isInvalid);
-		} else {
-			this.customStates.set("user-invalid", false);
-			this.customStates.set("user-valid", false);
-		}
-	}
-	/** @internal Called when a containing fieldset is disabled. */
-	formDisabledCallback(isDisabled) {
-		this.disabled = isDisabled;
+		if (changedProperties.has("disabled")) this.customStates.set("disabled", this.effectiveDisabled);
 	}
 	/** @internal Called when the form is reset. */
 	formResetCallback() {
-		this.isInvalid = false;
-		this.hadUserInteraction = false;
-		this.wasSubmitted = false;
+		super.formResetCallback();
 		this.checked = this.hasAttribute("checked");
 	}
-	handleClick() {
-		this.checked = !this.checked;
-	}
 	handleBlur() {
 		this.customStates.set("focused", false);
 		this.dispatchEvent(new SigveloBlurEvent());
@@ -476,28 +452,21 @@ var SigveloSwitch = class extends SigveloFormControlElement {
 		}));
 	}
 	handleInput() {
+		this.checked = this.switch.checked;
 		this.dispatchEvent(new SigveloInputEvent());
 	}
 	handleKeyUp(event) {
-		if (event.key === "Enter" && !this.disabled) this.handleClick();
+		if (event.key === "Enter" && !this.effectiveDisabled) this.switch.click();
 	}
 	handleFocus() {
 		this.customStates.set("focused", true);
 		this.dispatchEvent(new SigveloFocusEvent());
 	}
-	handleHostInvalid() {
-		this.wasSubmitted = true;
-	}
 	/** Sets the form control's validity */
 	async updateValidity() {
 		await this.updateComplete;
-		const hasCustomValidity = this.getCustomValidity().length > 0;
-		const validationMessage = hasCustomValidity ? this.getCustomValidity() : this.switch.validationMessage;
-		const flags = {
-			customError: hasCustomValidity,
-			valueMissing: this.switch.validity.valueMissing
-		};
-		this.isInvalid = hasCustomValidity ? true : !this.switch.validity.valid;
+		const { flags, validationMessage, isInvalid } = mirrorNativeValidity(this.switch, this.getCustomValidity());
+		this.isInvalid = isInvalid;
 		this.internals.setValidity(flags, validationMessage, this.focusableAnchor);
 	}
 	/** Sets focus to the switch. */
@@ -522,7 +491,7 @@ var SigveloSwitch = class extends SigveloFormControlElement {
 			lg: this.size === "lg",
 			xl: this.size === "xl",
 			checked: this.checked,
-			disabled: this.disabled,
+			disabled: this.effectiveDisabled,
 			required: this.required
 		})}
         >
@@ -535,10 +504,9 @@ var SigveloSwitch = class extends SigveloFormControlElement {
             aria-checked=${this.checked ? "true" : "false"}
             aria-describedby="description"
             .checked=${live(this.checked)}
-            .disabled=${this.disabled}
+            .disabled=${this.effectiveDisabled}
             .required=${this.required}
             @change=${this.handleChange}
-            @click=${this.handleClick}
             @input=${this.handleInput}
             @keyup=${this.handleKeyUp}
             @focus=${this.handleFocus}

package/dist/{tab-list-B_Ye_Oj9.js → tab-list-CVOUSpAh.js}

@@ -1,6 +1,6 @@
-import { Localize } from "./utilities/localize.js";
 import { t as __decorate } from "./decorate-DcF3lt7P.js";
-import "./scroller-LYgBVyfY.js";
+import { Localize } from "./utilities/localize.js";
+import "./scroller-DZATZlDa.js";
 import "./tab-C-FtuNmh.js";
 import "./tab-panel-BaBl6eep.js";
 import { css, html } from "lit";

package/dist/{text-area-B_mjCE9W.d.ts → text-area-DFMKyk8y.d.ts}

@@ -293,14 +293,11 @@ declare class SigveloTextArea extends SigveloFormControlElement {
   connectedCallback(): void;
   disconnectedCallback(): void;
   updated(changedProperties: PropertyValues<this>): void;
-  /** @internal Called when a containing fieldset is disabled. */
-  formDisabledCallback(isDisabled: boolean): void;
   /** @internal Called when the form is reset. */
   formResetCallback(): void;
   private handleBlur;
   private handleChange;
   private handleFocus;
-  private handleHostInvalid;
   private handleInput;
   /** Updates the height of the text area based on its content and settings. */
   private updateHeight;

package/dist/{text-area-Czixaz-_.js → text-area-DZVghSkO.js}

@@ -1,4 +1,5 @@
 import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { mirrorNativeValidity } from "./utilities/form-validity.js";
 import { css, html } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import hostStyles from "@mcp-b/wc-support/styles/host.styles";
@@ -10,42 +11,35 @@ import { live } from "lit/directives/live.js";
 import formControlStyles from "@mcp-b/wc-support/styles/form-control.styles";
 //#region src/components/text-area/text-area.styles.ts
 var text_area_styles_default = css`
-  /* Normal */
-  #visual-box.normal {
-    padding-inline: 0;
-
-    #text-box {
-      padding-inline: 0.75em;
-    }
-  }
-
-  /* Filled */
+  /* Keep the resize handle at the border; padding belongs to the textarea. */
+  #visual-box.normal,
   #visual-box.filled {
     padding-inline: 0;
-
-    #text-box {
-      padding-inline: 0.75em;
-    }
   }
 
   /* Sizes */
   #visual-box.xs #text-box {
+    padding-inline: var(--sigvelo-control-padding-inline-xs);
     padding-block: 0.2em;
   }
 
   #visual-box.sm #text-box {
+    padding-inline: var(--sigvelo-control-padding-inline-sm);
     padding-block: 0.35em;
   }
 
   #visual-box.md #text-box {
+    padding-inline: var(--sigvelo-control-padding-inline-md);
     padding-block: 0.7em;
   }
 
   #visual-box.lg #text-box {
+    padding-inline: var(--sigvelo-control-padding-inline-lg);
     padding-block: 0.5em;
   }
 
   #visual-box.xl #text-box {
+    padding-inline: var(--sigvelo-control-padding-inline-xl);
     padding-block: 0.55em;
   }
 
@@ -313,7 +307,6 @@ var SigveloTextArea = class extends SigveloFormControlElement {
 	}
 	connectedCallback() {
 		super.connectedCallback();
-		this.addEventListener("invalid", this.handleHostInvalid);
 		this.resizeObserver = new ResizeObserver(() => this.updateHeight());
 		this.updateComplete.then(() => {
 			this.updateHeight();
@@ -322,7 +315,6 @@ var SigveloTextArea = class extends SigveloFormControlElement {
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		this.removeEventListener("invalid", this.handleHostInvalid);
 		if (this.textBox) this.resizeObserver.unobserve(this.textBox);
 	}
 	updated(changedProperties) {
@@ -331,25 +323,12 @@ var SigveloTextArea = class extends SigveloFormControlElement {
 			this.customStates.set("blank", this.value === "");
 			this.internals.setFormValue(this.value);
 		}
-		if (changedProperties.has("disabled")) this.customStates.set("disabled", this.disabled);
+		if (changedProperties.has("disabled")) this.customStates.set("disabled", this.effectiveDisabled);
 		if (changedProperties.has("value") || changedProperties.has("rows")) this.updateHeight();
-		if (this.hadUserInteraction || this.wasSubmitted) {
-			this.customStates.set("user-invalid", this.isInvalid);
-			this.customStates.set("user-valid", !this.isInvalid);
-		} else {
-			this.customStates.set("user-invalid", false);
-			this.customStates.set("user-valid", false);
-		}
-	}
-	/** @internal Called when a containing fieldset is disabled. */
-	formDisabledCallback(isDisabled) {
-		this.disabled = isDisabled;
 	}
 	/** @internal Called when the form is reset. */
 	formResetCallback() {
-		this.isInvalid = false;
-		this.hadUserInteraction = false;
-		this.wasSubmitted = false;
+		super.formResetCallback();
 		this.value = this.getAttribute("value") ?? "";
 	}
 	handleBlur() {
@@ -368,9 +347,6 @@ var SigveloTextArea = class extends SigveloFormControlElement {
 		this.customStates.set("focused", true);
 		this.dispatchEvent(new SigveloFocusEvent());
 	}
-	handleHostInvalid() {
-		this.wasSubmitted = true;
-	}
 	async handleInput() {
 		this.value = this.textBox.value;
 		await this.updateComplete;
@@ -407,21 +383,8 @@ var SigveloTextArea = class extends SigveloFormControlElement {
 	/** Sets the form control's validity */
 	async updateValidity() {
 		await this.updateComplete;
-		const hasCustomValidity = this.getCustomValidity().length > 0;
-		const validationMessage = hasCustomValidity ? this.getCustomValidity() : this.textBox.validationMessage;
-		const flags = {
-			badInput: this.textBox.validity.badInput,
-			customError: hasCustomValidity,
-			patternMismatch: this.textBox.validity.patternMismatch,
-			rangeOverflow: this.textBox.validity.rangeOverflow,
-			rangeUnderflow: this.textBox.validity.rangeUnderflow,
-			stepMismatch: this.textBox.validity.stepMismatch,
-			tooLong: this.textBox.validity.tooLong,
-			tooShort: this.textBox.validity.tooShort,
-			typeMismatch: this.textBox.validity.typeMismatch,
-			valueMissing: this.textBox.validity.valueMissing
-		};
-		this.isInvalid = hasCustomValidity ? true : !this.textBox.validity.valid;
+		const { flags, validationMessage, isInvalid } = mirrorNativeValidity(this.textBox, this.getCustomValidity());
+		this.isInvalid = isInvalid;
 		this.internals.setValidity(flags, validationMessage, this.focusableAnchor);
 	}
 	/** Sets focus to the text area. */
@@ -472,14 +435,14 @@ var SigveloTextArea = class extends SigveloFormControlElement {
 			"resize-vertical": this.resize === "vertical",
 			"resize-auto": this.resize === "auto",
 			"resize-none": this.resize === "none",
-			disabled: this.disabled
+			disabled: this.effectiveDisabled
 		})}
       >
         <textarea
           id="text-box"
           part="text-box"
           ?autofocus=${this.autofocus}
-          ?disabled=${this.disabled}
+          ?disabled=${this.effectiveDisabled}
           ?readonly=${this.readonly}
           ?required=${this.required}
           placeholder=${ifDefined(this.placeholder)}

package/dist/{text-field-BClWMp6q.d.ts → text-field-DepP1gei.d.ts}

@@ -369,19 +369,14 @@ declare class SigveloTextField extends SigveloFormControlElement {
   inputmode: "none" | "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url";
   /** Turns spell checking on or off in supported browsers. */
   spellcheck: boolean;
-  connectedCallback(): void;
-  disconnectedCallback(): void;
   firstUpdated(): void;
   updated(changedProperties: PropertyValues<this>): void;
-  /** @internal Called when a containing fieldset is disabled. */
-  formDisabledCallback(isDisabled: boolean): void;
   /** @internal Called when the form is reset. */
   formResetCallback(): void;
   private handleBlur;
   private handleChange;
   private handleClearClick;
   private handleFocus;
-  private handleHostInvalid;
   private handleInput;
   private handleKeyDown;
   private handlePasswordToggleClick;