@limetech/lime-elements 37.49.0 → 37.49.2

package/dist/lime-elements/p-e7768544.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as e,H as s,g as o}from"./p-443111b3.js";import{i as r}from"./p-91741e79.js";import{c as n}from"./p-3ccdc4a3.js";import{m as a,r as l}from"./p-869d6d77.js";import{g as h,a as c}from"./p-2f777fdb.js";import{t as d}from"./p-29e0e5bd.js";import{h as m,g as b,p as u}from"./p-6465625e.js";import{a as f,E as p}from"./p-e03dfe70.js";const v=":host(limel-action-bar){--action-bar-item-height:2rem;--limel-action-bar-item-text-color:var(\n      --action-bar-item-text-color,\n      rgb(var(--contrast-1100))\n  );box-sizing:border-box;display:inline-flex;align-items:center;padding:0.125rem 0.25rem;max-width:100%;border-radius:var(--action-bar-border-radius);background-color:var(--action-bar-background-color, rgb(var(--contrast-100)))}:host(limel-action-bar),.items{gap:0.25rem}@media (pointer: coarse){:host(limel-action-bar),.items{gap:0.5rem}}.items{display:inline-flex;max-width:100%;min-width:0}:host(limel-action-bar.is-full-width){width:100%}:host(limel-action-bar.is-floating){--action-bar-border-radius:100vw;border:1px solid rgb(var(--contrast-400));padding-right:0.125rem;padding-left:0.125rem;max-width:calc(100% - 2rem);box-shadow:var(--shadow-depth-16), var(--shadow-depth-8)}";const g=class{constructor(s){t(this,s);this.itemSelected=i(this,"itemSelected",7);this.firstRender=true;this.actionBarItems=[];this.renderActionBarItem=(t,i)=>e("limel-action-bar-item",{item:t,onSelect:this.handleSelect,isVisible:this.isVisible(i),role:"gridcell"});this.renderOverflowMenu=t=>{if(!(this.actions.length-this.overflowCutoff)){return}return e("limel-action-bar-overflow-menu",{openDirection:this.openDirection,items:t,onSelect:this.handleSelect,role:"gridcell"})};this.handleSelect=t=>{t.stopPropagation();if(r(t.detail)){this.itemSelected.emit(t.detail)}};this.handleIntersection=t=>{const i=t.filter((t=>t.isIntersecting));const e=t.filter((t=>!t.isIntersecting));if(this.firstRender){this.overflowCutoff=i.length}else{this.overflowCutoff=this.overflowCutoff+i.length-e.length}this.firstRender=false};this.actions=[];this.accessibleLabel=undefined;this.layout=undefined;this.openDirection=undefined;this.overflowCutoff=this.actions.length}render(){let t=[];if(this.actions.length){t=this.actions.slice(this.overflowCutoff)}return e(s,{"aria-label":this.accessibleLabel,class:{"is-full-width":this.layout==="fullWidth","is-floating":this.layout==="floating"},role:"grid"},e("div",{class:"items",role:"rowgroup"},this.actions.map(this.renderActionBarItem)),this.renderOverflowMenu(t))}connectedCallback(){}componentDidRender(){var t;if(this.haveItemsChanged()){(t=this.intersectionObserver)===null||t===void 0?void 0:t.disconnect();this.createIntersectionObserver()}}disconnectedCallback(){var t;(t=this.intersectionObserver)===null||t===void 0?void 0:t.disconnect();this.intersectionObserver=undefined;this.actionBarItems=[];this.connectedCallback=()=>this.createIntersectionObserver()}isVisible(t){return t<this.overflowCutoff}createIntersectionObserver(){const t={root:this.host.shadowRoot.querySelector(".items"),rootMargin:"0px",threshold:1};this.overflowCutoff=this.actions.length;this.firstRender=true;this.actionBarItems=[];this.intersectionObserver=new IntersectionObserver(this.handleIntersection,t);this.host.shadowRoot.querySelectorAll("limel-action-bar-item").forEach((t=>{this.observe(t)}))}observe(t){this.intersectionObserver.observe(t);this.actionBarItems.push(t)}haveItemsChanged(){const t=this.actionBarItems.some((t=>!this.host.shadowRoot.contains(t)));const i=Array.from(this.host.shadowRoot.querySelectorAll("limel-action-bar-item")).some((t=>!this.actionBarItems.includes(t)));return t||i}get host(){return o(this)}};g.style=v;const w='@charset "UTF-8";limel-action-bar-item{transition:opacity 0.2s ease-in-out;position:relative;display:flex;align-items:center}limel-action-bar-item:not([is-visible]){opacity:0;pointer-events:none}button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:0.25rem;width:100%;min-width:var(--action-bar-item-height);max-width:var(--action-bar-item-max-width, 10rem);height:var(--action-bar-item-height);color:var(--limel-action-bar-item-text-color);border-radius:var(--action-bar-item-height);font-size:0.875rem;padding:0 0.25rem}button:not([disabled]){transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color)}button:not([disabled]):hover{color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-hovered)}button:not([disabled]):active{background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-inset-pressed);transform:translate3d(0, 0.05rem, 0)}button:not([disabled]):focus{outline:none}button:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button:has(.text){padding:0 0.5rem}button[disabled]{opacity:0.4}button.is-selected{color:var(--mdc-theme-primary) !important}button.is-selected:not(:hover){box-shadow:var(--button-shadow-inset)}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 0.25rem}limel-icon{flex-shrink:0;width:calc(var(--action-bar-item-height) - 0.75rem);height:calc(var(--action-bar-item-height) - 0.75rem);color:var(--action-bar-item-icon-color, var(--limel-action-bar-item-text-color))}div[role=separator]{width:1px;height:1.5rem;border-radius:var(--action-bar-item-height);background-color:var(--limel-action-bar-item-text-color);opacity:0.2}@media (pointer: fine){div[role=separator]{margin-right:0.5rem;margin-left:0.5rem}}limel-menu{--notification-badge-background-color:rgb(var(--contrast-600));--notification-badge-text-color:rgb(var(--contrast-1200))}limel-menu[open] button{box-shadow:var(--button-shadow-inset)}button[slot=trigger]{animation:fade-in ease-out 0.25s;font-size:0.75rem;font-weight:bold;transform:translate3d(0, 0, 0)}@keyframes fade-in{0%{scale:0.8;opacity:0}100%{scale:1;opacity:1}}';const x=class{constructor(e){t(this,e);this.select=i(this,"select",7);this.handleClick=t=>{t.stopPropagation();this.select.emit(this.item)};this.item=undefined;this.isVisible=true;this.selected=false;this.tooltipId=n()}componentWillLoad(){a(this.host)}componentDidLoad(){this.triggerIconColorWarning()}disconnectedCallback(){l(this.host)}render(){if(!this.isItem(this.item)&&this.item.separator){return e("div",{role:"separator"})}return e("button",{id:this.tooltipId,type:"button",onClick:this.handleClick,disabled:this.isDisabled(),class:{"is-selected":this.isItem(this.item)&&this.item.selected}},this.renderIcon(),this.renderLabel(),this.renderTooltip())}isItem(t){return!("separator"in t)}isDisabled(){if(this.isItem(this.item)&&this.item.disabled){return true}if(!this.isVisible){return true}}renderIcon(){if(this.isItem(this.item)&&!this.item.icon){return}if("icon"in this.item){const t=h(this.item.icon);const i=c(this.item.icon,this.item.iconColor);return e("limel-icon",{name:t,style:{"--action-bar-item-icon-color":`${i}`}})}}renderLabel(){if(!this.isItem(this.item)||this.item.iconOnly){return}return e("span",{class:"text"},this.item.text)}renderTooltip(){if(!this.isItem(this.item)){return}if(this.item.text){return e("limel-tooltip",{elementId:this.tooltipId,label:this.item.text,helperLabel:this.item.commandText})}if(this.item.commandText){return e("limel-tooltip",{elementId:this.tooltipId,label:this.item.commandText})}}triggerIconColorWarning(){if(this.isItem(this.item)&&this.item.iconColor){console.warn("The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.")}}get host(){return o(this)}};x.style=w;const k=class{constructor(e){t(this,e);this.select=i(this,"select",7);this.countOverflowedItems=()=>`+${this.numberOfMenuItems}`;this.handleSelect=t=>{t.stopPropagation();this.select.emit(t.detail)};this.items=undefined;this.openDirection="bottom-end"}render(){return[e("limel-menu",{openDirection:this.openDirection,items:this.items,onSelect:this.handleSelect},e("button",{slot:"trigger"},this.countOverflowedItems()))]}get numberOfMenuItems(){return this.items.filter((t=>this.isMenuItem(t))).length}isMenuItem(t){return!("separator"in t)}};const y=":host(limel-text-editor-link-menu){animation:fade 0.2s ease forwards;animation-delay:0.1s;opacity:0;display:flex;flex-direction:column;gap:0.5rem;padding:0.5rem;max-width:calc(100vw - 2rem);border-radius:0.5rem;background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--shadow-depth-16)}.actions{display:flex;justify-content:end;gap:0.5rem}@keyframes fade{0%{scale:0.86;opacity:0}100%{scale:1;opacity:1}}";const _=class{constructor(e){t(this,e);this.cancel=i(this,"cancel",7);this.save=i(this,"save",7);this.linkChange=i(this,"linkChange",7);this.getTranslation=t=>d.get(t,this.language);this.validateLink=t=>{if(!m(t)){const i=u(t);return!!b(i)}return!!b(t)};this.handleKeyDown=t=>{var i;if(t.key!==f){return}if(this.saveButton){this.saveButton.focus()}t.preventDefault();if(((i=this.link)===null||i===void 0?void 0:i.href)&&!this.invalidLink){this.handleSave(t)}};this.handleCancel=t=>{if(t instanceof KeyboardEvent&&t.key!==p){return}t.stopPropagation();t.preventDefault();this.cancel.emit()};this.handleSave=t=>{t.stopPropagation();this.save.emit()};this.handleLinkInputAction=t=>{window.open(this.link.href,"_blank");t.stopPropagation()};this.handleLinkTitleChange=t=>{var i;this.emitLinkChange(t.detail,(i=this.link)===null||i===void 0?void 0:i.href)};this.handleLinkValueChange=t=>{var i;const e=t.detail;const s=this.validateLink(e);this.invalidLink=!s;this.emitLinkChange((i=this.link)===null||i===void 0?void 0:i.text,e)};this.emitLinkChange=(t,i)=>{const e={text:t,href:i};this.linkChange.emit(e)};this.link=undefined;this.language="en";this.isOpen=false;this.invalidLink=false}connectedCallback(){this.setupGlobalHandlers()}disconnectedCallback(){this.teardownGlobalHandlers()}setupGlobalHandlers(){if(this.isOpen){document.addEventListener("keyup",this.handleCancel)}}teardownGlobalHandlers(){document.removeEventListener("keyup",this.handleCancel)}componentDidLoad(){this.focusOnTextInput()}focusOnTextInput(){if(this.textInput){const t=this.textInput.shadowRoot.querySelector("input");if(t){requestAnimationFrame((()=>{t.focus()}))}}}render(){var t,i,s;return[e("limel-input-field",{label:this.getTranslation("editor-link-menu.text"),value:((t=this.link)===null||t===void 0?void 0:t.text)||"",leadingIcon:"text_cursor",onChange:this.handleLinkTitleChange,onKeyDown:this.handleKeyDown,ref:t=>this.textInput=t}),e("limel-input-field",{label:this.getTranslation("editor-link-menu.link"),value:((i=this.link)===null||i===void 0?void 0:i.href)||"",type:"url",leadingIcon:"-lime-text-link",trailingIcon:"external_link",invalid:this.invalidLink,onChange:this.handleLinkValueChange,onAction:this.handleLinkInputAction,onKeyDown:this.handleKeyDown}),e("div",{class:"actions"},e("limel-button",{label:this.getTranslation("cancel"),onClick:this.handleCancel}),e("limel-button",{primary:true,label:this.getTranslation("save"),disabled:!((s=this.link)===null||s===void 0?void 0:s.href)||this.invalidLink,onClick:this.handleSave,ref:t=>this.saveButton=t,slot:"button"}))]}};_.style=y;export{g as limel_action_bar,x as limel_action_bar_item,k as limel_action_bar_overflow_menu,_ as limel_text_editor_link_menu};
+//# sourceMappingURL=p-e7768544.entry.js.map

package/dist/lime-elements/p-e7768544.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["actionBarCss","ActionBar","this","firstRender","actionBarItems","renderActionBarItem","item","index","h","onSelect","handleSelect","isVisible","role","renderOverflowMenu","items","actions","length","overflowCutoff","openDirection","event","stopPropagation","isItem","detail","itemSelected","emit","handleIntersection","entries","intersectingItems","filter","entry","isIntersecting","notIntersectingItems","render","overflowActions","slice","Host","accessibleLabel","class","layout","map","connectedCallback","componentDidRender","haveItemsChanged","_a","intersectionObserver","disconnect","createIntersectionObserver","disconnectedCallback","undefined","options","root","host","shadowRoot","querySelector","rootMargin","threshold","IntersectionObserver","querySelectorAll","forEach","actionBarItem","observe","push","someItemRemoved","some","contains","someItemAdded","Array","from","includes","actionBarItemCss","ActionBarButton","constructor","hostRef","handleClick","select","tooltipId","createRandomString","componentWillLoad","makeEnterClickable","componentDidLoad","triggerIconColorWarning","removeEnterClickable","separator","id","type","onClick","disabled","isDisabled","selected","renderIcon","renderLabel","renderTooltip","icon","name","getIconName","color","getIconColor","iconColor","style","iconOnly","text","elementId","label","helperLabel","commandText","console","warn","ActionBarOverflowMenu","countOverflowedItems","numberOfMenuItems","slot","isMenuItem","editorLinkMenuCss","TextEditorLinkMenu","getTranslation","key","translate","get","language","validateLink","href","hasKnownProtocol","formattedLink","prependProtocol","getHref","handleKeyDown","ENTER","saveButton","focus","preventDefault","link","invalidLink","handleSave","handleCancel","KeyboardEvent","ESCAPE","cancel","save","handleLinkInputAction","window","open","handleLinkTitleChange","emitLinkChange","handleLinkValueChange","isValid","newLink","linkChange","setupGlobalHandlers","teardownGlobalHandlers","isOpen","document","addEventListener","removeEventListener","focusOnTextInput","textInput","inputField","requestAnimationFrame","value","leadingIcon","onChange","onKeyDown","ref","el","_b","trailingIcon","invalid","onAction","primary","_c"],"sources":["./src/components/action-bar/action-bar.scss?tag=limel-action-bar&encapsulation=shadow","./src/components/action-bar/action-bar.tsx","./src/components/action-bar/action-bar-item/action-bar-item.scss?tag=limel-action-bar-item","./src/components/action-bar/action-bar-item/action-bar-item.tsx","./src/components/action-bar/action-bar-item/action-bar-overflow-menu.tsx","./src/components/text-editor/link-menu/editor-link-menu.scss?tag=limel-text-editor-link-menu&encapsulation=shadow","./src/components/text-editor/link-menu/editor-link-menu.tsx"],"sourcesContent":["/**\n* @prop --action-bar-item-text-color: Text color of action bar items, defaults to `--contrast-1100`.\n* @prop --action-bar-item-icon-color: Color of the icons displayed on each action bar item. Defaults to the text color. To specify a color for an individual item, use the `iconColor` prop instead.\n* @prop --action-bar-item-max-width: Maximum width of a button in the action bar. Defaults to `10rem`. Keep in mind that the buttons should not appear too big.\n* @prop --action-bar-border-radius: Defines the roundness of the corners of the action bar. Defaults to `0`.\n* @prop --action-bar-background-color: Background color of the whole component. Defaults to `--contrast-100`.\n*/\n\n:host(limel-action-bar) {\n    --action-bar-item-height: 2rem;\n\n    --limel-action-bar-item-text-color: var(\n        --action-bar-item-text-color,\n        rgb(var(--contrast-1100))\n    );\n\n    box-sizing: border-box;\n\n    display: inline-flex;\n    align-items: center;\n    padding: 0.125rem 0.25rem;\n    max-width: 100%;\n    border-radius: var(--action-bar-border-radius);\n\n    background-color: var(\n        --action-bar-background-color,\n        rgb(var(--contrast-100))\n    );\n}\n\n:host(limel-action-bar),\n.items {\n    gap: 0.25rem;\n    @media (pointer: coarse) {\n        gap: 0.5rem;\n    }\n}\n\n.items {\n    display: inline-flex;\n    max-width: 100%;\n    min-width: 0;\n}\n\n:host(limel-action-bar.is-full-width) {\n    width: 100%;\n}\n\n:host(limel-action-bar.is-floating) {\n    --action-bar-border-radius: 100vw;\n    border: 1px solid rgb(var(--contrast-400));\n\n    padding-right: 0.125rem;\n    padding-left: 0.125rem;\n\n    max-width: calc(100% - 2rem);\n    box-shadow: var(--shadow-depth-16), var(--shadow-depth-8);\n}\n","import {\n    Component,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n    State,\n    Element,\n} from '@stencil/core';\nimport { ListSeparator } from '../list/list-item.types';\nimport { MenuItem, OpenDirection } from '../menu/menu.types';\nimport { ActionBarItem } from './action-bar.types';\nimport { isItem } from './isItem';\n\n/**\n * An action bar is a user interface element commonly found in software applications and websites.\n * It typically appears at the top of the screen or within a specific section\n * and serves as a centralized hub for accessing various actions and commands\n * relevant to the current context or page.\n *\n * The action bar often contains a set of clickable icons or buttons (icons + labels)\n * that represent specific actions, such as saving, deleting, editing, sharing,\n * or bulk operations for selected items.\n *\n * The purpose of an action bar is to provide quick and convenient access to\n * frequently used functionalities, enabling users to perform common tasks efficiently.\n * It enhances usability by organizing important actions in a visually prominent and easily accessible location.\n *\n * The action bar's design and layout can vary based on the platform or application,\n * but its primary goal remains consistent—to\n * empower users to interact with the software and perform desired actions effortlessly.\n *\n * @exampleComponent limel-example-action-bar\n * @exampleComponent limel-example-action-bar-overflow-menu\n * @exampleComponent limel-example-action-bar-selected-item\n * @exampleComponent limel-example-action-bar-colors\n * @exampleComponent limel-example-action-bar-floating\n * @exampleComponent limel-example-action-bar-styling\n * @exampleComponent limel-example-action-bar-as-primary-component\n */\n@Component({\n    tag: 'limel-action-bar',\n    shadow: true,\n    styleUrl: 'action-bar.scss',\n})\nexport class ActionBar {\n    /**\n     * Items that are placed in the action bar.\n     * These represent primary actions.\n     */\n    @Prop()\n    public actions: Array<ActionBarItem | ListSeparator> = [];\n\n    /**\n     * A label used to describe the purpose of the element to users\n     * of assistive technologies, like screen readers.\n     * Example value: \"toolbar\"\n     */\n    @Prop({ reflect: true })\n    public accessibleLabel?: string;\n\n    /**\n     * - When set to `fullWidth`, the component will take the\n     * entire width of its container.\n     * - When set to `floating`, the component will get basic stylings\n     * to visualize the floating state.\n     * :::note\n     * You should still properly position the component\n     * according to the structure of your user interface.\n     * For example, use an `absolute` or `fixed` position.\n     * :::\n     */\n    @Prop({ reflect: true })\n    public layout?: 'fullWidth' | 'floating';\n\n    /**\n     * Defines the location that the content of the overflow menu\n     * appears, in relation to its trigger.\n     */\n    @Prop({ reflect: true })\n    public openDirection: OpenDirection;\n\n    /**\n     * Fired when a action bar item has been clicked.\n     * @public\n     */\n    @Event()\n    public itemSelected: EventEmitter<ActionBarItem>;\n\n    @Element()\n    private host: HTMLElement;\n\n    @State()\n    private overflowCutoff: number = this.actions.length;\n\n    private intersectionObserver: IntersectionObserver;\n    private firstRender = true;\n    private actionBarItems: HTMLLimelActionBarItemElement[] = [];\n\n    public render() {\n        let overflowActions: Array<MenuItem | ListSeparator> = [];\n        if (this.actions.length) {\n            overflowActions = this.actions.slice(this.overflowCutoff);\n        }\n\n        return (\n            <Host\n                aria-label={this.accessibleLabel}\n                class={{\n                    'is-full-width': this.layout === 'fullWidth',\n                    'is-floating': this.layout === 'floating',\n                }}\n                role=\"grid\"\n            >\n                <div class=\"items\" role=\"rowgroup\">\n                    {this.actions.map(this.renderActionBarItem)}\n                </div>\n                {this.renderOverflowMenu(overflowActions)}\n            </Host>\n        );\n    }\n\n    public connectedCallback() {}\n\n    public componentDidRender() {\n        if (this.haveItemsChanged()) {\n            this.intersectionObserver?.disconnect();\n            this.createIntersectionObserver();\n        }\n    }\n\n    public disconnectedCallback() {\n        this.intersectionObserver?.disconnect();\n        this.intersectionObserver = undefined;\n        this.actionBarItems = [];\n        this.connectedCallback = () => this.createIntersectionObserver();\n    }\n\n    private renderActionBarItem = (item: ActionBarItem, index: number) => {\n        return (\n            <limel-action-bar-item\n                item={item}\n                onSelect={this.handleSelect}\n                isVisible={this.isVisible(index)}\n                role=\"gridcell\"\n            />\n        );\n    };\n\n    private renderOverflowMenu = (items: Array<MenuItem | ListSeparator>) => {\n        if (!(this.actions.length - this.overflowCutoff)) {\n            return;\n        }\n\n        return (\n            <limel-action-bar-overflow-menu\n                openDirection={this.openDirection}\n                items={items}\n                onSelect={this.handleSelect}\n                role=\"gridcell\"\n            />\n        );\n    };\n\n    private isVisible(index: number) {\n        return index < this.overflowCutoff;\n    }\n\n    private handleSelect = (\n        event: CustomEvent<ActionBarItem | ListSeparator>,\n    ) => {\n        event.stopPropagation();\n        if (isItem(event.detail)) {\n            this.itemSelected.emit(event.detail);\n        }\n    };\n\n    private handleIntersection = (entries: IntersectionObserverEntry[]) => {\n        const intersectingItems = entries.filter(\n            (entry) => entry.isIntersecting,\n        );\n\n        const notIntersectingItems = entries.filter(\n            (entry) => !entry.isIntersecting,\n        );\n\n        if (this.firstRender) {\n            this.overflowCutoff = intersectingItems.length;\n        } else {\n            this.overflowCutoff =\n                this.overflowCutoff +\n                intersectingItems.length -\n                notIntersectingItems.length;\n        }\n\n        this.firstRender = false;\n    };\n\n    private createIntersectionObserver() {\n        const options = {\n            root: this.host.shadowRoot.querySelector('.items'),\n            rootMargin: '0px',\n            threshold: 1.0,\n        };\n\n        this.overflowCutoff = this.actions.length;\n        this.firstRender = true;\n\n        this.actionBarItems = [];\n\n        this.intersectionObserver = new IntersectionObserver(\n            this.handleIntersection,\n            options,\n        );\n\n        this.host.shadowRoot\n            .querySelectorAll('limel-action-bar-item')\n            .forEach((actionBarItem) => {\n                this.observe(actionBarItem);\n            });\n    }\n\n    private observe(actionBarItem: HTMLLimelActionBarItemElement) {\n        this.intersectionObserver.observe(actionBarItem);\n        this.actionBarItems.push(actionBarItem);\n    }\n\n    private haveItemsChanged() {\n        const someItemRemoved = this.actionBarItems.some(\n            (actionBarItem: HTMLLimelActionBarItemElement) =>\n                !this.host.shadowRoot.contains(actionBarItem),\n        );\n\n        const someItemAdded = Array.from(\n            this.host.shadowRoot.querySelectorAll('limel-action-bar-item'),\n        ).some(\n            (actionBarItem: HTMLLimelActionBarItemElement) =>\n                !this.actionBarItems.includes(actionBarItem),\n        );\n\n        return someItemRemoved || someItemAdded;\n    }\n}\n","@use '../../../style/mixins';\n@use '../../../style/functions';\n\nlimel-action-bar-item {\n    transition: opacity 0.2s ease-in-out;\n    position: relative;\n    display: flex;\n    align-items: center;\n\n    &:not([is-visible]) {\n        opacity: 0;\n        pointer-events: none;\n    }\n}\n\nbutton {\n    all: unset;\n\n    &:not([disabled]) {\n        @include mixins.is-flat-inset-clickable(\n            $color: var(--limel-action-bar-item-text-color),\n            $color--hovered: var(--limel-action-bar-item-text-color),\n            $background-color: var(--action-bar-background-color),\n            $background-color--hovered: var(--action-bar-background-color),\n            $background-color--inset: var(--action-bar-background-color)\n        );\n        @include mixins.visualize-keyboard-focus;\n    }\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.25rem;\n\n    width: 100%;\n    min-width: var(--action-bar-item-height);\n    max-width: var(--action-bar-item-max-width, 10rem);\n    height: var(--action-bar-item-height);\n    color: var(--limel-action-bar-item-text-color);\n\n    border-radius: var(--action-bar-item-height);\n    font-size: functions.pxToRem(14);\n    padding: 0 0.25rem;\n\n    &:has(.text) {\n        padding: 0 0.5rem;\n    }\n\n    &[disabled] {\n        opacity: 0.4;\n    }\n\n    &.is-selected {\n        &:not(:hover) {\n            box-shadow: var(--button-shadow-inset);\n        }\n        color: var(--mdc-theme-primary) !important;\n    }\n}\n\n.text {\n    @include mixins.truncate-text();\n    padding: 0 0.25rem;\n}\n\nlimel-icon {\n    flex-shrink: 0;\n    width: calc(var(--action-bar-item-height) - 0.75rem);\n    height: calc(var(--action-bar-item-height) - 0.75rem);\n    color: var(\n        --action-bar-item-icon-color,\n        var(--limel-action-bar-item-text-color)\n    );\n}\n\ndiv[role='separator'] {\n    width: 1px;\n    height: 1.5rem;\n    border-radius: var(--action-bar-item-height);\n    background-color: var(--limel-action-bar-item-text-color);\n    opacity: 0.2;\n\n    @media (pointer: fine) {\n        margin-right: 0.5rem;\n        margin-left: 0.5rem;\n    }\n}\n\n// 👇 Overflow menu\n\nlimel-menu {\n    --notification-badge-background-color: rgb(var(--contrast-600));\n    --notification-badge-text-color: rgb(var(--contrast-1200));\n\n    &[open] {\n        button {\n            box-shadow: var(--button-shadow-inset);\n        }\n    }\n}\n\nbutton[slot='trigger'] {\n    animation: fade-in ease-out 0.25s;\n    font-size: 0.75rem;\n    font-weight: bold;\n    transform: translate3d(0, 0, 0);\n}\n\n@keyframes fade-in {\n    0% {\n        scale: 0.8;\n        opacity: 0;\n    }\n    100% {\n        scale: 1;\n        opacity: 1;\n    }\n}\n","import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n} from '@stencil/core';\nimport { ActionBarItem } from '../../action-bar/action-bar.types';\nimport { ListSeparator } from '../../list/list-item.types';\nimport { createRandomString } from '../../../util/random-string';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../../util/make-enter-clickable';\nimport { getIconColor, getIconName } from '../../icon/get-icon-props';\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-action-bar-item',\n    shadow: false,\n    styleUrl: 'action-bar-item.scss',\n})\nexport class ActionBarButton {\n    /**\n     * Item that is placed in the action bar.\n     */\n    @Prop()\n    public item!: ActionBarItem | ListSeparator;\n\n    /**\n     * Fired when a action bar item has been clicked.\n     * @public\n     */\n    @Event()\n    public select: EventEmitter<ActionBarItem | ListSeparator>;\n\n    /**\n     * When the item is displayed in the available width,\n     * this will be `false`.\n     */\n    @Prop({ reflect: true })\n    public isVisible: boolean = true;\n\n    /**\n     * When the item is selected, this will be `true`.\n     */\n    @Prop({ reflect: true })\n    public selected: boolean = false;\n\n    @Element()\n    private host: HTMLLimelActionBarItemElement;\n\n    /**\n     * Used to attach the right tooltip to the right button\n     */\n    private tooltipId: string;\n\n    constructor() {\n        this.tooltipId = createRandomString();\n    }\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public componentDidLoad() {\n        this.triggerIconColorWarning();\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public render() {\n        if (!this.isItem(this.item) && this.item.separator) {\n            return <div role=\"separator\" />;\n        }\n\n        return (\n            <button\n                id={this.tooltipId}\n                type=\"button\"\n                onClick={this.handleClick}\n                disabled={this.isDisabled()}\n                class={{\n                    'is-selected': this.isItem(this.item) && this.item.selected,\n                }}\n            >\n                {this.renderIcon()}\n                {this.renderLabel()}\n                {this.renderTooltip()}\n            </button>\n        );\n    }\n\n    private handleClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.select.emit(this.item);\n    };\n\n    private isItem(item: ActionBarItem | ListSeparator): item is ActionBarItem {\n        return !('separator' in item);\n    }\n\n    private isDisabled() {\n        if (this.isItem(this.item) && this.item.disabled) {\n            return true;\n        }\n\n        if (!this.isVisible) {\n            return true;\n        }\n    }\n\n    private renderIcon() {\n        if (this.isItem(this.item) && !this.item.icon) {\n            return;\n        }\n\n        if ('icon' in this.item) {\n            const name = getIconName(this.item.icon);\n            const color = getIconColor(this.item.icon, this.item.iconColor);\n\n            return (\n                <limel-icon\n                    name={name}\n                    style={{\n                        '--action-bar-item-icon-color': `${color}`,\n                    }}\n                />\n            );\n        }\n    }\n\n    private renderLabel() {\n        if (!this.isItem(this.item) || this.item.iconOnly) {\n            return;\n        }\n\n        return <span class=\"text\">{this.item.text}</span>;\n    }\n\n    private renderTooltip() {\n        if (!this.isItem(this.item)) {\n            return;\n        }\n\n        if (this.item.text) {\n            return (\n                <limel-tooltip\n                    elementId={this.tooltipId}\n                    label={this.item.text}\n                    helperLabel={this.item.commandText}\n                />\n            );\n        }\n\n        if (this.item.commandText) {\n            return (\n                <limel-tooltip\n                    elementId={this.tooltipId}\n                    label={this.item.commandText}\n                />\n            );\n        }\n    }\n\n    private triggerIconColorWarning() {\n        if (this.isItem(this.item) && this.item.iconColor) {\n            /* eslint-disable-next-line no-console */\n            console.warn(\n                \"The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.\",\n            );\n        }\n    }\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { ActionBarItem } from '../../action-bar/action-bar.types';\nimport { ListSeparator } from '../../list/list-item.types';\nimport { MenuItem, OpenDirection } from '../../menu/menu.types';\nimport { LimelMenuCustomEvent } from '../../../components';\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-action-bar-overflow-menu',\n    shadow: false,\n})\nexport class ActionBarOverflowMenu {\n    /**\n     * List of the items that should be rendered in the overflow menu.\n     */\n    @Prop()\n    public items: Array<MenuItem | ListSeparator>;\n\n    /**\n     * Defines the location that the content of the overflow menu\n     * appears, in relation to its trigger.\n     * It defaults to `bottom-end`, since in normal scenarios\n     * (for example when the action bar is not floating at the bottom of the screen)\n     * this menu is the right-most item in the user interface of the component.\n     */\n    @Prop({ reflect: true })\n    public openDirection: OpenDirection = 'bottom-end';\n\n    /**\n     * Fired when an item in the action bar overflow menu has been clicked.\n     * @public\n     */\n    @Event()\n    public select: EventEmitter<ActionBarItem>;\n\n    public render() {\n        return [\n            <limel-menu\n                openDirection={this.openDirection}\n                items={this.items}\n                onSelect={this.handleSelect}\n            >\n                <button slot=\"trigger\">{this.countOverflowedItems()}</button>\n            </limel-menu>,\n        ];\n    }\n\n    private countOverflowedItems = () => {\n        return `+${this.numberOfMenuItems}`;\n    };\n\n    private handleSelect = (event: LimelMenuCustomEvent<MenuItem>) => {\n        event.stopPropagation();\n        this.select.emit(event.detail);\n    };\n\n    private get numberOfMenuItems() {\n        return this.items.filter((item) => this.isMenuItem(item)).length;\n    }\n\n    private isMenuItem(item: MenuItem | ListSeparator): item is MenuItem {\n        return !('separator' in item);\n    }\n}\n",":host(limel-text-editor-link-menu) {\n    animation: fade 0.2s ease forwards;\n    animation-delay: 0.1s; // prevents the visual glitch when the link opens\n    opacity: 0;\n\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n    padding: 0.5rem;\n    max-width: calc(100vw - 2rem);\n    border-radius: 0.5rem;\n    background-color: var(--lime-elevated-surface-background-color);\n    box-shadow: var(--shadow-depth-16);\n}\n\n.actions {\n    display: flex;\n    justify-content: end;\n    gap: 0.5rem;\n}\n\n@keyframes fade {\n    0% {\n        scale: 0.86;\n        opacity: 0;\n    }\n    100% {\n        scale: 1;\n        opacity: 1;\n    }\n}\n","import { Component, Prop, h, Event, EventEmitter, State } from '@stencil/core';\nimport { EditorTextLink } from '../prosemirror-adapter/menu/types';\nimport { Languages } from '../../date-picker/date.types';\nimport translate from '../../../global/translations';\nimport {\n    getHref,\n    hasKnownProtocol,\n    prependProtocol,\n} from '../../../util/link-helper';\nimport { LimelInputFieldCustomEvent } from '../../../components';\nimport { ENTER, ESCAPE } from '../../../util/keycodes';\n\n/**\n * This component is a menu for editing a link in the text editor.\n * It allows the user to input the text and url for the link.\n * @beta\n * @private\n */\n@Component({\n    tag: 'limel-text-editor-link-menu',\n    shadow: true,\n    styleUrl: 'editor-link-menu.scss',\n})\nexport class TextEditorLinkMenu {\n    /**\n     * The link\n     */\n    @Prop({ reflect: true })\n    public link: EditorTextLink;\n\n    /**\n     * Defines the language for translations.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    /**\n     * Open state of the link-menu dialog\n     */\n    @Prop({ reflect: true })\n    public isOpen: boolean = false;\n\n    /**\n     * Emitted when the menu is closed from inside the component.\n     * (*Not* emitted when the consumer sets the `open`-property to `false`.)\n     */\n    @Event()\n    private cancel: EventEmitter<void>;\n\n    /**\n     * Emitted when the menu is saved from inside the component.\n     */\n    @Event()\n    private save: EventEmitter<void>;\n\n    /**\n     * Emitted when the user inputs new values for the link\n     */\n    @Event()\n    private linkChange: EventEmitter<EditorTextLink>;\n\n    @State()\n    private invalidLink: boolean = false;\n\n    private textInput: HTMLLimelInputFieldElement;\n    private saveButton: HTMLLimelButtonElement;\n\n    public connectedCallback() {\n        this.setupGlobalHandlers();\n    }\n\n    public disconnectedCallback() {\n        this.teardownGlobalHandlers();\n    }\n\n    private setupGlobalHandlers() {\n        if (this.isOpen) {\n            document.addEventListener('keyup', this.handleCancel);\n        }\n    }\n\n    private teardownGlobalHandlers() {\n        document.removeEventListener('keyup', this.handleCancel);\n    }\n\n    public componentDidLoad() {\n        this.focusOnTextInput();\n    }\n\n    private focusOnTextInput() {\n        if (this.textInput) {\n            const inputField = this.textInput.shadowRoot.querySelector('input');\n            if (inputField) {\n                requestAnimationFrame(() => {\n                    inputField.focus();\n                });\n            }\n        }\n    }\n\n    public render() {\n        return [\n            <limel-input-field\n                label={this.getTranslation('editor-link-menu.text')}\n                value={this.link?.text || ''}\n                leadingIcon=\"text_cursor\"\n                onChange={this.handleLinkTitleChange}\n                onKeyDown={this.handleKeyDown}\n                ref={(el) =>\n                    (this.textInput = el as HTMLLimelInputFieldElement)\n                }\n            />,\n            <limel-input-field\n                label={this.getTranslation('editor-link-menu.link')}\n                value={this.link?.href || ''}\n                type=\"url\"\n                leadingIcon=\"-lime-text-link\"\n                trailingIcon=\"external_link\"\n                invalid={this.invalidLink}\n                onChange={this.handleLinkValueChange}\n                onAction={this.handleLinkInputAction}\n                onKeyDown={this.handleKeyDown}\n            />,\n            <div class=\"actions\">\n                <limel-button\n                    label={this.getTranslation('cancel')}\n                    onClick={this.handleCancel}\n                />\n                <limel-button\n                    primary={true}\n                    label={this.getTranslation('save')}\n                    disabled={!this.link?.href || this.invalidLink}\n                    onClick={this.handleSave}\n                    ref={(el) =>\n                        (this.saveButton = el as HTMLLimelButtonElement)\n                    }\n                    slot=\"button\"\n                />\n            </div>,\n        ];\n    }\n\n    private getTranslation = (key: string) => {\n        return translate.get(key, this.language);\n    };\n\n    private validateLink = (href: string): boolean => {\n        if (!hasKnownProtocol(href)) {\n            const formattedLink = prependProtocol(href);\n\n            return !!getHref(formattedLink);\n        }\n\n        return !!getHref(href);\n    };\n\n    private handleKeyDown = (event: KeyboardEvent) => {\n        if (event.key !== ENTER) {\n            return;\n        }\n\n        if (this.saveButton) {\n            this.saveButton.focus();\n        }\n\n        event.preventDefault();\n        if (this.link?.href && !this.invalidLink) {\n            this.handleSave(event);\n        }\n    };\n\n    private handleCancel = (event: MouseEvent | KeyboardEvent) => {\n        if (event instanceof KeyboardEvent && event.key !== ESCAPE) {\n            return;\n        }\n\n        event.stopPropagation();\n        event.preventDefault();\n        this.cancel.emit();\n    };\n\n    private handleSave = (event: MouseEvent | KeyboardEvent) => {\n        event.stopPropagation();\n\n        this.save.emit();\n    };\n\n    private handleLinkInputAction = (\n        event: LimelInputFieldCustomEvent<void>,\n    ) => {\n        window.open(this.link.href, '_blank');\n        event.stopPropagation();\n    };\n\n    private handleLinkTitleChange = (event: CustomEvent<string>) => {\n        this.emitLinkChange(event.detail, this.link?.href);\n    };\n\n    private handleLinkValueChange = (event: CustomEvent<string>) => {\n        const href = event.detail;\n        const isValid = this.validateLink(href);\n\n        this.invalidLink = !isValid;\n        this.emitLinkChange(this.link?.text, href);\n    };\n\n    private emitLinkChange = (text: string, href: string) => {\n        const newLink: EditorTextLink = {\n            text: text,\n            href: href,\n        };\n\n        this.linkChange.emit(newLink);\n    };\n}\n"],"mappings":"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"}

package/dist/types/components/portal/portal.d.ts

@@ -3,22 +3,37 @@ import { OpenDirection } from '../menu/menu.types';
  * The portal component provides a way to render children into a DOM node that
  * exist outside the DOM hierarchy of the parent component.
  *
+ * When the limel-portal component is used, it creates a new DOM node (a div element)
+ * and appends it to a parent element (by default, the body of the document).
+ * The child elements of the limel-portal are then moved from
+ * their original location in the DOM to this new div element.
+ *
+ * This technique is often used to overcome CSS stacking context issues,
+ * or to render UI elements like modals, dropdowns, tooltips, etc.,
+ * that need to visually "break out" of their container.
+ *
+ * Using this component, we ensure that the content is always rendered in the
+ * correct position, and never covers its own trigger, or another component
+ * that is opened in the stacking layer. This way, we don't need to worry about
+ * z-indexes, or other stacking context issues.
+ *
+ * :::important
  * There are some caveats when using this component
  *
- * Events might not bubble up as expected since the content is moved out to
+ * 1. Events might not bubble up as expected since the content is moved out to
  * another DOM node.
- * Any styling that is applied to content from the parent will be lost, if the
- * content is just another web compoent it will work without any issues.
- * Alternatively, use the
- * `style=""` html attribute.
- * Any component that is placed inside the container must have a style of
+ * 2. Any styling that is applied to content from the parent will be lost, if the
+ * content is just another web-component it will work without any issues.
+ * Alternatively, use the `style=""` html attribute.
+ * 3. Any component that is placed inside the container must have a style of
  * `max-height: inherit`. This ensures that its placement is calculated
  * correctly in relation to the trigger, and that it never covers its own
  * trigger.
- * When the node is moved in the DOM, `disconnectedCallback` and
+ * 4. When the node is moved in the DOM, `disconnectedCallback` and
  * `connectedCallback` will be invoked, so if `disconnectedCallback` is used
  * to do any tear-down, the appropriate setup will have to be done again on
  * `connectedCallback`.
+ * :::
  *
  * @slot - Content to put inside the portal
  * @private
@@ -42,7 +57,14 @@ export declare class Portal {
    */
   containerStyle: object;
   /**
-   * Parent element to move the content to.
+   * The `parent` property specifies the parent element where the content
+   * of the portal will be moved to.
+   * By default, it is set to `document.body`, meaning the content
+   * will be appended as a child of the body element in the DOM.
+   * If you want the content to be appended to a different element,
+   * you can specify that element by setting this property.
+   * Please note that the specified parent element should exist
+   * in the DOM at the time of rendering the portal.
    */
   parent: HTMLElement;
   /**

package/dist/types/components/text-editor/link-menu/editor-link-menu.d.ts

@@ -13,11 +13,10 @@ export declare class TextEditorLinkMenu {
   link: EditorTextLink;
   /**
    * Defines the language for translations.
-   * Will translate the translatable strings on the components.
    */
   language: Languages;
   /**
-   * Open state of the dialog
+   * Open state of the link-menu dialog
    */
   isOpen: boolean;
   /**
@@ -34,9 +33,18 @@ export declare class TextEditorLinkMenu {
    */
   private linkChange;
   private invalidLink;
+  private textInput;
+  private saveButton;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  private setupGlobalHandlers;
+  private teardownGlobalHandlers;
+  componentDidLoad(): void;
+  private focusOnTextInput;
   render(): any[];
   private getTranslation;
   private validateLink;
+  private handleKeyDown;
   private handleCancel;
   private handleSave;
   private handleLinkInputAction;

package/dist/types/components/text-editor/prosemirror-adapter/prosemirror-adapter.d.ts

@@ -36,6 +36,7 @@ export declare class ProsemirrorAdapter {
   private schema;
   private contentConverter;
   private suppressChangeEvent;
+  private actionBarElement;
   /**
    * Dispatched when a change is made to the editor
    */
@@ -47,6 +48,7 @@ export declare class ProsemirrorAdapter {
   connectedCallback(): void;
   disconnectedCallback(): void;
   render(): any[];
+  renderLinkMenu(): any;
   private setupContentConverter;
   private getActionBarItems;
   private getTranslatedItem;

package/dist/types/components.d.ts

@@ -1981,21 +1981,33 @@ export namespace Components {
     /**
      * The portal component provides a way to render children into a DOM node that
      * exist outside the DOM hierarchy of the parent component.
+     * When the limel-portal component is used, it creates a new DOM node (a div element)
+     * and appends it to a parent element (by default, the body of the document).
+     * The child elements of the limel-portal are then moved from
+     * their original location in the DOM to this new div element.
+     * This technique is often used to overcome CSS stacking context issues,
+     * or to render UI elements like modals, dropdowns, tooltips, etc.,
+     * that need to visually "break out" of their container.
+     * Using this component, we ensure that the content is always rendered in the
+     * correct position, and never covers its own trigger, or another component
+     * that is opened in the stacking layer. This way, we don't need to worry about
+     * z-indexes, or other stacking context issues.
+     * :::important
      * There are some caveats when using this component
-     * Events might not bubble up as expected since the content is moved out to
+     * 1. Events might not bubble up as expected since the content is moved out to
      * another DOM node.
-     * Any styling that is applied to content from the parent will be lost, if the
-     * content is just another web compoent it will work without any issues.
-     * Alternatively, use the
-     * `style=""` html attribute.
-     * Any component that is placed inside the container must have a style of
+     * 2. Any styling that is applied to content from the parent will be lost, if the
+     * content is just another web-component it will work without any issues.
+     * Alternatively, use the `style=""` html attribute.
+     * 3. Any component that is placed inside the container must have a style of
      * `max-height: inherit`. This ensures that its placement is calculated
      * correctly in relation to the trigger, and that it never covers its own
      * trigger.
-     * When the node is moved in the DOM, `disconnectedCallback` and
+     * 4. When the node is moved in the DOM, `disconnectedCallback` and
      * `connectedCallback` will be invoked, so if `disconnectedCallback` is used
      * to do any tear-down, the appropriate setup will have to be done again on
      * `connectedCallback`.
+     * :::
      * @private 
      * @exampleComponent limel-example-portal-basic
      */
@@ -2021,7 +2033,7 @@ export namespace Components {
          */
         "openDirection": OpenDirection;
         /**
-          * Parent element to move the content to.
+          * The `parent` property specifies the parent element where the content of the portal will be moved to. By default, it is set to `document.body`, meaning the content will be appended as a child of the body element in the DOM. If you want the content to be appended to a different element, you can specify that element by setting this property. Please note that the specified parent element should exist in the DOM at the time of rendering the portal.
          */
         "parent": HTMLElement;
         /**
@@ -2575,11 +2587,11 @@ export namespace Components {
      */
     interface LimelTextEditorLinkMenu {
         /**
-          * Open state of the dialog
+          * Open state of the link-menu dialog
          */
         "isOpen": boolean;
         /**
-          * Defines the language for translations. Will translate the translatable strings on the components.
+          * Defines the language for translations.
          */
         "language": Languages;
         /**
@@ -3840,21 +3852,33 @@ declare global {
     /**
      * The portal component provides a way to render children into a DOM node that
      * exist outside the DOM hierarchy of the parent component.
+     * When the limel-portal component is used, it creates a new DOM node (a div element)
+     * and appends it to a parent element (by default, the body of the document).
+     * The child elements of the limel-portal are then moved from
+     * their original location in the DOM to this new div element.
+     * This technique is often used to overcome CSS stacking context issues,
+     * or to render UI elements like modals, dropdowns, tooltips, etc.,
+     * that need to visually "break out" of their container.
+     * Using this component, we ensure that the content is always rendered in the
+     * correct position, and never covers its own trigger, or another component
+     * that is opened in the stacking layer. This way, we don't need to worry about
+     * z-indexes, or other stacking context issues.
+     * :::important
      * There are some caveats when using this component
-     * Events might not bubble up as expected since the content is moved out to
+     * 1. Events might not bubble up as expected since the content is moved out to
      * another DOM node.
-     * Any styling that is applied to content from the parent will be lost, if the
-     * content is just another web compoent it will work without any issues.
-     * Alternatively, use the
-     * `style=""` html attribute.
-     * Any component that is placed inside the container must have a style of
+     * 2. Any styling that is applied to content from the parent will be lost, if the
+     * content is just another web-component it will work without any issues.
+     * Alternatively, use the `style=""` html attribute.
+     * 3. Any component that is placed inside the container must have a style of
      * `max-height: inherit`. This ensures that its placement is calculated
      * correctly in relation to the trigger, and that it never covers its own
      * trigger.
-     * When the node is moved in the DOM, `disconnectedCallback` and
+     * 4. When the node is moved in the DOM, `disconnectedCallback` and
      * `connectedCallback` will be invoked, so if `disconnectedCallback` is used
      * to do any tear-down, the appropriate setup will have to be done again on
      * `connectedCallback`.
+     * :::
      * @private 
      * @exampleComponent limel-example-portal-basic
      */
@@ -6333,21 +6357,33 @@ declare namespace LocalJSX {
     /**
      * The portal component provides a way to render children into a DOM node that
      * exist outside the DOM hierarchy of the parent component.
+     * When the limel-portal component is used, it creates a new DOM node (a div element)
+     * and appends it to a parent element (by default, the body of the document).
+     * The child elements of the limel-portal are then moved from
+     * their original location in the DOM to this new div element.
+     * This technique is often used to overcome CSS stacking context issues,
+     * or to render UI elements like modals, dropdowns, tooltips, etc.,
+     * that need to visually "break out" of their container.
+     * Using this component, we ensure that the content is always rendered in the
+     * correct position, and never covers its own trigger, or another component
+     * that is opened in the stacking layer. This way, we don't need to worry about
+     * z-indexes, or other stacking context issues.
+     * :::important
      * There are some caveats when using this component
-     * Events might not bubble up as expected since the content is moved out to
+     * 1. Events might not bubble up as expected since the content is moved out to
      * another DOM node.
-     * Any styling that is applied to content from the parent will be lost, if the
-     * content is just another web compoent it will work without any issues.
-     * Alternatively, use the
-     * `style=""` html attribute.
-     * Any component that is placed inside the container must have a style of
+     * 2. Any styling that is applied to content from the parent will be lost, if the
+     * content is just another web-component it will work without any issues.
+     * Alternatively, use the `style=""` html attribute.
+     * 3. Any component that is placed inside the container must have a style of
      * `max-height: inherit`. This ensures that its placement is calculated
      * correctly in relation to the trigger, and that it never covers its own
      * trigger.
-     * When the node is moved in the DOM, `disconnectedCallback` and
+     * 4. When the node is moved in the DOM, `disconnectedCallback` and
      * `connectedCallback` will be invoked, so if `disconnectedCallback` is used
      * to do any tear-down, the appropriate setup will have to be done again on
      * `connectedCallback`.
+     * :::
      * @private 
      * @exampleComponent limel-example-portal-basic
      */
@@ -6373,7 +6409,7 @@ declare namespace LocalJSX {
          */
         "openDirection"?: OpenDirection;
         /**
-          * Parent element to move the content to.
+          * The `parent` property specifies the parent element where the content of the portal will be moved to. By default, it is set to `document.body`, meaning the content will be appended as a child of the body element in the DOM. If you want the content to be appended to a different element, you can specify that element by setting this property. Please note that the specified parent element should exist in the DOM at the time of rendering the portal.
          */
         "parent"?: HTMLElement;
         /**
@@ -6999,11 +7035,11 @@ declare namespace LocalJSX {
      */
     interface LimelTextEditorLinkMenu {
         /**
-          * Open state of the dialog
+          * Open state of the link-menu dialog
          */
         "isOpen"?: boolean;
         /**
-          * Defines the language for translations. Will translate the translatable strings on the components.
+          * Defines the language for translations.
          */
         "language"?: Languages;
         /**
@@ -7939,21 +7975,33 @@ declare module "@stencil/core" {
             /**
              * The portal component provides a way to render children into a DOM node that
              * exist outside the DOM hierarchy of the parent component.
+             * When the limel-portal component is used, it creates a new DOM node (a div element)
+             * and appends it to a parent element (by default, the body of the document).
+             * The child elements of the limel-portal are then moved from
+             * their original location in the DOM to this new div element.
+             * This technique is often used to overcome CSS stacking context issues,
+             * or to render UI elements like modals, dropdowns, tooltips, etc.,
+             * that need to visually "break out" of their container.
+             * Using this component, we ensure that the content is always rendered in the
+             * correct position, and never covers its own trigger, or another component
+             * that is opened in the stacking layer. This way, we don't need to worry about
+             * z-indexes, or other stacking context issues.
+             * :::important
              * There are some caveats when using this component
-             * Events might not bubble up as expected since the content is moved out to
+             * 1. Events might not bubble up as expected since the content is moved out to
              * another DOM node.
-             * Any styling that is applied to content from the parent will be lost, if the
-             * content is just another web compoent it will work without any issues.
-             * Alternatively, use the
-             * `style=""` html attribute.
-             * Any component that is placed inside the container must have a style of
+             * 2. Any styling that is applied to content from the parent will be lost, if the
+             * content is just another web-component it will work without any issues.
+             * Alternatively, use the `style=""` html attribute.
+             * 3. Any component that is placed inside the container must have a style of
              * `max-height: inherit`. This ensures that its placement is calculated
              * correctly in relation to the trigger, and that it never covers its own
              * trigger.
-             * When the node is moved in the DOM, `disconnectedCallback` and
+             * 4. When the node is moved in the DOM, `disconnectedCallback` and
              * `connectedCallback` will be invoked, so if `disconnectedCallback` is used
              * to do any tear-down, the appropriate setup will have to be done again on
              * `connectedCallback`.
+             * :::
              * @private 
              * @exampleComponent limel-example-portal-basic
              */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "37.49.0",
+  "version": "37.49.2",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",