@vonage/vivid 4.16.2 → 4.18.0

package/shared/definition16.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
-const definition$2 = require('./definition27.cjs');
-const definition = require('./definition63.cjs');
-const definition$3 = require('./definition35.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');
@@ -16,10 +16,10 @@ const index = require('./index.cjs');
 const definition$1 = require('./definition11.cjs');
 const ref = require('./ref.cjs');
 const slotted = require('./slotted.cjs');
-const when = require('./when.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 {
 }
@@ -47,7 +47,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let Combobox = class extends FormAssociatedCombobox {
+exports.Combobox = class Combobox extends FormAssociatedCombobox {
   constructor() {
     super(...arguments);
     /**
@@ -102,7 +102,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
@@ -111,14 +111,10 @@ let Combobox = class 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 @@ 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);
     }
@@ -198,6 +194,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) {
@@ -205,20 +212,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.
    *
@@ -512,41 +505,41 @@ let Combobox = class extends FormAssociatedCombobox {
 };
 __decorateClass([
   vividElement.attr({ attribute: "autocomplete", mode: "fromView" })
-], Combobox.prototype, "autocomplete", 2);
+], exports.Combobox.prototype, "autocomplete", 2);
 __decorateClass([
   vividElement.attr
-], Combobox.prototype, "appearance", 2);
+], exports.Combobox.prototype, "appearance", 2);
 __decorateClass([
   vividElement.attr
-], Combobox.prototype, "shape", 2);
+], exports.Combobox.prototype, "shape", 2);
 __decorateClass([
   vividElement.attr()
-], Combobox.prototype, "scale", 2);
+], exports.Combobox.prototype, "scale", 2);
 __decorateClass([
   vividElement.attr
-], Combobox.prototype, "placement", 2);
+], exports.Combobox.prototype, "placement", 2);
 __decorateClass([
   vividElement.attr({ mode: "boolean", attribute: "fixed-dropdown" })
-], Combobox.prototype, "fixedDropdown", 2);
+], exports.Combobox.prototype, "fixedDropdown", 2);
 __decorateClass([
   vividElement.observable
-], Combobox.prototype, "metaSlottedContent", 2);
+], exports.Combobox.prototype, "metaSlottedContent", 2);
 __decorateClass([
   vividElement.observable
-], Combobox.prototype, "maxHeight", 2);
+], exports.Combobox.prototype, "maxHeight", 2);
 __decorateClass([
   vividElement.attr({ attribute: "open", mode: "boolean" })
-], Combobox.prototype, "open", 2);
+], exports.Combobox.prototype, "open", 2);
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
   vividElement.attr
-], Combobox.prototype, "placeholder", 2);
-Combobox = __decorateClass([
+], exports.Combobox.prototype, "placeholder", 2);
+exports.Combobox = __decorateClass([
   formElements.errorText,
   formElements.formElements
-], Combobox);
+], exports.Combobox);
 applyMixinsWithObservables.applyMixinsWithObservables(
-  Combobox,
+  exports.Combobox,
   affix.AffixIcon,
   formElements.FormElementHelperText,
   formElements.FormElementSuccessText
@@ -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>
@@ -664,7 +660,7 @@ const comboboxTemplate = (context) => {
 
 const comboboxDefinition = vividElement.defineVividComponent(
   "combobox",
-  Combobox,
+  exports.Combobox,
   comboboxTemplate,
   [definition$2.iconDefinition, definition.popupDefinition, definition$3.listboxOptionDefinition],
   {

package/shared/definition16.js

@@ -1,23 +1,23 @@
-import { i as iconDefinition } from './definition27.js';
-import { P as Popup, p as popupDefinition } from './definition63.js';
-import { l as listboxOptionDefinition } from './definition35.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 defineVividComponent, f as createRegisterFunction } from './vivid-element.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';
 import { F as FormAssociated } from './form-associated.js';
 import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { u as uniqueId } from './strings.js';
 import { l as limit } from './numbers.js';
-import { e as errorText, f as formElements, F as FormElementSuccessText, a as FormElementHelperText, g as getFeedbackTemplate } from './form-elements.js';
+import { F as FormElementSuccessText, a as FormElementHelperText, e as errorText, f as formElements, g as getFeedbackTemplate } from './form-elements.js';
 import { h as handleEscapeKeyAndStopPropogation } from './index.js';
 import { c as chevronTemplateFactory } from './definition11.js';
 import { r as ref } from './ref.js';
 import { s as slotted } from './slotted.js';
-import { w as when } from './when.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>
@@ -674,4 +670,4 @@ const comboboxDefinition = defineVividComponent(
 );
 const registerCombobox = createRegisterFunction(comboboxDefinition);
 
-export { comboboxDefinition as c, registerCombobox as r };
+export { Combobox as C, comboboxDefinition as c, registerCombobox as r };

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');
@@ -1227,6 +1227,9 @@ const dataGridDefinition = vividElement.defineVividComponent(
 );
 const registerDataGrid = vividElement.createRegisterFunction(dataGridDefinition);
 
+exports.DataGrid = DataGrid;
+exports.DataGridCell = DataGridCell;
+exports.DataGridRow = DataGridRow;
 exports.dataGridCellDefinition = dataGridCellDefinition;
 exports.dataGridDefinition = dataGridDefinition;
 exports.dataGridRowDefinition = dataGridRowDefinition;

package/shared/definition17.js

@@ -1,5 +1,5 @@
-import { I as Icon, i as iconDefinition } from './definition27.js';
-import { a as attr, o as observable, V as VividElement, D as DOM, O as Observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.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';
 import { c as children } from './children.js';
@@ -1225,4 +1225,4 @@ const dataGridDefinition = defineVividComponent(
 );
 const registerDataGrid = createRegisterFunction(dataGridDefinition);
 
-export { dataGridRowDefinition as a, dataGridDefinition as b, dataGridCellDefinition as d, registerDataGrid as r };
+export { DataGrid as D, dataGridRowDefinition as a, dataGridDefinition as b, DataGridRow as c, dataGridCellDefinition as d, DataGridCell as e, registerDataGrid as r };