@vonage/vivid 5.0.0 → 5.2.0

package/{shared/definition15.js → checkbox/definition.js}

@@ -1,16 +1,15 @@
-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 WithFeedback, f as feedbackMessageDefinition } from './mixins.js';
-import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
-import { C as CheckableFormAssociated } from './form-associated.js';
-import { W as WithErrorText } from './with-error-text.js';
-import { W as WithSuccessText } from './with-success-text.js';
-import { F as FormElement } from './form-element.js';
-import { c as classNames } from './class-names.js';
-import { w as when } from './when.js';
-import { s as slotted } from './slotted.js';
+import { VwcIconElement as Icon, iconDefinition } from '../icon/definition.js';
+import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
+import { a as WithFeedback, f as feedbackMessageDefinition } from '../unbundled/mixins.js';
+import { attr, observable, when, html, slotted } from '@microsoft/fast-element';
+import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-aria.js';
+import { C as CheckableFormAssociated } from '../unbundled/form-associated.js';
+import { W as WithErrorText } from '../unbundled/with-error-text.js';
+import { W as WithSuccessText } from '../unbundled/with-success-text.js';
+import { F as FormElement } from '../unbundled/form-element.js';
+import { classNames } from '@microsoft/fast-web-utilities';
 
-const styles = ":host{display:inline-flex;flex-direction:column;gap:4px;vertical-align:middle;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary: var(--vvd-checkbox-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-checkbox-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-checkbox-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-intermediate: var(--vvd-checkbox-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-checkbox-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-checkbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-checkbox-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-checkbox-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-intermediate: var(--vvd-checkbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-checkbox-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.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(--vvd-color-neutral-700)}.base:where(.checked,:checked):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.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(.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{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}.base:focus-visible{outline:none}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:focus-visible .control{--focus-stroke-gap-color: transparent}.base:focus-visible .control:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - 4px)}.base:not(.checked) .indicator.checkmark{display:none}.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{display:flex;flex-wrap:wrap;align-items:center;color:var(--vvd-color-canvas-text);column-gap:4px;cursor:pointer;font:var(--vvd-typography-base)}.hide-label label{display:none}.icon{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.6);line-height:1}";
+const styles = ":host{display:inline-flex;flex-direction:column;gap:4px;vertical-align:middle;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary: var(--vvd-checkbox-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-checkbox-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-checkbox-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-intermediate: var(--vvd-checkbox-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-checkbox-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-checkbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-checkbox-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-checkbox-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-intermediate: var(--vvd-checkbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-checkbox-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}@media (hover: hover){.base: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(--vvd-color-neutral-700)}}.base.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(--vvd-color-neutral-700)}.base:checked:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}@media (hover: hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base: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.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.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{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}.base:focus-visible{outline:none}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:focus-visible .control{--focus-stroke-gap-color: transparent}.base:focus-visible .control:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - 4px)}.base:not(.checked) .indicator.checkmark{display:none}.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{display:flex;flex-wrap:wrap;align-items:center;color:var(--vvd-color-canvas-text);column-gap:4px;cursor:pointer;font:var(--vvd-typography-base)}.hide-label label{display:none}.icon{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.6);line-height:1}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -201,4 +200,4 @@ const checkboxDefinition = defineVividComponent(
 );
 const registerCheckbox = createRegisterFunction(checkboxDefinition);
 
-export { Checkbox as C, checkboxDefinition as c, registerCheckbox as r };
+export { Checkbox as VwcCheckboxElement, checkboxDefinition, registerCheckbox };

package/checkbox/index.cjs

@@ -1,5 +1 @@
-'use strict';
-
-const definition = require('../shared/definition15.cjs');
-
-definition.registerCheckbox();
+"use strict";const e=require("../bundled/definition8.cjs");e.registerCheckbox();

package/checkbox/index.js

@@ -1,3 +1,2 @@
-import { r as registerCheckbox } from '../shared/definition15.js';
-
-registerCheckbox();
+import { r } from "../bundled/definition8.js";
+r();

package/{shared/definition16.cjs → combobox/definition.cjs}

@@ -1,27 +1,26 @@
 'use strict';
 
-const definition$2 = require('./definition28.cjs');
-const definition = require('./definition67.cjs');
-const definition$3 = require('./definition37.cjs');
-const textField = require('./text-field.cjs');
-const vividElement = require('./vivid-element.cjs');
-const mixins = require('./mixins.cjs');
-const listbox = require('./listbox.cjs');
-const formAssociated = require('./form-associated.cjs');
-const withErrorText = require('./with-error-text.cjs');
-const withSuccessText = require('./with-success-text.cjs');
-const formElement = require('./form-element.cjs');
-const affix = require('./affix.cjs');
-const strings = require('./strings.cjs');
-const numbers = require('./numbers.cjs');
-const index = require('./index.cjs');
-const definition$1 = require('./definition11.cjs');
-const ref = require('./ref.cjs');
-const slotted = require('./slotted.cjs');
-const classNames = require('./class-names.cjs');
-const when = require('./when.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-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(--vvd-color-neutral-500)}.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(--vvd-color-neutral-700)}.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(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}::slotted([data-vvd-component=option][current-selected]){border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}";
+const icon_definition = require('../icon/definition.cjs');
+const popup_definition = require('../unbundled/definition4.cjs');
+const option_definition = require('../option/definition.cjs');
+const textField = require('../unbundled/text-field.cjs');
+const vividElement = require('../unbundled/vivid-element.cjs');
+const mixins = require('../unbundled/mixins.cjs');
+const fastElement = require('@microsoft/fast-element');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
+const listbox = require('../unbundled/listbox.cjs');
+const formAssociated = require('../unbundled/form-associated.cjs');
+const withContextualHelp = require('../unbundled/with-contextual-help.cjs');
+const withErrorText = require('../unbundled/with-error-text.cjs');
+const withSuccessText = require('../unbundled/with-success-text.cjs');
+const formElement = require('../unbundled/form-element.cjs');
+const affix = require('../unbundled/affix.cjs');
+const index = require('../unbundled/index.cjs');
+const button_definition = require('../unbundled/definition.cjs');
+
+const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-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(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base: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(--vvd-color-neutral-700)}.base: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.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(--vvd-color-neutral-700)}.base.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: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:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.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.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(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}::slotted([data-vvd-component=option][current-selected]){border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}.label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}";
 
 const ComboboxAutocomplete = {
   inline: "inline",
@@ -39,9 +38,11 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Combobox extends mixins.WithFeedback(
-  withErrorText.WithErrorText(
-    withSuccessText.WithSuccessText(formElement.FormElement(affix.AffixIcon(formAssociated.FormAssociated(listbox.Listbox))))
+class Combobox extends withContextualHelp.WithContextualHelp(
+  mixins.WithFeedback(
+    withErrorText.WithErrorText(
+      withSuccessText.WithSuccessText(formElement.FormElement(affix.AffixIcon(formAssociated.FormAssociated(listbox.Listbox))))
+    )
   )
 ) {
   constructor() {
@@ -64,7 +65,7 @@ class Combobox extends mixins.WithFeedback(
      *
      * @internal
      */
-    this.listboxId = strings.uniqueId("listbox-");
+    this.listboxId = fastWebUtilities.uniqueId("listbox-");
     this.maxHeight = 0;
     this.open = false;
     /**
@@ -106,7 +107,7 @@ class Combobox extends mixins.WithFeedback(
   openChanged() {
     if (this.open) {
       this.focusAndScrollOptionIntoView();
-      vividElement.DOM.queueUpdate(() => this.focus());
+      fastElement.DOM.queueUpdate(() => this.control.focus());
       return;
     }
   }
@@ -118,12 +119,12 @@ class Combobox extends mixins.WithFeedback(
    * Overrides `Listbox.options`.
    */
   get options() {
-    vividElement.Observable.track(this, "options");
+    fastElement.Observable.track(this, "options");
     return this.filteredOptions.length ? this.filteredOptions : this._options;
   }
   set options(value) {
     this._options = value;
-    vividElement.Observable.notify(this, "options");
+    fastElement.Observable.notify(this, "options");
   }
   /**
    * Updates the placeholder on the proxy element.
@@ -155,7 +156,7 @@ class Combobox extends mixins.WithFeedback(
    * @internal
    */
   clickHandler(e) {
-    if (this.disabled) {
+    if (this.disabled || this._isFromContextualHelp(e)) {
       return;
     }
     if (this.open) {
@@ -351,7 +352,7 @@ class Combobox extends mixins.WithFeedback(
    */
   selectedIndexChanged(prev, next) {
     if (this.$fastController.isConnected) {
-      next = numbers.limit(-1, this.options.length - 1, next);
+      next = fastWebUtilities.limit(-1, this.options.length - 1, next);
       if (next !== this.selectedIndex) {
         this.selectedIndex = next;
         return;
@@ -486,35 +487,35 @@ class Combobox extends mixins.WithFeedback(
   }
 }
 __decorateClass([
-  vividElement.attr({ attribute: "autocomplete", mode: "fromView" })
+  fastElement.attr({ attribute: "autocomplete", mode: "fromView" })
 ], Combobox.prototype, "autocomplete");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], Combobox.prototype, "appearance");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], Combobox.prototype, "shape");
 __decorateClass([
-  vividElement.attr()
+  fastElement.attr()
 ], Combobox.prototype, "scale");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], Combobox.prototype, "placement");
 __decorateClass([
-  vividElement.attr({ mode: "boolean", attribute: "fixed-dropdown" })
+  fastElement.attr({ mode: "boolean", attribute: "fixed-dropdown" })
 ], Combobox.prototype, "fixedDropdown");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], Combobox.prototype, "metaSlottedContent");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], Combobox.prototype, "maxHeight");
 __decorateClass([
-  vividElement.attr({ attribute: "open", mode: "boolean" })
+  fastElement.attr({ attribute: "open", mode: "boolean" })
 ], Combobox.prototype, "open");
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], Combobox.prototype, "placeholder");
 
 const getStateClasses = ({
@@ -531,7 +532,7 @@ const getStateClasses = ({
   appearance,
   open,
   _activeDescendant
-}) => classNames.classNames(
+}) => fastWebUtilities.classNames(
   "base",
   ["disabled", disabled],
   [`shape-${shape}`, Boolean(shape)],
@@ -546,7 +547,7 @@ const getStateClasses = ({
   ["success", !!successText]
 );
 function renderLabel() {
-  return vividElement.html` <label for="control" class="label">
+  return fastElement.html` <label for="control" class="label">
 		${(x) => x.label}
 	</label>`;
 }
@@ -557,9 +558,13 @@ function setFixedDropdownVarWidth(x) {
 }
 function renderInput(context) {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  const chevronTemplate = definition$1.chevronTemplateFactory(context);
-  return vividElement.html` <div class="${getStateClasses}" ${ref.ref("_anchor")}>
-		${when.when((x) => x.label, renderLabel())}
+  const chevronTemplate = button_definition.chevronTemplateFactory(context);
+  return fastElement.html` <div class="${getStateClasses}" ${fastElement.ref("_anchor")}>
+		${fastElement.when((x) => x.label, renderLabel())}
+		<slot
+			name="contextual-help"
+			${fastElement.slotted("_contextualHelpSlottedContent")}
+		></slot>
 		<div class="fieldset">
 			${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)}
 			<div class="wrapper">
@@ -579,11 +584,11 @@ function renderInput(context) {
 					?disabled="${(x) => x.disabled}"
 					:value="${(x) => x.value}"
 					@input="${(x, c) => x.inputHandler(c.event)}"
-					${ref.ref("control")}
+					${fastElement.ref("control")}
 				/>
 			</div>
 			<div class="leading-items-wrapper">
-				<slot name="meta" ${slotted.slotted("metaSlottedContent")}></slot>
+				<slot name="meta" ${fastElement.slotted("metaSlottedContent")}></slot>
 				<div
 					@click="${(x, c) => x._chevronIconClickHandler(c.event)}"
 				>
@@ -594,8 +599,8 @@ function renderInput(context) {
 	</div>`;
 }
 const comboboxTemplate = (context) => {
-  const popupTag = context.tagFor(definition.Popup);
-  return vividElement.html`
+  const popupTag = context.tagFor(popup_definition.Popup);
+  return fastElement.html`
 		<template
 			tabindex="${(x) => !x.disabled ? "0" : null}"
 			@click="${(x, c) => x.clickHandler(c.event)}"
@@ -612,13 +617,13 @@ const comboboxTemplate = (context) => {
 					?open="${(x) => x.open}"
 					placement="${(x) => x.placement ?? "bottom-start"}"
 					strategy="${(x) => x.fixedDropdown ? "fixed" : "absolute"}"
-					${ref.ref("_popup")}>
+					${fastElement.ref("_popup")}>
 					<div id="${(x) => x.listboxId}"
 						class="listbox"
 						role="listbox"
 						?disabled="${(x) => x.disabled}"
-						${ref.ref("listbox")}>
-						<slot ${slotted.slotted({
+						${fastElement.ref("listbox")}>
+						<slot ${fastElement.slotted({
     filter: listbox.Listbox.slottedOptionFilter,
     flatten: true,
     property: "slottedOptions"
@@ -639,9 +644,9 @@ const comboboxDefinition = vividElement.defineVividComponent(
   Combobox,
   comboboxTemplate,
   [
-    definition$2.iconDefinition,
-    definition.popupDefinition,
-    definition$3.listboxOptionDefinition,
+    icon_definition.iconDefinition,
+    popup_definition.popupDefinition,
+    option_definition.listboxOptionDefinition,
     mixins.feedbackMessageDefinition
   ],
   {
@@ -653,6 +658,6 @@ const comboboxDefinition = vividElement.defineVividComponent(
 );
 const registerCombobox = vividElement.createRegisterFunction(comboboxDefinition);
 
-exports.Combobox = Combobox;
+exports.VwcComboboxElement = Combobox;
 exports.comboboxDefinition = comboboxDefinition;
 exports.registerCombobox = registerCombobox;

package/{shared/definition16.js → combobox/definition.js}

@@ -1,25 +1,22 @@
-import { i as iconDefinition } from './definition28.js';
-import { P as Popup, p as popupDefinition } from './definition67.js';
-import { l as listboxOptionDefinition } from './definition37.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 WithFeedback, f as feedbackMessageDefinition } from './mixins.js';
-import { L as Listbox } from './listbox.js';
-import { F as FormAssociated } from './form-associated.js';
-import { W as WithErrorText } from './with-error-text.js';
-import { W as WithSuccessText } from './with-success-text.js';
-import { F as FormElement } from './form-element.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 { 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 { c as classNames } from './class-names.js';
-import { w as when } from './when.js';
+import { iconDefinition } from '../icon/definition.js';
+import { P as Popup, p as popupDefinition } from '../unbundled/definition4.js';
+import { listboxOptionDefinition } from '../option/definition.js';
+import { s as styles$1 } from '../unbundled/text-field.js';
+import { d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
+import { a as WithFeedback, f as feedbackMessageDefinition } from '../unbundled/mixins.js';
+import { DOM, Observable, attr, observable, ref, slotted, html, when } from '@microsoft/fast-element';
+import { uniqueId, limit, classNames } from '@microsoft/fast-web-utilities';
+import { L as Listbox } from '../unbundled/listbox.js';
+import { F as FormAssociated } from '../unbundled/form-associated.js';
+import { W as WithContextualHelp } from '../unbundled/with-contextual-help.js';
+import { W as WithErrorText } from '../unbundled/with-error-text.js';
+import { W as WithSuccessText } from '../unbundled/with-success-text.js';
+import { F as FormElement } from '../unbundled/form-element.js';
+import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
+import { h as handleEscapeKeyAndStopPropogation } from '../unbundled/index.js';
+import { c as chevronTemplateFactory } from '../unbundled/definition.js';
 
-const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-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(--vvd-color-neutral-500)}.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(--vvd-color-neutral-700)}.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(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}::slotted([data-vvd-component=option][current-selected]){border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}";
+const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-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(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base: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(--vvd-color-neutral-700)}.base: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.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(--vvd-color-neutral-700)}.base.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: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:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.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.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(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}::slotted([data-vvd-component=option][current-selected]){border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}.label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}";
 
 const ComboboxAutocomplete = {
   inline: "inline",
@@ -37,9 +34,11 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Combobox extends WithFeedback(
-  WithErrorText(
-    WithSuccessText(FormElement(AffixIcon(FormAssociated(Listbox))))
+class Combobox extends WithContextualHelp(
+  WithFeedback(
+    WithErrorText(
+      WithSuccessText(FormElement(AffixIcon(FormAssociated(Listbox))))
+    )
   )
 ) {
   constructor() {
@@ -104,7 +103,7 @@ class Combobox extends WithFeedback(
   openChanged() {
     if (this.open) {
       this.focusAndScrollOptionIntoView();
-      DOM.queueUpdate(() => this.focus());
+      DOM.queueUpdate(() => this.control.focus());
       return;
     }
   }
@@ -153,7 +152,7 @@ class Combobox extends WithFeedback(
    * @internal
    */
   clickHandler(e) {
-    if (this.disabled) {
+    if (this.disabled || this._isFromContextualHelp(e)) {
       return;
     }
     if (this.open) {
@@ -558,6 +557,10 @@ function renderInput(context) {
   const chevronTemplate = chevronTemplateFactory(context);
   return html` <div class="${getStateClasses}" ${ref("_anchor")}>
 		${when((x) => x.label, renderLabel())}
+		<slot
+			name="contextual-help"
+			${slotted("_contextualHelpSlottedContent")}
+		></slot>
 		<div class="fieldset">
 			${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
 			<div class="wrapper">
@@ -651,4 +654,4 @@ const comboboxDefinition = defineVividComponent(
 );
 const registerCombobox = createRegisterFunction(comboboxDefinition);
 
-export { Combobox as C, comboboxDefinition as c, registerCombobox as r };
+export { Combobox as VwcComboboxElement, comboboxDefinition, registerCombobox };

package/combobox/index.cjs

@@ -1,5 +1,69 @@
-'use strict';
-
-const definition = require('../shared/definition16.cjs');
-
-definition.registerCombobox();
+"use strict";const $=require("../bundled/definition2.cjs"),v=require("../bundled/definition9.cjs"),k=require("../bundled/definition10.cjs"),C=require("../bundled/text-field.cjs"),r=require("../bundled/vivid-element.cjs"),b=require("../bundled/mixins.cjs"),x=require("../bundled/listbox.cjs"),I=require("../bundled/form-associated.cjs"),O=require("../bundled/with-contextual-help.cjs"),S=require("../bundled/with-error-text.cjs"),A=require("../bundled/with-success-text.cjs"),q=require("../bundled/form-element.cjs"),u=require("../bundled/affix.cjs"),V=require("../bundled/strings.cjs"),T=require("../bundled/numbers.cjs"),H=require("../bundled/index.cjs"),D=require("../bundled/definition3.cjs"),d=require("../bundled/ref.cjs"),h=require("../bundled/slotted.cjs"),E=require("../bundled/class-names.cjs"),F=require("../bundled/when.cjs"),B='.chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-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(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base: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(--vvd-color-neutral-700)}.base: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.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(--vvd-color-neutral-700)}.base.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: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:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.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.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(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:"";inset:0;pointer-events:none}}::slotted([data-vvd-component=option][current-selected]){border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}.label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}',p={inline:"inline",list:"list",both:"both",none:"none"};var L=Object.defineProperty,s=(a,t,e,o)=>{for(var n=void 0,l=a.length-1,c;l>=0;l--)(c=a[l])&&(n=c(t,e,n)||n);return n&&L(t,e,n),n};class i extends O.WithContextualHelp(b.WithFeedback(S.WithErrorText(A.WithSuccessText(q.FormElement(u.AffixIcon(I.FormAssociated(x.Listbox))))))){constructor(){super(...arguments),this.filteredOptions=[],this.filter="",this.fixedDropdown=!1,this.listboxId=V.uniqueId("listbox-"),this.maxHeight=0,this.open=!1,this.proxy=document.createElement("input")}formResetCallback(){super.formResetCallback(),this.setDefaultSelectedOption(),this.updateValue()}validate(){super.validate(this.control)}get isAutocompleteInline(){return this.autocomplete===p.inline||this.isAutocompleteBoth}get isAutocompleteList(){return this.autocomplete===p.list||this.isAutocompleteBoth}get isAutocompleteBoth(){return this.autocomplete===p.both}openChanged(){if(this.open){this.focusAndScrollOptionIntoView(),r.DOM.queueUpdate(()=>this.control.focus());return}}get options(){return r.Observable.track(this,"options"),this.filteredOptions.length?this.filteredOptions:this._options}set options(t){this._options=t,r.Observable.notify(this,"options")}placeholderChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.placeholder=this.placeholder)}valueChanged(t,e){if(this.$fastController.isConnected&&this.options){const o=this.options.findIndex(c=>c.text.toLowerCase()===e.toLowerCase()),n=this.options[this.selectedIndex]?.text,l=this.options[o]?.text;this.selectedIndex=n!==l?o:this.selectedIndex}super.valueChanged(t,e)}clickHandler(t){if(!(this.disabled||this._isFromContextualHelp(t))){if(this.open){const e=t.target.closest("option,[role=option],[data-vvd-component=option]");if(!e||e.disabled)return;this.selectedOptions=[e],this.control.value=e.text,this.clearSelectionRange(),this.updateValue(!0)}return this.open=!this.open,this.open&&this.control.focus(),!0}}_chevronIconClickHandler(t){this.open&&(t.stopPropagation(),this.open=!1)}connectedCallback(){super.connectedCallback(),this.value&&(this.initialValue=this.value),this._popup.anchor=this._anchor}filterOptions(){(!this.autocomplete||this.autocomplete===p.none)&&(this.filter=""),this.filteredOptions=this._options.filter(t=>t.text.toLowerCase().startsWith(this.filter.toLowerCase())),this.isAutocompleteList&&this._options.forEach(t=>{t.hidden=!this.filteredOptions.includes(t)})}focusAndScrollOptionIntoView(){if(this.contains(document.activeElement)){this.control.focus();const t=this.firstSelectedOption;t&&requestAnimationFrame(()=>{t.scrollIntoView({block:"nearest"})})}}focusoutHandler(t){if(this.syncValue(),!this.open)return!0;const e=t.relatedTarget;if(this.isSameNode(e)){this.focus();return}this.open=!1}inputHandler(t){if(this.filter=this.control.value,this.filterOptions(),this.isAutocompleteInline||(this.selectedIndex=this.options.map(e=>e.text).indexOf(this.control.value)),t.inputType.includes("deleteContent")||!this.filter.length)return!0;this.isAutocompleteList&&!this.open&&(this.open=!0),this.isAutocompleteInline&&(this.filteredOptions.length?(this.selectedOptions=[this.filteredOptions[0]],this.selectedIndex=this.options.indexOf(this.firstSelectedOption),this.setInlineSelection()):this.selectedIndex=-1)}keydownHandler(t){const e=t.key;if(t.ctrlKey||t.shiftKey)return!0;switch(e){case"Enter":{this.syncValue(),this.isAutocompleteInline&&(this.filter=this.value),this.open=!1,this.clearSelectionRange();break}case"Escape":{if(this.isAutocompleteInline||(this.selectedIndex=-1),this.open){this.open=!1;break}this.value="",this.control.value="",this.filter="",this.filterOptions();break}case"Tab":{if(this.setInputToSelection(),!this.open)return!0;t.preventDefault(),this.open=!1;break}case"ArrowUp":case"ArrowDown":{if(this.filterOptions(),!this.open){this.open=!0;break}this.filteredOptions.length>0&&super.keydownHandler(t),this.isAutocompleteInline&&this.setInlineSelection();break}default:return!0}}selectedIndexChanged(t,e){if(this.$fastController.isConnected){if(e=T.limit(-1,this.options.length-1,e),e!==this.selectedIndex){this.selectedIndex=e;return}super.selectedIndexChanged(t,e)}}selectPreviousOption(){!this.disabled&&this.selectedIndex>=0&&(this.selectedIndex=this.selectedIndex-1)}setDefaultSelectedOption(){if(this.$fastController.isConnected&&this.options){const t=this.options.findIndex(e=>e.getAttribute("selected")!==null||e.selected);this.selectedIndex=t,!this.dirtyValue&&this.firstSelectedOption&&(this.value=this.firstSelectedOption.text),this.setSelectedOptions()}}setInputToSelection(){this.firstSelectedOption&&(this.control.value=this.firstSelectedOption.text,this.control.focus())}setInlineSelection(){this.firstSelectedOption&&(this.setInputToSelection(),this.control.setSelectionRange(this.filter.length,this.control.value.length,"backward"))}syncValue(){const t=this.firstSelectedOption?.text??this.control.value;this.updateValue(this.value!==t)}selectedOptionsChanged(t,e){this.$fastController.isConnected&&this._options.forEach(o=>{o.selected=e.includes(o)})}slottedOptionsChanged(t,e){super.slottedOptionsChanged(t,e),this.updateValue();const o=this.getAttribute("scale")||this.scale;e.forEach(n=>{o&&(n.setAttribute("scale",o),n.scale=o)})}updateValue(t){this.$fastController.isConnected&&(this.value=this.firstSelectedOption?.text||this.control.value,this.control.value=this.value),t&&this.$emit("change")}clearSelectionRange(){const t=this.control.value.length;this.control.setSelectionRange(t,t)}}s([r.attr({attribute:"autocomplete",mode:"fromView"})],i.prototype,"autocomplete");s([r.attr],i.prototype,"appearance");s([r.attr],i.prototype,"shape");s([r.attr()],i.prototype,"scale");s([r.attr],i.prototype,"placement");s([r.attr({mode:"boolean",attribute:"fixed-dropdown"})],i.prototype,"fixedDropdown");s([r.observable],i.prototype,"metaSlottedContent");s([r.observable],i.prototype,"maxHeight");s([r.attr({attribute:"open",mode:"boolean"})],i.prototype,"open");s([r.attr],i.prototype,"placeholder");const R=({icon:a,iconSlottedContent:t,metaSlottedContent:e,errorValidationMessage:o,successText:n,shape:l,scale:c,disabled:m,placeholder:g,label:_,appearance:f,open:w,_activeDescendant:y})=>E.classNames("base",["disabled",m],[`shape-${l}`,!!l],[`size-${c}`,!!c],["placeholder",!!g],[`appearance-${f}`,!!f],["no-label",!_],["has-icon",!!a||!!t?.length],["has-meta",!!e?.length],["has-activedescendant",!!y&&w],["error",!!o],["success",!!n]);function z(){return r.html` <label for="control" class="label">
+		${a=>a.label}
+	</label>`}function P(a){return a.open&&a.fixedDropdown?`--_combobox-fixed-width: ${Math.round(a.getBoundingClientRect().width)}px`:null}function W(a){const t=u.affixIconTemplateFactory(a),e=D.chevronTemplateFactory(a);return r.html` <div class="${R}" ${d.ref("_anchor")}>
+		${F.when(o=>o.label,z())}
+		<slot
+			name="contextual-help"
+			${h.slotted("_contextualHelpSlottedContent")}
+		></slot>
+		<div class="fieldset">
+			${o=>t(o.icon,u.IconWrapper.Slot)}
+			<div class="wrapper">
+				<input
+					id="control"
+					autocomplete="off"
+					class="control"
+					aria-activedescendant="${o=>o.open?o._activeDescendant:null}"
+					aria-autocomplete="${o=>o.autocomplete}"
+					aria-controls="${o=>o.listboxId}"
+					aria-expanded="${o=>o.open}"
+					aria-haspopup="listbox"
+					aria-describedby="${o=>o._feedbackDescribedBy}"
+					placeholder="${o=>o.placeholder}"
+					role="combobox"
+					type="text"
+					?disabled="${o=>o.disabled}"
+					:value="${o=>o.value}"
+					@input="${(o,n)=>o.inputHandler(n.event)}"
+					${d.ref("control")}
+				/>
+			</div>
+			<div class="leading-items-wrapper">
+				<slot name="meta" ${h.slotted("metaSlottedContent")}></slot>
+				<div
+					@click="${(o,n)=>o._chevronIconClickHandler(n.event)}"
+				>
+					${e}
+				</div>
+			</div>
+		</div>
+	</div>`}const M=a=>{const t=a.tagFor(v.Popup);return r.html`
+		<template
+			tabindex="${e=>e.disabled?null:"0"}"
+			@click="${(e,o)=>e.clickHandler(o.event)}"
+			@focusout="${(e,o)=>e.focusoutHandler(o.event)}"
+			@keydown="${(e,{event:o})=>(e.open&&H.handleEscapeKeyAndStopPropogation(o),e.keydownHandler(o))}"
+		>
+			<div class="control-wrapper">
+				${()=>W(a)}
+				<${t} class="popup"
+					style="${P}"
+					?open="${e=>e.open}"
+					placement="${e=>e.placement??"bottom-start"}"
+					strategy="${e=>e.fixedDropdown?"fixed":"absolute"}"
+					${d.ref("_popup")}>
+					<div id="${e=>e.listboxId}"
+						class="listbox"
+						role="listbox"
+						?disabled="${e=>e.disabled}"
+						${d.ref("listbox")}>
+						<slot ${h.slotted({filter:x.Listbox.slottedOptionFilter,flatten:!0,property:"slottedOptions"})}>
+						</slot>
+					</div>
+				</${t}>
+			</div>
+			<div class="feedback-wrapper" @click="${(e,o)=>o.event.stopPropagation()}">
+				${e=>e._getFeedbackTemplate(a)}
+			</div>
+    </template>
+	`},K=r.defineVividComponent("combobox",i,M,[$.iconDefinition,v.popupDefinition,k.listboxOptionDefinition,b.feedbackMessageDefinition],{styles:[C.styles,B],shadowOptions:{delegatesFocus:!0}}),N=r.createRegisterFunction(K);N();