@vonage/vivid 4.4.0 → 4.6.0

package/shared/listbox-option.cjs

@@ -0,0 +1,204 @@
+'use strict';
+
+const index = require('./index.cjs');
+const ariaGlobal = require('./aria-global.cjs');
+const startEnd = require('./start-end.cjs');
+const applyMixins = require('./apply-mixins.cjs');
+const dom = require('./dom.cjs');
+
+/**
+ * Determines if the element is a {@link (ListboxOption:class)}
+ *
+ * @param element - the element to test.
+ * @public
+ */
+function isListboxOption(el) {
+    return (dom.isHTMLElement(el) &&
+        (el.getAttribute("role") === "option" ||
+            el instanceof HTMLOptionElement));
+}
+/**
+ * An Option Custom HTML Element.
+ * Implements {@link https://www.w3.org/TR/wai-aria-1.1/#option | ARIA option }.
+ *
+ * @slot start - Content which can be provided before the listbox option content
+ * @slot end - Content which can be provided after the listbox option content
+ * @slot - The default slot for listbox option content
+ * @csspart content - Wraps the listbox option content
+ *
+ * @public
+ */
+let ListboxOption$1 = class ListboxOption extends index.FoundationElement {
+    constructor(text, value, defaultSelected, selected) {
+        super();
+        /**
+         * The defaultSelected state of the option.
+         * @public
+         */
+        this.defaultSelected = false;
+        /**
+         * Tracks whether the "selected" property has been changed.
+         * @internal
+         */
+        this.dirtySelected = false;
+        /**
+         * The checked state of the control.
+         *
+         * @public
+         */
+        this.selected = this.defaultSelected;
+        /**
+         * Track whether the value has been changed from the initial value
+         */
+        this.dirtyValue = false;
+        if (text) {
+            this.textContent = text;
+        }
+        if (value) {
+            this.initialValue = value;
+        }
+        if (defaultSelected) {
+            this.defaultSelected = defaultSelected;
+        }
+        if (selected) {
+            this.selected = selected;
+        }
+        this.proxy = new Option(`${this.textContent}`, this.initialValue, this.defaultSelected, this.selected);
+        this.proxy.disabled = this.disabled;
+    }
+    /**
+     * Updates the ariaChecked property when the checked property changes.
+     *
+     * @param prev - the previous checked value
+     * @param next - the current checked value
+     *
+     * @public
+     */
+    checkedChanged(prev, next) {
+        if (typeof next === "boolean") {
+            this.ariaChecked = next ? "true" : "false";
+            return;
+        }
+        this.ariaChecked = null;
+    }
+    /**
+     * Updates the proxy's text content when the default slot changes.
+     * @param prev - the previous content value
+     * @param next - the current content value
+     *
+     * @internal
+     */
+    contentChanged(prev, next) {
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.textContent = this.textContent;
+        }
+        this.$emit("contentchange", null, { bubbles: true });
+    }
+    defaultSelectedChanged() {
+        if (!this.dirtySelected) {
+            this.selected = this.defaultSelected;
+            if (this.proxy instanceof HTMLOptionElement) {
+                this.proxy.selected = this.defaultSelected;
+            }
+        }
+    }
+    disabledChanged(prev, next) {
+        this.ariaDisabled = this.disabled ? "true" : "false";
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.disabled = this.disabled;
+        }
+    }
+    selectedAttributeChanged() {
+        this.defaultSelected = this.selectedAttribute;
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.defaultSelected = this.defaultSelected;
+        }
+    }
+    selectedChanged() {
+        this.ariaSelected = this.selected ? "true" : "false";
+        if (!this.dirtySelected) {
+            this.dirtySelected = true;
+        }
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.selected = this.selected;
+        }
+    }
+    initialValueChanged(previous, next) {
+        // If the value is clean and the component is connected to the DOM
+        // then set value equal to the attribute value.
+        if (!this.dirtyValue) {
+            this.value = this.initialValue;
+            this.dirtyValue = false;
+        }
+    }
+    get label() {
+        var _a;
+        return (_a = this.value) !== null && _a !== void 0 ? _a : this.text;
+    }
+    get text() {
+        var _a, _b;
+        return (_b = (_a = this.textContent) === null || _a === void 0 ? void 0 : _a.replace(/\s+/g, " ").trim()) !== null && _b !== void 0 ? _b : "";
+    }
+    set value(next) {
+        const newValue = `${next !== null && next !== void 0 ? next : ""}`;
+        this._value = newValue;
+        this.dirtyValue = true;
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.value = newValue;
+        }
+        index.Observable.notify(this, "value");
+    }
+    get value() {
+        var _a;
+        index.Observable.track(this, "value");
+        return (_a = this._value) !== null && _a !== void 0 ? _a : this.text;
+    }
+    get form() {
+        return this.proxy ? this.proxy.form : null;
+    }
+};
+index.__decorate([
+    index.observable
+], ListboxOption$1.prototype, "checked", void 0);
+index.__decorate([
+    index.observable
+], ListboxOption$1.prototype, "content", void 0);
+index.__decorate([
+    index.observable
+], ListboxOption$1.prototype, "defaultSelected", void 0);
+index.__decorate([
+    index.attr({ mode: "boolean" })
+], ListboxOption$1.prototype, "disabled", void 0);
+index.__decorate([
+    index.attr({ attribute: "selected", mode: "boolean" })
+], ListboxOption$1.prototype, "selectedAttribute", void 0);
+index.__decorate([
+    index.observable
+], ListboxOption$1.prototype, "selected", void 0);
+index.__decorate([
+    index.attr({ attribute: "value", mode: "fromView" })
+], ListboxOption$1.prototype, "initialValue", void 0);
+/**
+ * States and properties relating to the ARIA `option` role.
+ *
+ * @public
+ */
+class DelegatesARIAListboxOption {
+}
+index.__decorate([
+    index.observable
+], DelegatesARIAListboxOption.prototype, "ariaChecked", void 0);
+index.__decorate([
+    index.observable
+], DelegatesARIAListboxOption.prototype, "ariaPosInSet", void 0);
+index.__decorate([
+    index.observable
+], DelegatesARIAListboxOption.prototype, "ariaSelected", void 0);
+index.__decorate([
+    index.observable
+], DelegatesARIAListboxOption.prototype, "ariaSetSize", void 0);
+applyMixins.applyMixins(DelegatesARIAListboxOption, ariaGlobal.ARIAGlobalStatesAndProperties);
+applyMixins.applyMixins(ListboxOption$1, startEnd.StartEnd, DelegatesARIAListboxOption);
+
+exports.ListboxOption = ListboxOption$1;
+exports.isListboxOption = isListboxOption;

package/shared/listbox-option.js

@@ -0,0 +1,201 @@
+import { F as FoundationElement, O as Observable, _ as __decorate, o as observable, a as attr } from './index.js';
+import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
+import { S as StartEnd } from './start-end.js';
+import { a as applyMixins } from './apply-mixins.js';
+import { i as isHTMLElement } from './dom.js';
+
+/**
+ * Determines if the element is a {@link (ListboxOption:class)}
+ *
+ * @param element - the element to test.
+ * @public
+ */
+function isListboxOption(el) {
+    return (isHTMLElement(el) &&
+        (el.getAttribute("role") === "option" ||
+            el instanceof HTMLOptionElement));
+}
+/**
+ * An Option Custom HTML Element.
+ * Implements {@link https://www.w3.org/TR/wai-aria-1.1/#option | ARIA option }.
+ *
+ * @slot start - Content which can be provided before the listbox option content
+ * @slot end - Content which can be provided after the listbox option content
+ * @slot - The default slot for listbox option content
+ * @csspart content - Wraps the listbox option content
+ *
+ * @public
+ */
+let ListboxOption$1 = class ListboxOption extends FoundationElement {
+    constructor(text, value, defaultSelected, selected) {
+        super();
+        /**
+         * The defaultSelected state of the option.
+         * @public
+         */
+        this.defaultSelected = false;
+        /**
+         * Tracks whether the "selected" property has been changed.
+         * @internal
+         */
+        this.dirtySelected = false;
+        /**
+         * The checked state of the control.
+         *
+         * @public
+         */
+        this.selected = this.defaultSelected;
+        /**
+         * Track whether the value has been changed from the initial value
+         */
+        this.dirtyValue = false;
+        if (text) {
+            this.textContent = text;
+        }
+        if (value) {
+            this.initialValue = value;
+        }
+        if (defaultSelected) {
+            this.defaultSelected = defaultSelected;
+        }
+        if (selected) {
+            this.selected = selected;
+        }
+        this.proxy = new Option(`${this.textContent}`, this.initialValue, this.defaultSelected, this.selected);
+        this.proxy.disabled = this.disabled;
+    }
+    /**
+     * Updates the ariaChecked property when the checked property changes.
+     *
+     * @param prev - the previous checked value
+     * @param next - the current checked value
+     *
+     * @public
+     */
+    checkedChanged(prev, next) {
+        if (typeof next === "boolean") {
+            this.ariaChecked = next ? "true" : "false";
+            return;
+        }
+        this.ariaChecked = null;
+    }
+    /**
+     * Updates the proxy's text content when the default slot changes.
+     * @param prev - the previous content value
+     * @param next - the current content value
+     *
+     * @internal
+     */
+    contentChanged(prev, next) {
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.textContent = this.textContent;
+        }
+        this.$emit("contentchange", null, { bubbles: true });
+    }
+    defaultSelectedChanged() {
+        if (!this.dirtySelected) {
+            this.selected = this.defaultSelected;
+            if (this.proxy instanceof HTMLOptionElement) {
+                this.proxy.selected = this.defaultSelected;
+            }
+        }
+    }
+    disabledChanged(prev, next) {
+        this.ariaDisabled = this.disabled ? "true" : "false";
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.disabled = this.disabled;
+        }
+    }
+    selectedAttributeChanged() {
+        this.defaultSelected = this.selectedAttribute;
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.defaultSelected = this.defaultSelected;
+        }
+    }
+    selectedChanged() {
+        this.ariaSelected = this.selected ? "true" : "false";
+        if (!this.dirtySelected) {
+            this.dirtySelected = true;
+        }
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.selected = this.selected;
+        }
+    }
+    initialValueChanged(previous, next) {
+        // If the value is clean and the component is connected to the DOM
+        // then set value equal to the attribute value.
+        if (!this.dirtyValue) {
+            this.value = this.initialValue;
+            this.dirtyValue = false;
+        }
+    }
+    get label() {
+        var _a;
+        return (_a = this.value) !== null && _a !== void 0 ? _a : this.text;
+    }
+    get text() {
+        var _a, _b;
+        return (_b = (_a = this.textContent) === null || _a === void 0 ? void 0 : _a.replace(/\s+/g, " ").trim()) !== null && _b !== void 0 ? _b : "";
+    }
+    set value(next) {
+        const newValue = `${next !== null && next !== void 0 ? next : ""}`;
+        this._value = newValue;
+        this.dirtyValue = true;
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.value = newValue;
+        }
+        Observable.notify(this, "value");
+    }
+    get value() {
+        var _a;
+        Observable.track(this, "value");
+        return (_a = this._value) !== null && _a !== void 0 ? _a : this.text;
+    }
+    get form() {
+        return this.proxy ? this.proxy.form : null;
+    }
+};
+__decorate([
+    observable
+], ListboxOption$1.prototype, "checked", void 0);
+__decorate([
+    observable
+], ListboxOption$1.prototype, "content", void 0);
+__decorate([
+    observable
+], ListboxOption$1.prototype, "defaultSelected", void 0);
+__decorate([
+    attr({ mode: "boolean" })
+], ListboxOption$1.prototype, "disabled", void 0);
+__decorate([
+    attr({ attribute: "selected", mode: "boolean" })
+], ListboxOption$1.prototype, "selectedAttribute", void 0);
+__decorate([
+    observable
+], ListboxOption$1.prototype, "selected", void 0);
+__decorate([
+    attr({ attribute: "value", mode: "fromView" })
+], ListboxOption$1.prototype, "initialValue", void 0);
+/**
+ * States and properties relating to the ARIA `option` role.
+ *
+ * @public
+ */
+class DelegatesARIAListboxOption {
+}
+__decorate([
+    observable
+], DelegatesARIAListboxOption.prototype, "ariaChecked", void 0);
+__decorate([
+    observable
+], DelegatesARIAListboxOption.prototype, "ariaPosInSet", void 0);
+__decorate([
+    observable
+], DelegatesARIAListboxOption.prototype, "ariaSelected", void 0);
+__decorate([
+    observable
+], DelegatesARIAListboxOption.prototype, "ariaSetSize", void 0);
+applyMixins(DelegatesARIAListboxOption, ARIAGlobalStatesAndProperties);
+applyMixins(ListboxOption$1, StartEnd, DelegatesARIAListboxOption);
+
+export { ListboxOption$1 as L, isListboxOption as i };

package/shared/listbox.cjs

@@ -2,7 +2,7 @@
 
 const keyCodes$1 = require('./key-codes2.cjs');
 const index = require('./index.cjs');
-const definition = require('./definition36.cjs');
+const listboxOption = require('./listbox-option.cjs');
 const ariaGlobal = require('./aria-global.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const keyCodes = require('./key-codes.cjs');
@@ -458,7 +458,7 @@ let Listbox$1 = class Listbox extends index.FoundationElement {
      */
     slottedOptionsChanged(prev, next) {
         this.options = next.reduce((options, item) => {
-            if (definition.isListboxOption(item)) {
+            if (listboxOption.isListboxOption(item)) {
                 options.push(item);
             }
             return options;
@@ -503,7 +503,7 @@ let Listbox$1 = class Listbox extends index.FoundationElement {
  * @param n - element to filter
  * @public
  */
-Listbox$1.slottedOptionFilter = (n) => definition.isListboxOption(n) && !n.hidden;
+Listbox$1.slottedOptionFilter = (n) => listboxOption.isListboxOption(n) && !n.hidden;
 /**
  * Typeahead timeout in milliseconds.
  *

package/shared/listbox.js

@@ -1,6 +1,6 @@
 import { k as keyArrowLeft, a as keyArrowRight } from './key-codes2.js';
 import { F as FoundationElement, O as Observable, _ as __decorate, a as attr, o as observable, D as DOM, n as nullableNumberConverter } from './index.js';
-import { i as isListboxOption } from './definition36.js';
+import { i as isListboxOption } from './listbox-option.js';
 import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { a as keySpace, b as keyEscape, k as keyEnter, c as keyTab, d as keyEnd, e as keyArrowUp, f as keyArrowDown, g as keyHome } from './key-codes.js';

package/shared/localization/Locale.d.ts

@@ -10,6 +10,8 @@ import type { VideoPlayerLocale } from '../../lib/video-player/locale';
 import type { TimePickerLocale } from '../../lib/time-picker/locale';
 import type { RangeSliderLocale } from '../../lib/range-slider/locale';
 import type { DialPadLocale } from '../../lib/dial-pad/locale';
+import type { TabLocale } from '../../lib/tab/locale';
+import type { SearchableSelectLocale } from '../../lib/searchable-select/locale';
 export interface Locale {
     lang: string;
     common: {
@@ -27,4 +29,6 @@ export interface Locale {
     videoPlayer: VideoPlayerLocale;
     rangeSlider: RangeSliderLocale;
     dialPad: DialPadLocale;
+    tab: TabLocale;
+    searchableSelect: SearchableSelectLocale;
 }

package/shared/localized.cjs

@@ -1,11 +1,35 @@
 'use strict';
 
-const index = require('./index2.cjs');
+const locales_enUS = require('../locales/en-US.cjs');
+const index = require('./index.cjs');
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class CurrentLocale {
+  constructor() {
+    this.locale = locales_enUS;
+  }
+}
+__decorateClass([
+  index.observable
+], CurrentLocale.prototype, "locale");
+const currentLocale = new CurrentLocale();
+const setLocale = (locale) => {
+  currentLocale.locale = locale;
+};
 
 class Localized {
   get locale() {
-    return index.currentLocale.locale;
+    return currentLocale.locale;
   }
 }
 
 exports.Localized = Localized;
+exports.setLocale = setLocale;

package/shared/localized.js

@@ -1,4 +1,27 @@
-import { c as currentLocale } from './index2.js';
+import enUS from '../locales/en-US.js';
+import { o as observable } from './index.js';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class CurrentLocale {
+  constructor() {
+    this.locale = enUS;
+  }
+}
+__decorateClass([
+  observable
+], CurrentLocale.prototype, "locale");
+const currentLocale = new CurrentLocale();
+const setLocale = (locale) => {
+  currentLocale.locale = locale;
+};
 
 class Localized {
   get locale() {
@@ -6,4 +29,4 @@ class Localized {
   }
 }
 
-export { Localized as L };
+export { Localized as L, setLocale as s };

package/shared/playbackRates.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+function getPlaybackRatesArray(playbackRates) {
+  if (playbackRates === "") return [];
+  const ratesArray = [];
+  playbackRates.split(",").forEach((numStr) => {
+    const num = Number(numStr);
+    if (!isNaN(num)) ratesArray.push(num);
+  });
+  return ratesArray;
+}
+
+exports.getPlaybackRatesArray = getPlaybackRatesArray;

package/shared/playbackRates.js

@@ -0,0 +1,11 @@
+function getPlaybackRatesArray(playbackRates) {
+  if (playbackRates === "") return [];
+  const ratesArray = [];
+  playbackRates.split(",").forEach((numStr) => {
+    const num = Number(numStr);
+    if (!isNaN(num)) ratesArray.push(num);
+  });
+  return ratesArray;
+}
+
+export { getPlaybackRatesArray as g };

package/shared/presentationDate.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
 const definition$2 = require('./definition11.cjs');
-const definition = require('./definition63.cjs');
-const definition$1 = require('./definition55.cjs');
+const definition = require('./definition64.cjs');
+const definition$1 = require('./definition56.cjs');
 const definition$3 = require('./definition22.cjs');
 const index = require('./index.cjs');
 const ref = require('./ref.cjs');
@@ -10,14 +10,14 @@ const slotted = require('./slotted.cjs');
 const repeat = require('./repeat.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
-require('./affix.cjs');
-const index$1 = require('./index2.cjs');
-const localized = require('./localized.cjs');
-const trappedFocus = require('./trapped-focus.cjs');
 const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
+const index$1 = require('./index2.cjs');
 const formAssociated = require('./form-associated.cjs');
+const trappedFocus = require('./trapped-focus.cjs');
+const formElements = require('./form-elements.cjs');
+const localized = require('./localized.cjs');
 
-const styles = ":host{display:inline-block}.base{display:inline-block;inline-size:100%}.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column;padding:12px;gap:12px}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;gap:8px}.segments{display: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;--focus-inset: -2px}.calendar .calendar-day.start,.calendar .calendar-day.end{border:2px solid var(--vvd-color-cta-50);background-color:var(--vvd-color-cta-200)}.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{position:relative;padding:0;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer}.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:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));color:var(--vvd-color-canvas-text)}.button.current{border:1px solid var(--vvd-color-neutral-200)}.button:disabled{cursor:not-allowed}";
+const styles = ":host{display:inline-block}.base{display:inline-block;inline-size:100%}.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column;padding:12px;gap:12px}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;gap:8px}.segments{display: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;--focus-inset: -2px}.calendar .calendar-day.start,.calendar .calendar-day.end{border:2px solid var(--vvd-color-cta-50);background-color:var(--vvd-color-cta-200)}.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;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));color:var(--vvd-color-canvas-text)}.button.current{border:1px solid var(--vvd-color-neutral-200)}.button:disabled{cursor:not-allowed}";
 
 function _typeof(obj) {
   "@babel/helpers - typeof";
@@ -1289,7 +1289,7 @@ function formatTimezoneShort(offset, dirtyDelimiter) {
   if (minutes === 0) {
     return sign + String(hours);
   }
-  var delimiter = dirtyDelimiter ;
+  var delimiter = dirtyDelimiter;
   return sign + String(hours) + delimiter + addLeadingZeros(minutes, 2);
 }
 function formatTimezoneWithOptionalMinutes(offset, dirtyDelimiter) {
@@ -2406,7 +2406,7 @@ function _unsupportedIterableToArray(o, minLen) {
 function _createForOfIteratorHelper(o, allowArrayLike) {
   var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
   if (!it) {
-    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike  ) {
+    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike) {
       if (it) o = it;
       var i = 0;
       var F = function F() {};
@@ -5834,7 +5834,7 @@ class DatePickerBase extends FormAssociatedDatePickerBase {
    * @internal
    */
   _onBaseKeyDown(event) {
-    if (event.key === "Escape") {
+    if (this._popupOpen && index$1.handleEscapeKeyAndStopPropogation(event)) {
       this._closePopup();
       return false;
     }
@@ -6199,7 +6199,7 @@ __decorateClass([
 applyMixinsWithObservables.applyMixinsWithObservables(
   DatePickerBase,
   localized.Localized,
-  index$1.FormElementHelperText,
+  formElements.FormElementHelperText,
   trappedFocus.TrappedFocus
 );