@mcp-b/web-components 0.2.22 → 0.3.0

package/dist/index.js

@@ -1,92 +1,89 @@
-import "./translations/en.js";
 import { registerIconLibrary, unregisterIconLibrary } from "./utilities/icon-library.js";
 import { t as SigveloIcon } from "./icon-Df0H7LYB.js";
 import { t as SigveloAccordionItem } from "./accordion-item-pRZLJCt2.js";
 import { t as SigveloAccordion } from "./accordion-C0iq5HFu.js";
 import { t as SigveloActionBar } from "./action-bar-CjN_UcnP.js";
-import { t as SigveloAlertDialog } from "./alert-dialog-D25Oi_TS.js";
-import { t as SigveloDialog } from "./dialog-Cx46HMaZ.js";
+import { t as SigveloAlertDialog } from "./alert-dialog-CGUwj_0U.js";
+import { t as SigveloDialog } from "./dialog-Ddvyn2d_.js";
 import { t as SigveloAvatar } from "./avatar-DAnSybDZ.js";
 import { t as SigveloBadge } from "./badge-Ct95U4UO.js";
 import { t as SigveloBreadcrumb } from "./breadcrumb-uURhiqWJ.js";
 import { t as SigveloBreadcrumbItem } from "./breadcrumb-item-P5pdq_gE.js";
-import { t as SigveloSpinner } from "./spinner-C04Dmc0H.js";
-import { t as SigveloButton } from "./button-gg3JJxQZ.js";
+import { t as SigveloSpinner } from "./spinner-C9lQARtQ.js";
+import { t as SigveloButton } from "./button-BbabhtKj.js";
 import { t as SigveloButtonGroup } from "./button-group-BydvJTQy.js";
 import { t as SigveloCallout } from "./callout-B8zTf8Go.js";
 import { t as SigveloCard } from "./card-DIg1-X2G.js";
 import { t as SigveloCarouselItem } from "./carousel-item-B5-X31Ha.js";
-import { t as SigveloCarousel } from "./carousel-XopKISBQ.js";
-import { t as SigveloCheckbox } from "./checkbox-C96lUDIM.js";
+import { t as SigveloCarousel } from "./carousel-DpIqPTuO.js";
+import { t as SigveloCheckbox } from "./checkbox-C97tlcf2.js";
 import { t as SigveloCheckboxGroup } from "./checkbox-group-CLvNAO_F.js";
 import { SigveloCopy } from "./components/copy/copy.js";
-import { t as SigveloTooltip } from "./tooltip-DbyoPFNe.js";
-import { t as SigveloSlider } from "./slider-B90Il7x3.js";
-import { t as SigveloTextField } from "./text-field-Cznb4Afc.js";
-import { t as SigveloColorPicker } from "./color-picker-BYyZavkT.js";
-import { t as SigveloColorInput } from "./color-input-Gae_-9w-.js";
+import { t as SigveloTooltip } from "./tooltip-bSXNhG9l.js";
+import { t as SigveloSlider } from "./slider-DY-GuC8T.js";
+import { t as SigveloTextField } from "./text-field-gX5RovkE.js";
+import { t as SigveloColorPicker } from "./color-picker-Mnpc5u6E.js";
+import { t as SigveloColorInput } from "./color-input-Dtp1v7A-.js";
 import { t as SigveloComboboxItem } from "./combobox-item-yM6tDrGG.js";
-import { t as SigveloCombobox } from "./combobox-iERnTD3A.js";
-import { t as SigveloComparison } from "./comparison-HJ1Zedhs.js";
-import { t as SigveloDate } from "./date-CJPmOdi9.js";
+import { t as SigveloCombobox } from "./combobox-D4ji7M2B.js";
+import { t as SigveloComparison } from "./comparison-DQUpvkmg.js";
+import { t as SigveloDate } from "./date-CFIR88pX.js";
 import { n as SigveloRowSelectEvent, t as SigveloDataTable } from "./data-table-CITa8DSn.js";
 import { t as SigveloDivider } from "./divider-9vNsfHW8.js";
 import { t as SigveloDropdownItem } from "./dropdown-item-D8cgfO7m.js";
-import { t as SigveloDropdown } from "./dropdown-DM4tlF_p.js";
+import { t as SigveloDropdown } from "./dropdown-BPOpCp59.js";
 import { t as SigveloEmptyState } from "./empty-state-BLWjtKUo.js";
 import { t as SigveloEmptyResult } from "./empty-result-B2ln1yFL.js";
-import { t as SigveloExpander } from "./expander-Bwvxj6Oa.js";
+import { t as SigveloExpander } from "./expander-CMV4QCha.js";
 import { t as SigveloField } from "./field-BEyS909F.js";
-import { t as SigveloFileInput } from "./file-input-vZFm22Lo.js";
-import { n as SigveloFilterChangeEvent, t as SigveloFilterBar } from "./filter-bar-DJuDlx5f.js";
+import { t as SigveloFileInput } from "./file-input-B4VfcfTD.js";
+import { n as SigveloFilterChangeEvent, t as SigveloFilterBar } from "./filter-bar-DhQSMr3S.js";
 import { t as SigveloFormSection } from "./form-section-BchPetkj.js";
 import { t as SigveloInclude } from "./include-qNUh_6kT.js";
-import { t as SigveloInfiniteScroller } from "./infinite-scroller-BmmtnWNt.js";
+import { t as SigveloInfiniteScroller } from "./infinite-scroller-DjeMswwE.js";
 import { t as SigveloIntersectionObserver } from "./intersection-observer-B6TciOAQ.js";
 import { t as SigveloListboxItem } from "./listbox-item-CwbjHZIu.js";
-import { t as SigveloListbox } from "./listbox-B0geidHW.js";
+import { t as SigveloListbox } from "./listbox-BGHw-rUd.js";
 import { t as SigveloLoremIpsum } from "./lorem-ipsum-B2x3V-v8.js";
 import { t as SigveloMeter } from "./meter-BIDyjwFp.js";
 import { t as SigveloMetric } from "./metric-xGnpnmNP.js";
 import { t as SigveloMetricGrid } from "./metric-grid-YWGxI1F5.js";
 import { t as SigveloMutationObserver } from "./mutation-observer-DS8EBuOp.js";
-import { t as SigveloNavicon } from "./navicon-_yMHY27-.js";
-import { t as SigveloNumber } from "./number-BNtNXNF3.js";
-import { t as SigveloNumberField } from "./number-field-BGH7JtNf.js";
-import { t as SigveloPagination } from "./pagination-CrTQnuNW.js";
-import { t as SigveloPopover } from "./popover-DJBrJ0za.js";
-import { t as SigveloPreviewCard } from "./preview-card-C7H1FPfd.js";
+import { t as SigveloNavicon } from "./navicon-B-5pY9gq.js";
+import { t as SigveloNumber } from "./number-BYBxfOGw.js";
+import { t as SigveloNumberField } from "./number-field-yME3rRZT.js";
+import { t as SigveloPagination } from "./pagination-VOzVTV8p.js";
+import { t as SigveloPopover } from "./popover-lsI6gqNk.js";
+import { t as SigveloPreviewCard } from "./preview-card-D1msvOWP.js";
 import { t as SigveloProgress } from "./progress-DzVk260j.js";
-import { t as SigveloRadioItem } from "./radio-item-BlhFgXsU.js";
-import { t as SigveloRadio } from "./radio-8UZAUYXt.js";
+import { t as SigveloRadioItem } from "./radio-item-DpP3GBPV.js";
+import { t as SigveloRadio } from "./radio-4Cok4gJI.js";
 import { t as SigveloRandomContent } from "./random-content-BwiirXdG.js";
-import { t as SigveloRating } from "./rating-C1BcJDIO.js";
+import { t as SigveloRating } from "./rating-CSn-nU2R.js";
 import { t as SigveloResizeObserver } from "./resize-observer-DcrLhddo.js";
 import { t as SigveloScrollArea } from "./scroll-area-COc1857S.js";
-import { t as SigveloScroller } from "./scroller-LYgBVyfY.js";
-import { t as SigveloSearchList } from "./search-list-Clmrg8EV.js";
-import { t as SigveloSelect } from "./select-DLIaRnA4.js";
+import { t as SigveloScroller } from "./scroller-DZATZlDa.js";
+import { t as SigveloSearchList } from "./search-list-BffPIgnw.js";
+import { t as SigveloSelect } from "./select-B6nkY6E-.js";
 import { t as SigveloSelectionSummary } from "./selection-summary-BVnNJ8Lw.js";
-import { t as SigveloShare } from "./share-bsgXZCl7.js";
-import { t as SigveloSlideActivator } from "./slide-activator-Dm1EvZtL.js";
+import { t as SigveloShare } from "./share-C7dB9NYf.js";
+import { t as SigveloSlideActivator } from "./slide-activator-Dkv5_KPl.js";
 import { t as SigveloSparkline } from "./sparkline-CcpTaJ_Z.js";
-import { t as SigveloSplitter } from "./splitter-MnD4In9H.js";
-import { t as SigveloSwitch } from "./switch-D0hWr37A.js";
+import { t as SigveloSplitter } from "./splitter-DzC0hXGN.js";
+import { t as SigveloSwitch } from "./switch-Chij-EaQ.js";
 import { t as SigveloTab } from "./tab-C-FtuNmh.js";
 import { t as SigveloTabPanel } from "./tab-panel-BaBl6eep.js";
-import { t as SigveloTabList } from "./tab-list-B_Ye_Oj9.js";
-import { t as SigveloTextArea } from "./text-area-Czixaz-_.js";
+import { t as SigveloTabList } from "./tab-list-CVOUSpAh.js";
+import { t as SigveloTextArea } from "./text-area-DZVghSkO.js";
 import { t as SigveloTextMask } from "./text-mask-DDEurj90.js";
 import { t as SigveloTimedContent } from "./timed-content-pvEP4l5V.js";
-import { t as SigveloToastItem } from "./toast-item-CGvz92Qk.js";
-import { t as SigveloTransitionGroup } from "./transition-group-3hnAnwSd.js";
-import { t as SigveloToast } from "./toast-DgkBQzQC.js";
-import { t as SigveloToggleIcon } from "./toggle-icon-4oLDeEt4.js";
-import { t as SigveloToggleTag } from "./toggle-tag-1sfTFJtg.js";
+import { t as SigveloToastItem } from "./toast-item-DzSPG25R.js";
+import { t as SigveloTransitionGroup } from "./transition-group-8PmQx0A5.js";
+import { t as SigveloToast } from "./toast-CxfaWFY_.js";
+import { t as SigveloToggleIcon } from "./toggle-icon-B3fZuslO.js";
+import { t as SigveloToggleTag } from "./toggle-tag--Gkp-CJJ.js";
 import { t as SigveloToolbar } from "./toolbar-CEZ0-F-X.js";
-import { t as SigveloZoomableFrame } from "./zoomable-frame-DxcjLGcF.js";
+import { t as SigveloZoomableFrame } from "./zoomable-frame-BrjVkNMX.js";
 import "./components/index.js";
-import { allDefined } from "@mcp-b/wc-support/utilities/defined";
-import { getLibraryPath, setLibraryPath } from "@mcp-b/wc-support/utilities/library";
-import { discoverElements, preventTurboFouce, startLoader, stopLoader } from "@mcp-b/wc-support/utilities/loader";
+import { allDefined, discoverElements, getLibraryPath, preventTurboFouce, setLibraryPath, startLoader, stopLoader } from "./sigvelo.js";
 export { SigveloAccordion, SigveloAccordionItem, SigveloActionBar, SigveloAlertDialog, SigveloAvatar, SigveloBadge, SigveloBreadcrumb, SigveloBreadcrumbItem, SigveloButton, SigveloButtonGroup, SigveloCallout, SigveloCard, SigveloCarousel, SigveloCarouselItem, SigveloCheckbox, SigveloCheckboxGroup, SigveloColorInput, SigveloColorPicker, SigveloCombobox, SigveloComboboxItem, SigveloComparison, SigveloCopy, SigveloDataTable, SigveloDate, SigveloDialog, SigveloDivider, SigveloDropdown, SigveloDropdownItem, SigveloEmptyResult, SigveloEmptyState, SigveloExpander, SigveloField, SigveloFileInput, SigveloFilterBar, SigveloFilterChangeEvent, SigveloFormSection, SigveloIcon, SigveloInclude, SigveloInfiniteScroller, SigveloIntersectionObserver, SigveloListbox, SigveloListboxItem, SigveloLoremIpsum, SigveloMeter, SigveloMetric, SigveloMetricGrid, SigveloMutationObserver, SigveloNavicon, SigveloNumber, SigveloNumberField, SigveloPagination, SigveloPopover, SigveloPreviewCard, SigveloProgress, SigveloRadio, SigveloRadioItem, SigveloRandomContent, SigveloRating, SigveloResizeObserver, SigveloRowSelectEvent, SigveloScrollArea, SigveloScroller, SigveloSearchList, SigveloSelect, SigveloSelectionSummary, SigveloShare, SigveloSlideActivator, SigveloSlider, SigveloSparkline, SigveloSpinner, SigveloSplitter, SigveloSwitch, SigveloTab, SigveloTabList, SigveloTabPanel, SigveloTextArea, SigveloTextField, SigveloTextMask, SigveloTimedContent, SigveloToast, SigveloToastItem, SigveloToggleIcon, SigveloToggleTag, SigveloToolbar, SigveloTooltip, SigveloTransitionGroup, SigveloZoomableFrame, allDefined, discoverElements, getLibraryPath, preventTurboFouce, registerIconLibrary, setLibraryPath, startLoader, stopLoader, unregisterIconLibrary };

package/dist/{infinite-scroller-BmmtnWNt.js → infinite-scroller-DjeMswwE.js}

@@ -1,6 +1,6 @@
-import { Localize } from "./utilities/localize.js";
 import { t as __decorate } from "./decorate-DcF3lt7P.js";
-import "./spinner-C04Dmc0H.js";
+import { Localize } from "./utilities/localize.js";
+import "./spinner-C9lQARtQ.js";
 import { css, html } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import hostStyles from "@mcp-b/wc-support/styles/host.styles";

package/dist/{listbox-B0geidHW.js → listbox-BGHw-rUd.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 "./listbox-item-CwbjHZIu.js";
 import { css, html } from "lit";
 import { property, query, state } from "lit/decorators.js";
@@ -27,9 +27,8 @@ var listbox_styles_default = css`
 
   /* Focus state for the listbox */
   :host(:state(focused)) #listbox {
-    outline: var(--sigvelo-border-style) calc(var(--sigvelo-border-width) + 1px)
-      var(--sigvelo-color-focus);
-    outline-offset: calc(-1 * var(--sigvelo-border-width));
+    outline: var(--sigvelo-focus-ring);
+    outline-offset: calc(-1 * var(--sigvelo-focus-width));
   }
 
   :host(:state(disabled)),
@@ -673,12 +672,10 @@ var SigveloListbox = class extends SigveloFormControlElement {
 	}
 	connectedCallback() {
 		super.connectedCallback();
-		this.addEventListener("invalid", this.handleHostInvalid);
 		this.addEventListener("keydown", this.handleKeyDown);
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		this.removeEventListener("invalid", this.handleHostInvalid);
 		this.removeEventListener("keydown", this.handleKeyDown);
 		this.clearTypeaheadTimeout();
 	}
@@ -695,22 +692,12 @@ var SigveloListbox = class extends SigveloFormControlElement {
 			this.updateSelectedItems();
 			this.resetRovingTabIndex();
 		}
-		if (changedProperties.has("disabled")) {
-			this.customStates.set("disabled", this.disabled);
-			this.updateListboxAttributesOnItems();
-		}
-		const hadUserInteraction = this.hadUserInteraction || this.wasSubmitted;
-		this.customStates.set("user-invalid", hadUserInteraction && this.isInvalid);
-		this.customStates.set("user-valid", hadUserInteraction && !this.isInvalid);
-	}
-	formDisabledCallback(isDisabled) {
-		this.disabled = isDisabled;
+		this.customStates.set("disabled", this.effectiveDisabled);
+		this.updateListboxAttributesOnItems();
 	}
 	formResetCallback() {
-		this.isInvalid = false;
+		super.formResetCallback();
 		this.wasChanged = false;
-		this.hadUserInteraction = false;
-		this.wasSubmitted = false;
 		this.firstSelectedValue = this.getAttribute("value") ?? "";
 		const initiallySelectedItems = this.getItems(true).filter((item) => item.hasAttribute("selected"));
 		this.getItems(true).forEach((item) => {
@@ -831,17 +818,14 @@ var SigveloListbox = class extends SigveloFormControlElement {
 		this.wasChanged = false;
 		this.updateListboxAttributesOnItems();
 	}
-	handleHostInvalid() {
-		this.wasSubmitted = true;
-	}
 	handleLabelClick() {
-		if (!this.disabled) this.focus();
+		if (!this.effectiveDisabled) this.focus();
 	}
 	handleListboxPointerDown(event) {
 		event.preventDefault();
 	}
 	handleItemClick(event) {
-		if (this.disabled) return;
+		if (this.effectiveDisabled) return;
 		const item = event.target.closest("sigvelo-listbox-item");
 		if (item?.disabled) return;
 		if (!item) {
@@ -903,6 +887,7 @@ var SigveloListbox = class extends SigveloFormControlElement {
 		});
 	}
 	handleKeyDown(event) {
+		if (this.effectiveDisabled) return;
 		if (event.key.length === 1 && !event.metaKey && !event.ctrlKey) {
 			if (!this.readonly) this.handleTypeahead(event);
 			return;
@@ -1020,7 +1005,7 @@ var SigveloListbox = class extends SigveloFormControlElement {
 	updateListboxAttributesOnItems() {
 		const isFocused = this.customStates.has("focused");
 		this.getItems(true).forEach((item) => {
-			item.customStates.set("controller-disabled", this.disabled);
+			item.customStates.set("controller-disabled", this.effectiveDisabled);
 			item.customStates.set("controller-readonly", this.readonly);
 			item.customStates.set("controller-focused", isFocused);
 		});
@@ -1197,18 +1182,18 @@ var SigveloListbox = class extends SigveloFormControlElement {
 			md: this.size === "md",
 			lg: this.size === "lg",
 			xl: this.size === "xl",
-			disabled: this.disabled,
+			disabled: this.effectiveDisabled,
 			readonly: this.readonly,
 			multiple: this.multiple
 		})}
         role="listbox"
         aria-multiselectable=${this.multiple ? "true" : "false"}
-        aria-disabled=${this.disabled ? "true" : "false"}
+        aria-disabled=${this.effectiveDisabled ? "true" : "false"}
         aria-readonly=${this.readonly ? "true" : "false"}
         aria-required=${this.required ? "true" : "false"}
         aria-labelledby="label"
         aria-describedby="description"
-        tabindex=${this.disabled ? "-1" : "0"}
+        tabindex=${this.effectiveDisabled ? "-1" : "0"}
         @blur=${this.handleBlur}
         @focus=${this.handleFocus}
         @pointerdown=${this.handleListboxPointerDown}

package/dist/{listbox-DD4ujIJe.d.ts → listbox-DKoMIQA6.d.ts}

@@ -557,14 +557,14 @@ declare class SigveloListbox extends SigveloFormControlElement {
   private localize;
   private firstSelectedValue;
   private listbox;
-  private hadUserInteraction;
-  private isInvalid;
+  protected hadUserInteraction: boolean;
+  protected isInvalid: boolean;
   private lastSelectedIndex;
   private previousValue;
   private typeaheadBuffer;
   private typeaheadTimeout;
   private wasChanged;
-  private wasSubmitted;
+  protected wasSubmitted: boolean;
   /** The listbox's label. If you need to provide HTML in the label, use the `label` slot instead. */
   label: string;
   /** The listbox's description. If you need to provide HTML in the description, use the `description` slot instead. */
@@ -609,7 +609,6 @@ declare class SigveloListbox extends SigveloFormControlElement {
   disconnectedCallback(): void;
   firstUpdated(changedProperties: PropertyValues<this>): void;
   updated(changedProperties: PropertyValues<this>): void;
-  formDisabledCallback(isDisabled: boolean): void;
   formResetCallback(): void;
   private clearTypeaheadTimeout;
   private getItems;
@@ -626,7 +625,6 @@ declare class SigveloListbox extends SigveloFormControlElement {
   private updateValueFromSelectedItems;
   private handleFocus;
   private handleBlur;
-  private handleHostInvalid;
   private handleLabelClick;
   private handleListboxPointerDown;
   private handleItemClick;

package/dist/{number-field-odk4lKXM.d.ts → number-field-T0rzObq9.d.ts}

@@ -372,17 +372,12 @@ declare class SigveloNumberField extends SigveloFormControlElement {
   enterkeyhint: "enter" | "done" | "go" | "next" | "previous" | "search" | "send";
   /** When true, the add/subtract steppers won't be displayed. */
   withoutSteppers: 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 handleBlur;
   private handleChange;
   private handleFocus;
-  private handleHostInvalid;
   private handleDecrease;
   private handleIncrease;
   private maintainFocusOnPointerDown;

package/dist/{number-field-BGH7JtNf.js → number-field-yME3rRZT.js}

@@ -1,6 +1,7 @@
-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 { 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";
@@ -49,12 +50,12 @@ var number_field_styles_default = css`
     align-self: stretch;
     justify-content: center;
     margin: 0;
-    padding: 0 0.75em;
+    padding: 0;
+    flex-shrink: 0;
     border: none;
     background: none;
     color: inherit;
     font: inherit;
-    font-size: 1.25em;
     cursor: pointer;
     transition: var(--sigvelo-motion-duration-interaction) translate ease;
 
@@ -64,7 +65,7 @@ var number_field_styles_default = css`
 
     &:focus-visible {
       outline: var(--sigvelo-focus-ring);
-      outline-offset: var(--sigvelo-border-width);
+      outline-offset: var(--sigvelo-focus-offset);
     }
 
     &:active:not(:disabled) {
@@ -76,6 +77,36 @@ var number_field_styles_default = css`
       opacity: 0.5;
     }
   }
+
+  #visual-box.xs #stepper-up,
+  #visual-box.xs #stepper-down {
+    inline-size: var(--sigvelo-control-height-xs);
+    font-size: var(--sigvelo-control-icon-size-xs);
+  }
+
+  #visual-box.sm #stepper-up,
+  #visual-box.sm #stepper-down {
+    inline-size: var(--sigvelo-control-height-sm);
+    font-size: var(--sigvelo-control-icon-size-sm);
+  }
+
+  #visual-box.md #stepper-up,
+  #visual-box.md #stepper-down {
+    inline-size: var(--sigvelo-control-height-md);
+    font-size: var(--sigvelo-control-icon-size-md);
+  }
+
+  #visual-box.lg #stepper-up,
+  #visual-box.lg #stepper-down {
+    inline-size: var(--sigvelo-control-height-lg);
+    font-size: var(--sigvelo-control-icon-size-lg);
+  }
+
+  #visual-box.xl #stepper-up,
+  #visual-box.xl #stepper-down {
+    inline-size: var(--sigvelo-control-height-xl);
+    font-size: var(--sigvelo-control-icon-size-xl);
+  }
 `;
 //#endregion
 //#region src/components/number-field/number-field.ts
@@ -419,38 +450,17 @@ var SigveloNumberField = class extends SigveloFormControlElement {
 	get focusableAnchor() {
 		return this.textBox;
 	}
-	connectedCallback() {
-		super.connectedCallback();
-		this.addEventListener("invalid", this.handleHostInvalid);
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.removeEventListener("invalid", this.handleHostInvalid);
-	}
 	updated(changedProperties) {
 		this.updateValidity();
 		if (changedProperties.has("value")) {
 			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() {
@@ -469,9 +479,6 @@ var SigveloNumberField = class extends SigveloFormControlElement {
 		this.customStates.set("focused", true);
 		this.dispatchEvent(new SigveloFocusEvent());
 	}
-	handleHostInvalid() {
-		this.wasSubmitted = true;
-	}
 	handleDecrease() {
 		this.stepDown();
 		this.handleInput();
@@ -512,12 +519,7 @@ var SigveloNumberField = class extends SigveloFormControlElement {
 		this.dispatchEvent(new SigveloInputEvent());
 	}
 	handleKeyDown(event) {
-		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();
 	}
 	handleVisualBoxPointerDown(event) {
 		const target = event.target;
@@ -531,21 +533,8 @@ var SigveloNumberField = 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 number field. */
@@ -615,7 +604,7 @@ var SigveloNumberField = class extends SigveloFormControlElement {
 			lg: this.size === "lg",
 			xl: this.size === "xl",
 			pill: this.pill,
-			disabled: this.disabled
+			disabled: this.effectiveDisabled
 		})}
         @pointerdown=${this.handleVisualBoxPointerDown}
       >
@@ -623,7 +612,7 @@ var SigveloNumberField = class extends SigveloFormControlElement {
               <button
                 id="stepper-down"
                 part="stepper stepper-down"
-                ?disabled=${!canDecrease || this.disabled}
+                ?disabled=${!canDecrease || this.effectiveDisabled}
                 tabindex="-1"
                 aria-label=${this.localize.term("decrease")}
                 @pointerdown=${this.maintainFocusOnPointerDown}
@@ -641,7 +630,7 @@ var SigveloNumberField = class extends SigveloFormControlElement {
           type="number"
           inputmode="numeric"
           ?autofocus=${this.autofocus}
-          ?disabled=${this.disabled}
+          ?disabled=${this.effectiveDisabled}
           ?readonly=${this.readonly}
           ?required=${this.required}
           placeholder=${ifDefined(this.placeholder)}
@@ -668,7 +657,7 @@ var SigveloNumberField = class extends SigveloFormControlElement {
               <button
                 id="stepper-up"
                 part="stepper stepper-up"
-                ?disabled=${!canIncrease || this.disabled}
+                ?disabled=${!canIncrease || this.effectiveDisabled}
                 tabindex="-1"
                 aria-label=${this.localize.term("increase")}
                 @pointerdown=${this.maintainFocusOnPointerDown}

package/dist/{popover-DJBrJ0za.js → popover-lsI6gqNk.js}

@@ -1,4 +1,5 @@
 import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { positionAnchoredSurface } from "./utilities/anchored-surface.js";
 import { css, html } from "lit";
 import { property, query } from "lit/decorators.js";
 import hostStyles from "@mcp-b/wc-support/styles/host.styles";
@@ -7,7 +8,7 @@ import { animateWithClass } from "@mcp-b/wc-support/utilities/animate";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { SigveloBeforeCloseEvent, SigveloBeforeOpenEvent, SigveloCloseEvent, SigveloOpenEvent } from "@mcp-b/wc-support/events/open-close";
 import { stripElementPrefix } from "@mcp-b/wc-support/prefix";
-import { arrow, autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+import { autoUpdate } from "@floating-ui/dom";
 import { createId } from "@mcp-b/wc-support/utilities/math";
 //#region src/components/popover/popover.styles.ts
 var popover_styles_default = css`
@@ -484,38 +485,14 @@ var SigveloPopover = class extends SigveloElement {
 	/** Repositions the popover */
 	reposition() {
 		if (!this.anchor) return;
-		computePosition(this.anchor, this.dialog, {
+		positionAnchoredSurface({
+			anchor: this.anchor,
+			host: this,
+			surface: this.dialog,
+			arrow: this.arrow,
 			placement: this.placement,
-			middleware: [
-				offset({
-					mainAxis: this.distance,
-					crossAxis: this.offset
-				}),
-				flip(),
-				shift(),
-				arrow({ element: this.arrow })
-			]
-		}).then(({ x, y, middlewareData, placement }) => {
-			this.setAttribute("data-placement", placement);
-			Object.assign(this.dialog.style, {
-				left: `${x}px`,
-				top: `${y}px`
-			});
-			if (middlewareData.arrow) {
-				const arrowX = middlewareData.arrow.x;
-				const arrowY = middlewareData.arrow.y;
-				const staticSide = {
-					top: "bottom",
-					right: "left",
-					bottom: "top",
-					left: "right"
-				}[placement.split("-")[0]];
-				Object.assign(this.arrow.style, {
-					left: typeof arrowX === "number" ? `${arrowX}px` : "",
-					top: typeof arrowY === "number" ? `${arrowY}px` : "",
-					[staticSide]: "calc(var(--arrow-diagonal-size) * -1)"
-				});
-			}
+			distance: this.distance,
+			offset: this.offset
 		});
 	}
 	render() {

package/dist/{preview-card-C7H1FPfd.js → preview-card-D1msvOWP.js}

@@ -133,7 +133,7 @@ var SigveloPreviewCard = class extends SigveloElement {
 			clearTimeout(this.hoverInTimeout);
 			clearTimeout(this.hoverOutTimeout);
 			this.open = false;
-			if (event.currentTarget === this.card && this.anchor instanceof HTMLElement) this.anchor.focus();
+			if (event.currentTarget === this.card && this.anchor) this.anchor.focus();
 		};
 	}
 	static {