@vonage/vivid 4.25.0 → 4.27.0

package/shared/definition44.js

@@ -1,68 +1,19 @@
-import { V as VividElement, a as attr, h as html, f as defineVividComponent, D as DOM, n as nullableNumberConverter, d as createRegisterFunction } from './vivid-element.js';
-import { L as Localized } from './localized.js';
+import { h as html, V as VividElement, a as attr, f as defineVividComponent, D as DOM, n as nullableNumberConverter, d as createRegisterFunction } from './vivid-element.js';
 import { B as Button, b as buttonDefinition } from './definition11.js';
-import { D as Divider } from './divider.js';
+import { d as dividerDefinition } from './definition23.js';
+import { l as listboxOptionDefinition } from './definition37.js';
 import { T as Tooltip, t as tooltipDefinition } from './definition61.js';
-import { S as Select, s as selectDefinition } from './definition46.js';
-import { L as ListboxOption } from './option.js';
 import { M as Menu, m as menuDefinition } from './definition31.js';
 import { M as MenuItem, m as menuItemDefinition } from './definition30.js';
+import { S as Select, s as selectDefinition } from './definition46.js';
+import { D as Divider } from './divider.js';
+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 listboxOptionDefinition } from './definition37.js';
-import { d as dividerDefinition } from './definition23.js';
+import { L as Localized } from './localized.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 = ":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}";
-
-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$1(target, key, result);
-  return result;
-};
-class MenuBar extends Localized(VividElement) {
-  get #textEditorElement() {
-    return this.parentElement;
-  }
-  #updateTextStyleState = () => {
-    this.dispatchEvent(
-      new CustomEvent("text-styles-changed", {
-        detail: this.#textEditorElement?.selectionStyles
-      })
-    );
-  };
-  connectedCallback() {
-    super.connectedCallback();
-    this.#textEditorElement.addEventListener(
-      "selection-changed",
-      this.#updateTextStyleState
-    );
-    this.#textEditorElement.addEventListener(
-      "change",
-      this.#updateTextStyleState
-    );
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.#textEditorElement?.removeEventListener(
-      "selection-changed",
-      this.#updateTextStyleState
-    );
-    this.#textEditorElement?.removeEventListener(
-      "change",
-      this.#updateTextStyleState
-    );
-  }
-}
-__decorateClass$1([
-  attr({ attribute: "menu-items" })
-], MenuBar.prototype, "menuItems");
-
 function notifyMenuBarChange(menuBar, eventName, payload) {
   menuBar.$emit(eventName, payload, { bubbles: false, composed: false });
   return true;
@@ -303,6 +254,53 @@ const MENU_BAR_ITEMS = {
   }
 };
 
+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$1(target, key, result);
+  return result;
+};
+class MenuBar extends Localized(VividElement) {
+  get #textEditorElement() {
+    return this.parentElement;
+  }
+  #updateTextStyleState = () => {
+    this.dispatchEvent(
+      new CustomEvent("text-styles-changed", {
+        detail: this.#textEditorElement?.selectionStyles
+      })
+    );
+  };
+  connectedCallback() {
+    super.connectedCallback();
+    this.#textEditorElement.addEventListener(
+      "selection-changed",
+      this.#updateTextStyleState
+    );
+    this.#textEditorElement.addEventListener(
+      "change",
+      this.#updateTextStyleState
+    );
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#textEditorElement?.removeEventListener(
+      "selection-changed",
+      this.#updateTextStyleState
+    );
+    this.#textEditorElement?.removeEventListener(
+      "change",
+      this.#updateTextStyleState
+    );
+  }
+}
+__decorateClass$1([
+  attr({ attribute: "menu-items" })
+], MenuBar.prototype, "menuItems");
+
 const getClasses$1 = (menuBar) => classNames("control", [
   "hide-menubar",
   getValidMenuItems(menuBar).length === 0
@@ -332,6 +330,8 @@ const MenuBarTemplate = (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 menuBarDefinition = defineVividComponent(
   "menubar",
   MenuBar,
@@ -7065,6 +7065,7 @@ const isEquivalentPosition = function (node, off, targetNode, targetOff) {
 };
 const atomElements = /^(img|br|input|textarea|hr)$/i;
 function scanFor(node, off, targetNode, targetOff, dir) {
+    var _a;
     for (;;) {
         if (node == targetNode && off == targetOff)
             return true;
@@ -7077,10 +7078,17 @@ function scanFor(node, off, targetNode, targetOff, dir) {
             node = parent;
         }
         else if (node.nodeType == 1) {
-            node = node.childNodes[off + (dir < 0 ? -1 : 0)];
-            if (node.contentEditable == "false")
-                return false;
-            off = dir < 0 ? nodeSize(node) : 0;
+            let child = node.childNodes[off + (dir < 0 ? -1 : 0)];
+            if (child.nodeType == 1 && child.contentEditable == "false") {
+                if ((_a = child.pmViewDesc) === null || _a === void 0 ? void 0 : _a.ignoreForSelection)
+                    off += dir;
+                else
+                    return false;
+            }
+            else {
+                node = child;
+                off = dir < 0 ? nodeSize(node) : 0;
+            }
         }
         else {
             return false;
@@ -7201,7 +7209,7 @@ const safari = !ie$1 && !!nav && /Apple Computer/.test(nav.vendor);
 // Is true for both iOS and iPadOS for convenience
 const ios = safari && (/Mobile\/\w+/.test(agent) || !!nav && nav.maxTouchPoints > 2);
 const mac$3 = ios || (nav ? /Mac/.test(nav.platform) : false);
-const windows = nav ? /Win/.test(nav.platform) : false;
+const windows$1 = nav ? /Win/.test(nav.platform) : false;
 const android = /Android \d/.test(agent);
 const webkit = !!doc && "webkitFontSmoothing" in doc.documentElement.style;
 const webkit_version = webkit ? +(/\bAppleWebKit\/(\d+)/.exec(navigator.userAgent) || [0, 0])[1] : 0;
@@ -8164,6 +8172,7 @@ class ViewDesc {
     }
     get domAtom() { return false; }
     get ignoreForCoords() { return false; }
+    get ignoreForSelection() { return false; }
     isText(text) { return false; }
 }
 // A widget desc represents a widget decoration, which is a DOM node
@@ -8208,6 +8217,7 @@ class WidgetViewDesc extends ViewDesc {
         super.destroy();
     }
     get domAtom() { return true; }
+    get ignoreForSelection() { return !!this.widget.type.spec.relaxedSide; }
     get side() { return this.widget.type.side; }
 }
 class CompositionViewDesc extends ViewDesc {
@@ -9671,7 +9681,7 @@ function setSelFocus(view, node, offset) {
 }
 function findDirection(view, pos) {
     let $pos = view.state.doc.resolve(pos);
-    if (!(chrome || windows) && $pos.parent.inlineContent) {
+    if (!(chrome || windows$1) && $pos.parent.inlineContent) {
         let coords = view.coordsAtPos(pos);
         if (pos > $pos.start()) {
             let before = view.coordsAtPos(pos - 1);
@@ -10077,7 +10087,7 @@ class InputState {
         this.mouseDown = null;
         this.lastKeyCode = null;
         this.lastKeyCodeTime = 0;
-        this.lastClick = { time: 0, x: 0, y: 0, type: "" };
+        this.lastClick = { time: 0, x: 0, y: 0, type: "", button: 0 };
         this.lastSelectionOrigin = null;
         this.lastSelectionTime = 0;
         this.lastIOSEnter = 0;
@@ -10205,8 +10215,9 @@ editHandlers.keypress = (view, _event) => {
     let sel = view.state.selection;
     if (!(sel instanceof TextSelection) || !sel.$from.sameParent(sel.$to)) {
         let text = String.fromCharCode(event.charCode);
-        if (!/[\r\n]/.test(text) && !view.someProp("handleTextInput", f => f(view, sel.$from.pos, sel.$to.pos, text)))
-            view.dispatch(view.state.tr.insertText(text).scrollIntoView());
+        let deflt = () => view.state.tr.insertText(text).scrollIntoView();
+        if (!/[\r\n]/.test(text) && !view.someProp("handleTextInput", f => f(view, sel.$from.pos, sel.$to.pos, text, deflt)))
+            view.dispatch(deflt());
         event.preventDefault();
     }
 };
@@ -10318,13 +10329,14 @@ handlers.mousedown = (view, _event) => {
     view.input.shiftKey = event.shiftKey;
     let flushed = forceDOMFlush(view);
     let now = Date.now(), type = "singleClick";
-    if (now - view.input.lastClick.time < 500 && isNear(event, view.input.lastClick) && !event[selectNodeModifier]) {
+    if (now - view.input.lastClick.time < 500 && isNear(event, view.input.lastClick) && !event[selectNodeModifier] &&
+        view.input.lastClick.button == event.button) {
         if (view.input.lastClick.type == "singleClick")
             type = "doubleClick";
         else if (view.input.lastClick.type == "doubleClick")
             type = "tripleClick";
     }
-    view.input.lastClick = { time: now, x: event.clientX, y: event.clientY, type };
+    view.input.lastClick = { time: now, x: event.clientX, y: event.clientY, type, button: event.button };
     let pos = view.posAtCoords(eventCoords(event));
     if (!pos)
         return;
@@ -10581,10 +10593,10 @@ function endComposition(view, restarting = false) {
     view.domObserver.forceFlush();
     clearComposition(view);
     if (restarting || view.docView && view.docView.dirty) {
-        let sel = selectionFromDOM(view);
-        if (sel && !sel.eq(view.state.selection))
+        let sel = selectionFromDOM(view), cur = view.state.selection;
+        if (sel && !sel.eq(cur))
             view.dispatch(view.state.tr.setSelection(sel));
-        else if ((view.markCursor || restarting) && !view.state.selection.empty)
+        else if ((view.markCursor || restarting) && !cur.$from.node(cur.$from.sharedDepth(cur.to)).inlineContent)
             view.dispatch(view.state.tr.deleteSelection());
         else
             view.updateState(view.state);
@@ -12089,7 +12101,26 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
         }, 20);
     }
     let chFrom = change.start, chTo = change.endA;
-    let tr, storedMarks, markChange;
+    let mkTr = (base) => {
+        let tr = base || view.state.tr.replace(chFrom, chTo, parse.doc.slice(change.start - parse.from, change.endB - parse.from));
+        if (parse.sel) {
+            let sel = resolveSelection(view, tr.doc, parse.sel);
+            // Chrome will sometimes, during composition, report the
+            // selection in the wrong place. If it looks like that is
+            // happening, don't update the selection.
+            // Edge just doesn't move the cursor forward when you start typing
+            // in an empty block or between br nodes.
+            if (sel && !(chrome && view.composing && sel.empty &&
+                (change.start != change.endB || view.input.lastChromeDelete < Date.now() - 100) &&
+                (sel.head == chFrom || sel.head == tr.mapping.map(chTo) - 1) ||
+                ie$1 && sel.empty && sel.head == chFrom))
+                tr.setSelection(sel);
+        }
+        if (compositionID)
+            tr.setMeta("composition", compositionID);
+        return tr.scrollIntoView();
+    };
+    let markChange;
     if (inlineChange) {
         if ($from.pos == $to.pos) { // Deletion
             // IE11 sometimes weirdly moves the DOM selection around after
@@ -12098,46 +12129,33 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
                 view.domObserver.suppressSelectionUpdates();
                 setTimeout(() => selectionToDOM(view), 20);
             }
-            tr = view.state.tr.delete(chFrom, chTo);
-            storedMarks = doc.resolve(change.start).marksAcross(doc.resolve(change.endA));
+            let tr = mkTr(view.state.tr.delete(chFrom, chTo));
+            let marks = doc.resolve(change.start).marksAcross(doc.resolve(change.endA));
+            if (marks)
+                tr.ensureMarks(marks);
+            view.dispatch(tr);
         }
         else if ( // Adding or removing a mark
         change.endA == change.endB &&
             (markChange = isMarkChange($from.parent.content.cut($from.parentOffset, $to.parentOffset), $fromA.parent.content.cut($fromA.parentOffset, change.endA - $fromA.start())))) {
-            tr = view.state.tr;
+            let tr = mkTr(view.state.tr);
             if (markChange.type == "add")
                 tr.addMark(chFrom, chTo, markChange.mark);
             else
                 tr.removeMark(chFrom, chTo, markChange.mark);
+            view.dispatch(tr);
         }
         else if ($from.parent.child($from.index()).isText && $from.index() == $to.index() - ($to.textOffset ? 0 : 1)) {
             // Both positions in the same text node -- simply insert text
             let text = $from.parent.textBetween($from.parentOffset, $to.parentOffset);
-            if (view.someProp("handleTextInput", f => f(view, chFrom, chTo, text)))
-                return;
-            tr = view.state.tr.insertText(text, chFrom, chTo);
-        }
-    }
-    if (!tr)
-        tr = view.state.tr.replace(chFrom, chTo, parse.doc.slice(change.start - parse.from, change.endB - parse.from));
-    if (parse.sel) {
-        let sel = resolveSelection(view, tr.doc, parse.sel);
-        // Chrome will sometimes, during composition, report the
-        // selection in the wrong place. If it looks like that is
-        // happening, don't update the selection.
-        // Edge just doesn't move the cursor forward when you start typing
-        // in an empty block or between br nodes.
-        if (sel && !(chrome && view.composing && sel.empty &&
-            (change.start != change.endB || view.input.lastChromeDelete < Date.now() - 100) &&
-            (sel.head == chFrom || sel.head == tr.mapping.map(chTo) - 1) ||
-            ie$1 && sel.empty && sel.head == chFrom))
-            tr.setSelection(sel);
-    }
-    if (storedMarks)
-        tr.ensureMarks(storedMarks);
-    if (compositionID)
-        tr.setMeta("composition", compositionID);
-    view.dispatch(tr.scrollIntoView());
+            let deflt = () => mkTr(view.state.tr.insertText(text, chFrom, chTo));
+            if (!view.someProp("handleTextInput", f => f(view, chFrom, chTo, text, deflt)))
+                view.dispatch(deflt());
+        }
+    }
+    else {
+        view.dispatch(mkTr());
+    }
 }
 function resolveSelection(view, doc, parsedSel) {
     if (Math.max(parsedSel.anchor, parsedSel.head) > doc.content.size)
@@ -12731,22 +12749,6 @@ class EditorView {
         return dispatchEvent(this, event);
     }
     /**
-    Dispatch a transaction. Will call
-    [`dispatchTransaction`](https://prosemirror.net/docs/ref/#view.DirectEditorProps.dispatchTransaction)
-    when given, and otherwise defaults to applying the transaction to
-    the current state and calling
-    [`updateState`](https://prosemirror.net/docs/ref/#view.EditorView.updateState) with the result.
-    This method is bound to the view instance, so that it can be
-    easily passed around.
-    */
-    dispatch(tr) {
-        let dispatchTransaction = this._props.dispatchTransaction;
-        if (dispatchTransaction)
-            dispatchTransaction.call(this, tr);
-        else
-            this.updateState(this.state.apply(tr));
-    }
-    /**
     @internal
     */
     domSelectionRange() {
@@ -12763,6 +12765,13 @@ class EditorView {
         return this.root.getSelection();
     }
 }
+EditorView.prototype.dispatch = function (tr) {
+    let dispatchTransaction = this._props.dispatchTransaction;
+    if (dispatchTransaction)
+        dispatchTransaction.call(this, tr);
+    else
+        this.updateState(this.state.apply(tr));
+};
 function computeDocDeco(view) {
     let attrs = Object.create(null);
     attrs.class = "ProseMirror";
@@ -12950,7 +12959,8 @@ function keyName(event) {
   return name
 }
 
-const mac$1 = typeof navigator != "undefined" ? /Mac|iP(hone|[oa]d)/.test(navigator.platform) : false;
+const mac$1 = typeof navigator != "undefined" && /Mac|iP(hone|[oa]d)/.test(navigator.platform);
+const windows = typeof navigator != "undefined" && /Win/.test(navigator.platform);
 function normalizeKeyName(name) {
     let parts = name.split(/-(?!$)/), result = parts[parts.length - 1];
     if (result == "Space")
@@ -13056,12 +13066,14 @@ function keydownHandler(bindings) {
                 if (noShift && noShift(view.state, view.dispatch, view))
                     return true;
             }
-            if ((event.shiftKey || event.altKey || event.metaKey || name.charCodeAt(0) > 127) &&
+            if ((event.altKey || event.metaKey || event.ctrlKey) &&
+                // Ctrl-Alt may be used for AltGr on Windows
+                !(windows && event.ctrlKey && event.altKey) &&
                 (baseName = base[event.keyCode]) && baseName != name) {
                 // Try falling back to the keyCode when there's a modifier
                 // active or the character produced isn't ASCII, and our table
                 // produces a different name from the the keyCode. See #668,
-                // #1060
+                // #1060, #1529.
                 let fromCode = map[modifiers(baseName, event)];
                 if (fromCode && fromCode(view.state, view.dispatch, view))
                     return true;

package/shared/definition45.cjs

@@ -21,7 +21,7 @@ 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:100px;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}.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 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}";
 
@@ -227,7 +227,6 @@ class SearchableSelect extends mixins.WithFeedback(
    */
   _onInputFocus(_) {
     this.#updateFilteredOptions();
-    this.open = true;
   }
   /**
    * @internal
@@ -247,6 +246,9 @@ class SearchableSelect extends mixins.WithFeedback(
     switch (e.key) {
       case "Enter":
         this.#selectHighlightedOption();
+        if (this._inputValue === "") {
+          this.open = !this.open;
+        }
         return false;
       case "Escape":
         this.open = false;
@@ -423,6 +425,13 @@ class SearchableSelect extends mixins.WithFeedback(
   optionFilterChanged() {
     this.#updateFilteredOptions();
   }
+  /**
+   * @internal
+   */
+  loadingChanged(_oldValue, newValue) {
+    this._changeDescription = this.locale.searchableSelect.loadingOptionsMessage;
+    if (_oldValue && !newValue) this._changeDescription = "";
+  }
   #updateFilteredOptions() {
     const newFilteredOptions = [];
     const optionFilter = this.optionFilter ?? ((option, searchText) => option.text.toLowerCase().includes(searchText.toLowerCase()));
@@ -462,7 +471,8 @@ class SearchableSelect extends mixins.WithFeedback(
       this._changeDescription = this.locale.searchableSelect.optionFocusedMessage(
         highlightedOption.text,
         this._highlightedOptionIndex + 1,
-        this._filteredEnabledOptions.length
+        this._filteredEnabledOptions.length,
+        highlightedOption.selected
       );
     }
   }
@@ -693,7 +703,7 @@ class SearchableSelect extends mixins.WithFeedback(
       return;
     }
     const capturedOption = e.target.closest(
-      `option,[role=option]`
+      `option,[role=option],[data-vvd-component=option]`
     );
     if (capturedOption && !capturedOption.disabled) {
       this.#handleOptionInteraction(capturedOption);
@@ -720,7 +730,7 @@ class SearchableSelect extends mixins.WithFeedback(
     this.#updateSelectionLimit();
   }
   #updateSelectionLimit() {
-    if (!this.multiple || typeof this.maxSelected !== "number" || this.maxSelected <= 0) {
+    if (!this.multiple || !this._slottedOptions || typeof this.maxSelected !== "number" || this.maxSelected <= 0) {
       return;
     }
     const options = this._slottedOptions.filter(
@@ -1101,13 +1111,13 @@ function renderFieldset(context) {
 					size="super-condensed"
 					icon="close-line"
 					appearance="ghost-light"
-					tabindex="-1"
+					tabindex="0"
 				></${buttonTag}>`
   )}
 			<div @mousedown="${() => false}" @click="${(x) => x._onChevronClick()}">
 				${when.when(
     (x) => x.loading,
-    vividElement.html`<${progressRingTag} indeterminate size="-6"></${progressRingTag}>`
+    vividElement.html`<${progressRingTag} indeterminate size="-6" aria-hidden="true"></${progressRingTag}>`
   )}
 				${when.when((x) => !x.loading, chevronTemplate)}
 			</div>

package/shared/definition45.js

@@ -19,7 +19,7 @@ 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:100px;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}.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 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}";
 
@@ -225,7 +225,6 @@ class SearchableSelect extends WithFeedback(
    */
   _onInputFocus(_) {
     this.#updateFilteredOptions();
-    this.open = true;
   }
   /**
    * @internal
@@ -245,6 +244,9 @@ class SearchableSelect extends WithFeedback(
     switch (e.key) {
       case "Enter":
         this.#selectHighlightedOption();
+        if (this._inputValue === "") {
+          this.open = !this.open;
+        }
         return false;
       case "Escape":
         this.open = false;
@@ -421,6 +423,13 @@ class SearchableSelect extends WithFeedback(
   optionFilterChanged() {
     this.#updateFilteredOptions();
   }
+  /**
+   * @internal
+   */
+  loadingChanged(_oldValue, newValue) {
+    this._changeDescription = this.locale.searchableSelect.loadingOptionsMessage;
+    if (_oldValue && !newValue) this._changeDescription = "";
+  }
   #updateFilteredOptions() {
     const newFilteredOptions = [];
     const optionFilter = this.optionFilter ?? ((option, searchText) => option.text.toLowerCase().includes(searchText.toLowerCase()));
@@ -460,7 +469,8 @@ class SearchableSelect extends WithFeedback(
       this._changeDescription = this.locale.searchableSelect.optionFocusedMessage(
         highlightedOption.text,
         this._highlightedOptionIndex + 1,
-        this._filteredEnabledOptions.length
+        this._filteredEnabledOptions.length,
+        highlightedOption.selected
       );
     }
   }
@@ -691,7 +701,7 @@ class SearchableSelect extends WithFeedback(
       return;
     }
     const capturedOption = e.target.closest(
-      `option,[role=option]`
+      `option,[role=option],[data-vvd-component=option]`
     );
     if (capturedOption && !capturedOption.disabled) {
       this.#handleOptionInteraction(capturedOption);
@@ -718,7 +728,7 @@ class SearchableSelect extends WithFeedback(
     this.#updateSelectionLimit();
   }
   #updateSelectionLimit() {
-    if (!this.multiple || typeof this.maxSelected !== "number" || this.maxSelected <= 0) {
+    if (!this.multiple || !this._slottedOptions || typeof this.maxSelected !== "number" || this.maxSelected <= 0) {
       return;
     }
     const options = this._slottedOptions.filter(
@@ -1099,13 +1109,13 @@ function renderFieldset(context) {
 					size="super-condensed"
 					icon="close-line"
 					appearance="ghost-light"
-					tabindex="-1"
+					tabindex="0"
 				></${buttonTag}>`
   )}
 			<div @mousedown="${() => false}" @click="${(x) => x._onChevronClick()}">
 				${when(
     (x) => x.loading,
-    html`<${progressRingTag} indeterminate size="-6"></${progressRingTag}>`
+    html`<${progressRingTag} indeterminate size="-6" aria-hidden="true"></${progressRingTag}>`
   )}
 				${when((x) => !x.loading, chevronTemplate)}
 			</div>

package/shared/definition46.cjs

@@ -399,7 +399,7 @@ class Select extends mixins.WithLightDOMFeedback(
       return;
     }
     const clickedOption = e.target.closest(
-      `option,[role=option]`
+      `option,[role=option],[data-vvd-component=option]`
     );
     if (clickedOption && clickedOption.disabled) {
       return;

package/shared/definition46.js

@@ -397,7 +397,7 @@ class Select extends WithLightDOMFeedback(
       return;
     }
     const clickedOption = e.target.closest(
-      `option,[role=option]`
+      `option,[role=option],[data-vvd-component=option]`
     );
     if (clickedOption && clickedOption.disabled) {
       return;