@limetech/lime-elements 37.1.0-next.79 → 37.1.0-next.80

package/dist/lime-elements/{p-46cc02dc.entry.js.map → p-de0d78b6.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["infoTileCss","InfoTile","this","renderPrefix","prefix","h","class","renderValue","characterCount","_a","value","toString","length","loading","renderSuffix","suffix","renderIcon","icon","name","renderProgress","progress","_b","maxValue","displayPercentageColors","renderLabel","label","renderNotification","badge","renderSpinner","indeterminate","render","extendedAriaLabel","checkProps","_c","_d","link","title","disabled","_e","href","_f","target","_g","tabindex","_h","_j","_k","propValue"],"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    isolation: isolate;\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    &.is-clickable {\n        @include mixins.is-elevated-clickable(\n            $background-color:\n                var(\n                    --info-tile-background-color,\n                    var(--lime-elevated-surface-background-color)\n                ),\n            $background-color--hovered:\n                var(\n                    --info-tile-background-color,\n                    var(--lime-elevated-surface-background-color)\n                )\n        );\n        @include mixins.visualize-keyboard-focus;\n    }\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\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    .has-circular-progress & {\n        top: unset;\n        bottom: 0.5rem;\n        --icon-min-size: 1.5rem;\n        --icon-preferred-size: 20cqh;\n    }\n}\n\n.progress {\n    position: absolute;\n    top: 0.75rem;\n    right: 0.75rem;\n\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\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: 0.875rem;\n    }\n}\n\nlimel-badge {\n    position: absolute;\n    top: -0.25rem;\n    right: -0.25rem;\n}\n\nlimel-linear-progress {\n    --lime-primary-color: var(--info-tile-text-color);\n    position: absolute;\n    inset: auto 0 0 0;\n    border-radius: 1rem;\n    overflow: hidden;\n}\n\n.value-group {\n    position: relative;\n    z-index: 1;\n    display: flex;\n    flex-direction: column;\n    color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n}\n\n.value-and-suffix,\n.label {\n    text-shadow:\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        top: 0.25rem;\n        right: 0.25rem;\n    }\n    a {\n        padding: 0.375rem;\n        gap: 0.125rem;\n    }\n}\n\n@container (width < #{$s}) {\n    .progress {\n        top: 0.5rem;\n        right: 0.5rem;\n    }\n    .icon {\n        top: 0.25rem;\n        right: 0.5rem;\n        .has-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    .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    .has-circular-progress {\n        .icon {\n            position: absolute;\n            top: 0.5rem;\n            right: 0.5rem;\n            --icon-max-size: 3rem;\n        }\n    }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { InfoTileProgress, Link } from '../../interface';\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 * @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-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    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\n        return [\n            <a\n                title={this.link?.title}\n                href={link}\n                target={this.link?.target}\n                tabindex=\"0\"\n                aria-label={extendedAriaLabel}\n                aria-disabled={this.disabled}\n                class={{\n                    'is-clickable': !!this.link?.href && !this.disabled,\n                    'has-circular-progress':\n                        !!this.progress?.value || this.progress?.value === 0,\n                }}\n            >\n                {this.renderIcon()}\n                {this.renderProgress()}\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            </a>,\n            this.renderNotification(),\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 renderProgress = () => {\n        if (this.progress?.value || this.progress?.value === 0) {\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={\n                        this.progress.displayPercentageColors\n                    }\n                />\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"],"mappings":"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"}
+{"version":3,"names":["infoTileCss","InfoTile","this","renderPrefix","prefix","h","class","renderValue","characterCount","_a","value","toString","length","loading","renderSuffix","suffix","renderIcon","icon","name","renderProgress","progress","_b","maxValue","displayPercentageColors","renderLabel","label","renderNotification","badge","renderSpinner","indeterminate","render","extendedAriaLabel","checkProps","_c","_d","link","title","disabled","_e","href","_f","target","_g","tabindex","_h","_j","_k","propValue"],"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    isolation: isolate;\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    &.is-clickable {\n        @include mixins.is-elevated-clickable(\n            $background-color:\n                var(\n                    --info-tile-background-color,\n                    var(--lime-elevated-surface-background-color)\n                ),\n            $background-color--hovered:\n                var(\n                    --info-tile-background-color,\n                    var(--lime-elevated-surface-background-color)\n                )\n        );\n        @include mixins.visualize-keyboard-focus;\n    }\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\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    .has-circular-progress & {\n        top: unset;\n        bottom: 0.5rem;\n        --icon-min-size: 1.5rem;\n        --icon-preferred-size: 20cqh;\n    }\n}\n\n.progress {\n    position: absolute;\n    top: 0.75rem;\n    right: 0.75rem;\n\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\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: 0.875rem;\n    }\n}\n\nlimel-badge {\n    position: absolute;\n    top: -0.25rem;\n    right: -0.25rem;\n}\n\nlimel-linear-progress {\n    --lime-primary-color: var(--info-tile-text-color);\n    position: absolute;\n    inset: auto 0 0 0;\n    border-radius: 1rem;\n    overflow: hidden;\n}\n\n.value-group {\n    position: relative;\n    z-index: 1;\n    display: flex;\n    flex-direction: column;\n    color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n}\n\n.value-and-suffix,\n.label {\n    text-shadow:\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        top: 0.25rem;\n        right: 0.25rem;\n    }\n    a {\n        padding: 0.375rem;\n        gap: 0.125rem;\n    }\n}\n\n@container (width < #{$s}) {\n    .progress {\n        top: 0.5rem;\n        right: 0.5rem;\n    }\n    .icon {\n        top: 0.25rem;\n        right: 0.5rem;\n        .has-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    .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    .has-circular-progress {\n        .icon {\n            position: absolute;\n            top: 0.5rem;\n            right: 0.5rem;\n            --icon-max-size: 3rem;\n        }\n    }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { InfoTileProgress, Link } from '../../interface';\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 * @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-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    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\n        return [\n            <a\n                title={this.link?.title}\n                href={link}\n                target={this.link?.target}\n                tabindex=\"0\"\n                aria-label={extendedAriaLabel}\n                aria-disabled={this.disabled}\n                class={{\n                    'is-clickable': !!this.link?.href && !this.disabled,\n                    'has-circular-progress':\n                        !!this.progress?.value || this.progress?.value === 0,\n                }}\n            >\n                {this.renderIcon()}\n                {this.renderProgress()}\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            </a>,\n            this.renderNotification(),\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 renderProgress = () => {\n        if (this.progress?.value || this.progress?.value === 0) {\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={\n                        this.progress.displayPercentageColors\n                    }\n                />\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"],"mappings":"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"}

package/dist/lime-elements/style/mixins.scss

@@ -18,6 +18,19 @@
     }
 }
 
+/**
+* This can be used on a trigger element that opens a dropdown menu or a popover.
+*/
+
+@mixin visualize-aria-expanded($trigger-element) {
+    :host([aria-expanded='true']),
+    :host([aria-expanded]:not([aria-expanded='false'])) {
+        #{$trigger-element} {
+            box-shadow: var(--button-shadow-inset-pressed) !important;
+        }
+    }
+}
+
 @mixin in($media) {
     // ⛔️ As long as we don't have a script that generates a
     // `.css` files automatically, we cannot use this mixin.

package/dist/scss/mixins.scss

@@ -18,6 +18,19 @@
     }
 }
 
+/**
+* This can be used on a trigger element that opens a dropdown menu or a popover.
+*/
+
+@mixin visualize-aria-expanded($trigger-element) {
+    :host([aria-expanded='true']),
+    :host([aria-expanded]:not([aria-expanded='false'])) {
+        #{$trigger-element} {
+            box-shadow: var(--button-shadow-inset-pressed) !important;
+        }
+    }
+}
+
 @mixin in($media) {
     // ⛔️ As long as we don't have a script that generates a
     // `.css` files automatically, we cannot use this mixin.

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

@@ -1,54 +1,29 @@
 import { IconSize } from '../../interface';
 /**
- * The recommended icon library for use with Lime Elements is the Windows 10 set
- * from Icons8 (https://icons8.com/icons/windows). This set is included in the
- * relevant Lime products. If you are using Lime Elements in a non-Lime product,
- * you will have to supply your own icons.
- *
- * The size and color of the icon is set in CSS, however there are a few
- * standard sizes defined that can be used with the `size` property.
- *
- * ### Setup
- * To use **@lundalogik/lime-icons8**, the `/assets` folder from
- * __@lundalogik/lime-icons8__ must be made available on the webserver.
- * To use a different icon set, the icons must be placed in a folder structure
- * that looks like this: `assets/icons/<name-of-icon>.svg`
- *
- * If `assets` is placed in the root, no other setup is needed. The icons will
- * be fetched with a relative URL from `/assets/icons/<name-of-icon>.svg`.
+ * Search for an icon and **click on it to copy its name to clipboard**.
+ * <limel-example-icon-finder />
  *
- * If `assets` is placed in a sub-folder somewhere, the easiest way to make the
- * icons available is to use the HTML `base` element:
+ * *******
  *
- * ```
- * <base href="/my/parent/path/">
- * ```
+ * :::important
+ * To install your icon set correctly, please read the [documentation here](#/).
+ * :::
  *
- * If this is not enough, or if the `base` element is already in use for
- * something else, a global icon path can be configured with the `limel-config`
- * element:
- * ```
- * <limel-config config={{iconPath: '/my/parent/path/'}} />
- * ```
+ * The size and color of the icon is normally set in CSS, however there are a few
+ * standard sizes defined that can be used with the `size` property.
  *
- * ### Lime icons
- * There are icons included in the **@lundalogik/lime-icons8** package which are
+ * :::note
+ * There are icons included in the `@lundalogik/lime-icons8` package which are
  * designed by our designers at Lime.
  * The names of these icons start with `-lime-`, which makes them easy to
  * find using the Icon Finder tool below.
- * :::note
- * Some of the `-lime-` icons have multiple colors and use our own CSS variables
- * instead of HEX or RGB values to visualize their colors. Thus, you must import
+ *
+ * Some of the multi-colored `-lime-` icons use our own CSS variables
+ * (instead of HEX or RGB) values to visualize their colors. Thus, you must import
  * our color palette css files into your project to render the icons properly.
  * Read more about our [Color System](#/DesignGuidelines/color-system.md/)
  * and how to do this.
  * :::
- *
- * ### Icon Finder
- *
- * Search for an icon and **click on it to copy its name to clipboard**.
- *
- * <limel-example-icon-finder />
  * @exampleComponent limel-example-icon
  * @exampleComponent limel-example-icon-background
  */

package/dist/types/components.d.ts

@@ -1119,45 +1119,25 @@ export namespace Components {
         "maxLength"?: number;
     }
     /**
-     * The recommended icon library for use with Lime Elements is the Windows 10 set
-     * from Icons8 (https://icons8.com/icons/windows). This set is included in the
-     * relevant Lime products. If you are using Lime Elements in a non-Lime product,
-     * you will have to supply your own icons.
-     * The size and color of the icon is set in CSS, however there are a few
+     * Search for an icon and **click on it to copy its name to clipboard**.
+     * <limel-example-icon-finder />
+     * *******
+     * :::important
+     * To install your icon set correctly, please read the [documentation here](#/).
+     * :::
+     * The size and color of the icon is normally set in CSS, however there are a few
      * standard sizes defined that can be used with the `size` property.
-     * ### Setup
-     * To use **@lundalogik/lime-icons8**, the `/assets` folder from
-     * __@lundalogik/lime-icons8__ must be made available on the webserver.
-     * To use a different icon set, the icons must be placed in a folder structure
-     * that looks like this: `assets/icons/<name-of-icon>.svg`
-     * If `assets` is placed in the root, no other setup is needed. The icons will
-     * be fetched with a relative URL from `/assets/icons/<name-of-icon>.svg`.
-     * If `assets` is placed in a sub-folder somewhere, the easiest way to make the
-     * icons available is to use the HTML `base` element:
-     * ```
-     * <base href="/my/parent/path/">
-     * ```
-     * If this is not enough, or if the `base` element is already in use for
-     * something else, a global icon path can be configured with the `limel-config`
-     * element:
-     * ```
-     * <limel-config config={{iconPath: '/my/parent/path/'}} />
-     * ```
-     * ### Lime icons
-     * There are icons included in the **@lundalogik/lime-icons8** package which are
+     * :::note
+     * There are icons included in the `@lundalogik/lime-icons8` package which are
      * designed by our designers at Lime.
      * The names of these icons start with `-lime-`, which makes them easy to
      * find using the Icon Finder tool below.
-     * :::note
-     * Some of the `-lime-` icons have multiple colors and use our own CSS variables
-     * instead of HEX or RGB values to visualize their colors. Thus, you must import
+     * Some of the multi-colored `-lime-` icons use our own CSS variables
+     * (instead of HEX or RGB) values to visualize their colors. Thus, you must import
      * our color palette css files into your project to render the icons properly.
      * Read more about our [Color System](#/DesignGuidelines/color-system.md/)
      * and how to do this.
      * :::
-     * ### Icon Finder
-     * Search for an icon and **click on it to copy its name to clipboard**.
-     * <limel-example-icon-finder />
      * @exampleComponent limel-example-icon
      * @exampleComponent limel-example-icon-background
      */
@@ -3000,45 +2980,25 @@ declare global {
         new (): HTMLLimelHelperLineElement;
     };
     /**
-     * The recommended icon library for use with Lime Elements is the Windows 10 set
-     * from Icons8 (https://icons8.com/icons/windows). This set is included in the
-     * relevant Lime products. If you are using Lime Elements in a non-Lime product,
-     * you will have to supply your own icons.
-     * The size and color of the icon is set in CSS, however there are a few
+     * Search for an icon and **click on it to copy its name to clipboard**.
+     * <limel-example-icon-finder />
+     * *******
+     * :::important
+     * To install your icon set correctly, please read the [documentation here](#/).
+     * :::
+     * The size and color of the icon is normally set in CSS, however there are a few
      * standard sizes defined that can be used with the `size` property.
-     * ### Setup
-     * To use **@lundalogik/lime-icons8**, the `/assets` folder from
-     * __@lundalogik/lime-icons8__ must be made available on the webserver.
-     * To use a different icon set, the icons must be placed in a folder structure
-     * that looks like this: `assets/icons/<name-of-icon>.svg`
-     * If `assets` is placed in the root, no other setup is needed. The icons will
-     * be fetched with a relative URL from `/assets/icons/<name-of-icon>.svg`.
-     * If `assets` is placed in a sub-folder somewhere, the easiest way to make the
-     * icons available is to use the HTML `base` element:
-     * ```
-     * <base href="/my/parent/path/">
-     * ```
-     * If this is not enough, or if the `base` element is already in use for
-     * something else, a global icon path can be configured with the `limel-config`
-     * element:
-     * ```
-     * <limel-config config={{iconPath: '/my/parent/path/'}} />
-     * ```
-     * ### Lime icons
-     * There are icons included in the **@lundalogik/lime-icons8** package which are
+     * :::note
+     * There are icons included in the `@lundalogik/lime-icons8` package which are
      * designed by our designers at Lime.
      * The names of these icons start with `-lime-`, which makes them easy to
      * find using the Icon Finder tool below.
-     * :::note
-     * Some of the `-lime-` icons have multiple colors and use our own CSS variables
-     * instead of HEX or RGB values to visualize their colors. Thus, you must import
+     * Some of the multi-colored `-lime-` icons use our own CSS variables
+     * (instead of HEX or RGB) values to visualize their colors. Thus, you must import
      * our color palette css files into your project to render the icons properly.
      * Read more about our [Color System](#/DesignGuidelines/color-system.md/)
      * and how to do this.
      * :::
-     * ### Icon Finder
-     * Search for an icon and **click on it to copy its name to clipboard**.
-     * <limel-example-icon-finder />
      * @exampleComponent limel-example-icon
      * @exampleComponent limel-example-icon-background
      */
@@ -4833,45 +4793,25 @@ declare namespace LocalJSX {
         "maxLength"?: number;
     }
     /**
-     * The recommended icon library for use with Lime Elements is the Windows 10 set
-     * from Icons8 (https://icons8.com/icons/windows). This set is included in the
-     * relevant Lime products. If you are using Lime Elements in a non-Lime product,
-     * you will have to supply your own icons.
-     * The size and color of the icon is set in CSS, however there are a few
+     * Search for an icon and **click on it to copy its name to clipboard**.
+     * <limel-example-icon-finder />
+     * *******
+     * :::important
+     * To install your icon set correctly, please read the [documentation here](#/).
+     * :::
+     * The size and color of the icon is normally set in CSS, however there are a few
      * standard sizes defined that can be used with the `size` property.
-     * ### Setup
-     * To use **@lundalogik/lime-icons8**, the `/assets` folder from
-     * __@lundalogik/lime-icons8__ must be made available on the webserver.
-     * To use a different icon set, the icons must be placed in a folder structure
-     * that looks like this: `assets/icons/<name-of-icon>.svg`
-     * If `assets` is placed in the root, no other setup is needed. The icons will
-     * be fetched with a relative URL from `/assets/icons/<name-of-icon>.svg`.
-     * If `assets` is placed in a sub-folder somewhere, the easiest way to make the
-     * icons available is to use the HTML `base` element:
-     * ```
-     * <base href="/my/parent/path/">
-     * ```
-     * If this is not enough, or if the `base` element is already in use for
-     * something else, a global icon path can be configured with the `limel-config`
-     * element:
-     * ```
-     * <limel-config config={{iconPath: '/my/parent/path/'}} />
-     * ```
-     * ### Lime icons
-     * There are icons included in the **@lundalogik/lime-icons8** package which are
+     * :::note
+     * There are icons included in the `@lundalogik/lime-icons8` package which are
      * designed by our designers at Lime.
      * The names of these icons start with `-lime-`, which makes them easy to
      * find using the Icon Finder tool below.
-     * :::note
-     * Some of the `-lime-` icons have multiple colors and use our own CSS variables
-     * instead of HEX or RGB values to visualize their colors. Thus, you must import
+     * Some of the multi-colored `-lime-` icons use our own CSS variables
+     * (instead of HEX or RGB) values to visualize their colors. Thus, you must import
      * our color palette css files into your project to render the icons properly.
      * Read more about our [Color System](#/DesignGuidelines/color-system.md/)
      * and how to do this.
      * :::
-     * ### Icon Finder
-     * Search for an icon and **click on it to copy its name to clipboard**.
-     * <limel-example-icon-finder />
      * @exampleComponent limel-example-icon
      * @exampleComponent limel-example-icon-background
      */
@@ -6587,45 +6527,25 @@ declare module "@stencil/core" {
              */
             "limel-helper-line": LocalJSX.LimelHelperLine & JSXBase.HTMLAttributes<HTMLLimelHelperLineElement>;
             /**
-             * The recommended icon library for use with Lime Elements is the Windows 10 set
-             * from Icons8 (https://icons8.com/icons/windows). This set is included in the
-             * relevant Lime products. If you are using Lime Elements in a non-Lime product,
-             * you will have to supply your own icons.
-             * The size and color of the icon is set in CSS, however there are a few
+             * Search for an icon and **click on it to copy its name to clipboard**.
+             * <limel-example-icon-finder />
+             * *******
+             * :::important
+             * To install your icon set correctly, please read the [documentation here](#/).
+             * :::
+             * The size and color of the icon is normally set in CSS, however there are a few
              * standard sizes defined that can be used with the `size` property.
-             * ### Setup
-             * To use **@lundalogik/lime-icons8**, the `/assets` folder from
-             * __@lundalogik/lime-icons8__ must be made available on the webserver.
-             * To use a different icon set, the icons must be placed in a folder structure
-             * that looks like this: `assets/icons/<name-of-icon>.svg`
-             * If `assets` is placed in the root, no other setup is needed. The icons will
-             * be fetched with a relative URL from `/assets/icons/<name-of-icon>.svg`.
-             * If `assets` is placed in a sub-folder somewhere, the easiest way to make the
-             * icons available is to use the HTML `base` element:
-             * ```
-             * <base href="/my/parent/path/">
-             * ```
-             * If this is not enough, or if the `base` element is already in use for
-             * something else, a global icon path can be configured with the `limel-config`
-             * element:
-             * ```
-             * <limel-config config={{iconPath: '/my/parent/path/'}} />
-             * ```
-             * ### Lime icons
-             * There are icons included in the **@lundalogik/lime-icons8** package which are
+             * :::note
+             * There are icons included in the `@lundalogik/lime-icons8` package which are
              * designed by our designers at Lime.
              * The names of these icons start with `-lime-`, which makes them easy to
              * find using the Icon Finder tool below.
-             * :::note
-             * Some of the `-lime-` icons have multiple colors and use our own CSS variables
-             * instead of HEX or RGB values to visualize their colors. Thus, you must import
+             * Some of the multi-colored `-lime-` icons use our own CSS variables
+             * (instead of HEX or RGB) values to visualize their colors. Thus, you must import
              * our color palette css files into your project to render the icons properly.
              * Read more about our [Color System](#/DesignGuidelines/color-system.md/)
              * and how to do this.
              * :::
-             * ### Icon Finder
-             * Search for an icon and **click on it to copy its name to clipboard**.
-             * <limel-example-icon-finder />
              * @exampleComponent limel-example-icon
              * @exampleComponent limel-example-icon-background
              */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "37.1.0-next.79",
+  "version": "37.1.0-next.80",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",

package/dist/lime-elements/p-46cc02dc.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as n}from"./p-3075aa67.js";const i="@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 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* @prop --info-tile-border-radius: defines the radius of corners of the info-tile. Defaults to `1rem`\n* @prop --info-tile-icon-color: defines the fill color of the info-tile icon. Defaults to `--contrast-1000`\n* @prop --info-tile-text-color: defines the color of the info-tile label. Defaults to `--contrast-1100`\n* @prop --info-tile-background-color: defines the backgrounds color of the info-tile icon. Defaults to `--contrast-100`\n* @prop --info-tile-badge-text-color: Text color of the notification badge. Defaults to `--color-white`\n* @prop --info-tile-badge-background-color: Background color of the notification badge. Defaults to `--color-red-default`\n* @prop --info-tile-progress-fill-color: Determines the color of the progressed section. Defaults to `--lime-primary-color`.\n* @prop --info-tile-progress-background-color: Determines the background color of the central section of the progress bar. Defaults to `--info-tile-background-color`.\n* @prop --info-tile-progress-suffix-color: Determines the color of the progress prefix. Defaults to `--contrast-1000`.\n * @prop --info-tile-progress-text-color: Determines the color of the progress value. Defaults to `--info-tile-text-color`.\n * @prop --info-tile-progress-prefix-color: Determines the color of the progress suffix. Defaults to `--contrast-1000`.\n*/\n:host(limel-info-tile) {\n  --badge-text-color: var(\n      --info-tile-badge-text-color,\n      rgb(var(--color-white))\n  );\n  --badge-background-color: var(\n      --info-tile-badge-background-color,\n      rgb(var(--color-red-default))\n  );\n  --circular-progress-text-color: var(\n      --info-tile-progress-text-color,\n      var(--info-tile-text-color)\n  );\n  --circular-progress-suffix-color: var(--info-tile-progress-suffix-color);\n  --circular-progress-prefix-color: var(--info-tile-progress-prefix-color);\n  --circular-progress-track-color: rgb(var(--contrast-800), 0.3);\n  --circular-progress-fill-color: var(--info-tile-progress-fill-color);\n  --circular-progress-background-color: var(\n      --info-tile-progress-background-color,\n      var(--info-tile-background-color)\n  );\n  --label-min-size: 0.75rem;\n  --label-preferred-size: 6cqw;\n  --label-max-size: 1rem;\n  --value-min-size: 1rem;\n  --value-preferred-size: 20cqw;\n  --value-max-size: 4rem;\n  --suffix-prefix-min-size: 0.75rem;\n  --suffix-prefix-preferred-size: 8cqw;\n  --suffix-prefix-max-size: 1.5rem;\n  --icon-min-size: 2rem;\n  --icon-preferred-size: 60cqh;\n  --icon-max-size: calc(100cqw - 0.5rem);\n  isolation: isolate;\n  container-type: size;\n  position: relative;\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n:host(limel-info-tile) * {\n  box-sizing: border-box;\n}\n\n:host(limel-info-tile[disabled]) a {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\na {\n  all: unset;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  align-items: flex-start;\n  height: 100%;\n  width: 100%;\n  flex-grow: 1;\n  padding: 0.25rem 1rem 0.5rem 1rem;\n  border-radius: var(--info-tile-border-radius, 1rem);\n  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n}\na.is-clickable {\n  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;\n  cursor: pointer;\n  color: var(--mdc-theme-on-surface);\n  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n  box-shadow: var(--button-shadow-normal);\n}\na.is-clickable:hover {\n  color: var(--mdc-theme-on-surface);\n  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n  box-shadow: var(--button-shadow-hovered);\n}\na.is-clickable:active {\n  box-shadow: var(--button-shadow-pressed);\n  transform: translate3d(0, 0.08rem, 0);\n}\na.is-clickable:focus {\n  outline: none;\n}\na.is-clickable:focus-visible {\n  outline: none;\n  box-shadow: var(--shadow-depth-8-focused);\n}\n\n.icon {\n  z-index: 1;\n  position: absolute;\n  top: 0.5rem;\n  right: 0.75rem;\n  padding: 0.25rem;\n  aspect-ratio: 1/1;\n  color: var(--info-tile-icon-color, rgb(var(--contrast-1000)));\n  border-radius: 0;\n  height: clamp(var(--icon-min-size), var(--icon-preferred-size), var(--icon-max-size));\n}\n@supports not (container-type: size) {\n  .icon {\n    width: max(10%, 3rem);\n  }\n}\n.has-circular-progress .icon {\n  top: unset;\n  bottom: 0.5rem;\n  --icon-min-size: 1.5rem;\n  --icon-preferred-size: 20cqh;\n}\n\n.progress {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.75rem;\n  --circular-progress-size: min(\n      var(--icon-preferred-size),\n      var(--icon-max-size)\n  );\n}\n@supports not (container-type: size) {\n  .progress {\n    --circular-progress-size: initial;\n  }\n}\n\n.label {\n  z-index: 1;\n  color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n  line-height: 1.2;\n  font-size: clamp(var(--label-min-size), var(--label-preferred-size), var(--label-max-size));\n}\n@supports not (container-type: size) {\n  .label {\n    font-size: 0.875rem;\n  }\n}\n\nlimel-badge {\n  position: absolute;\n  top: -0.25rem;\n  right: -0.25rem;\n}\n\nlimel-linear-progress {\n  --lime-primary-color: var(--info-tile-text-color);\n  position: absolute;\n  inset: auto 0 0 0;\n  border-radius: 1rem;\n  overflow: hidden;\n}\n\n.value-group {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n}\n\n.value-and-suffix,\n.label {\n  text-shadow: 0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100))), 0 0 0.25rem var(--info-tile-background-color, rgb(var(--contrast-100)));\n}\n\n.value-and-suffix {\n  display: flex;\n}\n\n.prefix,\n.suffix {\n  font-size: clamp(var(--suffix-prefix-min-size), var(--suffix-prefix-preferred-size), var(--suffix-prefix-max-size));\n  opacity: 0.7;\n}\n@supports not (container-type: size) {\n  .prefix,\n  .suffix {\n    font-size: 0.75rem;\n  }\n}\n\n.prefix {\n  align-self: flex-start;\n  line-height: normal;\n  transform: translateY(40%);\n}\n\n.value {\n  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.95);\n  transform-origin: left;\n  transform: translate3d(0, 0, 0) scale(1);\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  font-weight: bold;\n  line-height: normal;\n  font-size: clamp(var(--value-min-size), var(--value-preferred-size), var(--value-max-size));\n}\n@supports not (container-type: size) {\n  .value {\n    font-size: 1.5rem;\n  }\n}\n:host(limel-info-tile[loading]) .value {\n  opacity: 0.3;\n  transform: translate3d(0, 0, 0) scale(0.9);\n}\n\n.suffix {\n  transform: translateY(10%);\n}\n\n@container (width < 8rem) {\n  .progress {\n    top: 0.25rem;\n    right: 0.25rem;\n  }\n  a {\n    padding: 0.375rem;\n    gap: 0.125rem;\n  }\n}\n@container (width < 18.75rem) {\n  .progress {\n    top: 0.5rem;\n    right: 0.5rem;\n  }\n  .icon {\n    top: 0.25rem;\n    right: 0.5rem;\n  }\n  .has-circular-progress .icon {\n    right: 0.25rem;\n    bottom: 0.25rem;\n  }\n}\n@container (width < 40.5rem) {\n  .value {\n    --value-preferred-size: 13cqw;\n  }\n  .value.ch-1, .value.ch-2, .value.ch-3, .value.ch-4 {\n    --value-preferred-size: 20cqw;\n  }\n  .value.ch-5 {\n    --value-preferred-size: 18cqw;\n  }\n  .value.ch-6 {\n    --value-preferred-size: 17cqw;\n  }\n  .value.ch-7 {\n    --value-preferred-size: 16cqw;\n  }\n  .value.ch-8 {\n    --value-preferred-size: 15cqw;\n  }\n  .value.ch-9 {\n    --value-preferred-size: 14cqw;\n  }\n}\n@container (height > 8rem) {\n  a {\n    padding-top: 0.75rem;\n    padding-bottom: 1rem;\n  }\n}\n@container (height < 8rem) and (width > 8rem) {\n  .value {\n    --value-preferred-size: 32cqh !important;\n  }\n  .suffix,\n  .prefix {\n    --suffix-prefix-preferred-size: 16cqh !important;\n  }\n}\n@container (height > 18.75rem) {\n  .progress,\n  .icon {\n    position: relative;\n    top: unset;\n    right: unset;\n  }\n  a {\n    align-items: center;\n    justify-content: center;\n  }\n  .label {\n    text-align: center;\n  }\n  .has-circular-progress .icon {\n    position: absolute;\n    top: 0.5rem;\n    right: 0.5rem;\n    --icon-max-size: 3rem;\n  }\n}";const r=class{constructor(i){e(this,i);this.renderPrefix=()=>{if(this.prefix){return n("span",{class:"prefix"},this.prefix)}};this.renderValue=()=>{var e;const i=((e=this.value)!==null&&e!==void 0?e:"").toString().length;if(!this.value&&this.loading){return n("span",{class:"value"},"···")}if(this.value){return n("span",{class:{value:true,[`ch-${i}`]:true}},this.value)}};this.renderSuffix=()=>{if(this.suffix){return n("span",{class:"suffix"},this.suffix)}};this.renderIcon=()=>{if(this.icon){return n("limel-icon",{class:"icon",name:this.icon})}};this.renderProgress=()=>{var e,i;if(((e=this.progress)===null||e===void 0?void 0:e.value)||((i=this.progress)===null||i===void 0?void 0:i.value)===0){return n("limel-circular-progress",{class:"progress",prefix:this.progress.prefix,value:this.progress.value,suffix:this.progress.suffix,maxValue:this.progress.maxValue,displayPercentageColors:this.progress.displayPercentageColors})}};this.renderLabel=()=>{if(this.label){return n("span",{class:"label"},this.label)}};this.renderNotification=()=>{if(this.badge){return n("limel-badge",{label:this.badge})}};this.renderSpinner=()=>{if(this.loading){return n("limel-linear-progress",{indeterminate:true})}};this.value=undefined;this.icon=undefined;this.label=null;this.prefix=undefined;this.suffix=undefined;this.disabled=false;this.badge=undefined;this.loading=false;this.link=undefined;this.progress=undefined}render(){var e,i,r,o,t,s,a,l,c,d;const h=this.checkProps(this===null||this===void 0?void 0:this.prefix)+this.value+" "+this.checkProps(this===null||this===void 0?void 0:this.suffix)+this.checkProps(this===null||this===void 0?void 0:this.label)+". "+this.checkProps((e=this===null||this===void 0?void 0:this.progress)===null||e===void 0?void 0:e.prefix)+this.checkProps((i=this===null||this===void 0?void 0:this.progress)===null||i===void 0?void 0:i.value)+this.checkProps((r=this===null||this===void 0?void 0:this.progress)===null||r===void 0?void 0:r.suffix)+this.checkProps((o=this===null||this===void 0?void 0:this.link)===null||o===void 0?void 0:o.title);const f=!this.disabled?(t=this.link)===null||t===void 0?void 0:t.href:"#";return[n("a",{title:(s=this.link)===null||s===void 0?void 0:s.title,href:f,target:(a=this.link)===null||a===void 0?void 0:a.target,tabindex:"0","aria-label":h,"aria-disabled":this.disabled,class:{"is-clickable":!!((l=this.link)===null||l===void 0?void 0:l.href)&&!this.disabled,"has-circular-progress":!!((c=this.progress)===null||c===void 0?void 0:c.value)||((d=this.progress)===null||d===void 0?void 0:d.value)===0}},this.renderIcon(),this.renderProgress(),n("div",{class:"value-group"},this.renderPrefix(),n("div",{class:"value-and-suffix"},this.renderValue(),this.renderSuffix()),this.renderSpinner()),this.renderLabel()),this.renderNotification()]}checkProps(e){return!e?"":e+" "}};r.style=i;export{r as limel_info_tile};
-//# sourceMappingURL=p-46cc02dc.entry.js.map

package/dist/lime-elements/p-95bc3de9.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as t,g as o}from"./p-3075aa67.js";import{m as r,r as a}from"./p-d028b08d.js";const n='@charset "UTF-8";:host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}:host{display:inline-block}:host([hidden]){display:none}:host([disabled]){pointer-events:none}button{display:flex;align-items:center;justify-content:center;gap:0.125rem;border:none;border-radius:0.4rem;padding-top:0;padding-right:var(--button-padding-right, 0.5rem);padding-bottom:0;padding-left:var(--button-padding-left, 0.5rem);min-height:2.25rem;width:100%}button:disabled.outlined{border-color:rgba(var(--contrast-1700), 0.2)}button:not(:disabled){transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}button:not(:disabled):focus{outline:none}button:not(:disabled):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button:not(:disabled):hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}button:not(:disabled):active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}:host(limel-button[primary]) button:not(:disabled){color:var(--mdc-theme-on-primary, rgb(var(--color-white)));background-color:var(--mdc-theme-primary, rgb(var(--color-teal-default)))}:host(limel-button[primary]) button:disabled{background-color:rgba(var(--contrast-1700), 0.15)}:host(limel-button:not([primary])) button:not(:disabled){color:var(--mdc-theme-primary, rgb(var(--color-teal-default)))}:host(limel-button:not([primary])) button:disabled{color:rgba(var(--contrast-1600), 0.37);background-color:rgba(var(--contrast-1600), 0.1)}.icon{width:1.25rem;flex-shrink:0}.label{font-family:Roboto, sans-serif;font-size:0.875rem;font-weight:500;letter-spacing:0.0625rem;opacity:1;padding:0 0.25rem}limel-spinner{position:absolute}limel-icon{vertical-align:top}svg{height:1.875rem;opacity:0;pointer-events:none;position:absolute;width:1.875rem}svg line{stroke:rgb(var(--color-white));stroke-width:2}limel-icon,.label,limel-spinner,svg{transition:opacity 300ms ease-in-out}.loading limel-icon,.loading .label{opacity:0}.loading limel-spinner{opacity:1}.just-loaded limel-icon,.just-loaded .label,.just-failed limel-icon,.just-failed .label{opacity:0}.just-loaded svg,.just-failed svg{opacity:1}.just-failed{background-color:var(--lime-error-text-color) !important;animation:shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both}.outlined{border:1px solid;border-color:var(--mdc-theme-primary)}@keyframes shake{10%,90%{transform:translate3d(-0.0625rem, 0, 0)}20%,80%{transform:translate3d(0.125rem, 0, 0)}30%,50%,70%{transform:translate3d(-0.1875rem, 0, 0)}40%,60%{transform:translate3d(0.1875rem, 0, 0)}}@keyframes reduced-presence{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0.7)}}:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded){animation:reduced-presence 0.3s ease forwards;transition:padding 0.3s ease, min-width 0.3s ease;transition-delay:0.3s;padding:0;min-width:0}:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) .label{transition:font-size 0.8s ease;transition-delay:0.3s;font-size:0;opacity:0}:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) limel-icon,:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) limel-spinner,:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) svg,:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) .icon{transition:all 0.3s ease;transition-delay:0.3s;opacity:0;width:0;height:0}';const s=class{constructor(t){e(this,t);this.label=undefined;this.primary=false;this.outlined=false;this.icon=undefined;this.disabled=false;this.loading=false;this.loadingFailed=false;this.justLoaded=false}componentWillLoad(){r(this.host)}disconnectedCallback(){a(this.host)}render(){return t("button",{class:{loading:this.loading,"just-loaded":this.justLoaded&&!this.loadingFailed,"just-failed":this.justLoaded&&this.loadingFailed,outlined:this.outlined},disabled:this.disabled||this.loading},this.renderIcon(),this.renderLabel(),this.renderSpinner(),t("svg",{viewBox:"0 0 30 30"},this.renderLoadingIcons()))}loadingWatcher(e,t){if(t&&!e){this.justLoaded=true;const e=2e3;this.justLoadedTimeout=window.setTimeout((()=>{this.justLoaded=false}),e)}else if(e){this.justLoaded=false;window.clearTimeout(this.justLoadedTimeout)}}renderLoadingIcons(){if(this.loadingFailed){return[t("line",{x1:"9",y1:"9",x2:"21",y2:"21"}),t("line",{x1:"21",y1:"9",x2:"9",y2:"21"})]}return[t("line",{x1:"8",y1:"14",x2:"15",y2:"20"}),t("line",{x1:"23",y1:"9",x2:"14",y2:"20"})]}renderIcon(){if(!this.icon){return}return t("limel-icon",{class:"icon",name:this.icon})}renderLabel(){if(!this.label){return}return t("span",{class:"label"},this.label)}renderSpinner(){if(!this.loading){return}return t("limel-spinner",{limeBranded:false})}get host(){return o(this)}static get watchers(){return{loading:["loadingWatcher"]}}};s.style=n;export{s as limel_button};
-//# sourceMappingURL=p-95bc3de9.entry.js.map

package/dist/lime-elements/p-95bc3de9.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["buttonCss","Button","componentWillLoad","makeEnterClickable","this","host","disconnectedCallback","removeEnterClickable","render","h","class","loading","justLoaded","loadingFailed","outlined","disabled","renderIcon","renderLabel","renderSpinner","viewBox","renderLoadingIcons","loadingWatcher","newValue","oldValue","TIMEOUT","justLoadedTimeout","window","setTimeout","clearTimeout","x1","y1","x2","y2","icon","name","label","limeBranded"],"sources":["./src/components/button/button.scss?tag=limel-button&encapsulation=shadow","./src/components/button/button.tsx"],"sourcesContent":["@use '../../style/functions';\n@use '../../style/mixins';\n\n@use '../../style/internal/lime-theme';\n\n:host {\n    display: inline-block;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n:host([disabled]) {\n    pointer-events: none;\n}\n\nbutton {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.125rem;\n\n    border: none;\n    border-radius: 0.4rem;\n    padding: {\n        top: 0;\n        right: var(--button-padding-right, 0.5rem);\n        bottom: 0;\n        left: var(--button-padding-left, 0.5rem);\n    }\n\n    min-height: 2.25rem;\n    width: 100%;\n\n    &:disabled {\n        &.outlined {\n            border-color: rgba(var(--contrast-1700), 0.2);\n        }\n    }\n\n    &:not(:disabled) {\n        @include mixins.visualize-keyboard-focus;\n        @include mixins.is-elevated-clickable();\n    }\n\n    :host(limel-button[primary]) & {\n        &:not(:disabled) {\n            color: var(--mdc-theme-on-primary, rgb(var(--color-white)));\n            background-color: var(\n                --mdc-theme-primary,\n                rgb(var(--color-teal-default))\n            );\n        }\n        &:disabled {\n            background-color: rgba(var(--contrast-1700), 0.15);\n        }\n    }\n\n    :host(limel-button:not([primary])) & {\n        &:not(:disabled) {\n            color: var(--mdc-theme-primary, rgb(var(--color-teal-default)));\n        }\n        &:disabled {\n            color: rgba(var(--contrast-1600), 0.37);\n            background-color: rgba(var(--contrast-1600), 0.1);\n        }\n    }\n}\n\n.icon {\n    width: 1.25rem;\n    flex-shrink: 0;\n}\n\n.label {\n    font-family: Roboto, sans-serif;\n    font-size: 0.875rem;\n    font-weight: 500;\n    letter-spacing: functions.pxToRem(1);\n    opacity: 1;\n    padding: 0 0.25rem;\n}\n\nlimel-spinner {\n    position: absolute;\n}\n\nlimel-icon {\n    vertical-align: top;\n}\n\nsvg {\n    height: functions.pxToRem(30);\n    opacity: 0;\n    pointer-events: none;\n    position: absolute;\n    width: functions.pxToRem(30);\n\n    line {\n        stroke: rgb(var(--color-white));\n        stroke-width: 2;\n    }\n}\n\nlimel-icon,\n.label,\nlimel-spinner,\nsvg {\n    transition: opacity 300ms ease-in-out;\n}\n\n.loading {\n    limel-icon,\n    .label {\n        opacity: 0;\n    }\n    limel-spinner {\n        opacity: 1;\n    }\n}\n\n.just-loaded,\n.just-failed {\n    limel-icon,\n    .label {\n        opacity: 0;\n    }\n    svg {\n        opacity: 1;\n    }\n}\n\n.just-failed {\n    background-color: var(--lime-error-text-color) !important;\n    animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;\n}\n\n.outlined {\n    border: 1px solid;\n    border-color: var(--mdc-theme-primary);\n}\n\n@keyframes shake {\n    10%,\n    90% {\n        transform: translate3d(#{functions.pxToRem(-1)}, 0, 0);\n    }\n\n    20%,\n    80% {\n        transform: translate3d(#{functions.pxToRem(2)}, 0, 0);\n    }\n\n    30%,\n    50%,\n    70% {\n        transform: translate3d(#{functions.pxToRem(-3)}, 0, 0);\n    }\n\n    40%,\n    60% {\n        transform: translate3d(#{functions.pxToRem(3)}, 0, 0);\n    }\n}\n\n@import './partial-styles/_has-reduced-presence';\n","import { Component, h, Prop, State, Watch, Element } from '@stencil/core';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../util/make-enter-clickable';\n\n/**\n * @exampleComponent limel-example-button-basic\n * @exampleComponent limel-example-button-primary\n * @exampleComponent limel-example-button-outlined\n * @exampleComponent limel-example-button-disabled\n * @exampleComponent limel-example-button-icon\n * @exampleComponent limel-example-button-loading\n * @exampleComponent limel-example-button-click-success\n * @exampleComponent limel-example-button-click-fail\n * @exampleComponent limel-example-button-reduce-presence\n * @exampleComponent limel-example-button-colors\n * @exampleComponent limel-example-button-composite\n */\n@Component({\n    tag: 'limel-button',\n    shadow: true,\n    styleUrl: 'button.scss',\n})\nexport class Button {\n    /**\n     * The text to show on the button.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Set to `true` to make the button primary.\n     */\n    @Prop({ reflect: true })\n    public primary = false;\n\n    /**\n     * Set to `true` to make the button outlined.\n     */\n    @Prop({ reflect: true })\n    public outlined = false;\n\n    /**\n     * Set icon for the button\n     */\n    @Prop({ reflect: true })\n    public icon: string;\n\n    /**\n     * Set to `true` to disable the button.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Set to `true` to put the button in the `loading` state.\n     * This also disables the button.\n     */\n    @Prop({ reflect: true })\n    public loading = false;\n\n    /**\n     * Set to `true` to indicate failure instead of success when the button is\n     * no longer in the `loading` state.\n     */\n    @Prop({ reflect: true })\n    public loadingFailed = false;\n\n    @State()\n    private justLoaded = false;\n\n    @Element()\n    private host: HTMLElement;\n\n    private justLoadedTimeout?: number;\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public render() {\n        return (\n            <button\n                class={{\n                    loading: this.loading,\n                    'just-loaded': this.justLoaded && !this.loadingFailed,\n                    'just-failed': this.justLoaded && this.loadingFailed,\n                    outlined: this.outlined,\n                }}\n                disabled={this.disabled || this.loading}\n            >\n                {this.renderIcon()}\n                {this.renderLabel()}\n                {this.renderSpinner()}\n                <svg viewBox=\"0 0 30 30\">{this.renderLoadingIcons()}</svg>\n            </button>\n        );\n    }\n\n    @Watch('loading')\n    protected loadingWatcher(newValue: boolean, oldValue: boolean) {\n        if (oldValue && !newValue) {\n            this.justLoaded = true;\n            const TIMEOUT = 2000;\n            this.justLoadedTimeout = window.setTimeout(() => {\n                this.justLoaded = false;\n            }, TIMEOUT);\n        } else if (newValue) {\n            this.justLoaded = false;\n            window.clearTimeout(this.justLoadedTimeout);\n        }\n    }\n\n    private renderLoadingIcons() {\n        if (this.loadingFailed) {\n            return [\n                <line x1=\"9\" y1=\"9\" x2=\"21\" y2=\"21\" />,\n                <line x1=\"21\" y1=\"9\" x2=\"9\" y2=\"21\" />,\n            ];\n        }\n\n        return [\n            <line x1=\"8\" y1=\"14\" x2=\"15\" y2=\"20\" />,\n            <line x1=\"23\" y1=\"9\" x2=\"14\" y2=\"20\" />,\n        ];\n    }\n\n    private renderIcon() {\n        if (!this.icon) {\n            return;\n        }\n\n        return <limel-icon class=\"icon\" name={this.icon} />;\n    }\n\n    private renderLabel() {\n        if (!this.label) {\n            return;\n        }\n\n        return <span class=\"label\">{this.label}</span>;\n    }\n\n    private renderSpinner() {\n        if (!this.loading) {\n            return;\n        }\n\n        return <limel-spinner limeBranded={false} />;\n    }\n}\n"],"mappings":"6FAAA,MAAMA,EAAY,yrJ,MCwBLC,EAAM,M,2DAWE,M,cAMC,M,kCAYA,M,aAOD,M,mBAOM,M,gBAGF,K,CAOdC,oBACHC,EAAmBC,KAAKC,K,CAGrBC,uBACHC,EAAqBH,KAAKC,K,CAGvBG,SACH,OACIC,EAAA,UACIC,MAAO,CACHC,QAASP,KAAKO,QACd,cAAeP,KAAKQ,aAAeR,KAAKS,cACxC,cAAeT,KAAKQ,YAAcR,KAAKS,cACvCC,SAAUV,KAAKU,UAEnBC,SAAUX,KAAKW,UAAYX,KAAKO,SAE/BP,KAAKY,aACLZ,KAAKa,cACLb,KAAKc,gBACNT,EAAA,OAAKU,QAAQ,aAAaf,KAAKgB,sB,CAMjCC,eAAeC,EAAmBC,GACxC,GAAIA,IAAaD,EAAU,CACvBlB,KAAKQ,WAAa,KAClB,MAAMY,EAAU,IAChBpB,KAAKqB,kBAAoBC,OAAOC,YAAW,KACvCvB,KAAKQ,WAAa,KAAK,GACxBY,E,MACA,GAAIF,EAAU,CACjBlB,KAAKQ,WAAa,MAClBc,OAAOE,aAAaxB,KAAKqB,kB,EAIzBL,qBACJ,GAAIhB,KAAKS,cAAe,CACpB,MAAO,CACHJ,EAAA,QAAMoB,GAAG,IAAIC,GAAG,IAAIC,GAAG,KAAKC,GAAG,OAC/BvB,EAAA,QAAMoB,GAAG,KAAKC,GAAG,IAAIC,GAAG,IAAIC,GAAG,O,CAIvC,MAAO,CACHvB,EAAA,QAAMoB,GAAG,IAAIC,GAAG,KAAKC,GAAG,KAAKC,GAAG,OAChCvB,EAAA,QAAMoB,GAAG,KAAKC,GAAG,IAAIC,GAAG,KAAKC,GAAG,O,CAIhChB,aACJ,IAAKZ,KAAK6B,KAAM,CACZ,M,CAGJ,OAAOxB,EAAA,cAAYC,MAAM,OAAOwB,KAAM9B,KAAK6B,M,CAGvChB,cACJ,IAAKb,KAAK+B,MAAO,CACb,M,CAGJ,OAAO1B,EAAA,QAAMC,MAAM,SAASN,KAAK+B,M,CAG7BjB,gBACJ,IAAKd,KAAKO,QAAS,CACf,M,CAGJ,OAAOF,EAAA,iBAAe2B,YAAa,O"}

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

@@ -1,2 +0,0 @@
-import{r as t,h as o,g as e}from"./p-3075aa67.js";import{m as s,r as n}from"./p-d028b08d.js";import{c as i}from"./p-3ccdc4a3.js";const r='@charset "UTF-8";:host([hidden]){display:none}:host([disabled]){pointer-events:none}button{all:unset;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--icon-background-color, transparent);display:inline-flex;align-items:center;justify-content:center;height:2.25rem;width:2.25rem;border-radius:50%}button:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}button:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}button:focus{outline:none}button:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}:host([elevated]) button:not(:hover):not(:active):not(:focus-visible){box-shadow:var(--button-shadow-normal)}button:disabled{color:var(--mdc-theme-text-disabled-on-background)}limel-icon{width:1.25rem}';const a=class{constructor(o){t(this,o);this.tooltipId=i();this.icon=undefined;this.elevated=false;this.label=undefined;this.disabled=false}connectedCallback(){this.initialize()}componentWillLoad(){s(this.host)}disconnectedCallback(){n(this.host)}componentDidLoad(){this.initialize()}initialize(){const t=this.host.shadowRoot.querySelector(".mdc-icon-button");if(!t){return}}render(){const t={};if(this.host.hasAttribute("tabindex")){t.tabindex=this.host.getAttribute("tabindex")}return o("button",Object.assign({disabled:this.disabled,id:this.tooltipId},t),o("limel-icon",{name:this.icon,badge:true}),this.renderTooltip(this.tooltipId))}renderTooltip(t){if(this.label){return o("limel-tooltip",{elementId:t,label:this.label})}}get host(){return e(this)}};a.style=r;export{a as limel_icon_button};
-//# sourceMappingURL=p-d2e8c721.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["iconButtonCss","IconButton","this","tooltipId","createRandomString","connectedCallback","initialize","componentWillLoad","makeEnterClickable","host","disconnectedCallback","removeEnterClickable","componentDidLoad","element","shadowRoot","querySelector","render","buttonAttributes","hasAttribute","tabindex","getAttribute","h","Object","assign","disabled","id","name","icon","badge","renderTooltip","label","elementId"],"sources":["./src/components/icon-button/icon-button.scss?tag=limel-icon-button&encapsulation=shadow","./src/components/icon-button/icon-button.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n/**\n * @prop --icon-background-color: Background color of the button.\n */\n\n:host([hidden]) {\n    display: none;\n}\n\n:host([disabled]) {\n    pointer-events: none;\n}\n\nbutton {\n    all: unset;\n    @include mixins.is-flat-clickable(\n        $background-color: var(--icon-background-color, transparent)\n    );\n    @include mixins.visualize-keyboard-focus;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    height: 2.25rem;\n    width: 2.25rem;\n    border-radius: 50%;\n\n    :host([elevated]) & {\n        &:not(:hover):not(:active):not(:focus-visible) {\n            box-shadow: var(--button-shadow-normal);\n        }\n    }\n\n    &:disabled {\n        color: var(--mdc-theme-text-disabled-on-background);\n    }\n}\n\nlimel-icon {\n    width: 1.25rem;\n}\n","import { Component, Element, h, Prop } from '@stencil/core';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from 'src/util/make-enter-clickable';\nimport { createRandomString } from '../../util/random-string';\n\n/**\n * @exampleComponent limel-example-icon-button-basic\n * @exampleComponent limel-example-icon-button-disabled\n * @exampleComponent limel-example-icon-button-elevated\n * @exampleComponent limel-example-icon-button-toggle-state\n * @exampleComponent limel-example-icon-button-composite\n */\n@Component({\n    tag: 'limel-icon-button',\n    shadow: true,\n    styleUrl: 'icon-button.scss',\n})\nexport class IconButton {\n    /**\n     * The icon to display.\n     */\n    @Prop({ reflect: true })\n    public icon: string;\n\n    /**\n     * Set to `true` to give the button our standard \"elevated\" look, lifting\n     * it off the flat layout.\n     */\n    @Prop({ reflect: true })\n    public elevated = false;\n\n    /**\n     * The text to show to screenreaders and other assistive tech.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Set to `true` to disable the button.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    @Element()\n    private host: HTMLLimelIconButtonElement;\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private tooltipId = createRandomString();\n\n    private initialize() {\n        const element = this.host.shadowRoot.querySelector('.mdc-icon-button');\n        if (!element) {\n            return;\n        }\n    }\n\n    public render() {\n        const buttonAttributes: { tabindex?: string } = {};\n\n        if (this.host.hasAttribute('tabindex')) {\n            buttonAttributes.tabindex = this.host.getAttribute('tabindex');\n        }\n\n        return (\n            <button\n                disabled={this.disabled}\n                id={this.tooltipId}\n                {...buttonAttributes}\n            >\n                <limel-icon name={this.icon} badge={true} />\n                {this.renderTooltip(this.tooltipId)}\n            </button>\n        );\n    }\n    private renderTooltip(tooltipId) {\n        if (this.label) {\n            return <limel-tooltip elementId={tooltipId} label={this.label} />;\n        }\n    }\n}\n"],"mappings":"iIAAA,MAAMA,EAAgB,s8B,MCmBTC,EAAU,M,yBA6CXC,KAAAC,UAAYC,I,kCAjCF,M,mCAYA,K,CAKXC,oBACHH,KAAKI,Y,CAGFC,oBACHC,EAAmBN,KAAKO,K,CAGrBC,uBACHC,EAAqBT,KAAKO,K,CAGvBG,mBACHV,KAAKI,Y,CAKDA,aACJ,MAAMO,EAAUX,KAAKO,KAAKK,WAAWC,cAAc,oBACnD,IAAKF,EAAS,CACV,M,EAIDG,SACH,MAAMC,EAA0C,GAEhD,GAAIf,KAAKO,KAAKS,aAAa,YAAa,CACpCD,EAAiBE,SAAWjB,KAAKO,KAAKW,aAAa,W,CAGvD,OACIC,EAAA,SAAAC,OAAAC,OAAA,CACIC,SAAUtB,KAAKsB,SACfC,GAAIvB,KAAKC,WACLc,GAEJI,EAAA,cAAYK,KAAMxB,KAAKyB,KAAMC,MAAO,OACnC1B,KAAK2B,cAAc3B,KAAKC,W,CAI7B0B,cAAc1B,GAClB,GAAID,KAAK4B,MAAO,CACZ,OAAOT,EAAA,iBAAeU,UAAW5B,EAAW2B,MAAO5B,KAAK4B,O"}