@vonage/vivid 4.27.0 → 4.29.0

package/shared/definition44.js

@@ -11,11 +11,13 @@ import { L as ListboxOption } from './option.js';
 import { r as repeat } from './repeat.js';
 import { c as classNames } from './class-names.js';
 import { L as Localized } from './localized.js';
+import { I as Icon, i as iconDefinition } from './definition28.js';
+import { w as when } from './when.js';
 
-const styles$1 = "@charset \"UTF-8\";.ProseMirror li{position:relative}.ProseMirror-hideselection *::selection{background:transparent}.ProseMirror-hideselection *::-moz-selection{background:transparent}.ProseMirror-hideselection{caret-color:transparent}.ProseMirror [draggable][contenteditable=false]{user-select:text}.ProseMirror-selectednode{outline:2px solid #8cf}li.ProseMirror-selectednode{outline:none}li.ProseMirror-selectednode:after{content:\"\";position:absolute;inset:-2px -2px -2px -32px;border:2px solid #8cf;pointer-events:none}img.ProseMirror-separator{display:inline!important;border:none!important;margin:0!important}.ProseMirror-textblock-dropdown{min-width:3em}.ProseMirror-menu{margin:0 -4px;line-height:1}.ProseMirror-tooltip .ProseMirror-menu{width:-webkit-fit-content;width:fit-content;white-space:pre}.ProseMirror-menuitem{margin-right:3px;display:inline-block}.ProseMirror-menuseparator{border-right:1px solid #ddd;margin-right:3px}.ProseMirror-menu-dropdown,.ProseMirror-menu-dropdown-menu{font-size:90%;white-space:nowrap}.ProseMirror-menu-dropdown{vertical-align:1px;cursor:pointer;position:relative;padding-right:15px}.ProseMirror-menu-dropdown-wrap{padding:1px 0 1px 4px;display:inline-block;position:relative}.ProseMirror-menu-dropdown:after{content:\"\";border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid currentColor;opacity:.6;position:absolute;right:4px;top:calc(50% - 2px)}.ProseMirror-menu-dropdown-menu,.ProseMirror-menu-submenu{position:absolute;background:#fff;color:#666;border:1px solid #aaa;padding:2px}.ProseMirror-menu-dropdown-menu{z-index:15;min-width:6em}.ProseMirror-menu-dropdown-item{cursor:pointer;padding:2px 8px 2px 4px}.ProseMirror-menu-dropdown-item:hover{background:#f2f2f2}.ProseMirror-menu-submenu-wrap{position:relative;margin-right:-4px}.ProseMirror-menu-submenu-label:after{content:\"\";border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:4px solid currentColor;opacity:.6;position:absolute;right:4px;top:calc(50% - 4px)}.ProseMirror-menu-submenu{display:none;min-width:4em;left:100%;top:-3px}.ProseMirror-menu-active{background:#eee;border-radius:4px}.ProseMirror-menu-disabled{opacity:.3}.ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu,.ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu{display:block}.ProseMirror-menubar{border-top-left-radius:inherit;border-top-right-radius:inherit;position:relative;min-height:1em;color:#666;padding:1px 6px;top:0;left:0;right:0;border-bottom:1px solid silver;background:#fff;z-index:10;-moz-box-sizing:border-box;box-sizing:border-box;overflow:visible}.ProseMirror-icon{display:inline-block;line-height:.8;vertical-align:-2px;padding:2px 8px;cursor:pointer}.ProseMirror-menu-disabled.ProseMirror-icon{cursor:default}.ProseMirror-icon svg{fill:currentColor;height:1em}.ProseMirror-icon span{vertical-align:text-top}.ProseMirror-gapcursor{display:none;pointer-events:none;position:absolute}.ProseMirror-gapcursor:after{content:\"\";display:block;position:absolute;top:-2px;width:20px;border-top:1px solid black;animation:ProseMirror-cursor-blink 1.1s steps(2,start) infinite}@keyframes ProseMirror-cursor-blink{to{visibility:hidden}}.ProseMirror-focused .ProseMirror-gapcursor{display:block}.ProseMirror-example-setup-style hr{padding:2px 10px;border:none;margin:1em 0}.ProseMirror-example-setup-style hr:after{content:\"\";display:block;height:1px;background-color:silver;line-height:2px}.ProseMirror ul,.ProseMirror ol{padding-left:30px}.ProseMirror blockquote{padding-left:1em;border-left:3px solid #eee;margin-left:0;margin-right:0}.ProseMirror-example-setup-style img{cursor:default}.ProseMirror-prompt{background:#fff;padding:5px 10px 5px 15px;border:1px solid silver;position:fixed;border-radius:3px;z-index:11;box-shadow:-.5px 2px 5px #0003}.ProseMirror-prompt h5{margin:0;font-weight:400;font-size:100%;color:#444}.ProseMirror-prompt input[type=text],.ProseMirror-prompt textarea{background:#eee;border:none;outline:none}.ProseMirror-prompt input[type=text]{padding:0 4px}.ProseMirror-prompt-close{position:absolute;left:2px;top:1px;color:#666;border:none;background:transparent;padding:0}.ProseMirror-prompt-close:after{content:\"✕\";font-size:12px}.ProseMirror-invalid{background:#ffc;border:1px solid #cc7;border-radius:4px;padding:5px 10px;position:absolute;min-width:10em}.ProseMirror-prompt-buttons{margin-top:5px;display:none}.placeholder:before{position:absolute;color:var(--vvd-color-neutral-600);content:attr(data-placeholder);font:var(--vvd-typography-base);pointer-events:none}.editor{box-sizing:border-box;background:var(--vvd-color-canvas);background-clip:padding-box;color:var(--vvd-color-canvas-text)}.ProseMirror{position:relative;box-sizing:border-box;padding:10px 16px;block-size:120px;font:var(--vvd-typography-base);font-feature-settings:\"liga\" 0;font-variant-ligatures:none;line-height:1.2;outline:none;overflow-y:auto;white-space:break-spaces;word-wrap:break-word}.ProseMirror pre{white-space:pre-wrap}.ProseMirror p{margin-bottom:1em}.ProseMirror p:first-child,.ProseMirror h1:first-child,.ProseMirror h2:first-child,.ProseMirror h3:first-child,.ProseMirror h4:first-child,.ProseMirror h5:first-child,.ProseMirror h6:first-child{margin-top:10px}h2{font:var(--vvd-typography-heading-4)}h3{font:var(--vvd-typography-base-extended)}p{font:var(--vvd-typography-base)}:host{display:block}#editor{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}#editor{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}#editor ::-webkit-scrollbar{width:4px}#editor ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}#editor ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}#editor{position:relative;display:flex;flex-direction:column;block-size:100%;overflow-y:auto}[contenteditable=true]{overflow:unset;block-size:unset}#attachments-wrapper{order:1}#attachments-wrapper .divider{padding:0 12px}.hidden{display:none}.drag-overlay{position:absolute;z-index:10;display:none;align-items:center;justify-content:center;border:1px dashed var(--vvd-color-cta-400);border-radius:8px;background:var(--vvd-color-cta-100);font:var(--vvd-typography-base);inset:0;opacity:.8;pointer-events:none;transition:opacity .2s}.drag-over .drag-overlay{display:flex}";
+const styles$2 = "@charset \"UTF-8\";.ProseMirror li{position:relative}.ProseMirror-hideselection *::selection{background:transparent}.ProseMirror-hideselection *::-moz-selection{background:transparent}.ProseMirror-hideselection{caret-color:transparent}.ProseMirror [draggable][contenteditable=false]{user-select:text}.ProseMirror-selectednode{outline:2px solid #8cf}li.ProseMirror-selectednode{outline:none}li.ProseMirror-selectednode:after{content:\"\";position:absolute;inset:-2px -2px -2px -32px;border:2px solid #8cf;pointer-events:none}img.ProseMirror-separator{display:inline!important;border:none!important;margin:0!important}.ProseMirror-textblock-dropdown{min-width:3em}.ProseMirror-menu{margin:0 -4px;line-height:1}.ProseMirror-tooltip .ProseMirror-menu{width:-webkit-fit-content;width:fit-content;white-space:pre}.ProseMirror-menuitem{margin-right:3px;display:inline-block}.ProseMirror-menuseparator{border-right:1px solid #ddd;margin-right:3px}.ProseMirror-menu-dropdown,.ProseMirror-menu-dropdown-menu{font-size:90%;white-space:nowrap}.ProseMirror-menu-dropdown{vertical-align:1px;cursor:pointer;position:relative;padding-right:15px}.ProseMirror-menu-dropdown-wrap{padding:1px 0 1px 4px;display:inline-block;position:relative}.ProseMirror-menu-dropdown:after{content:\"\";border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid currentColor;opacity:.6;position:absolute;right:4px;top:calc(50% - 2px)}.ProseMirror-menu-dropdown-menu,.ProseMirror-menu-submenu{position:absolute;background:#fff;color:#666;border:1px solid #aaa;padding:2px}.ProseMirror-menu-dropdown-menu{z-index:15;min-width:6em}.ProseMirror-menu-dropdown-item{cursor:pointer;padding:2px 8px 2px 4px}.ProseMirror-menu-dropdown-item:hover{background:#f2f2f2}.ProseMirror-menu-submenu-wrap{position:relative;margin-right:-4px}.ProseMirror-menu-submenu-label:after{content:\"\";border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:4px solid currentColor;opacity:.6;position:absolute;right:4px;top:calc(50% - 4px)}.ProseMirror-menu-submenu{display:none;min-width:4em;left:100%;top:-3px}.ProseMirror-menu-active{background:#eee;border-radius:4px}.ProseMirror-menu-disabled{opacity:.3}.ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu,.ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu{display:block}.ProseMirror-menubar{border-top-left-radius:inherit;border-top-right-radius:inherit;position:relative;min-height:1em;color:#666;padding:1px 6px;top:0;left:0;right:0;border-bottom:1px solid silver;background:#fff;z-index:10;-moz-box-sizing:border-box;box-sizing:border-box;overflow:visible}.ProseMirror-icon{display:inline-block;line-height:.8;vertical-align:-2px;padding:2px 8px;cursor:pointer}.ProseMirror-menu-disabled.ProseMirror-icon{cursor:default}.ProseMirror-icon svg{fill:currentColor;height:1em}.ProseMirror-icon span{vertical-align:text-top}.ProseMirror-gapcursor{display:none;pointer-events:none;position:absolute}.ProseMirror-gapcursor:after{content:\"\";display:block;position:absolute;top:-2px;width:20px;border-top:1px solid black;animation:ProseMirror-cursor-blink 1.1s steps(2,start) infinite}@keyframes ProseMirror-cursor-blink{to{visibility:hidden}}.ProseMirror-focused .ProseMirror-gapcursor{display:block}.ProseMirror-example-setup-style hr{padding:2px 10px;border:none;margin:1em 0}.ProseMirror-example-setup-style hr:after{content:\"\";display:block;height:1px;background-color:silver;line-height:2px}.ProseMirror ul,.ProseMirror ol{padding-left:30px}.ProseMirror blockquote{padding-left:1em;border-left:3px solid #eee;margin-left:0;margin-right:0}.ProseMirror-example-setup-style img{cursor:default}.ProseMirror-prompt{background:#fff;padding:5px 10px 5px 15px;border:1px solid silver;position:fixed;border-radius:3px;z-index:11;box-shadow:-.5px 2px 5px #0003}.ProseMirror-prompt h5{margin:0;font-weight:400;font-size:100%;color:#444}.ProseMirror-prompt input[type=text],.ProseMirror-prompt textarea{background:#eee;border:none;outline:none}.ProseMirror-prompt input[type=text]{padding:0 4px}.ProseMirror-prompt-close{position:absolute;left:2px;top:1px;color:#666;border:none;background:transparent;padding:0}.ProseMirror-prompt-close:after{content:\"✕\";font-size:12px}.ProseMirror-invalid{background:#ffc;border:1px solid #cc7;border-radius:4px;padding:5px 10px;position:absolute;min-width:10em}.ProseMirror-prompt-buttons{margin-top:5px;display:none}.placeholder:before{position:absolute;color:var(--vvd-color-neutral-600);content:attr(data-placeholder);font:var(--vvd-typography-base);pointer-events:none}.editor{box-sizing:border-box;background:var(--vvd-color-canvas);background-clip:padding-box;color:var(--vvd-color-canvas-text)}.ProseMirror{position:relative;box-sizing:border-box;padding:10px 16px;block-size:120px;font:var(--vvd-typography-base);font-feature-settings:\"liga\" 0;font-variant-ligatures:none;line-height:1.2;outline:none;overflow-y:auto;white-space:break-spaces;word-wrap:break-word}.ProseMirror pre{white-space:pre-wrap}.ProseMirror p{margin-bottom:1em}.ProseMirror p:first-child,.ProseMirror h1:first-child,.ProseMirror h2:first-child,.ProseMirror h3:first-child,.ProseMirror h4:first-child,.ProseMirror h5:first-child,.ProseMirror h6:first-child{margin-top:10px}h2{font:var(--vvd-typography-heading-4)}h3{font:var(--vvd-typography-base-extended)}p{font:var(--vvd-typography-base)}:host{display:block}#editor{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}#editor{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}#editor ::-webkit-scrollbar{width:4px}#editor ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}#editor ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}#editor{position:relative;display:flex;flex-direction:column;block-size:100%;overflow-y:auto}[contenteditable=true]{overflow:unset;block-size:unset}#attachments-wrapper{order:1}#attachments-wrapper .divider{padding:0 12px}.hidden{display:none}.drag-overlay{position:absolute;z-index:10;display:none;align-items:center;justify-content:center;border:1px dashed var(--vvd-color-cta-400);border-radius:8px;background:var(--vvd-color-cta-100);font:var(--vvd-typography-base);inset:0;opacity:.8;pointer-events:none;transition:opacity .2s}.drag-over .drag-overlay{display:flex}";
 
-function notifyMenuBarChange(menuBar, eventName, payload) {
-  menuBar.$emit(eventName, payload, { bubbles: false, composed: false });
+function notifyMenubarChange(menubar, eventName, payload) {
+  menubar.$emit(eventName, payload, { bubbles: false, composed: false });
   return true;
 }
 const TEXT_DECORATION_ITEMS = [
@@ -106,8 +108,8 @@ const textSizeEventHandler = (event) => {
 };
 const MENU_BAR_ITEMS = {
   textBlock: {
-    registerStateProperty: function(menuBar) {
-      menuBar.addEventListener("text-styles-changed", textBlockEventHandler);
+    registerStateProperty: function(menubar) {
+      menubar.addEventListener("text-styles-changed", textBlockEventHandler);
     },
     render: function(context) {
       const selectTag = context.tagFor(Select);
@@ -125,7 +127,7 @@ const MENU_BAR_ITEMS = {
 				aria-label="Text Block"
 				placement="bottom-end"
 				value="${(_, { parent }) => parent.textBlockType}"
-				@change="${(_, { parent, event }) => notifyMenuBarChange(
+				@change="${(_, { parent, event }) => notifyMenubarChange(
         parent,
         "text-block-selected",
         event.target.value
@@ -158,8 +160,8 @@ const MENU_BAR_ITEMS = {
     }
   },
   textDecoration: {
-    registerStateProperty: function(menuBar) {
-      menuBar.addEventListener(
+    registerStateProperty: function(menubar) {
+      menubar.addEventListener(
         "text-styles-changed",
         textDecorationEventHandler
       );
@@ -181,7 +183,7 @@ const MENU_BAR_ITEMS = {
                                 appearance="ghost-light"
                                 shape="rounded"
                                 icon="${(x) => x.icon}"
-                                @click="${(x, c) => notifyMenuBarChange(
+                                @click="${(x, c) => notifyMenubarChange(
           c.parentContext.parent,
           "text-decoration-selected",
           x.value
@@ -195,8 +197,8 @@ const MENU_BAR_ITEMS = {
     }
   },
   textSize: {
-    registerStateProperty: function(menuBar) {
-      menuBar.addEventListener("text-styles-changed", textSizeEventHandler);
+    registerStateProperty: function(menubar) {
+      menubar.addEventListener("text-styles-changed", textSizeEventHandler);
     },
     render: function(context) {
       const menuTag = context.tagFor(Menu);
@@ -232,7 +234,7 @@ const MENU_BAR_ITEMS = {
 								internal-part
 								class="menubar-selector-menuitem"
 								connotation="cta"
-								@click="${(x, c) => notifyMenuBarChange(
+								@click="${(x, c) => notifyMenubarChange(
           c.parentContext.parent,
           "text-size-selected",
           x.value
@@ -254,16 +256,16 @@ const MENU_BAR_ITEMS = {
   }
 };
 
-var __defProp$1 = Object.defineProperty;
-var __decorateClass$1 = (decorators, target, key, kind) => {
+var __defProp$2 = Object.defineProperty;
+var __decorateClass$2 = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$1(target, key, result);
+  if (result) __defProp$2(target, key, result);
   return result;
 };
-class MenuBar extends Localized(VividElement) {
+class Menubar extends Localized(VividElement) {
   get #textEditorElement() {
     return this.parentElement;
   }
@@ -297,13 +299,13 @@ class MenuBar extends Localized(VividElement) {
     );
   }
 }
-__decorateClass$1([
+__decorateClass$2([
   attr({ attribute: "menu-items" })
-], MenuBar.prototype, "menuItems");
+], Menubar.prototype, "menuItems");
 
-const getClasses$1 = (menuBar) => classNames("control", [
+const getClasses$2 = (menubar) => classNames("control", [
   "hide-menubar",
-  getValidMenuItems(menuBar).length === 0
+  getValidMenuItems(menubar).length === 0
 ]);
 const validItems = ["textBlock", "textDecoration", "textSize", "divider"];
 function getPropertyStateRgistrationFunction(item) {
@@ -324,18 +326,18 @@ function renderMenuItems(context) {
     }}`
   )}`;
 }
-const MenuBarTemplate = (context) => {
-  return html`<template class="${getClasses$1}">
+const MenubarTemplate = (context) => {
+  return html`<template class="${getClasses$2}">
 		${renderMenuItems(context)}
 	</template>`;
 };
 
-const styles = ":host{display:flex;align-items:center;background-color:var(--vvd-color-neutral-50);gap:4px}:host .hide-menubar{display:none}.title{--_text-primary-custom-size: var(--vvd-typography-heading-4)}.subtitle{--_text-primary-custom-size: var(--vvd-typography-base-extended)}.body{--_text-primary-custom-size: var(--vvd-typography-base)}.divider{height:28px}#text-block{width:104px}";
+const styles$1 = ":host{display:flex;align-items:center;background-color:var(--vvd-color-neutral-50);gap:4px}:host .hide-menubar{display:none}.title{--_text-primary-custom-size: var(--vvd-typography-heading-4)}.subtitle{--_text-primary-custom-size: var(--vvd-typography-base-extended)}.body{--_text-primary-custom-size: var(--vvd-typography-base)}.divider{height:28px}#text-block{width:104px}";
 
-const menuBarDefinition = defineVividComponent(
+const menubarDefinition = defineVividComponent(
   "menubar",
-  MenuBar,
-  MenuBarTemplate,
+  Menubar,
+  MenubarTemplate,
   [
     buttonDefinition,
     selectDefinition,
@@ -346,7 +348,7 @@ const menuBarDefinition = defineVividComponent(
     menuItemDefinition
   ],
   {
-    styles,
+    styles: styles$1,
     shadowOptions: {
       delegatesFocus: true
     }
@@ -13881,13 +13883,51 @@ const customMarks = {
     }
   }
 };
-const extendedSchema = new Schema({
-  nodes: schema.spec.nodes,
+const dynamicSchema = (prefix = "vwc") => new Schema({
+  nodes: {
+    ...schema.spec.nodes.toObject(),
+    imageError: {
+      inline: true,
+      group: "inline",
+      atom: true,
+      attrs: {
+        alt: { default: "" },
+        icon: { default: "" },
+        errorMessage: { default: "Failed to attach" },
+        fileName: { default: "" }
+      },
+      toDOM(node) {
+        return [
+          `${prefix}-text-editor-image-placeholder`,
+          {
+            alt: node.attrs.alt,
+            icon: node.attrs.icon,
+            "error-message": node.attrs.errorMessage,
+            "file-name": node.attrs.fileName
+          }
+        ];
+      },
+      parseDOM: [
+        {
+          tag: `${prefix}-text-editor-image-placeholder`,
+          getAttrs(dom) {
+            return {
+              alt: dom.getAttribute("alt"),
+              icon: dom.getAttribute("icon"),
+              errorMessage: dom.getAttribute("error-message"),
+              fileName: dom.getAttribute("file-name")
+            };
+          }
+        }
+      ]
+    }
+  },
   marks: {
     ...schema.spec.marks.toObject(),
     ...customMarks
   }
 });
+dynamicSchema();
 
 const NEGATIVE_SELECTION = {
   start: -1,
@@ -13986,6 +14026,16 @@ function convertSelectionToVividFormat({
     end: to
   };
 }
+function getImageErrorNode(schema, file, errorMessage = "Image loading failed") {
+  const nodeType = schema.nodes.imageError;
+  const imageErrorNode = nodeType.create({
+    alt: `inline image from file ${file.name}`,
+    fileName: file.name,
+    icon: file.type.split("/")[1],
+    errorMessage
+  });
+  return imageErrorNode;
+}
 const isEmptyParagraph = (node) => {
   return node.type.name === "paragraph" && node.nodeSize === 2;
 };
@@ -14035,7 +14085,9 @@ class ProseMirrorFacade {
     }
     this.#dispatchEvent("change");
   };
-  init(element) {
+  #vwcPrefix = "vwc";
+  init(element, vwcPrefix = "vwc") {
+    this.#vwcPrefix = vwcPrefix;
     if (!(element instanceof HTMLElement)) {
       throw new Error(
         "ProseMirror Facade init accepts a valid HTMLElement as its first parameter"
@@ -14048,7 +14100,7 @@ class ProseMirrorFacade {
       keymap(baseKeymap)
     ];
     const state = EditorState.create({
-      schema: extendedSchema,
+      schema: dynamicSchema(this.#vwcPrefix),
       plugins
     });
     this.#view = new EditorView(element, { state });
@@ -14069,7 +14121,7 @@ class ProseMirrorFacade {
   }
   replaceContent(content) {
     this.#verifyViewInitiation();
-    const parser = DOMParser.fromSchema(extendedSchema);
+    const parser = DOMParser.fromSchema(this.#view.state.schema);
     const doc = parser.parse(
       new window.DOMParser().parseFromString(content, "text/html").body
     );
@@ -14254,7 +14306,8 @@ class ProseMirrorFacade {
   async addInlineImage({
     file,
     position,
-    alt
+    alt,
+    error
   }) {
     this.#verifyViewInitiation();
     const reader = new FileReader();
@@ -14266,7 +14319,7 @@ class ProseMirrorFacade {
     const { state, dispatch } = this.#view;
     const { schema } = state;
     const imageAlt = alt ?? `inline image from file ${file.name}`;
-    const imageNode = schema.nodes.image.create({ src, alt: imageAlt });
+    const imageNode = error ? getImageErrorNode(schema, file, error) : schema.nodes.image.create({ src, alt: imageAlt });
     let insertPos = position;
     if (typeof insertPos !== "number") {
       insertPos = state.selection.from;
@@ -14276,13 +14329,13 @@ class ProseMirrorFacade {
   }
 }
 
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
+var __defProp$1 = Object.defineProperty;
+var __decorateClass$1 = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
+  if (result) __defProp$1(target, key, result);
   return result;
 };
 const RichTextEditorTextBlocks = {
@@ -14420,17 +14473,17 @@ class RichTextEditor extends Localized(VividElement) {
     }
   }
 }
-__decorateClass([
+__decorateClass$1([
   attr({ converter: nullableNumberConverter, attribute: "selection-start" })
 ], RichTextEditor.prototype, "selectionStart");
-__decorateClass([
+__decorateClass$1([
   attr({ converter: nullableNumberConverter, attribute: "selection-end" })
 ], RichTextEditor.prototype, "selectionEnd");
-__decorateClass([
+__decorateClass$1([
   attr
 ], RichTextEditor.prototype, "placeholder");
 
-const getClasses = (_) => classNames("control");
+const getClasses$1 = (_) => classNames("control");
 const VALID_MENU_ELEMEMENT_SUFFIX = "menubar";
 const menuParent = (target) => target.parentElement;
 function textBlockSelectedHandler(event) {
@@ -14458,29 +14511,29 @@ function handleAttachmentsSlotChange(_, { event }) {
     slotElement.assignedElements().length < 1
   );
 }
-function handleMenuBarSlotChange(_, { event }) {
+function handleMenubarSlotChange(_, { event }) {
   const slot = event.target;
   const assignedElements = slot.assignedElements({ flatten: true });
-  const menuBar = assignedElements.find(
+  const menubar = assignedElements.find(
     (element) => element.tagName.toLowerCase().endsWith(VALID_MENU_ELEMEMENT_SUFFIX)
   );
   assignedElements.forEach((element) => {
-    if (element === menuBar) {
+    if (element === menubar) {
       element.style.removeProperty("display");
     } else {
       element.style.display = "none";
     }
   });
-  if (menuBar) {
-    menuBar.addEventListener(
+  if (menubar) {
+    menubar.addEventListener(
       "text-block-selected",
       textBlockSelectedHandler
     );
-    menuBar.addEventListener(
+    menubar.addEventListener(
       "text-decoration-selected",
       selectionDecorationSelectedHandler
     );
-    menuBar.addEventListener(
+    menubar.addEventListener(
       "text-size-selected",
       textSizeSelectedHandler
     );
@@ -14504,9 +14557,9 @@ function handleDragLeave(_, { event }) {
 }
 const RichTextEditorTemplate = (context) => {
   const dividerTag = context.tagFor(Divider);
-  return html`<template class="${getClasses}">
-		<div id="editor" 
-		     class="editor" 
+  return html`<template class="${getClasses$1}">
+		<div id="editor"
+		     class="editor"
 			 @drop="${handleFileDrop}"
 			 @dragenter="${handleDragEnter}"
 			 @dragleave="${handleDragLeave}"
@@ -14521,18 +14574,94 @@ const RichTextEditorTemplate = (context) => {
 				</slot>
 			</div>
 		</div>
-		<slot name="menu-bar" 
-			  @slotchange="${handleMenuBarSlotChange}"></slot>
+		<slot name="menu-bar"
+			  @slotchange="${handleMenubarSlotChange}"></slot>
+	</template>`;
+};
+
+const styles = ":host{white-space:normal}.image-placeholder{display:flex;width:250px;height:64px;box-sizing:border-box;align-items:center;padding:16px;border:1px solid var(--vvd-color-neutral-200);border-radius:12px;background-color:var(--vvd-color-canvas);gap:16px}.icon{display:flex;width:40px;height:40px;box-sizing:border-box;flex-shrink:0;align-items:center;justify-content:center;border-radius:8px;background-color:color-mix(in srgb,var(--vvd-color-neutral-950),transparent 90%);color:var(--vvd-color-neutral-600)}.info{display:flex;flex-direction:column;min-inline-size:0}.filename{display:flex;overflow:hidden;width:100%;max-width:220px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-condensed-bold);white-space:nowrap}.name{overflow:hidden;flex:1 1 auto;text-overflow:ellipsis}.suffix{flex:0 0 auto;margin-left:4px}.error{display:flex;align-items:center;color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed);gap:6px}";
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class ImagePlaceholder extends VividElement {
+}
+__decorateClass([
+  attr({ attribute: "file-name" })
+], ImagePlaceholder.prototype, "fileName");
+__decorateClass([
+  attr({ attribute: "size" })
+], ImagePlaceholder.prototype, "size");
+__decorateClass([
+  attr({ attribute: "error-message" })
+], ImagePlaceholder.prototype, "errorMessage");
+__decorateClass([
+  attr({ attribute: "icon" })
+], ImagePlaceholder.prototype, "icon");
+
+const getClasses = (_) => classNames("base");
+const getIconName = ({ icon }) => {
+  if (!icon) {
+    return "clear-file-solid";
+  }
+  return `file-${icon}-solid`;
+};
+const getFileSuffix = (x) => {
+  return x.fileName?.split(".").pop() || "";
+};
+const getFileName = (x) => {
+  return x.fileName?.replace(/\.[^/.]+$/, "") || "";
+};
+const ImagePlaceholderTemplate = (context) => {
+  const iconTag = context.tagFor(Icon);
+  return html`<template class="${getClasses}">
+		<div class="image-placeholder">
+			<div class="icon">
+				<${iconTag} name="${getIconName}" size="-5"></${iconTag}>
+			</div>
+			<div class="info">
+				<div class="filename" title="${(x) => x.fileName}">
+					<div class="name">${getFileName}</div>
+					<div class="suffix">${getFileSuffix}</div>
+				</div>
+				${when(
+    (x) => x.errorMessage,
+    html`<div class="error">
+					<span class="error-icon"><${iconTag} name="error-solid" size="-6"></${iconTag}></span>
+					<span class="error-text">${(x) => x.errorMessage}</span>
+				</div>`
+  )}
+			</div>
+		</div>
 	</template>`;
 };
 
+const imagePlaceholderDefinition = defineVividComponent(
+  "text-editor-image-placeholder",
+  ImagePlaceholder,
+  ImagePlaceholderTemplate,
+  [iconDefinition],
+  {
+    styles,
+    shadowOptions: {
+      delegatesFocus: true
+    }
+  }
+);
+
 const richTextEditorDefinition = defineVividComponent(
   "rich-text-editor",
   RichTextEditor,
   RichTextEditorTemplate,
-  [menuBarDefinition, dividerDefinition],
+  [menubarDefinition, dividerDefinition, imagePlaceholderDefinition],
   {
-    styles: styles$1,
+    styles: styles$2,
     shadowOptions: {
       delegatesFocus: true
     }

package/shared/definition45.cjs

@@ -21,9 +21,9 @@ const slotted = require('./slotted.cjs');
 const classNames = require('./class-names.cjs');
 const repeat = require('./repeat.cjs');
 
-const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host(:focus-visible){outline:none}:host{display:inline-block;inline-size:300px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{display:flex;flex-direction:column;gap:4px}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.selection-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary: var(--vvd-searchable-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-searchable-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-searchable-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-searchable-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-searchable-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-searchable-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-searchable-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-searchable-select-accent-fierce, var(--vvd-color-neutral-700))}.fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.fieldset.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.fieldset: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}.fieldset: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)}.fieldset:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset: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)}.fieldset:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset: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)}.fieldset:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.fieldset: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)}.fieldset:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.fieldset{display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-block:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}.fieldset:focus-within{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}:host(:not([shape=pill])) .fieldset{border-radius:8px}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{display:flex;overflow:hidden;flex:1;flex-direction:column;gap:8px;min-block-size:24px}.tag-row{display:flex;gap:8px;inline-size:100%}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;flex:1;border:none;background:none;block-size:24px;font:var(--vvd-typography-base);max-inline-size:100%;min-inline-size:min(100px,40%);outline:none}.contains-only-input input:not(:focus){position:absolute;block-size:0;inline-size:0;min-inline-size:0;opacity:0;pointer-events:none}.listbox{display:flex;flex-direction:column;padding:4px;gap:2px;max-block-size:var(--searchable-select-height, 408px);overflow-y:auto}.empty-message{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);min-block-size:40px;text-align:center}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width, 100%)}slot[name=icon]{font-size:20px}.visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}";
+const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host(:focus-visible){outline:none}:host{display:inline-block;inline-size:300px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{display:flex;flex-direction:column;gap:4px}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.selection-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary: var(--vvd-searchable-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-searchable-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-searchable-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-searchable-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-searchable-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-searchable-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-searchable-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-searchable-select-accent-fierce, var(--vvd-color-neutral-700))}.fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.fieldset.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.fieldset: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}.fieldset: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)}.fieldset:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset: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)}.fieldset:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset: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)}.fieldset:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.fieldset: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)}.fieldset:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.fieldset{display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-block:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}@supports selector(:has(*)){.fieldset:not(.has-highlighted-option):has(input:focus){box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}}@supports not selector(:has(*)){.fieldset:not(.has-highlighted-option):focus-within{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}}:host(:not([shape=pill])) .fieldset{border-radius:8px}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{display:flex;overflow:hidden;flex:1;flex-direction:column;gap:8px;min-block-size:24px}.tag-row{display:flex;gap:8px;inline-size:100%}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;flex:1;border:none;background:none;block-size:24px;font:var(--vvd-typography-base);max-inline-size:100%;min-inline-size:min(100px,40%);outline:none}.contains-only-input input:not(:focus){position:absolute;block-size:0;inline-size:0;min-inline-size:0;opacity:0;pointer-events:none}.listbox{display:flex;flex-direction:column;padding:4px;gap:2px;max-block-size:var(--searchable-select-height, 408px);overflow-y:auto}.empty-message{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);min-block-size:40px;text-align:center}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width, 100%)}slot[name=icon]{font-size:20px}.visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}::slotted([data-vvd-component=option][data-highlighted]){border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}";
 
-const optionTagStyles = ".base.connotation-cta{--_connotation-color-contrast: var(--vvd-option-tag-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-contrast: var(--vvd-option-tag-accent-contrast, var(--vvd-color-neutral-800))}.base{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--fill-color);block-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;user-select:none;vertical-align:middle}.base:not(.disabled){--text-color: var(--_connotation-color-contrast);--fill-color: color-mix( in srgb, var(--_connotation-color-contrast), transparent 87.5% );--outline-color: transparent}.base.disabled{--text-color: var(--vvd-color-neutral-300);--fill-color: color-mix( in srgb, var(--vvd-color-neutral-800), transparent 87.5% );--outline-color: transparent}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5)}.remove-button{display:flex;align-items:center;border-radius:inherit;cursor:pointer;outline:none}.disabled .remove-button{pointer-events:none}.remove-button:focus-visible:before{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}";
+const optionTagStyles = ".base.connotation-cta{--_connotation-color-contrast: var(--vvd-option-tag-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-contrast: var(--vvd-option-tag-accent-contrast, var(--vvd-color-neutral-800))}.base{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--fill-color);block-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;user-select:none;vertical-align:middle}.base:not(.disabled){--text-color: var(--_connotation-color-contrast);--fill-color: var(--_connotation-color-soft);--outline-color: transparent}@supports (background-color: color-mix(in srgb,black 50%,white)){.base:not(.disabled){--fill-color: color-mix( in srgb, var(--_connotation-color-contrast), transparent 87.5% )}}.base.disabled{--text-color: var(--vvd-color-neutral-300);--fill-color: var(--vvd-color-neutral-200);--outline-color: transparent}@supports (background-color: color-mix(in srgb,black 50%,white)){.base.disabled{--fill-color: color-mix( in srgb, var(--vvd-color-neutral-800), transparent 87.5% )}}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5)}.remove-button{display:flex;align-items:center;border-radius:inherit;cursor:pointer;outline:none}.disabled .remove-button{pointer-events:none}.remove-button:focus-visible:before{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}";
 
 var __defProp$1 = Object.defineProperty;
 var __decorateClass$1 = (decorators, target, key, kind) => {
@@ -451,7 +451,9 @@ class SearchableSelect extends mixins.WithFeedback(
   }
   #transitionHighlightedOptionTo(index) {
     if (typeof this._highlightedOptionIndex === "number") {
-      this._filteredEnabledOptions[this._highlightedOptionIndex]._highlighted = false;
+      const prevOption = this._filteredEnabledOptions[this._highlightedOptionIndex];
+      prevOption._highlighted = false;
+      prevOption.removeAttribute("data-highlighted");
     }
     if (typeof index === "number") {
       if (!this._filteredEnabledOptions.length) {
@@ -467,6 +469,7 @@ class SearchableSelect extends mixins.WithFeedback(
     if (typeof this._highlightedOptionIndex === "number") {
       const highlightedOption = this._filteredEnabledOptions[this._highlightedOptionIndex];
       highlightedOption._highlighted = true;
+      highlightedOption.setAttribute("data-highlighted", "");
       scrollIntoView.scrollIntoView(highlightedOption, this._listbox, "nearest");
       this._changeDescription = this.locale.searchableSelect.optionFocusedMessage(
         highlightedOption.text,
@@ -541,7 +544,10 @@ class SearchableSelect extends mixins.WithFeedback(
     return this.disabled || option.disabled;
   }
   #textForValue(value) {
-    return this._slottedOptions?.find((option) => option.value === value)?.text;
+    const option = this._slottedOptions?.find(
+      (option2) => option2.value === value
+    );
+    return option?.label;
   }
   /**
    * @internal
@@ -968,7 +974,8 @@ const getStateClasses = (x) => classNames.classNames(
   [`appearance-${x.appearance}`, Boolean(x.appearance)],
   [`shape-${x.shape}`, Boolean(x.shape)],
   ["error", Boolean(x.errorValidationMessage)],
-  ["success", !!x.successText]
+  ["success", !!x.successText],
+  ["has-highlighted-option", x._highlightedOptionIndex !== null]
 );
 function renderLabel() {
   return vividElement.html`

package/shared/definition45.js

@@ -19,9 +19,9 @@ import { s as slotted } from './slotted.js';
 import { c as classNames } from './class-names.js';
 import { r as repeat } from './repeat.js';
 
-const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host(:focus-visible){outline:none}:host{display:inline-block;inline-size:300px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{display:flex;flex-direction:column;gap:4px}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.selection-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary: var(--vvd-searchable-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-searchable-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-searchable-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-searchable-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-searchable-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-searchable-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-searchable-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-searchable-select-accent-fierce, var(--vvd-color-neutral-700))}.fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.fieldset.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.fieldset: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}.fieldset: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)}.fieldset:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset: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)}.fieldset:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset: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)}.fieldset:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.fieldset: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)}.fieldset:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.fieldset{display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-block:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}.fieldset:focus-within{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}:host(:not([shape=pill])) .fieldset{border-radius:8px}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{display:flex;overflow:hidden;flex:1;flex-direction:column;gap:8px;min-block-size:24px}.tag-row{display:flex;gap:8px;inline-size:100%}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;flex:1;border:none;background:none;block-size:24px;font:var(--vvd-typography-base);max-inline-size:100%;min-inline-size:min(100px,40%);outline:none}.contains-only-input input:not(:focus){position:absolute;block-size:0;inline-size:0;min-inline-size:0;opacity:0;pointer-events:none}.listbox{display:flex;flex-direction:column;padding:4px;gap:2px;max-block-size:var(--searchable-select-height, 408px);overflow-y:auto}.empty-message{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);min-block-size:40px;text-align:center}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width, 100%)}slot[name=icon]{font-size:20px}.visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}";
+const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host(:focus-visible){outline:none}:host{display:inline-block;inline-size:300px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{display:flex;flex-direction:column;gap:4px}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.selection-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary: var(--vvd-searchable-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-searchable-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-searchable-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-searchable-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-searchable-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-searchable-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-searchable-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-searchable-select-accent-fierce, var(--vvd-color-neutral-700))}.fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.fieldset.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.fieldset: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}.fieldset: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)}.fieldset:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset: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)}.fieldset:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset: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)}.fieldset:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.fieldset: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)}.fieldset:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.fieldset{display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-block:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}@supports selector(:has(*)){.fieldset:not(.has-highlighted-option):has(input:focus){box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}}@supports not selector(:has(*)){.fieldset:not(.has-highlighted-option):focus-within{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}}:host(:not([shape=pill])) .fieldset{border-radius:8px}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{display:flex;overflow:hidden;flex:1;flex-direction:column;gap:8px;min-block-size:24px}.tag-row{display:flex;gap:8px;inline-size:100%}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;flex:1;border:none;background:none;block-size:24px;font:var(--vvd-typography-base);max-inline-size:100%;min-inline-size:min(100px,40%);outline:none}.contains-only-input input:not(:focus){position:absolute;block-size:0;inline-size:0;min-inline-size:0;opacity:0;pointer-events:none}.listbox{display:flex;flex-direction:column;padding:4px;gap:2px;max-block-size:var(--searchable-select-height, 408px);overflow-y:auto}.empty-message{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);min-block-size:40px;text-align:center}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width, 100%)}slot[name=icon]{font-size:20px}.visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}::slotted([data-vvd-component=option][data-highlighted]){border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}";
 
-const optionTagStyles = ".base.connotation-cta{--_connotation-color-contrast: var(--vvd-option-tag-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-contrast: var(--vvd-option-tag-accent-contrast, var(--vvd-color-neutral-800))}.base{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--fill-color);block-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;user-select:none;vertical-align:middle}.base:not(.disabled){--text-color: var(--_connotation-color-contrast);--fill-color: color-mix( in srgb, var(--_connotation-color-contrast), transparent 87.5% );--outline-color: transparent}.base.disabled{--text-color: var(--vvd-color-neutral-300);--fill-color: color-mix( in srgb, var(--vvd-color-neutral-800), transparent 87.5% );--outline-color: transparent}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5)}.remove-button{display:flex;align-items:center;border-radius:inherit;cursor:pointer;outline:none}.disabled .remove-button{pointer-events:none}.remove-button:focus-visible:before{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}";
+const optionTagStyles = ".base.connotation-cta{--_connotation-color-contrast: var(--vvd-option-tag-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-contrast: var(--vvd-option-tag-accent-contrast, var(--vvd-color-neutral-800))}.base{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--fill-color);block-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;user-select:none;vertical-align:middle}.base:not(.disabled){--text-color: var(--_connotation-color-contrast);--fill-color: var(--_connotation-color-soft);--outline-color: transparent}@supports (background-color: color-mix(in srgb,black 50%,white)){.base:not(.disabled){--fill-color: color-mix( in srgb, var(--_connotation-color-contrast), transparent 87.5% )}}.base.disabled{--text-color: var(--vvd-color-neutral-300);--fill-color: var(--vvd-color-neutral-200);--outline-color: transparent}@supports (background-color: color-mix(in srgb,black 50%,white)){.base.disabled{--fill-color: color-mix( in srgb, var(--vvd-color-neutral-800), transparent 87.5% )}}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5)}.remove-button{display:flex;align-items:center;border-radius:inherit;cursor:pointer;outline:none}.disabled .remove-button{pointer-events:none}.remove-button:focus-visible:before{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}";
 
 var __defProp$1 = Object.defineProperty;
 var __decorateClass$1 = (decorators, target, key, kind) => {
@@ -449,7 +449,9 @@ class SearchableSelect extends WithFeedback(
   }
   #transitionHighlightedOptionTo(index) {
     if (typeof this._highlightedOptionIndex === "number") {
-      this._filteredEnabledOptions[this._highlightedOptionIndex]._highlighted = false;
+      const prevOption = this._filteredEnabledOptions[this._highlightedOptionIndex];
+      prevOption._highlighted = false;
+      prevOption.removeAttribute("data-highlighted");
     }
     if (typeof index === "number") {
       if (!this._filteredEnabledOptions.length) {
@@ -465,6 +467,7 @@ class SearchableSelect extends WithFeedback(
     if (typeof this._highlightedOptionIndex === "number") {
       const highlightedOption = this._filteredEnabledOptions[this._highlightedOptionIndex];
       highlightedOption._highlighted = true;
+      highlightedOption.setAttribute("data-highlighted", "");
       scrollIntoView(highlightedOption, this._listbox, "nearest");
       this._changeDescription = this.locale.searchableSelect.optionFocusedMessage(
         highlightedOption.text,
@@ -539,7 +542,10 @@ class SearchableSelect extends WithFeedback(
     return this.disabled || option.disabled;
   }
   #textForValue(value) {
-    return this._slottedOptions?.find((option) => option.value === value)?.text;
+    const option = this._slottedOptions?.find(
+      (option2) => option2.value === value
+    );
+    return option?.label;
   }
   /**
    * @internal
@@ -966,7 +972,8 @@ const getStateClasses = (x) => classNames(
   [`appearance-${x.appearance}`, Boolean(x.appearance)],
   [`shape-${x.shape}`, Boolean(x.shape)],
   ["error", Boolean(x.errorValidationMessage)],
-  ["success", !!x.successText]
+  ["success", !!x.successText],
+  ["has-highlighted-option", x._highlightedOptionIndex !== null]
 );
 function renderLabel() {
   return html`