@vonage/vivid 4.14.1 → 4.14.3

package/shared/definition16.js

@@ -3,21 +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 { A 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 { a as Listbox$1 } from './listbox2.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 {
 }
@@ -476,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.
@@ -507,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);
@@ -528,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,
@@ -541,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
@@ -552,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>`;
 }
@@ -604,7 +636,7 @@ const comboboxTemplate = (context) => {
 					?disabled="${(x) => x.disabled}"
 					${ref("listbox")}>
 					<slot ${slotted({
-    filter: Listbox$1.slottedOptionFilter,
+    filter: Listbox.slottedOptionFilter,
     flatten: true,
     property: "slottedOptions"
   })}>

package/shared/definition17.cjs

@@ -274,15 +274,16 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
    * @internal
    */
   noTabbingChanged() {
-    if (this.noTabbing) {
-      this.setAttribute("tabIndex", "-1");
-    } else {
-      this.setAttribute(
-        "tabIndex",
-        this.contains(document.activeElement) ? "-1" : "0"
-      );
+    if (this.$fastController.isConnected) {
+      this.#setTabIndex();
     }
   }
+  #setTabIndex() {
+    this.setAttribute(
+      "tabIndex",
+      this.noTabbing || this.contains(document.activeElement) ? "-1" : "0"
+    );
+  }
   /**
    * @internal
    */
@@ -376,6 +377,7 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
     this.observer = new MutationObserver(this.onChildListChange);
     this.observer.observe(this, { childList: true });
     vividElement.DOM.queueUpdate(this.queueRowIndexUpdate);
+    this.#setTabIndex();
     vividElement.Observable.getNotifier(this).subscribe(
       this.#changeHandler,
       "columnDefinitions"

package/shared/definition17.js

@@ -272,15 +272,16 @@ const _DataGrid = class _DataGrid extends VividElement {
    * @internal
    */
   noTabbingChanged() {
-    if (this.noTabbing) {
-      this.setAttribute("tabIndex", "-1");
-    } else {
-      this.setAttribute(
-        "tabIndex",
-        this.contains(document.activeElement) ? "-1" : "0"
-      );
+    if (this.$fastController.isConnected) {
+      this.#setTabIndex();
     }
   }
+  #setTabIndex() {
+    this.setAttribute(
+      "tabIndex",
+      this.noTabbing || this.contains(document.activeElement) ? "-1" : "0"
+    );
+  }
   /**
    * @internal
    */
@@ -374,6 +375,7 @@ const _DataGrid = class _DataGrid extends VividElement {
     this.observer = new MutationObserver(this.onChildListChange);
     this.observer.observe(this, { childList: true });
     DOM.queueUpdate(this.queueRowIndexUpdate);
+    this.#setTabIndex();
     Observable.getNotifier(this).subscribe(
       this.#changeHandler,
       "columnDefinitions"

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 };

package/shared/definition22.cjs

@@ -40,9 +40,10 @@ __decorateClass([
 ], Divider.prototype, "orientation");
 
 const getClasses = ({ orientation }) => classNames.classNames("base", [`${orientation}`, Boolean(orientation)]);
+const getAriaOrientation = ({ role, orientation }) => role === DividerRole.presentation ? null : orientation;
 const DividerTemplate = vividElement.html` <span
 	class="${getClasses}"
-	orientation="${(x) => x.orientation}"
+	aria-orientation="${getAriaOrientation}"
 	role="${(x) => x.role}"
 ></span>`;
 

package/shared/definition22.js

@@ -38,9 +38,10 @@ __decorateClass([
 ], Divider.prototype, "orientation");
 
 const getClasses = ({ orientation }) => classNames("base", [`${orientation}`, Boolean(orientation)]);
+const getAriaOrientation = ({ role, orientation }) => role === DividerRole.presentation ? null : orientation;
 const DividerTemplate = html` <span
 	class="${getClasses}"
-	orientation="${(x) => x.orientation}"
+	aria-orientation="${getAriaOrientation}"
 	role="${(x) => x.role}"
 ></span>`;
 

package/shared/definition24.js

@@ -1,7 +1,7 @@
 import { i as iconDefinition } from './definition27.js';
 import { a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { a as applyMixins } from './apply-mixins.js';
-import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
+import { A as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { V as VividFoundationButton } from './button.js';
 import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';

package/shared/definition25.cjs

@@ -3,7 +3,6 @@
 const definition$1 = require('./definition27.cjs');
 const definition = require('./definition11.cjs');
 const vividElement = require('./vivid-element.cjs');
-const enums = require('./enums.cjs');
 const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
 const formAssociated = require('./form-associated.cjs');
 const formElements = require('./form-elements.cjs');
@@ -12,7 +11,7 @@ const when = require('./when.cjs');
 const ref = require('./ref.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = ":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column;block-size:inherit;max-block-size:inherit}.control{display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none;transition:all .3s ease}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;--focus-inset: 1px;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))}.control:hover,.control:active,.control:focus-visible{background-color:var(--vvd-color-cta-100)}.main{pointer-events:none}.dz-preview{display:grid;box-sizing:border-box;padding:8px;border:1px solid var(--vvd-color-neutral-300);border-radius:8px;background-color:var(--file-picker-list-item-background-color, var(--vvd-color-canvas));grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.dz-preview .dz-details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.dz-preview .dz-details .dz-filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.dz-preview .dz-details .dz-size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.dz-preview .dz-error-message{color:var(--vvd-color-alert-500);font:var(--vvd-typography-base-condensed);margin-block-start:4px}.dz-preview:not(.dz-error) .dz-error-message{display:none}.dz-preview.dz-error{border:1px solid var(--vvd-color-alert-500)}.dz-preview.dz-error .dz-details .dz-size,.dz-preview.dz-error .dz-progress{display:none}.dz-preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}.preview-list{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.preview-list{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-thumb-color)}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:empty{display:none}";
+const styles = ":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column;block-size:inherit;max-block-size:inherit}.control{display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none;transition:all .3s ease}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;--focus-inset: 1px;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))}.control:hover,.control:active,.control:focus-visible{background-color:var(--vvd-color-cta-100)}.main{pointer-events:none}.dz-preview{display:grid;box-sizing:border-box;padding:8px;border:1px solid var(--vvd-color-neutral-300);border-radius:8px;background-color:var(--file-picker-list-item-background-color, var(--vvd-color-canvas));grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.dz-preview .dz-details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.dz-preview .dz-details .dz-filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.dz-preview .dz-details .dz-size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.dz-preview .dz-error-message{display:flex;align-items:center;color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);gap:4px;margin-block-start:4px}.dz-preview:not(.dz-error) .dz-error-message{display:none}.dz-preview.dz-error{border:1px solid var(--vvd-color-alert-500);background-color:var(--vvd-color-alert-50)}.dz-preview.dz-error .dz-details .dz-size,.dz-preview.dz-error .dz-progress{display:none}.dz-preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}.preview-list{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.preview-list{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-thumb-color)}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:empty{display:none}";
 
 var objectExtend = extend;
 
@@ -2167,16 +2166,19 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _dropzone, _FilePicker_instances, syncSingleFileState_fn, _localizeErrorMessage, _localizeFileSizeNumberAndUnits, addRemoveButtonToFilesPreview_fn, setRemoveButtonConnotationOnError_fn, chooseFile_fn, updateHiddenFileInput_fn, keepOnlyNewestFile_fn, handleFilesChanged_fn, updateFormValue_fn, setValueToAFakePathLikeNativeInput_fn, formatNumbersInMessage_fn;
+var _dropzone, _FilePicker_instances, syncSingleFileState_fn, _localizeErrorMessage, _localizeFileSizeNumberAndUnits, addRemoveButtonToFilesPreview_fn, chooseFile_fn, updateHiddenFileInput_fn, keepOnlyNewestFile_fn, handleFilesChanged_fn, updateFormValue_fn, setValueToAFakePathLikeNativeInput_fn, formatNumbersInMessage_fn;
 const isFormAssociatedTryingToSetFormValueToFakePath = (value) => typeof value === "string";
-const generateFilePreviewTemplate = (buttonTag, locale) => {
+const generateFilePreviewTemplate = (buttonTag, iconTag, locale) => {
   return `<div class="dz-preview dz-file-preview">
   <div class="dz-details">
     <div class="dz-filename"><span data-dz-name></span></div>
     <div class="dz-size"><span data-dz-size></span></div>
   </div>
-  <div class="dz-error-message"><span data-dz-errormessage></span></div>
-  <${buttonTag} class="remove-btn" icon="delete-line" appearance="ghost" size="condensed" aria-label="${locale.filePicker.removeFileLabel}"></${buttonTag}>
+  <div class="dz-error-message">
+  <${iconTag} name="info-line" size="-6"></${iconTag}>
+  <span data-dz-errormessage></span>
+  </div>
+  <${buttonTag} class="remove-btn" icon="delete-line" appearance="ghost-light" size="condensed" aria-label="${locale.filePicker.removeFileLabel}"></${buttonTag}>
 </div>`;
 };
 let FilePicker = class extends FormAssociatedFilePicker {
@@ -2199,6 +2201,10 @@ let FilePicker = class extends FormAssociatedFilePicker {
      * Used internally to hold the tag that button is registered at.
      */
     this.buttonTag = "vwc-button";
+    /**
+     * Used internally to hold the tag that icon is registered at.
+     */
+    this.iconTag = "vwc-icon";
     __privateAdd(this, _localizeErrorMessage, (file, message) => {
       if (file.previewElement) {
         file.previewElement.classList.add("dz-error");
@@ -2289,7 +2295,11 @@ let FilePicker = class extends FormAssociatedFilePicker {
       addRemoveLinks: false,
       previewsContainer: previewList,
       createImageThumbnails: false,
-      previewTemplate: generateFilePreviewTemplate(this.buttonTag, this.locale),
+      previewTemplate: generateFilePreviewTemplate(
+        this.buttonTag,
+        this.iconTag,
+        this.locale
+      ),
       dictInvalidFileType: this.invalidFileTypeError || this.locale.filePicker.invalidFileTypeError,
       dictMaxFilesExceeded: this.maxFilesExceededError || this.locale.filePicker.maxFilesExceededError,
       dictFileTooBig: this.fileTooBigError || this.locale.filePicker.fileTooBigError,
@@ -2313,6 +2323,13 @@ let FilePicker = class extends FormAssociatedFilePicker {
   setButtonTag(tag) {
     this.buttonTag = tag;
   }
+  /**
+   * Used internally to set the icon tag.
+   * @internal
+   */
+  setIconTag(tag) {
+    this.iconTag = tag;
+  }
   /**
    * @internal
    */
@@ -2363,17 +2380,6 @@ addRemoveButtonToFilesPreview_fn = function() {
     }
     __privateMethod(this, _FilePicker_instances, handleFilesChanged_fn).call(this);
   });
-  __privateMethod(this, _FilePicker_instances, setRemoveButtonConnotationOnError_fn).call(this);
-};
-setRemoveButtonConnotationOnError_fn = function() {
-  __privateGet(this, _dropzone).on("error", (file) => {
-    if (file.previewElement) {
-      const removeButton = file.previewElement.querySelector(
-        ".remove-btn"
-      );
-      removeButton.connotation = enums.Connotation.Alert;
-    }
-  });
 };
 chooseFile_fn = function() {
   if (__privateGet(this, _dropzone).hiddenFileInput) {
@@ -2458,6 +2464,7 @@ const FilePickerTemplate = (context) => {
   return vividElement.html`
 		${(x) => {
     x.setButtonTag(context.tagFor(definition.Button));
+    x.setIconTag(context.tagFor(definition$1.Icon));
   }}
 		<div class="base" aria-label="${(x) => x.label}">
 			${when.when(

package/shared/definition25.js

@@ -1,7 +1,6 @@
-import { i as iconDefinition } from './definition27.js';
+import { I as Icon, i as iconDefinition } from './definition27.js';
 import { B as Button, b as buttonDefinition } from './definition11.js';
 import { V as VividElement, a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
-import { C as Connotation } from './enums.js';
 import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
 import { F as FormAssociated } from './form-associated.js';
 import { e as errorText, f as formElements, a as FormElementHelperText, g as getFeedbackTemplate } from './form-elements.js';
@@ -10,7 +9,7 @@ import { w as when } from './when.js';
 import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column;block-size:inherit;max-block-size:inherit}.control{display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none;transition:all .3s ease}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;--focus-inset: 1px;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))}.control:hover,.control:active,.control:focus-visible{background-color:var(--vvd-color-cta-100)}.main{pointer-events:none}.dz-preview{display:grid;box-sizing:border-box;padding:8px;border:1px solid var(--vvd-color-neutral-300);border-radius:8px;background-color:var(--file-picker-list-item-background-color, var(--vvd-color-canvas));grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.dz-preview .dz-details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.dz-preview .dz-details .dz-filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.dz-preview .dz-details .dz-size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.dz-preview .dz-error-message{color:var(--vvd-color-alert-500);font:var(--vvd-typography-base-condensed);margin-block-start:4px}.dz-preview:not(.dz-error) .dz-error-message{display:none}.dz-preview.dz-error{border:1px solid var(--vvd-color-alert-500)}.dz-preview.dz-error .dz-details .dz-size,.dz-preview.dz-error .dz-progress{display:none}.dz-preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}.preview-list{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.preview-list{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-thumb-color)}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:empty{display:none}";
+const styles = ":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column;block-size:inherit;max-block-size:inherit}.control{display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none;transition:all .3s ease}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;--focus-inset: 1px;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))}.control:hover,.control:active,.control:focus-visible{background-color:var(--vvd-color-cta-100)}.main{pointer-events:none}.dz-preview{display:grid;box-sizing:border-box;padding:8px;border:1px solid var(--vvd-color-neutral-300);border-radius:8px;background-color:var(--file-picker-list-item-background-color, var(--vvd-color-canvas));grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.dz-preview .dz-details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.dz-preview .dz-details .dz-filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.dz-preview .dz-details .dz-size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.dz-preview .dz-error-message{display:flex;align-items:center;color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);gap:4px;margin-block-start:4px}.dz-preview:not(.dz-error) .dz-error-message{display:none}.dz-preview.dz-error{border:1px solid var(--vvd-color-alert-500);background-color:var(--vvd-color-alert-50)}.dz-preview.dz-error .dz-details .dz-size,.dz-preview.dz-error .dz-progress{display:none}.dz-preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}.preview-list{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.preview-list{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-thumb-color)}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:empty{display:none}";
 
 var objectExtend = extend;
 
@@ -2165,16 +2164,19 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _dropzone, _FilePicker_instances, syncSingleFileState_fn, _localizeErrorMessage, _localizeFileSizeNumberAndUnits, addRemoveButtonToFilesPreview_fn, setRemoveButtonConnotationOnError_fn, chooseFile_fn, updateHiddenFileInput_fn, keepOnlyNewestFile_fn, handleFilesChanged_fn, updateFormValue_fn, setValueToAFakePathLikeNativeInput_fn, formatNumbersInMessage_fn;
+var _dropzone, _FilePicker_instances, syncSingleFileState_fn, _localizeErrorMessage, _localizeFileSizeNumberAndUnits, addRemoveButtonToFilesPreview_fn, chooseFile_fn, updateHiddenFileInput_fn, keepOnlyNewestFile_fn, handleFilesChanged_fn, updateFormValue_fn, setValueToAFakePathLikeNativeInput_fn, formatNumbersInMessage_fn;
 const isFormAssociatedTryingToSetFormValueToFakePath = (value) => typeof value === "string";
-const generateFilePreviewTemplate = (buttonTag, locale) => {
+const generateFilePreviewTemplate = (buttonTag, iconTag, locale) => {
   return `<div class="dz-preview dz-file-preview">
   <div class="dz-details">
     <div class="dz-filename"><span data-dz-name></span></div>
     <div class="dz-size"><span data-dz-size></span></div>
   </div>
-  <div class="dz-error-message"><span data-dz-errormessage></span></div>
-  <${buttonTag} class="remove-btn" icon="delete-line" appearance="ghost" size="condensed" aria-label="${locale.filePicker.removeFileLabel}"></${buttonTag}>
+  <div class="dz-error-message">
+  <${iconTag} name="info-line" size="-6"></${iconTag}>
+  <span data-dz-errormessage></span>
+  </div>
+  <${buttonTag} class="remove-btn" icon="delete-line" appearance="ghost-light" size="condensed" aria-label="${locale.filePicker.removeFileLabel}"></${buttonTag}>
 </div>`;
 };
 let FilePicker = class extends FormAssociatedFilePicker {
@@ -2197,6 +2199,10 @@ let FilePicker = class extends FormAssociatedFilePicker {
      * Used internally to hold the tag that button is registered at.
      */
     this.buttonTag = "vwc-button";
+    /**
+     * Used internally to hold the tag that icon is registered at.
+     */
+    this.iconTag = "vwc-icon";
     __privateAdd(this, _localizeErrorMessage, (file, message) => {
       if (file.previewElement) {
         file.previewElement.classList.add("dz-error");
@@ -2287,7 +2293,11 @@ let FilePicker = class extends FormAssociatedFilePicker {
       addRemoveLinks: false,
       previewsContainer: previewList,
       createImageThumbnails: false,
-      previewTemplate: generateFilePreviewTemplate(this.buttonTag, this.locale),
+      previewTemplate: generateFilePreviewTemplate(
+        this.buttonTag,
+        this.iconTag,
+        this.locale
+      ),
       dictInvalidFileType: this.invalidFileTypeError || this.locale.filePicker.invalidFileTypeError,
       dictMaxFilesExceeded: this.maxFilesExceededError || this.locale.filePicker.maxFilesExceededError,
       dictFileTooBig: this.fileTooBigError || this.locale.filePicker.fileTooBigError,
@@ -2311,6 +2321,13 @@ let FilePicker = class extends FormAssociatedFilePicker {
   setButtonTag(tag) {
     this.buttonTag = tag;
   }
+  /**
+   * Used internally to set the icon tag.
+   * @internal
+   */
+  setIconTag(tag) {
+    this.iconTag = tag;
+  }
   /**
    * @internal
    */
@@ -2361,17 +2378,6 @@ addRemoveButtonToFilesPreview_fn = function() {
     }
     __privateMethod(this, _FilePicker_instances, handleFilesChanged_fn).call(this);
   });
-  __privateMethod(this, _FilePicker_instances, setRemoveButtonConnotationOnError_fn).call(this);
-};
-setRemoveButtonConnotationOnError_fn = function() {
-  __privateGet(this, _dropzone).on("error", (file) => {
-    if (file.previewElement) {
-      const removeButton = file.previewElement.querySelector(
-        ".remove-btn"
-      );
-      removeButton.connotation = Connotation.Alert;
-    }
-  });
 };
 chooseFile_fn = function() {
   if (__privateGet(this, _dropzone).hiddenFileInput) {
@@ -2456,6 +2462,7 @@ const FilePickerTemplate = (context) => {
   return html`
 		${(x) => {
     x.setButtonTag(context.tagFor(Button));
+    x.setIconTag(context.tagFor(Icon));
   }}
 		<div class="base" aria-label="${(x) => x.label}">
 			${when(

package/shared/definition27.cjs

@@ -145,7 +145,7 @@ _has._curry2(function memoizeWith(mFn, fn) {
 });
 
 const ICONS_BASE_URL = "https://icon.resources.vonage.com";
-const ICONS_VERSION = "4.6.2";
+const ICONS_VERSION = "4.6.3";
 
 const numberConverter = {
   toView(value) {

package/shared/definition27.js

@@ -143,7 +143,7 @@ _curry2(function memoizeWith(mFn, fn) {
 });
 
 const ICONS_BASE_URL = "https://icon.resources.vonage.com";
-const ICONS_VERSION = "4.6.2";
+const ICONS_VERSION = "4.6.3";
 
 const numberConverter = {
   toView(value) {