@vonage/vivid 3.51.0 → 3.52.0

package/shared/definition34.js

@@ -10,7 +10,6 @@ import { D as DelegatesARIATextbox } from './text-field2.js';
 import { F as FormAssociated } from './form-associated.js';
 import { f as keyArrowDown, e as keyArrowUp } from './key-codes.js';
 import { S as Shape } from './enums.js';
-import { f as focusTemplateFactory } from './focus2.js';
 import { w as when } from './when.js';
 import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
@@ -311,7 +310,7 @@ __decorate([
 ], NumberField$1.prototype, "defaultSlottedNodes", void 0);
 applyMixins(NumberField$1, StartEnd, DelegatesARIATextbox);
 
-const styles = ":host{display:inline-block}.base{--_text-field-gutter-start:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4);--_text-field-gutter-end:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4);--_text-field-icon-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2);display:inline-grid;width:100%;gap:4px;grid-template-columns:min-content 1fr max-content}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(:disabled,.disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:where(.readonly):where(:not(:disabled,.disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.error):where(:not(:disabled,.disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base:where(.error):where(:not(:disabled,.disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base:where(.success):where(:not(:disabled,.disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base:where(.success):where(:not(:disabled,.disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base{--_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-field-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-field-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-field-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:3/4}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;block-size:100%;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:not(.shape-pill) .fieldset{border-radius:8px}.base.shape-pill .fieldset{border-radius:24px}.wrapper{block-size:100%;border-radius:inherit;inline-size:100%}.wrapper:focus-visible{outline:none}.control:not(slot),.control::slotted(input){width:100%!important;box-sizing:border-box!important;border:0 none!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;border-radius:inherit!important;color:inherit!important;font:inherit;padding-block:0!important;padding-inline-end:var(--_text-field-gutter-end)!important;padding-inline-start:var(--_text-field-gutter-start)!important}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control:not(slot):focus-visible,.control::slotted(input:focus-visible){outline:none}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}.focus-indicator{--focus-stroke-gap-color: transparent;pointer-events:none}.wrapper:not(:focus-visible,:focus-within)>.focus-indicator,.fieldset:not(:focus-visible,:focus-within)>.focus-indicator{display:none}.base{--_text-field-gutter-end: 70px}.control::-webkit-outer-spin-button,.control::-webkit-inner-spin-button{appearance:none}.control-buttons{position:absolute;z-index:1;right:3px;display:flex}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}.disabled .focus-indicator{display:none;pointer-events:none}\n";
+const styles = ":host{display:inline-block}.base{--_text-field-gutter-start:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4);--_text-field-gutter-end:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4);--_text-field-icon-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2);display:inline-grid;width:100%;gap:4px;grid-template-columns:min-content 1fr max-content}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base{--_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-field-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-field-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-field-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:3/4}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:not(.shape-pill) .fieldset{border-radius:8px}.base.shape-pill .fieldset{border-radius:24px}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit}.control:not(slot),.control::slotted(input){width:100%!important;box-sizing:border-box!important;border:0 none!important;border-radius:inherit!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;color:inherit!important;font:inherit;outline:transparent;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.wrapper:focus-within:after{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0}}.base{--_text-field-gutter-end: 70px}.control::-webkit-outer-spin-button,.control::-webkit-inner-spin-button{appearance:none}.control-buttons{position:absolute;z-index:1;right:3px;display:flex}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -344,7 +343,10 @@ let NumberField = class extends NumberField$1 {
     this.decrementButtonAriaLabel = null;
   }
   stepChanged(_previous, next) {
-    this.proxy.setAttribute("step", Number.isFinite(next) ? next.toString() : "");
+    this.proxy.setAttribute(
+      "step",
+      Number.isFinite(next) ? next.toString() : ""
+    );
   }
   attributeChangedCallback(name, previous, next) {
     super.attributeChangedCallback(name, previous, next);
@@ -401,7 +403,14 @@ NumberField.prototype.getValidValue = function(value) {
   }
   return numberInput.value + valueSuffix;
 };
-applyMixins(NumberField, Localized, AffixIcon, FormElementCharCount, FormElementHelperText, FormElementSuccessText);
+applyMixins(
+  NumberField,
+  Localized,
+  AffixIcon,
+  FormElementCharCount,
+  FormElementHelperText,
+  FormElementSuccessText
+);
 
 const getStateClasses = ({
   errorValidationMessage,
@@ -425,10 +434,9 @@ const getStateClasses = ({
   ["success", !!successText]
 );
 function renderLabel() {
-  return html`
-	  <label for="control" class="label">
-		  ${(x) => x.label}
-	  </label>`;
+  return html` <label for="control" class="label">
+		${(x) => x.label}
+	</label>`;
 }
 function setControlButtonShape(numberField) {
   return numberField.shape === Shape.Pill ? Shape.Pill : null;
@@ -461,58 +469,63 @@ function numberControlButtons(context) {
 	`;
 }
 const NumberFieldTemplate = (context) => {
-  const focusTemplate = focusTemplateFactory(context);
   return html`
-	<div class="base ${getStateClasses}">
-    ${when((x) => x.label, renderLabel())}
-    <div class="fieldset">
-			<div class="wrapper">
-				<input class="control"
-							 id="control"
-							 @input="${(x) => x.handleTextInput()}"
-							 @change="${(x) => x.handleChange()}"
-							 ?autofocus="${(x) => x.autofocus}"
-							 ?disabled="${(x) => x.disabled}"
-							 list="${(x) => x.list}"
-							 step="${(x) => x.step ? x.step : null}"
-							 max="${(x) => x.max}"
-							 min="${(x) => x.min}"
-							 maxlength="${(x) => x.maxlength}"
-							 minlength="${(x) => x.minlength}"
-							 placeholder="${(x) => x.placeholder}"
-							 ?readonly="${(x) => x.readOnly}"
-							 ?required="${(x) => x.required}"
-							 size="${(x) => x.size}"
-							 autocomplete="${(x) => x.autoComplete}"
-							 name="${(x) => x.name}"
-							 ?spellcheck="${(x) => x.spellcheck}"
-							 :value="${(x) => x.value}"
-							 type="text"
-							 aria-atomic="${(x) => x.ariaAtomic}"
-							 aria-busy="${(x) => x.ariaBusy}"
-							 aria-current="${(x) => x.ariaCurrent}"
-							 aria-details="${(x) => x.ariaDetails}"
-							 aria-disabled="${(x) => x.ariaDisabled}"
-							 aria-errormessage="${(x) => x.ariaErrormessage}"
-							 aria-haspopup="${(x) => x.ariaHaspopup}"
-							 aria-hidden="${(x) => x.ariaHidden}"
-							 aria-invalid="${(x) => x.ariaInvalid}"
-							 aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
-							 aria-label="${(x) => x.ariaLabel}"
-							 aria-live="${(x) => x.ariaLive}"
-							 aria-relevant="${(x) => x.ariaRelevant}"
-							 aria-roledescription="${(x) => x.ariaRoledescription}"
-							 ${ref("control")}
-				/>
-				${() => focusTemplate}
+		<div class="base ${getStateClasses}">
+			${when((x) => x.label, renderLabel())}
+			<div class="fieldset">
+				<div class="wrapper">
+					<input
+						class="control"
+						id="control"
+						@input="${(x) => x.handleTextInput()}"
+						@change="${(x) => x.handleChange()}"
+						?autofocus="${(x) => x.autofocus}"
+						?disabled="${(x) => x.disabled}"
+						list="${(x) => x.list}"
+						step="${(x) => x.step ? x.step : null}"
+						max="${(x) => x.max}"
+						min="${(x) => x.min}"
+						maxlength="${(x) => x.maxlength}"
+						minlength="${(x) => x.minlength}"
+						placeholder="${(x) => x.placeholder}"
+						?readonly="${(x) => x.readOnly}"
+						?required="${(x) => x.required}"
+						size="${(x) => x.size}"
+						autocomplete="${(x) => x.autoComplete}"
+						name="${(x) => x.name}"
+						?spellcheck="${(x) => x.spellcheck}"
+						:value="${(x) => x.value}"
+						type="text"
+						aria-atomic="${(x) => x.ariaAtomic}"
+						aria-busy="${(x) => x.ariaBusy}"
+						aria-current="${(x) => x.ariaCurrent}"
+						aria-details="${(x) => x.ariaDetails}"
+						aria-disabled="${(x) => x.ariaDisabled}"
+						aria-errormessage="${(x) => x.ariaErrormessage}"
+						aria-haspopup="${(x) => x.ariaHaspopup}"
+						aria-hidden="${(x) => x.ariaHidden}"
+						aria-invalid="${(x) => x.ariaInvalid}"
+						aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
+						aria-label="${(x) => x.ariaLabel}"
+						aria-live="${(x) => x.ariaLive}"
+						aria-relevant="${(x) => x.ariaRelevant}"
+						aria-roledescription="${(x) => x.ariaRoledescription}"
+						${ref("control")}
+					/>
+				</div>
+				${() => numberControlButtons(context)}
 			</div>
-			${() => numberControlButtons(context)}
-    </div>
-	  ${when((x) => !x.successText && !x.errorValidationMessage && x.helperText?.length, getFeedbackTemplate("helper", context))}
-	  ${when((x) => !x.successText && x.errorValidationMessage, getFeedbackTemplate("error", context))}
-	  ${when((x) => x.successText, getFeedbackTemplate("success", context))}
-	</div>
-`;
+			${when(
+    (x) => !x.successText && !x.errorValidationMessage && x.helperText?.length,
+    getFeedbackTemplate("helper", context)
+  )}
+			${when(
+    (x) => !x.successText && x.errorValidationMessage,
+    getFeedbackTemplate("error", context)
+  )}
+			${when((x) => x.successText, getFeedbackTemplate("success", context))}
+		</div>
+	`;
 };
 
 const numberFieldDefinition = NumberField.compose({
@@ -523,7 +536,11 @@ const numberFieldDefinition = NumberField.compose({
     delegatesFocus: true
   }
 });
-const numberFieldRegistries = [numberFieldDefinition(), ...buttonRegistries, ...dividerRegistries];
+const numberFieldRegistries = [
+  numberFieldDefinition(),
+  ...buttonRegistries,
+  ...dividerRegistries
+];
 const registerNumberField = registerFactory(numberFieldRegistries);
 
 export { numberFieldRegistries as a, numberFieldDefinition as n, registerNumberField as r };

package/shared/definition35.cjs

@@ -243,12 +243,7 @@ __decorateClass([
 ], ListboxOption.prototype, "_label", 2);
 applyMixins.applyMixins(ListboxOption, affix.AffixIconWithTrailing);
 
-const getClasses = ({
-  icon,
-  disabled,
-  selected,
-  checked
-}) => classNames.classNames(
+const getClasses = ({ icon, disabled, selected, checked }) => classNames.classNames(
   "base",
   ["disabled", disabled],
   ["selected", Boolean(selected)],
@@ -258,29 +253,33 @@ const getClasses = ({
 const ListboxOptionTemplate = (context) => {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
   return index.html`
-	<template
-		aria-checked="${(x) => x.ariaChecked}"
-		aria-disabled="${(x) => x.ariaDisabled}"
-		aria-posinset="${(x) => x.ariaPosInSet}"
-		aria-selected="${(x) => x.ariaSelected}"
-		aria-setsize="${(x) => x.ariaSetSize}"
-		role="option">
-		<div class="${getClasses}">
-			${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)}
-			${when.when((x) => x.text, index.html`<div class="text">${(x) => x.text}</div>`)}
-		</div>
-	</template>
+		<template
+			aria-checked="${(x) => x.ariaChecked}"
+			aria-disabled="${(x) => x.ariaDisabled}"
+			aria-posinset="${(x) => x.ariaPosInSet}"
+			aria-selected="${(x) => x.ariaSelected}"
+			aria-setsize="${(x) => x.ariaSetSize}"
+			role="option"
+		>
+			<div class="${getClasses}">
+				${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)}
+				${when.when((x) => x.text, index.html`<div class="text">${(x) => x.text}</div>`)}
+			</div>
+		</template>
 	`;
 };
 
-const styles = ":host([disabled]){cursor:not-allowed}.base{display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);border-radius:8px;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text, var(--_appearance-color-text));font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-inline:16px;vertical-align:middle;word-break:break-word}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(:active,.active):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(.selected,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.base .text{font:var(--vvd-typography-base)}:host([aria-checked=true]) .base{--focus-stroke-color: var(--vvd-color-neutral-500);--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}slot[name=icon]{font-size:20px;line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}\n";
+const styles = ":host([disabled]){cursor:not-allowed}.base{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text, var(--_appearance-color-text));font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-inline:16px;vertical-align:middle;word-break:break-word}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-option-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.base .text{font:var(--vvd-typography-base)}:host([aria-checked=true]) .base{--focus-stroke-color: var(--vvd-color-neutral-500);--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}slot[name=icon]{font-size:20px;line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}\n";
 
 const listboxOptionDefinition = ListboxOption.compose({
   baseName: "option",
   template: ListboxOptionTemplate,
   styles
 });
-const listboxOptionRegistries = [listboxOptionDefinition(), ...definition.iconRegistries];
+const listboxOptionRegistries = [
+  listboxOptionDefinition(),
+  ...definition.iconRegistries
+];
 const registerOption = index.registerFactory(listboxOptionRegistries);
 
 exports.ListboxOption = ListboxOption;

package/shared/definition35.js

@@ -241,12 +241,7 @@ __decorateClass([
 ], ListboxOption.prototype, "_label", 2);
 applyMixins(ListboxOption, AffixIconWithTrailing);
 
-const getClasses = ({
-  icon,
-  disabled,
-  selected,
-  checked
-}) => classNames(
+const getClasses = ({ icon, disabled, selected, checked }) => classNames(
   "base",
   ["disabled", disabled],
   ["selected", Boolean(selected)],
@@ -256,29 +251,33 @@ const getClasses = ({
 const ListboxOptionTemplate = (context) => {
   const affixIconTemplate = affixIconTemplateFactory(context);
   return html`
-	<template
-		aria-checked="${(x) => x.ariaChecked}"
-		aria-disabled="${(x) => x.ariaDisabled}"
-		aria-posinset="${(x) => x.ariaPosInSet}"
-		aria-selected="${(x) => x.ariaSelected}"
-		aria-setsize="${(x) => x.ariaSetSize}"
-		role="option">
-		<div class="${getClasses}">
-			${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
-			${when((x) => x.text, html`<div class="text">${(x) => x.text}</div>`)}
-		</div>
-	</template>
+		<template
+			aria-checked="${(x) => x.ariaChecked}"
+			aria-disabled="${(x) => x.ariaDisabled}"
+			aria-posinset="${(x) => x.ariaPosInSet}"
+			aria-selected="${(x) => x.ariaSelected}"
+			aria-setsize="${(x) => x.ariaSetSize}"
+			role="option"
+		>
+			<div class="${getClasses}">
+				${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
+				${when((x) => x.text, html`<div class="text">${(x) => x.text}</div>`)}
+			</div>
+		</template>
 	`;
 };
 
-const styles = ":host([disabled]){cursor:not-allowed}.base{display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);border-radius:8px;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text, var(--_appearance-color-text));font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-inline:16px;vertical-align:middle;word-break:break-word}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(:active,.active):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(.selected,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.base .text{font:var(--vvd-typography-base)}:host([aria-checked=true]) .base{--focus-stroke-color: var(--vvd-color-neutral-500);--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}slot[name=icon]{font-size:20px;line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}\n";
+const styles = ":host([disabled]){cursor:not-allowed}.base{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text, var(--_appearance-color-text));font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-inline:16px;vertical-align:middle;word-break:break-word}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-option-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.base .text{font:var(--vvd-typography-base)}:host([aria-checked=true]) .base{--focus-stroke-color: var(--vvd-color-neutral-500);--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}slot[name=icon]{font-size:20px;line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}\n";
 
 const listboxOptionDefinition = ListboxOption.compose({
   baseName: "option",
   template: ListboxOptionTemplate,
   styles
 });
-const listboxOptionRegistries = [listboxOptionDefinition(), ...iconRegistries];
+const listboxOptionRegistries = [
+  listboxOptionDefinition(),
+  ...iconRegistries
+];
 const registerOption = registerFactory(listboxOptionRegistries);
 
 export { ListboxOption as L, listboxOptionRegistries as a, isListboxOption as i, listboxOptionDefinition as l, registerOption as r };

package/shared/definition36.cjs

@@ -36,7 +36,9 @@ class Pagination extends index.FoundationElement {
     this.selectedIndex = 0;
     this.addEventListener("tabpressed", (e) => {
       const { value: currentLabel, shiftKey } = e.detail;
-      const index = this.paginationButtons.findIndex((button) => Number(button.label) === currentLabel);
+      const index = this.paginationButtons.findIndex(
+        (button) => Number(button.label) === currentLabel
+      );
       const focusDirection = shiftKey ? -1 : 1;
       const newIndex = index + focusDirection;
       if (newIndex < 0) {
@@ -49,7 +51,9 @@ class Pagination extends index.FoundationElement {
     });
   }
   get pagesList() {
-    return new Array(this.total < MAX_DIGITS_AND_PLACEHOLDERS ? this.total : MAX_DIGITS_AND_PLACEHOLDERS).fill(0).map((_, i, arr) => {
+    return new Array(
+      this.total < MAX_DIGITS_AND_PLACEHOLDERS ? this.total : MAX_DIGITS_AND_PLACEHOLDERS
+    ).fill(0).map((_, i, arr) => {
       if (i === 0)
         return 1;
       if (i === arr.length - 1)
@@ -84,7 +88,11 @@ class Pagination extends index.FoundationElement {
   selectedIndexChanged(oldValue, newValue) {
     if (oldValue === void 0)
       return;
-    this.$emit("pagination-change", { selectedIndex: newValue, total: this.total, oldIndex: oldValue });
+    this.$emit("pagination-change", {
+      selectedIndex: newValue,
+      total: this.total,
+      oldIndex: oldValue
+    });
   }
   paginationButtonsChanged(_, newValue) {
     newValue.forEach((button) => {
@@ -117,7 +125,11 @@ __decorateClass([
   index.attr({ mode: "reflect", converter: totalConverter })
 ], Pagination.prototype, "total", 2);
 __decorateClass([
-  index.attr({ mode: "reflect", converter: totalConverter, attribute: "selected-index" })
+  index.attr({
+    mode: "reflect",
+    converter: totalConverter,
+    attribute: "selected-index"
+  })
 ], Pagination.prototype, "selectedIndex", 2);
 
 const ALLOWED_SIZES = [enums.Size.SuperCondensed, enums.Size.Condensed, enums.Size.Normal];
@@ -131,7 +143,11 @@ const handleKeyDown = (value, { event, parent }) => {
   }
   if (event.key === "Tab") {
     event.target.dispatchEvent(
-      new CustomEvent("tabpressed", { detail: { value, shiftKey: event.shiftKey }, bubbles: true, composed: true })
+      new CustomEvent("tabpressed", {
+        detail: { value, shiftKey: event.shiftKey },
+        bubbles: true,
+        composed: true
+      })
     );
   }
 };
@@ -139,8 +155,7 @@ const getClasses = (_) => classNames.classNames("control");
 function getButtonAppearance(value, { parent }) {
   return parent.selectedIndex === Number(value) - 1 ? "filled" : "ghost";
 }
-const paginationButtonRenderer = (buttonTag) => index.html`
-	${when.when(
+const paginationButtonRenderer = (buttonTag) => index.html` ${when.when(
   (value) => value !== "...",
   index.html`
 		<${buttonTag} class="vwc-pagination-button"
@@ -156,13 +171,11 @@ const paginationButtonRenderer = (buttonTag) => index.html`
 		</${buttonTag}>
 	`
 )}
-	${when.when(
+${when.when(
   (value) => value === "...",
-  index.html`
-		<div
-			class="dots size-${(_, { parent: x }) => getPaginationSize(x)}">
-			...
-		</div>`
+  index.html` <div class="dots size-${(_, { parent: x }) => getPaginationSize(x)}">
+		...
+	</div>`
 )}`;
 const getPaginationSize = (x) => {
   if (!x.size || !ALLOWED_SIZES.includes(x.size)) {
@@ -192,7 +205,10 @@ const PaginationTemplate = (context) => {
 									?disabled="${(x) => x.total === 0 || x.selectedIndex === 0}"
 									@click="${(x) => x.selectedIndex !== void 0 && x.selectedIndex--}"
 		></${buttonTag}>
-		<div id="buttons-wrapper" class="buttons-wrapper" ${children.children({ property: "paginationButtons", filter: slotted.elements(buttonTag) })}>
+		<div id="buttons-wrapper" class="buttons-wrapper" ${children.children({
+    property: "paginationButtons",
+    filter: slotted.elements(buttonTag)
+  })}>
 			${repeat.repeat((x) => x.pagesList, paginationButtonTemplate, { positioning: true })}
 		</div>
 		<${buttonTag} class="next-button" ${ref.ref("nextButton")}

package/shared/definition36.js

@@ -34,7 +34,9 @@ class Pagination extends FoundationElement {
     this.selectedIndex = 0;
     this.addEventListener("tabpressed", (e) => {
       const { value: currentLabel, shiftKey } = e.detail;
-      const index = this.paginationButtons.findIndex((button) => Number(button.label) === currentLabel);
+      const index = this.paginationButtons.findIndex(
+        (button) => Number(button.label) === currentLabel
+      );
       const focusDirection = shiftKey ? -1 : 1;
       const newIndex = index + focusDirection;
       if (newIndex < 0) {
@@ -47,7 +49,9 @@ class Pagination extends FoundationElement {
     });
   }
   get pagesList() {
-    return new Array(this.total < MAX_DIGITS_AND_PLACEHOLDERS ? this.total : MAX_DIGITS_AND_PLACEHOLDERS).fill(0).map((_, i, arr) => {
+    return new Array(
+      this.total < MAX_DIGITS_AND_PLACEHOLDERS ? this.total : MAX_DIGITS_AND_PLACEHOLDERS
+    ).fill(0).map((_, i, arr) => {
       if (i === 0)
         return 1;
       if (i === arr.length - 1)
@@ -82,7 +86,11 @@ class Pagination extends FoundationElement {
   selectedIndexChanged(oldValue, newValue) {
     if (oldValue === void 0)
       return;
-    this.$emit("pagination-change", { selectedIndex: newValue, total: this.total, oldIndex: oldValue });
+    this.$emit("pagination-change", {
+      selectedIndex: newValue,
+      total: this.total,
+      oldIndex: oldValue
+    });
   }
   paginationButtonsChanged(_, newValue) {
     newValue.forEach((button) => {
@@ -115,7 +123,11 @@ __decorateClass([
   attr({ mode: "reflect", converter: totalConverter })
 ], Pagination.prototype, "total", 2);
 __decorateClass([
-  attr({ mode: "reflect", converter: totalConverter, attribute: "selected-index" })
+  attr({
+    mode: "reflect",
+    converter: totalConverter,
+    attribute: "selected-index"
+  })
 ], Pagination.prototype, "selectedIndex", 2);
 
 const ALLOWED_SIZES = [Size.SuperCondensed, Size.Condensed, Size.Normal];
@@ -129,7 +141,11 @@ const handleKeyDown = (value, { event, parent }) => {
   }
   if (event.key === "Tab") {
     event.target.dispatchEvent(
-      new CustomEvent("tabpressed", { detail: { value, shiftKey: event.shiftKey }, bubbles: true, composed: true })
+      new CustomEvent("tabpressed", {
+        detail: { value, shiftKey: event.shiftKey },
+        bubbles: true,
+        composed: true
+      })
     );
   }
 };
@@ -137,8 +153,7 @@ const getClasses = (_) => classNames("control");
 function getButtonAppearance(value, { parent }) {
   return parent.selectedIndex === Number(value) - 1 ? "filled" : "ghost";
 }
-const paginationButtonRenderer = (buttonTag) => html`
-	${when(
+const paginationButtonRenderer = (buttonTag) => html` ${when(
   (value) => value !== "...",
   html`
 		<${buttonTag} class="vwc-pagination-button"
@@ -154,13 +169,11 @@ const paginationButtonRenderer = (buttonTag) => html`
 		</${buttonTag}>
 	`
 )}
-	${when(
+${when(
   (value) => value === "...",
-  html`
-		<div
-			class="dots size-${(_, { parent: x }) => getPaginationSize(x)}">
-			...
-		</div>`
+  html` <div class="dots size-${(_, { parent: x }) => getPaginationSize(x)}">
+		...
+	</div>`
 )}`;
 const getPaginationSize = (x) => {
   if (!x.size || !ALLOWED_SIZES.includes(x.size)) {
@@ -190,7 +203,10 @@ const PaginationTemplate = (context) => {
 									?disabled="${(x) => x.total === 0 || x.selectedIndex === 0}"
 									@click="${(x) => x.selectedIndex !== void 0 && x.selectedIndex--}"
 		></${buttonTag}>
-		<div id="buttons-wrapper" class="buttons-wrapper" ${children({ property: "paginationButtons", filter: elements(buttonTag) })}>
+		<div id="buttons-wrapper" class="buttons-wrapper" ${children({
+    property: "paginationButtons",
+    filter: elements(buttonTag)
+  })}>
 			${repeat((x) => x.pagesList, paginationButtonTemplate, { positioning: true })}
 		</div>
 		<${buttonTag} class="next-button" ${ref("nextButton")}