@vonage/vivid 4.14.2 → 4.14.3

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.3",
 	"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/definition2.cjs

@@ -18,7 +18,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-const AccordionExpandMode = {
+const AccordionExpandMode$1 = {
   /**
    * Designates only a single {@link @microsoft/fast-foundation#(AccordionItem:class) } can be open a time.
    */
@@ -32,7 +32,7 @@ class Accordion extends vividElement.VividElement {
   constructor() {
     super(...arguments);
     /* eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value */
-    this.expandmode = AccordionExpandMode.single;
+    this.expandmode = AccordionExpandMode$1.single;
     this.activeItemIndex = 0;
     this.change = () => {
       this.$emit("change", this.activeid);
@@ -146,7 +146,7 @@ class Accordion extends vividElement.VividElement {
     });
   }
   isSingleExpandMode() {
-    return this.expandmode !== AccordionExpandMode.multi;
+    return this.expandmode !== AccordionExpandMode$1.multi;
   }
   adjust(item, adjustment) {
     this.focusItem(
@@ -164,7 +164,7 @@ class Accordion extends vividElement.VividElement {
     }
   }
   closeAll() {
-    if (this.expandmode === AccordionExpandMode.multi) {
+    if (this.expandmode === AccordionExpandMode$1.multi) {
       this.accordionItems.forEach((item) => {
         item.expanded = false;
       });
@@ -186,6 +186,10 @@ const AccordionTemplate = vividElement.html`
 	</div>
 `;
 
+const AccordionExpandMode = {
+  single: "single",
+  multi: "multi"
+};
 const accordionDefinition = vividElement.defineVividComponent(
   "accordion",
   Accordion,
@@ -197,5 +201,6 @@ const accordionDefinition = vividElement.defineVividComponent(
 );
 const registerAccordion = vividElement.createRegisterFunction(accordionDefinition);
 
+exports.AccordionExpandMode = AccordionExpandMode;
 exports.accordionDefinition = accordionDefinition;
 exports.registerAccordion = registerAccordion;

package/shared/definition2.js

@@ -16,7 +16,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-const AccordionExpandMode = {
+const AccordionExpandMode$1 = {
   /**
    * Designates only a single {@link @microsoft/fast-foundation#(AccordionItem:class) } can be open a time.
    */
@@ -30,7 +30,7 @@ class Accordion extends VividElement {
   constructor() {
     super(...arguments);
     /* eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value */
-    this.expandmode = AccordionExpandMode.single;
+    this.expandmode = AccordionExpandMode$1.single;
     this.activeItemIndex = 0;
     this.change = () => {
       this.$emit("change", this.activeid);
@@ -144,7 +144,7 @@ class Accordion extends VividElement {
     });
   }
   isSingleExpandMode() {
-    return this.expandmode !== AccordionExpandMode.multi;
+    return this.expandmode !== AccordionExpandMode$1.multi;
   }
   adjust(item, adjustment) {
     this.focusItem(
@@ -162,7 +162,7 @@ class Accordion extends VividElement {
     }
   }
   closeAll() {
-    if (this.expandmode === AccordionExpandMode.multi) {
+    if (this.expandmode === AccordionExpandMode$1.multi) {
       this.accordionItems.forEach((item) => {
         item.expanded = false;
       });
@@ -184,6 +184,10 @@ const AccordionTemplate = html`
 	</div>
 `;
 
+const AccordionExpandMode = {
+  single: "single",
+  multi: "multi"
+};
 const accordionDefinition = defineVividComponent(
   "accordion",
   Accordion,
@@ -195,4 +199,4 @@ const accordionDefinition = defineVividComponent(
 );
 const registerAccordion = createRegisterFunction(accordionDefinition);
 
-export { accordionDefinition as a, registerAccordion as r };
+export { AccordionExpandMode as A, accordionDefinition as a, registerAccordion as r };