@limetech/lime-elements 37.12.2 → 37.13.1

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,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}
+{"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: { delegatesFocus: 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,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-232e9616.js';
+import { r as registerInstance, c as createEvent, h } from './index-6156b4fd.js';
 
 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))}";
 
@@ -6,6 +6,7 @@ const ColorPicker = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.change = createEvent(this, "change", 7);
+    this.shouldFocus = false;
     this.renderTooltip = () => {
       if (!this.readonly && this.tooltipLabel) {
         return (h("limel-tooltip", { label: this.tooltipLabel, elementId: "tooltip-button" }));
@@ -15,15 +16,19 @@ const ColorPicker = class {
       if (this.readonly) {
         return this.renderPickerTrigger();
       }
-      return (h("limel-popover", { open: this.isOpen, openDirection: "bottom-start", onClose: this.onPopoverClose }, this.renderPickerTrigger(), h("limel-color-picker-palette", { value: this.value, label: this.label, helperText: this.helperText, onChange: this.handleChange, required: this.required })));
+      return (h("limel-popover", { open: this.isOpen, openDirection: "bottom-start", onClose: this.onPopoverClose }, this.renderPickerTrigger(), h("limel-color-picker-palette", { ref: this.setColorPickerPaletteElement, value: this.value, label: this.label, helperText: this.helperText, onChange: this.handleChange, required: this.required })));
     };
     this.renderPickerTrigger = () => {
       const background = this.value ? { '--background': this.value } : {};
       return (h("button", { class: "picker-trigger", slot: "trigger", style: background, role: "button", onClick: this.openPopover, id: "tooltip-button" }));
     };
+    this.setColorPickerPaletteElement = (element) => {
+      this.contentElement = element;
+    };
     this.openPopover = (event) => {
       event.stopPropagation();
       this.isOpen = true;
+      this.shouldFocus = this.isOpen;
     };
     this.onPopoverClose = (event) => {
       event.stopPropagation();
@@ -41,6 +46,13 @@ const ColorPicker = class {
     this.readonly = undefined;
     this.isOpen = false;
   }
+  componentDidRender() {
+    var _a;
+    if (this.shouldFocus && this.isOpen) {
+      this.shouldFocus = false;
+      (_a = this.contentElement) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+  }
   render() {
     return [
       this.renderTooltip(),

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

@@ -1 +1 @@
-{"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}
+{"file":"limel-color-picker.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,y6IAAy6I;;MCuBn7I,WAAW;;;;IAuDZ,gBAAW,GAAG,KAAK,CAAC;IAoBpB,kBAAa,GAAG;MACpB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,EAAE;QACrC,QACI,qBACI,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,SAAS,EAAC,gBAAgB,GAC5B,EACJ;OACL;KACJ,CAAC;IAEM,wBAAmB,GAAG;MAC1B,IAAI,IAAI,CAAC,QAAQ,EAAE;QACf,OAAO,IAAI,CAAC,mBAAmB,EAAE,CAAC;OACrC;MAED,QACI,qBACI,IAAI,EAAE,IAAI,CAAC,MAAM,EACjB,aAAa,EAAC,cAAc,EAC5B,OAAO,EAAE,IAAI,CAAC,cAAc,IAE3B,IAAI,CAAC,mBAAmB,EAAE,EAC3B,kCACI,GAAG,EAAE,IAAI,CAAC,4BAA4B,EACtC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,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,iCAA4B,GAAG,CACnC,OAA2C;MAE3C,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC;KACjC,CAAC;IAEM,gBAAW,GAAG,CAAC,KAAiB;MACpC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;MAEnB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC;KAClC,CAAC;IAEM,mBAAc,GAAG,CAAC,KAAkB;MACxC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;KACvB,CAAC;IAEM,iBAAY,GAAG,CAAC,KAA0B;MAC9C,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAClC,CAAC;;;;;;;kBAtGe,KAAK;;EAEf,kBAAkB;;IACrB,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,MAAM,EAAE;MACjC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;MACzB,MAAA,IAAI,CAAC,cAAc,0CAAE,KAAK,EAAE,CAAC;KAChC;GACJ;EAMM,MAAM;IACT,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 componentDidRender() {\n        if (this.shouldFocus && this.isOpen) {\n            this.shouldFocus = false;\n            this.contentElement?.focus();\n        }\n    }\n\n    private contentElement?: HTMLLimelColorPickerPaletteElement;\n\n    private shouldFocus = false;\n\n    public render() {\n        return [\n            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                    ref={this.setColorPickerPaletteElement}\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 setColorPickerPaletteElement = (\n        element: HTMLLimelColorPickerPaletteElement,\n    ) => {\n        this.contentElement = element;\n    };\n\n    private openPopover = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.isOpen = true;\n\n        this.shouldFocus = this.isOpen;\n    };\n\n    private onPopoverClose = (event: CustomEvent) => {\n        event.stopPropagation();\n        this.isOpen = false;\n    };\n\n    private handleChange = (event: CustomEvent<string>) => {\n        event.stopPropagation();\n        this.change.emit(event.detail);\n    };\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance } from './index-232e9616.js';
+import { r as registerInstance } from './index-6156b4fd.js';
 import { g as globalConfig } from './config-656a588f.js';
 
 const ConfigComponent = class {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-232e9616.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-6156b4fd.js';
 import { c as createRandomString } from './random-string-812b1c35.js';
 import { i as isIOSDevice, a as isAndroidDevice } from './device-39db3b5f.js';
 import './sv-f0ccdb13.js';

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-232e9616.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-6156b4fd.js';
 import { d as dispatchResizeEvent } from './dispatch-resize-event-cd1d230c.js';
 import { c as createRandomString } from './random-string-812b1c35.js';
 import { _ as __extends, a as __assign, M as MDCFoundation, c as __values, b as MDCComponent } from './component-8b6ce3e9.js';

package/dist/esm/limel-dock-button.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-232e9616.js';
+import { r as registerInstance, c as createEvent, h } from './index-6156b4fd.js';
 import { c as createRandomString } from './random-string-812b1c35.js';
 
 const dockButtonCss = "@charset \"UTF-8\";.button{all:unset;isolation:isolate;position:relative;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--limel-dock-item-text-color);background-color:var(--dock-background-color);box-sizing:border-box;display:flex;align-items:center;width:100%;height:var(--dock-item-height);border-radius:0.375rem;font-size:0.875rem;padding:0 0.5rem;min-width:var(--dock-item-height)}.button:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.button:active{background-color:var(--mdc-theme-surface);box-shadow:var(--button-shadow-inset-pressed);transform:translate3d(0, 0.05rem, 0)}.button:focus{outline:none}.button:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.button:hover{z-index:1}.button.selected{color:var(--limel-dock-item-text-color--selected);background-color:var(--dock-item-background-color--selected, rgb(var(--contrast-200)));box-shadow:var(--button-shadow-inset)}.button.selected:focus-visible{box-shadow:var(--button-shadow-inset), var(--shadow-depth-8-focused)}.button.selected .icon{color:var(--limel-dock-item-text--selected)}limel-popover{display:grid;grid-template-columns:100%}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:0.5rem;padding-right:0.75rem}.icon{flex-shrink:0;width:calc(var(--dock-item-height) - 1rem);height:calc(var(--dock-item-height) - 1rem);color:var(--dock-item-icon-color, var(--limel-dock-item-text-color))}limel-badge{position:absolute;top:-0.125rem;right:-0.125rem}.icon{position:relative}.icon:before{text-align:center;pointer-events:none;position:absolute;inset:0;background-color:var(--dock-background-color, rgb(var(--contrast-100)));background-position:center;background-repeat:no-repeat;background-size:contain;background-image:var(--limel-custom-home-icon);content:var(--limel-custom-home-icon-enabler)}.button.selected .icon:before{background-color:var(--dock-item-background-color--selected, rgb(var(--contrast-200)))}";

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-232e9616.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-6156b4fd.js';
 
 const dockCss = "@charset \"UTF-8\";:host(limel-dock){--badge-background-color:rgb(var(--color-red-default));--badge-text-color:rgb(var(--color-white));--dock-item-height:2.75rem;--dock-padding:0.25rem;--dock-expand-shrink-button-height:1rem;--limel-dock-item-text-color:var(\n      --dock-item-text-color,\n      rgb(var(--contrast-1100))\n  );--limel-dock-item-text-color--selected:var(\n      --dock-item-text-color--selected,\n      rgb(var(--contrast-1300))\n  );isolation:isolate;position:relative;display:inline-flex;flex-direction:column;background-color:var(--dock-background-color, rgb(var(--contrast-100)));box-shadow:var(--shadow-depth-8);padding-top:var(--dock-padding-top);padding-right:var(--dock-padding-right);padding-bottom:var(--dock-padding-bottom);padding-left:var(--dock-padding-left)}:host(limel-dock:not(.has-mobile-layout)){height:100%;width:calc(var(--dock-padding) * 2 + var(--dock-item-height))}:host(limel-dock.expanded){width:var(--dock-expanded-max-width, max-content)}.footer-separator{margin-top:auto;justify-self:flex-end}nav{box-sizing:border-box;display:inline-flex;flex-direction:column;gap:0.375rem;flex-grow:1;padding:var(--dock-padding);overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}nav::-webkit-scrollbar{display:none}:host(limel-dock.has-mobile-layout) nav{justify-content:space-between;flex-direction:row}limel-dock-button:first-of-type{--limel-custom-home-icon-enabler:var(--crm-custom-home-icon-enabler);--limel-custom-home-icon:var(--crm-custom-home-icon)}.expand-shrink{all:unset;box-sizing:border-box;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:transparent;display:flex;justify-content:center;align-items:center;height:var(--dock-expand-shrink-button-height);padding:0 0.5rem;margin:var(--dock-padding);border-radius:0.375rem}.expand-shrink:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.expand-shrink:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.expand-shrink:focus{outline:none}.expand-shrink:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.expand-shrink.expanded{justify-content:flex-end}.expand-shrink.expanded limel-icon{transform:rotateY(180deg)}.expand-shrink limel-icon{width:calc(var(--dock-expand-shrink-button-height) - 0.25rem);color:var(--dock-item-icon-color, var(--limel-dock-item-text-color))}";
 

package/dist/esm/limel-dynamic-label_2.entry.js

@@ -0,0 +1,86 @@
+import { r as registerInstance, h, H as Host } from './index-6156b4fd.js';
+import { g as getIconName } from './get-icon-props-0b65f85e.js';
+
+const dynamicLabelCss = "@charset \"UTF-8\";*{box-sizing:border-box;min-width:0}:host(limel-dynamic-label){--limel-dynamic-label-min-height:1.75rem;display:flex;gap:0.5rem;align-items:center;border-radius:0.5rem;min-width:0}limel-icon{--limel-icon-svg-margin:0.125rem;border-radius:0.25rem;flex-shrink:0;width:var(--limel-dynamic-label-min-height);color:rgb(var(--contrast-900))}span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex-grow:1;font-size:0.8125rem;color:var(--mdc-theme-on-surface)}";
+
+const DynamicLabel = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.value = undefined;
+    this.defaultLabel = {};
+    this.labels = [];
+  }
+  render() {
+    var _a, _b;
+    const label = this.labels.find((l) => l.value === this.value);
+    return [
+      this.renderIcon((_a = label === null || label === void 0 ? void 0 : label.icon) !== null && _a !== void 0 ? _a : this.defaultLabel.icon),
+      this.renderLabel((_b = label === null || label === void 0 ? void 0 : label.text) !== null && _b !== void 0 ? _b : this.defaultLabel.text),
+    ];
+  }
+  renderIcon(icon) {
+    const iconName = getIconName(icon);
+    if (!iconName) {
+      return;
+    }
+    let iconColor;
+    let iconBackgroundColor;
+    if (typeof icon === 'object') {
+      iconColor = icon.color;
+      iconBackgroundColor = icon.backgroundColor;
+    }
+    const iconProps = {
+      role: 'presentation',
+      name: iconName,
+      style: {
+        color: iconColor,
+        'background-color': iconBackgroundColor,
+      },
+    };
+    return h("limel-icon", Object.assign({}, iconProps));
+  }
+  renderLabel(label = '') {
+    return h("span", null, label);
+  }
+};
+DynamicLabel.style = dynamicLabelCss;
+
+const helperLineCss = ":host(limel-helper-line){transition:opacity 0.2s ease;box-sizing:border-box;display:grid;min-width:0;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:0.6875rem;line-height:normal;color:rgb(var(--contrast-1200))}div{display:flex;justify-content:space-between;gap:0.75rem;overflow:hidden;padding:0 1rem}:host(limel-helper-line.invalid) .helper-text{color:var(--mdc-theme-error)}.counter{flex-shrink:0;margin-left:auto}.helper-text,.counter{padding-top:0.125rem}:host(limel-helper-line){transition:grid-template-rows var(--limel-h-l-grid-template-rows-transition-speed, 0.46s) cubic-bezier(1, 0.09, 0, 0.89);grid-template-rows:var(--limel-h-l-grid-template-rows, 1fr)}:host(limel-helper-line.hide){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}";
+
+const HelperLine = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.hasContent = () => {
+      return !!(this.maxLength > 0 ||
+        (this.helperText && this.helperText.length > 0));
+    };
+    this.renderHelperText = () => {
+      if (!this.helperText) {
+        return;
+      }
+      return (h("span", { class: "helper-text", id: this.helperTextId }, this.helperText));
+    };
+    this.renderCharacterCounter = () => {
+      const counter = `${this.length} / ${this.maxLength}`;
+      if (!this.maxLength) {
+        return;
+      }
+      return h("span", { class: "counter" }, counter);
+    };
+    this.helperText = undefined;
+    this.length = undefined;
+    this.maxLength = undefined;
+    this.invalid = false;
+    this.helperTextId = undefined;
+  }
+  render() {
+    return (h(Host, { tabIndex: -1, class: {
+        invalid: this.invalid,
+      }, style: !this.hasContent() ? { display: 'none' } : {}, "aria-hidden": !this.hasContent() }, h("div", null, this.renderHelperText(), this.renderCharacterCounter())));
+  }
+};
+HelperLine.style = helperLineCss;
+
+export { DynamicLabel as limel_dynamic_label, HelperLine as limel_helper_line };
+
+//# sourceMappingURL=limel-dynamic-label_2.entry.js.map

package/dist/esm/limel-dynamic-label_2.entry.js.map

@@ -0,0 +1 @@
+{"file":"limel-dynamic-label.limel-helper-line.entry.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,qeAAqe;;MC2Bhf,YAAY;;;;wBAgBuB,EAAE;kBAQrB,EAAE;;EAEpB,MAAM;;IACT,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC;IAE9D,OAAO;MACH,IAAI,CAAC,UAAU,CAAC,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,mCAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;MACtD,IAAI,CAAC,WAAW,CAAC,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,mCAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;KAC1D,CAAC;GACL;EAEO,UAAU,CAAC,IAAoB;IACnC,MAAM,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;IACnC,IAAI,CAAC,QAAQ,EAAE;MACX,OAAO;KACV;IAED,IAAI,SAA6B,CAAC;IAClC,IAAI,mBAAuC,CAAC;IAE5C,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;MAC1B,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC;MACvB,mBAAmB,GAAG,IAAI,CAAC,eAAe,CAAC;KAC9C;IAED,MAAM,SAAS,GAAG;MACd,IAAI,EAAE,cAAc;MACpB,IAAI,EAAE,QAAQ;MACd,KAAK,EAAE;QACH,KAAK,EAAE,SAAS;QAChB,kBAAkB,EAAE,mBAAmB;OAC1C;KACJ,CAAC;IAEF,OAAO,kCAAgB,SAAS,EAAI,CAAC;GACxC;EAEO,WAAW,CAAC,QAAgB,EAAE;IAClC,OAAO,gBAAO,KAAK,CAAQ,CAAC;GAC/B;;;;AC1FL,MAAM,aAAa,GAAG,+yBAA+yB;;MC2BxzB,UAAU;;;IAqDX,eAAU,GAAG;MACjB,OAAO,CAAC,EACJ,IAAI,CAAC,SAAS,GAAG,CAAC;SACjB,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAClD,CAAC;KACL,CAAC;IAEM,qBAAgB,GAAG;MACvB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;QAClB,OAAO;OACV;MAED,QACI,YAAM,KAAK,EAAC,aAAa,EAAC,EAAE,EAAE,IAAI,CAAC,YAAY,IAC1C,IAAI,CAAC,UAAU,CACb,EACT;KACL,CAAC;IAEM,2BAAsB,GAAG;MAC7B,MAAM,OAAO,GAAG,GAAG,IAAI,CAAC,MAAM,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;MAErD,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;QACjB,OAAO;OACV;MAED,OAAO,YAAM,KAAK,EAAC,SAAS,IAAE,OAAO,CAAQ,CAAC;KACjD,CAAC;;;;mBArDyB,KAAK;;;EAQzB,MAAM;IACT,QACI,EAAC,IAAI,IACD,QAAQ,EAAE,CAAC,CAAC,EACZ,KAAK,EAAE;QACH,OAAO,EAAE,IAAI,CAAC,OAAO;OACxB,EACD,KAAK,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,iBACvC,CAAC,IAAI,CAAC,UAAU,EAAE,IAE/B,eACK,IAAI,CAAC,gBAAgB,EAAE,EACvB,IAAI,CAAC,sBAAsB,EAAE,CAC5B,CACH,EACT;GACL;;;;;;","names":[],"sources":["./src/components/dynamic-label/dynamic-label.scss?tag=limel-dynamic-label&encapsulation=shadow","./src/components/dynamic-label/dynamic-label.tsx","./src/components/helper-line/helper-line.scss?tag=limel-helper-line&encapsulation=shadow","./src/components/helper-line/helper-line.tsx"],"sourcesContent":["@use '../../style/mixins.scss';\n\n* {\n    box-sizing: border-box;\n    min-width: 0;\n}\n\n:host(limel-dynamic-label) {\n    --limel-dynamic-label-min-height: 1.75rem;\n    display: flex;\n    gap: 0.5rem;\n    align-items: center;\n    border-radius: 0.5rem;\n    min-width: 0;\n}\n\nlimel-icon {\n    --limel-icon-svg-margin: 0.125rem;\n    border-radius: 0.25rem;\n    flex-shrink: 0;\n    width: var(--limel-dynamic-label-min-height);\n    color: rgb(\n        var(--contrast-900)\n    ); // The default `false` color. Will be overwritten by `Icon`\n}\n\nspan {\n    @include mixins.truncate-text;\n    flex-grow: 1;\n    font-size: 0.8125rem; // `13px`, Like Checkbox & Switch\n    color: var(--mdc-theme-on-surface);\n}\n","import { getIconName } from '../icon/get-icon-props';\nimport { Component, Prop, h } from '@stencil/core';\nimport { Label, LabelValue } from './label.types';\nimport { Icon } from '../../interface';\n\n/**\n * This components displays a different label depending on the current given\n * value. A label can consist of a text and an optional icon. If no matching\n * label is found among the given `labels`, the `defaultLabel` will be displayed.\n *\n * One use case of the component is to enhance the visualization of a `boolean`\n * field like a checkbox or switch in a `readonly` state.\n *\n * The reason we offer this component is that the default styling\n * of the Checkbox or Toggle switch in the `readonly` state may not always\n * provide the best way of _visualizing information_, potentially leading to\n * confusion and negatively affecting the end-users' experience.\n *\n * @exampleComponent limel-example-dynamic-label\n * @exampleComponent limel-example-dynamic-label-readonly-boolean\n * @beta\n */\n@Component({\n    tag: 'limel-dynamic-label',\n    shadow: true,\n    styleUrl: 'dynamic-label.scss',\n})\nexport class DynamicLabel {\n    /**\n     * The current value of the component which is used to match with the given\n     * `labels` to determine what label to display.\n     *\n     * If not matching label is found, the `defaultLabel` is displayed.\n     */\n    @Prop()\n    public value: LabelValue;\n\n    /**\n     * The label to display when no matching value is found in the `labels`\n     * array. This is a fallback label that ensures there's always a label\n     * displayed for the component.\n     */\n    @Prop({ reflect: true })\n    public defaultLabel: Omit<Label, 'value'> = {};\n\n    /**\n     * A list of available labels. Each label has a corresponding value that\n     * will be matched with the current `value` of the component to determine\n     * what label to display.\n     */\n    @Prop()\n    public labels: Label[] = [];\n\n    public render() {\n        const label = this.labels.find((l) => l.value === this.value);\n\n        return [\n            this.renderIcon(label?.icon ?? this.defaultLabel.icon),\n            this.renderLabel(label?.text ?? this.defaultLabel.text),\n        ];\n    }\n\n    private renderIcon(icon?: string | Icon) {\n        const iconName = getIconName(icon);\n        if (!iconName) {\n            return;\n        }\n\n        let iconColor: string | undefined;\n        let iconBackgroundColor: string | undefined;\n\n        if (typeof icon === 'object') {\n            iconColor = icon.color;\n            iconBackgroundColor = icon.backgroundColor;\n        }\n\n        const iconProps = {\n            role: 'presentation',\n            name: iconName,\n            style: {\n                color: iconColor,\n                'background-color': iconBackgroundColor,\n            },\n        };\n\n        return <limel-icon {...iconProps} />;\n    }\n\n    private renderLabel(label: string = '') {\n        return <span>{label}</span>;\n    }\n}\n",":host(limel-helper-line) {\n    transition: opacity 0.2s ease;\n\n    box-sizing: border-box;\n    display: grid;\n\n    min-width: 0; // prevents overflowing, if component is placed in flex containers\n\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-font-smoothing: antialiased;\n    font-size: 0.6875rem;\n    line-height: normal;\n\n    color: rgb(var(--contrast-1200));\n}\n\ndiv {\n    display: flex;\n    justify-content: space-between;\n    gap: 0.75rem;\n    overflow: hidden;\n    padding: 0 1rem;\n}\n\n:host(limel-helper-line.invalid) {\n    .helper-text {\n        color: var(--mdc-theme-error);\n    }\n}\n\n.counter {\n    flex-shrink: 0;\n    margin-left: auto;\n}\n\n.helper-text,\n.counter {\n    padding-top: 0.125rem;\n}\n\n// This animates height of the helper line, from `0` to `auto`.\n// To get this animation effect, the consumer component should\n// add `hide` classed accordingly.\n:host(limel-helper-line) {\n    transition: grid-template-rows\n        var(--limel-h-l-grid-template-rows-transition-speed, 0.46s)\n        cubic-bezier(1, 0.09, 0, 0.89);\n    grid-template-rows: var(--limel-h-l-grid-template-rows, 1fr);\n}\n\n:host(limel-helper-line.hide) {\n    --limel-h-l-grid-template-rows-transition-speed: 0.3s;\n    --limel-h-l-grid-template-rows: 0fr;\n}\n// End: animating height\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n/**\n * This is an internal and private component that many input fields\n * use to display a helper text, along with a character counter below the\n * input field.\n *\n * We created this to keep the visual styles the same everywhere\n * and to avoid importing styles separately.\n *\n * Also this enables us to open the helper line in limel-portal,\n * more easily without having to send the styles to the portal.\n *\n * @exampleComponent limel-example-helper-line\n * @exampleComponent limel-example-helper-line-invalid\n * @exampleComponent limel-example-helper-line-long-text\n * @exampleComponent limel-example-helper-line-long-text-no-counter\n * @exampleComponent limel-example-helper-line-character-counter\n * @exampleComponent limel-example-helper-line-empty\n * @exampleComponent limel-example-helper-line-animation\n * @private\n */\n@Component({\n    tag: 'limel-helper-line',\n    shadow: true,\n    styleUrl: 'helper-line.scss',\n})\nexport class HelperLine {\n    /**\n     * The helper text that is displayed on the left side.\n     */\n    @Prop({ reflect: true })\n    public helperText?: string;\n\n    /**\n     * Length of the current input value, coming from the parent component.\n     * Used in the character counter section on the right side.\n     */\n    @Prop({ reflect: true })\n    public length?: number;\n\n    /**\n     * Maximum length of the characters, defined on the parent component.\n     * Used in the character counter section on the right side.\n     */\n    @Prop({ reflect: true })\n    public maxLength?: number;\n\n    /**\n     * Turns `true`, when the parent component is invalid.\n     * For example, when the parent component is `required` but is left empty.\n     * Or when the input format is invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid?: boolean = false;\n\n    /**\n     * Used by `aria-controls` and `aria-describedby` in the parent component.\n     */\n    @Prop({ reflect: true })\n    public helperTextId?: string;\n\n    public render() {\n        return (\n            <Host\n                tabIndex={-1}\n                class={{\n                    invalid: this.invalid,\n                }}\n                style={!this.hasContent() ? { display: 'none' } : {}}\n                aria-hidden={!this.hasContent()}\n            >\n                <div>\n                    {this.renderHelperText()}\n                    {this.renderCharacterCounter()}\n                </div>\n            </Host>\n        );\n    }\n\n    private hasContent = () => {\n        return !!(\n            this.maxLength > 0 ||\n            (this.helperText && this.helperText.length > 0)\n        );\n    };\n\n    private renderHelperText = () => {\n        if (!this.helperText) {\n            return;\n        }\n\n        return (\n            <span class=\"helper-text\" id={this.helperTextId}>\n                {this.helperText}\n            </span>\n        );\n    };\n\n    private renderCharacterCounter = () => {\n        const counter = `${this.length} / ${this.maxLength}`;\n\n        if (!this.maxLength) {\n            return;\n        }\n\n        return <span class=\"counter\">{counter}</span>;\n    };\n}\n"],"version":3}

package/dist/esm/limel-file-dropzone_2.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-232e9616.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-6156b4fd.js';
 import { g as getFileIcon, a as getFileExtensionTitle, b as getFileColor, c as getFileBackgroundColor } from './file-metadata-9a4780e2.js';
 import { b as baseForOwn } from './_baseForOwn-c95521ce.js';
 import { b as isArrayLike } from './isArrayLike-385e0f31.js';

package/dist/esm/limel-file-viewer.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-232e9616.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-6156b4fd.js';
 import { t as translate } from './translations-dea847ae.js';
 
 function detectExtension(fileName, url) {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-232e9616.js';
+import { r as registerInstance, c as createEvent, h } from './index-6156b4fd.js';
 import { t as translate } from './translations-dea847ae.js';
 import { g as getFileIcon, a as getFileExtensionTitle, b as getFileColor, c as getFileBackgroundColor } from './file-metadata-9a4780e2.js';
 import './get-icon-props-0b65f85e.js';

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-232e9616.js';
+import { r as registerInstance, c as createEvent, h } from './index-6156b4fd.js';
 import { t as translate } from './translations-dea847ae.js';
 import { c as createCommonjsModule, a as commonjsGlobal, g as getDefaultExportFromCjs } from './_commonjsHelpers-5ec8f9b7.js';
 import './sv-f0ccdb13.js';
@@ -6792,7 +6792,11 @@ function initComponentClass(Class, attr, children) {
     children,
   };
   const instance = new Class(attr);
-  return instance.render();
+  const node = instance.render();
+  if ("ref" in attr) {
+    attachRef(attr.ref, instance);
+  }
+  return node;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars