@vonage/vivid 5.15.1 → 5.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vonage/vivid",
-  "version": "5.15.1",
+  "version": "5.16.0",
   "homepage": "https://vivid.vonage.com",
   "bugs": {
     "url": "https://github.com/Vonage/vivid-3/issues"
@@ -25,9 +25,9 @@
     },
     "./*": {
       "types": "./*/index.d.ts",
+      "source": "./src/lib/*/index.ts",
       "import": "./*/index.js",
-      "require": "./*/index.cjs",
-      "source": "./src/lib/*/index.ts"
+      "require": "./*/index.cjs"
     },
     "./locales/*": {
       "types": "./locales/*.d.ts",
@@ -42,7 +42,7 @@
     "@floating-ui/dom": "^1.7.6",
     "@microsoft/fast-element": "2.8.3",
     "@microsoft/fast-web-utilities": "^6.0.0",
-    "date-fns": "^3.0.0",
+    "date-fns": "^4.0.0",
     "dompurify": "^3.3.1",
     "prosemirror-commands": "^1.7.1",
     "prosemirror-dropcursor": "^1.8.2",
@@ -64,42 +64,41 @@
     "@custom-elements-manifest/analyzer": "^0.5.7",
     "@microsoft/api-extractor": "^7.55.0",
     "@playwright/test": "1.57.0",
-    "@testing-library/dom": "^8.20.1",
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/user-event": "^14.6.1",
     "@types/node": "^20.19.25",
     "@types/ramda": "^0.31.1",
-    "@types/uuid": "^10.0.0",
     "cem-plugin-async-function": "^0.0.5",
     "cem-plugin-jsdoc-example": "^0.0.9",
     "cem-plugin-jsdoc-function": "^0.0.5",
     "cem-plugin-readonly": "^0.0.5",
     "concurrently": "^9.2.1",
     "dialog-polyfill": "^0.5.6",
-    "element-internals-polyfill": "^1.3.13",
+    "element-internals-polyfill": "^3.0.2",
     "http-server": "^14.1.1",
     "playwright": "1.57.0",
     "sass": "^1.97.3",
     "tsx": "^4.21.0",
     "typescript": "5.9.3",
-    "vite": "^7.0.0",
+    "vite": "^8.0.0",
     "vite-plugin-dts": "^4.5.4",
-    "vite-plugin-static-copy": "^1.0.6",
-    "vitest": "^3.2.4",
+    "vite-plugin-static-copy": "^3.3.0",
+    "vitest": "^4.1.0",
     "vitest-axe": "^0.1.0",
     "vitest-fetch-mock": "^0.4.5",
     "wait-on": "^8.0.5",
     "@repo/cem-analyzer-plugins": "1.0.0",
-    "@repo/metadata-extractor": "1.0.0",
+    "@repo/eslint-plugin-repo": "1.0.0",
     "@repo/eslint-config": "1.0.0",
+    "@repo/metadata-extractor": "1.0.0",
+    "@repo/stylelint-config": "1.0.0",
+    "@repo/tokens": "1.0.0",
     "@repo/shared": "1.0.0",
-    "@repo/eslint-plugin-repo": "1.0.0",
     "@repo/styles": "1.0.0",
-    "@repo/tokens": "1.0.0",
     "@repo/tools": "1.0.0",
     "@repo/typescript-config": "1.0.0",
-    "@repo/stylelint-config": "1.0.0",
-    "@vonage/vivid-icons": "4.9.0",
-    "@repo/vitest-config": "1.0.0"
+    "@repo/vitest-config": "1.0.0",
+    "@vonage/vivid-icons": "4.9.0"
   },
   "customElements": "custom-elements.json",
   "scripts": {

package/pagination/definition.cjs

@@ -1,254 +1,6 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const button_definition = require('../unbundled/definition2.cjs');
-const vividElement = require('../unbundled/vivid-element.cjs');
-const fastElement = require('@microsoft/fast-element');
-const localized = require('../unbundled/localized.cjs');
-const fastWebUtilities = require('@microsoft/fast-web-utilities');
-const enums = require('../unbundled/enums.cjs');
-
-const styles = ".control{display:inline-flex;justify-content:space-between}.control:not(.shape-pill){border-radius:4px}.control.shape-pill{border-radius:16px}.buttons-wrapper{display:flex;column-gap:4px}.vwc-pagination-button[size=super-condensed]{--base-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=condensed]{--base-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=normal]{--base-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button::part(button){padding-inline:0}.dots{align-self:center;text-align:center}.dots:not(.size-super-condensed){font:var(--vvd-typography-base-bold)}.dots.size-super-condensed{font:var(--vvd-typography-base-condensed-bold);inline-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-condensed{inline-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-normal{inline-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}";
-
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-const MAX_DIGITS_AND_PLACEHOLDERS = 7;
-const totalConverter = {
-  fromView: (value) => parseInt(value, 10),
-  toView: (value) => value.toString()
-};
-class Pagination extends localized.Localized(vividElement.VividElement) {
-  constructor() {
-    super();
-    this.navIcons = false;
-    this.total = 0;
-    this.selectedIndex = 0;
-    this.addEventListener("tabpressed", (e) => {
-      const { value: currentLabel, shiftKey } = e.detail;
-      const index = this.paginationButtons.findIndex(
-        (button) => Number(button.label) === currentLabel
-      );
-      const focusDirection = shiftKey ? -1 : 1;
-      const newIndex = index + focusDirection;
-      if (newIndex < 0) {
-        return this.prevButton.focus();
-      }
-      if (newIndex > this.paginationButtons.length - 1) {
-        return this.nextButton.focus();
-      }
-      this.paginationButtons && this.paginationButtons[index + focusDirection].focus();
-    });
-  }
-  get pagesList() {
-    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) return this.total;
-      if (this.selectedIndex !== void 0 && this.total > MAX_DIGITS_AND_PLACEHOLDERS) {
-        if (this.selectedIndex < 4) {
-          if (i === MAX_DIGITS_AND_PLACEHOLDERS - 2) return "...";
-        }
-        if (this.selectedIndex >= 4 && this.selectedIndex <= this.total - 5) {
-          if (i > 1 && i < MAX_DIGITS_AND_PLACEHOLDERS - 2)
-            return this.selectedIndex + (i - 2);
-          if (i === 1 || i === MAX_DIGITS_AND_PLACEHOLDERS - 2) return "...";
-        }
-        if (this.selectedIndex > this.total - 5) {
-          if (i > 1) return this.total - (6 - i);
-          if (i === 1) return "...";
-        }
-      }
-      return i + 1;
-    });
-  }
-  totalChanged(_, newValue) {
-    if (newValue < 0) {
-      this.total = 0;
-      return;
-    }
-    this.#constrainSelectedIndex();
-  }
-  selectedIndexChanged(oldValue, newValue) {
-    if (oldValue === void 0) return;
-    this.$emit("pagination-change", {
-      selectedIndex: newValue,
-      total: this.total,
-      oldIndex: oldValue
-    });
-    this.#constrainSelectedIndex();
-  }
-  paginationButtonsChanged(_, newValue) {
-    newValue.forEach((button) => {
-      button.shadowRoot.querySelector("button").setAttribute("part", "button");
-    });
-  }
-  get #constrainedSelectedIndex() {
-    return Math.max(0, Math.min(this.selectedIndex ?? 0, this.total - 1));
-  }
-  #constrainSelectedIndex() {
-    if (this.selectedIndex !== this.#constrainedSelectedIndex) {
-      window.queueMicrotask(() => {
-        if (this.selectedIndex !== this.#constrainedSelectedIndex) {
-          this.selectedIndex = this.#constrainedSelectedIndex;
-        }
-      });
-    }
-  }
-}
-__decorateClass([
-  fastElement.attr
-], Pagination.prototype, "size", 2);
-__decorateClass([
-  fastElement.attr
-], Pagination.prototype, "shape", 2);
-__decorateClass([
-  fastElement.observable
-], Pagination.prototype, "paginationButtons", 2);
-__decorateClass([
-  fastElement.observable
-], Pagination.prototype, "prevButton", 2);
-__decorateClass([
-  fastElement.observable
-], Pagination.prototype, "nextButton", 2);
-__decorateClass([
-  fastElement.attr({ attribute: "nav-icons", mode: "boolean" })
-], Pagination.prototype, "navIcons", 2);
-__decorateClass([
-  fastElement.volatile
-], Pagination.prototype, "pagesList", 1);
-__decorateClass([
-  fastElement.attr({ mode: "reflect", converter: totalConverter })
-], Pagination.prototype, "total", 2);
-__decorateClass([
-  fastElement.attr({
-    mode: "reflect",
-    converter: totalConverter,
-    attribute: "selected-index"
-  })
-], Pagination.prototype, "selectedIndex", 2);
-
-const ALLOWED_SIZES = [
-  enums.Size.SuperCondensed,
-  enums.Size.Condensed,
-  enums.Size.Normal
-];
-const ALLOWED_SHAPES = [enums.Shape.Rounded, enums.Shape.Pill];
-const handleSelection = (value, { parent: x }) => {
-  return x.selectedIndex = Number(value) - 1;
-};
-const handleKeyDown = (value, { event, parent }) => {
-  if (event.key === " " || event.key === "Enter") {
-    handleSelection(value, { parent });
-  }
-  if (event.key === "Tab") {
-    event.target.dispatchEvent(
-      new CustomEvent("tabpressed", {
-        detail: { value, shiftKey: event.shiftKey },
-        bubbles: true,
-        composed: true
-      })
-    );
-  }
-};
-const getClasses = (_) => fastWebUtilities.classNames("control");
-function getButtonAppearance(value, { parent }) {
-  return parent.selectedIndex === Number(value) - 1 ? "filled" : "ghost";
-}
-const paginationButtonRenderer = (buttonTag) => fastElement.html` ${fastElement.when(
-  (value) => value !== "...",
-  fastElement.html`
-		<${buttonTag} class="vwc-pagination-button"
-			label="${(value) => value}"
-			appearance="${getButtonAppearance}"
-			size="${(_, { parent: x }) => getPaginationSize(x)}"
-			shape="${(_, { parent: x }) => getPaginationShape(x)}"
-			style="inline-size: ${(value) => getPaginationButtonWidth(value)};"
-			tabindex="0"
-			aria-label="${(value, { parent: x }) => x.locale.pagination.goToPageLabel(value)}"
-			aria-current="${(value, { parent }) => parent.selectedIndex === Number(value) - 1}"
-			@click="${handleSelection}"
-			@keydown="${handleKeyDown}">
-		</${buttonTag}>
-	`
-)}
-${fastElement.when(
-  (value) => value === "...",
-  fastElement.html` <div
-		class="dots size-${(_, { parent: x }) => getPaginationSize(x)}"
-		aria-hidden="true"
-	>
-		...
-	</div>`
-)}`;
-const getPaginationSize = (x) => {
-  if (!x.size || !ALLOWED_SIZES.includes(x.size)) {
-    return enums.Size.SuperCondensed;
-  }
-  return x.size;
-};
-const getPaginationShape = (x) => {
-  if (!x.shape || !ALLOWED_SHAPES.includes(x.shape)) {
-    return enums.Shape.Rounded;
-  }
-  return x.shape;
-};
-const getPaginationButtonWidth = (value) => {
-  return `calc(var(--base-size) + ${String(value).length - 1}ch)`;
-};
-const PaginationTemplate = (context) => {
-  const buttonTag = context.tagFor(button_definition.Button);
-  const buttonTagName = context.tagFor(button_definition.Button, true);
-  const paginationButtonTemplate = paginationButtonRenderer(buttonTag);
-  return fastElement.html`
-	<div class="${getClasses}">
-		<${buttonTag} class="prev-button" ${fastElement.ref("prevButton")}
-			label="${(x) => !x.navIcons ? "Previous" : null}"
-			icon="${(x) => x.navIcons ? "chevron-left-line" : null}"
-			size="${getPaginationSize}"
-			shape="${getPaginationShape}"
-			?disabled="${(x) => x.total === 0 || x.selectedIndex === 0}"
-			@click="${(x) => x.selectedIndex !== void 0 && x.selectedIndex--}"
-			aria-label="${(x) => x.locale.pagination.previousPageLabel}"
-		></${buttonTag}>
-		<div id="buttons-wrapper" class="buttons-wrapper" ${fastElement.children({
-    property: "paginationButtons",
-    filter: fastElement.elements(buttonTagName)
-  })}>
-			${fastElement.repeat((x) => x.pagesList, paginationButtonTemplate, { positioning: true })}
-		</div>
-		<${buttonTag} class="next-button" ${fastElement.ref("nextButton")}
-			label="${(x) => !x.navIcons ? "Next" : null}"
-			icon="${(x) => x.navIcons ? "chevron-right-line" : null}"
-			size="${getPaginationSize}"
-			shape="${getPaginationShape}"
-			?disabled="${(x) => x.total === 0 || x.selectedIndex === x.total - 1}"
-			@click="${(x) => x.selectedIndex !== void 0 && x.selectedIndex++}"
-			aria-label="${(x) => x.locale.pagination.nextPageLabel}"
-		></${buttonTag}>
-</div>`;
-};
-
-const paginationDefinition = vividElement.defineVividComponent(
-  "pagination",
-  Pagination,
-  PaginationTemplate,
-  [button_definition.buttonDefinition],
-  {
-    styles
-  }
-);
-const registerPagination = vividElement.createRegisterFunction(paginationDefinition);
-
-exports.VwcPaginationElement = Pagination;
-exports.paginationDefinition = paginationDefinition;
-exports.registerPagination = registerPagination;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../unbundled/definition2.cjs");
+const require_definition$1 = require("../unbundled/definition50.cjs");
+exports.VwcPaginationElement = require_definition$1.Pagination;
+exports.paginationDefinition = require_definition$1.paginationDefinition;
+exports.registerPagination = require_definition$1.registerPagination;

package/pagination/definition.js

@@ -1,248 +1,3 @@
-import { B as Button, b as buttonDefinition } from '../unbundled/definition2.js';
-import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
-import { attr, observable, volatile, ref, children, elements, repeat, html, when } from '@microsoft/fast-element';
-import { L as Localized } from '../unbundled/localized.js';
-import { classNames } from '@microsoft/fast-web-utilities';
-import { c as Size, S as Shape } from '../unbundled/enums.js';
-
-const styles = ".control{display:inline-flex;justify-content:space-between}.control:not(.shape-pill){border-radius:4px}.control.shape-pill{border-radius:16px}.buttons-wrapper{display:flex;column-gap:4px}.vwc-pagination-button[size=super-condensed]{--base-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=condensed]{--base-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=normal]{--base-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button::part(button){padding-inline:0}.dots{align-self:center;text-align:center}.dots:not(.size-super-condensed){font:var(--vvd-typography-base-bold)}.dots.size-super-condensed{font:var(--vvd-typography-base-condensed-bold);inline-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-condensed{inline-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-normal{inline-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}";
-
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-const MAX_DIGITS_AND_PLACEHOLDERS = 7;
-const totalConverter = {
-  fromView: (value) => parseInt(value, 10),
-  toView: (value) => value.toString()
-};
-class Pagination extends Localized(VividElement) {
-  constructor() {
-    super();
-    this.navIcons = false;
-    this.total = 0;
-    this.selectedIndex = 0;
-    this.addEventListener("tabpressed", (e) => {
-      const { value: currentLabel, shiftKey } = e.detail;
-      const index = this.paginationButtons.findIndex(
-        (button) => Number(button.label) === currentLabel
-      );
-      const focusDirection = shiftKey ? -1 : 1;
-      const newIndex = index + focusDirection;
-      if (newIndex < 0) {
-        return this.prevButton.focus();
-      }
-      if (newIndex > this.paginationButtons.length - 1) {
-        return this.nextButton.focus();
-      }
-      this.paginationButtons && this.paginationButtons[index + focusDirection].focus();
-    });
-  }
-  get pagesList() {
-    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) return this.total;
-      if (this.selectedIndex !== void 0 && this.total > MAX_DIGITS_AND_PLACEHOLDERS) {
-        if (this.selectedIndex < 4) {
-          if (i === MAX_DIGITS_AND_PLACEHOLDERS - 2) return "...";
-        }
-        if (this.selectedIndex >= 4 && this.selectedIndex <= this.total - 5) {
-          if (i > 1 && i < MAX_DIGITS_AND_PLACEHOLDERS - 2)
-            return this.selectedIndex + (i - 2);
-          if (i === 1 || i === MAX_DIGITS_AND_PLACEHOLDERS - 2) return "...";
-        }
-        if (this.selectedIndex > this.total - 5) {
-          if (i > 1) return this.total - (6 - i);
-          if (i === 1) return "...";
-        }
-      }
-      return i + 1;
-    });
-  }
-  totalChanged(_, newValue) {
-    if (newValue < 0) {
-      this.total = 0;
-      return;
-    }
-    this.#constrainSelectedIndex();
-  }
-  selectedIndexChanged(oldValue, newValue) {
-    if (oldValue === void 0) return;
-    this.$emit("pagination-change", {
-      selectedIndex: newValue,
-      total: this.total,
-      oldIndex: oldValue
-    });
-    this.#constrainSelectedIndex();
-  }
-  paginationButtonsChanged(_, newValue) {
-    newValue.forEach((button) => {
-      button.shadowRoot.querySelector("button").setAttribute("part", "button");
-    });
-  }
-  get #constrainedSelectedIndex() {
-    return Math.max(0, Math.min(this.selectedIndex ?? 0, this.total - 1));
-  }
-  #constrainSelectedIndex() {
-    if (this.selectedIndex !== this.#constrainedSelectedIndex) {
-      window.queueMicrotask(() => {
-        if (this.selectedIndex !== this.#constrainedSelectedIndex) {
-          this.selectedIndex = this.#constrainedSelectedIndex;
-        }
-      });
-    }
-  }
-}
-__decorateClass([
-  attr
-], Pagination.prototype, "size", 2);
-__decorateClass([
-  attr
-], Pagination.prototype, "shape", 2);
-__decorateClass([
-  observable
-], Pagination.prototype, "paginationButtons", 2);
-__decorateClass([
-  observable
-], Pagination.prototype, "prevButton", 2);
-__decorateClass([
-  observable
-], Pagination.prototype, "nextButton", 2);
-__decorateClass([
-  attr({ attribute: "nav-icons", mode: "boolean" })
-], Pagination.prototype, "navIcons", 2);
-__decorateClass([
-  volatile
-], Pagination.prototype, "pagesList", 1);
-__decorateClass([
-  attr({ mode: "reflect", converter: totalConverter })
-], Pagination.prototype, "total", 2);
-__decorateClass([
-  attr({
-    mode: "reflect",
-    converter: totalConverter,
-    attribute: "selected-index"
-  })
-], Pagination.prototype, "selectedIndex", 2);
-
-const ALLOWED_SIZES = [
-  Size.SuperCondensed,
-  Size.Condensed,
-  Size.Normal
-];
-const ALLOWED_SHAPES = [Shape.Rounded, Shape.Pill];
-const handleSelection = (value, { parent: x }) => {
-  return x.selectedIndex = Number(value) - 1;
-};
-const handleKeyDown = (value, { event, parent }) => {
-  if (event.key === " " || event.key === "Enter") {
-    handleSelection(value, { parent });
-  }
-  if (event.key === "Tab") {
-    event.target.dispatchEvent(
-      new CustomEvent("tabpressed", {
-        detail: { value, shiftKey: event.shiftKey },
-        bubbles: true,
-        composed: true
-      })
-    );
-  }
-};
-const getClasses = (_) => classNames("control");
-function getButtonAppearance(value, { parent }) {
-  return parent.selectedIndex === Number(value) - 1 ? "filled" : "ghost";
-}
-const paginationButtonRenderer = (buttonTag) => html` ${when(
-  (value) => value !== "...",
-  html`
-		<${buttonTag} class="vwc-pagination-button"
-			label="${(value) => value}"
-			appearance="${getButtonAppearance}"
-			size="${(_, { parent: x }) => getPaginationSize(x)}"
-			shape="${(_, { parent: x }) => getPaginationShape(x)}"
-			style="inline-size: ${(value) => getPaginationButtonWidth(value)};"
-			tabindex="0"
-			aria-label="${(value, { parent: x }) => x.locale.pagination.goToPageLabel(value)}"
-			aria-current="${(value, { parent }) => parent.selectedIndex === Number(value) - 1}"
-			@click="${handleSelection}"
-			@keydown="${handleKeyDown}">
-		</${buttonTag}>
-	`
-)}
-${when(
-  (value) => value === "...",
-  html` <div
-		class="dots size-${(_, { parent: x }) => getPaginationSize(x)}"
-		aria-hidden="true"
-	>
-		...
-	</div>`
-)}`;
-const getPaginationSize = (x) => {
-  if (!x.size || !ALLOWED_SIZES.includes(x.size)) {
-    return Size.SuperCondensed;
-  }
-  return x.size;
-};
-const getPaginationShape = (x) => {
-  if (!x.shape || !ALLOWED_SHAPES.includes(x.shape)) {
-    return Shape.Rounded;
-  }
-  return x.shape;
-};
-const getPaginationButtonWidth = (value) => {
-  return `calc(var(--base-size) + ${String(value).length - 1}ch)`;
-};
-const PaginationTemplate = (context) => {
-  const buttonTag = context.tagFor(Button);
-  const buttonTagName = context.tagFor(Button, true);
-  const paginationButtonTemplate = paginationButtonRenderer(buttonTag);
-  return html`
-	<div class="${getClasses}">
-		<${buttonTag} class="prev-button" ${ref("prevButton")}
-			label="${(x) => !x.navIcons ? "Previous" : null}"
-			icon="${(x) => x.navIcons ? "chevron-left-line" : null}"
-			size="${getPaginationSize}"
-			shape="${getPaginationShape}"
-			?disabled="${(x) => x.total === 0 || x.selectedIndex === 0}"
-			@click="${(x) => x.selectedIndex !== void 0 && x.selectedIndex--}"
-			aria-label="${(x) => x.locale.pagination.previousPageLabel}"
-		></${buttonTag}>
-		<div id="buttons-wrapper" class="buttons-wrapper" ${children({
-    property: "paginationButtons",
-    filter: elements(buttonTagName)
-  })}>
-			${repeat((x) => x.pagesList, paginationButtonTemplate, { positioning: true })}
-		</div>
-		<${buttonTag} class="next-button" ${ref("nextButton")}
-			label="${(x) => !x.navIcons ? "Next" : null}"
-			icon="${(x) => x.navIcons ? "chevron-right-line" : null}"
-			size="${getPaginationSize}"
-			shape="${getPaginationShape}"
-			?disabled="${(x) => x.total === 0 || x.selectedIndex === x.total - 1}"
-			@click="${(x) => x.selectedIndex !== void 0 && x.selectedIndex++}"
-			aria-label="${(x) => x.locale.pagination.nextPageLabel}"
-		></${buttonTag}>
-</div>`;
-};
-
-const paginationDefinition = defineVividComponent(
-  "pagination",
-  Pagination,
-  PaginationTemplate,
-  [buttonDefinition],
-  {
-    styles
-  }
-);
-const registerPagination = createRegisterFunction(paginationDefinition);
-
+import "../unbundled/definition2.js";
+import { n as registerPagination, r as Pagination, t as paginationDefinition } from "../unbundled/definition50.js";
 export { Pagination as VwcPaginationElement, paginationDefinition, registerPagination };