@vonage/vivid 4.26.0 → 4.28.0

package/shared/calendar-picker.template.cjs

@@ -3,11 +3,12 @@
 const vividElement = require('./vivid-element.cjs');
 const divider = require('./divider.cjs');
 const definition = require('./definition11.cjs');
+const definition$1 = require('./definition66.cjs');
 const repeat = require('./repeat.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
 
-const calendarStyles = ".segments{display:inline-flex;gap:24px}.segment{display:flex;flex-direction:column;gap:12px}.segment .header{display:flex;align-items:center;padding-block:8px}.segment .title{display:flex;flex-grow:1;justify-content:center}.segment .title-action{border-radius:8px;block-size:24px;font:var(--vvd-typography-base-extended);padding-inline:8px}.calendar{display:flex;flex-direction:column;margin-top:8px;gap:4px}.calendar .calendar-separator{margin-inline:10px}.calendar .calendar-weekdays{display:flex;justify-content:center}.calendar .calendar-weekday{display:inline-flex;align-items:center;justify-content:center;block-size:16px;font:var(--vvd-typography-base-condensed);inline-size:40px}.calendar .calendar-week{display:flex;justify-content:center}.calendar .calendar-day{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:28px;font:var(--vvd-typography-base);margin-inline:6px}.calendar .calendar-day.start,.calendar .calendar-day.end{border:2px solid var(--vvd-color-cta-50);background-color:var(--vvd-color-cta-200)}.calendar:focus-visible .calendar .calendar-day.start,.calendar:focus-visible .calendar .calendar-day.end{border-width:3px}.calendar .calendar-day:before,.calendar .calendar-day:after{position:absolute;z-index:-1;display:block;width:20px;height:28px}.calendar .calendar-day:before{right:50%}.calendar .calendar-day:after{left:50%}.calendar .calendar-day.range:before,.calendar .calendar-day.range:after{background-color:var(--vvd-color-cta-50)}.calendar .calendar-day.range:not(.start):before,.calendar .calendar-day.range:not(.end):after{content:\"\"}.calendar .calendar-day.outside-month,.calendar .calendar-day:disabled{color:var(--vvd-color-neutral-400)}.months-separator{margin-inline:-12px}.month-grid{display:flex;flex-direction:column;gap:34px}.month-grid .months-row{display:flex;justify-content:center;gap:29px}.month-grid .month{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:48px;font:var(--vvd-typography-base-extended);text-transform:uppercase}.month-grid .month:disabled{color:var(--vvd-color-neutral-400)}.button{--_connotation-color-primary: var(--vvd-date-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-date-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-date-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-date-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-date-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-date-picker-accent-pale, var(--vvd-color-neutral-300))}.button{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.button:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.button:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.button:where(.selected):where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.button{position:relative;padding:0;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer}.button:focus-visible{--focus-stroke-gap-color: transparent;color:var(--vvd-color-canvas-text);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))}.button:focus-visible.start,.button:focus-visible.end{border-width:3px}.button.current{border:1px solid var(--vvd-color-neutral-200)}.button:disabled{cursor:not-allowed}";
+const calendarStyles = ".segments{display:inline-flex;gap:24px}.segment{display:flex;flex-direction:column;gap:12px}.segment .header{--focus-stroke-gap-color: transparent;display:flex;align-items:center;padding-block:8px}.segment .header: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))}.segment .title{display:flex;flex-grow:1;justify-content:center}.segment .title-action{border-radius:8px;block-size:24px;font:var(--vvd-typography-base-extended);padding-inline:8px}.calendar{display:flex;flex-direction:column;margin-top:8px;gap:4px}.calendar .calendar-separator{margin-inline:10px}.calendar .calendar-weekdays{display:flex;justify-content:center}.calendar .calendar-weekday{display:inline-flex;align-items:center;justify-content:center;block-size:16px;font:var(--vvd-typography-base-condensed);inline-size:40px}.calendar .calendar-week{display:flex;justify-content:center}.calendar .calendar-day{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:28px;font:var(--vvd-typography-base);margin-inline:6px}.calendar .calendar-day.start,.calendar .calendar-day.end{border:2px solid var(--vvd-color-cta-50);background-color:var(--vvd-color-cta-200)}.calendar:focus-visible .calendar .calendar-day.start,.calendar:focus-visible .calendar .calendar-day.end{border-width:3px}.calendar .calendar-day:before,.calendar .calendar-day:after{position:absolute;z-index:-1;display:block;width:20px;height:28px}.calendar .calendar-day:before{right:50%}.calendar .calendar-day:after{left:50%}.calendar .calendar-day.range:before,.calendar .calendar-day.range:after{background-color:var(--vvd-color-cta-50)}.calendar .calendar-day.range:not(.start):before,.calendar .calendar-day.range:not(.end):after{content:\"\"}.calendar .calendar-day.outside-month,.calendar .calendar-day:disabled{color:var(--vvd-color-neutral-400)}.months-separator{margin-inline:-12px}.month-grid{display:flex;flex-direction:column;gap:34px}.month-grid .months-row{display:flex;justify-content:center;gap:29px}.month-grid .month{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:48px;font:var(--vvd-typography-base-extended);text-transform:uppercase}.month-grid .month:disabled{color:var(--vvd-color-neutral-400)}.button{--_connotation-color-primary: var(--vvd-date-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-date-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-date-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-date-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-date-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-date-picker-accent-pale, var(--vvd-color-neutral-300))}.button{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.button:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.button:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.button:where(.selected):where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.button{position:relative;padding:0;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer}.button:disabled{cursor:not-allowed}.button:focus:not(.title-action),.button.title-action:focus-visible{--focus-stroke-gap-color: transparent;color:var(--vvd-color-canvas-text);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))}.button:focus:not(.title-action).start,.button:focus:not(.title-action).end,.button.title-action:focus-visible.start,.button.title-action:focus-visible.end{border-width:3px}.button.current{border:1px solid var(--vvd-color-neutral-200)}";
 
 /**
  * @name toDate
@@ -5686,11 +5687,10 @@ const CalendarPicker = (Base) => {
       super._onPickerButtonClick();
       if (this._popupOpen) {
         vividElement.DOM.processUpdates();
-        const tabbableDate = this._tabbableDate;
-        if (tabbableDate)
-          this.shadowRoot.querySelector(
-            `[data-date="${tabbableDate}"]`
-          ).focus();
+        const headerElement = this._dialogEl.querySelector(
+          ".header"
+        );
+        headerElement?.focus();
       }
     }
     // --- Calendar header ---
@@ -5775,6 +5775,9 @@ const CalendarPicker = (Base) => {
           type: "month-picker",
           title: `${this._monthPickerYear}`,
           titleClickable: true,
+          titleAriaLabel: this.locale.calendarPicker.showCalendarForMonthLabel(
+            `${this.locale.calendarPicker.months.name[this._selectedMonth.month]} ${this._selectedMonth.year}`
+          ),
           prevYearButton: true,
           nextYearButton: true,
           months: buildMonthPickerGrid(
@@ -5793,6 +5796,9 @@ const CalendarPicker = (Base) => {
             type: "calendar",
             title: `${this.locale.calendarPicker.months.name[month.month]} ${month.year}`,
             titleClickable: isSingle,
+            titleAriaLabel: this.locale.calendarPicker.changeMonthLabel(
+              `${this.locale.calendarPicker.months.name[month.month]} ${month.year}`
+            ),
             prevYearButton: isFirst && isSingle,
             prevMonthButton: isFirst,
             nextMonthButton: isLast,
@@ -6051,7 +6057,7 @@ const MinMaxCalendarPicker = (SuperClass) => {
 
 function renderDialogHeader(context) {
   const buttonTag = context.tagFor(definition.Button);
-  return vividElement.html` <div class="header">
+  return vividElement.html`<div class="header" tabindex="-1">
 		${when.when(
     (x) => x.prevYearButton,
     vividElement.html`
@@ -6089,6 +6095,7 @@ function renderDialogHeader(context) {
 						id="${(x) => `grid-label-${x.id}`}"
 						class="title-action button"
 						aria-live="polite"
+						aria-label="${(x) => x.titleAriaLabel}"
 						@click="${(_, c) => c.parent._onTitleActionClick()}"
 					>
 						${(x) => x.title}
@@ -6141,6 +6148,7 @@ function renderDialogHeader(context) {
 }
 function renderCalendarGrid(context) {
   const dividerTag = context.tagFor(divider.Divider);
+  const visuallyHiddenTag = context.tagFor(definition$1.VisuallyHidden);
   return vividElement.html`
 		<div
 			class='calendar'
@@ -6212,17 +6220,10 @@ function renderCalendarGrid(context) {
 											?disabled="${(x, c) => !c.parentContext.parentContext.parent._isDateInValidRange(
           x.date
         )}"
-											tabindex="${(x, c) => x.date === c.parentContext.parentContext.parent._tabbableDate ? 2 : -1}"
-											aria-selected="${(x, c) => c.parentContext.parentContext.parent._isDateAriaSelected(
-          x.date
-        )}"
+											tabindex="${(x, c) => x.date === c.parentContext.parentContext.parent._tabbableDate ? 1 : -1}"
 											data-date="${(x) => x.date}"
-											@click="${(x, c) => c.parentContext.parentContext.parent._onDateClick(
-          x.date
-        )}"
-											@focus="${(x, c) => c.parentContext.parentContext.parent._onDateFocus(
-          x.date
-        )}"
+											@click="${(x, c) => c.parentContext.parentContext.parent._onDateClick(x.date)}"
+											@focus="${(x, c) => c.parentContext.parentContext.parent._onDateFocus(x.date)}"
 											@mouseenter="${(x, c) => c.parentContext.parentContext.parent._onDateMouseEnter(
           x.date
         )}"
@@ -6235,6 +6236,21 @@ function renderCalendarGrid(context) {
         )}"
 										>
 											${(x) => x.label}
+											<${visuallyHiddenTag}>${(x, c) => {
+          const picker = c.parentContext.parentContext.parent;
+          const announcements = [];
+          if (x.date === picker._currentDate) {
+            announcements.push(
+              picker.locale.calendarPicker.todayLabel
+            );
+          }
+          if (picker._isDateAriaSelected(x.date)) {
+            announcements.push(
+              picker.locale.calendarPicker.selectedLabel
+            );
+          }
+          return announcements.join(" ");
+        }}</${visuallyHiddenTag}>
 										</button>
 									</span>`
       )}
@@ -6246,6 +6262,7 @@ function renderCalendarGrid(context) {
 }
 function renderMonthPickerGrid(context) {
   const dividerTag = context.tagFor(divider.Divider);
+  const visuallyHiddenTag = context.tagFor(definition$1.VisuallyHidden);
   return vividElement.html`
 		<${dividerTag}
 			class='months-separator'
@@ -6286,12 +6303,8 @@ function renderMonthPickerGrid(context) {
 										tabindex="${(x, c) => c.parentContext.parentContext.parent._tabbableMonth && areMonthsEqual(
         x.month,
         c.parentContext.parentContext.parent._tabbableMonth
-      ) ? 2 : -1}"
+      ) ? 1 : -1}"
 										aria-label="${(x) => x.monthName}"
-										aria-selected="${(x, c) => areMonthsEqual(
-        x.month,
-        c.parentContext.parentContext.parent._selectedMonth
-      )}"
 										data-month="${(x) => monthToStr(x.month)}"
 										?disabled="${(x, c) => !c.parentContext.parentContext.parent._isMonthInValidRange(
         x.month
@@ -6308,6 +6321,19 @@ function renderMonthPickerGrid(context) {
       )}"
 									>
 										${(x) => x.label}
+										<${visuallyHiddenTag}>${(x, c) => {
+        const picker = c.parentContext.parentContext.parent;
+        const announcements = [];
+        if (areMonthsEqual(x.month, picker._currentMonth)) {
+          announcements.push(picker.locale.calendarPicker.currentLabel);
+        }
+        if (areMonthsEqual(x.month, picker._selectedMonth)) {
+          announcements.push(
+            picker.locale.calendarPicker.selectedLabel
+          );
+        }
+        return announcements.join(" ");
+      }}</${visuallyHiddenTag}>
 									</button>
 								</span>
 							`

package/shared/calendar-picker.template.js

@@ -1,11 +1,12 @@
 import { o as observable, v as volatile, D as DOM, a as attr, h as html } from './vivid-element.js';
 import { D as Divider } from './divider.js';
 import { B as Button } from './definition11.js';
+import { V as VisuallyHidden } from './definition66.js';
 import { r as repeat } from './repeat.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-const calendarStyles = ".segments{display:inline-flex;gap:24px}.segment{display:flex;flex-direction:column;gap:12px}.segment .header{display:flex;align-items:center;padding-block:8px}.segment .title{display:flex;flex-grow:1;justify-content:center}.segment .title-action{border-radius:8px;block-size:24px;font:var(--vvd-typography-base-extended);padding-inline:8px}.calendar{display:flex;flex-direction:column;margin-top:8px;gap:4px}.calendar .calendar-separator{margin-inline:10px}.calendar .calendar-weekdays{display:flex;justify-content:center}.calendar .calendar-weekday{display:inline-flex;align-items:center;justify-content:center;block-size:16px;font:var(--vvd-typography-base-condensed);inline-size:40px}.calendar .calendar-week{display:flex;justify-content:center}.calendar .calendar-day{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:28px;font:var(--vvd-typography-base);margin-inline:6px}.calendar .calendar-day.start,.calendar .calendar-day.end{border:2px solid var(--vvd-color-cta-50);background-color:var(--vvd-color-cta-200)}.calendar:focus-visible .calendar .calendar-day.start,.calendar:focus-visible .calendar .calendar-day.end{border-width:3px}.calendar .calendar-day:before,.calendar .calendar-day:after{position:absolute;z-index:-1;display:block;width:20px;height:28px}.calendar .calendar-day:before{right:50%}.calendar .calendar-day:after{left:50%}.calendar .calendar-day.range:before,.calendar .calendar-day.range:after{background-color:var(--vvd-color-cta-50)}.calendar .calendar-day.range:not(.start):before,.calendar .calendar-day.range:not(.end):after{content:\"\"}.calendar .calendar-day.outside-month,.calendar .calendar-day:disabled{color:var(--vvd-color-neutral-400)}.months-separator{margin-inline:-12px}.month-grid{display:flex;flex-direction:column;gap:34px}.month-grid .months-row{display:flex;justify-content:center;gap:29px}.month-grid .month{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:48px;font:var(--vvd-typography-base-extended);text-transform:uppercase}.month-grid .month:disabled{color:var(--vvd-color-neutral-400)}.button{--_connotation-color-primary: var(--vvd-date-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-date-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-date-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-date-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-date-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-date-picker-accent-pale, var(--vvd-color-neutral-300))}.button{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.button:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.button:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.button:where(.selected):where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.button{position:relative;padding:0;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer}.button:focus-visible{--focus-stroke-gap-color: transparent;color:var(--vvd-color-canvas-text);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))}.button:focus-visible.start,.button:focus-visible.end{border-width:3px}.button.current{border:1px solid var(--vvd-color-neutral-200)}.button:disabled{cursor:not-allowed}";
+const calendarStyles = ".segments{display:inline-flex;gap:24px}.segment{display:flex;flex-direction:column;gap:12px}.segment .header{--focus-stroke-gap-color: transparent;display:flex;align-items:center;padding-block:8px}.segment .header: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))}.segment .title{display:flex;flex-grow:1;justify-content:center}.segment .title-action{border-radius:8px;block-size:24px;font:var(--vvd-typography-base-extended);padding-inline:8px}.calendar{display:flex;flex-direction:column;margin-top:8px;gap:4px}.calendar .calendar-separator{margin-inline:10px}.calendar .calendar-weekdays{display:flex;justify-content:center}.calendar .calendar-weekday{display:inline-flex;align-items:center;justify-content:center;block-size:16px;font:var(--vvd-typography-base-condensed);inline-size:40px}.calendar .calendar-week{display:flex;justify-content:center}.calendar .calendar-day{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:28px;font:var(--vvd-typography-base);margin-inline:6px}.calendar .calendar-day.start,.calendar .calendar-day.end{border:2px solid var(--vvd-color-cta-50);background-color:var(--vvd-color-cta-200)}.calendar:focus-visible .calendar .calendar-day.start,.calendar:focus-visible .calendar .calendar-day.end{border-width:3px}.calendar .calendar-day:before,.calendar .calendar-day:after{position:absolute;z-index:-1;display:block;width:20px;height:28px}.calendar .calendar-day:before{right:50%}.calendar .calendar-day:after{left:50%}.calendar .calendar-day.range:before,.calendar .calendar-day.range:after{background-color:var(--vvd-color-cta-50)}.calendar .calendar-day.range:not(.start):before,.calendar .calendar-day.range:not(.end):after{content:\"\"}.calendar .calendar-day.outside-month,.calendar .calendar-day:disabled{color:var(--vvd-color-neutral-400)}.months-separator{margin-inline:-12px}.month-grid{display:flex;flex-direction:column;gap:34px}.month-grid .months-row{display:flex;justify-content:center;gap:29px}.month-grid .month{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:48px;font:var(--vvd-typography-base-extended);text-transform:uppercase}.month-grid .month:disabled{color:var(--vvd-color-neutral-400)}.button{--_connotation-color-primary: var(--vvd-date-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-date-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-date-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-date-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-date-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-date-picker-accent-pale, var(--vvd-color-neutral-300))}.button{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.button:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.button:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.button:where(.selected):where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.button{position:relative;padding:0;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer}.button:disabled{cursor:not-allowed}.button:focus:not(.title-action),.button.title-action:focus-visible{--focus-stroke-gap-color: transparent;color:var(--vvd-color-canvas-text);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))}.button:focus:not(.title-action).start,.button:focus:not(.title-action).end,.button.title-action:focus-visible.start,.button.title-action:focus-visible.end{border-width:3px}.button.current{border:1px solid var(--vvd-color-neutral-200)}";
 
 /**
  * @name toDate
@@ -5684,11 +5685,10 @@ const CalendarPicker = (Base) => {
       super._onPickerButtonClick();
       if (this._popupOpen) {
         DOM.processUpdates();
-        const tabbableDate = this._tabbableDate;
-        if (tabbableDate)
-          this.shadowRoot.querySelector(
-            `[data-date="${tabbableDate}"]`
-          ).focus();
+        const headerElement = this._dialogEl.querySelector(
+          ".header"
+        );
+        headerElement?.focus();
       }
     }
     // --- Calendar header ---
@@ -5773,6 +5773,9 @@ const CalendarPicker = (Base) => {
           type: "month-picker",
           title: `${this._monthPickerYear}`,
           titleClickable: true,
+          titleAriaLabel: this.locale.calendarPicker.showCalendarForMonthLabel(
+            `${this.locale.calendarPicker.months.name[this._selectedMonth.month]} ${this._selectedMonth.year}`
+          ),
           prevYearButton: true,
           nextYearButton: true,
           months: buildMonthPickerGrid(
@@ -5791,6 +5794,9 @@ const CalendarPicker = (Base) => {
             type: "calendar",
             title: `${this.locale.calendarPicker.months.name[month.month]} ${month.year}`,
             titleClickable: isSingle,
+            titleAriaLabel: this.locale.calendarPicker.changeMonthLabel(
+              `${this.locale.calendarPicker.months.name[month.month]} ${month.year}`
+            ),
             prevYearButton: isFirst && isSingle,
             prevMonthButton: isFirst,
             nextMonthButton: isLast,
@@ -6049,7 +6055,7 @@ const MinMaxCalendarPicker = (SuperClass) => {
 
 function renderDialogHeader(context) {
   const buttonTag = context.tagFor(Button);
-  return html` <div class="header">
+  return html`<div class="header" tabindex="-1">
 		${when(
     (x) => x.prevYearButton,
     html`
@@ -6087,6 +6093,7 @@ function renderDialogHeader(context) {
 						id="${(x) => `grid-label-${x.id}`}"
 						class="title-action button"
 						aria-live="polite"
+						aria-label="${(x) => x.titleAriaLabel}"
 						@click="${(_, c) => c.parent._onTitleActionClick()}"
 					>
 						${(x) => x.title}
@@ -6139,6 +6146,7 @@ function renderDialogHeader(context) {
 }
 function renderCalendarGrid(context) {
   const dividerTag = context.tagFor(Divider);
+  const visuallyHiddenTag = context.tagFor(VisuallyHidden);
   return html`
 		<div
 			class='calendar'
@@ -6210,17 +6218,10 @@ function renderCalendarGrid(context) {
 											?disabled="${(x, c) => !c.parentContext.parentContext.parent._isDateInValidRange(
           x.date
         )}"
-											tabindex="${(x, c) => x.date === c.parentContext.parentContext.parent._tabbableDate ? 2 : -1}"
-											aria-selected="${(x, c) => c.parentContext.parentContext.parent._isDateAriaSelected(
-          x.date
-        )}"
+											tabindex="${(x, c) => x.date === c.parentContext.parentContext.parent._tabbableDate ? 1 : -1}"
 											data-date="${(x) => x.date}"
-											@click="${(x, c) => c.parentContext.parentContext.parent._onDateClick(
-          x.date
-        )}"
-											@focus="${(x, c) => c.parentContext.parentContext.parent._onDateFocus(
-          x.date
-        )}"
+											@click="${(x, c) => c.parentContext.parentContext.parent._onDateClick(x.date)}"
+											@focus="${(x, c) => c.parentContext.parentContext.parent._onDateFocus(x.date)}"
 											@mouseenter="${(x, c) => c.parentContext.parentContext.parent._onDateMouseEnter(
           x.date
         )}"
@@ -6233,6 +6234,21 @@ function renderCalendarGrid(context) {
         )}"
 										>
 											${(x) => x.label}
+											<${visuallyHiddenTag}>${(x, c) => {
+          const picker = c.parentContext.parentContext.parent;
+          const announcements = [];
+          if (x.date === picker._currentDate) {
+            announcements.push(
+              picker.locale.calendarPicker.todayLabel
+            );
+          }
+          if (picker._isDateAriaSelected(x.date)) {
+            announcements.push(
+              picker.locale.calendarPicker.selectedLabel
+            );
+          }
+          return announcements.join(" ");
+        }}</${visuallyHiddenTag}>
 										</button>
 									</span>`
       )}
@@ -6244,6 +6260,7 @@ function renderCalendarGrid(context) {
 }
 function renderMonthPickerGrid(context) {
   const dividerTag = context.tagFor(Divider);
+  const visuallyHiddenTag = context.tagFor(VisuallyHidden);
   return html`
 		<${dividerTag}
 			class='months-separator'
@@ -6284,12 +6301,8 @@ function renderMonthPickerGrid(context) {
 										tabindex="${(x, c) => c.parentContext.parentContext.parent._tabbableMonth && areMonthsEqual(
         x.month,
         c.parentContext.parentContext.parent._tabbableMonth
-      ) ? 2 : -1}"
+      ) ? 1 : -1}"
 										aria-label="${(x) => x.monthName}"
-										aria-selected="${(x, c) => areMonthsEqual(
-        x.month,
-        c.parentContext.parentContext.parent._selectedMonth
-      )}"
 										data-month="${(x) => monthToStr(x.month)}"
 										?disabled="${(x, c) => !c.parentContext.parentContext.parent._isMonthInValidRange(
         x.month
@@ -6306,6 +6319,19 @@ function renderMonthPickerGrid(context) {
       )}"
 									>
 										${(x) => x.label}
+										<${visuallyHiddenTag}>${(x, c) => {
+        const picker = c.parentContext.parentContext.parent;
+        const announcements = [];
+        if (areMonthsEqual(x.month, picker._currentMonth)) {
+          announcements.push(picker.locale.calendarPicker.currentLabel);
+        }
+        if (areMonthsEqual(x.month, picker._selectedMonth)) {
+          announcements.push(
+            picker.locale.calendarPicker.selectedLabel
+          );
+        }
+        return announcements.join(" ");
+      }}</${visuallyHiddenTag}>
 									</button>
 								</span>
 							`

package/shared/definition17.cjs

@@ -75,7 +75,7 @@ const defaultHeaderCellContentsTemplate = vividElement.html`
 class DataGridCell extends localized.Localized(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.cellType = DataGridCellTypes.default;
     this.rowData = null;
     this.columnDefinition = null;
@@ -373,7 +373,7 @@ var __decorateClass$1 = (decorators, target, key, kind) => {
 class DataGridRow 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.rowType = DataGridRowTypes.default;
     this.rowData = null;
     this.columnDefinitions = null;
@@ -588,7 +588,7 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
   constructor() {
     super();
     this.noTabbing = false;
-    // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
+    // eslint-disable-next-line @repo/repo/no-attribute-default-value
     this.generateHeader = GenerateHeaderOptions.default;
     this.rowsData = [];
     this.columnDefinitions = null;

package/shared/definition17.js

@@ -73,7 +73,7 @@ const defaultHeaderCellContentsTemplate = html`
 class DataGridCell extends Localized(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.cellType = DataGridCellTypes.default;
     this.rowData = null;
     this.columnDefinition = null;
@@ -371,7 +371,7 @@ var __decorateClass$1 = (decorators, target, key, kind) => {
 class DataGridRow 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.rowType = DataGridRowTypes.default;
     this.rowData = null;
     this.columnDefinitions = null;
@@ -586,7 +586,7 @@ const _DataGrid = class _DataGrid extends VividElement {
   constructor() {
     super();
     this.noTabbing = false;
-    // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
+    // eslint-disable-next-line @repo/repo/no-attribute-default-value
     this.generateHeader = GenerateHeaderOptions.default;
     this.rowsData = [];
     this.columnDefinitions = null;

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/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.6";
+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.6";
+const ICONS_BASE_URL = 'https://icon.resources.vonage.com';
+const ICONS_VERSION = '4.6.8';
 
 const numberConverter = {
   toView(value) {

package/shared/definition30.cjs

@@ -9,7 +9,7 @@ const slotted = require('./slotted.cjs');
 const classNames = require('./class-names.cjs');
 const when = require('./when.cjs');
 
-const styles = ":host(:focus-visible){outline:none}:host([disabled]){pointer-events:none}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary: var(--vvd-menu-item-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-menu-item-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-menu-item-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-menu-item-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-menu-item-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-menu-item-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-menu-item-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-menu-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-menu-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-menu-item-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-menu-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-menu-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-menu-item-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-menu-item-accent-dim, var(--vvd-color-neutral-200))}.base{display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.base:not(.two-lines){gap:12px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:8px;padding-inline:12px}.base.two-lines{padding:12px;gap:16px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}:host(:not([role=presentation]):focus-visible) .base{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}.icon{flex-shrink:0;font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.action,.decorative{display:flex;place-content:center}.action{color:var(--_appearance-color-text)}.base.trailing .action,.base.has-meta .action{order:2}:host(:not([check-appearance],[checked],[disabled])) .action{color:var(--vvd-color-neutral-500)}.base:not(.disabled) .decorative{color:var(--vvd-color-neutral-600)}.base.disabled .decorative{color:var(--vvd-color-neutral-200)}.base.has-meta .decorative{order:1}.chevron{order:3}.text{display:flex;overflow:hidden;flex-direction:column;gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base);-webkit-line-clamp:var(--text-primary-line-clamp, 1)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed);-webkit-line-clamp:var(--text-secondary-line-clamp, 1)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}:host([internal-part]) .text-primary{font:var(--_text-primary-custom-size, var--vvd-typography-base)}";
+const styles = ":host(:focus-visible){outline:none}:host([disabled]){pointer-events:none}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary: var(--vvd-menu-item-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-menu-item-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-menu-item-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-menu-item-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-menu-item-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-menu-item-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-menu-item-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-menu-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-menu-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-menu-item-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-menu-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-menu-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-menu-item-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-menu-item-accent-dim, var(--vvd-color-neutral-200))}.base{--_menu-item-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) }.base{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.base:not(.two-lines){gap:12px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:8px;padding-inline:var(--_menu-item-padding-inline)}.base.two-lines{gap:16px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:12px;padding-inline:var(--_menu-item-padding-inline)}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}:host(:not([role=presentation]):focus-visible) .base{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}.icon{flex-shrink:0;font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.action,.decorative{display:flex;place-content:center}.action{color:var(--_appearance-color-text)}.base.trailing .action,.base.has-meta .action{order:2}:host(:not([check-appearance],[checked],[disabled])) .action{color:var(--vvd-color-neutral-500)}.base:not(.disabled) .decorative{color:var(--vvd-color-neutral-600)}.base.disabled .decorative{color:var(--vvd-color-neutral-200)}.base.has-meta .decorative{order:1}.chevron{order:3}.text{display:flex;overflow:hidden;flex-direction:column;gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base);-webkit-line-clamp:var(--text-primary-line-clamp, 1)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed);-webkit-line-clamp:var(--text-secondary-line-clamp, 1)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}:host([internal-part]) .text-primary{font:var(--_text-primary-custom-size, var--vvd-typography-base)}";
 
 const MenuItemRole = {
   menuitem: "menuitem",
@@ -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;
     /**
@@ -174,6 +174,7 @@ class MenuItem extends hostSemantics.HostSemantics(affix.AffixIcon(vividElement.
       this.submenu.anchor = this;
       this.submenu.placement = "right-start";
       this.submenu.collapseExpandedItem = () => this.#collapseExpandedItem();
+      this.submenu._popupOffset = 5;
     }
   }
   /**