@limetech/lime-elements 37.26.2 → 37.26.4

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

@@ -65,108 +65,6 @@
   );
 }
 
-.lime-empty-value-for-readonly {
-  z-index: 1;
-  position: absolute;
-  top: 0.875rem;
-  left: 1rem;
-}
-
-.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;
-}
-
-:host(limel-text-editor) {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  position: relative;
-}
-
-fieldset {
-  min-width: 0;
-  min-height: 0;
-}
-:host(limel-text-editor[readonly]) fieldset {
-  padding-block-start: 0.75rem;
-}
-
-/*
- * This file is imported into every component!
- *
- * Nothing in this file may output any CSS
- * without being explicitly called by outside code.
- */
-/*
- * This file is imported into every component that uses MDC!
- *
- * Anything in this file that generates CSS output on its own,
- * without being explicitly used, will output that CSS in every
- * single component, increasing the size of the production build.
- * Avoid that unless there's very good reason for it!
- */
-/*
- * This file is imported into every component that uses MDC!
- *
- * Anything in this file that generates CSS output on its own,
- * without being explicitly used, will output that CSS in every
- * single component, increasing the size of the production build.
- * Avoid that unless there's very good reason for it!
- */
-:host {
-  --mdc-theme-primary: var(
-      --lime-primary-color,
-      rgb(var(--color-teal-default))
-  );
-  --mdc-theme-secondary: var(
-      --lime-secondary-color,
-      rgb(var(--contrast-1100))
-  );
-  --mdc-theme-on-primary: var(
-      --lime-on-primary-color,
-      rgb(var(--contrast-100))
-  );
-  --mdc-theme-on-secondary: var(
-      --lime-on-secondary-color,
-      rgb(var(--contrast-100))
-  );
-  --mdc-theme-text-disabled-on-background: var(
-      --lime-text-disabled-on-background-color,
-      rgba(var(--contrast-1700), 0.38)
-  );
-  --mdc-theme-text-primary-on-background: var(
-      --lime-text-primary-on-background-color,
-      rgba(var(--contrast-1700), 0.87)
-  );
-  --mdc-theme-text-secondary-on-background: var(
-      --lime-text-secondary-on-background-color,
-      rgba(var(--contrast-1700), 0.54)
-  );
-  --mdc-theme-error: var(
-      --lime-error-background-color,
-      rgb(var(--color-red-dark))
-  );
-  --lime-error-text-color: rgb(var(--color-red-darker));
-  --mdc-theme-surface: var(
-      --lime-surface-background-color,
-      rgb(var(--contrast-100))
-  );
-  --mdc-theme-on-surface: var(
-      --lime-on-surface-color,
-      rgb(var(--contrast-1500))
-  );
-}
-
 /**
  * Note! This file is exported to `dist/scss/` in the published
  * node module, for consumer projects to import.
@@ -220,45 +118,115 @@ fieldset {
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
-fieldset {
+.lime-empty-value-for-readonly {
+  z-index: 1;
+  position: absolute;
+  top: 0.875rem;
+  left: 1rem;
+}
+
+.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;
+}
+
+* {
   box-sizing: border-box;
-  transition: border-color 0.2s ease, background-color 0.2s ease;
-  border: 1px solid;
-  border-radius: 0.25rem;
-  margin-inline-start: 0;
-  margin-inline-end: 0;
-  padding-block-start: 0;
-  padding-inline-start: 0.75rem;
-  padding-inline-end: 0.75rem;
-  padding-block-end: 0.75rem;
 }
-fieldset:not([disabled]) {
-  border-color: rgba(var(--contrast-700), 0.65);
-  background-color: rgba(var(--contrast-200), 0.5);
+
+:host(limel-text-editor) {
+  --limel-text-editor-padding: 0.75rem;
+  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);
 }
-fieldset:not([disabled]):hover {
-  border-color: rgba(var(--contrast-700), 1);
-  background-color: rgba(var(--contrast-200), 1);
+
+:host(limel-text-editor[readonly]) {
+  --limel-text-editor-outline-color: transparent;
+  min-height: 2.5rem;
 }
-fieldset:not([disabled]):focus-within {
-  border-color: var(--mdc-theme-primary);
+:host(limel-text-editor[readonly]) limel-markdown {
+  display: block;
+  padding: var(--limel-text-editor-padding);
 }
-fieldset[disabled] {
-  border-color: transparent;
+
+.notched-outline {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  background-color: var(--limel-text-editor-background-color);
 }
-fieldset:has(legend) {
-  margin-top: calc((-0.75rem / 2) + (1px / 2));
+
+.leading-outline,
+.notch,
+.trailing-outline {
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--limel-text-editor-outline-color);
 }
 
-legend {
-  box-sizing: border-box;
+.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;
-  max-width: 100%;
-  color: rgba(var(--contrast-1200), 1);
+  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);
-  padding-inline-start: 0.25rem;
-  padding-inline-end: 0.25rem;
+}
+
+limel-prosemirror-adapter {
+  flex-grow: 1;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden auto;
 }

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

@@ -11,6 +11,7 @@ import { h } from '@stencil/core';
  * @exampleComponent limel-example-text-editor-basic
  * @exampleComponent limel-example-text-editor-as-form-component
  * @exampleComponent limel-example-text-editor-composite
+ * @exampleComponent limel-example-text-editor-height
  * @beta
  * @private
  */
@@ -29,7 +30,10 @@ export class TextEditor {
     this.value = undefined;
   }
   render() {
-    return (h("fieldset", { disabled: this.readonly || this.disabled }, this.renderLabel(), this.renderEditor()));
+    return [
+      h("span", { class: "notched-outline" }, h("span", { class: "leading-outline" }), this.renderLabel(), h("span", { class: "trailing-outline" })),
+      this.renderEditor(),
+    ];
   }
   renderEditor() {
     if (this.readonly && !this.value) {
@@ -44,7 +48,7 @@ export class TextEditor {
     if (!this.label) {
       return;
     }
-    return h("legend", null, this.label);
+    return (h("span", { class: "notch" }, h("label", null, this.label)));
   }
   static get is() { return "limel-text-editor"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/text-editor/text-editor.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-editor.js","sourceRoot":"","sources":["../../../src/components/text-editor/text-editor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAExE;;;;;;;;;;;;;;GAcG;AAMH,MAAM,OAAO,UAAU;;IAkGX,iBAAY,GAAG,GAAG,EAAE,CAAC,CAAC,KAA0B,EAAE,EAAE;MACxD,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC,CAAC;;;;;;;;;EAzCK,MAAM;IACT,OAAO,CACH,gBAAU,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;MAC7C,IAAI,CAAC,WAAW,EAAE;MAClB,IAAI,CAAC,YAAY,EAAE,CACb,CACd,CAAC;EACN,CAAC;EAEO,YAAY;IAChB,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MAC9B,OAAO,CACH,YAAM,KAAK,EAAC,2DAA2D,aAEhE,CACV,CAAC;KACL;IAED,IAAI,IAAI,CAAC,QAAQ,EAAE;MACf,OAAO,sBAAgB,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC;KAChD;IAED,OAAO,CACH,iCACI,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,GACnB,CACL,CAAC;EACN,CAAC;EAEO,WAAW;IACf,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACb,OAAO;KACV;IAED,OAAO,kBAAS,IAAI,CAAC,KAAK,CAAU,CAAC;EACzC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMJ","sourcesContent":["import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\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 * @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    /**\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;\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;\n\n    /**\n     * Description of the text inside the editor as serialised HTML\n     */\n    @Prop({ reflect: true })\n    public value: string;\n\n    /**\n     * Dispatched when a change is made to the editor\n     */\n    @Event()\n    public change: EventEmitter<string>;\n\n    public render() {\n        return (\n            <fieldset disabled={this.readonly || this.disabled}>\n                {this.renderLabel()}\n                {this.renderEditor()}\n            </fieldset>\n        );\n    }\n\n    private renderEditor() {\n        if (this.readonly && !this.value) {\n            return (\n                <span class=\"lime-empty-value-for-readonly lime-looks-like-input-value\">\n                    –\n                </span>\n            );\n        }\n\n        if (this.readonly) {\n            return <limel-markdown value={this.value} />;\n        }\n\n        return (\n            <limel-prosemirror-adapter\n                onChange={this.handleChange}\n                value={this.value}\n            />\n        );\n    }\n\n    private renderLabel() {\n        if (!this.label) {\n            return;\n        }\n\n        return <legend>{this.label}</legend>;\n    }\n\n    private handleChange = () => (event: CustomEvent<string>) => {\n        event.stopPropagation();\n        this.change.emit(event.detail);\n    };\n}\n"]}
+{"version":3,"file":"text-editor.js","sourceRoot":"","sources":["../../../src/components/text-editor/text-editor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAExE;;;;;;;;;;;;;;;GAeG;AAMH,MAAM,OAAO,UAAU;;IAwGX,iBAAY,GAAG,GAAG,EAAE,CAAC,CAAC,KAA0B,EAAE,EAAE;MACxD,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC,CAAC;;;;;;;;;EA/CK,MAAM;IACT,OAAO;MACH,YAAM,KAAK,EAAC,iBAAiB;QACzB,YAAM,KAAK,EAAC,iBAAiB,GAAG;QAC/B,IAAI,CAAC,WAAW,EAAE;QACnB,YAAM,KAAK,EAAC,kBAAkB,GAAG,CAC9B;MACP,IAAI,CAAC,YAAY,EAAE;KACtB,CAAC;EACN,CAAC;EAEO,YAAY;IAChB,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MAC9B,OAAO,CACH,YAAM,KAAK,EAAC,2DAA2D,aAEhE,CACV,CAAC;KACL;IAED,IAAI,IAAI,CAAC,QAAQ,EAAE;MACf,OAAO,sBAAgB,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC;KAChD;IAED,OAAO,CACH,iCACI,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,GACnB,CACL,CAAC;EACN,CAAC;EAEO,WAAW;IACf,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACb,OAAO;KACV;IAED,OAAO,CACH,YAAM,KAAK,EAAC,OAAO;MACf,iBAAQ,IAAI,CAAC,KAAK,CAAS,CACxB,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMJ","sourcesContent":["import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\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-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    /**\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;\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;\n\n    /**\n     * Description of the text inside the editor as serialised HTML\n     */\n    @Prop({ reflect: true })\n    public value: string;\n\n    /**\n     * Dispatched when a change is made to the editor\n     */\n    @Event()\n    public change: EventEmitter<string>;\n\n    public render() {\n        return [\n            <span class=\"notched-outline\">\n                <span class=\"leading-outline\" />\n                {this.renderLabel()}\n                <span class=\"trailing-outline\" />\n            </span>,\n            this.renderEditor(),\n        ];\n    }\n\n    private renderEditor() {\n        if (this.readonly && !this.value) {\n            return (\n                <span class=\"lime-empty-value-for-readonly lime-looks-like-input-value\">\n                    –\n                </span>\n            );\n        }\n\n        if (this.readonly) {\n            return <limel-markdown value={this.value} />;\n        }\n\n        return (\n            <limel-prosemirror-adapter\n                onChange={this.handleChange}\n                value={this.value}\n            />\n        );\n    }\n\n    private renderLabel() {\n        if (!this.label) {\n            return;\n        }\n\n        return (\n            <span class=\"notch\">\n                <label>{this.label}</label>\n            </span>\n        );\n    }\n\n    private handleChange = () => (event: CustomEvent<string>) => {\n        event.stopPropagation();\n        this.change.emit(event.detail);\n    };\n}\n"]}

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

@@ -16033,12 +16033,37 @@ const textEditorMenuItems = [
   },
 ];
 
-const prosemirrorAdapterCss = "@charset \"UTF-8\";:host(limel-prosemirror-adapter){isolation:isolate;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}.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-top:0.75rem}.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}: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  )}div#editor .ProseMirror-menubar{position:sticky !important;z-index:1;top:0;margin-left:-0.75rem;margin-right:-0.75rem;background-color:rgba(var(--contrast-200), 0.5);backdrop-filter:blur(0.25rem);-webkit-backdrop-filter:blur(0.25rem)}div#editor .ProseMirror-menubar[style*=\"position: fixed\"]{box-shadow:0 0.25rem 0.5rem -0.5rem rgb(var(--color-black), 0.8)}div#editor .ProseMirror-menubar-spacer{display:none}.ProseMirror-menubar{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:0.25rem;align-items:center;padding:0.125rem;border-top-left-radius:0.5rem;border-top-right-radius:0.5rem}.ProseMirror-menuitem{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;white-space:nowrap;line-height:1;height:1.5rem;min-width:1.5rem;border-radius:0.25rem;color:rgb(var(--contrast-1100));font-size:0.8125rem}.ProseMirror-menuitem:not(:has(.ProseMirror-menu-disabled)){transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:transparent}.ProseMirror-menuitem:not(:has(.ProseMirror-menu-disabled)):hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.ProseMirror-menuitem:not(:has(.ProseMirror-menu-disabled)):active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.ProseMirror-menuitem:has(.ProseMirror-menu-active){box-shadow:var(--button-shadow-inset);color:var(--mdc-theme-primary)}.ProseMirror-menuitem:has(.ProseMirror-menu-active) svg{color:var(--mdc-theme-primary)}.ProseMirror-menuitem:has(.ProseMirror-menu-dropdown-menu){box-shadow:var(--button-shadow-inset)}.ProseMirror-menuitem svg{fill:currentColor;height:1rem;color:rgb(var(--contrast-1100))}.ProseMirror-menuseparator{border-radius:1rem;background-color:rgb(var(--contrast-600));width:0.125rem;height:1rem}.ProseMirror-menu-dropdown{position:relative;display:flex;align-items:center;gap:0.5rem;padding:0 0.5rem}.ProseMirror-menu-dropdown:after{content:\"\";border-left:0.25rem solid transparent;border-right:0.25rem solid transparent;border-top:0.25rem solid currentColor}.ProseMirror-menu-dropdown-menu,.ProseMirror-menu-submenu{box-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)}.ProseMirror-menu-dropdown-menu{position:absolute;top:100%;background:rgb(var(--contrast-100));border-radius:0.25rem;padding:0.125rem}.ProseMirror-menu-submenu{position:absolute;background:rgb(var(--contrast-100));border-radius:0.25rem;padding:0.125rem;display:none;min-width:4em;left:100%;top:-0.75rem}.ProseMirror-menu-dropdown-item{transition:background-color 0.2s ease;cursor:pointer;border-radius:0.375rem;min-height:2.5rem;display:flex;align-items:center;width:100%}.ProseMirror-menu-dropdown-item>div{padding:0 1rem;width:100%}.ProseMirror-menu-dropdown-item:not(:has(.ProseMirror-menu-disabled)):hover{background-color:rgb(var(--contrast-300))}.ProseMirror-menu-submenu-wrap{position:relative;margin-right:-0.25rem}.ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu{display:block}.ProseMirror-menu-submenu-label{position:relative;display:flex;align-items:center;justify-content:space-between;gap:0.5rem}.ProseMirror-menu-submenu-label:after{content:\"\";border-top:0.25rem solid transparent;border-bottom:0.25rem solid transparent;border-left:0.25rem solid currentColor}.ProseMirror-menu-disabled{opacity:0.3;cursor:default}.ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu{display:block}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);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 ProsemirrorAdapter = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.change = createEvent(this, "change", 7);
+    this.initializeEditor = () => {
+      this.actionBarItems = textEditorMenuItems;
+      const mySchema = new Schema({
+        nodes: addListNodes(schema.spec.nodes, 'paragraph block*', 'block'),
+        marks: schema.spec.marks,
+      });
+      this.view = new EditorView(this.host.shadowRoot.querySelector('#editor'), {
+        state: EditorState.create({
+          doc: DOMParser.fromSchema(mySchema).parse(this.host.shadowRoot.querySelector('#editor')),
+          plugins: exampleSetup({
+            schema: mySchema,
+            menuBar: false,
+          }),
+        }),
+        dispatchTransaction: (transaction) => {
+          const newState = this.view.state.apply(transaction);
+          this.view.updateState(newState);
+          this.change.emit(this.getHTML());
+        },
+      });
+      this.menuCommandFactory = new MenuCommandFactory(mySchema);
+      if (this.value) {
+        this.view.dom.innerHTML = this.value;
+      }
+    };
     this.getHTML = () => {
       if (this.view.dom.textContent === '') {
         return '';
@@ -16063,33 +16088,17 @@ const ProsemirrorAdapter = class {
     this.view = undefined;
     this.actionBarItems = [];
   }
-  render() {
-    return (h("div", null, h("limel-action-bar", { accessibleLabel: "Toolbar", actions: this.actionBarItems, layout: "fullWidth", onItemSelected: this.handleActionBarItem }), h("div", { id: "editor" })));
-  }
   componentDidLoad() {
-    this.actionBarItems = textEditorMenuItems;
-    const mySchema = new Schema({
-      nodes: addListNodes(schema.spec.nodes, 'paragraph block*', 'block'),
-      marks: schema.spec.marks,
-    });
-    this.view = new EditorView(this.host.shadowRoot.querySelector('#editor'), {
-      state: EditorState.create({
-        doc: DOMParser.fromSchema(mySchema).parse(this.host.shadowRoot.querySelector('#editor')),
-        plugins: exampleSetup({
-          schema: mySchema,
-          menuBar: false,
-        }),
-      }),
-      dispatchTransaction: (transaction) => {
-        const newState = this.view.state.apply(transaction);
-        this.view.updateState(newState);
-        this.change.emit(this.getHTML());
-      },
-    });
-    this.menuCommandFactory = new MenuCommandFactory(mySchema);
-    if (this.value) {
-      this.view.dom.innerHTML = this.value;
-    }
+    // Stencil complains loudly about triggering rerenders in
+    // componentDidLoad, but we have to, so we're using setTimeout to
+    // suppress the warning. /Ads
+    setTimeout(this.initializeEditor, 0);
+  }
+  render() {
+    return [
+      h("limel-action-bar", { accessibleLabel: "Toolbar", actions: this.actionBarItems, onItemSelected: this.handleActionBarItem }),
+      h("div", { id: "editor" }),
+    ];
   }
   executeCommand(command) {
     const { state } = this.view;