@vonage/vivid 4.14.2 → 4.14.4

package/shared/definition2.cjs

@@ -18,13 +18,13 @@ 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.
+   * Designates only a single AccordionItem can be open a time.
    */
   single: "single",
   /**
-   * Designates multiple {@link @microsoft/fast-foundation#(AccordionItem:class) | AccordionItems} can be open simultaneously.
+   * Designates multiple AccordionItems can be open simultaneously.
    */
   multi: "multi"
 };
@@ -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,13 +16,13 @@ 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.
+   * Designates only a single AccordionItem can be open a time.
    */
   single: "single",
   /**
-   * Designates multiple {@link @microsoft/fast-foundation#(AccordionItem:class) | AccordionItems} can be open simultaneously.
+   * Designates multiple AccordionItems can be open simultaneously.
    */
   multi: "multi"
 };
@@ -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/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/definition29.cjs

@@ -5,7 +5,7 @@ const definition = require('./definition27.cjs');
 const vividElement = require('./vivid-element.cjs');
 const keyCodes = require('./key-codes.cjs');
 const affix = require('./affix.cjs');
-const applyMixins = require('./apply-mixins2.cjs');
+const applyMixins = require('./apply-mixins.cjs');
 const direction = require('./direction.cjs');
 const anchored = require('./anchored.cjs');
 const dom = require('./dom.cjs');
@@ -15,35 +15,21 @@ const slotted = require('./slotted.cjs');
 const classNames = require('./class-names.cjs');
 const when = require('./when.cjs');
 
-/**
- * Menu items roles.
- * @public
- */
-const MenuItemRole$1 = {
-    /**
-     * The menu item has a "menuitem" role
-     */
-    menuitem: "menuitem",
-    /**
-     * The menu item has a "menuitemcheckbox" role
-     */
-    menuitemcheckbox: "menuitemcheckbox",
-    /**
-     * The menu item has a "menuitemradio" role
-     */
-    menuitemradio: "menuitemradio",
+const styles$1 = ":host(:focus-visible){outline:none}:host([disabled]){pointer-events:none}.base{--_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(--_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: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary: var(--vvd-menu-item-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-menu-item-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-menu-item-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-menu-item-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-menu-item-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-menu-item-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-menu-item-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-menu-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-menu-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-menu-item-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-menu-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-menu-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-menu-item-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-menu-item-accent-dim, var(--vvd-color-neutral-200))}.base{display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.base:not(.two-lines){gap:12px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:8px;padding-inline:12px}.base.two-lines{padding:12px;gap:16px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}:host(:not([role=presentation]):focus-visible) .base{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}.icon{flex-shrink:0;font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.action,.decorative{display:flex;place-content:center}.action{color:var(--_appearance-color-text)}.base.trailing .action,.base.has-meta .action{order:2}:host(:not([check-appearance],[aria-checked=true],[disabled])) .action{color:var(--vvd-color-neutral-500)}.base:not(.disabled) .decorative{color:var(--vvd-color-neutral-600)}.base.disabled .decorative{color:var(--vvd-color-neutral-200)}.base.has-meta .decorative{order:1}.chevron{order:3}.text{display:flex;overflow:hidden;flex-direction:column;gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base);-webkit-line-clamp:var(--text-primary-line-clamp, 1)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed);-webkit-line-clamp:var(--text-secondary-line-clamp, 1)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}";
+
+const MenuItemRole = {
+  menuitem: "menuitem",
+  menuitemcheckbox: "menuitemcheckbox",
+  menuitemradio: "menuitemradio",
+  presentation: "presentation"
 };
-/**
- * @internal
- */
 const roleForMenuItem = {
-    [MenuItemRole$1.menuitem]: "menuitem",
-    [MenuItemRole$1.menuitemcheckbox]: "menuitemcheckbox",
-    [MenuItemRole$1.menuitemradio]: "menuitemradio",
+  [MenuItemRole.menuitem]: "menuitem",
+  [MenuItemRole.menuitemcheckbox]: "menuitemcheckbox",
+  [MenuItemRole.menuitemradio]: "menuitemradio",
+  [MenuItemRole.presentation]: "presentation"
 };
 
-const styles$1 = ":host(:focus-visible){outline:none}:host([disabled]){pointer-events:none}.base{--_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(--_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: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary: var(--vvd-menu-item-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-menu-item-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-menu-item-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-menu-item-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-menu-item-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-menu-item-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-menu-item-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-menu-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-menu-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-menu-item-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-menu-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-menu-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-menu-item-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-menu-item-accent-dim, var(--vvd-color-neutral-200))}.base{display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.base:not(.two-lines){gap:12px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:8px;padding-inline:12px}.base.two-lines{padding:12px;gap:16px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}:host(:not([role=presentation]):focus-visible) .base{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}.icon{flex-shrink:0;font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.action,.decorative{display:flex;place-content:center}.action{color:var(--_appearance-color-text)}.base.trailing .action,.base.has-meta .action{order:2}:host(:not([check-appearance],[aria-checked=true],[disabled])) .action{color:var(--vvd-color-neutral-500)}.base:not(.disabled) .decorative{color:var(--vvd-color-neutral-600)}.base.disabled .decorative{color:var(--vvd-color-neutral-200)}.base.has-meta .decorative{order:1}.chevron{order:3}.text{display:flex;overflow:hidden;flex-direction:column;gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base);-webkit-line-clamp:var(--text-primary-line-clamp, 1)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed);-webkit-line-clamp:var(--text-secondary-line-clamp, 1)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}";
-
 var __defProp$1 = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __typeError = (msg) => {
@@ -384,10 +370,6 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-const MenuItemRole = {
-  ...MenuItemRole$1,
-  presentation: "presentation"
-};
 var CheckAppearance = /* @__PURE__ */ ((CheckAppearance2) => {
   CheckAppearance2["Normal"] = "normal";
   CheckAppearance2["TickOnly"] = "tick-only";
@@ -588,9 +570,6 @@ __decorateClass([
 __decorateClass([
   vividElement.attr({ mode: "boolean" })
 ], MenuItem.prototype, "checked");
-__decorateClass([
-  vividElement.observable
-], MenuItem.prototype, "submenuRegion");
 __decorateClass([
   vividElement.observable
 ], MenuItem.prototype, "hasSubmenu");

package/shared/definition29.js

@@ -3,7 +3,7 @@ import { I as Icon, i as iconDefinition } from './definition27.js';
 import { V as VividElement, D as DOM, o as observable, a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { g as keyHome, d as keyEnd, e as keyArrowUp, f as keyArrowDown, h as keyArrowLeft, i as keyArrowRight, a as keySpace, k as keyEnter } from './key-codes.js';
 import { b as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
-import { a as applyMixins } from './apply-mixins2.js';
+import { a as applyMixins } from './apply-mixins.js';
 import { D as Direction, g as getDirection } from './direction.js';
 import { a as anchored, b as anchorSlotTemplateFactory } from './anchored.js';
 import { i as isHTMLElement } from './dom.js';
@@ -13,35 +13,21 @@ import { s as slotted, e as elements } from './slotted.js';
 import { c as classNames } from './class-names.js';
 import { w as when } from './when.js';
 
-/**
- * Menu items roles.
- * @public
- */
-const MenuItemRole$1 = {
-    /**
-     * The menu item has a "menuitem" role
-     */
-    menuitem: "menuitem",
-    /**
-     * The menu item has a "menuitemcheckbox" role
-     */
-    menuitemcheckbox: "menuitemcheckbox",
-    /**
-     * The menu item has a "menuitemradio" role
-     */
-    menuitemradio: "menuitemradio",
+const styles$1 = ":host(:focus-visible){outline:none}:host([disabled]){pointer-events:none}.base{--_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(--_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: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary: var(--vvd-menu-item-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-menu-item-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-menu-item-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-menu-item-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-menu-item-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-menu-item-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-menu-item-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-menu-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-menu-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-menu-item-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-menu-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-menu-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-menu-item-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-menu-item-accent-dim, var(--vvd-color-neutral-200))}.base{display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.base:not(.two-lines){gap:12px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:8px;padding-inline:12px}.base.two-lines{padding:12px;gap:16px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}:host(:not([role=presentation]):focus-visible) .base{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}.icon{flex-shrink:0;font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.action,.decorative{display:flex;place-content:center}.action{color:var(--_appearance-color-text)}.base.trailing .action,.base.has-meta .action{order:2}:host(:not([check-appearance],[aria-checked=true],[disabled])) .action{color:var(--vvd-color-neutral-500)}.base:not(.disabled) .decorative{color:var(--vvd-color-neutral-600)}.base.disabled .decorative{color:var(--vvd-color-neutral-200)}.base.has-meta .decorative{order:1}.chevron{order:3}.text{display:flex;overflow:hidden;flex-direction:column;gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base);-webkit-line-clamp:var(--text-primary-line-clamp, 1)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed);-webkit-line-clamp:var(--text-secondary-line-clamp, 1)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}";
+
+const MenuItemRole = {
+  menuitem: "menuitem",
+  menuitemcheckbox: "menuitemcheckbox",
+  menuitemradio: "menuitemradio",
+  presentation: "presentation"
 };
-/**
- * @internal
- */
 const roleForMenuItem = {
-    [MenuItemRole$1.menuitem]: "menuitem",
-    [MenuItemRole$1.menuitemcheckbox]: "menuitemcheckbox",
-    [MenuItemRole$1.menuitemradio]: "menuitemradio",
+  [MenuItemRole.menuitem]: "menuitem",
+  [MenuItemRole.menuitemcheckbox]: "menuitemcheckbox",
+  [MenuItemRole.menuitemradio]: "menuitemradio",
+  [MenuItemRole.presentation]: "presentation"
 };
 
-const styles$1 = ":host(:focus-visible){outline:none}:host([disabled]){pointer-events:none}.base{--_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(--_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: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary: var(--vvd-menu-item-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-menu-item-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-menu-item-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-menu-item-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-menu-item-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-menu-item-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-menu-item-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-menu-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-menu-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-menu-item-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-menu-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-menu-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-menu-item-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-menu-item-accent-dim, var(--vvd-color-neutral-200))}.base{display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.base:not(.two-lines){gap:12px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:8px;padding-inline:12px}.base.two-lines{padding:12px;gap:16px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}:host(:not([role=presentation]):focus-visible) .base{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}.icon{flex-shrink:0;font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.action,.decorative{display:flex;place-content:center}.action{color:var(--_appearance-color-text)}.base.trailing .action,.base.has-meta .action{order:2}:host(:not([check-appearance],[aria-checked=true],[disabled])) .action{color:var(--vvd-color-neutral-500)}.base:not(.disabled) .decorative{color:var(--vvd-color-neutral-600)}.base.disabled .decorative{color:var(--vvd-color-neutral-200)}.base.has-meta .decorative{order:1}.chevron{order:3}.text{display:flex;overflow:hidden;flex-direction:column;gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base);-webkit-line-clamp:var(--text-primary-line-clamp, 1)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed);-webkit-line-clamp:var(--text-secondary-line-clamp, 1)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}";
-
 var __defProp$1 = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __typeError = (msg) => {
@@ -382,10 +368,6 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-const MenuItemRole = {
-  ...MenuItemRole$1,
-  presentation: "presentation"
-};
 var CheckAppearance = /* @__PURE__ */ ((CheckAppearance2) => {
   CheckAppearance2["Normal"] = "normal";
   CheckAppearance2["TickOnly"] = "tick-only";
@@ -586,9 +568,6 @@ __decorateClass([
 __decorateClass([
   attr({ mode: "boolean" })
 ], MenuItem.prototype, "checked");
-__decorateClass([
-  observable
-], MenuItem.prototype, "submenuRegion");
 __decorateClass([
   observable
 ], MenuItem.prototype, "hasSubmenu");

package/shared/definition33.cjs

@@ -2,7 +2,7 @@
 
 const definition = require('./definition27.cjs');
 const vividElement = require('./vivid-element.cjs');
-const applyMixins = require('./apply-mixins2.cjs');
+const applyMixins = require('./apply-mixins.cjs');
 const affix = require('./affix.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');

package/shared/definition33.js

@@ -1,6 +1,6 @@
 import { i as iconDefinition } from './definition27.js';
 import { V as VividElement, a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
-import { a as applyMixins } from './apply-mixins2.js';
+import { a as applyMixins } from './apply-mixins.js';
 import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';