@limetech/lime-elements 37.68.0 → 37.69.0

package/dist/lime-elements/p-9f8aa8e7.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as i,H as t}from"./p-443111b3.js";import{g as r}from"./p-2f777fdb.js";const l="*{box-sizing:border-box;min-width:0}:host(limel-dynamic-label){--limel-dynamic-label-min-height:1.75rem;display:flex;gap:0.5rem;align-items:flex-start;border-radius:0.5rem;min-width:0}limel-icon{--limel-icon-svg-margin:0.125rem;border-radius:0.25rem;flex-shrink:0;width:var(--limel-dynamic-label-min-height);color:rgb(var(--contrast-900))}label{flex-grow:1;font-size:0.8125rem;line-height:normal;color:var(--mdc-theme-on-surface);padding-top:0.375rem}";const s=class{constructor(i){e(this,i);this.value=undefined;this.defaultLabel={};this.labels=[]}render(){var e,i;const t=this.labels.find((e=>e.value===this.value));return[this.renderIcon((e=t===null||t===void 0?void 0:t.icon)!==null&&e!==void 0?e:this.defaultLabel.icon),this.renderLabel((i=t===null||t===void 0?void 0:t.text)!==null&&i!==void 0?i:this.defaultLabel.text)]}renderIcon(e){const t=r(e);if(!t){return}let l;let s;if(typeof e==="object"){l=e.color;s=e.backgroundColor}const n={role:"presentation",name:t,style:{color:l,"background-color":s}};return i("limel-icon",Object.assign({},n))}renderLabel(e=""){return i("label",null,e)}};s.style=l;const n=":host(limel-helper-line){transition:opacity 0.2s ease;box-sizing:border-box;display:grid;min-width:0;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:0.6875rem;line-height:normal;color:rgb(var(--contrast-1200))}div{display:flex;justify-content:space-between;gap:0.75rem;overflow:hidden;padding:0 1rem}:host(limel-helper-line.invalid) .helper-text{color:var(--mdc-theme-error)}.counter{flex-shrink:0;margin-left:auto}.helper-text,.counter{padding-top:0.125rem}:host(limel-helper-line){transition:grid-template-rows var(--limel-h-l-grid-template-rows-transition-speed, 0.46s) cubic-bezier(1, 0.09, 0, 0.89);grid-template-rows:var(--limel-h-l-grid-template-rows, 1fr)}:host(limel-helper-line.hide){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}";const o=class{constructor(t){e(this,t);this.hasContent=()=>!!(this.maxLength>0||this.helperText&&this.helperText.length>0);this.renderHelperText=()=>{if(!this.helperText){return}return i("span",{class:"helper-text",id:this.helperTextId},this.helperText)};this.renderCharacterCounter=()=>{const e=`${this.length} / ${this.maxLength}`;if(!this.maxLength){return}return i("span",{class:"counter"},e)};this.helperText=undefined;this.length=undefined;this.maxLength=undefined;this.invalid=false;this.helperTextId=undefined}render(){return i(t,{tabIndex:-1,class:{invalid:this.invalid},style:!this.hasContent()?{display:"none"}:{},"aria-hidden":!this.hasContent()},i("div",null,this.renderHelperText(),this.renderCharacterCounter()))}};o.style=n;export{s as limel_dynamic_label,o as limel_helper_line};
+//# sourceMappingURL=p-9f8aa8e7.entry.js.map

package/dist/lime-elements/p-9f8aa8e7.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["dynamicLabelCss","DynamicLabel","render","label","this","labels","find","l","value","renderIcon","_a","icon","defaultLabel","renderLabel","_b","text","iconName","getIconName","iconColor","iconBackgroundColor","color","backgroundColor","iconProps","role","name","style","h","Object","assign","helperLineCss","HelperLine","hasContent","maxLength","helperText","length","renderHelperText","class","id","helperTextId","renderCharacterCounter","counter","Host","tabIndex","invalid","display"],"sources":["./src/components/dynamic-label/dynamic-label.scss?tag=limel-dynamic-label&encapsulation=shadow","./src/components/dynamic-label/dynamic-label.tsx","./src/components/helper-line/helper-line.scss?tag=limel-helper-line&encapsulation=shadow","./src/components/helper-line/helper-line.tsx"],"sourcesContent":["* {\n    box-sizing: border-box;\n    min-width: 0;\n}\n\n:host(limel-dynamic-label) {\n    --limel-dynamic-label-min-height: 1.75rem;\n    display: flex;\n    gap: 0.5rem;\n    align-items: flex-start;\n    border-radius: 0.5rem;\n    min-width: 0;\n}\n\nlimel-icon {\n    --limel-icon-svg-margin: 0.125rem;\n    border-radius: 0.25rem;\n    flex-shrink: 0;\n    width: var(--limel-dynamic-label-min-height);\n    color: rgb(\n        var(--contrast-900)\n    ); // The default `false` color. Will be overwritten by `Icon`\n}\n\nlabel {\n    flex-grow: 1;\n    font-size: 0.8125rem; // `13px`, Like Checkbox & Switch\n    line-height: normal;\n    color: var(--mdc-theme-on-surface);\n    padding-top: 0.375rem;\n}\n","import { getIconName } from '../icon/get-icon-props';\nimport { Component, Prop, h } from '@stencil/core';\nimport { Label, LabelValue } from './label.types';\nimport { Icon } from '../../interface';\n\n/**\n * This components displays a different label depending on the current given\n * value. A label can consist of a text and an optional icon. If no matching\n * label is found among the given `labels`, the `defaultLabel` will be displayed.\n *\n * One use case of the component is to enhance the visualization of a `boolean`\n * field like a checkbox or switch in a `readonly` state.\n *\n * The reason we offer this component is that the default styling\n * of the Checkbox or Toggle switch in the `readonly` state may not always\n * provide the best way of _visualizing information_, potentially leading to\n * confusion and negatively affecting the end-users' experience.\n *\n * @exampleComponent limel-example-dynamic-label\n * @exampleComponent limel-example-dynamic-label-readonly-boolean\n * @beta\n */\n@Component({\n    tag: 'limel-dynamic-label',\n    shadow: true,\n    styleUrl: 'dynamic-label.scss',\n})\nexport class DynamicLabel {\n    /**\n     * The current value of the component which is used to match with the given\n     * `labels` to determine what label to display.\n     *\n     * If not matching label is found, the `defaultLabel` is displayed.\n     */\n    @Prop()\n    public value: LabelValue;\n\n    /**\n     * The label to display when no matching value is found in the `labels`\n     * array. This is a fallback label that ensures there's always a label\n     * displayed for the component.\n     */\n    @Prop({ reflect: true })\n    public defaultLabel: Omit<Label, 'value'> = {};\n\n    /**\n     * A list of available labels. Each label has a corresponding value that\n     * will be matched with the current `value` of the component to determine\n     * what label to display.\n     */\n    @Prop()\n    public labels: Label[] = [];\n\n    public render() {\n        const label = this.labels.find((l) => l.value === this.value);\n\n        return [\n            this.renderIcon(label?.icon ?? this.defaultLabel.icon),\n            this.renderLabel(label?.text ?? this.defaultLabel.text),\n        ];\n    }\n\n    private renderIcon(icon?: string | Icon) {\n        const iconName = getIconName(icon);\n        if (!iconName) {\n            return;\n        }\n\n        let iconColor: string | undefined;\n        let iconBackgroundColor: string | undefined;\n\n        if (typeof icon === 'object') {\n            iconColor = icon.color;\n            iconBackgroundColor = icon.backgroundColor;\n        }\n\n        const iconProps = {\n            role: 'presentation',\n            name: iconName,\n            style: {\n                color: iconColor,\n                'background-color': iconBackgroundColor,\n            },\n        };\n\n        return <limel-icon {...iconProps} />;\n    }\n\n    private renderLabel(label: string = '') {\n        return <label>{label}</label>;\n    }\n}\n",":host(limel-helper-line) {\n    transition: opacity 0.2s ease;\n\n    box-sizing: border-box;\n    display: grid;\n\n    min-width: 0; // prevents overflowing, if component is placed in flex containers\n\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-font-smoothing: antialiased;\n    font-size: 0.6875rem;\n    line-height: normal;\n\n    color: rgb(var(--contrast-1200));\n}\n\ndiv {\n    display: flex;\n    justify-content: space-between;\n    gap: 0.75rem;\n    overflow: hidden;\n    padding: 0 1rem;\n}\n\n:host(limel-helper-line.invalid) {\n    .helper-text {\n        color: var(--mdc-theme-error);\n    }\n}\n\n.counter {\n    flex-shrink: 0;\n    margin-left: auto;\n}\n\n.helper-text,\n.counter {\n    padding-top: 0.125rem;\n}\n\n// This animates height of the helper line, from `0` to `auto`.\n// To get this animation effect, the consumer component should\n// add `hide` classed accordingly.\n:host(limel-helper-line) {\n    transition: grid-template-rows\n        var(--limel-h-l-grid-template-rows-transition-speed, 0.46s)\n        cubic-bezier(1, 0.09, 0, 0.89);\n    grid-template-rows: var(--limel-h-l-grid-template-rows, 1fr);\n}\n\n:host(limel-helper-line.hide) {\n    --limel-h-l-grid-template-rows-transition-speed: 0.3s;\n    --limel-h-l-grid-template-rows: 0fr;\n}\n// End: animating height\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n/**\n * This is an internal and private component that many input fields\n * use to display a helper text, along with a character counter below the\n * input field.\n *\n * We created this to keep the visual styles the same everywhere\n * and to avoid importing styles separately.\n *\n * Also this enables us to open the helper line in limel-portal,\n * more easily without having to send the styles to the portal.\n *\n * @exampleComponent limel-example-helper-line\n * @exampleComponent limel-example-helper-line-invalid\n * @exampleComponent limel-example-helper-line-long-text\n * @exampleComponent limel-example-helper-line-long-text-no-counter\n * @exampleComponent limel-example-helper-line-character-counter\n * @exampleComponent limel-example-helper-line-empty\n * @exampleComponent limel-example-helper-line-animation\n * @private\n */\n@Component({\n    tag: 'limel-helper-line',\n    shadow: true,\n    styleUrl: 'helper-line.scss',\n})\nexport class HelperLine {\n    /**\n     * The helper text that is displayed on the left side.\n     */\n    @Prop({ reflect: true })\n    public helperText?: string;\n\n    /**\n     * Length of the current input value, coming from the parent component.\n     * Used in the character counter section on the right side.\n     */\n    @Prop({ reflect: true })\n    public length?: number;\n\n    /**\n     * Maximum length of the characters, defined on the parent component.\n     * Used in the character counter section on the right side.\n     */\n    @Prop({ reflect: true })\n    public maxLength?: number;\n\n    /**\n     * Turns `true`, when the parent component is invalid.\n     * For example, when the parent component is `required` but is left empty.\n     * Or when the input format is invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid?: boolean = false;\n\n    /**\n     * Used by `aria-controls` and `aria-describedby` in the parent component.\n     */\n    @Prop({ reflect: true })\n    public helperTextId?: string;\n\n    public render() {\n        return (\n            <Host\n                tabIndex={-1}\n                class={{\n                    invalid: this.invalid,\n                }}\n                style={!this.hasContent() ? { display: 'none' } : {}}\n                aria-hidden={!this.hasContent()}\n            >\n                <div>\n                    {this.renderHelperText()}\n                    {this.renderCharacterCounter()}\n                </div>\n            </Host>\n        );\n    }\n\n    private hasContent = () => {\n        return !!(\n            this.maxLength > 0 ||\n            (this.helperText && this.helperText.length > 0)\n        );\n    };\n\n    private renderHelperText = () => {\n        if (!this.helperText) {\n            return;\n        }\n\n        return (\n            <span class=\"helper-text\" id={this.helperTextId}>\n                {this.helperText}\n            </span>\n        );\n    };\n\n    private renderCharacterCounter = () => {\n        const counter = `${this.length} / ${this.maxLength}`;\n\n        if (!this.maxLength) {\n            return;\n        }\n\n        return <span class=\"counter\">{counter}</span>;\n    };\n}\n"],"mappings":"sFAAA,MAAMA,EAAkB,sc,MC2BXC,EAAY,M,gEAgBuB,G,YAQnB,E,CAElBC,S,QACH,MAAMC,EAAQC,KAAKC,OAAOC,MAAMC,GAAMA,EAAEC,QAAUJ,KAAKI,QAEvD,MAAO,CACHJ,KAAKK,YAAWC,EAAAP,IAAK,MAALA,SAAK,SAALA,EAAOQ,QAAI,MAAAD,SAAA,EAAAA,EAAIN,KAAKQ,aAAaD,MACjDP,KAAKS,aAAYC,EAAAX,IAAK,MAALA,SAAK,SAALA,EAAOY,QAAI,MAAAD,SAAA,EAAAA,EAAIV,KAAKQ,aAAaG,M,CAIlDN,WAAWE,GACf,MAAMK,EAAWC,EAAYN,GAC7B,IAAKK,EAAU,CACX,M,CAGJ,IAAIE,EACJ,IAAIC,EAEJ,UAAWR,IAAS,SAAU,CAC1BO,EAAYP,EAAKS,MACjBD,EAAsBR,EAAKU,e,CAG/B,MAAMC,EAAY,CACdC,KAAM,eACNC,KAAMR,EACNS,MAAO,CACHL,MAAOF,EACP,mBAAoBC,IAI5B,OAAOO,EAAA,aAAAC,OAAAC,OAAA,GAAgBN,G,CAGnBT,YAAYV,EAAgB,IAChC,OAAOuB,EAAA,aAAQvB,E,aCzFvB,MAAM0B,EAAgB,gzB,MC2BTC,EAAU,M,yBAqDX1B,KAAA2B,WAAa,OAEb3B,KAAK4B,UAAY,GAChB5B,KAAK6B,YAAc7B,KAAK6B,WAAWC,OAAS,GAI7C9B,KAAA+B,iBAAmB,KACvB,IAAK/B,KAAK6B,WAAY,CAClB,M,CAGJ,OACIP,EAAA,QAAMU,MAAM,cAAcC,GAAIjC,KAAKkC,cAC9BlC,KAAK6B,WACH,EAIP7B,KAAAmC,uBAAyB,KAC7B,MAAMC,EAAU,GAAGpC,KAAK8B,YAAY9B,KAAK4B,YAEzC,IAAK5B,KAAK4B,UAAW,CACjB,M,CAGJ,OAAON,EAAA,QAAMU,MAAM,WAAWI,EAAe,E,sFApDtB,M,4BAQpBtC,SACH,OACIwB,EAACe,EAAI,CACDC,UAAW,EACXN,MAAO,CACHO,QAASvC,KAAKuC,SAElBlB,OAAQrB,KAAK2B,aAAe,CAAEa,QAAS,QAAW,GAAE,eACtCxC,KAAK2B,cAEnBL,EAAA,WACKtB,KAAK+B,mBACL/B,KAAKmC,0B"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["actionBarItemCss","ActionBarButton","constructor","hostRef","this","handleClick","event","stopPropagation","select","emit","item","tooltipId","createRandomString","componentWillLoad","makeEnterClickable","host","componentDidLoad","triggerIconColorWarning","disconnectedCallback","removeEnterClickable","render","isItem","separator","h","role","id","type","onClick","disabled","isDisabled","class","selected","renderIcon","renderLabel","renderTooltip","isVisible","icon","name","getIconName","color","getIconColor","iconColor","style","iconOnly","text","elementId","label","helperLabel","commandText","console","warn","ActionBarOverflowMenu","countOverflowedItems","numberOfMenuItems","handleSelect","detail","openDirection","items","onSelect","slot","filter","isMenuItem","length"],"sources":["./src/components/action-bar/action-bar-item/action-bar-item.scss?tag=limel-action-bar-item","./src/components/action-bar/action-bar-item/action-bar-item.tsx","./src/components/action-bar/action-bar-item/action-bar-overflow-menu.tsx"],"sourcesContent":["@use '../../../style/mixins';\n@use '../../../style/functions';\n\nlimel-action-bar-item {\n    transition: opacity 0.2s ease-in-out;\n    position: relative;\n    display: flex;\n    align-items: center;\n\n    &:not([is-visible]) {\n        opacity: 0;\n        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    &.is-selected {\n        &:not(:hover) {\n            box-shadow: var(--button-shadow-inset);\n        }\n        color: var(--mdc-theme-primary) !important;\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 } from '../../action-bar/action-bar.types';\nimport { ListSeparator } from '../../list/list-item.types';\nimport { createRandomString } from '../../../util/random-string';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../../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     * @public\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    /**\n     * When the item is selected, this will be `true`.\n     */\n    @Prop({ reflect: true })\n    public selected: boolean = false;\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                class={{\n                    'is-selected': this.isItem(this.item) && this.item.selected,\n                }}\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 { ActionBarItem } from '../../action-bar/action-bar.types';\nimport { ListSeparator } from '../../list/list-item.types';\nimport { MenuItem, OpenDirection } from '../../menu/menu.types';\nimport { LimelMenuCustomEvent } from '../../../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    /**\n     * Fired when an item in the action bar overflow menu has been clicked.\n     * @public\n     */\n    @Event()\n    public select: EventEmitter<ActionBarItem>;\n\n    public render() {\n        return [\n            <limel-menu\n                openDirection={this.openDirection}\n                items={this.items}\n                onSelect={this.handleSelect}\n            >\n                <button slot=\"trigger\">{this.countOverflowedItems()}</button>\n            </limel-menu>,\n        ];\n    }\n\n    private countOverflowedItems = () => {\n        return `+${this.numberOfMenuItems}`;\n    };\n\n    private handleSelect = (event: LimelMenuCustomEvent<MenuItem>) => {\n        event.stopPropagation();\n        this.select.emit(event.detail);\n    };\n\n    private get numberOfMenuItems() {\n        return this.items.filter((item) => this.isMenuItem(item)).length;\n    }\n\n    private isMenuItem(item: MenuItem | ListSeparator): item is MenuItem {\n        return !('separator' in item);\n    }\n}\n"],"mappings":"mLAAA,MAAMA,EAAmB,y9F,MCyBZC,EAAe,MAmCxBC,YAAAC,G,yCAsCQC,KAAAC,YAAeC,IACnBA,EAAMC,kBACNH,KAAKI,OAAOC,KAAKL,KAAKM,KAAK,E,mCAxDH,K,cAMD,MAWvBN,KAAKO,UAAYC,G,CAGdC,oBACHC,EAAmBV,KAAKW,K,CAGrBC,mBACHZ,KAAKa,yB,CAGFC,uBACHC,EAAqBf,KAAKW,K,CAGvBK,SACH,IAAKhB,KAAKiB,OAAOjB,KAAKM,OAASN,KAAKM,KAAKY,UAAW,CAChD,OAAOC,EAAA,OAAKC,KAAK,a,CAGrB,OACID,EAAA,UACIE,GAAIrB,KAAKO,UACTe,KAAK,SACLC,QAASvB,KAAKC,YACduB,SAAUxB,KAAKyB,aACfC,MAAO,CACH,cAAe1B,KAAKiB,OAAOjB,KAAKM,OAASN,KAAKM,KAAKqB,WAGtD3B,KAAK4B,aACL5B,KAAK6B,cACL7B,KAAK8B,gB,CAUVb,OAAOX,GACX,QAAS,cAAeA,E,CAGpBmB,aACJ,GAAIzB,KAAKiB,OAAOjB,KAAKM,OAASN,KAAKM,KAAKkB,SAAU,CAC9C,OAAO,I,CAGX,IAAKxB,KAAK+B,UAAW,CACjB,OAAO,I,EAIPH,aACJ,GAAI5B,KAAKiB,OAAOjB,KAAKM,QAAUN,KAAKM,KAAK0B,KAAM,CAC3C,M,CAGJ,GAAI,SAAUhC,KAAKM,KAAM,CACrB,MAAM2B,EAAOC,EAAYlC,KAAKM,KAAK0B,MACnC,MAAMG,EAAQC,EAAapC,KAAKM,KAAK0B,KAAMhC,KAAKM,KAAK+B,WAErD,OACIlB,EAAA,cACIc,KAAMA,EACNK,MAAO,CACH,+BAAgC,GAAGH,M,EAO/CN,cACJ,IAAK7B,KAAKiB,OAAOjB,KAAKM,OAASN,KAAKM,KAAKiC,SAAU,CAC/C,M,CAGJ,OAAOpB,EAAA,QAAMO,MAAM,QAAQ1B,KAAKM,KAAKkC,K,CAGjCV,gBACJ,IAAK9B,KAAKiB,OAAOjB,KAAKM,MAAO,CACzB,M,CAGJ,GAAIN,KAAKM,KAAKkC,KAAM,CAChB,OACIrB,EAAA,iBACIsB,UAAWzC,KAAKO,UAChBmC,MAAO1C,KAAKM,KAAKkC,KACjBG,YAAa3C,KAAKM,KAAKsC,a,CAKnC,GAAI5C,KAAKM,KAAKsC,YAAa,CACvB,OACIzB,EAAA,iBACIsB,UAAWzC,KAAKO,UAChBmC,MAAO1C,KAAKM,KAAKsC,a,EAMzB/B,0BACJ,GAAIb,KAAKiB,OAAOjB,KAAKM,OAASN,KAAKM,KAAK+B,UAAW,CAE/CQ,QAAQC,KACJ,uK,8CCjKHC,EAAqB,M,wDAoCtB/C,KAAAgD,qBAAuB,IACpB,IAAIhD,KAAKiD,oBAGZjD,KAAAkD,aAAgBhD,IACpBA,EAAMC,kBACNH,KAAKI,OAAOC,KAAKH,EAAMiD,OAAO,E,wCA3BI,Y,CAS/BnC,SACH,MAAO,CACHG,EAAA,cACIiC,cAAepD,KAAKoD,cACpBC,MAAOrD,KAAKqD,MACZC,SAAUtD,KAAKkD,cAEf/B,EAAA,UAAQoC,KAAK,WAAWvD,KAAKgD,yB,CAc7BC,wBACR,OAAOjD,KAAKqD,MAAMG,QAAQlD,GAASN,KAAKyD,WAAWnD,KAAOoD,M,CAGtDD,WAAWnD,GACf,QAAS,cAAeA,E"}

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

@@ -0,0 +1,75 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { Image } from '../../global/shared-types/image.types';
+import { Icon } from '../../global/shared-types/icon.types';
+import { ListSeparator } from '../../global/shared-types/separator.types';
+import { ActionBarItem } from '../action-bar/action-bar.types';
+/**
+ * Card is a component that displays content about a single topic,
+ * in a structured way. It can contain a header, and some supporting media such
+ * as an image or an icon, a body of text, or optional actions.
+ *
+ * @exampleComponent limel-example-card-basic
+ * @exampleComponent limel-example-card-image
+ * @exampleComponent limel-example-card-actions
+ * @exampleComponent limel-example-card-clickable
+ * @exampleComponent limel-example-card-orientation
+ * @exampleComponent limel-example-card-slot
+ * @exampleComponent limel-example-card-styling
+ * @beta
+ */
+export declare class Card {
+  /**
+   * Heading of the card,
+   * to provide a short title about the context.
+   */
+  heading?: string;
+  /**
+   * Subheading of the card
+   * to provide a short description of the context.
+   */
+  subheading?: string;
+  /**
+   * A hero image to display in the card,
+   * to enrich the content with visual information.
+   */
+  image?: Image;
+  /**
+   * An icon, to display along with the heading and subheading.
+   */
+  icon?: string | Icon;
+  /**
+   * The content of the card.
+   * Supports markdown, to provide a rich text experience.
+   */
+  value?: string;
+  /**
+   * Actions to display in the card,
+   * to provide the user with options to interact with the content.
+   */
+  actions?: Array<ActionBarItem | ListSeparator>;
+  /**
+   * When true, improve the accessibility of the component and hints the user
+   * that the card can be interacted width.
+   */
+  clickable: boolean;
+  /**
+   * The orientation of the card,
+   * specially useful when the card has an image.
+   */
+  orientation: 'landscape' | 'portrait';
+  /**
+   * Fired when a action bar item has been clicked.
+   */
+  actionSelected: EventEmitter<ActionBarItem>;
+  render(): any;
+  private renderImage;
+  private renderHeader;
+  private renderIcon;
+  private renderHeading;
+  private renderSubheading;
+  private renderSlot;
+  private renderValue;
+  private handleActionSelect;
+  private renderActionBar;
+}
+//# sourceMappingURL=card.d.ts.map

package/dist/types/components.d.ts

@@ -12,10 +12,11 @@ import { BreadcrumbsItem } from "./components/breadcrumbs/breadcrumbs.types";
 import { Button } from "./components/button/button.types";
 import { CalloutType } from "./components/callout/callout.types";
 import { DateType, Languages } from "./components/date-picker/date.types";
+import { Image } from "./global/shared-types/image.types";
+import { Icon } from "./global/shared-types/icon.types";
+import { ListSeparator as ListSeparator1 } from "./global/shared-types/separator.types";
 import { ChartItem } from "./components/chart/chart.types";
 import { Label, LabelValue } from "./components/dynamic-label/label.types";
-import { Icon } from "./global/shared-types/icon.types";
-import { Image } from "./global/shared-types/image.types";
 import { Link } from "./global/shared-types/link.types";
 import { Chip, ChipType } from "./components/chip-set/chip.types";
 import { MenuItem as MenuItem1 } from "./components";
@@ -54,10 +55,11 @@ export { BreadcrumbsItem } from "./components/breadcrumbs/breadcrumbs.types";
 export { Button } from "./components/button/button.types";
 export { CalloutType } from "./components/callout/callout.types";
 export { DateType, Languages } from "./components/date-picker/date.types";
+export { Image } from "./global/shared-types/image.types";
+export { Icon } from "./global/shared-types/icon.types";
+export { ListSeparator as ListSeparator1 } from "./global/shared-types/separator.types";
 export { ChartItem } from "./components/chart/chart.types";
 export { Label, LabelValue } from "./components/dynamic-label/label.types";
-export { Icon } from "./global/shared-types/icon.types";
-export { Image } from "./global/shared-types/image.types";
 export { Link } from "./global/shared-types/link.types";
 export { Chip, ChipType } from "./components/chip-set/chip.types";
 export { MenuItem as MenuItem1 } from "./components";
@@ -351,6 +353,53 @@ export namespace Components {
          */
         "type"?: CalloutType;
     }
+    /**
+     * Card is a component that displays content about a single topic,
+     * in a structured way. It can contain a header, and some supporting media such
+     * as an image or an icon, a body of text, or optional actions.
+     * @exampleComponent limel-example-card-basic
+     * @exampleComponent limel-example-card-image
+     * @exampleComponent limel-example-card-actions
+     * @exampleComponent limel-example-card-clickable
+     * @exampleComponent limel-example-card-orientation
+     * @exampleComponent limel-example-card-slot
+     * @exampleComponent limel-example-card-styling
+     * @beta 
+     */
+    interface LimelCard {
+        /**
+          * Actions to display in the card, to provide the user with options to interact with the content.
+         */
+        "actions"?: Array<ActionBarItem | ListSeparator1>;
+        /**
+          * When true, improve the accessibility of the component and hints the user that the card can be interacted width.
+         */
+        "clickable": boolean;
+        /**
+          * Heading of the card, to provide a short title about the context.
+         */
+        "heading"?: string;
+        /**
+          * An icon, to display along with the heading and subheading.
+         */
+        "icon"?: string | Icon;
+        /**
+          * A hero image to display in the card, to enrich the content with visual information.
+         */
+        "image"?: Image;
+        /**
+          * The orientation of the card, specially useful when the card has an image.
+         */
+        "orientation": 'landscape' | 'portrait';
+        /**
+          * Subheading of the card to provide a short description of the context.
+         */
+        "subheading"?: string;
+        /**
+          * The content of the card. Supports markdown, to provide a rich text experience.
+         */
+        "value"?: string;
+    }
     /**
      * A chart is a graphical representation of data, in which
      * visual symbols such as such bars, dots, lines, or slices, represent
@@ -2836,6 +2885,10 @@ export interface LimelButtonGroupCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLLimelButtonGroupElement;
 }
+export interface LimelCardCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLimelCardElement;
+}
 export interface LimelCheckboxCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLLimelCheckboxElement;
@@ -3166,6 +3219,25 @@ declare global {
         prototype: HTMLLimelCalloutElement;
         new (): HTMLLimelCalloutElement;
     };
+    /**
+     * Card is a component that displays content about a single topic,
+     * in a structured way. It can contain a header, and some supporting media such
+     * as an image or an icon, a body of text, or optional actions.
+     * @exampleComponent limel-example-card-basic
+     * @exampleComponent limel-example-card-image
+     * @exampleComponent limel-example-card-actions
+     * @exampleComponent limel-example-card-clickable
+     * @exampleComponent limel-example-card-orientation
+     * @exampleComponent limel-example-card-slot
+     * @exampleComponent limel-example-card-styling
+     * @beta 
+     */
+    interface HTMLLimelCardElement extends Components.LimelCard, HTMLStencilElement {
+    }
+    var HTMLLimelCardElement: {
+        prototype: HTMLLimelCardElement;
+        new (): HTMLLimelCardElement;
+    };
     /**
      * A chart is a graphical representation of data, in which
      * visual symbols such as such bars, dots, lines, or slices, represent
@@ -4393,6 +4465,7 @@ declare global {
         "limel-button": HTMLLimelButtonElement;
         "limel-button-group": HTMLLimelButtonGroupElement;
         "limel-callout": HTMLLimelCalloutElement;
+        "limel-card": HTMLLimelCardElement;
         "limel-chart": HTMLLimelChartElement;
         "limel-checkbox": HTMLLimelCheckboxElement;
         "limel-chip": HTMLLimelChipElement;
@@ -4730,6 +4803,57 @@ declare namespace LocalJSX {
          */
         "type"?: CalloutType;
     }
+    /**
+     * Card is a component that displays content about a single topic,
+     * in a structured way. It can contain a header, and some supporting media such
+     * as an image or an icon, a body of text, or optional actions.
+     * @exampleComponent limel-example-card-basic
+     * @exampleComponent limel-example-card-image
+     * @exampleComponent limel-example-card-actions
+     * @exampleComponent limel-example-card-clickable
+     * @exampleComponent limel-example-card-orientation
+     * @exampleComponent limel-example-card-slot
+     * @exampleComponent limel-example-card-styling
+     * @beta 
+     */
+    interface LimelCard {
+        /**
+          * Actions to display in the card, to provide the user with options to interact with the content.
+         */
+        "actions"?: Array<ActionBarItem | ListSeparator1>;
+        /**
+          * When true, improve the accessibility of the component and hints the user that the card can be interacted width.
+         */
+        "clickable"?: boolean;
+        /**
+          * Heading of the card, to provide a short title about the context.
+         */
+        "heading"?: string;
+        /**
+          * An icon, to display along with the heading and subheading.
+         */
+        "icon"?: string | Icon;
+        /**
+          * A hero image to display in the card, to enrich the content with visual information.
+         */
+        "image"?: Image;
+        /**
+          * Fired when a action bar item has been clicked.
+         */
+        "onActionSelected"?: (event: LimelCardCustomEvent<ActionBarItem>) => void;
+        /**
+          * The orientation of the card, specially useful when the card has an image.
+         */
+        "orientation"?: 'landscape' | 'portrait';
+        /**
+          * Subheading of the card to provide a short description of the context.
+         */
+        "subheading"?: string;
+        /**
+          * The content of the card. Supports markdown, to provide a rich text experience.
+         */
+        "value"?: string;
+    }
     /**
      * A chart is a graphical representation of data, in which
      * visual symbols such as such bars, dots, lines, or slices, represent
@@ -7466,6 +7590,7 @@ declare namespace LocalJSX {
         "limel-button": LimelButton;
         "limel-button-group": LimelButtonGroup;
         "limel-callout": LimelCallout;
+        "limel-card": LimelCard;
         "limel-chart": LimelChart;
         "limel-checkbox": LimelCheckbox;
         "limel-chip": LimelChip;
@@ -7666,6 +7791,20 @@ declare module "@stencil/core" {
              * @exampleComponent limel-example-callout-composite
              */
             "limel-callout": LocalJSX.LimelCallout & JSXBase.HTMLAttributes<HTMLLimelCalloutElement>;
+            /**
+             * Card is a component that displays content about a single topic,
+             * in a structured way. It can contain a header, and some supporting media such
+             * as an image or an icon, a body of text, or optional actions.
+             * @exampleComponent limel-example-card-basic
+             * @exampleComponent limel-example-card-image
+             * @exampleComponent limel-example-card-actions
+             * @exampleComponent limel-example-card-clickable
+             * @exampleComponent limel-example-card-orientation
+             * @exampleComponent limel-example-card-slot
+             * @exampleComponent limel-example-card-styling
+             * @beta 
+             */
+            "limel-card": LocalJSX.LimelCard & JSXBase.HTMLAttributes<HTMLLimelCardElement>;
             /**
              * A chart is a graphical representation of data, in which
              * visual symbols such as such bars, dots, lines, or slices, represent

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "37.68.0",
+  "version": "37.69.0",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",