@vonage/vivid 4.25.0 → 4.27.0

package/shared/definition18.cjs

@@ -7,6 +7,7 @@ const definition$3 = require('./definition23.cjs');
 const pickerField_template = require('./picker-field.template.cjs');
 const calendarPicker_template = require('./calendar-picker.template.cjs');
 const vividElement = require('./vivid-element.cjs');
+const definition$4 = require('./definition66.cjs');
 const singleValuePicker = require('./single-value-picker.cjs');
 const singleDatePicker = require('./single-date-picker.cjs');
 
@@ -127,7 +128,13 @@ const datePickerDefinition = vividElement.defineVividComponent(
   "date-picker",
   DatePicker,
   DatePickerTemplate,
-  [definition.buttonDefinition, definition$1.popupDefinition, definition$2.textFieldDefinition, definition$3.dividerDefinition],
+  [
+    definition.buttonDefinition,
+    definition$1.popupDefinition,
+    definition$2.textFieldDefinition,
+    definition$3.dividerDefinition,
+    definition$4.visuallyHiddenDefinition
+  ],
   {
     styles: [pickerField_template.pickerFieldStyles, calendarPicker_template.calendarStyles],
     shadowOptions: {

package/shared/definition18.js

@@ -5,6 +5,7 @@ import { d as dividerDefinition } from './definition23.js';
 import { a as PickerField, P as PickerFieldTemplate, p as pickerFieldStyles } from './picker-field.template.js';
 import { M as MinMaxCalendarPicker, C as CalendarPicker, i as isValidDateStr, f as formatPresentationDate, p as parsePresentationDate, a as CalendarPickerTemplate, c as calendarStyles } from './calendar-picker.template.js';
 import { v as volatile, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { v as visuallyHiddenDefinition } from './definition66.js';
 import { S as SingleValuePicker } from './single-value-picker.js';
 import { S as SingleDatePickerMixin } from './single-date-picker.js';
 
@@ -125,7 +126,13 @@ const datePickerDefinition = defineVividComponent(
   "date-picker",
   DatePicker,
   DatePickerTemplate,
-  [buttonDefinition, popupDefinition, textFieldDefinition, dividerDefinition],
+  [
+    buttonDefinition,
+    popupDefinition,
+    textFieldDefinition,
+    dividerDefinition,
+    visuallyHiddenDefinition
+  ],
   {
     styles: [pickerFieldStyles, calendarStyles],
     shadowOptions: {

package/shared/definition19.cjs

@@ -7,6 +7,7 @@ const definition$3 = require('./definition23.cjs');
 const vividElement = require('./vivid-element.cjs');
 const pickerField_template = require('./picker-field.template.cjs');
 const calendarPicker_template = require('./calendar-picker.template.cjs');
+const definition$4 = require('./definition66.cjs');
 
 const formatRange = (from, to) => {
   return `${from} – ${to}`;
@@ -220,7 +221,7 @@ class DateRangePicker extends calendarPicker_template.MinMaxCalendarPicker(
    * @internal
    */
   _isDateAriaSelected(date) {
-    return date === this.start || date === this.end;
+    return this._isDateInSelectedRange(date);
   }
   /**
    * @internal
@@ -440,7 +441,13 @@ const dateRangePickerDefinition = vividElement.defineVividComponent(
   "date-range-picker",
   DateRangePicker,
   DateRangePickerTemplate,
-  [definition.buttonDefinition, definition$1.popupDefinition, definition$2.textFieldDefinition, definition$3.dividerDefinition],
+  [
+    definition.buttonDefinition,
+    definition$1.popupDefinition,
+    definition$2.textFieldDefinition,
+    definition$3.dividerDefinition,
+    definition$4.visuallyHiddenDefinition
+  ],
   {
     styles: [pickerField_template.pickerFieldStyles, calendarPicker_template.calendarStyles],
     shadowOptions: {

package/shared/definition19.js

@@ -5,6 +5,7 @@ import { d as dividerDefinition } from './definition23.js';
 import { a as attr, o as observable, v as volatile, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { a as PickerField, P as PickerFieldTemplate, p as pickerFieldStyles } from './picker-field.template.js';
 import { f as formatPresentationDate, p as parsePresentationDate, M as MinMaxCalendarPicker, C as CalendarPicker, i as isValidDateStr, b as compareDateStr, a as CalendarPickerTemplate, c as calendarStyles } from './calendar-picker.template.js';
+import { v as visuallyHiddenDefinition } from './definition66.js';
 
 const formatRange = (from, to) => {
   return `${from} – ${to}`;
@@ -218,7 +219,7 @@ class DateRangePicker extends MinMaxCalendarPicker(
    * @internal
    */
   _isDateAriaSelected(date) {
-    return date === this.start || date === this.end;
+    return this._isDateInSelectedRange(date);
   }
   /**
    * @internal
@@ -438,7 +439,13 @@ const dateRangePickerDefinition = defineVividComponent(
   "date-range-picker",
   DateRangePicker,
   DateRangePickerTemplate,
-  [buttonDefinition, popupDefinition, textFieldDefinition, dividerDefinition],
+  [
+    buttonDefinition,
+    popupDefinition,
+    textFieldDefinition,
+    dividerDefinition,
+    visuallyHiddenDefinition
+  ],
   {
     styles: [pickerFieldStyles, calendarStyles],
     shadowOptions: {

package/shared/definition2.cjs

@@ -31,7 +31,7 @@ const AccordionExpandMode$1 = {
 class Accordion extends vividElement.VividElement {
   constructor() {
     super(...arguments);
-    /* eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value */
+    /* eslint-disable-next-line @repo/repo/no-attribute-default-value */
     this.expandmode = AccordionExpandMode$1.single;
     this.activeItemIndex = 0;
     this.change = () => {

package/shared/definition2.js

@@ -29,7 +29,7 @@ const AccordionExpandMode$1 = {
 class Accordion extends VividElement {
   constructor() {
     super(...arguments);
-    /* eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value */
+    /* eslint-disable-next-line @repo/repo/no-attribute-default-value */
     this.expandmode = AccordionExpandMode$1.single;
     this.activeItemIndex = 0;
     this.change = () => {

package/shared/definition20.cjs

@@ -8,6 +8,7 @@ const pickerField_template = require('./picker-field.template.cjs');
 const calendarPicker_template = require('./calendar-picker.template.cjs');
 const vividElement = require('./vivid-element.cjs');
 const timeSelectionPicker_template = require('./time-selection-picker.template.cjs');
+const definition$4 = require('./definition66.cjs');
 const singleValuePicker = require('./single-value-picker.cjs');
 const singleDatePicker = require('./single-date-picker.cjs');
 
@@ -262,7 +263,8 @@ const dateTimePickerDefinition = vividElement.defineVividComponent(
     definition$1.popupDefinition,
     definition$2.textFieldDefinition,
     definition$3.dividerDefinition,
-    timeSelectionPicker_template.inlineTimePickerDefinition
+    timeSelectionPicker_template.inlineTimePickerDefinition,
+    definition$4.visuallyHiddenDefinition
   ],
   {
     styles: [pickerField_template.pickerFieldStyles, calendarPicker_template.calendarStyles, styles],

package/shared/definition20.js

@@ -6,6 +6,7 @@ import { a as PickerField, P as PickerFieldTemplate, p as pickerFieldStyles } fr
 import { i as isValidDateStr, f as formatPresentationDate, p as parsePresentationDate, C as CalendarPicker, d as currentDateStr, b as compareDateStr, V as ValidDateFilter, a as CalendarPickerTemplate, c as calendarStyles } from './calendar-picker.template.js';
 import { a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { b as isValidTimeStr, f as formatPresentationTime, p as parsePresentationTime, c as TimeSelectionPicker, d as compareTimeStr, V as ValidTimeFilter, a as TimeSelectionPickerTemplate, i as inlineTimePickerDefinition } from './time-selection-picker.template.js';
+import { v as visuallyHiddenDefinition } from './definition66.js';
 import { S as SingleValuePicker } from './single-value-picker.js';
 import { S as SingleDatePickerMixin } from './single-date-picker.js';
 
@@ -260,7 +261,8 @@ const dateTimePickerDefinition = defineVividComponent(
     popupDefinition,
     textFieldDefinition,
     dividerDefinition,
-    inlineTimePickerDefinition
+    inlineTimePickerDefinition,
+    visuallyHiddenDefinition
   ],
   {
     styles: [pickerFieldStyles, calendarStyles, styles],

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

@@ -134,8 +134,8 @@ 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_BASE_URL = 'https://icon.resources.vonage.com';
+const ICONS_VERSION = '4.6.8';
 
 const numberConverter = {
   toView(value) {

package/shared/definition28.js

@@ -132,8 +132,8 @@ 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_BASE_URL = 'https://icon.resources.vonage.com';
+const ICONS_VERSION = '4.6.8';
 
 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/definition30.cjs

@@ -30,7 +30,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 class MenuItem extends hostSemantics.HostSemantics(affix.AffixIcon(vividElement.VividElement)) {
   constructor() {
     super();
-    // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
+    // eslint-disable-next-line @repo/repo/no-attribute-default-value
     this.role = MenuItemRole.menuitem;
     this.checked = false;
     /**

package/shared/definition30.js

@@ -28,7 +28,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 class MenuItem extends HostSemantics(AffixIcon(VividElement)) {
   constructor() {
     super();
-    // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
+    // eslint-disable-next-line @repo/repo/no-attribute-default-value
     this.role = MenuItemRole.menuitem;
     this.checked = false;
     /**

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;
@@ -68,7 +72,7 @@ class NumberField extends mixins.WithFeedback(
     this.proxy = document.createElement("input");
     this.readOnly = false;
     this.autofocus = false;
-    // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
+    // eslint-disable-next-line @repo/repo/no-attribute-default-value
     this.step = 1;
     /**
      * Flag to indicate that the value change is from the user input
@@ -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,