@limetech/lime-elements 37.32.0 → 37.32.2

package/dist/cjs/limel-text-editor.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-d1052409.js');
 const randomString = require('./random-string-c8445652.js');
 
-const textEditorCss = "@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-padding:0.75rem 1rem;position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;min-width:5rem;min-height:4rem;height:100%;max-height:100%}:host(limel-text-editor:not([readonly])){--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)}:host(limel-text-editor[invalid]){--limel-text-editor-outline-color:var(--lime-error-text-color)}:host(limel-text-editor[readonly]){--limel-text-editor-placeholder-top:0;--limel-text-editor-outline-color:transparent}:host(limel-text-editor[readonly]) limel-markdown{display:block;padding:var(--limel-text-editor-padding)}.notched-outline{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)}:host(limel-text-editor.has-helper-text) .notched-outline{--limel-text-editor-notched-outline-bottom:1rem}.leading-outline,.notch,.trailing-outline{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}";
+const textEditorCss = "@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-padding:0.75rem 1rem;position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;min-width:5rem;min-height:4rem;height:100%;max-height:100%}:host(limel-text-editor:not([readonly])){--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)}: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[invalid]){--limel-text-editor-outline-color:var(--lime-error-text-color)}:host(limel-text-editor[readonly]){--limel-text-editor-placeholder-top:0;--limel-text-editor-outline-color:transparent}:host(limel-text-editor[readonly]) limel-markdown{display:block;padding:var(--limel-text-editor-padding)}.notched-outline{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)}:host(limel-text-editor.has-helper-text) .notched-outline{--limel-text-editor-notched-outline-bottom:1rem}.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}";
 
 const TextEditor = class {
   constructor(hostRef) {

package/dist/cjs/limel-text-editor.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"limel-text-editor.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,aAAa,GAAG,2xHAA2xH;;MC0BpyH,UAAU;EAkFnB;;;IAgFQ,qBAAgB,GAAG;MACvB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;QAClB,OAAO;OACV;MAED,QACIA,+BACI,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,GAC3B,EACJ;KACL,CAAC;IAEM,cAAS,GAAG;MAChB,IAAI,IAAI,CAAC,QAAQ,EAAE;;QAEf,OAAO,KAAK,CAAC;OAChB;MAED,IAAI,IAAI,CAAC,OAAO,EAAE;QACd,OAAO,IAAI,CAAC;OACf;KACJ,CAAC;IAEM,iBAAY,GAAG,MAAM,CAAC,KAA0B;MACpD,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAClC,CAAC;uBAxLwC,UAAU;;oBAqBxB,KAAK;;;;mBA0BN,KAAK;;oBAkBJ,KAAK;IAY7B,IAAI,CAAC,YAAY,GAAGC,+BAAkB,EAAE,CAAC;IACzC,IAAI,CAAC,QAAQ,GAAGA,+BAAkB,EAAE,CAAC;GACxC;EAEM,MAAM;IACT,QACID,QAACE,UAAI,IACD,KAAK,EAAE;QACH,iBAAiB,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU;OACvC,IAEDF,kBAAM,KAAK,EAAC,iBAAiB,IACzBA,kBAAM,KAAK,EAAC,iBAAiB,GAAG,EAC/B,IAAI,CAAC,WAAW,EAAE,EACnBA,kBAAM,KAAK,EAAC,kBAAkB,GAAG,CAC9B,EACN,IAAI,CAAC,YAAY,EAAE,CACjB,EACT;GACL;EAEO,YAAY;IAChB,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MAC9B,OAAO;QACHA,kBAAM,KAAK,EAAC,6BAA6B,aAAS;QAClD,IAAI,CAAC,gBAAgB,EAAE;OAC1B,CAAC;KACL;IAED,IAAI,IAAI,CAAC,QAAQ,EAAE;MACf,OAAO;QACHA,4BACI,KAAK,EAAE,IAAI,CAAC,KAAK,mBACF,IAAI,CAAC,YAAY,EAChC,EAAE,EAAE,IAAI,CAAC,QAAQ,GACnB;QACF,IAAI,CAAC,iBAAiB,EAAE;QACxB,IAAI,CAAC,gBAAgB,EAAE;OAC1B,CAAC;KACL;IAED,OAAO;MACHA,2DACsB,IAAI,CAAC,WAAW,EAClC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,mBACF,IAAI,CAAC,YAAY,EAChC,EAAE,EAAE,IAAI,CAAC,QAAQ,GACnB;MACF,IAAI,CAAC,iBAAiB,EAAE;MACxB,IAAI,CAAC,gBAAgB,EAAE;KAC1B,CAAC;GACL;EAEO,WAAW;IACf,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACb,OAAO;KACV;IAED,QACIA,kBAAM,KAAK,EAAC,OAAO,IACfA,mBAAO,OAAO,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,KAAK,CAAS,CAChD,EACT;GACL;EAEO,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,EAAE;MACjC,OAAO;KACV;IAED,QACIA,kBAAM,KAAK,EAAC,aAAa,iBAAa,MAAM,IACvC,IAAI,CAAC,WAAW,CACd,EACT;GACL;;;;;;","names":["h","createRandomString","Host"],"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 '../../../src/style/mixins.scss';\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-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: 4rem;\n    height: 100%;\n    max-height: 100%;\n}\n\n:host(limel-text-editor:not([readonly])) {\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}\n:host(limel-text-editor[invalid]) {\n    --limel-text-editor-outline-color: var(--lime-error-text-color);\n}\n\n:host(limel-text-editor[readonly]) {\n    --limel-text-editor-placeholder-top: 0;\n    --limel-text-editor-outline-color: transparent;\n\n    limel-markdown {\n        display: block;\n        padding: var(--limel-text-editor-padding);\n    }\n}\n\n.notched-outline {\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    :host(limel-text-editor.has-helper-text) & {\n        --limel-text-editor-notched-outline-bottom: 1rem;\n    }\n}\n\n.leading-outline,\n.notch,\n.trailing-outline {\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","import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { createRandomString } from 'src/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-composite\n * @exampleComponent limel-example-text-editor-with-markdown\n * @exampleComponent limel-example-text-editor-with-html\n * @exampleComponent limel-example-text-editor-height\n * @beta\n * @private\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     * 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;\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     * 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            />,\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"],"version":3}
+{"file":"limel-text-editor.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,aAAa,GAAG,4/HAA4/H;;MC0BrgI,UAAU;EAkFnB;;;IAgFQ,qBAAgB,GAAG;MACvB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;QAClB,OAAO;OACV;MAED,QACIA,+BACI,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,GAC3B,EACJ;KACL,CAAC;IAEM,cAAS,GAAG;MAChB,IAAI,IAAI,CAAC,QAAQ,EAAE;;QAEf,OAAO,KAAK,CAAC;OAChB;MAED,IAAI,IAAI,CAAC,OAAO,EAAE;QACd,OAAO,IAAI,CAAC;OACf;KACJ,CAAC;IAEM,iBAAY,GAAG,MAAM,CAAC,KAA0B;MACpD,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAClC,CAAC;uBAxLwC,UAAU;;oBAqBxB,KAAK;;;;mBA0BN,KAAK;;oBAkBJ,KAAK;IAY7B,IAAI,CAAC,YAAY,GAAGC,+BAAkB,EAAE,CAAC;IACzC,IAAI,CAAC,QAAQ,GAAGA,+BAAkB,EAAE,CAAC;GACxC;EAEM,MAAM;IACT,QACID,QAACE,UAAI,IACD,KAAK,EAAE;QACH,iBAAiB,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU;OACvC,IAEDF,kBAAM,KAAK,EAAC,iBAAiB,IACzBA,kBAAM,KAAK,EAAC,iBAAiB,GAAG,EAC/B,IAAI,CAAC,WAAW,EAAE,EACnBA,kBAAM,KAAK,EAAC,kBAAkB,GAAG,CAC9B,EACN,IAAI,CAAC,YAAY,EAAE,CACjB,EACT;GACL;EAEO,YAAY;IAChB,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MAC9B,OAAO;QACHA,kBAAM,KAAK,EAAC,6BAA6B,aAAS;QAClD,IAAI,CAAC,gBAAgB,EAAE;OAC1B,CAAC;KACL;IAED,IAAI,IAAI,CAAC,QAAQ,EAAE;MACf,OAAO;QACHA,4BACI,KAAK,EAAE,IAAI,CAAC,KAAK,mBACF,IAAI,CAAC,YAAY,EAChC,EAAE,EAAE,IAAI,CAAC,QAAQ,GACnB;QACF,IAAI,CAAC,iBAAiB,EAAE;QACxB,IAAI,CAAC,gBAAgB,EAAE;OAC1B,CAAC;KACL;IAED,OAAO;MACHA,2DACsB,IAAI,CAAC,WAAW,EAClC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,mBACF,IAAI,CAAC,YAAY,EAChC,EAAE,EAAE,IAAI,CAAC,QAAQ,GACnB;MACF,IAAI,CAAC,iBAAiB,EAAE;MACxB,IAAI,CAAC,gBAAgB,EAAE;KAC1B,CAAC;GACL;EAEO,WAAW;IACf,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACb,OAAO;KACV;IAED,QACIA,kBAAM,KAAK,EAAC,OAAO,IACfA,mBAAO,OAAO,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,KAAK,CAAS,CAChD,EACT;GACL;EAEO,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,EAAE;MACjC,OAAO;KACV;IAED,QACIA,kBAAM,KAAK,EAAC,aAAa,iBAAa,MAAM,IACvC,IAAI,CAAC,WAAW,CACd,EACT;GACL;;;;;;","names":["h","createRandomString","Host"],"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 '../../../src/style/mixins.scss';\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-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: 4rem;\n    height: 100%;\n    max-height: 100%;\n}\n\n:host(limel-text-editor:not([readonly])) {\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}\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[invalid]) {\n    --limel-text-editor-outline-color: var(--lime-error-text-color);\n}\n\n:host(limel-text-editor[readonly]) {\n    --limel-text-editor-placeholder-top: 0;\n    --limel-text-editor-outline-color: transparent;\n\n    limel-markdown {\n        display: block;\n        padding: var(--limel-text-editor-padding);\n    }\n}\n\n.notched-outline {\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    :host(limel-text-editor.has-helper-text) & {\n        --limel-text-editor-notched-outline-bottom: 1rem;\n    }\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","import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { createRandomString } from 'src/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-composite\n * @exampleComponent limel-example-text-editor-with-markdown\n * @exampleComponent limel-example-text-editor-with-html\n * @exampleComponent limel-example-text-editor-height\n * @beta\n * @private\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     * 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;\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     * 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            />,\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"],"version":3}

package/dist/collection/components/text-editor/prosemirror-adapter/prosemirror-adapter.css

@@ -96,9 +96,14 @@ limel-action-bar {
   background-color: rgba(var(--contrast-200), 0.5);
   backdrop-filter: blur(0.5rem);
   -webkit-backdrop-filter: blur(0.5rem);
+  opacity: 0.6;
+  transition: opacity 0.5s ease;
   margin: 0 1px;
   width: calc(100% - 2px);
 }
+:host(limel-prosemirror-adapter:focus-within) limel-action-bar, :host(limel-prosemirror-adapter:hover) limel-action-bar {
+  opacity: 1;
+}
 
 .ProseMirror {
   position: relative;

package/dist/collection/components/text-editor/text-editor.css

@@ -159,6 +159,14 @@
   --limel-text-editor-label-color: rgba(var(--contrast-1200), 1);
 }
 
+: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[invalid]) {
   --limel-text-editor-outline-color: var(--lime-error-text-color);
 }
@@ -187,6 +195,7 @@
 .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);

package/dist/esm/limel-prosemirror-adapter.entry.js

@@ -24708,7 +24708,7 @@ class HTMLConverter {
   }
 }
 
-const prosemirrorAdapterCss = "@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  )}:host(limel-prosemirror-adapter){display:block}*{box-sizing:border-box}.ProseMirror-menubar-wrapper{display:grid;grid-template-rows:auto 1fr}.ProseMirror-textblock-dropdown{min-width:3em}.ProseMirror-tooltip .ProseMirror-menu{width:-webkit-fit-content;width:fit-content;white-space:pre}limel-action-bar{--action-bar-border-radius:0.25rem;position:sticky;z-index:1;top:1px;background-color:rgba(var(--contrast-200), 0.5);backdrop-filter:blur(0.5rem);-webkit-backdrop-filter:blur(0.5rem);margin:0 1px;width:calc(100% - 2px)}.ProseMirror{position:relative;word-wrap:break-word;white-space:pre-wrap;white-space:break-spaces;-webkit-font-variant-ligatures:none;font-variant-ligatures:none;font-feature-settings:\"liga\" 0;padding:var(--limel-text-editor-padding)}.ProseMirror [draggable][contenteditable=false]{user-select:text}.ProseMirror:focus-visible{outline:none}.ProseMirror-hideselection{caret-color:transparent}.ProseMirror-hideselection *::selection{background:transparent}.ProseMirror-hideselection *::-moz-selection{background:transparent}.ProseMirror-selectednode{outline:0.125rem solid rgb(var(--color-sky-light))}li.ProseMirror-selectednode{outline:none}li.ProseMirror-selectednode:after{content:\"\";position:absolute;left:-2rem;right:-0.125rem;top:-0.125rem;bottom:-0.125rem;border:0.125rem solid rgb(var(--color-sky-light));pointer-events:none}img.ProseMirror-separator{display:inline !important;border:none !important;margin:0 !important}blockquote{position:relative;font-weight:100;font-size:0.875rem;max-width:100%;line-height:1.4;margin:0;padding:0.5rem 1.25rem;border-radius:0.05rem 0.75rem;background-color:rgb(var(--contrast-300))}blockquote:before,blockquote:after{position:absolute;font-size:2.75rem;opacity:0.4}blockquote:before{content:\"“\";left:0;top:-0.75rem}blockquote:after{content:\"”\";right:0;bottom:-2rem}:host(limel-markdown.truncate-paragraphs) p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}p,li{font-size:0.875rem;word-break:break-word;hyphens:auto;-webkit-hyphens:auto}a{word-break:break-all}p{margin-top:0;margin-bottom:0.5rem}p:only-child{margin-bottom:0}a{transition:color 0.2s ease;color:var(--markdown-hyperlink-color, rgb(var(--color-blue-dark)));text-decoration:none}a:hover{color:var(--markdown-hyperlink-color--hovered, rgb(var(--color-blue-default)))}hr{margin:1.75rem 0 2rem 0;border-width:0;border-top:1px solid rgb(var(--contrast-500))}dl{display:grid;grid-template-columns:1fr 2fr;grid-template-rows:1fr;margin-bottom:2rem;border:1px solid rgb(var(--contrast-400));border-radius:0.375rem;background-color:rgb(var(--contrast-200))}dl dt,dl dd{padding:0.375rem 0.5rem;font-size:0.875rem;margin:0}dl dt:nth-of-type(even),dl dd:nth-of-type(even){background-color:rgb(var(--contrast-300))}dl dt:first-child{border-top-left-radius:0.375rem}dl dt:last-child{border-bottom-left-radius:0.375rem}dl dd:first-child{border-top-right-radius:0.375rem}dl dd:last-child{border-bottom-right-radius:0.375rem}h1{font-size:1.5rem}h2{font-size:1.25rem}h3{font-size:1.125rem}h4{font-size:1rem}h5{font-size:0.875rem}h6{font-size:0.75rem}h1,h2{margin-top:0.5rem;margin-bottom:0.5rem;letter-spacing:-0.03125rem;font-weight:500}h3,h4{margin-top:0.75rem;margin-bottom:0.25rem;font-weight:600}h5,h6{margin-top:0.5rem;margin-bottom:0.125rem;font-weight:600}h1,h2,h3,h4,h5,h6{word-break:break-word;hyphens:auto;-webkit-hyphens:auto}:not([contenteditable=true]) h1,:not([contenteditable=true]) h2,:not([contenteditable=true]) h3,:not([contenteditable=true]) h4,:not([contenteditable=true]) h5,:not([contenteditable=true]) h6{text-wrap:balance}[contenteditable=true] h1,[contenteditable=true] h2,[contenteditable=true] h3,[contenteditable=true] h4,[contenteditable=true] h5,[contenteditable=true] h6{text-wrap:initial}ul{list-style:none}ul li{position:relative;margin-left:0.75rem}ul li:before{content:\"\";position:absolute;left:-0.5rem;top:0.5rem;width:0.25rem;height:0.25rem;border-radius:50%;background-color:rgb(var(--contrast-700));display:block}ol{margin-top:0.25rem;padding-left:1rem}ul{margin-top:0.25rem;padding-left:0}ul ul,ul ol,ol ol,ol ul{margin-left:0}li{margin-bottom:0.25rem}code{font-family:ui-monospace, \"Cascadia Code\", \"Source Code Pro\", Menlo, Consolas, \"DejaVu Sans Mono\", monospace;font-size:0.8125rem;letter-spacing:-0.0125rem;color:rgb(var(--contrast-1300));-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;display:inline-block;border-radius:0.25rem;padding:0.03125rem 0.25rem;background-color:rgb(var(--contrast-600))}pre>code{display:block;margin:0.5rem 0;padding:0.5rem 0.75rem;overflow:auto;white-space:pre-wrap}:host(limel-markdown:not(.no-table-styles)) table{table-layout:auto;min-width:100%;border-collapse:collapse;border-spacing:0;background:transparent;margin:0.75rem 0;border:1px solid rgb(var(--contrast-400))}:host(limel-markdown:not(.no-table-styles)) th,:host(limel-markdown:not(.no-table-styles)) td{text-align:left;vertical-align:top;transition:background-color 0.2s ease;font-size:0.875rem}:host(limel-markdown:not(.no-table-styles)) td{padding:0.5rem 0.375rem 0.75rem 0.375rem}:host(limel-markdown:not(.no-table-styles)) tr th{background-color:rgb(var(--contrast-400));padding:0.25rem 0.375rem;font-weight:normal}:host(limel-markdown:not(.no-table-styles)) tr th:only-child{text-align:center}:host(limel-markdown:not(.no-table-styles)) tbody tr:nth-child(odd) td{background-color:rgb(var(--contrast-200))}:host(limel-markdown:not(.no-table-styles)) tbody tr:hover td{background-color:rgb(var(--contrast-300))}";
+const prosemirrorAdapterCss = "@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  )}:host(limel-prosemirror-adapter){display:block}*{box-sizing:border-box}.ProseMirror-menubar-wrapper{display:grid;grid-template-rows:auto 1fr}.ProseMirror-textblock-dropdown{min-width:3em}.ProseMirror-tooltip .ProseMirror-menu{width:-webkit-fit-content;width:fit-content;white-space:pre}limel-action-bar{--action-bar-border-radius:0.25rem;position:sticky;z-index:1;top:1px;background-color:rgba(var(--contrast-200), 0.5);backdrop-filter:blur(0.5rem);-webkit-backdrop-filter:blur(0.5rem);opacity:0.6;transition:opacity 0.5s ease;margin:0 1px;width:calc(100% - 2px)}:host(limel-prosemirror-adapter:focus-within) limel-action-bar,:host(limel-prosemirror-adapter:hover) limel-action-bar{opacity:1}.ProseMirror{position:relative;word-wrap:break-word;white-space:pre-wrap;white-space:break-spaces;-webkit-font-variant-ligatures:none;font-variant-ligatures:none;font-feature-settings:\"liga\" 0;padding:var(--limel-text-editor-padding)}.ProseMirror [draggable][contenteditable=false]{user-select:text}.ProseMirror:focus-visible{outline:none}.ProseMirror-hideselection{caret-color:transparent}.ProseMirror-hideselection *::selection{background:transparent}.ProseMirror-hideselection *::-moz-selection{background:transparent}.ProseMirror-selectednode{outline:0.125rem solid rgb(var(--color-sky-light))}li.ProseMirror-selectednode{outline:none}li.ProseMirror-selectednode:after{content:\"\";position:absolute;left:-2rem;right:-0.125rem;top:-0.125rem;bottom:-0.125rem;border:0.125rem solid rgb(var(--color-sky-light));pointer-events:none}img.ProseMirror-separator{display:inline !important;border:none !important;margin:0 !important}blockquote{position:relative;font-weight:100;font-size:0.875rem;max-width:100%;line-height:1.4;margin:0;padding:0.5rem 1.25rem;border-radius:0.05rem 0.75rem;background-color:rgb(var(--contrast-300))}blockquote:before,blockquote:after{position:absolute;font-size:2.75rem;opacity:0.4}blockquote:before{content:\"“\";left:0;top:-0.75rem}blockquote:after{content:\"”\";right:0;bottom:-2rem}:host(limel-markdown.truncate-paragraphs) p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}p,li{font-size:0.875rem;word-break:break-word;hyphens:auto;-webkit-hyphens:auto}a{word-break:break-all}p{margin-top:0;margin-bottom:0.5rem}p:only-child{margin-bottom:0}a{transition:color 0.2s ease;color:var(--markdown-hyperlink-color, rgb(var(--color-blue-dark)));text-decoration:none}a:hover{color:var(--markdown-hyperlink-color--hovered, rgb(var(--color-blue-default)))}hr{margin:1.75rem 0 2rem 0;border-width:0;border-top:1px solid rgb(var(--contrast-500))}dl{display:grid;grid-template-columns:1fr 2fr;grid-template-rows:1fr;margin-bottom:2rem;border:1px solid rgb(var(--contrast-400));border-radius:0.375rem;background-color:rgb(var(--contrast-200))}dl dt,dl dd{padding:0.375rem 0.5rem;font-size:0.875rem;margin:0}dl dt:nth-of-type(even),dl dd:nth-of-type(even){background-color:rgb(var(--contrast-300))}dl dt:first-child{border-top-left-radius:0.375rem}dl dt:last-child{border-bottom-left-radius:0.375rem}dl dd:first-child{border-top-right-radius:0.375rem}dl dd:last-child{border-bottom-right-radius:0.375rem}h1{font-size:1.5rem}h2{font-size:1.25rem}h3{font-size:1.125rem}h4{font-size:1rem}h5{font-size:0.875rem}h6{font-size:0.75rem}h1,h2{margin-top:0.5rem;margin-bottom:0.5rem;letter-spacing:-0.03125rem;font-weight:500}h3,h4{margin-top:0.75rem;margin-bottom:0.25rem;font-weight:600}h5,h6{margin-top:0.5rem;margin-bottom:0.125rem;font-weight:600}h1,h2,h3,h4,h5,h6{word-break:break-word;hyphens:auto;-webkit-hyphens:auto}:not([contenteditable=true]) h1,:not([contenteditable=true]) h2,:not([contenteditable=true]) h3,:not([contenteditable=true]) h4,:not([contenteditable=true]) h5,:not([contenteditable=true]) h6{text-wrap:balance}[contenteditable=true] h1,[contenteditable=true] h2,[contenteditable=true] h3,[contenteditable=true] h4,[contenteditable=true] h5,[contenteditable=true] h6{text-wrap:initial}ul{list-style:none}ul li{position:relative;margin-left:0.75rem}ul li:before{content:\"\";position:absolute;left:-0.5rem;top:0.5rem;width:0.25rem;height:0.25rem;border-radius:50%;background-color:rgb(var(--contrast-700));display:block}ol{margin-top:0.25rem;padding-left:1rem}ul{margin-top:0.25rem;padding-left:0}ul ul,ul ol,ol ol,ol ul{margin-left:0}li{margin-bottom:0.25rem}code{font-family:ui-monospace, \"Cascadia Code\", \"Source Code Pro\", Menlo, Consolas, \"DejaVu Sans Mono\", monospace;font-size:0.8125rem;letter-spacing:-0.0125rem;color:rgb(var(--contrast-1300));-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;display:inline-block;border-radius:0.25rem;padding:0.03125rem 0.25rem;background-color:rgb(var(--contrast-600))}pre>code{display:block;margin:0.5rem 0;padding:0.5rem 0.75rem;overflow:auto;white-space:pre-wrap}:host(limel-markdown:not(.no-table-styles)) table{table-layout:auto;min-width:100%;border-collapse:collapse;border-spacing:0;background:transparent;margin:0.75rem 0;border:1px solid rgb(var(--contrast-400))}:host(limel-markdown:not(.no-table-styles)) th,:host(limel-markdown:not(.no-table-styles)) td{text-align:left;vertical-align:top;transition:background-color 0.2s ease;font-size:0.875rem}:host(limel-markdown:not(.no-table-styles)) td{padding:0.5rem 0.375rem 0.75rem 0.375rem}:host(limel-markdown:not(.no-table-styles)) tr th{background-color:rgb(var(--contrast-400));padding:0.25rem 0.375rem;font-weight:normal}:host(limel-markdown:not(.no-table-styles)) tr th:only-child{text-align:center}:host(limel-markdown:not(.no-table-styles)) tbody tr:nth-child(odd) td{background-color:rgb(var(--contrast-200))}:host(limel-markdown:not(.no-table-styles)) tbody tr:hover td{background-color:rgb(var(--contrast-300))}";
 
 const ProsemirrorAdapter = class {
   constructor(hostRef) {