@vonage/vivid 4.27.0 → 4.28.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/custom-elements.json +16 -0
  2. package/package.json +1 -1
  3. package/shared/calendar-picker.template.cjs +8 -9
  4. package/shared/calendar-picker.template.js +8 -9
  5. package/shared/definition30.cjs +2 -1
  6. package/shared/definition30.js +2 -1
  7. package/shared/definition31.cjs +5 -1
  8. package/shared/definition31.js +5 -1
  9. package/shared/picker-field/mixins/inline-time-picker/inline-time-picker.d.ts +1 -0
  10. package/shared/time-selection-picker.template.cjs +71 -22
  11. package/shared/time-selection-picker.template.js +71 -22
  12. package/shared/vivid-element.cjs +1 -1
  13. package/shared/vivid-element.js +1 -1
  14. package/styles/core/all.css +1 -1
  15. package/styles/core/theme.css +1 -1
  16. package/styles/core/typography.css +1 -1
  17. package/styles/tokens/theme-dark.css +4 -4
  18. package/styles/tokens/theme-light.css +4 -4
  19. package/styles/tokens/vivid-2-compat.css +1 -1
package/custom-elements.json CHANGED
@@ -18947,6 +18947,14 @@
18947
18947
  "input"
18948
18948
  ],
18949
18949
  "valueMapping": "event.currentTarget.value"
18950
+ },
18951
+ {
18952
+ "name": "valueAsNumber",
18953
+ "propName": "valueAsNumber",
18954
+ "eventNames": [
18955
+ "input"
18956
+ ],
18957
+ "valueMapping": "event.currentTarget.valueAsNumber"
18950
18958
  }
18951
18959
  ]
18952
18960
  }
@@ -38633,6 +38641,14 @@
38633
38641
  "text": "string | undefined"
38634
38642
  }
38635
38643
  },
38644
+ {
38645
+ "kind": "field",
38646
+ "name": "focusedPickerClass",
38647
+ "type": {
38648
+ "text": "string"
38649
+ },
38650
+ "default": "'focused'"
38651
+ },
38636
38652
  {
38637
38653
  "kind": "method",
38638
38654
  "name": "scrollSelectedOptionsToTop"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vonage/vivid",
3
- "version": "4.27.0",
3
+ "version": "4.28.0",
4
4
  "type": "module",
5
5
  "module": "./index.js",
6
6
  "main": "./index.cjs",
package/shared/calendar-picker.template.cjs CHANGED
@@ -8,7 +8,7 @@ const repeat = require('./repeat.cjs');
8
8
  const when = require('./when.cjs');
9
9
  const classNames = require('./class-names.cjs');
10
10
 
11
- 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}";
11
+ 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)}";
12
12
 
13
13
  /**
14
14
  * @name toDate
@@ -5687,11 +5687,10 @@ const CalendarPicker = (Base) => {
5687
5687
  super._onPickerButtonClick();
5688
5688
  if (this._popupOpen) {
5689
5689
  vividElement.DOM.processUpdates();
5690
- const tabbableDate = this._tabbableDate;
5691
- if (tabbableDate)
5692
- this.shadowRoot.querySelector(
5693
- `[data-date="${tabbableDate}"]`
5694
- ).focus();
5690
+ const headerElement = this._dialogEl.querySelector(
5691
+ ".header"
5692
+ );
5693
+ headerElement?.focus();
5695
5694
  }
5696
5695
  }
5697
5696
  // --- Calendar header ---
@@ -6058,7 +6057,7 @@ const MinMaxCalendarPicker = (SuperClass) => {
6058
6057
 
6059
6058
  function renderDialogHeader(context) {
6060
6059
  const buttonTag = context.tagFor(definition.Button);
6061
- return vividElement.html` <div class="header">
6060
+ return vividElement.html`<div class="header" tabindex="-1">
6062
6061
  ${when.when(
6063
6062
  (x) => x.prevYearButton,
6064
6063
  vividElement.html`
@@ -6221,7 +6220,7 @@ function renderCalendarGrid(context) {
6221
6220
  ?disabled="${(x, c) => !c.parentContext.parentContext.parent._isDateInValidRange(
6222
6221
  x.date
6223
6222
  )}"
6224
- tabindex="${(x, c) => x.date === c.parentContext.parentContext.parent._tabbableDate ? 2 : -1}"
6223
+ tabindex="${(x, c) => x.date === c.parentContext.parentContext.parent._tabbableDate ? 1 : -1}"
6225
6224
  data-date="${(x) => x.date}"
6226
6225
  @click="${(x, c) => c.parentContext.parentContext.parent._onDateClick(x.date)}"
6227
6226
  @focus="${(x, c) => c.parentContext.parentContext.parent._onDateFocus(x.date)}"
@@ -6304,7 +6303,7 @@ function renderMonthPickerGrid(context) {
6304
6303
  tabindex="${(x, c) => c.parentContext.parentContext.parent._tabbableMonth && areMonthsEqual(
6305
6304
  x.month,
6306
6305
  c.parentContext.parentContext.parent._tabbableMonth
6307
- ) ? 2 : -1}"
6306
+ ) ? 1 : -1}"
6308
6307
  aria-label="${(x) => x.monthName}"
6309
6308
  data-month="${(x) => monthToStr(x.month)}"
6310
6309
  ?disabled="${(x, c) => !c.parentContext.parentContext.parent._isMonthInValidRange(
package/shared/calendar-picker.template.js CHANGED
@@ -6,7 +6,7 @@ import { r as repeat } from './repeat.js';
6
6
  import { w as when } from './when.js';
7
7
  import { c as classNames } from './class-names.js';
8
8
 
9
- 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}";
9
+ 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)}";
10
10
 
11
11
  /**
12
12
  * @name toDate
@@ -5685,11 +5685,10 @@ const CalendarPicker = (Base) => {
5685
5685
  super._onPickerButtonClick();
5686
5686
  if (this._popupOpen) {
5687
5687
  DOM.processUpdates();
5688
- const tabbableDate = this._tabbableDate;
5689
- if (tabbableDate)
5690
- this.shadowRoot.querySelector(
5691
- `[data-date="${tabbableDate}"]`
5692
- ).focus();
5688
+ const headerElement = this._dialogEl.querySelector(
5689
+ ".header"
5690
+ );
5691
+ headerElement?.focus();
5693
5692
  }
5694
5693
  }
5695
5694
  // --- Calendar header ---
@@ -6056,7 +6055,7 @@ const MinMaxCalendarPicker = (SuperClass) => {
6056
6055
 
6057
6056
  function renderDialogHeader(context) {
6058
6057
  const buttonTag = context.tagFor(Button);
6059
- return html` <div class="header">
6058
+ return html`<div class="header" tabindex="-1">
6060
6059
  ${when(
6061
6060
  (x) => x.prevYearButton,
6062
6061
  html`
@@ -6219,7 +6218,7 @@ function renderCalendarGrid(context) {
6219
6218
  ?disabled="${(x, c) => !c.parentContext.parentContext.parent._isDateInValidRange(
6220
6219
  x.date
6221
6220
  )}"
6222
- tabindex="${(x, c) => x.date === c.parentContext.parentContext.parent._tabbableDate ? 2 : -1}"
6221
+ tabindex="${(x, c) => x.date === c.parentContext.parentContext.parent._tabbableDate ? 1 : -1}"
6223
6222
  data-date="${(x) => x.date}"
6224
6223
  @click="${(x, c) => c.parentContext.parentContext.parent._onDateClick(x.date)}"
6225
6224
  @focus="${(x, c) => c.parentContext.parentContext.parent._onDateFocus(x.date)}"
@@ -6302,7 +6301,7 @@ function renderMonthPickerGrid(context) {
6302
6301
  tabindex="${(x, c) => c.parentContext.parentContext.parent._tabbableMonth && areMonthsEqual(
6303
6302
  x.month,
6304
6303
  c.parentContext.parentContext.parent._tabbableMonth
6305
- ) ? 2 : -1}"
6304
+ ) ? 1 : -1}"
6306
6305
  aria-label="${(x) => x.monthName}"
6307
6306
  data-month="${(x) => monthToStr(x.month)}"
6308
6307
  ?disabled="${(x, c) => !c.parentContext.parentContext.parent._isMonthInValidRange(
package/shared/definition30.cjs CHANGED
@@ -9,7 +9,7 @@ const slotted = require('./slotted.cjs');
9
9
  const classNames = require('./class-names.cjs');
10
10
  const when = require('./when.cjs');
11
11
 
12
- 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)}";
12
+ 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)}";
13
13
 
14
14
  const MenuItemRole = {
15
15
  menuitem: "menuitem",
@@ -174,6 +174,7 @@ class MenuItem extends hostSemantics.HostSemantics(affix.AffixIcon(vividElement.
174
174
  this.submenu.anchor = this;
175
175
  this.submenu.placement = "right-start";
176
176
  this.submenu.collapseExpandedItem = () => this.#collapseExpandedItem();
177
+ this.submenu._popupOffset = 5;
177
178
  }
178
179
  }
179
180
  /**
package/shared/definition30.js CHANGED
@@ -7,7 +7,7 @@ import { s as slotted, e as elements } from './slotted.js';
7
7
  import { c as classNames } from './class-names.js';
8
8
  import { w as when } from './when.js';
9
9
 
10
- 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)}";
10
+ 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)}";
11
11
 
12
12
  const MenuItemRole = {
13
13
  menuitem: "menuitem",
@@ -172,6 +172,7 @@ class MenuItem extends HostSemantics(AffixIcon(VividElement)) {
172
172
  this.submenu.anchor = this;
173
173
  this.submenu.placement = "right-start";
174
174
  this.submenu.collapseExpandedItem = () => this.#collapseExpandedItem();
175
+ this.submenu._popupOffset = 5;
175
176
  }
176
177
  }
177
178
  /**
package/shared/definition31.cjs CHANGED
@@ -12,7 +12,7 @@ const ref = require('./ref.cjs');
12
12
  const classNames = require('./class-names.cjs');
13
13
  const slotted = require('./slotted.cjs');
14
14
 
15
- 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}";
15
+ 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;padding:4px;gap:8px;inline-size:max-content;max-block-size:var(--menu-block-size, 408px);min-inline-size:var(--menu-min-inline-size)}@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:8px}.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}";
16
16
 
17
17
  var __defProp = Object.defineProperty;
18
18
  var __decorateClass = (decorators, target, key, kind) => {
@@ -309,6 +309,9 @@ __decorateClass([
309
309
  __decorateClass([
310
310
  vividElement.observable
311
311
  ], Menu.prototype, "actionItemsSlottedContent");
312
+ __decorateClass([
313
+ vividElement.observable
314
+ ], Menu.prototype, "_popupOffset");
312
315
 
313
316
  const getClasses = ({
314
317
  headerSlottedContent,
@@ -343,6 +346,7 @@ const MenuTemplate = (context) => {
343
346
  :open=${(x) => x.open}
344
347
  :anchor=${(x) => x._anchorEl}
345
348
  :strategy="${(x) => x.positionStrategy}"
349
+ :offset=${(x) => x._popupOffset}
346
350
  @keydown="${(x, c) => handleEscapeKey(x, c.event)}"
347
351
  @vwc-popup:open="${(x, c) => handlePopupEvents(x, c.event, true)}"
348
352
  @vwc-popup:close="${(x, c) => handlePopupEvents(x, c.event, false)}"
package/shared/definition31.js CHANGED
@@ -10,7 +10,7 @@ import { r as ref } from './ref.js';
10
10
  import { c as classNames } from './class-names.js';
11
11
  import { s as slotted } from './slotted.js';
12
12
 
13
- 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}";
13
+ 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;padding:4px;gap:8px;inline-size:max-content;max-block-size:var(--menu-block-size, 408px);min-inline-size:var(--menu-min-inline-size)}@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:8px}.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}";
14
14
 
15
15
  var __defProp = Object.defineProperty;
16
16
  var __decorateClass = (decorators, target, key, kind) => {
@@ -307,6 +307,9 @@ __decorateClass([
307
307
  __decorateClass([
308
308
  observable
309
309
  ], Menu.prototype, "actionItemsSlottedContent");
310
+ __decorateClass([
311
+ observable
312
+ ], Menu.prototype, "_popupOffset");
310
313
 
311
314
  const getClasses = ({
312
315
  headerSlottedContent,
@@ -341,6 +344,7 @@ const MenuTemplate = (context) => {
341
344
  :open=${(x) => x.open}
342
345
  :anchor=${(x) => x._anchorEl}
343
346
  :strategy="${(x) => x.positionStrategy}"
347
+ :offset=${(x) => x._popupOffset}
344
348
  @keydown="${(x, c) => handleEscapeKey(x, c.event)}"
345
349
  @vwc-popup:open="${(x, c) => handlePopupEvents(x, c.event, true)}"
346
350
  @vwc-popup:close="${(x, c) => handlePopupEvents(x, c.event, false)}"
package/shared/picker-field/mixins/inline-time-picker/inline-time-picker.d.ts CHANGED
@@ -345,6 +345,7 @@ export declare class InlineTimePicker extends InlineTimePicker_base {
345
345
  clock: '12h' | '24h';
346
346
  min?: string;
347
347
  max?: string;
348
+ focusedPickerClass: string;
348
349
  scrollSelectedOptionsToTop(): void;
349
350
  focus(options?: FocusOptions): void;
350
351
  }
package/shared/time-selection-picker.template.cjs CHANGED
@@ -217,8 +217,10 @@ const shouldDisplay12hClock = (x) => x.clock === "12h";
217
217
  const onPickerOptionClick = (x, column, optionValue) => {
218
218
  emitChange(x, column.updatedValue(x, optionValue));
219
219
  scrollToOption(x, column.id, optionValue, "start");
220
- const nextPickerEl = x.shadowRoot.querySelector(
221
- `#${column.id} + .picker`
220
+ const currentPicker = x.shadowRoot.querySelector(`#${column.id}`)?.closest(".picker-wrapper");
221
+ const nextPickerWrapper = currentPicker?.nextElementSibling;
222
+ const nextPickerEl = nextPickerWrapper?.querySelector(
223
+ ".picker"
222
224
  );
223
225
  if (nextPickerEl) {
224
226
  nextPickerEl.focus();
@@ -243,6 +245,7 @@ const onPickerKeyDown = (x, column, event) => {
243
245
  const newValue = options[newIndex].value;
244
246
  emitChange(x, column.updatedValue(x, newValue));
245
247
  scrollToOption(x, column.id, newValue, "nearest");
248
+ x._clearFocusedClasses();
246
249
  }
247
250
  return true;
248
251
  };
@@ -262,6 +265,7 @@ const onBaseKeyDown = (x, event) => {
262
265
  if (x.shadowRoot.activeElement !== terminalElement) {
263
266
  pickerField_template.ignoreEventInFocusTraps(event);
264
267
  }
268
+ x._applyFocusedClass();
265
269
  }
266
270
  return true;
267
271
  };
@@ -269,36 +273,40 @@ const emitChange = (x, time) => {
269
273
  x.$emit("change", time, { bubbles: false, composed: false });
270
274
  };
271
275
  const renderPicker = (column) => {
272
- return vividElement.html`<ul
273
- id="${column.id}"
274
- class="picker"
275
- role="listbox"
276
- tabindex="0"
277
- aria-label="${column.getLabel}"
278
- aria-activedescendant="${(x) => column.getSelectedOptionValue(x) ? `${column.id}-${column.getSelectedOptionValue(x)}` : void 0}"
279
- @keydown="${(x, c) => onPickerKeyDown(x, column, c.event)}"
280
- >
281
- ${repeat.repeat(
276
+ return vividElement.html`<div class="picker-wrapper">
277
+ <ul
278
+ id="${column.id}"
279
+ class="picker"
280
+ role="listbox"
281
+ tabindex="0"
282
+ aria-label="${column.getLabel}"
283
+ aria-activedescendant="${(x) => column.getSelectedOptionValue(x) ? `${column.id}-${column.getSelectedOptionValue(x)}` : void 0}"
284
+ @keydown="${(x, c) => onPickerKeyDown(x, column, c.event)}"
285
+ >
286
+ ${repeat.repeat(
282
287
  (x) => column.getOptions(x),
283
288
  vividElement.html`<li
284
- id="${(x) => `${column.id}-${x.value}`}"
285
- class="${(x, c) => classNames.classNames("option", [
289
+ id="${(x) => `${column.id}-${x.value}`}"
290
+ class="${(x, c) => classNames.classNames("option", [
286
291
  "selected",
287
292
  column.getSelectedOptionValue(c.parent) === x.value
288
293
  ])}"
289
- aria-selected="${(x, c) => column.getSelectedOptionValue(c.parent) === x.value}"
290
- role="option"
291
- @click="${(x, c) => onPickerOptionClick(c.parent, column, x.value)}"
292
- >
293
- ${(x) => x.label}
294
- </li>`
294
+ aria-selected="${(x, c) => column.getSelectedOptionValue(c.parent) === x.value}"
295
+ role="option"
296
+ @click="${(x, c) => onPickerOptionClick(c.parent, column, x.value)}"
297
+ >
298
+ ${(x) => x.label}
299
+ </li>`
295
300
  )}
296
- </ul>`;
301
+ </ul>
302
+ </div>`;
297
303
  };
298
304
  const InlineTimePickerTemplate = () => {
299
305
  return vividElement.html`<div
300
306
  class="time-pickers"
301
307
  @keydown="${(x, { event }) => onBaseKeyDown(x, event)}"
308
+ @focusout="${(x) => x._onFocusOut()}"
309
+ @pointerdown="${(x) => x._onPointerDown()}"
302
310
  >
303
311
  ${renderPicker(HoursColumn)} ${renderPicker(MinutesColumn)}
304
312
  ${when.when(shouldDisplaySecondsPicker, renderPicker(SecondsColumn))}
@@ -320,6 +328,19 @@ class InlineTimePicker extends localized.Localized(vividElement.VividElement) {
320
328
  super(...arguments);
321
329
  this.minutesStep = 1;
322
330
  this.clock = "24h";
331
+ this.focusedPickerClass = "focused";
332
+ /**
333
+ * @internal
334
+ */
335
+ this._onFocusOut = () => {
336
+ this._clearFocusedClasses();
337
+ };
338
+ /**
339
+ * @internal
340
+ */
341
+ this._onPointerDown = () => {
342
+ this._clearFocusedClasses();
343
+ };
323
344
  }
324
345
  valueChanged(_, newValue) {
325
346
  if (newValue !== void 0 && !isValidTimeStr(newValue)) {
@@ -365,6 +386,34 @@ class InlineTimePicker extends localized.Localized(vividElement.VividElement) {
365
386
  ".picker"
366
387
  );
367
388
  firstFocusableElement.focus(options);
389
+ this._applyFocusedClass();
390
+ }
391
+ /**
392
+ * @internal
393
+ * Apply 'focused' class to the wrapper element of an active picker
394
+ */
395
+ _applyFocusedClass() {
396
+ const pickers = this.shadowRoot.querySelectorAll(".picker");
397
+ requestAnimationFrame(() => {
398
+ const active = this.shadowRoot.activeElement;
399
+ pickers.forEach((el) => {
400
+ if (el === active) {
401
+ el.parentElement?.classList.add(this.focusedPickerClass);
402
+ } else {
403
+ el.parentElement?.classList.remove(this.focusedPickerClass);
404
+ }
405
+ });
406
+ });
407
+ }
408
+ /**
409
+ * @internal
410
+ * Clear 'focused' classes from all pickers wrappers
411
+ */
412
+ _clearFocusedClasses() {
413
+ const pickers = this.shadowRoot.querySelectorAll(".picker");
414
+ pickers.forEach((el) => {
415
+ el.parentElement?.classList.remove(this.focusedPickerClass);
416
+ });
368
417
  }
369
418
  }
370
419
  __decorateClass$2([
@@ -386,7 +435,7 @@ __decorateClass$2([
386
435
  vividElement.observable
387
436
  ], InlineTimePicker.prototype, "max");
388
437
 
389
- const styles = ":host{display:inline-block}.time-pickers{display:flex;overflow:hidden;justify-content:center;padding:4px;block-size:calc(28px * var(--_inline-time-picker-num-options-visible) + 4px * (var(--_inline-time-picker-num-options-visible) - 1));gap:4px}.time-pickers .picker{position:relative;display:flex;overflow:hidden;flex-direction:column;padding:0;border-radius:4px;margin:0;gap:4px;inline-size:50px;list-style:none}.time-pickers .picker:hover{overflow-y:auto}.time-pickers .picker:after{display:block;flex-shrink:0;block-size:calc(28px * (var(--_inline-time-picker-num-options-visible) - 1) + 4px * (var(--_inline-time-picker-num-options-visible) - 1 - 1));content:\"\"}.time-pickers .picker:focus-visible{--focus-stroke-gap-color: transparent;--focus-inset: -2px;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))}.time-pickers .option{--_connotation-color-primary: var(--vvd-time-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-time-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-time-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-time-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-time-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-time-picker-accent-pale, var(--vvd-color-neutral-300))}.time-pickers .option{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.time-pickers .option: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}.time-pickers .option: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}.time-pickers .option:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.time-pickers .option: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}.time-pickers .option: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}.time-pickers .option{display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:28px;color:var(--_appearance-color-text);cursor:pointer;font:var(--vvd-typography-base);inline-size:50px}";
438
+ const styles = ":host{display:inline-block}.time-pickers{display:flex;overflow:hidden;justify-content:center;padding:4px;block-size:calc(28px * var(--_inline-time-picker-num-options-visible) + 4px * (var(--_inline-time-picker-num-options-visible) - 1));gap:4px}.time-pickers .picker-wrapper{position:relative;display:flex;flex-direction:column;border-radius:4px}.time-pickers .picker-wrapper.focused{--focus-stroke-gap-color: transparent;--focus-inset: -2px;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))}.time-pickers .picker{position:relative;display:flex;overflow:hidden scroll;flex-direction:column;padding:0 4px;border-radius:4px;margin:0 -4px;gap:4px;inline-size:50px;list-style:none;scrollbar-width:none}.time-pickers .picker:hover{scrollbar-width:auto}.time-pickers .picker:after{display:block;flex-shrink:0;block-size:calc(28px * (var(--_inline-time-picker-num-options-visible) - 1) + 4px * (var(--_inline-time-picker-num-options-visible) - 1 - 1));content:\"\"}.time-pickers .picker:focus-visible{outline:none}.time-pickers .option{--_connotation-color-primary: var(--vvd-time-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-time-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-time-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-time-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-time-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-time-picker-accent-pale, var(--vvd-color-neutral-300))}.time-pickers .option{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.time-pickers .option: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}.time-pickers .option: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}.time-pickers .option:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.time-pickers .option: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}.time-pickers .option: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}.time-pickers .option{display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:28px;color:var(--_appearance-color-text);cursor:pointer;font:var(--vvd-typography-base);inline-size:50px}.time-pickers .picker-wrapper:not(.focused) .picker:focus-visible .option.selected{--focus-stroke-gap-color: transparent;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))}";
390
439
 
391
440
  const inlineTimePickerDefinition = vividElement.defineVividComponent(
392
441
  "inline-time-picker",
package/shared/time-selection-picker.template.js CHANGED
@@ -215,8 +215,10 @@ const shouldDisplay12hClock = (x) => x.clock === "12h";
215
215
  const onPickerOptionClick = (x, column, optionValue) => {
216
216
  emitChange(x, column.updatedValue(x, optionValue));
217
217
  scrollToOption(x, column.id, optionValue, "start");
218
- const nextPickerEl = x.shadowRoot.querySelector(
219
- `#${column.id} + .picker`
218
+ const currentPicker = x.shadowRoot.querySelector(`#${column.id}`)?.closest(".picker-wrapper");
219
+ const nextPickerWrapper = currentPicker?.nextElementSibling;
220
+ const nextPickerEl = nextPickerWrapper?.querySelector(
221
+ ".picker"
220
222
  );
221
223
  if (nextPickerEl) {
222
224
  nextPickerEl.focus();
@@ -241,6 +243,7 @@ const onPickerKeyDown = (x, column, event) => {
241
243
  const newValue = options[newIndex].value;
242
244
  emitChange(x, column.updatedValue(x, newValue));
243
245
  scrollToOption(x, column.id, newValue, "nearest");
246
+ x._clearFocusedClasses();
244
247
  }
245
248
  return true;
246
249
  };
@@ -260,6 +263,7 @@ const onBaseKeyDown = (x, event) => {
260
263
  if (x.shadowRoot.activeElement !== terminalElement) {
261
264
  ignoreEventInFocusTraps(event);
262
265
  }
266
+ x._applyFocusedClass();
263
267
  }
264
268
  return true;
265
269
  };
@@ -267,36 +271,40 @@ const emitChange = (x, time) => {
267
271
  x.$emit("change", time, { bubbles: false, composed: false });
268
272
  };
269
273
  const renderPicker = (column) => {
270
- return html`<ul
271
- id="${column.id}"
272
- class="picker"
273
- role="listbox"
274
- tabindex="0"
275
- aria-label="${column.getLabel}"
276
- aria-activedescendant="${(x) => column.getSelectedOptionValue(x) ? `${column.id}-${column.getSelectedOptionValue(x)}` : void 0}"
277
- @keydown="${(x, c) => onPickerKeyDown(x, column, c.event)}"
278
- >
279
- ${repeat(
274
+ return html`<div class="picker-wrapper">
275
+ <ul
276
+ id="${column.id}"
277
+ class="picker"
278
+ role="listbox"
279
+ tabindex="0"
280
+ aria-label="${column.getLabel}"
281
+ aria-activedescendant="${(x) => column.getSelectedOptionValue(x) ? `${column.id}-${column.getSelectedOptionValue(x)}` : void 0}"
282
+ @keydown="${(x, c) => onPickerKeyDown(x, column, c.event)}"
283
+ >
284
+ ${repeat(
280
285
  (x) => column.getOptions(x),
281
286
  html`<li
282
- id="${(x) => `${column.id}-${x.value}`}"
283
- class="${(x, c) => classNames("option", [
287
+ id="${(x) => `${column.id}-${x.value}`}"
288
+ class="${(x, c) => classNames("option", [
284
289
  "selected",
285
290
  column.getSelectedOptionValue(c.parent) === x.value
286
291
  ])}"
287
- aria-selected="${(x, c) => column.getSelectedOptionValue(c.parent) === x.value}"
288
- role="option"
289
- @click="${(x, c) => onPickerOptionClick(c.parent, column, x.value)}"
290
- >
291
- ${(x) => x.label}
292
- </li>`
292
+ aria-selected="${(x, c) => column.getSelectedOptionValue(c.parent) === x.value}"
293
+ role="option"
294
+ @click="${(x, c) => onPickerOptionClick(c.parent, column, x.value)}"
295
+ >
296
+ ${(x) => x.label}
297
+ </li>`
293
298
  )}
294
- </ul>`;
299
+ </ul>
300
+ </div>`;
295
301
  };
296
302
  const InlineTimePickerTemplate = () => {
297
303
  return html`<div
298
304
  class="time-pickers"
299
305
  @keydown="${(x, { event }) => onBaseKeyDown(x, event)}"
306
+ @focusout="${(x) => x._onFocusOut()}"
307
+ @pointerdown="${(x) => x._onPointerDown()}"
300
308
  >
301
309
  ${renderPicker(HoursColumn)} ${renderPicker(MinutesColumn)}
302
310
  ${when(shouldDisplaySecondsPicker, renderPicker(SecondsColumn))}
@@ -318,6 +326,19 @@ class InlineTimePicker extends Localized(VividElement) {
318
326
  super(...arguments);
319
327
  this.minutesStep = 1;
320
328
  this.clock = "24h";
329
+ this.focusedPickerClass = "focused";
330
+ /**
331
+ * @internal
332
+ */
333
+ this._onFocusOut = () => {
334
+ this._clearFocusedClasses();
335
+ };
336
+ /**
337
+ * @internal
338
+ */
339
+ this._onPointerDown = () => {
340
+ this._clearFocusedClasses();
341
+ };
321
342
  }
322
343
  valueChanged(_, newValue) {
323
344
  if (newValue !== void 0 && !isValidTimeStr(newValue)) {
@@ -363,6 +384,34 @@ class InlineTimePicker extends Localized(VividElement) {
363
384
  ".picker"
364
385
  );
365
386
  firstFocusableElement.focus(options);
387
+ this._applyFocusedClass();
388
+ }
389
+ /**
390
+ * @internal
391
+ * Apply 'focused' class to the wrapper element of an active picker
392
+ */
393
+ _applyFocusedClass() {
394
+ const pickers = this.shadowRoot.querySelectorAll(".picker");
395
+ requestAnimationFrame(() => {
396
+ const active = this.shadowRoot.activeElement;
397
+ pickers.forEach((el) => {
398
+ if (el === active) {
399
+ el.parentElement?.classList.add(this.focusedPickerClass);
400
+ } else {
401
+ el.parentElement?.classList.remove(this.focusedPickerClass);
402
+ }
403
+ });
404
+ });
405
+ }
406
+ /**
407
+ * @internal
408
+ * Clear 'focused' classes from all pickers wrappers
409
+ */
410
+ _clearFocusedClasses() {
411
+ const pickers = this.shadowRoot.querySelectorAll(".picker");
412
+ pickers.forEach((el) => {
413
+ el.parentElement?.classList.remove(this.focusedPickerClass);
414
+ });
366
415
  }
367
416
  }
368
417
  __decorateClass$2([
@@ -384,7 +433,7 @@ __decorateClass$2([
384
433
  observable
385
434
  ], InlineTimePicker.prototype, "max");
386
435
 
387
- const styles = ":host{display:inline-block}.time-pickers{display:flex;overflow:hidden;justify-content:center;padding:4px;block-size:calc(28px * var(--_inline-time-picker-num-options-visible) + 4px * (var(--_inline-time-picker-num-options-visible) - 1));gap:4px}.time-pickers .picker{position:relative;display:flex;overflow:hidden;flex-direction:column;padding:0;border-radius:4px;margin:0;gap:4px;inline-size:50px;list-style:none}.time-pickers .picker:hover{overflow-y:auto}.time-pickers .picker:after{display:block;flex-shrink:0;block-size:calc(28px * (var(--_inline-time-picker-num-options-visible) - 1) + 4px * (var(--_inline-time-picker-num-options-visible) - 1 - 1));content:\"\"}.time-pickers .picker:focus-visible{--focus-stroke-gap-color: transparent;--focus-inset: -2px;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))}.time-pickers .option{--_connotation-color-primary: var(--vvd-time-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-time-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-time-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-time-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-time-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-time-picker-accent-pale, var(--vvd-color-neutral-300))}.time-pickers .option{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.time-pickers .option: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}.time-pickers .option: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}.time-pickers .option:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.time-pickers .option: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}.time-pickers .option: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}.time-pickers .option{display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:28px;color:var(--_appearance-color-text);cursor:pointer;font:var(--vvd-typography-base);inline-size:50px}";
436
+ const styles = ":host{display:inline-block}.time-pickers{display:flex;overflow:hidden;justify-content:center;padding:4px;block-size:calc(28px * var(--_inline-time-picker-num-options-visible) + 4px * (var(--_inline-time-picker-num-options-visible) - 1));gap:4px}.time-pickers .picker-wrapper{position:relative;display:flex;flex-direction:column;border-radius:4px}.time-pickers .picker-wrapper.focused{--focus-stroke-gap-color: transparent;--focus-inset: -2px;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))}.time-pickers .picker{position:relative;display:flex;overflow:hidden scroll;flex-direction:column;padding:0 4px;border-radius:4px;margin:0 -4px;gap:4px;inline-size:50px;list-style:none;scrollbar-width:none}.time-pickers .picker:hover{scrollbar-width:auto}.time-pickers .picker:after{display:block;flex-shrink:0;block-size:calc(28px * (var(--_inline-time-picker-num-options-visible) - 1) + 4px * (var(--_inline-time-picker-num-options-visible) - 1 - 1));content:\"\"}.time-pickers .picker:focus-visible{outline:none}.time-pickers .option{--_connotation-color-primary: var(--vvd-time-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-time-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-time-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-time-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-time-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-time-picker-accent-pale, var(--vvd-color-neutral-300))}.time-pickers .option{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.time-pickers .option: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}.time-pickers .option: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}.time-pickers .option:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.time-pickers .option: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}.time-pickers .option: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}.time-pickers .option{display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:28px;color:var(--_appearance-color-text);cursor:pointer;font:var(--vvd-typography-base);inline-size:50px}.time-pickers .picker-wrapper:not(.focused) .picker:focus-visible .option.selected{--focus-stroke-gap-color: transparent;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))}";
388
437
 
389
438
  const inlineTimePickerDefinition = defineVividComponent(
390
439
  "inline-time-picker",
package/shared/vivid-element.cjs CHANGED
@@ -2734,7 +2734,7 @@ const ReplacedPropHandling = (Base) => {
2734
2734
 
2735
2735
  class VividElement extends AriaMixin(ReplacedPropHandling(FASTElement)) {
2736
2736
  static {
2737
- this.VIVID_VERSION = "4.27.0";
2737
+ this.VIVID_VERSION = "4.28.0";
2738
2738
  }
2739
2739
  /**
2740
2740
  * Add data-vvd-component attribute with component name globally,
package/shared/vivid-element.js CHANGED
@@ -2732,7 +2732,7 @@ const ReplacedPropHandling = (Base) => {
2732
2732
 
2733
2733
  class VividElement extends AriaMixin(ReplacedPropHandling(FASTElement)) {
2734
2734
  static {
2735
- this.VIVID_VERSION = "4.27.0";
2735
+ this.VIVID_VERSION = "4.28.0";
2736
2736
  }
2737
2737
  /**
2738
2738
  * Add data-vvd-component attribute with component name globally,
package/styles/core/all.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 26 Jun 2025 11:10:08 GMT
3
+ * Generated on Thu, 26 Jun 2025 11:10:05 GMT
4
4
  */
5
5
  .vvd-root {
6
6
  background-color: var(--vvd-color-canvas);
package/styles/core/theme.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 26 Jun 2025 11:10:08 GMT
3
+ * Generated on Thu, 26 Jun 2025 11:10:05 GMT
4
4
  */
5
5
  .vvd-root {
6
6
  background-color: var(--vvd-color-canvas);
package/styles/core/typography.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 26 Jun 2025 11:10:08 GMT
3
+ * Generated on Thu, 26 Jun 2025 11:10:05 GMT
4
4
  */
5
5
  .vvd-root:root {
6
6
  --vvd-size-font-scale-base: 1rem;
package/styles/tokens/theme-dark.css CHANGED
@@ -1,18 +1,18 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 26 Jun 2025 11:10:08 GMT
3
+ * Generated on Thu, 26 Jun 2025 11:10:05 GMT
4
4
  */
5
5
  /**
6
6
  * Do not edit directly
7
- * Generated on Thu, 26 Jun 2025 11:10:08 GMT
7
+ * Generated on Thu, 26 Jun 2025 11:10:05 GMT
8
8
  */
9
9
  /**
10
10
  * Do not edit directly
11
- * Generated on Thu, 26 Jun 2025 11:10:08 GMT
11
+ * Generated on Thu, 26 Jun 2025 11:10:05 GMT
12
12
  */
13
13
  /**
14
14
  * Do not edit directly
15
- * Generated on Thu, 26 Jun 2025 11:10:08 GMT
15
+ * Generated on Thu, 26 Jun 2025 11:10:05 GMT
16
16
  */
17
17
  @property --vvd-size-density {
18
18
  syntax: "<integer>";
package/styles/tokens/theme-light.css CHANGED
@@ -1,18 +1,18 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 26 Jun 2025 11:10:08 GMT
3
+ * Generated on Thu, 26 Jun 2025 11:10:05 GMT
4
4
  */
5
5
  /**
6
6
  * Do not edit directly
7
- * Generated on Thu, 26 Jun 2025 11:10:08 GMT
7
+ * Generated on Thu, 26 Jun 2025 11:10:05 GMT
8
8
  */
9
9
  /**
10
10
  * Do not edit directly
11
- * Generated on Thu, 26 Jun 2025 11:10:08 GMT
11
+ * Generated on Thu, 26 Jun 2025 11:10:05 GMT
12
12
  */
13
13
  /**
14
14
  * Do not edit directly
15
- * Generated on Thu, 26 Jun 2025 11:10:08 GMT
15
+ * Generated on Thu, 26 Jun 2025 11:10:05 GMT
16
16
  */
17
17
  @property --vvd-size-density {
18
18
  syntax: "<integer>";
package/styles/tokens/vivid-2-compat.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 26 Jun 2025 11:10:08 GMT
3
+ * Generated on Thu, 26 Jun 2025 11:10:05 GMT
4
4
  */
5
5
  .vvd-root, ::part(vvd-root),
6
6
  .vvd-theme-alternate, ::part(vvd-theme-alternate) {