@limetech/lime-elements 37.64.2 → 37.64.4

package/dist/lime-elements/{p-6b2bc81b.entry.js.map → p-f3a613a3.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["shortcutCss","Shortcut","this","renderLabel","label","h","getAriaLabel","_a","link","title","_b","undefined","renderNotification","badge","render","disabled","href","target","tabindex","_c","name","icon"],"sources":["./src/components/shortcut/shortcut.scss?tag=limel-shortcut&encapsulation=shadow","./src/components/shortcut/shortcut.tsx"],"sourcesContent":["/**\n* @prop --shortcut-border-radius: defines the radius of corners of the shortcut. Defaults to `1rem`\n* @prop --shortcut-icon-color: defines the fill color of the shortcut icon. Defaults to `--contrast-1000`\n* @prop --shortcut-label-color: defines the color of the shortcut label. Defaults to `--contrast-1100`\n* @prop --shortcut-background-color: defines the backgrounds color of the shortcut icon. Defaults to `--lime-elevated-surface-background-color`\n* @prop --shortcut-badge-text-color: Text color of the notification badge. Defaults to `--color-white`\n* @prop --shortcut-badge-background-color: Background color of the notification badge. Defaults to `--color-red-default`\n*/\n\n@use '../../style/mixins';\n\n:host(limel-shortcut) {\n    --badge-text-color: var(\n        --shortcut-badge-text-color,\n        rgb(var(--color-white))\n    );\n    --badge-background-color: var(\n        --shortcut-badge-background-color,\n        rgb(var(--color-red-default))\n    );\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    row-gap: 0.0625rem; //1px\n\n    * {\n        box-sizing: border-box;\n    }\n}\n\n:host(limel-shortcut[disabled]) {\n    a {\n        opacity: 0.5;\n        box-shadow: unset;\n        cursor: not-allowed;\n    }\n}\n\na {\n    all: unset;\n    @include mixins.is-elevated-clickable(\n        $background-color:\n            var(\n                --shortcut-background-color,\n                var(--lime-elevated-surface-background-color)\n            ),\n        $background-color--hovered:\n            var(\n                --shortcut-background-color,\n                var(--lime-elevated-surface-background-color)\n            )\n    );\n    @include mixins.visualize-keyboard-focus;\n    text-align: center;\n\n    height: calc(100% - 1rem);\n    width: calc(100% - 1rem);\n    padding: 0.5rem;\n\n    border-radius: var(--shortcut-border-radius, 1rem);\n}\n\nlimel-icon {\n    display: flex;\n    height: 100%;\n    width: 100%;\n    justify-content: center;\n    color: var(--shortcut-icon-color, rgb(var(--contrast-1000)));\n    border-radius: var(--shortcut-border-radius, 1rem);\n}\n\nspan {\n    @include mixins.truncate-text;\n    width: 100%;\n    color: var(--shortcut-label-color, rgb(var(--contrast-1100)));\n    font-size: 0.75rem;\n    text-align: center;\n}\n\nlimel-badge {\n    position: absolute;\n    top: -0.25rem;\n    right: 0.125rem;\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { Link } from '../../global/shared-types/link.types';\n\n/**\n * This component can be used on places such as a start page or a dashboard.\n * Clicking on the component should navigate the user to a new screen,\n * to which you need to provide a URL, by specifying an `href` for the `link` property.\n *\n * By default, this navigation will happen within the same browser tab.\n * However, it is possible to override that behavior, by specifying a `target`\n * for the `link` property\n *\n * @exampleComponent limel-example-shortcut\n * @exampleComponent limel-example-shortcut-notification\n * @exampleComponent limel-example-shortcut-styling\n * @exampleComponent limel-example-shortcut-with-click-handler\n */\n\n@Component({\n    tag: 'limel-shortcut',\n    shadow: true,\n    styleUrl: 'shortcut.scss',\n})\nexport class Shortcut {\n    /**\n     * Name of icon for the shortcut.\n     */\n    @Prop({ reflect: true })\n    public icon: string;\n\n    /**\n     * The text to show below the shortcut. Long label will be truncated.\n     */\n    @Prop({ reflect: true })\n    public label?: string = null;\n\n    /**\n     * Set to `true` if shortcut is disabled.\n     */\n    @Prop({ reflect: true })\n    public disabled?: boolean = false;\n\n    /**\n     * If specified, will display a notification badge\n     * on the shortcut.\n     */\n    @Prop({ reflect: true })\n    public badge?: number | string;\n\n    /**\n     * If supplied, the shortcut will be a clickable link.\n     */\n    @Prop()\n    public link?: Link;\n\n    public render() {\n        return [\n            <a\n                aria-disabled={this.disabled}\n                href={this.link?.href}\n                target={this.link?.target}\n                tabindex=\"0\"\n                aria-label={this.getAriaLabel()}\n                title={this.link?.title}\n            >\n                <limel-icon name={this.icon} />\n            </a>,\n            this.renderLabel(),\n            this.renderNotification(),\n        ];\n    }\n\n    private renderLabel = () => {\n        if (this.label) {\n            return <span aria-hidden=\"true\">{this.label}</span>;\n        }\n    };\n\n    private getAriaLabel = () => {\n        if (this.label && this.link?.title) {\n            return this.label + '. ' + this.link.title;\n        }\n\n        if (this.label) {\n            return this.label;\n        }\n\n        if (this.link?.title) {\n            return this.link.title;\n        }\n\n        return undefined;\n    };\n\n    private renderNotification = () => {\n        if (this.badge) {\n            return <limel-badge label={this.badge} />;\n        }\n    };\n}\n"],"mappings":"sCAAA,MAAMA,EAAc,ypD,MCuBPC,EAAQ,M,yBAiDTC,KAAAC,YAAc,KAClB,GAAID,KAAKE,MAAO,CACZ,OAAOC,EAAA,sBAAkB,QAAQH,KAAKE,M,GAItCF,KAAAI,aAAe,K,QACnB,GAAIJ,KAAKE,SAASG,EAAAL,KAAKM,QAAI,MAAAD,SAAA,SAAAA,EAAEE,OAAO,CAChC,OAAOP,KAAKE,MAAQ,KAAOF,KAAKM,KAAKC,K,CAGzC,GAAIP,KAAKE,MAAO,CACZ,OAAOF,KAAKE,K,CAGhB,IAAIM,EAAAR,KAAKM,QAAI,MAAAE,SAAA,SAAAA,EAAED,MAAO,CAClB,OAAOP,KAAKM,KAAKC,K,CAGrB,OAAOE,SAAS,EAGZT,KAAAU,mBAAqB,KACzB,GAAIV,KAAKW,MAAO,CACZ,OAAOR,EAAA,eAAaD,MAAOF,KAAKW,O,kCA9DhB,K,cAMI,M,yCAerBC,S,UACH,MAAO,CACHT,EAAA,qBACmBH,KAAKa,SACpBC,MAAMT,EAAAL,KAAKM,QAAI,MAAAD,SAAA,SAAAA,EAAES,KACjBC,QAAQP,EAAAR,KAAKM,QAAI,MAAAE,SAAA,SAAAA,EAAEO,OACnBC,SAAS,IAAG,aACAhB,KAAKI,eACjBG,OAAOU,EAAAjB,KAAKM,QAAI,MAAAW,SAAA,SAAAA,EAAEV,OAElBJ,EAAA,cAAYe,KAAMlB,KAAKmB,QAE3BnB,KAAKC,cACLD,KAAKU,qB"}
+{"version":3,"names":["shortcutCss","Shortcut","this","renderLabel","label","h","getAriaLabel","_a","link","title","_b","undefined","renderNotification","badge","render","disabled","href","target","tabindex","_c","name","icon"],"sources":["./src/components/shortcut/shortcut.scss?tag=limel-shortcut&encapsulation=shadow","./src/components/shortcut/shortcut.tsx"],"sourcesContent":["/**\n* @prop --shortcut-border-radius: defines the radius of corners of the shortcut. Defaults to `1rem`\n* @prop --shortcut-icon-color: defines the fill color of the shortcut icon. Defaults to `--contrast-1000`\n* @prop --shortcut-label-color: defines the color of the shortcut label. Defaults to `--contrast-1100`\n* @prop --shortcut-background-color: defines the backgrounds color of the shortcut icon. Defaults to `--lime-elevated-surface-background-color`\n* @prop --shortcut-badge-text-color: Text color of the notification badge. Defaults to `--color-white`\n* @prop --shortcut-badge-background-color: Background color of the notification badge. Defaults to `--color-red-default`\n*/\n\n@use '../../style/mixins';\n\n:host(limel-shortcut) {\n    --badge-text-color: var(\n        --shortcut-badge-text-color,\n        rgb(var(--color-white))\n    );\n    --badge-background-color: var(\n        --shortcut-badge-background-color,\n        rgb(var(--color-red-default))\n    );\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    row-gap: 0.0625rem; //1px\n\n    * {\n        box-sizing: border-box;\n    }\n}\n\n:host(limel-shortcut[disabled]) {\n    a {\n        opacity: 0.5;\n        box-shadow: unset;\n        cursor: not-allowed;\n    }\n}\n\na {\n    all: unset;\n    @include mixins.is-elevated-clickable(\n        $background-color:\n            var(\n                --shortcut-background-color,\n                var(--lime-elevated-surface-background-color)\n            ),\n        $background-color--hovered:\n            var(\n                --shortcut-background-color,\n                var(--lime-elevated-surface-background-color)\n            )\n    );\n    @include mixins.visualize-keyboard-focus;\n    text-align: center;\n\n    height: calc(100% - 1rem);\n    width: calc(100% - 1rem);\n    padding: 0.5rem;\n\n    border-radius: var(--shortcut-border-radius, 1rem);\n}\n\nlimel-icon {\n    display: flex;\n    height: 100%;\n    width: 100%;\n    justify-content: center;\n    color: var(--shortcut-icon-color, rgb(var(--contrast-1000)));\n    border-radius: var(--shortcut-border-radius, 1rem);\n}\n\nspan {\n    @include mixins.truncate-text;\n    width: 100%;\n    color: var(--shortcut-label-color, rgb(var(--contrast-1100)));\n    font-size: 0.75rem;\n    text-align: center;\n}\n\nlimel-badge {\n    position: absolute;\n    top: -0.25rem;\n    right: 0.125rem;\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { Link } from '../../global/shared-types/link.types';\n\n/**\n * This component can be used on places such as a start page or a dashboard.\n * Clicking on the component should navigate the user to a new screen,\n * to which you need to provide a URL, by specifying an `href` for the `link` property.\n *\n * By default, this navigation will happen within the same browser tab.\n * However, it is possible to override that behavior, by specifying a `target`\n * for the `link` property\n *\n * @exampleComponent limel-example-shortcut\n * @exampleComponent limel-example-shortcut-notification\n * @exampleComponent limel-example-shortcut-styling\n * @exampleComponent limel-example-shortcut-with-click-handler\n */\n\n@Component({\n    tag: 'limel-shortcut',\n    shadow: true,\n    styleUrl: 'shortcut.scss',\n})\nexport class Shortcut {\n    /**\n     * Name of icon for the shortcut.\n     */\n    @Prop({ reflect: true })\n    public icon: string;\n\n    /**\n     * The text to show below the shortcut. Long label will be truncated.\n     */\n    @Prop({ reflect: true })\n    public label?: string = null;\n\n    /**\n     * Set to `true` if shortcut is disabled.\n     */\n    @Prop({ reflect: true })\n    public disabled?: boolean = false;\n\n    /**\n     * If specified, will display a notification badge\n     * on the shortcut.\n     */\n    @Prop({ reflect: true })\n    public badge?: number | string;\n\n    /**\n     * If supplied, the shortcut will be a clickable link.\n     */\n    @Prop()\n    public link?: Link;\n\n    public render() {\n        return [\n            <a\n                aria-disabled={this.disabled}\n                href={this.link?.href}\n                target={this.link?.target}\n                tabindex=\"0\"\n                aria-label={this.getAriaLabel()}\n                title={this.link?.title}\n            >\n                <limel-icon name={this.icon} />\n            </a>,\n            this.renderLabel(),\n            this.renderNotification(),\n        ];\n    }\n\n    private renderLabel = () => {\n        if (this.label) {\n            return <span aria-hidden=\"true\">{this.label}</span>;\n        }\n    };\n\n    private getAriaLabel = () => {\n        if (this.label && this.link?.title) {\n            return this.label + '. ' + this.link.title;\n        }\n\n        if (this.label) {\n            return this.label;\n        }\n\n        if (this.link?.title) {\n            return this.link.title;\n        }\n\n        return undefined;\n    };\n\n    private renderNotification = () => {\n        if (this.badge) {\n            return <limel-badge label={this.badge} />;\n        }\n    };\n}\n"],"mappings":"sCAAA,MAAMA,EAAc,8rE,MCuBPC,EAAQ,M,yBAiDTC,KAAAC,YAAc,KAClB,GAAID,KAAKE,MAAO,CACZ,OAAOC,EAAA,sBAAkB,QAAQH,KAAKE,M,GAItCF,KAAAI,aAAe,K,QACnB,GAAIJ,KAAKE,SAASG,EAAAL,KAAKM,QAAI,MAAAD,SAAA,SAAAA,EAAEE,OAAO,CAChC,OAAOP,KAAKE,MAAQ,KAAOF,KAAKM,KAAKC,K,CAGzC,GAAIP,KAAKE,MAAO,CACZ,OAAOF,KAAKE,K,CAGhB,IAAIM,EAAAR,KAAKM,QAAI,MAAAE,SAAA,SAAAA,EAAED,MAAO,CAClB,OAAOP,KAAKM,KAAKC,K,CAGrB,OAAOE,SAAS,EAGZT,KAAAU,mBAAqB,KACzB,GAAIV,KAAKW,MAAO,CACZ,OAAOR,EAAA,eAAaD,MAAOF,KAAKW,O,kCA9DhB,K,cAMI,M,yCAerBC,S,UACH,MAAO,CACHT,EAAA,qBACmBH,KAAKa,SACpBC,MAAMT,EAAAL,KAAKM,QAAI,MAAAD,SAAA,SAAAA,EAAES,KACjBC,QAAQP,EAAAR,KAAKM,QAAI,MAAAE,SAAA,SAAAA,EAAEO,OACnBC,SAAS,IAAG,aACAhB,KAAKI,eACjBG,OAAOU,EAAAjB,KAAKM,QAAI,MAAAW,SAAA,SAAAA,EAAEV,OAElBJ,EAAA,cAAYe,KAAMlB,KAAKmB,QAE3BnB,KAAKC,cACLD,KAAKU,qB"}

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

@@ -0,0 +1,2 @@
+import{r as o,h as r}from"./p-443111b3.js";const e='@charset "UTF-8";limel-popover{display:flex;--popover-surface-width:min(calc(100vw - 4rem), 22rem)}button[slot=trigger]{all:unset;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(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-sizing:border-box;display:flex;align-items:center;justify-content:center;color:rgb(var(--color-sky-default));border-radius:50%;box-shadow:0 0 0 1px rgb(var(--color-sky-lighter), 0.7);width:0.875rem;height:0.875rem;font-size:0.75rem}button[slot=trigger]:hover,button[slot=trigger]:focus,button[slot=trigger]:focus-visible{will-change:color, background-color, box-shadow, transform}button[slot=trigger]:hover{transform:translate3d(0, 0.01rem, 0);color:rgb(var(--color-sky-dark));background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}button[slot=trigger]:active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}button[slot=trigger]:hover,button[slot=trigger]:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button[slot=trigger]:focus{outline:none}button[slot=trigger]:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button[slot=trigger].is-open{color:rgb(var(--color-white));background-color:rgb(var(--color-sky-default));box-shadow:var(--button-shadow-inset)}';const t=class{constructor(r){o(this,r);this.openPopover=o=>{o.stopPropagation();this.isOpen=true};this.onPopoverClose=o=>{o.stopPropagation();this.isOpen=false};this.value=undefined;this.trigger="?";this.readMoreLink=undefined;this.openDirection="top-start";this.isOpen=false}render(){return[r("limel-popover",{open:this.isOpen,onClose:this.onPopoverClose,openDirection:this.openDirection},r("button",{slot:"trigger",onClick:this.openPopover,class:{"is-open":this.isOpen}},this.trigger),r("limel-help-content",{value:this.value,readMoreLink:this.readMoreLink}))]}};t.style=e;export{t as limel_help};
+//# sourceMappingURL=p-fda881a3.entry.js.map

package/dist/lime-elements/{p-5d01dc2a.entry.js.map → p-fda881a3.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["helpCss","HelpComponent","this","openPopover","event","stopPropagation","isOpen","onPopoverClose","render","h","open","onClose","openDirection","slot","onClick","class","trigger","value","readMoreLink"],"sources":["./src/components/help/help.scss?tag=limel-help&encapsulation=shadow","./src/components/help/help.tsx"],"sourcesContent":["@use '../../style/mixins';\n\nlimel-popover {\n    display: flex;\n    --popover-surface-width: min(calc(100vw - 4rem), 22rem);\n}\n\nbutton[slot='trigger'] {\n    all: unset;\n\n    @include mixins.is-flat-clickable(\n        $color--hovered: rgb(var(--color-sky-dark)),\n        $background-color: var(--lime-elevated-surface-background-color)\n    );\n    @include mixins.visualize-keyboard-focus;\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: rgb(var(--color-sky-default));\n    border-radius: 50%;\n    box-shadow: 0 0 0 1px rgb(var(--color-sky-lighter), 0.7);\n    width: 0.875rem;\n    height: 0.875rem;\n    font-size: 0.75rem;\n\n    &.is-open {\n        color: rgb(var(--color-white));\n        background-color: rgb(var(--color-sky-default));\n        box-shadow: var(--button-shadow-inset);\n    }\n}\n","import { Component, h, Prop, State } from '@stencil/core';\nimport { OpenDirection } from '../menu/menu.types';\nimport { Help } from '../help/help.types';\nimport { Link } from '../../global/shared-types/link.types';\n\n/**\n * A good design is self-explanatory! However, sometimes concepts are\n * too complex to understand, no matter how well-designed a user interface is.\n * In such cases, contextual help can be a great way to provide users with\n * help precisely where and when users need it.\n *\n * In app interface design, providing contextual help emerges as a viable practice\n * for enhancing user experience and usability.\n * Contextual help serves as a quick-to-access guiding,\n * empowering users to more easily understand and navigate through\n * the intricacies of an application.\n *\n * Using this component designers empower users to grasp the functionality\n * of an app more effortlessly, minimizes the learning curve,\n * transforming complex features into accessible opportunities for exploration.\n *\n * @exampleComponent limel-example-help\n * @exampleComponent limel-example-read-more\n * @exampleComponent limel-example-open-direction\n * @exampleComponent limel-example-placement\n */\n@Component({\n    tag: 'limel-help',\n    shadow: true,\n    styleUrl: 'help.scss',\n})\nexport class HelpComponent implements Help {\n    /**\n     * {@inheritdoc Help.value}\n     */\n    @Prop()\n    public value: string;\n\n    /**\n     * {@inheritdoc Help.trigger}\n     */\n    @Prop()\n    public trigger: string = '?';\n\n    /**\n     * {@inheritdoc Help.readMoreLink}\n     */\n    @Prop()\n    public readMoreLink?: Link;\n\n    /**\n     * {@inheritdoc Help.openDirection}\n     */\n    @Prop({ reflect: true })\n    public openDirection: OpenDirection = 'top-start';\n\n    @State()\n    private isOpen = false;\n\n    public render() {\n        return [\n            <limel-popover\n                open={this.isOpen}\n                onClose={this.onPopoverClose}\n                openDirection={this.openDirection}\n            >\n                <button\n                    slot=\"trigger\"\n                    onClick={this.openPopover}\n                    class={{\n                        'is-open': this.isOpen,\n                    }}\n                >\n                    {this.trigger}\n                </button>\n                <limel-help-content\n                    value={this.value}\n                    readMoreLink={this.readMoreLink}\n                />\n            </limel-popover>,\n        ];\n    }\n\n    private openPopover = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.isOpen = true;\n    };\n\n    private onPopoverClose = (event: CustomEvent) => {\n        event.stopPropagation();\n        this.isOpen = false;\n    };\n}\n"],"mappings":"2CAAA,MAAMA,EAAU,omC,MC+BHC,EAAa,M,yBAoDdC,KAAAC,YAAeC,IACnBA,EAAMC,kBACNH,KAAKI,OAAS,IAAI,EAGdJ,KAAAK,eAAkBH,IACtBA,EAAMC,kBACNH,KAAKI,OAAS,KAAK,E,kCAhDE,I,+CAYa,Y,YAGrB,K,CAEVE,SACH,MAAO,CACHC,EAAA,iBACIC,KAAMR,KAAKI,OACXK,QAAST,KAAKK,eACdK,cAAeV,KAAKU,eAEpBH,EAAA,UACII,KAAK,UACLC,QAASZ,KAAKC,YACdY,MAAO,CACH,UAAWb,KAAKI,SAGnBJ,KAAKc,SAEVP,EAAA,sBACIQ,MAAOf,KAAKe,MACZC,aAAchB,KAAKgB,gB"}
+{"version":3,"names":["helpCss","HelpComponent","this","openPopover","event","stopPropagation","isOpen","onPopoverClose","render","h","open","onClose","openDirection","slot","onClick","class","trigger","value","readMoreLink"],"sources":["./src/components/help/help.scss?tag=limel-help&encapsulation=shadow","./src/components/help/help.tsx"],"sourcesContent":["@use '../../style/mixins';\n\nlimel-popover {\n    display: flex;\n    --popover-surface-width: min(calc(100vw - 4rem), 22rem);\n}\n\nbutton[slot='trigger'] {\n    all: unset;\n\n    @include mixins.is-flat-clickable(\n        $color--hovered: rgb(var(--color-sky-dark)),\n        $background-color: var(--lime-elevated-surface-background-color)\n    );\n    @include mixins.visualize-keyboard-focus;\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: rgb(var(--color-sky-default));\n    border-radius: 50%;\n    box-shadow: 0 0 0 1px rgb(var(--color-sky-lighter), 0.7);\n    width: 0.875rem;\n    height: 0.875rem;\n    font-size: 0.75rem;\n\n    &.is-open {\n        color: rgb(var(--color-white));\n        background-color: rgb(var(--color-sky-default));\n        box-shadow: var(--button-shadow-inset);\n    }\n}\n","import { Component, h, Prop, State } from '@stencil/core';\nimport { OpenDirection } from '../menu/menu.types';\nimport { Help } from '../help/help.types';\nimport { Link } from '../../global/shared-types/link.types';\n\n/**\n * A good design is self-explanatory! However, sometimes concepts are\n * too complex to understand, no matter how well-designed a user interface is.\n * In such cases, contextual help can be a great way to provide users with\n * help precisely where and when users need it.\n *\n * In app interface design, providing contextual help emerges as a viable practice\n * for enhancing user experience and usability.\n * Contextual help serves as a quick-to-access guiding,\n * empowering users to more easily understand and navigate through\n * the intricacies of an application.\n *\n * Using this component designers empower users to grasp the functionality\n * of an app more effortlessly, minimizes the learning curve,\n * transforming complex features into accessible opportunities for exploration.\n *\n * @exampleComponent limel-example-help\n * @exampleComponent limel-example-read-more\n * @exampleComponent limel-example-open-direction\n * @exampleComponent limel-example-placement\n */\n@Component({\n    tag: 'limel-help',\n    shadow: true,\n    styleUrl: 'help.scss',\n})\nexport class HelpComponent implements Help {\n    /**\n     * {@inheritdoc Help.value}\n     */\n    @Prop()\n    public value: string;\n\n    /**\n     * {@inheritdoc Help.trigger}\n     */\n    @Prop()\n    public trigger: string = '?';\n\n    /**\n     * {@inheritdoc Help.readMoreLink}\n     */\n    @Prop()\n    public readMoreLink?: Link;\n\n    /**\n     * {@inheritdoc Help.openDirection}\n     */\n    @Prop({ reflect: true })\n    public openDirection: OpenDirection = 'top-start';\n\n    @State()\n    private isOpen = false;\n\n    public render() {\n        return [\n            <limel-popover\n                open={this.isOpen}\n                onClose={this.onPopoverClose}\n                openDirection={this.openDirection}\n            >\n                <button\n                    slot=\"trigger\"\n                    onClick={this.openPopover}\n                    class={{\n                        'is-open': this.isOpen,\n                    }}\n                >\n                    {this.trigger}\n                </button>\n                <limel-help-content\n                    value={this.value}\n                    readMoreLink={this.readMoreLink}\n                />\n            </limel-popover>,\n        ];\n    }\n\n    private openPopover = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.isOpen = true;\n    };\n\n    private onPopoverClose = (event: CustomEvent) => {\n        event.stopPropagation();\n        this.isOpen = false;\n    };\n}\n"],"mappings":"2CAAA,MAAMA,EAAU,uuD,MC+BHC,EAAa,M,yBAoDdC,KAAAC,YAAeC,IACnBA,EAAMC,kBACNH,KAAKI,OAAS,IAAI,EAGdJ,KAAAK,eAAkBH,IACtBA,EAAMC,kBACNH,KAAKI,OAAS,KAAK,E,kCAhDE,I,+CAYa,Y,YAGrB,K,CAEVE,SACH,MAAO,CACHC,EAAA,iBACIC,KAAMR,KAAKI,OACXK,QAAST,KAAKK,eACdK,cAAeV,KAAKU,eAEpBH,EAAA,UACII,KAAK,UACLC,QAASZ,KAAKC,YACdY,MAAO,CACH,UAAWb,KAAKI,SAGnBJ,KAAKc,SAEVP,EAAA,sBACIQ,MAAOf,KAAKe,MACZC,aAAchB,KAAKgB,gB"}

package/dist/lime-elements/style/color-palette-extended.css

@@ -3,7 +3,7 @@
  * Comments with HEX codes in front of the values are used as reference only.
  * Example of use:
  * solid: `color: rgb(var(--contrast-100))`
- * transparent: `color: rgba(var(--contrast-100), 0.5)`
+ * transparent: `color: rgb(var(--contrast-100), 0.5)`
  */
 
 :root {
@@ -320,18 +320,18 @@
 
     --lime-elevated-surface-background-color: rgb(var(--contrast-200));
 
-    --button-shadow-normal: 0 0.09375rem 0.225rem 0 rgba(var(--color-black), 0.632), 0 0.01875rem 0.05625rem 0 rgba(var(--color-black), 0.608);
-    --button-shadow-hovered: 0 0.125rem 0.375rem rgba(var(--color-black), 0.55), 0 0.375rem 0.625rem rgba(var(--color-black), 0.45);
-    --button-shadow-pressed: 0 0.0625rem 0.1875rem 0 rgba(var(--color-black), 0.532), 0 0.01875rem 0.05625rem 0 rgba(var(--color-black), 0.508);
-    --button-shadow-inset: 0 0.03125rem 0.21875rem 0 rgba(var(--color-black), 0.532) inset, 0 0.01875rem 0.05625rem 0 rgba(var(--color-black), 0.508) inset, 0 0 0.25rem rgba(var(--color-white), 0.1);
-    --button-shadow-inset-pressed: 0 0.03125rem 0.34375rem 0 rgba(var(--color-black), 0.532) inset, 0 0.01875rem 0.11875rem 0 rgba(var(--color-black), 0.52) inset, 0 0 0.1875rem rgba(var(--color-white), 0.1);
-    --shadow-depth-8: 0 0.2rem 0.45rem 0 rgba(var(--color-black), 0.532), 0 0.0375rem 0.1125rem 0 rgba(var(--color-black), 0.508);
-    --shadow-depth-8-reversed: 0 -0.2rem 0.45rem 0 rgba(var(--color-black), 0.532), 0 -0.0375rem 0.1125rem 0 rgba(var(--color-black), 0.508);
-    --shadow-depth-16: 0 0.4rem 0.9rem 0 rgba(var(--color-black), 0.532), 0 0.075rem 0.225rem 0 rgba(var(--color-black), 0.508);
-    --shadow-depth-64: 0 1.6rem 3.6rem 0 rgba(var(--color-black), 0.22), 0 0.3rem 0.9rem 0 rgba(var(--color-black), 0.58);
-    --shadow-inflated-8: -0.125rem -0.125rem 0.375rem rgba(var(--color-black), 0.21), -0.25rem -0.25rem 0.625rem rgba(var(--color-white), 0.08), 0.25rem 0.25rem 0.625rem rgba(var(--color-black), 0.46), 0.0625rem 0.0625rem 0.625rem rgba(var(--color-white), 0.16), -1px -1px 0 1px rgba(var(--color-black), 0.37) inset, 0 0 1px 1px rgba(var(--color-white), 0.2) inset;
-    --shadow-inflated-16: -0.1875rem -0.1875rem 0.375rem rgba(var(--color-black), 0.21), -0.375rem -0.375rem 1rem rgba(var(--color-white), 0.1), 0.375rem 0.375rem 1rem rgba(var(--color-black), 0.46), 0.125rem 0.125rem 0.625rem rgba(var(--color-white), 0.16), -1px -1px 0 1px rgba(var(--color-black), 0.37) inset, 0 0 1px 1px rgba(var(--color-white), 0.2) inset;
-    --shadow-inflated-64: -0.1875rem -0.1875rem 0.375rem rgba(var(--color-black), 0.21), -0.625rem -0.625rem 1.875rem rgba(var(--color-white), 0.2), 0.625rem 0.625rem 2.25rem rgba(var(--color-black), 0.46), 0.125rem 0.125rem 0.625rem rgba(var(--color-white), 0.16), -1px -1px 0 1px rgba(var(--color-black), 0.37) inset, 0 0 1px 1px rgba(var(--color-white), 0.2) inset;
+    --button-shadow-normal: 0 0.09375rem 0.225rem 0 rgb(var(--color-black), 0.632), 0 0.01875rem 0.05625rem 0 rgb(var(--color-black), 0.608), var(--shadow-brighten-edges-inside);
+    --button-shadow-hovered: 0 0.125rem 0.375rem rgb(var(--color-black), 0.55), 0 0.4rem 0.475rem -0.3rem rgb(var(--color-black), 0.45), var(--shadow-brighten-edges-inside);
+    --button-shadow-pressed: 0 0.0625rem 0.1875rem 0 rgb(var(--color-black), 0.532), 0 0.01875rem 0.05625rem 0 rgb(var(--color-black), 0.508), var(--shadow-brighten-edges-inside);
+    --button-shadow-inset: 0 0.03125rem 0.21875rem 0 rgb(var(--color-black), 0.532) inset, 0 0.01875rem 0.05625rem 0 rgb(var(--color-black), 0.508) inset, 0 0 0.25rem rgb(var(--color-white), 0.1), var(--shadow-brighten-edges-outside);
+    --button-shadow-inset-pressed: 0 0.03125rem 0.34375rem 0 rgb(var(--color-black), 0.532) inset, 0 0.01875rem 0.11875rem 0 rgb(var(--color-black), 0.52) inset, 0 -1px 0.3rem rgb(var(--color-white), 0.1), var(--shadow-brighten-edges-outside);
+    --shadow-depth-8: 0 0.2rem 0.45rem 0 rgb(var(--color-black), 0.532), 0 0.0375rem 0.1125rem 0 rgb(var(--color-black), 0.508);
+    --shadow-depth-8-reversed: 0 -0.2rem 0.45rem 0 rgb(var(--color-black), 0.532), 0 -0.0375rem 0.1125rem 0 rgb(var(--color-black), 0.508);
+    --shadow-depth-16: 0 0.4rem 0.9rem 0 rgb(var(--color-black), 0.532), 0 0.075rem 0.225rem 0 rgb(var(--color-black), 0.508);
+    --shadow-depth-64: 0 1.6rem 3.6rem 0 rgb(var(--color-black), 0.22), 0 0.3rem 0.9rem 0 rgb(var(--color-black), 0.58);
+    --shadow-inflated-8: -0.125rem -0.125rem 0.375rem rgb(var(--color-black), 0.21), -0.25rem -0.25rem 0.625rem rgb(var(--color-white), 0.08), 0.25rem 0.25rem 0.625rem rgb(var(--color-black), 0.46), 0.0625rem 0.0625rem 0.625rem rgb(var(--color-white), 0.16), -1px -1px 0 1px rgb(var(--color-black), 0.37) inset, 0 0 1px 1px rgb(var(--color-white), 0.2) inset;
+    --shadow-inflated-16: -0.1875rem -0.1875rem 0.375rem rgb(var(--color-black), 0.21), -0.375rem -0.375rem 1rem rgb(var(--color-white), 0.1), 0.375rem 0.375rem 1rem rgb(var(--color-black), 0.46), 0.125rem 0.125rem 0.625rem rgb(var(--color-white), 0.16), -1px -1px 0 1px rgb(var(--color-black), 0.37) inset, 0 0 1px 1px rgb(var(--color-white), 0.2) inset;
+    --shadow-inflated-64: -0.1875rem -0.1875rem 0.375rem rgb(var(--color-black), 0.21), -0.625rem -0.625rem 1.875rem rgb(var(--color-white), 0.2), 0.625rem 0.625rem 2.25rem rgb(var(--color-black), 0.46), 0.125rem 0.125rem 0.625rem rgb(var(--color-white), 0.16), -1px -1px 0 1px rgb(var(--color-black), 0.37) inset, 0 0 1px 1px rgb(var(--color-white), 0.2) inset;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -478,17 +478,17 @@
 
         --lime-elevated-surface-background-color: rgb(var(--contrast-200));
 
-        --button-shadow-normal: 0 0.09375rem 0.225rem 0 rgba(var(--color-black), 0.632), 0 0.01875rem 0.05625rem 0 rgba(var(--color-black), 0.608);
-        --button-shadow-hovered: 0 0.125rem 0.375rem rgba(var(--color-black), 0.55), 0 0.375rem 0.625rem rgba(var(--color-black), 0.45);
-        --button-shadow-pressed: 0 0.0625rem 0.1875rem 0 rgba(var(--color-black), 0.532), 0 0.01875rem 0.05625rem 0 rgba(var(--color-black), 0.508);
-        --button-shadow-inset: 0 0.03125rem 0.21875rem 0 rgba(var(--color-black), 0.532) inset, 0 0.01875rem 0.05625rem 0 rgba(var(--color-black), 0.508) inset, 0 0 0.25rem rgba(var(--color-white), 0.1);
-        --button-shadow-inset-pressed: 0 0.03125rem 0.34375rem 0 rgba(var(--color-black), 0.532) inset, 0 0.01875rem 0.11875rem 0 rgba(var(--color-black), 0.52) inset, 0 0 0.1875rem rgba(var(--color-white), 0.1);
-        --shadow-depth-8: 0 0.2rem 0.45rem 0 rgba(var(--color-black), 0.532), 0 0.0375rem 0.1125rem 0 rgba(var(--color-black), 0.508);
-        --shadow-depth-8-reversed: 0 -0.2rem 0.45rem 0 rgba(var(--color-black), 0.532), 0 -0.0375rem 0.1125rem 0 rgba(var(--color-black), 0.508);
-        --shadow-depth-16: 0 0.4rem 0.9rem 0 rgba(var(--color-black), 0.532), 0 0.075rem 0.225rem 0 rgba(var(--color-black), 0.508);
-        --shadow-depth-64: 0 1.6rem 3.6rem 0 rgba(var(--color-black), 0.22), 0 0.3rem 0.9rem 0 rgba(var(--color-black), 0.58);
-        --shadow-inflated-8: -0.125rem -0.125rem 0.375rem rgba(var(--color-black), 0.21), -0.25rem -0.25rem 0.625rem rgba(var(--color-white), 0.08), 0.25rem 0.25rem 0.625rem rgba(var(--color-black), 0.46), 0.0625rem 0.0625rem 0.625rem rgba(var(--color-white), 0.16), -1px -1px 0 1px rgba(var(--color-black), 0.37) inset, 0 0 1px 1px rgba(var(--color-white), 0.2) inset;
-        --shadow-inflated-16: -0.1875rem -0.1875rem 0.375rem rgba(var(--color-black), 0.21), -0.375rem -0.375rem 1rem rgba(var(--color-white), 0.1), 0.375rem 0.375rem 1rem rgba(var(--color-black), 0.46), 0.125rem 0.125rem 0.625rem rgba(var(--color-white), 0.16), -1px -1px 0 1px rgba(var(--color-black), 0.37) inset, 0 0 1px 1px rgba(var(--color-white), 0.2) inset;
-        --shadow-inflated-64: -0.1875rem -0.1875rem 0.375rem rgba(var(--color-black), 0.21), -0.625rem -0.625rem 1.875rem rgba(var(--color-white), 0.2), 0.625rem 0.625rem 2.25rem rgba(var(--color-black), 0.46), 0.125rem 0.125rem 0.625rem rgba(var(--color-white), 0.16), -1px -1px 0 1px rgba(var(--color-black), 0.37) inset, 0 0 1px 1px rgba(var(--color-white), 0.2) inset;
+        --button-shadow-normal: 0 0.09375rem 0.225rem 0 rgb(var(--color-black), 0.632), 0 0.01875rem 0.05625rem 0 rgb(var(--color-black), 0.608), var(--shadow-brighten-edges-inside);
+        --button-shadow-hovered: 0 0.125rem 0.375rem rgb(var(--color-black), 0.55), 0 0.4rem 0.475rem -0.3rem rgb(var(--color-black), 0.45), var(--shadow-brighten-edges-inside);
+        --button-shadow-pressed: 0 0.0625rem 0.1875rem 0 rgb(var(--color-black), 0.532), 0 0.01875rem 0.05625rem 0 rgb(var(--color-black), 0.508), var(--shadow-brighten-edges-inside);
+        --button-shadow-inset: 0 0.03125rem 0.21875rem 0 rgb(var(--color-black), 0.532) inset, 0 0.01875rem 0.05625rem 0 rgb(var(--color-black), 0.508) inset, 0 0 0.25rem rgb(var(--color-white), 0.1), var(--shadow-brighten-edges-outside);
+        --button-shadow-inset-pressed: 0 0.03125rem 0.34375rem 0 rgb(var(--color-black), 0.532) inset, 0 0.01875rem 0.11875rem 0 rgb(var(--color-black), 0.52) inset, 0 -1px 0.3rem rgb(var(--color-white), 0.1), var(--shadow-brighten-edges-outside);
+        --shadow-depth-8: 0 0.2rem 0.45rem 0 rgb(var(--color-black), 0.532), 0 0.0375rem 0.1125rem 0 rgb(var(--color-black), 0.508);
+        --shadow-depth-8-reversed: 0 -0.2rem 0.45rem 0 rgb(var(--color-black), 0.532), 0 -0.0375rem 0.1125rem 0 rgb(var(--color-black), 0.508);
+        --shadow-depth-16: 0 0.4rem 0.9rem 0 rgb(var(--color-black), 0.532), 0 0.075rem 0.225rem 0 rgb(var(--color-black), 0.508);
+        --shadow-depth-64: 0 1.6rem 3.6rem 0 rgb(var(--color-black), 0.22), 0 0.3rem 0.9rem 0 rgb(var(--color-black), 0.58);
+        --shadow-inflated-8: -0.125rem -0.125rem 0.375rem rgb(var(--color-black), 0.21), -0.25rem -0.25rem 0.625rem rgb(var(--color-white), 0.08), 0.25rem 0.25rem 0.625rem rgb(var(--color-black), 0.46), 0.0625rem 0.0625rem 0.625rem rgb(var(--color-white), 0.16), -1px -1px 0 1px rgb(var(--color-black), 0.37) inset, 0 0 1px 1px rgb(var(--color-white), 0.2) inset;
+        --shadow-inflated-16: -0.1875rem -0.1875rem 0.375rem rgb(var(--color-black), 0.21), -0.375rem -0.375rem 1rem rgb(var(--color-white), 0.1), 0.375rem 0.375rem 1rem rgb(var(--color-black), 0.46), 0.125rem 0.125rem 0.625rem rgb(var(--color-white), 0.16), -1px -1px 0 1px rgb(var(--color-black), 0.37) inset, 0 0 1px 1px rgb(var(--color-white), 0.2) inset;
+        --shadow-inflated-64: -0.1875rem -0.1875rem 0.375rem rgb(var(--color-black), 0.21), -0.625rem -0.625rem 1.875rem rgb(var(--color-white), 0.2), 0.625rem 0.625rem 2.25rem rgb(var(--color-black), 0.46), 0.125rem 0.125rem 0.625rem rgb(var(--color-white), 0.16), -1px -1px 0 1px rgb(var(--color-black), 0.37) inset, 0 0 1px 1px rgb(var(--color-white), 0.2) inset;
     }
 }

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

@@ -63,33 +63,55 @@
     }
 }
 
+$clickable-normal-state-transitions: (
+    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)
+);
+
 @mixin is-elevated-clickable(
     $color: var(--mdc-theme-on-surface),
     $color--hovered: var(--mdc-theme-on-surface),
     $background-color: var(--lime-elevated-surface-background-color),
     $background-color--hovered: var(--lime-elevated-surface-background-color)
 ) {
-    transition:
-        color 0.2s ease,
-        background-color 0.2s ease,
-        box-shadow 0.2s ease,
-        transform 0.1s ease-out;
+    transition: $clickable-normal-state-transitions;
 
     cursor: pointer;
     color: $color;
     background-color: $background-color;
     box-shadow: var(--button-shadow-normal);
 
+    &:hover,
+    &:focus,
+    &:focus-visible {
+        will-change: color, background-color, box-shadow, transform;
+    }
+
     &:hover {
+        transform: translate3d(0, -0.04rem, 0);
         color: $color--hovered;
         background-color: $background-color--hovered;
         box-shadow: var(--button-shadow-hovered);
     }
 
     &:active {
+        --limel-clickable-transform-timing-function: cubic-bezier(
+            0.83,
+            -0.15,
+            0.49,
+            1.16
+        );
+        transform: translate3d(0, 0.05rem, 0);
         box-shadow: var(--button-shadow-pressed);
+    }
 
-        transform: translate3d(0, 0.08rem, 0);
+    &:hover,
+    &:active {
+        --limel-clickable-transition-speed: 0.2s;
+        --limel-clickable-transform-speed: 0.16s;
     }
 }
 
@@ -100,27 +122,42 @@
     $background-color--hovered: var(--lime-elevated-surface-background-color),
     $background-color--inset: var(--mdc-theme-surface)
 ) {
-    transition:
-        color 0.2s ease,
-        background-color 0.2s ease,
-        box-shadow 0.2s ease,
-        transform 0.1s ease-out;
+    transition: $clickable-normal-state-transitions;
 
     cursor: pointer;
     color: $color;
     background-color: $background-color;
     box-shadow: var(--button-shadow-normal);
 
+    &:hover,
+    &:focus,
+    &:focus-visible {
+        will-change: color, background-color, box-shadow, transform;
+    }
+
     &:hover {
+        transform: translate3d(0, 0.01rem, 0);
         color: $color--hovered;
         background-color: $background-color--hovered;
         box-shadow: var(--button-shadow-hovered);
     }
 
     &:active {
+        --limel-clickable-transform-timing-function: cubic-bezier(
+            0.83,
+            -0.15,
+            0.49,
+            1.16
+        );
+        transform: translate3d(0, 0.05rem, 0);
         background-color: $background-color--inset;
         box-shadow: var(--button-shadow-inset-pressed);
-        transform: translate3d(0, 0.05rem, 0);
+    }
+
+    &:hover,
+    &:active {
+        --limel-clickable-transition-speed: 0.2s;
+        --limel-clickable-transform-speed: 0.16s;
     }
 }
 
@@ -130,26 +167,40 @@
     $color--hovered: var(--mdc-theme-on-surface),
     $background-color--hovered: var(--lime-elevated-surface-background-color)
 ) {
-    transition:
-        color 0.2s ease,
-        background-color 0.2s ease,
-        box-shadow 0.2s ease,
-        transform 0.1s ease-out;
+    transition: $clickable-normal-state-transitions;
 
     cursor: pointer;
     color: $color;
     background-color: $background-color;
 
+    &:hover,
+    &:focus,
+    &:focus-visible {
+        will-change: color, background-color, box-shadow, transform;
+    }
+
     &:hover {
+        transform: translate3d(0, 0.01rem, 0);
         color: $color--hovered;
         background-color: $background-color--hovered;
         box-shadow: var(--button-shadow-hovered);
     }
 
     &:active {
+        --limel-clickable-transform-timing-function: cubic-bezier(
+            0.83,
+            -0.15,
+            0.49,
+            1.16
+        );
+        transform: translate3d(0, 0.05rem, 0);
         box-shadow: var(--button-shadow-pressed);
+    }
 
-        transform: translate3d(0, 0.08rem, 0);
+    &:hover,
+    &:active {
+        --limel-clickable-transition-speed: 0.2s;
+        --limel-clickable-transform-speed: 0.16s;
     }
 }
 
@@ -160,26 +211,41 @@
     $background-color--hovered: var(--lime-elevated-surface-background-color),
     $background-color--inset: var(--mdc-theme-surface)
 ) {
-    transition:
-        color 0.2s ease,
-        background-color 0.2s ease,
-        box-shadow 0.2s ease,
-        transform 0.1s ease-out;
+    transition: $clickable-normal-state-transitions;
 
     cursor: pointer;
     color: $color;
     background-color: $background-color;
 
+    &:hover,
+    &:focus,
+    &:focus-visible {
+        will-change: color, background-color, box-shadow, transform;
+    }
+
     &:hover {
+        transform: translate3d(0, -0.04rem, 0);
         color: $color--hovered;
         background-color: $background-color--hovered;
         box-shadow: var(--button-shadow-hovered);
     }
 
     &:active {
+        --limel-clickable-transform-timing-function: cubic-bezier(
+            0.83,
+            -0.15,
+            0.49,
+            1.16
+        );
+        transform: translate3d(0, 0.05rem, 0);
         background-color: $background-color--inset;
         box-shadow: var(--button-shadow-inset-pressed);
-        transform: translate3d(0, 0.05rem, 0);
+    }
+
+    &:hover,
+    &:active {
+        --limel-clickable-transition-speed: 0.2s;
+        --limel-clickable-transform-speed: 0.16s;
     }
 }
 

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

@@ -1,116 +1,92 @@
-@use './functions';
-@use './mixins';
-
 :root {
+    --shadow-brighten-edges-inside: 0 -1px 0.26rem rgb(var(--color-white), 0.06)
+            inset,
+        0 0 0 1px rgb(var(--color-white), 0.06) inset;
+    --shadow-brighten-edges-outside: 0 0.125rem 0.26rem
+            rgb(var(--color-white), 0.06),
+        0 0 0 1px rgb(var(--color-white), 0.06);
+
     // Could be useful for highlighting areas or elements that are focused, using a box-shadow.
     // However, we recommend to use `var(--shadow-depth-8-focus)` to get a more coherent visual effect.
-    --shadow-focused-state: 0 0 0 #{functions.pxToRem(2)} var(--mdc-theme-primary);
+    --shadow-focused-state: 0 0 0 0.125rem var(--mdc-theme-primary);
 
     // Could be useful for highlighting areas or elements that contain errors, using a box-shadow.
     // However, we recommend to use `var(--shadow-depth-8-error)` to get a more coherent visual effect.
-    --shadow-error-state: 0 0 0 #{functions.pxToRem(2)} rgb(var(--color-red-default));
+    --shadow-error-state: 0 0 0 0.125rem rgb(var(--color-red-default));
 
     // Good for buttons and clickables such as select dropdowns, or slider grabbers
-    --button-shadow-normal: 0 #{functions.pxToRem(1.5)} #{functions.pxToRem(
-                3.6
-            )} 0 rgba(var(--color-black), 0.232),
-        0 #{functions.pxToRem(0.3)} #{functions.pxToRem(0.9)} 0
-            rgba(var(--color-black), 0.208);
-    --button-shadow-hovered: 0 #{functions.pxToRem(2)} #{functions.pxToRem(6)}
-            rgba(var(--color-black), 0.15),
-        0 #{functions.pxToRem(6)} #{functions.pxToRem(10)}
-            rgba(var(--color-black), 0.05);
-    --button-shadow-pressed: 0 #{functions.pxToRem(1)} #{functions.pxToRem(3)} 0
-            rgba(var(--color-black), 0.132),
-        0 #{functions.pxToRem(0.3)} #{functions.pxToRem(0.9)} 0
-            rgba(var(--color-black), 0.108);
-    --button-shadow-inset: 0 #{functions.pxToRem(0.5)} #{functions.pxToRem(3.5)}
-            0 rgba(var(--color-black), 0.132) inset,
-        0 #{functions.pxToRem(0.3)} #{functions.pxToRem(0.9)} 0
-            rgba(var(--color-black), 0.108) inset,
-        0 0 #{functions.pxToRem(4)} rgba(var(--color-white), 0.9);
-    --button-shadow-inset-pressed: 0 #{functions.pxToRem(0.5)} #{functions.pxToRem(
-                5.5
-            )} 0 rgba(var(--color-black), 0.132) inset,
-        0 #{functions.pxToRem(0.3)} #{functions.pxToRem(1.9)} 0
-            rgba(var(--color-black), 0.12) inset,
-        0 0 #{functions.pxToRem(3)} rgba(var(--color-white), 0.9);
+    --button-shadow-normal: 0 0.09375rem 0.225rem 0
+            rgb(var(--color-black), 0.232),
+        0 0.01875rem 0.05625rem 0 rgb(var(--color-black), 0.208),
+        var(--shadow-brighten-edges-inside);
+    --button-shadow-hovered: 0 0.125rem 0.375rem rgb(var(--color-black), 0.25),
+        0 0.4rem 0.475rem -0.3rem rgb(var(--color-black), 0.1),
+        var(--shadow-brighten-edges-inside);
+    --button-shadow-pressed: 0 0.0625rem 0.1875rem 0
+            rgb(var(--color-black), 0.132),
+        0 0.01875rem 0.05625rem 0 rgb(var(--color-black), 0.108),
+        var(--shadow-brighten-edges-inside);
+    --button-shadow-inset: 0 0.03125rem 0.21875rem 0
+            rgb(var(--color-black), 0.132) inset,
+        0 0.01875rem 0.05625rem 0 rgb(var(--color-black), 0.108) inset,
+        var(--shadow-brighten-edges-outside),
+        0 0 0.25rem rgb(var(--color-white), 0.9);
+    --button-shadow-inset-pressed: 0 0.03125rem 0.34375rem 0
+            rgb(var(--color-black), 0.132) inset,
+        0 0.01875rem 0.11875rem 0 rgb(var(--color-black), 0.12) inset,
+        0 -1px 0.3rem rgb(var(--color-white), 0.9),
+        var(--shadow-brighten-edges-outside);
 
     // Good for Command bars, Command dropdowns, Context menus
-    --shadow-depth-8: 0 #{functions.pxToRem(3.2)} #{functions.pxToRem(7.2)} 0
-            rgba(var(--color-black), 0.132),
-        0 #{functions.pxToRem(0.6)} #{functions.pxToRem(1.8)} 0
-            rgba(var(--color-black), 0.108);
+    --shadow-depth-8: 0 0.2rem 0.45rem 0 rgb(var(--color-black), 0.132),
+        0 0.0375rem 0.1125rem 0 rgb(var(--color-black), 0.108);
     // Same as above, but when element is focused
     --shadow-depth-8-focused: var(--shadow-depth-8), var(--shadow-focused-state);
     // Same as above, but when element is indicating error or warning
     --shadow-depth-8-error: var(--shadow-depth-8), var(--shadow-error-state);
     // Same as above, but light source is below the element, good for bottom bars, etc...
-    --shadow-depth-8-reversed: 0 #{functions.pxToRem(-3.2)} #{functions.pxToRem(
-                7.2
-            )} 0 rgba(var(--color-black), 0.132),
-        0 #{functions.pxToRem(-0.6)} #{functions.pxToRem(1.8)} 0
-            rgba(var(--color-black), 0.108);
+    --shadow-depth-8-reversed: 0 -0.2rem 0.45rem 0 rgb(var(--color-black), 0.132),
+        0 -0.0375rem 0.1125rem 0 rgb(var(--color-black), 0.108);
 
     // Good for Teaching callouts, Search results dropdown, cards, Tooltips
-    --shadow-depth-16: 0 #{functions.pxToRem(6.4)} #{functions.pxToRem(14.4)} 0
-            rgba(var(--color-black), 0.132),
-        0 #{functions.pxToRem(1.2)} #{functions.pxToRem(3.6)} 0
-            rgba(var(--color-black), 0.108);
+    --shadow-depth-16: 0 0.4rem 0.9rem 0 rgb(var(--color-black), 0.132),
+        0 0.075rem 0.225rem 0 rgb(var(--color-black), 0.108);
 
     // Same as above, but when element is focused
     --shadow-depth-16-focused: var(--shadow-depth-16),
         var(--shadow-focused-state);
 
     // Good for Pop up dialogs
-    --shadow-depth-64: 0 #{functions.pxToRem(25.6)} #{functions.pxToRem(57.6)} 0
-            rgba(var(--color-black), 0.22),
-        0 #{functions.pxToRem(4.8)} #{functions.pxToRem(14.4)} 0
-            rgba(var(--color-black), 0.18);
+    --shadow-depth-64: 0 1.6rem 3.6rem 0 rgb(var(--color-black), 0.22),
+        0 0.3rem 0.9rem 0 rgb(var(--color-black), 0.18);
 
     // Same as above, but when element is focused
     --shadow-depth-64-focused: var(--shadow-depth-64),
         var(--shadow-focused-state);
 
-    --shadow-inflated-8: #{functions.pxToRem(-2)} #{functions.pxToRem(-2)} #{functions.pxToRem(
-                6
-            )} rgba(var(--color-black), 0.01),
-        #{functions.pxToRem(-4)} #{functions.pxToRem(-4)} #{functions.pxToRem(
-                10
-            )} rgba(var(--color-white), 0.6),
-        #{functions.pxToRem(4)} #{functions.pxToRem(4)} #{functions.pxToRem(10)}
-            rgba(var(--color-black), 0.05),
-        #{functions.pxToRem(1)} #{functions.pxToRem(1)} #{functions.pxToRem(10)}
-            rgba(var(--color-white), 0.7),
-        -1px -1px 0 1px rgba(var(--color-black), 0.07) inset,
-        0 0 1px 1px rgba(var(--color-white), 0.98) inset;
-    --shadow-inflated-16: #{functions.pxToRem(-3)} #{functions.pxToRem(-3)} #{functions.pxToRem(
-                6
-            )} rgba(var(--color-black), 0.01),
-        #{functions.pxToRem(-6)} #{functions.pxToRem(-6)} #{functions.pxToRem(
-                16
-            )} rgba(var(--color-white), 0.8),
-        #{functions.pxToRem(6)} #{functions.pxToRem(6)} #{functions.pxToRem(16)}
-            rgba(var(--color-black), 0.05),
-        #{functions.pxToRem(2)} #{functions.pxToRem(2)} #{functions.pxToRem(10)}
-            rgba(var(--color-white), 0.7),
-        -1px -1px 0 1px rgba(var(--color-black), 0.07) inset,
-        0 0 1px 1px rgba(var(--color-white), 0.98) inset;
-    --shadow-inflated-64: #{functions.pxToRem(-3)} #{functions.pxToRem(-3)} #{functions.pxToRem(
-                6
-            )} rgba(var(--color-black), 0.01),
-        #{functions.pxToRem(-10)} #{functions.pxToRem(-10)} #{functions.pxToRem(
-                30
-            )} rgba(var(--color-white), 1),
-        #{functions.pxToRem(10)} #{functions.pxToRem(10)} #{functions.pxToRem(
-                36
-            )} rgba(var(--color-black), 0.06),
-        #{functions.pxToRem(2)} #{functions.pxToRem(2)} #{functions.pxToRem(10)}
-            rgba(var(--color-white), 0.7),
-        -1px -1px 0 1px rgba(var(--color-black), 0.07) inset,
-        0 0 1px 1px rgba(var(--color-white), 0.98) inset;
+    --shadow-inflated-8: -0.125rem -0.125rem 0.375rem rgb(var(--color-black), 0.01),
+        -0.25rem -0.25rem 0.625rem rgb(var(--color-white), 0.6),
+        0.25rem 0.25rem 0.625rem rgb(var(--color-black), 0.05),
+        0.0625rem 0.0625rem 0.625rem rgb(var(--color-white), 0.7),
+        -1px -1px 0 1px rgb(var(--color-black), 0.07) inset,
+        0 0 1px 1px rgb(var(--color-white), 0.98) inset;
+    --shadow-inflated-16: -0.1875rem -0.1875rem 0.375rem rgb(var(--color-black), 0.01),
+        -0.375rem -0.375rem 1rem rgb(var(--color-white), 0.8),
+        0.375rem 0.375rem 1rem rgb(var(--color-black), 0.05),
+        0.125rem 0.125rem 0.625rem rgb(var(--color-white), 0.7),
+        -1px -1px 0 1px rgb(var(--color-black), 0.07) inset,
+        0 0 1px 1px rgb(var(--color-white), 0.98) inset;
+    --shadow-inflated-64: -0.1875rem -0.1875rem 0.375rem rgb(var(--color-black), 0.01),
+        -0.625rem -0.625rem 1.875rem rgb(var(--color-white), 1),
+        0.625rem 0.625rem 2.25rem rgb(var(--color-black), 0.06),
+        0.125rem 0.125rem 0.625rem rgb(var(--color-white), 0.7),
+        -1px -1px 0 1px rgb(var(--color-black), 0.07) inset,
+        0 0 1px 1px rgb(var(--color-white), 0.98) inset;
 }
 
+// @include mixins.in(dark-mode) {
+// latest version is found in `color-palette-extended.css`
+// }
 // ⚠️ This section below is commented out.
 // It's contents are moved to src/style/color-palette-extended.css
 //
@@ -120,95 +96,3 @@
 // The shadows will get rendered too dark, due to `@media (prefers-color-scheme: dark)`
 // rule from the mixin. The day we generate `.css` files from these `.scss` files,
 // we can do it differently.
-
-// @include mixins.in(dark-mode) {
-//     --button-shadow-normal: 0 #{functions.pxToRem(1.5)} #{functions.pxToRem(
-//                 3.6
-//             )} 0 rgba(var(--color-black), 0.632),
-//         0 #{functions.pxToRem(0.3)} #{functions.pxToRem(0.9)} 0
-//             rgba(var(--color-black), 0.608);
-
-//     --button-shadow-hovered: 0 #{functions.pxToRem(2)} #{functions.pxToRem(6)}
-//             rgba(var(--color-black), 0.55),
-//         0 #{functions.pxToRem(6)} #{functions.pxToRem(10)}
-//             rgba(var(--color-black), 0.45);
-
-//     --button-shadow-pressed: 0 #{functions.pxToRem(1)} #{functions.pxToRem(3)} 0
-//             rgba(var(--color-black), 0.532),
-//         0 #{functions.pxToRem(0.3)} #{functions.pxToRem(0.9)} 0
-//             rgba(var(--color-black), 0.508);
-
-//     --button-shadow-inset: 0 #{functions.pxToRem(0.5)} #{functions.pxToRem(3.5)}
-//             0 rgba(var(--color-black), 0.532) inset,
-//         0 #{functions.pxToRem(0.3)} #{functions.pxToRem(0.9)} 0
-//             rgba(var(--color-black), 0.508) inset,
-//         0 0 #{functions.pxToRem(4)} rgba(var(--color-white), 0.1);
-
-//     --button-shadow-inset-pressed: 0 #{functions.pxToRem(0.5)} #{functions.pxToRem(
-//                 5.5
-//             )} 0 rgba(var(--color-black), 0.532) inset,
-//         0 #{functions.pxToRem(0.3)} #{functions.pxToRem(1.9)} 0
-//             rgba(var(--color-black), 0.52) inset,
-//         0 0 #{functions.pxToRem(3)} rgba(var(--color-white), 0.1);
-
-//     --shadow-depth-8: 0 #{functions.pxToRem(3.2)} #{functions.pxToRem(7.2)} 0
-//             rgba(var(--color-black), 0.532),
-//         0 #{functions.pxToRem(0.6)} #{functions.pxToRem(1.8)} 0
-//             rgba(var(--color-black), 0.508);
-
-//     --shadow-depth-8-reversed: 0 #{functions.pxToRem(-3.2)} #{functions.pxToRem(
-//                 7.2
-//             )} 0 rgba(var(--color-black), 0.532),
-//         0 #{functions.pxToRem(-0.6)} #{functions.pxToRem(1.8)} 0
-//             rgba(var(--color-black), 0.508);
-
-//     --shadow-depth-16: 0 #{functions.pxToRem(6.4)} #{functions.pxToRem(14.4)} 0
-//             rgba(var(--color-black), 0.532),
-//         0 #{functions.pxToRem(1.2)} #{functions.pxToRem(3.6)} 0
-//             rgba(var(--color-black), 0.508);
-
-//     --shadow-depth-64: 0 #{functions.pxToRem(25.6)} #{functions.pxToRem(57.6)} 0
-//             rgba(var(--color-black), 0.22),
-//         0 #{functions.pxToRem(4.8)} #{functions.pxToRem(14.4)} 0
-//             rgba(var(--color-black), 0.58);
-
-//     --shadow-inflated-8: #{functions.pxToRem(-2)} #{functions.pxToRem(-2)} #{functions.pxToRem(
-//                 6
-//             )} rgba(var(--color-black), 0.21),
-//         #{functions.pxToRem(-4)} #{functions.pxToRem(-4)} #{functions.pxToRem(
-//                 10
-//             )} rgba(var(--color-white), 0.08),
-//         #{functions.pxToRem(4)} #{functions.pxToRem(4)} #{functions.pxToRem(10)}
-//             rgba(var(--color-black), 0.46),
-//         #{functions.pxToRem(1)} #{functions.pxToRem(1)} #{functions.pxToRem(10)}
-//             rgba(var(--color-white), 0.16),
-//         -1px -1px 0 1px rgba(var(--color-black), 0.37) inset,
-//         0 0 1px 1px rgba(var(--color-white), 0.2) inset;
-
-//     --shadow-inflated-16: #{functions.pxToRem(-3)} #{functions.pxToRem(-3)} #{functions.pxToRem(
-//                 6
-//             )} rgba(var(--color-black), 0.21),
-//         #{functions.pxToRem(-6)} #{functions.pxToRem(-6)} #{functions.pxToRem(
-//                 16
-//             )} rgba(var(--color-white), 0.1),
-//         #{functions.pxToRem(6)} #{functions.pxToRem(6)} #{functions.pxToRem(16)}
-//             rgba(var(--color-black), 0.46),
-//         #{functions.pxToRem(2)} #{functions.pxToRem(2)} #{functions.pxToRem(10)}
-//             rgba(var(--color-white), 0.16),
-//         -1px -1px 0 1px rgba(var(--color-black), 0.37) inset,
-//         0 0 1px 1px rgba(var(--color-white), 0.2) inset;
-
-//     --shadow-inflated-64: #{functions.pxToRem(-3)} #{functions.pxToRem(-3)} #{functions.pxToRem(
-//                 6
-//             )} rgba(var(--color-black), 0.21),
-//         #{functions.pxToRem(-10)} #{functions.pxToRem(-10)} #{functions.pxToRem(
-//                 30
-//             )} rgba(var(--color-white), 0.2),
-//         #{functions.pxToRem(10)} #{functions.pxToRem(10)} #{functions.pxToRem(
-//                 36
-//             )} rgba(var(--color-black), 0.46),
-//         #{functions.pxToRem(2)} #{functions.pxToRem(2)} #{functions.pxToRem(10)}
-//             rgba(var(--color-white), 0.16),
-//         -1px -1px 0 1px rgba(var(--color-black), 0.37) inset,
-//         0 0 1px 1px rgba(var(--color-white), 0.2) inset;
-// }