@vonage/vivid 4.27.0 → 4.29.0

package/custom-elements.json

@@ -1371,14 +1371,14 @@
               "description": "Indicates the audio-player's src.",
               "privacy": "public"
             },
-            {
-              "kind": "field",
-              "name": "playbackRate"
-            },
             {
               "kind": "method",
               "name": "srcChanged"
             },
+            {
+              "kind": "field",
+              "name": "playbackRate"
+            },
             {
               "kind": "field",
               "name": "disabled",
@@ -1425,6 +1425,27 @@
                 "text": "boolean"
               }
             },
+            {
+              "kind": "field",
+              "name": "#audioBuffer",
+              "privacy": "private",
+              "type": {
+                "text": "AudioBuffer | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#fetchAbortController",
+              "privacy": "private",
+              "type": {
+                "text": "AbortController | undefined"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#fetchAndCacheAudioBuffer",
+              "async": true
+            },
             {
               "kind": "field",
               "name": "duration"
@@ -1448,6 +1469,25 @@
               "privacy": "private",
               "default": "new Audio()"
             },
+            {
+              "kind": "field",
+              "name": "#isProgrammaticSliderUpdate",
+              "privacy": "private",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "durationFallback",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enables fallback logic to fetch and decode audio buffer for duration when metadata is missing.",
+              "privacy": "public"
+            },
             {
               "kind": "method",
               "name": "play"
@@ -1471,15 +1511,6 @@
               "name": "#pausedChanged",
               "privacy": "private"
             },
-            {
-              "kind": "field",
-              "name": "#currentTimeChanged",
-              "privacy": "private",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
             {
               "kind": "field",
               "name": "#updateProgress",
@@ -1626,6 +1657,15 @@
               "default": "null",
               "description": "Sets the available playback rates. When an empty string, no choices will be available",
               "fieldName": "playbackRates"
+            },
+            {
+              "name": "duration-fallback",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enables fallback logic to fetch and decode audio buffer for duration when metadata is missing.",
+              "fieldName": "durationFallback"
             }
           ],
           "mixins": [
@@ -8871,6 +8911,15 @@
               "description": "The index of the column that will receive focus the next time the\ngrid is focused. This value changes as focus moves to different rows\nwithin the grid.  Changing this value when focus is already within\nthe grid moves focus to the specified column.",
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "fixedColumns",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Number of columns to be fixed when scrolling horizontally",
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "rowElementTag",
@@ -8924,6 +8973,14 @@
               "privacy": "private",
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "resizeObserver",
+              "type": {
+                "text": "ResizeObserver | undefined"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "observer",
@@ -9153,6 +9210,14 @@
               "description": "String that gets applied to the css gridTemplateColumns attribute of child rows",
               "fieldName": "gridTemplateColumns"
             },
+            {
+              "name": "fixed-columns",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Number of columns to be fixed when scrolling horizontally",
+              "fieldName": "fixedColumns"
+            },
             {
               "name": "selection-mode",
               "type": {
@@ -12656,6 +12721,14 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "DividerAppearance",
+          "declaration": {
+            "name": "DividerAppearance",
+            "module": "./divider"
+          }
+        },
         {
           "kind": "js",
           "name": "registerDivider",
@@ -12691,6 +12764,16 @@
           "kind": "class",
           "description": "",
           "name": "Divider",
+          "cssProperties": [
+            {
+              "name": "--vvd-divider-accent-soft",
+              "default": "var(--vvd-color-neutral-100)"
+            },
+            {
+              "name": "--vvd-divider-accent-dim",
+              "default": "var(--vvd-color-neutral-200)"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -12710,16 +12793,25 @@
               "description": "The orientation of the divider.",
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "appearance",
+              "type": {
+                "text": "DividerAppearance | undefined"
+              },
+              "description": "The appearance of the divider.",
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "_vividAriaBehaviour",
-              "default": "'delegate'",
+              "default": "'host'",
               "type": {
-                "text": "'delegate'"
+                "text": "'host'"
               },
               "inheritedFrom": {
-                "name": "DelegatesAria",
-                "module": "src/shared/aria/delegates-aria.ts"
+                "name": "HostSemantics",
+                "module": "src/shared/aria/host-semantics.ts"
               }
             },
             {
@@ -12766,12 +12858,20 @@
               },
               "description": "The orientation of the divider.",
               "fieldName": "orientation"
+            },
+            {
+              "name": "appearance",
+              "type": {
+                "text": "DividerAppearance | undefined"
+              },
+              "description": "The appearance of the divider.",
+              "fieldName": "appearance"
             }
           ],
           "mixins": [
             {
-              "name": "DelegatesAria",
-              "module": "/src/shared/aria/delegates-aria"
+              "name": "HostSemantics",
+              "module": "/src/shared/aria/host-semantics"
             }
           ],
           "superclass": {
@@ -18947,6 +19047,14 @@
                   "input"
                 ],
                 "valueMapping": "event.currentTarget.value"
+              },
+              {
+                "name": "valueAsNumber",
+                "propName": "valueAsNumber",
+                "eventNames": [
+                  "input"
+                ],
+                "valueMapping": "event.currentTarget.valueAsNumber"
               }
             ]
           }
@@ -19120,22 +19228,7 @@
             },
             {
               "kind": "field",
-              "name": "selectedAttribute",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "The selected attribute value. This sets the initial selected value.",
-              "privacy": "public"
-            },
-            {
-              "kind": "method",
-              "name": "selectedAttributeChanged",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
+              "name": "selectedAttribute"
             },
             {
               "kind": "field",
@@ -19158,30 +19251,18 @@
             },
             {
               "kind": "field",
-              "name": "dirtyValue",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Track whether the value has been changed from the initial value"
-            },
-            {
-              "kind": "field",
-              "name": "initialValue",
+              "name": "value",
               "type": {
                 "text": "string"
               },
-              "privacy": "protected",
-              "description": "The initial value of the option. This value sets the `value` property\nonly when the `value` property has not been explicitly set."
+              "default": "''",
+              "description": "The value of the option.",
+              "privacy": "public"
             },
             {
               "kind": "method",
-              "name": "initialValueChanged",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
+              "name": "valueChanged",
+              "privacy": "protected"
             },
             {
               "kind": "field",
@@ -19212,13 +19293,6 @@
               "kind": "field",
               "name": "text"
             },
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              }
-            },
             {
               "kind": "field",
               "name": "form",
@@ -19252,7 +19326,7 @@
             {
               "kind": "field",
               "name": "proxy",
-              "default": "new Option(\n\t\t\tthis.text,\n\t\t\t// @ts-expect-error Propery is used before it is assigned\n\t\t\tthis.initialValue,\n\t\t\tthis.defaultSelected,\n\t\t\tthis.selected\n\t\t)",
+              "default": "new Option(\n\t\t\tthis.text,\n\t\t\tthis.value,\n\t\t\tthis.defaultSelected,\n\t\t\tthis.selected\n\t\t)",
               "description": ""
             },
             {
@@ -19323,6 +19397,15 @@
             }
           ],
           "attributes": [
+            {
+              "name": "selected",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The defaultSelected state of the option.",
+              "fieldName": "defaultSelected"
+            },
             {
               "name": "disabled",
               "type": {
@@ -19332,20 +19415,21 @@
               "fieldName": "disabled"
             },
             {
-              "name": "selected",
+              "name": "current-selected",
               "type": {
                 "text": "boolean"
               },
-              "description": "The selected attribute value. This sets the initial selected value.",
-              "fieldName": "selectedAttribute"
+              "description": "The checked state of the control.",
+              "fieldName": "selected"
             },
             {
               "name": "value",
               "type": {
                 "text": "string"
               },
-              "description": "The initial value of the option. This value sets the `value` property\nonly when the `value` property has not been explicitly set.",
-              "fieldName": "initialValue"
+              "default": "''",
+              "description": "The value of the option.",
+              "fieldName": "value"
             },
             {
               "name": "label",
@@ -32436,6 +32520,10 @@
               "name": "#hide",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "#updateAnchorExpanded"
+            },
             {
               "kind": "method",
               "name": "#updateListeners"
@@ -33763,13 +33851,30 @@
       "kind": "javascript-module",
       "path": "src/lib/rich-text-editor/facades/prose-mirror-vivid.schema.ts",
       "declarations": [
+        {
+          "kind": "function",
+          "name": "dynamicSchema",
+          "parameters": [
+            {
+              "name": "prefix",
+              "default": "'vwc'"
+            }
+          ]
+        },
         {
           "kind": "variable",
-          "name": "extendedSchema",
-          "default": "new Schema({\n\tnodes: basicSchema.spec.nodes,\n\tmarks: {\n\t\t...basicSchema.spec.marks.toObject(),\n\t\t...customMarks,\n\t},\n})"
+          "name": "extendedSchema"
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "dynamicSchema",
+          "declaration": {
+            "name": "dynamicSchema",
+            "module": "src/lib/rich-text-editor/facades/prose-mirror-vivid.schema.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "default",
@@ -33840,6 +33945,15 @@
               "name": "#handleChangeEvent",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "#vwcPrefix",
+              "privacy": "private",
+              "type": {
+                "text": "string"
+              },
+              "default": "'vwc'"
+            },
             {
               "kind": "method",
               "name": "init",
@@ -33849,6 +33963,10 @@
                   "type": {
                     "text": "HTMLElement"
                   }
+                },
+                {
+                  "name": "vwcPrefix",
+                  "default": "'vwc'"
                 }
               ]
             },
@@ -34000,7 +34118,7 @@
               },
               "parameters": [
                 {
-                  "name": "{\n\t\tfile,\n\t\tposition,\n\t\talt,\n\t}",
+                  "name": "{\n\t\tfile,\n\t\tposition,\n\t\talt,\n\t\terror,\n\t}",
                   "type": {
                     "text": "RichTextEditorInlineImageProps"
                   }
@@ -34038,6 +34156,157 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/lib/rich-text-editor/image-placeholder/definition.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "imagePlaceholderDefinition"
+        },
+        {
+          "kind": "variable",
+          "name": "registerImagePlaceholder",
+          "description": "Registers the menubar element with the design system.",
+          "parameters": [
+            {
+              "description": "the prefix to use for the component name",
+              "name": "prefix"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "imagePlaceholderDefinition",
+          "declaration": {
+            "name": "imagePlaceholderDefinition",
+            "module": "src/lib/rich-text-editor/image-placeholder/definition.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "registerImagePlaceholder",
+          "declaration": {
+            "name": "registerImagePlaceholder",
+            "module": "src/lib/rich-text-editor/image-placeholder/definition.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/lib/rich-text-editor/image-placeholder/image-placeholder.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ImagePlaceholder",
+          "members": [
+            {
+              "kind": "field",
+              "name": "fileName",
+              "type": {
+                "text": "string | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "string | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "errorMessage",
+              "type": {
+                "text": "string | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "icon",
+              "type": {
+                "text": "string | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "VIVID_VERSION",
+              "static": true,
+              "default": "__PACKAGE_VERSION__",
+              "description": "The current version of the Vivid library, which is useful for debugging.\nIt can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.",
+              "type": {
+                "text": "string"
+              },
+              "inheritedFrom": {
+                "name": "VividElement",
+                "module": "src/shared/foundation/vivid-element/vivid-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "componentName",
+              "type": {
+                "text": "string"
+              },
+              "static": true,
+              "description": "Core component name, without prefix",
+              "inheritedFrom": {
+                "name": "VividElement",
+                "module": "src/shared/foundation/vivid-element/vivid-element.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "file-name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "fileName"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "size"
+            },
+            {
+              "name": "error-message",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "errorMessage"
+            },
+            {
+              "name": "icon",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "icon"
+            }
+          ],
+          "superclass": {
+            "name": "VividElement",
+            "module": "/src/shared/foundation/vivid-element/vivid-element"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ImagePlaceholder",
+          "declaration": {
+            "name": "ImagePlaceholder",
+            "module": "src/lib/rich-text-editor/image-placeholder/image-placeholder.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/lib/rich-text-editor/menubar/consts.ts",
@@ -34062,9 +34331,9 @@
           "kind": "variable",
           "name": "MENU_BAR_ITEMS",
           "type": {
-            "text": "{\n\t[key: string]: {\n\t\tregisterStateProperty?: (menuBar: MenuBar) => void;\n\t\trender: (context: VividElementDefinitionContext) => ViewTemplate<any, any>;\n\t};\n}"
+            "text": "{\n\t[key: string]: {\n\t\tregisterStateProperty?: (menubar: Menubar) => void;\n\t\trender: (context: VividElementDefinitionContext) => ViewTemplate<any, any>;\n\t};\n}"
           },
-          "default": "{\n\ttextBlock: {\n\t\tregisterStateProperty: function (menuBar: MenuBar) {\n\t\t\tmenuBar.addEventListener('text-styles-changed', textBlockEventHandler);\n\t\t},\n\t\trender: function (context) {\n\t\t\tconst selectTag = context.tagFor(Select);\n\t\t\tconst optionTag = context.tagFor(ListboxOption);\n\t\t\tconst tooltipTag = context.tagFor(Tooltip);\n\n\t\t\treturn html`\n\t\t<${tooltipTag} text=\"${(_, { parent }) =>\n\t\t\t\tparent.locale.richTextEditor.textBlockType}\" placement=\"top\">\n\t\t\t<${selectTag}\n                scale=\"condensed\"\n                shape=\"rounded\"\n                appearance=\"ghost\"\n\t\t\t\tslot=\"anchor\"\n\t\t\t\ttrigger=\"auto\"\n\t\t\t\tid=\"text-block\"\n\t\t\t\taria-label=\"Text Block\"\n\t\t\t\tplacement=\"bottom-end\"\n\t\t\t\tvalue=\"${(_, { parent }) => parent.textBlockType}\"\n\t\t\t\t@change=\"${(_, { parent, event }) =>\n\t\t\t\t\tnotifyMenuBarChange(\n\t\t\t\t\t\tparent,\n\t\t\t\t\t\t'text-block-selected',\n\t\t\t\t\t\t(event.target as HTMLSelectElement).value\n\t\t\t\t\t)}\"\n\t\t\t>\n\t\t\t\t<${optionTag}\n\t\t\t\t\ttext=\"Title\"\n\t\t\t\t\tvalue=\"title\"\n\t\t\t\t\tinternal-part\n\t\t\t\t\tclass=\"title\"\n\t\t\t\t\tconnotation=\"cta\"\n\t\t\t\t></${optionTag}>\n\t\t\t\t<${optionTag}\n\t\t\t\t\ttext=\"Subtitle\"\n\t\t\t\t\tvalue=\"subtitle\"\n\t\t\t\t\tinternal-part\n\t\t\t\t\tclass=\"subtitle\"\n\t\t\t\t\tconnotation=\"cta\"\n\t\t\t\t></${optionTag}>\n\t\t\t\t<${optionTag}\n\t\t\t\t\ttext=\"Body\"\n\t\t\t\t\tvalue=\"body\"\n\t\t\t\t\tinternal-part\n\t\t\t\t\tclass=\"body\"\n\t\t\t\t\tconnotation=\"cta\"\n\t\t\t\t></${optionTag}>\n\t\t\t</${selectTag}>\n\t\t</${tooltipTag}>\n\t\t`;\n\t\t},\n\t},\n\ttextDecoration: {\n\t\tregisterStateProperty: function (menuBar) {\n\t\t\tmenuBar.addEventListener(\n\t\t\t\t'text-styles-changed',\n\t\t\t\ttextDecorationEventHandler\n\t\t\t);\n\t\t},\n\t\trender: function (context) {\n\t\t\tconst buttonTag = context.tagFor(Button);\n\t\t\tconst tooltipTag = context.tagFor(Tooltip);\n\t\t\treturn html`\n\t\t\t\t<span id=\"text-decoration\">\n\t\t\t\t\t${repeat(\n\t\t\t\t\t\t(_) => TEXT_DECORATION_ITEMS,\n\t\t\t\t\t\thtml`\n                        <${tooltipTag} text=\"${(\n\t\t\t\t\t\t\tx,\n\t\t\t\t\t\t\t{ parentContext: { parent } }\n\t\t\t\t\t\t) => parent.locale.richTextEditor[x.value]}\" placement=\"top\">\n                            <${buttonTag}\n                                class=\"selection-button\"\n                                slot=\"anchor\"\n                                aria-label=\"${(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tx,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{ parentContext: { parent } }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) => parent.locale.richTextEditor[x.value]}\"\n                                size=\"super-condensed\"\n                                appearance=\"ghost-light\"\n                                shape=\"rounded\"\n                                icon=\"${(x) => x.icon}\"\n                                @click=\"${(x, c) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnotifyMenuBarChange(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tc.parentContext.parent,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'text-decoration-selected',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tx.value\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\"')}\"\n                            ></${buttonTag}>\n                        </${tooltipTag}>\n\t\t\t\t`\n\t\t\t\t\t)}\n\t\t\t\t</span>\n\t\t\t`;\n\t\t},\n\t},\n\ttextSize: {\n\t\tregisterStateProperty: function (menuBar) {\n\t\t\tmenuBar.addEventListener('text-styles-changed', textSizeEventHandler);\n\t\t},\n\t\trender: function (context) {\n\t\t\tconst menuTag = context.tagFor(Menu);\n\t\t\tconst buttonTag = context.tagFor(Button);\n\t\t\tconst tooltipTag = context.tagFor(Tooltip);\n\t\t\tconst menuItemTag = context.tagFor(MenuItem);\n\t\t\treturn html`\n                    <${menuTag}\n\t\t\t\t\t\tauto-dismiss\n                        trigger=\"auto\"\n                        id=\"text-size\"\n                        aria-label=\"Text Size\"\n                        placement=\"bottom-end\"\n                    >\n\t\t\t\t\t\t<${tooltipTag} slot=\"anchor\" text=\"${(_, { parent }) =>\n\t\t\t\tparent.locale.richTextEditor.textSize}\" placement=\"top\">\n                            <${buttonTag}\n                                slot=\"anchor\"\n                                aria-label=\"Open text size menu\"\n                                size=\"super-condensed\"\n                                appearance=\"ghost-light\"\n                                shape=\"pill\"\n                                icon=\"text-size-line\"\n                            ></${buttonTag}>\n\t\t\t\t\t\t</${tooltipTag}>\n\t\t\t\t\t\t${repeat(\n\t\t\t\t\t\t\t(_) => TEXT_SIZES,\n\t\t\t\t\t\t\thtml`\n\t\t\t\t\t\t\t<${menuItemTag}\n\t\t\t\t\t\t\t\tcheck-appearance=\"tick-only\"\n\t\t\t\t\t\t\t\tcontrol-type=\"checkbox\"\n\t\t\t\t\t\t\t\ttext=\"${(x) => x.text}\"\n\t\t\t\t\t\t\t\tvalue=\"${(x) => x.value}\"\n\t\t\t\t\t\t\t\tinternal-part\n\t\t\t\t\t\t\t\tclass=\"menubar-selector-menuitem\"\n\t\t\t\t\t\t\t\tconnotation=\"cta\"\n\t\t\t\t\t\t\t\t@click=\"${(x, c) =>\n\t\t\t\t\t\t\t\t\tnotifyMenuBarChange(\n\t\t\t\t\t\t\t\t\t\tc.parentContext.parent,\n\t\t\t\t\t\t\t\t\t\t'text-size-selected',\n\t\t\t\t\t\t\t\t\t\tx.value\n\t\t\t\t\t\t\t\t\t)}\"\n                        ></${menuItemTag}>\n\t\t\t\t\t\t\t`\n\t\t\t\t\t\t)}\n                    </${menuTag}>\n                `;\n\t\t},\n\t},\n\tdivider: {\n\t\trender: function (context) {\n\t\t\tconst dividerTag = context.tagFor(Divider);\n\t\t\treturn html`\n\t\t\t\t<${dividerTag} class=\"divider\" orientation=\"vertical\"></${dividerTag}>\n\t\t\t`;\n\t\t},\n\t},\n}"
+          "default": "{\n\ttextBlock: {\n\t\tregisterStateProperty: function (menubar: Menubar) {\n\t\t\tmenubar.addEventListener('text-styles-changed', textBlockEventHandler);\n\t\t},\n\t\trender: function (context) {\n\t\t\tconst selectTag = context.tagFor(Select);\n\t\t\tconst optionTag = context.tagFor(ListboxOption);\n\t\t\tconst tooltipTag = context.tagFor(Tooltip);\n\n\t\t\treturn html`\n\t\t<${tooltipTag} text=\"${(_, { parent }) =>\n\t\t\t\tparent.locale.richTextEditor.textBlockType}\" placement=\"top\">\n\t\t\t<${selectTag}\n                scale=\"condensed\"\n                shape=\"rounded\"\n                appearance=\"ghost\"\n\t\t\t\tslot=\"anchor\"\n\t\t\t\ttrigger=\"auto\"\n\t\t\t\tid=\"text-block\"\n\t\t\t\taria-label=\"Text Block\"\n\t\t\t\tplacement=\"bottom-end\"\n\t\t\t\tvalue=\"${(_, { parent }) => parent.textBlockType}\"\n\t\t\t\t@change=\"${(_, { parent, event }) =>\n\t\t\t\t\tnotifyMenubarChange(\n\t\t\t\t\t\tparent,\n\t\t\t\t\t\t'text-block-selected',\n\t\t\t\t\t\t(event.target as HTMLSelectElement).value\n\t\t\t\t\t)}\"\n\t\t\t>\n\t\t\t\t<${optionTag}\n\t\t\t\t\ttext=\"Title\"\n\t\t\t\t\tvalue=\"title\"\n\t\t\t\t\tinternal-part\n\t\t\t\t\tclass=\"title\"\n\t\t\t\t\tconnotation=\"cta\"\n\t\t\t\t></${optionTag}>\n\t\t\t\t<${optionTag}\n\t\t\t\t\ttext=\"Subtitle\"\n\t\t\t\t\tvalue=\"subtitle\"\n\t\t\t\t\tinternal-part\n\t\t\t\t\tclass=\"subtitle\"\n\t\t\t\t\tconnotation=\"cta\"\n\t\t\t\t></${optionTag}>\n\t\t\t\t<${optionTag}\n\t\t\t\t\ttext=\"Body\"\n\t\t\t\t\tvalue=\"body\"\n\t\t\t\t\tinternal-part\n\t\t\t\t\tclass=\"body\"\n\t\t\t\t\tconnotation=\"cta\"\n\t\t\t\t></${optionTag}>\n\t\t\t</${selectTag}>\n\t\t</${tooltipTag}>\n\t\t`;\n\t\t},\n\t},\n\ttextDecoration: {\n\t\tregisterStateProperty: function (menubar) {\n\t\t\tmenubar.addEventListener(\n\t\t\t\t'text-styles-changed',\n\t\t\t\ttextDecorationEventHandler\n\t\t\t);\n\t\t},\n\t\trender: function (context) {\n\t\t\tconst buttonTag = context.tagFor(Button);\n\t\t\tconst tooltipTag = context.tagFor(Tooltip);\n\t\t\treturn html`\n\t\t\t\t<span id=\"text-decoration\">\n\t\t\t\t\t${repeat(\n\t\t\t\t\t\t(_) => TEXT_DECORATION_ITEMS,\n\t\t\t\t\t\thtml`\n                        <${tooltipTag} text=\"${(\n\t\t\t\t\t\t\tx,\n\t\t\t\t\t\t\t{ parentContext: { parent } }\n\t\t\t\t\t\t) => parent.locale.richTextEditor[x.value]}\" placement=\"top\">\n                            <${buttonTag}\n                                class=\"selection-button\"\n                                slot=\"anchor\"\n                                aria-label=\"${(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tx,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{ parentContext: { parent } }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) => parent.locale.richTextEditor[x.value]}\"\n                                size=\"super-condensed\"\n                                appearance=\"ghost-light\"\n                                shape=\"rounded\"\n                                icon=\"${(x) => x.icon}\"\n                                @click=\"${(x, c) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnotifyMenubarChange(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tc.parentContext.parent,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'text-decoration-selected',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tx.value\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\"')}\"\n                            ></${buttonTag}>\n                        </${tooltipTag}>\n\t\t\t\t`\n\t\t\t\t\t)}\n\t\t\t\t</span>\n\t\t\t`;\n\t\t},\n\t},\n\ttextSize: {\n\t\tregisterStateProperty: function (menubar) {\n\t\t\tmenubar.addEventListener('text-styles-changed', textSizeEventHandler);\n\t\t},\n\t\trender: function (context) {\n\t\t\tconst menuTag = context.tagFor(Menu);\n\t\t\tconst buttonTag = context.tagFor(Button);\n\t\t\tconst tooltipTag = context.tagFor(Tooltip);\n\t\t\tconst menuItemTag = context.tagFor(MenuItem);\n\t\t\treturn html`\n                    <${menuTag}\n\t\t\t\t\t\tauto-dismiss\n                        trigger=\"auto\"\n                        id=\"text-size\"\n                        aria-label=\"Text Size\"\n                        placement=\"bottom-end\"\n                    >\n\t\t\t\t\t\t<${tooltipTag} slot=\"anchor\" text=\"${(_, { parent }) =>\n\t\t\t\tparent.locale.richTextEditor.textSize}\" placement=\"top\">\n                            <${buttonTag}\n                                slot=\"anchor\"\n                                aria-label=\"Open text size menu\"\n                                size=\"super-condensed\"\n                                appearance=\"ghost-light\"\n                                shape=\"pill\"\n                                icon=\"text-size-line\"\n                            ></${buttonTag}>\n\t\t\t\t\t\t</${tooltipTag}>\n\t\t\t\t\t\t${repeat(\n\t\t\t\t\t\t\t(_) => TEXT_SIZES,\n\t\t\t\t\t\t\thtml`\n\t\t\t\t\t\t\t<${menuItemTag}\n\t\t\t\t\t\t\t\tcheck-appearance=\"tick-only\"\n\t\t\t\t\t\t\t\tcontrol-type=\"checkbox\"\n\t\t\t\t\t\t\t\ttext=\"${(x) => x.text}\"\n\t\t\t\t\t\t\t\tvalue=\"${(x) => x.value}\"\n\t\t\t\t\t\t\t\tinternal-part\n\t\t\t\t\t\t\t\tclass=\"menubar-selector-menuitem\"\n\t\t\t\t\t\t\t\tconnotation=\"cta\"\n\t\t\t\t\t\t\t\t@click=\"${(x, c) =>\n\t\t\t\t\t\t\t\t\tnotifyMenubarChange(\n\t\t\t\t\t\t\t\t\t\tc.parentContext.parent,\n\t\t\t\t\t\t\t\t\t\t'text-size-selected',\n\t\t\t\t\t\t\t\t\t\tx.value\n\t\t\t\t\t\t\t\t\t)}\"\n                        ></${menuItemTag}>\n\t\t\t\t\t\t\t`\n\t\t\t\t\t\t)}\n                    </${menuTag}>\n                `;\n\t\t},\n\t},\n\tdivider: {\n\t\trender: function (context) {\n\t\t\tconst dividerTag = context.tagFor(Divider);\n\t\t\treturn html`\n\t\t\t\t<${dividerTag} class=\"divider\" orientation=\"vertical\"></${dividerTag}>\n\t\t\t`;\n\t\t},\n\t},\n}"
         }
       ],
       "exports": [
@@ -34100,11 +34369,11 @@
       "declarations": [
         {
           "kind": "variable",
-          "name": "menuBarDefinition"
+          "name": "menubarDefinition"
         },
         {
           "kind": "variable",
-          "name": "registerMenuBar",
+          "name": "registerMenubar",
           "description": "Registers the menubar element with the design system.",
           "parameters": [
             {
@@ -34117,17 +34386,17 @@
       "exports": [
         {
           "kind": "js",
-          "name": "menuBarDefinition",
+          "name": "menubarDefinition",
           "declaration": {
-            "name": "menuBarDefinition",
+            "name": "menubarDefinition",
             "module": "src/lib/rich-text-editor/menubar/definition.ts"
           }
         },
         {
           "kind": "js",
-          "name": "registerMenuBar",
+          "name": "registerMenubar",
           "declaration": {
-            "name": "registerMenuBar",
+            "name": "registerMenubar",
             "module": "src/lib/rich-text-editor/menubar/definition.ts"
           }
         }
@@ -34140,7 +34409,7 @@
         {
           "kind": "class",
           "description": "",
-          "name": "MenuBar",
+          "name": "Menubar",
           "members": [
             {
               "kind": "field",
@@ -34216,9 +34485,9 @@
       "exports": [
         {
           "kind": "js",
-          "name": "MenuBar",
+          "name": "Menubar",
           "declaration": {
-            "name": "MenuBar",
+            "name": "Menubar",
             "module": "src/lib/rich-text-editor/menubar/menubar.ts"
           }
         }
@@ -38633,6 +38902,14 @@
                 "text": "string | undefined"
               }
             },
+            {
+              "kind": "field",
+              "name": "focusedPickerClass",
+              "type": {
+                "text": "string"
+              },
+              "default": "'focused'"
+            },
             {
               "kind": "method",
               "name": "scrollSelectedOptionsToTop"