@mcp-b/web-components 0.2.22 → 0.3.0

package/dist/{radio-8UZAUYXt.js → radio-4Cok4gJI.js}

@@ -1,5 +1,5 @@
 import { t as __decorate } from "./decorate-DcF3lt7P.js";
-import "./radio-item-BlhFgXsU.js";
+import "./radio-item-DpP3GBPV.js";
 import { css, html } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import hostStyles from "@mcp-b/wc-support/styles/host.styles";
@@ -447,14 +447,6 @@ var SigveloRadio = class extends SigveloFormControlElement {
 	get focusableAnchor() {
 		return this.getItems()[0];
 	}
-	connectedCallback() {
-		super.connectedCallback();
-		this.addEventListener("invalid", this.handleHostInvalid);
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.removeEventListener("invalid", this.handleHostInvalid);
-	}
 	firstUpdated() {
 		if (this.value) {
 			const selectedItem = this.getSelectedItem({ includeDisabled: true });
@@ -465,26 +457,18 @@ var SigveloRadio = class extends SigveloFormControlElement {
 		this.updateValidity();
 		if (changedProperties.has("value")) this.internals.setFormValue(this.value);
 		if (changedProperties.has("disabled")) {
-			this.customStates.set("disabled", this.disabled);
+			this.customStates.set("disabled", this.effectiveDisabled);
 			this.updateControllerDisabledState();
 		}
-		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.getItems({ includeDisabled: true }).forEach((item) => item.disabledByController = isDisabled);
+	formDisabledCallback() {
+		super.formDisabledCallback();
+		this.updateControllerDisabledState();
 	}
 	/** @internal Called when the form is reset. */
 	formResetCallback() {
-		this.isInvalid = false;
-		this.hadUserInteraction = false;
-		this.wasSubmitted = false;
+		super.formResetCallback();
 		const itemToSelect = this.getItems().find((item) => item.getAttribute("value") === this.getAttribute("value"));
 		if (itemToSelect) this.setSelectedItem(itemToSelect);
 		else this.setSelectedItem(null);
@@ -494,10 +478,8 @@ var SigveloRadio = class extends SigveloFormControlElement {
 		if (options?.includeDisabled) return [...this.querySelectorAll("sigvelo-radio-item")];
 		else return [...this.querySelectorAll("sigvelo-radio-item:not(:state(disabled))")];
 	}
-	handleHostInvalid() {
-		this.wasSubmitted = true;
-	}
 	async handleGroupClick(event) {
+		if (this.effectiveDisabled) return;
 		const selectedItem = this.getSelectedItem();
 		const radioItem = event.target.closest("sigvelo-radio-item");
 		if (radioItem && !radioItem.disabled && !radioItem.disabledByController) {
@@ -516,6 +498,7 @@ var SigveloRadio = class extends SigveloFormControlElement {
 		}
 	}
 	async handleGroupKeyDown(event) {
+		if (this.effectiveDisabled) return;
 		const target = event.target.closest("sigvelo-radio-item");
 		const radioItems = this.getItems();
 		const currentIndex = radioItems.findIndex((item) => item.tabIndex === 0) || 0;
@@ -550,7 +533,7 @@ var SigveloRadio = class extends SigveloFormControlElement {
 		const selectedItemIndex = radioItems.findIndex((item) => item === selectedItem);
 		const targetIndex = selectedItemIndex > -1 ? selectedItemIndex : 0;
 		radioItems.forEach((item, index) => {
-			if (this.disabled) item.tabIndex = -1;
+			if (this.effectiveDisabled) item.tabIndex = -1;
 			else item.tabIndex = index === targetIndex ? 0 : -1;
 		});
 	}
@@ -581,7 +564,7 @@ var SigveloRadio = class extends SigveloFormControlElement {
 	}
 	/** Updates the controller disabled state for all radio items */
 	updateControllerDisabledState() {
-		this.getItems({ includeDisabled: true }).forEach((item) => item.disabledByController = this.disabled);
+		this.getItems({ includeDisabled: true }).forEach((item) => item.disabledByController = this.effectiveDisabled);
 		requestAnimationFrame(() => this.resetRovingTabIndex());
 	}
 	/** Sets the form control's validity */
@@ -630,7 +613,7 @@ var SigveloRadio = class extends SigveloFormControlElement {
         @click=${this.handleGroupClick}
         @keydown=${this.handleGroupKeyDown}
       >
-        <slot @slotchange=${this.resetRovingTabIndex}></slot>
+        <slot @slotchange=${this.updateControllerDisabledState}></slot>
       </div>
     `;
 	}

package/dist/{radio-CieMa4zU.d.ts → radio-B4fz924Q.d.ts}

@@ -418,17 +418,14 @@ declare class SigveloRadio extends SigveloFormControlElement {
   required: boolean;
   /** Disables the radio control. */
   disabled: boolean;
-  connectedCallback(): void;
-  disconnectedCallback(): void;
   firstUpdated(): void;
   updated(changedProperties: PropertyValues<this>): void;
   /** @internal Called when a containing fieldset is disabled. */
-  formDisabledCallback(isDisabled: boolean): void;
+  formDisabledCallback(): void;
   /** @internal Called when the form is reset. */
   formResetCallback(): void;
   /** Gets an array of radio items slotted into the radio. */
   private getItems;
-  private handleHostInvalid;
   private handleGroupClick;
   private handleGroupKeyDown;
   /**

package/dist/{radio-item-BlhFgXsU.js → radio-item-DpP3GBPV.js}

@@ -128,9 +128,8 @@ var radio_item_styles_default = css`
   }
 
   :host(:focus-visible:not(:state(disabled))) #visual-box {
-    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);
   }
 
   :host(:state(disabled)) {

package/dist/{rating-4xNsWumY.d.ts → rating-8BLXhAVl.d.ts}

@@ -330,15 +330,13 @@ declare class SigveloRating extends SigveloFormControlElement {
   disconnectedCallback(): void;
   firstUpdated(): void;
   updated(changedProperties: PropertyValues<this>): void;
-  /** @internal Called when a containing fieldset is disabled. */
-  formDisabledCallback(isDisabled: boolean): void;
+  formDisabledCallback(): void;
   /** @internal Called when the form is reset. */
   formResetCallback(): void;
   /** Clamps a number to min/max while ensuring it's a valid step interval. */
   private clampAndCeilToStep;
   private handleBlur;
   private handleFocus;
-  private handleHostInvalid;
   private handleKeyDown;
   private handleLabelPointerDown;
   private setValueFromCoordinates;

package/dist/{rating-C1BcJDIO.js → rating-CSn-nU2R.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";
@@ -436,11 +436,13 @@ var SigveloRating = class extends SigveloFormControlElement {
 	}
 	connectedCallback() {
 		super.connectedCallback();
-		this.addEventListener("invalid", this.handleHostInvalid);
+		this.draggableRating?.toggle(!(this.effectiveDisabled || this.readonly));
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		this.removeEventListener("invalid", this.handleHostInvalid);
+		this.draggableRating?.stop();
+		this.didDragOverOthers = false;
+		this.valueWhenDraggingStarted = void 0;
 	}
 	firstUpdated() {
 		this.draggableRating = new DraggableElement(this.rating, {
@@ -454,7 +456,7 @@ var SigveloRating = class extends SigveloFormControlElement {
 				this.setValueFromCoordinates(x);
 				if (this.value !== this.valueWhenDraggingStarted) this.didDragOverOthers = true;
 			},
-			stop: () => {
+			stop: (_x, _y, canceled) => {
 				if (this.value !== this.valueWhenDraggingStarted) {
 					this.dispatchEvent(new SigveloChangeEvent());
 					this.dispatchEvent(new Event("change", {
@@ -463,7 +465,7 @@ var SigveloRating = class extends SigveloFormControlElement {
 					}));
 					this.hadUserInteraction = true;
 				}
-				if (this.value === this.valueWhenDraggingStarted && !this.didDragOverOthers) this.value = 0;
+				if (!canceled && this.value === this.valueWhenDraggingStarted && !this.didDragOverOthers) this.value = 0;
 				this.didDragOverOthers = false;
 				this.valueWhenDraggingStarted = void 0;
 			}
@@ -476,26 +478,21 @@ var SigveloRating = class extends SigveloFormControlElement {
 			this.internals.setFormValue(String(this.value));
 		}
 		if (changedProperties.has("max")) this.value = clamp(this.value, 0, this.max);
-		if (changedProperties.has("disabled")) this.customStates.set("disabled", this.disabled);
-		if (changedProperties.has("disabled") || changedProperties.has("readonly")) this.draggableRating.toggle(!(this.disabled || this.readonly));
-		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);
-		}
+		if (changedProperties.has("disabled")) this.customStates.set("disabled", this.effectiveDisabled);
+		if (changedProperties.has("disabled") || changedProperties.has("readonly")) this.draggableRating.toggle(!(this.effectiveDisabled || this.readonly));
 	}
-	/** @internal Called when a containing fieldset is disabled. */
-	formDisabledCallback(isDisabled) {
-		this.disabled = isDisabled;
+	formDisabledCallback() {
+		super.formDisabledCallback();
+		this.draggableRating?.toggle(!(this.effectiveDisabled || this.readonly));
+		if (this.effectiveDisabled) {
+			this.didDragOverOthers = false;
+			this.valueWhenDraggingStarted = void 0;
+		}
 	}
 	/** @internal Called when the form is reset. */
 	formResetCallback() {
 		this.value = parseFloat(this.getAttribute("value") ?? "0");
-		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. */
 	clampAndCeilToStep(value) {
@@ -512,14 +509,11 @@ var SigveloRating = 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 oldValue = this.value;
 		let newValue = this.value;
-		if (this.disabled || this.readonly) return;
+		if (this.effectiveDisabled || this.readonly) return;
 		if (event.key === "ArrowUp" || event.key === (isRtl ? "ArrowLeft" : "ArrowRight")) {
 			event.preventDefault();
 			newValue = this.clampAndCeilToStep(newValue + this.step);
@@ -557,18 +551,14 @@ var SigveloRating = class extends SigveloFormControlElement {
 			}));
 			this.hadUserInteraction = true;
 		}
-		if (event.key === "Enter" && 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);
-		}
+		if (event.key === "Enter") this.submitAssociatedForm();
 	}
 	handleLabelPointerDown(event) {
 		event.preventDefault();
-		if (!this.disabled) this.rating.focus();
+		if (!this.effectiveDisabled) this.rating.focus();
 	}
 	setValueFromCoordinates(x) {
+		if (this.effectiveDisabled || this.readonly) return;
 		const isRtl = this.localize.dir() === "rtl";
 		const oldValue = this.value;
 		const { right, left, width } = this.ratingBoundingClientRect;
@@ -659,19 +649,19 @@ var SigveloRating = class extends SigveloFormControlElement {
 			md: this.size === "md",
 			lg: this.size === "lg",
 			xl: this.size === "xl",
-			disabled: this.disabled,
+			disabled: this.effectiveDisabled,
 			readonly: this.readonly
 		})}
         role="slider"
         aria-labelledby="label"
         aria-describedby="description"
-        aria-disabled=${this.disabled ? "true" : "false"}
+        aria-disabled=${this.effectiveDisabled ? "true" : "false"}
         aria-readonly=${this.readonly ? "true" : "false"}
         aria-valuemin="0"
         aria-valuenow=${this.value}
         aria-valuetext="${this.localize.term("numberOfTotal", this.value, this.max)}"
         aria-valuemax=${this.max}
-        tabindex=${this.disabled || this.readonly ? "-1" : "0"}
+        tabindex=${this.effectiveDisabled || this.readonly ? "-1" : "0"}
         @focus=${this.handleFocus}
         @blur=${this.handleBlur}
         @keydown=${this.handleKeyDown}

package/dist/{search-list-Clmrg8EV.js → search-list-BffPIgnw.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";
@@ -23,6 +23,15 @@ var search_list_styles_default = css`
     width: 100%;
     gap: 1em;
   }
+
+  /*
+   * Filtered-out items are marked with the hidden attribute. The browser's own rule for that attribute only reaches
+   * the HTML namespace, and an item here is documented as "just about any element" — a marked SVG item would stay on
+   * screen — so the list hides its own items rather than leaving it to the user agent.
+   */
+  #items slot::slotted([hidden]) {
+    display: none;
+  }
 `;
 //#endregion
 //#region src/components/search-list/search-list.ts
@@ -749,7 +758,7 @@ var SigveloSearchList = class extends SigveloElement {
 		this.items = [];
 		this.localize = new Localize(this);
 		this.query = "";
-		this.isEmpty = false;
+		this.hasVisibleItems = false;
 		this.isInitial = false;
 		this.resultsMessage = "";
 		this.match = "exact";
@@ -790,7 +799,7 @@ var SigveloSearchList = class extends SigveloElement {
 			}
 		}
 		if (changedProperties.has("match")) this.updateResults();
-		if (changedProperties.has("isEmpty")) this.customStates.set("empty", this.isEmpty);
+		if (changedProperties.has("hasVisibleItems") || changedProperties.has("query")) this.customStates.set("empty", this.query !== "" && !this.hasVisibleItems);
 		if (changedProperties.has("isInitial")) this.customStates.set("initial", this.isInitial);
 	}
 	/** Gets the controller or returns `null` if one can't be found. */
@@ -817,7 +826,7 @@ var SigveloSearchList = class extends SigveloElement {
 		let wasWarned = false;
 		this.isInitial = !hasQuery && this.slotsWithContent.has("initial");
 		if (!this.isInitial) this.items.forEach((item) => {
-			const searchableContent = `${item.textContent || ""} ${item.dataset.keywords || ""}`;
+			const searchableContent = `${item.textContent || ""} ${item.getAttribute("data-keywords") || ""}`;
 			if (hasQuery) {
 				let isMatch = false;
 				if (this.match === "exact") isMatch = exactSearch(this.query, searchableContent);
@@ -830,11 +839,11 @@ var SigveloSearchList = class extends SigveloElement {
 					}
 					isMatch = exactSearch(this.query, searchableContent);
 				}
-				item.hidden = !isMatch;
+				item.toggleAttribute("hidden", !isMatch);
 				if (isMatch) numResults++;
-			} else item.hidden = false;
+			} else item.removeAttribute("hidden");
 		});
-		this.isEmpty = this.isInitial ? true : this.items.some((item) => item.hidden !== true);
+		this.hasVisibleItems = this.isInitial ? true : this.items.some((item) => !item.hasAttribute("hidden"));
 		clearTimeout(this.resultsTimeout);
 		this.resultsTimeout = setTimeout(() => {
 			if (this.isInitial) this.resultsMessage = "";
@@ -861,17 +870,17 @@ var SigveloSearchList = class extends SigveloElement {
       <div id="results" class="vh" role="region" aria-live="polite">${this.resultsMessage}</div>
 
       <div id="items" part="items" ?hidden=${showInitial}>
-        <slot @slotchange=${this.handleDefaultSlotChange} ?hidden=${!this.isEmpty}></slot>
+        <slot @slotchange=${this.handleDefaultSlotChange} ?hidden=${!this.hasVisibleItems}></slot>
       </div>
 
-      <slot name="empty" ?hidden=${this.isEmpty || showInitial}></slot>
+      <slot name="empty" ?hidden=${this.hasVisibleItems || showInitial}></slot>
       <slot name="initial" ?hidden=${!showInitial}></slot>
     `;
 	}
 };
 __decorate([query("#results")], SigveloSearchList.prototype, "results", void 0);
 __decorate([state()], SigveloSearchList.prototype, "query", void 0);
-__decorate([state()], SigveloSearchList.prototype, "isEmpty", void 0);
+__decorate([state()], SigveloSearchList.prototype, "hasVisibleItems", void 0);
 __decorate([state()], SigveloSearchList.prototype, "isInitial", void 0);
 __decorate([state()], SigveloSearchList.prototype, "resultsMessage", void 0);
 __decorate([property({ reflect: true })], SigveloSearchList.prototype, "controller", void 0);

package/dist/{search-list-n0GYO7rh.d.ts → search-list-Cd3--X7Q.d.ts}

@@ -722,13 +722,23 @@ import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
 declare class SigveloSearchList extends SigveloElement {
   static observeSlots: boolean;
   static styles: CSSResultGroup;
+  /**
+   * Items are whatever the consumer slotted in — "just about any element", including SVG. That rules out anything
+   * `HTMLElement`-only when filtering them: `dataset` and `hidden` both exist on `HTMLElement` but not on `Element`,
+   * and writing `hidden` on an SVG item only creates a dead expando. Filtering goes through the `data-keywords` and
+   * `hidden` content attributes instead, which every element carries, and the stylesheet hides the marked ones.
+   */
   private items;
   private debounceTimeout;
   private localize;
   private resultsTimeout;
   results: HTMLElement;
   query: string;
-  isEmpty: boolean;
+  /**
+   * Whether any slotted item survived the current filter. Not the `empty` state — that one also needs a query.
+   * Public like its siblings because Lit keys `changedProperties` on `keyof this`, which excludes private members.
+   */
+  hasVisibleItems: boolean;
   isInitial: boolean;
   resultsMessage: string;
   /**

package/dist/{select-CkZK2jJn.d.ts → select-6H_sN4A2.d.ts}

@@ -472,19 +472,14 @@ declare class SigveloSelect extends SigveloFormControlElement {
   autocomplete: string;
   /** Sets the enter key label on virtual keyboards. */
   enterkeyhint: "enter" | "done" | "go" | "next" | "previous" | "search" | "send";
-  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 handleVisualBoxPointerDown;
   private handleChange;
   private handleFocus;
-  private handleHostInvalid;
   private handleInput;
   private syncOptions;
   /** Sets the form control's validity */

package/dist/{select-DLIaRnA4.js → select-B6nkY6E-.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";
@@ -473,14 +474,6 @@ var SigveloSelect = class extends SigveloFormControlElement {
 	get focusableAnchor() {
 		return this.textBox;
 	}
-	connectedCallback() {
-		super.connectedCallback();
-		this.addEventListener("invalid", this.handleHostInvalid);
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.removeEventListener("invalid", this.handleHostInvalid);
-	}
 	firstUpdated() {
 		new MutationObserver(() => this.syncOptions()).observe(this, {
 			subtree: true,
@@ -495,24 +488,11 @@ var SigveloSelect = 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 (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.value = this.getAttribute("value") ?? "";
 	}
 	handleBlur() {
@@ -541,9 +521,6 @@ var SigveloSelect = 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;
@@ -560,21 +537,8 @@ var SigveloSelect = 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 select. */
@@ -614,7 +578,7 @@ var SigveloSelect = class extends SigveloFormControlElement {
 			lg: this.size === "lg",
 			xl: this.size === "xl",
 			pill: this.pill,
-			disabled: this.disabled
+			disabled: this.effectiveDisabled
 		})}
         @pointerdown=${this.handleVisualBoxPointerDown}
       >
@@ -624,7 +588,7 @@ var SigveloSelect = class extends SigveloFormControlElement {
           id="text-box"
           part="text-box"
           ?autofocus=${this.autofocus}
-          ?disabled=${this.disabled}
+          ?disabled=${this.effectiveDisabled}
           ?readonly=${this.readonly}
           ?required=${this.required}
           .value=${live(this.value)}

package/dist/{share-bsgXZCl7.js → share-C7dB9NYf.js}

@@ -1,12 +1,11 @@
-import { Localize } from "./utilities/localize.js";
 import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { Localize } from "./utilities/localize.js";
+import { showCopyFeedback } from "./utilities/copy-feedback.js";
 import { t as copy_styles_default } from "./copy.styles-DWGvGNTP.js";
 import { css, html } from "lit";
 import { property, query } from "lit/decorators.js";
 import hostStyles from "@mcp-b/wc-support/styles/host.styles";
 import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
-import { animateWithClass } from "@mcp-b/wc-support/utilities/animate";
-import { computePosition, flip } from "@floating-ui/dom";
 //#region src/components/share/share.styles.ts
 var share_styles_default = css`
   sigvelo-button,
@@ -185,22 +184,7 @@ var SigveloShare = class extends SigveloElement {
 	}
 	/** Shows copy feedback with an animation */
 	async showFeedback(message) {
-		if (this.feedbackPlacement === "hidden") return;
-		this.feedback.textContent = message;
-		this.feedback.hidden = false;
-		this.feedback.showPopover();
-		computePosition(this, this.feedback, {
-			placement: this.feedbackPlacement,
-			middleware: [flip()]
-		}).then(({ x, y }) => {
-			Object.assign(this.feedback.style, {
-				left: `${x}px`,
-				top: `${y}px`
-			});
-		});
-		await animateWithClass(this.feedback, "show");
-		this.feedback.hidden = true;
-		this.feedback.hidePopover();
+		await showCopyFeedback(this, this.feedback, message, this.feedbackPlacement);
 	}
 	render() {
 		return html`

package/dist/{slide-activator-D7bBz69E.d.ts → slide-activator-CB0Ztk_u.d.ts}

@@ -404,6 +404,7 @@ declare class SigveloSlideActivator extends SigveloElement {
   disabled: boolean;
   /** Draws attention to the track by adding a subtle animation. */
   attention: "shimmer";
+  connectedCallback(): void;
   disconnectedCallback(): void;
   firstUpdated(): void;
   updated(changedProperties: PropertyValues<this>): void;

package/dist/{slide-activator-Dm1EvZtL.js → slide-activator-Dkv5_KPl.js}

@@ -1,6 +1,6 @@
-import { Localize } from "./utilities/localize.js";
 import "./icon-Df0H7LYB.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";
@@ -608,9 +608,16 @@ var SigveloSlideActivator = class extends SigveloElement {
 	static {
 		this.styles = [hostStyles, slide_activator_styles_default];
 	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.draggableThumb?.toggle(!this.disabled);
+	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.cleanupTimers();
+		this.draggableThumb?.stop();
+		this.isDragging = false;
+		if (!this.activated) this.setThumbPosition(0);
 	}
 	firstUpdated() {
 		this.draggableThumb = new DraggableElement(this.thumb, {
@@ -623,8 +630,8 @@ var SigveloSlideActivator = class extends SigveloElement {
 			move: (x) => {
 				this.handleDrag(x);
 			},
-			stop: (x) => {
-				this.handleDrag(x);
+			stop: (x, _y, canceled) => {
+				if (!canceled) this.handleDrag(x);
 				this.isDragging = false;
 				if (!this.activated) this.setThumbPosition(0);
 			}