@limetech/lime-elements 37.1.0-next.55 → 37.1.0-next.57

package/dist/esm/limel-action-bar-item_2.entry.js.map

@@ -1 +1 @@
-{"file":"limel-action-bar-item.limel-action-bar-overflow-menu.entry.js","mappings":"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","names":[],"sources":["./src/components/action-bar/action-bar-item/action-bar-item.scss?tag=limel-action-bar-item","./src/components/action-bar/action-bar-item/action-bar-item.tsx","./src/components/action-bar/action-bar-item/action-bar-overflow-menu.tsx"],"sourcesContent":["@use '../../../style/mixins';\n@use '../../../style/functions';\n\nlimel-action-bar-item {\n    transition: opacity 0.2s ease-in-out;\n    position: relative;\n    display: flex;\n    align-items: center;\n\n    &:not([is-visible]) {\n        opacity: 0;\n        pointer-events: none;\n    }\n}\n\nbutton {\n    all: unset;\n\n    &:not([disabled]) {\n        @include mixins.is-flat-inset-clickable(\n            $color: var(--limel-action-bar-item-text-color),\n            $color--hovered: var(--limel-action-bar-item-text-color),\n            $background-color: var(--action-bar-background-color),\n            $background-color--hovered: var(--action-bar-background-color),\n            $background-color--inset: var(--action-bar-background-color)\n        );\n        @include mixins.visualize-keyboard-focus;\n    }\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.25rem;\n\n    width: 100%;\n    min-width: var(--action-bar-item-height);\n    max-width: var(--action-bar-item-max-width, 10rem);\n    height: var(--action-bar-item-height);\n    color: var(--limel-action-bar-item-text-color);\n\n    border-radius: var(--action-bar-item-height);\n    font-size: functions.pxToRem(14);\n    padding: 0 0.25rem;\n\n    &:has(.text) {\n        padding: 0 0.5rem;\n    }\n\n    &[disabled] {\n        opacity: 0.4;\n    }\n}\n\n.text {\n    @include mixins.truncate-text();\n    padding: 0 0.25rem;\n}\n\nlimel-icon {\n    flex-shrink: 0;\n    width: calc(var(--action-bar-item-height) - 0.75rem);\n    height: calc(var(--action-bar-item-height) - 0.75rem);\n    color: var(\n        --action-bar-item-icon-color,\n        var(--limel-action-bar-item-text-color)\n    );\n}\n\ndiv[role='separator'] {\n    width: 1px;\n    height: 1.5rem;\n    border-radius: var(--action-bar-item-height);\n    background-color: var(--limel-action-bar-item-text-color);\n    opacity: 0.2;\n\n    @media (pointer: fine) {\n        margin-right: 0.5rem;\n        margin-left: 0.5rem;\n    }\n}\n\n// 👇 Overflow menu\n\nlimel-menu {\n    --notification-badge-background-color: rgb(var(--contrast-600));\n    --notification-badge-text-color: rgb(var(--contrast-1200));\n\n    &[open] {\n        button {\n            box-shadow: var(--button-shadow-inset);\n        }\n    }\n}\n\nbutton[slot='trigger'] {\n    animation: fade-in ease-out 0.25s;\n    font-size: 0.75rem;\n    font-weight: bold;\n    transform: translate3d(0, 0, 0);\n}\n\n@keyframes fade-in {\n    0% {\n        scale: 0.8;\n        opacity: 0;\n    }\n    100% {\n        scale: 1;\n        opacity: 1;\n    }\n}\n","import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n} from '@stencil/core';\nimport { ActionBarItem, ListSeparator } from '../../../interface';\nimport { createRandomString } from '../../../util/random-string';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from 'src/util/make-enter-clickable';\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-action-bar-item',\n    shadow: false,\n    styleUrl: 'action-bar-item.scss',\n})\nexport class ActionBarButton {\n    /**\n     * Item that is placed in the action bar.\n     */\n    @Prop()\n    public item!: ActionBarItem | ListSeparator;\n\n    /**\n     * Fired when a action bar item has been clicked.\n     */\n    @Event()\n    public select: EventEmitter<ActionBarItem | ListSeparator>;\n\n    /**\n     * When the item is displayed in the available width,\n     * this will be `false`.\n     */\n    @Prop({ reflect: true })\n    public isVisible: boolean = true;\n\n    @Element()\n    private host: HTMLLimelActionBarItemElement;\n\n    /**\n     * Used to attach the right tooltip to the right button\n     */\n    private tooltipId: string;\n\n    constructor() {\n        this.tooltipId = createRandomString();\n    }\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public render() {\n        if (!this.isItem(this.item) && this.item.separator) {\n            return <div role=\"separator\" />;\n        }\n\n        return (\n            <button\n                id={this.tooltipId}\n                type=\"button\"\n                onClick={this.handleClick}\n                disabled={this.isDisabled()}\n            >\n                {this.renderIcon()}\n                {this.renderLabel()}\n                {this.renderTooltip()}\n            </button>\n        );\n    }\n\n    private handleClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.select.emit(this.item);\n    };\n\n    private isItem(item: ActionBarItem | ListSeparator): item is ActionBarItem {\n        return !('separator' in item);\n    }\n\n    private isDisabled() {\n        if (this.isItem(this.item) && this.item.disabled) {\n            return true;\n        }\n\n        if (!this.isVisible) {\n            return true;\n        }\n    }\n\n    private renderIcon() {\n        if (this.isItem(this.item) && !this.item.icon) {\n            return;\n        }\n\n        if ('icon' in this.item) {\n            return (\n                <limel-icon\n                    name={this.item.icon}\n                    style={{\n                        '--action-bar-item-icon-color': `${this.item.iconColor}`,\n                    }}\n                />\n            );\n        }\n    }\n\n    private renderLabel() {\n        if (!this.isItem(this.item) || this.item.iconOnly) {\n            return;\n        }\n\n        return <span class=\"text\">{this.item.text}</span>;\n    }\n\n    private renderTooltip() {\n        if (!this.isItem(this.item)) {\n            return;\n        }\n\n        if (this.item.text) {\n            return (\n                <limel-tooltip\n                    elementId={this.tooltipId}\n                    label={this.item.text}\n                    helperLabel={this.item.commandText}\n                />\n            );\n        }\n\n        if (this.item.commandText) {\n            return (\n                <limel-tooltip\n                    elementId={this.tooltipId}\n                    label={this.item.commandText}\n                />\n            );\n        }\n    }\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport {\n    ActionBarItem,\n    ListSeparator,\n    MenuItem,\n    OpenDirection,\n} from '../../../interface';\nimport { LimelMenuCustomEvent } from 'src/components';\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-action-bar-overflow-menu',\n    shadow: false,\n})\nexport class ActionBarOverflowMenu {\n    /**\n     * List of the items that should be rendered in the overflow menu.\n     */\n    @Prop()\n    public items: Array<MenuItem | ListSeparator>;\n\n    /**\n     * Defines the location that the content of the overflow menu\n     * appears, in relation to its trigger.\n     * It defaults to `bottom-end`, since in normal scenarios\n     * (for example when the action bar is not floating at the bottom of the screen)\n     * this menu is the right-most item in the user interface of the component.\n     */\n    @Prop({ reflect: true })\n    public openDirection: OpenDirection = 'bottom-end';\n\n    @Event()\n    public select: EventEmitter<ActionBarItem>;\n\n    public render() {\n        return [\n            <limel-menu\n                openDirection={this.openDirection}\n                items={this.items}\n                onSelect={this.handleSelect}\n            >\n                <button slot=\"trigger\">{this.countOverflowedItems()}</button>\n            </limel-menu>,\n        ];\n    }\n\n    private countOverflowedItems = () => {\n        return `+${this.numberOfMenuItems}`;\n    };\n\n    private handleSelect = (event: LimelMenuCustomEvent<MenuItem>) => {\n        event.stopPropagation();\n        this.select.emit(event.detail);\n    };\n\n    private get numberOfMenuItems() {\n        return this.items.filter((item) => this.isMenuItem(item)).length;\n    }\n\n    private isMenuItem(item: MenuItem | ListSeparator): item is MenuItem {\n        return !('separator' in item);\n    }\n}\n"],"version":3}
+{"file":"limel-action-bar-item.limel-action-bar-overflow-menu.entry.js","mappings":"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","names":[],"sources":["./src/components/action-bar/action-bar-item/action-bar-item.scss?tag=limel-action-bar-item","./src/components/action-bar/action-bar-item/action-bar-item.tsx","./src/components/action-bar/action-bar-item/action-bar-overflow-menu.tsx"],"sourcesContent":["@use '../../../style/mixins';\n@use '../../../style/functions';\n\nlimel-action-bar-item {\n    transition: opacity 0.2s ease-in-out;\n    position: relative;\n    display: flex;\n    align-items: center;\n\n    &:not([is-visible]) {\n        opacity: 0;\n        pointer-events: none;\n    }\n}\n\nbutton {\n    all: unset;\n\n    &:not([disabled]) {\n        @include mixins.is-flat-inset-clickable(\n            $color: var(--limel-action-bar-item-text-color),\n            $color--hovered: var(--limel-action-bar-item-text-color),\n            $background-color: var(--action-bar-background-color),\n            $background-color--hovered: var(--action-bar-background-color),\n            $background-color--inset: var(--action-bar-background-color)\n        );\n        @include mixins.visualize-keyboard-focus;\n    }\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.25rem;\n\n    width: 100%;\n    min-width: var(--action-bar-item-height);\n    max-width: var(--action-bar-item-max-width, 10rem);\n    height: var(--action-bar-item-height);\n    color: var(--limel-action-bar-item-text-color);\n\n    border-radius: var(--action-bar-item-height);\n    font-size: functions.pxToRem(14);\n    padding: 0 0.25rem;\n\n    &:has(.text) {\n        padding: 0 0.5rem;\n    }\n\n    &[disabled] {\n        opacity: 0.4;\n    }\n}\n\n.text {\n    @include mixins.truncate-text();\n    padding: 0 0.25rem;\n}\n\nlimel-icon {\n    flex-shrink: 0;\n    width: calc(var(--action-bar-item-height) - 0.75rem);\n    height: calc(var(--action-bar-item-height) - 0.75rem);\n    color: var(\n        --action-bar-item-icon-color,\n        var(--limel-action-bar-item-text-color)\n    );\n}\n\ndiv[role='separator'] {\n    width: 1px;\n    height: 1.5rem;\n    border-radius: var(--action-bar-item-height);\n    background-color: var(--limel-action-bar-item-text-color);\n    opacity: 0.2;\n\n    @media (pointer: fine) {\n        margin-right: 0.5rem;\n        margin-left: 0.5rem;\n    }\n}\n\n// 👇 Overflow menu\n\nlimel-menu {\n    --notification-badge-background-color: rgb(var(--contrast-600));\n    --notification-badge-text-color: rgb(var(--contrast-1200));\n\n    &[open] {\n        button {\n            box-shadow: var(--button-shadow-inset);\n        }\n    }\n}\n\nbutton[slot='trigger'] {\n    animation: fade-in ease-out 0.25s;\n    font-size: 0.75rem;\n    font-weight: bold;\n    transform: translate3d(0, 0, 0);\n}\n\n@keyframes fade-in {\n    0% {\n        scale: 0.8;\n        opacity: 0;\n    }\n    100% {\n        scale: 1;\n        opacity: 1;\n    }\n}\n","import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n} from '@stencil/core';\nimport { ActionBarItem, ListSeparator } from '../../../interface';\nimport { createRandomString } from '../../../util/random-string';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from 'src/util/make-enter-clickable';\nimport { getIconColor, getIconName } from '../../icon/get-icon-props';\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-action-bar-item',\n    shadow: false,\n    styleUrl: 'action-bar-item.scss',\n})\nexport class ActionBarButton {\n    /**\n     * Item that is placed in the action bar.\n     */\n    @Prop()\n    public item!: ActionBarItem | ListSeparator;\n\n    /**\n     * Fired when a action bar item has been clicked.\n     */\n    @Event()\n    public select: EventEmitter<ActionBarItem | ListSeparator>;\n\n    /**\n     * When the item is displayed in the available width,\n     * this will be `false`.\n     */\n    @Prop({ reflect: true })\n    public isVisible: boolean = true;\n\n    @Element()\n    private host: HTMLLimelActionBarItemElement;\n\n    /**\n     * Used to attach the right tooltip to the right button\n     */\n    private tooltipId: string;\n\n    constructor() {\n        this.tooltipId = createRandomString();\n    }\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public componentDidLoad() {\n        this.triggerIconColorWarning();\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public render() {\n        if (!this.isItem(this.item) && this.item.separator) {\n            return <div role=\"separator\" />;\n        }\n\n        return (\n            <button\n                id={this.tooltipId}\n                type=\"button\"\n                onClick={this.handleClick}\n                disabled={this.isDisabled()}\n            >\n                {this.renderIcon()}\n                {this.renderLabel()}\n                {this.renderTooltip()}\n            </button>\n        );\n    }\n\n    private handleClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.select.emit(this.item);\n    };\n\n    private isItem(item: ActionBarItem | ListSeparator): item is ActionBarItem {\n        return !('separator' in item);\n    }\n\n    private isDisabled() {\n        if (this.isItem(this.item) && this.item.disabled) {\n            return true;\n        }\n\n        if (!this.isVisible) {\n            return true;\n        }\n    }\n\n    private renderIcon() {\n        if (this.isItem(this.item) && !this.item.icon) {\n            return;\n        }\n\n        if ('icon' in this.item) {\n            const name = getIconName(this.item.icon);\n            const color = getIconColor(this.item.icon, this.item.iconColor);\n\n            return (\n                <limel-icon\n                    name={name}\n                    style={{\n                        '--action-bar-item-icon-color': `${color}`,\n                    }}\n                />\n            );\n        }\n    }\n\n    private renderLabel() {\n        if (!this.isItem(this.item) || this.item.iconOnly) {\n            return;\n        }\n\n        return <span class=\"text\">{this.item.text}</span>;\n    }\n\n    private renderTooltip() {\n        if (!this.isItem(this.item)) {\n            return;\n        }\n\n        if (this.item.text) {\n            return (\n                <limel-tooltip\n                    elementId={this.tooltipId}\n                    label={this.item.text}\n                    helperLabel={this.item.commandText}\n                />\n            );\n        }\n\n        if (this.item.commandText) {\n            return (\n                <limel-tooltip\n                    elementId={this.tooltipId}\n                    label={this.item.commandText}\n                />\n            );\n        }\n    }\n\n    private triggerIconColorWarning() {\n        if (this.isItem(this.item) && this.item.iconColor) {\n            /* eslint-disable-next-line no-console */\n            console.warn(\n                \"The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.\"\n            );\n        }\n    }\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport {\n    ActionBarItem,\n    ListSeparator,\n    MenuItem,\n    OpenDirection,\n} from '../../../interface';\nimport { LimelMenuCustomEvent } from 'src/components';\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-action-bar-overflow-menu',\n    shadow: false,\n})\nexport class ActionBarOverflowMenu {\n    /**\n     * List of the items that should be rendered in the overflow menu.\n     */\n    @Prop()\n    public items: Array<MenuItem | ListSeparator>;\n\n    /**\n     * Defines the location that the content of the overflow menu\n     * appears, in relation to its trigger.\n     * It defaults to `bottom-end`, since in normal scenarios\n     * (for example when the action bar is not floating at the bottom of the screen)\n     * this menu is the right-most item in the user interface of the component.\n     */\n    @Prop({ reflect: true })\n    public openDirection: OpenDirection = 'bottom-end';\n\n    @Event()\n    public select: EventEmitter<ActionBarItem>;\n\n    public render() {\n        return [\n            <limel-menu\n                openDirection={this.openDirection}\n                items={this.items}\n                onSelect={this.handleSelect}\n            >\n                <button slot=\"trigger\">{this.countOverflowedItems()}</button>\n            </limel-menu>,\n        ];\n    }\n\n    private countOverflowedItems = () => {\n        return `+${this.numberOfMenuItems}`;\n    };\n\n    private handleSelect = (event: LimelMenuCustomEvent<MenuItem>) => {\n        event.stopPropagation();\n        this.select.emit(event.detail);\n    };\n\n    private get numberOfMenuItems() {\n        return this.items.filter((item) => this.isMenuItem(item)).length;\n    }\n\n    private isMenuItem(item: MenuItem | ListSeparator): item is MenuItem {\n        return !('separator' in item);\n    }\n}\n"],"version":3}

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

@@ -1,6 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-232e9616.js';
 import { m as makeEnterClickable, r as removeEnterClickable } from './make-enter-clickable-0473e94a.js';
 import { c as createRandomString } from './random-string-812b1c35.js';
+import { g as getIconName, a as getIconColor } from './get-icon-props-02ab4784.js';
 
 const breadcrumbsCss = ":host(limel-breadcrumbs){--limel-breadcrumbs-item-height:1.5rem;--limel-breadcrumbs-gap:0.75rem;--limel-breadcrumbs-gap:0.75rem;--limel-breadcrumbs-item-text-color:var(\n      --breadcrumbs-item-text-color,\n      rgb(var(--contrast-1500))\n  );--limel-overflow-mask-horizontal:linear-gradient(\n      to right,\n      transparent 0%,\n      black calc(0% + var(--limel-left-edge-fade-width, 1rem)),\n      black calc(100% - var(--limel-right-edge-fade-width, 1rem)),\n      transparent 100%\n  );-webkit-mask-image:var(--limel-overflow-mask-horizontal);mask-image:var(--limel-overflow-mask-horizontal);padding-left:var(--limel-left-edge-fade-width, 1rem);padding-right:var(--limel-right-edge-fade-width, 1rem);--limel-left-edge-fade-width:0.5rem;--limel-right-edge-fade-width:0.5rem}ol,li,.step{all:unset}*{box-sizing:border-box}ol{padding:0.5rem;gap:var(--limel-breadcrumbs-gap)}.step{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;max-width:var(--breadcrumbs-item-max-width, 10rem);height:var(--limel-breadcrumbs-item-height);color:var(--limel-breadcrumbs-item-text-color);border-radius:100vw;font-size:0.875rem;padding:0 0.25rem}.step:not(:has(.text)){padding:0 0.125rem}.step:not(.last):focus{outline:none}.step:not(.last):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.step:not(.last):after{content:var(--limel-breadcrumbs-divider);width:var(--limel-breadcrumbs-gap);position:absolute;top:0;right:calc(var(--limel-breadcrumbs-gap) * -1);bottom:0;left:auto;text-align:center}a.step{cursor:pointer;transition:color 0.2s ease}a.step:before{transition:opacity 0.2s ease, transform 0.3s ease-out;content:\"\";position:absolute;inset:auto 0 0 0;width:calc(100% - 0.5rem);margin:auto;height:0.125rem;border-radius:1rem;background-color:currentColor;opacity:0;transform:scale(0.6)}a.step:hover{--limel-breadcrumbs-item-text-color:rgb(var(--color-blue-default))}a.step:hover:before{opacity:0.3;transform:scale(1)}button.step:not(.last){transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--limel-breadcrumbs-item-text-color);background-color:transparent}button.step:not(.last):hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}button.step:not(.last):active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}limel-icon{flex-shrink:0;width:calc(var(--limel-breadcrumbs-item-height) - 0.25rem);height:calc(var(--limel-breadcrumbs-item-height) - 0.25rem)}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 0.25rem}.last{opacity:0.7}:host(limel-breadcrumbs){box-sizing:border-box;display:flex;width:100%;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;direction:rtl}:host(limel-breadcrumbs)::-webkit-scrollbar{display:none}ol{display:flex;flex-direction:row-reverse;justify-content:flex-end;margin-right:auto}.step{direction:ltr}";
 
@@ -34,13 +35,14 @@ const Breadcrumbs = class {
       return (h("li", { class: "last step", tabindex: "-1", "aria-current": this.areItemsLinks(this.items) ? 'page' : 'step' }, this.renderIcon(lastItem[0]), h("span", { class: "text" }, lastItem[0].text)));
     };
     this.renderIcon = (item) => {
-      var _a;
-      if (!((_a = item.icon) === null || _a === void 0 ? void 0 : _a.name)) {
+      const name = getIconName(item.icon);
+      const color = getIconColor(item.icon);
+      if (!name) {
         return;
       }
       return (h("limel-icon", { style: {
-          color: `${item.icon.color}`,
-        }, name: item.icon.name }));
+          color: `${color}`,
+        }, name: name }));
     };
     this.renderLabel = (item) => {
       if (item.type === 'icon-only') {

package/dist/esm/limel-breadcrumbs.entry.js.map

@@ -1 +1 @@
-{"file":"limel-breadcrumbs.entry.js","mappings":"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","names":[],"sources":["./src/components/breadcrumbs/breadcrumbs.scss?tag=limel-breadcrumbs&encapsulation=shadow","./src/components/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n/**\n* @prop --breadcrumbs-item-text-color: Text color of breadcrumbs items, defaults to `--contrast-1100`.\n* @prop --breadcrumbs-item-max-width: Maximum width of a button in the breadcrumbs. Defaults to `10rem`. Keep in mind that the buttons should not appear too big.\n*/\n\n$padding: 0.5rem;\n\n:host(limel-breadcrumbs) {\n    --limel-breadcrumbs-item-height: 1.5rem;\n    --limel-breadcrumbs-gap: 0.75rem;\n    --limel-breadcrumbs-gap: 0.75rem;\n    --limel-breadcrumbs-item-text-color: var(\n        --breadcrumbs-item-text-color,\n        rgb(var(--contrast-1500))\n    );\n    @include mixins.fade-out-overflowed-content-on-edges(horizontally);\n    --limel-left-edge-fade-width: #{$padding};\n    --limel-right-edge-fade-width: #{$padding};\n}\n\nol,\nli,\n.step {\n    all: unset;\n}\n\n* {\n    box-sizing: border-box;\n}\n\nol {\n    padding: $padding; // needed for the focus and hover effects, since we are using overflow\n    gap: var(--limel-breadcrumbs-gap);\n}\n\n.step {\n    position: relative;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.25rem;\n\n    max-width: var(--breadcrumbs-item-max-width, 10rem);\n    height: var(--limel-breadcrumbs-item-height);\n\n    color: var(--limel-breadcrumbs-item-text-color);\n    border-radius: 100vw;\n    font-size: 0.875rem;\n    padding: 0 0.25rem;\n\n    &:not(:has(.text)) {\n        padding: 0 0.125rem;\n    }\n\n    &:not(.last) {\n        @include mixins.visualize-keyboard-focus;\n\n        &:after {\n            content: var(--limel-breadcrumbs-divider);\n            width: var(--limel-breadcrumbs-gap);\n\n            position: absolute;\n            top: 0;\n            right: calc(var(--limel-breadcrumbs-gap) * -1);\n            bottom: 0;\n            left: auto;\n\n            text-align: center;\n        }\n    }\n}\n\na.step {\n    cursor: pointer;\n    transition: color 0.2s ease;\n    &:before {\n        transition: opacity 0.2s ease, transform 0.3s ease-out;\n        content: '';\n        position: absolute;\n        inset: auto 0 0 0;\n        width: calc(100% - 0.5rem);\n        margin: auto;\n        height: 0.125rem;\n        border-radius: 1rem;\n\n        background-color: currentColor;\n        opacity: 0;\n        transform: scale(0.6);\n    }\n\n    &:hover {\n        --limel-breadcrumbs-item-text-color: rgb(var(--color-blue-default));\n        &:before {\n            opacity: 0.3;\n            transform: scale(1);\n        }\n    }\n}\n\nbutton.step {\n    &:not(.last) {\n        @include mixins.is-flat-clickable(\n            $color: var(--limel-breadcrumbs-item-text-color)\n        );\n    }\n}\n\nlimel-icon {\n    flex-shrink: 0;\n    width: calc(var(--limel-breadcrumbs-item-height) - 0.25rem);\n    height: calc(var(--limel-breadcrumbs-item-height) - 0.25rem);\n}\n\n.text {\n    @include mixins.truncate-text;\n    padding: 0 0.25rem;\n}\n\n.last {\n    opacity: 0.7;\n}\n\n// LAYOUT:\n// The code below makes sure that the last item is always visible,\n// and previous items overflow out of the container\n// while keeping the container scrollable.\n// All without any additional scripts in the component code.\n\n:host(limel-breadcrumbs) {\n    box-sizing: border-box;\n\n    display: flex;\n    width: 100%;\n    overflow-x: auto;\n    scrollbar-width: none; // This hides the scrollbars appearing under in Firefox\n    -ms-overflow-style: none; // Same as above for IE 11\n    &::-webkit-scrollbar {\n        display: none; // This hides the scrollbars appearing under in Chrome\n    }\n\n    direction: rtl;\n}\n\nol {\n    display: flex;\n    flex-direction: row-reverse;\n    justify-content: flex-end;\n    margin-right: auto;\n}\n\n.step {\n    direction: ltr;\n}\n","import {\n    Component,\n    Element,\n    h,\n    Event,\n    EventEmitter,\n    Prop,\n} from '@stencil/core';\nimport { BreadcrumbsItem } from '../../interface';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport { createRandomString } from '../../util/random-string';\n\n/**\n * A Breadcrumb consists of a list of distinct \"places\" that a user has gone through,\n * before ending up where they are right now, in a website or an application.\n *\n * These \"places\" can be for example _pages_ of a website, which are hierarchically\n * laid out before the current page that the user is looking at.\n * They could also be _steps_ which the user has gone through, which perhaps have no\n * hierarchical relation with each other, but has eventually led the user \"here\".\n *\n * :::note\n * - Where the user currently is, is always the last step of the breadcrumb.\n * - A breadcrumbs never shows where users can go after this place.\n * It only illustrates where user has been before ending up here.\n * If the path that a user can take is not changing and if next steps are clear,\n * you can use the [Progress flow component](#/component/limel-progress-flow) instead.\n * :::\n *\n * Breadcrumbs are often placed horizontally before the main content of the current screen.\n * @exampleComponent limel-example-breadcrumbs-links\n * @exampleComponent limel-example-breadcrumbs-buttons\n * @exampleComponent limel-example-breadcrumbs-icons\n * @exampleComponent limel-example-breadcrumbs-divider\n * @exampleComponent limel-example-breadcrumbs-icon-color\n * @exampleComponent limel-example-breadcrumbs-styling\n */\n\n@Component({\n    tag: 'limel-breadcrumbs',\n    shadow: true,\n    styleUrl: 'breadcrumbs.scss',\n})\nexport class Breadcrumbs {\n    /**\n     * List of items in the breadcrumbs,\n     * each representing a step or a page.\n     */\n    @Prop()\n    public items: BreadcrumbsItem[];\n\n    /**\n     * The visual divider that separates items.\n     * It must be a single character such as `-` or `,`.\n     */\n    @Prop()\n    public divider: string = '›';\n\n    /**\n     * Fired when clicking on buttons (not links!)\n     * inside the breadcrumbs.\n     */\n    @Event()\n    public select: EventEmitter<BreadcrumbsItem>;\n\n    @Element()\n    private host: HTMLLimelBreadcrumbsElement;\n\n    private button: HTMLButtonElement;\n    private anchor: HTMLAnchorElement;\n\n    public render() {\n        return (\n            <ol\n                role=\"navigation\"\n                aria-label=\"Breadcrumb\"\n                style={{ '--limel-breadcrumbs-divider': `'${this.divider}'` }}\n            >\n                {this.renderSteps()}\n                {this.renderLastStep()}\n            </ol>\n        );\n    }\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public disconnectedCallback() {\n        this.removeEnterClickable();\n    }\n\n    private renderSteps = () => {\n        const allStepsWithoutLast = this.items.slice(0, -1);\n\n        if (this.areItemsLinks(this.items)) {\n            return allStepsWithoutLast.map(this.renderAsLink);\n        }\n\n        return allStepsWithoutLast.map(this.renderAsButton);\n    };\n\n    private renderAsButton = (item: BreadcrumbsItem) => {\n        const tooltipId = createRandomString();\n\n        return [\n            <button\n                role=\"listitem\"\n                id={tooltipId}\n                class=\"step\"\n                onClick={this.handleClick(item)}\n            >\n                {this.renderIcon(item)}\n                {this.renderLabel(item)}\n            </button>,\n            this.renderTooltip(item, tooltipId),\n        ];\n    };\n\n    private renderAsLink = (item: BreadcrumbsItem) => {\n        const tooltipId = createRandomString();\n\n        return [\n            <a\n                role=\"listitem\"\n                id={createRandomString()}\n                class=\"step\"\n                href={item.link.href}\n                title={item.link.title}\n            >\n                {this.renderIcon(item)}\n                {this.renderLabel(item)}\n            </a>,\n            this.renderTooltip(item, tooltipId),\n        ];\n    };\n\n    private renderLastStep = () => {\n        const lastItem = this.items.slice(-1);\n\n        return (\n            <li\n                class=\"last step\"\n                tabindex=\"-1\"\n                aria-current={this.areItemsLinks(this.items) ? 'page' : 'step'}\n            >\n                {this.renderIcon(lastItem[0])}\n                <span class=\"text\">{lastItem[0].text}</span>\n            </li>\n        );\n    };\n\n    private renderIcon = (item: BreadcrumbsItem) => {\n        if (!item.icon?.name) {\n            return;\n        }\n\n        return (\n            <limel-icon\n                style={{\n                    color: `${item.icon.color}`,\n                }}\n                name={item.icon.name}\n            />\n        );\n    };\n\n    private renderLabel = (item: BreadcrumbsItem) => {\n        if (item.type === 'icon-only') {\n            return;\n        }\n\n        return <span class=\"text\">{item.text}</span>;\n    };\n\n    private renderTooltip = (item: BreadcrumbsItem, tooltipId: string) => {\n        if (item.type === 'icon-only') {\n            return <limel-tooltip elementId={tooltipId} label={item.text} />;\n        }\n    };\n\n    private areItemsLinks = (items: BreadcrumbsItem[]) => {\n        return items.some((item) => 'link' in item);\n    };\n\n    private handleClick = (item: BreadcrumbsItem) => (event: MouseEvent) => {\n        event.stopPropagation();\n        this.select.emit(item);\n    };\n\n    private removeEnterClickable() {\n        const element = this.button ?? this.anchor;\n        removeEnterClickable(element);\n    }\n}\n"],"version":3}
+{"file":"limel-breadcrumbs.entry.js","mappings":"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","names":[],"sources":["./src/components/breadcrumbs/breadcrumbs.scss?tag=limel-breadcrumbs&encapsulation=shadow","./src/components/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n/**\n* @prop --breadcrumbs-item-text-color: Text color of breadcrumbs items, defaults to `--contrast-1100`.\n* @prop --breadcrumbs-item-max-width: Maximum width of a button in the breadcrumbs. Defaults to `10rem`. Keep in mind that the buttons should not appear too big.\n*/\n\n$padding: 0.5rem;\n\n:host(limel-breadcrumbs) {\n    --limel-breadcrumbs-item-height: 1.5rem;\n    --limel-breadcrumbs-gap: 0.75rem;\n    --limel-breadcrumbs-gap: 0.75rem;\n    --limel-breadcrumbs-item-text-color: var(\n        --breadcrumbs-item-text-color,\n        rgb(var(--contrast-1500))\n    );\n    @include mixins.fade-out-overflowed-content-on-edges(horizontally);\n    --limel-left-edge-fade-width: #{$padding};\n    --limel-right-edge-fade-width: #{$padding};\n}\n\nol,\nli,\n.step {\n    all: unset;\n}\n\n* {\n    box-sizing: border-box;\n}\n\nol {\n    padding: $padding; // needed for the focus and hover effects, since we are using overflow\n    gap: var(--limel-breadcrumbs-gap);\n}\n\n.step {\n    position: relative;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.25rem;\n\n    max-width: var(--breadcrumbs-item-max-width, 10rem);\n    height: var(--limel-breadcrumbs-item-height);\n\n    color: var(--limel-breadcrumbs-item-text-color);\n    border-radius: 100vw;\n    font-size: 0.875rem;\n    padding: 0 0.25rem;\n\n    &:not(:has(.text)) {\n        padding: 0 0.125rem;\n    }\n\n    &:not(.last) {\n        @include mixins.visualize-keyboard-focus;\n\n        &:after {\n            content: var(--limel-breadcrumbs-divider);\n            width: var(--limel-breadcrumbs-gap);\n\n            position: absolute;\n            top: 0;\n            right: calc(var(--limel-breadcrumbs-gap) * -1);\n            bottom: 0;\n            left: auto;\n\n            text-align: center;\n        }\n    }\n}\n\na.step {\n    cursor: pointer;\n    transition: color 0.2s ease;\n    &:before {\n        transition: opacity 0.2s ease, transform 0.3s ease-out;\n        content: '';\n        position: absolute;\n        inset: auto 0 0 0;\n        width: calc(100% - 0.5rem);\n        margin: auto;\n        height: 0.125rem;\n        border-radius: 1rem;\n\n        background-color: currentColor;\n        opacity: 0;\n        transform: scale(0.6);\n    }\n\n    &:hover {\n        --limel-breadcrumbs-item-text-color: rgb(var(--color-blue-default));\n        &:before {\n            opacity: 0.3;\n            transform: scale(1);\n        }\n    }\n}\n\nbutton.step {\n    &:not(.last) {\n        @include mixins.is-flat-clickable(\n            $color: var(--limel-breadcrumbs-item-text-color)\n        );\n    }\n}\n\nlimel-icon {\n    flex-shrink: 0;\n    width: calc(var(--limel-breadcrumbs-item-height) - 0.25rem);\n    height: calc(var(--limel-breadcrumbs-item-height) - 0.25rem);\n}\n\n.text {\n    @include mixins.truncate-text;\n    padding: 0 0.25rem;\n}\n\n.last {\n    opacity: 0.7;\n}\n\n// LAYOUT:\n// The code below makes sure that the last item is always visible,\n// and previous items overflow out of the container\n// while keeping the container scrollable.\n// All without any additional scripts in the component code.\n\n:host(limel-breadcrumbs) {\n    box-sizing: border-box;\n\n    display: flex;\n    width: 100%;\n    overflow-x: auto;\n    scrollbar-width: none; // This hides the scrollbars appearing under in Firefox\n    -ms-overflow-style: none; // Same as above for IE 11\n    &::-webkit-scrollbar {\n        display: none; // This hides the scrollbars appearing under in Chrome\n    }\n\n    direction: rtl;\n}\n\nol {\n    display: flex;\n    flex-direction: row-reverse;\n    justify-content: flex-end;\n    margin-right: auto;\n}\n\n.step {\n    direction: ltr;\n}\n","import {\n    Component,\n    Element,\n    h,\n    Event,\n    EventEmitter,\n    Prop,\n} from '@stencil/core';\nimport { BreadcrumbsItem } from '../../interface';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport { createRandomString } from '../../util/random-string';\nimport { getIconColor, getIconName } from '../icon/get-icon-props';\n\n/**\n * A Breadcrumb consists of a list of distinct \"places\" that a user has gone through,\n * before ending up where they are right now, in a website or an application.\n *\n * These \"places\" can be for example _pages_ of a website, which are hierarchically\n * laid out before the current page that the user is looking at.\n * They could also be _steps_ which the user has gone through, which perhaps have no\n * hierarchical relation with each other, but has eventually led the user \"here\".\n *\n * :::note\n * - Where the user currently is, is always the last step of the breadcrumb.\n * - A breadcrumbs never shows where users can go after this place.\n * It only illustrates where user has been before ending up here.\n * If the path that a user can take is not changing and if next steps are clear,\n * you can use the [Progress flow component](#/component/limel-progress-flow) instead.\n * :::\n *\n * Breadcrumbs are often placed horizontally before the main content of the current screen.\n * @exampleComponent limel-example-breadcrumbs-links\n * @exampleComponent limel-example-breadcrumbs-buttons\n * @exampleComponent limel-example-breadcrumbs-icons\n * @exampleComponent limel-example-breadcrumbs-divider\n * @exampleComponent limel-example-breadcrumbs-icon-color\n * @exampleComponent limel-example-breadcrumbs-styling\n */\n\n@Component({\n    tag: 'limel-breadcrumbs',\n    shadow: true,\n    styleUrl: 'breadcrumbs.scss',\n})\nexport class Breadcrumbs {\n    /**\n     * List of items in the breadcrumbs,\n     * each representing a step or a page.\n     */\n    @Prop()\n    public items: BreadcrumbsItem[];\n\n    /**\n     * The visual divider that separates items.\n     * It must be a single character such as `-` or `,`.\n     */\n    @Prop()\n    public divider: string = '›';\n\n    /**\n     * Fired when clicking on buttons (not links!)\n     * inside the breadcrumbs.\n     */\n    @Event()\n    public select: EventEmitter<BreadcrumbsItem>;\n\n    @Element()\n    private host: HTMLLimelBreadcrumbsElement;\n\n    private button: HTMLButtonElement;\n    private anchor: HTMLAnchorElement;\n\n    public render() {\n        return (\n            <ol\n                role=\"navigation\"\n                aria-label=\"Breadcrumb\"\n                style={{ '--limel-breadcrumbs-divider': `'${this.divider}'` }}\n            >\n                {this.renderSteps()}\n                {this.renderLastStep()}\n            </ol>\n        );\n    }\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public disconnectedCallback() {\n        this.removeEnterClickable();\n    }\n\n    private renderSteps = () => {\n        const allStepsWithoutLast = this.items.slice(0, -1);\n\n        if (this.areItemsLinks(this.items)) {\n            return allStepsWithoutLast.map(this.renderAsLink);\n        }\n\n        return allStepsWithoutLast.map(this.renderAsButton);\n    };\n\n    private renderAsButton = (item: BreadcrumbsItem) => {\n        const tooltipId = createRandomString();\n\n        return [\n            <button\n                role=\"listitem\"\n                id={tooltipId}\n                class=\"step\"\n                onClick={this.handleClick(item)}\n            >\n                {this.renderIcon(item)}\n                {this.renderLabel(item)}\n            </button>,\n            this.renderTooltip(item, tooltipId),\n        ];\n    };\n\n    private renderAsLink = (item: BreadcrumbsItem) => {\n        const tooltipId = createRandomString();\n\n        return [\n            <a\n                role=\"listitem\"\n                id={createRandomString()}\n                class=\"step\"\n                href={item.link.href}\n                title={item.link.title}\n            >\n                {this.renderIcon(item)}\n                {this.renderLabel(item)}\n            </a>,\n            this.renderTooltip(item, tooltipId),\n        ];\n    };\n\n    private renderLastStep = () => {\n        const lastItem = this.items.slice(-1);\n\n        return (\n            <li\n                class=\"last step\"\n                tabindex=\"-1\"\n                aria-current={this.areItemsLinks(this.items) ? 'page' : 'step'}\n            >\n                {this.renderIcon(lastItem[0])}\n                <span class=\"text\">{lastItem[0].text}</span>\n            </li>\n        );\n    };\n\n    private renderIcon = (item: BreadcrumbsItem) => {\n        const name = getIconName(item.icon);\n        const color = getIconColor(item.icon);\n\n        if (!name) {\n            return;\n        }\n\n        return (\n            <limel-icon\n                style={{\n                    color: `${color}`,\n                }}\n                name={name}\n            />\n        );\n    };\n\n    private renderLabel = (item: BreadcrumbsItem) => {\n        if (item.type === 'icon-only') {\n            return;\n        }\n\n        return <span class=\"text\">{item.text}</span>;\n    };\n\n    private renderTooltip = (item: BreadcrumbsItem, tooltipId: string) => {\n        if (item.type === 'icon-only') {\n            return <limel-tooltip elementId={tooltipId} label={item.text} />;\n        }\n    };\n\n    private areItemsLinks = (items: BreadcrumbsItem[]) => {\n        return items.some((item) => 'link' in item);\n    };\n\n    private handleClick = (item: BreadcrumbsItem) => (event: MouseEvent) => {\n        event.stopPropagation();\n        this.select.emit(item);\n    };\n\n    private removeEnterClickable() {\n        const element = this.button ?? this.anchor;\n        removeEnterClickable(element);\n    }\n}\n"],"version":3}

package/dist/esm/limel-chip-set.entry.js

@@ -2,6 +2,7 @@ import { r as registerInstance, c as createEvent, h, g as getElement } from './i
 import { i as ARROW_LEFT, j as ARROW_LEFT_KEY_CODE, k as ARROW_RIGHT, l as ARROW_RIGHT_KEY_CODE, a as ENTER, d as ENTER_KEY_CODE, D as DELETE, m as DELETE_KEY_CODE, B as BACKSPACE, n as BACKSPACE_KEY_CODE, E as ESCAPE, c as ESCAPE_KEY_CODE } from './keycodes-44c01beb.js';
 import { t as translate } from './translations-dea847ae.js';
 import { g as getHref, a as getTarget } from './link-helper-b08fe56c.js';
+import { g as getIconName, d as getIconTitle, a as getIconColor, b as getIconBackgroundColor } from './get-icon-props-02ab4784.js';
 import { M as MDCTextField } from './component-288691f3.js';
 import { i as isEqual } from './isEqual-c5a636a4.js';
 import { M as MDCFoundation, a as MDCComponent } from './component-410aad5a.js';
@@ -1831,6 +1832,7 @@ const ChipSet = class {
     this.syncEmptyInput();
   }
   componentDidLoad() {
+    this.triggerIconColorWarning(this.value);
     if (this.type === 'input') {
       this.mdcTextField = new MDCTextField(this.host.shadowRoot.querySelector('.mdc-text-field'));
     }
@@ -2063,14 +2065,18 @@ const ChipSet = class {
     event.stopPropagation();
   }
   renderChipIcon(chip) {
+    const name = getIconName(chip.icon);
+    const color = getIconColor(chip.icon, chip.iconFillColor);
+    const backgroundColor = getIconBackgroundColor(chip.icon, chip.iconBackgroundColor);
+    const title = getIconTitle(chip.icon, chip.iconTitle);
     const style = {};
-    if (chip.iconFillColor) {
-      style['--icon-color'] = chip.iconFillColor;
+    if (color) {
+      style['--icon-color'] = color;
     }
-    if (chip.iconBackgroundColor) {
-      style['--icon-background-color'] = chip.iconBackgroundColor;
+    if (backgroundColor) {
+      style['--icon-background-color'] = backgroundColor;
     }
-    return (h("limel-icon", { class: "mdc-chip__icon mdc-chip__icon--leading", name: chip.icon, style: style, size: "small", badge: true, title: chip.iconTitle }));
+    return (h("limel-icon", { class: "mdc-chip__icon mdc-chip__icon--leading", name: name, style: style, size: "small", badge: true, title: title }));
   }
   renderLeadingIcon() {
     if (!this.leadingIcon) {
@@ -2114,6 +2120,17 @@ const ChipSet = class {
     }
     return h("limel-badge", { label: chip.badge });
   }
+  triggerIconColorWarning(value) {
+    for (const chip of value) {
+      if (chip.icon &&
+        (chip.iconFillColor ||
+          chip.iconBackgroundColor ||
+          chip.iconTitle)) {
+        /* eslint-disable-next-line no-console */
+        console.warn("The `iconFillColor`, `iconBackgroundColor`, and `iconTitle` props are deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name', `iconBackgroundColor: 'color-name', and `iconTitle: 'title'`, write `icon { name: 'icon-name', color: 'color-name', backgroundColor: 'color-name', title: 'title' }`.");
+      }
+    }
+  }
   get host() { return getElement(this); }
   static get watchers() { return {
     "value": ["handleChangeChips"]