@vonage/vivid 4.17.0 → 4.18.0

package/shared/datetime/dateTimeStr.d.ts

@@ -0,0 +1,6 @@
+import { type TimeStr } from './time';
+import { type DateStr } from './dateStr';
+export type DateTimeStr = string;
+export declare const extractDatePart: (dateTimeStr: DateTimeStr | '') => DateStr | '';
+export declare const extractTimePart: (dateTimeStr: DateTimeStr | '') => TimeStr | '';
+export declare const isValidDateTimeStr: (string: string) => boolean;

package/shared/datetime/presentationDate.d.ts

@@ -0,0 +1,4 @@
+import type { CalendarPickerLocale } from '../picker-field/mixins/calendar-picker.locale';
+import { type DateStr } from './dateStr';
+export declare const formatPresentationDate: (dateStr: DateStr, locale: CalendarPickerLocale) => string;
+export declare const parsePresentationDate: (presentationDate: string, locale: CalendarPickerLocale) => DateStr;

package/shared/{date-picker/calendar → datetime}/presentationDateRange.d.ts

@@ -1,5 +1,5 @@
-import type { DatePickerLocale } from '../locale';
+import type { CalendarPickerLocale } from '../picker-field/mixins/calendar-picker.locale';
 import type { DateRange } from './dateRange';
 export declare const formatRange: (from: string, to: string) => string;
-export declare const formatPresentationDateRange: (dateRange: DateRange, locale: DatePickerLocale) => string;
-export declare const parsePresentationDateRange: (presentationDateRange: string, locale: DatePickerLocale) => DateRange;
+export declare const formatPresentationDateRange: (dateRange: DateRange, locale: CalendarPickerLocale) => string;
+export declare const parsePresentationDateRange: (presentationDateRange: string, locale: CalendarPickerLocale) => DateRange;

package/shared/datetime/presentationDateTime.d.ts

@@ -0,0 +1,4 @@
+import type { CalendarPickerLocale } from '../picker-field/mixins/calendar-picker.locale';
+import type { DateTimeStr } from './dateTimeStr';
+export declare const formatPresentationDateTime: (dateTimeStr: DateTimeStr, locale: CalendarPickerLocale, includeSeconds: boolean, use12HourClock: boolean) => string;
+export declare const parsePresentationDateTime: (presentationDateTime: string, locale: CalendarPickerLocale, use12HourClock: boolean) => DateTimeStr;

package/{lib/time-picker/time → shared/datetime}/time.d.ts

@@ -11,5 +11,6 @@ interface ParsedTimeStr {
 }
 export declare const formatTimePart: (part: number) => string;
 export declare const parseTimeStr: (timeStr: TimeStr) => ParsedTimeStr;
+export declare const compareTimeStr: (a: TimeStr, b: TimeStr) => number;
 export declare const hoursAs12hClock: (hour: number) => number;
 export {};

package/shared/definition.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 const vividElement = require('./vivid-element.cjs');
-const definition = require('./definition27.cjs');
+const definition = require('./definition28.cjs');
 const affix = require('./affix.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const ref = require('./ref.cjs');

package/shared/definition.js

@@ -1,5 +1,5 @@
 import { V as VividElement, a as attr, n as nullableNumberConverter, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
-import { i as iconDefinition } from './definition27.js';
+import { i as iconDefinition } from './definition28.js';
 import { A as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { r as ref } from './ref.js';

package/shared/definition11.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-const definition = require('./definition27.cjs');
-const definition$1 = require('./definition37.cjs');
+const definition = require('./definition28.cjs');
+const definition$1 = require('./definition38.cjs');
 const vividElement = require('./vivid-element.cjs');
 const affix = require('./affix.cjs');
 const button = require('./button.cjs');
@@ -190,18 +190,17 @@ function renderButtonContent(context) {
 		aria-atomic="${(x) => x.ariaAtomic}"
 		aria-busy="${(x) => x.ariaBusy}"
 		aria-current="${(x) => x.ariaCurrent}"
-		aria-details="${(x) => x.ariaDetails}"
 		aria-disabled="${(x) => x.ariaDisabled}"
 		aria-expanded="${(x) => x.ariaExpanded}"
-		aria-haspopup="${(x) => x.ariaHaspopup}"
+		aria-haspopup="${(x) => x.ariaHasPopup}"
 		aria-hidden="${(x) => x.ariaHidden}"
 		aria-invalid="${(x) => x.ariaInvalid}"
-		aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
+		aria-keyshortcuts="${(x) => x.ariaKeyShortcuts}"
 		aria-label="${(x) => x.ariaLabel}"
 		aria-live="${(x) => x.ariaLive}"
 		aria-pressed="${(x) => x.ariaPressed}"
 		aria-relevant="${(x) => x.ariaRelevant}"
-		aria-roledescription="${(x) => x.ariaRoledescription}"
+		aria-roledescription="${(x) => x.ariaRoleDescription}"
 		title="${(x) => x.title}"
 		${ref.ref("control")}
 	>
@@ -222,18 +221,16 @@ function renderAnchorContent(context) {
 		aria-atomic="${(x) => x.ariaAtomic}"
 		aria-busy="${(x) => x.ariaBusy}"
 		aria-current="${(x) => x.ariaCurrent}"
-		aria-details="${(x) => x.ariaDetails}"
 		aria-disabled="${(x) => x.ariaDisabled}"
-		aria-errormessage="${(x) => x.ariaErrormessage}"
 		aria-expanded="${(x) => x.ariaExpanded}"
-		aria-haspopup="${(x) => x.ariaHaspopup}"
+		aria-haspopup="${(x) => x.ariaHasPopup}"
 		aria-hidden="${(x) => x.ariaHidden}"
 		aria-invalid="${(x) => x.ariaInvalid}"
-		aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
+		aria-keyshortcuts="${(x) => x.ariaKeyShortcuts}"
 		aria-label="${(x) => x.ariaLabel}"
 		aria-live="${(x) => x.ariaLive}"
 		aria-relevant="${(x) => x.ariaRelevant}"
-		aria-roledescription="${(x) => x.ariaRoledescription}"
+		aria-roledescription="${(x) => x.ariaRoleDescription}"
 		${ref.ref("control")}
 	>
 		${buttonContent(context)}

package/shared/definition11.js

@@ -1,5 +1,5 @@
-import { I as Icon, i as iconDefinition } from './definition27.js';
-import { P as ProgressRing, p as progressRingDefinition } from './definition37.js';
+import { I as Icon, i as iconDefinition } from './definition28.js';
+import { P as ProgressRing, p as progressRingDefinition } from './definition38.js';
 import { a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { A as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { V as VividFoundationButton } from './button.js';
@@ -188,18 +188,17 @@ function renderButtonContent(context) {
 		aria-atomic="${(x) => x.ariaAtomic}"
 		aria-busy="${(x) => x.ariaBusy}"
 		aria-current="${(x) => x.ariaCurrent}"
-		aria-details="${(x) => x.ariaDetails}"
 		aria-disabled="${(x) => x.ariaDisabled}"
 		aria-expanded="${(x) => x.ariaExpanded}"
-		aria-haspopup="${(x) => x.ariaHaspopup}"
+		aria-haspopup="${(x) => x.ariaHasPopup}"
 		aria-hidden="${(x) => x.ariaHidden}"
 		aria-invalid="${(x) => x.ariaInvalid}"
-		aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
+		aria-keyshortcuts="${(x) => x.ariaKeyShortcuts}"
 		aria-label="${(x) => x.ariaLabel}"
 		aria-live="${(x) => x.ariaLive}"
 		aria-pressed="${(x) => x.ariaPressed}"
 		aria-relevant="${(x) => x.ariaRelevant}"
-		aria-roledescription="${(x) => x.ariaRoledescription}"
+		aria-roledescription="${(x) => x.ariaRoleDescription}"
 		title="${(x) => x.title}"
 		${ref("control")}
 	>
@@ -220,18 +219,16 @@ function renderAnchorContent(context) {
 		aria-atomic="${(x) => x.ariaAtomic}"
 		aria-busy="${(x) => x.ariaBusy}"
 		aria-current="${(x) => x.ariaCurrent}"
-		aria-details="${(x) => x.ariaDetails}"
 		aria-disabled="${(x) => x.ariaDisabled}"
-		aria-errormessage="${(x) => x.ariaErrormessage}"
 		aria-expanded="${(x) => x.ariaExpanded}"
-		aria-haspopup="${(x) => x.ariaHaspopup}"
+		aria-haspopup="${(x) => x.ariaHasPopup}"
 		aria-hidden="${(x) => x.ariaHidden}"
 		aria-invalid="${(x) => x.ariaInvalid}"
-		aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
+		aria-keyshortcuts="${(x) => x.ariaKeyShortcuts}"
 		aria-label="${(x) => x.ariaLabel}"
 		aria-live="${(x) => x.ariaLive}"
 		aria-relevant="${(x) => x.ariaRelevant}"
-		aria-roledescription="${(x) => x.ariaRoledescription}"
+		aria-roledescription="${(x) => x.ariaRoleDescription}"
 		${ref("control")}
 	>
 		${buttonContent(context)}

package/shared/definition14.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-const definition$1 = require('./definition27.cjs');
-const definition = require('./definition63.cjs');
+const definition$1 = require('./definition28.cjs');
+const definition = require('./definition64.cjs');
 const vividElement = require('./vivid-element.cjs');
 const enums = require('./enums.cjs');
 const when = require('./when.cjs');

package/shared/definition14.js

@@ -1,5 +1,5 @@
-import { I as Icon, i as iconDefinition } from './definition27.js';
-import { E as Elevation, e as elevationDefinition } from './definition63.js';
+import { I as Icon, i as iconDefinition } from './definition28.js';
+import { E as Elevation, e as elevationDefinition } from './definition64.js';
 import { V as VividElement, a as attr, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { A as Appearance } from './enums.js';
 import { w as when } from './when.js';

package/shared/definition15.cjs

@@ -1,8 +1,9 @@
 'use strict';
 
-const definition = require('./definition27.cjs');
+const definition = require('./definition28.cjs');
 const vividElement = require('./vivid-element.cjs');
 const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
+const delegatesAria = require('./delegates-aria.cjs');
 const formAssociated = require('./form-associated.cjs');
 const formElements = require('./form-elements.cjs');
 const classNames = require('./class-names.cjs');
@@ -31,12 +32,10 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 const keySpace = " ";
-exports.Checkbox = class Checkbox extends FormAssociatedCheckbox {
+exports.Checkbox = class Checkbox extends delegatesAria.DelegatesAria(FormAssociatedCheckbox) {
   constructor() {
     super();
-    this.ariaLabel = null;
     this.tabindex = null;
-    this.ariaChecked = null;
     /**
      * The element's value to be included in form submission when checked.
      * Default to "on" to reach parity with input[type="checkbox"]
@@ -110,18 +109,12 @@ exports.Checkbox = class Checkbox extends FormAssociatedCheckbox {
     }
   }
 };
-__decorateClass([
-  vividElement.attr({ attribute: "aria-label" })
-], exports.Checkbox.prototype, "ariaLabel", 2);
 __decorateClass([
   vividElement.attr({ attribute: "tabindex" })
 ], exports.Checkbox.prototype, "tabindex", 2);
 __decorateClass([
   vividElement.attr
 ], exports.Checkbox.prototype, "connotation", 2);
-__decorateClass([
-  vividElement.attr({ attribute: "aria-checked" })
-], exports.Checkbox.prototype, "ariaChecked", 2);
 __decorateClass([
   vividElement.attr({ attribute: "readonly", mode: "boolean" })
 ], exports.Checkbox.prototype, "readOnly", 2);

package/shared/definition15.js

@@ -1,6 +1,7 @@
-import { I as Icon, i as iconDefinition } from './definition27.js';
+import { I as Icon, i as iconDefinition } from './definition28.js';
 import { V as VividElement, a as attr, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
+import { D as DelegatesAria } from './delegates-aria.js';
 import { C as CheckableFormAssociated } from './form-associated.js';
 import { e as errorText, f as formElements, F as FormElementSuccessText, a as FormElementHelperText, g as getFeedbackTemplate } from './form-elements.js';
 import { c as classNames } from './class-names.js';
@@ -29,12 +30,10 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 const keySpace = " ";
-let Checkbox = class extends FormAssociatedCheckbox {
+let Checkbox = class extends DelegatesAria(FormAssociatedCheckbox) {
   constructor() {
     super();
-    this.ariaLabel = null;
     this.tabindex = null;
-    this.ariaChecked = null;
     /**
      * The element's value to be included in form submission when checked.
      * Default to "on" to reach parity with input[type="checkbox"]
@@ -108,18 +107,12 @@ let Checkbox = class extends FormAssociatedCheckbox {
     }
   }
 };
-__decorateClass([
-  attr({ attribute: "aria-label" })
-], Checkbox.prototype, "ariaLabel", 2);
 __decorateClass([
   attr({ attribute: "tabindex" })
 ], Checkbox.prototype, "tabindex", 2);
 __decorateClass([
   attr
 ], Checkbox.prototype, "connotation", 2);
-__decorateClass([
-  attr({ attribute: "aria-checked" })
-], Checkbox.prototype, "ariaChecked", 2);
 __decorateClass([
   attr({ attribute: "readonly", mode: "boolean" })
 ], Checkbox.prototype, "readOnly", 2);

package/shared/definition16.cjs

@@ -1,9 +1,9 @@
 'use strict';
 
-const definition$2 = require('./definition27.cjs');
-const definition = require('./definition64.cjs');
-const definition$3 = require('./definition35.cjs');
-const textField = require('./text-field2.cjs');
+const definition$2 = require('./definition28.cjs');
+const definition = require('./definition65.cjs');
+const definition$3 = require('./definition36.cjs');
+const textField = require('./text-field.cjs');
 const vividElement = require('./vivid-element.cjs');
 const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
 const listbox = require('./listbox.cjs');
@@ -19,7 +19,7 @@ const slotted = require('./slotted.cjs');
 const classNames = require('./class-names.cjs');
 const when = require('./when.cjs');
 
-const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([aria-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host{position:relative;display:inline-flex;flex-direction:column;gap:4px}.base{--_text-field-gutter-end: 8px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_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(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_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: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{position:absolute;z-index:1;display:inline-block;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);line-height:1;pointer-events:none;transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{position:relative;display:flex;flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}.listbox{display:flex;max-height:var(--combobox-height, 408px);flex-direction:column;padding:4px;border-radius:8px;contain:paint;gap:2px;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width, 100%)}@supports selector(:has(*)){.fieldset:has(.control:focus-within):after{--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))}}@supports not selector(:has(*)){.fieldset:focus-within:after{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));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}";
+const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([aria-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host{position:relative;display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end: 8px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_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(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_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: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{position:absolute;z-index:1;display:inline-block;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);line-height:1;pointer-events:none;transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{position:relative;display:flex;flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px}.listbox{display:flex;max-height:var(--combobox-height, 408px);flex-direction:column;padding:4px;border-radius:8px;contain:paint;gap:2px;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width, 100%)}@supports selector(:has(*)){.fieldset:has(.control:focus-within):after{--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))}}@supports not selector(:has(*)){.fieldset:focus-within:after{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));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}";
 
 class _Combobox extends listbox.Listbox {
 }
@@ -102,7 +102,7 @@ exports.Combobox = class Combobox extends FormAssociatedCombobox {
     return this.autocomplete === ComboboxAutocomplete.both;
   }
   /**
-   * Sets focus and synchronize ARIA attributes when the open property changes.
+   * Sets focus when the open property changes.
    *
    * @param prev - the previous open value
    * @param next - the current open value
@@ -111,14 +111,10 @@ exports.Combobox = class Combobox extends FormAssociatedCombobox {
    */
   openChanged() {
     if (this.open) {
-      this.ariaControls = this.listboxId;
-      this.ariaExpanded = "true";
       this.focusAndScrollOptionIntoView();
       vividElement.DOM.queueUpdate(() => this.focus());
       return;
     }
-    this.ariaControls = "";
-    this.ariaExpanded = "false";
   }
   /**
    * The list of options.
@@ -181,14 +177,14 @@ exports.Combobox = class Combobox extends FormAssociatedCombobox {
       return;
     }
     if (this.open) {
-      const captured = e.target.closest(
+      const capturedOption = e.target.closest(
         `option,[role=option]`
       );
-      if (!captured || captured.disabled) {
+      if (!capturedOption || capturedOption.disabled) {
         return;
       }
-      this.selectedOptions = [captured];
-      this.control.value = captured.text;
+      this.selectedOptions = [capturedOption];
+      this.control.value = capturedOption.text;
       this.clearSelectionRange();
       this.updateValue(true);
     }
@@ -198,6 +194,17 @@ exports.Combobox = class Combobox extends FormAssociatedCombobox {
     }
     return true;
   }
+  /**
+   * Handle closing the listbox when the combobox is open and the chevron icon is clicked.
+   *
+   * @param e - the mouse event
+   * @internal
+   */
+  _chevronIconClickHandler(e) {
+    if (!this.open) return;
+    e.stopPropagation();
+    this.open = false;
+  }
   connectedCallback() {
     super.connectedCallback();
     if (this.value) {
@@ -205,20 +212,6 @@ exports.Combobox = class Combobox extends FormAssociatedCombobox {
     }
     this._popup.anchor = this._anchor;
   }
-  /**
-   * Synchronize the `aria-disabled` property when the `disabled` property changes.
-   *
-   * @param prev - The previous disabled value
-   * @param next - The next disabled value
-   *
-   * @internal
-   */
-  disabledChanged(prev, next) {
-    if (super.disabledChanged) {
-      super.disabledChanged(prev, next);
-    }
-    this.ariaDisabled = this.disabled ? "true" : "false";
-  }
   /**
    * Filter available options by text value.
    *
@@ -599,10 +592,9 @@ function renderInput(context) {
 					id="control"
 					autocomplete="off"
 					class="control"
-					aria-activedescendant="${(x) => x.open ? x.ariaActiveDescendant : null}"
+					aria-activedescendant="${(x) => x.open ? x._activeDescendant : null}"
 					aria-autocomplete="${(x) => x.autocomplete}"
 					aria-controls="${(x) => x.listboxId}"
-					aria-disabled="${(x) => x.ariaDisabled}"
 					aria-expanded="${(x) => x.open}"
 					aria-haspopup="listbox"
 					placeholder="${(x) => x.placeholder}"
@@ -616,7 +608,11 @@ function renderInput(context) {
 			</div>
 			<div class="leading-items-wrapper">
 				<slot name="meta" ${slotted.slotted("metaSlottedContent")}></slot>
-				${chevronTemplate}
+				<div
+					@click="${(x, c) => x._chevronIconClickHandler(c.event)}"
+				>
+					${chevronTemplate}
+				</div>
 			</div>
 		</div>
 	</div>`;
@@ -625,8 +621,6 @@ const comboboxTemplate = (context) => {
   const popupTag = context.tagFor(definition.Popup);
   return vividElement.html`
         <template
-            aria-disabled="${(x) => x.ariaDisabled}"
-            autocomplete="${(x) => x.autocomplete}"
             tabindex="${(x) => !x.disabled ? "0" : null}"
             @click="${(x, c) => x.clickHandler(c.event)}"
             @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -635,6 +629,7 @@ const comboboxTemplate = (context) => {
     return x.keydownHandler(event);
   }}"
         >
+					<div class="control-wrapper">
 			${() => renderInput(context)}
 			<${popupTag} class="popup"
 				style="${setFixedDropdownVarWidth}"
@@ -655,6 +650,7 @@ const comboboxTemplate = (context) => {
 					</slot>
 				</div>
 			</${popupTag}>
+					</div>
 					<div class="feedback-wrapper" @click="${(_, c) => c.event.stopPropagation()}">
 						${formElements.getFeedbackTemplate(context)}
 					</div>

package/shared/definition16.js

@@ -1,7 +1,7 @@
-import { i as iconDefinition } from './definition27.js';
-import { P as Popup, p as popupDefinition } from './definition64.js';
-import { l as listboxOptionDefinition } from './definition35.js';
-import { s as styles$1 } from './text-field2.js';
+import { i as iconDefinition } from './definition28.js';
+import { P as Popup, p as popupDefinition } from './definition65.js';
+import { l as listboxOptionDefinition } from './definition36.js';
+import { s as styles$1 } from './text-field.js';
 import { D as DOM, O as Observable, a as attr, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
 import { L as Listbox } from './listbox.js';
@@ -17,7 +17,7 @@ import { s as slotted } from './slotted.js';
 import { c as classNames } from './class-names.js';
 import { w as when } from './when.js';
 
-const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([aria-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host{position:relative;display:inline-flex;flex-direction:column;gap:4px}.base{--_text-field-gutter-end: 8px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_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(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_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: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{position:absolute;z-index:1;display:inline-block;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);line-height:1;pointer-events:none;transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{position:relative;display:flex;flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}.listbox{display:flex;max-height:var(--combobox-height, 408px);flex-direction:column;padding:4px;border-radius:8px;contain:paint;gap:2px;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width, 100%)}@supports selector(:has(*)){.fieldset:has(.control:focus-within):after{--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))}}@supports not selector(:has(*)){.fieldset:focus-within:after{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));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}";
+const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([aria-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host{position:relative;display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end: 8px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_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(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_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: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{position:absolute;z-index:1;display:inline-block;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);line-height:1;pointer-events:none;transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{position:relative;display:flex;flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px}.listbox{display:flex;max-height:var(--combobox-height, 408px);flex-direction:column;padding:4px;border-radius:8px;contain:paint;gap:2px;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width, 100%)}@supports selector(:has(*)){.fieldset:has(.control:focus-within):after{--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))}}@supports not selector(:has(*)){.fieldset:focus-within:after{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));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}";
 
 class _Combobox extends Listbox {
 }
@@ -100,7 +100,7 @@ let Combobox = class extends FormAssociatedCombobox {
     return this.autocomplete === ComboboxAutocomplete.both;
   }
   /**
-   * Sets focus and synchronize ARIA attributes when the open property changes.
+   * Sets focus when the open property changes.
    *
    * @param prev - the previous open value
    * @param next - the current open value
@@ -109,14 +109,10 @@ let Combobox = class extends FormAssociatedCombobox {
    */
   openChanged() {
     if (this.open) {
-      this.ariaControls = this.listboxId;
-      this.ariaExpanded = "true";
       this.focusAndScrollOptionIntoView();
       DOM.queueUpdate(() => this.focus());
       return;
     }
-    this.ariaControls = "";
-    this.ariaExpanded = "false";
   }
   /**
    * The list of options.
@@ -179,14 +175,14 @@ let Combobox = class extends FormAssociatedCombobox {
       return;
     }
     if (this.open) {
-      const captured = e.target.closest(
+      const capturedOption = e.target.closest(
         `option,[role=option]`
       );
-      if (!captured || captured.disabled) {
+      if (!capturedOption || capturedOption.disabled) {
         return;
       }
-      this.selectedOptions = [captured];
-      this.control.value = captured.text;
+      this.selectedOptions = [capturedOption];
+      this.control.value = capturedOption.text;
       this.clearSelectionRange();
       this.updateValue(true);
     }
@@ -196,6 +192,17 @@ let Combobox = class extends FormAssociatedCombobox {
     }
     return true;
   }
+  /**
+   * Handle closing the listbox when the combobox is open and the chevron icon is clicked.
+   *
+   * @param e - the mouse event
+   * @internal
+   */
+  _chevronIconClickHandler(e) {
+    if (!this.open) return;
+    e.stopPropagation();
+    this.open = false;
+  }
   connectedCallback() {
     super.connectedCallback();
     if (this.value) {
@@ -203,20 +210,6 @@ let Combobox = class extends FormAssociatedCombobox {
     }
     this._popup.anchor = this._anchor;
   }
-  /**
-   * Synchronize the `aria-disabled` property when the `disabled` property changes.
-   *
-   * @param prev - The previous disabled value
-   * @param next - The next disabled value
-   *
-   * @internal
-   */
-  disabledChanged(prev, next) {
-    if (super.disabledChanged) {
-      super.disabledChanged(prev, next);
-    }
-    this.ariaDisabled = this.disabled ? "true" : "false";
-  }
   /**
    * Filter available options by text value.
    *
@@ -597,10 +590,9 @@ function renderInput(context) {
 					id="control"
 					autocomplete="off"
 					class="control"
-					aria-activedescendant="${(x) => x.open ? x.ariaActiveDescendant : null}"
+					aria-activedescendant="${(x) => x.open ? x._activeDescendant : null}"
 					aria-autocomplete="${(x) => x.autocomplete}"
 					aria-controls="${(x) => x.listboxId}"
-					aria-disabled="${(x) => x.ariaDisabled}"
 					aria-expanded="${(x) => x.open}"
 					aria-haspopup="listbox"
 					placeholder="${(x) => x.placeholder}"
@@ -614,7 +606,11 @@ function renderInput(context) {
 			</div>
 			<div class="leading-items-wrapper">
 				<slot name="meta" ${slotted("metaSlottedContent")}></slot>
-				${chevronTemplate}
+				<div
+					@click="${(x, c) => x._chevronIconClickHandler(c.event)}"
+				>
+					${chevronTemplate}
+				</div>
 			</div>
 		</div>
 	</div>`;
@@ -623,8 +619,6 @@ const comboboxTemplate = (context) => {
   const popupTag = context.tagFor(Popup);
   return html`
         <template
-            aria-disabled="${(x) => x.ariaDisabled}"
-            autocomplete="${(x) => x.autocomplete}"
             tabindex="${(x) => !x.disabled ? "0" : null}"
             @click="${(x, c) => x.clickHandler(c.event)}"
             @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -633,6 +627,7 @@ const comboboxTemplate = (context) => {
     return x.keydownHandler(event);
   }}"
         >
+					<div class="control-wrapper">
 			${() => renderInput(context)}
 			<${popupTag} class="popup"
 				style="${setFixedDropdownVarWidth}"
@@ -653,6 +648,7 @@ const comboboxTemplate = (context) => {
 					</slot>
 				</div>
 			</${popupTag}>
+					</div>
 					<div class="feedback-wrapper" @click="${(_, c) => c.event.stopPropagation()}">
 						${getFeedbackTemplate(context)}
 					</div>

package/shared/definition17.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const definition = require('./definition27.cjs');
+const definition = require('./definition28.cjs');
 const vividElement = require('./vivid-element.cjs');
 const repeat = require('./repeat.cjs');
 const keyCodes = require('./key-codes.cjs');

package/shared/definition17.js

@@ -1,4 +1,4 @@
-import { I as Icon, i as iconDefinition } from './definition27.js';
+import { I as Icon, i as iconDefinition } from './definition28.js';
 import { V as VividElement, D as DOM, O as Observable, a as attr, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { R as RepeatDirective } from './repeat.js';
 import { d as keyEnd, g as keyHome, j as keyPageDown, l as keyPageUp, f as keyArrowDown, e as keyArrowUp, i as keyArrowRight, h as keyArrowLeft, b as keyEscape, m as keyFunction2, k as keyEnter, a as keySpace } from './key-codes.js';