@limetech/lime-elements 38.33.4 → 38.33.6

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## [38.33.6](https://github.com/Lundalogik/lime-elements/compare/v38.33.5...v38.33.6) (2025-12-11)
+
+
+### Bug Fixes
+
+
+* **tab-bar:** allow consumers to override tab's badge background color ([01c8747](https://github.com/Lundalogik/lime-elements/commit/01c8747522d9c323b92db0c254f0e5b38d54a328))
+* **tab-bar:** better icon color in dark mode ([728138f](https://github.com/Lundalogik/lime-elements/commit/728138fdb68d1b8d584ebe9e0f651157cf498675))
+
+## [38.33.5](https://github.com/Lundalogik/lime-elements/compare/v38.33.4...v38.33.5) (2025-12-11)
+
+
+### Bug Fixes
+
+
+* **info-tile:** adjust value font size for xs size ([deee7fa](https://github.com/Lundalogik/lime-elements/commit/deee7fa1bee2aa527156a84578f8593420b615d2))
+
 ## [38.33.4](https://github.com/Lundalogik/lime-elements/compare/v38.33.3...v38.33.4) (2025-12-11)
 
 

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

@@ -6,7 +6,7 @@ const index = require('./index-174a078a.js');
 const format = require('./format-c8759d02.js');
 require('./_commonjsHelpers-a5111d61.js');
 
-const badgeCss = "@charset \"UTF-8\";:host([hidden]){display:none}:host(limel-badge){--limel-min-badge-size:1rem;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;min-height:var(--limel-min-badge-size);min-width:var(--limel-min-badge-size)}span{cursor:default;box-sizing:border-box;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;font-size:0.6875rem;line-height:var(--limel-min-badge-size);color:var(--badge-text-color, rgb(var(--contrast-1200)));border-radius:var(--limel-min-badge-size);max-height:var(--limel-min-badge-size);min-width:0.5rem;min-height:0.5rem;background-color:var(--badge-background-color, rgb(var(--contrast-500)))}span:not(:empty){min-width:var(--limel-min-badge-size);max-width:var(--badge-max-width, 2.75rem);padding:0 0.28125rem}:host(.has-large-label) span{cursor:help}";
+const badgeCss = "@charset \"UTF-8\";:host([hidden]){display:none}:host(limel-badge){--limel-min-badge-size:1rem;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;min-height:var(--limel-min-badge-size);min-width:var(--limel-min-badge-size);border-radius:var(--limel-min-badge-size)}span{cursor:default;box-sizing:border-box;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;font-size:0.6875rem;line-height:var(--limel-min-badge-size);color:var(--badge-text-color, rgb(var(--contrast-1200)));border-radius:var(--limel-min-badge-size);max-height:var(--limel-min-badge-size);min-width:0.5rem;min-height:0.5rem;background-color:var(--badge-background-color, rgb(var(--contrast-500)))}span:not(:empty){min-width:var(--limel-min-badge-size);max-width:var(--badge-max-width, 2.75rem);padding:0 0.28125rem}:host(.has-large-label) span{cursor:help}";
 
 const Badge = class {
   constructor(hostRef) {

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

@@ -1 +1 @@
-{"file":"limel-badge.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,QAAQ,GAAG,i0BAAi0B;;MCgBr0B,KAAK;;;;;EAUP,MAAM;IACT,QACIA,QAACC,UAAI,IACD,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,EAC5C,KAAK,EAAE;QACH,iBAAiB,EAAE,IAAI,CAAC,YAAY,EAAE;OACzC,IAEDD,sBAAO,IAAI,CAAC,WAAW,EAAE,CAAQ,CAC9B,EACT;GACL;EAEO,WAAW;IACf,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;MAChC,OAAOE,iBAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACjC;IAED,OAAO,IAAI,CAAC,KAAK,CAAC;GACrB;EAEO,YAAY;IAChB,MAAM,iBAAiB,GAAG,GAAG,CAAC;IAC9B,MAAM,gBAAgB,GAAG,CAAC,CAAC;IAC3B,IACI,CAAC,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ;MAC3B,IAAI,CAAC,KAAK,GAAG,iBAAiB;OACjC,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ;QAC3B,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,gBAAgB,CAAC,EAC3C;MACE,OAAO,IAAI,CAAC;KACf;GACJ;;;;;;","names":["h","Host","abbreviate"],"sources":["./src/components/badge/badge.scss?tag=limel-badge&encapsulation=shadow","./src/components/badge/badge.tsx"],"sourcesContent":["@use '../../style/functions';\n@use '../../style/mixins';\n\n/**\n * @prop --badge-background-color: badge background color\n * @prop --badge-text-color: badge text color\n * @prop --badge-max-width: maximum width of the badge, before its text gets truncated\n */\n\n:host([hidden]) {\n    display: none;\n}\n\n:host(limel-badge) {\n    --limel-min-badge-size: 1rem;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    flex-shrink: 0;\n    min-height: var(--limel-min-badge-size);\n    min-width: var(--limel-min-badge-size);\n}\n\nspan {\n    cursor: default;\n    box-sizing: border-box;\n\n    @include mixins.truncate-text;\n    text-align: center;\n    font-size: functions.pxToRem(11);\n    line-height: var(--limel-min-badge-size);\n\n    color: var(--badge-text-color, rgb(var(--contrast-1200)));\n\n    border-radius: var(--limel-min-badge-size);\n    max-height: var(--limel-min-badge-size);\n    min-width: 0.5rem;\n    min-height: 0.5rem;\n\n    background-color: var(--badge-background-color, rgb(var(--contrast-500)));\n\n    &:not(:empty) {\n        min-width: var(\n            --limel-min-badge-size\n        ); // ensures that a badge with only one character rendered as perfect circle\n        max-width: var(--badge-max-width, 2.75rem);\n        padding: 0 functions.pxToRem(4.5);\n    }\n}\n\n:host(.has-large-label) {\n    span {\n        cursor: help;\n    }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { abbreviate } from './format';\n\n/**\n * The Badge component can be used to display a notification badge,\n * optionally with a number or a text label.\n *\n * @exampleComponent limel-example-badge\n * @exampleComponent limel-example-badge-number\n * @exampleComponent limel-example-badge-string\n */\n@Component({\n    tag: 'limel-badge',\n    styleUrl: 'badge.scss',\n    shadow: true,\n})\nexport class Badge {\n    /**\n     * Label to display in the badge.\n     * Numeric labels larger than 999 will be rounded and abbreviated.\n     * String labels get truncated if their length is longer than\n     * six characters.\n     */\n    @Prop({ reflect: true })\n    public label?: number | string;\n\n    public render() {\n        return (\n            <Host\n                title={this.labelIsLarge() ? this.label : ''}\n                class={{\n                    'has-large-label': this.labelIsLarge(),\n                }}\n            >\n                <span>{this.renderLabel()}</span>\n            </Host>\n        );\n    }\n\n    private renderLabel() {\n        if (typeof this.label === 'number') {\n            return abbreviate(this.label);\n        }\n\n        return this.label;\n    }\n\n    private labelIsLarge() {\n        const largeNumericLabel = 999;\n        const largeStringLabel = 6;\n        if (\n            (typeof this.label === 'number' &&\n                this.label > largeNumericLabel) ||\n            (typeof this.label === 'string' &&\n                this.label.length > largeStringLabel)\n        ) {\n            return true;\n        }\n    }\n}\n"],"version":3}
+{"file":"limel-badge.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,QAAQ,GAAG,22BAA22B;;MCgB/2B,KAAK;;;;;EAUP,MAAM;IACT,QACIA,QAACC,UAAI,IACD,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,EAC5C,KAAK,EAAE;QACH,iBAAiB,EAAE,IAAI,CAAC,YAAY,EAAE;OACzC,IAEDD,sBAAO,IAAI,CAAC,WAAW,EAAE,CAAQ,CAC9B,EACT;GACL;EAEO,WAAW;IACf,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;MAChC,OAAOE,iBAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACjC;IAED,OAAO,IAAI,CAAC,KAAK,CAAC;GACrB;EAEO,YAAY;IAChB,MAAM,iBAAiB,GAAG,GAAG,CAAC;IAC9B,MAAM,gBAAgB,GAAG,CAAC,CAAC;IAC3B,IACI,CAAC,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ;MAC3B,IAAI,CAAC,KAAK,GAAG,iBAAiB;OACjC,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ;QAC3B,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,gBAAgB,CAAC,EAC3C;MACE,OAAO,IAAI,CAAC;KACf;GACJ;;;;;;","names":["h","Host","abbreviate"],"sources":["./src/components/badge/badge.scss?tag=limel-badge&encapsulation=shadow","./src/components/badge/badge.tsx"],"sourcesContent":["@use '../../style/functions';\n@use '../../style/mixins';\n\n/**\n * @prop --badge-background-color: badge background color\n * @prop --badge-text-color: badge text color\n * @prop --badge-max-width: maximum width of the badge, before its text gets truncated\n */\n\n:host([hidden]) {\n    display: none;\n}\n\n:host(limel-badge) {\n    --limel-min-badge-size: 1rem;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    flex-shrink: 0;\n    min-height: var(--limel-min-badge-size);\n    min-width: var(--limel-min-badge-size);\n    border-radius: var(--limel-min-badge-size);\n}\n\nspan {\n    cursor: default;\n    box-sizing: border-box;\n\n    @include mixins.truncate-text;\n    text-align: center;\n    font-size: functions.pxToRem(11);\n    line-height: var(--limel-min-badge-size);\n\n    color: var(--badge-text-color, rgb(var(--contrast-1200)));\n\n    border-radius: var(--limel-min-badge-size);\n    max-height: var(--limel-min-badge-size);\n    min-width: 0.5rem;\n    min-height: 0.5rem;\n\n    background-color: var(--badge-background-color, rgb(var(--contrast-500)));\n\n    &:not(:empty) {\n        min-width: var(\n            --limel-min-badge-size\n        ); // ensures that a badge with only one character rendered as perfect circle\n        max-width: var(--badge-max-width, 2.75rem);\n        padding: 0 functions.pxToRem(4.5);\n    }\n}\n\n:host(.has-large-label) {\n    span {\n        cursor: help;\n    }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { abbreviate } from './format';\n\n/**\n * The Badge component can be used to display a notification badge,\n * optionally with a number or a text label.\n *\n * @exampleComponent limel-example-badge\n * @exampleComponent limel-example-badge-number\n * @exampleComponent limel-example-badge-string\n */\n@Component({\n    tag: 'limel-badge',\n    styleUrl: 'badge.scss',\n    shadow: true,\n})\nexport class Badge {\n    /**\n     * Label to display in the badge.\n     * Numeric labels larger than 999 will be rounded and abbreviated.\n     * String labels get truncated if their length is longer than\n     * six characters.\n     */\n    @Prop({ reflect: true })\n    public label?: number | string;\n\n    public render() {\n        return (\n            <Host\n                title={this.labelIsLarge() ? this.label : ''}\n                class={{\n                    'has-large-label': this.labelIsLarge(),\n                }}\n            >\n                <span>{this.renderLabel()}</span>\n            </Host>\n        );\n    }\n\n    private renderLabel() {\n        if (typeof this.label === 'number') {\n            return abbreviate(this.label);\n        }\n\n        return this.label;\n    }\n\n    private labelIsLarge() {\n        const largeNumericLabel = 999;\n        const largeStringLabel = 6;\n        if (\n            (typeof this.label === 'number' &&\n                this.label > largeNumericLabel) ||\n            (typeof this.label === 'string' &&\n                this.label.length > largeStringLabel)\n        ) {\n            return true;\n        }\n    }\n}\n"],"version":3}

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

@@ -6,7 +6,7 @@ const index = require('./index-174a078a.js');
 const _3dTiltHoverEffect = require('./3d-tilt-hover-effect-1ccb249e.js');
 const linkHelper = require('./link-helper-24fe2922.js');
 
-const infoTileCss = "@charset \"UTF-8\";\n/**\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* This can be used on a trigger element that opens a dropdown menu or a popover.\n*/\n/**\n * This mixin will mask out the content that is close to\n * the edges of a scrollable area.\n * - If the scrollable content has `overflow-y`, use `vertically`\n * as an argument for `$direction`.\n - If the scrollable content has `overflow-x`, use `horizontally`\n * as an argument for `$direction`.\n *\n * For the visual effect to work smoothly, we need to make sure that\n * the size of the fade-out edge effect is the same as the\n * internal paddings of the scrollable area. Otherwise, content of a\n * scrollable area that does not have a padding will fade out before\n * any scrolling has been done.\n * This is why this mixin already adds paddings, which automatically\n * default to the size of the fade-out effect.\n * This size defaults to `1rem`, but to override the size use\n * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`\n * when `vertically` argument is set, and use\n * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`\n * when `horizontally` argument is set.\n * Of course you can also programmatically increase and decrease the\n * size of these variables for each edge, based on the amount of\n * scrolling that has been done by the user. In this case, make sure\n * to add a custom padding where the mixin is used, to override\n * the paddings that are automatically added by the mixin in the\n * compiled CSS code.\n */\n/**\n* This mixin will add an animated underline to the bottom of an `a` elements.\n* Note that you may need to add `all: unset;` –depending on your use case–\n* before using this mixin.\n*/\n/**\n* This mixin creates a cross-browser font stack.\n* - `sans-serif` can be used for the UI of the components.\n* - `monospace` can be used for code.\n*\n* ⚠️ If we change the font stacks, we need to update\n* 1. the consumer documentation in `README.md`, and\n* 2. the CSS variables of `--kompendium-example-font-family`\n* in the `<style>` tag of `index.html`.\n*/\n/**\n* This mixin is a hack, using old CSS syntax\n* to enable you to truncate a piece of text,\n* after a certain number of lines.\n*/\n/**\n* This mixin will add a chessboard background pattern,\n* typically used to visualize transparency.\n*/\n/**\n* Make a container resizable by the user.\n* This is used in the documentations and examples\n* of some components, to demonstrate how the component\n* behaves in a resizable container.\n*/\n/**\n * Drag to reorder mixins\n */\n/**\n * The breakpoints below are used to create responsive designs\n * in Lime's products. Therefore, they are here to get distributed\n * to all components in other private repos, which rely on this `mixins`\n * file, to create consistent styles.\n *\n * :::important\n * In very rare cases you should used media queries!\n * Nowadays, there are many better ways of achieving responsive design\n * without media queries. For example, using CSS Grid, Flexbox, and their features.\n * :::\n */\n/**\n  * Media query mixins for responsive design based on screen width.\n  * Note that these mixins do not detect the device type!\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  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}\n\n:host ::slotted([slot=primary]) {\n  width: 100%;\n  height: 100%;\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  opacity: 0.9;\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:host(.has-primary-slot-content) .icon, a:has(limel-circular-progress) .icon {\n  top: unset;\n  bottom: 0.5rem;\n  --icon-min-size: 1.5rem;\n  --icon-preferred-size: 20cqh;\n}\n\nslot[name=primary] {\n  display: block;\n  aspect-ratio: 1;\n  width: min(var(--icon-preferred-size), var(--icon-max-size));\n}\n\n.progress,\nslot[name=primary] {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.75rem;\n}\n\n.progress {\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  opacity: 0.8;\n  line-height: 1.2;\n  font-size: clamp(var(--label-min-size), var(--label-preferred-size), var(--label-max-size));\n  display: -webkit-box;\n  overflow: hidden;\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n}\n@supports not (container-type: size) {\n  .label {\n    font-size: var(--limel-theme-default-font-size);\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}\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  slot[name=primary] {\n    top: 0.25rem;\n    right: 0.25rem;\n  }\n  a {\n    padding: 0.375rem;\n    gap: 0.125rem;\n  }\n  .icon {\n    opacity: 0.7;\n    top: 0.125rem;\n    right: 0.125rem;\n    padding: 0.125rem;\n    --icon-preferred-size: 18cqw;\n    --icon-max-size: 2rem;\n  }\n  .value-group {\n    gap: 0.125rem;\n  }\n  .value-and-suffix,\n  .label {\n    text-shadow: 0 0 1rem var(--info-tile-background-color, rgb(var(--contrast-100))), 0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100)));\n  }\n  .value {\n    --value-min-size: 0.7rem;\n    --value-preferred-size: 12cqw;\n    --value-max-size: 1rem;\n  }\n  .prefix,\n  .suffix {\n    --suffix-prefix-min-size: 0.6rem;\n    --suffix-prefix-preferred-size: 6cqw;\n    --suffix-prefix-max-size: 0.875rem;\n  }\n}\n@container (width < 18.75rem) {\n  .progress,\n  slot[name=primary] {\n    top: 0.5rem;\n    right: 0.5rem;\n  }\n  .icon {\n    top: 0.25rem;\n    right: 0.5rem;\n  }\n  :host(.has-primary-slot-content) .icon, a:has(limel-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  slot[name=primary],\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  :host(.has-primary-slot-content) .icon,\n  a:has(limel-circular-progress) .icon {\n    position: absolute;\n    top: 0.5rem;\n    right: 0.5rem;\n    --icon-max-size: 3rem;\n  }\n}\nlimel-3d-hover-effect-glow {\n  border-radius: var(--info-tile-border-radius, 1rem);\n}\n\n:host(limel-info-tile) {\n  isolation: isolate;\n  transform-style: preserve-3d;\n  perspective: 1000px;\n}\n@media (prefers-reduced-motion) {\n  :host(limel-info-tile) {\n    perspective: 2000px;\n  }\n}\n\na {\n  position: relative;\n  transition-duration: 0.8s;\n  transition-property: transform, box-shadow, background-color;\n  transition-timing-function: ease-out;\n  transform: scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);\n}\na:focus {\n  outline: none;\n}\na:hover, a:focus, a:focus-visible, a:focus-within {\n  will-change: background-color, box-shadow, transform;\n}\na:hover, a:focus, a:focus-visible, a:active {\n  transition-duration: 0.2s;\n}\na:hover, a:focus-visible {\n  box-shadow: var(--button-shadow-hovered), var(--shadow-depth-16);\n}\na:hover {\n  transform: scale3d(1.01, 1.01, 1.01) rotate3d(var(--limel-3d-hover-effect-rotate3d));\n}\na:focus-visible {\n  outline: none;\n  transform: scale3d(1.01, 1.01, 1.01);\n}\na:hover limel-3d-hover-effect-glow {\n  --limel-3d-hover-effect-glow-opacity: 0.5;\n}\n@media (prefers-reduced-motion) {\n  a:hover limel-3d-hover-effect-glow {\n    --limel-3d-hover-effect-glow-opacity: 0.2;\n  }\n}\na.is-clickable {\n  cursor: pointer;\n  box-shadow: var(--button-shadow-normal);\n}\na.is-clickable:hover, a.is-clickable:focus-visible {\n  box-shadow: var(--button-shadow-hovered), var(--shadow-depth-16);\n}\na.is-clickable:active {\n  transform: scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);\n  box-shadow: var(--button-shadow-pressed);\n}\na.is-clickable:focus-visible {\n  box-shadow: var(--shadow-depth-8-focused), var(--button-shadow-hovered);\n}\na.is-clickable:focus-visible:active {\n  box-shadow: var(--shadow-depth-8-focused), var(--button-shadow-pressed);\n}";
+const infoTileCss = "@charset \"UTF-8\";\n/**\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* This can be used on a trigger element that opens a dropdown menu or a popover.\n*/\n/**\n * This mixin will mask out the content that is close to\n * the edges of a scrollable area.\n * - If the scrollable content has `overflow-y`, use `vertically`\n * as an argument for `$direction`.\n - If the scrollable content has `overflow-x`, use `horizontally`\n * as an argument for `$direction`.\n *\n * For the visual effect to work smoothly, we need to make sure that\n * the size of the fade-out edge effect is the same as the\n * internal paddings of the scrollable area. Otherwise, content of a\n * scrollable area that does not have a padding will fade out before\n * any scrolling has been done.\n * This is why this mixin already adds paddings, which automatically\n * default to the size of the fade-out effect.\n * This size defaults to `1rem`, but to override the size use\n * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`\n * when `vertically` argument is set, and use\n * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`\n * when `horizontally` argument is set.\n * Of course you can also programmatically increase and decrease the\n * size of these variables for each edge, based on the amount of\n * scrolling that has been done by the user. In this case, make sure\n * to add a custom padding where the mixin is used, to override\n * the paddings that are automatically added by the mixin in the\n * compiled CSS code.\n */\n/**\n* This mixin will add an animated underline to the bottom of an `a` elements.\n* Note that you may need to add `all: unset;` –depending on your use case–\n* before using this mixin.\n*/\n/**\n* This mixin creates a cross-browser font stack.\n* - `sans-serif` can be used for the UI of the components.\n* - `monospace` can be used for code.\n*\n* ⚠️ If we change the font stacks, we need to update\n* 1. the consumer documentation in `README.md`, and\n* 2. the CSS variables of `--kompendium-example-font-family`\n* in the `<style>` tag of `index.html`.\n*/\n/**\n* This mixin is a hack, using old CSS syntax\n* to enable you to truncate a piece of text,\n* after a certain number of lines.\n*/\n/**\n* This mixin will add a chessboard background pattern,\n* typically used to visualize transparency.\n*/\n/**\n* Make a container resizable by the user.\n* This is used in the documentations and examples\n* of some components, to demonstrate how the component\n* behaves in a resizable container.\n*/\n/**\n * Drag to reorder mixins\n */\n/**\n * The breakpoints below are used to create responsive designs\n * in Lime's products. Therefore, they are here to get distributed\n * to all components in other private repos, which rely on this `mixins`\n * file, to create consistent styles.\n *\n * :::important\n * In very rare cases you should used media queries!\n * Nowadays, there are many better ways of achieving responsive design\n * without media queries. For example, using CSS Grid, Flexbox, and their features.\n * :::\n */\n/**\n  * Media query mixins for responsive design based on screen width.\n  * Note that these mixins do not detect the device type!\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  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}\n\n:host ::slotted([slot=primary]) {\n  width: 100%;\n  height: 100%;\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  opacity: 0.9;\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:host(.has-primary-slot-content) .icon, a:has(limel-circular-progress) .icon {\n  top: unset;\n  bottom: 0.5rem;\n  --icon-min-size: 1.5rem;\n  --icon-preferred-size: 20cqh;\n}\n\nslot[name=primary] {\n  display: block;\n  aspect-ratio: 1;\n  width: min(var(--icon-preferred-size), var(--icon-max-size));\n}\n\n.progress,\nslot[name=primary] {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.75rem;\n}\n\n.progress {\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  opacity: 0.8;\n  line-height: 1.2;\n  font-size: clamp(var(--label-min-size), var(--label-preferred-size), var(--label-max-size));\n  display: -webkit-box;\n  overflow: hidden;\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n}\n@supports not (container-type: size) {\n  .label {\n    font-size: var(--limel-theme-default-font-size);\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}\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  slot[name=primary] {\n    top: 0.25rem;\n    right: 0.25rem;\n  }\n  a {\n    padding: 0.375rem;\n    gap: 0.125rem;\n  }\n  .icon {\n    opacity: 0.7;\n    top: 0.125rem;\n    right: 0.125rem;\n    padding: 0.125rem;\n    --icon-preferred-size: 18cqw;\n    --icon-max-size: 2rem;\n  }\n  .value-group {\n    gap: 0.125rem;\n  }\n  .value-and-suffix,\n  .label {\n    text-shadow: 0 0 1rem var(--info-tile-background-color, rgb(var(--contrast-100))), 0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100)));\n  }\n  .prefix,\n  .suffix {\n    --suffix-prefix-min-size: 0.625rem;\n    --suffix-prefix-preferred-size: 6cqw;\n    --suffix-prefix-max-size: 0.75rem;\n  }\n}\n@container (width < 18.75rem) {\n  .progress,\n  slot[name=primary] {\n    top: 0.5rem;\n    right: 0.5rem;\n  }\n  .icon {\n    top: 0.25rem;\n    right: 0.5rem;\n  }\n  :host(.has-primary-slot-content) .icon, a:has(limel-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  slot[name=primary],\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  :host(.has-primary-slot-content) .icon,\n  a:has(limel-circular-progress) .icon {\n    position: absolute;\n    top: 0.5rem;\n    right: 0.5rem;\n    --icon-max-size: 3rem;\n  }\n}\nlimel-3d-hover-effect-glow {\n  border-radius: var(--info-tile-border-radius, 1rem);\n}\n\n:host(limel-info-tile) {\n  isolation: isolate;\n  transform-style: preserve-3d;\n  perspective: 1000px;\n}\n@media (prefers-reduced-motion) {\n  :host(limel-info-tile) {\n    perspective: 2000px;\n  }\n}\n\na {\n  position: relative;\n  transition-duration: 0.8s;\n  transition-property: transform, box-shadow, background-color;\n  transition-timing-function: ease-out;\n  transform: scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);\n}\na:focus {\n  outline: none;\n}\na:hover, a:focus, a:focus-visible, a:focus-within {\n  will-change: background-color, box-shadow, transform;\n}\na:hover, a:focus, a:focus-visible, a:active {\n  transition-duration: 0.2s;\n}\na:hover, a:focus-visible {\n  box-shadow: var(--button-shadow-hovered), var(--shadow-depth-16);\n}\na:hover {\n  transform: scale3d(1.01, 1.01, 1.01) rotate3d(var(--limel-3d-hover-effect-rotate3d));\n}\na:focus-visible {\n  outline: none;\n  transform: scale3d(1.01, 1.01, 1.01);\n}\na:hover limel-3d-hover-effect-glow {\n  --limel-3d-hover-effect-glow-opacity: 0.5;\n}\n@media (prefers-reduced-motion) {\n  a:hover limel-3d-hover-effect-glow {\n    --limel-3d-hover-effect-glow-opacity: 0.2;\n  }\n}\na.is-clickable {\n  cursor: pointer;\n  box-shadow: var(--button-shadow-normal);\n}\na.is-clickable:hover, a.is-clickable:focus-visible {\n  box-shadow: var(--button-shadow-hovered), var(--shadow-depth-16);\n}\na.is-clickable:active {\n  transform: scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);\n  box-shadow: var(--button-shadow-pressed);\n}\na.is-clickable:focus-visible {\n  box-shadow: var(--shadow-depth-8-focused), var(--button-shadow-hovered);\n}\na.is-clickable:focus-visible:active {\n  box-shadow: var(--shadow-depth-8-focused), var(--button-shadow-pressed);\n}";
 
 const InfoTile = class {
   constructor(hostRef) {

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

@@ -1 +1 @@
-{"file":"limel-info-tile.entry.cjs.js","mappings":"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","names":["h","getMouseEventHandlers","getRel","Host"],"sources":["./src/components/info-tile/info-tile.scss?tag=limel-info-tile&encapsulation=shadow","./src/components/info-tile/info-tile.tsx"],"sourcesContent":["/**\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\n@use '../../style/mixins';\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\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\n    --label-min-size: 0.75rem;\n    --label-preferred-size: 6cqw;\n    --label-max-size: 1rem;\n\n    --value-min-size: 1rem;\n    --value-preferred-size: 20cqw;\n    --value-max-size: 4rem;\n\n    --suffix-prefix-min-size: 0.75rem;\n    --suffix-prefix-preferred-size: 8cqw;\n    --suffix-prefix-max-size: 1.5rem;\n\n    --icon-min-size: 2rem;\n    --icon-preferred-size: 60cqh;\n    --icon-max-size: calc(100cqw - 0.5rem);\n\n    container-type: size;\n    position: relative;\n    display: flex;\n\n    width: 100%;\n    height: 100%;\n\n    * {\n        box-sizing: border-box;\n    }\n}\n\n:host(limel-info-tile[disabled]) {\n    a {\n        opacity: 0.5;\n        cursor: not-allowed;\n    }\n}\n\na {\n    all: unset;\n    overflow: hidden;\n\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    align-items: flex-start;\n\n    height: 100%;\n    width: 100%;\n    flex-grow: 1;\n\n    padding: 0.25rem 1rem 0.5rem 1rem;\n    border-radius: var(--info-tile-border-radius, 1rem);\n    background-color: var(\n        --info-tile-background-color,\n        var(--lime-elevated-surface-background-color)\n    );\n}\n\n:host ::slotted([slot='primary']) {\n    width: 100%;\n    height: 100%;\n}\n\n.icon {\n    z-index: 1;\n    position: absolute;\n    top: 0.5rem;\n    right: 0.75rem;\n    padding: 0.25rem;\n\n    aspect-ratio: 1/1;\n\n    color: var(--info-tile-icon-color, rgb(var(--contrast-1000)));\n    opacity: 0.9;\n\n    border-radius: 0;\n    height: clamp(\n        var(--icon-min-size),\n        var(--icon-preferred-size),\n        var(--icon-max-size)\n    );\n\n    @supports not (container-type: size) {\n        width: max(10%, 3rem);\n    }\n\n    :host(.has-primary-slot-content) &,\n    a:has(limel-circular-progress) & {\n        top: unset;\n        bottom: 0.5rem;\n        --icon-min-size: 1.5rem;\n        --icon-preferred-size: 20cqh;\n    }\n}\n\nslot[name='primary'] {\n    display: block;\n    aspect-ratio: 1;\n    width: min(var(--icon-preferred-size), var(--icon-max-size));\n}\n\n.progress,\nslot[name='primary'] {\n    position: absolute;\n    top: 0.75rem;\n    right: 0.75rem;\n}\n\n.progress {\n    --circular-progress-size: min(\n        var(--icon-preferred-size),\n        var(--icon-max-size)\n    );\n    @supports not (container-type: size) {\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    opacity: 0.8;\n\n    line-height: 1.2;\n    font-size: clamp(\n        var(--label-min-size),\n        var(--label-preferred-size),\n        var(--label-max-size)\n    );\n    @supports not (container-type: size) {\n        font-size: var(--limel-theme-default-font-size);\n    }\n\n    @include mixins.truncate-text-on-line(2);\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}\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:\n        0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100))),\n        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(\n        var(--suffix-prefix-min-size),\n        var(--suffix-prefix-preferred-size),\n        var(--suffix-prefix-max-size)\n    );\n    opacity: 0.7;\n\n    @supports not (container-type: size) {\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:\n        opacity 0.2s ease,\n        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\n    @include mixins.truncate-text;\n    font-weight: bold;\n    line-height: normal;\n\n    font-size: clamp(\n        var(--value-min-size),\n        var(--value-preferred-size),\n        var(--value-max-size)\n    );\n    @supports not (container-type: size) {\n        font-size: 1.5rem;\n    }\n\n    :host(limel-info-tile[loading]) & {\n        opacity: 0.3;\n        transform: translate3d(0, 0, 0) scale(0.9);\n    }\n}\n\n.suffix {\n    transform: translateY(10%);\n}\n\n$xs: 8rem; //128px:\n$s: 18.75rem; //300px\n$m: 40.5rem; //648px\n$l: 62.5rem; //1000px\n\n@container (width < #{$xs}) {\n    .progress,\n    slot[name='primary'] {\n        top: 0.25rem;\n        right: 0.25rem;\n    }\n    a {\n        padding: 0.375rem;\n        gap: 0.125rem;\n    }\n\n    .icon {\n        opacity: 0.7;\n        top: 0.125rem;\n        right: 0.125rem;\n        padding: 0.125rem;\n        --icon-preferred-size: 18cqw;\n        --icon-max-size: 2rem;\n    }\n\n    .value-group {\n        gap: 0.125rem;\n    }\n\n    .value-and-suffix,\n    .label {\n        text-shadow:\n            0 0 1rem var(--info-tile-background-color, rgb(var(--contrast-100))),\n            0 0 0.5rem\n                var(--info-tile-background-color, rgb(var(--contrast-100)));\n    }\n\n    .value {\n        --value-min-size: 0.7rem;\n        --value-preferred-size: 12cqw;\n        --value-max-size: 1rem;\n    }\n\n    .prefix,\n    .suffix {\n        --suffix-prefix-min-size: 0.6rem;\n        --suffix-prefix-preferred-size: 6cqw;\n        --suffix-prefix-max-size: 0.875rem;\n    }\n}\n\n@container (width < #{$s}) {\n    .progress,\n    slot[name='primary'] {\n        top: 0.5rem;\n        right: 0.5rem;\n    }\n    .icon {\n        top: 0.25rem;\n        right: 0.5rem;\n\n        :host(.has-primary-slot-content) &,\n        a:has(limel-circular-progress) & {\n            right: 0.25rem;\n            bottom: 0.25rem;\n        }\n    }\n}\n\n@container (width < #{$m}) {\n    .value {\n        &.ch-1,\n        &.ch-2,\n        &.ch-3,\n        &.ch-4 {\n            --value-preferred-size: 20cqw;\n        }\n        &.ch-5 {\n            --value-preferred-size: 18cqw;\n        }\n        &.ch-6 {\n            --value-preferred-size: 17cqw;\n        }\n        &.ch-7 {\n            --value-preferred-size: 16cqw;\n        }\n        &.ch-8 {\n            --value-preferred-size: 15cqw;\n        }\n        &.ch-9 {\n            --value-preferred-size: 14cqw;\n        }\n        --value-preferred-size: 13cqw;\n    }\n}\n\n@container (height > #{$xs}) {\n    a {\n        padding-top: 0.75rem;\n        padding-bottom: 1rem;\n    }\n}\n\n@container (height < #{$xs}) and (width > #{$xs}) {\n    .value {\n        --value-preferred-size: 32cqh !important;\n    }\n    .suffix,\n    .prefix {\n        --suffix-prefix-preferred-size: 16cqh !important;\n    }\n}\n\n@container (height > #{$s}) {\n    .progress,\n    slot[name='primary'],\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        // -webkit-line-clamp: 3;\n    }\n\n    :host(.has-primary-slot-content),\n    a:has(limel-circular-progress) {\n        .icon {\n            position: absolute;\n            top: 0.5rem;\n            right: 0.5rem;\n            --icon-max-size: 3rem;\n        }\n    }\n}\n\n// The 3D effect\nlimel-3d-hover-effect-glow {\n    border-radius: var(--info-tile-border-radius, 1rem);\n}\n\n:host(limel-info-tile) {\n    @include mixins.parent-of-the-3d-element;\n}\n\na {\n    @include mixins.the-3d-element;\n\n    &.is-clickable {\n        @include mixins.the-3d-element--clickable;\n    }\n}\n","import { Component, Prop, h, Element, Host, State } from '@stencil/core';\nimport { InfoTileProgress } from '../info-tile/info-tile.types';\nimport { Link } from '../../global/shared-types/link.types';\nimport { getMouseEventHandlers } from '../../util/3d-tilt-hover-effect';\nimport { getRel } from '../../util/link-helper';\n\n/**\n * This component can be used on places such as a start page or a dashboard.\n * It offers features for visualizing aggregated data along with supplementary\n * information.\n *\n * If clicking on the component should navigate the user to\n * a new screen or web page, you need to provide a URL,\n * using the `link` property.\n *\n * @exampleComponent limel-example-info-tile\n * @exampleComponent limel-example-info-tile-badge\n * @exampleComponent limel-example-info-tile-progress\n * @exampleComponent limel-example-info-tile-loading\n * @exampleComponent limel-example-info-tile-primary-slot\n * @exampleComponent limel-example-info-tile-styling\n */\n@Component({\n    tag: 'limel-info-tile',\n    shadow: true,\n    styleUrl: 'info-tile.scss',\n})\nexport class InfoTile {\n    /**\n     * A piece of text or number that is the main piece of information\n     * which the component is intended to visualize.\n     */\n    @Prop({ reflect: true })\n    public value: number | string;\n\n    /**\n     * Name of icon for the info tile.\n     */\n    @Prop()\n    public icon?: string;\n\n    /**\n     * The text to show below the info tile. Long labels will be truncated.\n     */\n    @Prop({ reflect: true })\n    public label?: string = null;\n\n    /**\n     * A string of text that is visually placed before the value.\n     */\n    @Prop({ reflect: true })\n    public prefix?: string;\n\n    /**\n     * A string of text that is visually placed after the value.\n     */\n    @Prop({ reflect: true })\n    public suffix?: string;\n\n    /**\n     * Set to `true` if info tile is disabled.\n     */\n    @Prop({ reflect: true })\n    public disabled? = false;\n\n    /**\n     * If supplied, the info tile will display a notification badge.\n     */\n    @Prop({ reflect: true })\n    public badge?: number | string;\n\n    /**\n     * Set to `true` to put the component in the `loading` state.\n     * This does _not_ disable the link. To do so, the\n     * `disabled` property should be set to `true` as well.\n     */\n    @Prop({ reflect: true })\n    public loading? = false;\n\n    /**\n     * If supplied, the info tile will be a clickable link.\n     *\n     * Supplying a value also adds an elevated effect using a shadow,\n     * as well as `cursor: pointer`, which appears on hover.\n     * While we strongly recommend supplying a link whenever the\n     * component should act as a link, if this is not possible, and\n     * you need to provide interaction through a click handler,\n     * you can still get the correct styling by supplying a `Link`\n     * object with the `href` property set to `'#'`.\n     */\n    @Prop()\n    public link?: Link;\n\n    /**\n     * Properties of the optional circular progress bar.\n     *\n     * Defaults:\n     * - `maxValue`: 100\n     * - `suffix`: %\n     * - `displayPercentageColors`: false\n     *\n     * Colors change with intervals of 10 %.\n     */\n    @Prop()\n    public progress?: InfoTileProgress;\n\n    @Element()\n    private host: HTMLElement;\n\n    /**\n     * `true` when something is assigned to the `primary` slot\n     */\n    @State()\n    private hasPrimarySlot = false;\n\n    private handleMouseEnter: () => void;\n    private handleMouseLeave: () => void;\n\n    public componentWillLoad() {\n        const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(\n            this.host\n        );\n        this.handleMouseEnter = handleMouseEnter;\n        this.handleMouseLeave = handleMouseLeave;\n        this.updateHasPrimarySlotContent();\n    }\n\n    public render() {\n        const extendedAriaLabel =\n            this.checkProps(this?.prefix) +\n            this.value +\n            ' ' +\n            this.checkProps(this?.suffix) +\n            this.checkProps(this?.label) +\n            '. ' +\n            this.checkProps(this?.progress?.prefix) +\n            this.checkProps(this?.progress?.value) +\n            this.checkProps(this?.progress?.suffix) +\n            this.checkProps(this?.link?.title);\n\n        const link = this.disabled ? '#' : this.link?.href;\n        const rel = getRel(this.link?.target, this.link?.rel);\n\n        return (\n            <Host\n                onMouseEnter={this.handleMouseEnter}\n                onMouseLeave={this.handleMouseLeave}\n                class={{ 'has-primary-slot-content': this.hasPrimarySlot }}\n            >\n                <a\n                    title={this.link?.title}\n                    href={link}\n                    target={this.link?.target}\n                    rel={rel}\n                    tabindex=\"0\"\n                    aria-label={extendedAriaLabel}\n                    aria-disabled={this.disabled}\n                    aria-busy={this.loading ? 'true' : 'false'}\n                    aria-live=\"polite\"\n                    class={{\n                        'is-clickable': !!this.link?.href && !this.disabled,\n                    }}\n                >\n                    {this.renderIcon()}\n                    {this.renderProgress()}\n                    <slot\n                        name=\"primary\"\n                        onSlotchange={this.updateHasPrimarySlotContent}\n                    />\n                    <div class=\"value-group\">\n                        {this.renderPrefix()}\n                        <div class=\"value-and-suffix\">\n                            {this.renderValue()}\n                            {this.renderSuffix()}\n                        </div>\n                        {this.renderSpinner()}\n                    </div>\n                    {this.renderLabel()}\n                    <limel-3d-hover-effect-glow />\n                </a>\n                {this.renderNotification()}\n            </Host>\n        );\n    }\n\n    private checkProps(propValue) {\n        return propValue ? propValue + ' ' : '';\n    }\n\n    private renderPrefix = () => {\n        if (this.prefix) {\n            return <span class=\"prefix\">{this.prefix}</span>;\n        }\n    };\n\n    private renderValue = () => {\n        const characterCount = (this.value ?? '').toString().length;\n\n        if (!this.value && this.loading) {\n            return <span class=\"value\">···</span>;\n        }\n\n        if (this.value) {\n            return (\n                <span\n                    class={{\n                        value: true,\n                        [`ch-${characterCount}`]: true,\n                    }}\n                >\n                    {this.value}\n                </span>\n            );\n        }\n    };\n\n    private renderSuffix = () => {\n        if (this.suffix) {\n            return <span class=\"suffix\">{this.suffix}</span>;\n        }\n    };\n\n    private renderIcon = () => {\n        if (this.icon) {\n            return <limel-icon class=\"icon\" name={this.icon} />;\n        }\n    };\n\n    private updateHasPrimarySlotContent = (e?: Event) => {\n        const slot =\n            (e?.target as HTMLSlotElement) ??\n            this.host.shadowRoot.querySelector('slot[name=\"primary\"]');\n        this.hasPrimarySlot = slot && slot.assignedElements().length > 0;\n    };\n\n    private renderProgress = () => {\n        if (this.hasPrimarySlot) {\n            return;\n        }\n\n        if (!this.progress?.value && this.progress?.value !== 0) {\n            return;\n        }\n\n        return (\n            <limel-circular-progress\n                class=\"progress\"\n                prefix={this.progress.prefix}\n                value={this.progress.value}\n                suffix={this.progress.suffix}\n                maxValue={this.progress.maxValue}\n                displayPercentageColors={this.progress.displayPercentageColors}\n            />\n        );\n    };\n\n    private renderLabel = () => {\n        if (this.label) {\n            return <span class=\"label\">{this.label}</span>;\n        }\n    };\n\n    private renderNotification = () => {\n        if (this.badge) {\n            return <limel-badge label={this.badge} />;\n        }\n    };\n\n    private renderSpinner = () => {\n        if (this.loading) {\n            return <limel-linear-progress indeterminate={true} />;\n        }\n    };\n}\n"],"version":3}
+{"file":"limel-info-tile.entry.cjs.js","mappings":"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","names":["h","getMouseEventHandlers","getRel","Host"],"sources":["./src/components/info-tile/info-tile.scss?tag=limel-info-tile&encapsulation=shadow","./src/components/info-tile/info-tile.tsx"],"sourcesContent":["/**\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\n@use '../../style/mixins';\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\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\n    --label-min-size: 0.75rem;\n    --label-preferred-size: 6cqw;\n    --label-max-size: 1rem;\n\n    --value-min-size: 1rem;\n    --value-preferred-size: 20cqw;\n    --value-max-size: 4rem;\n\n    --suffix-prefix-min-size: 0.75rem;\n    --suffix-prefix-preferred-size: 8cqw;\n    --suffix-prefix-max-size: 1.5rem;\n\n    --icon-min-size: 2rem;\n    --icon-preferred-size: 60cqh;\n    --icon-max-size: calc(100cqw - 0.5rem);\n\n    container-type: size;\n    position: relative;\n    display: flex;\n\n    width: 100%;\n    height: 100%;\n\n    * {\n        box-sizing: border-box;\n    }\n}\n\n:host(limel-info-tile[disabled]) {\n    a {\n        opacity: 0.5;\n        cursor: not-allowed;\n    }\n}\n\na {\n    all: unset;\n    overflow: hidden;\n\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    align-items: flex-start;\n\n    height: 100%;\n    width: 100%;\n    flex-grow: 1;\n\n    padding: 0.25rem 1rem 0.5rem 1rem;\n    border-radius: var(--info-tile-border-radius, 1rem);\n    background-color: var(\n        --info-tile-background-color,\n        var(--lime-elevated-surface-background-color)\n    );\n}\n\n:host ::slotted([slot='primary']) {\n    width: 100%;\n    height: 100%;\n}\n\n.icon {\n    z-index: 1;\n    position: absolute;\n    top: 0.5rem;\n    right: 0.75rem;\n    padding: 0.25rem;\n\n    aspect-ratio: 1/1;\n\n    color: var(--info-tile-icon-color, rgb(var(--contrast-1000)));\n    opacity: 0.9;\n\n    border-radius: 0;\n    height: clamp(\n        var(--icon-min-size),\n        var(--icon-preferred-size),\n        var(--icon-max-size)\n    );\n\n    @supports not (container-type: size) {\n        width: max(10%, 3rem);\n    }\n\n    :host(.has-primary-slot-content) &,\n    a:has(limel-circular-progress) & {\n        top: unset;\n        bottom: 0.5rem;\n        --icon-min-size: 1.5rem;\n        --icon-preferred-size: 20cqh;\n    }\n}\n\nslot[name='primary'] {\n    display: block;\n    aspect-ratio: 1;\n    width: min(var(--icon-preferred-size), var(--icon-max-size));\n}\n\n.progress,\nslot[name='primary'] {\n    position: absolute;\n    top: 0.75rem;\n    right: 0.75rem;\n}\n\n.progress {\n    --circular-progress-size: min(\n        var(--icon-preferred-size),\n        var(--icon-max-size)\n    );\n    @supports not (container-type: size) {\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    opacity: 0.8;\n\n    line-height: 1.2;\n    font-size: clamp(\n        var(--label-min-size),\n        var(--label-preferred-size),\n        var(--label-max-size)\n    );\n    @supports not (container-type: size) {\n        font-size: var(--limel-theme-default-font-size);\n    }\n\n    @include mixins.truncate-text-on-line(2);\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}\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:\n        0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100))),\n        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(\n        var(--suffix-prefix-min-size),\n        var(--suffix-prefix-preferred-size),\n        var(--suffix-prefix-max-size)\n    );\n    opacity: 0.7;\n\n    @supports not (container-type: size) {\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:\n        opacity 0.2s ease,\n        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\n    @include mixins.truncate-text;\n    font-weight: bold;\n    line-height: normal;\n\n    font-size: clamp(\n        var(--value-min-size),\n        var(--value-preferred-size),\n        var(--value-max-size)\n    );\n    @supports not (container-type: size) {\n        font-size: 1.5rem;\n    }\n\n    :host(limel-info-tile[loading]) & {\n        opacity: 0.3;\n        transform: translate3d(0, 0, 0) scale(0.9);\n    }\n}\n\n.suffix {\n    transform: translateY(10%);\n}\n\n$xs: 8rem; //128px:\n$s: 18.75rem; //300px\n$m: 40.5rem; //648px\n$l: 62.5rem; //1000px\n\n@container (width < #{$xs}) {\n    .progress,\n    slot[name='primary'] {\n        top: 0.25rem;\n        right: 0.25rem;\n    }\n    a {\n        padding: 0.375rem;\n        gap: 0.125rem;\n    }\n\n    .icon {\n        opacity: 0.7;\n        top: 0.125rem;\n        right: 0.125rem;\n        padding: 0.125rem;\n        --icon-preferred-size: 18cqw;\n        --icon-max-size: 2rem;\n    }\n\n    .value-group {\n        gap: 0.125rem;\n    }\n\n    .value-and-suffix,\n    .label {\n        text-shadow:\n            0 0 1rem var(--info-tile-background-color, rgb(var(--contrast-100))),\n            0 0 0.5rem\n                var(--info-tile-background-color, rgb(var(--contrast-100)));\n    }\n\n    .prefix,\n    .suffix {\n        --suffix-prefix-min-size: 0.625rem;\n        --suffix-prefix-preferred-size: 6cqw;\n        --suffix-prefix-max-size: 0.75rem;\n    }\n}\n\n@container (width < #{$s}) {\n    .progress,\n    slot[name='primary'] {\n        top: 0.5rem;\n        right: 0.5rem;\n    }\n    .icon {\n        top: 0.25rem;\n        right: 0.5rem;\n\n        :host(.has-primary-slot-content) &,\n        a:has(limel-circular-progress) & {\n            right: 0.25rem;\n            bottom: 0.25rem;\n        }\n    }\n}\n\n@container (width < #{$m}) {\n    .value {\n        &.ch-1,\n        &.ch-2,\n        &.ch-3,\n        &.ch-4 {\n            --value-preferred-size: 20cqw;\n        }\n        &.ch-5 {\n            --value-preferred-size: 18cqw;\n        }\n        &.ch-6 {\n            --value-preferred-size: 17cqw;\n        }\n        &.ch-7 {\n            --value-preferred-size: 16cqw;\n        }\n        &.ch-8 {\n            --value-preferred-size: 15cqw;\n        }\n        &.ch-9 {\n            --value-preferred-size: 14cqw;\n        }\n        --value-preferred-size: 13cqw;\n    }\n}\n\n@container (height > #{$xs}) {\n    a {\n        padding-top: 0.75rem;\n        padding-bottom: 1rem;\n    }\n}\n\n@container (height < #{$xs}) and (width > #{$xs}) {\n    .value {\n        --value-preferred-size: 32cqh !important;\n    }\n    .suffix,\n    .prefix {\n        --suffix-prefix-preferred-size: 16cqh !important;\n    }\n}\n\n@container (height > #{$s}) {\n    .progress,\n    slot[name='primary'],\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        // -webkit-line-clamp: 3;\n    }\n\n    :host(.has-primary-slot-content),\n    a:has(limel-circular-progress) {\n        .icon {\n            position: absolute;\n            top: 0.5rem;\n            right: 0.5rem;\n            --icon-max-size: 3rem;\n        }\n    }\n}\n\n// The 3D effect\nlimel-3d-hover-effect-glow {\n    border-radius: var(--info-tile-border-radius, 1rem);\n}\n\n:host(limel-info-tile) {\n    @include mixins.parent-of-the-3d-element;\n}\n\na {\n    @include mixins.the-3d-element;\n\n    &.is-clickable {\n        @include mixins.the-3d-element--clickable;\n    }\n}\n","import { Component, Prop, h, Element, Host, State } from '@stencil/core';\nimport { InfoTileProgress } from '../info-tile/info-tile.types';\nimport { Link } from '../../global/shared-types/link.types';\nimport { getMouseEventHandlers } from '../../util/3d-tilt-hover-effect';\nimport { getRel } from '../../util/link-helper';\n\n/**\n * This component can be used on places such as a start page or a dashboard.\n * It offers features for visualizing aggregated data along with supplementary\n * information.\n *\n * If clicking on the component should navigate the user to\n * a new screen or web page, you need to provide a URL,\n * using the `link` property.\n *\n * @exampleComponent limel-example-info-tile\n * @exampleComponent limel-example-info-tile-badge\n * @exampleComponent limel-example-info-tile-progress\n * @exampleComponent limel-example-info-tile-loading\n * @exampleComponent limel-example-info-tile-primary-slot\n * @exampleComponent limel-example-info-tile-styling\n */\n@Component({\n    tag: 'limel-info-tile',\n    shadow: true,\n    styleUrl: 'info-tile.scss',\n})\nexport class InfoTile {\n    /**\n     * A piece of text or number that is the main piece of information\n     * which the component is intended to visualize.\n     */\n    @Prop({ reflect: true })\n    public value: number | string;\n\n    /**\n     * Name of icon for the info tile.\n     */\n    @Prop()\n    public icon?: string;\n\n    /**\n     * The text to show below the info tile. Long labels will be truncated.\n     */\n    @Prop({ reflect: true })\n    public label?: string = null;\n\n    /**\n     * A string of text that is visually placed before the value.\n     */\n    @Prop({ reflect: true })\n    public prefix?: string;\n\n    /**\n     * A string of text that is visually placed after the value.\n     */\n    @Prop({ reflect: true })\n    public suffix?: string;\n\n    /**\n     * Set to `true` if info tile is disabled.\n     */\n    @Prop({ reflect: true })\n    public disabled? = false;\n\n    /**\n     * If supplied, the info tile will display a notification badge.\n     */\n    @Prop({ reflect: true })\n    public badge?: number | string;\n\n    /**\n     * Set to `true` to put the component in the `loading` state.\n     * This does _not_ disable the link. To do so, the\n     * `disabled` property should be set to `true` as well.\n     */\n    @Prop({ reflect: true })\n    public loading? = false;\n\n    /**\n     * If supplied, the info tile will be a clickable link.\n     *\n     * Supplying a value also adds an elevated effect using a shadow,\n     * as well as `cursor: pointer`, which appears on hover.\n     * While we strongly recommend supplying a link whenever the\n     * component should act as a link, if this is not possible, and\n     * you need to provide interaction through a click handler,\n     * you can still get the correct styling by supplying a `Link`\n     * object with the `href` property set to `'#'`.\n     */\n    @Prop()\n    public link?: Link;\n\n    /**\n     * Properties of the optional circular progress bar.\n     *\n     * Defaults:\n     * - `maxValue`: 100\n     * - `suffix`: %\n     * - `displayPercentageColors`: false\n     *\n     * Colors change with intervals of 10 %.\n     */\n    @Prop()\n    public progress?: InfoTileProgress;\n\n    @Element()\n    private host: HTMLElement;\n\n    /**\n     * `true` when something is assigned to the `primary` slot\n     */\n    @State()\n    private hasPrimarySlot = false;\n\n    private handleMouseEnter: () => void;\n    private handleMouseLeave: () => void;\n\n    public componentWillLoad() {\n        const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(\n            this.host\n        );\n        this.handleMouseEnter = handleMouseEnter;\n        this.handleMouseLeave = handleMouseLeave;\n        this.updateHasPrimarySlotContent();\n    }\n\n    public render() {\n        const extendedAriaLabel =\n            this.checkProps(this?.prefix) +\n            this.value +\n            ' ' +\n            this.checkProps(this?.suffix) +\n            this.checkProps(this?.label) +\n            '. ' +\n            this.checkProps(this?.progress?.prefix) +\n            this.checkProps(this?.progress?.value) +\n            this.checkProps(this?.progress?.suffix) +\n            this.checkProps(this?.link?.title);\n\n        const link = this.disabled ? '#' : this.link?.href;\n        const rel = getRel(this.link?.target, this.link?.rel);\n\n        return (\n            <Host\n                onMouseEnter={this.handleMouseEnter}\n                onMouseLeave={this.handleMouseLeave}\n                class={{ 'has-primary-slot-content': this.hasPrimarySlot }}\n            >\n                <a\n                    title={this.link?.title}\n                    href={link}\n                    target={this.link?.target}\n                    rel={rel}\n                    tabindex=\"0\"\n                    aria-label={extendedAriaLabel}\n                    aria-disabled={this.disabled}\n                    aria-busy={this.loading ? 'true' : 'false'}\n                    aria-live=\"polite\"\n                    class={{\n                        'is-clickable': !!this.link?.href && !this.disabled,\n                    }}\n                >\n                    {this.renderIcon()}\n                    {this.renderProgress()}\n                    <slot\n                        name=\"primary\"\n                        onSlotchange={this.updateHasPrimarySlotContent}\n                    />\n                    <div class=\"value-group\">\n                        {this.renderPrefix()}\n                        <div class=\"value-and-suffix\">\n                            {this.renderValue()}\n                            {this.renderSuffix()}\n                        </div>\n                        {this.renderSpinner()}\n                    </div>\n                    {this.renderLabel()}\n                    <limel-3d-hover-effect-glow />\n                </a>\n                {this.renderNotification()}\n            </Host>\n        );\n    }\n\n    private checkProps(propValue) {\n        return propValue ? propValue + ' ' : '';\n    }\n\n    private renderPrefix = () => {\n        if (this.prefix) {\n            return <span class=\"prefix\">{this.prefix}</span>;\n        }\n    };\n\n    private renderValue = () => {\n        const characterCount = (this.value ?? '').toString().length;\n\n        if (!this.value && this.loading) {\n            return <span class=\"value\">···</span>;\n        }\n\n        if (this.value) {\n            return (\n                <span\n                    class={{\n                        value: true,\n                        [`ch-${characterCount}`]: true,\n                    }}\n                >\n                    {this.value}\n                </span>\n            );\n        }\n    };\n\n    private renderSuffix = () => {\n        if (this.suffix) {\n            return <span class=\"suffix\">{this.suffix}</span>;\n        }\n    };\n\n    private renderIcon = () => {\n        if (this.icon) {\n            return <limel-icon class=\"icon\" name={this.icon} />;\n        }\n    };\n\n    private updateHasPrimarySlotContent = (e?: Event) => {\n        const slot =\n            (e?.target as HTMLSlotElement) ??\n            this.host.shadowRoot.querySelector('slot[name=\"primary\"]');\n        this.hasPrimarySlot = slot && slot.assignedElements().length > 0;\n    };\n\n    private renderProgress = () => {\n        if (this.hasPrimarySlot) {\n            return;\n        }\n\n        if (!this.progress?.value && this.progress?.value !== 0) {\n            return;\n        }\n\n        return (\n            <limel-circular-progress\n                class=\"progress\"\n                prefix={this.progress.prefix}\n                value={this.progress.value}\n                suffix={this.progress.suffix}\n                maxValue={this.progress.maxValue}\n                displayPercentageColors={this.progress.displayPercentageColors}\n            />\n        );\n    };\n\n    private renderLabel = () => {\n        if (this.label) {\n            return <span class=\"label\">{this.label}</span>;\n        }\n    };\n\n    private renderNotification = () => {\n        if (this.badge) {\n            return <limel-badge label={this.badge} />;\n        }\n    };\n\n    private renderSpinner = () => {\n        if (this.loading) {\n            return <limel-linear-progress indeterminate={true} />;\n        }\n    };\n}\n"],"version":3}

package/dist/cjs/limel-tab-bar.cjs.entry.js

@@ -2051,7 +2051,7 @@ function setActiveTab(tabs, index) {
   return result;
 }
 
-const tabBarCss = "@charset \"UTF-8\";.mdc-tab-bar{width:100%}.mdc-tab{height:48px}.mdc-tab--stacked{height:72px}.mdc-tab-scroller{overflow-y:hidden}.mdc-tab-scroller.mdc-tab-scroller--animating .mdc-tab-scroller__scroll-content{transition:250ms transform cubic-bezier(0.4, 0, 0.2, 1)}.mdc-tab-scroller__test{position:absolute;top:-9999px;width:100px;height:100px;overflow-x:scroll}.mdc-tab-scroller__scroll-area{-webkit-overflow-scrolling:touch;display:flex;overflow-x:hidden}.mdc-tab-scroller__scroll-area::-webkit-scrollbar,.mdc-tab-scroller__test::-webkit-scrollbar{display:none}.mdc-tab-scroller__scroll-area--scroll{overflow-x:scroll}.mdc-tab-scroller__scroll-content{position:relative;display:flex;flex:1 0 auto;transform:none;will-change:transform}.mdc-tab-scroller--align-start .mdc-tab-scroller__scroll-content{justify-content:flex-start}.mdc-tab-scroller--align-end .mdc-tab-scroller__scroll-content{justify-content:flex-end}.mdc-tab-scroller--align-center .mdc-tab-scroller__scroll-content{justify-content:center}.mdc-tab-scroller--animating .mdc-tab-scroller__scroll-area{-webkit-overflow-scrolling:auto}.mdc-tab-indicator .mdc-tab-indicator__content--underline{border-color:#6200ee;border-color:var(--mdc-theme-primary, #6200ee)}.mdc-tab-indicator .mdc-tab-indicator__content--icon{color:#018786;color:var(--mdc-theme-secondary, #018786)}.mdc-tab-indicator .mdc-tab-indicator__content--underline{border-top-width:2px}.mdc-tab-indicator .mdc-tab-indicator__content--icon{height:34px;font-size:34px}.mdc-tab-indicator{display:flex;position:absolute;top:0;left:0;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.mdc-tab-indicator__content{transform-origin:left;opacity:0}.mdc-tab-indicator__content--underline{align-self:flex-end;box-sizing:border-box;width:100%;border-top-style:solid}.mdc-tab-indicator__content--icon{align-self:center;margin:0 auto}.mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:1}.mdc-tab-indicator .mdc-tab-indicator__content{transition:250ms transform cubic-bezier(0.4, 0, 0.2, 1)}.mdc-tab-indicator--no-transition .mdc-tab-indicator__content{transition:none}.mdc-tab-indicator--fade .mdc-tab-indicator__content{transition:150ms opacity linear}.mdc-tab-indicator--active.mdc-tab-indicator--fade .mdc-tab-indicator__content{transition-delay:100ms}.mdc-tab{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.875rem;font-size:var(--mdc-typography-button-font-size, 0.875rem);line-height:2.25rem;line-height:var(--mdc-typography-button-line-height, 2.25rem);font-weight:500;font-weight:var(--mdc-typography-button-font-weight, 500);letter-spacing:0.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing, 0.0892857143em);text-decoration:none;text-decoration:var(--mdc-typography-button-text-decoration, none);text-transform:uppercase;text-transform:var(--mdc-typography-button-text-transform, uppercase);position:relative}.mdc-tab .mdc-tab__text-label{color:rgba(0, 0, 0, 0.6)}.mdc-tab .mdc-tab__icon{color:rgba(0, 0, 0, 0.54);fill:currentColor}.mdc-tab__content{position:relative}.mdc-tab__icon{width:24px;height:24px;font-size:24px}.mdc-tab--active .mdc-tab__text-label{color:#6200ee;color:var(--mdc-theme-primary, #6200ee)}.mdc-tab--active .mdc-tab__icon{color:#6200ee;color:var(--mdc-theme-primary, #6200ee);fill:currentColor}.mdc-tab{background:none}.mdc-tab{min-width:90px;padding-right:24px;padding-left:24px;display:flex;flex:1 0 auto;justify-content:center;box-sizing:border-box;margin:0;padding-top:0;padding-bottom:0;border:none;outline:none;text-align:center;white-space:nowrap;cursor:pointer;-webkit-appearance:none;z-index:1}.mdc-tab::-moz-focus-inner{padding:0;border:0}.mdc-tab--min-width{flex:0 1 auto}.mdc-tab__content{display:flex;align-items:center;justify-content:center;height:inherit;pointer-events:none}.mdc-tab__text-label{transition:150ms color linear;display:inline-block;line-height:1;z-index:2}.mdc-tab__icon{transition:150ms color linear;z-index:2}.mdc-tab--stacked .mdc-tab__content{flex-direction:column;align-items:center;justify-content:center}.mdc-tab--stacked .mdc-tab__text-label{padding-top:6px;padding-bottom:4px}.mdc-tab--active .mdc-tab__text-label,.mdc-tab--active .mdc-tab__icon{transition-delay:100ms}.mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label{padding-left:8px;padding-right:0}[dir=rtl] .mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label,.mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label[dir=rtl]{padding-left:0;padding-right:8px;}@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-tab{--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)}.mdc-tab .mdc-tab__ripple::before,.mdc-tab .mdc-tab__ripple::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-tab .mdc-tab__ripple::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-tab .mdc-tab__ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-tab.mdc-ripple-upgraded--unbounded .mdc-tab__ripple::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-tab.mdc-ripple-upgraded--foreground-activation .mdc-tab__ripple::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.mdc-tab.mdc-ripple-upgraded--foreground-deactivation .mdc-tab__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-tab .mdc-tab__ripple::before,.mdc-tab .mdc-tab__ripple::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-tab .mdc-tab__ripple::before,.mdc-tab .mdc-tab__ripple::after{background-color:#6200ee;background-color:var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee))}.mdc-tab:hover .mdc-tab__ripple::before,.mdc-tab.mdc-ripple-surface--hover .mdc-tab__ripple::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-tab.mdc-ripple-upgraded--background-focused .mdc-tab__ripple::before,.mdc-tab:not(.mdc-ripple-upgraded):focus .mdc-tab__ripple::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-tab:not(.mdc-ripple-upgraded) .mdc-tab__ripple::after{transition:opacity 150ms linear}.mdc-tab:not(.mdc-ripple-upgraded):active .mdc-tab__ripple::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-tab.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-tab__ripple{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;will-change:transform, opacity}.scroll-fade,.scroll-button{position:absolute;transition-property:transform;transition-duration:0.3s;transition-timing-function:ease-out}.scroll-fade{top:0;height:100%;width:4rem;pointer-events:none}.scroll-fade.left{transform:translate3d(-4rem, 0, 0);left:0;background:linear-gradient(270deg, rgba(var(--contrast-300), 0) 0%, rgba(var(--contrast-300), 0.8) 40%, rgba(var(--contrast-300), 0.8) 100%)}.scroll-fade.right{transform:translate3d(4rem, 0, 0);right:0;background:linear-gradient(90deg, rgba(var(--contrast-300), 0) 0%, rgba(var(--contrast-300), 0.8) 40%, rgba(var(--contrast-300), 0.8) 100%)}.scroll-button{display:flex;align-items:center;top:0;bottom:0}.scroll-button.left{transform:translate3d(-4rem, 0, 0);left:0.25rem}.scroll-button.right{transform:translate3d(4rem, 0, 0);right:0.25rem}.scroll-button:hover{transform:translate3d(0, 0, 0)}.scroll-button button{all:unset;display:flex;align-items:center;justify-content:center;width:1.25rem;height:calc(100% - (0.25rem * 2));border-radius:0.25rem}.scroll-button button:not(:disabled){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}.scroll-button button:not(:disabled):hover,.scroll-button button:not(:disabled):focus,.scroll-button button:not(:disabled):focus-visible{will-change:color, background-color, box-shadow, transform}.scroll-button button:not(:disabled):hover,.scroll-button button:not(:disabled):focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.scroll-button button:not(:disabled):active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}.scroll-button button:not(:disabled):hover,.scroll-button button:not(:disabled):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.scroll-button limel-icon{width:1rem}.mdc-tab-scroller{position:relative;overflow:hidden}.mdc-tab-scroller.can-scroll-left .scroll-fade.left,.mdc-tab-scroller.can-scroll-left .scroll-button.left,.mdc-tab-scroller.can-scroll-right .scroll-fade.right,.mdc-tab-scroller.can-scroll-right .scroll-button.right{transform:translate3d(0, 0, 0)}.mdc-tab-scroller.can-scroll-left:not(.can-scroll-right) .scroll-button.right,.mdc-tab-scroller.can-scroll-right:not(.can-scroll-left) .scroll-button.left{opacity:0.5;transition-delay:0.5s}.lime-hide-scrollbars{scrollbar-width:none;-ms-overflow-style:none}.mdc-tab-scroller__scroll-content{padding:0.25rem 0.75rem 0 0.75rem;background-color:rgb(var(--contrast-300))}:host(limel-tab-bar){--limel-active-tab-background-color:var(\n      --tab-panel-background-color,\n      rgb(var(--contrast-100))\n  );isolation:isolate;display:block;position:relative}:host(.has-tabs-with-equal-width) .mdc-tab{flex:1 0 auto}.mdc-tab{font-family:inherit;font-weight:400;letter-spacing:normal;font-size:var(--limel-theme-default-font-size);text-transform:none}.mdc-tab-indicator .mdc-tab-indicator__content{border:none}.mdc-tab__ripple{box-sizing:border-box;border-radius:0.625rem;border-style:solid;border-color:transparent;border-width:0.25rem;opacity:0.7}.mdc-tab__ripple:before,.mdc-tab__ripple:after{transition:background-color 0.5s ease}.mdc-tab{border-radius:0;padding-right:1rem;padding-left:1rem;min-width:2.5rem;background-color:transparent;flex:0 0 auto;height:2.5rem}.mdc-tab:not(.mdc-tab--active){--badge-background-color:rgb(var(--contrast-600))}.mdc-tab:not(.mdc-tab--active):after{content:\"\";display:block;background-color:rgb(var(--contrast-600));width:0.125rem;height:1rem;margin:auto;position:absolute;top:0;bottom:0;border-radius:1rem;right:-0.125rem}.mdc-tab:not(.mdc-tab--active):last-of-type:after{display:none}.mdc-tab .mdc-tab__icon{margin-left:-0.25rem}.mdc-tab limel-badge{margin-right:-0.25rem}.mdc-tab--active{border-radius:0.625rem 0.625rem 0 0;background-color:var(--limel-active-tab-background-color);z-index:2}.mdc-tab--active:before,.mdc-tab--active:after{content:\"\";display:block;width:0.75rem;height:0.75rem;position:absolute;bottom:0;background-color:var(--limel-active-tab-background-color);-webkit-mask-image:url(\"data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' clip-rule='evenodd' viewBox='0 0 50 50'><defs/><path d='M0 0c0 27.594 22.406 50 50 50H0V0z'/></svg>\");mask-image:url(\"data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' clip-rule='evenodd' viewBox='0 0 50 50'><defs/><path d='M0 0c0 27.594 22.406 50 50 50H0V0z'/></svg>\")}.mdc-tab--active:before{left:-0.75rem;transform:rotateY(180deg)}.mdc-tab--active:after{right:-0.75rem}.mdc-tab--active .mdc-ripple-upgraded--background-focused:before{background-color:transparent;transition:background-color 1s ease}.mdc-tab__content{gap:0.375rem}.mdc-tab .mdc-tab__text-label{transition:color 0.2s ease;padding-left:0 !important;color:var(--limel-theme-on-surface-color)}.mdc-tab:hover .mdc-tab__text-label{color:var(--limel-theme-text-primary-on-background-color)}.mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--lime-primary-color, var(--limel-theme-primary-color))}";
+const tabBarCss = "@charset \"UTF-8\";.mdc-tab-bar{width:100%}.mdc-tab{height:48px}.mdc-tab--stacked{height:72px}.mdc-tab-scroller{overflow-y:hidden}.mdc-tab-scroller.mdc-tab-scroller--animating .mdc-tab-scroller__scroll-content{transition:250ms transform cubic-bezier(0.4, 0, 0.2, 1)}.mdc-tab-scroller__test{position:absolute;top:-9999px;width:100px;height:100px;overflow-x:scroll}.mdc-tab-scroller__scroll-area{-webkit-overflow-scrolling:touch;display:flex;overflow-x:hidden}.mdc-tab-scroller__scroll-area::-webkit-scrollbar,.mdc-tab-scroller__test::-webkit-scrollbar{display:none}.mdc-tab-scroller__scroll-area--scroll{overflow-x:scroll}.mdc-tab-scroller__scroll-content{position:relative;display:flex;flex:1 0 auto;transform:none;will-change:transform}.mdc-tab-scroller--align-start .mdc-tab-scroller__scroll-content{justify-content:flex-start}.mdc-tab-scroller--align-end .mdc-tab-scroller__scroll-content{justify-content:flex-end}.mdc-tab-scroller--align-center .mdc-tab-scroller__scroll-content{justify-content:center}.mdc-tab-scroller--animating .mdc-tab-scroller__scroll-area{-webkit-overflow-scrolling:auto}.mdc-tab-indicator .mdc-tab-indicator__content--underline{border-color:#6200ee;border-color:var(--mdc-theme-primary, #6200ee)}.mdc-tab-indicator .mdc-tab-indicator__content--icon{color:#018786;color:var(--mdc-theme-secondary, #018786)}.mdc-tab-indicator .mdc-tab-indicator__content--underline{border-top-width:2px}.mdc-tab-indicator .mdc-tab-indicator__content--icon{height:34px;font-size:34px}.mdc-tab-indicator{display:flex;position:absolute;top:0;left:0;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.mdc-tab-indicator__content{transform-origin:left;opacity:0}.mdc-tab-indicator__content--underline{align-self:flex-end;box-sizing:border-box;width:100%;border-top-style:solid}.mdc-tab-indicator__content--icon{align-self:center;margin:0 auto}.mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:1}.mdc-tab-indicator .mdc-tab-indicator__content{transition:250ms transform cubic-bezier(0.4, 0, 0.2, 1)}.mdc-tab-indicator--no-transition .mdc-tab-indicator__content{transition:none}.mdc-tab-indicator--fade .mdc-tab-indicator__content{transition:150ms opacity linear}.mdc-tab-indicator--active.mdc-tab-indicator--fade .mdc-tab-indicator__content{transition-delay:100ms}.mdc-tab{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.875rem;font-size:var(--mdc-typography-button-font-size, 0.875rem);line-height:2.25rem;line-height:var(--mdc-typography-button-line-height, 2.25rem);font-weight:500;font-weight:var(--mdc-typography-button-font-weight, 500);letter-spacing:0.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing, 0.0892857143em);text-decoration:none;text-decoration:var(--mdc-typography-button-text-decoration, none);text-transform:uppercase;text-transform:var(--mdc-typography-button-text-transform, uppercase);position:relative}.mdc-tab .mdc-tab__text-label{color:rgba(0, 0, 0, 0.6)}.mdc-tab .mdc-tab__icon{color:rgba(0, 0, 0, 0.54);fill:currentColor}.mdc-tab__content{position:relative}.mdc-tab__icon{width:24px;height:24px;font-size:24px}.mdc-tab--active .mdc-tab__text-label{color:#6200ee;color:var(--mdc-theme-primary, #6200ee)}.mdc-tab--active .mdc-tab__icon{color:#6200ee;color:var(--mdc-theme-primary, #6200ee);fill:currentColor}.mdc-tab{background:none}.mdc-tab{min-width:90px;padding-right:24px;padding-left:24px;display:flex;flex:1 0 auto;justify-content:center;box-sizing:border-box;margin:0;padding-top:0;padding-bottom:0;border:none;outline:none;text-align:center;white-space:nowrap;cursor:pointer;-webkit-appearance:none;z-index:1}.mdc-tab::-moz-focus-inner{padding:0;border:0}.mdc-tab--min-width{flex:0 1 auto}.mdc-tab__content{display:flex;align-items:center;justify-content:center;height:inherit;pointer-events:none}.mdc-tab__text-label{transition:150ms color linear;display:inline-block;line-height:1;z-index:2}.mdc-tab__icon{transition:150ms color linear;z-index:2}.mdc-tab--stacked .mdc-tab__content{flex-direction:column;align-items:center;justify-content:center}.mdc-tab--stacked .mdc-tab__text-label{padding-top:6px;padding-bottom:4px}.mdc-tab--active .mdc-tab__text-label,.mdc-tab--active .mdc-tab__icon{transition-delay:100ms}.mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label{padding-left:8px;padding-right:0}[dir=rtl] .mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label,.mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label[dir=rtl]{padding-left:0;padding-right:8px;}@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-tab{--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)}.mdc-tab .mdc-tab__ripple::before,.mdc-tab .mdc-tab__ripple::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-tab .mdc-tab__ripple::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-tab .mdc-tab__ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-tab.mdc-ripple-upgraded--unbounded .mdc-tab__ripple::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-tab.mdc-ripple-upgraded--foreground-activation .mdc-tab__ripple::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.mdc-tab.mdc-ripple-upgraded--foreground-deactivation .mdc-tab__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-tab .mdc-tab__ripple::before,.mdc-tab .mdc-tab__ripple::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-tab .mdc-tab__ripple::before,.mdc-tab .mdc-tab__ripple::after{background-color:#6200ee;background-color:var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee))}.mdc-tab:hover .mdc-tab__ripple::before,.mdc-tab.mdc-ripple-surface--hover .mdc-tab__ripple::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-tab.mdc-ripple-upgraded--background-focused .mdc-tab__ripple::before,.mdc-tab:not(.mdc-ripple-upgraded):focus .mdc-tab__ripple::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-tab:not(.mdc-ripple-upgraded) .mdc-tab__ripple::after{transition:opacity 150ms linear}.mdc-tab:not(.mdc-ripple-upgraded):active .mdc-tab__ripple::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-tab.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-tab__ripple{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;will-change:transform, opacity}.scroll-fade,.scroll-button{position:absolute;transition-property:transform;transition-duration:0.3s;transition-timing-function:ease-out}.scroll-fade{top:0;height:100%;width:4rem;pointer-events:none}.scroll-fade.left{transform:translate3d(-4rem, 0, 0);left:0;background:linear-gradient(270deg, rgba(var(--contrast-300), 0) 0%, rgba(var(--contrast-300), 0.8) 40%, rgba(var(--contrast-300), 0.8) 100%)}.scroll-fade.right{transform:translate3d(4rem, 0, 0);right:0;background:linear-gradient(90deg, rgba(var(--contrast-300), 0) 0%, rgba(var(--contrast-300), 0.8) 40%, rgba(var(--contrast-300), 0.8) 100%)}.scroll-button{display:flex;align-items:center;top:0;bottom:0}.scroll-button.left{transform:translate3d(-4rem, 0, 0);left:0.25rem}.scroll-button.right{transform:translate3d(4rem, 0, 0);right:0.25rem}.scroll-button:hover{transform:translate3d(0, 0, 0)}.scroll-button button{all:unset;display:flex;align-items:center;justify-content:center;width:1.25rem;height:calc(100% - (0.25rem * 2));border-radius:0.25rem}.scroll-button button:not(:disabled){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}.scroll-button button:not(:disabled):hover,.scroll-button button:not(:disabled):focus,.scroll-button button:not(:disabled):focus-visible{will-change:color, background-color, box-shadow, transform}.scroll-button button:not(:disabled):hover,.scroll-button button:not(:disabled):focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.scroll-button button:not(:disabled):active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}.scroll-button button:not(:disabled):hover,.scroll-button button:not(:disabled):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.scroll-button limel-icon{width:1rem}.mdc-tab-scroller{position:relative;overflow:hidden}.mdc-tab-scroller.can-scroll-left .scroll-fade.left,.mdc-tab-scroller.can-scroll-left .scroll-button.left,.mdc-tab-scroller.can-scroll-right .scroll-fade.right,.mdc-tab-scroller.can-scroll-right .scroll-button.right{transform:translate3d(0, 0, 0)}.mdc-tab-scroller.can-scroll-left:not(.can-scroll-right) .scroll-button.right,.mdc-tab-scroller.can-scroll-right:not(.can-scroll-left) .scroll-button.left{opacity:0.5;transition-delay:0.5s}.lime-hide-scrollbars{scrollbar-width:none;-ms-overflow-style:none}.mdc-tab-scroller__scroll-content{padding:0.25rem 0.75rem 0 0.75rem;background-color:rgb(var(--contrast-300))}:host(limel-tab-bar){--limel-active-tab-background-color:var(\n      --tab-panel-background-color,\n      rgb(var(--contrast-100))\n  );isolation:isolate;display:block;position:relative}:host(.has-tabs-with-equal-width) .mdc-tab{flex:1 0 auto}.mdc-tab{font-family:inherit;font-weight:400;letter-spacing:normal;font-size:var(--limel-theme-default-font-size);text-transform:none}.mdc-tab-indicator .mdc-tab-indicator__content{border:none}.mdc-tab__ripple{box-sizing:border-box;border-radius:0.625rem;border-style:solid;border-color:transparent;border-width:0.25rem;opacity:0.7}.mdc-tab__ripple:before,.mdc-tab__ripple:after{transition:background-color 0.5s ease}.mdc-tab{border-radius:0;padding-right:1rem;padding-left:1rem;min-width:2.5rem;background-color:transparent;flex:0 0 auto;height:2.5rem}.mdc-tab:not(.mdc-tab--active):after{content:\"\";display:block;background-color:rgb(var(--contrast-600));width:0.125rem;height:1rem;margin:auto;position:absolute;top:0;bottom:0;border-radius:1rem;right:-0.125rem}.mdc-tab:not(.mdc-tab--active):last-of-type:after{display:none}.mdc-tab .mdc-tab__icon{color:rgb(var(--contrast-800));margin-left:-0.25rem}.mdc-tab limel-badge{margin-right:-0.25rem;box-shadow:0 0 0 1px rgb(var(--contrast-600))}.mdc-tab--active{border-radius:0.625rem 0.625rem 0 0;background-color:var(--limel-active-tab-background-color);z-index:2}.mdc-tab--active:before,.mdc-tab--active:after{content:\"\";display:block;width:0.75rem;height:0.75rem;position:absolute;bottom:0;background-color:var(--limel-active-tab-background-color);-webkit-mask-image:url(\"data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' clip-rule='evenodd' viewBox='0 0 50 50'><defs/><path d='M0 0c0 27.594 22.406 50 50 50H0V0z'/></svg>\");mask-image:url(\"data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' clip-rule='evenodd' viewBox='0 0 50 50'><defs/><path d='M0 0c0 27.594 22.406 50 50 50H0V0z'/></svg>\")}.mdc-tab--active:before{left:-0.75rem;transform:rotateY(180deg)}.mdc-tab--active:after{right:-0.75rem}.mdc-tab--active .mdc-ripple-upgraded--background-focused:before{background-color:transparent;transition:background-color 1s ease}.mdc-tab--active .mdc-tab__icon{color:var(--mdc-theme-primary)}.mdc-tab__content{gap:0.375rem}.mdc-tab .mdc-tab__text-label{transition:color 0.2s ease;padding-left:0 !important;color:var(--limel-theme-on-surface-color)}.mdc-tab:hover .mdc-tab__text-label{color:var(--limel-theme-text-primary-on-background-color)}.mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--lime-primary-color, var(--limel-theme-primary-color))}";
 
 const { TAB_ACTIVATED_EVENT } = strings$1;
 const SCROLL_DISTANCE_ON_CLICK_PX = 150;