@limetech/lime-elements 37.1.0-next.81 → 37.1.0-next.83

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## [37.1.0-next.83](https://github.com/Lundalogik/lime-elements/compare/v37.1.0-next.82...v37.1.0-next.83) (2024-01-05)
+
+
+### Bug Fixes
+
+
+* **split-button:** use the same color for the menu trigger ([05e4ee6](https://github.com/Lundalogik/lime-elements/commit/05e4ee6f332eaf85f2101b9a827e7307742afeee))
+
+## [37.1.0-next.82](https://github.com/Lundalogik/lime-elements/compare/v37.1.0-next.81...v37.1.0-next.82) (2024-01-04)
+
+
+### Bug Fixes
+
+
+* **help:** enable scrolling in popover for tall content ([ff3da3d](https://github.com/Lundalogik/lime-elements/commit/ff3da3d9f33237bc7453bff8cfc116874ff21f2e))
+
 ## [37.1.0-next.81](https://github.com/Lundalogik/lime-elements/compare/v37.1.0-next.80...v37.1.0-next.81) (2024-01-04)
 
 

package/dist/cjs/limel-help-content.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-38eb64b5.js');
 
-const limelHelpContentCss = "@charset \"UTF-8\";:host(limel-help-content){display:flex;box-sizing:border-box;flex-direction:column;gap:0.5rem;max-height:30rem}limel-markdown{--limel-overflow-mask-vertical:linear-gradient(\n      to bottom,\n      transparent 0%,\n      black calc(0% + var(--limel-top-edge-fade-height, 1rem)),\n      black calc(100% - var(--limel-bottom-edge-fade-height, 1rem)),\n      transparent 100%\n  );-webkit-mask-image:var(--limel-overflow-mask-vertical);mask-image:var(--limel-overflow-mask-vertical);padding-top:var(--limel-top-edge-fade-height, 1rem);padding-bottom:var(--limel-bottom-edge-fade-height, 1rem);padding-right:1rem;padding-left:1rem;min-height:0;min-width:0;overflow:hidden auto}a{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;position:relative;cursor:pointer;transition:color 0.2s ease;color:rgb(var(--color-blue-default));position:sticky;bottom:0;text-decoration:none;font-size:0.875rem;padding-bottom:0.125rem}a:before{transition:opacity 0.2s ease, transform 0.3s ease-out;content:\"\";position:absolute;inset:auto 0 0 0;width:calc(100% - 0.5rem);margin:auto;height:0.125rem;border-radius:1rem;background-color:currentColor;opacity:0;transform:scale(0.6)}a:hover{color:rgb(var(--color-blue-default))}a:hover:before{opacity:0.3;transform:scale(1)}span{padding:0 1rem 0.5rem 1rem;min-width:0}";
+const limelHelpContentCss = "@charset \"UTF-8\";:host(limel-help-content){display:flex;box-sizing:border-box;flex-direction:column;gap:0.5rem;max-height:30rem;height:100%}limel-markdown{--limel-overflow-mask-vertical:linear-gradient(\n      to bottom,\n      transparent 0%,\n      black calc(0% + var(--limel-top-edge-fade-height, 1rem)),\n      black calc(100% - var(--limel-bottom-edge-fade-height, 1rem)),\n      transparent 100%\n  );-webkit-mask-image:var(--limel-overflow-mask-vertical);mask-image:var(--limel-overflow-mask-vertical);padding-top:var(--limel-top-edge-fade-height, 1rem);padding-bottom:var(--limel-bottom-edge-fade-height, 1rem);padding-right:1rem;padding-left:1rem;min-height:0;min-width:0;overflow:hidden auto}a{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;position:relative;cursor:pointer;transition:color 0.2s ease;color:rgb(var(--color-blue-default));position:sticky;bottom:0;text-decoration:none;font-size:0.875rem;padding-bottom:0.125rem}a:before{transition:opacity 0.2s ease, transform 0.3s ease-out;content:\"\";position:absolute;inset:auto 0 0 0;width:calc(100% - 0.5rem);margin:auto;height:0.125rem;border-radius:1rem;background-color:currentColor;opacity:0;transform:scale(0.6)}a:hover{color:rgb(var(--color-blue-default))}a:hover:before{opacity:0.3;transform:scale(1)}span{padding:0 1rem 0.5rem 1rem;min-width:0}";
 
 const HelpContent = class {
   constructor(hostRef) {

package/dist/cjs/limel-help-content.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"limel-help-content.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,mBAAmB,GAAG,yyCAAyyC;;MCgBxzC,WAAW;;;IAcZ,uBAAkB,GAAG;;MACzB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;QACpB,OAAO;OACV;MAED,QACIA,sBACIA,eACI,IAAI,EAAE,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI,EAC7B,MAAM,EAAE,MAAA,IAAI,CAAC,YAAY,0CAAE,MAAM,EACjC,KAAK,EAAE,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,EAC/B,QAAQ,EAAC,GAAG,IAEX,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI,CACxB,CACD,EACT;KACL,CAAC;;;;EAxBK,MAAM;IACT,OAAO;MACHA,4BAAgB,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI;MACrC,IAAI,CAAC,kBAAkB,EAAE;KAC5B,CAAC;GACL;;;;;;","names":["h"],"sources":["./src/components/help/limel-help-content.scss?tag=limel-help-content&encapsulation=shadow","./src/components/help/help-content.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n:host(limel-help-content) {\n    display: flex;\n    box-sizing: border-box;\n    flex-direction: column;\n    gap: 0.5rem;\n\n    max-height: 30rem;\n}\n\nlimel-markdown {\n    @include mixins.fade-out-overflowed-content-on-edges(vertically);\n\n    padding-right: 1rem;\n    padding-left: 1rem;\n    min-height: 0;\n    min-width: 0;\n    overflow: hidden auto;\n}\n\na {\n    @include mixins.truncate-text;\n    @include mixins.hyperlink;\n\n    position: sticky;\n    bottom: 0;\n\n    text-decoration: none;\n    font-size: 0.875rem;\n    padding-bottom: 0.125rem;\n}\n\nspan {\n    padding: 0 1rem 0.5rem 1rem;\n    min-width: 0;\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { Link } from '../../interface';\n\n/**\n * Help content\n * This is scrollable content that is placed in the popover of the Help component.\n * Moved here mostly to avoid having inlined styles in the parent component.\n * Since you cannot send styles to the Portal component, we need to have this\n * child component.\n * @private\n */\n@Component({\n    tag: 'limel-help-content',\n    shadow: true,\n    styleUrl: 'limel-help-content.scss',\n})\nexport class HelpContent {\n    @Prop()\n    public value: string;\n\n    @Prop()\n    public readMoreLink?: Link;\n\n    public render() {\n        return [\n            <limel-markdown value={this.value} />,\n            this.renderReadMoreLink(),\n        ];\n    }\n\n    private renderReadMoreLink = () => {\n        if (!this.readMoreLink) {\n            return;\n        }\n\n        return (\n            <span>\n                <a\n                    href={this.readMoreLink?.href}\n                    target={this.readMoreLink?.target}\n                    title={this.readMoreLink?.title}\n                    tabindex=\"0\"\n                >\n                    {this.readMoreLink?.text}\n                </a>\n            </span>\n        );\n    };\n}\n"],"version":3}
+{"file":"limel-help-content.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,mBAAmB,GAAG,qzCAAqzC;;MCgBp0C,WAAW;;;IAcZ,uBAAkB,GAAG;;MACzB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;QACpB,OAAO;OACV;MAED,QACIA,sBACIA,eACI,IAAI,EAAE,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI,EAC7B,MAAM,EAAE,MAAA,IAAI,CAAC,YAAY,0CAAE,MAAM,EACjC,KAAK,EAAE,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,EAC/B,QAAQ,EAAC,GAAG,IAEX,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI,CACxB,CACD,EACT;KACL,CAAC;;;;EAxBK,MAAM;IACT,OAAO;MACHA,4BAAgB,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI;MACrC,IAAI,CAAC,kBAAkB,EAAE;KAC5B,CAAC;GACL;;;;;;","names":["h"],"sources":["./src/components/help/limel-help-content.scss?tag=limel-help-content&encapsulation=shadow","./src/components/help/help-content.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n:host(limel-help-content) {\n    display: flex;\n    box-sizing: border-box;\n    flex-direction: column;\n    gap: 0.5rem;\n\n    max-height: 30rem;\n    height: 100%;\n}\n\nlimel-markdown {\n    @include mixins.fade-out-overflowed-content-on-edges(vertically);\n\n    padding-right: 1rem;\n    padding-left: 1rem;\n    min-height: 0;\n    min-width: 0;\n    overflow: hidden auto;\n}\n\na {\n    @include mixins.truncate-text;\n    @include mixins.hyperlink;\n\n    position: sticky;\n    bottom: 0;\n\n    text-decoration: none;\n    font-size: 0.875rem;\n    padding-bottom: 0.125rem;\n}\n\nspan {\n    padding: 0 1rem 0.5rem 1rem;\n    min-width: 0;\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { Link } from '../../interface';\n\n/**\n * Help content\n * This is scrollable content that is placed in the popover of the Help component.\n * Moved here mostly to avoid having inlined styles in the parent component.\n * Since you cannot send styles to the Portal component, we need to have this\n * child component.\n * @private\n */\n@Component({\n    tag: 'limel-help-content',\n    shadow: true,\n    styleUrl: 'limel-help-content.scss',\n})\nexport class HelpContent {\n    @Prop()\n    public value: string;\n\n    @Prop()\n    public readMoreLink?: Link;\n\n    public render() {\n        return [\n            <limel-markdown value={this.value} />,\n            this.renderReadMoreLink(),\n        ];\n    }\n\n    private renderReadMoreLink = () => {\n        if (!this.readMoreLink) {\n            return;\n        }\n\n        return (\n            <span>\n                <a\n                    href={this.readMoreLink?.href}\n                    target={this.readMoreLink?.target}\n                    title={this.readMoreLink?.title}\n                    tabindex=\"0\"\n                >\n                    {this.readMoreLink?.text}\n                </a>\n            </span>\n        );\n    };\n}\n"],"version":3}

package/dist/cjs/limel-split-button.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-38eb64b5.js');
 
-const splitButtonCss = "@charset \"UTF-8\";:host(limel-split-button.has-menu){--button-padding-right:2rem}:host(limel-split-button){display:inline-flex;isolation:isolate}:host(limel-split-button) *{box-sizing:border-box}:host([disabled]){pointer-events:none}limel-button{width:100%}limel-menu{display:flex;justify-content:flex-end;position:relative;z-index:1;padding:0.125rem;margin-left:calc(var(--button-padding-right) * -1);width:var(--button-padding-right)}limel-menu:before{transition:background-color 0.5s ease;content:\"\";position:absolute;inset:0.375rem auto 0.375rem 0.6875rem;width:1px;background-color:currentColor;opacity:0.2}limel-menu:not([disabled]){color:var(--mdc-theme-primary, rgb(var(--color-teal-default)))}limel-menu:not([disabled]).primary{color:var(--mdc-theme-on-primary, rgb(var(--color-white)))}limel-menu[disabled]{color:rgba(var(--contrast-1600), 0.37)}limel-menu:hover:before,limel-menu:focus-within:before{background-color:transparent}.menu-trigger{all:unset;text-align:center;font-weight:bold;border-radius:0.125rem;height:100%;width:1rem}.menu-trigger:not(:disabled){transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:transparent;cursor:pointer}.menu-trigger:not(:disabled):hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.menu-trigger:not(:disabled):active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.menu-trigger:not(:disabled):focus{outline:none}.menu-trigger:not(:disabled):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.menu-trigger:not(:disabled):focus-visible,.menu-trigger:not(:disabled):hover{background-color:rgb(var(--color-white), 0.1)}.menu-trigger:before{content:\"\";position:absolute;inset:-0.25rem;z-index:-1}";
+const splitButtonCss = "@charset \"UTF-8\";:host(limel-split-button.has-menu){--button-padding-right:2rem}:host(limel-split-button){display:inline-flex;isolation:isolate}:host(limel-split-button) *{box-sizing:border-box}:host([disabled]){pointer-events:none}limel-button{width:100%}limel-menu{display:flex;justify-content:flex-end;position:relative;z-index:1;padding:0.125rem;margin-left:calc(var(--button-padding-right) * -1);width:var(--button-padding-right)}limel-menu:before{transition:background-color 0.5s ease;content:\"\";position:absolute;inset:0.375rem auto 0.375rem 0.6875rem;width:1px;background-color:currentColor;opacity:0.2}limel-menu:not([disabled]){color:var(--mdc-theme-primary, rgb(var(--color-teal-default)))}limel-menu:not([disabled]).primary{color:var(--mdc-theme-on-primary, rgb(var(--color-white)))}limel-menu[disabled]{color:rgba(var(--contrast-1600), 0.37)}limel-menu:hover:before,limel-menu:focus-within:before{background-color:transparent}.menu-trigger{all:unset;text-align:center;font-weight:bold;border-radius:0.125rem;height:100%;width:1rem}.menu-trigger:not(:disabled){transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:\"inherit\";background-color:transparent;cursor:pointer}.menu-trigger:not(:disabled):hover{color:\"inherit\";background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.menu-trigger:not(:disabled):active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.menu-trigger:not(:disabled):focus{outline:none}.menu-trigger:not(:disabled):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.menu-trigger:not(:disabled):focus-visible,.menu-trigger:not(:disabled):hover{background-color:rgb(var(--color-white), 0.1)}.menu-trigger:before{content:\"\";position:absolute;inset:-0.25rem;z-index:-1}";
 
 const SplitButton = class {
   constructor(hostRef) {

package/dist/cjs/limel-split-button.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"limel-split-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,k3DAAk3D;;MCuB53D,WAAW;;;;IAuDZ,eAAU,GAAG;MACjB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;QACpB,OAAO;OACV;MAED,QACIA,wBACI,KAAK,EAAE;UACH,OAAO,EAAE,IAAI,CAAC,OAAO;SACxB,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,aAAa,EAAC,QAAQ,IAEtBA,oBACI,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,SAAS,EACd,QAAQ,EAAE,IAAI,CAAC,QAAQ,aAGlB,CACA,EACf;KACL,CAAC;;mBAnEe,KAAK;;oBAYJ,KAAK;iBAMyB,EAAE;;EAQlD,MAAM;IACF,QACIA,QAACC,UAAI,IACD,KAAK,EAAE;QACH,UAAU,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM;OAClC,IAEDD,0BACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB,EACD,IAAI,CAAC,UAAU,EAAE,CACf,EACT;GACL;;;;;;","names":["h","Host"],"sources":["./src/components/split-button/split-button.scss?tag=limel-split-button&encapsulation=shadow","./src/components/split-button/split-button.tsx"],"sourcesContent":["@import '../../style/mixins';\n\n:host(limel-split-button.has-menu) {\n    --button-padding-right: 2rem;\n}\n\n:host(limel-split-button) {\n    display: inline-flex;\n    isolation: isolate;\n\n    * {\n        box-sizing: border-box;\n    }\n}\n\n:host([disabled]) {\n    pointer-events: none;\n}\n\nlimel-button {\n    width: 100%;\n}\n\n$distance-around-trigger: 0.125rem;\n\nlimel-menu {\n    display: flex;\n    justify-content: flex-end;\n    position: relative;\n    z-index: 1;\n\n    padding: $distance-around-trigger;\n    margin-left: calc(var(--button-padding-right) * -1);\n    width: var(--button-padding-right);\n\n    &:before {\n        transition: background-color 0.5s ease;\n        content: '';\n        position: absolute;\n        inset: 0.375rem auto 0.375rem 0.6875rem;\n        width: 1px;\n        background-color: currentColor;\n\n        opacity: 0.2;\n    }\n\n    &:not([disabled]) {\n        color: var(\n            --mdc-theme-primary,\n            rgb(var(--color-teal-default))\n        ); // similar to limel-button text\n\n        &.primary {\n            color: var(\n                --mdc-theme-on-primary,\n                rgb(var(--color-white))\n            ); // similar to limel-button text\n        }\n    }\n\n    &[disabled] {\n        color: rgba(var(--contrast-1600), 0.37); // similar to limel-button text\n    }\n\n    &:hover,\n    &:focus-within {\n        &:before {\n            background-color: transparent;\n        }\n    }\n}\n\n.menu-trigger {\n    all: unset;\n\n    text-align: center;\n    font-weight: bold;\n\n    border-radius: 0.125rem;\n    height: 100%;\n    width: 1rem;\n\n    &:not(:disabled) {\n        @include is-flat-clickable();\n        @include visualize-keyboard-focus();\n        cursor: pointer;\n\n        &:focus-visible,\n        &:hover {\n            background-color: rgb(var(--color-white), 0.1);\n        }\n    }\n\n    &:before {\n        // prevents unintentionally activating the default action,\n        // by clicking on the edge of menu trigger,\n        // which would be activating the default onClick action\n        // on `limel-button`.\n        content: '';\n        position: absolute;\n        inset: -$distance-around-trigger * 2;\n        z-index: -1;\n    }\n}\n","import { Component, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { ListSeparator, MenuItem } from '../../interface';\n\n/**\n * A split button is a button with two components:\n * a button and a side-menu attached to it.\n *\n * Clicking on the button runs a default action,\n * and clicking on the arrow opens up a list of other possible actions.\n *\n * :::warning\n * - Never use a split button for navigation purposes, such as going to next page.\n * The button should only be used for performing commands!\n * - Never use this component instead of a Select or Menu component!\n * :::\n * @exampleComponent limel-example-split-button-basic\n * @exampleComponent limel-example-split-button-repeat-default-command\n */\n@Component({\n    tag: 'limel-split-button',\n    styleUrl: 'split-button.scss',\n    shadow: true,\n})\nexport class SplitButton {\n    /**\n     * The text to show on the default action part of the button.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Set to `true` to make the button primary.\n     */\n    @Prop({ reflect: true })\n    public primary = false;\n\n    /**\n     * Set icon for the button\n     */\n    @Prop({ reflect: true })\n    public icon: string;\n\n    /**\n     * Set to `true` to disable the button.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * A list of items and separators to show in the menu.\n     */\n    @Prop()\n    public items: Array<MenuItem | ListSeparator> = [];\n\n    /**\n     * Is emitted when a menu item is selected.\n     */\n    @Event()\n    public select: EventEmitter<MenuItem>;\n\n    render() {\n        return (\n            <Host\n                class={{\n                    'has-menu': !!this.items.length,\n                }}\n            >\n                <limel-button\n                    label={this.label}\n                    primary={this.primary}\n                    icon={this.icon}\n                    disabled={this.disabled}\n                />\n                {this.renderMenu()}\n            </Host>\n        );\n    }\n\n    private renderMenu = () => {\n        if (!this.items.length) {\n            return;\n        }\n\n        return (\n            <limel-menu\n                class={{\n                    primary: this.primary,\n                }}\n                disabled={this.disabled}\n                items={this.items}\n                openDirection=\"bottom\"\n            >\n                <button\n                    class=\"menu-trigger\"\n                    slot=\"trigger\"\n                    disabled={this.disabled}\n                >\n                    ⋮\n                </button>\n            </limel-menu>\n        );\n    };\n}\n"],"version":3}
+{"file":"limel-split-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,k1DAAk1D;;MCuB51D,WAAW;;;;IAuDZ,eAAU,GAAG;MACjB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;QACpB,OAAO;OACV;MAED,QACIA,wBACI,KAAK,EAAE;UACH,OAAO,EAAE,IAAI,CAAC,OAAO;SACxB,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,aAAa,EAAC,QAAQ,IAEtBA,oBACI,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,SAAS,EACd,QAAQ,EAAE,IAAI,CAAC,QAAQ,aAGlB,CACA,EACf;KACL,CAAC;;mBAnEe,KAAK;;oBAYJ,KAAK;iBAMyB,EAAE;;EAQlD,MAAM;IACF,QACIA,QAACC,UAAI,IACD,KAAK,EAAE;QACH,UAAU,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM;OAClC,IAEDD,0BACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB,EACD,IAAI,CAAC,UAAU,EAAE,CACf,EACT;GACL;;;;;;","names":["h","Host"],"sources":["./src/components/split-button/split-button.scss?tag=limel-split-button&encapsulation=shadow","./src/components/split-button/split-button.tsx"],"sourcesContent":["@import '../../style/mixins';\n\n:host(limel-split-button.has-menu) {\n    --button-padding-right: 2rem;\n}\n\n:host(limel-split-button) {\n    display: inline-flex;\n    isolation: isolate;\n\n    * {\n        box-sizing: border-box;\n    }\n}\n\n:host([disabled]) {\n    pointer-events: none;\n}\n\nlimel-button {\n    width: 100%;\n}\n\n$distance-around-trigger: 0.125rem;\n\nlimel-menu {\n    display: flex;\n    justify-content: flex-end;\n    position: relative;\n    z-index: 1;\n\n    padding: $distance-around-trigger;\n    margin-left: calc(var(--button-padding-right) * -1);\n    width: var(--button-padding-right);\n\n    &:before {\n        transition: background-color 0.5s ease;\n        content: '';\n        position: absolute;\n        inset: 0.375rem auto 0.375rem 0.6875rem;\n        width: 1px;\n        background-color: currentColor;\n\n        opacity: 0.2;\n    }\n\n    &:not([disabled]) {\n        color: var(\n            --mdc-theme-primary,\n            rgb(var(--color-teal-default))\n        ); // similar to limel-button text\n\n        &.primary {\n            color: var(\n                --mdc-theme-on-primary,\n                rgb(var(--color-white))\n            ); // similar to limel-button text\n        }\n    }\n\n    &[disabled] {\n        color: rgba(var(--contrast-1600), 0.37); // similar to limel-button text\n    }\n\n    &:hover,\n    &:focus-within {\n        &:before {\n            background-color: transparent;\n        }\n    }\n}\n\n.menu-trigger {\n    all: unset;\n\n    text-align: center;\n    font-weight: bold;\n\n    border-radius: 0.125rem;\n    height: 100%;\n    width: 1rem;\n\n    &:not(:disabled) {\n        @include is-flat-clickable(\n            $color: 'inherit',\n            $color--hovered: 'inherit'\n        );\n        @include visualize-keyboard-focus();\n        cursor: pointer;\n\n        &:focus-visible,\n        &:hover {\n            background-color: rgb(var(--color-white), 0.1);\n        }\n    }\n\n    &:before {\n        // prevents unintentionally activating the default action,\n        // by clicking on the edge of menu trigger,\n        // which would be activating the default onClick action\n        // on `limel-button`.\n        content: '';\n        position: absolute;\n        inset: -$distance-around-trigger * 2;\n        z-index: -1;\n    }\n}\n","import { Component, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { ListSeparator, MenuItem } from '../../interface';\n\n/**\n * A split button is a button with two components:\n * a button and a side-menu attached to it.\n *\n * Clicking on the button runs a default action,\n * and clicking on the arrow opens up a list of other possible actions.\n *\n * :::warning\n * - Never use a split button for navigation purposes, such as going to next page.\n * The button should only be used for performing commands!\n * - Never use this component instead of a Select or Menu component!\n * :::\n * @exampleComponent limel-example-split-button-basic\n * @exampleComponent limel-example-split-button-repeat-default-command\n */\n@Component({\n    tag: 'limel-split-button',\n    styleUrl: 'split-button.scss',\n    shadow: true,\n})\nexport class SplitButton {\n    /**\n     * The text to show on the default action part of the button.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Set to `true` to make the button primary.\n     */\n    @Prop({ reflect: true })\n    public primary = false;\n\n    /**\n     * Set icon for the button\n     */\n    @Prop({ reflect: true })\n    public icon: string;\n\n    /**\n     * Set to `true` to disable the button.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * A list of items and separators to show in the menu.\n     */\n    @Prop()\n    public items: Array<MenuItem | ListSeparator> = [];\n\n    /**\n     * Is emitted when a menu item is selected.\n     */\n    @Event()\n    public select: EventEmitter<MenuItem>;\n\n    render() {\n        return (\n            <Host\n                class={{\n                    'has-menu': !!this.items.length,\n                }}\n            >\n                <limel-button\n                    label={this.label}\n                    primary={this.primary}\n                    icon={this.icon}\n                    disabled={this.disabled}\n                />\n                {this.renderMenu()}\n            </Host>\n        );\n    }\n\n    private renderMenu = () => {\n        if (!this.items.length) {\n            return;\n        }\n\n        return (\n            <limel-menu\n                class={{\n                    primary: this.primary,\n                }}\n                disabled={this.disabled}\n                items={this.items}\n                openDirection=\"bottom\"\n            >\n                <button\n                    class=\"menu-trigger\"\n                    slot=\"trigger\"\n                    disabled={this.disabled}\n                >\n                    ⋮\n                </button>\n            </limel-menu>\n        );\n    };\n}\n"],"version":3}

package/dist/collection/components/help/limel-help-content.css

@@ -48,6 +48,7 @@
   flex-direction: column;
   gap: 0.5rem;
   max-height: 30rem;
+  height: 100%;
 }
 
 limel-markdown {

package/dist/collection/components/split-button/split-button.css

@@ -104,12 +104,12 @@ limel-menu:hover:before, limel-menu:focus-within:before {
 .menu-trigger:not(:disabled) {
   transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
   cursor: pointer;
-  color: var(--mdc-theme-on-surface);
+  color: "inherit";
   background-color: transparent;
   cursor: pointer;
 }
 .menu-trigger:not(:disabled):hover {
-  color: var(--mdc-theme-on-surface);
+  color: "inherit";
   background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-hovered);
 }

package/dist/esm/limel-help-content.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h } from './index-232e9616.js';
 
-const limelHelpContentCss = "@charset \"UTF-8\";:host(limel-help-content){display:flex;box-sizing:border-box;flex-direction:column;gap:0.5rem;max-height:30rem}limel-markdown{--limel-overflow-mask-vertical:linear-gradient(\n      to bottom,\n      transparent 0%,\n      black calc(0% + var(--limel-top-edge-fade-height, 1rem)),\n      black calc(100% - var(--limel-bottom-edge-fade-height, 1rem)),\n      transparent 100%\n  );-webkit-mask-image:var(--limel-overflow-mask-vertical);mask-image:var(--limel-overflow-mask-vertical);padding-top:var(--limel-top-edge-fade-height, 1rem);padding-bottom:var(--limel-bottom-edge-fade-height, 1rem);padding-right:1rem;padding-left:1rem;min-height:0;min-width:0;overflow:hidden auto}a{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;position:relative;cursor:pointer;transition:color 0.2s ease;color:rgb(var(--color-blue-default));position:sticky;bottom:0;text-decoration:none;font-size:0.875rem;padding-bottom:0.125rem}a:before{transition:opacity 0.2s ease, transform 0.3s ease-out;content:\"\";position:absolute;inset:auto 0 0 0;width:calc(100% - 0.5rem);margin:auto;height:0.125rem;border-radius:1rem;background-color:currentColor;opacity:0;transform:scale(0.6)}a:hover{color:rgb(var(--color-blue-default))}a:hover:before{opacity:0.3;transform:scale(1)}span{padding:0 1rem 0.5rem 1rem;min-width:0}";
+const limelHelpContentCss = "@charset \"UTF-8\";:host(limel-help-content){display:flex;box-sizing:border-box;flex-direction:column;gap:0.5rem;max-height:30rem;height:100%}limel-markdown{--limel-overflow-mask-vertical:linear-gradient(\n      to bottom,\n      transparent 0%,\n      black calc(0% + var(--limel-top-edge-fade-height, 1rem)),\n      black calc(100% - var(--limel-bottom-edge-fade-height, 1rem)),\n      transparent 100%\n  );-webkit-mask-image:var(--limel-overflow-mask-vertical);mask-image:var(--limel-overflow-mask-vertical);padding-top:var(--limel-top-edge-fade-height, 1rem);padding-bottom:var(--limel-bottom-edge-fade-height, 1rem);padding-right:1rem;padding-left:1rem;min-height:0;min-width:0;overflow:hidden auto}a{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;position:relative;cursor:pointer;transition:color 0.2s ease;color:rgb(var(--color-blue-default));position:sticky;bottom:0;text-decoration:none;font-size:0.875rem;padding-bottom:0.125rem}a:before{transition:opacity 0.2s ease, transform 0.3s ease-out;content:\"\";position:absolute;inset:auto 0 0 0;width:calc(100% - 0.5rem);margin:auto;height:0.125rem;border-radius:1rem;background-color:currentColor;opacity:0;transform:scale(0.6)}a:hover{color:rgb(var(--color-blue-default))}a:hover:before{opacity:0.3;transform:scale(1)}span{padding:0 1rem 0.5rem 1rem;min-width:0}";
 
 const HelpContent = class {
   constructor(hostRef) {

package/dist/esm/limel-help-content.entry.js.map

@@ -1 +1 @@
-{"file":"limel-help-content.entry.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,yyCAAyyC;;MCgBxzC,WAAW;;;IAcZ,uBAAkB,GAAG;;MACzB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;QACpB,OAAO;OACV;MAED,QACI,gBACI,SACI,IAAI,EAAE,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI,EAC7B,MAAM,EAAE,MAAA,IAAI,CAAC,YAAY,0CAAE,MAAM,EACjC,KAAK,EAAE,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,EAC/B,QAAQ,EAAC,GAAG,IAEX,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI,CACxB,CACD,EACT;KACL,CAAC;;;;EAxBK,MAAM;IACT,OAAO;MACH,sBAAgB,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI;MACrC,IAAI,CAAC,kBAAkB,EAAE;KAC5B,CAAC;GACL;;;;;;","names":[],"sources":["./src/components/help/limel-help-content.scss?tag=limel-help-content&encapsulation=shadow","./src/components/help/help-content.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n:host(limel-help-content) {\n    display: flex;\n    box-sizing: border-box;\n    flex-direction: column;\n    gap: 0.5rem;\n\n    max-height: 30rem;\n}\n\nlimel-markdown {\n    @include mixins.fade-out-overflowed-content-on-edges(vertically);\n\n    padding-right: 1rem;\n    padding-left: 1rem;\n    min-height: 0;\n    min-width: 0;\n    overflow: hidden auto;\n}\n\na {\n    @include mixins.truncate-text;\n    @include mixins.hyperlink;\n\n    position: sticky;\n    bottom: 0;\n\n    text-decoration: none;\n    font-size: 0.875rem;\n    padding-bottom: 0.125rem;\n}\n\nspan {\n    padding: 0 1rem 0.5rem 1rem;\n    min-width: 0;\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { Link } from '../../interface';\n\n/**\n * Help content\n * This is scrollable content that is placed in the popover of the Help component.\n * Moved here mostly to avoid having inlined styles in the parent component.\n * Since you cannot send styles to the Portal component, we need to have this\n * child component.\n * @private\n */\n@Component({\n    tag: 'limel-help-content',\n    shadow: true,\n    styleUrl: 'limel-help-content.scss',\n})\nexport class HelpContent {\n    @Prop()\n    public value: string;\n\n    @Prop()\n    public readMoreLink?: Link;\n\n    public render() {\n        return [\n            <limel-markdown value={this.value} />,\n            this.renderReadMoreLink(),\n        ];\n    }\n\n    private renderReadMoreLink = () => {\n        if (!this.readMoreLink) {\n            return;\n        }\n\n        return (\n            <span>\n                <a\n                    href={this.readMoreLink?.href}\n                    target={this.readMoreLink?.target}\n                    title={this.readMoreLink?.title}\n                    tabindex=\"0\"\n                >\n                    {this.readMoreLink?.text}\n                </a>\n            </span>\n        );\n    };\n}\n"],"version":3}
+{"file":"limel-help-content.entry.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,qzCAAqzC;;MCgBp0C,WAAW;;;IAcZ,uBAAkB,GAAG;;MACzB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;QACpB,OAAO;OACV;MAED,QACI,gBACI,SACI,IAAI,EAAE,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI,EAC7B,MAAM,EAAE,MAAA,IAAI,CAAC,YAAY,0CAAE,MAAM,EACjC,KAAK,EAAE,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,EAC/B,QAAQ,EAAC,GAAG,IAEX,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI,CACxB,CACD,EACT;KACL,CAAC;;;;EAxBK,MAAM;IACT,OAAO;MACH,sBAAgB,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI;MACrC,IAAI,CAAC,kBAAkB,EAAE;KAC5B,CAAC;GACL;;;;;;","names":[],"sources":["./src/components/help/limel-help-content.scss?tag=limel-help-content&encapsulation=shadow","./src/components/help/help-content.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n:host(limel-help-content) {\n    display: flex;\n    box-sizing: border-box;\n    flex-direction: column;\n    gap: 0.5rem;\n\n    max-height: 30rem;\n    height: 100%;\n}\n\nlimel-markdown {\n    @include mixins.fade-out-overflowed-content-on-edges(vertically);\n\n    padding-right: 1rem;\n    padding-left: 1rem;\n    min-height: 0;\n    min-width: 0;\n    overflow: hidden auto;\n}\n\na {\n    @include mixins.truncate-text;\n    @include mixins.hyperlink;\n\n    position: sticky;\n    bottom: 0;\n\n    text-decoration: none;\n    font-size: 0.875rem;\n    padding-bottom: 0.125rem;\n}\n\nspan {\n    padding: 0 1rem 0.5rem 1rem;\n    min-width: 0;\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { Link } from '../../interface';\n\n/**\n * Help content\n * This is scrollable content that is placed in the popover of the Help component.\n * Moved here mostly to avoid having inlined styles in the parent component.\n * Since you cannot send styles to the Portal component, we need to have this\n * child component.\n * @private\n */\n@Component({\n    tag: 'limel-help-content',\n    shadow: true,\n    styleUrl: 'limel-help-content.scss',\n})\nexport class HelpContent {\n    @Prop()\n    public value: string;\n\n    @Prop()\n    public readMoreLink?: Link;\n\n    public render() {\n        return [\n            <limel-markdown value={this.value} />,\n            this.renderReadMoreLink(),\n        ];\n    }\n\n    private renderReadMoreLink = () => {\n        if (!this.readMoreLink) {\n            return;\n        }\n\n        return (\n            <span>\n                <a\n                    href={this.readMoreLink?.href}\n                    target={this.readMoreLink?.target}\n                    title={this.readMoreLink?.title}\n                    tabindex=\"0\"\n                >\n                    {this.readMoreLink?.text}\n                </a>\n            </span>\n        );\n    };\n}\n"],"version":3}

package/dist/esm/limel-split-button.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-232e9616.js';
 
-const splitButtonCss = "@charset \"UTF-8\";:host(limel-split-button.has-menu){--button-padding-right:2rem}:host(limel-split-button){display:inline-flex;isolation:isolate}:host(limel-split-button) *{box-sizing:border-box}:host([disabled]){pointer-events:none}limel-button{width:100%}limel-menu{display:flex;justify-content:flex-end;position:relative;z-index:1;padding:0.125rem;margin-left:calc(var(--button-padding-right) * -1);width:var(--button-padding-right)}limel-menu:before{transition:background-color 0.5s ease;content:\"\";position:absolute;inset:0.375rem auto 0.375rem 0.6875rem;width:1px;background-color:currentColor;opacity:0.2}limel-menu:not([disabled]){color:var(--mdc-theme-primary, rgb(var(--color-teal-default)))}limel-menu:not([disabled]).primary{color:var(--mdc-theme-on-primary, rgb(var(--color-white)))}limel-menu[disabled]{color:rgba(var(--contrast-1600), 0.37)}limel-menu:hover:before,limel-menu:focus-within:before{background-color:transparent}.menu-trigger{all:unset;text-align:center;font-weight:bold;border-radius:0.125rem;height:100%;width:1rem}.menu-trigger:not(:disabled){transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:transparent;cursor:pointer}.menu-trigger:not(:disabled):hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.menu-trigger:not(:disabled):active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.menu-trigger:not(:disabled):focus{outline:none}.menu-trigger:not(:disabled):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.menu-trigger:not(:disabled):focus-visible,.menu-trigger:not(:disabled):hover{background-color:rgb(var(--color-white), 0.1)}.menu-trigger:before{content:\"\";position:absolute;inset:-0.25rem;z-index:-1}";
+const splitButtonCss = "@charset \"UTF-8\";:host(limel-split-button.has-menu){--button-padding-right:2rem}:host(limel-split-button){display:inline-flex;isolation:isolate}:host(limel-split-button) *{box-sizing:border-box}:host([disabled]){pointer-events:none}limel-button{width:100%}limel-menu{display:flex;justify-content:flex-end;position:relative;z-index:1;padding:0.125rem;margin-left:calc(var(--button-padding-right) * -1);width:var(--button-padding-right)}limel-menu:before{transition:background-color 0.5s ease;content:\"\";position:absolute;inset:0.375rem auto 0.375rem 0.6875rem;width:1px;background-color:currentColor;opacity:0.2}limel-menu:not([disabled]){color:var(--mdc-theme-primary, rgb(var(--color-teal-default)))}limel-menu:not([disabled]).primary{color:var(--mdc-theme-on-primary, rgb(var(--color-white)))}limel-menu[disabled]{color:rgba(var(--contrast-1600), 0.37)}limel-menu:hover:before,limel-menu:focus-within:before{background-color:transparent}.menu-trigger{all:unset;text-align:center;font-weight:bold;border-radius:0.125rem;height:100%;width:1rem}.menu-trigger:not(:disabled){transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:\"inherit\";background-color:transparent;cursor:pointer}.menu-trigger:not(:disabled):hover{color:\"inherit\";background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.menu-trigger:not(:disabled):active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.menu-trigger:not(:disabled):focus{outline:none}.menu-trigger:not(:disabled):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.menu-trigger:not(:disabled):focus-visible,.menu-trigger:not(:disabled):hover{background-color:rgb(var(--color-white), 0.1)}.menu-trigger:before{content:\"\";position:absolute;inset:-0.25rem;z-index:-1}";
 
 const SplitButton = class {
   constructor(hostRef) {

package/dist/esm/limel-split-button.entry.js.map

@@ -1 +1 @@
-{"file":"limel-split-button.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,k3DAAk3D;;MCuB53D,WAAW;;;;IAuDZ,eAAU,GAAG;MACjB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;QACpB,OAAO;OACV;MAED,QACI,kBACI,KAAK,EAAE;UACH,OAAO,EAAE,IAAI,CAAC,OAAO;SACxB,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,aAAa,EAAC,QAAQ,IAEtB,cACI,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,SAAS,EACd,QAAQ,EAAE,IAAI,CAAC,QAAQ,aAGlB,CACA,EACf;KACL,CAAC;;mBAnEe,KAAK;;oBAYJ,KAAK;iBAMyB,EAAE;;EAQlD,MAAM;IACF,QACI,EAAC,IAAI,IACD,KAAK,EAAE;QACH,UAAU,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM;OAClC,IAED,oBACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB,EACD,IAAI,CAAC,UAAU,EAAE,CACf,EACT;GACL;;;;;;","names":[],"sources":["./src/components/split-button/split-button.scss?tag=limel-split-button&encapsulation=shadow","./src/components/split-button/split-button.tsx"],"sourcesContent":["@import '../../style/mixins';\n\n:host(limel-split-button.has-menu) {\n    --button-padding-right: 2rem;\n}\n\n:host(limel-split-button) {\n    display: inline-flex;\n    isolation: isolate;\n\n    * {\n        box-sizing: border-box;\n    }\n}\n\n:host([disabled]) {\n    pointer-events: none;\n}\n\nlimel-button {\n    width: 100%;\n}\n\n$distance-around-trigger: 0.125rem;\n\nlimel-menu {\n    display: flex;\n    justify-content: flex-end;\n    position: relative;\n    z-index: 1;\n\n    padding: $distance-around-trigger;\n    margin-left: calc(var(--button-padding-right) * -1);\n    width: var(--button-padding-right);\n\n    &:before {\n        transition: background-color 0.5s ease;\n        content: '';\n        position: absolute;\n        inset: 0.375rem auto 0.375rem 0.6875rem;\n        width: 1px;\n        background-color: currentColor;\n\n        opacity: 0.2;\n    }\n\n    &:not([disabled]) {\n        color: var(\n            --mdc-theme-primary,\n            rgb(var(--color-teal-default))\n        ); // similar to limel-button text\n\n        &.primary {\n            color: var(\n                --mdc-theme-on-primary,\n                rgb(var(--color-white))\n            ); // similar to limel-button text\n        }\n    }\n\n    &[disabled] {\n        color: rgba(var(--contrast-1600), 0.37); // similar to limel-button text\n    }\n\n    &:hover,\n    &:focus-within {\n        &:before {\n            background-color: transparent;\n        }\n    }\n}\n\n.menu-trigger {\n    all: unset;\n\n    text-align: center;\n    font-weight: bold;\n\n    border-radius: 0.125rem;\n    height: 100%;\n    width: 1rem;\n\n    &:not(:disabled) {\n        @include is-flat-clickable();\n        @include visualize-keyboard-focus();\n        cursor: pointer;\n\n        &:focus-visible,\n        &:hover {\n            background-color: rgb(var(--color-white), 0.1);\n        }\n    }\n\n    &:before {\n        // prevents unintentionally activating the default action,\n        // by clicking on the edge of menu trigger,\n        // which would be activating the default onClick action\n        // on `limel-button`.\n        content: '';\n        position: absolute;\n        inset: -$distance-around-trigger * 2;\n        z-index: -1;\n    }\n}\n","import { Component, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { ListSeparator, MenuItem } from '../../interface';\n\n/**\n * A split button is a button with two components:\n * a button and a side-menu attached to it.\n *\n * Clicking on the button runs a default action,\n * and clicking on the arrow opens up a list of other possible actions.\n *\n * :::warning\n * - Never use a split button for navigation purposes, such as going to next page.\n * The button should only be used for performing commands!\n * - Never use this component instead of a Select or Menu component!\n * :::\n * @exampleComponent limel-example-split-button-basic\n * @exampleComponent limel-example-split-button-repeat-default-command\n */\n@Component({\n    tag: 'limel-split-button',\n    styleUrl: 'split-button.scss',\n    shadow: true,\n})\nexport class SplitButton {\n    /**\n     * The text to show on the default action part of the button.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Set to `true` to make the button primary.\n     */\n    @Prop({ reflect: true })\n    public primary = false;\n\n    /**\n     * Set icon for the button\n     */\n    @Prop({ reflect: true })\n    public icon: string;\n\n    /**\n     * Set to `true` to disable the button.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * A list of items and separators to show in the menu.\n     */\n    @Prop()\n    public items: Array<MenuItem | ListSeparator> = [];\n\n    /**\n     * Is emitted when a menu item is selected.\n     */\n    @Event()\n    public select: EventEmitter<MenuItem>;\n\n    render() {\n        return (\n            <Host\n                class={{\n                    'has-menu': !!this.items.length,\n                }}\n            >\n                <limel-button\n                    label={this.label}\n                    primary={this.primary}\n                    icon={this.icon}\n                    disabled={this.disabled}\n                />\n                {this.renderMenu()}\n            </Host>\n        );\n    }\n\n    private renderMenu = () => {\n        if (!this.items.length) {\n            return;\n        }\n\n        return (\n            <limel-menu\n                class={{\n                    primary: this.primary,\n                }}\n                disabled={this.disabled}\n                items={this.items}\n                openDirection=\"bottom\"\n            >\n                <button\n                    class=\"menu-trigger\"\n                    slot=\"trigger\"\n                    disabled={this.disabled}\n                >\n                    ⋮\n                </button>\n            </limel-menu>\n        );\n    };\n}\n"],"version":3}
+{"file":"limel-split-button.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,k1DAAk1D;;MCuB51D,WAAW;;;;IAuDZ,eAAU,GAAG;MACjB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;QACpB,OAAO;OACV;MAED,QACI,kBACI,KAAK,EAAE;UACH,OAAO,EAAE,IAAI,CAAC,OAAO;SACxB,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,aAAa,EAAC,QAAQ,IAEtB,cACI,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,SAAS,EACd,QAAQ,EAAE,IAAI,CAAC,QAAQ,aAGlB,CACA,EACf;KACL,CAAC;;mBAnEe,KAAK;;oBAYJ,KAAK;iBAMyB,EAAE;;EAQlD,MAAM;IACF,QACI,EAAC,IAAI,IACD,KAAK,EAAE;QACH,UAAU,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM;OAClC,IAED,oBACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB,EACD,IAAI,CAAC,UAAU,EAAE,CACf,EACT;GACL;;;;;;","names":[],"sources":["./src/components/split-button/split-button.scss?tag=limel-split-button&encapsulation=shadow","./src/components/split-button/split-button.tsx"],"sourcesContent":["@import '../../style/mixins';\n\n:host(limel-split-button.has-menu) {\n    --button-padding-right: 2rem;\n}\n\n:host(limel-split-button) {\n    display: inline-flex;\n    isolation: isolate;\n\n    * {\n        box-sizing: border-box;\n    }\n}\n\n:host([disabled]) {\n    pointer-events: none;\n}\n\nlimel-button {\n    width: 100%;\n}\n\n$distance-around-trigger: 0.125rem;\n\nlimel-menu {\n    display: flex;\n    justify-content: flex-end;\n    position: relative;\n    z-index: 1;\n\n    padding: $distance-around-trigger;\n    margin-left: calc(var(--button-padding-right) * -1);\n    width: var(--button-padding-right);\n\n    &:before {\n        transition: background-color 0.5s ease;\n        content: '';\n        position: absolute;\n        inset: 0.375rem auto 0.375rem 0.6875rem;\n        width: 1px;\n        background-color: currentColor;\n\n        opacity: 0.2;\n    }\n\n    &:not([disabled]) {\n        color: var(\n            --mdc-theme-primary,\n            rgb(var(--color-teal-default))\n        ); // similar to limel-button text\n\n        &.primary {\n            color: var(\n                --mdc-theme-on-primary,\n                rgb(var(--color-white))\n            ); // similar to limel-button text\n        }\n    }\n\n    &[disabled] {\n        color: rgba(var(--contrast-1600), 0.37); // similar to limel-button text\n    }\n\n    &:hover,\n    &:focus-within {\n        &:before {\n            background-color: transparent;\n        }\n    }\n}\n\n.menu-trigger {\n    all: unset;\n\n    text-align: center;\n    font-weight: bold;\n\n    border-radius: 0.125rem;\n    height: 100%;\n    width: 1rem;\n\n    &:not(:disabled) {\n        @include is-flat-clickable(\n            $color: 'inherit',\n            $color--hovered: 'inherit'\n        );\n        @include visualize-keyboard-focus();\n        cursor: pointer;\n\n        &:focus-visible,\n        &:hover {\n            background-color: rgb(var(--color-white), 0.1);\n        }\n    }\n\n    &:before {\n        // prevents unintentionally activating the default action,\n        // by clicking on the edge of menu trigger,\n        // which would be activating the default onClick action\n        // on `limel-button`.\n        content: '';\n        position: absolute;\n        inset: -$distance-around-trigger * 2;\n        z-index: -1;\n    }\n}\n","import { Component, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { ListSeparator, MenuItem } from '../../interface';\n\n/**\n * A split button is a button with two components:\n * a button and a side-menu attached to it.\n *\n * Clicking on the button runs a default action,\n * and clicking on the arrow opens up a list of other possible actions.\n *\n * :::warning\n * - Never use a split button for navigation purposes, such as going to next page.\n * The button should only be used for performing commands!\n * - Never use this component instead of a Select or Menu component!\n * :::\n * @exampleComponent limel-example-split-button-basic\n * @exampleComponent limel-example-split-button-repeat-default-command\n */\n@Component({\n    tag: 'limel-split-button',\n    styleUrl: 'split-button.scss',\n    shadow: true,\n})\nexport class SplitButton {\n    /**\n     * The text to show on the default action part of the button.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Set to `true` to make the button primary.\n     */\n    @Prop({ reflect: true })\n    public primary = false;\n\n    /**\n     * Set icon for the button\n     */\n    @Prop({ reflect: true })\n    public icon: string;\n\n    /**\n     * Set to `true` to disable the button.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * A list of items and separators to show in the menu.\n     */\n    @Prop()\n    public items: Array<MenuItem | ListSeparator> = [];\n\n    /**\n     * Is emitted when a menu item is selected.\n     */\n    @Event()\n    public select: EventEmitter<MenuItem>;\n\n    render() {\n        return (\n            <Host\n                class={{\n                    'has-menu': !!this.items.length,\n                }}\n            >\n                <limel-button\n                    label={this.label}\n                    primary={this.primary}\n                    icon={this.icon}\n                    disabled={this.disabled}\n                />\n                {this.renderMenu()}\n            </Host>\n        );\n    }\n\n    private renderMenu = () => {\n        if (!this.items.length) {\n            return;\n        }\n\n        return (\n            <limel-menu\n                class={{\n                    primary: this.primary,\n                }}\n                disabled={this.disabled}\n                items={this.items}\n                openDirection=\"bottom\"\n            >\n                <button\n                    class=\"menu-trigger\"\n                    slot=\"trigger\"\n                    disabled={this.disabled}\n                >\n                    ⋮\n                </button>\n            </limel-menu>\n        );\n    };\n}\n"],"version":3}

package/dist/lime-elements/lime-elements.esm.js

@@ -1,2 +1,2 @@
-import{p as e,b as l}from"./p-3075aa67.js";export{s as setNonce}from"./p-3075aa67.js";const i=()=>{const l=import.meta.url;const i={};if(l!==""){i.resourcesUrl=new URL(".",l).href}return e(i)};i().then((e=>l([["p-b714596f",[[1,"limel-action-bar",{actions:[16],accessibleLabel:[513,"accessible-label"],layout:[513],openDirection:[513,"open-direction"],overflowCutoff:[32]}]]],["p-b2057def",[[1,"limel-split-button",{label:[513],primary:[516],icon:[513],disabled:[516],items:[16]}]]],["p-c0543a74",[[1,"limel-file-viewer",{url:[513],filename:[513],alt:[513],allowFullscreen:[516,"allow-fullscreen"],allowOpenInNewTab:[516,"allow-open-in-new-tab"],allowDownload:[516,"allow-download"],language:[8],officeViewer:[513,"office-viewer"],actions:[16],isFullscreen:[32],fileType:[32],loading:[32],fileUrl:[32]}]]],["p-e0f37631",[[1,"limel-color-picker",{value:[513],label:[513],helperText:[513,"helper-text"],tooltipLabel:[513,"tooltip-label"],required:[516],readonly:[516],isOpen:[32]}]]],["p-5d140ffb",[[1,"limel-dock",{dockItems:[16],dockFooterItems:[16],accessibleLabel:[513,"accessible-label"],expanded:[516],allowResize:[516,"allow-resize"],mobileBreakPoint:[514,"mobile-break-point"],useMobileLayout:[32]}]]],["p-17a1c6fe",[[1,"limel-picker",{disabled:[4],readonly:[516],label:[1],searchLabel:[1,"search-label"],helperText:[513,"helper-text"],leadingIcon:[1,"leading-icon"],emptyResultMessage:[1,"empty-result-message"],required:[4],invalid:[516],value:[16],searcher:[16],multiple:[4],delimiter:[513],actions:[16],actionPosition:[1,"action-position"],actionScrollBehavior:[1,"action-scroll-behavior"],badgeIcons:[516,"badge-icons"],items:[32],textValue:[32],loading:[32],chips:[32]}]]],["p-8b79a71e",[[1,"limel-date-picker",{disabled:[516],readonly:[516],invalid:[516],label:[513],placeholder:[513],helperText:[513,"helper-text"],required:[516],value:[16],type:[513],format:[513],language:[513],formatter:[16],formattedValue:[32],internalFormat:[32],showPortal:[32]}]]],["p-66be5ef9",[[1,"limel-snackbar",{message:[1],timeout:[2],actionText:[1,"action-text"],dismissible:[4],multiline:[4],language:[1],show:[64]}]]],["p-095e03af",[[1,"limel-tab-panel",{tabs:[1040]}]]],["p-00b9d5ab",[[1,"limel-button-group",{value:[16],disabled:[516],selectedButtonId:[32]}]]],["p-5e46f6fb",[[1,"limel-collapsible-section",{isOpen:[1540,"is-open"],header:[513],actions:[16]}]]],["p-1ca94bcf",[[1,"limel-help",{value:[1],trigger:[1],readMoreLink:[16],openDirection:[513,"open-direction"],isOpen:[32]}]]],["p-d6135363",[[1,"limel-select",{disabled:[516],readonly:[516],invalid:[516],required:[516],label:[513],helperText:[513,"helper-text"],value:[16],options:[16],multiple:[4],menuOpen:[32]}]]],["p-a61f94d7",[[1,"limel-file",{value:[16],label:[513],required:[516],disabled:[516],readonly:[516],invalid:[516],accept:[513],language:[1],isDraggingOverDropZone:[32]}]]],["p-de0d78b6",[[1,"limel-info-tile",{value:[520],icon:[1],label:[513],prefix:[513],suffix:[513],disabled:[516],badge:[520],loading:[516],link:[16],progress:[16]}]]],["p-17573ad9",[[1,"limel-table",{data:[16],columns:[16],mode:[1],layout:[1],pageSize:[2,"page-size"],totalRows:[2,"total-rows"],sorting:[16],activeRow:[1040],movableColumns:[4,"movable-columns"],loading:[4],page:[2],emptyMessage:[1,"empty-message"],aggregates:[16],selectable:[4],selection:[16]}]]],["p-35c4c9ea",[[1,"limel-dialog",{heading:[1],fullscreen:[516],open:[1540],closingActions:[16]}]]],["p-2024a484",[[1,"limel-progress-flow",{flowItems:[16],disabled:[4],readonly:[4]}]]],["p-dd034867",[[1,"limel-shortcut",{icon:[513],label:[513],disabled:[516],badge:[520],link:[16]}]]],["p-5fb4402e",[[1,"limel-banner",{message:[513],icon:[513],isOpen:[32],open:[64],close:[64]}]]],["p-6fac3a11",[[1,"limel-callout",{heading:[513],icon:[513],type:[513],language:[1]}]]],["p-42649b4a",[[1,"limel-slider",{disabled:[516],readonly:[516],factor:[514],label:[513],helperText:[513,"helper-text"],unit:[513],value:[514],valuemax:[514],valuemin:[514],step:[514],percentageClass:[32]}]]],["p-abc27b65",[[1,"limel-switch",{label:[513],disabled:[516],readonly:[516],invalid:[516],value:[516],helperText:[513,"helper-text"],fieldId:[32]}]]],["p-e0087b51",[[1,"limel-code-editor",{value:[1],language:[1],readonly:[4],lineNumbers:[4,"line-numbers"],fold:[4],lint:[4],colorScheme:[1,"color-scheme"],random:[32]}]]],["p-58d7f49a",[[1,"limel-config",{config:[16]}]]],["p-bd62071d",[[1,"limel-flex-container",{direction:[513],justify:[513],align:[513],reverse:[516]}]]],["p-ec0d9552",[[1,"limel-form",{schema:[16],value:[16],disabled:[4],propsFactory:[16],transformErrors:[16],errors:[16]}]]],["p-4a04ede1",[[1,"limel-grid"]]],["p-89a75b1e",[[0,"limel-dock-button",{item:[16],expanded:[516],useMobileLayout:[516,"use-mobile-layout"],isOpen:[32]}]]],["p-554cdf9e",[[1,"limel-color-picker-palette",{value:[513],label:[513],helperText:[513,"helper-text"],required:[516]}]]],["p-ddbb3b4e",[[1,"limel-tab-bar",{tabs:[1040],canScrollLeft:[32],canScrollRight:[32]},[[9,"resize","handleWindowResize"]]]]],["p-c0d699b7",[[1,"limel-checkbox",{disabled:[516],readonly:[516],invalid:[516],label:[513],helperText:[513,"helper-text"],checked:[516],indeterminate:[516],required:[516],modified:[32]}]]],["p-1857080b",[[1,"limel-header",{icon:[1],heading:[1],subheading:[1],supportingText:[1,"supporting-text"]}]]],["p-27f1d404",[[1,"limel-help-content",{value:[1],readMoreLink:[16]}]]],["p-9a45ad26",[[1,"limel-icon",{size:[513],name:[513],badge:[516]}]]],["p-4e15149e",[[0,"limel-progress-flow-item",{item:[16],disabled:[4],readonly:[4],currentStep:[4,"current-step"]}]]],["p-d8f7d851",[[1,"limel-flatpickr-adapter",{value:[16],type:[1],format:[1],isOpen:[4,"is-open"],inputElement:[16],language:[1],formatter:[16]}]]],["p-eacad510",[[1,"limel-helper-line",{helperText:[513,"helper-text"],length:[514],maxLength:[514,"max-length"],invalid:[516],helperTextId:[513,"helper-text-id"]}]]],["p-685438c8",[[0,"limel-action-bar-overflow-menu",{items:[16],openDirection:[513,"open-direction"]}],[0,"limel-action-bar-item",{item:[16],isVisible:[516,"is-visible"]}]]],["p-ca410873",[[1,"limel-chip-set",{value:[16],type:[513],label:[513],helperText:[513,"helper-text"],disabled:[516],readonly:[516],invalid:[516],inputType:[513,"input-type"],maxItems:[514,"max-items"],required:[516],searchLabel:[513,"search-label"],emptyInputOnBlur:[516,"empty-input-on-blur"],clearAllButton:[4,"clear-all-button"],leadingIcon:[513,"leading-icon"],delimiter:[513],language:[1],editMode:[32],textValue:[32],blurred:[32],inputChipIndexSelected:[32],getEditMode:[64],setFocus:[64],emptyInput:[64]}]]],["p-5c987e04",[[1,"limel-button",{label:[513],primary:[516],outlined:[516],icon:[513],disabled:[516],loading:[516],loadingFailed:[516,"loading-failed"],justLoaded:[32]}]]],["p-59e808c9",[[1,"limel-circular-progress",{value:[2],maxValue:[2,"max-value"],prefix:[513],suffix:[1],displayPercentageColors:[4,"display-percentage-colors"],size:[513]}],[1,"limel-linear-progress",{value:[514],indeterminate:[516]}]]],["p-b7c8aad3",[[1,"limel-markdown",{value:[1]}]]],["p-2322836c",[[1,"limel-tooltip",{elementId:[513,"element-id"],label:[513],helperLabel:[513,"helper-label"],maxlength:[514],openDirection:[513,"open-direction"],open:[32]}],[1,"limel-tooltip-content",{label:[513],helperLabel:[513,"helper-label"],maxlength:[514]}],[1,"limel-portal",{openDirection:[513,"open-direction"],position:[513],containerId:[513,"container-id"],containerStyle:[16],parent:[16],inheritParentWidth:[516,"inherit-parent-width"],visible:[516],anchor:[16]}]]],["p-aa40cef5",[[1,"limel-icon-button",{icon:[513],elevated:[516],label:[513],disabled:[516]}]]],["p-4b51378d",[[1,"limel-popover",{open:[4],openDirection:[513,"open-direction"]}],[1,"limel-popover-surface",{contentCollection:[16]}]]],["p-552fd521",[[1,"limel-spinner",{size:[513],limeBranded:[4,"lime-branded"]}]]],["p-07f7a62e",[[1,"limel-badge",{label:[520]}]]],["p-b592709f",[[1,"limel-input-field",{disabled:[516],readonly:[516],invalid:[516],label:[513],placeholder:[513],helperText:[513,"helper-text"],prefix:[513],suffix:[513],required:[516],value:[513],trailingIcon:[513,"trailing-icon"],leadingIcon:[513,"leading-icon"],pattern:[513],type:[513],formatNumber:[516,"format-number"],step:[520],max:[514],min:[514],maxlength:[514],minlength:[514],completions:[16],showLink:[516,"show-link"],locale:[513],isFocused:[32],isModified:[32],showCompletions:[32]}],[1,"limel-list",{items:[16],badgeIcons:[4,"badge-icons"],iconSize:[1,"icon-size"],type:[1],maxLinesSecondaryText:[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{open:[4],allowClicksElement:[16]}]]],["p-ab0587b7",[[1,"limel-menu",{items:[16],disabled:[516],openDirection:[513,"open-direction"],surfaceWidth:[513,"surface-width"],open:[1540],badgeIcons:[516,"badge-icons"],gridLayout:[516,"grid-layout"],loading:[516],currentSubMenu:[1040],searcher:[16],emptyResultMessage:[1,"empty-result-message"],loadingSubItems:[32],menuBreadCrumb:[32],searchValue:[32],searchResults:[32]}],[1,"limel-breadcrumbs",{items:[16],divider:[1]}],[1,"limel-menu-list",{items:[16],badgeIcons:[4,"badge-icons"],iconSize:[1,"icon-size"],type:[1],maxLinesSecondaryText:[2,"max-lines-secondary-text"]}]]]],e)));
+import{p as e,b as l}from"./p-3075aa67.js";export{s as setNonce}from"./p-3075aa67.js";const i=()=>{const l=import.meta.url;const i={};if(l!==""){i.resourcesUrl=new URL(".",l).href}return e(i)};i().then((e=>l([["p-b714596f",[[1,"limel-action-bar",{actions:[16],accessibleLabel:[513,"accessible-label"],layout:[513],openDirection:[513,"open-direction"],overflowCutoff:[32]}]]],["p-3480e5ff",[[1,"limel-split-button",{label:[513],primary:[516],icon:[513],disabled:[516],items:[16]}]]],["p-c0543a74",[[1,"limel-file-viewer",{url:[513],filename:[513],alt:[513],allowFullscreen:[516,"allow-fullscreen"],allowOpenInNewTab:[516,"allow-open-in-new-tab"],allowDownload:[516,"allow-download"],language:[8],officeViewer:[513,"office-viewer"],actions:[16],isFullscreen:[32],fileType:[32],loading:[32],fileUrl:[32]}]]],["p-e0f37631",[[1,"limel-color-picker",{value:[513],label:[513],helperText:[513,"helper-text"],tooltipLabel:[513,"tooltip-label"],required:[516],readonly:[516],isOpen:[32]}]]],["p-5d140ffb",[[1,"limel-dock",{dockItems:[16],dockFooterItems:[16],accessibleLabel:[513,"accessible-label"],expanded:[516],allowResize:[516,"allow-resize"],mobileBreakPoint:[514,"mobile-break-point"],useMobileLayout:[32]}]]],["p-17a1c6fe",[[1,"limel-picker",{disabled:[4],readonly:[516],label:[1],searchLabel:[1,"search-label"],helperText:[513,"helper-text"],leadingIcon:[1,"leading-icon"],emptyResultMessage:[1,"empty-result-message"],required:[4],invalid:[516],value:[16],searcher:[16],multiple:[4],delimiter:[513],actions:[16],actionPosition:[1,"action-position"],actionScrollBehavior:[1,"action-scroll-behavior"],badgeIcons:[516,"badge-icons"],items:[32],textValue:[32],loading:[32],chips:[32]}]]],["p-8b79a71e",[[1,"limel-date-picker",{disabled:[516],readonly:[516],invalid:[516],label:[513],placeholder:[513],helperText:[513,"helper-text"],required:[516],value:[16],type:[513],format:[513],language:[513],formatter:[16],formattedValue:[32],internalFormat:[32],showPortal:[32]}]]],["p-66be5ef9",[[1,"limel-snackbar",{message:[1],timeout:[2],actionText:[1,"action-text"],dismissible:[4],multiline:[4],language:[1],show:[64]}]]],["p-095e03af",[[1,"limel-tab-panel",{tabs:[1040]}]]],["p-00b9d5ab",[[1,"limel-button-group",{value:[16],disabled:[516],selectedButtonId:[32]}]]],["p-5e46f6fb",[[1,"limel-collapsible-section",{isOpen:[1540,"is-open"],header:[513],actions:[16]}]]],["p-1ca94bcf",[[1,"limel-help",{value:[1],trigger:[1],readMoreLink:[16],openDirection:[513,"open-direction"],isOpen:[32]}]]],["p-d6135363",[[1,"limel-select",{disabled:[516],readonly:[516],invalid:[516],required:[516],label:[513],helperText:[513,"helper-text"],value:[16],options:[16],multiple:[4],menuOpen:[32]}]]],["p-a61f94d7",[[1,"limel-file",{value:[16],label:[513],required:[516],disabled:[516],readonly:[516],invalid:[516],accept:[513],language:[1],isDraggingOverDropZone:[32]}]]],["p-de0d78b6",[[1,"limel-info-tile",{value:[520],icon:[1],label:[513],prefix:[513],suffix:[513],disabled:[516],badge:[520],loading:[516],link:[16],progress:[16]}]]],["p-17573ad9",[[1,"limel-table",{data:[16],columns:[16],mode:[1],layout:[1],pageSize:[2,"page-size"],totalRows:[2,"total-rows"],sorting:[16],activeRow:[1040],movableColumns:[4,"movable-columns"],loading:[4],page:[2],emptyMessage:[1,"empty-message"],aggregates:[16],selectable:[4],selection:[16]}]]],["p-35c4c9ea",[[1,"limel-dialog",{heading:[1],fullscreen:[516],open:[1540],closingActions:[16]}]]],["p-2024a484",[[1,"limel-progress-flow",{flowItems:[16],disabled:[4],readonly:[4]}]]],["p-dd034867",[[1,"limel-shortcut",{icon:[513],label:[513],disabled:[516],badge:[520],link:[16]}]]],["p-5fb4402e",[[1,"limel-banner",{message:[513],icon:[513],isOpen:[32],open:[64],close:[64]}]]],["p-6fac3a11",[[1,"limel-callout",{heading:[513],icon:[513],type:[513],language:[1]}]]],["p-42649b4a",[[1,"limel-slider",{disabled:[516],readonly:[516],factor:[514],label:[513],helperText:[513,"helper-text"],unit:[513],value:[514],valuemax:[514],valuemin:[514],step:[514],percentageClass:[32]}]]],["p-abc27b65",[[1,"limel-switch",{label:[513],disabled:[516],readonly:[516],invalid:[516],value:[516],helperText:[513,"helper-text"],fieldId:[32]}]]],["p-e0087b51",[[1,"limel-code-editor",{value:[1],language:[1],readonly:[4],lineNumbers:[4,"line-numbers"],fold:[4],lint:[4],colorScheme:[1,"color-scheme"],random:[32]}]]],["p-58d7f49a",[[1,"limel-config",{config:[16]}]]],["p-bd62071d",[[1,"limel-flex-container",{direction:[513],justify:[513],align:[513],reverse:[516]}]]],["p-ec0d9552",[[1,"limel-form",{schema:[16],value:[16],disabled:[4],propsFactory:[16],transformErrors:[16],errors:[16]}]]],["p-4a04ede1",[[1,"limel-grid"]]],["p-89a75b1e",[[0,"limel-dock-button",{item:[16],expanded:[516],useMobileLayout:[516,"use-mobile-layout"],isOpen:[32]}]]],["p-554cdf9e",[[1,"limel-color-picker-palette",{value:[513],label:[513],helperText:[513,"helper-text"],required:[516]}]]],["p-ddbb3b4e",[[1,"limel-tab-bar",{tabs:[1040],canScrollLeft:[32],canScrollRight:[32]},[[9,"resize","handleWindowResize"]]]]],["p-c0d699b7",[[1,"limel-checkbox",{disabled:[516],readonly:[516],invalid:[516],label:[513],helperText:[513,"helper-text"],checked:[516],indeterminate:[516],required:[516],modified:[32]}]]],["p-1857080b",[[1,"limel-header",{icon:[1],heading:[1],subheading:[1],supportingText:[1,"supporting-text"]}]]],["p-86550ce4",[[1,"limel-help-content",{value:[1],readMoreLink:[16]}]]],["p-9a45ad26",[[1,"limel-icon",{size:[513],name:[513],badge:[516]}]]],["p-4e15149e",[[0,"limel-progress-flow-item",{item:[16],disabled:[4],readonly:[4],currentStep:[4,"current-step"]}]]],["p-d8f7d851",[[1,"limel-flatpickr-adapter",{value:[16],type:[1],format:[1],isOpen:[4,"is-open"],inputElement:[16],language:[1],formatter:[16]}]]],["p-eacad510",[[1,"limel-helper-line",{helperText:[513,"helper-text"],length:[514],maxLength:[514,"max-length"],invalid:[516],helperTextId:[513,"helper-text-id"]}]]],["p-685438c8",[[0,"limel-action-bar-overflow-menu",{items:[16],openDirection:[513,"open-direction"]}],[0,"limel-action-bar-item",{item:[16],isVisible:[516,"is-visible"]}]]],["p-ca410873",[[1,"limel-chip-set",{value:[16],type:[513],label:[513],helperText:[513,"helper-text"],disabled:[516],readonly:[516],invalid:[516],inputType:[513,"input-type"],maxItems:[514,"max-items"],required:[516],searchLabel:[513,"search-label"],emptyInputOnBlur:[516,"empty-input-on-blur"],clearAllButton:[4,"clear-all-button"],leadingIcon:[513,"leading-icon"],delimiter:[513],language:[1],editMode:[32],textValue:[32],blurred:[32],inputChipIndexSelected:[32],getEditMode:[64],setFocus:[64],emptyInput:[64]}]]],["p-5c987e04",[[1,"limel-button",{label:[513],primary:[516],outlined:[516],icon:[513],disabled:[516],loading:[516],loadingFailed:[516,"loading-failed"],justLoaded:[32]}]]],["p-59e808c9",[[1,"limel-circular-progress",{value:[2],maxValue:[2,"max-value"],prefix:[513],suffix:[1],displayPercentageColors:[4,"display-percentage-colors"],size:[513]}],[1,"limel-linear-progress",{value:[514],indeterminate:[516]}]]],["p-b7c8aad3",[[1,"limel-markdown",{value:[1]}]]],["p-2322836c",[[1,"limel-tooltip",{elementId:[513,"element-id"],label:[513],helperLabel:[513,"helper-label"],maxlength:[514],openDirection:[513,"open-direction"],open:[32]}],[1,"limel-tooltip-content",{label:[513],helperLabel:[513,"helper-label"],maxlength:[514]}],[1,"limel-portal",{openDirection:[513,"open-direction"],position:[513],containerId:[513,"container-id"],containerStyle:[16],parent:[16],inheritParentWidth:[516,"inherit-parent-width"],visible:[516],anchor:[16]}]]],["p-aa40cef5",[[1,"limel-icon-button",{icon:[513],elevated:[516],label:[513],disabled:[516]}]]],["p-4b51378d",[[1,"limel-popover",{open:[4],openDirection:[513,"open-direction"]}],[1,"limel-popover-surface",{contentCollection:[16]}]]],["p-552fd521",[[1,"limel-spinner",{size:[513],limeBranded:[4,"lime-branded"]}]]],["p-07f7a62e",[[1,"limel-badge",{label:[520]}]]],["p-b592709f",[[1,"limel-input-field",{disabled:[516],readonly:[516],invalid:[516],label:[513],placeholder:[513],helperText:[513,"helper-text"],prefix:[513],suffix:[513],required:[516],value:[513],trailingIcon:[513,"trailing-icon"],leadingIcon:[513,"leading-icon"],pattern:[513],type:[513],formatNumber:[516,"format-number"],step:[520],max:[514],min:[514],maxlength:[514],minlength:[514],completions:[16],showLink:[516,"show-link"],locale:[513],isFocused:[32],isModified:[32],showCompletions:[32]}],[1,"limel-list",{items:[16],badgeIcons:[4,"badge-icons"],iconSize:[1,"icon-size"],type:[1],maxLinesSecondaryText:[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{open:[4],allowClicksElement:[16]}]]],["p-ab0587b7",[[1,"limel-menu",{items:[16],disabled:[516],openDirection:[513,"open-direction"],surfaceWidth:[513,"surface-width"],open:[1540],badgeIcons:[516,"badge-icons"],gridLayout:[516,"grid-layout"],loading:[516],currentSubMenu:[1040],searcher:[16],emptyResultMessage:[1,"empty-result-message"],loadingSubItems:[32],menuBreadCrumb:[32],searchValue:[32],searchResults:[32]}],[1,"limel-breadcrumbs",{items:[16],divider:[1]}],[1,"limel-menu-list",{items:[16],badgeIcons:[4,"badge-icons"],iconSize:[1,"icon-size"],type:[1],maxLinesSecondaryText:[2,"max-lines-secondary-text"]}]]]],e)));
 //# sourceMappingURL=lime-elements.esm.js.map

package/dist/lime-elements/p-3480e5ff.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as o,H as r}from"./p-3075aa67.js";const i='@charset "UTF-8";:host(limel-split-button.has-menu){--button-padding-right:2rem}:host(limel-split-button){display:inline-flex;isolation:isolate}:host(limel-split-button) *{box-sizing:border-box}:host([disabled]){pointer-events:none}limel-button{width:100%}limel-menu{display:flex;justify-content:flex-end;position:relative;z-index:1;padding:0.125rem;margin-left:calc(var(--button-padding-right) * -1);width:var(--button-padding-right)}limel-menu:before{transition:background-color 0.5s ease;content:"";position:absolute;inset:0.375rem auto 0.375rem 0.6875rem;width:1px;background-color:currentColor;opacity:0.2}limel-menu:not([disabled]){color:var(--mdc-theme-primary, rgb(var(--color-teal-default)))}limel-menu:not([disabled]).primary{color:var(--mdc-theme-on-primary, rgb(var(--color-white)))}limel-menu[disabled]{color:rgba(var(--contrast-1600), 0.37)}limel-menu:hover:before,limel-menu:focus-within:before{background-color:transparent}.menu-trigger{all:unset;text-align:center;font-weight:bold;border-radius:0.125rem;height:100%;width:1rem}.menu-trigger:not(:disabled){transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:"inherit";background-color:transparent;cursor:pointer}.menu-trigger:not(:disabled):hover{color:"inherit";background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.menu-trigger:not(:disabled):active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.menu-trigger:not(:disabled):focus{outline:none}.menu-trigger:not(:disabled):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.menu-trigger:not(:disabled):focus-visible,.menu-trigger:not(:disabled):hover{background-color:rgb(var(--color-white), 0.1)}.menu-trigger:before{content:"";position:absolute;inset:-0.25rem;z-index:-1}';const n=class{constructor(r){e(this,r);this.select=t(this,"select",7);this.renderMenu=()=>{if(!this.items.length){return}return o("limel-menu",{class:{primary:this.primary},disabled:this.disabled,items:this.items,openDirection:"bottom"},o("button",{class:"menu-trigger",slot:"trigger",disabled:this.disabled},"⋮"))};this.label=undefined;this.primary=false;this.icon=undefined;this.disabled=false;this.items=[]}render(){return o(r,{class:{"has-menu":!!this.items.length}},o("limel-button",{label:this.label,primary:this.primary,icon:this.icon,disabled:this.disabled}),this.renderMenu())}};n.style=i;export{n as limel_split_button};
+//# sourceMappingURL=p-3480e5ff.entry.js.map

package/dist/lime-elements/p-3480e5ff.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["splitButtonCss","SplitButton","this","renderMenu","items","length","h","class","primary","disabled","openDirection","slot","render","Host","label","icon"],"sources":["./src/components/split-button/split-button.scss?tag=limel-split-button&encapsulation=shadow","./src/components/split-button/split-button.tsx"],"sourcesContent":["@import '../../style/mixins';\n\n:host(limel-split-button.has-menu) {\n    --button-padding-right: 2rem;\n}\n\n:host(limel-split-button) {\n    display: inline-flex;\n    isolation: isolate;\n\n    * {\n        box-sizing: border-box;\n    }\n}\n\n:host([disabled]) {\n    pointer-events: none;\n}\n\nlimel-button {\n    width: 100%;\n}\n\n$distance-around-trigger: 0.125rem;\n\nlimel-menu {\n    display: flex;\n    justify-content: flex-end;\n    position: relative;\n    z-index: 1;\n\n    padding: $distance-around-trigger;\n    margin-left: calc(var(--button-padding-right) * -1);\n    width: var(--button-padding-right);\n\n    &:before {\n        transition: background-color 0.5s ease;\n        content: '';\n        position: absolute;\n        inset: 0.375rem auto 0.375rem 0.6875rem;\n        width: 1px;\n        background-color: currentColor;\n\n        opacity: 0.2;\n    }\n\n    &:not([disabled]) {\n        color: var(\n            --mdc-theme-primary,\n            rgb(var(--color-teal-default))\n        ); // similar to limel-button text\n\n        &.primary {\n            color: var(\n                --mdc-theme-on-primary,\n                rgb(var(--color-white))\n            ); // similar to limel-button text\n        }\n    }\n\n    &[disabled] {\n        color: rgba(var(--contrast-1600), 0.37); // similar to limel-button text\n    }\n\n    &:hover,\n    &:focus-within {\n        &:before {\n            background-color: transparent;\n        }\n    }\n}\n\n.menu-trigger {\n    all: unset;\n\n    text-align: center;\n    font-weight: bold;\n\n    border-radius: 0.125rem;\n    height: 100%;\n    width: 1rem;\n\n    &:not(:disabled) {\n        @include is-flat-clickable(\n            $color: 'inherit',\n            $color--hovered: 'inherit'\n        );\n        @include visualize-keyboard-focus();\n        cursor: pointer;\n\n        &:focus-visible,\n        &:hover {\n            background-color: rgb(var(--color-white), 0.1);\n        }\n    }\n\n    &:before {\n        // prevents unintentionally activating the default action,\n        // by clicking on the edge of menu trigger,\n        // which would be activating the default onClick action\n        // on `limel-button`.\n        content: '';\n        position: absolute;\n        inset: -$distance-around-trigger * 2;\n        z-index: -1;\n    }\n}\n","import { Component, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { ListSeparator, MenuItem } from '../../interface';\n\n/**\n * A split button is a button with two components:\n * a button and a side-menu attached to it.\n *\n * Clicking on the button runs a default action,\n * and clicking on the arrow opens up a list of other possible actions.\n *\n * :::warning\n * - Never use a split button for navigation purposes, such as going to next page.\n * The button should only be used for performing commands!\n * - Never use this component instead of a Select or Menu component!\n * :::\n * @exampleComponent limel-example-split-button-basic\n * @exampleComponent limel-example-split-button-repeat-default-command\n */\n@Component({\n    tag: 'limel-split-button',\n    styleUrl: 'split-button.scss',\n    shadow: true,\n})\nexport class SplitButton {\n    /**\n     * The text to show on the default action part of the button.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Set to `true` to make the button primary.\n     */\n    @Prop({ reflect: true })\n    public primary = false;\n\n    /**\n     * Set icon for the button\n     */\n    @Prop({ reflect: true })\n    public icon: string;\n\n    /**\n     * Set to `true` to disable the button.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * A list of items and separators to show in the menu.\n     */\n    @Prop()\n    public items: Array<MenuItem | ListSeparator> = [];\n\n    /**\n     * Is emitted when a menu item is selected.\n     */\n    @Event()\n    public select: EventEmitter<MenuItem>;\n\n    render() {\n        return (\n            <Host\n                class={{\n                    'has-menu': !!this.items.length,\n                }}\n            >\n                <limel-button\n                    label={this.label}\n                    primary={this.primary}\n                    icon={this.icon}\n                    disabled={this.disabled}\n                />\n                {this.renderMenu()}\n            </Host>\n        );\n    }\n\n    private renderMenu = () => {\n        if (!this.items.length) {\n            return;\n        }\n\n        return (\n            <limel-menu\n                class={{\n                    primary: this.primary,\n                }}\n                disabled={this.disabled}\n                items={this.items}\n                openDirection=\"bottom\"\n            >\n                <button\n                    class=\"menu-trigger\"\n                    slot=\"trigger\"\n                    disabled={this.disabled}\n                >\n                    ⋮\n                </button>\n            </limel-menu>\n        );\n    };\n}\n"],"mappings":"yDAAA,MAAMA,EAAiB,y0D,MCuBVC,EAAW,M,wDAuDZC,KAAAC,WAAa,KACjB,IAAKD,KAAKE,MAAMC,OAAQ,CACpB,M,CAGJ,OACIC,EAAA,cACIC,MAAO,CACHC,QAASN,KAAKM,SAElBC,SAAUP,KAAKO,SACfL,MAAOF,KAAKE,MACZM,cAAc,UAEdJ,EAAA,UACIC,MAAM,eACNI,KAAK,UACLF,SAAUP,KAAKO,UAAQ,KAIlB,E,kCAjEJ,M,kCAYC,M,WAM8B,E,CAQhDG,SACI,OACIN,EAACO,EAAI,CACDN,MAAO,CACH,aAAcL,KAAKE,MAAMC,SAG7BC,EAAA,gBACIQ,MAAOZ,KAAKY,MACZN,QAASN,KAAKM,QACdO,KAAMb,KAAKa,KACXN,SAAUP,KAAKO,WAElBP,KAAKC,a"}

package/dist/lime-elements/p-86550ce4.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as t}from"./p-3075aa67.js";const o='@charset "UTF-8";:host(limel-help-content){display:flex;box-sizing:border-box;flex-direction:column;gap:0.5rem;max-height:30rem;height:100%}limel-markdown{--limel-overflow-mask-vertical:linear-gradient(\n      to bottom,\n      transparent 0%,\n      black calc(0% + var(--limel-top-edge-fade-height, 1rem)),\n      black calc(100% - var(--limel-bottom-edge-fade-height, 1rem)),\n      transparent 100%\n  );-webkit-mask-image:var(--limel-overflow-mask-vertical);mask-image:var(--limel-overflow-mask-vertical);padding-top:var(--limel-top-edge-fade-height, 1rem);padding-bottom:var(--limel-bottom-edge-fade-height, 1rem);padding-right:1rem;padding-left:1rem;min-height:0;min-width:0;overflow:hidden auto}a{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;position:relative;cursor:pointer;transition:color 0.2s ease;color:rgb(var(--color-blue-default));position:sticky;bottom:0;text-decoration:none;font-size:0.875rem;padding-bottom:0.125rem}a:before{transition:opacity 0.2s ease, transform 0.3s ease-out;content:"";position:absolute;inset:auto 0 0 0;width:calc(100% - 0.5rem);margin:auto;height:0.125rem;border-radius:1rem;background-color:currentColor;opacity:0;transform:scale(0.6)}a:hover{color:rgb(var(--color-blue-default))}a:hover:before{opacity:0.3;transform:scale(1)}span{padding:0 1rem 0.5rem 1rem;min-width:0}';const r=class{constructor(o){e(this,o);this.renderReadMoreLink=()=>{var e,o,r,i;if(!this.readMoreLink){return}return t("span",null,t("a",{href:(e=this.readMoreLink)===null||e===void 0?void 0:e.href,target:(o=this.readMoreLink)===null||o===void 0?void 0:o.target,title:(r=this.readMoreLink)===null||r===void 0?void 0:r.title,tabindex:"0"},(i=this.readMoreLink)===null||i===void 0?void 0:i.text))};this.value=undefined;this.readMoreLink=undefined}render(){return[t("limel-markdown",{value:this.value}),this.renderReadMoreLink()]}};r.style=o;export{r as limel_help_content};
+//# sourceMappingURL=p-86550ce4.entry.js.map

package/dist/lime-elements/p-86550ce4.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["limelHelpContentCss","HelpContent","this","renderReadMoreLink","readMoreLink","h","href","_a","target","_b","title","_c","tabindex","_d","text","render","value"],"sources":["./src/components/help/limel-help-content.scss?tag=limel-help-content&encapsulation=shadow","./src/components/help/help-content.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n:host(limel-help-content) {\n    display: flex;\n    box-sizing: border-box;\n    flex-direction: column;\n    gap: 0.5rem;\n\n    max-height: 30rem;\n    height: 100%;\n}\n\nlimel-markdown {\n    @include mixins.fade-out-overflowed-content-on-edges(vertically);\n\n    padding-right: 1rem;\n    padding-left: 1rem;\n    min-height: 0;\n    min-width: 0;\n    overflow: hidden auto;\n}\n\na {\n    @include mixins.truncate-text;\n    @include mixins.hyperlink;\n\n    position: sticky;\n    bottom: 0;\n\n    text-decoration: none;\n    font-size: 0.875rem;\n    padding-bottom: 0.125rem;\n}\n\nspan {\n    padding: 0 1rem 0.5rem 1rem;\n    min-width: 0;\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { Link } from '../../interface';\n\n/**\n * Help content\n * This is scrollable content that is placed in the popover of the Help component.\n * Moved here mostly to avoid having inlined styles in the parent component.\n * Since you cannot send styles to the Portal component, we need to have this\n * child component.\n * @private\n */\n@Component({\n    tag: 'limel-help-content',\n    shadow: true,\n    styleUrl: 'limel-help-content.scss',\n})\nexport class HelpContent {\n    @Prop()\n    public value: string;\n\n    @Prop()\n    public readMoreLink?: Link;\n\n    public render() {\n        return [\n            <limel-markdown value={this.value} />,\n            this.renderReadMoreLink(),\n        ];\n    }\n\n    private renderReadMoreLink = () => {\n        if (!this.readMoreLink) {\n            return;\n        }\n\n        return (\n            <span>\n                <a\n                    href={this.readMoreLink?.href}\n                    target={this.readMoreLink?.target}\n                    title={this.readMoreLink?.title}\n                    tabindex=\"0\"\n                >\n                    {this.readMoreLink?.text}\n                </a>\n            </span>\n        );\n    };\n}\n"],"mappings":"2CAAA,MAAMA,EAAsB,kzC,MCgBfC,EAAW,M,yBAcZC,KAAAC,mBAAqB,K,YACzB,IAAKD,KAAKE,aAAc,CACpB,M,CAGJ,OACIC,EAAA,YACIA,EAAA,KACIC,MAAMC,EAAAL,KAAKE,gBAAY,MAAAG,SAAA,SAAAA,EAAED,KACzBE,QAAQC,EAAAP,KAAKE,gBAAY,MAAAK,SAAA,SAAAA,EAAED,OAC3BE,OAAOC,EAAAT,KAAKE,gBAAY,MAAAO,SAAA,SAAAA,EAAED,MAC1BE,SAAS,MAERC,EAAAX,KAAKE,gBAAY,MAAAS,SAAA,SAAAA,EAAEC,MAErB,E,iDAtBRC,SACH,MAAO,CACHV,EAAA,kBAAgBW,MAAOd,KAAKc,QAC5Bd,KAAKC,qB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "37.1.0-next.81",
+  "version": "37.1.0-next.83",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -41,7 +41,7 @@
     "generate": "stencil generate"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "^18.4.3",
+    "@commitlint/config-conventional": "^18.4.4",
     "@popperjs/core": "^2.11.8",
     "@rjsf/core": "^2.4.2",
     "@rollup/plugin-node-resolve": "^13.3.0",

package/dist/lime-elements/p-27f1d404.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as t}from"./p-3075aa67.js";const o='@charset "UTF-8";:host(limel-help-content){display:flex;box-sizing:border-box;flex-direction:column;gap:0.5rem;max-height:30rem}limel-markdown{--limel-overflow-mask-vertical:linear-gradient(\n      to bottom,\n      transparent 0%,\n      black calc(0% + var(--limel-top-edge-fade-height, 1rem)),\n      black calc(100% - var(--limel-bottom-edge-fade-height, 1rem)),\n      transparent 100%\n  );-webkit-mask-image:var(--limel-overflow-mask-vertical);mask-image:var(--limel-overflow-mask-vertical);padding-top:var(--limel-top-edge-fade-height, 1rem);padding-bottom:var(--limel-bottom-edge-fade-height, 1rem);padding-right:1rem;padding-left:1rem;min-height:0;min-width:0;overflow:hidden auto}a{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;position:relative;cursor:pointer;transition:color 0.2s ease;color:rgb(var(--color-blue-default));position:sticky;bottom:0;text-decoration:none;font-size:0.875rem;padding-bottom:0.125rem}a:before{transition:opacity 0.2s ease, transform 0.3s ease-out;content:"";position:absolute;inset:auto 0 0 0;width:calc(100% - 0.5rem);margin:auto;height:0.125rem;border-radius:1rem;background-color:currentColor;opacity:0;transform:scale(0.6)}a:hover{color:rgb(var(--color-blue-default))}a:hover:before{opacity:0.3;transform:scale(1)}span{padding:0 1rem 0.5rem 1rem;min-width:0}';const r=class{constructor(o){e(this,o);this.renderReadMoreLink=()=>{var e,o,r,i;if(!this.readMoreLink){return}return t("span",null,t("a",{href:(e=this.readMoreLink)===null||e===void 0?void 0:e.href,target:(o=this.readMoreLink)===null||o===void 0?void 0:o.target,title:(r=this.readMoreLink)===null||r===void 0?void 0:r.title,tabindex:"0"},(i=this.readMoreLink)===null||i===void 0?void 0:i.text))};this.value=undefined;this.readMoreLink=undefined}render(){return[t("limel-markdown",{value:this.value}),this.renderReadMoreLink()]}};r.style=o;export{r as limel_help_content};
-//# sourceMappingURL=p-27f1d404.entry.js.map

package/dist/lime-elements/p-27f1d404.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["limelHelpContentCss","HelpContent","this","renderReadMoreLink","readMoreLink","h","href","_a","target","_b","title","_c","tabindex","_d","text","render","value"],"sources":["./src/components/help/limel-help-content.scss?tag=limel-help-content&encapsulation=shadow","./src/components/help/help-content.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n:host(limel-help-content) {\n    display: flex;\n    box-sizing: border-box;\n    flex-direction: column;\n    gap: 0.5rem;\n\n    max-height: 30rem;\n}\n\nlimel-markdown {\n    @include mixins.fade-out-overflowed-content-on-edges(vertically);\n\n    padding-right: 1rem;\n    padding-left: 1rem;\n    min-height: 0;\n    min-width: 0;\n    overflow: hidden auto;\n}\n\na {\n    @include mixins.truncate-text;\n    @include mixins.hyperlink;\n\n    position: sticky;\n    bottom: 0;\n\n    text-decoration: none;\n    font-size: 0.875rem;\n    padding-bottom: 0.125rem;\n}\n\nspan {\n    padding: 0 1rem 0.5rem 1rem;\n    min-width: 0;\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { Link } from '../../interface';\n\n/**\n * Help content\n * This is scrollable content that is placed in the popover of the Help component.\n * Moved here mostly to avoid having inlined styles in the parent component.\n * Since you cannot send styles to the Portal component, we need to have this\n * child component.\n * @private\n */\n@Component({\n    tag: 'limel-help-content',\n    shadow: true,\n    styleUrl: 'limel-help-content.scss',\n})\nexport class HelpContent {\n    @Prop()\n    public value: string;\n\n    @Prop()\n    public readMoreLink?: Link;\n\n    public render() {\n        return [\n            <limel-markdown value={this.value} />,\n            this.renderReadMoreLink(),\n        ];\n    }\n\n    private renderReadMoreLink = () => {\n        if (!this.readMoreLink) {\n            return;\n        }\n\n        return (\n            <span>\n                <a\n                    href={this.readMoreLink?.href}\n                    target={this.readMoreLink?.target}\n                    title={this.readMoreLink?.title}\n                    tabindex=\"0\"\n                >\n                    {this.readMoreLink?.text}\n                </a>\n            </span>\n        );\n    };\n}\n"],"mappings":"2CAAA,MAAMA,EAAsB,syC,MCgBfC,EAAW,M,yBAcZC,KAAAC,mBAAqB,K,YACzB,IAAKD,KAAKE,aAAc,CACpB,M,CAGJ,OACIC,EAAA,YACIA,EAAA,KACIC,MAAMC,EAAAL,KAAKE,gBAAY,MAAAG,SAAA,SAAAA,EAAED,KACzBE,QAAQC,EAAAP,KAAKE,gBAAY,MAAAK,SAAA,SAAAA,EAAED,OAC3BE,OAAOC,EAAAT,KAAKE,gBAAY,MAAAO,SAAA,SAAAA,EAAED,MAC1BE,SAAS,MAERC,EAAAX,KAAKE,gBAAY,MAAAS,SAAA,SAAAA,EAAEC,MAErB,E,iDAtBRC,SACH,MAAO,CACHV,EAAA,kBAAgBW,MAAOd,KAAKc,QAC5Bd,KAAKC,qB"}

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

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as o,H as r}from"./p-3075aa67.js";const i='@charset "UTF-8";:host(limel-split-button.has-menu){--button-padding-right:2rem}:host(limel-split-button){display:inline-flex;isolation:isolate}:host(limel-split-button) *{box-sizing:border-box}:host([disabled]){pointer-events:none}limel-button{width:100%}limel-menu{display:flex;justify-content:flex-end;position:relative;z-index:1;padding:0.125rem;margin-left:calc(var(--button-padding-right) * -1);width:var(--button-padding-right)}limel-menu:before{transition:background-color 0.5s ease;content:"";position:absolute;inset:0.375rem auto 0.375rem 0.6875rem;width:1px;background-color:currentColor;opacity:0.2}limel-menu:not([disabled]){color:var(--mdc-theme-primary, rgb(var(--color-teal-default)))}limel-menu:not([disabled]).primary{color:var(--mdc-theme-on-primary, rgb(var(--color-white)))}limel-menu[disabled]{color:rgba(var(--contrast-1600), 0.37)}limel-menu:hover:before,limel-menu:focus-within:before{background-color:transparent}.menu-trigger{all:unset;text-align:center;font-weight:bold;border-radius:0.125rem;height:100%;width:1rem}.menu-trigger:not(:disabled){transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:transparent;cursor:pointer}.menu-trigger:not(:disabled):hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.menu-trigger:not(:disabled):active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.menu-trigger:not(:disabled):focus{outline:none}.menu-trigger:not(:disabled):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.menu-trigger:not(:disabled):focus-visible,.menu-trigger:not(:disabled):hover{background-color:rgb(var(--color-white), 0.1)}.menu-trigger:before{content:"";position:absolute;inset:-0.25rem;z-index:-1}';const s=class{constructor(r){e(this,r);this.select=t(this,"select",7);this.renderMenu=()=>{if(!this.items.length){return}return o("limel-menu",{class:{primary:this.primary},disabled:this.disabled,items:this.items,openDirection:"bottom"},o("button",{class:"menu-trigger",slot:"trigger",disabled:this.disabled},"⋮"))};this.label=undefined;this.primary=false;this.icon=undefined;this.disabled=false;this.items=[]}render(){return o(r,{class:{"has-menu":!!this.items.length}},o("limel-button",{label:this.label,primary:this.primary,icon:this.icon,disabled:this.disabled}),this.renderMenu())}};s.style=i;export{s as limel_split_button};
-//# sourceMappingURL=p-b2057def.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["splitButtonCss","SplitButton","this","renderMenu","items","length","h","class","primary","disabled","openDirection","slot","render","Host","label","icon"],"sources":["./src/components/split-button/split-button.scss?tag=limel-split-button&encapsulation=shadow","./src/components/split-button/split-button.tsx"],"sourcesContent":["@import '../../style/mixins';\n\n:host(limel-split-button.has-menu) {\n    --button-padding-right: 2rem;\n}\n\n:host(limel-split-button) {\n    display: inline-flex;\n    isolation: isolate;\n\n    * {\n        box-sizing: border-box;\n    }\n}\n\n:host([disabled]) {\n    pointer-events: none;\n}\n\nlimel-button {\n    width: 100%;\n}\n\n$distance-around-trigger: 0.125rem;\n\nlimel-menu {\n    display: flex;\n    justify-content: flex-end;\n    position: relative;\n    z-index: 1;\n\n    padding: $distance-around-trigger;\n    margin-left: calc(var(--button-padding-right) * -1);\n    width: var(--button-padding-right);\n\n    &:before {\n        transition: background-color 0.5s ease;\n        content: '';\n        position: absolute;\n        inset: 0.375rem auto 0.375rem 0.6875rem;\n        width: 1px;\n        background-color: currentColor;\n\n        opacity: 0.2;\n    }\n\n    &:not([disabled]) {\n        color: var(\n            --mdc-theme-primary,\n            rgb(var(--color-teal-default))\n        ); // similar to limel-button text\n\n        &.primary {\n            color: var(\n                --mdc-theme-on-primary,\n                rgb(var(--color-white))\n            ); // similar to limel-button text\n        }\n    }\n\n    &[disabled] {\n        color: rgba(var(--contrast-1600), 0.37); // similar to limel-button text\n    }\n\n    &:hover,\n    &:focus-within {\n        &:before {\n            background-color: transparent;\n        }\n    }\n}\n\n.menu-trigger {\n    all: unset;\n\n    text-align: center;\n    font-weight: bold;\n\n    border-radius: 0.125rem;\n    height: 100%;\n    width: 1rem;\n\n    &:not(:disabled) {\n        @include is-flat-clickable();\n        @include visualize-keyboard-focus();\n        cursor: pointer;\n\n        &:focus-visible,\n        &:hover {\n            background-color: rgb(var(--color-white), 0.1);\n        }\n    }\n\n    &:before {\n        // prevents unintentionally activating the default action,\n        // by clicking on the edge of menu trigger,\n        // which would be activating the default onClick action\n        // on `limel-button`.\n        content: '';\n        position: absolute;\n        inset: -$distance-around-trigger * 2;\n        z-index: -1;\n    }\n}\n","import { Component, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { ListSeparator, MenuItem } from '../../interface';\n\n/**\n * A split button is a button with two components:\n * a button and a side-menu attached to it.\n *\n * Clicking on the button runs a default action,\n * and clicking on the arrow opens up a list of other possible actions.\n *\n * :::warning\n * - Never use a split button for navigation purposes, such as going to next page.\n * The button should only be used for performing commands!\n * - Never use this component instead of a Select or Menu component!\n * :::\n * @exampleComponent limel-example-split-button-basic\n * @exampleComponent limel-example-split-button-repeat-default-command\n */\n@Component({\n    tag: 'limel-split-button',\n    styleUrl: 'split-button.scss',\n    shadow: true,\n})\nexport class SplitButton {\n    /**\n     * The text to show on the default action part of the button.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Set to `true` to make the button primary.\n     */\n    @Prop({ reflect: true })\n    public primary = false;\n\n    /**\n     * Set icon for the button\n     */\n    @Prop({ reflect: true })\n    public icon: string;\n\n    /**\n     * Set to `true` to disable the button.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * A list of items and separators to show in the menu.\n     */\n    @Prop()\n    public items: Array<MenuItem | ListSeparator> = [];\n\n    /**\n     * Is emitted when a menu item is selected.\n     */\n    @Event()\n    public select: EventEmitter<MenuItem>;\n\n    render() {\n        return (\n            <Host\n                class={{\n                    'has-menu': !!this.items.length,\n                }}\n            >\n                <limel-button\n                    label={this.label}\n                    primary={this.primary}\n                    icon={this.icon}\n                    disabled={this.disabled}\n                />\n                {this.renderMenu()}\n            </Host>\n        );\n    }\n\n    private renderMenu = () => {\n        if (!this.items.length) {\n            return;\n        }\n\n        return (\n            <limel-menu\n                class={{\n                    primary: this.primary,\n                }}\n                disabled={this.disabled}\n                items={this.items}\n                openDirection=\"bottom\"\n            >\n                <button\n                    class=\"menu-trigger\"\n                    slot=\"trigger\"\n                    disabled={this.disabled}\n                >\n                    ⋮\n                </button>\n            </limel-menu>\n        );\n    };\n}\n"],"mappings":"yDAAA,MAAMA,EAAiB,62D,MCuBVC,EAAW,M,wDAuDZC,KAAAC,WAAa,KACjB,IAAKD,KAAKE,MAAMC,OAAQ,CACpB,M,CAGJ,OACIC,EAAA,cACIC,MAAO,CACHC,QAASN,KAAKM,SAElBC,SAAUP,KAAKO,SACfL,MAAOF,KAAKE,MACZM,cAAc,UAEdJ,EAAA,UACIC,MAAM,eACNI,KAAK,UACLF,SAAUP,KAAKO,UAAQ,KAIlB,E,kCAjEJ,M,kCAYC,M,WAM8B,E,CAQhDG,SACI,OACIN,EAACO,EAAI,CACDN,MAAO,CACH,aAAcL,KAAKE,MAAMC,SAG7BC,EAAA,gBACIQ,MAAOZ,KAAKY,MACZN,QAASN,KAAKM,QACdO,KAAMb,KAAKa,KACXN,SAAUP,KAAKO,WAElBP,KAAKC,a"}