@limetech/lime-elements 38.3.3 → 38.4.1

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## [38.4.1](https://github.com/Lundalogik/lime-elements/compare/v38.4.0...v38.4.1) (2025-03-17)
+
+
+### Bug Fixes
+
+
+* **markdown:** remove hyphens from paragraphs & lists ([867dd95](https://github.com/Lundalogik/lime-elements/commit/867dd959fc8fefe3217d7212cf230f921099443a))
+
+## [38.4.0](https://github.com/Lundalogik/lime-elements/compare/v38.3.3...v38.4.0) (2025-03-17)
+
+
+### Features
+
+
+* **badge:** enable the consumer to control its `max-width` ([8661573](https://github.com/Lundalogik/lime-elements/commit/86615732dcfc5185c3a05c22abb1ceb206a884a6))
+
 ## [38.3.3](https://github.com/Lundalogik/lime-elements/compare/v38.3.2...v38.3.3) (2025-03-14)
 
 

package/dist/cjs/limel-badge_3.cjs.entry.js

@@ -7,7 +7,7 @@ const format = require('./format-138091fd.js');
 const randomString = require('./random-string-e8ad4419.js');
 require('./_commonjsHelpers-0c557e26.js');
 
-const badgeCss = "@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([hidden]){display:none}:host(limel-badge){--limel-min-badge-size:1rem;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;min-height:var(--limel-min-badge-size);min-width:var(--limel-min-badge-size)}span{cursor:default;box-sizing:border-box;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;font-size:0.6875rem;line-height:var(--limel-min-badge-size);color:var(--badge-text-color, rgb(var(--contrast-1200)));border-radius:var(--limel-min-badge-size);max-height:var(--limel-min-badge-size);min-width:0.5rem;min-height:0.5rem;background-color:var(--badge-background-color, rgb(var(--contrast-500)))}span:not(:empty){min-width:var(--limel-min-badge-size);max-width:2.75rem;padding:0 0.28125rem}:host(.has-large-label) span{cursor:help}";
+const badgeCss = "@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([hidden]){display:none}:host(limel-badge){--limel-min-badge-size:1rem;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;min-height:var(--limel-min-badge-size);min-width:var(--limel-min-badge-size)}span{cursor:default;box-sizing:border-box;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;font-size:0.6875rem;line-height:var(--limel-min-badge-size);color:var(--badge-text-color, rgb(var(--contrast-1200)));border-radius:var(--limel-min-badge-size);max-height:var(--limel-min-badge-size);min-width:0.5rem;min-height:0.5rem;background-color:var(--badge-background-color, rgb(var(--contrast-500)))}span:not(:empty){min-width:var(--limel-min-badge-size);max-width:var(--badge-max-width, 2.75rem);padding:0 0.28125rem}:host(.has-large-label) span{cursor:help}";
 
 const Badge = class {
   constructor(hostRef) {

package/dist/cjs/limel-badge_3.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"limel-badge.limel-tooltip.limel-tooltip-content.entry.cjs.js","mappings":"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","names":["h","Host","abbreviate","createRandomString"],"sources":["./src/components/badge/badge.scss?tag=limel-badge&encapsulation=shadow","./src/components/badge/badge.tsx","./src/components/tooltip/getOwnerElement.tsx","./src/components/tooltip/tooltipTimer.ts","./src/components/tooltip/tooltip.scss?tag=limel-tooltip&encapsulation=shadow","./src/components/tooltip/tooltip.tsx","./src/components/tooltip/tooltip-content.scss?tag=limel-tooltip-content&encapsulation=shadow","./src/components/tooltip/tooltip-content.tsx"],"sourcesContent":["@use '../../style/functions';\n@use '../../style/internal/lime-theme';\n@use '../../style/mixins';\n\n/**\n * @prop --badge-background-color: badge background color\n * @prop --badge-text-color: badge text color\n */\n\n:host([hidden]) {\n    display: none;\n}\n\n:host(limel-badge) {\n    --limel-min-badge-size: 1rem;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    flex-shrink: 0;\n    min-height: var(--limel-min-badge-size);\n    min-width: var(--limel-min-badge-size);\n}\n\nspan {\n    cursor: default;\n    box-sizing: border-box;\n\n    @include mixins.truncate-text;\n    text-align: center;\n    font-size: functions.pxToRem(11);\n    line-height: var(--limel-min-badge-size);\n\n    color: var(--badge-text-color, rgb(var(--contrast-1200)));\n\n    border-radius: var(--limel-min-badge-size);\n    max-height: var(--limel-min-badge-size);\n    min-width: 0.5rem;\n    min-height: 0.5rem;\n\n    background-color: var(--badge-background-color, rgb(var(--contrast-500)));\n\n    &:not(:empty) {\n        min-width: var(\n            --limel-min-badge-size\n        ); // ensures that a badge with only one character rendered as perfect circle\n        max-width: 2.75rem;\n        padding: 0 functions.pxToRem(4.5);\n    }\n}\n\n:host(.has-large-label) {\n    span {\n        cursor: help;\n    }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { abbreviate } from './format';\n\n/**\n * The Badge component can be used to display a notification badge,\n * optionally with a number or a text label.\n *\n * @exampleComponent limel-example-badge\n * @exampleComponent limel-example-badge-number\n * @exampleComponent limel-example-badge-string\n */\n@Component({\n    tag: 'limel-badge',\n    styleUrl: 'badge.scss',\n    shadow: true,\n})\nexport class Badge {\n    /**\n     * Label to display in the badge.\n     * Numeric labels larger than 999 will be rounded and abbreviated.\n     * String labels get truncated if their length is longer than\n     * six characters.\n     */\n    @Prop({ reflect: true })\n    public label?: number | string;\n\n    public render() {\n        return (\n            <Host\n                title={this.labelIsLarge() ? this.label : ''}\n                class={{\n                    'has-large-label': this.labelIsLarge(),\n                }}\n            >\n                <span>{this.renderLabel()}</span>\n            </Host>\n        );\n    }\n\n    private renderLabel() {\n        if (typeof this.label === 'number') {\n            return abbreviate(this.label);\n        }\n\n        return this.label;\n    }\n\n    private labelIsLarge() {\n        const largeNumericLabel = 999;\n        const largeStringLabel = 6;\n        if (\n            (typeof this.label === 'number' &&\n                this.label > largeNumericLabel) ||\n            (typeof this.label === 'string' &&\n                this.label.length > largeStringLabel)\n        ) {\n            return true;\n        }\n    }\n}\n","export function getOwnerElement(\n    id: string,\n    startingPoint: Node,\n): HTMLElement | undefined {\n    let element: Node = startingPoint;\n\n    do {\n        element = element.parentNode;\n    } while (\n        element &&\n        element.nodeType !== Node.DOCUMENT_FRAGMENT_NODE &&\n        element.nodeType !== Node.DOCUMENT_NODE\n    );\n\n    return (element as ShadowRoot)?.getElementById(id);\n}\n","const DEFAULT_DELAY_FOR_SHOWING = 500;\n\nexport class TooltipTimer {\n    private timerHandle: number | null = null;\n    private showCallback: Function;\n    private hideCallback: Function;\n    private delayForShowing: number;\n\n    constructor(\n        showCallback: Function,\n        hideCallback: Function,\n        delayForShowing: number = DEFAULT_DELAY_FOR_SHOWING,\n    ) {\n        this.showCallback = showCallback;\n        this.hideCallback = hideCallback;\n        this.delayForShowing = delayForShowing;\n    }\n\n    showAfterDelay(): void {\n        if (!this.timerHandle) {\n            this.timerHandle = setTimeout(\n                this.showCallback,\n                this.delayForShowing,\n            );\n        }\n    }\n\n    hide(): void {\n        clearTimeout(this.timerHandle);\n        this.timerHandle = null;\n        this.hideCallback();\n    }\n}\n","/**\n * @prop --tooltip-z-index: z-index of the tooltip.\n */\n\n:host(limel-tooltip) {\n    // Absolutely positioning ensures that this invisible element\n    // does not occupy visible space in the UI.\n    // Without this, `limel-tooltip` could in many cases\n    // mess up the layout, where it is used.\n    // For example, inside a `grid` or `flex` section,\n    // every instance of the tooltip would take some space,\n    // creating gaps and empty holes.\n    position: absolute;\n    pointer-events: none;\n}\n","import { Component, h, Prop, Element, State } from '@stencil/core';\nimport { JSX } from 'react';\nimport { createRandomString } from '../../util/random-string';\nimport { OpenDirection } from '../menu/menu.types';\nimport { getOwnerElement } from './getOwnerElement';\nimport { TooltipTimer } from './tooltipTimer';\n\nconst DEFAULT_MAX_LENGTH = 50;\n\n/**\n * A tooltip can be used to display a descriptive text for any element.\n * The displayed content must be a brief and supplemental string of text,\n * identifying the element or describing its function for the user,\n * helping them better understand unfamiliar objects that aren't described\n * directly in the UI.\n *\n * ## Interaction\n * The tooltip appears after a slight delay, when the element is hovered;\n * and disappears as soon as the cursor leaves the element.\n * Therefore, users cannot interact with the tip, but if the trigger element\n * itself is interactive, it will remain interactible even with a tooltip bound\n * to it.\n *\n * :::note\n * In order to display the tooltip, the tooltip element and its trigger element\n * must be within the same document or document fragment (the same shadowRoot).\n * Often, it's easiest to just place them next to each other like in the example\n * below, but if you need to, you can place them differently.\n *\n * ```html\n * <limel-button icon=\"search\" id=\"tooltip-example\" />\n * <limel-tooltip label=\"Search\" elementId=\"tooltip-example\" />\n * ```\n * :::\n *\n * ## Usage\n * - Keep in mind that tooltips can be distracting, and can be perceived as an interruption.\n * Use them only when they add significant value.\n * - A good tip is concise, helpful, and informative.\n * Don't explain the obvious or simply repeat what is already on the screen.\n * When used correctly, supplemental info of a tooltip helps to [declutter the UI](/#/DesignGuidelines/decluttering.md/).\n * - If the tip is essential to the primary tasks that the user is performing,\n * such as warnings or important notes, include the information directly in the\n * interface instead.\n * - When a component offers a helper text (e.g. [Input field](/#/component/limel-input-field/)),\n * use that, not a tooltip.\n * - Make sure to use the tooltip on an element that users naturally and\n * effortlessly recognize can be hovered.\n *\n * @exampleComponent limel-example-tooltip-basic\n * @exampleComponent limel-example-tooltip-max-character\n * @exampleComponent limel-example-tooltip-composite\n */\n@Component({\n    tag: 'limel-tooltip',\n    shadow: true,\n    styleUrl: 'tooltip.scss',\n})\nexport class Tooltip {\n    /**\n     * ID of the owner element that the tooltip should describe.\n     * Must be a child within the same document fragment as the tooltip element\n     * itself.\n     */\n    @Prop({ reflect: true })\n    public elementId!: string;\n\n    /**\n     * Short descriptive text of the owner element.\n     */\n    @Prop({ reflect: true })\n    public label!: string;\n\n    /**\n     * Additional helper text for the element.\n     * Example usage can be a keyboard shortcut to activate the function of the\n     * owner element.\n     */\n    @Prop({ reflect: true })\n    public helperLabel?: string;\n\n    /**\n     * The maximum amount of characters before rendering 'label' and\n     * 'helperLabel' in two rows.\n     */\n    @Prop({ reflect: true })\n    public maxlength?: number = DEFAULT_MAX_LENGTH;\n\n    /**\n     * Decides the tooltip's location in relation to its trigger.\n     */\n    @Prop({ reflect: true })\n    public openDirection: OpenDirection = 'top';\n\n    @Element()\n    private host: HTMLLimelTooltipElement;\n\n    @State()\n    private open: boolean;\n\n    private portalId: string;\n    private tooltipId: string;\n    private ownerElement: HTMLElement;\n    private tooltipTimer: TooltipTimer;\n\n    public constructor() {\n        this.portalId = createRandomString();\n        this.tooltipId = createRandomString();\n        this.tooltipTimer = new TooltipTimer(\n            () => (this.open = true),\n            () => (this.open = false),\n        );\n    }\n\n    public connectedCallback() {\n        this.ownerElement = getOwnerElement(this.elementId, this.host);\n        this.setOwnerAriaLabel();\n        this.addListeners();\n    }\n\n    public disconnectedCallback() {\n        this.removeListeners();\n    }\n\n    public render(): JSX.Element {\n        const tooltipZIndex = getComputedStyle(this.host).getPropertyValue(\n            '--tooltip-z-index',\n        );\n\n        return (\n            <div class=\"trigger-anchor\">\n                <limel-portal\n                    openDirection={this.openDirection}\n                    visible={this.open}\n                    containerId={this.portalId}\n                    containerStyle={{\n                        'z-index': tooltipZIndex,\n                        'pointer-events': 'none',\n                    }}\n                    anchor={this.ownerElement}\n                >\n                    <limel-tooltip-content\n                        label={this.label}\n                        helperLabel={this.helperLabel}\n                        maxlength={this.maxlength}\n                        role=\"tooltip\"\n                        aria-hidden={!this.open}\n                        id={this.tooltipId}\n                    />\n                </limel-portal>\n            </div>\n        );\n    }\n\n    private setOwnerAriaLabel() {\n        this.ownerElement?.setAttribute('aria-describedby', this.tooltipId);\n    }\n\n    private addListeners() {\n        this.ownerElement?.addEventListener('mouseover', this.showTooltip);\n        this.ownerElement?.addEventListener('mouseout', this.hideTooltip);\n        this.ownerElement?.addEventListener('focus', this.showTooltip);\n        this.ownerElement?.addEventListener('blur', this.hideTooltip);\n    }\n\n    private removeListeners() {\n        this.ownerElement?.removeEventListener('mouseover', this.showTooltip);\n        this.ownerElement?.removeEventListener('mouseout', this.hideTooltip);\n        this.ownerElement?.removeEventListener('focus', this.showTooltip);\n        this.ownerElement?.removeEventListener('blur', this.hideTooltip);\n    }\n\n    private showTooltip = () => {\n        this.tooltipTimer.showAfterDelay();\n    };\n\n    private hideTooltip = () => {\n        this.tooltipTimer.hide();\n    };\n}\n",":host(limel-tooltip-content) {\n    display: flex;\n\n    border-radius: 0.25rem;\n    padding: 0.25rem 0.5rem;\n    background-color: rgb(var(--contrast-1300));\n    box-shadow: var(--shadow-depth-16);\n}\n\ntext {\n    font-size: 0.875rem; // 14px\n    line-height: 1.25;\n    display: flex;\n    column-gap: 1rem;\n\n    &.has-column-layout {\n        display: table-cell;\n        width: fit-content;\n        max-width: min(var(--tooltip-max-width-of-text), 80vw);\n        .label {\n            padding-bottom: 0.5rem;\n        }\n        .helper-label {\n            padding-bottom: 0.25rem;\n        }\n    }\n}\n\n.label {\n    color: rgb(var(--contrast-200));\n}\n\n.helper-label {\n    color: rgb(var(--contrast-800));\n\n    &:empty {\n        display: none;\n    }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * This component is used internally by `limel-tooltip`.\n *\n * @private\n */\n@Component({\n    tag: 'limel-tooltip-content',\n    shadow: true,\n    styleUrl: 'tooltip-content.scss',\n})\nexport class TooltipContent {\n    /**\n     * Read more in tooltip.tsx\n     */\n    @Prop({ reflect: true })\n    label!: string;\n\n    /**\n     * Read more in tooltip.tsx\n     */\n    @Prop({ reflect: true })\n    helperLabel?: string;\n\n    /**\n     * Read more in tooltip.tsx\n     */\n    @Prop({ reflect: true })\n    maxlength?: number;\n\n    public render() {\n        let isLabelsTextLong = false;\n        if (this.helperLabel && this.maxlength) {\n            isLabelsTextLong =\n                this.label.length + this.helperLabel.length > this.maxlength;\n        }\n\n        const props: any = {};\n        if (this.maxlength) {\n            props.style = {\n                '--tooltip-max-width-of-text': `${this.maxlength}` + 'ch',\n            };\n        }\n\n        return [\n            <text class={{ 'has-column-layout': isLabelsTextLong }} {...props}>\n                <div class=\"label\">{this.label}</div>\n                <div class=\"helper-label\">{this.helperLabel}</div>\n            </text>,\n        ];\n    }\n}\n"],"version":3}
+{"file":"limel-badge.limel-tooltip.limel-tooltip-content.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,QAAQ,GAAG,g9DAAg9D;;MCgBp9D,KAAK;;;;;EAUP,MAAM;IACT,QACIA,QAACC,UAAI,IACD,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,EAC5C,KAAK,EAAE;QACH,iBAAiB,EAAE,IAAI,CAAC,YAAY,EAAE;OACzC,IAEDD,sBAAO,IAAI,CAAC,WAAW,EAAE,CAAQ,CAC9B,EACT;GACL;EAEO,WAAW;IACf,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;MAChC,OAAOE,iBAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACjC;IAED,OAAO,IAAI,CAAC,KAAK,CAAC;GACrB;EAEO,YAAY;IAChB,MAAM,iBAAiB,GAAG,GAAG,CAAC;IAC9B,MAAM,gBAAgB,GAAG,CAAC,CAAC;IAC3B,IACI,CAAC,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ;MAC3B,IAAI,CAAC,KAAK,GAAG,iBAAiB;OACjC,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ;QAC3B,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,gBAAgB,CAAC,EAC3C;MACE,OAAO,IAAI,CAAC;KACf;GACJ;;;;SC1DW,eAAe,CAC3B,EAAU,EACV,aAAmB;EAEnB,IAAI,OAAO,GAAS,aAAa,CAAC;EAElC,GAAG;IACC,OAAO,GAAG,OAAO,CAAC,UAAU,CAAC;GAChC,QACG,OAAO;IACP,OAAO,CAAC,QAAQ,KAAK,IAAI,CAAC,sBAAsB;IAChD,OAAO,CAAC,QAAQ,KAAK,IAAI,CAAC,aAAa,EACzC;EAEF,OAAQ,OAAsB,aAAtB,OAAO,uBAAP,OAAO,CAAiB,cAAc,CAAC,EAAE,CAAC,CAAC;AACvD;;ACfA,MAAM,yBAAyB,GAAG,GAAG,CAAC;MAEzB,YAAY;EAMrB,YACI,YAAsB,EACtB,YAAsB,EACtB,kBAA0B,yBAAyB;IAR/C,gBAAW,GAAkB,IAAI,CAAC;IAUtC,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;IACjC,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;IACjC,IAAI,CAAC,eAAe,GAAG,eAAe,CAAC;GAC1C;EAED,cAAc;IACV,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;MACnB,IAAI,CAAC,WAAW,GAAG,UAAU,CACzB,IAAI,CAAC,YAAY,EACjB,IAAI,CAAC,eAAe,CACvB,CAAC;KACL;GACJ;EAED,IAAI;IACA,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC/B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;IACxB,IAAI,CAAC,YAAY,EAAE,CAAC;GACvB;;;AC/BL,MAAM,UAAU,GAAG,6DAA6D;;ACOhF,MAAM,kBAAkB,GAAG,EAAE,CAAC;MAmDjB,OAAO;EA+ChB;;IAmEQ,gBAAW,GAAG;MAClB,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,CAAC;KACtC,CAAC;IAEM,gBAAW,GAAG;MAClB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;KAC5B,CAAC;;;;qBA5F0B,kBAAkB;yBAMR,KAAK;;IAcvC,IAAI,CAAC,QAAQ,GAAGC,+BAAkB,EAAE,CAAC;IACrC,IAAI,CAAC,SAAS,GAAGA,+BAAkB,EAAE,CAAC;IACtC,IAAI,CAAC,YAAY,GAAG,IAAI,YAAY,CAChC,OAAO,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,EACxB,OAAO,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,CAC5B,CAAC;GACL;EAEM,iBAAiB;IACpB,IAAI,CAAC,YAAY,GAAG,eAAe,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/D,IAAI,CAAC,iBAAiB,EAAE,CAAC;IACzB,IAAI,CAAC,YAAY,EAAE,CAAC;GACvB;EAEM,oBAAoB;IACvB,IAAI,CAAC,eAAe,EAAE,CAAC;GAC1B;EAEM,MAAM;IACT,MAAM,aAAa,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAC9D,mBAAmB,CACtB,CAAC;IAEF,QACIH,iBAAK,KAAK,EAAC,gBAAgB,IACvBA,0BACI,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,WAAW,EAAE,IAAI,CAAC,QAAQ,EAC1B,cAAc,EAAE;QACZ,SAAS,EAAE,aAAa;QACxB,gBAAgB,EAAE,MAAM;OAC3B,EACD,MAAM,EAAE,IAAI,CAAC,YAAY,IAEzBA,mCACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAC,SAAS,iBACD,CAAC,IAAI,CAAC,IAAI,EACvB,EAAE,EAAE,IAAI,CAAC,SAAS,GACpB,CACS,CACb,EACR;GACL;EAEO,iBAAiB;;IACrB,MAAA,IAAI,CAAC,YAAY,0CAAE,YAAY,CAAC,kBAAkB,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;GACvE;EAEO,YAAY;;IAChB,MAAA,IAAI,CAAC,YAAY,0CAAE,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IACnE,MAAA,IAAI,CAAC,YAAY,0CAAE,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IAClE,MAAA,IAAI,CAAC,YAAY,0CAAE,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IAC/D,MAAA,IAAI,CAAC,YAAY,0CAAE,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;GACjE;EAEO,eAAe;;IACnB,MAAA,IAAI,CAAC,YAAY,0CAAE,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IACtE,MAAA,IAAI,CAAC,YAAY,0CAAE,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IACrE,MAAA,IAAI,CAAC,YAAY,0CAAE,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IAClE,MAAA,IAAI,CAAC,YAAY,0CAAE,mBAAmB,CAAC,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;GACpE;;;;;AC1KL,MAAM,iBAAiB,GAAG,kkBAAkkB;;MCY/kB,cAAc;;;;;;;EAmBhB,MAAM;IACT,IAAI,gBAAgB,GAAG,KAAK,CAAC;IAC7B,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,EAAE;MACpC,gBAAgB;QACZ,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC;KACpE;IAED,MAAM,KAAK,GAAQ,EAAE,CAAC;IACtB,IAAI,IAAI,CAAC,SAAS,EAAE;MAChB,KAAK,CAAC,KAAK,GAAG;QACV,6BAA6B,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,IAAI;OAC5D,CAAC;KACL;IAED,OAAO;MACHA,gCAAM,KAAK,EAAE,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,IAAM,KAAK,GAC7DA,iBAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAO,EACrCA,iBAAK,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,WAAW,CAAO,CAC/C;KACV,CAAC;GACL;;;;;;;;","names":["h","Host","abbreviate","createRandomString"],"sources":["./src/components/badge/badge.scss?tag=limel-badge&encapsulation=shadow","./src/components/badge/badge.tsx","./src/components/tooltip/getOwnerElement.tsx","./src/components/tooltip/tooltipTimer.ts","./src/components/tooltip/tooltip.scss?tag=limel-tooltip&encapsulation=shadow","./src/components/tooltip/tooltip.tsx","./src/components/tooltip/tooltip-content.scss?tag=limel-tooltip-content&encapsulation=shadow","./src/components/tooltip/tooltip-content.tsx"],"sourcesContent":["@use '../../style/functions';\n@use '../../style/internal/lime-theme';\n@use '../../style/mixins';\n\n/**\n * @prop --badge-background-color: badge background color\n * @prop --badge-text-color: badge text color\n * @prop --badge-max-width: maximum width of the badge, before its text gets truncated\n */\n\n:host([hidden]) {\n    display: none;\n}\n\n:host(limel-badge) {\n    --limel-min-badge-size: 1rem;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    flex-shrink: 0;\n    min-height: var(--limel-min-badge-size);\n    min-width: var(--limel-min-badge-size);\n}\n\nspan {\n    cursor: default;\n    box-sizing: border-box;\n\n    @include mixins.truncate-text;\n    text-align: center;\n    font-size: functions.pxToRem(11);\n    line-height: var(--limel-min-badge-size);\n\n    color: var(--badge-text-color, rgb(var(--contrast-1200)));\n\n    border-radius: var(--limel-min-badge-size);\n    max-height: var(--limel-min-badge-size);\n    min-width: 0.5rem;\n    min-height: 0.5rem;\n\n    background-color: var(--badge-background-color, rgb(var(--contrast-500)));\n\n    &:not(:empty) {\n        min-width: var(\n            --limel-min-badge-size\n        ); // ensures that a badge with only one character rendered as perfect circle\n        max-width: var(--badge-max-width, 2.75rem);\n        padding: 0 functions.pxToRem(4.5);\n    }\n}\n\n:host(.has-large-label) {\n    span {\n        cursor: help;\n    }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { abbreviate } from './format';\n\n/**\n * The Badge component can be used to display a notification badge,\n * optionally with a number or a text label.\n *\n * @exampleComponent limel-example-badge\n * @exampleComponent limel-example-badge-number\n * @exampleComponent limel-example-badge-string\n */\n@Component({\n    tag: 'limel-badge',\n    styleUrl: 'badge.scss',\n    shadow: true,\n})\nexport class Badge {\n    /**\n     * Label to display in the badge.\n     * Numeric labels larger than 999 will be rounded and abbreviated.\n     * String labels get truncated if their length is longer than\n     * six characters.\n     */\n    @Prop({ reflect: true })\n    public label?: number | string;\n\n    public render() {\n        return (\n            <Host\n                title={this.labelIsLarge() ? this.label : ''}\n                class={{\n                    'has-large-label': this.labelIsLarge(),\n                }}\n            >\n                <span>{this.renderLabel()}</span>\n            </Host>\n        );\n    }\n\n    private renderLabel() {\n        if (typeof this.label === 'number') {\n            return abbreviate(this.label);\n        }\n\n        return this.label;\n    }\n\n    private labelIsLarge() {\n        const largeNumericLabel = 999;\n        const largeStringLabel = 6;\n        if (\n            (typeof this.label === 'number' &&\n                this.label > largeNumericLabel) ||\n            (typeof this.label === 'string' &&\n                this.label.length > largeStringLabel)\n        ) {\n            return true;\n        }\n    }\n}\n","export function getOwnerElement(\n    id: string,\n    startingPoint: Node,\n): HTMLElement | undefined {\n    let element: Node = startingPoint;\n\n    do {\n        element = element.parentNode;\n    } while (\n        element &&\n        element.nodeType !== Node.DOCUMENT_FRAGMENT_NODE &&\n        element.nodeType !== Node.DOCUMENT_NODE\n    );\n\n    return (element as ShadowRoot)?.getElementById(id);\n}\n","const DEFAULT_DELAY_FOR_SHOWING = 500;\n\nexport class TooltipTimer {\n    private timerHandle: number | null = null;\n    private showCallback: Function;\n    private hideCallback: Function;\n    private delayForShowing: number;\n\n    constructor(\n        showCallback: Function,\n        hideCallback: Function,\n        delayForShowing: number = DEFAULT_DELAY_FOR_SHOWING,\n    ) {\n        this.showCallback = showCallback;\n        this.hideCallback = hideCallback;\n        this.delayForShowing = delayForShowing;\n    }\n\n    showAfterDelay(): void {\n        if (!this.timerHandle) {\n            this.timerHandle = setTimeout(\n                this.showCallback,\n                this.delayForShowing,\n            );\n        }\n    }\n\n    hide(): void {\n        clearTimeout(this.timerHandle);\n        this.timerHandle = null;\n        this.hideCallback();\n    }\n}\n","/**\n * @prop --tooltip-z-index: z-index of the tooltip.\n */\n\n:host(limel-tooltip) {\n    // Absolutely positioning ensures that this invisible element\n    // does not occupy visible space in the UI.\n    // Without this, `limel-tooltip` could in many cases\n    // mess up the layout, where it is used.\n    // For example, inside a `grid` or `flex` section,\n    // every instance of the tooltip would take some space,\n    // creating gaps and empty holes.\n    position: absolute;\n    pointer-events: none;\n}\n","import { Component, h, Prop, Element, State } from '@stencil/core';\nimport { JSX } from 'react';\nimport { createRandomString } from '../../util/random-string';\nimport { OpenDirection } from '../menu/menu.types';\nimport { getOwnerElement } from './getOwnerElement';\nimport { TooltipTimer } from './tooltipTimer';\n\nconst DEFAULT_MAX_LENGTH = 50;\n\n/**\n * A tooltip can be used to display a descriptive text for any element.\n * The displayed content must be a brief and supplemental string of text,\n * identifying the element or describing its function for the user,\n * helping them better understand unfamiliar objects that aren't described\n * directly in the UI.\n *\n * ## Interaction\n * The tooltip appears after a slight delay, when the element is hovered;\n * and disappears as soon as the cursor leaves the element.\n * Therefore, users cannot interact with the tip, but if the trigger element\n * itself is interactive, it will remain interactible even with a tooltip bound\n * to it.\n *\n * :::note\n * In order to display the tooltip, the tooltip element and its trigger element\n * must be within the same document or document fragment (the same shadowRoot).\n * Often, it's easiest to just place them next to each other like in the example\n * below, but if you need to, you can place them differently.\n *\n * ```html\n * <limel-button icon=\"search\" id=\"tooltip-example\" />\n * <limel-tooltip label=\"Search\" elementId=\"tooltip-example\" />\n * ```\n * :::\n *\n * ## Usage\n * - Keep in mind that tooltips can be distracting, and can be perceived as an interruption.\n * Use them only when they add significant value.\n * - A good tip is concise, helpful, and informative.\n * Don't explain the obvious or simply repeat what is already on the screen.\n * When used correctly, supplemental info of a tooltip helps to [declutter the UI](/#/DesignGuidelines/decluttering.md/).\n * - If the tip is essential to the primary tasks that the user is performing,\n * such as warnings or important notes, include the information directly in the\n * interface instead.\n * - When a component offers a helper text (e.g. [Input field](/#/component/limel-input-field/)),\n * use that, not a tooltip.\n * - Make sure to use the tooltip on an element that users naturally and\n * effortlessly recognize can be hovered.\n *\n * @exampleComponent limel-example-tooltip-basic\n * @exampleComponent limel-example-tooltip-max-character\n * @exampleComponent limel-example-tooltip-composite\n */\n@Component({\n    tag: 'limel-tooltip',\n    shadow: true,\n    styleUrl: 'tooltip.scss',\n})\nexport class Tooltip {\n    /**\n     * ID of the owner element that the tooltip should describe.\n     * Must be a child within the same document fragment as the tooltip element\n     * itself.\n     */\n    @Prop({ reflect: true })\n    public elementId!: string;\n\n    /**\n     * Short descriptive text of the owner element.\n     */\n    @Prop({ reflect: true })\n    public label!: string;\n\n    /**\n     * Additional helper text for the element.\n     * Example usage can be a keyboard shortcut to activate the function of the\n     * owner element.\n     */\n    @Prop({ reflect: true })\n    public helperLabel?: string;\n\n    /**\n     * The maximum amount of characters before rendering 'label' and\n     * 'helperLabel' in two rows.\n     */\n    @Prop({ reflect: true })\n    public maxlength?: number = DEFAULT_MAX_LENGTH;\n\n    /**\n     * Decides the tooltip's location in relation to its trigger.\n     */\n    @Prop({ reflect: true })\n    public openDirection: OpenDirection = 'top';\n\n    @Element()\n    private host: HTMLLimelTooltipElement;\n\n    @State()\n    private open: boolean;\n\n    private portalId: string;\n    private tooltipId: string;\n    private ownerElement: HTMLElement;\n    private tooltipTimer: TooltipTimer;\n\n    public constructor() {\n        this.portalId = createRandomString();\n        this.tooltipId = createRandomString();\n        this.tooltipTimer = new TooltipTimer(\n            () => (this.open = true),\n            () => (this.open = false),\n        );\n    }\n\n    public connectedCallback() {\n        this.ownerElement = getOwnerElement(this.elementId, this.host);\n        this.setOwnerAriaLabel();\n        this.addListeners();\n    }\n\n    public disconnectedCallback() {\n        this.removeListeners();\n    }\n\n    public render(): JSX.Element {\n        const tooltipZIndex = getComputedStyle(this.host).getPropertyValue(\n            '--tooltip-z-index',\n        );\n\n        return (\n            <div class=\"trigger-anchor\">\n                <limel-portal\n                    openDirection={this.openDirection}\n                    visible={this.open}\n                    containerId={this.portalId}\n                    containerStyle={{\n                        'z-index': tooltipZIndex,\n                        'pointer-events': 'none',\n                    }}\n                    anchor={this.ownerElement}\n                >\n                    <limel-tooltip-content\n                        label={this.label}\n                        helperLabel={this.helperLabel}\n                        maxlength={this.maxlength}\n                        role=\"tooltip\"\n                        aria-hidden={!this.open}\n                        id={this.tooltipId}\n                    />\n                </limel-portal>\n            </div>\n        );\n    }\n\n    private setOwnerAriaLabel() {\n        this.ownerElement?.setAttribute('aria-describedby', this.tooltipId);\n    }\n\n    private addListeners() {\n        this.ownerElement?.addEventListener('mouseover', this.showTooltip);\n        this.ownerElement?.addEventListener('mouseout', this.hideTooltip);\n        this.ownerElement?.addEventListener('focus', this.showTooltip);\n        this.ownerElement?.addEventListener('blur', this.hideTooltip);\n    }\n\n    private removeListeners() {\n        this.ownerElement?.removeEventListener('mouseover', this.showTooltip);\n        this.ownerElement?.removeEventListener('mouseout', this.hideTooltip);\n        this.ownerElement?.removeEventListener('focus', this.showTooltip);\n        this.ownerElement?.removeEventListener('blur', this.hideTooltip);\n    }\n\n    private showTooltip = () => {\n        this.tooltipTimer.showAfterDelay();\n    };\n\n    private hideTooltip = () => {\n        this.tooltipTimer.hide();\n    };\n}\n",":host(limel-tooltip-content) {\n    display: flex;\n\n    border-radius: 0.25rem;\n    padding: 0.25rem 0.5rem;\n    background-color: rgb(var(--contrast-1300));\n    box-shadow: var(--shadow-depth-16);\n}\n\ntext {\n    font-size: 0.875rem; // 14px\n    line-height: 1.25;\n    display: flex;\n    column-gap: 1rem;\n\n    &.has-column-layout {\n        display: table-cell;\n        width: fit-content;\n        max-width: min(var(--tooltip-max-width-of-text), 80vw);\n        .label {\n            padding-bottom: 0.5rem;\n        }\n        .helper-label {\n            padding-bottom: 0.25rem;\n        }\n    }\n}\n\n.label {\n    color: rgb(var(--contrast-200));\n}\n\n.helper-label {\n    color: rgb(var(--contrast-800));\n\n    &:empty {\n        display: none;\n    }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * This component is used internally by `limel-tooltip`.\n *\n * @private\n */\n@Component({\n    tag: 'limel-tooltip-content',\n    shadow: true,\n    styleUrl: 'tooltip-content.scss',\n})\nexport class TooltipContent {\n    /**\n     * Read more in tooltip.tsx\n     */\n    @Prop({ reflect: true })\n    label!: string;\n\n    /**\n     * Read more in tooltip.tsx\n     */\n    @Prop({ reflect: true })\n    helperLabel?: string;\n\n    /**\n     * Read more in tooltip.tsx\n     */\n    @Prop({ reflect: true })\n    maxlength?: number;\n\n    public render() {\n        let isLabelsTextLong = false;\n        if (this.helperLabel && this.maxlength) {\n            isLabelsTextLong =\n                this.label.length + this.helperLabel.length > this.maxlength;\n        }\n\n        const props: any = {};\n        if (this.maxlength) {\n            props.style = {\n                '--tooltip-max-width-of-text': `${this.maxlength}` + 'ch',\n            };\n        }\n\n        return [\n            <text class={{ 'has-column-layout': isLabelsTextLong }} {...props}>\n                <div class=\"label\">{this.label}</div>\n                <div class=\"helper-label\">{this.helperLabel}</div>\n            </text>,\n        ];\n    }\n}\n"],"version":3}

package/dist/cjs/limel-markdown.cjs.entry.js

@@ -7,7 +7,7 @@ const markdownParser = require('./markdown-parser-89b425cf.js');
 const config = require('./config-e7e1a299.js');
 require('./_commonjsHelpers-0c557e26.js');
 
-const markdownCss = "@charset \"UTF-8\";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}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}: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))}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}: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}:host(limel-markdown:not(.no-table-styles)) tbody{border:1px solid rgb(var(--contrast-400));border-radius:0.25rem}: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))}table{display:block;box-sizing:border-box;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}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}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}img{max-width:100%;border-radius:0.25rem}kbd{font-family:ui-monospace, \"Cascadia Code\", \"Source Code Pro\", Menlo, Consolas, \"DejaVu Sans Mono\", monospace;font-weight:600;color:rgb(var(--contrast-1100));background-color:rgb(var(--contrast-200));white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:normal;padding:0.125rem 0.5rem;margin:0 0.25rem;box-shadow:var(--button-shadow-normal), 0 0.03125rem 0.21875rem 0 rgba(var(--contrast-100), 0.5) inset;border-radius:0.125rem;border-style:solid;border-color:rgba(var(--contrast-600), 0.8);border-width:0 1px 0.125rem 1px}:host(limel-markdown.adjust-for-table-cell) img{max-height:1.25rem;vertical-align:middle}:host(limel-markdown.adjust-for-table-cell) p{display:inline}:host(limel-markdown.adjust-for-table-cell) h1,:host(limel-markdown.adjust-for-table-cell) h2,:host(limel-markdown.adjust-for-table-cell) h3,:host(limel-markdown.adjust-for-table-cell) h4,:host(limel-markdown.adjust-for-table-cell) h5,:host(limel-markdown.adjust-for-table-cell) h6{display:inline-block;vertical-align:bottom;font-size:0.875rem;margin:0 0.25rem 0 0;letter-spacing:normal;font-weight:500}:host(limel-markdown.adjust-for-table-cell) h1:before,:host(limel-markdown.adjust-for-table-cell) h2:before,:host(limel-markdown.adjust-for-table-cell) h3:before,:host(limel-markdown.adjust-for-table-cell) h4:before,:host(limel-markdown.adjust-for-table-cell) h5:before,:host(limel-markdown.adjust-for-table-cell) h6:before{opacity:0.6;vertical-align:middle;font-size:0.5rem;border-radius:0.25rem 0 0 0.25rem;padding:0.25rem;padding-right:2rem;margin-right:-1.75rem;background:linear-gradient(to right, rgb(var(--contrast-800), 0.6), rgb(var(--contrast-800), 0))}:host(limel-markdown.adjust-for-table-cell) h1:before{content:\"H1\"}:host(limel-markdown.adjust-for-table-cell) h2:before{content:\"H2\"}:host(limel-markdown.adjust-for-table-cell) h3:before{content:\"H3\"}:host(limel-markdown.adjust-for-table-cell) h4:before{content:\"H4\"}:host(limel-markdown.adjust-for-table-cell) h5:before{content:\"H5\"}:host(limel-markdown.adjust-for-table-cell) h6:before{content:\"H6\"}:host(limel-markdown.adjust-for-table-cell) pre{margin:0}:host(limel-markdown.adjust-for-table-cell) pre>code{padding:0.125rem;margin:0}:host(limel-markdown.adjust-for-table-cell) dl{margin:0}:host(limel-markdown.adjust-for-table-cell) dl dt,:host(limel-markdown.adjust-for-table-cell) dl dd{padding:0.00625rem 0.125rem}hr{border-top:1px solid rgb(var(--contrast-700))}.MsoNormal{margin:0}";
+const markdownCss = "@charset \"UTF-8\";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}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}:host(limel-markdown.truncate-paragraphs) p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}p,li{font-size:0.875rem;word-break:break-word}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))}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}: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}:host(limel-markdown:not(.no-table-styles)) tbody{border:1px solid rgb(var(--contrast-400));border-radius:0.25rem}: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))}table{display:block;box-sizing:border-box;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}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}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}img{max-width:100%;border-radius:0.25rem}kbd{font-family:ui-monospace, \"Cascadia Code\", \"Source Code Pro\", Menlo, Consolas, \"DejaVu Sans Mono\", monospace;font-weight:600;color:rgb(var(--contrast-1100));background-color:rgb(var(--contrast-200));white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:normal;padding:0.125rem 0.5rem;margin:0 0.25rem;box-shadow:var(--button-shadow-normal), 0 0.03125rem 0.21875rem 0 rgba(var(--contrast-100), 0.5) inset;border-radius:0.125rem;border-style:solid;border-color:rgba(var(--contrast-600), 0.8);border-width:0 1px 0.125rem 1px}:host(limel-markdown.adjust-for-table-cell) img{max-height:1.25rem;vertical-align:middle}:host(limel-markdown.adjust-for-table-cell) p{display:inline}:host(limel-markdown.adjust-for-table-cell) h1,:host(limel-markdown.adjust-for-table-cell) h2,:host(limel-markdown.adjust-for-table-cell) h3,:host(limel-markdown.adjust-for-table-cell) h4,:host(limel-markdown.adjust-for-table-cell) h5,:host(limel-markdown.adjust-for-table-cell) h6{display:inline-block;vertical-align:bottom;font-size:0.875rem;margin:0 0.25rem 0 0;letter-spacing:normal;font-weight:500}:host(limel-markdown.adjust-for-table-cell) h1:before,:host(limel-markdown.adjust-for-table-cell) h2:before,:host(limel-markdown.adjust-for-table-cell) h3:before,:host(limel-markdown.adjust-for-table-cell) h4:before,:host(limel-markdown.adjust-for-table-cell) h5:before,:host(limel-markdown.adjust-for-table-cell) h6:before{opacity:0.6;vertical-align:middle;font-size:0.5rem;border-radius:0.25rem 0 0 0.25rem;padding:0.25rem;padding-right:2rem;margin-right:-1.75rem;background:linear-gradient(to right, rgb(var(--contrast-800), 0.6), rgb(var(--contrast-800), 0))}:host(limel-markdown.adjust-for-table-cell) h1:before{content:\"H1\"}:host(limel-markdown.adjust-for-table-cell) h2:before{content:\"H2\"}:host(limel-markdown.adjust-for-table-cell) h3:before{content:\"H3\"}:host(limel-markdown.adjust-for-table-cell) h4:before{content:\"H4\"}:host(limel-markdown.adjust-for-table-cell) h5:before{content:\"H5\"}:host(limel-markdown.adjust-for-table-cell) h6:before{content:\"H6\"}:host(limel-markdown.adjust-for-table-cell) pre{margin:0}:host(limel-markdown.adjust-for-table-cell) pre>code{padding:0.125rem;margin:0}:host(limel-markdown.adjust-for-table-cell) dl{margin:0}:host(limel-markdown.adjust-for-table-cell) dl dt,:host(limel-markdown.adjust-for-table-cell) dl dd{padding:0.00625rem 0.125rem}hr{border-top:1px solid rgb(var(--contrast-700))}.MsoNormal{margin:0}";
 
 const Markdown = class {
   constructor(hostRef) {

package/dist/cjs/limel-markdown.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"limel-markdown.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,WAAW,GAAG,uqNAAuqN;;MC6B9qN,QAAQ;;;;qBAmBbA,mBAAY,CAAC,iBAAiB;;EAG3B,MAAM,WAAW;;IACpB,IAAI;MACA,MAAM,IAAI,GAAG,MAAMC,6BAAc,CAAC,IAAI,CAAC,KAAK,EAAE;QAC1C,mBAAmB,EAAE,IAAI;QACzB,SAAS,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,EAAE;OAClC,CAAC,CAAC;MACH,IAAI,CAAC,WAAW,CAAC,SAAS,GAAG,IAAI,CAAC;KACrC;IAAC,OAAO,KAAK,EAAE;;MAEZ,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;KACxB;GACJ;EAEM,MAAM,gBAAgB;IACzB,IAAI,CAAC,WAAW,EAAE,CAAC;GACtB;EAIM,MAAM;IACT,OAAO;MACHC,iBACI,EAAE,EAAC,UAAU,EACb,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAoB,CAAC,GACxD;KACL,CAAC;GACL;;;;;;;;;","names":["globalConfig","markdownToHTML","h"],"sources":["./src/components/markdown/markdown.scss?tag=limel-markdown&encapsulation=shadow","./src/components/markdown/markdown.tsx"],"sourcesContent":["/**\n* @prop --markdown-hyperlink-color: color of text for hyperlinks. Defaults to `--color-blue-dark`;\n* @prop --markdown-hyperlink-color--hovered: color of text for hyperlinks when hovered. Defaults to `--color-blue-default`;\n*/\n\n@import './partial-styles/pre-code';\n@import './partial-styles/headings';\n@import './partial-styles/body-text';\n@import './partial-styles/lists';\n@import './partial-styles/tables';\n@import './partial-styles/blockquotes';\n@import './partial-styles/definition-lists';\n@import './partial-styles/img';\n@import './partial-styles/kbd';\n@import './partial-styles/_adjust-for-table-cell';\n\n// body-text\nhr {\n    border-top: 1px solid rgb(var(--contrast-700));\n}\n\n.MsoNormal {\n    margin: 0;\n}\n","import { Component, h, Prop, Watch } from '@stencil/core';\nimport { markdownToHTML } from './markdown-parser';\nimport { globalConfig } from '../../global/config';\nimport { CustomElementDefinition } from '../../global/shared-types/custom-element.types';\n\n/**\n * The Markdown component receives markdown syntax\n * and renders it as HTML.\n *\n * @exampleComponent limel-example-markdown-headings\n * @exampleComponent limel-example-markdown-emphasis\n * @exampleComponent limel-example-markdown-lists\n * @exampleComponent limel-example-markdown-links\n * @exampleComponent limel-example-markdown-images\n * @exampleComponent limel-example-markdown-code\n * @exampleComponent limel-example-markdown-footnotes\n * @exampleComponent limel-example-markdown-tables\n * @exampleComponent limel-example-markdown-html\n * @exampleComponent limel-example-markdown-keys\n * @exampleComponent limel-example-markdown-blockquotes\n * @exampleComponent limel-example-markdown-horizontal-rule\n * @exampleComponent limel-example-markdown-composite\n * @exampleComponent limel-example-markdown-custom-component\n */\n@Component({\n    tag: 'limel-markdown',\n    styleUrl: 'markdown.scss',\n    shadow: true,\n})\nexport class Markdown {\n    /**\n     * The input text. Treated as GitHub Flavored Markdown, with the addition\n     * that any included HTML will be parsed and rendered as HTML, rather than\n     * as text.\n     */\n    @Prop()\n    public value: string;\n\n    /**\n     * Whitelisted html elements.\n     *\n     * Any custom element added here will not be sanitized and thus rendered.\n     * Can also be set via `limel-config`. Setting this property will override\n     * the global config.\n     * @alpha\n     */\n    @Prop()\n    public whitelist?: CustomElementDefinition[] =\n        globalConfig.markdownWhitelist;\n\n    @Watch('value')\n    public async textChanged() {\n        try {\n            const html = await markdownToHTML(this.value, {\n                forceHardLineBreaks: true,\n                whitelist: this.whitelist ?? [],\n            });\n            this.rootElement.innerHTML = html;\n        } catch (error) {\n            // eslint-disable-next-line no-console\n            console.error(error);\n        }\n    }\n\n    public async componentDidLoad() {\n        this.textChanged();\n    }\n\n    private rootElement: HTMLDivElement;\n\n    public render() {\n        return [\n            <div\n                id=\"markdown\"\n                ref={(el) => (this.rootElement = el as HTMLDivElement)}\n            />,\n        ];\n    }\n}\n"],"version":3}
+{"file":"limel-markdown.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,WAAW,GAAG,qoNAAqoN;;MC6B5oN,QAAQ;;;;qBAmBbA,mBAAY,CAAC,iBAAiB;;EAG3B,MAAM,WAAW;;IACpB,IAAI;MACA,MAAM,IAAI,GAAG,MAAMC,6BAAc,CAAC,IAAI,CAAC,KAAK,EAAE;QAC1C,mBAAmB,EAAE,IAAI;QACzB,SAAS,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,EAAE;OAClC,CAAC,CAAC;MACH,IAAI,CAAC,WAAW,CAAC,SAAS,GAAG,IAAI,CAAC;KACrC;IAAC,OAAO,KAAK,EAAE;;MAEZ,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;KACxB;GACJ;EAEM,MAAM,gBAAgB;IACzB,IAAI,CAAC,WAAW,EAAE,CAAC;GACtB;EAIM,MAAM;IACT,OAAO;MACHC,iBACI,EAAE,EAAC,UAAU,EACb,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAoB,CAAC,GACxD;KACL,CAAC;GACL;;;;;;;;;","names":["globalConfig","markdownToHTML","h"],"sources":["./src/components/markdown/markdown.scss?tag=limel-markdown&encapsulation=shadow","./src/components/markdown/markdown.tsx"],"sourcesContent":["/**\n* @prop --markdown-hyperlink-color: color of text for hyperlinks. Defaults to `--color-blue-dark`;\n* @prop --markdown-hyperlink-color--hovered: color of text for hyperlinks when hovered. Defaults to `--color-blue-default`;\n*/\n\n@forward './partial-styles/pre-code';\n@forward './partial-styles/headings';\n@forward './partial-styles/body-text';\n@forward './partial-styles/lists';\n@forward './partial-styles/tables';\n@forward './partial-styles/blockquotes';\n@forward './partial-styles/definition-lists';\n@forward './partial-styles/img';\n@forward './partial-styles/kbd';\n@forward './partial-styles/_adjust-for-table-cell';\n\n// body-text\nhr {\n    border-top: 1px solid rgb(var(--contrast-700));\n}\n\n.MsoNormal {\n    margin: 0;\n}\n","import { Component, h, Prop, Watch } from '@stencil/core';\nimport { markdownToHTML } from './markdown-parser';\nimport { globalConfig } from '../../global/config';\nimport { CustomElementDefinition } from '../../global/shared-types/custom-element.types';\n\n/**\n * The Markdown component receives markdown syntax\n * and renders it as HTML.\n *\n * @exampleComponent limel-example-markdown-headings\n * @exampleComponent limel-example-markdown-emphasis\n * @exampleComponent limel-example-markdown-lists\n * @exampleComponent limel-example-markdown-links\n * @exampleComponent limel-example-markdown-images\n * @exampleComponent limel-example-markdown-code\n * @exampleComponent limel-example-markdown-footnotes\n * @exampleComponent limel-example-markdown-tables\n * @exampleComponent limel-example-markdown-html\n * @exampleComponent limel-example-markdown-keys\n * @exampleComponent limel-example-markdown-blockquotes\n * @exampleComponent limel-example-markdown-horizontal-rule\n * @exampleComponent limel-example-markdown-composite\n * @exampleComponent limel-example-markdown-custom-component\n */\n@Component({\n    tag: 'limel-markdown',\n    styleUrl: 'markdown.scss',\n    shadow: true,\n})\nexport class Markdown {\n    /**\n     * The input text. Treated as GitHub Flavored Markdown, with the addition\n     * that any included HTML will be parsed and rendered as HTML, rather than\n     * as text.\n     */\n    @Prop()\n    public value: string;\n\n    /**\n     * Whitelisted html elements.\n     *\n     * Any custom element added here will not be sanitized and thus rendered.\n     * Can also be set via `limel-config`. Setting this property will override\n     * the global config.\n     * @alpha\n     */\n    @Prop()\n    public whitelist?: CustomElementDefinition[] =\n        globalConfig.markdownWhitelist;\n\n    @Watch('value')\n    public async textChanged() {\n        try {\n            const html = await markdownToHTML(this.value, {\n                forceHardLineBreaks: true,\n                whitelist: this.whitelist ?? [],\n            });\n            this.rootElement.innerHTML = html;\n        } catch (error) {\n            // eslint-disable-next-line no-console\n            console.error(error);\n        }\n    }\n\n    public async componentDidLoad() {\n        this.textChanged();\n    }\n\n    private rootElement: HTMLDivElement;\n\n    public render() {\n        return [\n            <div\n                id=\"markdown\"\n                ref={(el) => (this.rootElement = el as HTMLDivElement)}\n            />,\n        ];\n    }\n}\n"],"version":3}

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

@@ -28316,7 +28316,7 @@ const getTableNodes = () => {
   });
 };
 
-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:flex;flex-direction:column}:host(limel-prosemirror-adapter) .toolbar{order:1}:host(limel-prosemirror-adapter) div#editor{order:2;height:100%;flex-grow:1}:host(limel-prosemirror-adapter) div[contenteditable=true]{height:100%}*{box-sizing:border-box}:host(limel-prosemirror-adapter:hover) .toolbar,:host(limel-prosemirror-adapter:focus-within) .toolbar{will-change:grid-template-rows}:host(limel-prosemirror-adapter:hover) limel-action-bar,:host(limel-prosemirror-adapter:focus-within) limel-action-bar{will-change:opacity, padding}.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}.toolbar{--action-bar-border-radius:0.25rem;border-radius:var(--action-bar-border-radius);flex-shrink:0;position:sticky;z-index:1;top:0;width:100%;display:grid;grid-template-rows:var(--limel-prosemirror-adapter-toolbar-grid-template-rows);transition-property:grid-template-rows;transition-duration:var(--limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration);transition-timing-function:var(--limel-prosemirror-adapter-toolbar-transition-timing-function);background-color:rgba(var(--contrast-200), 0.5);backdrop-filter:blur(0.5rem);-webkit-backdrop-filter:blur(0.5rem)}limel-action-bar{min-width:0;transition-property:padding, opacity;transition-duration:var(--limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration);transition-timing-function:var(--limel-prosemirror-adapter-toolbar-transition-timing-function);opacity:var(--limel-prosemirror-adapter-toolbar-opacity);padding:var(--limel-prosemirror-adapter-action-bar-padding-top-bottom, 0.125rem) 0.25rem;background-color:transparent;overflow:hidden}.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}limel-portal{width:25rem}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}:host(limel-markdown:not(.no-table-styles)) tbody{border:1px solid rgb(var(--contrast-400));border-radius:0.25rem}: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))}table{display:block;box-sizing:border-box;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}kbd{font-family:ui-monospace, \"Cascadia Code\", \"Source Code Pro\", Menlo, Consolas, \"DejaVu Sans Mono\", monospace;font-weight:600;color:rgb(var(--contrast-1100));background-color:rgb(var(--contrast-200));white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:normal;padding:0.125rem 0.5rem;margin:0 0.25rem;box-shadow:var(--button-shadow-normal), 0 0.03125rem 0.21875rem 0 rgba(var(--contrast-100), 0.5) inset;border-radius:0.125rem;border-style:solid;border-color:rgba(var(--contrast-600), 0.8);border-width:0 1px 0.125rem 1px}img{max-width:100%;border-radius:0.25rem}.image-wrapper{display:inline-flex;position:relative}.image-wrapper limel-linear-progress{position:absolute;inset:0.25rem auto auto 0.25rem;width:calc(100% - 0.5rem)}.image-wrapper img{transition:opacity 0.2s ease, scale 0.6s ease}.image-wrapper.state-failed,.image-wrapper.state-loading{background:url(\"data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill='rgba(186,186,192,0.16)' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>\");background-size:0.5rem}.image-wrapper.state-failed img,.image-wrapper.state-loading img{opacity:0.3;scale:0.98}.image-wrapper::before{pointer-events:none;content:\"\";display:block;position:absolute;inset:0;border-radius:0.25rem;transition:border-color 0.4s ease, opacity 0.2s ease, box-shadow 0.6s ease;border:1px dashed transparent;opacity:0.2}.image-wrapper.state-failed img{filter:grayscale(0.8)}.image-wrapper.state-failed:before{opacity:0.8;box-shadow:var(--shadow-error-state)}.image-wrapper:hover::before{opacity:0.8;box-shadow:var(--shadow-depth-8)}.image-wrapper:has(.resize-handle[aria-grabbed=true])::before{border-color:var(--mdc-theme-primary);opacity:0.8;box-shadow:var(--shadow-depth-16), var(--shadow-depth-8)}.resize-handle{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--mdc-theme-on-surface);background-color:rgb(var(--contrast-900));box-shadow:var(--button-shadow-normal);cursor:nwse-resize;position:absolute;display:flex;align-items:center;justify-content:center;width:0.5rem;height:0.5rem;border-radius:50%;opacity:0.6}.resize-handle:hover,.resize-handle:focus,.resize-handle:focus-visible{will-change:color, background-color, box-shadow, transform}.resize-handle:hover{transform:translate3d(0, -0.04rem, 0);color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.resize-handle:active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}.resize-handle:hover,.resize-handle:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.resize-handle:focus{outline:none}.resize-handle:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.resize-handle.top-left{left:-0.25rem;top:-0.25rem;translate:-50%, -50%}.resize-handle.bottom-right{right:-0.25rem;bottom:-0.25rem;translate:50%, 50%}.resize-wrapper:has(.resize-handle[aria-grabbed=true]) .resize-handle,.resize-wrapper:hover .resize-handle,.resize-handle:hover,.resize-handle:focus-visible{opacity:1}.resize-handle[aria-grabbed=true],.resize-handle:hover,.resize-handle:focus-visible{opacity:1;background-color:var(--mdc-theme-primary)}.resize-handle:hover,.resize-handle[aria-grabbed=true]{scale:1.4}.resize-handle:hover:before,.resize-handle[aria-grabbed=true]:before{background-color:rgb(var(--color-white))}.resize-handle:before{content:\"\";display:block;position:absolute;inset:0;margin:auto;border-radius:50%;width:0.25rem;height:0.25rem;background-color:rgb(var(--contrast-100))}";
+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  )}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}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}:host(limel-markdown:not(.no-table-styles)) tbody{border:1px solid rgb(var(--contrast-400));border-radius:0.25rem}: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))}table{display:block;box-sizing:border-box;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}kbd{font-family:ui-monospace, \"Cascadia Code\", \"Source Code Pro\", Menlo, Consolas, \"DejaVu Sans Mono\", monospace;font-weight:600;color:rgb(var(--contrast-1100));background-color:rgb(var(--contrast-200));white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:normal;padding:0.125rem 0.5rem;margin:0 0.25rem;box-shadow:var(--button-shadow-normal), 0 0.03125rem 0.21875rem 0 rgba(var(--contrast-100), 0.5) inset;border-radius:0.125rem;border-style:solid;border-color:rgba(var(--contrast-600), 0.8);border-width:0 1px 0.125rem 1px}img{max-width:100%;border-radius:0.25rem}.image-wrapper{display:inline-flex;position:relative}.image-wrapper limel-linear-progress{position:absolute;inset:0.25rem auto auto 0.25rem;width:calc(100% - 0.5rem)}.image-wrapper img{transition:opacity 0.2s ease, scale 0.6s ease}.image-wrapper.state-failed,.image-wrapper.state-loading{background:url(\"data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill='rgba(186,186,192,0.16)' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>\");background-size:0.5rem}.image-wrapper.state-failed img,.image-wrapper.state-loading img{opacity:0.3;scale:0.98}.image-wrapper::before{pointer-events:none;content:\"\";display:block;position:absolute;inset:0;border-radius:0.25rem;transition:border-color 0.4s ease, opacity 0.2s ease, box-shadow 0.6s ease;border:1px dashed transparent;opacity:0.2}.image-wrapper.state-failed img{filter:grayscale(0.8)}.image-wrapper.state-failed:before{opacity:0.8;box-shadow:var(--shadow-error-state)}.image-wrapper:hover::before{opacity:0.8;box-shadow:var(--shadow-depth-8)}.image-wrapper:has(.resize-handle[aria-grabbed=true])::before{border-color:var(--mdc-theme-primary);opacity:0.8;box-shadow:var(--shadow-depth-16), var(--shadow-depth-8)}.resize-handle{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--mdc-theme-on-surface);background-color:rgb(var(--contrast-900));box-shadow:var(--button-shadow-normal);cursor:nwse-resize;position:absolute;display:flex;align-items:center;justify-content:center;width:0.5rem;height:0.5rem;border-radius:50%;opacity:0.6}.resize-handle:hover,.resize-handle:focus,.resize-handle:focus-visible{will-change:color, background-color, box-shadow, transform}.resize-handle:hover{transform:translate3d(0, -0.04rem, 0);color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.resize-handle:active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}.resize-handle:hover,.resize-handle:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.resize-handle:focus{outline:none}.resize-handle:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.resize-handle.top-left{left:-0.25rem;top:-0.25rem;translate:-50%, -50%}.resize-handle.bottom-right{right:-0.25rem;bottom:-0.25rem;translate:50%, 50%}.resize-wrapper:has(.resize-handle[aria-grabbed=true]) .resize-handle,.resize-wrapper:hover .resize-handle,.resize-handle:hover,.resize-handle:focus-visible{opacity:1}.resize-handle[aria-grabbed=true],.resize-handle:hover,.resize-handle:focus-visible{opacity:1;background-color:var(--mdc-theme-primary)}.resize-handle:hover,.resize-handle[aria-grabbed=true]{scale:1.4}.resize-handle:hover:before,.resize-handle[aria-grabbed=true]:before{background-color:rgb(var(--color-white))}.resize-handle:before{content:\"\";display:block;position:absolute;inset:0;margin:auto;border-radius:50%;width:0.25rem;height:0.25rem;background-color:rgb(var(--contrast-100))}:host(limel-prosemirror-adapter){display:flex;flex-direction:column}:host(limel-prosemirror-adapter) .toolbar{order:1}:host(limel-prosemirror-adapter) div#editor{order:2;height:100%;flex-grow:1}:host(limel-prosemirror-adapter) div[contenteditable=true]{height:100%}*{box-sizing:border-box}:host(limel-prosemirror-adapter:hover) .toolbar,:host(limel-prosemirror-adapter:focus-within) .toolbar{will-change:grid-template-rows}:host(limel-prosemirror-adapter:hover) limel-action-bar,:host(limel-prosemirror-adapter:focus-within) limel-action-bar{will-change:opacity, padding}.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}.toolbar{--action-bar-border-radius:0.25rem;border-radius:var(--action-bar-border-radius);flex-shrink:0;position:sticky;z-index:1;top:0;width:100%;display:grid;grid-template-rows:var(--limel-prosemirror-adapter-toolbar-grid-template-rows);transition-property:grid-template-rows;transition-duration:var(--limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration);transition-timing-function:var(--limel-prosemirror-adapter-toolbar-transition-timing-function);background-color:rgba(var(--contrast-200), 0.5);backdrop-filter:blur(0.5rem);-webkit-backdrop-filter:blur(0.5rem)}limel-action-bar{min-width:0;transition-property:padding, opacity;transition-duration:var(--limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration);transition-timing-function:var(--limel-prosemirror-adapter-toolbar-transition-timing-function);opacity:var(--limel-prosemirror-adapter-toolbar-opacity);padding:var(--limel-prosemirror-adapter-action-bar-padding-top-bottom, 0.125rem) 0.25rem;background-color:transparent;overflow:hidden}.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}limel-portal{width:25rem}";
 
 const DEBOUNCE_TIMEOUT = 300;
 const ProsemirrorAdapter = class {