@vonage/vivid 4.25.0 → 4.26.0

package/shared/definition21.cjs

@@ -183,10 +183,10 @@ function renderTextField(textFieldTag, buttonTag) {
          ${when.when(
     (x) => x.value && x.value.length && x.value.length > 0,
     vividElement.html`<${buttonTag}
-                				slot="action-items"
+                slot="action-items"
 								size='super-condensed'
 								icon="backspace-line"
-								aria-label="${(x) => x.deleteAriaLabel || x.locale.dialPad.deleteLabel}"
+								aria-label="${(x) => x.deleteAriaLabel || x.locale.dialPad.deleteButtonLabel}"
 								appearance='ghost'
 								?disabled="${(x) => x.disabled || x.callActive}"
 								@click="${(x) => deleteLastCharacter(x)}">

package/shared/definition21.js

@@ -181,10 +181,10 @@ function renderTextField(textFieldTag, buttonTag) {
          ${when(
     (x) => x.value && x.value.length && x.value.length > 0,
     html`<${buttonTag}
-                				slot="action-items"
+                slot="action-items"
 								size='super-condensed'
 								icon="backspace-line"
-								aria-label="${(x) => x.deleteAriaLabel || x.locale.dialPad.deleteLabel}"
+								aria-label="${(x) => x.deleteAriaLabel || x.locale.dialPad.deleteButtonLabel}"
 								appearance='ghost'
 								?disabled="${(x) => x.disabled || x.callActive}"
 								@click="${(x) => deleteLastCharacter(x)}">

package/shared/definition22.cjs

@@ -11,7 +11,7 @@ const classNames = require('./class-names.cjs');
 const when = require('./when.cjs');
 const slotted = require('./slotted.cjs');
 
-const styles = ".base{white-space:initial;box-sizing:border-box;padding:0;border:none;border-radius:8px;background-color:transparent;color:var(--vvd-color-canvas-text);max-block-size:var(--dialog-max-block-size, calc(100vh - 64px) );max-inline-size:var(--dialog-max-inline-size, var(--_dialog-default-max-inline-size));min-inline-size:var(--dialog-min-inline-size, 280px)}@media not all and (width >= 600px){.base{--_dialog-default-max-inline-size: 90vw}}@media (width >= 600px){.base{--_dialog-default-max-inline-size: 560px}}.base:not(.modal){z-index:var(--dialog-z-index, 1)}.base.modal{box-shadow:0 4px 20px #00000059}.base.modal::backdrop{background-color:var(--vvd-color-canvas-text, currentColor);opacity:.5}.base:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.main-wrapper{display:flex;box-sizing:border-box;flex-direction:column;gap:24px;padding-block:24px}.main-wrapper>*{box-sizing:border-box}.header{display:grid;align-items:flex-start;justify-content:space-between;inline-size:100%;padding-inline:24px}.base:not(.icon-placement-side) .header{grid-template-columns:1fr auto;grid-template-rows:auto auto auto}.base:not(.icon-placement-side) .header .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));grid-column:1/2;grid-row:1/2;line-height:1;margin-block-end:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header{grid-template-columns:auto 1fr auto;grid-template-rows:auto auto}.base.icon-placement-side .header .icon{font-size:calc(1px*(28 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header ::slotted(*),.base.icon-placement-side .header .icon{grid-column:1/2;grid-row:1/-1;margin-inline-end:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.header.border{position:relative}.header.border:after{position:absolute;bottom:-24px;left:0;background-color:var(--vvd-color-neutral-200);block-size:1px;content:\"\";inline-size:100%}.base.hide-body .header.border:after{content:none}.body:not(.full-width){padding-inline:24px}.hide-body .body{display:none}.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:24px}.hide-footer .footer{display:none}.footer .actions{display:flex;align-self:flex-end;gap:8px}.dismiss-button{flex-shrink:0;grid-column:-2/-1;grid-row:1/-1;margin-block-start:-8px;margin-inline:4px -8px}.headline{margin:0;font:var(--vvd-typography-heading-4)}.subtitle{margin:0;font:var(--vvd-typography-base)}slot[name=main]{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}slot[name=main]{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}slot[name=main] ::-webkit-scrollbar{width:4px}slot[name=main] ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}slot[name=main] ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}slot[name=main]{display:block;overflow:hidden auto;max-width:inherit;max-height:inherit;border-radius:inherit}";
+const styles = ".base{white-space:initial;box-sizing:border-box;padding:0;border:none;border-radius:8px;background-color:transparent;color:var(--vvd-color-canvas-text);max-inline-size:var(--dialog-max-inline-size, var(--_dialog-default-max-inline-size));min-inline-size:var(--dialog-min-inline-size, 280px)}@media not all and (width >= 600px){.base{--_dialog-default-max-inline-size: 90vw}}@media (width >= 600px){.base{--_dialog-default-max-inline-size: 560px}}.base:not(.scrollable-body){max-block-size:var(--dialog-max-block-size, calc(100vh - 64px) )}.base:not(.modal){z-index:var(--dialog-z-index, 1);inset-block:var(--dialog-inset-block, auto);inset-inline:var(--dialog-inset-inline, 0)}.base.modal{box-shadow:0 4px 20px #00000059}.base.modal::backdrop{background-color:var(--vvd-color-canvas-text, currentColor);opacity:.5}.base:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.main-wrapper{display:flex;box-sizing:border-box;flex-direction:column;gap:24px;padding-block:24px}.main-wrapper>*{box-sizing:border-box}.header{display:grid;align-items:flex-start;justify-content:space-between;inline-size:100%;padding-inline:24px}.base:not(.icon-placement-side) .header{grid-template-columns:1fr auto;grid-template-rows:auto auto auto}.base:not(.icon-placement-side) .header .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));grid-column:1/2;grid-row:1/2;line-height:1;margin-block-end:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header{grid-template-columns:auto 1fr auto;grid-template-rows:auto auto}.base.icon-placement-side .header .icon{font-size:calc(1px*(28 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header ::slotted(*),.base.icon-placement-side .header .icon{grid-column:1/2;grid-row:1/-1;margin-inline-end:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.header.border{position:relative}.header.border:after{position:absolute;bottom:-24px;left:0;background-color:var(--vvd-color-neutral-200);block-size:1px;content:\"\";inline-size:100%}.base.hide-body .header.border:after{content:none}.body:not(.full-width){padding-inline:24px}.hide-body .body{display:none}.scrollable-body .body{overflow:hidden auto;max-block-size:var(--dialog-body-max-block-size, 300px);--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.scrollable-body .body{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.scrollable-body .body ::-webkit-scrollbar{width:4px}.scrollable-body .body ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.scrollable-body .body ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:24px}.hide-footer .footer{display:none}.footer .actions{display:flex;align-self:flex-end;gap:8px}.dismiss-button{flex-shrink:0;grid-column:-2/-1;grid-row:1/-1;margin-block-start:-8px;margin-inline:4px -8px}.headline{margin:0;font:var(--vvd-typography-heading-4)}.subtitle{margin:0;font:var(--vvd-typography-base)}slot[name=main]{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}slot[name=main]{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}slot[name=main] ::-webkit-scrollbar{width:4px}slot[name=main] ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}slot[name=main] ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}slot[name=main]{display:block;overflow:hidden auto;max-width:inherit;max-height:inherit;border-radius:inherit}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -33,6 +33,7 @@ class Dialog extends localized.Localized(delegatesAria.DelegatesAria(vividElemen
     this.noDismissButton = false;
     this.nonDismissible = false;
     this.modal = false;
+    this.scrollableBody = false;
     this._openedAsModal = false;
     this.#handleScrimClick = (event) => {
       if (event.target !== this.#dialog || !this.#isDismissibleVia("light-dismiss")) {
@@ -227,6 +228,9 @@ __decorateClass([
 __decorateClass([
   vividElement.attr({ mode: "boolean" })
 ], Dialog.prototype, "modal");
+__decorateClass([
+  vividElement.attr({ mode: "boolean", attribute: "scrollable-body" })
+], Dialog.prototype, "scrollableBody");
 __decorateClass([
   vividElement.observable
 ], Dialog.prototype, "_openedAsModal");
@@ -245,7 +249,8 @@ const getClasses = ({
   bodySlottedContent,
   footerSlottedContent,
   actionItemsSlottedContent,
-  _openedAsModal
+  _openedAsModal,
+  scrollableBody
 }) => classNames.classNames(
   "base",
   [`icon-placement-${iconPlacement}`, Boolean(iconPlacement)],
@@ -254,7 +259,8 @@ const getClasses = ({
     "hide-footer",
     !(footerSlottedContent?.length || actionItemsSlottedContent?.length)
   ],
-  ["modal", _openedAsModal]
+  ["modal", _openedAsModal],
+  ["scrollable-body", Boolean(scrollableBody)]
 );
 function icon(iconTag) {
   return vividElement.html`

package/shared/definition22.js

@@ -9,7 +9,7 @@ import { c as classNames } from './class-names.js';
 import { w as when } from './when.js';
 import { s as slotted } from './slotted.js';
 
-const styles = ".base{white-space:initial;box-sizing:border-box;padding:0;border:none;border-radius:8px;background-color:transparent;color:var(--vvd-color-canvas-text);max-block-size:var(--dialog-max-block-size, calc(100vh - 64px) );max-inline-size:var(--dialog-max-inline-size, var(--_dialog-default-max-inline-size));min-inline-size:var(--dialog-min-inline-size, 280px)}@media not all and (width >= 600px){.base{--_dialog-default-max-inline-size: 90vw}}@media (width >= 600px){.base{--_dialog-default-max-inline-size: 560px}}.base:not(.modal){z-index:var(--dialog-z-index, 1)}.base.modal{box-shadow:0 4px 20px #00000059}.base.modal::backdrop{background-color:var(--vvd-color-canvas-text, currentColor);opacity:.5}.base:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.main-wrapper{display:flex;box-sizing:border-box;flex-direction:column;gap:24px;padding-block:24px}.main-wrapper>*{box-sizing:border-box}.header{display:grid;align-items:flex-start;justify-content:space-between;inline-size:100%;padding-inline:24px}.base:not(.icon-placement-side) .header{grid-template-columns:1fr auto;grid-template-rows:auto auto auto}.base:not(.icon-placement-side) .header .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));grid-column:1/2;grid-row:1/2;line-height:1;margin-block-end:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header{grid-template-columns:auto 1fr auto;grid-template-rows:auto auto}.base.icon-placement-side .header .icon{font-size:calc(1px*(28 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header ::slotted(*),.base.icon-placement-side .header .icon{grid-column:1/2;grid-row:1/-1;margin-inline-end:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.header.border{position:relative}.header.border:after{position:absolute;bottom:-24px;left:0;background-color:var(--vvd-color-neutral-200);block-size:1px;content:\"\";inline-size:100%}.base.hide-body .header.border:after{content:none}.body:not(.full-width){padding-inline:24px}.hide-body .body{display:none}.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:24px}.hide-footer .footer{display:none}.footer .actions{display:flex;align-self:flex-end;gap:8px}.dismiss-button{flex-shrink:0;grid-column:-2/-1;grid-row:1/-1;margin-block-start:-8px;margin-inline:4px -8px}.headline{margin:0;font:var(--vvd-typography-heading-4)}.subtitle{margin:0;font:var(--vvd-typography-base)}slot[name=main]{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}slot[name=main]{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}slot[name=main] ::-webkit-scrollbar{width:4px}slot[name=main] ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}slot[name=main] ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}slot[name=main]{display:block;overflow:hidden auto;max-width:inherit;max-height:inherit;border-radius:inherit}";
+const styles = ".base{white-space:initial;box-sizing:border-box;padding:0;border:none;border-radius:8px;background-color:transparent;color:var(--vvd-color-canvas-text);max-inline-size:var(--dialog-max-inline-size, var(--_dialog-default-max-inline-size));min-inline-size:var(--dialog-min-inline-size, 280px)}@media not all and (width >= 600px){.base{--_dialog-default-max-inline-size: 90vw}}@media (width >= 600px){.base{--_dialog-default-max-inline-size: 560px}}.base:not(.scrollable-body){max-block-size:var(--dialog-max-block-size, calc(100vh - 64px) )}.base:not(.modal){z-index:var(--dialog-z-index, 1);inset-block:var(--dialog-inset-block, auto);inset-inline:var(--dialog-inset-inline, 0)}.base.modal{box-shadow:0 4px 20px #00000059}.base.modal::backdrop{background-color:var(--vvd-color-canvas-text, currentColor);opacity:.5}.base:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.main-wrapper{display:flex;box-sizing:border-box;flex-direction:column;gap:24px;padding-block:24px}.main-wrapper>*{box-sizing:border-box}.header{display:grid;align-items:flex-start;justify-content:space-between;inline-size:100%;padding-inline:24px}.base:not(.icon-placement-side) .header{grid-template-columns:1fr auto;grid-template-rows:auto auto auto}.base:not(.icon-placement-side) .header .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));grid-column:1/2;grid-row:1/2;line-height:1;margin-block-end:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header{grid-template-columns:auto 1fr auto;grid-template-rows:auto auto}.base.icon-placement-side .header .icon{font-size:calc(1px*(28 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header ::slotted(*),.base.icon-placement-side .header .icon{grid-column:1/2;grid-row:1/-1;margin-inline-end:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.header.border{position:relative}.header.border:after{position:absolute;bottom:-24px;left:0;background-color:var(--vvd-color-neutral-200);block-size:1px;content:\"\";inline-size:100%}.base.hide-body .header.border:after{content:none}.body:not(.full-width){padding-inline:24px}.hide-body .body{display:none}.scrollable-body .body{overflow:hidden auto;max-block-size:var(--dialog-body-max-block-size, 300px);--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.scrollable-body .body{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.scrollable-body .body ::-webkit-scrollbar{width:4px}.scrollable-body .body ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.scrollable-body .body ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:24px}.hide-footer .footer{display:none}.footer .actions{display:flex;align-self:flex-end;gap:8px}.dismiss-button{flex-shrink:0;grid-column:-2/-1;grid-row:1/-1;margin-block-start:-8px;margin-inline:4px -8px}.headline{margin:0;font:var(--vvd-typography-heading-4)}.subtitle{margin:0;font:var(--vvd-typography-base)}slot[name=main]{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}slot[name=main]{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}slot[name=main] ::-webkit-scrollbar{width:4px}slot[name=main] ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}slot[name=main] ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}slot[name=main]{display:block;overflow:hidden auto;max-width:inherit;max-height:inherit;border-radius:inherit}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -31,6 +31,7 @@ class Dialog extends Localized(DelegatesAria(VividElement)) {
     this.noDismissButton = false;
     this.nonDismissible = false;
     this.modal = false;
+    this.scrollableBody = false;
     this._openedAsModal = false;
     this.#handleScrimClick = (event) => {
       if (event.target !== this.#dialog || !this.#isDismissibleVia("light-dismiss")) {
@@ -225,6 +226,9 @@ __decorateClass([
 __decorateClass([
   attr({ mode: "boolean" })
 ], Dialog.prototype, "modal");
+__decorateClass([
+  attr({ mode: "boolean", attribute: "scrollable-body" })
+], Dialog.prototype, "scrollableBody");
 __decorateClass([
   observable
 ], Dialog.prototype, "_openedAsModal");
@@ -243,7 +247,8 @@ const getClasses = ({
   bodySlottedContent,
   footerSlottedContent,
   actionItemsSlottedContent,
-  _openedAsModal
+  _openedAsModal,
+  scrollableBody
 }) => classNames(
   "base",
   [`icon-placement-${iconPlacement}`, Boolean(iconPlacement)],
@@ -252,7 +257,8 @@ const getClasses = ({
     "hide-footer",
     !(footerSlottedContent?.length || actionItemsSlottedContent?.length)
   ],
-  ["modal", _openedAsModal]
+  ["modal", _openedAsModal],
+  ["scrollable-body", Boolean(scrollableBody)]
 );
 function icon(iconTag) {
   return html`

package/shared/definition28.cjs

@@ -135,7 +135,7 @@ var memoizeWith = /*#__PURE__*/_has._curry2(function memoizeWith(keyGen, fn) {
 });
 
 const ICONS_BASE_URL = "https://icon.resources.vonage.com";
-const ICONS_VERSION = "4.6.5";
+const ICONS_VERSION = "4.6.6";
 
 const numberConverter = {
   toView(value) {

package/shared/definition28.js

@@ -133,7 +133,7 @@ var memoizeWith = /*#__PURE__*/_curry2(function memoizeWith(keyGen, fn) {
 });
 
 const ICONS_BASE_URL = "https://icon.resources.vonage.com";
-const ICONS_VERSION = "4.6.5";
+const ICONS_VERSION = "4.6.6";
 
 const numberConverter = {
   toView(value) {

package/shared/definition3.cjs

@@ -4,7 +4,7 @@ const vividElement = require('./vivid-element.cjs');
 const delegatesAria = require('./delegates-aria.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = ":host{display:inline-block}.base{--_connotation-color-primary: var(--vvd-action-group-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-action-group-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-action-group-accent-faint, var(--vvd-color-neutral-50))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);inline-size:inherit;vertical-align:middle}.base:before{position:absolute;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inset:0;pointer-events:none}.base:not(.tight){padding:4px;column-gap:4px}.base:not(.shape-pill){border-radius:8px}.base.shape-pill{border-radius:24px}::slotted([role=separator]){align-self:stretch;margin-block:4px}";
+const styles = ":host{display:inline-block}.base{--_connotation-color-primary: var(--vvd-action-group-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-action-group-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-action-group-accent-faint, var(--vvd-color-neutral-50))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);inline-size:inherit;vertical-align:middle}.base:before{position:absolute;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inset:0;pointer-events:none}.base:not(.tight){padding:4px;column-gap:4px}.base:not(.shape-pill){border-radius:8px}.base.shape-pill{border-radius:24px}::slotted([data-vvd-component=divider]){align-self:stretch;margin-block:4px}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/shared/definition3.js

@@ -2,7 +2,7 @@ import { V as VividElement, a as attr, h as html, d as createRegisterFunction, f
 import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ":host{display:inline-block}.base{--_connotation-color-primary: var(--vvd-action-group-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-action-group-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-action-group-accent-faint, var(--vvd-color-neutral-50))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);inline-size:inherit;vertical-align:middle}.base:before{position:absolute;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inset:0;pointer-events:none}.base:not(.tight){padding:4px;column-gap:4px}.base:not(.shape-pill){border-radius:8px}.base.shape-pill{border-radius:24px}::slotted([role=separator]){align-self:stretch;margin-block:4px}";
+const styles = ":host{display:inline-block}.base{--_connotation-color-primary: var(--vvd-action-group-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-action-group-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-action-group-accent-faint, var(--vvd-color-neutral-50))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);inline-size:inherit;vertical-align:middle}.base:before{position:absolute;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inset:0;pointer-events:none}.base:not(.tight){padding:4px;column-gap:4px}.base:not(.shape-pill){border-radius:8px}.base.shape-pill{border-radius:24px}::slotted([data-vvd-component=divider]){align-self:stretch;margin-block:4px}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/shared/definition31.cjs

@@ -12,7 +12,7 @@ const ref = require('./ref.cjs');
 const classNames = require('./class-names.cjs');
 const slotted = require('./slotted.cjs');
 
-const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.base{display:flex;overflow:hidden auto;box-sizing:border-box;flex-direction:column;gap:8px;inline-size:max-content;max-block-size:var(--menu-block-size, 408px);min-inline-size:var(--menu-min-inline-size);padding-block:8px}@media not all and (width >= 600px){.base{max-inline-size:var(--menu-max-inline-size, 300px)}}@media (width >= 600px){.base{max-inline-size:var(--menu-max-inline-size)}}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[role=menuitem]:focus-visible){box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;display:block}.header{padding-block-start:4px;padding-inline:12px}.hide-header .header{display:none}.body{display:flex;flex-direction:column;row-gap:1px}.hide-body .body{display:none}.action-items{display:flex;justify-content:flex-end;gap:8px;padding-block-end:4px;padding-inline:12px}.hide-actions .action-items{display:none}";
+const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.base{display:flex;overflow:hidden auto;box-sizing:border-box;flex-direction:column;gap:8px;inline-size:max-content;max-block-size:var(--menu-block-size, 408px);min-inline-size:var(--menu-min-inline-size);padding-block:8px}@media not all and (width >= 600px){.base{max-inline-size:var(--menu-max-inline-size, 300px)}}@media (width >= 600px){.base{max-inline-size:var(--menu-max-inline-size)}}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[data-vvd-component=menuitem]:focus-visible){box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;display:block}.header{padding-block-start:4px;padding-inline:12px}.hide-header .header{display:none}.body{display:flex;flex-direction:column;row-gap:1px}.hide-body .body{display:none}.action-items{display:flex;justify-content:flex-end;gap:8px;padding-block-end:4px;padding-inline:12px}.hide-actions .action-items{display:none}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/shared/definition31.js

@@ -10,7 +10,7 @@ import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
 import { s as slotted } from './slotted.js';
 
-const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.base{display:flex;overflow:hidden auto;box-sizing:border-box;flex-direction:column;gap:8px;inline-size:max-content;max-block-size:var(--menu-block-size, 408px);min-inline-size:var(--menu-min-inline-size);padding-block:8px}@media not all and (width >= 600px){.base{max-inline-size:var(--menu-max-inline-size, 300px)}}@media (width >= 600px){.base{max-inline-size:var(--menu-max-inline-size)}}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[role=menuitem]:focus-visible){box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;display:block}.header{padding-block-start:4px;padding-inline:12px}.hide-header .header{display:none}.body{display:flex;flex-direction:column;row-gap:1px}.hide-body .body{display:none}.action-items{display:flex;justify-content:flex-end;gap:8px;padding-block-end:4px;padding-inline:12px}.hide-actions .action-items{display:none}";
+const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.base{display:flex;overflow:hidden auto;box-sizing:border-box;flex-direction:column;gap:8px;inline-size:max-content;max-block-size:var(--menu-block-size, 408px);min-inline-size:var(--menu-min-inline-size);padding-block:8px}@media not all and (width >= 600px){.base{max-inline-size:var(--menu-max-inline-size, 300px)}}@media (width >= 600px){.base{max-inline-size:var(--menu-max-inline-size)}}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[data-vvd-component=menuitem]:focus-visible){box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;display:block}.header{padding-block-start:4px;padding-inline:12px}.hide-header .header{display:none}.body{display:flex;flex-direction:column;row-gap:1px}.hide-body .body{display:none}.action-items{display:flex;justify-content:flex-end;gap:8px;padding-block-end:4px;padding-inline:12px}.hide-actions .action-items{display:none}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/shared/definition32.cjs

@@ -92,7 +92,7 @@ const NavDisclosureTemplate = (context) => {
 			${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)}
 			${(x) => x.label}
 			<slot name="meta"></slot>
-			<${iconTag} class="toggleIcon" name=${(x) => x.open ? "chevron-up-solid" : "chevron-down-solid"}
+			<${iconTag} class="toggleIcon" name=${(x) => x.open ? "chevron-up-line" : "chevron-down-line"}
 				aria-hidden="true"></${iconTag}>
 		</summary>
 		<div class="content" id="disclosure-content">

package/shared/definition32.js

@@ -90,7 +90,7 @@ const NavDisclosureTemplate = (context) => {
 			${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
 			${(x) => x.label}
 			<slot name="meta"></slot>
-			<${iconTag} class="toggleIcon" name=${(x) => x.open ? "chevron-up-solid" : "chevron-down-solid"}
+			<${iconTag} class="toggleIcon" name=${(x) => x.open ? "chevron-up-line" : "chevron-down-line"}
 				aria-hidden="true"></${iconTag}>
 		</summary>
 		<div class="content" id="disclosure-content">

package/shared/definition36.cjs

@@ -1,10 +1,11 @@
 'use strict';
 
-const definition = require('./definition11.cjs');
-const definition$1 = require('./definition23.cjs');
-const vividElement = require('./vivid-element.cjs');
-const definition$2 = require('./definition28.cjs');
+const definition$1 = require('./definition11.cjs');
+const definition$2 = require('./definition23.cjs');
+const definition = require('./definition66.cjs');
+const definition$3 = require('./definition28.cjs');
 const mixins = require('./mixins.cjs');
+const vividElement = require('./vivid-element.cjs');
 const delegatesAria = require('./delegates-aria.cjs');
 const formAssociated = require('./form-associated.cjs');
 const withErrorText = require('./with-error-text.cjs');
@@ -38,6 +39,9 @@ function makeStep(element, direction) {
   const value = parseFloat(element.value);
   const stepUpValue = !isNaN(value) ? value + direction * element.step : element.min > 0 ? element.min : element.max < 0 ? element.max : !element.min ? direction * element.step : 0;
   element.value = Number(stepUpValue.toFixed(12)).toString();
+  element._updatedValueAnnouncement = element.locale.numberField.updatedValueAnnouncement(
+    element._presentationValue
+  );
 }
 const buildNumberPatterns = (decimalSeparator) => {
   const ds = decimalSeparator.source;
@@ -76,6 +80,7 @@ class NumberField extends mixins.WithFeedback(
      */
     this.isUserInput = false;
     this._presentationValue = "";
+    this._updatedValueAnnouncement = "";
     this.incrementButtonAriaLabel = null;
     this.decrementButtonAriaLabel = null;
   }
@@ -281,6 +286,9 @@ __decorateClass([
 __decorateClass([
   vividElement.observable
 ], NumberField.prototype, "_presentationValue");
+__decorateClass([
+  vividElement.observable
+], NumberField.prototype, "_updatedValueAnnouncement");
 __decorateClass([
   vividElement.attr({ attribute: "increment-button-aria-label" })
 ], NumberField.prototype, "incrementButtonAriaLabel");
@@ -332,32 +340,32 @@ function getTabIndex(numberField) {
   return numberField.disabled || numberField.readOnly ? "-1" : null;
 }
 function numberControlButtons(context) {
-  const buttonTag = context.tagFor(definition.Button);
+  const buttonTag = context.tagFor(definition$1.Button);
   const dividerTag = context.tagFor(divider.Divider);
   return vividElement.html`
-			<div class="control-buttons"
-			     ?inert="${(x) => x.disabled || x.readOnly}">
-				<${buttonTag} id="subtract" icon="minus-line"
-								?disabled="${(x) => x.disabled || x.readOnly}"
-								aria-label=${(x) => x.decrementButtonAriaLabel || x.locale.numberField.decrementButtonLabel}
-					            shape="${setControlButtonShape}"
-								type="button"
-					            size="${(x) => x.scale === "condensed" ? "super-condensed" : "condensed"}"
-								tabindex="${getTabIndex}"
-					            @click="${(x) => x.stepDown()}"></${buttonTag}>
-				<${dividerTag} class="divider" orientation="vertical"></${dividerTag}>
-				<${buttonTag} id="add" icon="plus-line"
-								?disabled="${(x) => x.disabled || x.readOnly}"
-								aria-label=${(x) => x.incrementButtonAriaLabel || x.locale.numberField.incrementButtonLabel}
-					            shape="${setControlButtonShape}"
-								type="button"
-					            size="${(x) => x.scale === "condensed" ? "super-condensed" : "condensed"}"
-								tabindex="${getTabIndex}"
-					            @click="${(x) => x.stepUp()}"></${buttonTag}>
-		    </div>
+		<div class="control-buttons" ?inert="${(x) => x.disabled || x.readOnly}">
+			<${buttonTag} id="subtract" icon="minus-line"
+				?disabled="${(x) => x.disabled || x.readOnly}"
+				aria-label=${(x) => x.decrementButtonAriaLabel || x.locale.numberField.decrementButtonLabel(x.step)}
+				shape="${setControlButtonShape}"
+				type="button"
+				size="${(x) => x.scale === "condensed" ? "super-condensed" : "condensed"}"
+				tabindex="${getTabIndex}"
+				@click="${(x) => x.stepDown()}"></${buttonTag}>
+			<${dividerTag} class="divider" orientation="vertical"></${dividerTag}>
+			<${buttonTag} id="add" icon="plus-line"
+				?disabled="${(x) => x.disabled || x.readOnly}"
+				aria-label=${(x) => x.incrementButtonAriaLabel || x.locale.numberField.incrementButtonLabel(x.step)}
+				shape="${setControlButtonShape}"
+				type="button"
+				size="${(x) => x.scale === "condensed" ? "super-condensed" : "condensed"}"
+				tabindex="${getTabIndex}"
+				@click="${(x) => x.stepUp()}"></${buttonTag}>
+			</div>
 	`;
 }
 const NumberFieldTemplate = (context) => {
+  const visuallyHiddenTag = context.tagFor(definition.VisuallyHidden);
   return vividElement.html`
 		<div class="base ${getStateClasses}">
 			${when.when((x) => x.label, renderLabel())}
@@ -391,6 +399,8 @@ const NumberFieldTemplate = (context) => {
 				${() => numberControlButtons(context)}
 			</div>
 			${(x) => x._getFeedbackTemplate(context)}
+			<${visuallyHiddenTag} id="value-announcement" role="status" aria-atomic="true">
+				${(x) => x._updatedValueAnnouncement}</${visuallyHiddenTag}>
 		</div>
 	`;
 };
@@ -400,10 +410,11 @@ const numberFieldDefinition = vividElement.defineVividComponent(
   NumberField,
   NumberFieldTemplate,
   [
-    definition.buttonDefinition,
-    definition$1.dividerDefinition,
-    definition$2.iconDefinition,
-    mixins.feedbackMessageDefinition
+    definition$1.buttonDefinition,
+    definition$2.dividerDefinition,
+    definition$3.iconDefinition,
+    mixins.feedbackMessageDefinition,
+    definition.visuallyHiddenDefinition
   ],
   {
     styles,

package/shared/definition36.js

@@ -1,8 +1,9 @@
 import { B as Button, b as buttonDefinition } from './definition11.js';
 import { d as dividerDefinition } from './definition23.js';
-import { D as DOM, V as VividElement, a as attr, n as nullableNumberConverter, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { V as VisuallyHidden, v as visuallyHiddenDefinition } from './definition66.js';
 import { i as iconDefinition } from './definition28.js';
 import { a as WithFeedback, f as feedbackMessageDefinition } from './mixins.js';
+import { D as DOM, V as VividElement, a as attr, n as nullableNumberConverter, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
 import { F as FormAssociated } from './form-associated.js';
 import { W as WithErrorText } from './with-error-text.js';
@@ -36,6 +37,9 @@ function makeStep(element, direction) {
   const value = parseFloat(element.value);
   const stepUpValue = !isNaN(value) ? value + direction * element.step : element.min > 0 ? element.min : element.max < 0 ? element.max : !element.min ? direction * element.step : 0;
   element.value = Number(stepUpValue.toFixed(12)).toString();
+  element._updatedValueAnnouncement = element.locale.numberField.updatedValueAnnouncement(
+    element._presentationValue
+  );
 }
 const buildNumberPatterns = (decimalSeparator) => {
   const ds = decimalSeparator.source;
@@ -74,6 +78,7 @@ class NumberField extends WithFeedback(
      */
     this.isUserInput = false;
     this._presentationValue = "";
+    this._updatedValueAnnouncement = "";
     this.incrementButtonAriaLabel = null;
     this.decrementButtonAriaLabel = null;
   }
@@ -279,6 +284,9 @@ __decorateClass([
 __decorateClass([
   observable
 ], NumberField.prototype, "_presentationValue");
+__decorateClass([
+  observable
+], NumberField.prototype, "_updatedValueAnnouncement");
 __decorateClass([
   attr({ attribute: "increment-button-aria-label" })
 ], NumberField.prototype, "incrementButtonAriaLabel");
@@ -333,29 +341,29 @@ function numberControlButtons(context) {
   const buttonTag = context.tagFor(Button);
   const dividerTag = context.tagFor(Divider);
   return html`
-			<div class="control-buttons"
-			     ?inert="${(x) => x.disabled || x.readOnly}">
-				<${buttonTag} id="subtract" icon="minus-line"
-								?disabled="${(x) => x.disabled || x.readOnly}"
-								aria-label=${(x) => x.decrementButtonAriaLabel || x.locale.numberField.decrementButtonLabel}
-					            shape="${setControlButtonShape}"
-								type="button"
-					            size="${(x) => x.scale === "condensed" ? "super-condensed" : "condensed"}"
-								tabindex="${getTabIndex}"
-					            @click="${(x) => x.stepDown()}"></${buttonTag}>
-				<${dividerTag} class="divider" orientation="vertical"></${dividerTag}>
-				<${buttonTag} id="add" icon="plus-line"
-								?disabled="${(x) => x.disabled || x.readOnly}"
-								aria-label=${(x) => x.incrementButtonAriaLabel || x.locale.numberField.incrementButtonLabel}
-					            shape="${setControlButtonShape}"
-								type="button"
-					            size="${(x) => x.scale === "condensed" ? "super-condensed" : "condensed"}"
-								tabindex="${getTabIndex}"
-					            @click="${(x) => x.stepUp()}"></${buttonTag}>
-		    </div>
+		<div class="control-buttons" ?inert="${(x) => x.disabled || x.readOnly}">
+			<${buttonTag} id="subtract" icon="minus-line"
+				?disabled="${(x) => x.disabled || x.readOnly}"
+				aria-label=${(x) => x.decrementButtonAriaLabel || x.locale.numberField.decrementButtonLabel(x.step)}
+				shape="${setControlButtonShape}"
+				type="button"
+				size="${(x) => x.scale === "condensed" ? "super-condensed" : "condensed"}"
+				tabindex="${getTabIndex}"
+				@click="${(x) => x.stepDown()}"></${buttonTag}>
+			<${dividerTag} class="divider" orientation="vertical"></${dividerTag}>
+			<${buttonTag} id="add" icon="plus-line"
+				?disabled="${(x) => x.disabled || x.readOnly}"
+				aria-label=${(x) => x.incrementButtonAriaLabel || x.locale.numberField.incrementButtonLabel(x.step)}
+				shape="${setControlButtonShape}"
+				type="button"
+				size="${(x) => x.scale === "condensed" ? "super-condensed" : "condensed"}"
+				tabindex="${getTabIndex}"
+				@click="${(x) => x.stepUp()}"></${buttonTag}>
+			</div>
 	`;
 }
 const NumberFieldTemplate = (context) => {
+  const visuallyHiddenTag = context.tagFor(VisuallyHidden);
   return html`
 		<div class="base ${getStateClasses}">
 			${when((x) => x.label, renderLabel())}
@@ -389,6 +397,8 @@ const NumberFieldTemplate = (context) => {
 				${() => numberControlButtons(context)}
 			</div>
 			${(x) => x._getFeedbackTemplate(context)}
+			<${visuallyHiddenTag} id="value-announcement" role="status" aria-atomic="true">
+				${(x) => x._updatedValueAnnouncement}</${visuallyHiddenTag}>
 		</div>
 	`;
 };
@@ -401,7 +411,8 @@ const numberFieldDefinition = defineVividComponent(
     buttonDefinition,
     dividerDefinition,
     iconDefinition,
-    feedbackMessageDefinition
+    feedbackMessageDefinition,
+    visuallyHiddenDefinition
   ],
   {
     styles,

package/shared/definition38.cjs

@@ -2,6 +2,7 @@
 
 const definition = require('./definition11.cjs');
 const vividElement = require('./vivid-element.cjs');
+const localized = require('./localized.cjs');
 const enums = require('./enums.cjs');
 const slotted = require('./slotted.cjs');
 const classNames = require('./class-names.cjs');
@@ -27,7 +28,7 @@ const totalConverter = {
   fromView: (value) => parseInt(value, 10),
   toView: (value) => value.toString()
 };
-class Pagination extends vividElement.VividElement {
+class Pagination extends localized.Localized(vividElement.VividElement) {
   constructor() {
     super();
     this.navIcons = false;
@@ -169,21 +170,25 @@ const paginationButtonRenderer = (buttonTag) => vividElement.html` ${when.when(
   (value) => value !== "...",
   vividElement.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-current="${(value, { parent }) => parent.selectedIndex === Number(value) - 1}"
-									@click="${handleSelection}"
-									@keydown="${handleKeyDown}">
+			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.when(
   (value) => value === "...",
-  vividElement.html` <div class="dots size-${(_, { parent: x }) => getPaginationSize(x)}">
+  vividElement.html` <div
+		class="dots size-${(_, { parent: x }) => getPaginationSize(x)}"
+		aria-hidden="true"
+	>
 		...
 	</div>`
 )}`;
@@ -208,12 +213,13 @@ const PaginationTemplate = (context) => {
   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--}"
+			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.children({
     property: "paginationButtons",
@@ -222,12 +228,13 @@ const PaginationTemplate = (context) => {
 			${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++}"
+			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>`;
 };