@mcp-b/web-components 0.2.0

package/dist/pagination-DuKPuzdb.js

@@ -0,0 +1,679 @@
+import { Localize } from "./utilities/localize.js";
+import "./icon-BPVkNsY4.js";
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { css } from "lit";
+import { property } 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 { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { html as html$1, literal } from "lit/static-html.js";
+import { clamp } from "@mcp-b/wc-support/utilities/math";
+import { SigveloBeforePageChangeEvent, SigveloPageChangeEvent } from "@mcp-b/wc-support/events/page";
+//#region src/components/pagination/pagination.styles.ts
+var pagination_styles_default = css`
+  :host {
+    display: inline-flex;
+  }
+
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: start;
+    margin: 0;
+    padding: 0;
+    gap: 0.25em;
+    list-style: none;
+  }
+
+  li {
+    display: flex;
+  }
+
+  [part~="button"] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2.25em;
+    min-height: 2.25em;
+    border-radius: var(--sigvelo-radius-md);
+    color: var(--sigvelo-color-text);
+    font: inherit;
+    line-height: 1;
+    font-family: inherit;
+    font-variant-numeric: tabular-nums;
+    text-align: center;
+    text-decoration: none;
+    cursor: pointer;
+    transition:
+      var(--sigvelo-motion-duration-interaction) color ease,
+      var(--sigvelo-motion-duration-interaction) border-color ease,
+      var(--sigvelo-motion-duration-interaction) background-color ease,
+      var(--sigvelo-motion-duration-interaction) translate ease;
+
+    user-select: none;
+    -webkit-user-select: none;
+
+    &:active:not(.disabled, .current) {
+      translate: 0 var(--sigvelo-motion-distance-xs);
+    }
+
+    &:focus-visible {
+      outline: var(--sigvelo-focus-ring);
+      outline-offset: var(--sigvelo-focus-offset);
+    }
+
+    /* Current page */
+    &.current:not(.disabled) {
+      font-weight: var(--sigvelo-font-weight-semibold);
+      cursor: default;
+    }
+
+    /* Disabled buttons */
+    &.disabled {
+      box-shadow: none;
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+
+  /* Normal */
+  :host([variant="normal"]) [part~="button"] {
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+      var(--sigvelo-color-neutral-border-subtle);
+    background-color: var(--sigvelo-color-surface);
+
+    @media (hover: hover) {
+      &:hover:not(.disabled, .current) {
+        border-color: color-mix(
+          in oklab,
+          var(--sigvelo-color-neutral-border-subtle),
+          light-dark(black, white) 5%
+        );
+        background-color: var(--sigvelo-color-neutral-bg-subtle);
+      }
+    }
+
+    &.current:not(.disabled) {
+      border-color: var(--sigvelo-color-primary-bg);
+      background-color: var(--sigvelo-color-primary-bg);
+      color: var(--sigvelo-color-primary-text-on-bg);
+    }
+  }
+
+  /* Filled */
+  :host([variant="filled"]) [part~="button"] {
+    border: none;
+    background-color: var(--sigvelo-color-neutral-bg-subtle);
+
+    @media (hover: hover) {
+      &:hover:not(.disabled, .current) {
+        background-color: var(--sigvelo-color-neutral-bg-muted);
+      }
+    }
+
+    &.current:not(.disabled) {
+      background-color: var(--sigvelo-color-primary-bg);
+      color: var(--sigvelo-color-primary-text-on-bg);
+    }
+  }
+
+  /* Unstyled */
+  :host([variant="unstyled"]) [part~="button"] {
+    border: none;
+    background-color: transparent;
+
+    &.current:not(.disabled) {
+      background-color: var(--sigvelo-color-primary-bg);
+      color: var(--sigvelo-color-primary-text-on-bg);
+    }
+  }
+
+  /* Icons */
+  sigvelo-icon,
+  ::slotted(sigvelo-icon) {
+    font-size: 1.25em;
+  }
+
+  /* Disabled */
+  :host(:state(disabled)) {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  /* Compact format */
+  :host([format="compact"]) #list {
+    display: flex;
+    align-items: center;
+  }
+
+  #range {
+    margin-inline: 0.5em;
+    font-variant-numeric: tabular-nums;
+  }
+`;
+//#endregion
+//#region src/components/pagination/pagination.ts
+/**
+* <sigvelo-pagination>
+*
+* @summary Splits content into numbered pages so users can navigate datasets in manageable chunks.
+* @tag sigvelo-pagination
+* @documentation https://design-system.sigvelo.com/docs/components/pagination
+* @status stable
+* @since 1.0
+*
+* @dependency sigvelo-icon
+*
+* @slot previous-icon - A custom icon to use for the previous button.
+* @slot next-icon - A custom icon to use for the next button.
+* @slot jump-backward-icon - A custom icon to use for the jump backward button.
+* @slot jump-forward-icon - A custom icon to use for jump forward button.
+*
+* @event sigvelo-before-page-change - Emitted when the page is going to change but before it actually changes. Calling
+*  `event.preventDefault()` will prevent the page from changing. Inspect `event.detail` to get the `currentPage` and
+*  `requestedPage` properties.
+* @event sigvelo-page-change - Emitted after the page has been changed and the UI has been updated.
+*
+* @csspart nav - The navigation container, a `<nav>` element.
+* @csspart list - The list that contains the pagination items, a `<ul>` element.
+* @csspart item - A pagination item, an `<li>` element.
+* @csspart button - A pagination button, a `<button>` or an `<a>` element.
+* @csspart button-first - The button that navigates to the first page.
+* @csspart button-previous - The button that navigates to the previous page.
+* @csspart button-next - The button that navigates to the next page.
+* @csspart button-last - The button that navigates to the last page.
+* @csspart button-page - A button that navigates to a specific page.
+* @csspart button-current - The button that represents the current page.
+* @csspart button-jump-backward - The jump backward button.
+* @csspart button-jump-forward - The jump forward button.
+* @csspart range - The page range that shows the page when viewed in the compact format, e.g. "1 of 10".
+*
+* @cssstate disabled - Applied when the pagination is disabled.
+*
+* @example Default
+* ```html
+* <sigvelo-pagination total-pages="5"></sigvelo-pagination>
+* ```
+*
+* @example Setting the number of pages
+* Use the `total-pages` attribute to set the total number of pages available.
+*
+* ```html
+* <sigvelo-pagination total-pages="20"></sigvelo-pagination>
+* ```
+*
+* @example Setting the initial page
+* Use the `page` attribute to set the initial page that's selected.
+*
+* ```html
+* <sigvelo-pagination total-pages="5" page="3"></sigvelo-pagination>
+* ```
+*
+* @example Responding to page changes
+* When the user changes the page, the `sigvelo-page-change` event will be emitted. You can listen to this event to update the view or redirect the user to the appropriate destination.
+*
+* ```html
+* <sigvelo-pagination
+*   total-pages="10"
+*   page="1"
+*   id="pagination__responding"
+* ></sigvelo-pagination>
+*
+* <script>
+*   const pagination = document.getElementById('pagination__responding');
+*
+*   pagination.addEventListener('sigvelo-page-change', () => {
+*     //
+*     // Update the view here
+*     //
+*     console.log(`Showing page ${pagination.page}`);
+*
+*     //
+*     // Alternatively, you can send the user to a URL:
+*     //
+*     // location.href = `/page/${pagination.page}`
+*     //
+*   });
+* <\/script>
+* ```
+*
+* @example Changing the page programmatically
+* Set the `page` property to any valid page to change the current page. Note that programmatic changes _will not_ dispatch page change events.
+*
+* ```html
+* <sigvelo-pagination
+*   total-pages="10"
+*   page="1"
+*   id="pagination__setting"
+* ></sigvelo-pagination>
+*
+* <sigvelo-select label="Page" value="1" style="max-width: 100px; margin-block-start: 1.5rem;">
+*   <option value="1">1</option>
+*   <option value="2">2</option>
+*   <option value="3">3</option>
+*   <option value="4">4</option>
+*   <option value="5">5</option>
+*   <option value="6">6</option>
+*   <option value="7">7</option>
+*   <option value="8">8</option>
+*   <option value="9">9</option>
+*   <option value="10">10</option>
+* </sigvelo-select>
+*
+* <script>
+*   const pagination = document.getElementById('pagination__setting');
+*   const select = pagination.nextElementSibling;
+*
+*   select.addEventListener('input', () => {
+*     pagination.page = select.value;
+*   });
+*
+*   pagination.addEventListener('sigvelo-page-change', () => {
+*     select.value = pagination.page;
+*   });
+* <\/script>
+* ```
+*
+* @example Rendering links instead of buttons
+* By default, the pagination component renders `<button>` elements internally. To have it render links instead, set the `link-formatter` attribute to a URL with a `{page}` placeholder that corresponds to the target page, e.g. `/path/to/{page}`.
+*
+* ```html
+* <sigvelo-pagination
+*   total-pages="10"
+*   page="5"
+*   link-formatter="https://example.com/path/to/{page}"
+* ></sigvelo-pagination>
+* ```
+*
+* For more control over the URL, you can set the `linkFormatter` property to a JavaScript function that accepts a page number and returns a URL.
+*
+* ```html
+* <sigvelo-pagination id="pagination__links" total-pages="5"></sigvelo-pagination>
+*
+* <script>
+*   const pagination = document.getElementById('pagination__links');
+*
+*   pagination.linkFormatter = page => `https://example.com/path/to/${page}`;
+* <\/script>
+* ```
+*
+* **Note:** When a link formatter is provided, users will be redirected to the corresponding URL when they select a page. In this case, the pagination component _will not_ update dynamically. This is the intended behavior when using links.
+*
+* @example Changing the format
+* Set the `format` attribute to `compact` or `standard` to change the pagination's format.
+*
+* ```html
+* <sigvelo-pagination
+*   format="compact"
+*   total-pages="5"
+*   id="pagination__format"
+* ></sigvelo-pagination>
+*
+* <sigvelo-radio label="Format" value="compact" class="sigvelo-vh-label" style="margin-block-start: 1.5rem;">
+*   <sigvelo-radio-item value="compact">Compact</sigvelo-radio-item>
+*   <sigvelo-radio-item value="standard">Standard</sigvelo-radio-item>
+* </sigvelo-select>
+*
+* <script>
+*   const pagination = document.getElementById('pagination__format');
+*   const radio = pagination.nextElementSibling;
+*
+*   radio.addEventListener('input', () => {
+*     pagination.format = radio.value;
+*   });
+* <\/script>
+* ```
+*
+* @example Changing the variant
+* Set the `variant` attribute to `normal`, `filled`, or `unstyled` to change the pagination's variant.
+*
+* ```html
+* <sigvelo-pagination variant="normal" total-pages="5"></sigvelo-pagination>
+* <sigvelo-pagination variant="filled" total-pages="5"></sigvelo-pagination>
+* <sigvelo-pagination variant="unstyled" total-pages="5"></sigvelo-pagination>
+* ```
+*
+* @example Changing the number of buttons
+* Use the `siblings` attribute to control the number of pages that show on each side of the current page. The default is 3. The minimum is 2.
+*
+* ```html
+* <sigvelo-pagination siblings="2" total-pages="20" page="10"></sigvelo-pagination>
+* <sigvelo-pagination siblings="3" total-pages="20" page="10"></sigvelo-pagination>
+* <sigvelo-pagination siblings="4" total-pages="20" page="10"></sigvelo-pagination>
+* ```
+*
+* @example Changing the size
+* Pagination controls are sized relative to the current font size. To change their size, apply `font-size` to the pagination or an ancestor element.
+*
+* ```html
+* <sigvelo-pagination
+*   total-pages="5"
+*   page="1"
+*   style="font-size: 0.75rem;"
+* ></sigvelo-pagination>
+*
+* <sigvelo-pagination
+*   total-pages="5"
+*   page="1"
+*   style="font-size: 1rem;"
+* ></sigvelo-pagination>
+*
+* <sigvelo-pagination
+*   total-pages="5"
+*   page="1"
+*   style="font-size: 1.25rem;"
+* ></sigvelo-pagination>
+* ```
+*
+* @example Using custom icons
+* Use the `previous-icon`, `next-icon`, and `jump-icon` slots to override the default icons.
+*
+* ```html
+* <sigvelo-pagination total-pages="10">
+*   <sigvelo-icon slot="previous-icon" name="arrow-left"></sigvelo-icon>
+*   <sigvelo-icon slot="next-icon" name="arrow-right"></sigvelo-icon>
+*   <sigvelo-icon slot="jump-backward-icon" name="chevrons-left"></sigvelo-icon>
+*   <sigvelo-icon slot="jump-forward-icon" name="chevrons-right"></sigvelo-icon>
+* </sigvelo-pagination>
+* ```
+*
+* @example Removing nav buttons
+* Use `without-nav` to remove the previous and next navigation buttons.
+*
+* ```html
+* <sigvelo-pagination
+*   total-pages="10"
+*   page="1"
+*   without-nav
+* ></sigvelo-pagination>
+* ```
+*
+* @example Disabling
+* Add the `disabled` attribute to disable the pagination control.
+*
+* ```html
+* <sigvelo-pagination
+*   total-pages="10"
+*   page="1"
+*   disabled
+* ></sigvelo-pagination>
+* ```
+*
+* @example Styling pagination
+* Pagination controls come with a simple, minimal appearance. Feel free to customize them with your own styles.
+*
+* ```html
+* <sigvelo-pagination total-pages="10" page="5" variant="unstyled" id="pagination__styling"></sigvelo-pagination>
+*
+* <style>
+*   #pagination__styling {
+*     &::part(button) {
+*       border-radius: var(--sigvelo-radius-full);
+*     }
+*
+*     <!-- Light gray circles for previous and next buttons -->
+*     &::part(button-previous),
+*     &::part(button-next) {
+*       background-color: var(--sigvelo-color-neutral-bg-subtle);
+*     }
+*
+*     <!-- The current page is larger and has a subtle gradient -->
+*     &::part(button-current) {
+*       background: linear-gradient(45deg, #ff1493, #ff69b4);
+*       color: white;
+*       scale: 1.1;
+*     }
+*   }
+* </style>
+* ```
+*/
+var SigveloPagination = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.localize = new Localize(this);
+		this.label = "";
+		this.totalPages = 1;
+		this.page = 1;
+		this.siblings = 3;
+		this.jump = 5;
+		this.format = "standard";
+		this.linkFormatter = "";
+		this.disabled = false;
+		this.variant = "normal";
+		this.withoutNav = false;
+	}
+	static {
+		this.styles = [hostStyles, pagination_styles_default];
+	}
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if (changedProperties.has("page")) this.page = Number(this.page);
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("disabled")) this.customStates.set("disabled", this.disabled);
+	}
+	/** Changes the current page, emitting a cancellable 'sigvelo-page-change' event. */
+	async changePage(newPage) {
+		if (this.disabled || this.linkFormatter) return;
+		if (newPage < 1 || newPage > this.totalPages || newPage === this.page) return;
+		const beforePageChangeEvent = new SigveloBeforePageChangeEvent({
+			currentPage: this.page,
+			requestedPage: newPage
+		});
+		this.dispatchEvent(beforePageChangeEvent);
+		if (beforePageChangeEvent.defaultPrevented) return;
+		this.page = newPage;
+		await this.updateComplete;
+		const pageChangeEvent = new SigveloPageChangeEvent();
+		this.dispatchEvent(pageChangeEvent);
+	}
+	/** Generates the list of pagination items, including pages and jump buttons. */
+	getPaginationItems() {
+		const items = [];
+		const clampedTotalButtons = clamp(2 * this.siblings + 1, 5, Infinity);
+		if (this.totalPages < 1) return items;
+		if (this.totalPages <= clampedTotalButtons) for (let i = 1; i <= this.totalPages; i++) items.push({
+			type: "page",
+			page: i
+		});
+		else {
+			const middlePageCount = clampedTotalButtons - 4;
+			const sideButtons = Math.floor(middlePageCount / 2);
+			const showJumpBackward = this.page > sideButtons + 2;
+			const showJumpForward = this.page < this.totalPages - sideButtons - 1;
+			let rangeStart, rangeEnd;
+			if (!showJumpBackward && showJumpForward) {
+				rangeStart = 2;
+				rangeEnd = clampedTotalButtons - 2;
+			} else if (showJumpBackward && !showJumpForward) {
+				rangeStart = this.totalPages - (clampedTotalButtons - 3);
+				rangeEnd = this.totalPages - 1;
+			} else if (showJumpBackward && showJumpForward) {
+				rangeStart = Math.max(2, this.page - sideButtons);
+				rangeEnd = Math.min(this.totalPages - 1, this.page + sideButtons);
+				if (rangeEnd - rangeStart + 1 < middlePageCount) {
+					if (rangeStart === 2) rangeEnd = Math.min(this.totalPages - 1, rangeStart + middlePageCount - 1);
+					else if (rangeEnd === this.totalPages - 1) rangeStart = Math.max(2, rangeEnd - middlePageCount + 1);
+				}
+			} else {
+				rangeStart = 2;
+				rangeEnd = this.totalPages - 1;
+			}
+			items.push({
+				type: "page",
+				page: 1
+			});
+			if (rangeStart === 3) items.push({
+				type: "page",
+				page: 2
+			});
+			else if (showJumpBackward) items.push({
+				type: "jump",
+				position: "start"
+			});
+			for (let i = rangeStart; i <= rangeEnd; i++) items.push({
+				type: "page",
+				page: i
+			});
+			if (rangeEnd === this.totalPages - 2) items.push({
+				type: "page",
+				page: this.totalPages - 1
+			});
+			else if (showJumpForward) items.push({
+				type: "jump",
+				position: "end"
+			});
+			items.push({
+				type: "page",
+				page: this.totalPages
+			});
+		}
+		return items;
+	}
+	handleNavClick(event) {
+		if (this.disabled) event.preventDefault();
+	}
+	renderLink(page) {
+		page = clamp(page, 1, this.totalPages);
+		if (typeof this.linkFormatter === "string") return this.linkFormatter.replace(/\{page\}/g, page + "");
+		else if (typeof this.linkFormatter === "function") return this.linkFormatter(page);
+		else return;
+	}
+	render() {
+		const isLink = this.linkFormatter;
+		const tag = isLink ? literal`a` : literal`button`;
+		const label = this.label || this.localize.term("pagination");
+		const isPrevDisabled = this.page <= 1 || this.disabled;
+		const isNextDisabled = this.page >= this.totalPages || this.disabled;
+		const isRtl = this.localize.dir() === "rtl";
+		const chevronLeftIcon = html$1`
+      <sigvelo-icon library="system" name="chevron-left"></sigvelo-icon>
+    `;
+		const chevronRightIcon = html$1`
+      <sigvelo-icon library="system" name="chevron-right"></sigvelo-icon>
+    `;
+		let content;
+		const previousButton = html$1`
+      <li part="item">
+        <${tag}
+          href=${ifDefined(this.renderLink(this.page - 1))}
+          part="button button-previous"
+          class=${classMap({ disabled: isPrevDisabled || this.disabled })}
+          aria-label="${this.localize.term("previous")}"
+          ?disabled=${ifDefined(isLink ? void 0 : isPrevDisabled || this.disabled)}
+          tabindex=${ifDefined(this.disabled ? "-1" : void 0)}
+          @click=${() => this.changePage(this.page - 1)}
+        >
+          <slot name="previous-icon"> ${isRtl ? chevronRightIcon : chevronLeftIcon} </slot>
+        </${tag}>
+      </li>
+    `;
+		const nextButton = html$1`
+      <li part="item">
+        <${tag}
+          href=${ifDefined(this.renderLink(this.page + 1))}
+          part="button button-next"
+          class=${classMap({ disabled: isNextDisabled || this.disabled })}
+          aria-label="${this.localize.term("next")}"
+          ?disabled=${ifDefined(isLink ? void 0 : isNextDisabled || this.disabled)}
+          tabindex=${ifDefined(this.disabled ? "-1" : void 0)}
+          @click=${() => this.changePage(this.page + 1)}
+        >
+          <slot name="next-icon"> ${isRtl ? chevronLeftIcon : chevronRightIcon} </slot>
+        </${tag}>
+      </li>
+    `;
+		if (this.format === "compact") content = html$1`
+        <li part="item">
+          <span id="range" part="range">
+            ${this.localize.term("numberOfTotal", this.localize.number(this.page, { useGrouping: true }), this.localize.number(this.totalPages, { useGrouping: true }))}
+          </span>
+        </li>
+      `;
+		else content = this.getPaginationItems().map((item) => {
+			if (item.type === "jump") {
+				const jumpToPage = this.page + (item.position === "start" ? -5 : 5);
+				return html$1`
+            <li part="item">
+              <${tag}
+                href=${ifDefined(this.renderLink(jumpToPage))}
+                part="button ${item.position === "start" ? "button-jump-backward" : "button-jump-forward"}"
+                class=${classMap({ disabled: this.disabled })}
+                aria-label="${this.localize.term(item.position === "start" ? "jumpBackward" : "jumpForward")}"
+                ?disabled=${ifDefined(isLink ? void 0 : this.disabled)}
+                tabindex=${ifDefined(this.disabled ? "-1" : void 0)}
+                @click=${() => this.changePage(clamp(this.page + (item.position === "start" ? -5 : 5), 1, this.totalPages))}
+              >
+                <slot name=${item.position === "start" ? "jump-backward-icon" : "jump-forward-icon"}>
+                  <sigvelo-icon library="system" name="dots" family="filled"></sigvelo-icon>
+                </slot>
+              </${tag}>
+            </li>
+          `;
+			} else {
+				const isCurrent = item.page === this.page;
+				const part = `button button-page${isCurrent ? " button-current" : ""}${item.page === 1 ? " button-first" : ""}${item.page === this.totalPages ? " button-last" : ""}`;
+				return html$1`
+            <li part="item">
+              <${tag}
+                href=${ifDefined(this.renderLink(item.page))}
+                part=${part}
+                class=${classMap({
+					current: isCurrent,
+					disabled: this.disabled
+				})}
+                aria-label=${this.localize.term("pageNumber", item.page)}
+                aria-current=${ifDefined(isCurrent ? "page" : void 0)}
+                ?disabled=${ifDefined(isLink ? void 0 : this.disabled)}
+                tabindex=${ifDefined(this.disabled ? "-1" : void 0)}
+                @click=${() => this.changePage(item.page)}
+              >
+                ${this.localize.number(item.page, { useGrouping: true })}
+              </${tag}>
+            </li>
+          `;
+			}
+		});
+		return html$1`
+      <nav id="nav" part="nav" aria-label="${label}" @click=${this.handleNavClick}>
+        <ul id="list" part="list">
+          ${this.withoutNav ? "" : previousButton} ${content} ${this.withoutNav ? "" : nextButton}
+        </ul>
+      </nav>
+    `;
+	}
+};
+__decorate([property()], SigveloPagination.prototype, "label", void 0);
+__decorate([property({
+	attribute: "total-pages",
+	type: Number
+})], SigveloPagination.prototype, "totalPages", void 0);
+__decorate([property({
+	type: Number,
+	reflect: true
+})], SigveloPagination.prototype, "page", void 0);
+__decorate([property({
+	attribute: "siblings",
+	type: Number
+})], SigveloPagination.prototype, "siblings", void 0);
+__decorate([property({
+	attribute: "jump",
+	type: Number
+})], SigveloPagination.prototype, "jump", void 0);
+__decorate([property({ reflect: true })], SigveloPagination.prototype, "format", void 0);
+__decorate([property({ attribute: "link-formatter" })], SigveloPagination.prototype, "linkFormatter", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloPagination.prototype, "disabled", void 0);
+__decorate([property({ reflect: true })], SigveloPagination.prototype, "variant", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "without-nav",
+	reflect: true
+})], SigveloPagination.prototype, "withoutNav", void 0);
+customElements.define("sigvelo-pagination", SigveloPagination);
+//#endregion
+export { SigveloPagination as t };