@mcp-b/web-components 0.2.22 → 0.3.0

package/dist/{text-field-Cznb4Afc.js → text-field-gX5RovkE.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";
@@ -348,14 +349,6 @@ var SigveloTextField = 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.syncDatalist()).observe(this, {
 			subtree: true,
@@ -370,24 +363,11 @@ var SigveloTextField = 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() {
@@ -417,21 +397,13 @@ var SigveloTextField = 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;
 		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();
 	}
 	handlePasswordToggleClick() {
 		this.isPasswordVisible = !this.isPasswordVisible;
@@ -452,21 +424,8 @@ var SigveloTextField = 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);
 	}
 	/** Looks for a slotted datalist, clones, and links it to the text field. */
@@ -545,7 +504,7 @@ var SigveloTextField = class extends SigveloFormControlElement {
 			lg: this.size === "lg",
 			xl: this.size === "xl",
 			pill: this.pill,
-			disabled: this.disabled
+			disabled: this.effectiveDisabled
 		})}
         @pointerdown=${this.handleVisualBoxPointerDown}
       >
@@ -556,7 +515,7 @@ var SigveloTextField = class extends SigveloFormControlElement {
           part="text-box"
           type=${this.type === "password" && this.isPasswordVisible ? "text" : this.type}
           ?autofocus=${this.autofocus}
-          ?disabled=${this.disabled}
+          ?disabled=${this.effectiveDisabled}
           ?readonly=${this.readonly}
           ?required=${this.required}
           placeholder=${ifDefined(this.placeholder)}
@@ -582,7 +541,7 @@ var SigveloTextField = class extends SigveloFormControlElement {
           @keydown=${this.handleKeyDown}
         />
 
-        ${this.type === "password" && this.value?.length > 0 && !this.disabled && !this.readonly ? html`
+        ${this.type === "password" && this.value?.length > 0 && !this.effectiveDisabled && !this.readonly ? html`
               <button
                 id="password-toggle-button"
                 part="toggle-password-button"
@@ -599,7 +558,7 @@ var SigveloTextField = class extends SigveloFormControlElement {
                 ></sigvelo-icon>
               </button>
             ` : ""}
-        ${this.withClear && this.value?.length > 0 && !this.disabled && !this.readonly ? html`
+        ${this.withClear && this.value?.length > 0 && !this.effectiveDisabled && !this.readonly ? html`
               <button
                 id="clear-button"
                 part="clear-button"

package/dist/{toast-cEBVK9NQ.d.ts → toast-CpyA3GYM.d.ts}

@@ -1,5 +1,5 @@
 import { t as SigveloToastItem } from "./toast-item-BPpJT6vD.js";
-import { t as SigveloTransitionGroup } from "./transition-group-DD_CjSNC.js";
+import { t as SigveloTransitionGroup } from "./transition-group-D134iT1k.js";
 import { CSSResultGroup, PropertyValues } from "lit";
 import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
 import { TransitionAnimation } from "@mcp-b/wc-support/utilities/animate";

package/dist/{toast-DgkBQzQC.js → toast-CxfaWFY_.js}

@@ -1,6 +1,6 @@
 import { t as __decorate } from "./decorate-DcF3lt7P.js";
-import "./toast-item-CGvz92Qk.js";
-import "./transition-group-3hnAnwSd.js";
+import "./toast-item-DzSPG25R.js";
+import "./transition-group-8PmQx0A5.js";
 import { css, html, render } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import hostStyles from "@mcp-b/wc-support/styles/host.styles";

package/dist/{toggle-icon-4oLDeEt4.js → toggle-icon-B3fZuslO.js}

@@ -627,36 +627,15 @@ var SigveloToggleIcon = class extends SigveloFormControlElement {
 	get focusableAnchor() {
 		return this.button;
 	}
-	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("checked")) this.customStates.set("checked", this.checked);
-		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");
 	}
 	handleBlur() {
@@ -664,8 +643,9 @@ var SigveloToggleIcon = class extends SigveloFormControlElement {
 		this.dispatchEvent(new SigveloBlurEvent());
 	}
 	handleClick() {
-		if (this.disabled) return;
+		if (this.effectiveDisabled) return;
 		this.checked = !this.checked;
+		this.hadUserInteraction = true;
 		this.dispatchEvent(new SigveloChangeEvent());
 		this.dispatchEvent(new Event("change", {
 			bubbles: true,
@@ -678,19 +658,17 @@ var SigveloToggleIcon = class extends SigveloFormControlElement {
 		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 hasMissingValue = this.required && !this.checked;
 		const validationMessage = hasCustomValidity ? this.getCustomValidity() : VALIDATION_MESSAGE;
 		const flags = {
 			customError: hasCustomValidity,
-			valueMissing: this.required && !this.checked
+			valueMissing: hasMissingValue
 		};
-		this.isInvalid = hasCustomValidity ? true : !this.checked;
+		this.isInvalid = hasCustomValidity ? true : hasMissingValue;
 		this.internals.setValidity(flags, validationMessage, this.focusableAnchor);
 	}
 	render() {
@@ -704,7 +682,7 @@ var SigveloToggleIcon = class extends SigveloFormControlElement {
 			lg: this.size === "lg",
 			xl: this.size === "xl",
 			checked: this.checked,
-			disabled: this.disabled
+			disabled: this.effectiveDisabled
 		})}
         data-effect=${this.effect}
         name=${this.name}
@@ -712,7 +690,7 @@ var SigveloToggleIcon = class extends SigveloFormControlElement {
         type="button"
         aria-label=${this.label}
         aria-pressed=${this.checked ? "true" : "false"}
-        .disabled=${this.disabled}
+        .disabled=${this.effectiveDisabled}
         .required=${this.required}
         @click=${this.handleClick}
         @focus=${this.handleFocus}

package/dist/{toggle-icon-DlwMMWZL.d.ts → toggle-icon-sTLCOruF.d.ts}

@@ -335,17 +335,12 @@ declare class SigveloToggleIcon extends SigveloFormControlElement {
    * Makes the toggle icon required. Form submission will not be allowed until the toggle icon 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 handleBlur;
   private handleClick;
   private handleFocus;
-  private handleHostInvalid;
   /** Sets the form control's validity */
   private updateValidity;
   render(): import("lit-html").TemplateResult<1>;

package/dist/{toggle-tag-1sfTFJtg.js → toggle-tag--Gkp-CJJ.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";
@@ -300,36 +301,15 @@ var SigveloToggleTag = class extends SigveloFormControlElement {
 	get focusableAnchor() {
 		return this.checkbox;
 	}
-	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("checked")) this.customStates.set("checked", this.checked);
-		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() {
@@ -354,19 +334,11 @@ var SigveloToggleTag = class extends SigveloFormControlElement {
 		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.checkbox.validationMessage;
-		const flags = {
-			customError: hasCustomValidity,
-			valueMissing: this.checkbox.validity.valueMissing
-		};
-		this.isInvalid = hasCustomValidity ? true : !this.checkbox.validity.valid;
+		const { flags, validationMessage, isInvalid } = mirrorNativeValidity(this.checkbox, this.getCustomValidity());
+		this.isInvalid = isInvalid;
 		this.internals.setValidity(flags, validationMessage, this.focusableAnchor);
 	}
 	/** Sets focus to the toggle tag. */
@@ -389,7 +361,7 @@ var SigveloToggleTag = class extends SigveloFormControlElement {
 			lg: this.size === "lg",
 			xl: this.size === "xl",
 			checked: this.checked,
-			disabled: this.disabled,
+			disabled: this.effectiveDisabled,
 			required: this.required
 		})}
       >
@@ -398,7 +370,7 @@ var SigveloToggleTag = class extends SigveloFormControlElement {
           type="checkbox"
           value=${ifDefined(this.value)}
           .checked=${live(this.checked)}
-          .disabled=${this.disabled}
+          .disabled=${this.effectiveDisabled}
           .required=${this.required}
           @change=${this.handleChange}
           @click=${this.handleClick}

package/dist/{toggle-tag-IVvMGT4R.d.ts → toggle-tag-DDBa6hAg.d.ts}

@@ -215,11 +215,7 @@ declare class SigveloToggleTag extends SigveloFormControlElement {
    * Makes the toggle tag required. Form submission will not be allowed until the toggle tag 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;
@@ -227,7 +223,6 @@ declare class SigveloToggleTag extends SigveloFormControlElement {
   private handleChange;
   private handleInput;
   private handleFocus;
-  private handleHostInvalid;
   /** Sets the form control's validity */
   private updateValidity;
   /** Sets focus to the toggle tag. */

package/dist/{tooltip-DbyoPFNe.js → tooltip-bSXNhG9l.js}

@@ -1,11 +1,12 @@
 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";
 import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
 import { animateWithClass } from "@mcp-b/wc-support/utilities/animate";
 import { SigveloBeforeCloseEvent, SigveloBeforeOpenEvent, SigveloCloseEvent, SigveloOpenEvent } from "@mcp-b/wc-support/events/open-close";
-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/tooltip/tooltip.styles.ts
 var tooltip_styles_default = css`
@@ -417,38 +418,14 @@ var SigveloTooltip = class extends SigveloElement {
 	/** @internal Repositions the tooltip */
 	reposition() {
 		if (!this.anchor) return;
-		computePosition(this.anchor, this.tooltip, {
+		positionAnchoredSurface({
+			anchor: this.anchor,
+			host: this,
+			surface: this.tooltip,
+			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.tooltip.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
 		});
 		requestAnimationFrame(() => {
 			if (!this.anchor) return;

package/dist/{transition-group-3hnAnwSd.js → transition-group-8PmQx0A5.js}

@@ -17,6 +17,15 @@ var transition_group_styles_default = css`
     width: 100%;
   }
 
+  /*
+   * Entering elements are hidden by attribute while sibling removals animate. The browser's own rule for that
+   * attribute is HTML-namespace-scoped, so an SVG child would stay visible and pop in early; this reaches any
+   * slotted element.
+   */
+  slot::slotted([hidden]) {
+    display: none;
+  }
+
   /* Don't allow clicks while the transition is running to prevent animation blips */
   :host(:state(transitioning)) {
     pointer-events: none;
@@ -624,7 +633,7 @@ var SigveloTransitionGroup = class extends SigveloElement {
 						removedElements.delete(el);
 					}
 				});
-				addedElements.forEach((_opts, el) => el.hidden = true);
+				addedElements.forEach((_opts, el) => el.toggleAttribute("hidden", true));
 				removedElements.forEach((opts, el) => {
 					if (opts.nextSibling) opts.nextSibling.before(el);
 					else this.transitionContainer.append(el);
@@ -638,7 +647,7 @@ var SigveloTransitionGroup = class extends SigveloElement {
 				});
 				await Promise.allSettled(removeAnimations);
 				addedElements.forEach((_opts, el) => {
-					el.hidden = false;
+					el.toggleAttribute("hidden", false);
 					el.style.opacity = "0";
 				});
 				const newContainerPosition = this.getBoundingClientRect();
@@ -652,7 +661,7 @@ var SigveloTransitionGroup = class extends SigveloElement {
 					duration,
 					easing: "ease"
 				}).finished);
-				[...this.transitionContainer.children].forEach((el) => {
+				this.animatableChildren.forEach((el) => {
 					const oldPosition = this.cachedElementPositions.get(el);
 					const newPosition = el.getBoundingClientRect();
 					if (!oldPosition || !hasDomRectMoved(oldPosition, newPosition) || addedElements.has(el) || removedElements.has(el)) return;
@@ -739,6 +748,16 @@ var SigveloTransitionGroup = class extends SigveloElement {
 			}
 		};
 	}
+	/**
+	* The children this group animates.
+	*
+	* `children` is a collection of plain `Element`s, and everything the group does to one — hiding it, clearing an
+	* inline opacity, animating a laid-out box — is `HTMLElement` vocabulary. Anything else in the container is left
+	* where it is rather than quietly mistyped.
+	*/
+	get animatableChildren() {
+		return [...this.transitionContainer.children].filter((el) => el instanceof HTMLElement);
+	}
 	startObservers() {
 		if (this.isObserving) return;
 		this.isObserving = true;
@@ -777,7 +796,7 @@ var SigveloTransitionGroup = class extends SigveloElement {
 			x: window.scrollX,
 			y: window.scrollY
 		};
-		[...this.transitionContainer.children].forEach((el) => {
+		this.animatableChildren.forEach((el) => {
 			this.cachedElementPositions.set(el, el.getBoundingClientRect());
 		});
 	}

package/dist/{transition-group-DD_CjSNC.d.ts → transition-group-D134iT1k.d.ts}

@@ -580,6 +580,14 @@ declare class SigveloTransitionGroup extends SigveloElement {
    * Gets a custom animation based on the users preference. If a custom animation isn't found, the default is returned.
    */
   private getAnimation;
+  /**
+   * The children this group animates.
+   *
+   * `children` is a collection of plain `Element`s, and everything the group does to one — hiding it, clearing an
+   * inline opacity, animating a laid-out box — is `HTMLElement` vocabulary. Anything else in the container is left
+   * where it is rather than quietly mistyped.
+   */
+  private get animatableChildren();
   private handleMutations;
   private handleResizes;
   private handleVisibilityChange;

package/dist/translations/en.d.ts

@@ -1,6 +1,2 @@
-import { i as Translation } from "../localize-322EtXNX.js";
-
-//#region src/translations/en.d.ts
-declare const translation: Translation;
-//#endregion
+import { t as translation } from "../en-ss05iPjS.js";
 export { translation as default };

package/dist/translations/en.js

@@ -1,4 +1,4 @@
-import { registerDefaultTranslation } from "../utilities/localize.js";
+import { registerDefaultTranslation } from "@mcp-b/wc-support/utilities/localize";
 //#region src/translations/en.ts
 const translation = {
 	$code: "en",
@@ -56,12 +56,9 @@ const translation = {
 	share: "Share",
 	showPassword: "Show password",
 	show: "Show",
-	showingNumberOfTotalItems: (number, total) => {
-		if (number === 1) return `Showing ${number} of ${total} ${total === 1 ? "item" : "items"}`;
-		return `Showing ${number} of ${total} items`;
-	},
+	showingNumberOfTotalItems: (number, total) => `Showing ${number} of ${total} ${total === 1 ? "item" : "items"}`,
 	showingAllNumberItems: (number) => {
-		if (number === 1) return `Showing ${number} item`;
+		if (Number(number) === 1) return `Showing ${number} item`;
 		return `Showing all ${number} items`;
 	},
 	toggleNavigation: "Toggle navigation",

package/dist/translations/es.d.ts

@@ -1,4 +1,4 @@
-import { i as Translation } from "../localize-322EtXNX.js";
+import { a as Translation } from "../en-ss05iPjS.js";
 
 //#region src/translations/es.d.ts
 declare const translation: Translation;

package/dist/translations/es.js

@@ -56,12 +56,9 @@ const translation = {
 	share: "Compartir",
 	showPassword: "Mostrar contraseña",
 	show: "Mostrar",
-	showingNumberOfTotalItems: (number, total) => {
-		if (number === 1) return `Mostrando ${number} de ${total} ${total === 1 ? "elemento" : "elementos"}`;
-		return `Mostrando ${number} de ${total} elementos`;
-	},
+	showingNumberOfTotalItems: (number, total) => `Mostrando ${number} de ${total} ${total === 1 ? "elemento" : "elementos"}`,
 	showingAllNumberItems: (number) => {
-		if (number === 1) return `Mostrando ${number} elemento`;
+		if (Number(number) === 1) return `Mostrando ${number} elemento`;
 		return `Mostrando todos los ${number} elementos`;
 	},
 	toggleNavigation: "Alternar navegación",