@limetech/lime-elements 37.0.0 → 37.1.0-next.10

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

@@ -0,0 +1,2 @@
+import{r as e,c as o,h as t,g as r}from"./p-3075aa67.js";import{d as n}from"./p-c70b1ea3.js";import{m as a,r as i}from"./p-c9bdda85.js";const s=':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}:host([disabled]){pointer-events: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.625rem;padding-right:0.625rem;height:3rem}.title{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-headline2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));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);color:var(--mdc-theme-on-surface);justify-self:flex-start;padding-right:0.75rem;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:0.0625rem;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}@keyframes fade-in-body{0%{opacity:0}100%{opacity:1}}.body{animation:fade-in-body 0.3s ease-in forwards;background-color:var(--body-background-color, var(--contrast-100));padding-left:var(--body-padding, 1.25rem);padding-right:var(--body-padding, 1.25rem);margin-bottom:1.5rem;border-radius:0 0 var(--border-radius-of-header) var(--border-radius-of-header);display:none;opacity:0}section.open .body{display:block}.body:before,.body:after{content:" ";display:table}.body:after{clear:both}.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 l=class{constructor(r){e(this,r);this.open=o(this,"open",7);this.close=o(this,"close",7);this.action=o(this,"action",7);this.onClick=()=>{this.handleInteraction()};this.handleInteraction=()=>{this.isOpen=!this.isOpen;if(this.isOpen){this.open.emit();const e=100;setTimeout(n,e)}else{this.close.emit()}};this.renderActions=()=>{if(!this.actions){return}return t("div",{class:"actions"},this.actions.map(this.renderActionButton))};this.renderActionButton=e=>t("limel-icon-button",{icon:e.icon,label:e.label,disabled:e.disabled,onClick:this.handleActionClick(e)});this.handleActionClick=e=>o=>{o.stopPropagation();this.action.emit(e)};this.isOpen=false;this.header=undefined;this.actions=undefined}componentDidRender(){const e=this.host.shadowRoot.querySelector(".open-close-toggle");a(e)}disconnectedCallback(){const e=this.host.shadowRoot.querySelector(".open-close-toggle");i(e)}render(){return t("section",{class:`${this.isOpen?"open":""}`},t("header",null,t("button",{class:"open-close-toggle",onClick:this.onClick}),t("div",{class:"expand-icon"},t("div",{class:"line"}),t("div",{class:"line"}),t("div",{class:"line"}),t("div",{class:"line"})),t("h2",{class:"title mdc-typography mdc-typography--headline2"},this.header),t("div",{class:"divider-line"}),this.renderActions()),t("div",{class:"body"},t("slot",null)))}get host(){return r(this)}};l.style=s;export{l as limel_collapsible_section};
+//# sourceMappingURL=p-ee887c40.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["collapsibleSectionCss","CollapsibleSection","this","onClick","handleInteraction","isOpen","open","emit","waitForUiToRender","setTimeout","dispatchResizeEvent","close","renderActions","actions","h","class","map","renderActionButton","action","icon","label","disabled","handleActionClick","event","stopPropagation","componentDidRender","button","host","shadowRoot","querySelector","makeEnterClickable","disconnectedCallback","removeEnterClickable","render","header"],"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/internal/lime-typography';\n@use '../../style/functions';\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:host([disabled]) {\n    pointer-events: 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: background-color 0.4s ease, 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: functions.pxToRem(10);\n    padding-right: functions.pxToRem(10);\n    height: functions.pxToRem(48);\n}\n\n.title {\n    @include lime-typography.typography(headline2);\n    color: var(--mdc-theme-on-surface);\n\n    justify-self: flex-start;\n    padding-right: functions.pxToRem(12);\n\n    user-select: none; // mostly to improve experience on Android, where tapping on sections selects the text too\n\n    padding-right: functions.pxToRem(8);\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: functions.pxToRem(2);\n    border-radius: functions.pxToRem(1);\n    background-color: var(--header-stroke-color, rgb(var(--contrast-900)));\n    margin-right: functions.pxToRem(8);\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@keyframes fade-in-body {\n    0% {\n        opacity: 0;\n    }\n    100% {\n        opacity: 1;\n    }\n}\n\n.body {\n    animation: fade-in-body 0.3s ease-in forwards;\n    background-color: var(--body-background-color, var(--contrast-100));\n    padding-left: var(--body-padding, functions.pxToRem(20));\n    padding-right: var(--body-padding, functions.pxToRem(20));\n    margin-bottom: functions.pxToRem(24);\n    border-radius: 0 0 var(--border-radius-of-header)\n        var(--border-radius-of-header);\n\n    display: none;\n    opacity: 0;\n    section.open & {\n        display: block;\n    }\n\n    &:before,\n    &:after {\n        content: ' ';\n        display: table;\n    }\n\n    &:after {\n        clear: both;\n    }\n}\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/makeEnterClickable';\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    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 class=\"open-close-toggle\" onClick={this.onClick} />\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 class=\"body\">\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"],"mappings":"wIAAA,MAAMA,EAAwB,o5M,MC4BjBC,EAAkB,M,gHAgFnBC,KAAAC,QAAU,KACdD,KAAKE,mBAAmB,EAGpBF,KAAAE,kBAAoB,KACxBF,KAAKG,QAAUH,KAAKG,OAEpB,GAAIH,KAAKG,OAAQ,CACbH,KAAKI,KAAKC,OACV,MAAMC,EAAoB,IAC1BC,WAAWC,EAAqBF,E,KAC7B,CACHN,KAAKS,MAAMJ,M,GAIXL,KAAAU,cAAgB,KACpB,IAAKV,KAAKW,QAAS,CACf,M,CAGJ,OACIC,EAAA,OAAKC,MAAM,WACNb,KAAKW,QAAQG,IAAId,KAAKe,oBACrB,EAINf,KAAAe,mBAAsBC,GAEtBJ,EAAA,qBACIK,KAAMD,EAAOC,KACbC,MAAOF,EAAOE,MACdC,SAAUH,EAAOG,SACjBlB,QAASD,KAAKoB,kBAAkBJ,KAKpChB,KAAAoB,kBAAqBJ,GAAoBK,IAC7CA,EAAMC,kBACNtB,KAAKgB,OAAOX,KAAKW,EAAO,E,YApHH,M,6CAmClBO,qBACH,MAAMC,EAASxB,KAAKyB,KAAKC,WAAWC,cAChC,sBAGJC,EAAmBJ,E,CAGhBK,uBACH,MAAML,EAASxB,KAAKyB,KAAKC,WAAWC,cAChC,sBAGJG,EAAqBN,E,CAGlBO,SACH,OACInB,EAAA,WAASC,MAAO,GAAGb,KAAKG,OAAS,OAAS,MACtCS,EAAA,cACIA,EAAA,UAAQC,MAAM,oBAAoBZ,QAASD,KAAKC,UAChDW,EAAA,OAAKC,MAAM,eACPD,EAAA,OAAKC,MAAM,SACXD,EAAA,OAAKC,MAAM,SACXD,EAAA,OAAKC,MAAM,SACXD,EAAA,OAAKC,MAAM,UAEfD,EAAA,MAAIC,MAAM,kDACLb,KAAKgC,QAEVpB,EAAA,OAAKC,MAAM,iBACVb,KAAKU,iBAEVE,EAAA,OAAKC,MAAM,QACPD,EAAA,c"}

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

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as e,g as o}from"./p-3075aa67.js";import{c as r}from"./p-3ccdc4a3.js";import{m as a,r as s}from"./p-c9bdda85.js";const n="limel-action-bar-item{transition:opacity 0.2s ease-in-out;position:relative;display:flex;align-items:center}limel-action-bar-item:not([is-visible]){opacity:0}button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:0.25rem;width:100%;min-width:var(--action-bar-item-height);max-width:var(--action-bar-item-max-width, 10rem);height:var(--action-bar-item-height);border-radius:var(--action-bar-item-height);font-size:0.875rem;padding:0 0.25rem}button:not([disabled]){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-action-bar-item-text-color);background-color:var(--action-bar-background-color)}button:not([disabled]):hover{color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-hovered)}button:not([disabled]):active{background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-inset-pressed);transform:translate3d(0, 0.05rem, 0)}button:not([disabled]):focus{outline:none}button:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button:has(.text){padding:0 0.5rem}button[disabled]{opacity:0.4}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 0.25rem}limel-icon{flex-shrink:0;width:calc(var(--action-bar-item-height) - 0.75rem);height:calc(var(--action-bar-item-height) - 0.75rem);color:var(--action-bar-item-icon-color, var(--limel-action-bar-item-text-color))}limel-tooltip{position:absolute;bottom:0;left:0;right:0}div[role=separator]{width:1px;height:1.5rem;border-radius:var(--action-bar-item-height);background-color:var(--limel-action-bar-item-text-color);opacity:0.2}@media (pointer: fine){div[role=separator]{margin-right:0.5rem;margin-left:0.5rem}}limel-menu{--notification-badge-background-color:rgb(var(--contrast-600));--notification-badge-text-color:rgb(var(--contrast-1200))}limel-menu[open] button{box-shadow:var(--button-shadow-inset)}button[slot=trigger]{animation:fade-in ease-out 0.25s;font-size:0.75rem;font-weight:bold;transform:translate3d(0, 0, 0)}@keyframes fade-in{0%{scale:0.8;opacity:0}100%{scale:1;opacity:1}}";const l=class{constructor(e){t(this,e);this.select=i(this,"select",7);this.handleClick=t=>{t.stopPropagation();this.select.emit(this.item)};this.item=undefined;this.isVisible=true;this.tooltipId=r()}componentWillLoad(){a(this.host)}disconnectedCallback(){s(this.host)}render(){if(!this.isItem(this.item)&&this.item.separator){return e("div",{role:"separator"})}return e("button",{id:this.tooltipId,type:"button",onClick:this.handleClick,disabled:this.isDisabled()},this.renderIcon(),this.renderLabel(),this.renderTooltip())}isItem(t){return!("separator"in t)}isDisabled(){if(this.isItem(this.item)&&this.item.disabled){return true}if(!this.isVisible){return true}}renderIcon(){if(this.isItem(this.item)&&!this.item.icon){return}if("icon"in this.item){return e("limel-icon",{name:this.item.icon,style:{"--action-bar-item-icon-color":`${this.item.iconColor}`}})}}renderLabel(){if(!this.isItem(this.item)||this.item.iconOnly){return}return e("span",{class:"text"},this.item.text)}renderTooltip(){if(!this.isItem(this.item)){return}if(this.item.text){return e("limel-tooltip",{elementId:this.tooltipId,label:this.item.text,helperLabel:this.item.commandText})}if(this.item.commandText){return e("limel-tooltip",{elementId:this.tooltipId,label:this.item.commandText})}}get host(){return o(this)}};l.style=n;const c=class{constructor(e){t(this,e);this.select=i(this,"select",7);this.countOverflowedItems=()=>`+${this.numberOfMenuItems}`;this.handleSelect=t=>{t.stopPropagation();this.select.emit(t.detail)};this.items=undefined;this.openDirection="bottom-end"}render(){return[e("limel-menu",{openDirection:this.openDirection,items:this.items,onSelect:this.handleSelect},e("button",{slot:"trigger"},this.countOverflowedItems()))]}get numberOfMenuItems(){return this.items.filter((t=>this.isMenuItem(t))).length}isMenuItem(t){return!("separator"in t)}};export{l as limel_action_bar_item,c as limel_action_bar_overflow_menu};
+//# sourceMappingURL=p-f4ff7ecc.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["actionBarItemCss","ActionBarButton","constructor","hostRef","this","handleClick","event","stopPropagation","select","emit","item","tooltipId","createRandomString","componentWillLoad","makeEnterClickable","host","disconnectedCallback","removeEnterClickable","render","isItem","separator","h","role","id","type","onClick","disabled","isDisabled","renderIcon","renderLabel","renderTooltip","isVisible","icon","name","style","iconColor","iconOnly","class","text","elementId","label","helperLabel","commandText","ActionBarOverflowMenu","countOverflowedItems","numberOfMenuItems","handleSelect","detail","openDirection","items","onSelect","slot","filter","isMenuItem","length"],"sources":["./src/components/action-bar/action-bar-item/action-bar-item.scss?tag=limel-action-bar-item","./src/components/action-bar/action-bar-item/action-bar-item.tsx","./src/components/action-bar/action-bar-item/action-bar-overflow-menu.tsx"],"sourcesContent":["@use '../../../style/mixins';\n@use '../../../style/functions';\n\nlimel-action-bar-item {\n    transition: opacity 0.2s ease-in-out;\n    position: relative;\n    display: flex;\n    align-items: center;\n\n    &:not([is-visible]) {\n        opacity: 0;\n    }\n}\n\nbutton {\n    all: unset;\n\n    &:not([disabled]) {\n        @include mixins.is-flat-inset-clickable(\n            $color: var(--limel-action-bar-item-text-color),\n            $color--hovered: var(--limel-action-bar-item-text-color),\n            $background-color: var(--action-bar-background-color),\n            $background-color--hovered: var(--action-bar-background-color),\n            $background-color--inset: var(--action-bar-background-color)\n        );\n        @include mixins.visualize-keyboard-focus;\n    }\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.25rem;\n\n    width: 100%;\n    min-width: var(--action-bar-item-height);\n    max-width: var(--action-bar-item-max-width, 10rem);\n    height: var(--action-bar-item-height);\n\n    border-radius: var(--action-bar-item-height);\n    font-size: functions.pxToRem(14);\n    padding: 0 0.25rem;\n\n    &:has(.text) {\n        padding: 0 0.5rem;\n    }\n\n    &[disabled] {\n        opacity: 0.4;\n    }\n}\n\n.text {\n    @include mixins.truncate-text();\n    padding: 0 0.25rem;\n}\n\nlimel-icon {\n    flex-shrink: 0;\n    width: calc(var(--action-bar-item-height) - 0.75rem);\n    height: calc(var(--action-bar-item-height) - 0.75rem);\n    color: var(\n        --action-bar-item-icon-color,\n        var(--limel-action-bar-item-text-color)\n    );\n}\n\nlimel-tooltip {\n    // CSS hack due to the tooltip's placement bug\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n}\n\ndiv[role='separator'] {\n    width: 1px;\n    height: 1.5rem;\n    border-radius: var(--action-bar-item-height);\n    background-color: var(--limel-action-bar-item-text-color);\n    opacity: 0.2;\n\n    @media (pointer: fine) {\n        margin-right: 0.5rem;\n        margin-left: 0.5rem;\n    }\n}\n\n// 👇 Overflow menu\n\nlimel-menu {\n    --notification-badge-background-color: rgb(var(--contrast-600));\n    --notification-badge-text-color: rgb(var(--contrast-1200));\n\n    &[open] {\n        button {\n            box-shadow: var(--button-shadow-inset);\n        }\n    }\n}\n\nbutton[slot='trigger'] {\n    animation: fade-in ease-out 0.25s;\n    font-size: 0.75rem;\n    font-weight: bold;\n    transform: translate3d(0, 0, 0);\n}\n\n@keyframes fade-in {\n    0% {\n        scale: 0.8;\n        opacity: 0;\n    }\n    100% {\n        scale: 1;\n        opacity: 1;\n    }\n}\n","import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n} from '@stencil/core';\nimport { ActionBarItem } from '../action-bar.types';\nimport { createRandomString } from '../../../util/random-string';\nimport { ListSeparator } from 'src/interface';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from 'src/util/makeEnterClickable';\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-action-bar-item',\n    shadow: false,\n    styleUrl: 'action-bar-item.scss',\n})\nexport class ActionBarButton {\n    /**\n     * Item that is placed in the action bar.\n     */\n    @Prop()\n    public item!: ActionBarItem | ListSeparator;\n\n    /**\n     * Fired when a action bar item has been clicked.\n     */\n    @Event()\n    public select: EventEmitter<ActionBarItem | ListSeparator>;\n\n    /**\n     * When the item is displayed in the available width,\n     * this will be `false`.\n     */\n    @Prop({ reflect: true })\n    public isVisible: boolean = true;\n\n    @Element()\n    private host: HTMLLimelActionBarItemElement;\n\n    /**\n     * Used to attach the right tooltip to the right button\n     */\n    private tooltipId: string;\n\n    constructor() {\n        this.tooltipId = createRandomString();\n    }\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public render() {\n        if (!this.isItem(this.item) && this.item.separator) {\n            return <div role=\"separator\" />;\n        }\n\n        return (\n            <button\n                id={this.tooltipId}\n                type=\"button\"\n                onClick={this.handleClick}\n                disabled={this.isDisabled()}\n            >\n                {this.renderIcon()}\n                {this.renderLabel()}\n                {this.renderTooltip()}\n            </button>\n        );\n    }\n\n    private handleClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.select.emit(this.item);\n    };\n\n    private isItem(item: ActionBarItem | ListSeparator): item is ActionBarItem {\n        return !('separator' in item);\n    }\n\n    private isDisabled() {\n        if (this.isItem(this.item) && this.item.disabled) {\n            return true;\n        }\n\n        if (!this.isVisible) {\n            return true;\n        }\n    }\n\n    private renderIcon() {\n        if (this.isItem(this.item) && !this.item.icon) {\n            return;\n        }\n\n        if ('icon' in this.item) {\n            return (\n                <limel-icon\n                    name={this.item.icon}\n                    style={{\n                        '--action-bar-item-icon-color': `${this.item.iconColor}`,\n                    }}\n                />\n            );\n        }\n    }\n\n    private renderLabel() {\n        if (!this.isItem(this.item) || this.item.iconOnly) {\n            return;\n        }\n\n        return <span class=\"text\">{this.item.text}</span>;\n    }\n\n    private renderTooltip() {\n        if (!this.isItem(this.item)) {\n            return;\n        }\n\n        if (this.item.text) {\n            return (\n                <limel-tooltip\n                    elementId={this.tooltipId}\n                    label={this.item.text}\n                    helperLabel={this.item.commandText}\n                />\n            );\n        }\n\n        if (this.item.commandText) {\n            return (\n                <limel-tooltip\n                    elementId={this.tooltipId}\n                    label={this.item.commandText}\n                />\n            );\n        }\n    }\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport {\n    MenuItem,\n    LimelMenuCustomEvent,\n    ListSeparator,\n    ActionBarItem,\n    OpenDirection,\n} from '@limetech/lime-elements';\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-action-bar-overflow-menu',\n    shadow: false,\n})\nexport class ActionBarOverflowMenu {\n    /**\n     * List of the items that should be rendered in the overflow menu.\n     */\n    @Prop()\n    public items: Array<MenuItem | ListSeparator>;\n\n    /**\n     * Defines the location that the content of the overflow menu\n     * appears, in relation to its trigger.\n     * It defaults to `bottom-end`, since in normal scenarios\n     * (for example when the action bar is not floating at the bottom of the screen)\n     * this menu is the right-most item in the user interface of the component.\n     */\n    @Prop({ reflect: true })\n    public openDirection: OpenDirection = 'bottom-end';\n\n    @Event()\n    public select: EventEmitter<ActionBarItem>;\n\n    public render() {\n        return [\n            <limel-menu\n                openDirection={this.openDirection}\n                items={this.items}\n                onSelect={this.handleSelect}\n            >\n                <button slot=\"trigger\">{this.countOverflowedItems()}</button>\n            </limel-menu>,\n        ];\n    }\n\n    private countOverflowedItems = () => {\n        return `+${this.numberOfMenuItems}`;\n    };\n\n    private handleSelect = (event: LimelMenuCustomEvent<MenuItem>) => {\n        event.stopPropagation();\n        this.select.emit(event.detail);\n    };\n\n    private get numberOfMenuItems() {\n        return this.items.filter((item) => this.isMenuItem(item)).length;\n    }\n\n    private isMenuItem(item: MenuItem | ListSeparator): item is MenuItem {\n        return !('separator' in item);\n    }\n}\n"],"mappings":"wIAAA,MAAMA,EAAmB,8qE,MCwBZC,EAAe,MA4BxBC,YAAAC,G,yCA+BQC,KAAAC,YAAeC,IACnBA,EAAMC,kBACNH,KAAKI,OAAOC,KAAKL,KAAKM,KAAK,E,mCA3CH,KAWxBN,KAAKO,UAAYC,G,CAGdC,oBACHC,EAAmBV,KAAKW,K,CAGrBC,uBACHC,EAAqBb,KAAKW,K,CAGvBG,SACH,IAAKd,KAAKe,OAAOf,KAAKM,OAASN,KAAKM,KAAKU,UAAW,CAChD,OAAOC,EAAA,OAAKC,KAAK,a,CAGrB,OACID,EAAA,UACIE,GAAInB,KAAKO,UACTa,KAAK,SACLC,QAASrB,KAAKC,YACdqB,SAAUtB,KAAKuB,cAEdvB,KAAKwB,aACLxB,KAAKyB,cACLzB,KAAK0B,gB,CAUVX,OAAOT,GACX,QAAS,cAAeA,E,CAGpBiB,aACJ,GAAIvB,KAAKe,OAAOf,KAAKM,OAASN,KAAKM,KAAKgB,SAAU,CAC9C,OAAO,I,CAGX,IAAKtB,KAAK2B,UAAW,CACjB,OAAO,I,EAIPH,aACJ,GAAIxB,KAAKe,OAAOf,KAAKM,QAAUN,KAAKM,KAAKsB,KAAM,CAC3C,M,CAGJ,GAAI,SAAU5B,KAAKM,KAAM,CACrB,OACIW,EAAA,cACIY,KAAM7B,KAAKM,KAAKsB,KAChBE,MAAO,CACH,+BAAgC,GAAG9B,KAAKM,KAAKyB,c,EAOzDN,cACJ,IAAKzB,KAAKe,OAAOf,KAAKM,OAASN,KAAKM,KAAK0B,SAAU,CAC/C,M,CAGJ,OAAOf,EAAA,QAAMgB,MAAM,QAAQjC,KAAKM,KAAK4B,K,CAGjCR,gBACJ,IAAK1B,KAAKe,OAAOf,KAAKM,MAAO,CACzB,M,CAGJ,GAAIN,KAAKM,KAAK4B,KAAM,CAChB,OACIjB,EAAA,iBACIkB,UAAWnC,KAAKO,UAChB6B,MAAOpC,KAAKM,KAAK4B,KACjBG,YAAarC,KAAKM,KAAKgC,a,CAKnC,GAAItC,KAAKM,KAAKgC,YAAa,CACvB,OACIrB,EAAA,iBACIkB,UAAWnC,KAAKO,UAChB6B,MAAOpC,KAAKM,KAAKgC,a,8CClIxBC,EAAqB,M,wDAgCtBvC,KAAAwC,qBAAuB,IACpB,IAAIxC,KAAKyC,oBAGZzC,KAAA0C,aAAgBxC,IACpBA,EAAMC,kBACNH,KAAKI,OAAOC,KAAKH,EAAMyC,OAAO,E,wCAvBI,Y,CAK/B7B,SACH,MAAO,CACHG,EAAA,cACI2B,cAAe5C,KAAK4C,cACpBC,MAAO7C,KAAK6C,MACZC,SAAU9C,KAAK0C,cAEfzB,EAAA,UAAQ8B,KAAK,WAAW/C,KAAKwC,yB,CAc7BC,wBACR,OAAOzC,KAAK6C,MAAMG,QAAQ1C,GAASN,KAAKiD,WAAW3C,KAAO4C,M,CAGtDD,WAAW3C,GACf,QAAS,cAAeA,E"}

package/dist/types/components/action-bar/action-bar-item/action-bar-item.d.ts

@@ -18,11 +18,14 @@ export declare class ActionBarButton {
    * this will be `false`.
    */
   isVisible: boolean;
+  private host;
   /**
    * Used to attach the right tooltip to the right button
    */
   private tooltipId;
   constructor();
+  componentWillLoad(): void;
+  disconnectedCallback(): void;
   render(): any;
   private handleClick;
   private isItem;

package/dist/types/components/action-bar/action-bar.d.ts

@@ -25,7 +25,6 @@ import { ListSeparator } from '../list/list-item.types';
  * @exampleComponent limel-example-action-bar-floating
  * @exampleComponent limel-example-action-bar-styling
  * @exampleComponent limel-example-action-bar-as-primary-component
- * @private
  */
 export declare class ActionBar {
   /**

package/dist/types/components/button/button.d.ts

@@ -43,7 +43,10 @@ export declare class Button {
    */
   loadingFailed: boolean;
   private justLoaded;
+  private host;
   private justLoadedTimeout?;
+  componentWillLoad(): void;
+  disconnectedCallback(): void;
   render(): any;
   protected loadingWatcher(newValue: boolean, oldValue: boolean): void;
   private renderLoadingIcons;

package/dist/types/components/checkbox/checkbox.d.ts

@@ -1,4 +1,20 @@
 /**
+ * The Checkbox component is a classic and essential element in UI design that allows
+ * users to make multiple selections from a predefined list of options. The Checkbox component is commonly used in forms and settings interfaces to enable users to
+ * select one or more items from a list of choices.
+ *
+ * ## States of a Checkbox
+ * When a user clicks or taps on the box, it toggles between two states:
+ * Checked and Unchecked.
+ *
+ * However, a Checkbox can visualize a third state called the "Indeterminate" state.
+ * In this state, the checkbox appears as a filled box with a horizontal line or dash inside it.
+ *
+ * The Indeterminate state is typically used when dealing with checkbox groups
+ * that have hierarchical relationships or when the group contains sub-items.
+ * This state is used to indicate that that some, but not all, of the items in a group are selected.
+ *
+ * <limel-example-switch-vs-checkbox />
  * @exampleComponent limel-example-checkbox
  * @exampleComponent limel-example-checkbox-helper-text
  */
@@ -43,6 +59,7 @@ export declare class Checkbox {
   private formField;
   private mdcCheckbox;
   private id;
+  private helperTextId;
   protected handleCheckedChange(newValue: boolean): void;
   protected handleIndeterminateChange(newValue: boolean): void;
   connectedCallback(): void;

package/dist/types/components/checkbox/checkbox.template.d.ts

@@ -10,6 +10,7 @@ interface CheckboxTemplateProps {
   onChange?: (event: Event) => void;
   label?: string;
   helperText?: string;
+  helperTextId?: string;
 }
 export declare const CheckboxTemplate: FunctionalComponent<CheckboxTemplateProps>;
 export {};

package/dist/types/components/collapsible-section/collapsible-section.d.ts

@@ -32,6 +32,9 @@ export declare class CollapsibleSection {
    * Emitted when an action is clicked inside the header
    */
   private action;
+  private host;
+  componentDidRender(): void;
+  disconnectedCallback(): void;
   render(): any;
   private onClick;
   private handleInteraction;

package/dist/types/components/icon-button/icon-button.d.ts

@@ -25,6 +25,8 @@ export declare class IconButton {
   disabled: boolean;
   private host;
   connectedCallback(): void;
+  componentWillLoad(): void;
+  disconnectedCallback(): void;
   componentDidLoad(): void;
   private initialize;
   render(): any;

package/dist/types/components/input-field/input-field.d.ts

@@ -148,6 +148,8 @@ export declare class InputField {
   private mdcTextField;
   private completionsList;
   private portalId;
+  private helperTextId;
+  private labelId;
   constructor();
   connectedCallback(): void;
   componentDidLoad(): void;

package/dist/types/components/switch/switch.d.ts

@@ -1,4 +1,13 @@
 /**
+ * The Switch component is a fundamental element in UI design that serves as a toggle switch
+ * to control the state of a specific setting or option in an application or website.
+ * The two distinct positions of the Switch are visually indicative of the two states:
+ * ON and OFF; making it easy for users to understand the current state of the controlled feature.
+ *
+ * The Switch component is widely used in user interfaces to enable users to
+ * quickly and intuitively change binary settings.
+ *
+ * <limel-example-switch-vs-checkbox />
  * @exampleComponent limel-example-switch
  */
 export declare class Switch {
@@ -31,6 +40,7 @@ export declare class Switch {
   private fieldId;
   private mdcSwitch;
   connectedCallback(): void;
+  componentWillLoad(): void;
   componentDidLoad(): void;
   private initialize;
   disconnectedCallback(): void;

package/dist/types/components.d.ts

@@ -66,7 +66,6 @@ export namespace Components {
      * @exampleComponent limel-example-action-bar-floating
      * @exampleComponent limel-example-action-bar-styling
      * @exampleComponent limel-example-action-bar-as-primary-component
-     * @private 
      */
     interface LimelActionBar {
         /**
@@ -272,6 +271,18 @@ export namespace Components {
         "type"?: CalloutType;
     }
     /**
+     * The Checkbox component is a classic and essential element in UI design that allows
+     * users to make multiple selections from a predefined list of options. The Checkbox component is commonly used in forms and settings interfaces to enable users to
+     * select one or more items from a list of choices.
+     * ## States of a Checkbox
+     * When a user clicks or taps on the box, it toggles between two states:
+     * Checked and Unchecked.
+     * However, a Checkbox can visualize a third state called the "Indeterminate" state.
+     * In this state, the checkbox appears as a filled box with a horizontal line or dash inside it.
+     * The Indeterminate state is typically used when dealing with checkbox groups
+     * that have hierarchical relationships or when the group contains sub-items.
+     * This state is used to indicate that that some, but not all, of the items in a group are selected.
+     * <limel-example-switch-vs-checkbox />
      * @exampleComponent limel-example-checkbox
      * @exampleComponent limel-example-checkbox-helper-text
      */
@@ -1818,6 +1829,13 @@ export namespace Components {
         "primary": boolean;
     }
     /**
+     * The Switch component is a fundamental element in UI design that serves as a toggle switch
+     * to control the state of a specific setting or option in an application or website.
+     * The two distinct positions of the Switch are visually indicative of the two states:
+     * ON and OFF; making it easy for users to understand the current state of the controlled feature.
+     * The Switch component is widely used in user interfaces to enable users to
+     * quickly and intuitively change binary settings.
+     * <limel-example-switch-vs-checkbox />
      * @exampleComponent limel-example-switch
      */
     interface LimelSwitch {
@@ -2195,7 +2213,6 @@ declare global {
      * @exampleComponent limel-example-action-bar-floating
      * @exampleComponent limel-example-action-bar-styling
      * @exampleComponent limel-example-action-bar-as-primary-component
-     * @private 
      */
     interface HTMLLimelActionBarElement extends Components.LimelActionBar, HTMLStencilElement {
     }
@@ -2329,6 +2346,18 @@ declare global {
         new (): HTMLLimelCalloutElement;
     };
     /**
+     * The Checkbox component is a classic and essential element in UI design that allows
+     * users to make multiple selections from a predefined list of options. The Checkbox component is commonly used in forms and settings interfaces to enable users to
+     * select one or more items from a list of choices.
+     * ## States of a Checkbox
+     * When a user clicks or taps on the box, it toggles between two states:
+     * Checked and Unchecked.
+     * However, a Checkbox can visualize a third state called the "Indeterminate" state.
+     * In this state, the checkbox appears as a filled box with a horizontal line or dash inside it.
+     * The Indeterminate state is typically used when dealing with checkbox groups
+     * that have hierarchical relationships or when the group contains sub-items.
+     * This state is used to indicate that that some, but not all, of the items in a group are selected.
+     * <limel-example-switch-vs-checkbox />
      * @exampleComponent limel-example-checkbox
      * @exampleComponent limel-example-checkbox-helper-text
      */
@@ -3075,6 +3104,13 @@ declare global {
         new (): HTMLLimelSplitButtonElement;
     };
     /**
+     * The Switch component is a fundamental element in UI design that serves as a toggle switch
+     * to control the state of a specific setting or option in an application or website.
+     * The two distinct positions of the Switch are visually indicative of the two states:
+     * ON and OFF; making it easy for users to understand the current state of the controlled feature.
+     * The Switch component is widely used in user interfaces to enable users to
+     * quickly and intuitively change binary settings.
+     * <limel-example-switch-vs-checkbox />
      * @exampleComponent limel-example-switch
      */
     interface HTMLLimelSwitchElement extends Components.LimelSwitch, HTMLStencilElement {
@@ -3284,7 +3320,6 @@ declare namespace LocalJSX {
      * @exampleComponent limel-example-action-bar-floating
      * @exampleComponent limel-example-action-bar-styling
      * @exampleComponent limel-example-action-bar-as-primary-component
-     * @private 
      */
     interface LimelActionBar {
         /**
@@ -3495,6 +3530,18 @@ declare namespace LocalJSX {
         "type"?: CalloutType;
     }
     /**
+     * The Checkbox component is a classic and essential element in UI design that allows
+     * users to make multiple selections from a predefined list of options. The Checkbox component is commonly used in forms and settings interfaces to enable users to
+     * select one or more items from a list of choices.
+     * ## States of a Checkbox
+     * When a user clicks or taps on the box, it toggles between two states:
+     * Checked and Unchecked.
+     * However, a Checkbox can visualize a third state called the "Indeterminate" state.
+     * In this state, the checkbox appears as a filled box with a horizontal line or dash inside it.
+     * The Indeterminate state is typically used when dealing with checkbox groups
+     * that have hierarchical relationships or when the group contains sub-items.
+     * This state is used to indicate that that some, but not all, of the items in a group are selected.
+     * <limel-example-switch-vs-checkbox />
      * @exampleComponent limel-example-checkbox
      * @exampleComponent limel-example-checkbox-helper-text
      */
@@ -5205,6 +5252,13 @@ declare namespace LocalJSX {
         "primary"?: boolean;
     }
     /**
+     * The Switch component is a fundamental element in UI design that serves as a toggle switch
+     * to control the state of a specific setting or option in an application or website.
+     * The two distinct positions of the Switch are visually indicative of the two states:
+     * ON and OFF; making it easy for users to understand the current state of the controlled feature.
+     * The Switch component is widely used in user interfaces to enable users to
+     * quickly and intuitively change binary settings.
+     * <limel-example-switch-vs-checkbox />
      * @exampleComponent limel-example-switch
      */
     interface LimelSwitch {
@@ -5545,7 +5599,6 @@ declare module "@stencil/core" {
              * @exampleComponent limel-example-action-bar-floating
              * @exampleComponent limel-example-action-bar-styling
              * @exampleComponent limel-example-action-bar-as-primary-component
-             * @private 
              */
             "limel-action-bar": LocalJSX.LimelActionBar & JSXBase.HTMLAttributes<HTMLLimelActionBarElement>;
             /**
@@ -5639,6 +5692,18 @@ declare module "@stencil/core" {
              */
             "limel-callout": LocalJSX.LimelCallout & JSXBase.HTMLAttributes<HTMLLimelCalloutElement>;
             /**
+             * The Checkbox component is a classic and essential element in UI design that allows
+             * users to make multiple selections from a predefined list of options. The Checkbox component is commonly used in forms and settings interfaces to enable users to
+             * select one or more items from a list of choices.
+             * ## States of a Checkbox
+             * When a user clicks or taps on the box, it toggles between two states:
+             * Checked and Unchecked.
+             * However, a Checkbox can visualize a third state called the "Indeterminate" state.
+             * In this state, the checkbox appears as a filled box with a horizontal line or dash inside it.
+             * The Indeterminate state is typically used when dealing with checkbox groups
+             * that have hierarchical relationships or when the group contains sub-items.
+             * This state is used to indicate that that some, but not all, of the items in a group are selected.
+             * <limel-example-switch-vs-checkbox />
              * @exampleComponent limel-example-checkbox
              * @exampleComponent limel-example-checkbox-helper-text
              */
@@ -6185,6 +6250,13 @@ declare module "@stencil/core" {
              */
             "limel-split-button": LocalJSX.LimelSplitButton & JSXBase.HTMLAttributes<HTMLLimelSplitButtonElement>;
             /**
+             * The Switch component is a fundamental element in UI design that serves as a toggle switch
+             * to control the state of a specific setting or option in an application or website.
+             * The two distinct positions of the Switch are visually indicative of the two states:
+             * ON and OFF; making it easy for users to understand the current state of the controlled feature.
+             * The Switch component is widely used in user interfaces to enable users to
+             * quickly and intuitively change binary settings.
+             * <limel-example-switch-vs-checkbox />
              * @exampleComponent limel-example-switch
              */
             "limel-switch": LocalJSX.LimelSwitch & JSXBase.HTMLAttributes<HTMLLimelSwitchElement>;

package/dist/types/global/{icon-cache.d.ts → icon-cache/cache-storage-icon-cache.d.ts}

@@ -1,7 +1,7 @@
-export declare class IconCache {
+export declare class CacheStorageIconCache {
   private cache;
   private promises;
-  constructor();
+  constructor(cache: Promise<Cache>);
   /**
    * Get icon data from the cache
    * @param {string} name name of the icon
@@ -14,5 +14,3 @@ export declare class IconCache {
   private validSvg;
   private getUrl;
 }
-declare const _default: IconCache;
-export default _default;

package/dist/types/global/icon-cache/factory.d.ts

@@ -0,0 +1,4 @@
+import { CacheStorageIconCache } from './cache-storage-icon-cache';
+import { InMemoryIconCache } from './in-memory-icon-cache';
+declare const _default: CacheStorageIconCache | InMemoryIconCache;
+export default _default;

package/dist/types/global/icon-cache/in-memory-icon-cache.d.ts

@@ -0,0 +1,15 @@
+export declare class InMemoryIconCache {
+  private cache;
+  private resolveFunctions;
+  /**
+   * Get icon data from the cache
+   * @param {string} name name of the icon
+   * @param {string} path path on the server where the assets are located
+   * @returns {string} svg markup
+   */
+  get(name: any, path?: string): Promise<any>;
+  private getIcon;
+  private fetchData;
+  private validSvg;
+  private resolvePromises;
+}

package/dist/types/util/makeEnterClickable.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Overrides the default browser behavior for clickable elements
+ * When focused and pressing down enter, avoids calling onClick repeatedly
+ * @param {HTMLElement} element the clickable element
+ */
+export declare function makeEnterClickable(element: HTMLElement): void;
+export declare function removeEnterClickable(element: HTMLElement): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "37.0.0",
+  "version": "37.1.0-next.10",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -40,31 +40,31 @@
     "generate": "stencil generate"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "^17.6.6",
+    "@commitlint/config-conventional": "^17.6.7",
     "@popperjs/core": "^2.11.8",
     "@rjsf/core": "^2.4.2",
     "@stencil/core": "^3.4.1",
-    "@stencil/sass": "^3.0.4",
+    "@stencil/sass": "^3.0.5",
     "@types/codemirror": "^5.60.2",
     "@types/html-escaper": "^3.0.0",
     "@types/jest": "^27.4.0",
-    "@types/lodash-es": "^4.17.7",
-    "@types/react": "^18.2.14",
+    "@types/lodash-es": "^4.17.8",
+    "@types/react": "^18.2.15",
     "@types/tabulator-tables": "^4.9.4",
     "@typescript-eslint/eslint-plugin": "^5.61.0",
-    "@typescript-eslint/parser": "^5.61.0",
+    "@typescript-eslint/parser": "^5.62.0",
     "ajv": "^6.12.6",
     "awesome-debounce-promise": "^2.1.0",
     "codemirror": "^5.65.9",
     "cross-env": "^7.0.3",
     "dayjs": "^1.11.9",
-    "eslint": "^8.44.0",
+    "eslint": "^8.45.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-ban": "^1.6.0",
-    "eslint-plugin-jsdoc": "^46.4.3",
+    "eslint-plugin-jsdoc": "^46.4.4",
     "eslint-plugin-prefer-arrow": "^1.2.3",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react": "^7.33.0",
     "eslint-plugin-sonarjs": "^0.19.0",
     "flatpickr": "^4.6.13",
     "html-escaper": "^3.0.3",

package/dist/cjs/checkbox.template-234f4813.js.map

@@ -1 +0,0 @@
-{"file":"checkbox.template-234f4813.js","mappings":";;;;MAea,gBAAgB,GAA+C,CACxE,KAAK;EAEL,MAAM,UAAU,GAAG,EAAE,CAAC;EACtB,IAAI,KAAK,CAAC,aAAa,EAAE;IACrB,UAAU,CAAC,oBAAoB,CAAC,GAAG,MAAM,CAAC;GAC7C;EAED,OAAO;IACHA,iBAAK,KAAK,EAAC,iBAAiB;MACxBA,iBACI,KAAK,EAAE;UACH,cAAc,EAAE,IAAI;UACpB,uBAAuB,EAAE,KAAK,CAAC,OAAO;UACtC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,6BAA6B,EAAE,KAAK,CAAC,aAAa;UAClD,yBAAyB,EAAE,KAAK,CAAC,QAAQ;SAC5C;QAEDA,iCACI,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,8BAA8B,EACpC,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,EAC1C,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,IACpB,UAAU,EAChB;QACFA,iBAAK,KAAK,EAAC,0BAA0B;UACjCA,iBAAK,KAAK,EAAC,yBAAyB,EAAC,OAAO,EAAC,WAAW;YACpDA,kBACI,KAAK,EAAC,8BAA8B,EACpC,IAAI,EAAC,MAAM,EACX,CAAC,EAAC,kCAAkC,GACtC,CACA;UACNA,iBAAK,KAAK,EAAC,yBAAyB,GAAG,CACrC,CACJ;MACNA,mBACI,KAAK,EAAE;UACH,uBAAuB,EAAE,KAAK,CAAC,OAAO;UACtC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,6BAA6B,EAAE,KAAK,CAAC,aAAa;UAClD,yBAAyB,EAAE,KAAK,CAAC,QAAQ;SAC5C,EACD,OAAO,EAAE,KAAK,CAAC,EAAE,IAEhB,KAAK,CAAC,KAAK,CACR,CACN;IACNA,QAAC,UAAU,IAAC,IAAI,EAAE,KAAK,CAAC,UAAU,GAAI;GACzC,CAAC;AACN,EAAE;AAEF,MAAM,UAAU,GAA0C,CAAC,KAAK;EAC5D,IAAI,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;IAChC,OAAO;GACV;EAED,OAAOA,+BAAmB,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,GAAI,CAAC;AAChE,CAAC;;;;","names":["h"],"sources":["./src/components/checkbox/checkbox.template.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\ninterface CheckboxTemplateProps {\n    disabled?: boolean;\n    id: string;\n    checked?: boolean;\n    readonly?: boolean;\n    indeterminate?: boolean;\n    required?: boolean;\n    invalid?: boolean;\n    onChange?: (event: Event) => void;\n    label?: string;\n    helperText?: string;\n}\n\nexport const CheckboxTemplate: FunctionalComponent<CheckboxTemplateProps> = (\n    props\n) => {\n    const inputProps = {};\n    if (props.indeterminate) {\n        inputProps['data-indeterminate'] = 'true';\n    }\n\n    return [\n        <div class=\"mdc-form-field \">\n            <div\n                class={{\n                    'mdc-checkbox': true,\n                    'mdc-checkbox--invalid': props.invalid,\n                    'mdc-checkbox--disabled': props.disabled,\n                    'mdc-checkbox--required': props.required,\n                    'mdc-checkbox--indeterminate': props.indeterminate,\n                    'lime-checkbox--readonly': props.readonly,\n                }}\n            >\n                <input\n                    type=\"checkbox\"\n                    class=\"mdc-checkbox__native-control\"\n                    id={props.id}\n                    checked={props.checked}\n                    disabled={props.disabled || props.readonly}\n                    required={props.required}\n                    onChange={props.onChange}\n                    {...inputProps}\n                />\n                <div class=\"mdc-checkbox__background\">\n                    <svg class=\"mdc-checkbox__checkmark\" viewBox=\"0 0 24 24\">\n                        <path\n                            class=\"mdc-checkbox__checkmark-path\"\n                            fill=\"none\"\n                            d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"\n                        />\n                    </svg>\n                    <div class=\"mdc-checkbox__mixedmark\" />\n                </div>\n            </div>\n            <label\n                class={{\n                    'mdc-checkbox--invalid': props.invalid,\n                    'mdc-checkbox--disabled': props.disabled,\n                    'mdc-checkbox--required': props.required,\n                    'mdc-checkbox--indeterminate': props.indeterminate,\n                    'lime-checkbox--readonly': props.readonly,\n                }}\n                htmlFor={props.id}\n            >\n                {props.label}\n            </label>\n        </div>,\n        <HelperText text={props.helperText} />,\n    ];\n};\n\nconst HelperText: FunctionalComponent<{ text: string }> = (props) => {\n    if (typeof props.text !== 'string') {\n        return;\n    }\n\n    return <limel-helper-line helperText={props.text.trim()} />;\n};\n"],"version":3}