@limetech/lime-elements 38.33.7 → 38.34.0

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

@@ -0,0 +1,2 @@
+import{r as e,h as l,H as t}from"./p-288f0842.js";const o=":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 i=class{constructor(t){e(this,t);this.hasContent=()=>!!(this.maxLength>0||this.helperText&&this.helperText.length>0);this.renderHelperText=()=>{if(!this.helperText){return}return l("span",{class:"helper-text",id:this.helperTextId},this.helperText)};this.renderCharacterCounter=()=>{const e=`${this.length} / ${this.maxLength}`;if(!this.maxLength){return}return l("span",{class:"counter"},e)};this.helperText=undefined;this.length=undefined;this.maxLength=undefined;this.invalid=false;this.helperTextId=undefined}render(){return l(t,{tabIndex:-1,class:{invalid:this.invalid},style:this.hasContent()?{}:{display:"none"},"aria-hidden":!this.hasContent()},l("div",null,this.renderHelperText(),this.renderCharacterCounter()))}};i.style=o;const n='@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 r=class{constructor(l){e(this,l);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 l("div",{class:"limel-notched-outline"},l("slot",{name:"content"}),l("span",{class:"limel-notched-outline--outlines","aria-hidden":"true"},l("span",{class:"limel-notched-outline--leading-outline"}),this.renderLabel(),l("span",{class:"limel-notched-outline--trailing-outline"}),this.renderEmptyReadonlyValue()))}renderLabel(){if(!this.label){return}return l("span",{class:"limel-notched-outline--notch"},l("label",{htmlFor:this.labelId},this.label))}renderEmptyReadonlyValue(){if(!this.readonly||this.hasValue){return}return l("span",{class:"limel-notched-outline--empty-readonly-value","aria-hidden":"true"},"–")}};r.style=n;export{i as limel_helper_line,r as limel_notched_outline};
+//# sourceMappingURL=p-f1ec1eeb.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["helperLineCss","HelperLine","this","hasContent","maxLength","helperText","length","renderHelperText","h","class","id","helperTextId","renderCharacterCounter","counter","render","Host","tabIndex","invalid","style","display","notchedOutlineCss","NotchedOutline","name","renderLabel","renderEmptyReadonlyValue","label","htmlFor","labelId","readonly","hasValue"],"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"],"mappings":"kDAAA,MAAMA,EAAgB,k7B,MC2BTC,EAAU,M,yBAqDXC,KAAAC,WAAa,OAEbD,KAAKE,UAAY,GAChBF,KAAKG,YAAcH,KAAKG,WAAWC,OAAS,GAI7CJ,KAAAK,iBAAmB,KACvB,IAAKL,KAAKG,WAAY,CAClB,M,CAGJ,OACIG,EAAA,QAAMC,MAAM,cAAcC,GAAIR,KAAKS,cAC9BT,KAAKG,WACH,EAIPH,KAAAU,uBAAyB,KAC7B,MAAMC,EAAU,GAAGX,KAAKI,YAAYJ,KAAKE,YAEzC,IAAKF,KAAKE,UAAW,CACjB,M,CAGJ,OAAOI,EAAA,QAAMC,MAAM,WAAWI,EAAe,E,sFApDtB,M,4BAQpBC,SACH,OACIN,EAACO,EAAI,CACDC,UAAW,EACXP,MAAO,CACHQ,QAASf,KAAKe,SAElBC,MAAOhB,KAAKC,aAAe,GAAK,CAAEgB,QAAS,QAAQ,eACrCjB,KAAKC,cAEnBK,EAAA,WACKN,KAAKK,mBACLL,KAAKU,0B,aC1E1B,MAAMQ,EAAoB,iuL,MCuBbC,EAAc,M,uCAOL,M,cAOA,M,aAOD,M,cAQC,M,0DAwBA,M,oBAQM,M,sBASE,K,CAEnBP,SACH,OACIN,EAAA,OAAKC,MAAM,yBACPD,EAAA,QAAMc,KAAK,YACXd,EAAA,QACIC,MAAM,kCAAiC,cAC3B,QAEZD,EAAA,QAAMC,MAAM,2CACXP,KAAKqB,cACNf,EAAA,QAAMC,MAAM,4CACXP,KAAKsB,4B,CAMdD,cACJ,IAAKrB,KAAKuB,MAAO,CACb,M,CAGJ,OACIjB,EAAA,QAAMC,MAAM,gCACRD,EAAA,SAAOkB,QAASxB,KAAKyB,SAAUzB,KAAKuB,O,CAKxCD,2BACJ,IAAKtB,KAAK0B,UAAY1B,KAAK2B,SAAU,CACjC,M,CAGJ,OACIrB,EAAA,QACIC,MAAM,8CAA6C,cACvC,QAAM,I"}

package/dist/types/components/code-editor/code-editor.d.ts

@@ -16,6 +16,7 @@ import 'codemirror/addon/fold/xml-fold';
  * @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 declare class CodeEditor {
   /**
@@ -27,9 +28,35 @@ export declare class CodeEditor {
    */
   language: Language;
   /**
-   * Disables editing of the editor content
+   * Set to `true` to make the editor read-only.
+   * Use `readonly` when the editor is only there to present the data it holds,
+   * and will not become possible for the current user to edit.
    */
   readonly: boolean;
+  /**
+   * Set to `true` to disable the editor.
+   * Use `disabled` to indicate that the editor can normally be interacted
+   * with, but is currently disabled. This tells the user that if certain
+   * requirements are met, the editor may become enabled again.
+   */
+  disabled: boolean;
+  /**
+   * Set to `true` to indicate that the current value of the input editor is
+   * invalid.
+   */
+  invalid: boolean;
+  /**
+   * Set to `true` to indicate that the field is required.
+   */
+  required: boolean;
+  /**
+   * The input label.
+   */
+  label?: string;
+  /**
+   * Optional helper text to display below the input field when it has focus
+   */
+  helperText?: string;
   /**
    * Displays line numbers in the editor
    */
@@ -63,10 +90,18 @@ export declare class CodeEditor {
   protected random: number;
   private editor;
   private observer;
+  private labelId;
+  private helperTextId;
+  constructor();
   connectedCallback(): void;
   disconnectedCallback(): void;
   componentDidRender(): void;
   protected watchValue(newValue: string): void;
+  protected watchDisabled(): void;
+  protected watchReadonly(): void;
+  protected watchInvalid(): void;
+  protected watchRequired(): void;
+  protected watchHelperText(): void;
   private handleChangeDarkMode;
   private handleChange;
   private handleResize;
@@ -74,7 +109,11 @@ export declare class CodeEditor {
   private getOptions;
   private isDarkMode;
   render(): any;
+  private renderHelperLine;
   private forceRedraw;
   private get darkMode();
+  private updateEditorReadOnlyState;
+  private getReadOnlyOption;
+  private updateInputFieldAccessibilityAttributes;
 }
 //# sourceMappingURL=code-editor.d.ts.map

package/dist/types/components.d.ts

@@ -865,16 +865,33 @@ export namespace Components {
      * @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
      */
     interface LimelCodeEditor {
         /**
           * Select color scheme for the editor
          */
         "colorScheme": ColorScheme;
+        /**
+          * Set to `true` to disable the editor. Use `disabled` to indicate that the editor can normally be interacted with, but is currently disabled. This tells the user that if certain requirements are met, the editor may become enabled again.
+         */
+        "disabled": boolean;
         /**
           * Allows the user to fold code
          */
         "fold": boolean;
+        /**
+          * Optional helper text to display below the input field when it has focus
+         */
+        "helperText"?: string;
+        /**
+          * Set to `true` to indicate that the current value of the input editor is invalid.
+         */
+        "invalid": boolean;
+        /**
+          * The input label.
+         */
+        "label"?: string;
         /**
           * The language of the code
          */
@@ -892,9 +909,13 @@ export namespace Components {
          */
         "lint": boolean;
         /**
-          * Disables editing of the editor content
+          * Set to `true` to make the editor read-only. Use `readonly` when the editor is only there to present the data it holds, and will not become possible for the current user to edit.
          */
         "readonly": boolean;
+        /**
+          * Set to `true` to indicate that the field is required.
+         */
+        "required": boolean;
         /**
           * The code to be rendered
          */
@@ -3955,6 +3976,7 @@ declare global {
      * @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
      */
     interface HTMLLimelCodeEditorElement extends Components.LimelCodeEditor, HTMLStencilElement {
     }
@@ -6063,16 +6085,33 @@ declare namespace LocalJSX {
      * @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
      */
     interface LimelCodeEditor {
         /**
           * Select color scheme for the editor
          */
         "colorScheme"?: ColorScheme;
+        /**
+          * Set to `true` to disable the editor. Use `disabled` to indicate that the editor can normally be interacted with, but is currently disabled. This tells the user that if certain requirements are met, the editor may become enabled again.
+         */
+        "disabled"?: boolean;
         /**
           * Allows the user to fold code
          */
         "fold"?: boolean;
+        /**
+          * Optional helper text to display below the input field when it has focus
+         */
+        "helperText"?: string;
+        /**
+          * Set to `true` to indicate that the current value of the input editor is invalid.
+         */
+        "invalid"?: boolean;
+        /**
+          * The input label.
+         */
+        "label"?: string;
         /**
           * The language of the code
          */
@@ -6094,9 +6133,13 @@ declare namespace LocalJSX {
          */
         "onChange"?: (event: LimelCodeEditorCustomEvent<string>) => void;
         /**
-          * Disables editing of the editor content
+          * Set to `true` to make the editor read-only. Use `readonly` when the editor is only there to present the data it holds, and will not become possible for the current user to edit.
          */
         "readonly"?: boolean;
+        /**
+          * Set to `true` to indicate that the field is required.
+         */
+        "required"?: boolean;
         /**
           * The code to be rendered
          */
@@ -9269,6 +9312,7 @@ declare module "@stencil/core" {
              * @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
              */
             "limel-code-editor": LocalJSX.LimelCodeEditor & JSXBase.HTMLAttributes<HTMLLimelCodeEditorElement>;
             /**

package/package.json

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