@vonage/vivid 4.21.0 → 4.22.0

package/shared/definition43.cjs

@@ -2,11 +2,13 @@
 
 const vividElement = require('./vivid-element.cjs');
 const definition = require('./definition11.cjs');
-const definition$3 = require('./definition30.cjs');
 const definition$1 = require('./definition23.cjs');
 const definition$2 = require('./definition60.cjs');
+const definition$3 = require('./definition45.cjs');
+const option = require('./option.cjs');
 const classNames = require('./class-names.cjs');
 const repeat = require('./repeat.cjs');
+const definition$4 = require('./definition36.cjs');
 
 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}.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)}";
 
@@ -59,53 +61,99 @@ const TEXT_DECORATION_ITEMS = [
   }
 ];
 const MENU_BAR_ITEMS = {
-  textSize: function(context) {
-    const buttonTag = context.tagFor(definition.Button);
-    const menuTag = context.tagFor(definition$3.Menu);
-    const menuItemTag = context.tagFor(definition$3.MenuItem);
+  /*textSize: function (context) {
+  	const buttonTag = context.tagFor(Button);
+  	const menuTag = context.tagFor(Menu);
+  	const menuItemTag = context.tagFor(MenuItem);
+  	const tooltipTag = context.tagFor(Tooltip);
+  	return html`
+  		<${menuTag}
+  			trigger="auto"
+  			id="text-block"
+  			aria-label="Text Block"
+  			placement="bottom-end"
+  		>
+  			<${tooltipTag} slot="anchor" text="Text Block Type" placement="top">
+  				<${buttonTag}
+  					slot="anchor"
+  					aria-label="Open text block menu"
+  					size="super-condensed"
+  					appearance="ghost-light"
+  					shape="pill"
+  					icon="text-size-line"
+  				></${buttonTag}>
+  			</${tooltipTag}>
+  			<${menuItemTag}
+  				text="Title"
+  				value="title"
+  				internal-part
+  				class="title"
+  				connotation="cta"
+  				@click="${(_, { parent }) =>
+  					notifyMenuBarChange(parent, 'text-block-selected', 'title')}"
+  			></${menuItemTag}>
+  			<${menuItemTag}
+  				text="Subtitle"
+  				value="subtitle"
+  				internal-part
+  				class="subtitle"
+  				connotation="cta"
+  				@click="${(_, { parent }) =>
+  					notifyMenuBarChange(parent, 'text-block-selected', 'subtitle')}"
+  			></${menuItemTag}>
+  			<${menuItemTag}
+  				text="Body"
+  				value="body"
+  				internal-part
+  				class="body"
+  				connotation="cta"
+  				@click="${(_, { parent }) =>
+  					notifyMenuBarChange(parent, 'text-block-selected', 'body')}"
+  			></${menuItemTag}>
+  		</${menuTag}>
+  	`;
+  },*/
+  textBlock: function(context) {
+    const selectTag = context.tagFor(definition$3.Select);
+    const optionTag = context.tagFor(option.ListboxOption);
     const tooltipTag = context.tagFor(definition$2.Tooltip);
     return vividElement.html`
-			<${menuTag}
+		<${tooltipTag} text="Text Block Type" placement="top">
+			<${selectTag}
+				slot="anchor"
 				trigger="auto"
-				id="text-size"
-				aria-label="Text Size"
+				id="text-block"
+				aria-label="Text Block"
 				placement="bottom-end"
+				@change="${(_, { parent, event }) => notifyMenuBarChange(
+      parent,
+      "text-block-selected",
+      event.target.value
+    )}"
 			>
-				<${tooltipTag} slot="anchor" text="Text Size" placement="top">
-					<${buttonTag}
-						slot="anchor"
-						aria-label="Open text size menu"
-						size="super-condensed"
-						appearance="ghost-light"
-						shape="pill"
-						icon="text-size-line"
-					></${buttonTag}>
-				</${tooltipTag}>
-				<${menuItemTag}
+				<${optionTag}
 					text="Title"
 					value="title"
 					internal-part
 					class="title"
 					connotation="cta"
-					@click="${(_, { parent }) => notifyMenuBarChange(parent, "text-size-selected", "title")}"
-				></${menuItemTag}>
-				<${menuItemTag}
+				></${optionTag}>
+				<${optionTag}
 					text="Subtitle"
 					value="subtitle"
 					internal-part
 					class="subtitle"
 					connotation="cta"
-					@click="${(_, { parent }) => notifyMenuBarChange(parent, "text-size-selected", "subtitle")}"
-				></${menuItemTag}>
-				<${menuItemTag}
+				></${optionTag}>
+				<${optionTag}
 					text="Body"
 					value="body"
 					internal-part
 					class="body"
 					connotation="cta"
-					@click="${(_, { parent }) => notifyMenuBarChange(parent, "text-size-selected", "body")}"
-				></${menuItemTag}>
-			</${menuTag}>
+				></${optionTag}>
+			</${selectTag}>
+		</${tooltipTag}>
 		`;
   },
   textDecoration: function(context) {
@@ -142,7 +190,7 @@ const getClasses$1 = (menuBar) => classNames.classNames("control", [
   "hide-menubar",
   getValidMenuItems(menuBar).length === 0
 ]);
-const validItems = ["textSize", "textDecoration"];
+const validItems = ["textBlock", "textDecoration"];
 function createMenuItem(item) {
   return MENU_BAR_ITEMS[item];
 }
@@ -167,8 +215,8 @@ const menuBarDefinition = vividElement.defineVividComponent(
   MenuBarTemplate,
   [
     definition.buttonDefinition,
-    definition$3.menuDefinition,
-    definition$3.menuItemDefinition,
+    definition$3.selectDefinition,
+    definition$4.listboxOptionDefinition,
     definition$1.dividerDefinition,
     definition$2.tooltipDefinition
   ],
@@ -13801,7 +13849,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-const RichTextEditorTextSizes = {
+const RichTextEditorTextBlocks = {
   title: "h2",
   subtitle: "h3",
   body: "p"
@@ -13821,13 +13869,11 @@ class RichTextEditor extends vividElement.VividElement {
       }
     };
     this.selectionEnd = null;
-    this.#selectionChangedByUser = false;
     this.#handleSelectionChange = () => {
       if (!this.#editor.selection()) {
         return;
       }
       const { start, end } = this.#editor.selection();
-      this.#selectionChangedByUser = true;
       this.selectionStart = start;
       this.selectionEnd = end;
       this.$emit("selection-changed");
@@ -13859,9 +13905,6 @@ class RichTextEditor extends vividElement.VividElement {
     return this.shadowRoot.querySelector("#editor");
   }
   selectionStartChanged() {
-    if (this.#selectionChangedByUser) {
-      return;
-    }
     if (!this.selectionStart || this.selectionEnd && this.selectionStart > this.selectionEnd) {
       return;
     }
@@ -13869,16 +13912,11 @@ class RichTextEditor extends vividElement.VividElement {
   }
   #updateEditorSelection;
   selectionEndChanged() {
-    if (this.#selectionChangedByUser) {
-      this.#selectionChangedByUser = false;
-      return;
-    }
     if (this.selectionEnd && !this.selectionStart) {
       this.selectionStart = 1;
     }
     this.#updateEditorSelection();
   }
-  #selectionChangedByUser;
   #handleSelectionChange;
   #handleChange;
   #handleInput;
@@ -13895,11 +13933,11 @@ class RichTextEditor extends vividElement.VividElement {
       this.#editor.addEventListener("input", this.#handleInput);
     }
   }
-  setTextSize(size) {
+  setTextBlock(blockType) {
     try {
-      this.#editor?.setSelectionTag(RichTextEditorTextSizes[size]);
+      this.#editor?.setSelectionTag(RichTextEditorTextBlocks[blockType]);
     } catch (e) {
-      console.warn(`Invalid text size: ${size}`);
+      console.warn(`Invalid text block: ${blockType}`);
     }
   }
   setSelectionDecoration(decoration) {
@@ -13909,6 +13947,14 @@ class RichTextEditor extends vividElement.VividElement {
       console.warn(`Invalid decoration: ${decoration}`);
     }
   }
+  focus() {
+    super.focus();
+    setTimeout(() => {
+      this.#editorWrapperElement.querySelector(
+        '[contenteditable="true"]'
+      ).focus();
+    }, 0);
+  }
 }
 __decorateClass([
   vividElement.attr({ converter: vividElement.nullableNumberConverter, attribute: "selection-start" })
@@ -13919,13 +13965,20 @@ __decorateClass([
 
 const getClasses = (_) => classNames.classNames("control");
 const VALID_MENU_ELEMEMENT_SUFFIX = "menubar";
-function textSizeSelectedHandler(event) {
-  this.setTextSize(event.detail);
+const menuParent = (target) => target.parentElement;
+function textBlockSelectedHandler(event) {
+  menuParent(event.target).setTextBlock(
+    event.detail
+  );
+  menuParent(event.target).focus();
 }
 function selectionDecorationSelectedHandler(event) {
-  this.setSelectionDecoration(event.detail);
+  menuParent(event.target).setSelectionDecoration(
+    event.detail
+  );
+  menuParent(event.target).focus();
 }
-function handleMenuBarSlotChange(richTextEditor, { event }) {
+function handleMenuBarSlotChange(_, { event }) {
   const slot = event.target;
   const assignedElements = slot.assignedElements({ flatten: true });
   const menuBar = assignedElements.find(
@@ -13940,12 +13993,12 @@ function handleMenuBarSlotChange(richTextEditor, { event }) {
   });
   if (menuBar) {
     menuBar.addEventListener(
-      "text-size-selected",
-      textSizeSelectedHandler.bind(richTextEditor)
+      "text-block-selected",
+      textBlockSelectedHandler
     );
     menuBar.addEventListener(
       "text-decoration-selected",
-      selectionDecorationSelectedHandler.bind(richTextEditor)
+      selectionDecorationSelectedHandler
     );
   }
 }

package/shared/definition43.js

@@ -1,10 +1,12 @@
 import { V as VividElement, a as attr, h as html, f as defineVividComponent, n as nullableNumberConverter, d as createRegisterFunction } from './vivid-element.js';
 import { B as Button, b as buttonDefinition } from './definition11.js';
-import { e as Menu, M as MenuItem, c as menuDefinition, m as menuItemDefinition } from './definition30.js';
 import { D as Divider, d as dividerDefinition } from './definition23.js';
 import { T as Tooltip, t as tooltipDefinition } from './definition60.js';
+import { S as Select, s as selectDefinition } from './definition45.js';
+import { L as ListboxOption } from './option.js';
 import { c as classNames } from './class-names.js';
 import { r as repeat } from './repeat.js';
+import { l as listboxOptionDefinition } from './definition36.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}.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)}";
 
@@ -57,53 +59,99 @@ const TEXT_DECORATION_ITEMS = [
   }
 ];
 const MENU_BAR_ITEMS = {
-  textSize: function(context) {
-    const buttonTag = context.tagFor(Button);
-    const menuTag = context.tagFor(Menu);
-    const menuItemTag = context.tagFor(MenuItem);
+  /*textSize: function (context) {
+  	const buttonTag = context.tagFor(Button);
+  	const menuTag = context.tagFor(Menu);
+  	const menuItemTag = context.tagFor(MenuItem);
+  	const tooltipTag = context.tagFor(Tooltip);
+  	return html`
+  		<${menuTag}
+  			trigger="auto"
+  			id="text-block"
+  			aria-label="Text Block"
+  			placement="bottom-end"
+  		>
+  			<${tooltipTag} slot="anchor" text="Text Block Type" placement="top">
+  				<${buttonTag}
+  					slot="anchor"
+  					aria-label="Open text block menu"
+  					size="super-condensed"
+  					appearance="ghost-light"
+  					shape="pill"
+  					icon="text-size-line"
+  				></${buttonTag}>
+  			</${tooltipTag}>
+  			<${menuItemTag}
+  				text="Title"
+  				value="title"
+  				internal-part
+  				class="title"
+  				connotation="cta"
+  				@click="${(_, { parent }) =>
+  					notifyMenuBarChange(parent, 'text-block-selected', 'title')}"
+  			></${menuItemTag}>
+  			<${menuItemTag}
+  				text="Subtitle"
+  				value="subtitle"
+  				internal-part
+  				class="subtitle"
+  				connotation="cta"
+  				@click="${(_, { parent }) =>
+  					notifyMenuBarChange(parent, 'text-block-selected', 'subtitle')}"
+  			></${menuItemTag}>
+  			<${menuItemTag}
+  				text="Body"
+  				value="body"
+  				internal-part
+  				class="body"
+  				connotation="cta"
+  				@click="${(_, { parent }) =>
+  					notifyMenuBarChange(parent, 'text-block-selected', 'body')}"
+  			></${menuItemTag}>
+  		</${menuTag}>
+  	`;
+  },*/
+  textBlock: function(context) {
+    const selectTag = context.tagFor(Select);
+    const optionTag = context.tagFor(ListboxOption);
     const tooltipTag = context.tagFor(Tooltip);
     return html`
-			<${menuTag}
+		<${tooltipTag} text="Text Block Type" placement="top">
+			<${selectTag}
+				slot="anchor"
 				trigger="auto"
-				id="text-size"
-				aria-label="Text Size"
+				id="text-block"
+				aria-label="Text Block"
 				placement="bottom-end"
+				@change="${(_, { parent, event }) => notifyMenuBarChange(
+      parent,
+      "text-block-selected",
+      event.target.value
+    )}"
 			>
-				<${tooltipTag} slot="anchor" text="Text Size" placement="top">
-					<${buttonTag}
-						slot="anchor"
-						aria-label="Open text size menu"
-						size="super-condensed"
-						appearance="ghost-light"
-						shape="pill"
-						icon="text-size-line"
-					></${buttonTag}>
-				</${tooltipTag}>
-				<${menuItemTag}
+				<${optionTag}
 					text="Title"
 					value="title"
 					internal-part
 					class="title"
 					connotation="cta"
-					@click="${(_, { parent }) => notifyMenuBarChange(parent, "text-size-selected", "title")}"
-				></${menuItemTag}>
-				<${menuItemTag}
+				></${optionTag}>
+				<${optionTag}
 					text="Subtitle"
 					value="subtitle"
 					internal-part
 					class="subtitle"
 					connotation="cta"
-					@click="${(_, { parent }) => notifyMenuBarChange(parent, "text-size-selected", "subtitle")}"
-				></${menuItemTag}>
-				<${menuItemTag}
+				></${optionTag}>
+				<${optionTag}
 					text="Body"
 					value="body"
 					internal-part
 					class="body"
 					connotation="cta"
-					@click="${(_, { parent }) => notifyMenuBarChange(parent, "text-size-selected", "body")}"
-				></${menuItemTag}>
-			</${menuTag}>
+				></${optionTag}>
+			</${selectTag}>
+		</${tooltipTag}>
 		`;
   },
   textDecoration: function(context) {
@@ -140,7 +188,7 @@ const getClasses$1 = (menuBar) => classNames("control", [
   "hide-menubar",
   getValidMenuItems(menuBar).length === 0
 ]);
-const validItems = ["textSize", "textDecoration"];
+const validItems = ["textBlock", "textDecoration"];
 function createMenuItem(item) {
   return MENU_BAR_ITEMS[item];
 }
@@ -165,8 +213,8 @@ const menuBarDefinition = defineVividComponent(
   MenuBarTemplate,
   [
     buttonDefinition,
-    menuDefinition,
-    menuItemDefinition,
+    selectDefinition,
+    listboxOptionDefinition,
     dividerDefinition,
     tooltipDefinition
   ],
@@ -13799,7 +13847,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-const RichTextEditorTextSizes = {
+const RichTextEditorTextBlocks = {
   title: "h2",
   subtitle: "h3",
   body: "p"
@@ -13819,13 +13867,11 @@ class RichTextEditor extends VividElement {
       }
     };
     this.selectionEnd = null;
-    this.#selectionChangedByUser = false;
     this.#handleSelectionChange = () => {
       if (!this.#editor.selection()) {
         return;
       }
       const { start, end } = this.#editor.selection();
-      this.#selectionChangedByUser = true;
       this.selectionStart = start;
       this.selectionEnd = end;
       this.$emit("selection-changed");
@@ -13857,9 +13903,6 @@ class RichTextEditor extends VividElement {
     return this.shadowRoot.querySelector("#editor");
   }
   selectionStartChanged() {
-    if (this.#selectionChangedByUser) {
-      return;
-    }
     if (!this.selectionStart || this.selectionEnd && this.selectionStart > this.selectionEnd) {
       return;
     }
@@ -13867,16 +13910,11 @@ class RichTextEditor extends VividElement {
   }
   #updateEditorSelection;
   selectionEndChanged() {
-    if (this.#selectionChangedByUser) {
-      this.#selectionChangedByUser = false;
-      return;
-    }
     if (this.selectionEnd && !this.selectionStart) {
       this.selectionStart = 1;
     }
     this.#updateEditorSelection();
   }
-  #selectionChangedByUser;
   #handleSelectionChange;
   #handleChange;
   #handleInput;
@@ -13893,11 +13931,11 @@ class RichTextEditor extends VividElement {
       this.#editor.addEventListener("input", this.#handleInput);
     }
   }
-  setTextSize(size) {
+  setTextBlock(blockType) {
     try {
-      this.#editor?.setSelectionTag(RichTextEditorTextSizes[size]);
+      this.#editor?.setSelectionTag(RichTextEditorTextBlocks[blockType]);
     } catch (e) {
-      console.warn(`Invalid text size: ${size}`);
+      console.warn(`Invalid text block: ${blockType}`);
     }
   }
   setSelectionDecoration(decoration) {
@@ -13907,6 +13945,14 @@ class RichTextEditor extends VividElement {
       console.warn(`Invalid decoration: ${decoration}`);
     }
   }
+  focus() {
+    super.focus();
+    setTimeout(() => {
+      this.#editorWrapperElement.querySelector(
+        '[contenteditable="true"]'
+      ).focus();
+    }, 0);
+  }
 }
 __decorateClass([
   attr({ converter: nullableNumberConverter, attribute: "selection-start" })
@@ -13917,13 +13963,20 @@ __decorateClass([
 
 const getClasses = (_) => classNames("control");
 const VALID_MENU_ELEMEMENT_SUFFIX = "menubar";
-function textSizeSelectedHandler(event) {
-  this.setTextSize(event.detail);
+const menuParent = (target) => target.parentElement;
+function textBlockSelectedHandler(event) {
+  menuParent(event.target).setTextBlock(
+    event.detail
+  );
+  menuParent(event.target).focus();
 }
 function selectionDecorationSelectedHandler(event) {
-  this.setSelectionDecoration(event.detail);
+  menuParent(event.target).setSelectionDecoration(
+    event.detail
+  );
+  menuParent(event.target).focus();
 }
-function handleMenuBarSlotChange(richTextEditor, { event }) {
+function handleMenuBarSlotChange(_, { event }) {
   const slot = event.target;
   const assignedElements = slot.assignedElements({ flatten: true });
   const menuBar = assignedElements.find(
@@ -13938,12 +13991,12 @@ function handleMenuBarSlotChange(richTextEditor, { event }) {
   });
   if (menuBar) {
     menuBar.addEventListener(
-      "text-size-selected",
-      textSizeSelectedHandler.bind(richTextEditor)
+      "text-block-selected",
+      textBlockSelectedHandler
     );
     menuBar.addEventListener(
       "text-decoration-selected",
-      selectionDecorationSelectedHandler.bind(richTextEditor)
+      selectionDecorationSelectedHandler
     );
   }
 }

package/shared/definition44.cjs

@@ -18,9 +18,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([aria-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)}.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(--_connotation-color-intermediate)}.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(--_connotation-color-fierce)}.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);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([aria-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)}.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 optionTagStyles = ".base{--_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: 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}";
 
 class _SearchableSelect extends vividElement.VividElement {
 }
@@ -353,6 +353,15 @@ exports.SearchableSelect = class SearchableSelect extends affix.AffixIconWithTra
     );
     return option.label;
   }
+  /**
+   * @internal
+   */
+  _tagConnotationForValue(value) {
+    const option = this._slottedOptions.find(
+      (option2) => option2.value === value
+    );
+    return option.tagConnotation;
+  }
   /**
    * @internal
    */
@@ -879,6 +888,9 @@ class OptionTag extends localized.Localized(vividElement.VividElement) {
 __decorateClass([
   vividElement.attr
 ], OptionTag.prototype, "shape");
+__decorateClass([
+  vividElement.observable
+], OptionTag.prototype, "connotation");
 __decorateClass([
   vividElement.attr
 ], OptionTag.prototype, "label");
@@ -915,6 +927,7 @@ const tagTemplateFactory = (context, getComponent) => {
 				removable
 				:label="${(x, c) => getComponent(c)._tagLabelForValue(x)}"
 				:shape="${(_, c) => getComponent(c).shape}"
+				:connotation="${(x, c) => getComponent(c)._tagConnotationForValue(x)}"
 				?disabled="${(x, c) => getComponent(c)._isTagDisabled(x)}"
 				@remove="${(x, c) => getComponent(c)._onTagRemoved(x)}"
 				@keydown="${(_, c) => getComponent(c)._onTagKeydown(c.event)}"
@@ -1117,11 +1130,12 @@ const SearchableSelectTemplate = (context) => {
 	`;
 };
 
-const getClasses = ({ shape, disabled, removable }) => classNames.classNames(
+const getClasses = ({ shape, connotation, disabled, removable }) => classNames.classNames(
   "base",
   ["disabled", disabled],
   ["removable", removable],
-  [`shape-${shape}`, Boolean(shape)]
+  [`shape-${shape}`, Boolean(shape)],
+  [`connotation-${connotation}`, Boolean(connotation)]
 );
 function renderRemoveButton(iconTag) {
   return vividElement.html`