@limetech/lime-elements 37.1.0-next.1 → 37.1.0-next.11

package/dist/cjs/limel-grid.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-aafa56ee.js');
+const index = require('./index-38eb64b5.js');
 
 const gridCss = ":host{display:block;position:relative}:host([hidden]){display:none}slot{display:grid;grid-template-areas:var(--lime-grid-area, \"\");grid-template-columns:repeat(var(--lime-grid-columns, 4), minmax(0, 1fr));gap:var(--lime-grid-gutter, 1rem);grid-auto-flow:row dense;grid-auto-rows:var(--lime-grid-cell-height, 2.5rem);margin:0;height:100%;width:100%}";
 

package/dist/cjs/limel-header.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-aafa56ee.js');
+const index = require('./index-38eb64b5.js');
 
 const headerCss = ":host(limel-header){display:flex;align-items:center;box-sizing:border-box;width:100%;background-color:var(--header-background-color, rgb(var(--contrast-300)));border-top-left-radius:var(--header-top-right-left-border-radius, 0.75rem);border-top-right-radius:var(--header-top-right-left-border-radius, 0.75rem);padding:0.25rem}.information{display:flex;flex-grow:1;align-items:center;min-width:0}.icon{flex-shrink:0;color:var(--header-icon-color, rgb(var(--contrast-1100)));background-color:var(--header-icon-background-color, transparent);width:1.75rem;margin:0 0.5rem}.headings{min-width:0;margin-left:0.25rem}.heading,.subheading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0;padding:0}.heading{color:var(--header-heading-color, rgb(var(--contrast-1100)));font-size:1.0625rem}.subheading{color:var(--header-subheading-color, rgb(var(--contrast-900)));font-size:0.875rem;font-weight:lighter}.subheading__supporting-text{color:var(--header-supporting-text-color, var(--header-subheading-color))}.subheading__supporting-text span{margin:0 0.5rem;font-weight:bold}slot[name=actions]{flex-shrink:0}:host(limel-header.is-narrow){padding:0.125rem 0.25rem}:host(limel-header.is-narrow) .icon{margin-right:0.125rem;width:1.25rem}:host(limel-header.is-narrow) .heading{font-size:0.9375rem}:host(limel-header.has-responsive-layout){display:grid;grid-template-columns:repeat(auto-fit, minmax(clamp(50%, var(--header-responsive-breakpoint, 22rem), 100%), 1fr))}:host(limel-header.has-responsive-layout) .headings{padding-right:0.5rem}:host(limel-header.has-responsive-layout) slot[name=actions]{display:flex;justify-content:flex-end}";
 

package/dist/cjs/limel-helper-line.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-aafa56ee.js');
+const index = require('./index-38eb64b5.js');
 
 const helperLineCss = ":host(limel-helper-line){transition:opacity 0.2s ease;box-sizing:border-box;display:none;justify-content:space-between;gap:0.75rem;padding:0.125rem 1rem 0 1rem;min-width:0;font-family:Roboto, sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:0.6875rem;font-weight:400;letter-spacing:0.0333333333em;line-height:normal;color:rgb(var(--contrast-1200))}:host(limel-helper-line.show){display:flex}:host(limel-helper-line.invalid) .helper-text{color:var(--mdc-theme-error)}.counter{flex-shrink:0;margin-left:auto}";
 

package/dist/cjs/limel-icon-button.cjs.entry.js

@@ -2,7 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-aafa56ee.js');
+const index = require('./index-38eb64b5.js');
+const makeEnterClickable = require('./makeEnterClickable-aa2ed75b.js');
 
 const iconButtonCss = ".mdc-icon-button{font-size:24px;width:48px;height:48px;padding:12px}.mdc-icon-button.mdc-icon-button--reduced-size{width:40px;height:40px;padding:8px}.mdc-icon-button.mdc-icon-button--reduced-size.mdc-icon-button--touch{margin-top:4px;margin-bottom:4px;margin-right:4px;margin-left:4px}.mdc-icon-button .mdc-icon-button__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%)}.mdc-icon-button:disabled{color:rgba(0, 0, 0, 0.38);color:var(--mdc-theme-text-disabled-on-light, rgba(0, 0, 0, 0.38))}.mdc-icon-button svg,.mdc-icon-button img{width:24px;height:24px}.mdc-icon-button{display:inline-block;position:relative;box-sizing:border-box;border:none;outline:none;background-color:transparent;fill:currentColor;color:inherit;text-decoration:none;cursor:pointer;user-select:none;overflow:visible}.mdc-icon-button .mdc-icon-button__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%)}.mdc-icon-button:disabled{cursor:default;pointer-events:none}.mdc-icon-button--display-flex{align-items:center;display:inline-flex;justify-content:center}.mdc-icon-button__icon{display:inline-block}.mdc-icon-button__icon.mdc-icon-button__icon--on{display:none}.mdc-icon-button--touch{margin-top:0px;margin-bottom:0px}.mdc-icon-button--on .mdc-icon-button__icon{display:none}.mdc-icon-button--on .mdc-icon-button__icon.mdc-icon-button__icon--on{display:inline-block}@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-icon-button{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);will-change:transform, opacity}.mdc-icon-button .mdc-icon-button__ripple::before,.mdc-icon-button .mdc-icon-button__ripple::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-icon-button .mdc-icon-button__ripple::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-icon-button .mdc-icon-button__ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-icon-button.mdc-ripple-upgraded--unbounded .mdc-icon-button__ripple::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-icon-button.mdc-ripple-upgraded--foreground-activation .mdc-icon-button__ripple::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.mdc-icon-button.mdc-ripple-upgraded--foreground-deactivation .mdc-icon-button__ripple::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-icon-button .mdc-icon-button__ripple::before,.mdc-icon-button .mdc-icon-button__ripple::after{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::before,.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::after{top:var(--mdc-ripple-top, calc(50% - 50%));left:var(--mdc-ripple-left, calc(50% - 50%));width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-icon-button .mdc-icon-button__ripple::before,.mdc-icon-button .mdc-icon-button__ripple::after{background-color:#000;background-color:var(--mdc-ripple-color, #000)}.mdc-icon-button:hover .mdc-icon-button__ripple::before,.mdc-icon-button.mdc-ripple-surface--hover .mdc-icon-button__ripple::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-icon-button.mdc-ripple-upgraded--background-focused .mdc-icon-button__ripple::before,.mdc-icon-button:not(.mdc-ripple-upgraded):focus .mdc-icon-button__ripple::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-icon-button:not(.mdc-ripple-upgraded) .mdc-icon-button__ripple::after{transition:opacity 150ms linear}.mdc-icon-button:not(.mdc-ripple-upgraded):active .mdc-icon-button__ripple::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-icon-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-icon-button .mdc-icon-button__ripple{pointer-events:none;z-index:1}:host([hidden]){display:none}:host([disabled]){pointer-events:none}.mdc-icon-button{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(--icon-background-color, transparent);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:2.25rem;width:2.25rem;padding:0.125rem;border-radius:50%}.mdc-icon-button:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.mdc-icon-button:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}:host([elevated]) .mdc-icon-button:not(:hover):not(:active):not(:focus-visible){box-shadow:var(--button-shadow-normal)}.mdc-icon-button:disabled{color:var(--mdc-theme-text-disabled-on-background)}.mdc-icon-button:focus-visible{box-shadow:var(--shadow-depth-8-focused);border-radius:50%}limel-icon{width:1.25rem;height:1.25rem}";
 
@@ -17,6 +18,12 @@ const IconButton = class {
   connectedCallback() {
     this.initialize();
   }
+  componentWillLoad() {
+    makeEnterClickable.makeEnterClickable(this.host);
+  }
+  disconnectedCallback() {
+    makeEnterClickable.removeEnterClickable(this.host);
+  }
   componentDidLoad() {
     this.initialize();
   }

package/dist/cjs/limel-icon-button.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"limel-icon-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,u/LAAu/L;;MCchgM,UAAU;;;;oBAYD,KAAK;;oBAYL,KAAK;;EAKhB,iBAAiB;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;GACrB;EAEM,gBAAgB;IACnB,IAAI,CAAC,UAAU,EAAE,CAAC;GACrB;EAEO,UAAU;IACd,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IACvE,IAAI,CAAC,OAAO,EAAE;MACV,OAAO;KACV;GACJ;EAEM,MAAM;IACT,MAAM,gBAAgB,GAA0B,EAAE,CAAC;IACnD,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;MACpC,gBAAgB,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;KAClE;IAED,QACIA,kCACI,KAAK,EAAC,iBAAiB,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,KAAK,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,IACb,gBAAgB,GAEpBA,wBAAY,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,GAAI,CACvC,EACX;GACL;;;;;;;","names":["h"],"sources":["./src/components/icon-button/icon-button.scss?tag=limel-icon-button&encapsulation=shadow","./src/components/icon-button/icon-button.tsx"],"sourcesContent":["@use '../../style/mixins';\n@use '../../style/functions';\n@use '@material/icon-button/styles';\n\n/**\n * @prop --icon-background-color: Background color of the button.\n */\n\n$height-of-limel-button: functions.pxToRem(36);\n\n:host([hidden]) {\n    display: none;\n}\n\n:host([disabled]) {\n    pointer-events: none;\n}\n\n.mdc-icon-button {\n    @include mixins.is-flat-clickable(\n        $background-color: var(--icon-background-color, transparent)\n    );\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: $height-of-limel-button;\n    width: $height-of-limel-button;\n    padding: functions.pxToRem(2);\n    border-radius: 50%;\n\n    :host([elevated]) & {\n        &:not(:hover):not(:active):not(:focus-visible) {\n            box-shadow: var(--button-shadow-normal);\n        }\n    }\n\n    &:disabled {\n        color: var(--mdc-theme-text-disabled-on-background);\n    }\n\n    &:focus-visible {\n        // only when non-pointer input is being used,\n        // e.g. tabbed into using keyboard\n        box-shadow: var(--shadow-depth-8-focused);\n        border-radius: 50%;\n    }\n}\n\nlimel-icon {\n    width: functions.pxToRem(20);\n    height: functions.pxToRem(20);\n}\n","import { Component, Element, h, Prop } from '@stencil/core';\n\n/**\n * @exampleComponent limel-example-icon-button-basic\n * @exampleComponent limel-example-icon-button-disabled\n * @exampleComponent limel-example-icon-button-elevated\n * @exampleComponent limel-example-icon-button-toggle-state\n * @exampleComponent limel-example-icon-button-composite\n */\n@Component({\n    tag: 'limel-icon-button',\n    shadow: true,\n    styleUrl: 'icon-button.scss',\n})\nexport class IconButton {\n    /**\n     * The icon to display.\n     */\n    @Prop({ reflect: true })\n    public icon: string;\n\n    /**\n     * Set to `true` to give the button our standard \"elevated\" look, lifting\n     * it off the flat layout.\n     */\n    @Prop({ reflect: true })\n    public elevated = false;\n\n    /**\n     * The text to show to screenreaders and other assistive tech.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Set to `true` to disable the button.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    @Element()\n    private host: HTMLLimelIconButtonElement;\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private initialize() {\n        const element = this.host.shadowRoot.querySelector('.mdc-icon-button');\n        if (!element) {\n            return;\n        }\n    }\n\n    public render() {\n        const buttonAttributes: { tabindex?: string } = {};\n        if (this.host.hasAttribute('tabindex')) {\n            buttonAttributes.tabindex = this.host.getAttribute('tabindex');\n        }\n\n        return (\n            <button\n                class=\"mdc-icon-button\"\n                disabled={this.disabled}\n                aria-label={this.label}\n                title={this.label}\n                {...buttonAttributes}\n            >\n                <limel-icon name={this.icon} badge={true} />\n            </button>\n        );\n    }\n}\n"],"version":3}
+{"file":"limel-icon-button.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,aAAa,GAAG,u/LAAu/L;;MCkBhgM,UAAU;;;;oBAYD,KAAK;;oBAYL,KAAK;;EAKhB,iBAAiB;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;GACrB;EAEM,iBAAiB;IACpBA,qCAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACjC;EAEM,oBAAoB;IACvBC,uCAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACnC;EAEM,gBAAgB;IACnB,IAAI,CAAC,UAAU,EAAE,CAAC;GACrB;EAEO,UAAU;IACd,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IACvE,IAAI,CAAC,OAAO,EAAE;MACV,OAAO;KACV;GACJ;EAEM,MAAM;IACT,MAAM,gBAAgB,GAA0B,EAAE,CAAC;IACnD,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;MACpC,gBAAgB,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;KAClE;IAED,QACIC,kCACI,KAAK,EAAC,iBAAiB,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,KAAK,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,IACb,gBAAgB,GAEpBA,wBAAY,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,GAAI,CACvC,EACX;GACL;;;;;;;","names":["makeEnterClickable","removeEnterClickable","h"],"sources":["./src/components/icon-button/icon-button.scss?tag=limel-icon-button&encapsulation=shadow","./src/components/icon-button/icon-button.tsx"],"sourcesContent":["@use '../../style/mixins';\n@use '../../style/functions';\n@use '@material/icon-button/styles';\n\n/**\n * @prop --icon-background-color: Background color of the button.\n */\n\n$height-of-limel-button: functions.pxToRem(36);\n\n:host([hidden]) {\n    display: none;\n}\n\n:host([disabled]) {\n    pointer-events: none;\n}\n\n.mdc-icon-button {\n    @include mixins.is-flat-clickable(\n        $background-color: var(--icon-background-color, transparent)\n    );\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: $height-of-limel-button;\n    width: $height-of-limel-button;\n    padding: functions.pxToRem(2);\n    border-radius: 50%;\n\n    :host([elevated]) & {\n        &:not(:hover):not(:active):not(:focus-visible) {\n            box-shadow: var(--button-shadow-normal);\n        }\n    }\n\n    &:disabled {\n        color: var(--mdc-theme-text-disabled-on-background);\n    }\n\n    &:focus-visible {\n        // only when non-pointer input is being used,\n        // e.g. tabbed into using keyboard\n        box-shadow: var(--shadow-depth-8-focused);\n        border-radius: 50%;\n    }\n}\n\nlimel-icon {\n    width: functions.pxToRem(20);\n    height: functions.pxToRem(20);\n}\n","import { Component, Element, h, Prop } from '@stencil/core';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from 'src/util/makeEnterClickable';\n\n/**\n * @exampleComponent limel-example-icon-button-basic\n * @exampleComponent limel-example-icon-button-disabled\n * @exampleComponent limel-example-icon-button-elevated\n * @exampleComponent limel-example-icon-button-toggle-state\n * @exampleComponent limel-example-icon-button-composite\n */\n@Component({\n    tag: 'limel-icon-button',\n    shadow: true,\n    styleUrl: 'icon-button.scss',\n})\nexport class IconButton {\n    /**\n     * The icon to display.\n     */\n    @Prop({ reflect: true })\n    public icon: string;\n\n    /**\n     * Set to `true` to give the button our standard \"elevated\" look, lifting\n     * it off the flat layout.\n     */\n    @Prop({ reflect: true })\n    public elevated = false;\n\n    /**\n     * The text to show to screenreaders and other assistive tech.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Set to `true` to disable the button.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    @Element()\n    private host: HTMLLimelIconButtonElement;\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private initialize() {\n        const element = this.host.shadowRoot.querySelector('.mdc-icon-button');\n        if (!element) {\n            return;\n        }\n    }\n\n    public render() {\n        const buttonAttributes: { tabindex?: string } = {};\n        if (this.host.hasAttribute('tabindex')) {\n            buttonAttributes.tabindex = this.host.getAttribute('tabindex');\n        }\n\n        return (\n            <button\n                class=\"mdc-icon-button\"\n                disabled={this.disabled}\n                aria-label={this.label}\n                title={this.label}\n                {...buttonAttributes}\n            >\n                <limel-icon name={this.icon} badge={true} />\n            </button>\n        );\n    }\n}\n"],"version":3}

package/dist/cjs/limel-icon.cjs.entry.js

@@ -2,14 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-aafa56ee.js');
+const index = require('./index-38eb64b5.js');
 const config = require('./config-c6520559.js');
 
-const CACHE_NAME = '@limetech/lime-elements/icons';
-class IconCache {
-  constructor() {
+class CacheStorageIconCache {
+  constructor(cache) {
     this.promises = {};
-    this.cache = caches.open(CACHE_NAME);
+    this.cache = cache;
   }
   /**
    * Get icon data from the cache
@@ -64,9 +63,92 @@ class IconCache {
     return `${iconPath}assets/icons/${name}.svg`;
   }
 }
-const iconCache = new IconCache();
-const iconCache$1 = (() => {
-  return iconCache;
+
+class InMemoryIconCache {
+  constructor() {
+    /*
+     * Cache of all loaded SVGs
+     */
+    this.cache = {};
+    /*
+     * Contains resolve functions for all unresolved promises that are waiting for SVG data.
+     */
+    this.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
+   */
+  async get(name, path = '') {
+    if (!this.cache[name]) {
+      this.cache[name] = await this.getIcon(name, path);
+    }
+    return this.cache[name];
+  }
+  /*
+   * Creates and returns a promise that will be resolved when SVG data is available
+   */
+  getIcon(name, path) {
+    return new Promise((resolve) => {
+      if (!this.resolveFunctions[name]) {
+        this.resolveFunctions[name] = [];
+        this.fetchData(name, path);
+      }
+      this.resolveFunctions[name].push(resolve);
+    });
+  }
+  /*
+   * Fetch SVG data from the server
+   */
+  async fetchData(name, path) {
+    let iconPath = path || '';
+    if (path && !path.endsWith('/')) {
+      iconPath = `${path}/`;
+    }
+    const response = await fetch(`${iconPath}assets/icons/${name}.svg`);
+    let svgData = await response.text();
+    // Some of the icons in the Icons8 library have hard coded black color on some of the paths.
+    // In order to apply coloring with CSS, these have to be set to 'currentColor'
+    svgData = svgData.replace(/#000000/g, 'currentColor');
+    if (!this.validSvg(svgData)) {
+      throw new Error('Invalid SVG');
+    }
+    this.resolvePromises(name, svgData);
+  }
+  /*
+   * Check if the given data is a valid SVG document
+   */
+  validSvg(data) {
+    const parser = new DOMParser();
+    const svgDoc = parser.parseFromString(data, 'image/svg+xml');
+    return svgDoc.documentElement.tagName.toLowerCase() === 'svg';
+  }
+  /*
+   * Resolve all promises waiting for data for a specific icon
+   */
+  resolvePromises(name, svgData) {
+    const resolves = this.resolveFunctions[name];
+    resolves.forEach((resolve) => {
+      resolve(svgData);
+    });
+    this.resolveFunctions[name] = null;
+  }
+}
+
+const CACHE_NAME = '@limetech/lime-elements/icons';
+function createIconCache() {
+  try {
+    const cache = caches.open(CACHE_NAME);
+    return new CacheStorageIconCache(cache);
+  }
+  catch (_a) {
+    return new InMemoryIconCache();
+  }
+}
+const iconCache = (() => {
+  return createIconCache();
 })();
 
 const iconCss = ":host{background-color:var(--icon-background-color, transparent);border-radius:50%;display:inline-block;line-height:0;box-sizing:border-box}:host svg{fill:currentColor;height:100%;pointer-events:none;width:100%}:host([hidden]){display:none}:host([size=x-small]){height:0.9375rem !important;width:0.9375rem !important}:host([size=small]){height:1.25rem !important;width:1.25rem !important}:host([size=medium]){height:1.5625rem !important;width:1.5625rem !important}:host([size=large]){height:1.875rem !important;width:1.875rem !important}:host([badge][size=x-small]){height:1.4375rem !important;width:1.4375rem !important}:host([badge][size=x-small])>div{margin:0.25rem}:host([badge][size=small]){height:1.875rem !important;width:1.875rem !important}:host([badge][size=small])>div{margin:0.3125rem}:host([badge][size=medium]){height:2.5rem !important;width:2.5rem !important}:host([badge][size=medium])>div{margin:0.5rem}:host([badge][size=large]){height:2.875rem !important;width:2.875rem !important}:host([badge][size=large])>div{margin:0.5rem}";
@@ -97,7 +179,7 @@ const Icon = class {
    * @returns {string} the icon SVG data
    */
   loadSvg(name) {
-    return iconCache$1.get(name, config.config.iconPath);
+    return iconCache.get(name, config.config.iconPath);
   }
   /*
    * There is no way to style external SVG files with CSS, i.e. SVGs loaded

package/dist/cjs/limel-icon.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"limel-icon.entry.cjs.js","mappings":"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","names":["h","iconCache","config"],"sources":["./src/global/icon-cache.ts","./src/components/icon/icon.scss?tag=limel-icon&encapsulation=shadow","./src/components/icon/icon.tsx"],"sourcesContent":["const CACHE_NAME = '@limetech/lime-elements/icons';\n\nexport class IconCache {\n    /*\n     * Cache of all loaded SVGs\n     */\n    private cache: Promise<Cache>;\n\n    private promises: Record<string, Promise<void>> = {};\n\n    constructor() {\n        this.cache = caches.open(CACHE_NAME);\n    }\n\n    /**\n     * Get icon data from the cache\n     * @param {string} name name of the icon\n     * @param {string} path path on the server where the assets are located\n     * @returns {Promise<string>} svg markup\n     */\n    public async get(name: string, path: string = ''): Promise<string> {\n        const cache = await this.cache;\n        const url = this.getUrl(name, path);\n\n        let response = await cache.match(url);\n        if (!response) {\n            response = await this.fetchData(url, cache);\n        }\n\n        return this.getIcon(response);\n    }\n\n    private async fetchData(url: string, cache: Cache): Promise<Response> {\n        let requestPromise = this.promises[url];\n        if (requestPromise === undefined) {\n            requestPromise = cache.add(url);\n            this.promises[url] = requestPromise;\n        }\n\n        await requestPromise;\n\n        return cache.match(url);\n    }\n\n    /*\n     * Get icon data from a response\n     */\n    private async getIcon(response: Response): Promise<string> {\n        let svgData = await response.text();\n\n        // Some of the icons in the Icons8 library have hard coded black color on some of the paths.\n        // In order to apply coloring with CSS, these have to be set to 'currentColor'\n        svgData = svgData.replace(/#000000/g, 'currentColor');\n\n        if (!this.validSvg(svgData)) {\n            throw new Error('Invalid SVG');\n        }\n\n        return svgData;\n    }\n\n    /*\n     * Check if the given data is a valid SVG document\n     */\n    private validSvg(data) {\n        const parser = new DOMParser();\n        const svgDoc = parser.parseFromString(data, 'image/svg+xml');\n\n        return svgDoc.documentElement.tagName.toLowerCase() === 'svg';\n    }\n\n    private getUrl(name: string, path: string): string {\n        let iconPath = path || '';\n        if (path && !path.endsWith('/')) {\n            iconPath = `${path}/`;\n        }\n\n        return `${iconPath}assets/icons/${name}.svg`;\n    }\n}\n\nconst iconCache = new IconCache();\nexport default (() => {\n    return iconCache;\n})();\n","@use '../../style/functions';\n\n/**\n * @prop --icon-background-color: Background color when attribute `badge` is set to `true`. Defaults to `transparent`.\n */\n\n:host {\n    background-color: var(--icon-background-color, transparent);\n    border-radius: 50%;\n    display: inline-block;\n    line-height: 0;\n    box-sizing: border-box;\n\n    svg {\n        fill: currentColor;\n        height: 100%;\n        pointer-events: none;\n        width: 100%;\n    }\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n:host([size='x-small']) {\n    height: functions.pxToRem(15) !important;\n    width: functions.pxToRem(15) !important;\n}\n:host([size='small']) {\n    height: functions.pxToRem(20) !important;\n    width: functions.pxToRem(20) !important;\n}\n:host([size='medium']) {\n    height: functions.pxToRem(25) !important;\n    width: functions.pxToRem(25) !important;\n}\n:host([size='large']) {\n    height: functions.pxToRem(30) !important;\n    width: functions.pxToRem(30) !important;\n}\n\n:host([badge][size='x-small']) {\n    height: functions.pxToRem(23) !important;\n    width: functions.pxToRem(23) !important;\n\n    > div {\n        margin: functions.pxToRem(4);\n    }\n}\n:host([badge][size='small']) {\n    height: functions.pxToRem(30) !important;\n    width: functions.pxToRem(30) !important;\n\n    > div {\n        margin: functions.pxToRem(5);\n    }\n}\n:host([badge][size='medium']) {\n    height: functions.pxToRem(40) !important;\n    width: functions.pxToRem(40) !important;\n\n    > div {\n        margin: functions.pxToRem(8);\n    }\n}\n:host([badge][size='large']) {\n    height: functions.pxToRem(46) !important;\n    width: functions.pxToRem(46) !important;\n\n    > div {\n        margin: functions.pxToRem(8);\n    }\n}\n","import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport config from '../../global/config';\nimport iconCache from '../../global/icon-cache';\nimport { IconSize } from './icon.types';\n\n/**\n * The recommended icon library for use with Lime Elements is the Windows 10 set\n * from Icons8 (https://icons8.com/icons/windows). This set is included in the\n * relevant Lime products. If you are using Lime Elements in a non-Lime product,\n * you will have to supply your own icons.\n *\n * The size and color of the icon is set in CSS, however there are a few\n * standard sizes defined that can be used with the `size` property.\n *\n * ### Setup\n * To use **@lundalogik/lime-icons8**, the `/assets` folder from\n * __@lundalogik/lime-icons8__ must be made available on the webserver.\n * To use a different icon set, the icons must be placed in a folder structure\n * that looks like this: `assets/icons/<name-of-icon>.svg`\n *\n * If `assets` is placed in the root, no other setup is needed. The icons will\n * be fetched with a relative URL from `/assets/icons/<name-of-icon>.svg`.\n *\n * If `assets` is placed in a sub-folder somewhere, the easiest way to make the\n * icons available is to use the HTML `base` element:\n *\n * ```\n * <base href=\"/my/parent/path/\">\n * ```\n *\n * If this is not enough, or if the `base` element is already in use for\n * something else, a global icon path can be configured with the `limel-config`\n * element:\n * ```\n * <limel-config config={{iconPath: '/my/parent/path/'}} />\n * ```\n *\n * ### Lime icons\n * There are icons included in the **@lundalogik/lime-icons8** package which are\n * designed by our designers at Lime.\n * The names of these icons start with `-lime-`, which makes them easy to\n * find using the Icon Finder tool below.\n * :::note\n * Some of the `-lime-` icons have multiple colors and use our own CSS variables\n * instead of HEX or RGB values to visualize their colors. Thus, you must import\n * our color palette css files into your project to render the icons properly.\n * Read more about our [Color System](#/DesignGuidelines/color-system.md/)\n * and how to do this.\n * :::\n *\n * ### Icon Finder\n *\n * Search for an icon and **click on it to copy its name to clipboard**.\n *\n * <limel-example-icon-finder />\n * @exampleComponent limel-example-icon\n * @exampleComponent limel-example-icon-background\n */\n@Component({\n    tag: 'limel-icon',\n    shadow: true,\n    styleUrl: 'icon.scss',\n})\nexport class Icon {\n    /**\n     * Size of the icon\n     */\n    @Prop({ reflect: true })\n    public size: IconSize;\n\n    /**\n     * Name of the icon\n     */\n    @Prop({ reflect: true })\n    public name: string;\n\n    /**\n     * Set to `true` to give the icon a round background with some padding.\n     * Only works when the `size` attribute is also set.\n     */\n    @Prop({ reflect: true })\n    public badge: boolean;\n\n    @Element()\n    private host: HTMLLimelIconElement;\n\n    public componentDidLoad() {\n        this.loadIcon(this.name);\n    }\n\n    public render() {\n        return <div class=\"container\" />;\n    }\n\n    @Watch('name')\n    protected async loadIcon(name: string) {\n        if (name === undefined || name === '') {\n            return;\n        }\n\n        const svgData = await this.loadSvg(name);\n        this.renderSvg(svgData);\n    }\n\n    /**\n     * Load the SVG data for the icon from the icon cache\n     * @param {string} name name of the icon\n     * @returns {string} the icon SVG data\n     */\n    private loadSvg(name: string) {\n        return iconCache.get(name, config.iconPath);\n    }\n\n    /*\n     * There is no way to style external SVG files with CSS, i.e. SVGs loaded\n     * with <img src=\"file.svg\" /> or <object data=\"file.svg\" type=\"image/svg+xml\" />\n     * will remain the way they look in the file.\n     * Therefore we inject the svg as inline markup instead.\n     */\n    private renderSvg(svgData: string) {\n        const container = this.host.shadowRoot.querySelector('div.container');\n        if (container) {\n            container.innerHTML = svgData;\n        }\n    }\n}\n"],"version":3}
+{"file":"limel-icon.entry.cjs.js","mappings":"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","names":["h","config"],"sources":["./src/global/icon-cache/cache-storage-icon-cache.ts","./src/global/icon-cache/in-memory-icon-cache.ts","./src/global/icon-cache/factory.ts","./src/components/icon/icon.scss?tag=limel-icon&encapsulation=shadow","./src/components/icon/icon.tsx"],"sourcesContent":["export class CacheStorageIconCache {\n    /*\n     * Cache of all loaded SVGs\n     */\n    private cache: Promise<Cache>;\n\n    private promises: Record<string, Promise<void>> = {};\n\n    constructor(cache: Promise<Cache>) {\n        this.cache = cache;\n    }\n\n    /**\n     * Get icon data from the cache\n     * @param {string} name name of the icon\n     * @param {string} path path on the server where the assets are located\n     * @returns {Promise<string>} svg markup\n     */\n    public async get(name: string, path: string = ''): Promise<string> {\n        const cache = await this.cache;\n        const url = this.getUrl(name, path);\n\n        let response = await cache.match(url);\n        if (!response) {\n            response = await this.fetchData(url, cache);\n        }\n\n        return this.getIcon(response);\n    }\n\n    private async fetchData(url: string, cache: Cache): Promise<Response> {\n        let requestPromise = this.promises[url];\n        if (requestPromise === undefined) {\n            requestPromise = cache.add(url);\n            this.promises[url] = requestPromise;\n        }\n\n        await requestPromise;\n\n        return cache.match(url);\n    }\n\n    /*\n     * Get icon data from a response\n     */\n    private async getIcon(response: Response): Promise<string> {\n        let svgData = await response.text();\n\n        // Some of the icons in the Icons8 library have hard coded black color on some of the paths.\n        // In order to apply coloring with CSS, these have to be set to 'currentColor'\n        svgData = svgData.replace(/#000000/g, 'currentColor');\n\n        if (!this.validSvg(svgData)) {\n            throw new Error('Invalid SVG');\n        }\n\n        return svgData;\n    }\n\n    /*\n     * Check if the given data is a valid SVG document\n     */\n    private validSvg(data) {\n        const parser = new DOMParser();\n        const svgDoc = parser.parseFromString(data, 'image/svg+xml');\n\n        return svgDoc.documentElement.tagName.toLowerCase() === 'svg';\n    }\n\n    private getUrl(name: string, path: string): string {\n        let iconPath = path || '';\n        if (path && !path.endsWith('/')) {\n            iconPath = `${path}/`;\n        }\n\n        return `${iconPath}assets/icons/${name}.svg`;\n    }\n}\n","export class InMemoryIconCache {\n    /*\n     * Cache of all loaded SVGs\n     */\n    private cache = {};\n\n    /*\n     * Contains resolve functions for all unresolved promises that are waiting for SVG data.\n     */\n    private resolveFunctions = {};\n\n    /**\n     * Get icon data from the cache\n     * @param {string} name name of the icon\n     * @param {string} path path on the server where the assets are located\n     * @returns {string} svg markup\n     */\n    public async get(name, path = '') {\n        if (!this.cache[name]) {\n            this.cache[name] = await this.getIcon(name, path);\n        }\n\n        return this.cache[name];\n    }\n\n    /*\n     * Creates and returns a promise that will be resolved when SVG data is available\n     */\n    private getIcon(name, path) {\n        return new Promise((resolve) => {\n            if (!this.resolveFunctions[name]) {\n                this.resolveFunctions[name] = [];\n                this.fetchData(name, path);\n            }\n\n            this.resolveFunctions[name].push(resolve);\n        });\n    }\n\n    /*\n     * Fetch SVG data from the server\n     */\n    private async fetchData(name, path) {\n        let iconPath = path || '';\n        if (path && !path.endsWith('/')) {\n            iconPath = `${path}/`;\n        }\n\n        const response = await fetch(`${iconPath}assets/icons/${name}.svg`);\n\n        let svgData = await response.text();\n\n        // Some of the icons in the Icons8 library have hard coded black color on some of the paths.\n        // In order to apply coloring with CSS, these have to be set to 'currentColor'\n        svgData = svgData.replace(/#000000/g, 'currentColor');\n        if (!this.validSvg(svgData)) {\n            throw new Error('Invalid SVG');\n        }\n\n        this.resolvePromises(name, svgData);\n    }\n\n    /*\n     * Check if the given data is a valid SVG document\n     */\n    private validSvg(data) {\n        const parser = new DOMParser();\n        const svgDoc = parser.parseFromString(data, 'image/svg+xml');\n\n        return svgDoc.documentElement.tagName.toLowerCase() === 'svg';\n    }\n\n    /*\n     * Resolve all promises waiting for data for a specific icon\n     */\n    private resolvePromises(name, svgData) {\n        const resolves = this.resolveFunctions[name];\n        resolves.forEach((resolve) => {\n            resolve(svgData);\n        });\n        this.resolveFunctions[name] = null;\n    }\n}\n","import { CacheStorageIconCache } from './cache-storage-icon-cache';\nimport { InMemoryIconCache } from './in-memory-icon-cache';\n\nconst CACHE_NAME = '@limetech/lime-elements/icons';\n\nfunction createIconCache() {\n    try {\n        const cache = caches.open(CACHE_NAME);\n\n        return new CacheStorageIconCache(cache);\n    } catch {\n        return new InMemoryIconCache();\n    }\n}\n\nexport default (() => {\n    return createIconCache();\n})();\n","@use '../../style/functions';\n\n/**\n * @prop --icon-background-color: Background color when attribute `badge` is set to `true`. Defaults to `transparent`.\n */\n\n:host {\n    background-color: var(--icon-background-color, transparent);\n    border-radius: 50%;\n    display: inline-block;\n    line-height: 0;\n    box-sizing: border-box;\n\n    svg {\n        fill: currentColor;\n        height: 100%;\n        pointer-events: none;\n        width: 100%;\n    }\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n:host([size='x-small']) {\n    height: functions.pxToRem(15) !important;\n    width: functions.pxToRem(15) !important;\n}\n:host([size='small']) {\n    height: functions.pxToRem(20) !important;\n    width: functions.pxToRem(20) !important;\n}\n:host([size='medium']) {\n    height: functions.pxToRem(25) !important;\n    width: functions.pxToRem(25) !important;\n}\n:host([size='large']) {\n    height: functions.pxToRem(30) !important;\n    width: functions.pxToRem(30) !important;\n}\n\n:host([badge][size='x-small']) {\n    height: functions.pxToRem(23) !important;\n    width: functions.pxToRem(23) !important;\n\n    > div {\n        margin: functions.pxToRem(4);\n    }\n}\n:host([badge][size='small']) {\n    height: functions.pxToRem(30) !important;\n    width: functions.pxToRem(30) !important;\n\n    > div {\n        margin: functions.pxToRem(5);\n    }\n}\n:host([badge][size='medium']) {\n    height: functions.pxToRem(40) !important;\n    width: functions.pxToRem(40) !important;\n\n    > div {\n        margin: functions.pxToRem(8);\n    }\n}\n:host([badge][size='large']) {\n    height: functions.pxToRem(46) !important;\n    width: functions.pxToRem(46) !important;\n\n    > div {\n        margin: functions.pxToRem(8);\n    }\n}\n","import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport config from '../../global/config';\nimport iconCache from '../../global/icon-cache/factory';\nimport { IconSize } from './icon.types';\n\n/**\n * The recommended icon library for use with Lime Elements is the Windows 10 set\n * from Icons8 (https://icons8.com/icons/windows). This set is included in the\n * relevant Lime products. If you are using Lime Elements in a non-Lime product,\n * you will have to supply your own icons.\n *\n * The size and color of the icon is set in CSS, however there are a few\n * standard sizes defined that can be used with the `size` property.\n *\n * ### Setup\n * To use **@lundalogik/lime-icons8**, the `/assets` folder from\n * __@lundalogik/lime-icons8__ must be made available on the webserver.\n * To use a different icon set, the icons must be placed in a folder structure\n * that looks like this: `assets/icons/<name-of-icon>.svg`\n *\n * If `assets` is placed in the root, no other setup is needed. The icons will\n * be fetched with a relative URL from `/assets/icons/<name-of-icon>.svg`.\n *\n * If `assets` is placed in a sub-folder somewhere, the easiest way to make the\n * icons available is to use the HTML `base` element:\n *\n * ```\n * <base href=\"/my/parent/path/\">\n * ```\n *\n * If this is not enough, or if the `base` element is already in use for\n * something else, a global icon path can be configured with the `limel-config`\n * element:\n * ```\n * <limel-config config={{iconPath: '/my/parent/path/'}} />\n * ```\n *\n * ### Lime icons\n * There are icons included in the **@lundalogik/lime-icons8** package which are\n * designed by our designers at Lime.\n * The names of these icons start with `-lime-`, which makes them easy to\n * find using the Icon Finder tool below.\n * :::note\n * Some of the `-lime-` icons have multiple colors and use our own CSS variables\n * instead of HEX or RGB values to visualize their colors. Thus, you must import\n * our color palette css files into your project to render the icons properly.\n * Read more about our [Color System](#/DesignGuidelines/color-system.md/)\n * and how to do this.\n * :::\n *\n * ### Icon Finder\n *\n * Search for an icon and **click on it to copy its name to clipboard**.\n *\n * <limel-example-icon-finder />\n * @exampleComponent limel-example-icon\n * @exampleComponent limel-example-icon-background\n */\n@Component({\n    tag: 'limel-icon',\n    shadow: true,\n    styleUrl: 'icon.scss',\n})\nexport class Icon {\n    /**\n     * Size of the icon\n     */\n    @Prop({ reflect: true })\n    public size: IconSize;\n\n    /**\n     * Name of the icon\n     */\n    @Prop({ reflect: true })\n    public name: string;\n\n    /**\n     * Set to `true` to give the icon a round background with some padding.\n     * Only works when the `size` attribute is also set.\n     */\n    @Prop({ reflect: true })\n    public badge: boolean;\n\n    @Element()\n    private host: HTMLLimelIconElement;\n\n    public componentDidLoad() {\n        this.loadIcon(this.name);\n    }\n\n    public render() {\n        return <div class=\"container\" />;\n    }\n\n    @Watch('name')\n    protected async loadIcon(name: string) {\n        if (name === undefined || name === '') {\n            return;\n        }\n\n        const svgData = await this.loadSvg(name);\n        this.renderSvg(svgData);\n    }\n\n    /**\n     * Load the SVG data for the icon from the icon cache\n     * @param {string} name name of the icon\n     * @returns {string} the icon SVG data\n     */\n    private loadSvg(name: string) {\n        return iconCache.get(name, config.iconPath);\n    }\n\n    /*\n     * There is no way to style external SVG files with CSS, i.e. SVGs loaded\n     * with <img src=\"file.svg\" /> or <object data=\"file.svg\" type=\"image/svg+xml\" />\n     * will remain the way they look in the file.\n     * Therefore we inject the svg as inline markup instead.\n     */\n    private renderSvg(svgData: string) {\n        const container = this.host.shadowRoot.querySelector('div.container');\n        if (container) {\n            container.innerHTML = svgData;\n        }\n    }\n}\n"],"version":3}

package/dist/cjs/limel-info-tile.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-aafa56ee.js');
+const index = require('./index-38eb64b5.js');
 
 const infoTileCss = "/**\n * Note! This file is exported to `dist/scss/` in the published\n * node module, for consumer projects to import.\n * That means this file cannot import from any file that isn't\n * also exported, keeping the same relative path.\n *\n * Or, just don't import anything, that works too.\n */\n/**\n* @prop --info-tile-border-radius: defines the radius of corners of the info-tile. Defaults to `1rem`\n* @prop --info-tile-icon-color: defines the fill color of the info-tile icon. Defaults to `--contrast-1000`\n* @prop --info-tile-text-color: defines the color of the info-tile label. Defaults to `--contrast-1100`\n* @prop --info-tile-background-color: defines the backgrounds color of the info-tile icon. Defaults to `--contrast-100`\n* @prop --info-tile-badge-text-color: Text color of the notification badge. Defaults to `--color-white`\n* @prop --info-tile-badge-background-color: Background color of the notification badge. Defaults to `--color-red-default`\n* @prop --info-tile-progress-fill-color: Determines the color of the progressed section. Defaults to `--lime-primary-color`.\n* @prop --info-tile-progress-background-color: Determines the background color of the central section of the progress bar. Defaults to `--info-tile-background-color`.\n* @prop --info-tile-progress-suffix-color: Determines the color of the progress prefix. Defaults to `--contrast-1000`.\n * @prop --info-tile-progress-text-color: Determines the color of the progress value. Defaults to `--info-tile-text-color`.\n * @prop --info-tile-progress-prefix-color: Determines the color of the progress suffix. Defaults to `--contrast-1000`.\n*/\n:host(limel-info-tile) {\n  --badge-text-color: var(\n      --info-tile-badge-text-color,\n      rgb(var(--color-white))\n  );\n  --badge-background-color: var(\n      --info-tile-badge-background-color,\n      rgb(var(--color-red-default))\n  );\n  --circular-progress-text-color: var(\n      --info-tile-progress-text-color,\n      var(--info-tile-text-color)\n  );\n  --circular-progress-suffix-color: var(--info-tile-progress-suffix-color);\n  --circular-progress-prefix-color: var(--info-tile-progress-prefix-color);\n  --circular-progress-track-color: rgb(var(--contrast-800), 0.3);\n  --circular-progress-fill-color: var(--info-tile-progress-fill-color);\n  --circular-progress-background-color: var(\n      --info-tile-progress-background-color,\n      var(--info-tile-background-color)\n  );\n  --label-min-size: 0.75rem;\n  --label-preferred-size: 6cqw;\n  --label-max-size: 1rem;\n  --value-min-size: 1rem;\n  --value-preferred-size: 20cqw;\n  --value-max-size: 4rem;\n  --suffix-prefix-min-size: 0.75rem;\n  --suffix-prefix-preferred-size: 8cqw;\n  --suffix-prefix-max-size: 1.5rem;\n  --icon-min-size: 2rem;\n  --icon-preferred-size: 60cqh;\n  --icon-max-size: calc(100cqw - 0.5rem);\n  isolation: isolate;\n  container-type: size;\n  position: relative;\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n:host(limel-info-tile) * {\n  box-sizing: border-box;\n}\n\n:host(limel-info-tile[disabled]) a {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\na {\n  all: unset;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  align-items: flex-start;\n  height: 100%;\n  width: 100%;\n  flex-grow: 1;\n  padding: 0.25rem 1rem 0.5rem 1rem;\n  border-radius: var(--info-tile-border-radius, 1rem);\n  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n}\na.is-clickable {\n  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;\n  cursor: pointer;\n  color: var(--mdc-theme-on-surface);\n  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n  box-shadow: var(--button-shadow-normal);\n}\na.is-clickable:hover {\n  color: var(--mdc-theme-on-surface);\n  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n  box-shadow: var(--button-shadow-hovered);\n}\na.is-clickable:active {\n  box-shadow: var(--button-shadow-pressed);\n  transform: translate3d(0, 0.08rem, 0);\n}\na.is-clickable:focus {\n  outline: none;\n}\na.is-clickable:focus-visible {\n  outline: none;\n  box-shadow: var(--shadow-depth-8-focused);\n}\n\n.icon {\n  z-index: 1;\n  position: absolute;\n  top: 0.5rem;\n  right: 0.75rem;\n  padding: 0.25rem;\n  aspect-ratio: 1/1;\n  color: var(--info-tile-icon-color, rgb(var(--contrast-1000)));\n  border-radius: 0;\n  height: clamp(var(--icon-min-size), var(--icon-preferred-size), var(--icon-max-size));\n}\n@supports not (container-type: size) {\n  .icon {\n    width: max(10%, 3rem);\n  }\n}\n.has-circular-progress .icon {\n  top: unset;\n  bottom: 0.5rem;\n  --icon-min-size: 1.5rem;\n  --icon-preferred-size: 20cqh;\n}\n\n.progress {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.75rem;\n  --circular-progress-size: min(\n      var(--icon-preferred-size),\n      var(--icon-max-size)\n  );\n}\n@supports not (container-type: size) {\n  .progress {\n    --circular-progress-size: initial;\n  }\n}\n\n.label {\n  z-index: 1;\n  color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n  line-height: 1.2;\n  font-size: clamp(var(--label-min-size), var(--label-preferred-size), var(--label-max-size));\n}\n@supports not (container-type: size) {\n  .label {\n    font-size: 0.875rem;\n  }\n}\n\nlimel-badge {\n  position: absolute;\n  top: -0.25rem;\n  right: -0.25rem;\n}\n\nlimel-linear-progress {\n  --lime-primary-color: var(--info-tile-text-color);\n  position: absolute;\n  inset: auto 0 0 0;\n  border-radius: 1rem;\n  overflow: hidden;\n}\n\n.value-group {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n}\n\n.value-and-suffix,\n.label {\n  text-shadow: 0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100))), 0 0 0.25rem var(--info-tile-background-color, rgb(var(--contrast-100)));\n}\n\n.value-and-suffix {\n  display: flex;\n}\n\n.prefix,\n.suffix {\n  font-size: clamp(var(--suffix-prefix-min-size), var(--suffix-prefix-preferred-size), var(--suffix-prefix-max-size));\n  opacity: 0.7;\n}\n@supports not (container-type: size) {\n  .prefix,\n  .suffix {\n    font-size: 0.75rem;\n  }\n}\n\n.prefix {\n  align-self: flex-start;\n  line-height: normal;\n  transform: translateY(40%);\n}\n\n.value {\n  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.95);\n  transform-origin: left;\n  transform: translate3d(0, 0, 0) scale(1);\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  font-weight: bold;\n  line-height: normal;\n  font-size: clamp(var(--value-min-size), var(--value-preferred-size), var(--value-max-size));\n}\n@supports not (container-type: size) {\n  .value {\n    font-size: 1.5rem;\n  }\n}\n:host(limel-info-tile[loading]) .value {\n  opacity: 0.3;\n  transform: translate3d(0, 0, 0) scale(0.9);\n}\n\n.suffix {\n  transform: translateY(10%);\n}\n\n@container (width < 8rem) {\n  .progress {\n    top: 0.25rem;\n    right: 0.25rem;\n  }\n  a {\n    padding: 0.375rem;\n    gap: 0.125rem;\n  }\n}\n@container (width < 18.75rem) {\n  .progress {\n    top: 0.5rem;\n    right: 0.5rem;\n  }\n  .icon {\n    top: 0.25rem;\n    right: 0.5rem;\n  }\n  .has-circular-progress .icon {\n    right: 0.25rem;\n    bottom: 0.25rem;\n  }\n}\n@container (width < 40.5rem) {\n  .value {\n    --value-preferred-size: 13cqw;\n  }\n  .value.ch-1, .value.ch-2, .value.ch-3, .value.ch-4 {\n    --value-preferred-size: 20cqw;\n  }\n  .value.ch-5 {\n    --value-preferred-size: 18cqw;\n  }\n  .value.ch-6 {\n    --value-preferred-size: 17cqw;\n  }\n  .value.ch-7 {\n    --value-preferred-size: 16cqw;\n  }\n  .value.ch-8 {\n    --value-preferred-size: 15cqw;\n  }\n  .value.ch-9 {\n    --value-preferred-size: 14cqw;\n  }\n}\n@container (height > 8rem) {\n  a {\n    padding-top: 0.75rem;\n    padding-bottom: 1rem;\n  }\n}\n@container (height < 8rem) and (width > 8rem) {\n  .value {\n    --value-preferred-size: 32cqh !important;\n  }\n  .suffix,\n  .prefix {\n    --suffix-prefix-preferred-size: 16cqh !important;\n  }\n}\n@container (height > 18.75rem) {\n  .progress,\n  .icon {\n    position: relative;\n    top: unset;\n    right: unset;\n  }\n  a {\n    align-items: center;\n    justify-content: center;\n  }\n  .label {\n    text-align: center;\n  }\n  .has-circular-progress .icon {\n    position: absolute;\n    top: 0.5rem;\n    right: 0.5rem;\n    --icon-max-size: 3rem;\n  }\n}";
 

package/dist/cjs/limel-input-field.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-aafa56ee.js');
+const index = require('./index-38eb64b5.js');
 const keycodes = require('./keycodes-3949f425.js');
 const linkHelper = require('./link-helper-4f75d41d.js');
 const randomString = require('./random-string-c8445652.js');

package/dist/cjs/limel-list_2.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-aafa56ee.js');
+const index = require('./index-38eb64b5.js');
 const component = require('./component-66df95e7.js');
-const checkbox_template = require('./checkbox.template-234f4813.js');
+const checkbox_template = require('./checkbox.template-df6fc114.js');
 const dom = require('./dom-eb080f70.js');
 const keycodes = require('./keycodes-3949f425.js');
 require('./component-67144c1c.js');

package/dist/cjs/limel-menu_2.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-aafa56ee.js');
+const index = require('./index-38eb64b5.js');
 const randomString = require('./random-string-c8445652.js');
 const zipObject = require('./zipObject-93a471fa.js');
 const component = require('./component-66df95e7.js');

package/dist/cjs/limel-picker.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-aafa56ee.js');
+const index = require('./index-38eb64b5.js');
 const dom = require('./dom-eb080f70.js');
 const keycodes = require('./keycodes-3949f425.js');
 const randomString = require('./random-string-c8445652.js');

package/dist/cjs/limel-popover_2.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-aafa56ee.js');
+const index = require('./index-38eb64b5.js');
 const randomString = require('./random-string-c8445652.js');
 const keycodes = require('./keycodes-3949f425.js');
 const zipObject = require('./zipObject-93a471fa.js');

package/dist/cjs/limel-portal.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-aafa56ee.js');
+const index = require('./index-38eb64b5.js');
 
 var top = 'top';
 var bottom = 'bottom';

package/dist/cjs/limel-progress-flow-item.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-aafa56ee.js');
+const index = require('./index-38eb64b5.js');
 
 const progressFlowItemCss = ".flow-item{--step-background:var(\n      --progress-flow-step-background-color,\n      rgb(var(--contrast-600))\n  );--step-background--selected:var(\n      --progress-flow-step-background-color--selected,\n      var(--mdc-theme-primary)\n  );--step-background--passed:var(\n      --progress-flow-step-background-color--passed,\n      var(--step-background--selected)\n  );--step-text:var(\n      --progress-flow-step-text-color,\n      rgb(var(--contrast-1200))\n  );--step-text--selected:var(\n      --progress-flow-step-text-color--selected,\n      var(--mdc-theme-on-primary)\n  );--step-text--passed:var(\n      --progress-flow-step-text-color--passed,\n      var(--step-text--selected)\n  );--step-divider-color:var(\n      --progress-flow-step-divider-color,\n      rgb(var(--contrast-100))\n  );position:relative;width:100%;display:flex;flex-direction:column;align-items:stretch}.flow-item:not(.off-progress-item,.last) .divider:after{content:\"\"}.flow-item.off-progress-item{padding-left:0.5rem}.flow-item.first-off-progress-item{padding-left:1rem}.step{transition:background-color 0.2s ease, box-shadow 0.2s ease;display:flex;justify-content:center;align-items:center;position:relative;width:100%;height:var(--step-height);border:none;font-size:0.875rem}.step.disabled{cursor:not-allowed}.step.disabled.readonly{opacity:1;cursor:default}.step:focus{outline:none}.step:focus-visible{box-shadow:var(--shadow-depth-8-focused)}.flow-item:not(.off-progress-item,.first) .step{padding-left:calc(var(--step-height) / 2)}.flow-item:not(.selected) .step:not(.disabled){cursor:pointer}.flow-item:not(.selected) .step:not(.disabled):hover{box-shadow:var(--button-shadow-normal)}.flow-item:not(.selected) .step:not(.disabled):active{box-shadow:var(--button-shadow-pressed)}.off-progress-item .step{border-radius:0.25rem;padding:0 0.75rem}.off-progress-item .step .icon{margin-left:0}.flow-item.first .step{border-top-left-radius:var(--step-height);border-bottom-left-radius:var(--step-height);padding-left:1.25rem}.flow-item.last .step{border-top-right-radius:var(--step-height);border-bottom-right-radius:var(--step-height);padding-right:1.25rem}.divider{display:flex;align-items:center;justify-content:center;width:var(--step-height);height:var(--step-height);position:absolute;z-index:1;right:calc(var(--step-height) / 2 * -1);overflow:hidden}.divider:after{position:absolute;display:block;box-sizing:border-box;transition:background-color 0.2s ease;width:100%;height:100%;right:calc(var(--step-height) / 5);transform:rotate(45deg);border-style:solid;border-width:0.125rem 0.125rem 0 0;border-radius:0 0.5rem 0 0;border-color:var(--step-divider-color)}.flow-item.last .divider{width:0}.text,.secondary-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:var(--max-text-width);z-index:2}.secondary-text{font-size:0.75rem;margin:auto;padding-left:calc(var(--step-height) / 2)}.icon{margin:0 0.5rem 0 0.25rem;z-index:2}.step:before,.step:after{pointer-events:none;box-sizing:border-box;z-index:2;position:absolute;right:var(--selected-indicator-right);border-radius:50%}.last .step:before,.last .step:after{right:0.5rem}.flow-item:not(.off-progress-item) .step.selected:before,.flow-item:not(.off-progress-item) .step.selected:after{content:\"\";width:0.375rem;height:0.375rem}.flow-item:not(.off-progress-item) .step.selected:before{background-color:var(--step-divider-color);opacity:0.7}.flow-item:not(.off-progress-item) .step.disabled:before,.flow-item:not(.off-progress-item) .step.disabled:after{width:0.75rem;height:0.75rem}.flow-item:not(.off-progress-item) .step.disabled:after{content:\"\";background-image:url(\"data:image/svg+xml;charset=utf-8, <svg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill-rule='evenodd' clip-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2'><path fill='rgb(127,127,127)' d='M32.18 13.711c0-2.207-1.793-4-4.002-4H11.821c-2.208 0-4 1.793-4 4V28.29a4 4 0 0 0 4 4h16.357a4.002 4.002 0 0 0 4.001-4V13.711Z'/><path fill='rgb(127,127,127)' d='M11.211 9.758V7.673A7.489 7.489 0 0 1 18.696.188h2.608a7.489 7.489 0 0 1 7.485 7.485v2.085h-3V7.673a4.488 4.488 0 0 0-4.485-4.485h-2.608a4.488 4.488 0 0 0-4.485 4.485v2.085h-3Z'/></svg>\");background-size:90%;background-repeat:no-repeat;background-position:center;mix-blend-mode:multiply}.step{color:var(--step-text);background-color:var(--step-background)}.step .icon{color:var(--progress-flow-icon-color--inactive, var(--step-text))}.flow-item.selected .step{color:var(--step-text--selected);background-color:var(--step-background--selected)}.flow-item.selected .step .divider:after{background-color:var(--step-background--selected)}.flow-item.selected .step .icon{color:var(--step-text--selected)}.flow-item.passed .step{color:var(--step-text--passed);background-color:var(--step-background--passed)}.flow-item.passed .step .divider:after{background-color:var(--step-background--passed)}.flow-item.passed .step .icon{color:var(--step-text--passed)}.divider:after{border-color:var(--step-divider-color);background-color:var(--step-background)}";
 

package/dist/cjs/limel-progress-flow.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-aafa56ee.js');
+const index = require('./index-38eb64b5.js');
 
 const progressFlowCss = ":host{--step-height:2.5rem;--selected-indicator-right:-0.5rem;--max-text-width:10rem;isolation:isolate;box-sizing:border-box;width:100%;display:flex;flex-direction:row;align-items:flex-start;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:0.25rem}:host::-webkit-scrollbar{display:none}:host(.is-narrow){--step-height:1.5rem;--selected-indicator-right:0}";
 

package/dist/cjs/limel-select.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-aafa56ee.js');
+const index = require('./index-38eb64b5.js');
 const device = require('./device-c5841113.js');
 const keycodes = require('./keycodes-3949f425.js');
 const multiple = require('./multiple-2af83b6d.js');

package/dist/cjs/limel-shortcut.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-aafa56ee.js');
+const index = require('./index-38eb64b5.js');
 
 const shortcutCss = ":host(limel-shortcut){--badge-text-color:var(\n      --shortcut-badge-text-color,\n      rgb(var(--color-white))\n  );--badge-background-color:var(\n      --shortcut-badge-background-color,\n      rgb(var(--color-red-default))\n  );position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;row-gap:0.0625rem}:host(limel-shortcut) *{box-sizing:border-box}:host(limel-shortcut[disabled]) a{opacity:0.5;box-shadow:unset;cursor:not-allowed}a{all:unset;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(--shortcut-background-color, var(--lime-elevated-surface-background-color));box-shadow:var(--button-shadow-normal);text-align:center;height:calc(100% - 1rem);width:calc(100% - 1rem);padding:0.5rem;border-radius:var(--shortcut-border-radius, 1rem)}a:hover{color:var(--mdc-theme-on-surface);background-color:var(--shortcut-background-color, var(--lime-elevated-surface-background-color));box-shadow:var(--button-shadow-hovered)}a:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}a:focus{outline:none}a:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}limel-icon{display:flex;height:100%;width:100%;justify-content:center;color:var(--shortcut-icon-color, rgb(var(--contrast-1000)));border-radius:var(--shortcut-border-radius, 1rem)}span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;color:var(--shortcut-label-color, rgb(var(--contrast-1100)));font-size:0.75rem;text-align:center}limel-badge{position:absolute;top:-0.25rem;right:0.125rem}";
 

package/dist/cjs/limel-slider.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-aafa56ee.js');
+const index = require('./index-38eb64b5.js');
 const randomString = require('./random-string-c8445652.js');
 const component = require('./component-67144c1c.js');
 const component$1 = require('./component-cf490570.js');

package/dist/cjs/limel-snackbar.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-aafa56ee.js');
+const index = require('./index-38eb64b5.js');
 const translations = require('./translations-f8080c48.js');
 const component = require('./component-67144c1c.js');
 const ponyfill = require('./ponyfill-98ca4766.js');

package/dist/cjs/limel-spinner.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-aafa56ee.js');
+const index = require('./index-38eb64b5.js');
 
 const spinnerCss = ":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-spinner){display:block}@keyframes spin{50%{transform:rotate(180deg)}100%{transform:rotate(720deg)}}@keyframes fade-in-the-spinner{0%{transform:scale(0.7);opacity:0}100%{transform:scale(1);opacity:1}}@keyframes animate-colored-circles{5%{stroke-dashoffset:0}10%,100%{stroke-dashoffset:63}}:host([hidden]){display:none}:host{box-sizing:border-box;display:flex;align-items:center;justify-content:center;height:1.5rem;width:1.5rem;transform:translate3d(0, 0, 0);animation:fade-in-the-spinner 0.5s ease forwards}:host([size=x-small]){height:2rem;width:2rem}:host([size=small]){height:2.125rem;width:2.125rem}:host([size=medium]){height:2.75rem;width:2.75rem}:host([size=large]){height:4rem;width:4rem}.spinner{animation:spin 1s linear infinite;transform-origin:center}.color{animation:animate-colored-circles 10s linear infinite;fill:none;stroke-dasharray:63;stroke-dashoffset:63;stroke-linecap:round;stroke-width:4}.color.thick{stroke-width:10}.color:nth-child(1){stroke:var(--spinner-color-1, rgb(var(--lime-brand-color-deep-red)))}.color:nth-child(2){stroke:var(--spinner-color-2, rgb(var(--lime-brand-color-sellable-orange)));animation-delay:1s}.color:nth-child(3){stroke:var(--spinner-color-3, rgb(var(--lime-brand-color-simple-blue)));animation-delay:2s}.color:nth-child(4){stroke:var(--spinner-color-4, rgb(var(--lime-brand-color-orange)));animation-delay:3s}.color:nth-child(5){stroke:var(--spinner-color-5, rgb(var(--lime-brand-color-lime-green)));animation-delay:4s}.color:nth-child(6){stroke:var(--spinner-color-6, rgb(var(--lime-brand-color-yellow)));animation-delay:5s}.color:nth-child(7){stroke:var(--spinner-color-7, rgb(var(--lime-brand-color-flexible-turquoise)));animation-delay:6s}.color:nth-child(8){stroke:var(--spinner-color-8, rgb(var(--lime-brand-color-loving-magenta)));animation-delay:7s}.color:nth-child(9){stroke:var(--spinner-color-9, rgb(var(--lime-brand-color-dark-blue)));animation-delay:8s}.color:nth-child(10){stroke:var(--spinner-color-9, rgb(var(--lime-brand-color-light-grey)));animation-delay:9s}.outline{stroke:rgba(var(--lime-brand-color-light-grey), 0.3);fill:none;stroke-linecap:round;stroke-width:4}.outline.thick{stroke-width:10}";
 

package/dist/cjs/limel-split-button.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-aafa56ee.js');
+const index = require('./index-38eb64b5.js');
 
 const splitButtonCss = ":host(limel-split-button.has-menu){--button-padding-right:2rem}:host(limel-split-button){display:inline-flex;isolation:isolate}:host(limel-split-button) *{box-sizing:border-box}:host([disabled]){pointer-events:none}limel-button{width:100%}limel-menu{display:flex;justify-content:flex-end;position:relative;z-index:1;padding:0.125rem;margin-left:calc(var(--button-padding-right) * -1);width:var(--button-padding-right)}limel-menu:before{transition:background-color 0.5s ease;content:\"\";position:absolute;inset:0.375rem auto 0.375rem 0.6875rem;width:1px;background-color:currentColor;opacity:0.2}limel-menu:not([disabled]){color:var(--mdc-theme-primary, rgb(var(--color-teal-default)))}limel-menu:not([disabled]).primary{color:var(--mdc-theme-on-primary, rgb(var(--color-white)))}limel-menu[disabled]{color:rgba(var(--contrast-1600), 0.37)}limel-menu:hover:before,limel-menu:focus-within:before{background-color:transparent}.menu-trigger{all:unset;text-align:center;font-weight:bold;border-radius:0.125rem;height:100%;width:1rem}.menu-trigger: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(--mdc-theme-on-surface);background-color:transparent;cursor:pointer}.menu-trigger:not(:disabled):hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.menu-trigger:not(:disabled):active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.menu-trigger:not(:disabled):focus{outline:none}.menu-trigger:not(:disabled):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.menu-trigger:not(:disabled):focus-visible,.menu-trigger:not(:disabled):hover{background-color:rgb(var(--color-white), 0.1)}.menu-trigger:before{content:\"\";position:absolute;inset:-0.25rem;z-index:-1}";