@limetech/lime-elements 37.54.2 → 37.55.0

package/dist/lime-elements/p-200b7739.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["textEditorCss","TextEditor","constructor","hostRef","this","renderHelperLine","helperText","h","helperTextId","invalid","isInvalid","readonly","handleChange","event","stopPropagation","change","emit","detail","createRandomString","editorId","render","Host","class","renderLabel","renderEditor","value","id","renderPlaceholder","placeholder","contentType","onChange","tabindex","disabled","language","label","htmlFor"],"sources":["./src/components/text-editor/text-editor.scss?tag=limel-text-editor&encapsulation=shadow","./src/components/text-editor/text-editor.tsx"],"sourcesContent":["@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins.scss';\n\n/**\n * @prop --text-editor-max-height: the tallest height the text editor can become when auto-resizing itself. Defaults to `calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)) - 4rem)`.\n * @prop --text-editor-fade-out-background-color: the color of the fade-out effect at the top and bottom of the text editor, when the text-editor is in readonly state. Defaults to rgb(var(--contrast-100)).\n */\n\n@include shared_input-select-picker.lime-looks-like-input-value;\n.lime-looks-like-input-value {\n    padding: var(--limel-text-editor-padding);\n}\n\n* {\n    box-sizing: border-box;\n}\n\n:host(limel-text-editor) {\n    --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color};\n    --limel-text-editor-background-color: #{shared_input-select-picker.$background-color-normal};\n    --limel-text-editor-label-color: #{shared_input-select-picker.$label-color};\n    --limel-text-editor-padding: 0.75rem 1rem;\n    position: relative;\n    isolation: isolate;\n    display: flex;\n    flex-direction: column;\n\n    width: 100%;\n    min-width: 5rem;\n    min-height: 5rem;\n    height: 100%;\n    max-height: var(\n        --text-editor-max-height,\n        calc(\n            100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)) -\n                4rem\n        )\n    );\n}\n\n:host(limel-text-editor:hover) {\n    --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color--hovered};\n}\n\n:host(limel-text-editor:focus-within) {\n    --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color--focused};\n}\n\n:host(limel-text-editor[disabled]:not([disabled='false'])) {\n    @include shared_input-select-picker.looks-disabled;\n\n    limel-prosemirror-adapter {\n        pointer-events: none;\n    }\n}\n\n:host(limel-text-editor[invalid]:not([invalid='false'])) {\n    --limel-text-editor-outline-color: var(--lime-error-text-color);\n}\n\n:host(limel-text-editor[readonly]:not([readonly='false'])) {\n    --limel-text-editor-placeholder-top: 0;\n    --limel-text-editor-outline-color: transparent;\n    --limel-text-editor-background-color: transparent;\n\n    limel-markdown {\n        display: block;\n        padding: var(--limel-text-editor-padding);\n    }\n}\n\n.content-wrapper {\n    overflow-y: auto;\n\n    &.fade-out-effect:after {\n        pointer-events: none;\n        content: '';\n        display: block;\n        position: absolute;\n        z-index: 1;\n        height: 1.75rem;\n        width: 100%;\n        top: 0;\n        background: linear-gradient(\n            var(\n                --text-editor-fade-out-background-color,\n                rgb(var(--contrast-100))\n            ),\n            transparent\n        );\n    }\n\n    &.fade-out-effect:before {\n        pointer-events: none;\n        content: '';\n        display: block;\n        position: absolute;\n        z-index: 1;\n        height: 2rem;\n        width: 100%;\n        bottom: -0.25rem;\n        background: linear-gradient(\n            transparent,\n            var(\n                --text-editor-fade-out-background-color,\n                rgb(var(--contrast-100))\n            )\n        );\n    }\n}\n\n.notched-outline {\n    transition: bottom\n        var(--limel-h-l-grid-template-rows-transition-speed, 0.46s)\n        cubic-bezier(1, 0.09, 0, 0.89);\n    pointer-events: none;\n    position: absolute;\n    inset: 0;\n    bottom: var(--limel-text-editor-notched-outline-bottom, 0);\n\n    display: flex;\n    background-color: var(--limel-text-editor-background-color);\n}\n\n.leading-outline,\n.notch,\n.trailing-outline {\n    transition: border-color 0.2s ease;\n    border-width: 1px;\n    border-style: solid;\n    border-color: var(--limel-text-editor-outline-color);\n}\n\n.leading-outline {\n    flex-shrink: 0;\n    width: 0.75rem;\n    border-right-width: 0;\n    border-top-left-radius: 0.25rem;\n    border-bottom-left-radius: 0.25rem;\n}\n\n.notch {\n    flex-shrink: 0;\n\n    position: relative;\n    z-index: 2;\n\n    border-top-width: 0;\n    border-right-width: 0;\n    border-left-width: 0;\n\n    max-width: calc(100% - 1.5rem);\n}\n\n.trailing-outline {\n    flex-grow: 1;\n    border-left-width: 0;\n    border-top-right-radius: 0.25rem;\n    border-bottom-right-radius: 0.25rem;\n}\n\nlabel {\n    transform: translateY(-50%);\n\n    @include mixins.truncate-text;\n    display: block;\n    padding: 0 0.25rem;\n\n    color: var(--limel-text-editor-label-color);\n    font-size: 0.65rem; // `10.4px` similar to MDC's floating label\n    letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);\n\n    :host(limel-text-editor[required]) & {\n        &::after {\n            content: '*';\n        }\n    }\n}\n\n.placeholder {\n    @include mixins.truncate-text;\n    pointer-events: none;\n    position: absolute;\n    top: var(--limel-text-editor-placeholder-top, 2.25rem);\n    left: 0;\n    right: 0;\n\n    padding: var(--limel-text-editor-padding);\n    font-style: italic;\n    font-size: 0.875rem;\n    color: shared_input-select-picker.$input-placeholder-color;\n}\n\nlimel-prosemirror-adapter {\n    flex-grow: 1;\n\n    min-width: 0;\n    min-height: 0;\n    height: 100%;\n    overflow: hidden auto;\n}\n\n@include mixins.hide-helper-line-when-not-needed(limel-text-editor);\n:host(limel-text-editor.has-helper-text:focus-within),\n:host(limel-text-editor.has-helper-text[invalid]:not([invalid='false'])) {\n    .notched-outline {\n        --limel-text-editor-notched-outline-bottom: 1rem;\n    }\n}\n\n:host(limel-text-editor[allow-resize]) {\n    limel-prosemirror-adapter {\n        resize: vertical;\n    }\n}\n","import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { Languages } from '../date-picker/date.types';\nimport { createRandomString } from '../../util/random-string';\n/**\n * A rich text editor that offers a rich text editing experience with markdown support,\n * in the sense that you can easily type markdown syntax and see the rendered\n * result as rich text in real-time. For instance, you can type `# Hello, world!`\n * and see it directly turning to a heading 1 (an `<h1>` HTML element).\n *\n * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>\n * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.\n *\n * @exampleComponent limel-example-text-editor-basic\n * @exampleComponent limel-example-text-editor-as-form-component\n * @exampleComponent limel-example-text-editor-with-markdown\n * @exampleComponent limel-example-text-editor-with-html\n * @exampleComponent limel-example-text-editor-allow-resize\n * @exampleComponent limel-example-text-editor-size\n * @exampleComponent limel-example-text-editor-composite\n * @beta\n */\n@Component({\n    tag: 'limel-text-editor',\n    shadow: true,\n    styleUrl: 'text-editor.scss',\n})\nexport class TextEditor implements FormComponent<string> {\n    /** The type of content that the editor should handle and emit, defaults to `markdown`\n     *\n     * Assumed to be set only once, so not reactive to changes\n     */\n    @Prop()\n    public contentType: 'markdown' | 'html' = 'markdown';\n\n    /**\n     * Defines the language for translations.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    /**\n     * Set to `true` to disable the field.\n     * Use `disabled` to indicate that the field can normally be interacted\n     * with, but is currently disabled. This tells the user that if certain\n     * requirements are met, the field may become enabled again.\n     */\n    @Prop({ reflect: true })\n    public disabled?: boolean = false;\n\n    /**\n     * Set to `true` to make the component read-only.\n     * Use `readonly` when the field is only there to present the data it holds,\n     * and will not become possible for the current user to edit.\n     * :::note\n     * Consider that it might be better to use `limel-markdown`\n     * instead of `limel-text-editor` when the goal is visualizing data.\n     * :::\n     */\n    @Prop({ reflect: true })\n    public readonly?: boolean = false;\n\n    /**\n     * Optional helper text to display below the input field when it has focus\n     */\n    @Prop({ reflect: true })\n    public helperText?: string;\n\n    /**\n     * The placeholder text shown inside the input field,\n     * when the field is empty.\n     */\n    @Prop({ reflect: true })\n    public placeholder?: string;\n\n    /**\n     * The label of the editor\n     */\n    @Prop({ reflect: true })\n    public label?: string;\n\n    /**\n     * Set to `true` to indicate that the current value of the editor is\n     * invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid?: boolean = false;\n\n    /**\n     * Description of the text inside the editor as markdown\n     */\n    @Prop({ reflect: true })\n    public value: string;\n\n    /**\n     * Set to `true` to indicate that the field is required.\n     *\n     * :::important\n     * An empty but required field is not automatically considered invalid.\n     * You must make sure to check the validity of the field on your own,\n     * and properly handle the `invalid` state.\n     * :::\n     */\n    @Prop({ reflect: true })\n    public required?: boolean = false;\n\n    /**\n     * Set to `true` to allow the user to vertically resize the editor.\n     * Set to `false` to disable the resize functionality.\n     */\n    @Prop({ reflect: true })\n    public allowResize: boolean = true;\n\n    /**\n     * Dispatched when a change is made to the editor\n     */\n    @Event()\n    public change: EventEmitter<string>;\n\n    private helperTextId: string;\n    private editorId: string;\n\n    public constructor() {\n        this.helperTextId = createRandomString();\n        this.editorId = createRandomString();\n    }\n\n    public render() {\n        return (\n            <Host\n                class={{\n                    'has-helper-text': !!this.helperText,\n                }}\n            >\n                <span class=\"notched-outline\">\n                    <span class=\"leading-outline\" />\n                    {this.renderLabel()}\n                    <span class=\"trailing-outline\" />\n                </span>\n                {this.renderEditor()}\n            </Host>\n        );\n    }\n\n    private renderEditor() {\n        if (this.readonly && !this.value) {\n            return [\n                <span class=\"lime-looks-like-input-value\">–</span>,\n                this.renderHelperLine(),\n            ];\n        }\n\n        if (this.readonly) {\n            return [\n                <div\n                    class={\n                        this.readonly ? 'content-wrapper fade-out-effect' : ''\n                    }\n                >\n                    <limel-markdown\n                        value={this.value}\n                        aria-controls={this.helperTextId}\n                        id={this.editorId}\n                    />\n                </div>,\n                this.renderPlaceholder(),\n                this.renderHelperLine(),\n            ];\n        }\n\n        return [\n            <limel-prosemirror-adapter\n                aria-placeholder={this.placeholder}\n                contentType={this.contentType}\n                onChange={this.handleChange}\n                value={this.value}\n                aria-controls={this.helperTextId}\n                id={this.editorId}\n                tabindex={this.disabled ? -1 : 0}\n                aria-disabled={this.disabled}\n                language={this.language}\n            />,\n            this.renderPlaceholder(),\n            this.renderHelperLine(),\n        ];\n    }\n\n    private renderLabel() {\n        if (!this.label) {\n            return;\n        }\n\n        return (\n            <span class=\"notch\">\n                <label htmlFor={this.editorId}>{this.label}</label>\n            </span>\n        );\n    }\n\n    private renderPlaceholder() {\n        if (!this.placeholder || this.value) {\n            return;\n        }\n\n        return (\n            <span class=\"placeholder\" aria-hidden=\"true\">\n                {this.placeholder}\n            </span>\n        );\n    }\n\n    private renderHelperLine = () => {\n        if (!this.helperText) {\n            return;\n        }\n\n        return (\n            <limel-helper-line\n                helperText={this.helperText}\n                helperTextId={this.helperTextId}\n                invalid={this.isInvalid()}\n            />\n        );\n    };\n\n    private isInvalid = () => {\n        if (this.readonly) {\n            // A readonly field can never be invalid.\n            return false;\n        }\n\n        if (this.invalid) {\n            return true;\n        }\n    };\n\n    private handleChange = () => (event: CustomEvent<string>) => {\n        event.stopPropagation();\n        this.change.emit(event.detail);\n    };\n}\n"],"mappings":"6FAAA,MAAMA,EAAgB,2zL,MC2BTC,EAAU,MA+FnBC,YAAAC,G,yCAyFQC,KAAAC,iBAAmB,KACvB,IAAKD,KAAKE,WAAY,CAClB,M,CAGJ,OACIC,EAAA,qBACID,WAAYF,KAAKE,WACjBE,aAAcJ,KAAKI,aACnBC,QAASL,KAAKM,aAChB,EAIFN,KAAAM,UAAY,KAChB,GAAIN,KAAKO,SAAU,CAEf,OAAO,K,CAGX,GAAIP,KAAKK,QAAS,CACd,OAAO,I,GAIPL,KAAAQ,aAAe,IAAOC,IAC1BA,EAAMC,kBACNV,KAAKW,OAAOC,KAAKH,EAAMI,OAAO,E,iBA7MQ,W,cAMb,K,cASD,M,cAYA,M,uFA0BD,M,mCAkBC,M,iBAOE,KAY1Bb,KAAKI,aAAeU,IACpBd,KAAKe,SAAWD,G,CAGbE,SACH,OACIb,EAACc,EAAI,CACDC,MAAO,CACH,oBAAqBlB,KAAKE,aAG9BC,EAAA,QAAMe,MAAM,mBACRf,EAAA,QAAMe,MAAM,oBACXlB,KAAKmB,cACNhB,EAAA,QAAMe,MAAM,sBAEflB,KAAKoB,e,CAKVA,eACJ,GAAIpB,KAAKO,WAAaP,KAAKqB,MAAO,CAC9B,MAAO,CACHlB,EAAA,QAAMe,MAAM,+BAA6B,KACzClB,KAAKC,mB,CAIb,GAAID,KAAKO,SAAU,CACf,MAAO,CACHJ,EAAA,OACIe,MACIlB,KAAKO,SAAW,kCAAoC,IAGxDJ,EAAA,kBACIkB,MAAOrB,KAAKqB,MAAK,gBACFrB,KAAKI,aACpBkB,GAAItB,KAAKe,YAGjBf,KAAKuB,oBACLvB,KAAKC,mB,CAIb,MAAO,CACHE,EAAA,gDACsBH,KAAKwB,YACvBC,YAAazB,KAAKyB,YAClBC,SAAU1B,KAAKQ,aACfa,MAAOrB,KAAKqB,MAAK,gBACFrB,KAAKI,aACpBkB,GAAItB,KAAKe,SACTY,SAAU3B,KAAK4B,UAAY,EAAI,EAAC,gBACjB5B,KAAK4B,SACpBC,SAAU7B,KAAK6B,WAEnB7B,KAAKuB,oBACLvB,KAAKC,mB,CAILkB,cACJ,IAAKnB,KAAK8B,MAAO,CACb,M,CAGJ,OACI3B,EAAA,QAAMe,MAAM,SACRf,EAAA,SAAO4B,QAAS/B,KAAKe,UAAWf,KAAK8B,O,CAKzCP,oBACJ,IAAKvB,KAAKwB,aAAexB,KAAKqB,MAAO,CACjC,M,CAGJ,OACIlB,EAAA,QAAMe,MAAM,cAAa,cAAa,QACjClB,KAAKwB,Y"}

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

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as i,H as o}from"./p-443111b3.js";const r='@charset "UTF-8";:host(limel-split-button.has-menu){--button-padding-right:2rem;--button-padding-left:1rem}:host(limel-split-button){display:inline-flex;isolation:isolate}:host(limel-split-button) *{box-sizing:border-box}limel-button{width:100%}limel-menu{display:flex;justify-content:flex-end;position:relative;z-index:1;padding:0.125rem;margin-left:calc(var(--button-padding-right) * -1);width:var(--button-padding-right)}limel-menu:before{transition:background-color 0.5s ease;content:"";position:absolute;inset:0.375rem auto 0.375rem 0.6875rem;width:1px;background-color:currentColor;opacity:0.2}limel-menu:not([disabled]){color:var(--mdc-theme-primary, rgb(var(--color-teal-default)))}limel-menu:not([disabled]).primary{color:var(--mdc-theme-on-primary, rgb(var(--color-white)))}limel-menu[disabled]{color:rgba(var(--contrast-1600), 0.37)}limel-menu:hover:before,limel-menu:focus-within:before{background-color:transparent}.menu-trigger{all:unset;text-align:center;font-weight:bold;border-radius:0.125rem;height:100%;width:1rem}.menu-trigger: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:"inherit";background-color:transparent;cursor:pointer}.menu-trigger:not(:disabled):hover{color:"inherit";background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.menu-trigger:not(:disabled):active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.menu-trigger:not(:disabled):focus{outline:none}.menu-trigger:not(:disabled):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.menu-trigger:not(:disabled):focus-visible,.menu-trigger:not(:disabled):hover{background-color:rgb(var(--color-white), 0.1)}.menu-trigger:before{content:"";position:absolute;inset:-0.25rem;z-index:-1}';const s=class{constructor(o){e(this,o);this.select=t(this,"select",7);this.renderMenu=()=>{if(!this.items.length){return}return i("limel-menu",{class:{primary:this.primary},disabled:this.disabled||this.loading,items:this.items,openDirection:"bottom"},i("button",{class:"menu-trigger",slot:"trigger",disabled:this.disabled},"⋮"))};this.filterClickWhenDisabled=e=>{if(this.disabled){e.preventDefault()}};this.label=undefined;this.primary=false;this.icon=undefined;this.disabled=false;this.loading=false;this.loadingFailed=false;this.items=[]}render(){return i(o,{class:{"has-menu":!!this.items.length},onClick:this.filterClickWhenDisabled},i("limel-button",{label:this.label,primary:this.primary,icon:this.icon,disabled:this.disabled,loading:this.loading,loadingFailed:this.loadingFailed}),this.renderMenu())}static get delegatesFocus(){return true}};s.style=r;export{s as limel_split_button};
+//# sourceMappingURL=p-ab6eab16.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["splitButtonCss","SplitButton","this","renderMenu","items","length","h","class","primary","disabled","loading","openDirection","slot","filterClickWhenDisabled","e","preventDefault","render","Host","onClick","label","icon","loadingFailed"],"sources":["./src/components/split-button/split-button.scss?tag=limel-split-button&encapsulation=shadow","./src/components/split-button/split-button.tsx"],"sourcesContent":["@import '../../style/mixins';\n\n:host(limel-split-button.has-menu) {\n    --button-padding-right: 2rem;\n    --button-padding-left: 1rem;\n}\n\n:host(limel-split-button) {\n    display: inline-flex;\n    isolation: isolate;\n\n    * {\n        box-sizing: border-box;\n    }\n}\n\nlimel-button {\n    width: 100%;\n}\n\n$distance-around-trigger: 0.125rem;\n\nlimel-menu {\n    display: flex;\n    justify-content: flex-end;\n    position: relative;\n    z-index: 1;\n\n    padding: $distance-around-trigger;\n    margin-left: calc(var(--button-padding-right) * -1);\n    width: var(--button-padding-right);\n\n    &:before {\n        transition: background-color 0.5s ease;\n        content: '';\n        position: absolute;\n        inset: 0.375rem auto 0.375rem 0.6875rem;\n        width: 1px;\n        background-color: currentColor;\n\n        opacity: 0.2;\n    }\n\n    &:not([disabled]) {\n        color: var(\n            --mdc-theme-primary,\n            rgb(var(--color-teal-default))\n        ); // similar to limel-button text\n\n        &.primary {\n            color: var(\n                --mdc-theme-on-primary,\n                rgb(var(--color-white))\n            ); // similar to limel-button text\n        }\n    }\n\n    &[disabled] {\n        color: rgba(var(--contrast-1600), 0.37); // similar to limel-button text\n    }\n\n    &:hover,\n    &:focus-within {\n        &:before {\n            background-color: transparent;\n        }\n    }\n}\n\n.menu-trigger {\n    all: unset;\n\n    text-align: center;\n    font-weight: bold;\n\n    border-radius: 0.125rem;\n    height: 100%;\n    width: 1rem;\n\n    &:not(:disabled) {\n        @include is-flat-clickable(\n            $color: 'inherit',\n            $color--hovered: 'inherit'\n        );\n        @include visualize-keyboard-focus();\n        cursor: pointer;\n\n        &:focus-visible,\n        &:hover {\n            background-color: rgb(var(--color-white), 0.1);\n        }\n    }\n\n    &:before {\n        // prevents unintentionally activating the default action,\n        // by clicking on the edge of menu trigger,\n        // which would be activating the default onClick action\n        // on `limel-button`.\n        content: '';\n        position: absolute;\n        inset: -$distance-around-trigger * 2;\n        z-index: -1;\n    }\n}\n","import { Component, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { ListSeparator } from '../list/list-item.types';\nimport { MenuItem } from '../menu/menu.types';\n\n/**\n * A split button is a button with two components:\n * a button and a side-menu attached to it.\n *\n * Clicking on the button runs a default action,\n * and clicking on the arrow opens up a list of other possible actions.\n *\n * :::warning\n * - Never use a split button for navigation purposes, such as going to next page.\n * The button should only be used for performing commands!\n * - Never use this component instead of a Select or Menu component!\n * :::\n *\n * @exampleComponent limel-example-split-button-basic\n * @exampleComponent limel-example-split-button-loading\n * @exampleComponent limel-example-split-button-repeat-default-command\n */\n@Component({\n    tag: 'limel-split-button',\n    shadow: { delegatesFocus: true },\n    styleUrl: 'split-button.scss',\n})\nexport class SplitButton {\n    /**\n     * The text to show on the default action part of the button.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Set to `true` to make the button primary.\n     */\n    @Prop({ reflect: true })\n    public primary = false;\n\n    /**\n     * Set icon for the button\n     */\n    @Prop({ reflect: true })\n    public icon: string;\n\n    /**\n     * Set to `true` to disable the button.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Set to `true` to put the button in the `loading` state.\n     * This also disables the button.\n     */\n    @Prop({ reflect: true })\n    public loading = false;\n\n    /**\n     * Set to `true` to indicate failure instead of success when the button is\n     * no longer in the `loading` state.\n     */\n    @Prop({ reflect: true })\n    public loadingFailed = false;\n\n    /**\n     * A list of items and separators to show in the menu.\n     */\n    @Prop()\n    public items: Array<MenuItem | ListSeparator> = [];\n\n    /**\n     * Is emitted when a menu item is selected.\n     */\n    @Event()\n    public select: EventEmitter<MenuItem>;\n\n    render() {\n        return (\n            <Host\n                class={{\n                    'has-menu': !!this.items.length,\n                }}\n                onClick={this.filterClickWhenDisabled}\n            >\n                <limel-button\n                    label={this.label}\n                    primary={this.primary}\n                    icon={this.icon}\n                    disabled={this.disabled}\n                    loading={this.loading}\n                    loadingFailed={this.loadingFailed}\n                />\n                {this.renderMenu()}\n            </Host>\n        );\n    }\n\n    private renderMenu = () => {\n        if (!this.items.length) {\n            return;\n        }\n\n        return (\n            <limel-menu\n                class={{\n                    primary: this.primary,\n                }}\n                disabled={this.disabled || this.loading}\n                items={this.items}\n                openDirection=\"bottom\"\n            >\n                <button\n                    class=\"menu-trigger\"\n                    slot=\"trigger\"\n                    disabled={this.disabled}\n                >\n                    ⋮\n                </button>\n            </limel-menu>\n        );\n    };\n\n    private filterClickWhenDisabled = (e) => {\n        if (this.disabled) {\n            e.preventDefault();\n        }\n    };\n}\n"],"mappings":"yDAAA,MAAMA,EAAiB,8zD,MC0BVC,EAAW,M,wDAwEZC,KAAAC,WAAa,KACjB,IAAKD,KAAKE,MAAMC,OAAQ,CACpB,M,CAGJ,OACIC,EAAA,cACIC,MAAO,CACHC,QAASN,KAAKM,SAElBC,SAAUP,KAAKO,UAAYP,KAAKQ,QAChCN,MAAOF,KAAKE,MACZO,cAAc,UAEdL,EAAA,UACIC,MAAM,eACNK,KAAK,UACLH,SAAUP,KAAKO,UAAQ,KAIlB,EAIbP,KAAAW,wBAA2BC,IAC/B,GAAIZ,KAAKO,SAAU,CACfK,EAAEC,gB,qCAxFO,M,kCAYC,M,aAOD,M,mBAOM,M,WAMyB,E,CAQhDC,SACI,OACIV,EAACW,EAAI,CACDV,MAAO,CACH,aAAcL,KAAKE,MAAMC,QAE7Ba,QAAShB,KAAKW,yBAEdP,EAAA,gBACIa,MAAOjB,KAAKiB,MACZX,QAASN,KAAKM,QACdY,KAAMlB,KAAKkB,KACXX,SAAUP,KAAKO,SACfC,QAASR,KAAKQ,QACdW,cAAenB,KAAKmB,gBAEvBnB,KAAKC,a"}

package/dist/types/components/split-button/split-button.d.ts

@@ -15,6 +15,7 @@ import { MenuItem } from '../menu/menu.types';
  * :::
  *
  * @exampleComponent limel-example-split-button-basic
+ * @exampleComponent limel-example-split-button-loading
  * @exampleComponent limel-example-split-button-repeat-default-command
  */
 export declare class SplitButton {
@@ -34,6 +35,16 @@ export declare class SplitButton {
    * Set to `true` to disable the button.
    */
   disabled: boolean;
+  /**
+   * Set to `true` to put the button in the `loading` state.
+   * This also disables the button.
+   */
+  loading: boolean;
+  /**
+   * Set to `true` to indicate failure instead of success when the button is
+   * no longer in the `loading` state.
+   */
+  loadingFailed: boolean;
   /**
    * A list of items and separators to show in the menu.
    */

package/dist/types/components.d.ts

@@ -2322,6 +2322,7 @@ export namespace Components {
      * - Never use this component instead of a Select or Menu component!
      * :::
      * @exampleComponent limel-example-split-button-basic
+     * @exampleComponent limel-example-split-button-loading
      * @exampleComponent limel-example-split-button-repeat-default-command
      */
     interface LimelSplitButton {
@@ -2341,6 +2342,14 @@ export namespace Components {
           * The text to show on the default action part of the button.
          */
         "label": string;
+        /**
+          * Set to `true` to put the button in the `loading` state. This also disables the button.
+         */
+        "loading": boolean;
+        /**
+          * Set to `true` to indicate failure instead of success when the button is no longer in the `loading` state.
+         */
+        "loadingFailed": boolean;
         /**
           * Set to `true` to make the button primary.
          */
@@ -4024,6 +4033,7 @@ declare global {
      * - Never use this component instead of a Select or Menu component!
      * :::
      * @exampleComponent limel-example-split-button-basic
+     * @exampleComponent limel-example-split-button-loading
      * @exampleComponent limel-example-split-button-repeat-default-command
      */
     interface HTMLLimelSplitButtonElement extends Components.LimelSplitButton, HTMLStencilElement {
@@ -6720,6 +6730,7 @@ declare namespace LocalJSX {
      * - Never use this component instead of a Select or Menu component!
      * :::
      * @exampleComponent limel-example-split-button-basic
+     * @exampleComponent limel-example-split-button-loading
      * @exampleComponent limel-example-split-button-repeat-default-command
      */
     interface LimelSplitButton {
@@ -6739,6 +6750,14 @@ declare namespace LocalJSX {
           * The text to show on the default action part of the button.
          */
         "label"?: string;
+        /**
+          * Set to `true` to put the button in the `loading` state. This also disables the button.
+         */
+        "loading"?: boolean;
+        /**
+          * Set to `true` to indicate failure instead of success when the button is no longer in the `loading` state.
+         */
+        "loadingFailed"?: boolean;
         /**
           * Is emitted when a menu item is selected.
          */
@@ -8100,6 +8119,7 @@ declare module "@stencil/core" {
              * - Never use this component instead of a Select or Menu component!
              * :::
              * @exampleComponent limel-example-split-button-basic
+             * @exampleComponent limel-example-split-button-loading
              * @exampleComponent limel-example-split-button-repeat-default-command
              */
             "limel-split-button": LocalJSX.LimelSplitButton & JSXBase.HTMLAttributes<HTMLLimelSplitButtonElement>;

package/package.json

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

package/dist/lime-elements/p-52269a69.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as r,H as i}from"./p-443111b3.js";import{c as o}from"./p-3ccdc4a3.js";const l='@charset "UTF-8";:host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}.lime-looks-like-input-value{line-height:1.75rem;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:rgba(var(--contrast-1400), 1);font-size:0.875rem;font-weight:400;letter-spacing:0.009375em}.mdc-text-field--disabled .lime-looks-like-input-value{cursor:not-allowed;opacity:0.4}.lime-looks-like-input-value{padding:var(--limel-text-editor-padding)}*{box-sizing:border-box}:host(limel-text-editor){--limel-text-editor-outline-color:rgba(var(--contrast-700), 0.65);--limel-text-editor-background-color:rgba(var(--contrast-200), 0.5);--limel-text-editor-label-color:rgba(var(--contrast-1200), 1);--limel-text-editor-padding:0.75rem 1rem;position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;min-width:5rem;min-height:5rem;height:100%;max-height:var(--text-editor-max-height, calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)) - 4rem))}:host(limel-text-editor:hover){--limel-text-editor-outline-color:rgba(var(--contrast-700), 1)}:host(limel-text-editor:focus-within){--limel-text-editor-outline-color:var(--mdc-theme-primary)}:host(limel-text-editor[disabled]:not([disabled=false])){cursor:not-allowed;opacity:0.4}:host(limel-text-editor[disabled]:not([disabled=false])) limel-prosemirror-adapter{pointer-events:none}:host(limel-text-editor[invalid]:not([invalid=false])){--limel-text-editor-outline-color:var(--lime-error-text-color)}:host(limel-text-editor[readonly]:not([readonly=false])){--limel-text-editor-placeholder-top:0;--limel-text-editor-outline-color:transparent;--limel-text-editor-background-color:transparent}:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown{display:block;padding:var(--limel-text-editor-padding)}.notched-outline{transition:bottom var(--limel-h-l-grid-template-rows-transition-speed, 0.46s) cubic-bezier(1, 0.09, 0, 0.89);pointer-events:none;position:absolute;inset:0;bottom:var(--limel-text-editor-notched-outline-bottom, 0);display:flex;background-color:var(--limel-text-editor-background-color)}.leading-outline,.notch,.trailing-outline{transition:border-color 0.2s ease;border-width:1px;border-style:solid;border-color:var(--limel-text-editor-outline-color)}.leading-outline{flex-shrink:0;width:0.75rem;border-right-width:0;border-top-left-radius:0.25rem;border-bottom-left-radius:0.25rem}.notch{flex-shrink:0;position:relative;z-index:2;border-top-width:0;border-right-width:0;border-left-width:0;max-width:calc(100% - 1.5rem)}.trailing-outline{flex-grow:1;border-left-width:0;border-top-right-radius:0.25rem;border-bottom-right-radius:0.25rem}label{transform:translateY(-50%);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;padding:0 0.25rem;color:var(--limel-text-editor-label-color);font-size:0.65rem;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em)}:host(limel-text-editor[required]) label::after{content:"*"}.placeholder{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;position:absolute;top:var(--limel-text-editor-placeholder-top, 2.25rem);left:0;right:0;padding:var(--limel-text-editor-padding);font-style:italic;font-size:0.875rem;color:rgb(var(--contrast-900))}limel-prosemirror-adapter{flex-grow:1;min-width:0;min-height:0;height:100%;overflow:hidden auto}:host(limel-text-editor:focus),:host(limel-text-editor:focus-visible),:host(limel-text-editor:focus-within),:host(limel-text-editor[invalid]:not([invalid=false])),:host(limel-text-editor[invalid=true]){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-text-editor){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-text-editor:focus) limel-helper-line,:host(limel-text-editor:focus-visible) limel-helper-line,:host(limel-text-editor:focus-within) limel-helper-line,:host(limel-text-editor:hover) limel-helper-line{will-change:grid-template-rows}:host(limel-text-editor.has-helper-text:focus-within) .notched-outline,:host(limel-text-editor.has-helper-text[invalid]:not([invalid=false])) .notched-outline{--limel-text-editor-notched-outline-bottom:1rem}:host(limel-text-editor[allow-resize]) limel-prosemirror-adapter{resize:vertical}';const a=class{constructor(i){e(this,i);this.change=t(this,"change",7);this.renderHelperLine=()=>{if(!this.helperText){return}return r("limel-helper-line",{helperText:this.helperText,helperTextId:this.helperTextId,invalid:this.isInvalid()})};this.isInvalid=()=>{if(this.readonly){return false}if(this.invalid){return true}};this.handleChange=()=>e=>{e.stopPropagation();this.change.emit(e.detail)};this.contentType="markdown";this.language="en";this.disabled=false;this.readonly=false;this.helperText=undefined;this.placeholder=undefined;this.label=undefined;this.invalid=false;this.value=undefined;this.required=false;this.allowResize=true;this.helperTextId=o();this.editorId=o()}render(){return r(i,{class:{"has-helper-text":!!this.helperText}},r("span",{class:"notched-outline"},r("span",{class:"leading-outline"}),this.renderLabel(),r("span",{class:"trailing-outline"})),this.renderEditor())}renderEditor(){if(this.readonly&&!this.value){return[r("span",{class:"lime-looks-like-input-value"},"–"),this.renderHelperLine()]}if(this.readonly){return[r("limel-markdown",{value:this.value,"aria-controls":this.helperTextId,id:this.editorId}),this.renderPlaceholder(),this.renderHelperLine()]}return[r("limel-prosemirror-adapter",{"aria-placeholder":this.placeholder,contentType:this.contentType,onChange:this.handleChange,value:this.value,"aria-controls":this.helperTextId,id:this.editorId,tabindex:this.disabled?-1:0,"aria-disabled":this.disabled,language:this.language}),this.renderPlaceholder(),this.renderHelperLine()]}renderLabel(){if(!this.label){return}return r("span",{class:"notch"},r("label",{htmlFor:this.editorId},this.label))}renderPlaceholder(){if(!this.placeholder||this.value){return}return r("span",{class:"placeholder","aria-hidden":"true"},this.placeholder)}};a.style=l;export{a as limel_text_editor};
-//# sourceMappingURL=p-52269a69.entry.js.map

package/dist/lime-elements/p-52269a69.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["textEditorCss","TextEditor","constructor","hostRef","this","renderHelperLine","helperText","h","helperTextId","invalid","isInvalid","readonly","handleChange","event","stopPropagation","change","emit","detail","createRandomString","editorId","render","Host","class","renderLabel","renderEditor","value","id","renderPlaceholder","placeholder","contentType","onChange","tabindex","disabled","language","label","htmlFor"],"sources":["./src/components/text-editor/text-editor.scss?tag=limel-text-editor&encapsulation=shadow","./src/components/text-editor/text-editor.tsx"],"sourcesContent":["@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins.scss';\n\n/**\n * @prop --text-editor-max-height: the tallest height the text editor can become when auto-resizing itself. Defaults to `calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)) - 4rem)`.\n */\n\n@include shared_input-select-picker.lime-looks-like-input-value;\n.lime-looks-like-input-value {\n    padding: var(--limel-text-editor-padding);\n}\n\n* {\n    box-sizing: border-box;\n}\n\n:host(limel-text-editor) {\n    --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color};\n    --limel-text-editor-background-color: #{shared_input-select-picker.$background-color-normal};\n    --limel-text-editor-label-color: #{shared_input-select-picker.$label-color};\n    --limel-text-editor-padding: 0.75rem 1rem;\n    position: relative;\n    isolation: isolate;\n    display: flex;\n    flex-direction: column;\n\n    width: 100%;\n    min-width: 5rem;\n    min-height: 5rem;\n    height: 100%;\n    max-height: var(\n        --text-editor-max-height,\n        calc(\n            100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)) -\n                4rem\n        )\n    );\n}\n\n:host(limel-text-editor:hover) {\n    --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color--hovered};\n}\n\n:host(limel-text-editor:focus-within) {\n    --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color--focused};\n}\n\n:host(limel-text-editor[disabled]:not([disabled='false'])) {\n    @include shared_input-select-picker.looks-disabled;\n\n    limel-prosemirror-adapter {\n        pointer-events: none;\n    }\n}\n\n:host(limel-text-editor[invalid]:not([invalid='false'])) {\n    --limel-text-editor-outline-color: var(--lime-error-text-color);\n}\n\n:host(limel-text-editor[readonly]:not([readonly='false'])) {\n    --limel-text-editor-placeholder-top: 0;\n    --limel-text-editor-outline-color: transparent;\n    --limel-text-editor-background-color: transparent;\n\n    limel-markdown {\n        display: block;\n        padding: var(--limel-text-editor-padding);\n    }\n}\n\n.notched-outline {\n    transition: bottom\n        var(--limel-h-l-grid-template-rows-transition-speed, 0.46s)\n        cubic-bezier(1, 0.09, 0, 0.89);\n    pointer-events: none;\n    position: absolute;\n    inset: 0;\n    bottom: var(--limel-text-editor-notched-outline-bottom, 0);\n\n    display: flex;\n    background-color: var(--limel-text-editor-background-color);\n}\n\n.leading-outline,\n.notch,\n.trailing-outline {\n    transition: border-color 0.2s ease;\n    border-width: 1px;\n    border-style: solid;\n    border-color: var(--limel-text-editor-outline-color);\n}\n\n.leading-outline {\n    flex-shrink: 0;\n    width: 0.75rem;\n    border-right-width: 0;\n    border-top-left-radius: 0.25rem;\n    border-bottom-left-radius: 0.25rem;\n}\n\n.notch {\n    flex-shrink: 0;\n\n    position: relative;\n    z-index: 2;\n\n    border-top-width: 0;\n    border-right-width: 0;\n    border-left-width: 0;\n\n    max-width: calc(100% - 1.5rem);\n}\n\n.trailing-outline {\n    flex-grow: 1;\n    border-left-width: 0;\n    border-top-right-radius: 0.25rem;\n    border-bottom-right-radius: 0.25rem;\n}\n\nlabel {\n    transform: translateY(-50%);\n\n    @include mixins.truncate-text;\n    display: block;\n    padding: 0 0.25rem;\n\n    color: var(--limel-text-editor-label-color);\n    font-size: 0.65rem; // `10.4px` similar to MDC's floating label\n    letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);\n\n    :host(limel-text-editor[required]) & {\n        &::after {\n            content: '*';\n        }\n    }\n}\n\n.placeholder {\n    @include mixins.truncate-text;\n    pointer-events: none;\n    position: absolute;\n    top: var(--limel-text-editor-placeholder-top, 2.25rem);\n    left: 0;\n    right: 0;\n\n    padding: var(--limel-text-editor-padding);\n    font-style: italic;\n    font-size: 0.875rem;\n    color: shared_input-select-picker.$input-placeholder-color;\n}\n\nlimel-prosemirror-adapter {\n    flex-grow: 1;\n\n    min-width: 0;\n    min-height: 0;\n    height: 100%;\n    overflow: hidden auto;\n}\n\n@include mixins.hide-helper-line-when-not-needed(limel-text-editor);\n:host(limel-text-editor.has-helper-text:focus-within),\n:host(limel-text-editor.has-helper-text[invalid]:not([invalid='false'])) {\n    .notched-outline {\n        --limel-text-editor-notched-outline-bottom: 1rem;\n    }\n}\n\n:host(limel-text-editor[allow-resize]) {\n    limel-prosemirror-adapter {\n        resize: vertical;\n    }\n}\n","import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { Languages } from '../date-picker/date.types';\nimport { createRandomString } from '../../util/random-string';\n/**\n * A rich text editor that offers a rich text editing experience with markdown support,\n * in the sense that you can easily type markdown syntax and see the rendered\n * result as rich text in real-time. For instance, you can type `# Hello, world!`\n * and see it directly turning to a heading 1 (an `<h1>` HTML element).\n *\n * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>\n * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.\n *\n * @exampleComponent limel-example-text-editor-basic\n * @exampleComponent limel-example-text-editor-as-form-component\n * @exampleComponent limel-example-text-editor-with-markdown\n * @exampleComponent limel-example-text-editor-with-html\n * @exampleComponent limel-example-text-editor-allow-resize\n * @exampleComponent limel-example-text-editor-size\n * @exampleComponent limel-example-text-editor-composite\n * @beta\n */\n@Component({\n    tag: 'limel-text-editor',\n    shadow: true,\n    styleUrl: 'text-editor.scss',\n})\nexport class TextEditor implements FormComponent<string> {\n    /** The type of content that the editor should handle and emit, defaults to `markdown`\n     *\n     * Assumed to be set only once, so not reactive to changes\n     */\n    @Prop()\n    public contentType: 'markdown' | 'html' = 'markdown';\n\n    /**\n     * Defines the language for translations.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    /**\n     * Set to `true` to disable the field.\n     * Use `disabled` to indicate that the field can normally be interacted\n     * with, but is currently disabled. This tells the user that if certain\n     * requirements are met, the field may become enabled again.\n     */\n    @Prop({ reflect: true })\n    public disabled?: boolean = false;\n\n    /**\n     * Set to `true` to make the component read-only.\n     * Use `readonly` when the field is only there to present the data it holds,\n     * and will not become possible for the current user to edit.\n     * :::note\n     * Consider that it might be better to use `limel-markdown`\n     * instead of `limel-text-editor` when the goal is visualizing data.\n     * :::\n     */\n    @Prop({ reflect: true })\n    public readonly?: boolean = false;\n\n    /**\n     * Optional helper text to display below the input field when it has focus\n     */\n    @Prop({ reflect: true })\n    public helperText?: string;\n\n    /**\n     * The placeholder text shown inside the input field,\n     * when the field is empty.\n     */\n    @Prop({ reflect: true })\n    public placeholder?: string;\n\n    /**\n     * The label of the editor\n     */\n    @Prop({ reflect: true })\n    public label?: string;\n\n    /**\n     * Set to `true` to indicate that the current value of the editor is\n     * invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid?: boolean = false;\n\n    /**\n     * Description of the text inside the editor as markdown\n     */\n    @Prop({ reflect: true })\n    public value: string;\n\n    /**\n     * Set to `true` to indicate that the field is required.\n     *\n     * :::important\n     * An empty but required field is not automatically considered invalid.\n     * You must make sure to check the validity of the field on your own,\n     * and properly handle the `invalid` state.\n     * :::\n     */\n    @Prop({ reflect: true })\n    public required?: boolean = false;\n\n    /**\n     * Set to `true` to allow the user to vertically resize the editor.\n     * Set to `false` to disable the resize functionality.\n     */\n    @Prop({ reflect: true })\n    public allowResize: boolean = true;\n\n    /**\n     * Dispatched when a change is made to the editor\n     */\n    @Event()\n    public change: EventEmitter<string>;\n\n    private helperTextId: string;\n    private editorId: string;\n\n    public constructor() {\n        this.helperTextId = createRandomString();\n        this.editorId = createRandomString();\n    }\n\n    public render() {\n        return (\n            <Host\n                class={{\n                    'has-helper-text': !!this.helperText,\n                }}\n            >\n                <span class=\"notched-outline\">\n                    <span class=\"leading-outline\" />\n                    {this.renderLabel()}\n                    <span class=\"trailing-outline\" />\n                </span>\n                {this.renderEditor()}\n            </Host>\n        );\n    }\n\n    private renderEditor() {\n        if (this.readonly && !this.value) {\n            return [\n                <span class=\"lime-looks-like-input-value\">–</span>,\n                this.renderHelperLine(),\n            ];\n        }\n\n        if (this.readonly) {\n            return [\n                <limel-markdown\n                    value={this.value}\n                    aria-controls={this.helperTextId}\n                    id={this.editorId}\n                />,\n                this.renderPlaceholder(),\n                this.renderHelperLine(),\n            ];\n        }\n\n        return [\n            <limel-prosemirror-adapter\n                aria-placeholder={this.placeholder}\n                contentType={this.contentType}\n                onChange={this.handleChange}\n                value={this.value}\n                aria-controls={this.helperTextId}\n                id={this.editorId}\n                tabindex={this.disabled ? -1 : 0}\n                aria-disabled={this.disabled}\n                language={this.language}\n            />,\n            this.renderPlaceholder(),\n            this.renderHelperLine(),\n        ];\n    }\n\n    private renderLabel() {\n        if (!this.label) {\n            return;\n        }\n\n        return (\n            <span class=\"notch\">\n                <label htmlFor={this.editorId}>{this.label}</label>\n            </span>\n        );\n    }\n\n    private renderPlaceholder() {\n        if (!this.placeholder || this.value) {\n            return;\n        }\n\n        return (\n            <span class=\"placeholder\" aria-hidden=\"true\">\n                {this.placeholder}\n            </span>\n        );\n    }\n\n    private renderHelperLine = () => {\n        if (!this.helperText) {\n            return;\n        }\n\n        return (\n            <limel-helper-line\n                helperText={this.helperText}\n                helperTextId={this.helperTextId}\n                invalid={this.isInvalid()}\n            />\n        );\n    };\n\n    private isInvalid = () => {\n        if (this.readonly) {\n            // A readonly field can never be invalid.\n            return false;\n        }\n\n        if (this.invalid) {\n            return true;\n        }\n    };\n\n    private handleChange = () => (event: CustomEvent<string>) => {\n        event.stopPropagation();\n        this.change.emit(event.detail);\n    };\n}\n"],"mappings":"6FAAA,MAAMA,EAAgB,kxK,MC2BTC,EAAU,MA+FnBC,YAAAC,G,yCAmFQC,KAAAC,iBAAmB,KACvB,IAAKD,KAAKE,WAAY,CAClB,M,CAGJ,OACIC,EAAA,qBACID,WAAYF,KAAKE,WACjBE,aAAcJ,KAAKI,aACnBC,QAASL,KAAKM,aAChB,EAIFN,KAAAM,UAAY,KAChB,GAAIN,KAAKO,SAAU,CAEf,OAAO,K,CAGX,GAAIP,KAAKK,QAAS,CACd,OAAO,I,GAIPL,KAAAQ,aAAe,IAAOC,IAC1BA,EAAMC,kBACNV,KAAKW,OAAOC,KAAKH,EAAMI,OAAO,E,iBAvMQ,W,cAMb,K,cASD,M,cAYA,M,uFA0BD,M,mCAkBC,M,iBAOE,KAY1Bb,KAAKI,aAAeU,IACpBd,KAAKe,SAAWD,G,CAGbE,SACH,OACIb,EAACc,EAAI,CACDC,MAAO,CACH,oBAAqBlB,KAAKE,aAG9BC,EAAA,QAAMe,MAAM,mBACRf,EAAA,QAAMe,MAAM,oBACXlB,KAAKmB,cACNhB,EAAA,QAAMe,MAAM,sBAEflB,KAAKoB,e,CAKVA,eACJ,GAAIpB,KAAKO,WAAaP,KAAKqB,MAAO,CAC9B,MAAO,CACHlB,EAAA,QAAMe,MAAM,+BAA6B,KACzClB,KAAKC,mB,CAIb,GAAID,KAAKO,SAAU,CACf,MAAO,CACHJ,EAAA,kBACIkB,MAAOrB,KAAKqB,MAAK,gBACFrB,KAAKI,aACpBkB,GAAItB,KAAKe,WAEbf,KAAKuB,oBACLvB,KAAKC,mB,CAIb,MAAO,CACHE,EAAA,gDACsBH,KAAKwB,YACvBC,YAAazB,KAAKyB,YAClBC,SAAU1B,KAAKQ,aACfa,MAAOrB,KAAKqB,MAAK,gBACFrB,KAAKI,aACpBkB,GAAItB,KAAKe,SACTY,SAAU3B,KAAK4B,UAAY,EAAI,EAAC,gBACjB5B,KAAK4B,SACpBC,SAAU7B,KAAK6B,WAEnB7B,KAAKuB,oBACLvB,KAAKC,mB,CAILkB,cACJ,IAAKnB,KAAK8B,MAAO,CACb,M,CAGJ,OACI3B,EAAA,QAAMe,MAAM,SACRf,EAAA,SAAO4B,QAAS/B,KAAKe,UAAWf,KAAK8B,O,CAKzCP,oBACJ,IAAKvB,KAAKwB,aAAexB,KAAKqB,MAAO,CACjC,M,CAGJ,OACIlB,EAAA,QAAMe,MAAM,cAAa,cAAa,QACjClB,KAAKwB,Y"}

package/dist/lime-elements/p-634b4e87.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as r,H as o}from"./p-443111b3.js";const i='@charset "UTF-8";:host(limel-split-button.has-menu){--button-padding-right:2rem}:host(limel-split-button){display:inline-flex;isolation:isolate}:host(limel-split-button) *{box-sizing:border-box}limel-button{width:100%}limel-menu{display:flex;justify-content:flex-end;position:relative;z-index:1;padding:0.125rem;margin-left:calc(var(--button-padding-right) * -1);width:var(--button-padding-right)}limel-menu:before{transition:background-color 0.5s ease;content:"";position:absolute;inset:0.375rem auto 0.375rem 0.6875rem;width:1px;background-color:currentColor;opacity:0.2}limel-menu:not([disabled]){color:var(--mdc-theme-primary, rgb(var(--color-teal-default)))}limel-menu:not([disabled]).primary{color:var(--mdc-theme-on-primary, rgb(var(--color-white)))}limel-menu[disabled]{color:rgba(var(--contrast-1600), 0.37)}limel-menu:hover:before,limel-menu:focus-within:before{background-color:transparent}.menu-trigger{all:unset;text-align:center;font-weight:bold;border-radius:0.125rem;height:100%;width:1rem}.menu-trigger: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:"inherit";background-color:transparent;cursor:pointer}.menu-trigger:not(:disabled):hover{color:"inherit";background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.menu-trigger:not(:disabled):active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.menu-trigger:not(:disabled):focus{outline:none}.menu-trigger:not(:disabled):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.menu-trigger:not(:disabled):focus-visible,.menu-trigger:not(:disabled):hover{background-color:rgb(var(--color-white), 0.1)}.menu-trigger:before{content:"";position:absolute;inset:-0.25rem;z-index:-1}';const s=class{constructor(o){e(this,o);this.select=t(this,"select",7);this.renderMenu=()=>{if(!this.items.length){return}return r("limel-menu",{class:{primary:this.primary},disabled:this.disabled,items:this.items,openDirection:"bottom"},r("button",{class:"menu-trigger",slot:"trigger",disabled:this.disabled},"⋮"))};this.filterClickWhenDisabled=e=>{if(this.disabled){e.preventDefault()}};this.label=undefined;this.primary=false;this.icon=undefined;this.disabled=false;this.items=[]}render(){return r(o,{class:{"has-menu":!!this.items.length},onClick:this.filterClickWhenDisabled},r("limel-button",{label:this.label,primary:this.primary,icon:this.icon,disabled:this.disabled}),this.renderMenu())}static get delegatesFocus(){return true}};s.style=i;export{s as limel_split_button};
-//# sourceMappingURL=p-634b4e87.entry.js.map

package/dist/lime-elements/p-634b4e87.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["splitButtonCss","SplitButton","this","renderMenu","items","length","h","class","primary","disabled","openDirection","slot","filterClickWhenDisabled","e","preventDefault","render","Host","onClick","label","icon"],"sources":["./src/components/split-button/split-button.scss?tag=limel-split-button&encapsulation=shadow","./src/components/split-button/split-button.tsx"],"sourcesContent":["@import '../../style/mixins';\n\n:host(limel-split-button.has-menu) {\n    --button-padding-right: 2rem;\n}\n\n:host(limel-split-button) {\n    display: inline-flex;\n    isolation: isolate;\n\n    * {\n        box-sizing: border-box;\n    }\n}\n\nlimel-button {\n    width: 100%;\n}\n\n$distance-around-trigger: 0.125rem;\n\nlimel-menu {\n    display: flex;\n    justify-content: flex-end;\n    position: relative;\n    z-index: 1;\n\n    padding: $distance-around-trigger;\n    margin-left: calc(var(--button-padding-right) * -1);\n    width: var(--button-padding-right);\n\n    &:before {\n        transition: background-color 0.5s ease;\n        content: '';\n        position: absolute;\n        inset: 0.375rem auto 0.375rem 0.6875rem;\n        width: 1px;\n        background-color: currentColor;\n\n        opacity: 0.2;\n    }\n\n    &:not([disabled]) {\n        color: var(\n            --mdc-theme-primary,\n            rgb(var(--color-teal-default))\n        ); // similar to limel-button text\n\n        &.primary {\n            color: var(\n                --mdc-theme-on-primary,\n                rgb(var(--color-white))\n            ); // similar to limel-button text\n        }\n    }\n\n    &[disabled] {\n        color: rgba(var(--contrast-1600), 0.37); // similar to limel-button text\n    }\n\n    &:hover,\n    &:focus-within {\n        &:before {\n            background-color: transparent;\n        }\n    }\n}\n\n.menu-trigger {\n    all: unset;\n\n    text-align: center;\n    font-weight: bold;\n\n    border-radius: 0.125rem;\n    height: 100%;\n    width: 1rem;\n\n    &:not(:disabled) {\n        @include is-flat-clickable(\n            $color: 'inherit',\n            $color--hovered: 'inherit'\n        );\n        @include visualize-keyboard-focus();\n        cursor: pointer;\n\n        &:focus-visible,\n        &:hover {\n            background-color: rgb(var(--color-white), 0.1);\n        }\n    }\n\n    &:before {\n        // prevents unintentionally activating the default action,\n        // by clicking on the edge of menu trigger,\n        // which would be activating the default onClick action\n        // on `limel-button`.\n        content: '';\n        position: absolute;\n        inset: -$distance-around-trigger * 2;\n        z-index: -1;\n    }\n}\n","import { Component, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { ListSeparator } from '../list/list-item.types';\nimport { MenuItem } from '../menu/menu.types';\n\n/**\n * A split button is a button with two components:\n * a button and a side-menu attached to it.\n *\n * Clicking on the button runs a default action,\n * and clicking on the arrow opens up a list of other possible actions.\n *\n * :::warning\n * - Never use a split button for navigation purposes, such as going to next page.\n * The button should only be used for performing commands!\n * - Never use this component instead of a Select or Menu component!\n * :::\n *\n * @exampleComponent limel-example-split-button-basic\n * @exampleComponent limel-example-split-button-repeat-default-command\n */\n@Component({\n    tag: 'limel-split-button',\n    shadow: { delegatesFocus: true },\n    styleUrl: 'split-button.scss',\n})\nexport class SplitButton {\n    /**\n     * The text to show on the default action part of the button.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Set to `true` to make the button primary.\n     */\n    @Prop({ reflect: true })\n    public primary = false;\n\n    /**\n     * Set icon for the button\n     */\n    @Prop({ reflect: true })\n    public icon: string;\n\n    /**\n     * Set to `true` to disable the button.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * A list of items and separators to show in the menu.\n     */\n    @Prop()\n    public items: Array<MenuItem | ListSeparator> = [];\n\n    /**\n     * Is emitted when a menu item is selected.\n     */\n    @Event()\n    public select: EventEmitter<MenuItem>;\n\n    render() {\n        return (\n            <Host\n                class={{\n                    'has-menu': !!this.items.length,\n                }}\n                onClick={this.filterClickWhenDisabled}\n            >\n                <limel-button\n                    label={this.label}\n                    primary={this.primary}\n                    icon={this.icon}\n                    disabled={this.disabled}\n                />\n                {this.renderMenu()}\n            </Host>\n        );\n    }\n\n    private renderMenu = () => {\n        if (!this.items.length) {\n            return;\n        }\n\n        return (\n            <limel-menu\n                class={{\n                    primary: this.primary,\n                }}\n                disabled={this.disabled}\n                items={this.items}\n                openDirection=\"bottom\"\n            >\n                <button\n                    class=\"menu-trigger\"\n                    slot=\"trigger\"\n                    disabled={this.disabled}\n                >\n                    ⋮\n                </button>\n            </limel-menu>\n        );\n    };\n\n    private filterClickWhenDisabled = (e) => {\n        if (this.disabled) {\n            e.preventDefault();\n        }\n    };\n}\n"],"mappings":"yDAAA,MAAMA,EAAiB,myD,MCyBVC,EAAW,M,wDAwDZC,KAAAC,WAAa,KACjB,IAAKD,KAAKE,MAAMC,OAAQ,CACpB,M,CAGJ,OACIC,EAAA,cACIC,MAAO,CACHC,QAASN,KAAKM,SAElBC,SAAUP,KAAKO,SACfL,MAAOF,KAAKE,MACZM,cAAc,UAEdJ,EAAA,UACIC,MAAM,eACNI,KAAK,UACLF,SAAUP,KAAKO,UAAQ,KAIlB,EAIbP,KAAAU,wBAA2BC,IAC/B,GAAIX,KAAKO,SAAU,CACfI,EAAEC,gB,qCAxEO,M,kCAYC,M,WAM8B,E,CAQhDC,SACI,OACIT,EAACU,EAAI,CACDT,MAAO,CACH,aAAcL,KAAKE,MAAMC,QAE7BY,QAASf,KAAKU,yBAEdN,EAAA,gBACIY,MAAOhB,KAAKgB,MACZV,QAASN,KAAKM,QACdW,KAAMjB,KAAKiB,KACXV,SAAUP,KAAKO,WAElBP,KAAKC,a"}