@limetech/lime-elements 37.57.3 → 37.57.5

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d1052409.js');
 
-const dockCss = "@charset \"UTF-8\";:host(limel-dock){--badge-background-color:rgb(var(--color-red-default));--badge-text-color:rgb(var(--color-white));--dock-item-height:2.75rem;--dock-padding:0.25rem;--dock-expand-shrink-button-height:1rem;--limel-dock-item-text-color:var(\n      --dock-item-text-color,\n      rgb(var(--contrast-1100))\n  );--limel-dock-item-text-color--selected:var(\n      --dock-item-text-color--selected,\n      rgb(var(--contrast-1300))\n  );isolation:isolate;position:relative;display:inline-flex;flex-direction:column;background-color:var(--dock-background-color, rgb(var(--contrast-100)));box-shadow:var(--shadow-depth-8);padding-top:var(--dock-padding-top);padding-right:var(--dock-padding-right);padding-bottom:var(--dock-padding-bottom);padding-left:var(--dock-padding-left)}:host(limel-dock:not(.has-mobile-layout)){height:100%;width:calc(var(--dock-padding) * 2 + var(--dock-item-height))}:host(limel-dock.expanded){width:var(--dock-expanded-max-width, max-content)}.footer-separator{margin-top:auto;justify-self:flex-end}nav{box-sizing:border-box;display:inline-flex;flex-direction:column;gap:0.375rem;flex-grow:1;padding:var(--dock-padding);overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}nav::-webkit-scrollbar{display:none}:host(limel-dock.has-mobile-layout) nav{justify-content:space-between;flex-direction:row}limel-dock-button:first-of-type{--limel-custom-home-icon-enabler:var(--crm-custom-home-icon-enabler);--limel-custom-home-icon:var(--crm-custom-home-icon)}.expand-shrink{all:unset;box-sizing:border-box;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:transparent;display:flex;justify-content:center;align-items:center;height:var(--dock-expand-shrink-button-height);padding:0 0.5rem;margin:var(--dock-padding);border-radius:0.375rem}.expand-shrink:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.expand-shrink:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.expand-shrink:focus{outline:none}.expand-shrink:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.expand-shrink.expanded{justify-content:flex-end}.expand-shrink.expanded limel-icon{transform:rotateY(180deg)}.expand-shrink limel-icon{width:calc(var(--dock-expand-shrink-button-height) - 0.25rem);color:var(--dock-item-icon-color, var(--limel-dock-item-text-color))}";
+const dockCss = "@charset \"UTF-8\";:host(limel-dock){--badge-background-color:rgb(var(--color-red-default));--badge-text-color:rgb(var(--color-white));--dock-item-height:2.75rem;--limel-dock-padding:0.25rem;--dock-expand-shrink-button-height:1rem;--limel-dock-item-text-color:var(\n      --dock-item-text-color,\n      rgb(var(--contrast-1100))\n  );--limel-dock-item-text-color--selected:var(\n      --dock-item-text-color--selected,\n      rgb(var(--contrast-1300))\n  );isolation:isolate;position:relative;display:inline-flex;flex-direction:column;background-color:var(--dock-background-color, rgb(var(--contrast-100)));box-shadow:var(--shadow-depth-8);padding-top:var(--dock-padding-top);padding-right:var(--dock-padding-right);padding-bottom:var(--dock-padding-bottom);padding-left:var(--dock-padding-left)}:host(limel-dock:not(.has-mobile-layout)){height:100%;width:calc(var(--limel-dock-padding) * 2 + var(--dock-item-height))}:host(limel-dock:not(.has-mobile-layout)) nav{padding-bottom:calc(var(--limel-dock-padding) + 0.25rem)}:host(limel-dock.expanded){width:var(--dock-expanded-max-width, max-content)}.footer-separator{margin-top:auto;justify-self:flex-end}nav{box-sizing:border-box;display:inline-flex;flex-direction:column;gap:0.375rem;flex-grow:1;padding:var(--limel-dock-padding);overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}nav::-webkit-scrollbar{display:none}:host(limel-dock.has-mobile-layout) nav{justify-content:space-between;flex-direction:row}limel-dock-button:first-of-type{--limel-custom-home-icon-enabler:var(--crm-custom-home-icon-enabler);--limel-custom-home-icon:var(--crm-custom-home-icon)}.expand-shrink{all:unset;box-sizing:border-box;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:transparent;display:flex;justify-content:center;align-items:center;height:var(--dock-expand-shrink-button-height);padding:0 0.5rem;margin:var(--limel-dock-padding);border-radius:0.375rem}.expand-shrink:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.expand-shrink:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.expand-shrink:focus{outline:none}.expand-shrink:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.expand-shrink.expanded{justify-content:flex-end}.expand-shrink.expanded limel-icon{transform:rotateY(180deg)}.expand-shrink limel-icon{width:calc(var(--dock-expand-shrink-button-height) - 0.25rem);color:var(--dock-item-icon-color, var(--limel-dock-item-text-color))}";
 
 const DEFAULT_MOBILE_BREAKPOINT = 700;
 const Dock = class {

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

@@ -1 +1 @@
-{"file":"limel-dock.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,OAAO,GAAG,2+EAA2+E;;ACW3/E,MAAM,yBAAyB,GAAG,GAAG,CAAC;MAezB,IAAI;;;;;;;IAmHL,oBAAe,GAAG;MACtB,OAAO,IAAI,CAAC,eAAe,GAAG,IAAI,GAAGA,kBAAM,KAAK,EAAC,kBAAkB,GAAG,CAAC;KAC1E,CAAC;IAEM,mBAAc,GAAG,CAAC,IAAc;MACpC,QACIA,+BACI,KAAK,EAAE;UACH,WAAW,EAAE,IAAI;UACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SAC1B,EACD,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,eAAe,EAChD,eAAe,EAAE,IAAI,CAAC,eAAe,GACvC,EACJ;KACL,CAAC;IAEM,iBAAY,GAAG;MACnB,IAAI,MAAM,CAAC,UAAU,IAAI,IAAI,CAAC,gBAAgB,EAAE;QAC5C,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;OAC/B;WAAM;QACH,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;OAChC;KACJ,CAAC;IAoBM,oBAAe,GAAG;MACtB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;MAC/B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACzC,CAAC;qBA7J6B,EAAE;2BAOK,EAAE;;oBAqBrB,KAAK;uBAUF,IAAI;4BASS,yBAAyB;2BA+BlC,KAAK;;EAIxB,gBAAgB;IACnB,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC5D,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;GAC9C;EAED,oBAAoB;IAChB,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;GACpC;EAEM,MAAM;IACT,QACIA,QAACC,UAAI,IACD,KAAK,EAAE;QACH,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,mBAAmB,EAAE,IAAI,CAAC,eAAe;OAC5C,IAEDD,+BAAiB,IAAI,CAAC,eAAe,IAChC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,EACvC,IAAI,CAAC,eAAe,EAAE,EACtB,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,CAC5C,EACL,IAAI,CAAC,wBAAwB,EAAE,CAC7B,EACT;GACL;EA4BO,wBAAwB;IAC5B,IAAI,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;MAC3C,OAAO;KACV;IAED,QACIA,oBACI,KAAK,EAAE;QACH,eAAe,EAAE,IAAI;QACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;OAC1B,EACD,OAAO,EAAE,IAAI,CAAC,eAAe,IAE7BA,wBAAY,IAAI,EAAC,aAAa,GAAG,CAC5B,EACX;GACL;;;;;;","names":["h","Host"],"sources":["./src/components/dock/dock.scss?tag=limel-dock&encapsulation=shadow","./src/components/dock/dock.tsx"],"sourcesContent":["@use '../../style/mixins';\n@use '../../style/functions';\n@use '../../style/internal/variables';\n\n/**\n* @prop --dock-expanded-max-width: The maximum width of the Dock when it is expanded. Defaults to `max-content` which means the Dock will adjust its width to the widest dock item.\n* @prop --dock-background-color: Background color of the whole component, defaults to `--contrast-100`.\n* @prop --dock-item-background-color--selected: Background color of selected dock item, defaults to `--contrast-200`.\n* @prop --dock-item-text-color: Text of dock items, defaults to `--contrast-1100`.\n* @prop --dock-item-text-color--selected: Text color of selected dock item, defaults to `--contrast-1300`.\n* @prop --dock-item-icon-color: Color of the optional icons used in each dock item. Only affects inactive dock items, defaults to text colors for default or selected states.\n* @prop --dock-padding-top: Space of top side of the Dock. Can be used with environment variables, to take into account safe areas on mobile devices with rounded screen corners or those that have a \"notch\". For instance can be set to `env(safe-area-inset-top)`.\n* @prop --dock-padding-right: Space of the right side of the Dock. Can be used with environment variables, to take into account safe areas on mobile devices with rounded screen corners or those that have a \"notch\". For instance can be set to `env(safe-area-inset-right)`.\n* @prop --dock-padding-bottom: Space of the bottom side of the Dock. Can be used with environment variables, to take into account safe areas on mobile devices with rounded screen corners or those that have a \"notch\". For instance can be set to `env(safe-area-inset-bottom)`.\n* @prop --dock-padding-left: Space of the left side of the Dock. Can be used with environment variables, to take into account safe areas on mobile devices with rounded screen corners or those that have a \"notch\". For instance can be set to `env(safe-area-inset-left)`.\n* @prop --popover-surface-width: Defines the width of the popover that is opened for dock items with custom components. Defaults to `auto`.\n*/\n\n:host(limel-dock) {\n    --badge-background-color: rgb(var(--color-red-default));\n    --badge-text-color: rgb(var(--color-white));\n\n    --dock-item-height: 2.75rem;\n    --dock-padding: 0.25rem;\n    --dock-expand-shrink-button-height: 1rem;\n\n    --limel-dock-item-text-color: var(\n        --dock-item-text-color,\n        rgb(var(--contrast-1100))\n    );\n    --limel-dock-item-text-color--selected: var(\n        --dock-item-text-color--selected,\n        rgb(var(--contrast-1300))\n    );\n\n    isolation: isolate;\n    position: relative;\n\n    display: inline-flex;\n    flex-direction: column;\n\n    background-color: var(--dock-background-color, rgb(var(--contrast-100)));\n    box-shadow: var(--shadow-depth-8);\n\n    padding-top: var(--dock-padding-top);\n    padding-right: var(--dock-padding-right);\n    padding-bottom: var(--dock-padding-bottom);\n    padding-left: var(--dock-padding-left);\n}\n\n:host(limel-dock:not(.has-mobile-layout)) {\n    height: 100%;\n    width: calc((var(--dock-padding) * 2) + var(--dock-item-height));\n}\n\n:host(limel-dock.expanded) {\n    width: var(--dock-expanded-max-width, max-content);\n}\n\n.footer-separator {\n    margin-top: auto;\n    justify-self: flex-end;\n}\n\nnav {\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-direction: column;\n    gap: functions.pxToRem(6);\n    flex-grow: 1;\n\n    padding: var(--dock-padding); // needed for the focus effect\n\n    overflow-y: 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    :host(limel-dock.has-mobile-layout) & {\n        justify-content: space-between;\n        flex-direction: row;\n    }\n}\n\n// 👇 Below is a hidden and private prop\n// only for usage in Lime CRM components.\n// It enables our customers to override\n// the default Home icon, using an external URL\n// or an SVG code.\nlimel-dock-button {\n    &:first-of-type {\n        // `--crm-custom-home-icon-enabler`: in the CRM must be set to `''`\n        --limel-custom-home-icon-enabler: var(--crm-custom-home-icon-enabler);\n        // `--crm-custom-home-icon` in the CRM must be set to a url to an image file, or an SVG code\n        --limel-custom-home-icon: var(--crm-custom-home-icon);\n    }\n}\n\n@import './partial-styles/shrink-expand-button';\n","import {\n    Component,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n    State,\n} from '@stencil/core';\nimport { DockItem } from './dock.types';\n\nconst DEFAULT_MOBILE_BREAKPOINT = 700;\n\n/**\n * @exampleComponent limel-example-dock-basic\n * @exampleComponent limel-example-dock-custom-component\n * @exampleComponent limel-example-dock-notification\n * @exampleComponent limel-example-dock-mobile\n * @exampleComponent limel-example-dock-expanded\n * @exampleComponent limel-example-dock-colors-css\n */\n@Component({\n    tag: 'limel-dock',\n    shadow: true,\n    styleUrl: 'dock.scss',\n})\nexport class Dock {\n    /**\n     * Items that are placed in the dock.\n     */\n    @Prop()\n    public dockItems: DockItem[] = [];\n\n    /**\n     * Items that are placed at the bottom of the dock. (Or at the end in mobile\n     * layout.)\n     */\n    @Prop()\n    public dockFooterItems?: DockItem[] = [];\n\n    /**\n     * A label used to describe the purpose of the navigation element to users\n     * of assistive technologies, like screen readers. Especially useful when\n     * there are multiple navigation elements in the user interface.\n     * Example value: \"Primary navigation\"\n     */\n    @Prop({ reflect: true })\n    public accessibleLabel?: string;\n\n    /**\n     * Defines the width of the component, when it loads.\n     * - `true`: shows both icons and labels of the Dock items.\n     * - `false`: only shows icons of the doc items, and displays\n     * their labels as tooltip.\n     *\n     * Note: when `useMobileLayout` is `true`, labels will always\n     * be shown as tooltips. Read more below…\n     */\n    @Prop({ reflect: true })\n    public expanded? = false;\n\n    /**\n     * Set to `false` if you do not want to allow end-users\n     * to exapnd or shrink the Dock. This will hide the\n     * expand/shrink button, and the only things that defines\n     * the layout will be the `expanded` property, and\n     * the `mobileBreakPoint`.\n     */\n    @Prop({ reflect: true })\n    public allowResize? = true;\n\n    /**\n     * Defines the breakpoint in pixles, at which the component will be rendered\n     * in a hoizontal layout. Default breakpoint is `700` pixels, which means\n     * when the screen size is smaller than `700px`, the component will automatically\n     * switch to a horizontal layout.\n     */\n    @Prop({ reflect: true })\n    public mobileBreakPoint?: number = DEFAULT_MOBILE_BREAKPOINT;\n\n    /**\n     * Fired when a dock item has been selected from the dock.\n     */\n    @Event()\n    public itemSelected: EventEmitter<DockItem>;\n\n    /**\n     * Fired when a dock menu is opened.\n     */\n    @Event()\n    public menuOpen: EventEmitter<DockItem>;\n\n    /**\n     * Fired when the popover is closed.\n     */\n    @Event()\n    public close: EventEmitter<void>;\n\n    /**\n     * Fired when a Dock is expanded or collapsed.\n     */\n    @Event()\n    private dockExpanded: EventEmitter<boolean>;\n\n    /**\n     * Is used to render the component horizontally, and place\n     * the Dock items in a row.\n     */\n    @State()\n    private useMobileLayout = false;\n\n    private resizeObserver: ResizeObserver;\n\n    public componentDidLoad() {\n        this.resizeObserver = new ResizeObserver(this.handleResize);\n        this.resizeObserver.observe(document.body);\n    }\n\n    disconnectedCallback() {\n        this.resizeObserver.disconnect();\n    }\n\n    public render() {\n        return (\n            <Host\n                class={{\n                    dock: true,\n                    expanded: this.expanded,\n                    'has-mobile-layout': this.useMobileLayout,\n                }}\n            >\n                <nav aria-label={this.accessibleLabel}>\n                    {this.dockItems.map(this.renderDockItem)}\n                    {this.renderSeparator()}\n                    {this.dockFooterItems.map(this.renderDockItem)}\n                </nav>\n                {this.renderExpandShrinkToggle()}\n            </Host>\n        );\n    }\n\n    private renderSeparator = () => {\n        return this.useMobileLayout ? null : <span class=\"footer-separator\" />;\n    };\n\n    private renderDockItem = (item: DockItem) => {\n        return (\n            <limel-dock-button\n                class={{\n                    'dock-item': true,\n                    selected: item.selected,\n                }}\n                item={item}\n                expanded={this.expanded && !this.useMobileLayout}\n                useMobileLayout={this.useMobileLayout}\n            />\n        );\n    };\n\n    private handleResize = () => {\n        if (window.innerWidth <= this.mobileBreakPoint) {\n            this.useMobileLayout = true;\n        } else {\n            this.useMobileLayout = false;\n        }\n    };\n\n    private renderExpandShrinkToggle() {\n        if (this.useMobileLayout || !this.allowResize) {\n            return;\n        }\n\n        return (\n            <button\n                class={{\n                    'expand-shrink': true,\n                    expanded: this.expanded,\n                }}\n                onClick={this.toggleDockWidth}\n            >\n                <limel-icon name=\"angle_right\" />\n            </button>\n        );\n    }\n\n    private toggleDockWidth = () => {\n        this.expanded = !this.expanded;\n        this.dockExpanded.emit(this.expanded);\n    };\n}\n"],"version":3}
+{"file":"limel-dock.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,OAAO,GAAG,0mFAA0mF;;ACW1nF,MAAM,yBAAyB,GAAG,GAAG,CAAC;MAezB,IAAI;;;;;;;IAmHL,oBAAe,GAAG;MACtB,OAAO,IAAI,CAAC,eAAe,GAAG,IAAI,GAAGA,kBAAM,KAAK,EAAC,kBAAkB,GAAG,CAAC;KAC1E,CAAC;IAEM,mBAAc,GAAG,CAAC,IAAc;MACpC,QACIA,+BACI,KAAK,EAAE;UACH,WAAW,EAAE,IAAI;UACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SAC1B,EACD,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,eAAe,EAChD,eAAe,EAAE,IAAI,CAAC,eAAe,GACvC,EACJ;KACL,CAAC;IAEM,iBAAY,GAAG;MACnB,IAAI,MAAM,CAAC,UAAU,IAAI,IAAI,CAAC,gBAAgB,EAAE;QAC5C,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;OAC/B;WAAM;QACH,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;OAChC;KACJ,CAAC;IAoBM,oBAAe,GAAG;MACtB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;MAC/B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACzC,CAAC;qBA7J6B,EAAE;2BAOK,EAAE;;oBAqBrB,KAAK;uBAUF,IAAI;4BASS,yBAAyB;2BA+BlC,KAAK;;EAIxB,gBAAgB;IACnB,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC5D,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;GAC9C;EAED,oBAAoB;IAChB,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;GACpC;EAEM,MAAM;IACT,QACIA,QAACC,UAAI,IACD,KAAK,EAAE;QACH,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,mBAAmB,EAAE,IAAI,CAAC,eAAe;OAC5C,IAEDD,+BAAiB,IAAI,CAAC,eAAe,IAChC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,EACvC,IAAI,CAAC,eAAe,EAAE,EACtB,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,CAC5C,EACL,IAAI,CAAC,wBAAwB,EAAE,CAC7B,EACT;GACL;EA4BO,wBAAwB;IAC5B,IAAI,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;MAC3C,OAAO;KACV;IAED,QACIA,oBACI,KAAK,EAAE;QACH,eAAe,EAAE,IAAI;QACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;OAC1B,EACD,OAAO,EAAE,IAAI,CAAC,eAAe,IAE7BA,wBAAY,IAAI,EAAC,aAAa,GAAG,CAC5B,EACX;GACL;;;;;;","names":["h","Host"],"sources":["./src/components/dock/dock.scss?tag=limel-dock&encapsulation=shadow","./src/components/dock/dock.tsx"],"sourcesContent":["@use '../../style/mixins';\n@use '../../style/functions';\n@use '../../style/internal/variables';\n\n/**\n* @prop --dock-expanded-max-width: The maximum width of the Dock when it is expanded. Defaults to `max-content` which means the Dock will adjust its width to the widest dock item.\n* @prop --dock-background-color: Background color of the whole component, defaults to `--contrast-100`.\n* @prop --dock-item-background-color--selected: Background color of selected dock item, defaults to `--contrast-200`.\n* @prop --dock-item-text-color: Text of dock items, defaults to `--contrast-1100`.\n* @prop --dock-item-text-color--selected: Text color of selected dock item, defaults to `--contrast-1300`.\n* @prop --dock-item-icon-color: Color of the optional icons used in each dock item. Only affects inactive dock items, defaults to text colors for default or selected states.\n* @prop --dock-padding-top: Space of top side of the Dock. Can be used with environment variables, to take into account safe areas on mobile devices with rounded screen corners or those that have a \"notch\". For instance can be set to `env(safe-area-inset-top)`.\n* @prop --dock-padding-right: Space of the right side of the Dock. Can be used with environment variables, to take into account safe areas on mobile devices with rounded screen corners or those that have a \"notch\". For instance can be set to `env(safe-area-inset-right)`.\n* @prop --dock-padding-bottom: Space of the bottom side of the Dock. Can be used with environment variables, to take into account safe areas on mobile devices with rounded screen corners or those that have a \"notch\". For instance can be set to `env(safe-area-inset-bottom)`.\n* @prop --dock-padding-left: Space of the left side of the Dock. Can be used with environment variables, to take into account safe areas on mobile devices with rounded screen corners or those that have a \"notch\". For instance can be set to `env(safe-area-inset-left)`.\n* @prop --popover-surface-width: Defines the width of the popover that is opened for dock items with custom components. Defaults to `auto`.\n*/\n\n:host(limel-dock) {\n    --badge-background-color: rgb(var(--color-red-default));\n    --badge-text-color: rgb(var(--color-white));\n\n    --dock-item-height: 2.75rem;\n    --limel-dock-padding: 0.25rem;\n    --dock-expand-shrink-button-height: 1rem;\n\n    --limel-dock-item-text-color: var(\n        --dock-item-text-color,\n        rgb(var(--contrast-1100))\n    );\n    --limel-dock-item-text-color--selected: var(\n        --dock-item-text-color--selected,\n        rgb(var(--contrast-1300))\n    );\n\n    isolation: isolate;\n    position: relative;\n\n    display: inline-flex;\n    flex-direction: column;\n\n    background-color: var(--dock-background-color, rgb(var(--contrast-100)));\n    box-shadow: var(--shadow-depth-8);\n\n    padding-top: var(--dock-padding-top);\n    padding-right: var(--dock-padding-right);\n    padding-bottom: var(--dock-padding-bottom);\n    padding-left: var(--dock-padding-left);\n}\n\n:host(limel-dock:not(.has-mobile-layout)) {\n    height: 100%;\n    width: calc((var(--limel-dock-padding) * 2) + var(--dock-item-height));\n    nav {\n        padding-bottom: calc((var(--limel-dock-padding) + 0.25rem));\n    }\n}\n\n:host(limel-dock.expanded) {\n    width: var(--dock-expanded-max-width, max-content);\n}\n\n.footer-separator {\n    margin-top: auto;\n    justify-self: flex-end;\n}\n\nnav {\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-direction: column;\n    gap: functions.pxToRem(6);\n    flex-grow: 1;\n\n    padding: var(--limel-dock-padding); // needed for the focus effect\n\n    overflow-y: 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    :host(limel-dock.has-mobile-layout) & {\n        justify-content: space-between;\n        flex-direction: row;\n    }\n}\n\n// 👇 Below is a hidden and private prop\n// only for usage in Lime CRM components.\n// It enables our customers to override\n// the default Home icon, using an external URL\n// or an SVG code.\nlimel-dock-button {\n    &:first-of-type {\n        // `--crm-custom-home-icon-enabler`: in the CRM must be set to `''`\n        --limel-custom-home-icon-enabler: var(--crm-custom-home-icon-enabler);\n        // `--crm-custom-home-icon` in the CRM must be set to a url to an image file, or an SVG code\n        --limel-custom-home-icon: var(--crm-custom-home-icon);\n    }\n}\n\n@import './partial-styles/shrink-expand-button';\n","import {\n    Component,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n    State,\n} from '@stencil/core';\nimport { DockItem } from './dock.types';\n\nconst DEFAULT_MOBILE_BREAKPOINT = 700;\n\n/**\n * @exampleComponent limel-example-dock-basic\n * @exampleComponent limel-example-dock-custom-component\n * @exampleComponent limel-example-dock-notification\n * @exampleComponent limel-example-dock-mobile\n * @exampleComponent limel-example-dock-expanded\n * @exampleComponent limel-example-dock-colors-css\n */\n@Component({\n    tag: 'limel-dock',\n    shadow: true,\n    styleUrl: 'dock.scss',\n})\nexport class Dock {\n    /**\n     * Items that are placed in the dock.\n     */\n    @Prop()\n    public dockItems: DockItem[] = [];\n\n    /**\n     * Items that are placed at the bottom of the dock. (Or at the end in mobile\n     * layout.)\n     */\n    @Prop()\n    public dockFooterItems?: DockItem[] = [];\n\n    /**\n     * A label used to describe the purpose of the navigation element to users\n     * of assistive technologies, like screen readers. Especially useful when\n     * there are multiple navigation elements in the user interface.\n     * Example value: \"Primary navigation\"\n     */\n    @Prop({ reflect: true })\n    public accessibleLabel?: string;\n\n    /**\n     * Defines the width of the component, when it loads.\n     * - `true`: shows both icons and labels of the Dock items.\n     * - `false`: only shows icons of the doc items, and displays\n     * their labels as tooltip.\n     *\n     * Note: when `useMobileLayout` is `true`, labels will always\n     * be shown as tooltips. Read more below…\n     */\n    @Prop({ reflect: true })\n    public expanded? = false;\n\n    /**\n     * Set to `false` if you do not want to allow end-users\n     * to exapnd or shrink the Dock. This will hide the\n     * expand/shrink button, and the only things that defines\n     * the layout will be the `expanded` property, and\n     * the `mobileBreakPoint`.\n     */\n    @Prop({ reflect: true })\n    public allowResize? = true;\n\n    /**\n     * Defines the breakpoint in pixles, at which the component will be rendered\n     * in a hoizontal layout. Default breakpoint is `700` pixels, which means\n     * when the screen size is smaller than `700px`, the component will automatically\n     * switch to a horizontal layout.\n     */\n    @Prop({ reflect: true })\n    public mobileBreakPoint?: number = DEFAULT_MOBILE_BREAKPOINT;\n\n    /**\n     * Fired when a dock item has been selected from the dock.\n     */\n    @Event()\n    public itemSelected: EventEmitter<DockItem>;\n\n    /**\n     * Fired when a dock menu is opened.\n     */\n    @Event()\n    public menuOpen: EventEmitter<DockItem>;\n\n    /**\n     * Fired when the popover is closed.\n     */\n    @Event()\n    public close: EventEmitter<void>;\n\n    /**\n     * Fired when a Dock is expanded or collapsed.\n     */\n    @Event()\n    private dockExpanded: EventEmitter<boolean>;\n\n    /**\n     * Is used to render the component horizontally, and place\n     * the Dock items in a row.\n     */\n    @State()\n    private useMobileLayout = false;\n\n    private resizeObserver: ResizeObserver;\n\n    public componentDidLoad() {\n        this.resizeObserver = new ResizeObserver(this.handleResize);\n        this.resizeObserver.observe(document.body);\n    }\n\n    disconnectedCallback() {\n        this.resizeObserver.disconnect();\n    }\n\n    public render() {\n        return (\n            <Host\n                class={{\n                    dock: true,\n                    expanded: this.expanded,\n                    'has-mobile-layout': this.useMobileLayout,\n                }}\n            >\n                <nav aria-label={this.accessibleLabel}>\n                    {this.dockItems.map(this.renderDockItem)}\n                    {this.renderSeparator()}\n                    {this.dockFooterItems.map(this.renderDockItem)}\n                </nav>\n                {this.renderExpandShrinkToggle()}\n            </Host>\n        );\n    }\n\n    private renderSeparator = () => {\n        return this.useMobileLayout ? null : <span class=\"footer-separator\" />;\n    };\n\n    private renderDockItem = (item: DockItem) => {\n        return (\n            <limel-dock-button\n                class={{\n                    'dock-item': true,\n                    selected: item.selected,\n                }}\n                item={item}\n                expanded={this.expanded && !this.useMobileLayout}\n                useMobileLayout={this.useMobileLayout}\n            />\n        );\n    };\n\n    private handleResize = () => {\n        if (window.innerWidth <= this.mobileBreakPoint) {\n            this.useMobileLayout = true;\n        } else {\n            this.useMobileLayout = false;\n        }\n    };\n\n    private renderExpandShrinkToggle() {\n        if (this.useMobileLayout || !this.allowResize) {\n            return;\n        }\n\n        return (\n            <button\n                class={{\n                    'expand-shrink': true,\n                    expanded: this.expanded,\n                }}\n                onClick={this.toggleDockWidth}\n            >\n                <limel-icon name=\"angle_right\" />\n            </button>\n        );\n    }\n\n    private toggleDockWidth = () => {\n        this.expanded = !this.expanded;\n        this.dockExpanded.emit(this.expanded);\n    };\n}\n"],"version":3}

package/dist/collection/components/dock/dock.css

@@ -81,7 +81,7 @@
   --badge-background-color: rgb(var(--color-red-default));
   --badge-text-color: rgb(var(--color-white));
   --dock-item-height: 2.75rem;
-  --dock-padding: 0.25rem;
+  --limel-dock-padding: 0.25rem;
   --dock-expand-shrink-button-height: 1rem;
   --limel-dock-item-text-color: var(
       --dock-item-text-color,
@@ -105,7 +105,10 @@
 
 :host(limel-dock:not(.has-mobile-layout)) {
   height: 100%;
-  width: calc(var(--dock-padding) * 2 + var(--dock-item-height));
+  width: calc(var(--limel-dock-padding) * 2 + var(--dock-item-height));
+}
+:host(limel-dock:not(.has-mobile-layout)) nav {
+  padding-bottom: calc(var(--limel-dock-padding) + 0.25rem);
 }
 
 :host(limel-dock.expanded) {
@@ -123,7 +126,7 @@ nav {
   flex-direction: column;
   gap: 0.375rem;
   flex-grow: 1;
-  padding: var(--dock-padding);
+  padding: var(--limel-dock-padding);
   overflow-y: auto;
   scrollbar-width: none;
   -ms-overflow-style: none;
@@ -153,7 +156,7 @@ limel-dock-button:first-of-type {
   align-items: center;
   height: var(--dock-expand-shrink-button-height);
   padding: 0 0.5rem;
-  margin: var(--dock-padding);
+  margin: var(--limel-dock-padding);
   border-radius: 0.375rem;
 }
 .expand-shrink:hover {

package/dist/collection/components/spinner/spinner.css

@@ -65,16 +65,16 @@
 }
 
 /**
- * @prop --spinner-color-1: 1st animated stroke color, defaults to `--lime-brand-color-deep-red`.
- * @prop --spinner-color-2: 2nd animated stroke color, defaults to `--lime-brand-color-sellable-orange`.
- * @prop --spinner-color-3: 3rd animated stroke color, defaults to `--lime-brand-color-simple-blue`.
- * @prop --spinner-color-4: 4th animated stroke color, defaults to `--lime-brand-color-orange`.
- * @prop --spinner-color-5: 5th animated stroke color, defaults to `--lime-brand-color-lime-green`.
- * @prop --spinner-color-6: 6th animated stroke color, defaults to `--lime-brand-color-yellow`.
- * @prop --spinner-color-7: 7th animated stroke color, defaults to `--lime-brand-color-flexible-turquoise`.
- * @prop --spinner-color-8: 8th animated stroke color, defaults to `--lime-brand-color-loving-magenta`.
- * @prop --spinner-color-9: 9th animated stroke color, defaults to `--lime-brand-color-dark-blue`.
- * @prop --spinner-color-10: 10th animated stroke color, defaults to `--lime-brand-color-light-grey`.
+ * @prop --spinner-color-1: 1st animated stroke color, defaults to `--lime-brand-color-lime-green`.
+ * @prop --spinner-color-2: 2nd animated stroke color, defaults to `--lime-brand-color-ocean-teal`.
+ * @prop --spinner-color-3: 3rd animated stroke color, defaults to `--lime-brand-color-aqua`.
+ * @prop --spinner-color-4: 4th animated stroke color, defaults to `--lime-brand-color-bubble-gum`.
+ * @prop --spinner-color-5: 5th animated stroke color, defaults to `--lime-brand-color-sunny-orange`.
+ * @prop --spinner-color-6: 6th animated stroke color, defaults to `--lime-brand-color-lime-green`.
+ * @prop --spinner-color-7: 7th animated stroke color, defaults to `--lime-brand-color-ocean-teal`.
+ * @prop --spinner-color-8: 8th animated stroke color, defaults to `--lime-brand-color-aqua`.
+ * @prop --spinner-color-9: 9th animated stroke color, defaults to `--lime-brand-color-bubble-gum`.
+ * @prop --spinner-color-10: 10th animated stroke color, defaults to `--lime-brand-color-sunny-orange`.
  */
 :host(limel-spinner) {
   display: block;
@@ -158,42 +158,42 @@
   stroke-width: 10;
 }
 .color:nth-child(1) {
-  stroke: var(--spinner-color-1, rgb(var(--lime-brand-color-deep-red)));
+  stroke: var(--spinner-color-1, rgb(var(--lime-brand-color-lime-green)));
 }
 .color:nth-child(2) {
-  stroke: var(--spinner-color-2, rgb(var(--lime-brand-color-sellable-orange)));
+  stroke: var(--spinner-color-2, rgb(var(--lime-brand-color-ocean-teal)));
   animation-delay: 1s;
 }
 .color:nth-child(3) {
-  stroke: var(--spinner-color-3, rgb(var(--lime-brand-color-simple-blue)));
+  stroke: var(--spinner-color-3, rgb(var(--lime-brand-color-aqua)));
   animation-delay: 2s;
 }
 .color:nth-child(4) {
-  stroke: var(--spinner-color-4, rgb(var(--lime-brand-color-orange)));
+  stroke: var(--spinner-color-4, rgb(var(--lime-brand-color-bubble-gum)));
   animation-delay: 3s;
 }
 .color:nth-child(5) {
-  stroke: var(--spinner-color-5, rgb(var(--lime-brand-color-lime-green)));
+  stroke: var(--spinner-color-5, rgb(var(--lime-brand-color-sunny-orange)));
   animation-delay: 4s;
 }
 .color:nth-child(6) {
-  stroke: var(--spinner-color-6, rgb(var(--lime-brand-color-yellow)));
+  stroke: var(--spinner-color-6, rgb(var(--lime-brand-color-lime-green)));
   animation-delay: 5s;
 }
 .color:nth-child(7) {
-  stroke: var(--spinner-color-7, rgb(var(--lime-brand-color-flexible-turquoise)));
+  stroke: var(--spinner-color-7, rgb(var(--lime-brand-color-ocean-teal)));
   animation-delay: 6s;
 }
 .color:nth-child(8) {
-  stroke: var(--spinner-color-8, rgb(var(--lime-brand-color-loving-magenta)));
+  stroke: var(--spinner-color-8, rgb(var(--lime-brand-color-aqua)));
   animation-delay: 7s;
 }
 .color:nth-child(9) {
-  stroke: var(--spinner-color-9, rgb(var(--lime-brand-color-dark-blue)));
+  stroke: var(--spinner-color-9, rgb(var(--lime-brand-color-bubble-gum)));
   animation-delay: 8s;
 }
 .color:nth-child(10) {
-  stroke: var(--spinner-color-9, rgb(var(--lime-brand-color-light-grey)));
+  stroke: var(--spinner-color-10, rgb(var(--contrast-700)));
   animation-delay: 9s;
 }
 

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

@@ -1899,7 +1899,7 @@ const MenuList = class {
 };
 MenuList.style = menuListCss;
 
-const spinnerCss = ":host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}:host(limel-spinner){display:block}@keyframes spin{50%{transform:rotate(180deg)}100%{transform:rotate(720deg)}}@keyframes fade-in-the-spinner{0%{transform:scale(0.7);opacity:0}100%{transform:scale(1);opacity:1}}@keyframes animate-colored-circles{5%{stroke-dashoffset:0}10%,100%{stroke-dashoffset:63}}:host([hidden]){display:none}:host{box-sizing:border-box;display:flex;align-items:center;justify-content:center;height:1.5rem;width:1.5rem;transform:translate3d(0, 0, 0);animation:fade-in-the-spinner 0.5s ease forwards}:host([size=x-small]){height:2rem;width:2rem}:host([size=small]){height:2.125rem;width:2.125rem}:host([size=medium]){height:2.75rem;width:2.75rem}:host([size=large]){height:4rem;width:4rem}.spinner{animation:spin 1s linear infinite;transform-origin:center}.color{animation:animate-colored-circles 10s linear infinite;fill:none;stroke-dasharray:63;stroke-dashoffset:63;stroke-linecap:round;stroke-width:4}.color.thick{stroke-width:10}.color:nth-child(1){stroke:var(--spinner-color-1, rgb(var(--lime-brand-color-deep-red)))}.color:nth-child(2){stroke:var(--spinner-color-2, rgb(var(--lime-brand-color-sellable-orange)));animation-delay:1s}.color:nth-child(3){stroke:var(--spinner-color-3, rgb(var(--lime-brand-color-simple-blue)));animation-delay:2s}.color:nth-child(4){stroke:var(--spinner-color-4, rgb(var(--lime-brand-color-orange)));animation-delay:3s}.color:nth-child(5){stroke:var(--spinner-color-5, rgb(var(--lime-brand-color-lime-green)));animation-delay:4s}.color:nth-child(6){stroke:var(--spinner-color-6, rgb(var(--lime-brand-color-yellow)));animation-delay:5s}.color:nth-child(7){stroke:var(--spinner-color-7, rgb(var(--lime-brand-color-flexible-turquoise)));animation-delay:6s}.color:nth-child(8){stroke:var(--spinner-color-8, rgb(var(--lime-brand-color-loving-magenta)));animation-delay:7s}.color:nth-child(9){stroke:var(--spinner-color-9, rgb(var(--lime-brand-color-dark-blue)));animation-delay:8s}.color:nth-child(10){stroke:var(--spinner-color-9, rgb(var(--lime-brand-color-light-grey)));animation-delay:9s}.outline{stroke:rgba(var(--lime-brand-color-light-grey), 0.3);fill:none;stroke-linecap:round;stroke-width:4}.outline.thick{stroke-width:10}";
+const spinnerCss = ":host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}:host(limel-spinner){display:block}@keyframes spin{50%{transform:rotate(180deg)}100%{transform:rotate(720deg)}}@keyframes fade-in-the-spinner{0%{transform:scale(0.7);opacity:0}100%{transform:scale(1);opacity:1}}@keyframes animate-colored-circles{5%{stroke-dashoffset:0}10%,100%{stroke-dashoffset:63}}:host([hidden]){display:none}:host{box-sizing:border-box;display:flex;align-items:center;justify-content:center;height:1.5rem;width:1.5rem;transform:translate3d(0, 0, 0);animation:fade-in-the-spinner 0.5s ease forwards}:host([size=x-small]){height:2rem;width:2rem}:host([size=small]){height:2.125rem;width:2.125rem}:host([size=medium]){height:2.75rem;width:2.75rem}:host([size=large]){height:4rem;width:4rem}.spinner{animation:spin 1s linear infinite;transform-origin:center}.color{animation:animate-colored-circles 10s linear infinite;fill:none;stroke-dasharray:63;stroke-dashoffset:63;stroke-linecap:round;stroke-width:4}.color.thick{stroke-width:10}.color:nth-child(1){stroke:var(--spinner-color-1, rgb(var(--lime-brand-color-lime-green)))}.color:nth-child(2){stroke:var(--spinner-color-2, rgb(var(--lime-brand-color-ocean-teal)));animation-delay:1s}.color:nth-child(3){stroke:var(--spinner-color-3, rgb(var(--lime-brand-color-aqua)));animation-delay:2s}.color:nth-child(4){stroke:var(--spinner-color-4, rgb(var(--lime-brand-color-bubble-gum)));animation-delay:3s}.color:nth-child(5){stroke:var(--spinner-color-5, rgb(var(--lime-brand-color-sunny-orange)));animation-delay:4s}.color:nth-child(6){stroke:var(--spinner-color-6, rgb(var(--lime-brand-color-lime-green)));animation-delay:5s}.color:nth-child(7){stroke:var(--spinner-color-7, rgb(var(--lime-brand-color-ocean-teal)));animation-delay:6s}.color:nth-child(8){stroke:var(--spinner-color-8, rgb(var(--lime-brand-color-aqua)));animation-delay:7s}.color:nth-child(9){stroke:var(--spinner-color-9, rgb(var(--lime-brand-color-bubble-gum)));animation-delay:8s}.color:nth-child(10){stroke:var(--spinner-color-10, rgb(var(--contrast-700)));animation-delay:9s}.outline{stroke:rgba(var(--lime-brand-color-light-grey), 0.3);fill:none;stroke-linecap:round;stroke-width:4}.outline.thick{stroke-width:10}";
 
 const Spinner = class {
   constructor(hostRef) {