@limetech/lime-elements 37.2.8 → 37.4.0

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

@@ -0,0 +1 @@
+{"file":"limel-chip.limel-chip-set.entry.js","mappings":"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","names":[],"sources":["./src/components/chip/chip.scss?tag=limel-chip&encapsulation=shadow","./src/components/chip/chip.tsx","./src/components/chip-set/chip-set-input-helpers.ts","./src/components/chip-set/chip-set.scss?tag=limel-chip-set&encapsulation=shadow","./src/components/chip-set/chip-set.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n/**\n* @prop --chip-max-width: Maximum width of the chip. Defaults to `10rem`. Keep in mind that the chips should not appear too big.\n*/\n\n:host(limel-chip) {\n    --limel-chip-height: 1.75rem;\n    --limel-chip-gap: 0.5rem;\n    isolation: isolate;\n    display: inline-flex;\n    align-items: center;\n    min-width: 0;\n}\n\n* {\n    box-sizing: border-box;\n}\n\n.chip {\n    all: unset;\n    position: relative;\n\n    min-width: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.25rem;\n\n    max-width: var(--chip-max-width, 10rem);\n    height: var(--limel-chip-height);\n\n    border-radius: var(--limel-chip-height);\n    font-size: 0.875rem;\n    padding: 0 0.125rem;\n\n    &:has(limel-icon) {\n        .text {\n            padding-left: 0.25rem;\n        }\n    }\n\n    &:not([disabled]) {\n        @include mixins.visualize-keyboard-focus;\n        @include mixins.is-elevated-inset-clickable;\n    }\n\n    &:has(limel-badge) {\n        padding-right: 0.375rem;\n\n        .text {\n            padding-right: 0;\n        }\n    }\n\n    &:has(+ .remove-button:hover) {\n        box-shadow: var(--shadow-depth-8-error);\n    }\n\n    &:has(+ .trailing-button) {\n        padding-right: calc(var(--limel-chip-height) + 0.125rem);\n\n        .text {\n            padding-right: 0;\n        }\n    }\n}\n\n:host(limel-chip[disabled]) {\n    .chip {\n        // Similar to `limel-button[disabled]`\n        color: rgba(var(--contrast-1600), 0.37);\n        background-color: rgba(var(--contrast-1600), 0.1);\n        box-shadow: none;\n    }\n}\n\n:host(limel-chip[readonly]) {\n    .chip {\n        box-shadow: 0 0 0 1px rgba(var(--contrast-800), 0.5);\n    }\n}\n\n:host(limel-chip[selected]) {\n    .chip {\n        box-shadow: var(--button-shadow-inset);\n\n        &:focus-visible {\n            box-shadow: var(--button-shadow-inset),\n                var(--shadow-depth-8-focused);\n        }\n\n        &:active {\n            box-shadow: var(--button-shadow-inset-pressed);\n        }\n    }\n    .text {\n        color: var(--mdc-theme-primary);\n    }\n}\n\n:host(limel-chip[type='filter']) {\n    .chip {\n        border-top-left-radius: 0.5rem;\n        border-bottom-left-radius: 0.5rem;\n\n        &:after {\n            content: '';\n            transition:\n                background-color 0.4s ease 0.2s,\n                box-shadow 0.6s ease 0.2s;\n            box-sizing: border-box;\n            position: absolute;\n            bottom: 0.125rem;\n            left: 0.125rem;\n            width: 0.5rem;\n            height: 0.5rem;\n            border-radius: 50%;\n            background-color: rgb(var(--contrast-800), 0.8);\n            box-shadow: 0 0 0 1px rgb(var(--color-white)) inset;\n        }\n    }\n}\n\n:host(limel-chip[type='filter'][selected]) {\n    .chip {\n        &:after {\n            background-color: rgb(var(--color-green-default));\n            box-shadow:\n                0 0 0.375rem 0 rgb(var(--color-green-light)),\n                0 0 0 1px rgb(var(--color-white)) inset;\n        }\n    }\n}\n\nlimel-icon {\n    flex-shrink: 0;\n    width: calc(var(--limel-chip-height) - 0.25rem);\n    height: calc(var(--limel-chip-height) - 0.25rem);\n    padding: 0.0625rem;\n}\n\nlimel-badge {\n    pointer-events: none;\n}\n\n.text {\n    @include mixins.truncate-text;\n    line-height: 1.2;\n    padding: 0 0.5rem;\n}\n\n.trailing-button {\n    all: unset;\n    @include mixins.is-flat-clickable(\n        $color--hovered: rgb(var(--color-red-dark))\n    );\n\n    z-index: 1;\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    margin-left: calc(var(--limel-chip-height) * -1 + 0.125rem);\n    margin-right: 0.125rem;\n    width: calc(var(--limel-chip-height) - 0.25rem);\n    height: calc(var(--limel-chip-height) - 0.25rem);\n\n    border-radius: 50%;\n\n    svg {\n        transition:\n            color 0.2s ease,\n            transform 0.2s ease;\n        width: 1.25rem;\n    }\n\n    &:hover {\n        svg {\n            transform: scale(0.8);\n        }\n    }\n}\n","import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n} from '@stencil/core';\nimport { Icon, Languages, Link } from '../../interface';\nimport { getIconName } from '../icon/get-icon-props';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport translate from '../../global/translations';\nimport {\n    BACKSPACE,\n    BACKSPACE_KEY_CODE,\n    DELETE,\n    DELETE_KEY_CODE,\n} from '../../util/keycodes';\nimport { ChipType, Chip as OldChipInterface } from '../chip-set/chip.types';\n\ninterface ChipInterface extends Omit<OldChipInterface, 'id' | 'badge'> {\n    /**\n     * Identifier for the chip. Must be unique.\n     */\n    identifier?: number | string;\n\n    /**\n     * The value of the badge.\n     */\n    badge?: string | number;\n}\n\n/**\n * Chips and buttons are both interactive elements in UI design,\n * but they serve different purposes and are used in different contexts.\n *\n * :::warning\n * Do not use the chip component carelessly, as an alternative for\n * [`limel-button`](#/component/limel-button/) in the UI design!\n *\n * **Buttons:**\n * Buttons are used to trigger actions. They are typically used to\n * submit forms, open dialogs, initiate a process, or perform any action\n * that changes the state of the application.\n * Buttons' labels usually contain action words, in other words, the labels is\n * a _verb in imperative mood_ such as \"Submit\" or \"Delete\".\n * Buttons are placed in areas where it's clear they will initiate\n * an action when clicked.\n *\n * **Chips:**\n * Chips however are elements which may look like buttons, but they are\n * representing choices, filters, or tags, in a small block\n * or clearly bundled into a group. Chips are rarely used alone in the\n * user interface.\n * They are often used in a so called \"chip-set\", or placed together in\n * a section of the UI, where the user can expect more than one chip to be present.\n *\n * For example, a chip may represent a filter in a filter bar, or a tag in a tag list,\n * or an item in a shopping list.\n * Clicking a chip can also trigger an action, for example toggling a filter ON or OFF,\n * or opening a page with all posts tagged with the tag represented by the chip,\n * or navigating to a page with more information about the item in the shopping list.\n * :::\n *\n * @private\n * @exampleComponent limel-example-chip-button\n * @exampleComponent limel-example-chip-link\n * @exampleComponent limel-example-chip-icon-colors\n * @exampleComponent limel-example-chip-badge\n * @exampleComponent limel-example-chip-filter\n * @exampleComponent limel-example-chip-removable\n * @exampleComponent limel-example-chip-aria-role\n */\n@Component({\n    tag: 'limel-chip',\n    shadow: true,\n    styleUrl: 'chip.scss',\n})\nexport class Chip implements ChipInterface {\n    /**\n     * Defines the language for translations.\n     * Will translate the translatable strings on the components.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    /**\n     * Label displayed on the chip\n     */\n    @Prop({ reflect: true })\n    public text: string;\n\n    /**\n     * Icon of the chip.\n     */\n    @Prop()\n    public icon?: string | Icon;\n\n    /**\n     * If supplied, the chip will become a clickable link.\n     */\n    @Prop()\n    public link?: Omit<Link, 'text'>;\n\n    /**\n     * The value of the badge, displayed on the chip.\n     */\n    @Prop({ reflect: true })\n    public badge?: string | number;\n\n    /**\n     * Set to `true` to disable the chip.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Set to `true` to render the chip as a static UI element.\n     * Useful when the parent component has a `readonly` state.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to visualize the chip in a \"selected\" state.\n     * This is typically used when the chip is used in a chip-set\n     * along with other chips.\n     */\n    @Prop({ reflect: true })\n    public selected = false;\n\n    /**\n     * Set to `true` to render a remove button on the chip.\n     */\n    @Prop({ reflect: true })\n    public removable = false;\n\n    /**\n     * Set to `filter` to render the chip with a distinct style\n     * suitable for visualizing filters.\n     *\n     * @beta\n     */\n    @Prop({ reflect: true })\n    public type?: ChipType = 'default';\n\n    /**\n     * Identifier for the chip. Must be unique.\n     */\n    @Prop({ reflect: true })\n    public identifier?: number | string = crypto.randomUUID();\n\n    /**\n     * Fired when clicking on the remove button of a `removable` chip.\n     * The value of `identifier` is emitted as the event detail.\n     */\n    @Event()\n    public remove: EventEmitter<number | string>;\n\n    @Element()\n    private host: HTMLLimelChipElement;\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public render() {\n        return (\n            <Host onClick={this.filterClickWhenDisabled}>\n                {this.link ? this.renderAsLink() : this.renderAsButton()}\n            </Host>\n        );\n    }\n\n    private renderAsButton = () => {\n        return [\n            <button\n                id={'chip-' + this.identifier}\n                class=\"chip\"\n                role=\"button\"\n                disabled={this.disabled || this.readonly}\n                onKeyDown={this.handleDeleteKeyDown}\n            >\n                {this.renderIcon()}\n                {this.renderLabel()}\n                {this.renderBadge()}\n            </button>,\n            this.renderRemoveButton(),\n        ];\n    };\n\n    private renderAsLink = () => {\n        return [\n            <a\n                id={'chip-' + this.identifier}\n                class=\"chip\"\n                href={this.link.href}\n                title={this.link.title}\n                target={this.link.target}\n                aria-disabled={this.disabled || this.readonly}\n                tabindex={this.disabled || this.readonly ? -1 : 0}\n                onKeyDown={this.handleDeleteKeyDown}\n            >\n                {this.renderIcon()}\n                {this.renderLabel()}\n                {this.renderBadge()}\n            </a>,\n            this.renderRemoveButton(),\n        ];\n    };\n\n    private renderLabel = () => {\n        return <span class=\"text\">{this.text}</span>;\n    };\n\n    private renderIcon() {\n        const icon = getIconName(this.icon);\n\n        if (!icon) {\n            return;\n        }\n\n        return (\n            <limel-icon\n                badge={true}\n                name={icon}\n                style={{\n                    color: `${(this.icon as Icon)?.color}`,\n                    'background-color': `${\n                        (this.icon as Icon)?.backgroundColor\n                    }`,\n                }}\n            />\n        );\n    }\n\n    private renderBadge() {\n        if (!this.badge) {\n            return;\n        }\n\n        return <limel-badge label={this.badge} />;\n    }\n\n    private renderRemoveButton() {\n        if (!this.removable || this.readonly || this.disabled) {\n            return;\n        }\n\n        const svgData =\n            '<svg viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"m8 8 16 16M24 8 8 24\"/></svg>';\n\n        return (\n            <button\n                class=\"trailing-button remove-button\"\n                tabIndex={-1}\n                aria-label={this.removeChipLabel}\n                aria-controls={'chip-' + this.identifier}\n                innerHTML={svgData}\n                onClick={this.handleRemoveClick}\n            />\n        );\n    }\n\n    private filterClickWhenDisabled = (e) => {\n        if (this.disabled || this.readonly) {\n            e.preventDefault();\n        }\n    };\n\n    private handleRemoveClick = (event: MouseEvent | KeyboardEvent) => {\n        event.stopPropagation();\n        this.remove.emit(this.identifier);\n    };\n\n    private handleDeleteKeyDown = (event: KeyboardEvent) => {\n        if (!this.removable) {\n            return;\n        }\n\n        const keys = [DELETE, BACKSPACE];\n        const keycodes = [DELETE_KEY_CODE, BACKSPACE_KEY_CODE];\n\n        if (keys.includes(event.key) || keycodes.includes(event.keyCode)) {\n            this.handleRemoveClick(event);\n        }\n    };\n\n    private removeChipLabel = (): string => {\n        return translate.get('chip-set.remove-chip', this.language);\n    };\n}\n","import {\n    ARROW_LEFT,\n    ARROW_LEFT_KEY_CODE,\n    ARROW_RIGHT,\n    ARROW_RIGHT_KEY_CODE,\n    BACKSPACE,\n    BACKSPACE_KEY_CODE,\n    DELETE,\n    DELETE_KEY_CODE,\n    ENTER,\n    ENTER_KEY_CODE,\n    ESCAPE,\n    ESCAPE_KEY_CODE,\n} from '../../util/keycodes';\n\n/**\n * Key handler for the input field.\n * Lets the user select, activate, and remove chips with the keyboard.\n *\n * @param event - event\n\n */\nexport function handleKeyboardEvent(event: KeyboardEvent) {\n    if (this.textValue.length) {\n        // If there is any text in the input field, keyboard input should\n        // navigate the text, not the chips.\n        return;\n    }\n\n    if (!this.value || !this.value.length) {\n        // If there are no chips, there is nothing to select.\n        return;\n    }\n\n    const isLeft =\n        event.key === ARROW_LEFT || event.keyCode === ARROW_LEFT_KEY_CODE;\n    const isRight =\n        event.key === ARROW_RIGHT || event.keyCode === ARROW_RIGHT_KEY_CODE;\n    const isEnter = event.key === ENTER || event.keyCode === ENTER_KEY_CODE;\n    const isDelete = event.key === DELETE || event.keyCode === DELETE_KEY_CODE;\n    const isBackspace =\n        event.key === BACKSPACE || event.keyCode === BACKSPACE_KEY_CODE;\n    const isEscape = event.key === ESCAPE || event.keyCode === ESCAPE_KEY_CODE;\n\n    if (isLeft) {\n        return handleLeft(this, event);\n    }\n\n    if (isRight) {\n        return handleRight(this, event);\n    }\n\n    if (isEnter) {\n        return handleEnter(this, event);\n    }\n\n    if (isDelete) {\n        return handleDelete(this, event);\n    }\n\n    if (isBackspace) {\n        return handleBackspace(this, event);\n    }\n\n    if (isEscape) {\n        return handleEscape(this, event);\n    }\n}\n\nfunction handleLeft(host, event) {\n    event.preventDefault();\n    if (host.inputChipIndexSelected === null) {\n        host.inputChipIndexSelected = host.value.length - 1;\n\n        return;\n    }\n\n    if (host.inputChipIndexSelected <= 0) {\n        return;\n    }\n\n    host.inputChipIndexSelected -= 1;\n}\n\nfunction handleRight(host, event) {\n    event.preventDefault();\n    if (host.inputChipIndexSelected === null) {\n        host.inputChipIndexSelected = 0;\n\n        return;\n    }\n\n    if (host.inputChipIndexSelected >= host.value.length - 1) {\n        return;\n    }\n\n    host.inputChipIndexSelected += 1;\n}\n\nfunction handleEnter(host, event) {\n    if (host.inputChipIndexSelected !== null) {\n        event.preventDefault();\n        host.emitInteraction(host.value[host.inputChipIndexSelected]);\n    }\n}\n\nfunction handleEscape(host, event) {\n    if (host.inputChipIndexSelected !== null) {\n        event.preventDefault();\n        host.inputChipIndexSelected = null;\n    }\n}\n\nfunction handleDelete(host, event) {\n    if (host.inputChipIndexSelected !== null) {\n        event.preventDefault();\n        removeChip(host);\n    }\n}\n\nfunction handleBackspace(host, event) {\n    if (host.inputChipIndexSelected !== null) {\n        event.preventDefault();\n        removeChip(host);\n    } else if (!event.repeat) {\n        host.inputChipIndexSelected = host.value.length - 1;\n    }\n}\n\nfunction removeChip(host) {\n    if (host.inputChipIndexSelected !== null) {\n        host.removeChip(host.value[host.inputChipIndexSelected].id);\n        host.inputChipIndexSelected = null;\n    }\n}\n","@use '../../style/functions';\n@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins';\n\n@use '../../style/internal/lime-theme';\n\n@use '@material/textfield';\n@use '@material/textfield/icon';\n@use '@material/notched-outline/mdc-notched-outline';\n@use '@material/floating-label';\n@use '@material/floating-label/mdc-floating-label';\n\n/**\n * @prop --icon-background-color: Background color of the icon. Defaults to transparent.\n * @prop --icon-color: Color of the icon. Defaults to `rgb(var(--contrast-1100))`.\n * @prop --background-color: Background color of the field when type is set to input.\n * @prop --background-color-disabled: Background color of the field when type is set to input and the component is disabled or readonly.\n * @prop --input-chip-set-selected-chip-color: Color of the highlight around selected chips in input chip-sets.\n */\n\n@include textfield.core-styles;\n@include icon.icon-core-styles;\n\n@include shared_input-select-picker.outlined-style-overrides;\n@include shared_input-select-picker.floating-label-overrides;\n@include shared_input-select-picker.cropped-label-hack;\n@include shared_input-select-picker.disabled-overrides;\n@include shared_input-select-picker.readonly-overrides;\n@include shared_input-select-picker.leading-icon;\n@include shared_input-select-picker.lime-empty-value-for-readonly;\n@include shared_input-select-picker.lime-looks-like-input-value;\n\n$height-of-chip-set-input: functions.pxToRem(36);\n$leading-icon-space: 1.5rem;\n\n:host(limel-chip-set) {\n    isolation: isolate;\n}\n\n.mdc-chip-set {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: 0.5rem;\n    min-height: shared_input-select-picker.$height-of-mdc-text-field;\n    position: relative;\n\n    &.chip-set--with-label {\n        .lime-floating-label--float-above {\n            padding-left: functions.pxToRem(4);\n        }\n    }\n\n    &.mdc-chip-set--input {\n        padding: 0.4rem 0.5rem;\n        width: 100%;\n    }\n\n    &.has-clear-all-button {\n        &.mdc-chip-set--input {\n            padding-right: functions.pxToRem(\n                32\n            ); // This leaves space for \"clear all\" button and avoids overlapping with chips\n        }\n    }\n}\n\n.mdc-text-field {\n    height: auto;\n    cursor: text;\n    flex-wrap: wrap;\n    row-gap: 0.5rem;\n\n    .mdc-text-field__input {\n        @include shared_input-select-picker.input-field-placeholder;\n\n        width: auto;\n        padding: 0 functions.pxToRem(12);\n\n        flex-grow: 1;\n        flex-shrink: 0;\n\n        &.hidden {\n            // This class is added, as soon as there is a chip selected and displayed\n            // This input field should not be visually visible as it breaks the UI in some cases\n            // But it should be rendered to be able to tab between fields and do other keyboard commands /Kia\n            transition: all 0s;\n            opacity: 0;\n            position: absolute;\n            z-index: -100; // to let users interact with chips, in case they're covered\n        }\n        &[type='search'] {\n            -webkit-appearance: textfield; // Removes the default magnifying glass icon on iOS which appears automatically on input fields with type of search\n            background-color: transparent; // overides styles caused by previous line\n\n            &::-webkit-search-cancel-button {\n                display: none; // removes the default X button\n            }\n        }\n    }\n}\n\n// used only in chipsets that do not have input\n.chip-set__label {\n    @include mixins.truncate-text;\n    width: 120%; // `120%` instead of `100%`,\n    // because this class is always together with `mdc-floating-label--float-above`,\n    // which scales the label down. So there is more horizontal space to display the label in.\n    top: functions.pxToRem(13);\n    padding-left: functions.pxToRem(20);\n}\n\n// Because MDC removes some classes in chipset, we add custom\n// classes with similar names and expected behavior & styles.\n// These class names start with `lime-`, instead of `mdc-`.\n.lime-notched-outline--notched {\n    .mdc-notched-outline__notch {\n        border-top: 1px solid transparent !important;\n\n        .lime-floating-label--float-above {\n            // This overrides MDC's original top value which is `top: 50%`.\n            // The reason is that a % value aligns the label in a wrong position\n            // vertically, when there are multiple rows of chips.\n            top: functions.pxToRem(27);\n\n            transform: translateY(-34.75px) scale(0.75) !important;\n            font-size: shared_input-select-picker.$cropped-label-hack--font-size;\n        }\n    }\n}\n\n.force-invalid {\n    @extend .mdc-text-field--invalid;\n}\n\n.clear-all-button {\n    @include mixins.clear-all-button;\n    @include mixins.visualize-keyboard-focus;\n\n    position: absolute;\n    right: 0.5rem;\n    top: calc(#{shared_input-select-picker.$height-of-mdc-text-field} / 4);\n\n    opacity: 0; // Is hidden, but can receive focus (such as when navigating through tab indexes).\n\n    &:focus,\n    .has-chips:not(.mdc-text-field--disabled):hover &,\n    .has-chips:not(.mdc-text-field--disabled).mdc-text-field--focused & {\n        opacity: 1;\n        outline: none;\n    }\n\n    :not(.has-chips) &,\n    .has-chips.mdc-text-field--disabled & {\n        display: none; // Won't receive focus when disabled\n    }\n}\n\n.has-leading-icon {\n    &:not(.has-chips) {\n        .mdc-text-field__input {\n            padding-left: $leading-icon-space;\n        }\n\n        .mdc-floating-label {\n            &:not(.lime-floating-label--float-above) {\n                left: $leading-icon-space;\n            }\n            &.mdc-floating-label--float-above {\n                left: functions.pxToRem(4);\n            }\n        }\n    }\n\n    limel-chip {\n        &:first-of-type {\n            margin-left: 1.5rem;\n        }\n    }\n\n    .search-icon {\n        transition: transform 0.2s ease;\n        position: absolute;\n        top: functions.pxToRem(9);\n        left: 0.25rem;\n    }\n\n    limel-icon {\n        background-color: transparent;\n    }\n}\n\n.delimiter {\n    opacity: 0.5;\n    padding: 0 functions.pxToRem(2);\n    color: var(--mdc-theme-on-surface);\n}\n\nlimel-chip {\n    border-radius: 2rem;\n\n    &.can-be-removed {\n        // When chip is selected with keyboard (backspace / arrow-keys) to be deleted\n        box-shadow: var(--shadow-depth-8-error);\n    }\n}\n\n@import './partial-styles/_readonly';\n@import './partial-styles/_file-picker';\n@import './partial-styles/_helper-text';\n\n// To make the input field render smaller than the default MDC UI\n.mdc-text-field {\n    &.mdc-text-field--outlined {\n        min-height: shared_input-select-picker.$height-of-mdc-text-field;\n    }\n}\n","import { Chip, ChipType } from '../chip-set/chip.types';\nimport { Languages } from '../date-picker/date.types';\nimport { MDCTextField } from '@material/textfield';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Method,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { handleKeyboardEvent } from './chip-set-input-helpers';\nimport translate from '../../global/translations';\nimport { getHref, getTarget } from '../../util/link-helper';\nimport { isEqual } from 'lodash-es';\nimport { LimelChipCustomEvent } from 'src/components';\n\nconst INPUT_FIELD_TABINDEX = 1;\n\n/**\n * @exampleComponent limel-example-chip-set\n * @exampleComponent limel-example-chip-set-choice\n * @exampleComponent limel-example-chip-set-filter\n * @exampleComponent limel-example-chip-set-filter-badge\n * @exampleComponent limel-example-chip-set-input\n * @exampleComponent limel-example-chip-set-input-type-text\n * @exampleComponent limel-example-chip-set-input-type-search\n * @exampleComponent limel-example-chip-icon-color\n * @exampleComponent limel-example-chip-set-composite\n */\n@Component({\n    tag: 'limel-chip-set',\n    shadow: true,\n    styleUrl: 'chip-set.scss',\n})\nexport class ChipSet {\n    /**\n     * List of chips for the set\n     */\n    @Prop()\n    public value: Chip[] = [];\n\n    /**\n     * Type of chip set\n     *\n     * - `choice` renders a set of selectable chips where only one is selectable. The `removable` property is ignored\n     * - `filter` renders a set of selectable chips where all are selectable.\n     * - `input` renders a set of chips that can be used in conjunction with an input field\n     *\n     * If no type is set, a basic set of chips without additional functionality will be rendered\n     */\n    @Prop({ reflect: true })\n    public type?: 'choice' | 'filter' | 'input';\n\n    /**\n     * Label for the chip-set\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Optional helper text to display below the chipset.\n     * When type is `input`, the helper text is displayed below the\n     * input field when it has focus.\n     * When type is not `input`, the helper text is always displayed\n     * if the device is touch screen; otherwise it is shown when chip-set\n     * is hovered or focused using keyboard navigation.\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * True if the chip set should be disabled\n     */\n    @Prop({ reflect: true })\n    public disabled: boolean = false;\n\n    /**\n     * For chip-sets of type `input`, set to `true` to disable adding and\n     * removing chips, but allow interaction with existing chips in the set.\n     * For any other types, setting either `readonly` or `disabled` disables\n     * the chip-set.\n     */\n    @Prop({ reflect: true })\n    public readonly: boolean = 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     * For chip-sets of type `input`. Value to use for the `type` attribute on the\n     * input field inside the chip-set.\n     */\n    @Prop({ reflect: true })\n    public inputType: 'search' | 'text' = 'text';\n\n    /**\n     * For chip-sets of type `input`. Limits the maximum number of chips.\n     * When the value is `0` or not set, no limit is applied.\n     */\n    @Prop({ reflect: true })\n    public maxItems: number;\n\n    /**\n     * True if the control requires a value\n     */\n    @Prop({ reflect: true })\n    public required: boolean = false;\n\n    /**\n     * Search label to display when type is `input` and component is in search mode\n     */\n    @Prop({ reflect: true })\n    public searchLabel: string;\n\n    /**\n     * Whether the input field should be emptied when the chip-set loses focus.\n     */\n    @Prop({ reflect: true })\n    public emptyInputOnBlur: boolean = true;\n\n    /**\n     * Whether the \"Clear all\" buttons should be shown\n     */\n    @Prop()\n    public clearAllButton: boolean = true;\n\n    /**\n     * For chip-sets of type `input`. When the value is null, no leading icon is used.\n     * Leading icon to show to the far left in the text field\n     */\n    @Prop({ reflect: true })\n    public leadingIcon: string = null;\n\n    /**\n     * For chip-set of type `input`. Sets delimiters between chips.\n     */\n    @Prop({ reflect: true })\n    public delimiter: string = null;\n\n    /**\n     * Defines the language for translations.\n     * Will translate the translatable strings on the components. For example, the clear all chips label.\n     */\n    @Prop()\n    public language: Languages = 'en';\n\n    /**\n     * Dispatched when a chip is interacted with\n     */\n    @Event()\n    private interact: EventEmitter<Chip>;\n\n    /**\n     * Dispatched when a chip is selected/deselected\n     */\n    @Event()\n    private change: EventEmitter<Chip | Chip[]>;\n\n    /**\n     * Emitted when an input chip set has received focus and editing in the text field has started\n     */\n    @Event()\n    private startEdit: EventEmitter<void>;\n\n    /**\n     * Emitted when an input chip set has lost focus and editing in the text field has ended\n     */\n    @Event()\n    private stopEdit: EventEmitter<void>;\n\n    /**\n     * Dispatched when the input is changed for type `input`\n     */\n    @Event()\n    private input: EventEmitter<string>;\n\n    @Element()\n    private host: HTMLLimelChipSetElement;\n\n    @State()\n    private editMode: boolean = false;\n\n    @State()\n    private textValue: string = '';\n\n    @State()\n    private blurred: boolean = false;\n\n    @State()\n    private inputChipIndexSelected: number = null;\n\n    @State()\n    private selectedChipIds: Array<string | number>;\n\n    private mdcTextField: MDCTextField;\n    private handleKeyDown = handleKeyboardEvent;\n\n    constructor() {\n        this.renderChip = this.renderChip.bind(this);\n        this.renderInputChip = this.renderInputChip.bind(this);\n        this.isFull = this.isFull.bind(this);\n        this.handleTextFieldFocus = this.handleTextFieldFocus.bind(this);\n        this.handleInputBlur = this.handleInputBlur.bind(this);\n        this.handleTextInput = this.handleTextInput.bind(this);\n        this.inputFieldOnChange = this.inputFieldOnChange.bind(this);\n        this.handleKeyDown = this.handleKeyDown.bind(this);\n        this.inputHidden = this.inputHidden.bind(this);\n        this.handleDeleteAllIconClick =\n            this.handleDeleteAllIconClick.bind(this);\n        this.renderDelimiter = this.renderDelimiter.bind(this);\n    }\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    private initialize() {\n        if (this.value.length) {\n            this.selectedChipIds = this.value\n                .filter((chip) => chip.selected)\n                .map((chip) => chip.id);\n        }\n    }\n\n    /**\n     * Used to find out whether the chip-set is in edit mode.\n     *\n     * @returns `true` if the chip-set is in edit mode, `false` otherwise.\n     */\n    @Method()\n    public async getEditMode(): Promise<boolean> {\n        return this.editMode;\n    }\n\n    /**\n     * Used to set focus to the chip-set input field.\n     *\n     * @param emptyInput - if `true`, any text in the input is discarded\n     * @returns does not return anything, but methods have to be async\n     */\n    @Method()\n    public async setFocus(emptyInput: boolean = false) {\n        if (this.disabled || this.readonly) {\n            return;\n        }\n\n        this.editMode = true;\n        if (emptyInput) {\n            this.textValue = '';\n        }\n\n        this.host.shadowRoot.querySelector('input').focus();\n        this.startEdit.emit();\n    }\n\n    /**\n     * Used to empty the input field. Used in conjunction with `emptyInputOnBlur` to let the\n     * consumer control when the input is emptied.\n     *\n     * @returns does not return anything, but methods have to be async\n     */\n    @Method()\n    public async emptyInput() {\n        this.syncEmptyInput();\n    }\n\n    public componentDidLoad() {\n        this.triggerIconColorWarning(this.value);\n\n        if (this.type === 'input') {\n            this.mdcTextField = new MDCTextField(\n                this.host.shadowRoot.querySelector('.mdc-text-field'),\n            );\n        }\n    }\n\n    public componentDidUpdate() {\n        const input = this.host.shadowRoot.querySelector('input');\n        if (input && this.editMode) {\n            input.focus();\n        }\n    }\n\n    public disconnectedCallback() {\n        if (this.mdcTextField) {\n            this.mdcTextField.destroy();\n        }\n    }\n\n    public render() {\n        if (this.type === 'input') {\n            return this.renderInputChips();\n        }\n\n        const classes = {\n            'mdc-chip-set': true,\n            disabled: this.disabled || this.readonly,\n            'mdc-text-field--with-trailing-icon': true,\n        };\n        if (this.type) {\n            classes[`mdc-chip-set--${this.type}`] = true;\n        }\n\n        const chipSetLabel = this.renderChipSetLabel();\n        if (chipSetLabel) {\n            classes['chip-set--with-label'] = true;\n        }\n\n        const value = this.getValue();\n\n        return (\n            <div class={classes} role=\"grid\">\n                {chipSetLabel}\n                {value.map(this.renderChip)}\n                {this.renderHelperLine()}\n            </div>\n        );\n    }\n\n    private getValue = () => {\n        return this.value.map((chip) => ({\n            ...chip,\n            ...(this.type && {\n                selected: this.selectedChipIds.includes(chip.id),\n            }),\n        }));\n    };\n\n    @Watch('value')\n    protected handleChangeChips(newValue: Chip[], oldValue: Chip[]) {\n        if (isEqual(newValue, oldValue)) {\n            return;\n        }\n\n        this.syncEmptyInput();\n        this.initialize();\n    }\n\n    private renderChipSetLabel() {\n        if (!this.label) {\n            return;\n        }\n\n        return (\n            <label class=\"chip-set__label mdc-floating-label mdc-floating-label--float-above\">\n                {this.label}\n            </label>\n        );\n    }\n\n    private renderInputChips() {\n        return [\n            <div\n                class={{\n                    'mdc-text-field mdc-text-field--outlined': true,\n                    'mdc-chip-set mdc-chip-set--input': true,\n                    'force-invalid': this.isInvalid(),\n                    'mdc-text-field--disabled': this.readonly || this.disabled,\n                    'lime-text-field--readonly': this.readonly,\n                    'has-chips mdc-text-field--label-floating':\n                        this.value.length !== 0,\n                    'has-leading-icon': this.leadingIcon !== null,\n                    'has-clear-all-button': this.clearAllButton,\n                }}\n                onClick={this.handleTextFieldFocus}\n            >\n                {this.value.map(this.renderInputChip)}\n                <input\n                    tabIndex={INPUT_FIELD_TABINDEX}\n                    type={this.inputType}\n                    id=\"input-element\"\n                    disabled={this.readonly || this.disabled}\n                    class={{\n                        'mdc-text-field__input': true,\n                        hidden: this.inputHidden(),\n                    }}\n                    value={this.textValue}\n                    onBlur={this.handleInputBlur}\n                    onFocus={this.handleTextFieldFocus}\n                    onKeyDown={this.handleKeyDown}\n                    onInput={this.handleTextInput}\n                    // Some browsers emit a change event on input elements, we need to stop\n                    // that event from propagating since we are emitting our own change event\n                    onChange={this.inputFieldOnChange}\n                    placeholder={this.isFull() ? '' : this.searchLabel}\n                    readonly={this.isFull()}\n                />\n                <div\n                    class={{\n                        'mdc-notched-outline': true,\n                        'mdc-notched-outline--upgraded': true,\n                        'mdc-text-field--required': this.required,\n                        'lime-notched-outline--notched': this.floatLabelAbove(),\n                    }}\n                    dropzone-tip={this.dropZoneTip()}\n                >\n                    <div class=\"mdc-notched-outline__leading\" />\n                    {this.renderLabel()}\n                    <div class=\"mdc-notched-outline__trailing\" />\n                </div>\n                {this.renderLeadingIcon()}\n                {this.renderEmptyValueForReadonly()}\n                {this.renderClearAllChipsButton()}\n            </div>,\n            this.renderHelperLine(),\n        ];\n    }\n\n    private renderEmptyValueForReadonly = () => {\n        if (this.readonly && this.value.length === 0) {\n            return (\n                <span class=\"lime-empty-value-for-readonly lime-looks-like-input-value\">\n                    –\n                </span>\n            );\n        }\n    };\n\n    private renderLabel() {\n        const labelClassList = {\n            'mdc-floating-label': true,\n            'mdc-text-field--disabled': this.readonly || this.disabled,\n            'mdc-floating-label--required': this.required,\n            'lime-floating-label--float-above': this.floatLabelAbove(),\n        };\n\n        if (!this.label) {\n            return;\n        }\n\n        return (\n            <div class=\"mdc-notched-outline__notch\">\n                <label class={labelClassList} htmlFor=\"input-element\">\n                    {this.label}\n                </label>\n            </div>\n        );\n    }\n\n    private floatLabelAbove = () => {\n        if (!!this.value.length || this.editMode || this.readonly) {\n            return true;\n        }\n    };\n\n    private dropZoneTip = (): string => {\n        return translate.get('file.drag-and-drop-tips', this.language);\n    };\n\n    private isFull(): boolean {\n        return !!this.maxItems && this.value.length >= this.maxItems;\n    }\n\n    private isInvalid() {\n        if (this.readonly) {\n            // A readonly field can never be invalid.\n            return false;\n        }\n\n        if (this.invalid) {\n            return true;\n        }\n\n        if (!this.required) {\n            return false;\n        }\n\n        if (!this.blurred) {\n            return false;\n        }\n\n        return !this.value || !this.value.length;\n    }\n\n    private inputFieldOnChange(event) {\n        event.stopPropagation();\n    }\n\n    /**\n     * Enter edit mode when the text field receives focus. When editMode is true, the input element will be visible\n     */\n    private handleTextFieldFocus() {\n        if (this.disabled || this.readonly) {\n            return;\n        }\n\n        if (this.editMode) {\n            return;\n        }\n\n        this.editMode = true;\n        this.startEdit.emit();\n    }\n\n    /**\n     * Exit edit mode when the input element loses focus. This makes sure the input element does not take up any\n     * additional space when the user it not typing anything\n     */\n    private handleInputBlur() {\n        if (this.emptyInputOnBlur) {\n            this.syncEmptyInput();\n        }\n\n        this.editMode = false;\n        this.blurred = true;\n        this.inputChipIndexSelected = null;\n\n        // This timeout is needed in order to let a new element receive focus\n        setTimeout(() => {\n            this.stopEdit.emit();\n        }, 0);\n    }\n\n    private syncEmptyInput() {\n        this.textValue = '';\n    }\n\n    private inputHidden() {\n        if (this.editMode) {\n            return this.isFull();\n        }\n\n        // If there are chips in the picker, hide the input to avoid the input\n        // being placed on a new line and adding ugly space beneath the chips.\n        // If there are no chips, show the input, or the picker will look weird.\n        return !!(this.value && this.value.length);\n    }\n\n    private handleTextInput(event) {\n        event.stopPropagation();\n        this.inputChipIndexSelected = null;\n        this.textValue = event.target.value;\n        this.input.emit(event.target.value && event.target.value.trim());\n    }\n\n    private emitInteraction(chip: Chip) {\n        this.interact.emit(chip);\n    }\n\n    private renderChip(chip: Chip) {\n        const chipType: ChipType =\n            this.type === 'filter' ? 'filter' : 'default';\n\n        const chipProps = this.getChipProps(chip, chipType);\n\n        return <limel-chip {...chipProps} />;\n    }\n\n    private hasHelperText = () => {\n        return this.helperText !== null && this.helperText !== undefined;\n    };\n\n    private renderHelperLine = () => {\n        if (!this.maxItems && !this.hasHelperText()) {\n            return;\n        }\n\n        return (\n            <limel-helper-line\n                length={this.value.length}\n                maxLength={this.maxItems}\n                helperText={this.helperText}\n                invalid={this.isInvalid()}\n            />\n        );\n    };\n\n    private renderInputChip(chip: Chip, index: number) {\n        const chipProps = this.getChipProps(chip, 'default');\n\n        return [\n            <limel-chip\n                key={chip.id}\n                class={{\n                    'can-be-removed': this.inputChipIndexSelected === index,\n                }}\n                {...chipProps}\n            />,\n            this.renderDelimiter(),\n        ];\n    }\n\n    private getChipProps(chip: Chip, chipType: ChipType) {\n        const removable = this.type === 'input' && chip.removable;\n\n        return {\n            role: 'row',\n            identifier: chip.id,\n            text: chip.text,\n            icon: chip.icon,\n            badge: chip.badge,\n            selected: chip.selected,\n            disabled: this.disabled,\n            readonly: this.readonly,\n            type: chipType,\n            removable: removable,\n            onClick: this.catchInputChipClicks(chip),\n            onRemove: this.handleRemoveChip,\n            ...(chip.href && {\n                link: {\n                    href: getHref(chip.href),\n                    target: getTarget(chip.href),\n                },\n            }),\n        };\n    }\n\n    private catchInputChipClicks = (chip: Chip) => () => {\n        if (this.isSelectableChip(chip)) {\n            this.updateSelectedChipIds(chip);\n            this.change.emit(chip);\n        }\n\n        this.emitInteraction(chip);\n    };\n\n    private isSelectableChip(chip: Chip): boolean {\n        return this.type !== 'input' && 'selected' in chip;\n    }\n\n    private updateSelectedChipIds(chip: Chip): void {\n        chip.selected = !chip.selected;\n        const id = chip.id;\n        if (this.type === 'choice') {\n            this.updateChoiceTypeSelectedIds(id);\n        } else {\n            this.updateFilterTypeSelectedIds(id);\n        }\n    }\n\n    private updateChoiceTypeSelectedIds(id: number | string): void {\n        this.selectedChipIds = this.isChipSelected(id) ? [] : [id];\n    }\n\n    private isChipSelected(id: number | string): boolean {\n        return !!this.selectedChipIds.find((chipId) => chipId === id);\n    }\n\n    private updateFilterTypeSelectedIds(id: number | string): void {\n        if (this.isChipSelected(id)) {\n            this.removeChipIdFromSelectedChipIds(id);\n        } else {\n            this.addChipIdToSelectedChipIds(id);\n        }\n    }\n\n    private removeChipIdFromSelectedChipIds(id: number | string): void {\n        this.selectedChipIds = this.selectedChipIds.filter(\n            (chipId) => chipId !== id,\n        );\n    }\n\n    private addChipIdToSelectedChipIds(id: number | string): void {\n        this.selectedChipIds = [...this.selectedChipIds, id];\n    }\n\n    private handleRemoveChip = (\n        event: LimelChipCustomEvent<string | number>,\n    ) => {\n        this.removeChip(event.detail);\n    };\n\n    private removeChip = (identifier: string | number) => {\n        const newValue = this.value.filter((chip) => {\n            return chip.id !== identifier;\n        });\n        this.change.emit(newValue);\n    };\n\n    private renderLeadingIcon() {\n        if (!this.leadingIcon) {\n            return;\n        }\n\n        return (\n            <i class=\"mdc-text-field__icon search-icon\">\n                <limel-icon name={this.leadingIcon} />\n            </i>\n        );\n    }\n\n    private renderClearAllChipsButton() {\n        if (this.disabled || this.readonly || !this.clearAllButton) {\n            return;\n        }\n\n        return (\n            <a\n                href=\"\"\n                onClick={this.handleDeleteAllIconClick}\n                class=\"mdc-text-field__icon clear-all-button\"\n                tabindex=\"0\"\n                role=\"button\"\n                title={this.clearAllChipsLabel()}\n                aria-label={this.clearAllChipsLabel()}\n            />\n        );\n    }\n\n    private clearAllChipsLabel = (): string => {\n        return translate.get('chip-set.clear-all', this.language);\n    };\n\n    private handleDeleteAllIconClick(event: Event) {\n        event.preventDefault();\n        this.change.emit([]);\n    }\n\n    private renderDelimiter() {\n        if (!this.delimiter) {\n            return;\n        }\n\n        return <div class=\"delimiter\">{this.delimiter}</div>;\n    }\n\n    private triggerIconColorWarning(value: Chip[]) {\n        for (const chip of value) {\n            if (\n                chip.icon &&\n                (chip.iconFillColor ||\n                    chip.iconBackgroundColor ||\n                    chip.iconTitle)\n            ) {\n                /* eslint-disable-next-line no-console */\n                console.warn(\n                    \"The `iconFillColor`, `iconBackgroundColor`, and `iconTitle` props are deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name', `iconBackgroundColor: 'color-name', and `iconTitle: 'title'`, write `icon { name: 'icon-name', color: 'color-name', backgroundColor: 'color-name', title: 'title' }`.\",\n                );\n            }\n        }\n    }\n}\n"],"version":3}

package/dist/esm/limel-collapsible-section.entry.js

@@ -3,7 +3,7 @@ import { d as dispatchResizeEvent } from './dispatch-resize-event-cd1d230c.js';
 import { m as makeEnterClickable, r as removeEnterClickable } from './make-enter-clickable-c2c6b518.js';
 import { c as createRandomString } from './random-string-812b1c35.js';
 
-const collapsibleSectionCss = "@charset \"UTF-8\";:host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}:host(limel-collapsible-section){--border-radius-of-header:0.75rem;display:block}:host([hidden]){display:none}.open-close-toggle{all:unset;position:absolute;inset:0;width:100%;transition:background-color 0.4s ease, border-radius 0.1s ease;cursor:pointer;z-index:-1;background-color:var(--closed-header-background-color, rgb(var(--contrast-200)));border-radius:var(--border-radius-of-header)}.open-close-toggle:focus{outline:none}.open-close-toggle:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.open-close-toggle:hover{background-color:var(--open-header-background-color, rgb(var(--contrast-300)))}section.open .open-close-toggle{background-color:var(--open-header-background-color, rgb(var(--contrast-100)));border-radius:var(--border-radius-of-header) var(--border-radius-of-header) 0 0}section.open .open-close-toggle:hover{background-color:var(--open-header-background-color, rgb(var(--contrast-300)))}.title,.divider-line,.expand-icon{pointer-events:none}header{isolation:isolate;position:relative;align-items:center;display:flex;justify-content:space-between;padding-left:0.5rem;padding-right:0.5rem;height:3rem}.title{font-size:1rem;font-weight:300;color:var(--mdc-theme-on-surface);justify-self:flex-start;user-select:none;padding-right:0.5rem;height:auto;max-height:3rem;line-height:1.2rem;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.divider-line{transition:opacity 0.3s ease 0.3s;flex-grow:1;height:0.125rem;border-radius:1rem;background-color:var(--header-stroke-color, rgb(var(--contrast-900)));margin-right:0.5rem;opacity:0}section.open .divider-line{opacity:0.16}.actions{justify-self:flex-end;flex-shrink:0}.body{background-color:var(--body-background-color, var(--contrast-100));padding-left:var(--body-padding, 1.25rem);padding-right:var(--body-padding, 1.25rem);border-radius:0 0 var(--border-radius-of-header) var(--border-radius-of-header)}.body{--limel-cs-opacity-transition-speed:0.1s;--limel-cs-opacity-transition-delay:0s;--limel-cs-grid-template-rows-transition-speed:0.3s;transition:grid-template-rows var(--limel-cs-grid-template-rows-transition-speed) cubic-bezier(1, 0.09, 0, 0.89);display:grid;grid-template-rows:0fr}.body slot{transition:opacity var(--limel-cs-opacity-transition-speed) ease var(--limel-cs-opacity-transition-delay);display:block;overflow:hidden;opacity:0}section.open .body{--limel-cs-opacity-transition-speed:0.4s;--limel-cs-opacity-transition-delay:0.3s;--limel-cs-grid-template-rows-transition-speed:0.46s;grid-template-rows:1fr}section.open .body slot{opacity:1}header:hover+.body{will-change:grid-template-rows}header:hover+.body slot{will-change:opacity}.expand-icon{position:relative;height:1.875rem;margin:0 1rem 0 0.5rem;width:0.75rem;flex-shrink:0}.line{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:100%;border-radius:1rem;height:0.125rem;background-color:var(--header-stroke-color, rgb(var(--contrast-900)))}.line:first-of-type,.line:last-of-type{transition:opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s}.line:first-of-type{transform:rotate3d(0, 0, 1, 90deg)}.line:last-of-type{transform:rotate3d(0, 0, 1, -90deg)}.line:nth-of-type(2),.line:nth-of-type(3){transition:opacity 0.2s ease, transform 0.18s ease}section.open .line:first-of-type,section.open .line:last-of-type{transition:opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s}section.open .line:first-of-type{transform:rotate3d(0, 0, 1, 0deg)}section.open .line:last-of-type{transform:rotate3d(0, 0, 1, 0deg)}section.open .line:nth-of-type(2),section.open .line:nth-of-type(3){transition:opacity 1s ease, transform 0.4s ease}section.open .line:nth-of-type(2){transform:translate3d(0, -1rem, 0);opacity:0}section.open .line:nth-of-type(3){transform:translate3d(0, 1rem, 0);opacity:0}.open-close-toggle:hover+.expand-icon .line:first-of-type{transform:rotate3d(0, 0, 1, 0deg)}.open-close-toggle:hover+.expand-icon .line:last-of-type{transform:rotate3d(0, 0, 1, 0deg)}.open-close-toggle:hover+.expand-icon .line:nth-of-type(2),.open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transition:opacity 0.5s ease 0.4s, transform 0.7s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s}.open-close-toggle:hover+.expand-icon .line:nth-of-type(2){transform:translate3d(0, -0.5rem, 0);opacity:0.4}.open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transform:translate3d(0, 0.5rem, 0);opacity:0.4}section.open .open-close-toggle:hover+.expand-icon .line:first-of-type,section.open .open-close-toggle:hover+.expand-icon .line:last-of-type{transition:opacity 0.2s ease 0.4s, transform 0.4s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s}section.open .open-close-toggle:hover+.expand-icon .line:first-of-type{transform:rotate3d(0, 0, 1, 45deg)}section.open .open-close-toggle:hover+.expand-icon .line:last-of-type{transform:rotate3d(0, 0, 1, -45deg)}section.open .open-close-toggle:hover+.expand-icon .line:nth-of-type(2){transform:translate3d(0, -1rem, 0);opacity:0}section.open .open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transform:translate3d(0, 1rem, 0);opacity:0}";
+const collapsibleSectionCss = "@charset \"UTF-8\";:host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}:host(limel-collapsible-section){--border-radius-of-header:0.75rem;display:block}:host([hidden]){display:none}.open-close-toggle{all:unset;position:absolute;inset:0;width:100%;transition:background-color 0.4s ease, border-radius 0.1s ease;cursor:pointer;z-index:-1;background-color:var(--closed-header-background-color, rgb(var(--contrast-200)));border-radius:var(--border-radius-of-header)}.open-close-toggle:focus{outline:none}.open-close-toggle:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.open-close-toggle:hover{background-color:var(--open-header-background-color, rgb(var(--contrast-300)))}section.open .open-close-toggle{background-color:var(--open-header-background-color, rgb(var(--contrast-100)));border-radius:var(--border-radius-of-header) var(--border-radius-of-header) 0 0}section.open .open-close-toggle:hover{background-color:var(--open-header-background-color, rgb(var(--contrast-300)))}.title,.divider-line,.expand-icon{pointer-events:none}header{isolation:isolate;position:relative;align-items:center;display:flex;justify-content:space-between;padding-left:0.5rem;height:2.5rem}.title{font-size:1rem;font-weight:300;color:var(--mdc-theme-on-surface);justify-self:flex-start;user-select:none;padding-right:0.5rem;height:auto;max-height:3rem;line-height:1.2rem;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.divider-line{transition:opacity 0.3s ease 0.3s;flex-grow:1;height:0.125rem;border-radius:1rem;background-color:var(--header-stroke-color, rgb(var(--contrast-900)));margin-right:0.5rem;opacity:0}section.open .divider-line{opacity:0.16}.actions{justify-self:flex-end;flex-shrink:0}.body{background-color:var(--body-background-color, var(--contrast-100));padding-left:var(--body-padding, 1.25rem);padding-right:var(--body-padding, 1.25rem);border-radius:0 0 var(--border-radius-of-header) var(--border-radius-of-header)}.body{--limel-cs-opacity-transition-speed:0.1s;--limel-cs-opacity-transition-delay:0s;--limel-cs-grid-template-rows-transition-speed:0.3s;transition:grid-template-rows var(--limel-cs-grid-template-rows-transition-speed) cubic-bezier(1, 0.09, 0, 0.89);display:grid;grid-template-rows:0fr}.body slot{transition:opacity var(--limel-cs-opacity-transition-speed) ease var(--limel-cs-opacity-transition-delay);display:block;overflow:hidden;opacity:0}section.open .body{--limel-cs-opacity-transition-speed:0.4s;--limel-cs-opacity-transition-delay:0.3s;--limel-cs-grid-template-rows-transition-speed:0.46s;grid-template-rows:1fr}section.open .body slot{opacity:1}header:hover+.body{will-change:grid-template-rows}header:hover+.body slot{will-change:opacity}.expand-icon{position:relative;height:1.875rem;margin:0 1rem 0 0.5rem;width:0.75rem;flex-shrink:0}.line{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:100%;border-radius:1rem;height:0.125rem;background-color:var(--header-stroke-color, rgb(var(--contrast-900)))}.line:first-of-type,.line:last-of-type{transition:opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s}.line:first-of-type{transform:rotate3d(0, 0, 1, 90deg)}.line:last-of-type{transform:rotate3d(0, 0, 1, -90deg)}.line:nth-of-type(2),.line:nth-of-type(3){transition:opacity 0.2s ease, transform 0.18s ease}section.open .line:first-of-type,section.open .line:last-of-type{transition:opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s}section.open .line:first-of-type{transform:rotate3d(0, 0, 1, 0deg)}section.open .line:last-of-type{transform:rotate3d(0, 0, 1, 0deg)}section.open .line:nth-of-type(2),section.open .line:nth-of-type(3){transition:opacity 1s ease, transform 0.4s ease}section.open .line:nth-of-type(2){transform:translate3d(0, -1rem, 0);opacity:0}section.open .line:nth-of-type(3){transform:translate3d(0, 1rem, 0);opacity:0}.open-close-toggle:hover+.expand-icon .line:first-of-type{transform:rotate3d(0, 0, 1, 0deg)}.open-close-toggle:hover+.expand-icon .line:last-of-type{transform:rotate3d(0, 0, 1, 0deg)}.open-close-toggle:hover+.expand-icon .line:nth-of-type(2),.open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transition:opacity 0.5s ease 0.4s, transform 0.7s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s}.open-close-toggle:hover+.expand-icon .line:nth-of-type(2){transform:translate3d(0, -0.5rem, 0);opacity:0.4}.open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transform:translate3d(0, 0.5rem, 0);opacity:0.4}section.open .open-close-toggle:hover+.expand-icon .line:first-of-type,section.open .open-close-toggle:hover+.expand-icon .line:last-of-type{transition:opacity 0.2s ease 0.4s, transform 0.4s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s}section.open .open-close-toggle:hover+.expand-icon .line:first-of-type{transform:rotate3d(0, 0, 1, 45deg)}section.open .open-close-toggle:hover+.expand-icon .line:last-of-type{transform:rotate3d(0, 0, 1, -45deg)}section.open .open-close-toggle:hover+.expand-icon .line:nth-of-type(2){transform:translate3d(0, -1rem, 0);opacity:0}section.open .open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transform:translate3d(0, 1rem, 0);opacity:0}";
 
 const CollapsibleSection = class {
   constructor(hostRef) {

package/dist/esm/limel-collapsible-section.entry.js.map

@@ -1 +1 @@
-{"file":"limel-collapsible-section.entry.js","mappings":";;;;;AAAA,MAAM,qBAAqB,GAAG,uoMAAuoM;;MC6BxpM,kBAAkB;;;;;;IAwCnB,WAAM,GAAG,kBAAkB,EAAE,CAAC;IAkD9B,YAAO,GAAG;MACd,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC5B,CAAC;IAEM,sBAAiB,GAAG;MACxB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;MAE3B,IAAI,IAAI,CAAC,MAAM,EAAE;QACb,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;QACjB,MAAM,iBAAiB,GAAG,GAAG,CAAC;QAC9B,UAAU,CAAC,mBAAmB,EAAE,iBAAiB,CAAC,CAAC;OACtD;WAAM;QACH,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;OACrB;KACJ,CAAC;IAEM,kBAAa,GAAG;MACpB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;QACf,OAAO;OACV;MAED,QACI,WAAK,KAAK,EAAC,SAAS,IACf,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,kBAAkB,CAAC,CACxC,EACR;KACL,CAAC;IAEM,uBAAkB,GAAG,CAAC,MAAc;MACxC,QACI,yBACI,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,GACzC,EACJ;KACL,CAAC;IAEM,sBAAiB,GAAG,CAAC,MAAc,KAAK,CAAC,KAAiB;MAC9D,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAC5B,CAAC;kBA/HuB,KAAK;;;;EAqCvB,kBAAkB;IACrB,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAC7C,oBAAoB,CACR,CAAC;IAEjB,kBAAkB,CAAC,MAAM,CAAC,CAAC;GAC9B;EAEM,oBAAoB;IACvB,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAC7C,oBAAoB,CACR,CAAC;IAEjB,oBAAoB,CAAC,MAAM,CAAC,CAAC;GAChC;EAEM,MAAM;IACT,QACI,eAAS,KAAK,EAAE,GAAG,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,EAAE,EAAE,IAC1C,kBACI,cACI,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,mBACN,IAAI,CAAC,MAAM,GAC5B,EACF,WAAK,KAAK,EAAC,aAAa,IACpB,WAAK,KAAK,EAAC,MAAM,GAAG,EACpB,WAAK,KAAK,EAAC,MAAM,GAAG,EACpB,WAAK,KAAK,EAAC,MAAM,GAAG,EACpB,WAAK,KAAK,EAAC,MAAM,GAAG,CAClB,EACN,UAAI,KAAK,EAAC,gDAAgD,IACrD,IAAI,CAAC,MAAM,CACX,EACL,WAAK,KAAK,EAAC,cAAc,GAAG,EAC3B,IAAI,CAAC,aAAa,EAAE,CAChB,EACT,WACI,KAAK,EAAC,MAAM,iBACC,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,EACjC,EAAE,EAAE,IAAI,CAAC,MAAM,IAEf,eAAQ,CACN,CACA,EACZ;GACL;;;;;;;","names":[],"sources":["./src/components/collapsible-section/collapsible-section.scss?tag=limel-collapsible-section&encapsulation=shadow","./src/components/collapsible-section/collapsible-section.tsx"],"sourcesContent":["@use '../../style/internal/lime-theme';\n@use '../../style/mixins';\n\n/**\n * @prop --closed-header-background-color: background color for header when closed\n * @prop --open-header-background-color: background color for header when open\n * @prop --header-stroke-color: color of the animated icons that visualize collapsed or normal states of the headers, as well as the divider line on headers\n * @prop --body-background-color: background color for body\n * @prop --body-padding: space around content of the body\n */\n\n:host(limel-collapsible-section) {\n    --border-radius-of-header: 0.75rem;\n    display: block;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n.open-close-toggle {\n    all: unset;\n    position: absolute;\n    inset: 0;\n    width: 100%; // for Firefox\n    @include mixins.visualize-keyboard-focus;\n    transition:\n        background-color 0.4s ease,\n        border-radius 0.1s ease;\n    cursor: pointer;\n    z-index: -1;\n\n    background-color: var(\n        --closed-header-background-color,\n        rgb(var(--contrast-200))\n    );\n    border-radius: var(--border-radius-of-header);\n\n    &:hover {\n        background-color: var(\n            --open-header-background-color,\n            rgb(var(--contrast-300))\n        );\n    }\n\n    section.open & {\n        background-color: var(\n            --open-header-background-color,\n            rgb(var(--contrast-100))\n        );\n        border-radius: var(--border-radius-of-header)\n            var(--border-radius-of-header) 0 0;\n        &:hover {\n            background-color: var(\n                --open-header-background-color,\n                rgb(var(--contrast-300))\n            );\n        }\n    }\n}\n\n.title,\n.divider-line,\n.expand-icon {\n    pointer-events: none;\n}\n\nheader {\n    isolation: isolate;\n    position: relative;\n\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n\n    padding-left: 0.5rem;\n    padding-right: 0.5rem;\n    height: 3rem;\n}\n\n.title {\n    font-size: 1rem;\n    font-weight: 300;\n    color: var(--mdc-theme-on-surface);\n\n    justify-self: flex-start;\n\n    user-select: none; // mostly to improve experience on Android, where tapping on sections selects the text too\n\n    padding-right: 0.5rem;\n\n    // Below tries to render text in two lines,\n    // and then truncate if there is no more space\n    height: auto;\n    max-height: 3rem;\n    line-height: 1.2rem;\n    white-space: normal;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.divider-line {\n    transition: opacity 0.3s ease 0.3s;\n    flex-grow: 1;\n    height: 0.125rem;\n    border-radius: 1rem;\n    background-color: var(--header-stroke-color, rgb(var(--contrast-900)));\n    margin-right: 0.5rem;\n\n    opacity: 0;\n\n    section.open & {\n        opacity: 0.16;\n    }\n}\n\n.actions {\n    justify-self: flex-end;\n    flex-shrink: 0;\n}\n\n.body {\n    background-color: var(--body-background-color, var(--contrast-100));\n    padding-left: var(--body-padding, 1.25rem);\n    padding-right: var(--body-padding, 1.25rem);\n    border-radius: 0 0 var(--border-radius-of-header)\n        var(--border-radius-of-header);\n}\n\n// This animates height of the body,\n// from `0` to `auto`\n.body {\n    // All below vars are for internal use only!\n    --limel-cs-opacity-transition-speed: 0.1s;\n    --limel-cs-opacity-transition-delay: 0s;\n    --limel-cs-grid-template-rows-transition-speed: 0.3s;\n    transition: grid-template-rows\n        var(--limel-cs-grid-template-rows-transition-speed)\n        cubic-bezier(1, 0.09, 0, 0.89);\n    display: grid;\n    grid-template-rows: 0fr;\n\n    slot {\n        transition: opacity var(--limel-cs-opacity-transition-speed) ease\n            var(--limel-cs-opacity-transition-delay);\n        display: block;\n        overflow: hidden;\n        opacity: 0;\n    }\n}\n\nsection.open {\n    .body {\n        --limel-cs-opacity-transition-speed: 0.4s;\n        --limel-cs-opacity-transition-delay: 0.3s;\n        --limel-cs-grid-template-rows-transition-speed: 0.46s;\n        grid-template-rows: 1fr;\n\n        slot {\n            opacity: 1;\n        }\n    }\n}\n\nheader:hover {\n    + .body {\n        will-change: grid-template-rows;\n\n        slot {\n            will-change: opacity;\n        }\n    }\n}\n\n// End: animating height\n\n@import './partial-styles/expand-icon.scss';\n","import {\n    Component,\n    Event,\n    Element,\n    EventEmitter,\n    h,\n    Prop,\n} from '@stencil/core';\nimport { dispatchResizeEvent } from '../../util/dispatch-resize-event';\nimport { Action } from './action';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from 'src/util/make-enter-clickable';\nimport { createRandomString } from 'src/util/random-string';\n\n/**\n * @slot - Content to put inside the collapsible section\n * @exampleComponent limel-example-collapsible-section\n * @exampleComponent limel-example-collapsible-section-actions\n * @exampleComponent limel-example-collapsible-section-css-props\n * @exampleComponent limel-example-collapsible-section-external-control\n * @exampleComponent limel-example-collapsible-section-with-slider\n */\n@Component({\n    tag: 'limel-collapsible-section',\n    shadow: true,\n    styleUrl: 'collapsible-section.scss',\n})\nexport class CollapsibleSection {\n    /**\n     * `true` if the section is expanded, `false` if collapsed.\n     */\n    @Prop({ mutable: true, reflect: true })\n    public isOpen: boolean = false;\n\n    /**\n     * Text to display in the header of the section\n     */\n    @Prop({ reflect: true })\n    public header: string;\n\n    /**\n     * Actions to place to the far right inside the header\n     */\n    @Prop()\n    public actions: Action[];\n\n    /**\n     * Emitted when the section is expanded\n     */\n    @Event()\n    private open: EventEmitter<void>;\n\n    /**\n     * Emitted when the section is collapsed\n     */\n    @Event()\n    private close: EventEmitter<void>;\n\n    /**\n     * Emitted when an action is clicked inside the header\n     */\n    @Event()\n    private action: EventEmitter<Action>;\n\n    @Element()\n    private host: HTMLElement;\n\n    private bodyId = createRandomString();\n\n    public componentDidRender() {\n        const button = this.host.shadowRoot.querySelector(\n            '.open-close-toggle',\n        ) as HTMLElement;\n\n        makeEnterClickable(button);\n    }\n\n    public disconnectedCallback() {\n        const button = this.host.shadowRoot.querySelector(\n            '.open-close-toggle',\n        ) as HTMLElement;\n\n        removeEnterClickable(button);\n    }\n\n    public render() {\n        return (\n            <section class={`${this.isOpen ? 'open' : ''}`}>\n                <header>\n                    <button\n                        class=\"open-close-toggle\"\n                        onClick={this.onClick}\n                        aria-controls={this.bodyId}\n                    />\n                    <div class=\"expand-icon\">\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                    </div>\n                    <h2 class=\"title mdc-typography mdc-typography--headline2\">\n                        {this.header}\n                    </h2>\n                    <div class=\"divider-line\" />\n                    {this.renderActions()}\n                </header>\n                <div\n                    class=\"body\"\n                    aria-hidden={String(!this.isOpen)}\n                    id={this.bodyId}\n                >\n                    <slot />\n                </div>\n            </section>\n        );\n    }\n\n    private onClick = () => {\n        this.handleInteraction();\n    };\n\n    private handleInteraction = () => {\n        this.isOpen = !this.isOpen;\n\n        if (this.isOpen) {\n            this.open.emit();\n            const waitForUiToRender = 100;\n            setTimeout(dispatchResizeEvent, waitForUiToRender);\n        } else {\n            this.close.emit();\n        }\n    };\n\n    private renderActions = () => {\n        if (!this.actions) {\n            return;\n        }\n\n        return (\n            <div class=\"actions\">\n                {this.actions.map(this.renderActionButton)}\n            </div>\n        );\n    };\n\n    private renderActionButton = (action: Action) => {\n        return (\n            <limel-icon-button\n                icon={action.icon}\n                label={action.label}\n                disabled={action.disabled}\n                onClick={this.handleActionClick(action)}\n            />\n        );\n    };\n\n    private handleActionClick = (action: Action) => (event: MouseEvent) => {\n        event.stopPropagation();\n        this.action.emit(action);\n    };\n}\n"],"version":3}
+{"file":"limel-collapsible-section.entry.js","mappings":";;;;;AAAA,MAAM,qBAAqB,GAAG,onMAAonM;;MC6BroM,kBAAkB;;;;;;IAwCnB,WAAM,GAAG,kBAAkB,EAAE,CAAC;IAkD9B,YAAO,GAAG;MACd,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC5B,CAAC;IAEM,sBAAiB,GAAG;MACxB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;MAE3B,IAAI,IAAI,CAAC,MAAM,EAAE;QACb,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;QACjB,MAAM,iBAAiB,GAAG,GAAG,CAAC;QAC9B,UAAU,CAAC,mBAAmB,EAAE,iBAAiB,CAAC,CAAC;OACtD;WAAM;QACH,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;OACrB;KACJ,CAAC;IAEM,kBAAa,GAAG;MACpB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;QACf,OAAO;OACV;MAED,QACI,WAAK,KAAK,EAAC,SAAS,IACf,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,kBAAkB,CAAC,CACxC,EACR;KACL,CAAC;IAEM,uBAAkB,GAAG,CAAC,MAAc;MACxC,QACI,yBACI,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,GACzC,EACJ;KACL,CAAC;IAEM,sBAAiB,GAAG,CAAC,MAAc,KAAK,CAAC,KAAiB;MAC9D,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAC5B,CAAC;kBA/HuB,KAAK;;;;EAqCvB,kBAAkB;IACrB,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAC7C,oBAAoB,CACR,CAAC;IAEjB,kBAAkB,CAAC,MAAM,CAAC,CAAC;GAC9B;EAEM,oBAAoB;IACvB,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAC7C,oBAAoB,CACR,CAAC;IAEjB,oBAAoB,CAAC,MAAM,CAAC,CAAC;GAChC;EAEM,MAAM;IACT,QACI,eAAS,KAAK,EAAE,GAAG,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,EAAE,EAAE,IAC1C,kBACI,cACI,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,mBACN,IAAI,CAAC,MAAM,GAC5B,EACF,WAAK,KAAK,EAAC,aAAa,IACpB,WAAK,KAAK,EAAC,MAAM,GAAG,EACpB,WAAK,KAAK,EAAC,MAAM,GAAG,EACpB,WAAK,KAAK,EAAC,MAAM,GAAG,EACpB,WAAK,KAAK,EAAC,MAAM,GAAG,CAClB,EACN,UAAI,KAAK,EAAC,gDAAgD,IACrD,IAAI,CAAC,MAAM,CACX,EACL,WAAK,KAAK,EAAC,cAAc,GAAG,EAC3B,IAAI,CAAC,aAAa,EAAE,CAChB,EACT,WACI,KAAK,EAAC,MAAM,iBACC,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,EACjC,EAAE,EAAE,IAAI,CAAC,MAAM,IAEf,eAAQ,CACN,CACA,EACZ;GACL;;;;;;;","names":[],"sources":["./src/components/collapsible-section/collapsible-section.scss?tag=limel-collapsible-section&encapsulation=shadow","./src/components/collapsible-section/collapsible-section.tsx"],"sourcesContent":["@use '../../style/internal/lime-theme';\n@use '../../style/mixins';\n@use '../../style/internal/shared_input-select-picker';\n\n/**\n * @prop --closed-header-background-color: background color for header when closed\n * @prop --open-header-background-color: background color for header when open\n * @prop --header-stroke-color: color of the animated icons that visualize collapsed or normal states of the headers, as well as the divider line on headers\n * @prop --body-background-color: background color for body\n * @prop --body-padding: space around content of the body\n */\n\n:host(limel-collapsible-section) {\n    --border-radius-of-header: 0.75rem;\n    display: block;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n.open-close-toggle {\n    all: unset;\n    position: absolute;\n    inset: 0;\n    width: 100%; // for Firefox\n    @include mixins.visualize-keyboard-focus;\n    transition:\n        background-color 0.4s ease,\n        border-radius 0.1s ease;\n    cursor: pointer;\n    z-index: -1;\n\n    background-color: var(\n        --closed-header-background-color,\n        rgb(var(--contrast-200))\n    );\n    border-radius: var(--border-radius-of-header);\n\n    &:hover {\n        background-color: var(\n            --open-header-background-color,\n            rgb(var(--contrast-300))\n        );\n    }\n\n    section.open & {\n        background-color: var(\n            --open-header-background-color,\n            rgb(var(--contrast-100))\n        );\n        border-radius: var(--border-radius-of-header)\n            var(--border-radius-of-header) 0 0;\n        &:hover {\n            background-color: var(\n                --open-header-background-color,\n                rgb(var(--contrast-300))\n            );\n        }\n    }\n}\n\n.title,\n.divider-line,\n.expand-icon {\n    pointer-events: none;\n}\n\nheader {\n    isolation: isolate;\n    position: relative;\n\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n\n    padding-left: 0.5rem;\n    height: shared_input-select-picker.$height-of-mdc-text-field;\n}\n\n.title {\n    font-size: 1rem;\n    font-weight: 300;\n    color: var(--mdc-theme-on-surface);\n\n    justify-self: flex-start;\n\n    user-select: none; // mostly to improve experience on Android, where tapping on sections selects the text too\n\n    padding-right: 0.5rem;\n\n    // Below tries to render text in two lines,\n    // and then truncate if there is no more space\n    height: auto;\n    max-height: 3rem;\n    line-height: 1.2rem;\n    white-space: normal;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.divider-line {\n    transition: opacity 0.3s ease 0.3s;\n    flex-grow: 1;\n    height: 0.125rem;\n    border-radius: 1rem;\n    background-color: var(--header-stroke-color, rgb(var(--contrast-900)));\n    margin-right: 0.5rem;\n\n    opacity: 0;\n\n    section.open & {\n        opacity: 0.16;\n    }\n}\n\n.actions {\n    justify-self: flex-end;\n    flex-shrink: 0;\n}\n\n.body {\n    background-color: var(--body-background-color, var(--contrast-100));\n    padding-left: var(--body-padding, 1.25rem);\n    padding-right: var(--body-padding, 1.25rem);\n    border-radius: 0 0 var(--border-radius-of-header)\n        var(--border-radius-of-header);\n}\n\n// This animates height of the body,\n// from `0` to `auto`\n.body {\n    // All below vars are for internal use only!\n    --limel-cs-opacity-transition-speed: 0.1s;\n    --limel-cs-opacity-transition-delay: 0s;\n    --limel-cs-grid-template-rows-transition-speed: 0.3s;\n    transition: grid-template-rows\n        var(--limel-cs-grid-template-rows-transition-speed)\n        cubic-bezier(1, 0.09, 0, 0.89);\n    display: grid;\n    grid-template-rows: 0fr;\n\n    slot {\n        transition: opacity var(--limel-cs-opacity-transition-speed) ease\n            var(--limel-cs-opacity-transition-delay);\n        display: block;\n        overflow: hidden;\n        opacity: 0;\n    }\n}\n\nsection.open {\n    .body {\n        --limel-cs-opacity-transition-speed: 0.4s;\n        --limel-cs-opacity-transition-delay: 0.3s;\n        --limel-cs-grid-template-rows-transition-speed: 0.46s;\n        grid-template-rows: 1fr;\n\n        slot {\n            opacity: 1;\n        }\n    }\n}\n\nheader:hover {\n    + .body {\n        will-change: grid-template-rows;\n\n        slot {\n            will-change: opacity;\n        }\n    }\n}\n\n// End: animating height\n\n@import './partial-styles/expand-icon.scss';\n","import {\n    Component,\n    Event,\n    Element,\n    EventEmitter,\n    h,\n    Prop,\n} from '@stencil/core';\nimport { dispatchResizeEvent } from '../../util/dispatch-resize-event';\nimport { Action } from './action';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from 'src/util/make-enter-clickable';\nimport { createRandomString } from 'src/util/random-string';\n\n/**\n * @slot - Content to put inside the collapsible section\n * @exampleComponent limel-example-collapsible-section\n * @exampleComponent limel-example-collapsible-section-actions\n * @exampleComponent limel-example-collapsible-section-css-props\n * @exampleComponent limel-example-collapsible-section-external-control\n * @exampleComponent limel-example-collapsible-section-with-slider\n */\n@Component({\n    tag: 'limel-collapsible-section',\n    shadow: true,\n    styleUrl: 'collapsible-section.scss',\n})\nexport class CollapsibleSection {\n    /**\n     * `true` if the section is expanded, `false` if collapsed.\n     */\n    @Prop({ mutable: true, reflect: true })\n    public isOpen: boolean = false;\n\n    /**\n     * Text to display in the header of the section\n     */\n    @Prop({ reflect: true })\n    public header: string;\n\n    /**\n     * Actions to place to the far right inside the header\n     */\n    @Prop()\n    public actions: Action[];\n\n    /**\n     * Emitted when the section is expanded\n     */\n    @Event()\n    private open: EventEmitter<void>;\n\n    /**\n     * Emitted when the section is collapsed\n     */\n    @Event()\n    private close: EventEmitter<void>;\n\n    /**\n     * Emitted when an action is clicked inside the header\n     */\n    @Event()\n    private action: EventEmitter<Action>;\n\n    @Element()\n    private host: HTMLElement;\n\n    private bodyId = createRandomString();\n\n    public componentDidRender() {\n        const button = this.host.shadowRoot.querySelector(\n            '.open-close-toggle',\n        ) as HTMLElement;\n\n        makeEnterClickable(button);\n    }\n\n    public disconnectedCallback() {\n        const button = this.host.shadowRoot.querySelector(\n            '.open-close-toggle',\n        ) as HTMLElement;\n\n        removeEnterClickable(button);\n    }\n\n    public render() {\n        return (\n            <section class={`${this.isOpen ? 'open' : ''}`}>\n                <header>\n                    <button\n                        class=\"open-close-toggle\"\n                        onClick={this.onClick}\n                        aria-controls={this.bodyId}\n                    />\n                    <div class=\"expand-icon\">\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                    </div>\n                    <h2 class=\"title mdc-typography mdc-typography--headline2\">\n                        {this.header}\n                    </h2>\n                    <div class=\"divider-line\" />\n                    {this.renderActions()}\n                </header>\n                <div\n                    class=\"body\"\n                    aria-hidden={String(!this.isOpen)}\n                    id={this.bodyId}\n                >\n                    <slot />\n                </div>\n            </section>\n        );\n    }\n\n    private onClick = () => {\n        this.handleInteraction();\n    };\n\n    private handleInteraction = () => {\n        this.isOpen = !this.isOpen;\n\n        if (this.isOpen) {\n            this.open.emit();\n            const waitForUiToRender = 100;\n            setTimeout(dispatchResizeEvent, waitForUiToRender);\n        } else {\n            this.close.emit();\n        }\n    };\n\n    private renderActions = () => {\n        if (!this.actions) {\n            return;\n        }\n\n        return (\n            <div class=\"actions\">\n                {this.actions.map(this.renderActionButton)}\n            </div>\n        );\n    };\n\n    private renderActionButton = (action: Action) => {\n        return (\n            <limel-icon-button\n                icon={action.icon}\n                label={action.label}\n                disabled={action.disabled}\n                onClick={this.handleActionClick(action)}\n            />\n        );\n    };\n\n    private handleActionClick = (action: Action) => (event: MouseEvent) => {\n        event.stopPropagation();\n        this.action.emit(action);\n    };\n}\n"],"version":3}

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

@@ -30,7 +30,7 @@ function getCssColor(color, brightness) {
   return `rgb(var(${getColorName(color, brightness)}))`;
 }
 
-const colorPickerPaletteCss = "@charset \"UTF-8\";.color-palette{display:grid;gap:0.25rem;grid-auto-flow:column;margin:0.75rem auto 1.25rem auto;padding:1.25rem 0.75rem;background-color:rgb(var(--kompendium-contrast-300));border-radius:0.1875rem}.brightness-label,.swatch{display:flex;align-items:center;position:relative}.swatch{transition:border-radius 0.2s ease;border-radius:3px;justify-content:center;color:rgba(var(--kompendium-color-white), 0.4);font-size:1.25rem;line-height:99%}.swatch:after{content:\"\";display:block;padding-top:100%}.swatch.hue{font-family:\"Source Code Pro\", monospace;font-size:0.75rem;position:relative;color:rgb(var(--kompendium-contrast-900));padding-top:0.5rem;writing-mode:vertical-lr;justify-content:left}.brightness-label{font-family:\"Source Code Pro\", monospace;font-size:0.75rem;color:rgb(var(--kompendium-contrast-900));justify-content:start}.brand-colors-tips{transition:opacity 0.2s ease 0.4s;opacity:0;font-size:0.875rem;padding-left:2.75rem;margin-bottom:2.5rem}.brand-colors .brand-colors-tips{opacity:1}@media (prefers-color-scheme: light){.brand-colors .--color-glaucous-default,.brand-colors .--color-gray-dark{border-radius:50%}}@media (prefers-color-scheme: dark){.brand-colors .--color-red-light,.brand-colors .--color-magenta-default,.brand-colors .--color-sky-light,.brand-colors .--color-teal-light,.brand-colors .--color-green-light,.brand-colors .--color-amber-light,.brand-colors .--color-amber-default,.brand-colors .--color-coral-light,.brand-colors .--color-gray-light{border-radius:50%}}.--color-red-lighter{background-color:rgb(var(--color-red-lighter))}.--color-red-light{background-color:rgb(var(--color-red-light))}.--color-red-default{background-color:rgb(var(--color-red-default))}.--color-red-dark{background-color:rgb(var(--color-red-dark))}.--color-red-darker{background-color:rgb(var(--color-red-darker))}.--color-pink-lighter{background-color:rgb(var(--color-pink-lighter))}.--color-pink-light{background-color:rgb(var(--color-pink-light))}.--color-pink-default{background-color:rgb(var(--color-pink-default))}.--color-pink-dark{background-color:rgb(var(--color-pink-dark))}.--color-pink-darker{background-color:rgb(var(--color-pink-darker))}.--color-magenta-lighter{background-color:rgb(var(--color-magenta-lighter))}.--color-magenta-light{background-color:rgb(var(--color-magenta-light))}.--color-magenta-default{background-color:rgb(var(--color-magenta-default))}.--color-magenta-dark{background-color:rgb(var(--color-magenta-dark))}.--color-magenta-darker{background-color:rgb(var(--color-magenta-darker))}.--color-purple-lighter{background-color:rgb(var(--color-purple-lighter))}.--color-purple-light{background-color:rgb(var(--color-purple-light))}.--color-purple-default{background-color:rgb(var(--color-purple-default))}.--color-purple-dark{background-color:rgb(var(--color-purple-dark))}.--color-purple-darker{background-color:rgb(var(--color-purple-darker))}.--color-violet-lighter{background-color:rgb(var(--color-violet-lighter))}.--color-violet-light{background-color:rgb(var(--color-violet-light))}.--color-violet-default{background-color:rgb(var(--color-violet-default))}.--color-violet-dark{background-color:rgb(var(--color-violet-dark))}.--color-violet-darker{background-color:rgb(var(--color-violet-darker))}.--color-indigo-lighter{background-color:rgb(var(--color-indigo-lighter))}.--color-indigo-light{background-color:rgb(var(--color-indigo-light))}.--color-indigo-default{background-color:rgb(var(--color-indigo-default))}.--color-indigo-dark{background-color:rgb(var(--color-indigo-dark))}.--color-indigo-darker{background-color:rgb(var(--color-indigo-darker))}.--color-blue-lighter{background-color:rgb(var(--color-blue-lighter))}.--color-blue-light{background-color:rgb(var(--color-blue-light))}.--color-blue-default{background-color:rgb(var(--color-blue-default))}.--color-blue-dark{background-color:rgb(var(--color-blue-dark))}.--color-blue-darker{background-color:rgb(var(--color-blue-darker))}.--color-sky-lighter{background-color:rgb(var(--color-sky-lighter))}.--color-sky-light{background-color:rgb(var(--color-sky-light))}.--color-sky-default{background-color:rgb(var(--color-sky-default))}.--color-sky-dark{background-color:rgb(var(--color-sky-dark))}.--color-sky-darker{background-color:rgb(var(--color-sky-darker))}.--color-cyan-lighter{background-color:rgb(var(--color-cyan-lighter))}.--color-cyan-light{background-color:rgb(var(--color-cyan-light))}.--color-cyan-default{background-color:rgb(var(--color-cyan-default))}.--color-cyan-dark{background-color:rgb(var(--color-cyan-dark))}.--color-cyan-darker{background-color:rgb(var(--color-cyan-darker))}.--color-teal-lighter{background-color:rgb(var(--color-teal-lighter))}.--color-teal-light{background-color:rgb(var(--color-teal-light))}.--color-teal-default{background-color:rgb(var(--color-teal-default))}.--color-teal-dark{background-color:rgb(var(--color-teal-dark))}.--color-teal-darker{background-color:rgb(var(--color-teal-darker))}.--color-green-lighter{background-color:rgb(var(--color-green-lighter))}.--color-green-light{background-color:rgb(var(--color-green-light))}.--color-green-default{background-color:rgb(var(--color-green-default))}.--color-green-dark{background-color:rgb(var(--color-green-dark))}.--color-green-darker{background-color:rgb(var(--color-green-darker))}.--color-lime-lighter{background-color:rgb(var(--color-lime-lighter))}.--color-lime-light{background-color:rgb(var(--color-lime-light))}.--color-lime-default{background-color:rgb(var(--color-lime-default))}.--color-lime-dark{background-color:rgb(var(--color-lime-dark))}.--color-lime-darker{background-color:rgb(var(--color-lime-darker))}.--color-grass-lighter{background-color:rgb(var(--color-grass-lighter))}.--color-grass-light{background-color:rgb(var(--color-grass-light))}.--color-grass-default{background-color:rgb(var(--color-grass-default))}.--color-grass-dark{background-color:rgb(var(--color-grass-dark))}.--color-grass-darker{background-color:rgb(var(--color-grass-darker))}.--color-yellow-lighter{background-color:rgb(var(--color-yellow-lighter))}.--color-yellow-light{background-color:rgb(var(--color-yellow-light))}.--color-yellow-default{background-color:rgb(var(--color-yellow-default))}.--color-yellow-dark{background-color:rgb(var(--color-yellow-dark))}.--color-yellow-darker{background-color:rgb(var(--color-yellow-darker))}.--color-amber-lighter{background-color:rgb(var(--color-amber-lighter))}.--color-amber-light{background-color:rgb(var(--color-amber-light))}.--color-amber-default{background-color:rgb(var(--color-amber-default))}.--color-amber-dark{background-color:rgb(var(--color-amber-dark))}.--color-amber-darker{background-color:rgb(var(--color-amber-darker))}.--color-orange-lighter{background-color:rgb(var(--color-orange-lighter))}.--color-orange-light{background-color:rgb(var(--color-orange-light))}.--color-orange-default{background-color:rgb(var(--color-orange-default))}.--color-orange-dark{background-color:rgb(var(--color-orange-dark))}.--color-orange-darker{background-color:rgb(var(--color-orange-darker))}.--color-coral-lighter{background-color:rgb(var(--color-coral-lighter))}.--color-coral-light{background-color:rgb(var(--color-coral-light))}.--color-coral-default{background-color:rgb(var(--color-coral-default))}.--color-coral-dark{background-color:rgb(var(--color-coral-dark))}.--color-coral-darker{background-color:rgb(var(--color-coral-darker))}.--color-brown-lighter{background-color:rgb(var(--color-brown-lighter))}.--color-brown-light{background-color:rgb(var(--color-brown-light))}.--color-brown-default{background-color:rgb(var(--color-brown-default))}.--color-brown-dark{background-color:rgb(var(--color-brown-dark))}.--color-brown-darker{background-color:rgb(var(--color-brown-darker))}.--color-gray-lighter{background-color:rgb(var(--color-gray-lighter))}.--color-gray-light{background-color:rgb(var(--color-gray-light))}.--color-gray-default{background-color:rgb(var(--color-gray-default))}.--color-gray-dark{background-color:rgb(var(--color-gray-dark))}.--color-gray-darker{background-color:rgb(var(--color-gray-darker))}.--color-glaucous-lighter{background-color:rgb(var(--color-glaucous-lighter))}.--color-glaucous-light{background-color:rgb(var(--color-glaucous-light))}.--color-glaucous-default{background-color:rgb(var(--color-glaucous-default))}.--color-glaucous-dark{background-color:rgb(var(--color-glaucous-dark))}.--color-glaucous-darker{background-color:rgb(var(--color-glaucous-darker))}.--contrast-100{color:rgb(var(--contrast-900));background-color:rgb(var(--contrast-100))}.--contrast-200{color:rgb(var(--contrast-1000));background-color:rgb(var(--contrast-200))}.--contrast-300{color:rgb(var(--contrast-1100));background-color:rgb(var(--contrast-300))}.--contrast-400{color:rgb(var(--contrast-1200));background-color:rgb(var(--contrast-400))}.--contrast-500{color:rgb(var(--contrast-1300));background-color:rgb(var(--contrast-500))}.--contrast-600{color:rgb(var(--contrast-1400));background-color:rgb(var(--contrast-600))}.--contrast-700{color:rgb(var(--contrast-1500));background-color:rgb(var(--contrast-700))}.--contrast-800{color:rgb(var(--contrast-1600));background-color:rgb(var(--contrast-800))}.--contrast-900{color:rgb(var(--contrast-1700));background-color:rgb(var(--contrast-900))}.--contrast-1000{color:rgb(var(--contrast-100));background-color:rgb(var(--contrast-1000))}.--contrast-1100{color:rgb(var(--contrast-200));background-color:rgb(var(--contrast-1100))}.--contrast-1200{color:rgb(var(--contrast-300));background-color:rgb(var(--contrast-1200))}.--contrast-1300{color:rgb(var(--contrast-400));background-color:rgb(var(--contrast-1300))}.--contrast-1400{color:rgb(var(--contrast-500));background-color:rgb(var(--contrast-1400))}.--contrast-1500{color:rgb(var(--contrast-600));background-color:rgb(var(--contrast-1500))}.--contrast-1600{color:rgb(var(--contrast-700));background-color:rgb(var(--contrast-1600))}.--contrast-1700{color:rgb(var(--contrast-800));background-color:rgb(var(--contrast-1700))}.--color-white{color:rgb(var(--color-black));background-color:rgb(var(--color-white))}.--color-black{color:rgb(var(--color-white));background-color:rgb(var(--color-black))}.color-palette{grid-template-rows:repeat(5, 1fr) auto;grid-template-columns:repeat(20, 1fr) auto}.picker-trigger[style=\"--background:lime-magenta;\"]:after,.chosen-color-preview[style=\"--background:lime-magenta;\"]:after{background-color:var(--lime-magenta)}.picker-trigger[style=\"--background:lime-blue;\"]:after,.chosen-color-preview[style=\"--background:lime-blue;\"]:after{background-color:var(--lime-blue)}.picker-trigger[style=\"--background:lime-orange;\"]:after,.chosen-color-preview[style=\"--background:lime-orange;\"]:after{background-color:var(--lime-orange)}.picker-trigger[style=\"--background:lime-green;\"]:after,.chosen-color-preview[style=\"--background:lime-green;\"]:after{background-color:var(--lime-green)}.picker-trigger[style=\"--background:lime-red;\"]:after,.chosen-color-preview[style=\"--background:lime-red;\"]:after{background-color:var(--lime-red)}.picker-trigger[style=\"--background:lime-dark-blue;\"]:after,.chosen-color-preview[style=\"--background:lime-dark-blue;\"]:after{background-color:var(--lime-dark-blue)}.picker-trigger[style=\"--background:lime-turquoise;\"]:after,.chosen-color-preview[style=\"--background:lime-turquoise;\"]:after{background-color:var(--lime-turquoise)}.picker-trigger[style=\"--background:lime-yellow;\"]:after,.chosen-color-preview[style=\"--background:lime-yellow;\"]:after{background-color:var(--lime-yellow)}.picker-trigger[style=\"--background:lime-light-grey;\"]:after,.chosen-color-preview[style=\"--background:lime-light-grey;\"]:after{background-color:var(--lime-light-grey)}:host{--popover-surface-width:50rem;--color-picker-default-background:url(\"data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill='rgba(186,186,192,0.16)' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>\")}.color-picker{display:grid;gap:0.5rem;grid-template-columns:auto 1fr}.picker-trigger{all:unset;border-radius:0.5rem;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}.picker-trigger:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.picker-trigger:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.picker-trigger:focus{outline:none}.picker-trigger:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.picker-trigger:after{box-shadow:0 0 0 0.25rem rgb(var(--contrast-100)) inset}.chosen-color-preview,.picker-trigger{box-sizing:border-box;position:relative;isolation:isolate;width:3.5rem;height:3.5rem}.chosen-color-preview:before,.chosen-color-preview:after,.picker-trigger:before,.picker-trigger:after{content:\"\";position:absolute;inset:0;border-radius:inherit}.chosen-color-preview:before,.picker-trigger:before{background:var(--color-picker-default-background);background-size:0.5rem;z-index:0}.chosen-color-preview:after,.picker-trigger:after{background:var(--background);z-index:1}:host([readonly]) .picker-trigger:hover,:host([readonly]) .picker-trigger:active{cursor:default;box-shadow:var(--button-shadow-normal);transform:none}.chosen-color-input[readonly]{transform:translateY(1rem)}:host{border-radius:0.75rem;background-color:rgb(var(--kompendium-contrast-300))}.color-picker-palette{display:grid;gap:0.25rem;grid-auto-flow:column;grid-template-columns:repeat(20, 1fr);grid-template-rows:repeat(4, 1fr) auto;margin:1rem}.chosen-color-name{box-sizing:border-box;padding:1rem;display:grid;grid-template-columns:1fr auto;gap:0.5rem}.chosen-color-preview{border:1px solid rgba(var(--contrast-700), 0.65);border-radius:50%}.swatch:not(.hue){border:none;aspect-ratio:1;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer}.swatch:not(.hue):focus{outline:none}.swatch:not(.hue):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.swatch:not(.hue):hover{box-shadow:var(--button-shadow-hovered)}.swatch:not(.hue):active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.swatch:not(.hue):focus-visible{box-shadow:var(--shadow-depth-8-focused), 0 0 0 0.25rem rgb(var(--contrast-100)) inset}.swatch--selected{border-radius:50%}";
+const colorPickerPaletteCss = "@charset \"UTF-8\";.color-palette{display:grid;gap:0.25rem;grid-auto-flow:column;margin:0.75rem auto 1.25rem auto;padding:1.25rem 0.75rem;background-color:rgb(var(--kompendium-contrast-300));border-radius:0.1875rem}.brightness-label,.swatch{display:flex;align-items:center;position:relative}.swatch{transition:border-radius 0.2s ease;border-radius:3px;justify-content:center;color:rgba(var(--kompendium-color-white), 0.4);font-size:1.25rem;line-height:99%}.swatch:after{content:\"\";display:block;padding-top:100%}.swatch.hue{font-family:\"Source Code Pro\", monospace;font-size:0.75rem;position:relative;color:rgb(var(--kompendium-contrast-900));padding-top:0.5rem;writing-mode:vertical-lr;justify-content:left}.brightness-label{font-family:\"Source Code Pro\", monospace;font-size:0.75rem;color:rgb(var(--kompendium-contrast-900));justify-content:start}.brand-colors-tips{transition:opacity 0.2s ease 0.4s;opacity:0;font-size:0.875rem;padding-left:2.75rem;margin-bottom:2.5rem}.brand-colors .brand-colors-tips{opacity:1}@media (prefers-color-scheme: light){.brand-colors .--color-glaucous-default,.brand-colors .--color-gray-dark{border-radius:50%}}@media (prefers-color-scheme: dark){.brand-colors .--color-red-light,.brand-colors .--color-magenta-default,.brand-colors .--color-sky-light,.brand-colors .--color-teal-light,.brand-colors .--color-green-light,.brand-colors .--color-amber-light,.brand-colors .--color-amber-default,.brand-colors .--color-coral-light,.brand-colors .--color-gray-light{border-radius:50%}}.--color-red-lighter{background-color:rgb(var(--color-red-lighter))}.--color-red-light{background-color:rgb(var(--color-red-light))}.--color-red-default{background-color:rgb(var(--color-red-default))}.--color-red-dark{background-color:rgb(var(--color-red-dark))}.--color-red-darker{background-color:rgb(var(--color-red-darker))}.--color-pink-lighter{background-color:rgb(var(--color-pink-lighter))}.--color-pink-light{background-color:rgb(var(--color-pink-light))}.--color-pink-default{background-color:rgb(var(--color-pink-default))}.--color-pink-dark{background-color:rgb(var(--color-pink-dark))}.--color-pink-darker{background-color:rgb(var(--color-pink-darker))}.--color-magenta-lighter{background-color:rgb(var(--color-magenta-lighter))}.--color-magenta-light{background-color:rgb(var(--color-magenta-light))}.--color-magenta-default{background-color:rgb(var(--color-magenta-default))}.--color-magenta-dark{background-color:rgb(var(--color-magenta-dark))}.--color-magenta-darker{background-color:rgb(var(--color-magenta-darker))}.--color-purple-lighter{background-color:rgb(var(--color-purple-lighter))}.--color-purple-light{background-color:rgb(var(--color-purple-light))}.--color-purple-default{background-color:rgb(var(--color-purple-default))}.--color-purple-dark{background-color:rgb(var(--color-purple-dark))}.--color-purple-darker{background-color:rgb(var(--color-purple-darker))}.--color-violet-lighter{background-color:rgb(var(--color-violet-lighter))}.--color-violet-light{background-color:rgb(var(--color-violet-light))}.--color-violet-default{background-color:rgb(var(--color-violet-default))}.--color-violet-dark{background-color:rgb(var(--color-violet-dark))}.--color-violet-darker{background-color:rgb(var(--color-violet-darker))}.--color-indigo-lighter{background-color:rgb(var(--color-indigo-lighter))}.--color-indigo-light{background-color:rgb(var(--color-indigo-light))}.--color-indigo-default{background-color:rgb(var(--color-indigo-default))}.--color-indigo-dark{background-color:rgb(var(--color-indigo-dark))}.--color-indigo-darker{background-color:rgb(var(--color-indigo-darker))}.--color-blue-lighter{background-color:rgb(var(--color-blue-lighter))}.--color-blue-light{background-color:rgb(var(--color-blue-light))}.--color-blue-default{background-color:rgb(var(--color-blue-default))}.--color-blue-dark{background-color:rgb(var(--color-blue-dark))}.--color-blue-darker{background-color:rgb(var(--color-blue-darker))}.--color-sky-lighter{background-color:rgb(var(--color-sky-lighter))}.--color-sky-light{background-color:rgb(var(--color-sky-light))}.--color-sky-default{background-color:rgb(var(--color-sky-default))}.--color-sky-dark{background-color:rgb(var(--color-sky-dark))}.--color-sky-darker{background-color:rgb(var(--color-sky-darker))}.--color-cyan-lighter{background-color:rgb(var(--color-cyan-lighter))}.--color-cyan-light{background-color:rgb(var(--color-cyan-light))}.--color-cyan-default{background-color:rgb(var(--color-cyan-default))}.--color-cyan-dark{background-color:rgb(var(--color-cyan-dark))}.--color-cyan-darker{background-color:rgb(var(--color-cyan-darker))}.--color-teal-lighter{background-color:rgb(var(--color-teal-lighter))}.--color-teal-light{background-color:rgb(var(--color-teal-light))}.--color-teal-default{background-color:rgb(var(--color-teal-default))}.--color-teal-dark{background-color:rgb(var(--color-teal-dark))}.--color-teal-darker{background-color:rgb(var(--color-teal-darker))}.--color-green-lighter{background-color:rgb(var(--color-green-lighter))}.--color-green-light{background-color:rgb(var(--color-green-light))}.--color-green-default{background-color:rgb(var(--color-green-default))}.--color-green-dark{background-color:rgb(var(--color-green-dark))}.--color-green-darker{background-color:rgb(var(--color-green-darker))}.--color-lime-lighter{background-color:rgb(var(--color-lime-lighter))}.--color-lime-light{background-color:rgb(var(--color-lime-light))}.--color-lime-default{background-color:rgb(var(--color-lime-default))}.--color-lime-dark{background-color:rgb(var(--color-lime-dark))}.--color-lime-darker{background-color:rgb(var(--color-lime-darker))}.--color-grass-lighter{background-color:rgb(var(--color-grass-lighter))}.--color-grass-light{background-color:rgb(var(--color-grass-light))}.--color-grass-default{background-color:rgb(var(--color-grass-default))}.--color-grass-dark{background-color:rgb(var(--color-grass-dark))}.--color-grass-darker{background-color:rgb(var(--color-grass-darker))}.--color-yellow-lighter{background-color:rgb(var(--color-yellow-lighter))}.--color-yellow-light{background-color:rgb(var(--color-yellow-light))}.--color-yellow-default{background-color:rgb(var(--color-yellow-default))}.--color-yellow-dark{background-color:rgb(var(--color-yellow-dark))}.--color-yellow-darker{background-color:rgb(var(--color-yellow-darker))}.--color-amber-lighter{background-color:rgb(var(--color-amber-lighter))}.--color-amber-light{background-color:rgb(var(--color-amber-light))}.--color-amber-default{background-color:rgb(var(--color-amber-default))}.--color-amber-dark{background-color:rgb(var(--color-amber-dark))}.--color-amber-darker{background-color:rgb(var(--color-amber-darker))}.--color-orange-lighter{background-color:rgb(var(--color-orange-lighter))}.--color-orange-light{background-color:rgb(var(--color-orange-light))}.--color-orange-default{background-color:rgb(var(--color-orange-default))}.--color-orange-dark{background-color:rgb(var(--color-orange-dark))}.--color-orange-darker{background-color:rgb(var(--color-orange-darker))}.--color-coral-lighter{background-color:rgb(var(--color-coral-lighter))}.--color-coral-light{background-color:rgb(var(--color-coral-light))}.--color-coral-default{background-color:rgb(var(--color-coral-default))}.--color-coral-dark{background-color:rgb(var(--color-coral-dark))}.--color-coral-darker{background-color:rgb(var(--color-coral-darker))}.--color-brown-lighter{background-color:rgb(var(--color-brown-lighter))}.--color-brown-light{background-color:rgb(var(--color-brown-light))}.--color-brown-default{background-color:rgb(var(--color-brown-default))}.--color-brown-dark{background-color:rgb(var(--color-brown-dark))}.--color-brown-darker{background-color:rgb(var(--color-brown-darker))}.--color-gray-lighter{background-color:rgb(var(--color-gray-lighter))}.--color-gray-light{background-color:rgb(var(--color-gray-light))}.--color-gray-default{background-color:rgb(var(--color-gray-default))}.--color-gray-dark{background-color:rgb(var(--color-gray-dark))}.--color-gray-darker{background-color:rgb(var(--color-gray-darker))}.--color-glaucous-lighter{background-color:rgb(var(--color-glaucous-lighter))}.--color-glaucous-light{background-color:rgb(var(--color-glaucous-light))}.--color-glaucous-default{background-color:rgb(var(--color-glaucous-default))}.--color-glaucous-dark{background-color:rgb(var(--color-glaucous-dark))}.--color-glaucous-darker{background-color:rgb(var(--color-glaucous-darker))}.--contrast-100{color:rgb(var(--contrast-900));background-color:rgb(var(--contrast-100))}.--contrast-200{color:rgb(var(--contrast-1000));background-color:rgb(var(--contrast-200))}.--contrast-300{color:rgb(var(--contrast-1100));background-color:rgb(var(--contrast-300))}.--contrast-400{color:rgb(var(--contrast-1200));background-color:rgb(var(--contrast-400))}.--contrast-500{color:rgb(var(--contrast-1300));background-color:rgb(var(--contrast-500))}.--contrast-600{color:rgb(var(--contrast-1400));background-color:rgb(var(--contrast-600))}.--contrast-700{color:rgb(var(--contrast-1500));background-color:rgb(var(--contrast-700))}.--contrast-800{color:rgb(var(--contrast-1600));background-color:rgb(var(--contrast-800))}.--contrast-900{color:rgb(var(--contrast-1700));background-color:rgb(var(--contrast-900))}.--contrast-1000{color:rgb(var(--contrast-100));background-color:rgb(var(--contrast-1000))}.--contrast-1100{color:rgb(var(--contrast-200));background-color:rgb(var(--contrast-1100))}.--contrast-1200{color:rgb(var(--contrast-300));background-color:rgb(var(--contrast-1200))}.--contrast-1300{color:rgb(var(--contrast-400));background-color:rgb(var(--contrast-1300))}.--contrast-1400{color:rgb(var(--contrast-500));background-color:rgb(var(--contrast-1400))}.--contrast-1500{color:rgb(var(--contrast-600));background-color:rgb(var(--contrast-1500))}.--contrast-1600{color:rgb(var(--contrast-700));background-color:rgb(var(--contrast-1600))}.--contrast-1700{color:rgb(var(--contrast-800));background-color:rgb(var(--contrast-1700))}.--color-white{color:rgb(var(--color-black));background-color:rgb(var(--color-white))}.--color-black{color:rgb(var(--color-white));background-color:rgb(var(--color-black))}.color-palette{grid-template-rows:repeat(5, 1fr) auto;grid-template-columns:repeat(20, 1fr) auto}:host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}.picker-trigger[style=\"--background:lime-magenta;\"]:after,.chosen-color-preview[style=\"--background:lime-magenta;\"]:after{background-color:var(--lime-magenta)}.picker-trigger[style=\"--background:lime-blue;\"]:after,.chosen-color-preview[style=\"--background:lime-blue;\"]:after{background-color:var(--lime-blue)}.picker-trigger[style=\"--background:lime-orange;\"]:after,.chosen-color-preview[style=\"--background:lime-orange;\"]:after{background-color:var(--lime-orange)}.picker-trigger[style=\"--background:lime-green;\"]:after,.chosen-color-preview[style=\"--background:lime-green;\"]:after{background-color:var(--lime-green)}.picker-trigger[style=\"--background:lime-red;\"]:after,.chosen-color-preview[style=\"--background:lime-red;\"]:after{background-color:var(--lime-red)}.picker-trigger[style=\"--background:lime-dark-blue;\"]:after,.chosen-color-preview[style=\"--background:lime-dark-blue;\"]:after{background-color:var(--lime-dark-blue)}.picker-trigger[style=\"--background:lime-turquoise;\"]:after,.chosen-color-preview[style=\"--background:lime-turquoise;\"]:after{background-color:var(--lime-turquoise)}.picker-trigger[style=\"--background:lime-yellow;\"]:after,.chosen-color-preview[style=\"--background:lime-yellow;\"]:after{background-color:var(--lime-yellow)}.picker-trigger[style=\"--background:lime-light-grey;\"]:after,.chosen-color-preview[style=\"--background:lime-light-grey;\"]:after{background-color:var(--lime-light-grey)}:host{position:relative;--popover-surface-width:50rem;--color-picker-default-background:url(\"data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill='rgba(186,186,192,0.16)' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>\")}.color-picker{display:grid;gap:0.25rem;grid-template-columns:auto 1fr}.picker-trigger{all:unset;border-radius:0.5rem;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}.picker-trigger:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.picker-trigger:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.picker-trigger:focus{outline:none}.picker-trigger:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.picker-trigger:after{box-shadow:0 0 0 0.25rem rgb(var(--contrast-100)) inset}.chosen-color-preview,.picker-trigger{box-sizing:border-box;position:relative;isolation:isolate;width:2.5rem;height:2.5rem}.chosen-color-preview:before,.chosen-color-preview:after,.picker-trigger:before,.picker-trigger:after{content:\"\";position:absolute;inset:0;border-radius:inherit}.chosen-color-preview:before,.picker-trigger:before{background:var(--color-picker-default-background);background-size:0.5rem;z-index:0}.chosen-color-preview:after,.picker-trigger:after{background:var(--background);z-index:1}:host([readonly]) .picker-trigger:hover,:host([readonly]) .picker-trigger:active{cursor:default;box-shadow:var(--button-shadow-normal);transform:none}.chosen-color-input[readonly]{transform:translateX(calc( 2.5rem / 4 * -1 )) translateY(calc(2.5rem / 4))}:host{border-radius:0.75rem;background-color:rgb(var(--kompendium-contrast-300))}.color-picker-palette{display:grid;gap:0.25rem;grid-auto-flow:column;grid-template-columns:repeat(20, 1fr);grid-template-rows:repeat(4, 1fr) auto;margin:1rem}.chosen-color-name{box-sizing:border-box;padding:1rem;display:grid;grid-template-columns:1fr auto;gap:0.5rem}.chosen-color-preview{border:1px solid rgba(var(--contrast-700), 0.65);border-radius:50%}.swatch:not(.hue){border:none;aspect-ratio:1;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer}.swatch:not(.hue):focus{outline:none}.swatch:not(.hue):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.swatch:not(.hue):hover{box-shadow:var(--button-shadow-hovered)}.swatch:not(.hue):active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.swatch:not(.hue):focus-visible{box-shadow:var(--shadow-depth-8-focused), 0 0 0 0.25rem rgb(var(--contrast-100)) inset}.swatch--selected{border-radius:50%}";
 
 const Palette = class {
   constructor(hostRef) {

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

@@ -1 +1 @@
-{"file":"limel-color-picker-palette.entry.js","mappings":";;AAAO,MAAM,MAAM,GAAG;EAClB,KAAK;EACL,MAAM;EACN,SAAS;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,MAAM;EACN,KAAK;EACL,MAAM;EACN,MAAM;EACN,OAAO;EACP,MAAM;EACN,OAAO;EACP,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,OAAO;EACP,OAAO;EACP,MAAM;EACN,UAAU;CACb,CAAC;AAEK,MAAM,YAAY,GAAG,CAAC,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;SAE9D,YAAY,CAAC,KAAa,EAAE,UAAkB;EAC1D,OAAO,WAAW,KAAK,IAAI,UAAU,EAAE,CAAC;AAC5C,CAAC;SAEe,WAAW,CAAC,KAAa,EAAE,UAAkB;EACzD,OAAO,WAAW,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC;AAC1D;;AC/BA,MAAM,qBAAqB,GAAG,swcAAswc;;MCYvxc,OAAO;;;;IAiDR,mBAAc,GAAG;MACrB,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK;QACpB,OAAO,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;OACrD,CAAC,CAAC;KACN,CAAC;IAEM,iBAAY,GAAG,CAAC,KAAa,KAAK,CAAC,UAAkB;MACzD,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;MAClD,MAAM,SAAS,GAAG;QACd,MAAM,EAAE,IAAI;QACZ,CAAC,SAAS,GAAG,IAAI;QACjB,kBAAkB,EAAE,IAAI,CAAC,KAAK,KAAK,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC;OACpE,CAAC;MAEF,QACI,cACI,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC,GAC9C,EACJ;KACL,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;IAEM,gBAAW,GACf,CAAC,KAAa,EAAE,UAAkB,KAAK,CAAC,KAAiB;MACrD,MAAM,KAAK,GAAG,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;MAC7C,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC3B,CAAC;;;;;;EAlDC,MAAM;IACT,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,cAAc,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC;IAEpE,OAAO;MACH,WAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,cAAc,EAAE,CAAO;MAC/D,WAAK,KAAK,EAAC,mBAAmB,IAC1B,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,GACzB,EACF,WAAK,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAE,UAAU,GAAI,CACrD;KACT,CAAC;GACL;;;;;;","names":[],"sources":["./src/components/color-picker/swatches.ts","./src/components/color-picker/color-picker-palette.scss?tag=limel-color-picker-palette&encapsulation=shadow","./src/components/color-picker/color-picker-palette.tsx"],"sourcesContent":["export const colors = [\n    'red',\n    'pink',\n    'magenta',\n    'purple',\n    'violet',\n    'indigo',\n    'blue',\n    'sky',\n    'cyan',\n    'teal',\n    'green',\n    'lime',\n    'grass',\n    'yellow',\n    'amber',\n    'orange',\n    'coral',\n    'brown',\n    'gray',\n    'glaucous',\n];\n\nexport const brightnesses = ['lighter', 'light', 'default', 'dark', 'darker'];\n\nexport function getColorName(color: string, brightness: string): string {\n    return `--color-${color}-${brightness}`;\n}\n\nexport function getCssColor(color: string, brightness: string): string {\n    return `rgb(var(${getColorName(color, brightness)}))`;\n}\n","@use '../../design-guidelines/color-system/examples/extended-color-palette';\n@use '../../style/mixins';\n@import './color-picker';\n\n:host {\n    border-radius: 0.75rem; // is like popover's default `--popover-border-radius`\n    background-color: rgb(var(--kompendium-contrast-300));\n}\n\n.color-picker-palette {\n    display: grid;\n    gap: 0.25rem;\n    grid-auto-flow: column;\n    grid-template-columns: repeat(20, 1fr);\n    grid-template-rows: repeat(4, 1fr) auto;\n    margin: 1rem;\n}\n\n.chosen-color-name {\n    box-sizing: border-box;\n    padding: 1rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    gap: 0.5rem;\n}\n\n.chosen-color-preview {\n    border: 1px solid rgba(var(--contrast-700), 0.65); // color is the same as\n    // colors in shared_input-select-picker.scss\n    border-radius: 50%;\n}\n\n.swatch:not(.hue) {\n    border: none;\n    aspect-ratio: 1;\n\n    @include mixins.visualize-keyboard-focus();\n\n    // We could use the `@include mixins.is-flat-clickable();` mixin\n    // But its `background-color` arguments would interfere with the\n    // styles here. So we just copy/pasted the useful parts of the mixin here\n    transition:\n        color 0.2s ease,\n        background-color 0.2s ease,\n        box-shadow 0.2s ease,\n        transform 0.1s ease-out;\n\n    &:hover {\n        box-shadow: var(--button-shadow-hovered);\n    }\n\n    &:active {\n        box-shadow: var(--button-shadow-pressed);\n\n        transform: translate3d(0, 0.08rem, 0);\n    }\n    cursor: pointer;\n\n    &:focus-visible {\n        box-shadow:\n            var(--shadow-depth-8-focused),\n            0 0 0 0.25rem rgb(var(--contrast-100)) inset;\n    }\n}\n\n.swatch--selected {\n    border-radius: 50%;\n}\n","import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { brightnesses, colors, getColorName, getCssColor } from './swatches';\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-color-picker-palette',\n    shadow: true,\n    styleUrl: 'color-picker-palette.scss',\n})\nexport class Palette implements FormComponent {\n    /**\n     * Color value that is manually typed by the user\n     */\n    @Prop({ reflect: true })\n    public value: string;\n\n    /**\n     * 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     * Set to `true` if a value is required\n     */\n    @Prop({ reflect: true })\n    public required: boolean;\n\n    /**\n     * Emits chosen value to the parent component\n     */\n    @Event()\n    public change: EventEmitter<string>;\n\n    public render() {\n        const background = this.value ? { '--background': this.value } : {};\n\n        return [\n            <div class=\"color-picker-palette\">{this.renderSwatches()}</div>,\n            <div class=\"chosen-color-name\">\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                />\n                <div class=\"chosen-color-preview\" style={background} />\n            </div>,\n        ];\n    }\n\n    private renderSwatches = () => {\n        return colors.map((color) => {\n            return brightnesses.map(this.renderSwatch(color));\n        });\n    };\n\n    private renderSwatch = (color: string) => (brightness: string) => {\n        const colorName = getColorName(color, brightness);\n        const classList = {\n            swatch: true,\n            [colorName]: true,\n            'swatch--selected': this.value === getCssColor(color, brightness),\n        };\n\n        return (\n            <button\n                class={classList}\n                onClick={this.handleClick(color, brightness)}\n            />\n        );\n    };\n\n    private handleChange = (event: CustomEvent<string>) => {\n        event.stopPropagation();\n        this.change.emit(event.detail);\n    };\n\n    private handleClick =\n        (color: string, brightness: string) => (event: MouseEvent) => {\n            const value = getCssColor(color, brightness);\n            event.stopPropagation();\n            this.change.emit(value);\n        };\n}\n"],"version":3}
+{"file":"limel-color-picker-palette.entry.js","mappings":";;AAAO,MAAM,MAAM,GAAG;EAClB,KAAK;EACL,MAAM;EACN,SAAS;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,MAAM;EACN,KAAK;EACL,MAAM;EACN,MAAM;EACN,OAAO;EACP,MAAM;EACN,OAAO;EACP,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,OAAO;EACP,OAAO;EACP,MAAM;EACN,UAAU;CACb,CAAC;AAEK,MAAM,YAAY,GAAG,CAAC,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;SAE9D,YAAY,CAAC,KAAa,EAAE,UAAkB;EAC1D,OAAO,WAAW,KAAK,IAAI,UAAU,EAAE,CAAC;AAC5C,CAAC;SAEe,WAAW,CAAC,KAAa,EAAE,UAAkB;EACzD,OAAO,WAAW,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC;AAC1D;;AC/BA,MAAM,qBAAqB,GAAG,w9eAAw9e;;MCYz+e,OAAO;;;;IAiDR,mBAAc,GAAG;MACrB,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK;QACpB,OAAO,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;OACrD,CAAC,CAAC;KACN,CAAC;IAEM,iBAAY,GAAG,CAAC,KAAa,KAAK,CAAC,UAAkB;MACzD,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;MAClD,MAAM,SAAS,GAAG;QACd,MAAM,EAAE,IAAI;QACZ,CAAC,SAAS,GAAG,IAAI;QACjB,kBAAkB,EAAE,IAAI,CAAC,KAAK,KAAK,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC;OACpE,CAAC;MAEF,QACI,cACI,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC,GAC9C,EACJ;KACL,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;IAEM,gBAAW,GACf,CAAC,KAAa,EAAE,UAAkB,KAAK,CAAC,KAAiB;MACrD,MAAM,KAAK,GAAG,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;MAC7C,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC3B,CAAC;;;;;;EAlDC,MAAM;IACT,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,cAAc,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC;IAEpE,OAAO;MACH,WAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,cAAc,EAAE,CAAO;MAC/D,WAAK,KAAK,EAAC,mBAAmB,IAC1B,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,GACzB,EACF,WAAK,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAE,UAAU,GAAI,CACrD;KACT,CAAC;GACL;;;;;;","names":[],"sources":["./src/components/color-picker/swatches.ts","./src/components/color-picker/color-picker-palette.scss?tag=limel-color-picker-palette&encapsulation=shadow","./src/components/color-picker/color-picker-palette.tsx"],"sourcesContent":["export const colors = [\n    'red',\n    'pink',\n    'magenta',\n    'purple',\n    'violet',\n    'indigo',\n    'blue',\n    'sky',\n    'cyan',\n    'teal',\n    'green',\n    'lime',\n    'grass',\n    'yellow',\n    'amber',\n    'orange',\n    'coral',\n    'brown',\n    'gray',\n    'glaucous',\n];\n\nexport const brightnesses = ['lighter', 'light', 'default', 'dark', 'darker'];\n\nexport function getColorName(color: string, brightness: string): string {\n    return `--color-${color}-${brightness}`;\n}\n\nexport function getCssColor(color: string, brightness: string): string {\n    return `rgb(var(${getColorName(color, brightness)}))`;\n}\n","@use '../../design-guidelines/color-system/examples/extended-color-palette';\n@use '../../style/mixins';\n@import './color-picker';\n\n:host {\n    border-radius: 0.75rem; // is like popover's default `--popover-border-radius`\n    background-color: rgb(var(--kompendium-contrast-300));\n}\n\n.color-picker-palette {\n    display: grid;\n    gap: 0.25rem;\n    grid-auto-flow: column;\n    grid-template-columns: repeat(20, 1fr);\n    grid-template-rows: repeat(4, 1fr) auto;\n    margin: 1rem;\n}\n\n.chosen-color-name {\n    box-sizing: border-box;\n    padding: 1rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    gap: 0.5rem;\n}\n\n.chosen-color-preview {\n    border: 1px solid rgba(var(--contrast-700), 0.65); // color is the same as\n    // colors in shared_input-select-picker.scss\n    border-radius: 50%;\n}\n\n.swatch:not(.hue) {\n    border: none;\n    aspect-ratio: 1;\n\n    @include mixins.visualize-keyboard-focus();\n\n    // We could use the `@include mixins.is-flat-clickable();` mixin\n    // But its `background-color` arguments would interfere with the\n    // styles here. So we just copy/pasted the useful parts of the mixin here\n    transition:\n        color 0.2s ease,\n        background-color 0.2s ease,\n        box-shadow 0.2s ease,\n        transform 0.1s ease-out;\n\n    &:hover {\n        box-shadow: var(--button-shadow-hovered);\n    }\n\n    &:active {\n        box-shadow: var(--button-shadow-pressed);\n\n        transform: translate3d(0, 0.08rem, 0);\n    }\n    cursor: pointer;\n\n    &:focus-visible {\n        box-shadow:\n            var(--shadow-depth-8-focused),\n            0 0 0 0.25rem rgb(var(--contrast-100)) inset;\n    }\n}\n\n.swatch--selected {\n    border-radius: 50%;\n}\n","import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { brightnesses, colors, getColorName, getCssColor } from './swatches';\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-color-picker-palette',\n    shadow: true,\n    styleUrl: 'color-picker-palette.scss',\n})\nexport class Palette implements FormComponent {\n    /**\n     * Color value that is manually typed by the user\n     */\n    @Prop({ reflect: true })\n    public value: string;\n\n    /**\n     * 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     * Set to `true` if a value is required\n     */\n    @Prop({ reflect: true })\n    public required: boolean;\n\n    /**\n     * Emits chosen value to the parent component\n     */\n    @Event()\n    public change: EventEmitter<string>;\n\n    public render() {\n        const background = this.value ? { '--background': this.value } : {};\n\n        return [\n            <div class=\"color-picker-palette\">{this.renderSwatches()}</div>,\n            <div class=\"chosen-color-name\">\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                />\n                <div class=\"chosen-color-preview\" style={background} />\n            </div>,\n        ];\n    }\n\n    private renderSwatches = () => {\n        return colors.map((color) => {\n            return brightnesses.map(this.renderSwatch(color));\n        });\n    };\n\n    private renderSwatch = (color: string) => (brightness: string) => {\n        const colorName = getColorName(color, brightness);\n        const classList = {\n            swatch: true,\n            [colorName]: true,\n            'swatch--selected': this.value === getCssColor(color, brightness),\n        };\n\n        return (\n            <button\n                class={classList}\n                onClick={this.handleClick(color, brightness)}\n            />\n        );\n    };\n\n    private handleChange = (event: CustomEvent<string>) => {\n        event.stopPropagation();\n        this.change.emit(event.detail);\n    };\n\n    private handleClick =\n        (color: string, brightness: string) => (event: MouseEvent) => {\n            const value = getCssColor(color, brightness);\n            event.stopPropagation();\n            this.change.emit(value);\n        };\n}\n"],"version":3}

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h } from './index-232e9616.js';
 
-const colorPickerCss = "@charset \"UTF-8\";.picker-trigger[style=\"--background:lime-magenta;\"]:after,.chosen-color-preview[style=\"--background:lime-magenta;\"]:after{background-color:var(--lime-magenta)}.picker-trigger[style=\"--background:lime-blue;\"]:after,.chosen-color-preview[style=\"--background:lime-blue;\"]:after{background-color:var(--lime-blue)}.picker-trigger[style=\"--background:lime-orange;\"]:after,.chosen-color-preview[style=\"--background:lime-orange;\"]:after{background-color:var(--lime-orange)}.picker-trigger[style=\"--background:lime-green;\"]:after,.chosen-color-preview[style=\"--background:lime-green;\"]:after{background-color:var(--lime-green)}.picker-trigger[style=\"--background:lime-red;\"]:after,.chosen-color-preview[style=\"--background:lime-red;\"]:after{background-color:var(--lime-red)}.picker-trigger[style=\"--background:lime-dark-blue;\"]:after,.chosen-color-preview[style=\"--background:lime-dark-blue;\"]:after{background-color:var(--lime-dark-blue)}.picker-trigger[style=\"--background:lime-turquoise;\"]:after,.chosen-color-preview[style=\"--background:lime-turquoise;\"]:after{background-color:var(--lime-turquoise)}.picker-trigger[style=\"--background:lime-yellow;\"]:after,.chosen-color-preview[style=\"--background:lime-yellow;\"]:after{background-color:var(--lime-yellow)}.picker-trigger[style=\"--background:lime-light-grey;\"]:after,.chosen-color-preview[style=\"--background:lime-light-grey;\"]:after{background-color:var(--lime-light-grey)}:host{--popover-surface-width:50rem;--color-picker-default-background:url(\"data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill='rgba(186,186,192,0.16)' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>\")}.color-picker{display:grid;gap:0.5rem;grid-template-columns:auto 1fr}.picker-trigger{all:unset;border-radius:0.5rem;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}.picker-trigger:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.picker-trigger:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.picker-trigger:focus{outline:none}.picker-trigger:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.picker-trigger:after{box-shadow:0 0 0 0.25rem rgb(var(--contrast-100)) inset}.chosen-color-preview,.picker-trigger{box-sizing:border-box;position:relative;isolation:isolate;width:3.5rem;height:3.5rem}.chosen-color-preview:before,.chosen-color-preview:after,.picker-trigger:before,.picker-trigger:after{content:\"\";position:absolute;inset:0;border-radius:inherit}.chosen-color-preview:before,.picker-trigger:before{background:var(--color-picker-default-background);background-size:0.5rem;z-index:0}.chosen-color-preview:after,.picker-trigger:after{background:var(--background);z-index:1}:host([readonly]) .picker-trigger:hover,:host([readonly]) .picker-trigger:active{cursor:default;box-shadow:var(--button-shadow-normal);transform:none}.chosen-color-input[readonly]{transform:translateY(1rem)}";
+const colorPickerCss = "@charset \"UTF-8\";:host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}.picker-trigger[style=\"--background:lime-magenta;\"]:after,.chosen-color-preview[style=\"--background:lime-magenta;\"]:after{background-color:var(--lime-magenta)}.picker-trigger[style=\"--background:lime-blue;\"]:after,.chosen-color-preview[style=\"--background:lime-blue;\"]:after{background-color:var(--lime-blue)}.picker-trigger[style=\"--background:lime-orange;\"]:after,.chosen-color-preview[style=\"--background:lime-orange;\"]:after{background-color:var(--lime-orange)}.picker-trigger[style=\"--background:lime-green;\"]:after,.chosen-color-preview[style=\"--background:lime-green;\"]:after{background-color:var(--lime-green)}.picker-trigger[style=\"--background:lime-red;\"]:after,.chosen-color-preview[style=\"--background:lime-red;\"]:after{background-color:var(--lime-red)}.picker-trigger[style=\"--background:lime-dark-blue;\"]:after,.chosen-color-preview[style=\"--background:lime-dark-blue;\"]:after{background-color:var(--lime-dark-blue)}.picker-trigger[style=\"--background:lime-turquoise;\"]:after,.chosen-color-preview[style=\"--background:lime-turquoise;\"]:after{background-color:var(--lime-turquoise)}.picker-trigger[style=\"--background:lime-yellow;\"]:after,.chosen-color-preview[style=\"--background:lime-yellow;\"]:after{background-color:var(--lime-yellow)}.picker-trigger[style=\"--background:lime-light-grey;\"]:after,.chosen-color-preview[style=\"--background:lime-light-grey;\"]:after{background-color:var(--lime-light-grey)}:host{position:relative;--popover-surface-width:50rem;--color-picker-default-background:url(\"data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill='rgba(186,186,192,0.16)' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>\")}.color-picker{display:grid;gap:0.25rem;grid-template-columns:auto 1fr}.picker-trigger{all:unset;border-radius:0.5rem;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}.picker-trigger:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.picker-trigger:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.picker-trigger:focus{outline:none}.picker-trigger:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.picker-trigger:after{box-shadow:0 0 0 0.25rem rgb(var(--contrast-100)) inset}.chosen-color-preview,.picker-trigger{box-sizing:border-box;position:relative;isolation:isolate;width:2.5rem;height:2.5rem}.chosen-color-preview:before,.chosen-color-preview:after,.picker-trigger:before,.picker-trigger:after{content:\"\";position:absolute;inset:0;border-radius:inherit}.chosen-color-preview:before,.picker-trigger:before{background:var(--color-picker-default-background);background-size:0.5rem;z-index:0}.chosen-color-preview:after,.picker-trigger:after{background:var(--background);z-index:1}:host([readonly]) .picker-trigger:hover,:host([readonly]) .picker-trigger:active{cursor:default;box-shadow:var(--button-shadow-normal);transform:none}.chosen-color-input[readonly]{transform:translateX(calc( 2.5rem / 4 * -1 )) translateY(calc(2.5rem / 4))}";
 
 const ColorPicker = class {
   constructor(hostRef) {

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

@@ -1 +1 @@
-{"file":"limel-color-picker.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,utGAAutG;;MCuBjuG,WAAW;;;;IAgEZ,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,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB,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,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,UAAU,EACjB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,EAAE,EAAC,gBAAgB,GACrB,EACJ;KACL,CAAC;IAEM,gBAAW,GAAG,CAAC,KAAiB;MACpC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;KACtB,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;;;;;;;kBAlFe,KAAK;;EAEf,MAAM;IACT,OAAO;MACH,IAAI,CAAC,aAAa,EAAE;MACpB,WAAK,KAAK,EAAC,cAAc,IACpB,IAAI,CAAC,mBAAmB,EAAE,EAE3B,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,KAAK,EAAC,oBAAoB,GAC5B,CACA;KACT,CAAC;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@import './partial-styles/lime-admin-hack';\n\n:host {\n    --popover-surface-width: 50rem;\n    --color-picker-default-background: url(\"data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill='rgba(186,186,192,0.16)' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>\");\n}\n\n.color-picker {\n    display: grid;\n    gap: 0.5rem;\n    grid-template-columns: auto 1fr;\n}\n\n.picker-trigger {\n    all: unset;\n    border-radius: 0.5rem;\n    @include mixins.is-elevated-clickable();\n    @include mixins.visualize-keyboard-focus();\n\n    &:after {\n        box-shadow: 0 0 0 0.25rem rgb(var(--contrast-100)) inset;\n    }\n}\n\n.chosen-color-preview,\n.picker-trigger {\n    box-sizing: border-box;\n    position: relative;\n    isolation: isolate;\n    width: 3.5rem;\n    height: 3.5rem;\n\n    &:before,\n    &:after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n    }\n\n    &:before {\n        background: var(--color-picker-default-background);\n        background-size: 0.5rem;\n        z-index: 0;\n    }\n\n    &:after {\n        background: var(--background);\n        z-index: 1;\n    }\n}\n\n:host([readonly]) {\n    .picker-trigger {\n        &:hover,\n        &:active {\n            cursor: default;\n            box-shadow: var(--button-shadow-normal);\n            transform: none;\n        }\n    }\n}\n\n.chosen-color-input[readonly] {\n    transform: translateY(1rem);\n}\n","/* eslint-disable multiline-ternary */\nimport { Component, h, Prop, State, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.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\n * @exampleComponent limel-example-color-picker-readonly\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` if a value is readonly. This makes the component un-interactive.\n     */\n    @Prop({ reflect: true })\n    public readonly: boolean;\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 render() {\n        return [\n            this.renderTooltip(),\n            <div class=\"color-picker\">\n                {this.renderPickerPalette()}\n\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                    class=\"chosen-color-input\"\n                />\n            </div>,\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                    value={this.value}\n                    label={this.label}\n                    helperText={this.helperText}\n                    onChange={this.handleChange}\n                    required={this.required}\n                />\n            </limel-popover>\n        );\n    };\n\n    private renderPickerTrigger = () => {\n        const background = this.value ? { '--background': this.value } : {};\n\n        return (\n            <button\n                class=\"picker-trigger\"\n                slot=\"trigger\"\n                style={background}\n                role=\"button\"\n                onClick={this.openPopover}\n                id=\"tooltip-button\"\n            />\n        );\n    };\n\n    private openPopover = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.isOpen = true;\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":";;AAAA,MAAM,cAAc,GAAG,y6IAAy6I;;MCuBn7I,WAAW;;;;IAgEZ,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,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB,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,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,UAAU,EACjB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,EAAE,EAAC,gBAAgB,GACrB,EACJ;KACL,CAAC;IAEM,gBAAW,GAAG,CAAC,KAAiB;MACpC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;KACtB,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;;;;;;;kBAlFe,KAAK;;EAEf,MAAM;IACT,OAAO;MACH,IAAI,CAAC,aAAa,EAAE;MACpB,WAAK,KAAK,EAAC,cAAc,IACpB,IAAI,CAAC,mBAAmB,EAAE,EAE3B,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,KAAK,EAAC,oBAAoB,GAC5B,CACA;KACT,CAAC;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 {\n    position: relative;\n    --popover-surface-width: 50rem;\n    --color-picker-default-background: url(\"data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill='rgba(186,186,192,0.16)' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>\");\n}\n\n.color-picker {\n    display: grid;\n    gap: 0.25rem;\n    grid-template-columns: auto 1fr;\n}\n\n.picker-trigger {\n    all: unset;\n    border-radius: 0.5rem;\n    @include mixins.is-elevated-clickable();\n    @include mixins.visualize-keyboard-focus();\n\n    &:after {\n        box-shadow: 0 0 0 0.25rem rgb(var(--contrast-100)) inset;\n    }\n}\n\n.chosen-color-preview,\n.picker-trigger {\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    &:before,\n    &:after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n    }\n\n    &:before {\n        background: var(--color-picker-default-background);\n        background-size: 0.5rem;\n        z-index: 0;\n    }\n\n    &:after {\n        background: var(--background);\n        z-index: 1;\n    }\n}\n\n:host([readonly]) {\n    .picker-trigger {\n        &:hover,\n        &:active {\n            cursor: default;\n            box-shadow: var(--button-shadow-normal);\n            transform: none;\n        }\n    }\n}\n\n.chosen-color-input[readonly] {\n    transform: translateX(\n            calc(\n                #{shared_input-select-picker.$height-of-mdc-text-field} / 4 * -1\n            )\n        )\n        translateY(\n            calc(#{shared_input-select-picker.$height-of-mdc-text-field} / 4)\n        );\n}\n","/* eslint-disable multiline-ternary */\nimport { Component, h, Prop, State, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.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\n * @exampleComponent limel-example-color-picker-readonly\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` if a value is readonly. This makes the component un-interactive.\n     */\n    @Prop({ reflect: true })\n    public readonly: boolean;\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 render() {\n        return [\n            this.renderTooltip(),\n            <div class=\"color-picker\">\n                {this.renderPickerPalette()}\n\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                    class=\"chosen-color-input\"\n                />\n            </div>,\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                    value={this.value}\n                    label={this.label}\n                    helperText={this.helperText}\n                    onChange={this.handleChange}\n                    required={this.required}\n                />\n            </limel-popover>\n        );\n    };\n\n    private renderPickerTrigger = () => {\n        const background = this.value ? { '--background': this.value } : {};\n\n        return (\n            <button\n                class=\"picker-trigger\"\n                slot=\"trigger\"\n                style={background}\n                role=\"button\"\n                onClick={this.openPopover}\n                id=\"tooltip-button\"\n            />\n        );\n    };\n\n    private openPopover = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.isOpen = true;\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-file.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-232e9616.js';
 import { t as translate } from './translations-dea847ae.js';
 import { c as createRandomString } from './random-string-812b1c35.js';
-import { g as getIconName, a as getIconColor, b as getIconBackgroundColor } from './get-icon-props-f581151a.js';
+import { g as getIconName, a as getIconColor, b as getIconBackgroundColor } from './get-icon-props-0b65f85e.js';
 import { M as MDCTextField } from './component-58f68f3e.js';
 import './component-8b6ce3e9.js';
 import './component-f972b8db.js';

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

@@ -29600,7 +29600,7 @@ function isInteger(data) {
   return Number.isInteger(Number(data));
 }
 
-const formCss = "@charset \"UTF-8\";:host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}.mdc-typography{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-font-family, Roboto, sans-serif)}.mdc-typography--headline1{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-headline1-font-family, var(--mdc-typography-font-family, inherit));font-size:1.375rem;font-size:var(--mdc-typography-headline1-font-size, 1.375rem);line-height:1.375rem;line-height:var(--mdc-typography-headline1-line-height, 1.375rem);font-weight:300;font-weight:var(--mdc-typography-headline1-font-weight, 300);letter-spacing:-0.015625em;letter-spacing:var(--mdc-typography-headline1-letter-spacing, -0.015625em);text-decoration:inherit;text-decoration:var(--mdc-typography-headline1-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline1-text-transform, inherit)}.mdc-typography--headline2{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-headline2-font-family, var(--mdc-typography-font-family, inherit));font-size:1rem;font-size:var(--mdc-typography-headline2-font-size, 1rem);line-height:0.875rem;line-height:var(--mdc-typography-headline2-line-height, 0.875rem);font-weight:300;font-weight:var(--mdc-typography-headline2-font-weight, 300);letter-spacing:-0.0083333333em;letter-spacing:var(--mdc-typography-headline2-letter-spacing, -0.0083333333em);text-decoration:inherit;text-decoration:var(--mdc-typography-headline2-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline2-text-transform, inherit)}.mdc-typography--headline3{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-headline3-font-family, var(--mdc-typography-font-family, inherit));font-size:1rem;font-size:var(--mdc-typography-headline3-font-size, 1rem);line-height:0.875rem;line-height:var(--mdc-typography-headline3-line-height, 0.875rem);font-weight:400;font-weight:var(--mdc-typography-headline3-font-weight, 400);letter-spacing:normal;letter-spacing:var(--mdc-typography-headline3-letter-spacing, normal);text-decoration:inherit;text-decoration:var(--mdc-typography-headline3-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline3-text-transform, inherit)}.mdc-typography--headline4{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-headline4-font-family, var(--mdc-typography-font-family, inherit));font-size:1rem;font-size:var(--mdc-typography-headline4-font-size, 1rem);line-height:0.875rem;line-height:var(--mdc-typography-headline4-line-height, 0.875rem);font-weight:400;font-weight:var(--mdc-typography-headline4-font-weight, 400);letter-spacing:0.0073529412em;letter-spacing:var(--mdc-typography-headline4-letter-spacing, 0.0073529412em);text-decoration:inherit;text-decoration:var(--mdc-typography-headline4-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline4-text-transform, inherit)}.mdc-typography--headline5{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-headline5-font-family, var(--mdc-typography-font-family, inherit));font-size:0.875rem;font-size:var(--mdc-typography-headline5-font-size, 0.875rem);line-height:0.875rem;line-height:var(--mdc-typography-headline5-line-height, 0.875rem);font-weight:400;font-weight:var(--mdc-typography-headline5-font-weight, 400);letter-spacing:normal;letter-spacing:var(--mdc-typography-headline5-letter-spacing, normal);text-decoration:inherit;text-decoration:var(--mdc-typography-headline5-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline5-text-transform, inherit)}.mdc-typography--headline6{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-headline6-font-family, var(--mdc-typography-font-family, inherit));font-size:0.875rem;font-size:var(--mdc-typography-headline6-font-size, 0.875rem);line-height:0.875rem;line-height:var(--mdc-typography-headline6-line-height, 0.875rem);font-weight:500;font-weight:var(--mdc-typography-headline6-font-weight, 500);letter-spacing:0.0125em;letter-spacing:var(--mdc-typography-headline6-letter-spacing, 0.0125em);text-decoration:inherit;text-decoration:var(--mdc-typography-headline6-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline6-text-transform, inherit)}.mdc-typography--subtitle1{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, inherit));font-size:0.875rem;font-size:var(--mdc-typography-subtitle1-font-size, 0.875rem);line-height:1.125rem;line-height:var(--mdc-typography-subtitle1-line-height, 1.125rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight, 400);letter-spacing:0.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);text-decoration:inherit;text-decoration:var(--mdc-typography-subtitle1-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform, inherit)}.mdc-typography--subtitle2{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-subtitle2-font-family, var(--mdc-typography-font-family, inherit));font-size:0.8125rem;font-size:var(--mdc-typography-subtitle2-font-size, 0.8125rem);line-height:1.125rem;line-height:var(--mdc-typography-subtitle2-line-height, 1.125rem);font-weight:500;font-weight:var(--mdc-typography-subtitle2-font-weight, 500);letter-spacing:0.0071428571em;letter-spacing:var(--mdc-typography-subtitle2-letter-spacing, 0.0071428571em);text-decoration:inherit;text-decoration:var(--mdc-typography-subtitle2-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle2-text-transform, inherit)}.mdc-typography--body1{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, inherit));font-size:0.8125rem;font-size:var(--mdc-typography-body1-font-size, 0.8125rem);line-height:1.5rem;line-height:var(--mdc-typography-body1-line-height, 1.5rem);font-weight:400;font-weight:var(--mdc-typography-body1-font-weight, 400);letter-spacing:0.03125em;letter-spacing:var(--mdc-typography-body1-letter-spacing, 0.03125em);text-decoration:inherit;text-decoration:var(--mdc-typography-body1-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-body1-text-transform, inherit)}.mdc-typography--body2{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, inherit));font-size:0.8125rem;font-size:var(--mdc-typography-body2-font-size, 0.8125rem);line-height:1.625rem;line-height:var(--mdc-typography-body2-line-height, 1.625rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight, 400);letter-spacing:0.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, 0.0178571429em);text-decoration:inherit;text-decoration:var(--mdc-typography-body2-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform, inherit)}.mdc-typography--caption{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, inherit));font-size:0.6875rem;font-size:var(--mdc-typography-caption-font-size, 0.6875rem);line-height:0.875rem;line-height:var(--mdc-typography-caption-line-height, 0.875rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight, 400);letter-spacing:0.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, 0.0333333333em);text-decoration:inherit;text-decoration:var(--mdc-typography-caption-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform, inherit)}.mdc-typography--button{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, inherit));font-size:0.875rem;font-size:var(--mdc-typography-button-font-size, 0.875rem);line-height:2.25rem;line-height:var(--mdc-typography-button-line-height, 2.25rem);font-weight:500;font-weight:var(--mdc-typography-button-font-weight, 500);letter-spacing:0.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing, 0.0892857143em);text-decoration:none;text-decoration:var(--mdc-typography-button-text-decoration, none);text-transform:none;text-transform:var(--mdc-typography-button-text-transform, none)}.mdc-typography--overline{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-overline-font-family, var(--mdc-typography-font-family, inherit));font-size:0.6875rem;font-size:var(--mdc-typography-overline-font-size, 0.6875rem);line-height:0.875rem;line-height:var(--mdc-typography-overline-line-height, 0.875rem);font-weight:500;font-weight:var(--mdc-typography-overline-font-weight, 500);letter-spacing:0.1666666667em;letter-spacing:var(--mdc-typography-overline-letter-spacing, 0.1666666667em);text-decoration:none;text-decoration:var(--mdc-typography-overline-text-decoration, none);text-transform:uppercase;text-transform:var(--mdc-typography-overline-text-transform, uppercase)}.form-group{min-width:0}.limel-form-array-item--simple{display:flex;align-items:center;padding-bottom:var(--form-row-gap, 1rem)}.limel-form-array-item--simple *:first-child{flex-grow:1}limel-code-editor{margin-bottom:0.75rem}.limel-form-array-item--object{margin-bottom:0.25rem}.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:3.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{margin-top:0.5rem;display:block}.limel-form-layout--grid limel-switch{margin-left:0.5rem}.form-error{color:var(--mdc-theme-error, #b00020);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%}.mdc-typography--headline1{position:relative}.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 .mdc-typography--headline1,.form-group .mdc-typography--body1{color:rgb(var(--contrast-1100))}.form-group .mdc-typography--headline1{--mdc-typography-headline1-font-size:2rem;--mdc-typography-headline1-line-height:2.25rem;--mdc-typography-headline1-letter-spacing:-0.01rem;--mdc-typography-headline1-font-weight:400;margin-top:1.5rem;margin-bottom:0.25rem}.form-group .mdc-typography--body1{margin-top:0;margin-bottom:0.5rem}.form-group .form-group .mdc-typography--headline1,.form-group .form-group .mdc-typography--body1{color:rgb(var(--contrast-1200))}.form-group .form-group .mdc-typography--headline1{--mdc-typography-headline1-font-size:1.625rem;--mdc-typography-headline1-line-height:1.25rem;--mdc-typography-headline1-font-weight:300;margin-top:1rem}.form-group .form-group .mdc-typography--headline1:before{content:\"\";display:block;position:absolute;top:0;bottom:0;margin:auto;left:-0.75rem;background-color:var(--mdc-theme-primary);width:0.125rem;height:var(--mdc-typography-headline1-line-height);border-radius:0.125rem;opacity:0.6}.form-group .form-group .form-group .mdc-typography--headline1,.form-group .form-group .form-group .mdc-typography--body1{color:rgb(var(--contrast-1300))}.form-group .form-group .form-group .mdc-typography--headline1{--mdc-typography-headline1-font-size:1.375rem;--mdc-typography-headline1-line-height:1.5rem;margin-top:0.5rem}.form-group .form-group .form-group .mdc-typography--headline1:before{display:none}.form-group .form-group .form-group .form-group .mdc-typography--headline1,.form-group .form-group .form-group .form-group .mdc-typography--body1{color:rgb(var(--contrast-1400))}.form-group .form-group .form-group .form-group .mdc-typography--headline1{--mdc-typography-headline1-font-size:1.25rem;--mdc-typography-headline1-line-height:1.25rem;margin-top:1rem}.form-group .form-group .form-group .form-group .mdc-typography--headline1:before{display:none}.form-group .form-group .form-group .form-group .mdc-typography--headline1,.form-group .form-group .form-group .form-group .mdc-typography--body1{color:rgb(var(--contrast-1400))}.form-group .form-group .form-group .form-group .mdc-typography--headline1{--mdc-typography-headline1-font-size:1.25rem;--mdc-typography-headline1-line-height:1.25rem;margin-top:0.25rem}.form-group .form-group .form-group .form-group .mdc-typography--headline1:before{display:none}.form-group .form-group .form-group .form-group .form-group .mdc-typography--headline1,.form-group .form-group .form-group .form-group .form-group .mdc-typography--body1{color:rgb(var(--contrast-1400))}.form-group .form-group .form-group .form-group .form-group .mdc-typography--headline1{--mdc-typography-headline1-font-size:1rem;--mdc-typography-headline1-line-height:1rem;margin-top:0.25rem}.form-group .form-group .form-group .form-group .form-group .mdc-typography--headline1: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(--mdc-theme-on-surface);font-size:var(--mdc-typography-subtitle1-font-size, 0.875rem)}.limel-form-row--layout .description{margin:0;color:var(--mdc-theme-text-secondary-on-background);font-size:var(--mdc-typography-body2-font-size, 0.8125rem);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\";:host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}.mdc-typography{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-font-family, Roboto, sans-serif)}.mdc-typography--headline1{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-headline1-font-family, var(--mdc-typography-font-family, inherit));font-size:1.375rem;font-size:var(--mdc-typography-headline1-font-size, 1.375rem);line-height:1.375rem;line-height:var(--mdc-typography-headline1-line-height, 1.375rem);font-weight:300;font-weight:var(--mdc-typography-headline1-font-weight, 300);letter-spacing:-0.015625em;letter-spacing:var(--mdc-typography-headline1-letter-spacing, -0.015625em);text-decoration:inherit;text-decoration:var(--mdc-typography-headline1-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline1-text-transform, inherit)}.mdc-typography--headline2{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-headline2-font-family, var(--mdc-typography-font-family, inherit));font-size:1rem;font-size:var(--mdc-typography-headline2-font-size, 1rem);line-height:0.875rem;line-height:var(--mdc-typography-headline2-line-height, 0.875rem);font-weight:300;font-weight:var(--mdc-typography-headline2-font-weight, 300);letter-spacing:-0.0083333333em;letter-spacing:var(--mdc-typography-headline2-letter-spacing, -0.0083333333em);text-decoration:inherit;text-decoration:var(--mdc-typography-headline2-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline2-text-transform, inherit)}.mdc-typography--headline3{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-headline3-font-family, var(--mdc-typography-font-family, inherit));font-size:1rem;font-size:var(--mdc-typography-headline3-font-size, 1rem);line-height:0.875rem;line-height:var(--mdc-typography-headline3-line-height, 0.875rem);font-weight:400;font-weight:var(--mdc-typography-headline3-font-weight, 400);letter-spacing:normal;letter-spacing:var(--mdc-typography-headline3-letter-spacing, normal);text-decoration:inherit;text-decoration:var(--mdc-typography-headline3-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline3-text-transform, inherit)}.mdc-typography--headline4{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-headline4-font-family, var(--mdc-typography-font-family, inherit));font-size:1rem;font-size:var(--mdc-typography-headline4-font-size, 1rem);line-height:0.875rem;line-height:var(--mdc-typography-headline4-line-height, 0.875rem);font-weight:400;font-weight:var(--mdc-typography-headline4-font-weight, 400);letter-spacing:0.0073529412em;letter-spacing:var(--mdc-typography-headline4-letter-spacing, 0.0073529412em);text-decoration:inherit;text-decoration:var(--mdc-typography-headline4-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline4-text-transform, inherit)}.mdc-typography--headline5{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-headline5-font-family, var(--mdc-typography-font-family, inherit));font-size:0.875rem;font-size:var(--mdc-typography-headline5-font-size, 0.875rem);line-height:0.875rem;line-height:var(--mdc-typography-headline5-line-height, 0.875rem);font-weight:400;font-weight:var(--mdc-typography-headline5-font-weight, 400);letter-spacing:normal;letter-spacing:var(--mdc-typography-headline5-letter-spacing, normal);text-decoration:inherit;text-decoration:var(--mdc-typography-headline5-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline5-text-transform, inherit)}.mdc-typography--headline6{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-headline6-font-family, var(--mdc-typography-font-family, inherit));font-size:0.875rem;font-size:var(--mdc-typography-headline6-font-size, 0.875rem);line-height:0.875rem;line-height:var(--mdc-typography-headline6-line-height, 0.875rem);font-weight:500;font-weight:var(--mdc-typography-headline6-font-weight, 500);letter-spacing:0.0125em;letter-spacing:var(--mdc-typography-headline6-letter-spacing, 0.0125em);text-decoration:inherit;text-decoration:var(--mdc-typography-headline6-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline6-text-transform, inherit)}.mdc-typography--subtitle1{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, inherit));font-size:0.875rem;font-size:var(--mdc-typography-subtitle1-font-size, 0.875rem);line-height:1.125rem;line-height:var(--mdc-typography-subtitle1-line-height, 1.125rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight, 400);letter-spacing:0.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);text-decoration:inherit;text-decoration:var(--mdc-typography-subtitle1-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform, inherit)}.mdc-typography--subtitle2{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-subtitle2-font-family, var(--mdc-typography-font-family, inherit));font-size:0.8125rem;font-size:var(--mdc-typography-subtitle2-font-size, 0.8125rem);line-height:1.125rem;line-height:var(--mdc-typography-subtitle2-line-height, 1.125rem);font-weight:500;font-weight:var(--mdc-typography-subtitle2-font-weight, 500);letter-spacing:0.0071428571em;letter-spacing:var(--mdc-typography-subtitle2-letter-spacing, 0.0071428571em);text-decoration:inherit;text-decoration:var(--mdc-typography-subtitle2-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle2-text-transform, inherit)}.mdc-typography--body1{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, inherit));font-size:0.8125rem;font-size:var(--mdc-typography-body1-font-size, 0.8125rem);line-height:1.5rem;line-height:var(--mdc-typography-body1-line-height, 1.5rem);font-weight:400;font-weight:var(--mdc-typography-body1-font-weight, 400);letter-spacing:0.03125em;letter-spacing:var(--mdc-typography-body1-letter-spacing, 0.03125em);text-decoration:inherit;text-decoration:var(--mdc-typography-body1-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-body1-text-transform, inherit)}.mdc-typography--body2{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, inherit));font-size:0.8125rem;font-size:var(--mdc-typography-body2-font-size, 0.8125rem);line-height:1.625rem;line-height:var(--mdc-typography-body2-line-height, 1.625rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight, 400);letter-spacing:0.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, 0.0178571429em);text-decoration:inherit;text-decoration:var(--mdc-typography-body2-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform, inherit)}.mdc-typography--caption{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, inherit));font-size:0.6875rem;font-size:var(--mdc-typography-caption-font-size, 0.6875rem);line-height:0.875rem;line-height:var(--mdc-typography-caption-line-height, 0.875rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight, 400);letter-spacing:0.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, 0.0333333333em);text-decoration:inherit;text-decoration:var(--mdc-typography-caption-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform, inherit)}.mdc-typography--button{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, inherit));font-size:0.875rem;font-size:var(--mdc-typography-button-font-size, 0.875rem);line-height:2.25rem;line-height:var(--mdc-typography-button-line-height, 2.25rem);font-weight:500;font-weight:var(--mdc-typography-button-font-weight, 500);letter-spacing:0.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing, 0.0892857143em);text-decoration:none;text-decoration:var(--mdc-typography-button-text-decoration, none);text-transform:none;text-transform:var(--mdc-typography-button-text-transform, none)}.mdc-typography--overline{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-overline-font-family, var(--mdc-typography-font-family, inherit));font-size:0.6875rem;font-size:var(--mdc-typography-overline-font-size, 0.6875rem);line-height:0.875rem;line-height:var(--mdc-typography-overline-line-height, 0.875rem);font-weight:500;font-weight:var(--mdc-typography-overline-font-weight, 500);letter-spacing:0.1666666667em;letter-spacing:var(--mdc-typography-overline-letter-spacing, 0.1666666667em);text-decoration:none;text-decoration:var(--mdc-typography-overline-text-decoration, none);text-transform:uppercase;text-transform:var(--mdc-typography-overline-text-transform, uppercase)}.form-group{min-width:0}.limel-form-array-item--simple{display:flex;align-items:center;padding-bottom:var(--form-row-gap, 1rem)}.limel-form-array-item--simple *:first-child{flex-grow:1}limel-code-editor{margin-bottom:0.75rem}.limel-form-array-item--object{margin-bottom:0.25rem}.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(--mdc-theme-error, #b00020);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%}.mdc-typography--headline1{position:relative}.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 .mdc-typography--headline1,.form-group .mdc-typography--body1{color:rgb(var(--contrast-1100))}.form-group .mdc-typography--headline1{--mdc-typography-headline1-font-size:2rem;--mdc-typography-headline1-line-height:2.25rem;--mdc-typography-headline1-letter-spacing:-0.01rem;--mdc-typography-headline1-font-weight:400;margin-top:1.5rem;margin-bottom:0.25rem}.form-group .mdc-typography--body1{margin-top:0;margin-bottom:0.5rem}.form-group .form-group .mdc-typography--headline1,.form-group .form-group .mdc-typography--body1{color:rgb(var(--contrast-1200))}.form-group .form-group .mdc-typography--headline1{--mdc-typography-headline1-font-size:1.625rem;--mdc-typography-headline1-line-height:1.25rem;--mdc-typography-headline1-font-weight:300;margin-top:1rem}.form-group .form-group .mdc-typography--headline1:before{content:\"\";display:block;position:absolute;top:0;bottom:0;margin:auto;left:-0.75rem;background-color:var(--mdc-theme-primary);width:0.125rem;height:var(--mdc-typography-headline1-line-height);border-radius:0.125rem;opacity:0.6}.form-group .form-group .form-group .mdc-typography--headline1,.form-group .form-group .form-group .mdc-typography--body1{color:rgb(var(--contrast-1300))}.form-group .form-group .form-group .mdc-typography--headline1{--mdc-typography-headline1-font-size:1.375rem;--mdc-typography-headline1-line-height:1.5rem;margin-top:0.5rem}.form-group .form-group .form-group .mdc-typography--headline1:before{display:none}.form-group .form-group .form-group .form-group .mdc-typography--headline1,.form-group .form-group .form-group .form-group .mdc-typography--body1{color:rgb(var(--contrast-1400))}.form-group .form-group .form-group .form-group .mdc-typography--headline1{--mdc-typography-headline1-font-size:1.25rem;--mdc-typography-headline1-line-height:1.25rem;margin-top:1rem}.form-group .form-group .form-group .form-group .mdc-typography--headline1:before{display:none}.form-group .form-group .form-group .form-group .mdc-typography--headline1,.form-group .form-group .form-group .form-group .mdc-typography--body1{color:rgb(var(--contrast-1400))}.form-group .form-group .form-group .form-group .mdc-typography--headline1{--mdc-typography-headline1-font-size:1.25rem;--mdc-typography-headline1-line-height:1.25rem;margin-top:0.25rem}.form-group .form-group .form-group .form-group .mdc-typography--headline1:before{display:none}.form-group .form-group .form-group .form-group .form-group .mdc-typography--headline1,.form-group .form-group .form-group .form-group .form-group .mdc-typography--body1{color:rgb(var(--contrast-1400))}.form-group .form-group .form-group .form-group .form-group .mdc-typography--headline1{--mdc-typography-headline1-font-size:1rem;--mdc-typography-headline1-line-height:1rem;margin-top:0.25rem}.form-group .form-group .form-group .form-group .form-group .mdc-typography--headline1: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(--mdc-theme-on-surface);font-size:var(--mdc-typography-subtitle1-font-size, 0.875rem)}.limel-form-row--layout .description{margin:0;color:var(--mdc-theme-text-secondary-on-background);font-size:var(--mdc-typography-body2-font-size, 0.8125rem);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) {