@vonage/vivid 4.16.2 → 4.18.0

package/shared/definition37.cjs

@@ -1,100 +1,230 @@
 'use strict';
 
+const definition = require('./definition11.cjs');
 const vividElement = require('./vivid-element.cjs');
-const baseProgress = require('./base-progress.cjs');
-const when = require('./when.cjs');
+const enums = require('./enums.cjs');
+const slotted = require('./slotted.cjs');
 const classNames = require('./class-names.cjs');
+const ref = require('./ref.cjs');
+const children = require('./children.cjs');
+const repeat = require('./repeat.cjs');
+const when = require('./when.cjs');
 
-const styles = ":host{--_vvd-progress-ring-accent-firm-wrapper: var( --vvd-progress-ring-accent-firm );--_vvd-progress-ring-cta-firm-wrapper: var( --vvd-progress-ring-cta-firm );--_vvd-progress-ring-alert-firm-wrapper: var( --vvd-progress-ring-alert-firm );--_vvd-progress-ring-success-firm-wrapper: var( --vvd-progress-ring-success-firm )}.base{--vvd-progress-ring-accent-firm: var( --_vvd-progress-ring-accent-firm-wrapper, var(--vvd-progress-ring-accent-primary) );--vvd-progress-ring-cta-firm: var( --_vvd-progress-ring-cta-firm-wrapper, var(--vvd-progress-ring-cta-primary) );--vvd-progress-ring-alert-firm: var( --_vvd-progress-ring-alert-firm-wrapper, var(--vvd-progress-ring-alert-primary) );--vvd-progress-ring-success-firm: var( --_vvd-progress-ring-success-firm-wrapper, var(--vvd-progress-ring-success-primary) )}.base.connotation-cta{--_connotation-color-firm: var(--vvd-progress-ring-cta-firm, var(--vvd-color-cta-600))}.base.connotation-alert{--_connotation-color-firm: var(--vvd-progress-ring-alert-firm, var(--vvd-color-alert-600))}.base.connotation-success{--_connotation-color-firm: var(--vvd-progress-ring-success-firm, var(--vvd-color-success-600))}.base:not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-firm: var(--vvd-progress-ring-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_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.size--6{--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) }.base.size--5{--_size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--4{--_size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--3{--_size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--2{--_size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--1{--_size: calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-1{--_size: calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-2{--_size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-3{--_size: calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-4{--_size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-5{--_size: calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-1,.size-2,.size-3,.size-4,.size-5){--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base{align-items:center;block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none}.progress{width:100%;height:100%}.background{fill:none;stroke:transparent;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.indeterminate-indicator-1{animation:spin-infinite 2s linear infinite;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01px 43.97px;transform:rotate(0)}50%{stroke-dasharray:21.99px 21.99px;transform:rotate(450deg)}to{stroke-dasharray:.01px 43.97px;transform:rotate(1080deg)}}";
+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 = void 0 ;
+  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 = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
-class ProgressRing extends baseProgress.BaseProgress {
+const MAX_DIGITS_AND_PLACEHOLDERS = 7;
+const totalConverter = {
+  fromView: (value) => parseInt(value, 10),
+  toView: (value) => value.toString()
+};
+class Pagination extends vividElement.VividElement {
   constructor() {
-    super(...arguments);
-    this.ariaLabel = null;
+    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;
+    }
+    this.selectedIndex = 0;
+  }
+  selectedIndexChanged(oldValue, newValue) {
+    if (oldValue === void 0) return;
+    this.$emit("pagination-change", {
+      selectedIndex: newValue,
+      total: this.total,
+      oldIndex: oldValue
+    });
+  }
+  paginationButtonsChanged(_, newValue) {
+    newValue.forEach((button) => {
+      button.shadowRoot.querySelector("button").setAttribute("part", "button");
+    });
   }
 }
-__decorateClass([
-  vividElement.attr({ attribute: "aria-label" })
-], ProgressRing.prototype, "ariaLabel");
 __decorateClass([
   vividElement.attr
-], ProgressRing.prototype, "connotation");
+], Pagination.prototype, "size", 2);
 __decorateClass([
   vividElement.attr
-], ProgressRing.prototype, "size");
+], Pagination.prototype, "shape", 2);
+__decorateClass([
+  vividElement.observable
+], Pagination.prototype, "paginationButtons", 2);
+__decorateClass([
+  vividElement.observable
+], Pagination.prototype, "prevButton", 2);
+__decorateClass([
+  vividElement.observable
+], Pagination.prototype, "nextButton", 2);
+__decorateClass([
+  vividElement.attr({ attribute: "nav-icons", mode: "boolean" })
+], Pagination.prototype, "navIcons", 2);
+__decorateClass([
+  vividElement.volatile
+], Pagination.prototype, "pagesList", 1);
+__decorateClass([
+  vividElement.attr({ mode: "reflect", converter: totalConverter })
+], Pagination.prototype, "total", 2);
+__decorateClass([
+  vividElement.attr({
+    mode: "reflect",
+    converter: totalConverter,
+    attribute: "selected-index"
+  })
+], Pagination.prototype, "selectedIndex", 2);
 
-const getClasses = ({ connotation, size, paused }) => classNames.classNames(
-  "base",
-  ["disabled", !!paused],
-  [`connotation-${connotation}`, !!connotation],
-  [`size-${size}`, !!size]
-);
-const progressSegments = 44;
-const ProgressRingTemplate = vividElement.html`<template
-	role="${(x) => x.ariaLabel ? "presentation" : null}"
->
-	<div
-		role="progressbar"
-		aria-label="${(x) => x.ariaLabel}"
-		aria-valuenow="${(x) => x.value}"
-		aria-valuemin="${(x) => x.min}"
-		aria-valuemax="${(x) => x.max}"
-		class="${(x) => x.paused ? "paused" : ""} ${getClasses}"
-	>
-		${when.when(
-  (x) => typeof x.value === "number",
-  vividElement.html`
-				<svg class="progress" viewBox="0 0 16 16">
-					<circle class="background" cx="8px" cy="8px" r="7px"></circle>
-					<circle
-						class="determinate"
-						style="stroke-dasharray: ${(x) => progressSegments * x.percentComplete / 100}px ${progressSegments}px"
-						cx="8px"
-						cy="8px"
-						r="7px"
-					></circle>
-				</svg>
-			`
-)}
-		${when.when(
-  (x) => typeof x.value !== "number",
+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 = (_) => classNames.classNames("control");
+function getButtonAppearance(value, { parent }) {
+  return parent.selectedIndex === Number(value) - 1 ? "filled" : "ghost";
+}
+const paginationButtonRenderer = (buttonTag) => vividElement.html` ${when.when(
+  (value) => value !== "...",
   vividElement.html`
-				<svg class="progress" viewBox="0 0 16 16">
-					<circle class="background" cx="8px" cy="8px" r="7px"></circle>
-					<circle
-						class="indeterminate-indicator-1"
-						cx="8px"
-						cy="8px"
-						r="7px"
-					></circle>
-				</svg>
-			`
+		<${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-current="${(value, { parent }) => parent.selectedIndex === Number(value) - 1}"
+									@click="${handleSelection}"
+									@keydown="${handleKeyDown}">
+		</${buttonTag}>
+	`
 )}
-	</div>
-</template>`;
+${when.when(
+  (value) => value === "...",
+  vividElement.html` <div class="dots size-${(_, { parent: x }) => getPaginationSize(x)}">
+		...
+	</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(definition.Button);
+  const paginationButtonTemplate = paginationButtonRenderer(buttonTag);
+  return vividElement.html`
+	<div class="${getClasses}">
+		<${buttonTag} class="prev-button" ${ref.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--}"
+		></${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")}
+									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++}"
+		></${buttonTag}>
+</div>`;
+};
 
-const progressRingDefinition = vividElement.defineVividComponent(
-  "progress-ring",
-  ProgressRing,
-  ProgressRingTemplate,
-  [],
+const paginationDefinition = vividElement.defineVividComponent(
+  "pagination",
+  Pagination,
+  PaginationTemplate,
+  [definition.buttonDefinition],
   {
     styles
   }
 );
-const registerProgressRing = vividElement.createRegisterFunction(
-  progressRingDefinition
-);
+const registerPagination = vividElement.createRegisterFunction(paginationDefinition);
 
-exports.ProgressRing = ProgressRing;
-exports.progressRingDefinition = progressRingDefinition;
-exports.registerProgressRing = registerProgressRing;
+exports.Pagination = Pagination;
+exports.paginationDefinition = paginationDefinition;
+exports.registerPagination = registerPagination;

package/shared/definition37.js

@@ -1,96 +1,226 @@
-import { a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
-import { B as BaseProgress } from './base-progress.js';
-import { w as when } from './when.js';
+import { B as Button, b as buttonDefinition } from './definition11.js';
+import { V as VividElement, a as attr, o as observable, v as volatile, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { b as Size, S as Shape } from './enums.js';
+import { e as elements } from './slotted.js';
 import { c as classNames } from './class-names.js';
+import { r as ref } from './ref.js';
+import { c as children } from './children.js';
+import { r as repeat } from './repeat.js';
+import { w as when } from './when.js';
 
-const styles = ":host{--_vvd-progress-ring-accent-firm-wrapper: var( --vvd-progress-ring-accent-firm );--_vvd-progress-ring-cta-firm-wrapper: var( --vvd-progress-ring-cta-firm );--_vvd-progress-ring-alert-firm-wrapper: var( --vvd-progress-ring-alert-firm );--_vvd-progress-ring-success-firm-wrapper: var( --vvd-progress-ring-success-firm )}.base{--vvd-progress-ring-accent-firm: var( --_vvd-progress-ring-accent-firm-wrapper, var(--vvd-progress-ring-accent-primary) );--vvd-progress-ring-cta-firm: var( --_vvd-progress-ring-cta-firm-wrapper, var(--vvd-progress-ring-cta-primary) );--vvd-progress-ring-alert-firm: var( --_vvd-progress-ring-alert-firm-wrapper, var(--vvd-progress-ring-alert-primary) );--vvd-progress-ring-success-firm: var( --_vvd-progress-ring-success-firm-wrapper, var(--vvd-progress-ring-success-primary) )}.base.connotation-cta{--_connotation-color-firm: var(--vvd-progress-ring-cta-firm, var(--vvd-color-cta-600))}.base.connotation-alert{--_connotation-color-firm: var(--vvd-progress-ring-alert-firm, var(--vvd-color-alert-600))}.base.connotation-success{--_connotation-color-firm: var(--vvd-progress-ring-success-firm, var(--vvd-color-success-600))}.base:not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-firm: var(--vvd-progress-ring-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_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.size--6{--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) }.base.size--5{--_size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--4{--_size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--3{--_size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--2{--_size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--1{--_size: calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-1{--_size: calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-2{--_size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-3{--_size: calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-4{--_size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-5{--_size: calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-1,.size-2,.size-3,.size-4,.size-5){--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base{align-items:center;block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none}.progress{width:100%;height:100%}.background{fill:none;stroke:transparent;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.indeterminate-indicator-1{animation:spin-infinite 2s linear infinite;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01px 43.97px;transform:rotate(0)}50%{stroke-dasharray:21.99px 21.99px;transform:rotate(450deg)}to{stroke-dasharray:.01px 43.97px;transform:rotate(1080deg)}}";
+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 = void 0 ;
+  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 = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
-class ProgressRing extends BaseProgress {
+const MAX_DIGITS_AND_PLACEHOLDERS = 7;
+const totalConverter = {
+  fromView: (value) => parseInt(value, 10),
+  toView: (value) => value.toString()
+};
+class Pagination extends VividElement {
   constructor() {
-    super(...arguments);
-    this.ariaLabel = null;
+    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;
+    }
+    this.selectedIndex = 0;
+  }
+  selectedIndexChanged(oldValue, newValue) {
+    if (oldValue === void 0) return;
+    this.$emit("pagination-change", {
+      selectedIndex: newValue,
+      total: this.total,
+      oldIndex: oldValue
+    });
+  }
+  paginationButtonsChanged(_, newValue) {
+    newValue.forEach((button) => {
+      button.shadowRoot.querySelector("button").setAttribute("part", "button");
+    });
   }
 }
-__decorateClass([
-  attr({ attribute: "aria-label" })
-], ProgressRing.prototype, "ariaLabel");
 __decorateClass([
   attr
-], ProgressRing.prototype, "connotation");
+], Pagination.prototype, "size", 2);
 __decorateClass([
   attr
-], ProgressRing.prototype, "size");
+], 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 getClasses = ({ connotation, size, paused }) => classNames(
-  "base",
-  ["disabled", !!paused],
-  [`connotation-${connotation}`, !!connotation],
-  [`size-${size}`, !!size]
-);
-const progressSegments = 44;
-const ProgressRingTemplate = html`<template
-	role="${(x) => x.ariaLabel ? "presentation" : null}"
->
-	<div
-		role="progressbar"
-		aria-label="${(x) => x.ariaLabel}"
-		aria-valuenow="${(x) => x.value}"
-		aria-valuemin="${(x) => x.min}"
-		aria-valuemax="${(x) => x.max}"
-		class="${(x) => x.paused ? "paused" : ""} ${getClasses}"
-	>
-		${when(
-  (x) => typeof x.value === "number",
-  html`
-				<svg class="progress" viewBox="0 0 16 16">
-					<circle class="background" cx="8px" cy="8px" r="7px"></circle>
-					<circle
-						class="determinate"
-						style="stroke-dasharray: ${(x) => progressSegments * x.percentComplete / 100}px ${progressSegments}px"
-						cx="8px"
-						cy="8px"
-						r="7px"
-					></circle>
-				</svg>
-			`
-)}
-		${when(
-  (x) => typeof x.value !== "number",
+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`
-				<svg class="progress" viewBox="0 0 16 16">
-					<circle class="background" cx="8px" cy="8px" r="7px"></circle>
-					<circle
-						class="indeterminate-indicator-1"
-						cx="8px"
-						cy="8px"
-						r="7px"
-					></circle>
-				</svg>
-			`
+		<${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-current="${(value, { parent }) => parent.selectedIndex === Number(value) - 1}"
+									@click="${handleSelection}"
+									@keydown="${handleKeyDown}">
+		</${buttonTag}>
+	`
 )}
-	</div>
-</template>`;
+${when(
+  (value) => value === "...",
+  html` <div class="dots size-${(_, { parent: x }) => getPaginationSize(x)}">
+		...
+	</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 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--}"
+		></${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")}
+									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++}"
+		></${buttonTag}>
+</div>`;
+};
 
-const progressRingDefinition = defineVividComponent(
-  "progress-ring",
-  ProgressRing,
-  ProgressRingTemplate,
-  [],
+const paginationDefinition = defineVividComponent(
+  "pagination",
+  Pagination,
+  PaginationTemplate,
+  [buttonDefinition],
   {
     styles
   }
 );
-const registerProgressRing = createRegisterFunction(
-  progressRingDefinition
-);
+const registerPagination = createRegisterFunction(paginationDefinition);
 
-export { ProgressRing as P, progressRingDefinition as p, registerProgressRing as r };
+export { Pagination as P, paginationDefinition as p, registerPagination as r };