@vonage/vivid 4.14.2 → 4.14.4

package/index.cjs

@@ -83,6 +83,7 @@ exports.TabsGutters = enums.TabsGutters;
 exports.setLocale = localized.setLocale;
 exports.accordionItemDefinition = definition.accordionItemDefinition;
 exports.registerAccordionItem = definition.registerAccordionItem;
+exports.AccordionExpandMode = definition$1.AccordionExpandMode;
 exports.accordionDefinition = definition$1.accordionDefinition;
 exports.registerAccordion = definition$1.registerAccordion;
 exports.actionGroupDefinition = definition$2.actionGroupDefinition;

package/index.js

@@ -1,7 +1,7 @@
 export { A as Appearance, c as AriaLive, C as Connotation, a as ConnotationDecorative, I as IconDecoration, L as LayoutSize, M as MediaSkipBy, P as Position, R as Role, S as Shape, b as Size, T as TabsGutters } from './shared/enums.js';
 export { s as setLocale } from './shared/localized.js';
 export { a as accordionItemDefinition, r as registerAccordionItem } from './shared/definition.js';
-export { a as accordionDefinition, r as registerAccordion } from './shared/definition2.js';
+export { A as AccordionExpandMode, a as accordionDefinition, r as registerAccordion } from './shared/definition2.js';
 export { a as actionGroupDefinition, r as registerActionGroup } from './shared/definition3.js';
 export { a as alertDefinition, r as registerAlert } from './shared/definition4.js';
 export { a as audioPlayerDefinition, r as registerAudioPlayer } from './shared/definition5.js';

package/lib/accordion/definition.d.ts

@@ -1,2 +1,6 @@
-export type { AccordionExpandMode } from '@microsoft/fast-foundation';
+export declare const AccordionExpandMode: {
+    readonly single: "single";
+    readonly multi: "multi";
+};
+export type AccordionExpandMode = typeof AccordionExpandMode[keyof typeof AccordionExpandMode];
 export declare const registerAccordion: (prefix?: string) => void;

package/lib/combobox/combobox.d.ts

@@ -1,15 +1,19 @@
 import type { Popup } from '../popup/popup';
-import type { Appearance } from '../enums';
+import type { Appearance, Shape, Size } from '../enums';
 import { AffixIcon, type FormElement } from '../../shared/patterns';
 import type { ListboxOption } from '../option/option';
 import { FormAssociatedCombobox } from './combobox.form-associated';
 import { ComboboxAutocomplete } from './combobox.options';
 export type PopupPlacement = 'top' | 'bottom';
 export type ComboboxAppearance = Extract<Appearance, Appearance.Fieldset | Appearance.Ghost>;
+export type ComboboxShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
+export type ComboboxSize = Extract<Size, Size.Condensed | Size.Normal>;
 export declare class Combobox extends FormAssociatedCombobox {
     autocomplete: ComboboxAutocomplete | undefined;
     filteredOptions: ListboxOption[];
     appearance?: ComboboxAppearance;
+    shape?: ComboboxShape;
+    scale?: ComboboxSize;
     placement?: PopupPlacement;
     fixedDropdown: boolean;
     _popup: Popup;

package/lib/file-picker/file-picker.d.ts

@@ -22,6 +22,7 @@ export declare class FilePicker extends FormAssociatedFilePicker {
     fileTooBigErrorChanged(_oldValue: string, newValue: string): void;
     nameChanged(previous: string, next: string): void;
     private buttonTag;
+    private iconTag;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;

package/lib/menu-item/definition.d.ts

@@ -1,2 +1,2 @@
-export { MenuItemRole } from './menu-item';
 export declare const registerMenuItem: (prefix?: string) => void;
+export { MenuItemRole } from './menu-item-role';

package/lib/menu-item/menu-item-role.d.ts

@@ -0,0 +1,7 @@
+export declare const MenuItemRole: {
+    readonly menuitem: "menuitem";
+    readonly menuitemcheckbox: "menuitemcheckbox";
+    readonly menuitemradio: "menuitemradio";
+    readonly presentation: "presentation";
+};
+export type MenuItemRole = typeof MenuItemRole[keyof typeof MenuItemRole];

package/lib/menu-item/menu-item.d.ts

@@ -1,13 +1,7 @@
 import { AffixIcon } from '../../shared/patterns/affix';
 import { Connotation } from '../enums';
 import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
-export declare const MenuItemRole: {
-    readonly presentation: "presentation";
-    readonly menuitem: "menuitem";
-    readonly menuitemcheckbox: "menuitemcheckbox";
-    readonly menuitemradio: "menuitemradio";
-};
-export type MenuItemRole = typeof MenuItemRole[keyof typeof MenuItemRole];
+import { MenuItemRole } from './menu-item-role';
 export declare enum CheckAppearance {
     Normal = "normal",
     TickOnly = "tick-only"

package/lib/number-field/number-field.d.ts

@@ -1,5 +1,5 @@
-import { DelegatesARIATextbox } from '@microsoft/fast-foundation';
 import type { Appearance, Shape, Size } from '../enums';
+import { DelegatesARIATextbox } from '../text-field/text-field';
 import { AffixIcon, type ErrorText, type FormElement, FormElementCharCount, FormElementHelperText, FormElementSuccessText, Localized } from '../../shared/patterns';
 import { FormAssociatedNumberField } from './number-field.form-associated';
 export type NumberFieldAppearance = Extract<Appearance, Appearance.Fieldset | Appearance.Ghost>;

package/lib/option/option.d.ts

@@ -1,3 +1,5 @@
+import { AffixIconWithTrailing } from '../../shared/patterns/affix';
+import { ARIAGlobalStatesAndProperties } from '../../shared/foundation/patterns/aria-global';
 import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
 export declare function isListboxOption(el: Element): el is ListboxOption;
 export declare class ListboxOption extends VividElement {
@@ -31,3 +33,7 @@ export declare class DelegatesARIAListboxOption {
     ariaSelected: 'true' | 'false' | string | null;
     ariaSetSize: string | null;
 }
+export interface DelegatesARIAListboxOption extends ARIAGlobalStatesAndProperties {
+}
+export interface ListboxOption extends DelegatesARIAListboxOption, AffixIconWithTrailing {
+}

package/lib/radio/radio.d.ts

@@ -1,10 +1,10 @@
 import { type SyntheticViewTemplate } from '@microsoft/fast-element';
-import { type FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type { VividComponentDefinition } from '../../shared/design-system/defineVividComponent.js';
 import type { Connotation } from '../enums.js';
 import { FormAssociatedRadio } from './radio.form-associated';
 export type RadioConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA>;
 export type RadioControl = Pick<HTMLInputElement, 'checked' | 'disabled' | 'readOnly' | 'focus' | 'setAttribute' | 'getAttribute'>;
-export type RadioOptions = FoundationElementDefinition & {
+export type RadioOptions = VividComponentDefinition & {
     checkedIndicator?: string | SyntheticViewTemplate;
 };
 export declare class Radio extends FormAssociatedRadio {

package/lib/searchable-select/option-tag.d.ts

@@ -1,8 +1,8 @@
-import { FoundationElement } from '@microsoft/fast-foundation';
+import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
 import { Shape } from '../enums';
 import { Localized } from '../../shared/patterns';
 export type OptionTagShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
-export declare class OptionTag extends FoundationElement {
+export declare class OptionTag extends VividElement {
     shape?: OptionTagShape;
     label?: string;
     removable: boolean;

package/lib/select/select.form-associated.d.ts

@@ -1,4 +1,4 @@
-import { FormAssociated } from '@microsoft/fast-foundation';
+import { FormAssociated } from '../../shared/foundation/form-associated/form-associated';
 import { Listbox } from '../../shared/foundation/listbox/listbox';
 declare class _Select extends Listbox {
 }

package/lib/switch/switch.d.ts

@@ -2,6 +2,7 @@ import type { Connotation } from '../enums';
 import { FormAssociatedSwitch } from './switch.form-associated';
 export type SwitchConnotation = Connotation.Accent | Connotation.Alert | Connotation.Announcement | Connotation.Success | Connotation.CTA;
 export declare class Switch extends FormAssociatedSwitch {
+    ariaLabel: string | null;
     label?: string;
     connotation?: SwitchConnotation;
     readOnly: boolean;

package/lib/tabs/tabs.d.ts

@@ -1,9 +1,13 @@
-import { TabsOrientation } from '@microsoft/fast-foundation';
 import type { Connotation, TabsGutters } from '../enums.js';
 import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
 export declare const ACTIVE_TAB_WIDTH = "--_tabs-active-tab-inline-size";
 export declare const TABLIST_COLUMN = "--_tabs-tablist-column";
 export type TabsConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA>;
+export declare const TabsOrientation: {
+    readonly vertical: "vertical";
+    readonly horizontal: "horizontal";
+};
+export type TabsOrientation = typeof TabsOrientation[keyof typeof TabsOrientation];
 export declare class Tabs extends VividElement {
     #private;
     orientation: TabsOrientation;

package/lib/text-anchor/text-anchor.d.ts

@@ -1,7 +1,7 @@
+import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
 import { Appearance, Connotation } from '../enums';
 import { AffixIcon } from '../../shared/patterns/affix';
 import { Anchor } from '../../shared/foundation/anchor/anchor';
-import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
 export type TextAnchorConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA>;
 export type TextAnchorAppearance = Extract<Appearance, Appearance.Ghost | Appearance.GhostLight>;
 export declare class TextAnchor extends VividElement {

package/lib/tree-item/tree-item.d.ts

@@ -1,5 +1,5 @@
-import { AffixIcon } from '../../shared/patterns/affix';
 import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
+import { AffixIcon } from '../../shared/patterns/affix';
 export declare function isTreeItemElement(el: Element): el is HTMLElement;
 export declare class TreeItem extends VividElement {
     text?: string;

package/lib/tree-view/tree-view.d.ts

@@ -1,5 +1,5 @@
+import { VividElement } from '../../shared/foundation/vivid-element/vivid-element.js';
 import { TreeItem } from '../tree-item/tree-item.js';
-import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
 export declare function getDisplayedNodes(rootNode: HTMLElement, selector: string): HTMLElement[];
 export declare class TreeView extends VividElement {
     renderCollapsedNodes: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vonage/vivid",
-	"version": "4.14.2",
+	"version": "4.14.4",
 	"type": "module",
 	"module": "./index.js",
 	"main": "./index.cjs",

package/shared/applyMixinsWithObservables.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const applyMixins = require('./apply-mixins2.cjs');
+const applyMixins = require('./apply-mixins.cjs');
 const vividElement = require('./vivid-element.cjs');
 
 function applyMixinsWithObservables(derivedCtor, ...baseCtors) {

package/shared/applyMixinsWithObservables.js

@@ -1,4 +1,4 @@
-import { a as applyMixins } from './apply-mixins2.js';
+import { a as applyMixins } from './apply-mixins.js';
 import { O as Observable } from './vivid-element.js';
 
 function applyMixinsWithObservables(derivedCtor, ...baseCtors) {

package/shared/definition11.cjs

@@ -180,7 +180,7 @@ function renderButtonContent(context) {
 		formnovalidate="${(x) => x.formnovalidate}"
 		formtarget="${(x) => x.formtarget}"
 		name="${(x) => x.name}"
-		type="${(x) => x.type}"
+		type="${(x) => x.type ?? "submit"}"
 		value="${(x) => x.value}"
 		aria-atomic="${(x) => x.ariaAtomic}"
 		aria-busy="${(x) => x.ariaBusy}"

package/shared/definition11.js

@@ -178,7 +178,7 @@ function renderButtonContent(context) {
 		formnovalidate="${(x) => x.formnovalidate}"
 		formtarget="${(x) => x.formtarget}"
 		name="${(x) => x.name}"
-		type="${(x) => x.type}"
+		type="${(x) => x.type ?? "submit"}"
 		value="${(x) => x.value}"
 		aria-atomic="${(x) => x.ariaAtomic}"
 		aria-busy="${(x) => x.ariaBusy}"

package/shared/definition16.cjs

@@ -1,24 +1,25 @@
 'use strict';
 
-const definition$1 = require('./definition27.cjs');
+const definition$2 = require('./definition27.cjs');
 const definition = require('./definition63.cjs');
-const definition$2 = require('./definition35.cjs');
+const definition$3 = require('./definition35.cjs');
 const textField = require('./text-field.cjs');
 const vividElement = require('./vivid-element.cjs');
+const applyMixins = require('./apply-mixins.cjs');
 const listbox = require('./listbox.cjs');
 const formAssociated = require('./form-associated.cjs');
 const affix = require('./affix.cjs');
 const strings = require('./strings.cjs');
 const numbers = require('./numbers.cjs');
-const applyMixins = require('./apply-mixins2.cjs');
 const formElements = require('./form-elements.cjs');
 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 styles = ":host{position:relative}.base{--_text-field-gutter-end: 44px}.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}.icon{inset-inline-end:16px;inset-inline-start:unset}:not(.disabled) .icon{cursor:pointer}.disabled .icon{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)}:host{position:relative}.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}}";
 
 class _Combobox extends listbox.Listbox {
 }
@@ -477,6 +478,13 @@ let Combobox = class extends FormAssociatedCombobox {
   slottedOptionsChanged(prev, next) {
     super.slottedOptionsChanged(prev, next);
     this.updateValue();
+    const scale = this.getAttribute("scale") || this.scale;
+    next.forEach((element) => {
+      if (scale) {
+        element.setAttribute("scale", scale);
+        element.scale = scale;
+      }
+    });
   }
   /**
    * Sets the value and to match the first selected option.
@@ -508,12 +516,21 @@ __decorateClass([
 __decorateClass([
   vividElement.attr
 ], Combobox.prototype, "appearance", 2);
+__decorateClass([
+  vividElement.attr
+], Combobox.prototype, "shape", 2);
+__decorateClass([
+  vividElement.attr()
+], Combobox.prototype, "scale", 2);
 __decorateClass([
   vividElement.attr
 ], Combobox.prototype, "placement", 2);
 __decorateClass([
   vividElement.attr({ mode: "boolean", attribute: "fixed-dropdown" })
 ], Combobox.prototype, "fixedDropdown", 2);
+__decorateClass([
+  vividElement.observable
+], Combobox.prototype, "metaSlottedContent", 2);
 __decorateClass([
   vividElement.observable
 ], Combobox.prototype, "maxHeight", 2);
@@ -529,12 +546,12 @@ Combobox = __decorateClass([
 ], Combobox);
 applyMixins.applyMixins(Combobox, affix.AffixIcon);
 
-function renderLabel() {
-  return vividElement.html` <label for="control" class="label">
-		${(x) => x.label}
-	</label>`;
-}
 const getStateClasses = ({
+  icon,
+  iconSlottedContent,
+  metaSlottedContent,
+  shape,
+  scale,
   disabled,
   placeholder,
   label,
@@ -542,10 +559,19 @@ const getStateClasses = ({
 }) => classNames.classNames(
   "base",
   ["disabled", disabled],
+  [`shape-${shape}`, Boolean(shape)],
+  [`size-${scale}`, Boolean(scale)],
   ["placeholder", Boolean(placeholder)],
   [`appearance-${appearance}`, Boolean(appearance)],
-  ["no-label", !label]
+  ["no-label", !label],
+  ["has-icon", !!icon || Boolean(iconSlottedContent?.length)],
+  ["has-meta", Boolean(metaSlottedContent?.length)]
 );
+function renderLabel() {
+  return vividElement.html` <label for="control" class="label">
+		${(x) => x.label}
+	</label>`;
+}
 function setFixedDropdownVarWidth(x) {
   return x.open && x.fixedDropdown ? `--_combobox-fixed-width: ${Math.round(
     x.getBoundingClientRect().width
@@ -553,28 +579,35 @@ 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())}
 		<div class="fieldset">
-			<input
-				id="control"
-				autocomplete="off"
-				class="control"
-				aria-activedescendant="${(x) => x.open ? x.ariaActiveDescendant : 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}"
-				role="combobox"
-				type="text"
-				?disabled="${(x) => x.disabled}"
-				:value="${(x) => x.value}"
-				@input="${(x, c) => x.inputHandler(c.event)}"
-				${ref.ref("control")}
-			/>
-			${() => affixIconTemplate("chevron-down-line")}
+			${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)}
+			<div class="wrapper">
+				<input
+					id="control"
+					autocomplete="off"
+					class="control"
+					aria-activedescendant="${(x) => x.open ? x.ariaActiveDescendant : 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}"
+					role="combobox"
+					type="text"
+					?disabled="${(x) => x.disabled}"
+					:value="${(x) => x.value}"
+					@input="${(x, c) => x.inputHandler(c.event)}"
+					${ref.ref("control")}
+				/>
+			</div>
+			<div class="leading-items-wrapper">
+				<slot name="meta" ${slotted.slotted("metaSlottedContent")}></slot>
+				${chevronTemplate}
+			</div>
 		</div>
 	</div>`;
 }
@@ -620,7 +653,7 @@ const comboboxDefinition = vividElement.defineVividComponent(
   "combobox",
   Combobox,
   comboboxTemplate,
-  [definition$1.iconDefinition, definition.popupDefinition, definition$2.listboxOptionDefinition],
+  [definition$2.iconDefinition, definition.popupDefinition, definition$3.listboxOptionDefinition],
   {
     styles: [textField.styles, styles],
     shadowOptions: {

package/shared/definition16.js

@@ -3,20 +3,21 @@ import { P as Popup, p as popupDefinition } from './definition63.js';
 import { l as listboxOptionDefinition } from './definition35.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 { a as applyMixins } from './apply-mixins.js';
 import { L as Listbox } from './listbox.js';
 import { F as FormAssociated } from './form-associated.js';
-import { b as AffixIcon, a as affixIconTemplateFactory } from './affix.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 { a as applyMixins } from './apply-mixins2.js';
 import { f as formElements } 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';
 
-const styles = ":host{position:relative}.base{--_text-field-gutter-end: 44px}.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}.icon{inset-inline-end:16px;inset-inline-start:unset}:not(.disabled) .icon{cursor:pointer}.disabled .icon{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)}:host{position:relative}.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}}";
 
 class _Combobox extends Listbox {
 }
@@ -475,6 +476,13 @@ let Combobox = class extends FormAssociatedCombobox {
   slottedOptionsChanged(prev, next) {
     super.slottedOptionsChanged(prev, next);
     this.updateValue();
+    const scale = this.getAttribute("scale") || this.scale;
+    next.forEach((element) => {
+      if (scale) {
+        element.setAttribute("scale", scale);
+        element.scale = scale;
+      }
+    });
   }
   /**
    * Sets the value and to match the first selected option.
@@ -506,12 +514,21 @@ __decorateClass([
 __decorateClass([
   attr
 ], Combobox.prototype, "appearance", 2);
+__decorateClass([
+  attr
+], Combobox.prototype, "shape", 2);
+__decorateClass([
+  attr()
+], Combobox.prototype, "scale", 2);
 __decorateClass([
   attr
 ], Combobox.prototype, "placement", 2);
 __decorateClass([
   attr({ mode: "boolean", attribute: "fixed-dropdown" })
 ], Combobox.prototype, "fixedDropdown", 2);
+__decorateClass([
+  observable
+], Combobox.prototype, "metaSlottedContent", 2);
 __decorateClass([
   observable
 ], Combobox.prototype, "maxHeight", 2);
@@ -527,12 +544,12 @@ Combobox = __decorateClass([
 ], Combobox);
 applyMixins(Combobox, AffixIcon);
 
-function renderLabel() {
-  return html` <label for="control" class="label">
-		${(x) => x.label}
-	</label>`;
-}
 const getStateClasses = ({
+  icon,
+  iconSlottedContent,
+  metaSlottedContent,
+  shape,
+  scale,
   disabled,
   placeholder,
   label,
@@ -540,10 +557,19 @@ const getStateClasses = ({
 }) => classNames(
   "base",
   ["disabled", disabled],
+  [`shape-${shape}`, Boolean(shape)],
+  [`size-${scale}`, Boolean(scale)],
   ["placeholder", Boolean(placeholder)],
   [`appearance-${appearance}`, Boolean(appearance)],
-  ["no-label", !label]
+  ["no-label", !label],
+  ["has-icon", !!icon || Boolean(iconSlottedContent?.length)],
+  ["has-meta", Boolean(metaSlottedContent?.length)]
 );
+function renderLabel() {
+  return html` <label for="control" class="label">
+		${(x) => x.label}
+	</label>`;
+}
 function setFixedDropdownVarWidth(x) {
   return x.open && x.fixedDropdown ? `--_combobox-fixed-width: ${Math.round(
     x.getBoundingClientRect().width
@@ -551,28 +577,35 @@ function setFixedDropdownVarWidth(x) {
 }
 function renderInput(context) {
   const affixIconTemplate = affixIconTemplateFactory(context);
+  const chevronTemplate = chevronTemplateFactory(context);
   return html` <div class="${getStateClasses}" ${ref("_anchor")}>
 		${when((x) => x.label, renderLabel())}
 		<div class="fieldset">
-			<input
-				id="control"
-				autocomplete="off"
-				class="control"
-				aria-activedescendant="${(x) => x.open ? x.ariaActiveDescendant : 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}"
-				role="combobox"
-				type="text"
-				?disabled="${(x) => x.disabled}"
-				:value="${(x) => x.value}"
-				@input="${(x, c) => x.inputHandler(c.event)}"
-				${ref("control")}
-			/>
-			${() => affixIconTemplate("chevron-down-line")}
+			${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
+			<div class="wrapper">
+				<input
+					id="control"
+					autocomplete="off"
+					class="control"
+					aria-activedescendant="${(x) => x.open ? x.ariaActiveDescendant : 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}"
+					role="combobox"
+					type="text"
+					?disabled="${(x) => x.disabled}"
+					:value="${(x) => x.value}"
+					@input="${(x, c) => x.inputHandler(c.event)}"
+					${ref("control")}
+				/>
+			</div>
+			<div class="leading-items-wrapper">
+				<slot name="meta" ${slotted("metaSlottedContent")}></slot>
+				${chevronTemplate}
+			</div>
 		</div>
 	</div>`;
 }

package/shared/definition17.cjs

@@ -2,10 +2,10 @@
 
 const definition = require('./definition27.cjs');
 const vividElement = require('./vivid-element.cjs');
-const keyCodes = require('./key-codes.cjs');
 const repeat = require('./repeat.cjs');
-const slotted = require('./slotted.cjs');
+const keyCodes = require('./key-codes.cjs');
 const children = require('./children.cjs');
+const slotted = require('./slotted.cjs');
 const when = require('./when.cjs');
 
 /**

package/shared/definition17.js

@@ -1,9 +1,9 @@
 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 { 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 { R as RepeatDirective } from './repeat.js';
-import { s as slotted, e as elements } from './slotted.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';
+import { s as slotted, e as elements } from './slotted.js';
 import { w as when } from './when.js';
 
 /**