@limetech/lime-elements 38.31.2 → 38.33.0

package/dist/esm/limel-checkbox.entry.js.map

@@ -1 +1 @@
-{"file":"limel-checkbox.entry.js","mappings":"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","names":[],"sources":["./src/components/checkbox/checkbox.scss?tag=limel-checkbox&encapsulation=shadow","./src/components/checkbox/checkbox.tsx"],"sourcesContent":["/**\n* :::important\n* The `CheckboxTemplate` can be imported and used in the HTML of\n* other components, to render a non-functional and decorative checkbox in\n* their UI. An example of this is the list component.\n* This means the content of `CheckboxTemplate` will become a part of the\n* consumer's DOM structure.\n*\n* Additionally, the consumer components' also need to import the current `.scss`\n* file into their own styles file, for the checkbox to be rendered correctly!\n* This means, if the styles in this file are not \"specific\" enough,\n* there is a risk that the consumer component's styles are affected by\n* our styles here.\n*\n* For instance if the consumer has a `<label>` or `<svg>` element,\n* it might unintentionally inherit styles from the checkbox; unless we\n* make the such styles more specific here.\n*\n* Naturally, we cannot mitigate all sorts of potential styling problems.\n* The consumer component should be aware of this issue too.\n* But we can ensure that our styles here both make sense,\n* are readable, and are as specific as possible to avoid unintended side effects.\n* :::\n*/\n\n@use '../../style/mixins';\n\n/**\n* @prop --checkbox-unchecked-border-color: Affects the border color of the default state of the checkbox (when it is not checked). Defaults to `--contrast-900`.\n*/\n\n@forward '../../style/internal/boolean-input.scss';\n\n:host(limel-checkbox) {\n    min-height: var(--limel-checkbox-min-height, 2.5rem); // prevents flickering\n    // when switching between `readonly` and normal states in `limel-checkbox`,\n    // but not where `CheckboxTemplate` is imported & used.\n}\n\n.box {\n    &:after {\n        height: 0.125rem;\n        width: 0.25rem;\n\n        .indeterminate & {\n            opacity: 1;\n            width: calc(var(--limel-boolean-input-box-size) - 0.5rem);\n        }\n    }\n}\n\n.checkbox {\n    --limel-boolean-input-box-border-radius: 0.25rem;\n\n    svg.check-mark {\n        position: absolute;\n        z-index: 1;\n        inset: 0;\n\n        transform: translate3d(-0.125rem, -0.125rem, 0);\n\n        width: var(--limel-boolean-input-box-size);\n        height: var(--limel-boolean-input-box-size);\n\n        padding: 0.25rem;\n\n        color: rgb(var(--color-white));\n        opacity: 0;\n\n        stroke-width: 0.1875rem; // 3px\n        stroke: currentColor;\n        stroke-linecap: round;\n        stroke-linejoin: round;\n\n        path {\n            stroke-dashoffset: 29.7833;\n            stroke-dasharray: 29.7833;\n            transition: stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1);\n        }\n    }\n\n    /*\n     * Safari (macOS & iOS, tested on Safari 26) & probably even earlier versions have\n     * a rendering bug where transitions on descendants whose end state is triggered\n     * ONLY via a parent selector using `:has()` may not animate. Instead, Safari\n     * sometimes jumps directly to the final state (or never paints the transition)\n     * until a subsequent layout invalidation (e.g. tab switch, resize) happens.\n     *\n     * Workaround: provide an equivalent selector that does NOT rely on `:has()`,\n     * using the adjacency between the input and the visual box. This ensures the\n     * `stroke-dashoffset` transition for the check mark runs reliably in Safari\n     * while keeping the simpler `:has()` version commented for future re-implementation\n     * or cleanup.\n     *\n     * &:not(.indeterminate):has(input[type='checkbox']:checked) {\n     *     svg.check-mark {\n     *         opacity: 1;\n     *         path {\n     *             stroke-dashoffset: 0;\n     *         }\n     *     }\n     * }\n     * Using the `:has()` selector is more reliable, because it doesn't\n     * depend on the DOM structure (e.g. if the markup changes and the input is\n     * no longer adjacent to the box), but Safari support for `:has()` is still\n     * somewhat inconsistent.\n     */\n\n    &:not(.indeterminate)\n        > input[type='checkbox']:checked\n        + .box\n        svg.check-mark {\n        opacity: 1;\n\n        path {\n            stroke-dashoffset: 0;\n        }\n    }\n}\n\nlimel-dynamic-label {\n    margin-top: 0.375rem;\n    margin-left: -0.25rem;\n}\n\n@include mixins.hide-helper-line-when-not-needed(limel-checkbox);\n","import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { CheckboxTemplate } from './checkbox.template';\nimport { Label } from '../dynamic-label/label.types';\n\n/**\n * The Checkbox component is a classic and essential element in UI design that allows\n * users to make multiple selections from a predefined list of options. The Checkbox component is commonly used in forms and settings interfaces to enable users to\n * select one or more items from a list of choices.\n *\n * ## States of a Checkbox\n * When a user clicks or taps on the box, it toggles between two states:\n * Checked and Unchecked.\n *\n * However, a Checkbox can visualize a third state called the \"Indeterminate\" state.\n * In this state, the checkbox appears as a filled box with a horizontal line or dash inside it.\n *\n * The Indeterminate state is typically used when dealing with checkbox groups\n * that have hierarchical relationships or when the group contains sub-items.\n * This state is used to indicate that that some, but not all, of the items in a group are selected.\n *\n * :::important\n * Checkboxes are sometimes used interchangeably with switches in user interfaces.\n * But there is an important difference between the two! Please read our guidelines about\n * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).\n *\n * @exampleComponent limel-example-checkbox\n * @exampleComponent limel-example-checkbox-helper-text\n * @exampleComponent limel-example-checkbox-readonly\n */\n@Component({\n    tag: 'limel-checkbox',\n    shadow: true,\n    styleUrl: 'checkbox.scss',\n})\nexport class Checkbox {\n    /**\n     * Disables the checkbox when `true`. Works exactly the same as `readonly`.\n     * If either property is `true`, the checkbox will be disabled.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Disables the checkbox when `true`. This visualizes the checkbox slightly differently.\n     * But shows no visual sign indicating that the checkbox is disabled\n     * or can ever become interactable.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to indicate that the current value is invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid: boolean;\n\n    /**\n     * The checkbox label.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Optional helper text to display below the checkbox\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * The value of the checkbox. Set to `true` to make the checkbox checked.\n     */\n    @Prop({ reflect: true })\n    public checked = false;\n\n    /**\n     * Enables indeterminate state. Set to `true` to signal indeterminate check.\n     */\n    @Prop({ reflect: true })\n    public indeterminate = false;\n\n    /**\n     * Set to `true` to indicate that the checkbox must be checked.\n     */\n    @Prop({ reflect: true })\n    public required: boolean = false;\n\n    /**\n     * The labels to use to clarify what kind of data is being visualized,\n     * when the component is `readonly`.\n     */\n    @Prop()\n    public readonlyLabels?: Array<Label<boolean>> = [];\n\n    @State()\n    private modified = false;\n    private shouldReinitialize = false;\n\n    /**\n     * Emitted when the input value is changed.\n     */\n    @Event()\n    private change: EventEmitter<boolean>;\n\n    @Element()\n    private limelCheckbox: HTMLLimelCheckboxElement;\n    private id: string = createRandomString();\n    private helperTextId: string = createRandomString();\n\n    @Watch('checked')\n    protected handleCheckedChange(newValue: boolean) {\n        const input = this.getCheckboxElement();\n        if (!input) {\n            return;\n        }\n\n        input.checked = newValue || this.indeterminate;\n    }\n\n    @Watch('indeterminate')\n    protected handleIndeterminateChange(newValue: boolean) {\n        const input = this.getCheckboxElement();\n        if (!input) {\n            return;\n        }\n\n        input.checked = this.checked || newValue;\n        input.indeterminate = newValue;\n    }\n\n    @Watch('readonly')\n    protected handleReadonlyChange() {\n        this.destroyMDCInstances();\n        this.shouldReinitialize = true;\n    }\n\n    componentDidRender() {\n        if (this.shouldReinitialize) {\n            this.initialize();\n            this.shouldReinitialize = false;\n        }\n    }\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private destroyMDCInstances = () => {\n        const input = this.getCheckboxElement();\n        if (input) {\n            delete input.dataset['indeterminate'];\n            input.indeterminate = false;\n        }\n    };\n\n    public disconnectedCallback() {\n        this.destroyMDCInstances();\n    }\n\n    public render() {\n        return (\n            <CheckboxTemplate\n                disabled={this.disabled || this.readonly}\n                label={this.label}\n                readonlyLabels={this.readonlyLabels}\n                helperText={this.helperText}\n                helperTextId={this.helperTextId}\n                checked={this.checked || this.indeterminate}\n                indeterminate={this.indeterminate}\n                required={this.required}\n                readonly={this.readonly}\n                invalid={this.isInvalid()}\n                onChange={this.onChange}\n                id={this.id}\n            />\n        );\n    }\n\n    private isInvalid = () => {\n        if (this.invalid) {\n            return true;\n        }\n\n        if (this.required && this.modified && !this.checked) {\n            return true;\n        }\n    };\n\n    private initialize = () => {\n        const input = this.getCheckboxElement();\n        if (!input) {\n            return;\n        }\n\n        input.indeterminate = this.indeterminate;\n        input.checked = this.checked || this.indeterminate;\n    };\n\n    private getCheckboxElement = (): HTMLInputElement | null => {\n        return (\n            this.limelCheckbox?.shadowRoot?.querySelector(\n                'input[type=\"checkbox\"]'\n            ) || null\n        );\n    };\n\n    private onChange = (event: Event) => {\n        event.stopPropagation();\n        const input = event.currentTarget as HTMLInputElement;\n        const isChecked = input?.checked ?? this.checked;\n        this.change.emit(isChecked);\n        this.modified = true;\n    };\n}\n"],"version":3}
+{"file":"limel-checkbox.entry.js","mappings":"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","names":[],"sources":["./src/components/checkbox/checkbox.scss?tag=limel-checkbox&encapsulation=shadow","./src/components/checkbox/checkbox.tsx"],"sourcesContent":["/**\n* :::important\n* The `CheckboxTemplate` can be imported and used in the HTML of\n* other components, to render a non-functional and decorative checkbox in\n* their UI. An example of this is the list component.\n* This means the content of `CheckboxTemplate` will become a part of the\n* consumer's DOM structure.\n*\n* Additionally, the consumer components' also need to import the current `.scss`\n* file into their own styles file, for the checkbox to be rendered correctly!\n* This means, if the styles in this file are not \"specific\" enough,\n* there is a risk that the consumer component's styles are affected by\n* our styles here.\n*\n* For instance if the consumer has a `<label>` or `<svg>` element,\n* it might unintentionally inherit styles from the checkbox; unless we\n* make the such styles more specific here.\n*\n* Naturally, we cannot mitigate all sorts of potential styling problems.\n* The consumer component should be aware of this issue too.\n* But we can ensure that our styles here both make sense,\n* are readable, and are as specific as possible to avoid unintended side effects.\n* :::\n*/\n\n@use '../../style/mixins';\n\n/**\n* @prop --checkbox-unchecked-border-color: Affects the border color of the default state of the checkbox (when it is not checked). Defaults to `--contrast-900`.\n*/\n\n@forward '../../style/internal/boolean-input.scss';\n\n:host(limel-checkbox) {\n    min-height: var(--limel-checkbox-min-height, 2.5rem); // prevents flickering\n    // when switching between `readonly` and normal states in `limel-checkbox`,\n    // but not where `CheckboxTemplate` is imported & used.\n}\n\n.box {\n    &:after {\n        height: 0.125rem;\n        width: 0.25rem;\n\n        .indeterminate & {\n            opacity: 1;\n            width: calc(var(--limel-boolean-input-box-size) - 0.5rem);\n        }\n    }\n}\n\n.checkbox {\n    --limel-boolean-input-box-border-radius: 0.25rem;\n\n    svg.check-mark {\n        position: absolute;\n        z-index: 1;\n        inset: 0;\n\n        transform: translate3d(-0.125rem, -0.125rem, 0);\n\n        width: var(--limel-boolean-input-box-size);\n        height: var(--limel-boolean-input-box-size);\n\n        padding: 0.25rem;\n\n        color: rgb(var(--color-white));\n        opacity: 0;\n\n        stroke-width: 0.1875rem; // 3px\n        stroke: currentColor;\n        stroke-linecap: round;\n        stroke-linejoin: round;\n\n        path {\n            stroke-dashoffset: 29.7833;\n            stroke-dasharray: 29.7833;\n            transition: stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1);\n        }\n    }\n\n    /*\n     * Safari (macOS & iOS, tested on Safari 26) & probably even earlier versions have\n     * a rendering bug where transitions on descendants whose end state is triggered\n     * ONLY via a parent selector using `:has()` may not animate. Instead, Safari\n     * sometimes jumps directly to the final state (or never paints the transition)\n     * until a subsequent layout invalidation (e.g. tab switch, resize) happens.\n     *\n     * Workaround: provide an equivalent selector that does NOT rely on `:has()`,\n     * using the adjacency between the input and the visual box. This ensures the\n     * `stroke-dashoffset` transition for the check mark runs reliably in Safari\n     * while keeping the simpler `:has()` version commented for future re-implementation\n     * or cleanup.\n     *\n     * &:not(.indeterminate):has(input[type='checkbox']:checked) {\n     *     svg.check-mark {\n     *         opacity: 1;\n     *         path {\n     *             stroke-dashoffset: 0;\n     *         }\n     *     }\n     * }\n     * Using the `:has()` selector is more reliable, because it doesn't\n     * depend on the DOM structure (e.g. if the markup changes and the input is\n     * no longer adjacent to the box), but Safari support for `:has()` is still\n     * somewhat inconsistent.\n     */\n\n    &:not(.indeterminate)\n        > input[type='checkbox']:checked\n        + .box\n        svg.check-mark {\n        opacity: 1;\n\n        path {\n            stroke-dashoffset: 0;\n        }\n    }\n}\n\nlimel-dynamic-label {\n    margin-top: 0.375rem;\n    margin-left: -0.25rem;\n}\n\n@include mixins.hide-helper-line-when-not-needed(limel-checkbox);\n","import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { CheckboxTemplate } from './checkbox.template';\nimport { Label } from '../dynamic-label/label.types';\n\n/**\n * The Checkbox component is a classic and essential element in UI design that allows\n * users to make multiple selections from a predefined list of options. The Checkbox component is commonly used in forms and settings interfaces to enable users to\n * select one or more items from a list of choices.\n *\n * ## States of a Checkbox\n * When a user clicks or taps on the box, it toggles between two states:\n * Checked and Unchecked.\n *\n * However, a Checkbox can visualize a third state called the \"Indeterminate\" state.\n * In this state, the checkbox appears as a filled box with a horizontal line or dash inside it.\n *\n * The Indeterminate state is typically used when dealing with checkbox groups\n * that have hierarchical relationships or when the group contains sub-items.\n * This state is used to indicate that that some, but not all, of the items in a group are selected.\n *\n * :::important\n * Checkboxes are sometimes used interchangeably with switches in user interfaces.\n * But there is an important difference between the two! Please read our guidelines about\n * [Switch vs. Checkbox](#/DesignGuidelines/switch-vs-checkbox.md/).\n *\n * @exampleComponent limel-example-checkbox\n * @exampleComponent limel-example-checkbox-helper-text\n * @exampleComponent limel-example-checkbox-readonly\n */\n@Component({\n    tag: 'limel-checkbox',\n    shadow: true,\n    styleUrl: 'checkbox.scss',\n})\nexport class Checkbox {\n    /**\n     * Disables the checkbox when `true`. Works exactly the same as `readonly`.\n     * If either property is `true`, the checkbox will be disabled.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Disables the checkbox when `true`. This visualizes the checkbox slightly differently.\n     * But shows no visual sign indicating that the checkbox is disabled\n     * or can ever become interactable.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to indicate that the current value is invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid: boolean;\n\n    /**\n     * The checkbox label.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Optional helper text to display below the checkbox\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * The value of the checkbox. Set to `true` to make the checkbox checked.\n     */\n    @Prop({ reflect: true })\n    public checked = false;\n\n    /**\n     * Enables indeterminate state. Set to `true` to signal indeterminate check.\n     */\n    @Prop({ reflect: true })\n    public indeterminate = false;\n\n    /**\n     * Set to `true` to indicate that the checkbox must be checked.\n     */\n    @Prop({ reflect: true })\n    public required: boolean = false;\n\n    /**\n     * The labels to use to clarify what kind of data is being visualized,\n     * when the component is `readonly`.\n     */\n    @Prop()\n    public readonlyLabels?: Array<Label<boolean>> = [];\n\n    @State()\n    private modified = false;\n    private shouldReinitialize = false;\n\n    /**\n     * Emitted when the input value is changed.\n     */\n    @Event()\n    private change: EventEmitter<boolean>;\n\n    @Element()\n    private limelCheckbox: HTMLLimelCheckboxElement;\n    private id: string = createRandomString();\n    private helperTextId: string = createRandomString();\n\n    @Watch('checked')\n    protected handleCheckedChange(newValue: boolean) {\n        const input = this.getCheckboxElement();\n        if (!input) {\n            return;\n        }\n\n        input.checked = newValue || this.indeterminate;\n    }\n\n    @Watch('indeterminate')\n    protected handleIndeterminateChange(newValue: boolean) {\n        const input = this.getCheckboxElement();\n        if (!input) {\n            return;\n        }\n\n        input.checked = this.checked || newValue;\n        input.indeterminate = newValue;\n    }\n\n    @Watch('readonly')\n    protected handleReadonlyChange() {\n        this.destroyMDCInstances();\n        this.shouldReinitialize = true;\n    }\n\n    componentDidRender() {\n        if (this.shouldReinitialize) {\n            this.initialize();\n            this.shouldReinitialize = false;\n        }\n    }\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private destroyMDCInstances = () => {\n        const input = this.getCheckboxElement();\n        if (input) {\n            delete input.dataset['indeterminate'];\n            input.indeterminate = false;\n        }\n    };\n\n    public disconnectedCallback() {\n        this.destroyMDCInstances();\n    }\n\n    public render() {\n        return (\n            <CheckboxTemplate\n                disabled={this.disabled || this.readonly}\n                label={this.label}\n                readonlyLabels={this.readonlyLabels}\n                helperText={this.helperText}\n                helperTextId={this.helperTextId}\n                checked={this.checked || this.indeterminate}\n                indeterminate={this.indeterminate}\n                required={this.required}\n                readonly={this.readonly}\n                invalid={this.isInvalid()}\n                onChange={this.onChange}\n                id={this.id}\n            />\n        );\n    }\n\n    private isInvalid = () => {\n        if (this.invalid) {\n            return true;\n        }\n\n        if (this.required && this.modified && !this.checked) {\n            return true;\n        }\n    };\n\n    private initialize = () => {\n        const input = this.getCheckboxElement();\n        if (!input) {\n            return;\n        }\n\n        input.indeterminate = this.indeterminate;\n        input.checked = this.checked || this.indeterminate;\n    };\n\n    private getCheckboxElement = (): HTMLInputElement | null => {\n        return (\n            this.limelCheckbox?.shadowRoot?.querySelector(\n                'input[type=\"checkbox\"]'\n            ) || null\n        );\n    };\n\n    private onChange = (event: Event) => {\n        event.stopPropagation();\n        const input = event.currentTarget as HTMLInputElement;\n        const isChecked = input?.checked ?? this.checked;\n        this.change.emit(isChecked);\n        this.modified = true;\n    };\n}\n"],"version":3}

package/dist/esm/limel-color-picker.entry.js.map

@@ -1 +1 @@
-{"file":"limel-color-picker.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,uxIAAuxI;;MCiCjyI,WAAW;;;;IAwGZ,gBAAW,GAAG,KAAK,CAAC;IAqBpB,kBAAa,GAAG;MACpB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,EAAE;QACrC,QACI,qBACI,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,SAAS,EAAC,gBAAgB,GAC5B,EACJ;OACL;KACJ,CAAC;IAEM,wBAAmB,GAAG;MAC1B,IAAI,IAAI,CAAC,QAAQ,EAAE;QACf,OAAO,IAAI,CAAC,mBAAmB,EAAE,CAAC;OACrC;MAED,QACI,qBACI,IAAI,EAAE,IAAI,CAAC,MAAM,EACjB,aAAa,EAAC,cAAc,EAC5B,OAAO,EAAE,IAAI,CAAC,cAAc,IAE3B,IAAI,CAAC,mBAAmB,EAAE,EAC3B,kCACI,GAAG,EAAE,IAAI,CAAC,4BAA4B,EACtC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAc,EAC5B,WAAW,EAAE,IAAI,CAAC,kBAAkB,EACpC,WAAW,EAAE,IAAI,CAAC,WAAW,GAC/B,CACU,EAClB;KACL,CAAC;IAEM,wBAAmB,GAAG;MAC1B,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,cAAc,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC;MAEpE,QACI,cACI,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,UAAU,EACjB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,EAAE,EAAC,gBAAgB,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,GAC1C,EACJ;KACL,CAAC;IAEM,iCAA4B,GAAG,CACnC,OAA2C;MAE3C,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC;KACjC,CAAC;IAEM,gBAAW,GAAG,CAAC,KAAiB;MACpC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;MAEnB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC;KAClC,CAAC;IAEM,mBAAc,GAAG,CAAC,KAAkB;MACxC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;KACvB,CAAC;IAEM,iBAAY,GAAG,CAAC,KAA0B;MAC9C,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAClC,CAAC;;;;;;oBAnKgB,KAAK;oBAQL,KAAK;mBAON,KAAK;;uBAeD,IAAI;;;kBAyBR,KAAK;;EAEf,kBAAkB;;IACrB,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,MAAM,EAAE;MACjC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;MACzB,MAAA,IAAI,CAAC,cAAc,0CAAE,KAAK,EAAE,CAAC;KAChC;GACJ;EAMM,MAAM;IACT,QACI,EAAC,IAAI,QACA,IAAI,CAAC,aAAa,EAAE,EACpB,IAAI,CAAC,mBAAmB,EAAE,EAC3B,yBACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,WAAW,EAC5C,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,GAC/B,CACC,EACT;GACL;;;;;;","names":[],"sources":["./src/components/color-picker/color-picker.scss?tag=limel-color-picker&encapsulation=shadow","./src/components/color-picker/color-picker.tsx"],"sourcesContent":["@use '../../style/mixins';\n@use '../../style/internal/shared_input-select-picker';\n@import './partial-styles/lime-admin-hack';\n\n:host(limel-color-picker) {\n    display: grid;\n    gap: 0.25rem;\n    grid-template-columns: auto 1fr;\n}\n\nbutton[slot='trigger'] {\n    all: unset;\n    box-sizing: border-box;\n    position: relative;\n    isolation: isolate;\n    width: shared_input-select-picker.$height-of-mdc-text-field;\n    height: shared_input-select-picker.$height-of-mdc-text-field;\n\n    border-radius: 0.5rem;\n\n    &:not([disabled]):not([disabled='true']) {\n        @include mixins.is-elevated-clickable();\n        @include mixins.visualize-keyboard-focus();\n    }\n\n    &:before,\n    &:after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n    }\n\n    &:before {\n        @include mixins.add-chessboard-background();\n        z-index: 0;\n    }\n\n    &:after {\n        z-index: 1;\n        box-shadow: 0 0 0 0.25rem rgb(var(--contrast-100)) inset;\n        background: var(--background);\n    }\n}\n\n:host([readonly]:not([readonly='false'])) {\n    limel-input-field {\n        transform: translateX(\n                calc(\n                    #{shared_input-select-picker.$height-of-mdc-text-field} /\n                        4 * -1\n                )\n            )\n            translateY(\n                calc(\n                    #{shared_input-select-picker.$height-of-mdc-text-field} / 4\n                )\n            );\n    }\n}\n\n:host([readonly]:not([readonly='false'])),\n:host([disabled]:not([disabled='false'])) {\n    button[slot='trigger'] {\n        border: 1px solid rgba(var(--contrast-700), 0.65);\n    }\n}\n","import {\n    Component,\n    h,\n    Prop,\n    State,\n    Event,\n    EventEmitter,\n    Host,\n} from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport type { CustomColorSwatch } from './color-picker.types';\n\n/**\n * This component enables you to select a swatch from out color palette, simply\n * by clicking on it. You can then copy the css variable name of the chosen color\n * and use it where desired.\n *\n * The color picker can also show you a preview of any valid color name or color value.\n *\n * :::note\n * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.\n * :::\n *\n * @exampleComponent limel-example-color-picker-basic\n * @exampleComponent limel-example-color-picker-custom-palette\n * @exampleComponent limel-example-color-picker-manual-input\n * @exampleComponent limel-example-color-picker-composite\n */\n@Component({\n    tag: 'limel-color-picker',\n    shadow: true,\n    styleUrl: 'color-picker.scss',\n})\nexport class ColorPicker implements FormComponent {\n    /**\n     * Name or code of the chosen color\n     */\n    @Prop({ reflect: true })\n    public value: string;\n\n    /**\n     * The label of the input field\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Helper text of the input field\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * Displayed as tooltips when picker is hovered.\n     */\n    @Prop({ reflect: true })\n    public tooltipLabel: string;\n\n    /**\n     * Set to `true` if a value is required\n     */\n    @Prop({ reflect: true })\n    public required: boolean;\n\n    /**\n     * Set to `true` to disable the field.\n     * Use `disabled` to indicate that the field can normally be interacted\n     * with, but is currently disabled. This tells the user that if certain\n     * requirements are met, the field may become enabled again.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Set to `true` to make the field read-only.\n     * Use `readonly` when the field is only there to present the data it holds,\n     * and will not become possible for the current user to edit.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to indicate that the current value of the input field is\n     * invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * The placeholder text shown inside the input field,\n     * when the field is focused and empty.\n     */\n    @Prop({ reflect: true })\n    public placeholder: string;\n\n    /**\n     * Set to `false` to disallow custom color values to be typed into the input field.\n     * Setting this to `false` does not completely disable the color picker.\n     * It will only allow users to pick from the provided color palette.\n     */\n    @Prop({ reflect: true })\n    public manualInput = true;\n\n    /**\n     * An array of either color value strings, or objects with a `name` and a `value`,\n     * which replaces the default palette. Any valid CSS color format is accepted as value\n     * (HEX, RGB/A, HSL, HWB, color-mix(), named colors, etc.).\n     */\n    @Prop()\n    public palette?: Array<string | CustomColorSwatch>;\n\n    /**\n     * Defines the number of columns in the color swatch grid.\n     * If not provided, it will default to the number of colors in the palette;\n     * but stops at a maximum of 25 columns.\n     */\n    @Prop({ reflect: true })\n    public paletteColumnCount?: number;\n\n    /**\n     * Emits chosen value to the parent component\n     */\n    @Event()\n    public change: EventEmitter<string>;\n\n    @State()\n    private isOpen = false;\n\n    public componentDidRender() {\n        if (this.shouldFocus && this.isOpen) {\n            this.shouldFocus = false;\n            this.contentElement?.focus();\n        }\n    }\n\n    private contentElement?: HTMLLimelColorPickerPaletteElement;\n\n    private shouldFocus = false;\n\n    public render() {\n        return (\n            <Host>\n                {this.renderTooltip()}\n                {this.renderPickerPalette()}\n                <limel-input-field\n                    label={this.label}\n                    helperText={this.helperText}\n                    value={this.value}\n                    onChange={this.handleChange}\n                    required={this.required}\n                    readonly={this.readonly}\n                    disabled={this.disabled || !this.manualInput}\n                    invalid={this.invalid}\n                    placeholder={this.placeholder}\n                />\n            </Host>\n        );\n    }\n    private renderTooltip = () => {\n        if (!this.readonly && this.tooltipLabel) {\n            return (\n                <limel-tooltip\n                    label={this.tooltipLabel}\n                    elementId=\"tooltip-button\"\n                />\n            );\n        }\n    };\n\n    private renderPickerPalette = () => {\n        if (this.readonly) {\n            return this.renderPickerTrigger();\n        }\n\n        return (\n            <limel-popover\n                open={this.isOpen}\n                openDirection=\"bottom-start\"\n                onClose={this.onPopoverClose}\n            >\n                {this.renderPickerTrigger()}\n                <limel-color-picker-palette\n                    ref={this.setColorPickerPaletteElement}\n                    value={this.value}\n                    label={this.label}\n                    helperText={this.helperText}\n                    placeholder={this.placeholder}\n                    invalid={this.invalid}\n                    onChange={this.handleChange}\n                    required={this.required}\n                    palette={this.palette as any}\n                    columnCount={this.paletteColumnCount}\n                    manualInput={this.manualInput}\n                />\n            </limel-popover>\n        );\n    };\n\n    private renderPickerTrigger = () => {\n        const background = this.value ? { '--background': this.value } : {};\n\n        return (\n            <button\n                slot=\"trigger\"\n                style={background}\n                role=\"button\"\n                onClick={this.openPopover}\n                id=\"tooltip-button\"\n                disabled={this.readonly || this.disabled}\n            />\n        );\n    };\n\n    private setColorPickerPaletteElement = (\n        element: HTMLLimelColorPickerPaletteElement\n    ) => {\n        this.contentElement = element;\n    };\n\n    private openPopover = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.isOpen = true;\n\n        this.shouldFocus = this.isOpen;\n    };\n\n    private onPopoverClose = (event: CustomEvent) => {\n        event.stopPropagation();\n        this.isOpen = false;\n    };\n\n    private handleChange = (event: CustomEvent<string>) => {\n        event.stopPropagation();\n        this.change.emit(event.detail);\n    };\n}\n"],"version":3}
+{"file":"limel-color-picker.entry.js","mappings":"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","names":[],"sources":["./src/components/color-picker/color-picker.scss?tag=limel-color-picker&encapsulation=shadow","./src/components/color-picker/color-picker.tsx"],"sourcesContent":["@use '../../style/mixins';\n@use '../../style/internal/shared_input-select-picker';\n@import './partial-styles/lime-admin-hack';\n\n:host(limel-color-picker) {\n    display: grid;\n    gap: 0.25rem;\n    grid-template-columns: auto 1fr;\n}\n\nbutton[slot='trigger'] {\n    all: unset;\n    box-sizing: border-box;\n    position: relative;\n    isolation: isolate;\n    width: shared_input-select-picker.$height-of-mdc-text-field;\n    height: shared_input-select-picker.$height-of-mdc-text-field;\n\n    border-radius: 0.5rem;\n\n    &:not([disabled]):not([disabled='true']) {\n        @include mixins.is-elevated-clickable();\n        @include mixins.visualize-keyboard-focus();\n    }\n\n    &:before,\n    &:after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n    }\n\n    &:before {\n        @include mixins.add-chessboard-background();\n        z-index: 0;\n    }\n\n    &:after {\n        z-index: 1;\n        box-shadow: 0 0 0 0.25rem rgb(var(--contrast-100)) inset;\n        background: var(--background);\n    }\n}\n\n:host([readonly]:not([readonly='false'])) {\n    limel-input-field {\n        transform: translateX(\n                calc(\n                    #{shared_input-select-picker.$height-of-mdc-text-field} /\n                        4 * -1\n                )\n            )\n            translateY(\n                calc(\n                    #{shared_input-select-picker.$height-of-mdc-text-field} / 4\n                )\n            );\n    }\n}\n\n:host([readonly]:not([readonly='false'])),\n:host([disabled]:not([disabled='false'])) {\n    button[slot='trigger'] {\n        border: 1px solid rgba(var(--contrast-700), 0.65);\n    }\n}\n","import {\n    Component,\n    h,\n    Prop,\n    State,\n    Event,\n    EventEmitter,\n    Host,\n} from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport type { CustomColorSwatch } from './color-picker.types';\n\n/**\n * This component enables you to select a swatch from out color palette, simply\n * by clicking on it. You can then copy the css variable name of the chosen color\n * and use it where desired.\n *\n * The color picker can also show you a preview of any valid color name or color value.\n *\n * :::note\n * Make sure to read our [guidelines about usage of colors](#/DesignGuidelines/color-system.md/) from our palette.\n * :::\n *\n * @exampleComponent limel-example-color-picker-basic\n * @exampleComponent limel-example-color-picker-custom-palette\n * @exampleComponent limel-example-color-picker-manual-input\n * @exampleComponent limel-example-color-picker-composite\n */\n@Component({\n    tag: 'limel-color-picker',\n    shadow: true,\n    styleUrl: 'color-picker.scss',\n})\nexport class ColorPicker implements FormComponent {\n    /**\n     * Name or code of the chosen color\n     */\n    @Prop({ reflect: true })\n    public value: string;\n\n    /**\n     * The label of the input field\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Helper text of the input field\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * Displayed as tooltips when picker is hovered.\n     */\n    @Prop({ reflect: true })\n    public tooltipLabel: string;\n\n    /**\n     * Set to `true` if a value is required\n     */\n    @Prop({ reflect: true })\n    public required: boolean;\n\n    /**\n     * Set to `true` to disable the field.\n     * Use `disabled` to indicate that the field can normally be interacted\n     * with, but is currently disabled. This tells the user that if certain\n     * requirements are met, the field may become enabled again.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Set to `true` to make the field read-only.\n     * Use `readonly` when the field is only there to present the data it holds,\n     * and will not become possible for the current user to edit.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to indicate that the current value of the input field is\n     * invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * The placeholder text shown inside the input field,\n     * when the field is focused and empty.\n     */\n    @Prop({ reflect: true })\n    public placeholder: string;\n\n    /**\n     * Set to `false` to disallow custom color values to be typed into the input field.\n     * Setting this to `false` does not completely disable the color picker.\n     * It will only allow users to pick from the provided color palette.\n     */\n    @Prop({ reflect: true })\n    public manualInput = true;\n\n    /**\n     * An array of either color value strings, or objects with a `name` and a `value`,\n     * which replaces the default palette. Any valid CSS color format is accepted as value\n     * (HEX, RGB/A, HSL, HWB, color-mix(), named colors, etc.).\n     */\n    @Prop()\n    public palette?: Array<string | CustomColorSwatch>;\n\n    /**\n     * Defines the number of columns in the color swatch grid.\n     * If not provided, it will default to the number of colors in the palette;\n     * but stops at a maximum of 25 columns.\n     */\n    @Prop({ reflect: true })\n    public paletteColumnCount?: number;\n\n    /**\n     * Emits chosen value to the parent component\n     */\n    @Event()\n    public change: EventEmitter<string>;\n\n    @State()\n    private isOpen = false;\n\n    public componentDidRender() {\n        if (this.shouldFocus && this.isOpen) {\n            this.shouldFocus = false;\n            this.contentElement?.focus();\n        }\n    }\n\n    private contentElement?: HTMLLimelColorPickerPaletteElement;\n\n    private shouldFocus = false;\n\n    public render() {\n        return (\n            <Host>\n                {this.renderTooltip()}\n                {this.renderPickerPalette()}\n                <limel-input-field\n                    label={this.label}\n                    helperText={this.helperText}\n                    value={this.value}\n                    onChange={this.handleChange}\n                    required={this.required}\n                    readonly={this.readonly}\n                    disabled={this.disabled || !this.manualInput}\n                    invalid={this.invalid}\n                    placeholder={this.placeholder}\n                />\n            </Host>\n        );\n    }\n    private renderTooltip = () => {\n        if (!this.readonly && this.tooltipLabel) {\n            return (\n                <limel-tooltip\n                    label={this.tooltipLabel}\n                    elementId=\"tooltip-button\"\n                />\n            );\n        }\n    };\n\n    private renderPickerPalette = () => {\n        if (this.readonly) {\n            return this.renderPickerTrigger();\n        }\n\n        return (\n            <limel-popover\n                open={this.isOpen}\n                openDirection=\"bottom-start\"\n                onClose={this.onPopoverClose}\n            >\n                {this.renderPickerTrigger()}\n                <limel-color-picker-palette\n                    ref={this.setColorPickerPaletteElement}\n                    value={this.value}\n                    label={this.label}\n                    helperText={this.helperText}\n                    placeholder={this.placeholder}\n                    invalid={this.invalid}\n                    onChange={this.handleChange}\n                    required={this.required}\n                    palette={this.palette as any}\n                    columnCount={this.paletteColumnCount}\n                    manualInput={this.manualInput}\n                />\n            </limel-popover>\n        );\n    };\n\n    private renderPickerTrigger = () => {\n        const background = this.value ? { '--background': this.value } : {};\n\n        return (\n            <button\n                slot=\"trigger\"\n                style={background}\n                role=\"button\"\n                onClick={this.openPopover}\n                id=\"tooltip-button\"\n                disabled={this.readonly || this.disabled}\n            />\n        );\n    };\n\n    private setColorPickerPaletteElement = (\n        element: HTMLLimelColorPickerPaletteElement\n    ) => {\n        this.contentElement = element;\n    };\n\n    private openPopover = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.isOpen = true;\n\n        this.shouldFocus = this.isOpen;\n    };\n\n    private onPopoverClose = (event: CustomEvent) => {\n        event.stopPropagation();\n        this.isOpen = false;\n    };\n\n    private handleChange = (event: CustomEvent<string>) => {\n        event.stopPropagation();\n        this.change.emit(event.detail);\n    };\n}\n"],"version":3}

package/dist/esm/limel-form.entry.js

@@ -39153,7 +39153,9 @@ function renderDescription(description) {
   if (!description) {
     return;
   }
-  return react.createElement('p', { className: 'mdc-typography mdc-typography--body1' }, description);
+  return react.createElement('limel-markdown', {
+    value: description,
+  });
 }
 /**
  * Find a suitable title for a nested structure.
@@ -42491,7 +42493,10 @@ class Row extends react.Component {
   renderDescription() {
     var _a;
     if ((_a = this.schema) === null || _a === void 0 ? void 0 : _a.description) {
-      return react.createElement('p', { className: 'description' }, this.schema.description);
+      return react.createElement('limel-markdown', {
+        class: 'description',
+        value: this.schema.description,
+      });
     }
   }
   renderChildren() {
@@ -42526,6 +42531,24 @@ class RowLayout extends react.Component {
   }
 }
 
+/**
+ *
+ * @param schema
+ * @param extraProps - additional props to pass to the limel-help element
+ */
+function getHelpComponent(schema, extraProps) {
+  var _a;
+  const help = (_a = schema.lime) === null || _a === void 0 ? void 0 : _a.help;
+  if (!help) {
+    return;
+  }
+  if (typeof help === 'string') {
+    return react.createElement('limel-help', Object.assign({ value: help }, extraProps));
+  }
+  const helpProps = help;
+  return react.createElement('limel-help', Object.assign(Object.assign({}, helpProps), extraProps));
+}
+
 const ObjectFieldTemplate = (props) => {
   const id = props.idSchema.$id;
   if (id === 'root' || !isCollapsible(props.schema)) {
@@ -42537,15 +42560,25 @@ const ObjectFieldTemplate = (props) => {
   return renderProperties(props.properties, props.schema);
 };
 function renderFieldWithTitle(props) {
-  return react.createElement(react.Fragment, {}, renderTitle(props.title), renderDescription(props.description), renderProperties(props.properties, props.schema));
+  return react.createElement(react.Fragment, {}, renderSectionHeader(props), renderDescription(props.description), renderProperties(props.properties, props.schema));
+}
+function renderSectionHeader(props) {
+  const help = getHelpComponent(props.schema);
+  if (!help) {
+    return renderTitle(props.title);
+  }
+  return react.createElement(react.Fragment, {}, renderTitle(props.title), help);
 }
 function renderCollapsibleField(props) {
   const defaultOpen = !isCollapsed(props.schema);
+  const helpElement = getHelpComponent(props.schema, {
+    slot: 'header',
+  });
   return react.createElement('limel-collapsible-section', {
     header: props.title,
     id: getSchemaObjectPropertyPath(props.formContext.schema, props.idSchema),
     'is-open': defaultOpen,
-  }, renderDescription(props.description), renderProperties(props.properties, props.schema));
+  }, helpElement, renderDescription(props.description), renderProperties(props.properties, props.schema));
 }
 function getSchemaObjectPropertyPath(schema, subSchema) {
   var _a, _b;
@@ -47058,23 +47091,6 @@ function isAdditionalProperty(schema) {
   return schema[ADDITIONAL_PROPERTY_FLAG] === true;
 }
 
-/**
- *
- * @param schema
- */
-function getHelpComponent(schema) {
-  var _a;
-  const help = (_a = schema.lime) === null || _a === void 0 ? void 0 : _a.help;
-  if (!help) {
-    return;
-  }
-  if (typeof help === 'string') {
-    return react.createElement('limel-help', { value: help });
-  }
-  const helpProps = help;
-  return react.createElement('limel-help', helpProps);
-}
-
 /**
  * A widget is a concept in react-jsonschema-form (rjsf).
  * It represents a HTML tag for the user to enter data, eg. input, select, etc.
@@ -47855,7 +47871,7 @@ function isInteger(data) {
   return Number.isInteger(Number(data));
 }
 
-const formCss = "@charset \"UTF-8\";*,*::after,*::before{box-sizing:border-box}.form-group{min-width:0}.limel-form-array-item--simple{display:flex;align-items:center;padding:0.25rem}.limel-form-array-item--simple>*:first-child{flex:1;min-width:0}.array-items{isolation:isolate;display:flex;flex-direction:column;row-gap:var(--form-row-gap, 0.5rem);margin-top:1rem}.array-items.has-an-item-which-is-being-dragged limel-collapsible-section{--limel-cs-grid-template-rows:0fr;--limel-cs-opacity-transition-speed:0.2s;--limel-cs-grid-template-rows-transition-speed:0.2s;--limel-cs-open-header-bottom-border-radius:0.75rem}.array-item:has(limel-drag-handle:hover),.array-item:has(limel-drag-handle:focus-within),.array-item.is-elevated,.array-item.sortable-chosen{will-change:transform, box-shadow, border-radius, background-color}.array-item.sortable-ghost{border-radius:0.5rem;box-shadow:var(--shadow-depth-64), 0 0.65rem 0.75rem -0.425rem rgb(var(--color-black), 0.3)}.array-item.sortable-chosen{border-radius:0.5rem;background-color:var(--lime-elevated-surface-background-color)}.array-item.is-elevated[draggable=false]{animation:sit-here 0.8s forwards}@keyframes sit-here{0%{border-radius:0.5rem;background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--shadow-depth-64), 0 0.65rem 0.75rem -0.425rem rgb(var(--color-black), 0.3)}100%{box-shadow:none}}limel-drag-handle{order:10}limel-collapsible-section.is-being-dragged{border-radius:0.75rem !important}.limel-form-layout--default{display:grid;column-gap:var(--form-column-gap, 1rem);row-gap:var(--form-row-gap, 1rem);padding:var(--form-body-padding, 1rem)}.limel-form-layout--grid{--min-height-of-one-row:2.5rem;display:grid;column-gap:var(--form-column-gap, 1rem);row-gap:var(--form-row-gap, 1rem);padding:var(--form-body-padding, 1rem);grid-template-columns:repeat(var(--number-of-columns), minmax(0, 1fr))}.limel-form-layout--grid.auto-reorder-to-avoid-empty-cells{grid-auto-flow:dense}.limel-form-layout--grid.layout-1-columns .limel-form-layout-colspan--1,.limel-form-layout--grid.layout-1-columns .limel-form-layout-colspan--2,.limel-form-layout--grid.layout-1-columns .limel-form-layout-colspan--3,.limel-form-layout--grid.layout-1-columns .limel-form-layout-colspan--4,.limel-form-layout--grid.layout-1-columns .limel-form-layout-colspan--5{grid-column:span 1}.limel-form-layout--grid.layout-2-columns .limel-form-layout-colspan--1{grid-column:span 1}.limel-form-layout--grid.layout-2-columns .limel-form-layout-colspan--2,.limel-form-layout--grid.layout-2-columns .limel-form-layout-colspan--3,.limel-form-layout--grid.layout-2-columns .limel-form-layout-colspan--4,.limel-form-layout--grid.layout-2-columns .limel-form-layout-colspan--5{grid-column:span 2}.limel-form-layout--grid.layout-3-columns .limel-form-layout-colspan--1{grid-column:span 1}.limel-form-layout--grid.layout-3-columns .limel-form-layout-colspan--2{grid-column:span 2}.limel-form-layout--grid.layout-3-columns .limel-form-layout-colspan--3,.limel-form-layout--grid.layout-3-columns .limel-form-layout-colspan--4,.limel-form-layout--grid.layout-3-columns .limel-form-layout-colspan--5{grid-column:span 3}.limel-form-layout--grid.layout-4-columns .limel-form-layout-colspan--1{grid-column:span 1}.limel-form-layout--grid.layout-4-columns .limel-form-layout-colspan--2{grid-column:span 2}.limel-form-layout--grid.layout-4-columns .limel-form-layout-colspan--3{grid-column:span 3}.limel-form-layout--grid.layout-4-columns .limel-form-layout-colspan--4,.limel-form-layout--grid.layout-4-columns .limel-form-layout-colspan--5{grid-column:span 4}.limel-form-layout--grid.layout-5-columns .limel-form-layout-colspan--1{grid-column:span 1}.limel-form-layout--grid.layout-5-columns .limel-form-layout-colspan--2{grid-column:span 2}.limel-form-layout--grid.layout-5-columns .limel-form-layout-colspan--3{grid-column:span 3}.limel-form-layout--grid.layout-5-columns .limel-form-layout-colspan--4{grid-column:span 4}.limel-form-layout--grid.layout-5-columns .limel-form-layout-colspan--5{grid-column:span 5}.limel-form-layout--grid .limel-form-layout-colspan--all{grid-column:1/-1}.limel-form-layout--grid limel-checkbox,.limel-form-layout--grid limel-switch{min-height:var(--min-height-of-one-row)}.limel-form-layout--grid limel-checkbox{display:block}.limel-form-layout--grid limel-switch{margin-left:0.5rem}.form-error{color:var(--limel-theme-error-color);font-size:0.6875rem;line-height:1.5;visibility:inherit;padding-right:1rem;padding-left:1rem;padding-top:0.25rem}.button-add-new{margin-top:0.5rem;width:100%}h1{position:relative;margin-top:0;margin-bottom:0;word-break:break-word;hyphens:auto;-webkit-hyphens:auto;text-wrap:balance;font-size:var(--limel-form-h1-font-size);line-height:calc(var(--limel-form-h1-font-size) * 1.42857);letter-spacing:-0.01rem;font-weight:500}p{margin-top:0;margin-bottom:0.75rem;font-size:var(--limel-theme-default-font-size)}.form-group{position:relative}.form-group limel-help{position:absolute;top:calc(var(--form-row-gap, 1rem) * -0.5);left:calc(var(--form-column-gap, 1rem) * -0.5)}.form-group h1,.form-group p{color:rgb(var(--contrast-1400), 0.8)}.form-group h1{--limel-form-h1-font-size:1.476rem;font-weight:800}.form-group .form-group h1{--limel-form-h1-font-size:1.383rem;font-weight:700}.form-group .form-group h1:before{content:\"\";display:block;position:absolute;top:0;bottom:0;margin:auto;left:-0.75rem;background-color:var(--lime-primary-color, var(--limel-theme-primary-color));width:0.125rem;height:1.5rem;border-radius:0.125rem;opacity:0.6}.form-group .form-group .form-group h1{--limel-form-h1-font-size:1.296rem;font-weight:600}.form-group .form-group .form-group h1:before{display:none}.form-group .form-group .form-group .form-group h1{--limel-form-h1-font-size:1.215rem}.form-group .form-group .form-group .form-group h1:before{display:none}.form-group .form-group .form-group .form-group .form-group h1{--limel-form-h1-font-size:1.138rem}.form-group .form-group .form-group .form-group .form-group h1:before{display:none}.form-group .form-group .form-group .form-group .form-group .form-group h1{--limel-form-h1-font-size:1.067rem}.form-group .form-group .form-group .form-group .form-group .form-group h1:before{display:none}.limel-form-row--layout{--limel-form-row-border-radius:0.375rem;--limel-form-row-icon-size:1.75rem;--limel-form-row-main-information-gap:0.5rem;display:flex;flex-direction:column}.limel-form-row--layout .row{display:flex;gap:0.5rem;flex-direction:column;padding:0.5rem 1rem}.limel-form-row--layout .row:nth-child(odd){background-color:var(--form-background-color-of-odd-rows, rgb(var(--contrast-200)))}.limel-form-row--layout .row:nth-child(even){background-color:var(--form-background-color-of-even-rows, transparent)}.limel-form-row--layout .row:first-child{border-radius:var(--limel-form-row-border-radius) var(--limel-form-row-border-radius) 0 0}.limel-form-row--layout .row:last-child{border-radius:0 0 var(--limel-form-row-border-radius) var(--limel-form-row-border-radius)}.limel-form-row--layout .main-information{position:relative;display:flex;flex-direction:row;align-items:center;gap:var(--limel-form-row-main-information-gap);min-width:0}.limel-form-row--layout .main-information{position:relative}.limel-form-row--layout .main-information>.form-group.field{position:unset}.limel-form-row--layout .main-information>.form-group.field limel-help{top:0}.limel-form-row--layout limel-icon{color:rgb(var(--contrast-1200));width:var(--limel-form-row-icon-size);flex-shrink:0;min-width:0}.limel-form-row--layout .title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0;font-weight:normal;flex-grow:1;color:var(--limel-theme-on-surface-color);font-size:0.875rem}.limel-form-row--layout .description{margin:0;color:var(--limel-theme-text-secondary-on-background-color);font-size:var(--limel-theme-default-small-font-size);line-height:1.5}.limel-form-row--layout .has-icon .description{padding-left:calc(var(--limel-form-row-icon-size) + var(--limel-form-row-main-information-gap))}.limel-form-row--layout .form-group.field{flex-shrink:0;display:flex;align-content:center}.limel-form-row--layout .form-group.field limel-slider{min-width:8rem;display:block}";
+const formCss = "@charset \"UTF-8\";*,*::after,*::before{box-sizing:border-box}.form-group{min-width:0}.limel-form-array-item--simple{display:flex;align-items:center;padding:0.25rem}.limel-form-array-item--simple>*:first-child{flex:1;min-width:0}.array-items{isolation:isolate;display:flex;flex-direction:column;row-gap:var(--form-row-gap, 0.5rem);margin-top:1rem}.array-items.has-an-item-which-is-being-dragged limel-collapsible-section{--limel-cs-grid-template-rows:0fr;--limel-cs-opacity-transition-speed:0.2s;--limel-cs-grid-template-rows-transition-speed:0.2s;--limel-cs-open-header-bottom-border-radius:0.75rem}.array-item:has(limel-drag-handle:hover),.array-item:has(limel-drag-handle:focus-within),.array-item.is-elevated,.array-item.sortable-chosen{will-change:transform, box-shadow, border-radius, background-color}.array-item.sortable-ghost{border-radius:0.5rem;box-shadow:var(--shadow-depth-64), 0 0.65rem 0.75rem -0.425rem rgb(var(--color-black), 0.3)}.array-item.sortable-chosen{border-radius:0.5rem;background-color:var(--lime-elevated-surface-background-color)}.array-item.is-elevated[draggable=false]{animation:sit-here 0.8s forwards}@keyframes sit-here{0%{border-radius:0.5rem;background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--shadow-depth-64), 0 0.65rem 0.75rem -0.425rem rgb(var(--color-black), 0.3)}100%{box-shadow:none}}limel-drag-handle{order:10}limel-collapsible-section.is-being-dragged{border-radius:0.75rem !important}.limel-form-layout--default{display:grid;column-gap:var(--form-column-gap, 1rem);row-gap:var(--form-row-gap, 1rem);padding:var(--form-body-padding, 1rem)}.limel-form-layout--grid{--min-height-of-one-row:2.5rem;display:grid;column-gap:var(--form-column-gap, 1rem);row-gap:var(--form-row-gap, 1rem);padding:var(--form-body-padding, 1rem);grid-template-columns:repeat(var(--number-of-columns), minmax(0, 1fr))}.limel-form-layout--grid.auto-reorder-to-avoid-empty-cells{grid-auto-flow:dense}.limel-form-layout--grid.layout-1-columns .limel-form-layout-colspan--1,.limel-form-layout--grid.layout-1-columns .limel-form-layout-colspan--2,.limel-form-layout--grid.layout-1-columns .limel-form-layout-colspan--3,.limel-form-layout--grid.layout-1-columns .limel-form-layout-colspan--4,.limel-form-layout--grid.layout-1-columns .limel-form-layout-colspan--5{grid-column:span 1}.limel-form-layout--grid.layout-2-columns .limel-form-layout-colspan--1{grid-column:span 1}.limel-form-layout--grid.layout-2-columns .limel-form-layout-colspan--2,.limel-form-layout--grid.layout-2-columns .limel-form-layout-colspan--3,.limel-form-layout--grid.layout-2-columns .limel-form-layout-colspan--4,.limel-form-layout--grid.layout-2-columns .limel-form-layout-colspan--5{grid-column:span 2}.limel-form-layout--grid.layout-3-columns .limel-form-layout-colspan--1{grid-column:span 1}.limel-form-layout--grid.layout-3-columns .limel-form-layout-colspan--2{grid-column:span 2}.limel-form-layout--grid.layout-3-columns .limel-form-layout-colspan--3,.limel-form-layout--grid.layout-3-columns .limel-form-layout-colspan--4,.limel-form-layout--grid.layout-3-columns .limel-form-layout-colspan--5{grid-column:span 3}.limel-form-layout--grid.layout-4-columns .limel-form-layout-colspan--1{grid-column:span 1}.limel-form-layout--grid.layout-4-columns .limel-form-layout-colspan--2{grid-column:span 2}.limel-form-layout--grid.layout-4-columns .limel-form-layout-colspan--3{grid-column:span 3}.limel-form-layout--grid.layout-4-columns .limel-form-layout-colspan--4,.limel-form-layout--grid.layout-4-columns .limel-form-layout-colspan--5{grid-column:span 4}.limel-form-layout--grid.layout-5-columns .limel-form-layout-colspan--1{grid-column:span 1}.limel-form-layout--grid.layout-5-columns .limel-form-layout-colspan--2{grid-column:span 2}.limel-form-layout--grid.layout-5-columns .limel-form-layout-colspan--3{grid-column:span 3}.limel-form-layout--grid.layout-5-columns .limel-form-layout-colspan--4{grid-column:span 4}.limel-form-layout--grid.layout-5-columns .limel-form-layout-colspan--5{grid-column:span 5}.limel-form-layout--grid .limel-form-layout-colspan--all{grid-column:1/-1}.limel-form-layout--grid limel-checkbox,.limel-form-layout--grid limel-switch{min-height:var(--min-height-of-one-row)}.limel-form-layout--grid limel-checkbox{display:block}.limel-form-layout--grid limel-switch{margin-left:0.5rem}.form-error{color:var(--limel-theme-error-color);font-size:0.6875rem;line-height:1.5;visibility:inherit;padding-right:1rem;padding-left:1rem;padding-top:0.25rem}.button-add-new{margin-top:0.5rem;width:100%}h1{position:relative;margin-top:0;margin-bottom:0;word-break:break-word;hyphens:auto;-webkit-hyphens:auto;text-wrap:balance;font-size:var(--limel-form-h1-font-size);line-height:calc(var(--limel-form-h1-font-size) * 1.42857);letter-spacing:-0.01rem;font-weight:500}limel-markdown{display:block;margin-bottom:0.5rem}.form-group{position:relative}.form-group limel-help{position:absolute;top:calc(var(--form-row-gap, 1rem) * -0.5);left:calc(var(--form-column-gap, 1rem) * -0.5)}.form-group h1{color:rgb(var(--contrast-1400), 0.8)}.form-group h1{--limel-form-h1-font-size:1.476rem;font-weight:800}.form-group .form-group h1{--limel-form-h1-font-size:1.383rem;font-weight:700}.form-group .form-group h1:before{content:\"\";display:block;position:absolute;top:0;bottom:0;margin:auto;left:-0.75rem;background-color:var(--lime-primary-color, var(--limel-theme-primary-color));width:0.125rem;height:1.5rem;border-radius:0.125rem;opacity:0.6}.form-group .form-group .form-group h1{--limel-form-h1-font-size:1.296rem;font-weight:600}.form-group .form-group .form-group h1:before{display:none}.form-group .form-group .form-group .form-group h1{--limel-form-h1-font-size:1.215rem}.form-group .form-group .form-group .form-group h1:before{display:none}.form-group .form-group .form-group .form-group .form-group h1{--limel-form-h1-font-size:1.138rem}.form-group .form-group .form-group .form-group .form-group h1:before{display:none}.form-group .form-group .form-group .form-group .form-group .form-group h1{--limel-form-h1-font-size:1.067rem}.form-group .form-group .form-group .form-group .form-group .form-group h1:before{display:none}.limel-form-row--layout{--limel-form-row-border-radius:0.375rem;--limel-form-row-icon-size:1.75rem;--limel-form-row-main-information-gap:0.5rem;display:flex;flex-direction:column}.limel-form-row--layout .row{display:flex;gap:0.5rem;flex-direction:column;padding:0.5rem 1rem}.limel-form-row--layout .row:nth-child(odd){background-color:var(--form-background-color-of-odd-rows, rgb(var(--contrast-200)))}.limel-form-row--layout .row:nth-child(even){background-color:var(--form-background-color-of-even-rows, transparent)}.limel-form-row--layout .row:first-child{border-radius:var(--limel-form-row-border-radius) var(--limel-form-row-border-radius) 0 0}.limel-form-row--layout .row:last-child{border-radius:0 0 var(--limel-form-row-border-radius) var(--limel-form-row-border-radius)}.limel-form-row--layout .main-information{position:relative;display:flex;flex-direction:row;align-items:center;gap:var(--limel-form-row-main-information-gap);min-width:0}.limel-form-row--layout .main-information{position:relative}.limel-form-row--layout .main-information>.form-group.field{position:unset}.limel-form-row--layout .main-information>.form-group.field limel-help{top:0}.limel-form-row--layout limel-icon{color:rgb(var(--contrast-1200));width:var(--limel-form-row-icon-size);flex-shrink:0;min-width:0}.limel-form-row--layout .title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0;font-weight:normal;flex-grow:1;color:var(--limel-theme-on-surface-color);font-size:0.875rem}.limel-form-row--layout .description{margin:0;color:var(--limel-theme-text-secondary-on-background-color);font-size:var(--limel-theme-default-small-font-size);line-height:1.5}.limel-form-row--layout .has-icon .description{padding-left:calc(var(--limel-form-row-icon-size) + var(--limel-form-row-main-information-gap))}.limel-form-row--layout .form-group.field{flex-shrink:0;display:flex;align-content:center}.limel-form-row--layout .form-group.field limel-slider{min-width:8rem;display:block}";
 
 const Form = class {
   constructor(hostRef) {