@limetech/lime-elements 38.33.8 → 38.34.0

package/dist/cjs/limel-helper-line_2.cjs.entry.js

@@ -0,0 +1,79 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-174a078a.js');
+
+const helperLineCss = ":host(limel-helper-line){transition:opacity 0.2s ease;box-sizing:border-box;display:grid;min-width:0;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:0.6875rem;line-height:normal;color:rgb(var(--contrast-1200))}div{display:flex;justify-content:space-between;gap:0.75rem;overflow:hidden;padding:0 1rem}:host(limel-helper-line.invalid){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-helper-line.invalid) .helper-text{color:var(--limel-theme-error-color)}.counter{flex-shrink:0;margin-left:auto}.helper-text,.counter{padding-top:0.125rem}:host(limel-helper-line){transition:grid-template-rows var(--limel-h-l-grid-template-rows-transition-speed, 0.46s) cubic-bezier(1, 0.09, 0, 0.89);grid-template-rows:var(--limel-h-l-grid-template-rows, 1fr)}:host(limel-helper-line.hide){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}";
+
+const HelperLine = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.hasContent = () => {
+      return !!(this.maxLength > 0 ||
+        (this.helperText && this.helperText.length > 0));
+    };
+    this.renderHelperText = () => {
+      if (!this.helperText) {
+        return;
+      }
+      return (index.h("span", { class: "helper-text", id: this.helperTextId }, this.helperText));
+    };
+    this.renderCharacterCounter = () => {
+      const counter = `${this.length} / ${this.maxLength}`;
+      if (!this.maxLength) {
+        return;
+      }
+      return index.h("span", { class: "counter" }, counter);
+    };
+    this.helperText = undefined;
+    this.length = undefined;
+    this.maxLength = undefined;
+    this.invalid = false;
+    this.helperTextId = undefined;
+  }
+  render() {
+    return (index.h(index.Host, { tabIndex: -1, class: {
+        invalid: this.invalid,
+      }, style: this.hasContent() ? {} : { display: 'none' }, "aria-hidden": !this.hasContent() }, index.h("div", null, this.renderHelperText(), this.renderCharacterCounter())));
+  }
+};
+HelperLine.style = helperLineCss;
+
+const notchedOutlineCss = "@charset \"UTF-8\";*,*:before,*:after{box-sizing:border-box}limel-notched-outline{--limel-notched-outline-border-color:rgba(var(--contrast-700), 0.65);--limel-notched-outline-background-color:rgba(var(--contrast-200), 0.5);display:block;width:100%;height:fit-content}.limel-notched-outline{position:relative;width:100%;height:100%}.limel-notched-outline [slot=content]{background-color:var(--limel-notched-outline-background-color);border-radius:var(--limel-notched-outline-border-radius, 0.25rem)}.limel-notched-outline--outlines{pointer-events:none;position:absolute;inset:0;z-index:var(--limel-notched-outline-z-index, 0);display:flex}.limel-notched-outline--leading-outline,.limel-notched-outline--notch,.limel-notched-outline--trailing-outline{transition:border-color 0.2s ease;border-width:1px;border-style:solid;border-color:var(--limel-notched-outline-border-color)}.limel-notched-outline--leading-outline{flex-shrink:0;width:0.75rem;border-right-width:0;border-top-left-radius:var(--limel-notched-outline-border-radius, 0.25rem);border-bottom-left-radius:var(--limel-notched-outline-border-radius, 0.25rem)}.limel-notched-outline--notch{flex-shrink:0;position:relative;z-index:2;border-top-color:var(--limel-notched-outline-notch-border-top-color, var(--limel-notched-outline-border-color));border-right-width:0;border-left-width:0;max-width:calc(100% - 1.5rem)}.limel-notched-outline--notch label{all:unset;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;position:relative;transition:color 0.2s ease, font-size 0.2s ease, transform 0.12s cubic-bezier(0.4, 0, 0.2, 1);transform:translate3d(var(--limel-notched-outline-label-transform-x, 0), var(--limel-notched-outline-label-transform-y, 0.62rem), 0);display:block;padding:0 0.25rem;color:var(--limel-notched-outline-label-color, rgba(var(--contrast-1200), 1));font-size:var(--limel-notched-outline-label-font-size, var(--limel-theme-default-font-size));letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);line-height:normal}.limel-notched-outline--notch label:after{position:absolute;right:0;padding:0 0.25rem}.limel-notched-outline--trailing-outline{flex-grow:1;border-left-width:0;border-top-right-radius:var(--limel-notched-outline-border-radius, 0.25rem);border-bottom-right-radius:var(--limel-notched-outline-border-radius, 0.25rem)}.limel-notched-outline--empty-readonly-value{position:absolute;top:0.62rem;left:1rem}.limel-notched-outline--empty-readonly-value .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:var(--limel-theme-default-font-size);font-weight:400;font-family:inherit;letter-spacing:0.009375em}.mdc-text-field--disabled .limel-notched-outline--empty-readonly-value .lime-looks-like-input-value{cursor:not-allowed;opacity:0.4}limel-notched-outline:not([disabled]:not([disabled=false])):hover{--limel-notched-outline-border-color:rgba(var(--contrast-700), 1);--limel-notched-outline-background-color:rgba(var(--contrast-200), 1)}limel-notched-outline:not([disabled]:not([disabled=false])):has([slot=content]:focus-visible),limel-notched-outline:not([disabled]:not([disabled=false])):has([slot=content]:focus-within){--limel-notched-outline-border-color:var(--lime-primary-color, var(--limel-theme-primary-color));--limel-notched-outline-background-color:rgba(var(--contrast-100), 0.8)}limel-notched-outline[disabled]:not([disabled=false]){--limel-notched-outline-label-color:rgba(var(--contrast-1200), 0.5)}limel-notched-outline[required]:not([required=false]) .limel-notched-outline--notch label{padding-right:0.75rem}limel-notched-outline[required]:not([required=false]) .limel-notched-outline--notch label:after{content:\"*\";scale:1.3}limel-notched-outline[invalid]:not([invalid=false]):not([disabled]:not([disabled=false])){--limel-notched-outline-border-color:var(\n      --limel-theme-error-text-color\n  )}limel-notched-outline[invalid]:not([invalid=false]):not([disabled]:not([disabled=false])):hover{--limel-notched-outline-border-color:var(\n      --limel-theme-error-color\n  )}limel-notched-outline[invalid]:not([invalid=false]) .limel-notched-outline--notch label:after{color:var(--limel-theme-error-text-color)}limel-notched-outline[readonly]:not([readonly=false]){--limel-notched-outline-border-color:transparent !important;--limel-notched-outline-background-color:transparent !important}limel-notched-outline[readonly]:not([readonly=false]) .limel-notched-outline--notch label{transition-duration:0s}limel-notched-outline[has-leading-icon]:not([has-leading-icon=false]):not([has-floating-label]):not([has-value]){--limel-notched-outline-label-transform-x:1.25rem}limel-notched-outline[has-leading-icon] .limel-notched-outline--empty-readonly-value{left:2.25rem}limel-notched-outline:not([disabled]:not([disabled=false])):hover label,limel-notched-outline:not([disabled]:not([disabled=false])):focus label,limel-notched-outline:not([disabled]:not([disabled=false])):focus-within label{will-change:color, transform, font-size}limel-notched-outline:not([disabled]:not([disabled=false])):has([slot=content]:focus-visible),limel-notched-outline:not([disabled]:not([disabled=false])):has([slot=content]:focus-within){--limel-notched-outline-label-font-size:0.65rem;--limel-notched-outline-label-transform-x:0;--limel-notched-outline-label-transform-y:calc(-50% - 0.09375rem);--limel-notched-outline-notch-border-top-color:transparent}limel-notched-outline[has-floating-label],limel-notched-outline[has-value]:not([has-value=false]),limel-notched-outline[readonly]:not([has-value]:not([has-value=true])){--limel-notched-outline-label-font-size:0.65rem;--limel-notched-outline-label-transform-x:0;--limel-notched-outline-label-transform-y:calc(-50% - 0.09375rem);--limel-notched-outline-notch-border-top-color:transparent}";
+
+const NotchedOutline = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.required = false;
+    this.readonly = false;
+    this.invalid = false;
+    this.disabled = false;
+    this.label = undefined;
+    this.labelId = undefined;
+    this.hasValue = false;
+    this.hasLeadingIcon = false;
+    this.hasFloatingLabel = false;
+  }
+  render() {
+    return (index.h("div", { class: "limel-notched-outline" }, index.h("slot", { name: "content" }), index.h("span", { class: "limel-notched-outline--outlines", "aria-hidden": "true" }, index.h("span", { class: "limel-notched-outline--leading-outline" }), this.renderLabel(), index.h("span", { class: "limel-notched-outline--trailing-outline" }), this.renderEmptyReadonlyValue())));
+  }
+  renderLabel() {
+    if (!this.label) {
+      return;
+    }
+    return (index.h("span", { class: "limel-notched-outline--notch" }, index.h("label", { htmlFor: this.labelId }, this.label)));
+  }
+  renderEmptyReadonlyValue() {
+    if (!this.readonly || this.hasValue) {
+      return;
+    }
+    return (index.h("span", { class: "limel-notched-outline--empty-readonly-value", "aria-hidden": "true" }, "\u2013"));
+  }
+};
+NotchedOutline.style = notchedOutlineCss;
+
+exports.limel_helper_line = HelperLine;
+exports.limel_notched_outline = NotchedOutline;
+
+//# sourceMappingURL=limel-helper-line_2.cjs.entry.js.map

package/dist/cjs/limel-helper-line_2.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"limel-helper-line.limel-notched-outline.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,i7BAAi7B;;MC2B17B,UAAU;;;IAqDX,eAAU,GAAG;MACjB,OAAO,CAAC,EACJ,IAAI,CAAC,SAAS,GAAG,CAAC;SACjB,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAClD,CAAC;KACL,CAAC;IAEM,qBAAgB,GAAG;MACvB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;QAClB,OAAO;OACV;MAED,QACIA,kBAAM,KAAK,EAAC,aAAa,EAAC,EAAE,EAAE,IAAI,CAAC,YAAY,IAC1C,IAAI,CAAC,UAAU,CACb,EACT;KACL,CAAC;IAEM,2BAAsB,GAAG;MAC7B,MAAM,OAAO,GAAG,GAAG,IAAI,CAAC,MAAM,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;MAErD,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;QACjB,OAAO;OACV;MAED,OAAOA,kBAAM,KAAK,EAAC,SAAS,IAAE,OAAO,CAAQ,CAAC;KACjD,CAAC;;;;mBArDyB,KAAK;;;EAQzB,MAAM;IACT,QACIA,QAACC,UAAI,IACD,QAAQ,EAAE,CAAC,CAAC,EACZ,KAAK,EAAE;QACH,OAAO,EAAE,IAAI,CAAC,OAAO;OACxB,EACD,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,iBACtC,CAAC,IAAI,CAAC,UAAU,EAAE,IAE/BD,qBACK,IAAI,CAAC,gBAAgB,EAAE,EACvB,IAAI,CAAC,sBAAsB,EAAE,CAC5B,CACH,EACT;GACL;;;;AC9EL,MAAM,iBAAiB,GAAG,ouLAAouL;;MCuBjvL,cAAc;;;oBAOL,KAAK;oBAOL,KAAK;mBAON,KAAK;oBAQJ,KAAK;;;oBAwBL,KAAK;0BAQC,KAAK;4BASH,KAAK;;EAExB,MAAM;IACT,QACIA,iBAAK,KAAK,EAAC,uBAAuB,IAC9BA,kBAAM,IAAI,EAAC,SAAS,GAAG,EACvBA,kBACI,KAAK,EAAC,iCAAiC,iBAC3B,MAAM,IAElBA,kBAAM,KAAK,EAAC,wCAAwC,GAAG,EACtD,IAAI,CAAC,WAAW,EAAE,EACnBA,kBAAM,KAAK,EAAC,yCAAyC,GAAG,EACvD,IAAI,CAAC,wBAAwB,EAAE,CAC7B,CACL,EACR;GACL;EAEO,WAAW;IACf,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACb,OAAO;KACV;IAED,QACIA,kBAAM,KAAK,EAAC,8BAA8B,IACtCA,mBAAO,OAAO,EAAE,IAAI,CAAC,OAAO,IAAG,IAAI,CAAC,KAAK,CAAS,CAC/C,EACT;GACL;EAEO,wBAAwB;IAC5B,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjC,OAAO;KACV;IAED,QACIA,kBACI,KAAK,EAAC,6CAA6C,iBACvC,MAAM,aAGf,EACT;GACL;;;;;;;","names":["h","Host"],"sources":["./src/components/helper-line/helper-line.scss?tag=limel-helper-line&encapsulation=shadow","./src/components/helper-line/helper-line.tsx","./src/components/notched-outline/notched-outline.scss?tag=limel-notched-outline","./src/components/notched-outline/notched-outline.tsx"],"sourcesContent":[":host(limel-helper-line) {\n    transition: opacity 0.2s ease;\n\n    box-sizing: border-box;\n    display: grid;\n\n    min-width: 0; // prevents overflowing, if component is placed in flex containers\n\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-font-smoothing: antialiased;\n    font-size: 0.6875rem;\n    line-height: normal;\n\n    color: rgb(var(--contrast-1200));\n}\n\ndiv {\n    display: flex;\n    justify-content: space-between;\n    gap: 0.75rem;\n    overflow: hidden;\n    padding: 0 1rem;\n}\n\n:host(limel-helper-line.invalid) {\n    --limel-h-l-grid-template-rows-transition-speed: 0.46s;\n    --limel-h-l-grid-template-rows: 1fr;\n\n    .helper-text {\n        color: var(--limel-theme-error-color);\n    }\n}\n\n.counter {\n    flex-shrink: 0;\n    margin-left: auto;\n}\n\n.helper-text,\n.counter {\n    padding-top: 0.125rem;\n}\n\n// This animates height of the helper line, from `0` to `auto`.\n// To get this animation effect, the consumer component should\n// add `hide` classed accordingly.\n:host(limel-helper-line) {\n    transition: grid-template-rows\n        var(--limel-h-l-grid-template-rows-transition-speed, 0.46s)\n        cubic-bezier(1, 0.09, 0, 0.89);\n    grid-template-rows: var(--limel-h-l-grid-template-rows, 1fr);\n}\n\n:host(limel-helper-line.hide) {\n    --limel-h-l-grid-template-rows-transition-speed: 0.3s;\n    --limel-h-l-grid-template-rows: 0fr;\n}\n// End: animating height\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n/**\n * This is an internal and private component that many input fields\n * use to display a helper text, along with a character counter below the\n * input field.\n *\n * We created this to keep the visual styles the same everywhere\n * and to avoid importing styles separately.\n *\n * Also this enables us to open the helper line in limel-portal,\n * more easily without having to send the styles to the portal.\n *\n * @exampleComponent limel-example-helper-line\n * @exampleComponent limel-example-helper-line-invalid\n * @exampleComponent limel-example-helper-line-long-text\n * @exampleComponent limel-example-helper-line-long-text-no-counter\n * @exampleComponent limel-example-helper-line-character-counter\n * @exampleComponent limel-example-helper-line-empty\n * @exampleComponent limel-example-helper-line-animation\n * @private\n */\n@Component({\n    tag: 'limel-helper-line',\n    shadow: true,\n    styleUrl: 'helper-line.scss',\n})\nexport class HelperLine {\n    /**\n     * The helper text that is displayed on the left side.\n     */\n    @Prop({ reflect: true })\n    public helperText?: string;\n\n    /**\n     * Length of the current input value, coming from the parent component.\n     * Used in the character counter section on the right side.\n     */\n    @Prop({ reflect: true })\n    public length?: number;\n\n    /**\n     * Maximum length of the characters, defined on the parent component.\n     * Used in the character counter section on the right side.\n     */\n    @Prop({ reflect: true })\n    public maxLength?: number;\n\n    /**\n     * Turns `true`, when the parent component is invalid.\n     * For example, when the parent component is `required` but is left empty.\n     * Or when the input format is invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid?: boolean = false;\n\n    /**\n     * Used by `aria-controls` and `aria-describedby` in the parent component.\n     */\n    @Prop({ reflect: true })\n    public helperTextId?: string;\n\n    public render() {\n        return (\n            <Host\n                tabIndex={-1}\n                class={{\n                    invalid: this.invalid,\n                }}\n                style={this.hasContent() ? {} : { display: 'none' }}\n                aria-hidden={!this.hasContent()}\n            >\n                <div>\n                    {this.renderHelperText()}\n                    {this.renderCharacterCounter()}\n                </div>\n            </Host>\n        );\n    }\n\n    private hasContent = () => {\n        return !!(\n            this.maxLength > 0 ||\n            (this.helperText && this.helperText.length > 0)\n        );\n    };\n\n    private renderHelperText = () => {\n        if (!this.helperText) {\n            return;\n        }\n\n        return (\n            <span class=\"helper-text\" id={this.helperTextId}>\n                {this.helperText}\n            </span>\n        );\n    };\n\n    private renderCharacterCounter = () => {\n        const counter = `${this.length} / ${this.maxLength}`;\n\n        if (!this.maxLength) {\n            return;\n        }\n\n        return <span class=\"counter\">{counter}</span>;\n    };\n}\n","@use '../../style/mixins.scss';\n@use '../../style/internal/shared_input-select-picker';\n/**\n * @prop --limel-notched-outline-z-index: Defines the `z-index` of the outlines & the label, since they are absolutely positioned. Useful if there are other elements with z-indexes in the consumer.\n */\n\n$border-radius: 0.25rem;\n$value-top: 0.62rem;\n\n*,\n*:before,\n*:after {\n    box-sizing: border-box;\n}\n\nlimel-notched-outline {\n    --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color};\n    --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-normal};\n\n    display: block;\n    width: 100%;\n    height: fit-content;\n}\n\n.limel-notched-outline {\n    position: relative;\n    width: 100%;\n    height: 100%;\n\n    [slot='content'] {\n        background-color: var(--limel-notched-outline-background-color);\n        border-radius: var(\n            --limel-notched-outline-border-radius,\n            $border-radius\n        );\n    }\n\n    // Why is everything prefixed?\n    // Because the component has `shadow: false;`\n    // and this ensures that we are not inheriting styles.\n    &--outlines {\n        pointer-events: none;\n        position: absolute;\n        inset: 0;\n        z-index: var(--limel-notched-outline-z-index, 0);\n        display: flex;\n    }\n\n    &--leading-outline,\n    &--notch,\n    &--trailing-outline {\n        transition: border-color 0.2s ease;\n        border-width: 1px;\n        border-style: solid;\n        border-color: var(--limel-notched-outline-border-color);\n    }\n\n    &--leading-outline {\n        flex-shrink: 0;\n        width: 0.75rem;\n        border-right-width: 0;\n        border-top-left-radius: var(\n            --limel-notched-outline-border-radius,\n            $border-radius\n        );\n        border-bottom-left-radius: var(\n            --limel-notched-outline-border-radius,\n            $border-radius\n        );\n    }\n\n    &--notch {\n        flex-shrink: 0;\n\n        position: relative;\n        z-index: 2;\n\n        border-top-color: var(\n            --limel-notched-outline-notch-border-top-color,\n            var(--limel-notched-outline-border-color)\n        );\n        border-right-width: 0;\n        border-left-width: 0;\n\n        max-width: calc(100% - 1.5rem);\n\n        label {\n            all: unset;\n            @include mixins.truncate-text;\n            position: relative;\n            transition:\n                color 0.2s ease,\n                font-size 0.2s ease,\n                transform 0.12s cubic-bezier(0.4, 0, 0.2, 1);\n\n            transform: translate3d(\n                var(--limel-notched-outline-label-transform-x, 0),\n                var(--limel-notched-outline-label-transform-y, $value-top),\n                0\n            );\n            display: block;\n            padding: 0 0.25rem;\n\n            color: var(\n                --limel-notched-outline-label-color,\n                #{shared_input-select-picker.$label-color}\n            );\n            font-size: var(\n                --limel-notched-outline-label-font-size,\n                var(--limel-theme-default-font-size)\n            );\n            letter-spacing: var(\n                --mdc-typography-subtitle1-letter-spacing,\n                0.009375em\n            );\n            line-height: normal;\n\n            &:after {\n                position: absolute;\n                right: 0;\n                padding: 0 0.25rem;\n            }\n        }\n    }\n\n    &--trailing-outline {\n        flex-grow: 1;\n        border-left-width: 0;\n        border-top-right-radius: var(\n            --limel-notched-outline-border-radius,\n            $border-radius\n        );\n        border-bottom-right-radius: var(\n            --limel-notched-outline-border-radius,\n            $border-radius\n        );\n    }\n\n    &--empty-readonly-value {\n        @include shared_input-select-picker.lime-looks-like-input-value;\n        position: absolute;\n        top: $value-top;\n        left: 1rem;\n    }\n}\n\nlimel-notched-outline {\n    &:not([disabled]:not([disabled='false'])) {\n        &:hover {\n            --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color--hovered};\n            --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-hovered};\n        }\n\n        &:has([slot='content']:focus-visible),\n        &:has([slot='content']:focus-within) {\n            --limel-notched-outline-border-color: #{shared_input-select-picker.$lime-text-field-outline-color--focused};\n            --limel-notched-outline-background-color: #{shared_input-select-picker.$background-color-focused};\n        }\n    }\n\n    &[disabled]:not([disabled='false']) {\n        --limel-notched-outline-label-color: #{shared_input-select-picker.$label-color-disabled};\n    }\n\n    &[required]:not([required='false']) {\n        .limel-notched-outline--notch {\n            label {\n                padding-right: 0.75rem;\n\n                &:after {\n                    content: '*';\n                    scale: 1.3;\n                }\n            }\n        }\n    }\n\n    &[invalid]:not([invalid='false']) {\n        &:not([disabled]:not([disabled='false'])) {\n            --limel-notched-outline-border-color: var(\n                --limel-theme-error-text-color\n            );\n            &:hover {\n                --limel-notched-outline-border-color: var(\n                    --limel-theme-error-color\n                );\n            }\n        }\n\n        .limel-notched-outline--notch {\n            label {\n                &:after {\n                    color: var(--limel-theme-error-text-color);\n                }\n            }\n        }\n    }\n\n    &[readonly]:not([readonly='false']) {\n        --limel-notched-outline-border-color: transparent !important;\n        --limel-notched-outline-background-color: transparent !important;\n\n        .limel-notched-outline--notch {\n            label {\n                transition-duration: 0s;\n            }\n        }\n    }\n\n    &[has-leading-icon] {\n        &:not([has-leading-icon='false']):not([has-floating-label]):not(\n                [has-value]\n            ) {\n            --limel-notched-outline-label-transform-x: 1.25rem;\n        }\n\n        .limel-notched-outline--empty-readonly-value {\n            left: 2.25rem;\n        }\n    }\n}\n\n// Transitioning the floating label\n@mixin float-label {\n    --limel-notched-outline-label-font-size: 0.65rem; // `10.4px` similar to MDC's floating label\n    --limel-notched-outline-label-transform-x: 0;\n    --limel-notched-outline-label-transform-y: calc(-50% - 0.09375rem);\n    --limel-notched-outline-notch-border-top-color: transparent;\n}\n\nlimel-notched-outline {\n    &:not([disabled]:not([disabled='false'])) {\n        &:hover,\n        &:focus,\n        &:focus-within {\n            label {\n                will-change: color, transform, font-size;\n            }\n        }\n\n        &:has([slot='content']:focus-visible),\n        &:has([slot='content']:focus-within) {\n            @include float-label;\n        }\n    }\n\n    &[has-floating-label],\n    &[has-value]:not([has-value='false']),\n    &[readonly]:not([has-value]:not([has-value='true'])) {\n        @include float-label;\n    }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n/**\n * This is a private component, used to render a notched outline\n * around all input elements that can have a floating label.\n * Inspired by Material Design's styles for input fields.\n * We use it in various components to unify styles and avoid\n * repeating code.\n *\n * :::note\n * The component has `shadow: false`. This is to improve performance,\n * and ensure that its internal elements are considered as internal parts\n * of the consumer's DOM. This way, the value `for` in `<label for=\"id-of-input-element\">`\n * would be correctly associated with the input element's `id`, in the consumer component.\n * :::\n * @exampleComponent limel-example-notched-outline-basic\n * @private\n */\n@Component({\n    tag: 'limel-notched-outline',\n    styleUrl: 'notched-outline.scss',\n    shadow: false,\n})\nexport class NotchedOutline {\n    /**\n     * Set to `true` when the input element is required.\n     * This applies proper visual styles, such as inclusion of an asterisk\n     * beside the label.\n     */\n    @Prop({ reflect: true })\n    public required = false;\n\n    /**\n     * Set to `true` when the input element is readonly.\n     * This applies proper visual styles, such as making the outline transparent.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to indicate that the current value of the input element is\n     * invalid. This applies proper visual styles, such as making the outlines red.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * Set to `true` to indicate that the input element is\n     * disabled. This applies proper visual styles, such as making the outlines\n     * and the label transparent.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Label to display for the input element.\n     * :::important\n     * Note that the input element of the consumer component will be\n     * labeled by this label, using the `labelId` prop.\n     * :::\n     */\n    @Prop({ reflect: true })\n    public label?: string;\n\n    /**\n     * The `id` of the input element which should be\n     * labeled by the provided label.\n     */\n    @Prop({ reflect: true })\n    public labelId?: string;\n\n    /**\n     * Set to `true` when the user has entered a value for the input element,\n     * shrinking the label in size, and visually rendering it above the entered value.\n     */\n    @Prop({ reflect: true })\n    public hasValue = false;\n\n    /**\n     * Set to `true` when the consumer element displays a leading icon.\n     * This applies proper visual styles, such as rendering the label\n     * correctly placed beside the leading icon.\n     */\n    @Prop({ reflect: true })\n    public hasLeadingIcon = false;\n\n    /**\n     * Set to `true` when the consumer element needs to render the\n     * label above the input element, despite existence of a `value`.\n     * For example in the `text-editor` or `limel-select`,\n     * where the default layout requires a floating label.\n     */\n    @Prop({ reflect: true })\n    public hasFloatingLabel = false;\n\n    public render() {\n        return (\n            <div class=\"limel-notched-outline\">\n                <slot name=\"content\" />\n                <span\n                    class=\"limel-notched-outline--outlines\"\n                    aria-hidden=\"true\"\n                >\n                    <span class=\"limel-notched-outline--leading-outline\" />\n                    {this.renderLabel()}\n                    <span class=\"limel-notched-outline--trailing-outline\" />\n                    {this.renderEmptyReadonlyValue()}\n                </span>\n            </div>\n        );\n    }\n\n    private renderLabel() {\n        if (!this.label) {\n            return;\n        }\n\n        return (\n            <span class=\"limel-notched-outline--notch\">\n                <label htmlFor={this.labelId}>{this.label}</label>\n            </span>\n        );\n    }\n\n    private renderEmptyReadonlyValue() {\n        if (!this.readonly || this.hasValue) {\n            return;\n        }\n\n        return (\n            <span\n                class=\"limel-notched-outline--empty-readonly-value\"\n                aria-hidden=\"true\"\n            >\n                –\n            </span>\n        );\n    }\n}\n"],"version":3}

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy(JSON.parse("[[\"limel-text-editor.cjs\",[[17,\"limel-text-editor\",{\"contentType\":[1,\"content-type\"],\"language\":[513],\"disabled\":[516],\"readonly\":[516],\"helperText\":[513,\"helper-text\"],\"placeholder\":[513],\"label\":[513],\"invalid\":[516],\"value\":[513],\"customElements\":[16],\"triggers\":[16],\"required\":[516],\"allowResize\":[516,\"allow-resize\"],\"ui\":[513]}]]],[\"limel-card.cjs\",[[1,\"limel-card\",{\"heading\":[513],\"subheading\":[513],\"image\":[16],\"icon\":[513],\"value\":[1],\"actions\":[16],\"clickable\":[516],\"orientation\":[513]}]]],[\"limel-file.cjs\",[[1,\"limel-file\",{\"value\":[16],\"label\":[513],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"accept\":[513],\"language\":[1]}]]],[\"limel-list-item.cjs\",[[0,\"limel-list-item\",{\"language\":[513],\"value\":[8],\"text\":[513],\"secondaryText\":[513,\"secondary-text\"],\"disabled\":[516],\"icon\":[1],\"iconSize\":[513,\"icon-size\"],\"badgeIcon\":[516,\"badge-icon\"],\"selected\":[516],\"actions\":[16],\"primaryComponent\":[16],\"image\":[16],\"type\":[513]}]]],[\"limel-picker.cjs\",[[1,\"limel-picker\",{\"disabled\":[4],\"readonly\":[516],\"label\":[1],\"searchLabel\":[1,\"search-label\"],\"helperText\":[513,\"helper-text\"],\"leadingIcon\":[1,\"leading-icon\"],\"emptyResultMessage\":[1,\"empty-result-message\"],\"required\":[4],\"invalid\":[516],\"value\":[16],\"searcher\":[16],\"allItems\":[16],\"multiple\":[4],\"delimiter\":[513],\"actions\":[16],\"actionPosition\":[1,\"action-position\"],\"actionScrollBehavior\":[1,\"action-scroll-behavior\"],\"badgeIcons\":[516,\"badge-icons\"],\"items\":[32],\"textValue\":[32],\"loading\":[32],\"chips\":[32]}]]],[\"limel-split-button.cjs\",[[17,\"limel-split-button\",{\"label\":[513],\"primary\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"items\":[16]}]]],[\"limel-file-viewer.cjs\",[[1,\"limel-file-viewer\",{\"url\":[513],\"filename\":[513],\"alt\":[513],\"allowFullscreen\":[516,\"allow-fullscreen\"],\"allowOpenInNewTab\":[516,\"allow-open-in-new-tab\"],\"allowDownload\":[516,\"allow-download\"],\"language\":[1],\"officeViewer\":[513,\"office-viewer\"],\"actions\":[16],\"isFullscreen\":[32],\"fileType\":[32],\"loading\":[32],\"fileUrl\":[32]}]]],[\"limel-color-picker.cjs\",[[1,\"limel-color-picker\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"tooltipLabel\":[513,\"tooltip-label\"],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"placeholder\":[513],\"manualInput\":[516,\"manual-input\"],\"palette\":[16],\"paletteColumnCount\":[514,\"palette-column-count\"],\"isOpen\":[32]}]]],[\"limel-profile-picture.cjs\",[[1,\"limel-profile-picture\",{\"language\":[513],\"label\":[513],\"icon\":[1],\"helperText\":[1,\"helper-text\"],\"disabled\":[516],\"readonly\":[516],\"required\":[516],\"invalid\":[516],\"loading\":[516],\"value\":[1],\"imageFit\":[513,\"image-fit\"],\"accept\":[513],\"resize\":[16],\"objectUrl\":[32],\"imageError\":[32],\"isErrorMessagePopoverOpen\":[32]}]]],[\"limel-date-picker.cjs\",[[1,\"limel-date-picker\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516],\"value\":[16],\"type\":[513],\"format\":[513],\"language\":[513],\"formatter\":[16],\"internalFormat\":[32],\"showPortal\":[32]}]]],[\"limel-dock.cjs\",[[1,\"limel-dock\",{\"dockItems\":[16],\"dockFooterItems\":[16],\"accessibleLabel\":[513,\"accessible-label\"],\"expanded\":[516],\"allowResize\":[516,\"allow-resize\"],\"mobileBreakPoint\":[514,\"mobile-break-point\"],\"useMobileLayout\":[32]}]]],[\"limel-snackbar.cjs\",[[1,\"limel-snackbar\",{\"open\":[516],\"message\":[1],\"timeout\":[514],\"actionText\":[1,\"action-text\"],\"dismissible\":[4],\"multiline\":[4],\"language\":[1],\"offset\":[32],\"isOpen\":[32],\"closing\":[32],\"show\":[64]},[[0,\"changeOffset\",\"onChangeIndex\"]]]]],[\"limel-select.cjs\",[[1,\"limel-select\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"required\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"value\":[16],\"options\":[16],\"multiple\":[4],\"menuOpen\":[32]}]]],[\"limel-button-group.cjs\",[[1,\"limel-button-group\",{\"value\":[16],\"disabled\":[516],\"selectedButtonId\":[32]}]]],[\"limel-chart.cjs\",[[1,\"limel-chart\",{\"language\":[513],\"accessibleLabel\":[513,\"accessible-label\"],\"accessibleItemsLabel\":[513,\"accessible-items-label\"],\"items\":[16],\"type\":[513],\"orientation\":[513],\"maxValue\":[514,\"max-value\"],\"axisIncrement\":[514,\"axis-increment\"],\"loading\":[516]}]]],[\"limel-collapsible-section.cjs\",[[1,\"limel-collapsible-section\",{\"isOpen\":[1540,\"is-open\"],\"header\":[513],\"icon\":[1],\"invalid\":[516],\"actions\":[16],\"language\":[513]}]]],[\"limel-help.cjs\",[[1,\"limel-help\",{\"value\":[1],\"trigger\":[1],\"readMoreLink\":[16],\"openDirection\":[513,\"open-direction\"],\"isOpen\":[32]}]]],[\"limel-info-tile.cjs\",[[1,\"limel-info-tile\",{\"value\":[520],\"icon\":[1],\"label\":[513],\"prefix\":[513],\"suffix\":[513],\"disabled\":[516],\"badge\":[520],\"loading\":[516],\"link\":[16],\"progress\":[16],\"hasPrimarySlot\":[32]}]]],[\"limel-checkbox.cjs\",[[1,\"limel-checkbox\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"checked\":[516],\"indeterminate\":[516],\"required\":[516],\"readonlyLabels\":[16],\"modified\":[32]}]]],[\"limel-table.cjs\",[[1,\"limel-table\",{\"data\":[16],\"columns\":[16],\"mode\":[1],\"layout\":[1],\"pageSize\":[2,\"page-size\"],\"totalRows\":[2,\"total-rows\"],\"sorting\":[16],\"activeRow\":[1040],\"movableColumns\":[4,\"movable-columns\"],\"sortableColumns\":[4,\"sortable-columns\"],\"loading\":[4],\"page\":[2],\"emptyMessage\":[1,\"empty-message\"],\"aggregates\":[16],\"selectable\":[4],\"selection\":[16],\"language\":[513]}]]],[\"limel-drag-handle.cjs\",[[0,\"limel-drag-handle\",{\"dragDirection\":[513,\"drag-direction\"],\"tooltipOpenDirection\":[513,\"tooltip-open-direction\"],\"language\":[513]}]]],[\"limel-shortcut.cjs\",[[1,\"limel-shortcut\",{\"icon\":[513],\"label\":[513],\"disabled\":[516],\"badge\":[520],\"link\":[16]}]]],[\"limel-switch.cjs\",[[1,\"limel-switch\",{\"label\":[513],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"value\":[516],\"helperText\":[513,\"helper-text\"],\"readonlyLabels\":[16],\"fieldId\":[32]}]]],[\"limel-tab-bar.cjs\",[[1,\"limel-tab-bar\",{\"tabs\":[1040],\"canScrollLeft\":[32],\"canScrollRight\":[32]},[[9,\"resize\",\"handleWindowResize\"]]]]],[\"limel-tab-panel.cjs\",[[1,\"limel-tab-panel\",{\"tabs\":[1040]}]]],[\"limel-dialog.cjs\",[[1,\"limel-dialog\",{\"heading\":[1],\"fullscreen\":[516],\"open\":[1540],\"closingActions\":[16]}]]],[\"limel-progress-flow.cjs\",[[1,\"limel-progress-flow\",{\"flowItems\":[16],\"disabled\":[4],\"readonly\":[4]}]]],[\"limel-slider.cjs\",[[1,\"limel-slider\",{\"disabled\":[516],\"readonly\":[516],\"factor\":[514],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516],\"invalid\":[516],\"unit\":[513],\"value\":[514],\"valuemax\":[514],\"valuemin\":[514],\"step\":[514],\"percentageClass\":[32]}]]],[\"limel-banner.cjs\",[[1,\"limel-banner\",{\"message\":[513],\"icon\":[513],\"isOpen\":[32],\"open\":[64],\"close\":[64]}]]],[\"limel-form.cjs\",[[1,\"limel-form\",{\"schema\":[16],\"value\":[16],\"disabled\":[4],\"propsFactory\":[16],\"transformErrors\":[16],\"errors\":[16]}]]],[\"limel-menu-item-meta.cjs\",[[1,\"limel-menu-item-meta\",{\"commandText\":[1,\"command-text\"],\"badge\":[8],\"showChevron\":[4,\"show-chevron\"]}]]],[\"limel-radio-button-group.cjs\",[[0,\"limel-radio-button-group\",{\"items\":[16],\"selectedItem\":[16],\"disabled\":[516],\"badgeIcons\":[516,\"badge-icons\"],\"maxLinesSecondaryText\":[514,\"max-lines-secondary-text\"]}]]],[\"limel-ai-avatar.cjs\",[[1,\"limel-ai-avatar\",{\"isThinking\":[516,\"is-thinking\"],\"language\":[513]}]]],[\"limel-code-editor.cjs\",[[1,\"limel-code-editor\",{\"value\":[1],\"language\":[1],\"readonly\":[4],\"lineNumbers\":[4,\"line-numbers\"],\"lineWrapping\":[4,\"line-wrapping\"],\"fold\":[4],\"lint\":[4],\"colorScheme\":[1,\"color-scheme\"],\"random\":[32]}]]],[\"limel-config.cjs\",[[1,\"limel-config\",{\"config\":[16]}]]],[\"limel-flex-container.cjs\",[[1,\"limel-flex-container\",{\"direction\":[513],\"justify\":[513],\"align\":[513],\"reverse\":[516]}]]],[\"limel-grid.cjs\",[[1,\"limel-grid\"]]],[\"limel-action-bar-item_2.cjs\",[[0,\"limel-action-bar-overflow-menu\",{\"items\":[16],\"openDirection\":[513,\"open-direction\"],\"overFlowIcon\":[16]}],[0,\"limel-action-bar-item\",{\"item\":[16],\"isVisible\":[516,\"is-visible\"],\"selected\":[516]}]]],[\"limel-action-bar_2.cjs\",[[1,\"limel-text-editor-link-menu\",{\"link\":[16],\"language\":[513],\"isOpen\":[516,\"is-open\"]}],[1,\"limel-action-bar\",{\"actions\":[16],\"language\":[513],\"accessibleLabel\":[513,\"accessible-label\"],\"layout\":[513],\"collapsible\":[516],\"openDirection\":[513,\"open-direction\"],\"overflowCutoff\":[32],\"actionBarIsShrunk\":[32]}]]],[\"limel-prosemirror-adapter.cjs\",[[17,\"limel-prosemirror-adapter\",{\"contentType\":[1,\"content-type\"],\"value\":[1],\"language\":[513],\"disabled\":[516],\"customElements\":[16],\"triggerCharacters\":[16],\"ui\":[1],\"view\":[32],\"actionBarItems\":[32],\"link\":[32],\"isLinkMenuOpen\":[32]}]]],[\"limel-color-picker-palette.cjs\",[[17,\"limel-color-picker-palette\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"placeholder\":[513],\"required\":[516],\"invalid\":[516],\"manualInput\":[516,\"manual-input\"],\"columnCount\":[514,\"column-count\"],\"palette\":[16]}]]],[\"limel-dock-button.cjs\",[[0,\"limel-dock-button\",{\"item\":[16],\"expanded\":[516],\"useMobileLayout\":[516,\"use-mobile-layout\"],\"isOpen\":[32]}]]],[\"limel-callout.cjs\",[[1,\"limel-callout\",{\"heading\":[513],\"icon\":[513],\"type\":[513],\"language\":[1]}]]],[\"limel-header.cjs\",[[1,\"limel-header\",{\"icon\":[1],\"heading\":[1],\"subheading\":[1],\"supportingText\":[1,\"supporting-text\"],\"subheadingDivider\":[1,\"subheading-divider\"]}]]],[\"limel-help-content.cjs\",[[1,\"limel-help-content\",{\"value\":[1],\"readMoreLink\":[16]}]]],[\"limel-progress-flow-item.cjs\",[[0,\"limel-progress-flow-item\",{\"item\":[16],\"disabled\":[4],\"readonly\":[4],\"currentStep\":[4,\"current-step\"]}]]],[\"limel-circular-progress.cjs\",[[1,\"limel-circular-progress\",{\"value\":[2],\"maxValue\":[2,\"max-value\"],\"prefix\":[513],\"suffix\":[1],\"displayPercentageColors\":[4,\"display-percentage-colors\"],\"size\":[513]}]]],[\"limel-flatpickr-adapter.cjs\",[[1,\"limel-flatpickr-adapter\",{\"value\":[16],\"type\":[1],\"format\":[1],\"isOpen\":[4,\"is-open\"],\"inputElement\":[16],\"language\":[1],\"formatter\":[16]}]]],[\"limel-radio-button.cjs\",[[0,\"limel-radio-button\",{\"checked\":[516],\"disabled\":[516],\"id\":[1],\"label\":[1],\"onChange\":[16]}]]],[\"limel-3d-hover-effect-glow.cjs\",[[1,\"limel-3d-hover-effect-glow\"]]],[\"limel-icon.cjs\",[[1,\"limel-icon\",{\"size\":[513],\"name\":[513],\"badge\":[516]}]]],[\"limel-portal_3.cjs\",[[1,\"limel-tooltip\",{\"elementId\":[513,\"element-id\"],\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514],\"openDirection\":[513,\"open-direction\"],\"open\":[32]}],[1,\"limel-tooltip-content\",{\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514]}],[1,\"limel-portal\",{\"openDirection\":[513,\"open-direction\"],\"position\":[513],\"containerId\":[513,\"container-id\"],\"containerStyle\":[16],\"inheritParentWidth\":[516,\"inherit-parent-width\"],\"visible\":[516],\"anchor\":[16]}]]],[\"limel-icon-button.cjs\",[[17,\"limel-icon-button\",{\"icon\":[1],\"elevated\":[516],\"label\":[513],\"disabled\":[516]}]]],[\"limel-file-dropzone_2.cjs\",[[1,\"limel-file-dropzone\",{\"accept\":[513],\"disabled\":[4],\"text\":[1],\"helperText\":[1,\"helper-text\"],\"hasFileToDrop\":[32]}],[1,\"limel-file-input\",{\"accept\":[513],\"disabled\":[516],\"multiple\":[516]}]]],[\"limel-dynamic-label.cjs\",[[1,\"limel-dynamic-label\",{\"value\":[8],\"defaultLabel\":[16],\"labels\":[16]}]]],[\"limel-helper-line.cjs\",[[1,\"limel-helper-line\",{\"helperText\":[513,\"helper-text\"],\"length\":[514],\"maxLength\":[514,\"max-length\"],\"invalid\":[516],\"helperTextId\":[513,\"helper-text-id\"]}]]],[\"limel-chip_2.cjs\",[[1,\"limel-chip-set\",{\"value\":[16],\"type\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"inputType\":[513,\"input-type\"],\"maxItems\":[514,\"max-items\"],\"required\":[516],\"searchLabel\":[513,\"search-label\"],\"emptyInputOnBlur\":[516,\"empty-input-on-blur\"],\"clearAllButton\":[4,\"clear-all-button\"],\"leadingIcon\":[513,\"leading-icon\"],\"delimiter\":[513],\"autocomplete\":[513],\"language\":[1],\"editMode\":[32],\"textValue\":[32],\"blurred\":[32],\"inputChipIndexSelected\":[32],\"selectedChipIds\":[32],\"getEditMode\":[64],\"setFocus\":[64],\"emptyInput\":[64]}],[17,\"limel-chip\",{\"language\":[513],\"text\":[513],\"icon\":[1],\"image\":[16],\"link\":[16],\"badge\":[520],\"disabled\":[516],\"readonly\":[516],\"selected\":[516],\"invalid\":[516],\"removable\":[516],\"type\":[513],\"loading\":[516],\"progress\":[514],\"identifier\":[520],\"size\":[513],\"menuItems\":[16]}]]],[\"limel-button.cjs\",[[17,\"limel-button\",{\"label\":[513],\"primary\":[516],\"outlined\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"justLoaded\":[32]}]]],[\"limel-linear-progress.cjs\",[[1,\"limel-linear-progress\",{\"language\":[513],\"value\":[514],\"indeterminate\":[516],\"accessibleLabel\":[513,\"accessible-label\"]}]]],[\"limel-markdown.cjs\",[[1,\"limel-markdown\",{\"value\":[1],\"whitelist\":[16],\"lazyLoadImages\":[4,\"lazy-load-images\"]}]]],[\"limel-popover_2.cjs\",[[1,\"limel-popover\",{\"open\":[4],\"openDirection\":[513,\"open-direction\"]}],[1,\"limel-popover-surface\",{\"contentCollection\":[16]}]]],[\"limel-badge.cjs\",[[1,\"limel-badge\",{\"label\":[520]}]]],[\"limel-breadcrumbs_8.cjs\",[[1,\"limel-menu\",{\"items\":[16],\"disabled\":[516],\"openDirection\":[513,\"open-direction\"],\"surfaceWidth\":[513,\"surface-width\"],\"open\":[1540],\"badgeIcons\":[516,\"badge-icons\"],\"gridLayout\":[516,\"grid-layout\"],\"loading\":[516],\"currentSubMenu\":[1040],\"rootItem\":[16],\"searcher\":[16],\"emptyResultMessage\":[1,\"empty-result-message\"],\"loadingSubItems\":[32],\"searchValue\":[32],\"searchResults\":[32]}],[1,\"limel-breadcrumbs\",{\"items\":[16],\"divider\":[1]}],[17,\"limel-menu-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"]}],[1,\"limel-input-field\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"prefix\":[513],\"suffix\":[513],\"required\":[516],\"value\":[513],\"trailingIcon\":[513,\"trailing-icon\"],\"leadingIcon\":[513,\"leading-icon\"],\"pattern\":[513],\"type\":[513],\"formatNumber\":[516,\"format-number\"],\"step\":[520],\"max\":[514],\"min\":[514],\"maxlength\":[514],\"minlength\":[514],\"completions\":[16],\"showLink\":[516,\"show-link\"],\"locale\":[513],\"isFocused\":[32],\"wasInvalid\":[32],\"showCompletions\":[32]}],[1,\"limel-menu-surface\",{\"open\":[4],\"allowClicksElement\":[16]}],[1,\"limel-spinner\",{\"size\":[513],\"limeBranded\":[4,\"lime-branded\"]}],[17,\"limel-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[4,\"limel-notched-outline\",{\"required\":[516],\"readonly\":[516],\"invalid\":[516],\"disabled\":[516],\"label\":[513],\"labelId\":[513,\"label-id\"],\"hasValue\":[516,\"has-value\"],\"hasLeadingIcon\":[516,\"has-leading-icon\"],\"hasFloatingLabel\":[516,\"has-floating-label\"]}]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"limel-text-editor.cjs\",[[17,\"limel-text-editor\",{\"contentType\":[1,\"content-type\"],\"language\":[513],\"disabled\":[516],\"readonly\":[516],\"helperText\":[513,\"helper-text\"],\"placeholder\":[513],\"label\":[513],\"invalid\":[516],\"value\":[513],\"customElements\":[16],\"triggers\":[16],\"required\":[516],\"allowResize\":[516,\"allow-resize\"],\"ui\":[513]}]]],[\"limel-card.cjs\",[[1,\"limel-card\",{\"heading\":[513],\"subheading\":[513],\"image\":[16],\"icon\":[513],\"value\":[1],\"actions\":[16],\"clickable\":[516],\"orientation\":[513]}]]],[\"limel-file.cjs\",[[1,\"limel-file\",{\"value\":[16],\"label\":[513],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"accept\":[513],\"language\":[1]}]]],[\"limel-list-item.cjs\",[[0,\"limel-list-item\",{\"language\":[513],\"value\":[8],\"text\":[513],\"secondaryText\":[513,\"secondary-text\"],\"disabled\":[516],\"icon\":[1],\"iconSize\":[513,\"icon-size\"],\"badgeIcon\":[516,\"badge-icon\"],\"selected\":[516],\"actions\":[16],\"primaryComponent\":[16],\"image\":[16],\"type\":[513]}]]],[\"limel-picker.cjs\",[[1,\"limel-picker\",{\"disabled\":[4],\"readonly\":[516],\"label\":[1],\"searchLabel\":[1,\"search-label\"],\"helperText\":[513,\"helper-text\"],\"leadingIcon\":[1,\"leading-icon\"],\"emptyResultMessage\":[1,\"empty-result-message\"],\"required\":[4],\"invalid\":[516],\"value\":[16],\"searcher\":[16],\"allItems\":[16],\"multiple\":[4],\"delimiter\":[513],\"actions\":[16],\"actionPosition\":[1,\"action-position\"],\"actionScrollBehavior\":[1,\"action-scroll-behavior\"],\"badgeIcons\":[516,\"badge-icons\"],\"items\":[32],\"textValue\":[32],\"loading\":[32],\"chips\":[32]}]]],[\"limel-split-button.cjs\",[[17,\"limel-split-button\",{\"label\":[513],\"primary\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"items\":[16]}]]],[\"limel-file-viewer.cjs\",[[1,\"limel-file-viewer\",{\"url\":[513],\"filename\":[513],\"alt\":[513],\"allowFullscreen\":[516,\"allow-fullscreen\"],\"allowOpenInNewTab\":[516,\"allow-open-in-new-tab\"],\"allowDownload\":[516,\"allow-download\"],\"language\":[1],\"officeViewer\":[513,\"office-viewer\"],\"actions\":[16],\"isFullscreen\":[32],\"fileType\":[32],\"loading\":[32],\"fileUrl\":[32]}]]],[\"limel-color-picker.cjs\",[[1,\"limel-color-picker\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"tooltipLabel\":[513,\"tooltip-label\"],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"placeholder\":[513],\"manualInput\":[516,\"manual-input\"],\"palette\":[16],\"paletteColumnCount\":[514,\"palette-column-count\"],\"isOpen\":[32]}]]],[\"limel-profile-picture.cjs\",[[1,\"limel-profile-picture\",{\"language\":[513],\"label\":[513],\"icon\":[1],\"helperText\":[1,\"helper-text\"],\"disabled\":[516],\"readonly\":[516],\"required\":[516],\"invalid\":[516],\"loading\":[516],\"value\":[1],\"imageFit\":[513,\"image-fit\"],\"accept\":[513],\"resize\":[16],\"objectUrl\":[32],\"imageError\":[32],\"isErrorMessagePopoverOpen\":[32]}]]],[\"limel-date-picker.cjs\",[[1,\"limel-date-picker\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516],\"value\":[16],\"type\":[513],\"format\":[513],\"language\":[513],\"formatter\":[16],\"internalFormat\":[32],\"showPortal\":[32]}]]],[\"limel-dock.cjs\",[[1,\"limel-dock\",{\"dockItems\":[16],\"dockFooterItems\":[16],\"accessibleLabel\":[513,\"accessible-label\"],\"expanded\":[516],\"allowResize\":[516,\"allow-resize\"],\"mobileBreakPoint\":[514,\"mobile-break-point\"],\"useMobileLayout\":[32]}]]],[\"limel-snackbar.cjs\",[[1,\"limel-snackbar\",{\"open\":[516],\"message\":[1],\"timeout\":[514],\"actionText\":[1,\"action-text\"],\"dismissible\":[4],\"multiline\":[4],\"language\":[1],\"offset\":[32],\"isOpen\":[32],\"closing\":[32],\"show\":[64]},[[0,\"changeOffset\",\"onChangeIndex\"]]]]],[\"limel-select.cjs\",[[1,\"limel-select\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"required\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"value\":[16],\"options\":[16],\"multiple\":[4],\"menuOpen\":[32]}]]],[\"limel-button-group.cjs\",[[1,\"limel-button-group\",{\"value\":[16],\"disabled\":[516],\"selectedButtonId\":[32]}]]],[\"limel-chart.cjs\",[[1,\"limel-chart\",{\"language\":[513],\"accessibleLabel\":[513,\"accessible-label\"],\"accessibleItemsLabel\":[513,\"accessible-items-label\"],\"items\":[16],\"type\":[513],\"orientation\":[513],\"maxValue\":[514,\"max-value\"],\"axisIncrement\":[514,\"axis-increment\"],\"loading\":[516]}]]],[\"limel-collapsible-section.cjs\",[[1,\"limel-collapsible-section\",{\"isOpen\":[1540,\"is-open\"],\"header\":[513],\"icon\":[1],\"invalid\":[516],\"actions\":[16],\"language\":[513]}]]],[\"limel-help.cjs\",[[1,\"limel-help\",{\"value\":[1],\"trigger\":[1],\"readMoreLink\":[16],\"openDirection\":[513,\"open-direction\"],\"isOpen\":[32]}]]],[\"limel-info-tile.cjs\",[[1,\"limel-info-tile\",{\"value\":[520],\"icon\":[1],\"label\":[513],\"prefix\":[513],\"suffix\":[513],\"disabled\":[516],\"badge\":[520],\"loading\":[516],\"link\":[16],\"progress\":[16],\"hasPrimarySlot\":[32]}]]],[\"limel-checkbox.cjs\",[[1,\"limel-checkbox\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"checked\":[516],\"indeterminate\":[516],\"required\":[516],\"readonlyLabels\":[16],\"modified\":[32]}]]],[\"limel-table.cjs\",[[1,\"limel-table\",{\"data\":[16],\"columns\":[16],\"mode\":[1],\"layout\":[1],\"pageSize\":[2,\"page-size\"],\"totalRows\":[2,\"total-rows\"],\"sorting\":[16],\"activeRow\":[1040],\"movableColumns\":[4,\"movable-columns\"],\"sortableColumns\":[4,\"sortable-columns\"],\"loading\":[4],\"page\":[2],\"emptyMessage\":[1,\"empty-message\"],\"aggregates\":[16],\"selectable\":[4],\"selection\":[16],\"language\":[513]}]]],[\"limel-drag-handle.cjs\",[[0,\"limel-drag-handle\",{\"dragDirection\":[513,\"drag-direction\"],\"tooltipOpenDirection\":[513,\"tooltip-open-direction\"],\"language\":[513]}]]],[\"limel-shortcut.cjs\",[[1,\"limel-shortcut\",{\"icon\":[513],\"label\":[513],\"disabled\":[516],\"badge\":[520],\"link\":[16]}]]],[\"limel-switch.cjs\",[[1,\"limel-switch\",{\"label\":[513],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"value\":[516],\"helperText\":[513,\"helper-text\"],\"readonlyLabels\":[16],\"fieldId\":[32]}]]],[\"limel-tab-bar.cjs\",[[1,\"limel-tab-bar\",{\"tabs\":[1040],\"canScrollLeft\":[32],\"canScrollRight\":[32]},[[9,\"resize\",\"handleWindowResize\"]]]]],[\"limel-tab-panel.cjs\",[[1,\"limel-tab-panel\",{\"tabs\":[1040]}]]],[\"limel-code-editor.cjs\",[[1,\"limel-code-editor\",{\"value\":[1],\"language\":[1],\"readonly\":[516],\"disabled\":[516],\"invalid\":[516],\"required\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"lineNumbers\":[516,\"line-numbers\"],\"lineWrapping\":[516,\"line-wrapping\"],\"fold\":[516],\"lint\":[516],\"colorScheme\":[513,\"color-scheme\"],\"random\":[32]}]]],[\"limel-dialog.cjs\",[[1,\"limel-dialog\",{\"heading\":[1],\"fullscreen\":[516],\"open\":[1540],\"closingActions\":[16]}]]],[\"limel-progress-flow.cjs\",[[1,\"limel-progress-flow\",{\"flowItems\":[16],\"disabled\":[4],\"readonly\":[4]}]]],[\"limel-slider.cjs\",[[1,\"limel-slider\",{\"disabled\":[516],\"readonly\":[516],\"factor\":[514],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516],\"invalid\":[516],\"unit\":[513],\"value\":[514],\"valuemax\":[514],\"valuemin\":[514],\"step\":[514],\"percentageClass\":[32]}]]],[\"limel-banner.cjs\",[[1,\"limel-banner\",{\"message\":[513],\"icon\":[513],\"isOpen\":[32],\"open\":[64],\"close\":[64]}]]],[\"limel-form.cjs\",[[1,\"limel-form\",{\"schema\":[16],\"value\":[16],\"disabled\":[4],\"propsFactory\":[16],\"transformErrors\":[16],\"errors\":[16]}]]],[\"limel-menu-item-meta.cjs\",[[1,\"limel-menu-item-meta\",{\"commandText\":[1,\"command-text\"],\"badge\":[8],\"showChevron\":[4,\"show-chevron\"]}]]],[\"limel-radio-button-group.cjs\",[[0,\"limel-radio-button-group\",{\"items\":[16],\"selectedItem\":[16],\"disabled\":[516],\"badgeIcons\":[516,\"badge-icons\"],\"maxLinesSecondaryText\":[514,\"max-lines-secondary-text\"]}]]],[\"limel-ai-avatar.cjs\",[[1,\"limel-ai-avatar\",{\"isThinking\":[516,\"is-thinking\"],\"language\":[513]}]]],[\"limel-config.cjs\",[[1,\"limel-config\",{\"config\":[16]}]]],[\"limel-flex-container.cjs\",[[1,\"limel-flex-container\",{\"direction\":[513],\"justify\":[513],\"align\":[513],\"reverse\":[516]}]]],[\"limel-grid.cjs\",[[1,\"limel-grid\"]]],[\"limel-action-bar-item_2.cjs\",[[0,\"limel-action-bar-overflow-menu\",{\"items\":[16],\"openDirection\":[513,\"open-direction\"],\"overFlowIcon\":[16]}],[0,\"limel-action-bar-item\",{\"item\":[16],\"isVisible\":[516,\"is-visible\"],\"selected\":[516]}]]],[\"limel-action-bar_2.cjs\",[[1,\"limel-text-editor-link-menu\",{\"link\":[16],\"language\":[513],\"isOpen\":[516,\"is-open\"]}],[1,\"limel-action-bar\",{\"actions\":[16],\"language\":[513],\"accessibleLabel\":[513,\"accessible-label\"],\"layout\":[513],\"collapsible\":[516],\"openDirection\":[513,\"open-direction\"],\"overflowCutoff\":[32],\"actionBarIsShrunk\":[32]}]]],[\"limel-prosemirror-adapter.cjs\",[[17,\"limel-prosemirror-adapter\",{\"contentType\":[1,\"content-type\"],\"value\":[1],\"language\":[513],\"disabled\":[516],\"customElements\":[16],\"triggerCharacters\":[16],\"ui\":[1],\"view\":[32],\"actionBarItems\":[32],\"link\":[32],\"isLinkMenuOpen\":[32]}]]],[\"limel-color-picker-palette.cjs\",[[17,\"limel-color-picker-palette\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"placeholder\":[513],\"required\":[516],\"invalid\":[516],\"manualInput\":[516,\"manual-input\"],\"columnCount\":[514,\"column-count\"],\"palette\":[16]}]]],[\"limel-dock-button.cjs\",[[0,\"limel-dock-button\",{\"item\":[16],\"expanded\":[516],\"useMobileLayout\":[516,\"use-mobile-layout\"],\"isOpen\":[32]}]]],[\"limel-callout.cjs\",[[1,\"limel-callout\",{\"heading\":[513],\"icon\":[513],\"type\":[513],\"language\":[1]}]]],[\"limel-header.cjs\",[[1,\"limel-header\",{\"icon\":[1],\"heading\":[1],\"subheading\":[1],\"supportingText\":[1,\"supporting-text\"],\"subheadingDivider\":[1,\"subheading-divider\"]}]]],[\"limel-help-content.cjs\",[[1,\"limel-help-content\",{\"value\":[1],\"readMoreLink\":[16]}]]],[\"limel-progress-flow-item.cjs\",[[0,\"limel-progress-flow-item\",{\"item\":[16],\"disabled\":[4],\"readonly\":[4],\"currentStep\":[4,\"current-step\"]}]]],[\"limel-circular-progress.cjs\",[[1,\"limel-circular-progress\",{\"value\":[2],\"maxValue\":[2,\"max-value\"],\"prefix\":[513],\"suffix\":[1],\"displayPercentageColors\":[4,\"display-percentage-colors\"],\"size\":[513]}]]],[\"limel-flatpickr-adapter.cjs\",[[1,\"limel-flatpickr-adapter\",{\"value\":[16],\"type\":[1],\"format\":[1],\"isOpen\":[4,\"is-open\"],\"inputElement\":[16],\"language\":[1],\"formatter\":[16]}]]],[\"limel-radio-button.cjs\",[[0,\"limel-radio-button\",{\"checked\":[516],\"disabled\":[516],\"id\":[1],\"label\":[1],\"onChange\":[16]}]]],[\"limel-3d-hover-effect-glow.cjs\",[[1,\"limel-3d-hover-effect-glow\"]]],[\"limel-icon.cjs\",[[1,\"limel-icon\",{\"size\":[513],\"name\":[513],\"badge\":[516]}]]],[\"limel-portal_3.cjs\",[[1,\"limel-tooltip\",{\"elementId\":[513,\"element-id\"],\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514],\"openDirection\":[513,\"open-direction\"],\"open\":[32]}],[1,\"limel-tooltip-content\",{\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514]}],[1,\"limel-portal\",{\"openDirection\":[513,\"open-direction\"],\"position\":[513],\"containerId\":[513,\"container-id\"],\"containerStyle\":[16],\"inheritParentWidth\":[516,\"inherit-parent-width\"],\"visible\":[516],\"anchor\":[16]}]]],[\"limel-icon-button.cjs\",[[17,\"limel-icon-button\",{\"icon\":[1],\"elevated\":[516],\"label\":[513],\"disabled\":[516]}]]],[\"limel-file-dropzone_2.cjs\",[[1,\"limel-file-dropzone\",{\"accept\":[513],\"disabled\":[4],\"text\":[1],\"helperText\":[1,\"helper-text\"],\"hasFileToDrop\":[32]}],[1,\"limel-file-input\",{\"accept\":[513],\"disabled\":[516],\"multiple\":[516]}]]],[\"limel-dynamic-label.cjs\",[[1,\"limel-dynamic-label\",{\"value\":[8],\"defaultLabel\":[16],\"labels\":[16]}]]],[\"limel-badge.cjs\",[[1,\"limel-badge\",{\"label\":[520]}]]],[\"limel-chip_2.cjs\",[[1,\"limel-chip-set\",{\"value\":[16],\"type\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"inputType\":[513,\"input-type\"],\"maxItems\":[514,\"max-items\"],\"required\":[516],\"searchLabel\":[513,\"search-label\"],\"emptyInputOnBlur\":[516,\"empty-input-on-blur\"],\"clearAllButton\":[4,\"clear-all-button\"],\"leadingIcon\":[513,\"leading-icon\"],\"delimiter\":[513],\"autocomplete\":[513],\"language\":[1],\"editMode\":[32],\"textValue\":[32],\"blurred\":[32],\"inputChipIndexSelected\":[32],\"selectedChipIds\":[32],\"getEditMode\":[64],\"setFocus\":[64],\"emptyInput\":[64]}],[17,\"limel-chip\",{\"language\":[513],\"text\":[513],\"icon\":[1],\"image\":[16],\"link\":[16],\"badge\":[520],\"disabled\":[516],\"readonly\":[516],\"selected\":[516],\"invalid\":[516],\"removable\":[516],\"type\":[513],\"loading\":[516],\"progress\":[514],\"identifier\":[520],\"size\":[513],\"menuItems\":[16]}]]],[\"limel-button.cjs\",[[17,\"limel-button\",{\"label\":[513],\"primary\":[516],\"outlined\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"justLoaded\":[32]}]]],[\"limel-linear-progress.cjs\",[[1,\"limel-linear-progress\",{\"language\":[513],\"value\":[514],\"indeterminate\":[516],\"accessibleLabel\":[513,\"accessible-label\"]}]]],[\"limel-markdown.cjs\",[[1,\"limel-markdown\",{\"value\":[1],\"whitelist\":[16],\"lazyLoadImages\":[4,\"lazy-load-images\"]}]]],[\"limel-popover_2.cjs\",[[1,\"limel-popover\",{\"open\":[4],\"openDirection\":[513,\"open-direction\"]}],[1,\"limel-popover-surface\",{\"contentCollection\":[16]}]]],[\"limel-helper-line_2.cjs\",[[4,\"limel-notched-outline\",{\"required\":[516],\"readonly\":[516],\"invalid\":[516],\"disabled\":[516],\"label\":[513],\"labelId\":[513,\"label-id\"],\"hasValue\":[516,\"has-value\"],\"hasLeadingIcon\":[516,\"has-leading-icon\"],\"hasFloatingLabel\":[516,\"has-floating-label\"]}],[1,\"limel-helper-line\",{\"helperText\":[513,\"helper-text\"],\"length\":[514],\"maxLength\":[514,\"max-length\"],\"invalid\":[516],\"helperTextId\":[513,\"helper-text-id\"]}]]],[\"limel-breadcrumbs_7.cjs\",[[1,\"limel-menu\",{\"items\":[16],\"disabled\":[516],\"openDirection\":[513,\"open-direction\"],\"surfaceWidth\":[513,\"surface-width\"],\"open\":[1540],\"badgeIcons\":[516,\"badge-icons\"],\"gridLayout\":[516,\"grid-layout\"],\"loading\":[516],\"currentSubMenu\":[1040],\"rootItem\":[16],\"searcher\":[16],\"emptyResultMessage\":[1,\"empty-result-message\"],\"loadingSubItems\":[32],\"searchValue\":[32],\"searchResults\":[32]}],[1,\"limel-breadcrumbs\",{\"items\":[16],\"divider\":[1]}],[17,\"limel-menu-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"]}],[1,\"limel-input-field\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"prefix\":[513],\"suffix\":[513],\"required\":[516],\"value\":[513],\"trailingIcon\":[513,\"trailing-icon\"],\"leadingIcon\":[513,\"leading-icon\"],\"pattern\":[513],\"type\":[513],\"formatNumber\":[516,\"format-number\"],\"step\":[520],\"max\":[514],\"min\":[514],\"maxlength\":[514],\"minlength\":[514],\"completions\":[16],\"showLink\":[516,\"show-link\"],\"locale\":[513],\"isFocused\":[32],\"wasInvalid\":[32],\"showCompletions\":[32]}],[1,\"limel-menu-surface\",{\"open\":[4],\"allowClicksElement\":[16]}],[1,\"limel-spinner\",{\"size\":[513],\"limeBranded\":[4,\"lime-branded\"]}],[17,\"limel-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}]]]]"), options);
   });
 };
 

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

@@ -538,6 +538,8 @@ span.CodeMirror-selectedtext { background: none; }
  */
 :host {
   display: flex;
+  flex-direction: column;
+  width: 100%;
   font-size: var(--code-editor-font-size, 0.8125rem);
   --code-editor-neutral-text-color: var(--contrast-1100);
   --code-editor-background-color: var(--contrast-200);
@@ -685,6 +687,7 @@ span.CodeMirror-selectedtext { background: none; }
   display: flex;
   align-items: stretch;
   width: 100%;
+  min-height: 2.5rem;
 }
 .editor.readonly .CodeMirror-focused .CodeMirror-cursors {
   visibility: visible !important;
@@ -722,6 +725,9 @@ span.CodeMirror-selectedtext { background: none; }
   border-color: rgba(var(--code-editor-neutral-text-color), 0.5);
   border-width: 0.125rem;
 }
+.cm-s-lime .CodeMirror-lines {
+  padding: 0.25rem 0;
+}
 .cm-s-lime .CodeMirror-activeline-background {
   background: rgba(var(--code-editor-selection-lowlight-color), 0.5);
 }
@@ -794,4 +800,27 @@ span.CodeMirror-selectedtext { background: none; }
 }
 .cm-s-lime .CodeMirror-foldgutter-folded {
   opacity: 0.7;
+}
+
+limel-notched-outline {
+  flex-grow: 1;
+}
+
+:host(limel-code-editor:focus),
+:host(limel-code-editor:focus-visible),
+:host(limel-code-editor:focus-within) {
+  --limel-h-l-grid-template-rows-transition-speed: 0.46s;
+  --limel-h-l-grid-template-rows: 1fr;
+}
+
+:host(limel-code-editor) {
+  --limel-h-l-grid-template-rows-transition-speed: 0.3s;
+  --limel-h-l-grid-template-rows: 0fr;
+}
+
+:host(limel-code-editor:focus) limel-helper-line,
+:host(limel-code-editor:focus-visible) limel-helper-line,
+:host(limel-code-editor:focus-within) limel-helper-line,
+:host(limel-code-editor:hover) limel-helper-line {
+  will-change: grid-template-rows;
 }

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

@@ -1,4 +1,5 @@
-import { h, } from '@stencil/core';
+import { h, Host, } from '@stencil/core';
+import { createRandomString } from '../../util/random-string';
 import CodeMirror from 'codemirror';
 import 'codemirror/mode/css/css';
 import 'codemirror/mode/htmlmixed/htmlmixed';
@@ -17,6 +18,7 @@ import jslint from 'jsonlint-mod';
  * @exampleComponent limel-example-code-editor
  * @exampleComponent limel-example-code-editor-readonly-with-line-numbers
  * @exampleComponent limel-example-code-editor-fold-lint-wrap
+ * @exampleComponent limel-example-code-editor-composite
  */
 export class CodeEditor {
   constructor() {
@@ -35,15 +37,28 @@ export class CodeEditor {
       }
       this.editor.refresh();
     };
+    this.renderHelperLine = () => {
+      if (!this.helperText) {
+        return;
+      }
+      return (h("limel-helper-line", { helperText: this.helperText, helperTextId: this.helperTextId, invalid: this.invalid }));
+    };
     this.value = '';
     this.language = undefined;
     this.readonly = false;
+    this.disabled = false;
+    this.invalid = false;
+    this.required = false;
+    this.label = undefined;
+    this.helperText = undefined;
     this.lineNumbers = false;
     this.lineWrapping = false;
     this.fold = false;
     this.lint = false;
     this.colorScheme = 'auto';
     this.random = undefined;
+    this.labelId = createRandomString();
+    this.helperTextId = createRandomString();
   }
   connectedCallback() {
     this.observer = new ResizeObserver(this.handleResize);
@@ -67,6 +82,7 @@ export class CodeEditor {
       return;
     }
     this.editor = this.createEditor();
+    this.updateInputFieldAccessibilityAttributes();
   }
   watchValue(newValue) {
     if (!this.editor) {
@@ -80,6 +96,23 @@ export class CodeEditor {
     }
     this.editor.getDoc().setValue(newValue || '');
   }
+  watchDisabled() {
+    this.updateEditorReadOnlyState();
+    this.updateInputFieldAccessibilityAttributes();
+  }
+  watchReadonly() {
+    this.updateEditorReadOnlyState();
+    this.updateInputFieldAccessibilityAttributes();
+  }
+  watchInvalid() {
+    this.updateInputFieldAccessibilityAttributes();
+  }
+  watchRequired() {
+    this.updateInputFieldAccessibilityAttributes();
+  }
+  watchHelperText() {
+    this.updateInputFieldAccessibilityAttributes();
+  }
   createEditor() {
     const options = this.getOptions();
     const editor = CodeMirror(this.host.shadowRoot.querySelector('.editor'), options);
@@ -130,7 +163,7 @@ export class CodeEditor {
       mode: mode,
       value: this.value || '',
       theme: theme,
-      readOnly: this.readonly,
+      readOnly: this.getReadOnlyOption(),
       tabSize: TAB_SIZE,
       indentUnit: TAB_SIZE,
       lineNumbers: this.lineNumbers,
@@ -152,11 +185,12 @@ export class CodeEditor {
   render() {
     const classList = {
       editor: true,
-      readonly: this.readonly,
+      readonly: this.readonly || this.disabled,
+      disabled: this.disabled,
       'is-dark-mode': this.isDarkMode(),
       'is-light-mode': !this.isDarkMode(),
     };
-    return h("div", { class: classList });
+    return (h(Host, null, h("limel-notched-outline", { labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasFloatingLabel: true }, h("div", { slot: "content", class: classList })), this.renderHelperLine()));
   }
   forceRedraw() {
     // eslint-disable-next-line sonarjs/pseudo-random
@@ -165,6 +199,60 @@ export class CodeEditor {
   get darkMode() {
     return matchMedia('(prefers-color-scheme: dark)');
   }
+  updateEditorReadOnlyState() {
+    if (!this.editor) {
+      return;
+    }
+    this.editor.setOption('readOnly', this.getReadOnlyOption());
+  }
+  getReadOnlyOption() {
+    if (this.disabled) {
+      return 'nocursor';
+    }
+    return this.readonly;
+  }
+  updateInputFieldAccessibilityAttributes() {
+    if (!this.editor) {
+      return;
+    }
+    const inputField = this.editor.getInputField();
+    if (!inputField) {
+      return;
+    }
+    inputField.id = this.labelId;
+    if (this.helperText) {
+      inputField.setAttribute('aria-describedby', this.helperTextId);
+      inputField.setAttribute('aria-controls', this.helperTextId);
+    }
+    else {
+      inputField.removeAttribute('aria-describedby');
+      inputField.removeAttribute('aria-controls');
+    }
+    if (this.required) {
+      inputField.setAttribute('aria-required', 'true');
+    }
+    else {
+      inputField.removeAttribute('aria-required');
+    }
+    if (this.invalid) {
+      inputField.setAttribute('aria-invalid', 'true');
+    }
+    else {
+      inputField.removeAttribute('aria-invalid');
+    }
+    if (this.disabled) {
+      inputField.setAttribute('aria-disabled', 'true');
+    }
+    else {
+      inputField.removeAttribute('aria-disabled');
+    }
+    if (this.readonly || this.disabled) {
+      inputField.setAttribute('aria-readonly', 'true');
+    }
+    else {
+      inputField.removeAttribute('aria-readonly');
+    }
+  }
   static get is() { return "limel-code-editor"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
@@ -231,12 +319,100 @@ export class CodeEditor {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Disables editing of the editor content"
+          "text": "Set to `true` to make the editor read-only.\nUse `readonly` when the editor is only there to present the data it holds,\nand will not become possible for the current user to edit."
         },
         "attribute": "readonly",
-        "reflect": false,
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` to disable the editor.\nUse `disabled` to indicate that the editor can normally be interacted\nwith, but is currently disabled. This tells the user that if certain\nrequirements are met, the editor may become enabled again."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "invalid": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` to indicate that the current value of the input editor is\ninvalid."
+        },
+        "attribute": "invalid",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` to indicate that the field is required."
+        },
+        "attribute": "required",
+        "reflect": true,
         "defaultValue": "false"
       },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The input label."
+        },
+        "attribute": "label",
+        "reflect": true
+      },
+      "helperText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Optional helper text to display below the input field when it has focus"
+        },
+        "attribute": "helper-text",
+        "reflect": true
+      },
       "lineNumbers": {
         "type": "boolean",
         "mutable": false,
@@ -252,7 +428,7 @@ export class CodeEditor {
           "text": "Displays line numbers in the editor"
         },
         "attribute": "line-numbers",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "false"
       },
       "lineWrapping": {
@@ -270,7 +446,7 @@ export class CodeEditor {
           "text": "Wraps long lines instead of showing horizontal scrollbar"
         },
         "attribute": "line-wrapping",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "false"
       },
       "fold": {
@@ -288,7 +464,7 @@ export class CodeEditor {
           "text": "Allows the user to fold code"
         },
         "attribute": "fold",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "false"
       },
       "lint": {
@@ -306,7 +482,7 @@ export class CodeEditor {
           "text": "Enables linting of JSON content"
         },
         "attribute": "lint",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "false"
       },
       "colorScheme": {
@@ -329,7 +505,7 @@ export class CodeEditor {
           "text": "Select color scheme for the editor"
         },
         "attribute": "color-scheme",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "'auto'"
       }
     };
@@ -362,6 +538,21 @@ export class CodeEditor {
     return [{
         "propName": "value",
         "methodName": "watchValue"
+      }, {
+        "propName": "disabled",
+        "methodName": "watchDisabled"
+      }, {
+        "propName": "readonly",
+        "methodName": "watchReadonly"
+      }, {
+        "propName": "invalid",
+        "methodName": "watchInvalid"
+      }, {
+        "propName": "required",
+        "methodName": "watchRequired"
+      }, {
+        "propName": "helperText",
+        "methodName": "watchHelperText"
       }];
   }
 }