@limetech/lime-elements 37.1.0-next.47 → 37.1.0-next.49

package/dist/collection/components/collapsible-section/collapsible-section.css

@@ -160,8 +160,8 @@ header {
   align-items: center;
   display: flex;
   justify-content: space-between;
-  padding-left: 0.625rem;
-  padding-right: 0.625rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
   height: 3rem;
 }
 
@@ -191,7 +191,6 @@ header {
   text-transform: var(--mdc-typography-headline2-text-transform, inherit);
   color: var(--mdc-theme-on-surface);
   justify-self: flex-start;
-  padding-right: 0.75rem;
   user-select: none;
   padding-right: 0.5rem;
   height: auto;
@@ -208,7 +207,7 @@ header {
   transition: opacity 0.3s ease 0.3s;
   flex-grow: 1;
   height: 0.125rem;
-  border-radius: 0.0625rem;
+  border-radius: 1rem;
   background-color: var(--header-stroke-color, rgb(var(--contrast-900)));
   margin-right: 0.5rem;
   opacity: 0;
@@ -222,41 +221,45 @@ section.open .divider-line {
   flex-shrink: 0;
 }
 
-@keyframes fade-in-body {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
 .body {
-  animation: fade-in-body 0.3s ease-in forwards;
   background-color: var(--body-background-color, var(--contrast-100));
   padding-left: var(--body-padding, 1.25rem);
   padding-right: var(--body-padding, 1.25rem);
-  margin-bottom: 1.5rem;
   border-radius: 0 0 var(--border-radius-of-header) var(--border-radius-of-header);
-  display: none;
+}
+
+.body {
+  --limel-cs-opacity-transition-speed: 0.1s;
+  --limel-cs-opacity-transition-delay: 0s;
+  --limel-cs-grid-template-rows-transition-speed: 0.3s;
+  transition: grid-template-rows var(--limel-cs-grid-template-rows-transition-speed) cubic-bezier(1, 0.09, 0, 0.89);
+  display: grid;
+  grid-template-rows: 0fr;
+}
+.body slot {
+  transition: opacity var(--limel-cs-opacity-transition-speed) ease var(--limel-cs-opacity-transition-delay);
+  display: block;
+  overflow: hidden;
   opacity: 0;
 }
+
 section.open .body {
-  display: block;
+  --limel-cs-opacity-transition-speed: 0.4s;
+  --limel-cs-opacity-transition-delay: 0.3s;
+  --limel-cs-grid-template-rows-transition-speed: 0.46s;
+  grid-template-rows: 1fr;
+}
+section.open .body slot {
+  opacity: 1;
 }
-.body:before, .body:after {
-  content: " ";
-  display: table;
+
+header:hover + .body {
+  will-change: grid-template-rows;
 }
-.body:after {
-  clear: both;
+header:hover + .body slot {
+  will-change: opacity;
 }
 
-/*
- * This file is imported into every component!
- *
- * Nothing in this file may output any CSS
- * without being explicitly called by outside code.
- */
 .expand-icon {
   position: relative;
   height: 1.875rem;

package/dist/collection/components/collapsible-section/collapsible-section.js

@@ -1,6 +1,7 @@
 import { h, } from '@stencil/core';
 import { dispatchResizeEvent } from '../../util/dispatch-resize-event';
 import { makeEnterClickable, removeEnterClickable, } from 'src/util/make-enter-clickable';
+import { createRandomString } from 'src/util/random-string';
 /**
  * @slot - Content to put inside the collapsible section
  * @exampleComponent limel-example-collapsible-section
@@ -11,6 +12,7 @@ import { makeEnterClickable, removeEnterClickable, } from 'src/util/make-enter-c
  */
 export class CollapsibleSection {
   constructor() {
+    this.bodyId = createRandomString();
     this.onClick = () => {
       this.handleInteraction();
     };
@@ -51,7 +53,7 @@ export class CollapsibleSection {
     removeEnterClickable(button);
   }
   render() {
-    return (h("section", { class: `${this.isOpen ? 'open' : ''}` }, h("header", null, h("button", { class: "open-close-toggle", onClick: this.onClick }), h("div", { class: "expand-icon" }, h("div", { class: "line" }), h("div", { class: "line" }), h("div", { class: "line" }), h("div", { class: "line" })), h("h2", { class: "title mdc-typography mdc-typography--headline2" }, this.header), h("div", { class: "divider-line" }), this.renderActions()), h("div", { class: "body" }, h("slot", null))));
+    return (h("section", { class: `${this.isOpen ? 'open' : ''}` }, h("header", null, h("button", { class: "open-close-toggle", onClick: this.onClick, "aria-controls": this.bodyId }), h("div", { class: "expand-icon" }, h("div", { class: "line" }), h("div", { class: "line" }), h("div", { class: "line" }), h("div", { class: "line" })), h("h2", { class: "title mdc-typography mdc-typography--headline2" }, this.header), h("div", { class: "divider-line" }), this.renderActions()), h("div", { class: "body", "aria-hidden": String(!this.isOpen), id: this.bodyId }, h("slot", null))));
   }
   static get is() { return "limel-collapsible-section"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/collapsible-section/collapsible-section.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible-section.js","sourceRoot":"","sources":["../../../src/components/collapsible-section/collapsible-section.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Event,\n    Element,\n    EventEmitter,\n    h,\n    Prop,\n} from '@stencil/core';\nimport { dispatchResizeEvent } from '../../util/dispatch-resize-event';\nimport { Action } from './action';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from 'src/util/make-enter-clickable';\n\n/**\n * @slot - Content to put inside the collapsible section\n * @exampleComponent limel-example-collapsible-section\n * @exampleComponent limel-example-collapsible-section-actions\n * @exampleComponent limel-example-collapsible-section-css-props\n * @exampleComponent limel-example-collapsible-section-external-control\n * @exampleComponent limel-example-collapsible-section-with-slider\n */\n@Component({\n    tag: 'limel-collapsible-section',\n    shadow: true,\n    styleUrl: 'collapsible-section.scss',\n})\nexport class CollapsibleSection {\n    /**\n     * `true` if the section is expanded, `false` if collapsed.\n     */\n    @Prop({ mutable: true, reflect: true })\n    public isOpen: boolean = false;\n\n    /**\n     * Text to display in the header of the section\n     */\n    @Prop({ reflect: true })\n    public header: string;\n\n    /**\n     * Actions to place to the far right inside the header\n     */\n    @Prop()\n    public actions: Action[];\n\n    /**\n     * Emitted when the section is expanded\n     */\n    @Event()\n    private open: EventEmitter<void>;\n\n    /**\n     * Emitted when the section is collapsed\n     */\n    @Event()\n    private close: EventEmitter<void>;\n\n    /**\n     * Emitted when an action is clicked inside the header\n     */\n    @Event()\n    private action: EventEmitter<Action>;\n\n    @Element()\n    private host: HTMLElement;\n\n    public componentDidRender() {\n        const button = this.host.shadowRoot.querySelector(\n            '.open-close-toggle'\n        ) as HTMLElement;\n\n        makeEnterClickable(button);\n    }\n\n    public disconnectedCallback() {\n        const button = this.host.shadowRoot.querySelector(\n            '.open-close-toggle'\n        ) as HTMLElement;\n\n        removeEnterClickable(button);\n    }\n\n    public render() {\n        return (\n            <section class={`${this.isOpen ? 'open' : ''}`}>\n                <header>\n                    <button class=\"open-close-toggle\" onClick={this.onClick} />\n                    <div class=\"expand-icon\">\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                    </div>\n                    <h2 class=\"title mdc-typography mdc-typography--headline2\">\n                        {this.header}\n                    </h2>\n                    <div class=\"divider-line\" />\n                    {this.renderActions()}\n                </header>\n                <div class=\"body\">\n                    <slot />\n                </div>\n            </section>\n        );\n    }\n\n    private onClick = () => {\n        this.handleInteraction();\n    };\n\n    private handleInteraction = () => {\n        this.isOpen = !this.isOpen;\n\n        if (this.isOpen) {\n            this.open.emit();\n            const waitForUiToRender = 100;\n            setTimeout(dispatchResizeEvent, waitForUiToRender);\n        } else {\n            this.close.emit();\n        }\n    };\n\n    private renderActions = () => {\n        if (!this.actions) {\n            return;\n        }\n\n        return (\n            <div class=\"actions\">\n                {this.actions.map(this.renderActionButton)}\n            </div>\n        );\n    };\n\n    private renderActionButton = (action: Action) => {\n        return (\n            <limel-icon-button\n                icon={action.icon}\n                label={action.label}\n                disabled={action.disabled}\n                onClick={this.handleActionClick(action)}\n            />\n        );\n    };\n\n    private handleActionClick = (action: Action) => (event: MouseEvent) => {\n        event.stopPropagation();\n        this.action.emit(action);\n    };\n}\n"]}
+{"version":3,"file":"collapsible-section.js","sourceRoot":"","sources":["../../../src/components/collapsible-section/collapsible-section.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Event,\n    Element,\n    EventEmitter,\n    h,\n    Prop,\n} from '@stencil/core';\nimport { dispatchResizeEvent } from '../../util/dispatch-resize-event';\nimport { Action } from './action';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from 'src/util/make-enter-clickable';\nimport { createRandomString } from 'src/util/random-string';\n\n/**\n * @slot - Content to put inside the collapsible section\n * @exampleComponent limel-example-collapsible-section\n * @exampleComponent limel-example-collapsible-section-actions\n * @exampleComponent limel-example-collapsible-section-css-props\n * @exampleComponent limel-example-collapsible-section-external-control\n * @exampleComponent limel-example-collapsible-section-with-slider\n */\n@Component({\n    tag: 'limel-collapsible-section',\n    shadow: true,\n    styleUrl: 'collapsible-section.scss',\n})\nexport class CollapsibleSection {\n    /**\n     * `true` if the section is expanded, `false` if collapsed.\n     */\n    @Prop({ mutable: true, reflect: true })\n    public isOpen: boolean = false;\n\n    /**\n     * Text to display in the header of the section\n     */\n    @Prop({ reflect: true })\n    public header: string;\n\n    /**\n     * Actions to place to the far right inside the header\n     */\n    @Prop()\n    public actions: Action[];\n\n    /**\n     * Emitted when the section is expanded\n     */\n    @Event()\n    private open: EventEmitter<void>;\n\n    /**\n     * Emitted when the section is collapsed\n     */\n    @Event()\n    private close: EventEmitter<void>;\n\n    /**\n     * Emitted when an action is clicked inside the header\n     */\n    @Event()\n    private action: EventEmitter<Action>;\n\n    @Element()\n    private host: HTMLElement;\n\n    private bodyId = createRandomString();\n\n    public componentDidRender() {\n        const button = this.host.shadowRoot.querySelector(\n            '.open-close-toggle'\n        ) as HTMLElement;\n\n        makeEnterClickable(button);\n    }\n\n    public disconnectedCallback() {\n        const button = this.host.shadowRoot.querySelector(\n            '.open-close-toggle'\n        ) as HTMLElement;\n\n        removeEnterClickable(button);\n    }\n\n    public render() {\n        return (\n            <section class={`${this.isOpen ? 'open' : ''}`}>\n                <header>\n                    <button\n                        class=\"open-close-toggle\"\n                        onClick={this.onClick}\n                        aria-controls={this.bodyId}\n                    />\n                    <div class=\"expand-icon\">\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                    </div>\n                    <h2 class=\"title mdc-typography mdc-typography--headline2\">\n                        {this.header}\n                    </h2>\n                    <div class=\"divider-line\" />\n                    {this.renderActions()}\n                </header>\n                <div\n                    class=\"body\"\n                    aria-hidden={String(!this.isOpen)}\n                    id={this.bodyId}\n                >\n                    <slot />\n                </div>\n            </section>\n        );\n    }\n\n    private onClick = () => {\n        this.handleInteraction();\n    };\n\n    private handleInteraction = () => {\n        this.isOpen = !this.isOpen;\n\n        if (this.isOpen) {\n            this.open.emit();\n            const waitForUiToRender = 100;\n            setTimeout(dispatchResizeEvent, waitForUiToRender);\n        } else {\n            this.close.emit();\n        }\n    };\n\n    private renderActions = () => {\n        if (!this.actions) {\n            return;\n        }\n\n        return (\n            <div class=\"actions\">\n                {this.actions.map(this.renderActionButton)}\n            </div>\n        );\n    };\n\n    private renderActionButton = (action: Action) => {\n        return (\n            <limel-icon-button\n                icon={action.icon}\n                label={action.label}\n                disabled={action.disabled}\n                onClick={this.handleActionClick(action)}\n            />\n        );\n    };\n\n    private handleActionClick = (action: Action) => (event: MouseEvent) => {\n        event.stopPropagation();\n        this.action.emit(action);\n    };\n}\n"]}

package/dist/collection/components/icon-button/icon-button.js

@@ -10,6 +10,7 @@ import { createRandomString } from '../../util/random-string';
  */
 export class IconButton {
   constructor() {
+    this.tooltipId = createRandomString();
     this.icon = undefined;
     this.elevated = false;
     this.label = undefined;
@@ -35,11 +36,10 @@ export class IconButton {
   }
   render() {
     const buttonAttributes = {};
-    const tooltipId = createRandomString();
     if (this.host.hasAttribute('tabindex')) {
       buttonAttributes.tabindex = this.host.getAttribute('tabindex');
     }
-    return (h("button", Object.assign({ disabled: this.disabled, id: tooltipId }, buttonAttributes), h("limel-icon", { name: this.icon, badge: true }), this.renderTooltip(tooltipId)));
+    return (h("button", Object.assign({ disabled: this.disabled, id: this.tooltipId }, buttonAttributes), h("limel-icon", { name: this.icon, badge: true }), this.renderTooltip(this.tooltipId)));
   }
   renderTooltip(tooltipId) {
     if (this.label) {

package/dist/collection/components/icon-button/icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EACH,kBAAkB,EAClB,oBAAoB,GACvB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAE9D;;;;;;GAMG;AAMH,MAAM,OAAO,UAAU;;;oBAYD,KAAK;;oBAYL,KAAK;;EAKhB,iBAAiB;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEM,iBAAiB;IACpB,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAClC,CAAC;EAEM,oBAAoB;IACvB,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACpC,CAAC;EAEM,gBAAgB;IACnB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEO,UAAU;IACd,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IACvE,IAAI,CAAC,OAAO,EAAE;MACV,OAAO;KACV;EACL,CAAC;EAEM,MAAM;IACT,MAAM,gBAAgB,GAA0B,EAAE,CAAC;IACnD,MAAM,SAAS,GAAG,kBAAkB,EAAE,CAAC;IAEvC,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;MACpC,gBAAgB,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;KAClE;IAED,OAAO,CACH,4BACI,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,SAAS,IACT,gBAAgB;MAEpB,kBAAY,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,GAAI;MAC3C,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CACzB,CACZ,CAAC;EACN,CAAC;EACO,aAAa,CAAC,SAAS;IAC3B,IAAI,IAAI,CAAC,KAAK,EAAE;MACZ,OAAO,qBAAe,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC;KACrE;EACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, h, Prop } from '@stencil/core';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from 'src/util/make-enter-clickable';\nimport { createRandomString } from '../../util/random-string';\n\n/**\n * @exampleComponent limel-example-icon-button-basic\n * @exampleComponent limel-example-icon-button-disabled\n * @exampleComponent limel-example-icon-button-elevated\n * @exampleComponent limel-example-icon-button-toggle-state\n * @exampleComponent limel-example-icon-button-composite\n */\n@Component({\n    tag: 'limel-icon-button',\n    shadow: true,\n    styleUrl: 'icon-button.scss',\n})\nexport class IconButton {\n    /**\n     * The icon to display.\n     */\n    @Prop({ reflect: true })\n    public icon: string;\n\n    /**\n     * Set to `true` to give the button our standard \"elevated\" look, lifting\n     * it off the flat layout.\n     */\n    @Prop({ reflect: true })\n    public elevated = false;\n\n    /**\n     * The text to show to screenreaders and other assistive tech.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Set to `true` to disable the button.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    @Element()\n    private host: HTMLLimelIconButtonElement;\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private initialize() {\n        const element = this.host.shadowRoot.querySelector('.mdc-icon-button');\n        if (!element) {\n            return;\n        }\n    }\n\n    public render() {\n        const buttonAttributes: { tabindex?: string } = {};\n        const tooltipId = createRandomString();\n\n        if (this.host.hasAttribute('tabindex')) {\n            buttonAttributes.tabindex = this.host.getAttribute('tabindex');\n        }\n\n        return (\n            <button\n                disabled={this.disabled}\n                id={tooltipId}\n                {...buttonAttributes}\n            >\n                <limel-icon name={this.icon} badge={true} />\n                {this.renderTooltip(tooltipId)}\n            </button>\n        );\n    }\n    private renderTooltip(tooltipId) {\n        if (this.label) {\n            return <limel-tooltip elementId={tooltipId} label={this.label} />;\n        }\n    }\n}\n"]}
+{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EACH,kBAAkB,EAClB,oBAAoB,GACvB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAE9D;;;;;;GAMG;AAMH,MAAM,OAAO,UAAU;;IA6CX,cAAS,GAAG,kBAAkB,EAAE,CAAC;;oBAjCvB,KAAK;;oBAYL,KAAK;;EAKhB,iBAAiB;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEM,iBAAiB;IACpB,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAClC,CAAC;EAEM,oBAAoB;IACvB,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACpC,CAAC;EAEM,gBAAgB;IACnB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAIO,UAAU;IACd,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IACvE,IAAI,CAAC,OAAO,EAAE;MACV,OAAO;KACV;EACL,CAAC;EAEM,MAAM;IACT,MAAM,gBAAgB,GAA0B,EAAE,CAAC;IAEnD,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;MACpC,gBAAgB,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;KAClE;IAED,OAAO,CACH,4BACI,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,SAAS,IACd,gBAAgB;MAEpB,kBAAY,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,GAAI;MAC3C,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,CAC9B,CACZ,CAAC;EACN,CAAC;EACO,aAAa,CAAC,SAAS;IAC3B,IAAI,IAAI,CAAC,KAAK,EAAE;MACZ,OAAO,qBAAe,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC;KACrE;EACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, h, Prop } from '@stencil/core';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from 'src/util/make-enter-clickable';\nimport { createRandomString } from '../../util/random-string';\n\n/**\n * @exampleComponent limel-example-icon-button-basic\n * @exampleComponent limel-example-icon-button-disabled\n * @exampleComponent limel-example-icon-button-elevated\n * @exampleComponent limel-example-icon-button-toggle-state\n * @exampleComponent limel-example-icon-button-composite\n */\n@Component({\n    tag: 'limel-icon-button',\n    shadow: true,\n    styleUrl: 'icon-button.scss',\n})\nexport class IconButton {\n    /**\n     * The icon to display.\n     */\n    @Prop({ reflect: true })\n    public icon: string;\n\n    /**\n     * Set to `true` to give the button our standard \"elevated\" look, lifting\n     * it off the flat layout.\n     */\n    @Prop({ reflect: true })\n    public elevated = false;\n\n    /**\n     * The text to show to screenreaders and other assistive tech.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Set to `true` to disable the button.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    @Element()\n    private host: HTMLLimelIconButtonElement;\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private tooltipId = createRandomString();\n\n    private initialize() {\n        const element = this.host.shadowRoot.querySelector('.mdc-icon-button');\n        if (!element) {\n            return;\n        }\n    }\n\n    public render() {\n        const buttonAttributes: { tabindex?: string } = {};\n\n        if (this.host.hasAttribute('tabindex')) {\n            buttonAttributes.tabindex = this.host.getAttribute('tabindex');\n        }\n\n        return (\n            <button\n                disabled={this.disabled}\n                id={this.tooltipId}\n                {...buttonAttributes}\n            >\n                <limel-icon name={this.icon} badge={true} />\n                {this.renderTooltip(this.tooltipId)}\n            </button>\n        );\n    }\n    private renderTooltip(tooltipId) {\n        if (this.label) {\n            return <limel-tooltip elementId={tooltipId} label={this.label} />;\n        }\n    }\n}\n"]}

package/dist/collection/components/table/columns.js

@@ -17,6 +17,7 @@ export class ColumnDefinitionFactory {
       field: column.field,
       hozAlign: column.horizontalAlign,
       headerSort: column.headerSort,
+      headerSortStartingDir: 'desc',
     };
     if (column.headerComponent) {
       definition.titleFormatter = formatHeader(column);

package/dist/collection/components/table/columns.js.map

@@ -1 +1 @@
-{"version":3,"file":"columns.js","sourceRoot":"","sources":["../../../src/components/table/columns.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n    Column,\n    ColumnSorter,\n    ColumnAggregatorFunction,\n} from '../../interface';\nimport Tabulator from 'tabulator-tables';\nimport { escape } from 'html-escaper';\nimport { ElementPool } from './element-pool';\nimport { pickBy, negate } from 'lodash-es';\n\nexport class ColumnDefinitionFactory {\n    constructor(private pool: ElementPool) {\n        this.create = this.create.bind(this);\n    }\n\n    /**\n     * Create Tabulator column definitions from a limel-table column configuration\n     * @param {Column} column config describing the column\n     * @returns {Tabulator.ColumnDefinition} Tabulator column\n     */\n    public create(column: Column<object>): Tabulator.ColumnDefinition {\n        const definition: Tabulator.ColumnDefinition = {\n            title: column.title,\n            field: column.field,\n            hozAlign: column.horizontalAlign,\n            headerSort: column.headerSort,\n        };\n\n        if (column.headerComponent) {\n            definition.titleFormatter = formatHeader(column);\n        }\n\n        if (column.component?.name || column.formatter) {\n            definition.formatter = createFormatter(column, this.pool);\n            definition.formatterParams = column as object;\n        }\n\n        if (column.aggregator) {\n            definition.bottomCalc = getColumnAggregator(column);\n        }\n\n        return definition;\n    }\n}\n\n/**\n * Formats the header of the column\n * @param {Column} column the configuration for the column\n * @returns {string | HTMLElement} custom component that renders a column header\n */\nexport const formatHeader = (column: Column) => (): string | HTMLElement => {\n    const headerElement = document.createElement('div');\n    headerElement.setAttribute('class', 'lime-col-title__custom-component');\n\n    const titleElement = document.createElement('span');\n    titleElement.setAttribute('class', 'title-component-text');\n    titleElement.innerText = column.title;\n\n    const customElement = document.createElement(column.headerComponent.name);\n    customElement.setAttribute('class', 'title-component-slot');\n\n    let props: object = column.headerComponent.props || {};\n    if (column.headerComponent.propsFactory) {\n        props = {\n            ...props,\n            // we pass null to propsFactory function because no data in column header\n            ...column.headerComponent.propsFactory(null),\n        };\n    }\n\n    setElementProperties(customElement, props);\n\n    headerElement.appendChild(titleElement);\n    headerElement.appendChild(customElement);\n\n    return headerElement;\n};\n\n/**\n * Create a formatter to be used to format values in a column\n * @param {Column} column config describing the column\n * @param {ElementPool} pool pool to get custom components from\n * @returns {Tabulator.Formatter} Tabulator formatter\n */\nexport function createFormatter(\n    column: Column,\n    pool: ElementPool\n): Tabulator.Formatter {\n    if (!column.component?.name) {\n        return formatCell;\n    }\n\n    if (!columnElementExists(column)) {\n        // eslint-disable-next-line no-console\n        console.warn(\n            `Failed to render custom component for column \"${column.field.toString()}\". Custom element <${\n                column.component.name\n            }/> does not exist. Using the default formatter.`\n        );\n\n        return formatCell;\n    }\n\n    return (cell: Tabulator.CellComponent) => {\n        const value = formatCell(cell, column);\n\n        return createCustomComponent(cell, column, value, pool);\n    };\n}\n\nfunction columnElementExists(column: Column<any>) {\n    const name = column.component.name;\n    if (typeof name === 'string') {\n        const isNativeElement = !name.includes('-');\n        const customElementExists = customElements.get(column.component.name);\n\n        return isNativeElement || customElementExists;\n    } else {\n        return false;\n    }\n}\n\n/**\n * Format the value of a cell in the table\n * @param {Tabulator.CellComponent} cell the cell being rendered in the table\n * @param {Column} column configuration for the current column\n * @returns {string} the formatted value\n */\nexport function formatCell(\n    cell: Tabulator.CellComponent,\n    column: Column\n): string {\n    const data = cell.getData();\n    let value = cell.getValue();\n\n    if (column.formatter) {\n        value = column.formatter(value, data);\n    }\n\n    if (typeof value === 'string' && !column.component) {\n        value = escape(value);\n    }\n\n    return value;\n}\n\n/**\n * Create a custom component that renders a cell value\n * @param {Tabulator.CellComponent} cell Tabulator cell\n * @param {Column} column lime-elements column configuration\n * @param {string} value the value of the cell being rendered\n * @param {ElementPool} pool pool to get custom components from\n * @returns {HTMLElement} custom component that renders a value in the table\n */\nexport function createCustomComponent(\n    cell: Tabulator.CellComponent,\n    column: Column,\n    value: string,\n    pool: ElementPool\n): HTMLElement {\n    const field = cell.getField();\n    const data = cell.getData();\n\n    const element = pool.get(column.component.name);\n    let props: object = column.component.props || {};\n    if (column.component.propsFactory) {\n        props = {\n            ...props,\n            ...column.component.propsFactory(data),\n        };\n    }\n\n    props = {\n        ...props,\n        field: field,\n        value: value,\n        data: data,\n    };\n\n    element.style.display = 'inline-block';\n    setElementProperties(element, props);\n\n    createResizeObserver(element, cell.getColumn());\n\n    return element;\n}\n\n/**\n * Set all properties for a custom element, including event listeners\n * @param {HTMLElement} element the custom element\n * @param {object} props object of properties and event listeners\n */\nexport function setElementProperties(element: HTMLElement, props: object) {\n    const properties = pickBy(props, negate(isEventListener));\n    Object.assign(element, properties);\n\n    const listeners = pickBy(props, isEventListener);\n    Object.entries(listeners).forEach(([key, value]) => {\n        const event = getEventName(key);\n        element.addEventListener(event, value as any);\n    });\n}\n\n/**\n * Check if a property is an event listener.\n *\n * An event listener has to be a function and its property name have to start\n * with \"on\" followed by the name of the event in camel case, e.g. \"onEventName\"\n * @param {any} value the value to check\n * @param {string} key name of the property\n * @returns {boolean} true if the property of the object is an event listener\n */\nfunction isEventListener(value: any, key: string): boolean {\n    if (typeof value !== 'function') {\n        return false;\n    }\n\n    return /^on[A-Z]/.test(key);\n}\n\n/**\n * Get the name of an event from the name of an event listener\n *\n * E.g. \"onMyEvent\" will return \"myEvent\"\n * @param {string} eventListener name of the event listener\n * @returns {string} the name of the event\n */\nfunction getEventName(eventListener: string): string {\n    // eslint-disable-next-line no-magic-numbers\n    return eventListener.charAt(2).toLowerCase() + eventListener.slice(3);\n}\n\nfunction createResizeObserver(\n    element: HTMLElement,\n    column: Tabulator.ColumnComponent\n) {\n    if (!('ResizeObserver' in window)) {\n        return;\n    }\n\n    const RESIZE_TIMEOUT = 1000;\n    const COLUMN_PADDING = 16;\n\n    const observer = new ResizeObserver(() => {\n        const width = element.getBoundingClientRect().width;\n        const newWidth = width + COLUMN_PADDING;\n\n        if (newWidth < column.getWidth()) {\n            return;\n        }\n\n        column.setWidth(newWidth);\n    });\n    observer.observe(element);\n\n    // We give the component some time to resize itself before we\n    // stop listening for resize events\n    setTimeout(() => {\n        observer.unobserve(element);\n    }, RESIZE_TIMEOUT);\n}\n\n// Tabulator seems to also have this `field` property, that does not appear on\n// the interface for some reason\ninterface TabulatorSorter extends Tabulator.Sorter {\n    field: string;\n}\n\n/**\n * Create a column sorter from a tabulator sorter\n * @param {Column[]} columns all available columns in the table\n * @returns {Function} function that creates a sorter from a tabulator sorter\n */\nexport const createColumnSorter =\n    (columns: Column[]) =>\n    (sorter: TabulatorSorter): ColumnSorter => {\n        const column = columns.find((col) => col.field === sorter.field);\n        const direction = sorter.dir.toUpperCase() as 'ASC' | 'DESC';\n\n        return {\n            column: column,\n            direction: direction,\n        };\n    };\n\nexport function getColumnAggregator(column: Column): Tabulator.ColumnCalc {\n    const aggregator = column.aggregator;\n    if (isAggregatorFunction(aggregator)) {\n        return (values: any[], data: object[]) => {\n            return aggregator(column, values, data);\n        };\n    }\n\n    return aggregator;\n}\n\nfunction isAggregatorFunction(value: any): value is ColumnAggregatorFunction {\n    return typeof value === 'function';\n}\n"]}
+{"version":3,"file":"columns.js","sourceRoot":"","sources":["../../../src/components/table/columns.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n    Column,\n    ColumnSorter,\n    ColumnAggregatorFunction,\n} from '../../interface';\nimport Tabulator from 'tabulator-tables';\nimport { escape } from 'html-escaper';\nimport { ElementPool } from './element-pool';\nimport { pickBy, negate } from 'lodash-es';\n\nexport class ColumnDefinitionFactory {\n    constructor(private pool: ElementPool) {\n        this.create = this.create.bind(this);\n    }\n\n    /**\n     * Create Tabulator column definitions from a limel-table column configuration\n     * @param {Column} column config describing the column\n     * @returns {Tabulator.ColumnDefinition} Tabulator column\n     */\n    public create(column: Column<object>): Tabulator.ColumnDefinition {\n        const definition: Tabulator.ColumnDefinition = {\n            title: column.title,\n            field: column.field,\n            hozAlign: column.horizontalAlign,\n            headerSort: column.headerSort,\n            headerSortStartingDir: 'desc',\n        };\n\n        if (column.headerComponent) {\n            definition.titleFormatter = formatHeader(column);\n        }\n\n        if (column.component?.name || column.formatter) {\n            definition.formatter = createFormatter(column, this.pool);\n            definition.formatterParams = column as object;\n        }\n\n        if (column.aggregator) {\n            definition.bottomCalc = getColumnAggregator(column);\n        }\n\n        return definition;\n    }\n}\n\n/**\n * Formats the header of the column\n * @param {Column} column the configuration for the column\n * @returns {string | HTMLElement} custom component that renders a column header\n */\nexport const formatHeader = (column: Column) => (): string | HTMLElement => {\n    const headerElement = document.createElement('div');\n    headerElement.setAttribute('class', 'lime-col-title__custom-component');\n\n    const titleElement = document.createElement('span');\n    titleElement.setAttribute('class', 'title-component-text');\n    titleElement.innerText = column.title;\n\n    const customElement = document.createElement(column.headerComponent.name);\n    customElement.setAttribute('class', 'title-component-slot');\n\n    let props: object = column.headerComponent.props || {};\n    if (column.headerComponent.propsFactory) {\n        props = {\n            ...props,\n            // we pass null to propsFactory function because no data in column header\n            ...column.headerComponent.propsFactory(null),\n        };\n    }\n\n    setElementProperties(customElement, props);\n\n    headerElement.appendChild(titleElement);\n    headerElement.appendChild(customElement);\n\n    return headerElement;\n};\n\n/**\n * Create a formatter to be used to format values in a column\n * @param {Column} column config describing the column\n * @param {ElementPool} pool pool to get custom components from\n * @returns {Tabulator.Formatter} Tabulator formatter\n */\nexport function createFormatter(\n    column: Column,\n    pool: ElementPool\n): Tabulator.Formatter {\n    if (!column.component?.name) {\n        return formatCell;\n    }\n\n    if (!columnElementExists(column)) {\n        // eslint-disable-next-line no-console\n        console.warn(\n            `Failed to render custom component for column \"${column.field.toString()}\". Custom element <${\n                column.component.name\n            }/> does not exist. Using the default formatter.`\n        );\n\n        return formatCell;\n    }\n\n    return (cell: Tabulator.CellComponent) => {\n        const value = formatCell(cell, column);\n\n        return createCustomComponent(cell, column, value, pool);\n    };\n}\n\nfunction columnElementExists(column: Column<any>) {\n    const name = column.component.name;\n    if (typeof name === 'string') {\n        const isNativeElement = !name.includes('-');\n        const customElementExists = customElements.get(column.component.name);\n\n        return isNativeElement || customElementExists;\n    } else {\n        return false;\n    }\n}\n\n/**\n * Format the value of a cell in the table\n * @param {Tabulator.CellComponent} cell the cell being rendered in the table\n * @param {Column} column configuration for the current column\n * @returns {string} the formatted value\n */\nexport function formatCell(\n    cell: Tabulator.CellComponent,\n    column: Column\n): string {\n    const data = cell.getData();\n    let value = cell.getValue();\n\n    if (column.formatter) {\n        value = column.formatter(value, data);\n    }\n\n    if (typeof value === 'string' && !column.component) {\n        value = escape(value);\n    }\n\n    return value;\n}\n\n/**\n * Create a custom component that renders a cell value\n * @param {Tabulator.CellComponent} cell Tabulator cell\n * @param {Column} column lime-elements column configuration\n * @param {string} value the value of the cell being rendered\n * @param {ElementPool} pool pool to get custom components from\n * @returns {HTMLElement} custom component that renders a value in the table\n */\nexport function createCustomComponent(\n    cell: Tabulator.CellComponent,\n    column: Column,\n    value: string,\n    pool: ElementPool\n): HTMLElement {\n    const field = cell.getField();\n    const data = cell.getData();\n\n    const element = pool.get(column.component.name);\n    let props: object = column.component.props || {};\n    if (column.component.propsFactory) {\n        props = {\n            ...props,\n            ...column.component.propsFactory(data),\n        };\n    }\n\n    props = {\n        ...props,\n        field: field,\n        value: value,\n        data: data,\n    };\n\n    element.style.display = 'inline-block';\n    setElementProperties(element, props);\n\n    createResizeObserver(element, cell.getColumn());\n\n    return element;\n}\n\n/**\n * Set all properties for a custom element, including event listeners\n * @param {HTMLElement} element the custom element\n * @param {object} props object of properties and event listeners\n */\nexport function setElementProperties(element: HTMLElement, props: object) {\n    const properties = pickBy(props, negate(isEventListener));\n    Object.assign(element, properties);\n\n    const listeners = pickBy(props, isEventListener);\n    Object.entries(listeners).forEach(([key, value]) => {\n        const event = getEventName(key);\n        element.addEventListener(event, value as any);\n    });\n}\n\n/**\n * Check if a property is an event listener.\n *\n * An event listener has to be a function and its property name have to start\n * with \"on\" followed by the name of the event in camel case, e.g. \"onEventName\"\n * @param {any} value the value to check\n * @param {string} key name of the property\n * @returns {boolean} true if the property of the object is an event listener\n */\nfunction isEventListener(value: any, key: string): boolean {\n    if (typeof value !== 'function') {\n        return false;\n    }\n\n    return /^on[A-Z]/.test(key);\n}\n\n/**\n * Get the name of an event from the name of an event listener\n *\n * E.g. \"onMyEvent\" will return \"myEvent\"\n * @param {string} eventListener name of the event listener\n * @returns {string} the name of the event\n */\nfunction getEventName(eventListener: string): string {\n    // eslint-disable-next-line no-magic-numbers\n    return eventListener.charAt(2).toLowerCase() + eventListener.slice(3);\n}\n\nfunction createResizeObserver(\n    element: HTMLElement,\n    column: Tabulator.ColumnComponent\n) {\n    if (!('ResizeObserver' in window)) {\n        return;\n    }\n\n    const RESIZE_TIMEOUT = 1000;\n    const COLUMN_PADDING = 16;\n\n    const observer = new ResizeObserver(() => {\n        const width = element.getBoundingClientRect().width;\n        const newWidth = width + COLUMN_PADDING;\n\n        if (newWidth < column.getWidth()) {\n            return;\n        }\n\n        column.setWidth(newWidth);\n    });\n    observer.observe(element);\n\n    // We give the component some time to resize itself before we\n    // stop listening for resize events\n    setTimeout(() => {\n        observer.unobserve(element);\n    }, RESIZE_TIMEOUT);\n}\n\n// Tabulator seems to also have this `field` property, that does not appear on\n// the interface for some reason\ninterface TabulatorSorter extends Tabulator.Sorter {\n    field: string;\n}\n\n/**\n * Create a column sorter from a tabulator sorter\n * @param {Column[]} columns all available columns in the table\n * @returns {Function} function that creates a sorter from a tabulator sorter\n */\nexport const createColumnSorter =\n    (columns: Column[]) =>\n    (sorter: TabulatorSorter): ColumnSorter => {\n        const column = columns.find((col) => col.field === sorter.field);\n        const direction = sorter.dir.toUpperCase() as 'ASC' | 'DESC';\n\n        return {\n            column: column,\n            direction: direction,\n        };\n    };\n\nexport function getColumnAggregator(column: Column): Tabulator.ColumnCalc {\n    const aggregator = column.aggregator;\n    if (isAggregatorFunction(aggregator)) {\n        return (values: any[], data: object[]) => {\n            return aggregator(column, values, data);\n        };\n    }\n\n    return aggregator;\n}\n\nfunction isAggregatorFunction(value: any): value is ColumnAggregatorFunction {\n    return typeof value === 'function';\n}\n"]}

package/dist/esm/limel-collapsible-section.entry.js

@@ -1,8 +1,9 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-232e9616.js';
 import { d as dispatchResizeEvent } from './dispatch-resize-event-cd1d230c.js';
 import { m as makeEnterClickable, r as removeEnterClickable } from './make-enter-clickable-0473e94a.js';
+import { c as createRandomString } from './random-string-812b1c35.js';
 
-const collapsibleSectionCss = ":host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}:host(limel-collapsible-section){--border-radius-of-header:0.75rem;display:block}:host([hidden]){display:none}:host([disabled]){pointer-events:none}.open-close-toggle{all:unset;position:absolute;inset:0;width:100%;transition:background-color 0.4s ease, border-radius 0.1s ease;cursor:pointer;z-index:-1;background-color:var(--closed-header-background-color, rgb(var(--contrast-200)));border-radius:var(--border-radius-of-header)}.open-close-toggle:focus{outline:none}.open-close-toggle:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.open-close-toggle:hover{background-color:var(--open-header-background-color, rgb(var(--contrast-300)))}section.open .open-close-toggle{background-color:var(--open-header-background-color, rgb(var(--contrast-100)));border-radius:var(--border-radius-of-header) var(--border-radius-of-header) 0 0}section.open .open-close-toggle:hover{background-color:var(--open-header-background-color, rgb(var(--contrast-300)))}.title,.divider-line,.expand-icon{pointer-events:none}header{isolation:isolate;position:relative;align-items:center;display:flex;justify-content:space-between;padding-left:0.625rem;padding-right:0.625rem;height:3rem}.title{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-headline2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1rem;font-size:var(--mdc-typography-headline2-font-size, 1rem);line-height:0.875rem;line-height:var(--mdc-typography-headline2-line-height, 0.875rem);font-weight:300;font-weight:var(--mdc-typography-headline2-font-weight, 300);letter-spacing:-0.0083333333em;letter-spacing:var(--mdc-typography-headline2-letter-spacing, -0.0083333333em);text-decoration:inherit;text-decoration:var(--mdc-typography-headline2-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline2-text-transform, inherit);color:var(--mdc-theme-on-surface);justify-self:flex-start;padding-right:0.75rem;user-select:none;padding-right:0.5rem;height:auto;max-height:3rem;line-height:1.2rem;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.divider-line{transition:opacity 0.3s ease 0.3s;flex-grow:1;height:0.125rem;border-radius:0.0625rem;background-color:var(--header-stroke-color, rgb(var(--contrast-900)));margin-right:0.5rem;opacity:0}section.open .divider-line{opacity:0.16}.actions{justify-self:flex-end;flex-shrink:0}@keyframes fade-in-body{0%{opacity:0}100%{opacity:1}}.body{animation:fade-in-body 0.3s ease-in forwards;background-color:var(--body-background-color, var(--contrast-100));padding-left:var(--body-padding, 1.25rem);padding-right:var(--body-padding, 1.25rem);margin-bottom:1.5rem;border-radius:0 0 var(--border-radius-of-header) var(--border-radius-of-header);display:none;opacity:0}section.open .body{display:block}.body:before,.body:after{content:\" \";display:table}.body:after{clear:both}.expand-icon{position:relative;height:1.875rem;margin:0 1rem 0 0.5rem;width:0.75rem;flex-shrink:0}.line{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:100%;border-radius:1rem;height:0.125rem;background-color:var(--header-stroke-color, rgb(var(--contrast-900)))}.line:first-of-type,.line:last-of-type{transition:opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s}.line:first-of-type{transform:rotate3d(0, 0, 1, 90deg)}.line:last-of-type{transform:rotate3d(0, 0, 1, -90deg)}.line:nth-of-type(2),.line:nth-of-type(3){transition:opacity 0.2s ease, transform 0.18s ease}section.open .line:first-of-type,section.open .line:last-of-type{transition:opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s}section.open .line:first-of-type{transform:rotate3d(0, 0, 1, 0deg)}section.open .line:last-of-type{transform:rotate3d(0, 0, 1, 0deg)}section.open .line:nth-of-type(2),section.open .line:nth-of-type(3){transition:opacity 1s ease, transform 0.4s ease}section.open .line:nth-of-type(2){transform:translate3d(0, -1rem, 0);opacity:0}section.open .line:nth-of-type(3){transform:translate3d(0, 1rem, 0);opacity:0}.open-close-toggle:hover+.expand-icon .line:first-of-type{transform:rotate3d(0, 0, 1, 0deg)}.open-close-toggle:hover+.expand-icon .line:last-of-type{transform:rotate3d(0, 0, 1, 0deg)}.open-close-toggle:hover+.expand-icon .line:nth-of-type(2),.open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transition:opacity 0.5s ease 0.4s, transform 0.7s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s}.open-close-toggle:hover+.expand-icon .line:nth-of-type(2){transform:translate3d(0, -0.5rem, 0);opacity:0.4}.open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transform:translate3d(0, 0.5rem, 0);opacity:0.4}section.open .open-close-toggle:hover+.expand-icon .line:first-of-type,section.open .open-close-toggle:hover+.expand-icon .line:last-of-type{transition:opacity 0.2s ease 0.4s, transform 0.4s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s}section.open .open-close-toggle:hover+.expand-icon .line:first-of-type{transform:rotate3d(0, 0, 1, 45deg)}section.open .open-close-toggle:hover+.expand-icon .line:last-of-type{transform:rotate3d(0, 0, 1, -45deg)}section.open .open-close-toggle:hover+.expand-icon .line:nth-of-type(2){transform:translate3d(0, -1rem, 0);opacity:0}section.open .open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transform:translate3d(0, 1rem, 0);opacity:0}";
+const collapsibleSectionCss = ":host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}:host(limel-collapsible-section){--border-radius-of-header:0.75rem;display:block}:host([hidden]){display:none}:host([disabled]){pointer-events:none}.open-close-toggle{all:unset;position:absolute;inset:0;width:100%;transition:background-color 0.4s ease, border-radius 0.1s ease;cursor:pointer;z-index:-1;background-color:var(--closed-header-background-color, rgb(var(--contrast-200)));border-radius:var(--border-radius-of-header)}.open-close-toggle:focus{outline:none}.open-close-toggle:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.open-close-toggle:hover{background-color:var(--open-header-background-color, rgb(var(--contrast-300)))}section.open .open-close-toggle{background-color:var(--open-header-background-color, rgb(var(--contrast-100)));border-radius:var(--border-radius-of-header) var(--border-radius-of-header) 0 0}section.open .open-close-toggle:hover{background-color:var(--open-header-background-color, rgb(var(--contrast-300)))}.title,.divider-line,.expand-icon{pointer-events:none}header{isolation:isolate;position:relative;align-items:center;display:flex;justify-content:space-between;padding-left:0.5rem;padding-right:0.5rem;height:3rem}.title{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-headline2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1rem;font-size:var(--mdc-typography-headline2-font-size, 1rem);line-height:0.875rem;line-height:var(--mdc-typography-headline2-line-height, 0.875rem);font-weight:300;font-weight:var(--mdc-typography-headline2-font-weight, 300);letter-spacing:-0.0083333333em;letter-spacing:var(--mdc-typography-headline2-letter-spacing, -0.0083333333em);text-decoration:inherit;text-decoration:var(--mdc-typography-headline2-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline2-text-transform, inherit);color:var(--mdc-theme-on-surface);justify-self:flex-start;user-select:none;padding-right:0.5rem;height:auto;max-height:3rem;line-height:1.2rem;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.divider-line{transition:opacity 0.3s ease 0.3s;flex-grow:1;height:0.125rem;border-radius:1rem;background-color:var(--header-stroke-color, rgb(var(--contrast-900)));margin-right:0.5rem;opacity:0}section.open .divider-line{opacity:0.16}.actions{justify-self:flex-end;flex-shrink:0}.body{background-color:var(--body-background-color, var(--contrast-100));padding-left:var(--body-padding, 1.25rem);padding-right:var(--body-padding, 1.25rem);border-radius:0 0 var(--border-radius-of-header) var(--border-radius-of-header)}.body{--limel-cs-opacity-transition-speed:0.1s;--limel-cs-opacity-transition-delay:0s;--limel-cs-grid-template-rows-transition-speed:0.3s;transition:grid-template-rows var(--limel-cs-grid-template-rows-transition-speed) cubic-bezier(1, 0.09, 0, 0.89);display:grid;grid-template-rows:0fr}.body slot{transition:opacity var(--limel-cs-opacity-transition-speed) ease var(--limel-cs-opacity-transition-delay);display:block;overflow:hidden;opacity:0}section.open .body{--limel-cs-opacity-transition-speed:0.4s;--limel-cs-opacity-transition-delay:0.3s;--limel-cs-grid-template-rows-transition-speed:0.46s;grid-template-rows:1fr}section.open .body slot{opacity:1}header:hover+.body{will-change:grid-template-rows}header:hover+.body slot{will-change:opacity}.expand-icon{position:relative;height:1.875rem;margin:0 1rem 0 0.5rem;width:0.75rem;flex-shrink:0}.line{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:100%;border-radius:1rem;height:0.125rem;background-color:var(--header-stroke-color, rgb(var(--contrast-900)))}.line:first-of-type,.line:last-of-type{transition:opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s}.line:first-of-type{transform:rotate3d(0, 0, 1, 90deg)}.line:last-of-type{transform:rotate3d(0, 0, 1, -90deg)}.line:nth-of-type(2),.line:nth-of-type(3){transition:opacity 0.2s ease, transform 0.18s ease}section.open .line:first-of-type,section.open .line:last-of-type{transition:opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s}section.open .line:first-of-type{transform:rotate3d(0, 0, 1, 0deg)}section.open .line:last-of-type{transform:rotate3d(0, 0, 1, 0deg)}section.open .line:nth-of-type(2),section.open .line:nth-of-type(3){transition:opacity 1s ease, transform 0.4s ease}section.open .line:nth-of-type(2){transform:translate3d(0, -1rem, 0);opacity:0}section.open .line:nth-of-type(3){transform:translate3d(0, 1rem, 0);opacity:0}.open-close-toggle:hover+.expand-icon .line:first-of-type{transform:rotate3d(0, 0, 1, 0deg)}.open-close-toggle:hover+.expand-icon .line:last-of-type{transform:rotate3d(0, 0, 1, 0deg)}.open-close-toggle:hover+.expand-icon .line:nth-of-type(2),.open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transition:opacity 0.5s ease 0.4s, transform 0.7s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s}.open-close-toggle:hover+.expand-icon .line:nth-of-type(2){transform:translate3d(0, -0.5rem, 0);opacity:0.4}.open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transform:translate3d(0, 0.5rem, 0);opacity:0.4}section.open .open-close-toggle:hover+.expand-icon .line:first-of-type,section.open .open-close-toggle:hover+.expand-icon .line:last-of-type{transition:opacity 0.2s ease 0.4s, transform 0.4s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s}section.open .open-close-toggle:hover+.expand-icon .line:first-of-type{transform:rotate3d(0, 0, 1, 45deg)}section.open .open-close-toggle:hover+.expand-icon .line:last-of-type{transform:rotate3d(0, 0, 1, -45deg)}section.open .open-close-toggle:hover+.expand-icon .line:nth-of-type(2){transform:translate3d(0, -1rem, 0);opacity:0}section.open .open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transform:translate3d(0, 1rem, 0);opacity:0}";
 
 const CollapsibleSection = class {
   constructor(hostRef) {
@@ -10,6 +11,7 @@ const CollapsibleSection = class {
     this.open = createEvent(this, "open", 7);
     this.close = createEvent(this, "close", 7);
     this.action = createEvent(this, "action", 7);
+    this.bodyId = createRandomString();
     this.onClick = () => {
       this.handleInteraction();
     };
@@ -50,7 +52,7 @@ const CollapsibleSection = class {
     removeEnterClickable(button);
   }
   render() {
-    return (h("section", { class: `${this.isOpen ? 'open' : ''}` }, h("header", null, h("button", { class: "open-close-toggle", onClick: this.onClick }), h("div", { class: "expand-icon" }, h("div", { class: "line" }), h("div", { class: "line" }), h("div", { class: "line" }), h("div", { class: "line" })), h("h2", { class: "title mdc-typography mdc-typography--headline2" }, this.header), h("div", { class: "divider-line" }), this.renderActions()), h("div", { class: "body" }, h("slot", null))));
+    return (h("section", { class: `${this.isOpen ? 'open' : ''}` }, h("header", null, h("button", { class: "open-close-toggle", onClick: this.onClick, "aria-controls": this.bodyId }), h("div", { class: "expand-icon" }, h("div", { class: "line" }), h("div", { class: "line" }), h("div", { class: "line" }), h("div", { class: "line" })), h("h2", { class: "title mdc-typography mdc-typography--headline2" }, this.header), h("div", { class: "divider-line" }), this.renderActions()), h("div", { class: "body", "aria-hidden": String(!this.isOpen), id: this.bodyId }, h("slot", null))));
   }
   get host() { return getElement(this); }
 };

package/dist/esm/limel-collapsible-section.entry.js.map

@@ -1 +1 @@
-{"file":"limel-collapsible-section.entry.js","mappings":";;;;AAAA,MAAM,qBAAqB,GAAG,q5MAAq5M;;MC4Bt6M,kBAAkB;;;;;;IAgFnB,YAAO,GAAG;MACd,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC5B,CAAC;IAEM,sBAAiB,GAAG;MACxB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;MAE3B,IAAI,IAAI,CAAC,MAAM,EAAE;QACb,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;QACjB,MAAM,iBAAiB,GAAG,GAAG,CAAC;QAC9B,UAAU,CAAC,mBAAmB,EAAE,iBAAiB,CAAC,CAAC;OACtD;WAAM;QACH,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;OACrB;KACJ,CAAC;IAEM,kBAAa,GAAG;MACpB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;QACf,OAAO;OACV;MAED,QACI,WAAK,KAAK,EAAC,SAAS,IACf,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,kBAAkB,CAAC,CACxC,EACR;KACL,CAAC;IAEM,uBAAkB,GAAG,CAAC,MAAc;MACxC,QACI,yBACI,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,GACzC,EACJ;KACL,CAAC;IAEM,sBAAiB,GAAG,CAAC,MAAc,KAAK,CAAC,KAAiB;MAC9D,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAC5B,CAAC;kBArHuB,KAAK;;;;EAmCvB,kBAAkB;IACrB,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAC7C,oBAAoB,CACR,CAAC;IAEjB,kBAAkB,CAAC,MAAM,CAAC,CAAC;GAC9B;EAEM,oBAAoB;IACvB,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAC7C,oBAAoB,CACR,CAAC;IAEjB,oBAAoB,CAAC,MAAM,CAAC,CAAC;GAChC;EAEM,MAAM;IACT,QACI,eAAS,KAAK,EAAE,GAAG,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,EAAE,EAAE,IAC1C,kBACI,cAAQ,KAAK,EAAC,mBAAmB,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,GAAI,EAC3D,WAAK,KAAK,EAAC,aAAa,IACpB,WAAK,KAAK,EAAC,MAAM,GAAG,EACpB,WAAK,KAAK,EAAC,MAAM,GAAG,EACpB,WAAK,KAAK,EAAC,MAAM,GAAG,EACpB,WAAK,KAAK,EAAC,MAAM,GAAG,CAClB,EACN,UAAI,KAAK,EAAC,gDAAgD,IACrD,IAAI,CAAC,MAAM,CACX,EACL,WAAK,KAAK,EAAC,cAAc,GAAG,EAC3B,IAAI,CAAC,aAAa,EAAE,CAChB,EACT,WAAK,KAAK,EAAC,MAAM,IACb,eAAQ,CACN,CACA,EACZ;GACL;;;;;;;","names":[],"sources":["./src/components/collapsible-section/collapsible-section.scss?tag=limel-collapsible-section&encapsulation=shadow","./src/components/collapsible-section/collapsible-section.tsx"],"sourcesContent":["@use '../../style/internal/lime-theme';\n@use '../../style/internal/lime-typography';\n@use '../../style/functions';\n@use '../../style/mixins';\n\n/**\n * @prop --closed-header-background-color: background color for header when closed\n * @prop --open-header-background-color: background color for header when open\n * @prop --header-stroke-color: color of the animated icons that visualize collapsed or normal states of the headers, as well as the divider line on headers\n * @prop --body-background-color: background color for body\n * @prop --body-padding: space around content of the body\n */\n\n:host(limel-collapsible-section) {\n    --border-radius-of-header: 0.75rem;\n    display: block;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n:host([disabled]) {\n    pointer-events: none;\n}\n\n.open-close-toggle {\n    all: unset;\n    position: absolute;\n    inset: 0;\n    width: 100%; // for Firefox\n    @include mixins.visualize-keyboard-focus;\n    transition: background-color 0.4s ease, border-radius 0.1s ease;\n    cursor: pointer;\n    z-index: -1;\n\n    background-color: var(\n        --closed-header-background-color,\n        rgb(var(--contrast-200))\n    );\n    border-radius: var(--border-radius-of-header);\n\n    &:hover {\n        background-color: var(\n            --open-header-background-color,\n            rgb(var(--contrast-300))\n        );\n    }\n\n    section.open & {\n        background-color: var(\n            --open-header-background-color,\n            rgb(var(--contrast-100))\n        );\n        border-radius: var(--border-radius-of-header)\n            var(--border-radius-of-header) 0 0;\n        &:hover {\n            background-color: var(\n                --open-header-background-color,\n                rgb(var(--contrast-300))\n            );\n        }\n    }\n}\n\n.title,\n.divider-line,\n.expand-icon {\n    pointer-events: none;\n}\n\nheader {\n    isolation: isolate;\n    position: relative;\n\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n\n    padding-left: functions.pxToRem(10);\n    padding-right: functions.pxToRem(10);\n    height: functions.pxToRem(48);\n}\n\n.title {\n    @include lime-typography.typography(headline2);\n    color: var(--mdc-theme-on-surface);\n\n    justify-self: flex-start;\n    padding-right: functions.pxToRem(12);\n\n    user-select: none; // mostly to improve experience on Android, where tapping on sections selects the text too\n\n    padding-right: functions.pxToRem(8);\n\n    // Below tries to render text in two lines,\n    // and then truncate if there is no more space\n    height: auto;\n    max-height: 3rem;\n    line-height: 1.2rem;\n    white-space: normal;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.divider-line {\n    transition: opacity 0.3s ease 0.3s;\n    flex-grow: 1;\n    height: functions.pxToRem(2);\n    border-radius: functions.pxToRem(1);\n    background-color: var(--header-stroke-color, rgb(var(--contrast-900)));\n    margin-right: functions.pxToRem(8);\n\n    opacity: 0;\n\n    section.open & {\n        opacity: 0.16;\n    }\n}\n\n.actions {\n    justify-self: flex-end;\n    flex-shrink: 0;\n}\n\n@keyframes fade-in-body {\n    0% {\n        opacity: 0;\n    }\n    100% {\n        opacity: 1;\n    }\n}\n\n.body {\n    animation: fade-in-body 0.3s ease-in forwards;\n    background-color: var(--body-background-color, var(--contrast-100));\n    padding-left: var(--body-padding, functions.pxToRem(20));\n    padding-right: var(--body-padding, functions.pxToRem(20));\n    margin-bottom: functions.pxToRem(24);\n    border-radius: 0 0 var(--border-radius-of-header)\n        var(--border-radius-of-header);\n\n    display: none;\n    opacity: 0;\n    section.open & {\n        display: block;\n    }\n\n    &:before,\n    &:after {\n        content: ' ';\n        display: table;\n    }\n\n    &:after {\n        clear: both;\n    }\n}\n\n@import './partial-styles/expand-icon.scss';\n","import {\n    Component,\n    Event,\n    Element,\n    EventEmitter,\n    h,\n    Prop,\n} from '@stencil/core';\nimport { dispatchResizeEvent } from '../../util/dispatch-resize-event';\nimport { Action } from './action';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from 'src/util/make-enter-clickable';\n\n/**\n * @slot - Content to put inside the collapsible section\n * @exampleComponent limel-example-collapsible-section\n * @exampleComponent limel-example-collapsible-section-actions\n * @exampleComponent limel-example-collapsible-section-css-props\n * @exampleComponent limel-example-collapsible-section-external-control\n * @exampleComponent limel-example-collapsible-section-with-slider\n */\n@Component({\n    tag: 'limel-collapsible-section',\n    shadow: true,\n    styleUrl: 'collapsible-section.scss',\n})\nexport class CollapsibleSection {\n    /**\n     * `true` if the section is expanded, `false` if collapsed.\n     */\n    @Prop({ mutable: true, reflect: true })\n    public isOpen: boolean = false;\n\n    /**\n     * Text to display in the header of the section\n     */\n    @Prop({ reflect: true })\n    public header: string;\n\n    /**\n     * Actions to place to the far right inside the header\n     */\n    @Prop()\n    public actions: Action[];\n\n    /**\n     * Emitted when the section is expanded\n     */\n    @Event()\n    private open: EventEmitter<void>;\n\n    /**\n     * Emitted when the section is collapsed\n     */\n    @Event()\n    private close: EventEmitter<void>;\n\n    /**\n     * Emitted when an action is clicked inside the header\n     */\n    @Event()\n    private action: EventEmitter<Action>;\n\n    @Element()\n    private host: HTMLElement;\n\n    public componentDidRender() {\n        const button = this.host.shadowRoot.querySelector(\n            '.open-close-toggle'\n        ) as HTMLElement;\n\n        makeEnterClickable(button);\n    }\n\n    public disconnectedCallback() {\n        const button = this.host.shadowRoot.querySelector(\n            '.open-close-toggle'\n        ) as HTMLElement;\n\n        removeEnterClickable(button);\n    }\n\n    public render() {\n        return (\n            <section class={`${this.isOpen ? 'open' : ''}`}>\n                <header>\n                    <button class=\"open-close-toggle\" onClick={this.onClick} />\n                    <div class=\"expand-icon\">\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                    </div>\n                    <h2 class=\"title mdc-typography mdc-typography--headline2\">\n                        {this.header}\n                    </h2>\n                    <div class=\"divider-line\" />\n                    {this.renderActions()}\n                </header>\n                <div class=\"body\">\n                    <slot />\n                </div>\n            </section>\n        );\n    }\n\n    private onClick = () => {\n        this.handleInteraction();\n    };\n\n    private handleInteraction = () => {\n        this.isOpen = !this.isOpen;\n\n        if (this.isOpen) {\n            this.open.emit();\n            const waitForUiToRender = 100;\n            setTimeout(dispatchResizeEvent, waitForUiToRender);\n        } else {\n            this.close.emit();\n        }\n    };\n\n    private renderActions = () => {\n        if (!this.actions) {\n            return;\n        }\n\n        return (\n            <div class=\"actions\">\n                {this.actions.map(this.renderActionButton)}\n            </div>\n        );\n    };\n\n    private renderActionButton = (action: Action) => {\n        return (\n            <limel-icon-button\n                icon={action.icon}\n                label={action.label}\n                disabled={action.disabled}\n                onClick={this.handleActionClick(action)}\n            />\n        );\n    };\n\n    private handleActionClick = (action: Action) => (event: MouseEvent) => {\n        event.stopPropagation();\n        this.action.emit(action);\n    };\n}\n"],"version":3}
+{"file":"limel-collapsible-section.entry.js","mappings":";;;;;AAAA,MAAM,qBAAqB,GAAG,w2NAAw2N;;MC6Bz3N,kBAAkB;;;;;;IAwCnB,WAAM,GAAG,kBAAkB,EAAE,CAAC;IAkD9B,YAAO,GAAG;MACd,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC5B,CAAC;IAEM,sBAAiB,GAAG;MACxB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;MAE3B,IAAI,IAAI,CAAC,MAAM,EAAE;QACb,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;QACjB,MAAM,iBAAiB,GAAG,GAAG,CAAC;QAC9B,UAAU,CAAC,mBAAmB,EAAE,iBAAiB,CAAC,CAAC;OACtD;WAAM;QACH,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;OACrB;KACJ,CAAC;IAEM,kBAAa,GAAG;MACpB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;QACf,OAAO;OACV;MAED,QACI,WAAK,KAAK,EAAC,SAAS,IACf,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,kBAAkB,CAAC,CACxC,EACR;KACL,CAAC;IAEM,uBAAkB,GAAG,CAAC,MAAc;MACxC,QACI,yBACI,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,GACzC,EACJ;KACL,CAAC;IAEM,sBAAiB,GAAG,CAAC,MAAc,KAAK,CAAC,KAAiB;MAC9D,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAC5B,CAAC;kBA/HuB,KAAK;;;;EAqCvB,kBAAkB;IACrB,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAC7C,oBAAoB,CACR,CAAC;IAEjB,kBAAkB,CAAC,MAAM,CAAC,CAAC;GAC9B;EAEM,oBAAoB;IACvB,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAC7C,oBAAoB,CACR,CAAC;IAEjB,oBAAoB,CAAC,MAAM,CAAC,CAAC;GAChC;EAEM,MAAM;IACT,QACI,eAAS,KAAK,EAAE,GAAG,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,EAAE,EAAE,IAC1C,kBACI,cACI,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,mBACN,IAAI,CAAC,MAAM,GAC5B,EACF,WAAK,KAAK,EAAC,aAAa,IACpB,WAAK,KAAK,EAAC,MAAM,GAAG,EACpB,WAAK,KAAK,EAAC,MAAM,GAAG,EACpB,WAAK,KAAK,EAAC,MAAM,GAAG,EACpB,WAAK,KAAK,EAAC,MAAM,GAAG,CAClB,EACN,UAAI,KAAK,EAAC,gDAAgD,IACrD,IAAI,CAAC,MAAM,CACX,EACL,WAAK,KAAK,EAAC,cAAc,GAAG,EAC3B,IAAI,CAAC,aAAa,EAAE,CAChB,EACT,WACI,KAAK,EAAC,MAAM,iBACC,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,EACjC,EAAE,EAAE,IAAI,CAAC,MAAM,IAEf,eAAQ,CACN,CACA,EACZ;GACL;;;;;;;","names":[],"sources":["./src/components/collapsible-section/collapsible-section.scss?tag=limel-collapsible-section&encapsulation=shadow","./src/components/collapsible-section/collapsible-section.tsx"],"sourcesContent":["@use '../../style/internal/lime-theme';\n@use '../../style/internal/lime-typography';\n@use '../../style/mixins';\n\n/**\n * @prop --closed-header-background-color: background color for header when closed\n * @prop --open-header-background-color: background color for header when open\n * @prop --header-stroke-color: color of the animated icons that visualize collapsed or normal states of the headers, as well as the divider line on headers\n * @prop --body-background-color: background color for body\n * @prop --body-padding: space around content of the body\n */\n\n:host(limel-collapsible-section) {\n    --border-radius-of-header: 0.75rem;\n    display: block;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n:host([disabled]) {\n    pointer-events: none;\n}\n\n.open-close-toggle {\n    all: unset;\n    position: absolute;\n    inset: 0;\n    width: 100%; // for Firefox\n    @include mixins.visualize-keyboard-focus;\n    transition: background-color 0.4s ease, border-radius 0.1s ease;\n    cursor: pointer;\n    z-index: -1;\n\n    background-color: var(\n        --closed-header-background-color,\n        rgb(var(--contrast-200))\n    );\n    border-radius: var(--border-radius-of-header);\n\n    &:hover {\n        background-color: var(\n            --open-header-background-color,\n            rgb(var(--contrast-300))\n        );\n    }\n\n    section.open & {\n        background-color: var(\n            --open-header-background-color,\n            rgb(var(--contrast-100))\n        );\n        border-radius: var(--border-radius-of-header)\n            var(--border-radius-of-header) 0 0;\n        &:hover {\n            background-color: var(\n                --open-header-background-color,\n                rgb(var(--contrast-300))\n            );\n        }\n    }\n}\n\n.title,\n.divider-line,\n.expand-icon {\n    pointer-events: none;\n}\n\nheader {\n    isolation: isolate;\n    position: relative;\n\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n\n    padding-left: 0.5rem;\n    padding-right: 0.5rem;\n    height: 3rem;\n}\n\n.title {\n    @include lime-typography.typography(headline2);\n    color: var(--mdc-theme-on-surface);\n\n    justify-self: flex-start;\n\n    user-select: none; // mostly to improve experience on Android, where tapping on sections selects the text too\n\n    padding-right: 0.5rem;\n\n    // Below tries to render text in two lines,\n    // and then truncate if there is no more space\n    height: auto;\n    max-height: 3rem;\n    line-height: 1.2rem;\n    white-space: normal;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.divider-line {\n    transition: opacity 0.3s ease 0.3s;\n    flex-grow: 1;\n    height: 0.125rem;\n    border-radius: 1rem;\n    background-color: var(--header-stroke-color, rgb(var(--contrast-900)));\n    margin-right: 0.5rem;\n\n    opacity: 0;\n\n    section.open & {\n        opacity: 0.16;\n    }\n}\n\n.actions {\n    justify-self: flex-end;\n    flex-shrink: 0;\n}\n\n.body {\n    background-color: var(--body-background-color, var(--contrast-100));\n    padding-left: var(--body-padding, 1.25rem);\n    padding-right: var(--body-padding, 1.25rem);\n    border-radius: 0 0 var(--border-radius-of-header)\n        var(--border-radius-of-header);\n}\n\n// This animates height of the body,\n// from `0` to `auto`\n.body {\n    // All below vars are for internal use only!\n    --limel-cs-opacity-transition-speed: 0.1s;\n    --limel-cs-opacity-transition-delay: 0s;\n    --limel-cs-grid-template-rows-transition-speed: 0.3s;\n    transition: grid-template-rows\n        var(--limel-cs-grid-template-rows-transition-speed)\n        cubic-bezier(1, 0.09, 0, 0.89);\n    display: grid;\n    grid-template-rows: 0fr;\n\n    slot {\n        transition: opacity var(--limel-cs-opacity-transition-speed) ease\n            var(--limel-cs-opacity-transition-delay);\n        display: block;\n        overflow: hidden;\n        opacity: 0;\n    }\n}\n\nsection.open {\n    .body {\n        --limel-cs-opacity-transition-speed: 0.4s;\n        --limel-cs-opacity-transition-delay: 0.3s;\n        --limel-cs-grid-template-rows-transition-speed: 0.46s;\n        grid-template-rows: 1fr;\n\n        slot {\n            opacity: 1;\n        }\n    }\n}\n\nheader:hover {\n    + .body {\n        will-change: grid-template-rows;\n\n        slot {\n            will-change: opacity;\n        }\n    }\n}\n\n// End: animating height\n\n@import './partial-styles/expand-icon.scss';\n","import {\n    Component,\n    Event,\n    Element,\n    EventEmitter,\n    h,\n    Prop,\n} from '@stencil/core';\nimport { dispatchResizeEvent } from '../../util/dispatch-resize-event';\nimport { Action } from './action';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from 'src/util/make-enter-clickable';\nimport { createRandomString } from 'src/util/random-string';\n\n/**\n * @slot - Content to put inside the collapsible section\n * @exampleComponent limel-example-collapsible-section\n * @exampleComponent limel-example-collapsible-section-actions\n * @exampleComponent limel-example-collapsible-section-css-props\n * @exampleComponent limel-example-collapsible-section-external-control\n * @exampleComponent limel-example-collapsible-section-with-slider\n */\n@Component({\n    tag: 'limel-collapsible-section',\n    shadow: true,\n    styleUrl: 'collapsible-section.scss',\n})\nexport class CollapsibleSection {\n    /**\n     * `true` if the section is expanded, `false` if collapsed.\n     */\n    @Prop({ mutable: true, reflect: true })\n    public isOpen: boolean = false;\n\n    /**\n     * Text to display in the header of the section\n     */\n    @Prop({ reflect: true })\n    public header: string;\n\n    /**\n     * Actions to place to the far right inside the header\n     */\n    @Prop()\n    public actions: Action[];\n\n    /**\n     * Emitted when the section is expanded\n     */\n    @Event()\n    private open: EventEmitter<void>;\n\n    /**\n     * Emitted when the section is collapsed\n     */\n    @Event()\n    private close: EventEmitter<void>;\n\n    /**\n     * Emitted when an action is clicked inside the header\n     */\n    @Event()\n    private action: EventEmitter<Action>;\n\n    @Element()\n    private host: HTMLElement;\n\n    private bodyId = createRandomString();\n\n    public componentDidRender() {\n        const button = this.host.shadowRoot.querySelector(\n            '.open-close-toggle'\n        ) as HTMLElement;\n\n        makeEnterClickable(button);\n    }\n\n    public disconnectedCallback() {\n        const button = this.host.shadowRoot.querySelector(\n            '.open-close-toggle'\n        ) as HTMLElement;\n\n        removeEnterClickable(button);\n    }\n\n    public render() {\n        return (\n            <section class={`${this.isOpen ? 'open' : ''}`}>\n                <header>\n                    <button\n                        class=\"open-close-toggle\"\n                        onClick={this.onClick}\n                        aria-controls={this.bodyId}\n                    />\n                    <div class=\"expand-icon\">\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                    </div>\n                    <h2 class=\"title mdc-typography mdc-typography--headline2\">\n                        {this.header}\n                    </h2>\n                    <div class=\"divider-line\" />\n                    {this.renderActions()}\n                </header>\n                <div\n                    class=\"body\"\n                    aria-hidden={String(!this.isOpen)}\n                    id={this.bodyId}\n                >\n                    <slot />\n                </div>\n            </section>\n        );\n    }\n\n    private onClick = () => {\n        this.handleInteraction();\n    };\n\n    private handleInteraction = () => {\n        this.isOpen = !this.isOpen;\n\n        if (this.isOpen) {\n            this.open.emit();\n            const waitForUiToRender = 100;\n            setTimeout(dispatchResizeEvent, waitForUiToRender);\n        } else {\n            this.close.emit();\n        }\n    };\n\n    private renderActions = () => {\n        if (!this.actions) {\n            return;\n        }\n\n        return (\n            <div class=\"actions\">\n                {this.actions.map(this.renderActionButton)}\n            </div>\n        );\n    };\n\n    private renderActionButton = (action: Action) => {\n        return (\n            <limel-icon-button\n                icon={action.icon}\n                label={action.label}\n                disabled={action.disabled}\n                onClick={this.handleActionClick(action)}\n            />\n        );\n    };\n\n    private handleActionClick = (action: Action) => (event: MouseEvent) => {\n        event.stopPropagation();\n        this.action.emit(action);\n    };\n}\n"],"version":3}

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

@@ -7,6 +7,7 @@ const iconButtonCss = ":host([hidden]){display:none}:host([disabled]){pointer-ev
 const IconButton = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.tooltipId = createRandomString();
     this.icon = undefined;
     this.elevated = false;
     this.label = undefined;
@@ -32,11 +33,10 @@ const IconButton = class {
   }
   render() {
     const buttonAttributes = {};
-    const tooltipId = createRandomString();
     if (this.host.hasAttribute('tabindex')) {
       buttonAttributes.tabindex = this.host.getAttribute('tabindex');
     }
-    return (h("button", Object.assign({ disabled: this.disabled, id: tooltipId }, buttonAttributes), h("limel-icon", { name: this.icon, badge: true }), this.renderTooltip(tooltipId)));
+    return (h("button", Object.assign({ disabled: this.disabled, id: this.tooltipId }, buttonAttributes), h("limel-icon", { name: this.icon, badge: true }), this.renderTooltip(this.tooltipId)));
   }
   renderTooltip(tooltipId) {
     if (this.label) {

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

@@ -1 +1 @@
-{"file":"limel-icon-button.entry.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,o7BAAo7B;;MCmB77B,UAAU;;;;oBAYD,KAAK;;oBAYL,KAAK;;EAKhB,iBAAiB;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;GACrB;EAEM,iBAAiB;IACpB,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACjC;EAEM,oBAAoB;IACvB,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACnC;EAEM,gBAAgB;IACnB,IAAI,CAAC,UAAU,EAAE,CAAC;GACrB;EAEO,UAAU;IACd,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IACvE,IAAI,CAAC,OAAO,EAAE;MACV,OAAO;KACV;GACJ;EAEM,MAAM;IACT,MAAM,gBAAgB,GAA0B,EAAE,CAAC;IACnD,MAAM,SAAS,GAAG,kBAAkB,EAAE,CAAC;IAEvC,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;MACpC,gBAAgB,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;KAClE;IAED,QACI,4BACI,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,SAAS,IACT,gBAAgB,GAEpB,kBAAY,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,GAAI,EAC3C,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CACzB,EACX;GACL;EACO,aAAa,CAAC,SAAS;IAC3B,IAAI,IAAI,CAAC,KAAK,EAAE;MACZ,OAAO,qBAAe,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC;KACrE;GACJ;;;;;;;","names":[],"sources":["./src/components/icon-button/icon-button.scss?tag=limel-icon-button&encapsulation=shadow","./src/components/icon-button/icon-button.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n/**\n * @prop --icon-background-color: Background color of the button.\n */\n\n:host([hidden]) {\n    display: none;\n}\n\n:host([disabled]) {\n    pointer-events: none;\n}\n\nbutton {\n    all: unset;\n    @include mixins.is-flat-clickable(\n        $background-color: var(--icon-background-color, transparent)\n    );\n    @include mixins.visualize-keyboard-focus;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    height: 2.25rem;\n    width: 2.25rem;\n    border-radius: 50%;\n\n    :host([elevated]) & {\n        &:not(:hover):not(:active):not(:focus-visible) {\n            box-shadow: var(--button-shadow-normal);\n        }\n    }\n\n    &:disabled {\n        color: var(--mdc-theme-text-disabled-on-background);\n    }\n}\n\nlimel-icon {\n    width: 1.25rem;\n}\n","import { Component, Element, h, Prop } from '@stencil/core';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from 'src/util/make-enter-clickable';\nimport { createRandomString } from '../../util/random-string';\n\n/**\n * @exampleComponent limel-example-icon-button-basic\n * @exampleComponent limel-example-icon-button-disabled\n * @exampleComponent limel-example-icon-button-elevated\n * @exampleComponent limel-example-icon-button-toggle-state\n * @exampleComponent limel-example-icon-button-composite\n */\n@Component({\n    tag: 'limel-icon-button',\n    shadow: true,\n    styleUrl: 'icon-button.scss',\n})\nexport class IconButton {\n    /**\n     * The icon to display.\n     */\n    @Prop({ reflect: true })\n    public icon: string;\n\n    /**\n     * Set to `true` to give the button our standard \"elevated\" look, lifting\n     * it off the flat layout.\n     */\n    @Prop({ reflect: true })\n    public elevated = false;\n\n    /**\n     * The text to show to screenreaders and other assistive tech.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Set to `true` to disable the button.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    @Element()\n    private host: HTMLLimelIconButtonElement;\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private initialize() {\n        const element = this.host.shadowRoot.querySelector('.mdc-icon-button');\n        if (!element) {\n            return;\n        }\n    }\n\n    public render() {\n        const buttonAttributes: { tabindex?: string } = {};\n        const tooltipId = createRandomString();\n\n        if (this.host.hasAttribute('tabindex')) {\n            buttonAttributes.tabindex = this.host.getAttribute('tabindex');\n        }\n\n        return (\n            <button\n                disabled={this.disabled}\n                id={tooltipId}\n                {...buttonAttributes}\n            >\n                <limel-icon name={this.icon} badge={true} />\n                {this.renderTooltip(tooltipId)}\n            </button>\n        );\n    }\n    private renderTooltip(tooltipId) {\n        if (this.label) {\n            return <limel-tooltip elementId={tooltipId} label={this.label} />;\n        }\n    }\n}\n"],"version":3}
+{"file":"limel-icon-button.entry.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,o7BAAo7B;;MCmB77B,UAAU;;;IA6CX,cAAS,GAAG,kBAAkB,EAAE,CAAC;;oBAjCvB,KAAK;;oBAYL,KAAK;;EAKhB,iBAAiB;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;GACrB;EAEM,iBAAiB;IACpB,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACjC;EAEM,oBAAoB;IACvB,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACnC;EAEM,gBAAgB;IACnB,IAAI,CAAC,UAAU,EAAE,CAAC;GACrB;EAIO,UAAU;IACd,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IACvE,IAAI,CAAC,OAAO,EAAE;MACV,OAAO;KACV;GACJ;EAEM,MAAM;IACT,MAAM,gBAAgB,GAA0B,EAAE,CAAC;IAEnD,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;MACpC,gBAAgB,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;KAClE;IAED,QACI,4BACI,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,SAAS,IACd,gBAAgB,GAEpB,kBAAY,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,GAAI,EAC3C,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,CAC9B,EACX;GACL;EACO,aAAa,CAAC,SAAS;IAC3B,IAAI,IAAI,CAAC,KAAK,EAAE;MACZ,OAAO,qBAAe,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC;KACrE;GACJ;;;;;;;","names":[],"sources":["./src/components/icon-button/icon-button.scss?tag=limel-icon-button&encapsulation=shadow","./src/components/icon-button/icon-button.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n/**\n * @prop --icon-background-color: Background color of the button.\n */\n\n:host([hidden]) {\n    display: none;\n}\n\n:host([disabled]) {\n    pointer-events: none;\n}\n\nbutton {\n    all: unset;\n    @include mixins.is-flat-clickable(\n        $background-color: var(--icon-background-color, transparent)\n    );\n    @include mixins.visualize-keyboard-focus;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    height: 2.25rem;\n    width: 2.25rem;\n    border-radius: 50%;\n\n    :host([elevated]) & {\n        &:not(:hover):not(:active):not(:focus-visible) {\n            box-shadow: var(--button-shadow-normal);\n        }\n    }\n\n    &:disabled {\n        color: var(--mdc-theme-text-disabled-on-background);\n    }\n}\n\nlimel-icon {\n    width: 1.25rem;\n}\n","import { Component, Element, h, Prop } from '@stencil/core';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from 'src/util/make-enter-clickable';\nimport { createRandomString } from '../../util/random-string';\n\n/**\n * @exampleComponent limel-example-icon-button-basic\n * @exampleComponent limel-example-icon-button-disabled\n * @exampleComponent limel-example-icon-button-elevated\n * @exampleComponent limel-example-icon-button-toggle-state\n * @exampleComponent limel-example-icon-button-composite\n */\n@Component({\n    tag: 'limel-icon-button',\n    shadow: true,\n    styleUrl: 'icon-button.scss',\n})\nexport class IconButton {\n    /**\n     * The icon to display.\n     */\n    @Prop({ reflect: true })\n    public icon: string;\n\n    /**\n     * Set to `true` to give the button our standard \"elevated\" look, lifting\n     * it off the flat layout.\n     */\n    @Prop({ reflect: true })\n    public elevated = false;\n\n    /**\n     * The text to show to screenreaders and other assistive tech.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Set to `true` to disable the button.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    @Element()\n    private host: HTMLLimelIconButtonElement;\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private tooltipId = createRandomString();\n\n    private initialize() {\n        const element = this.host.shadowRoot.querySelector('.mdc-icon-button');\n        if (!element) {\n            return;\n        }\n    }\n\n    public render() {\n        const buttonAttributes: { tabindex?: string } = {};\n\n        if (this.host.hasAttribute('tabindex')) {\n            buttonAttributes.tabindex = this.host.getAttribute('tabindex');\n        }\n\n        return (\n            <button\n                disabled={this.disabled}\n                id={this.tooltipId}\n                {...buttonAttributes}\n            >\n                <limel-icon name={this.icon} badge={true} />\n                {this.renderTooltip(this.tooltipId)}\n            </button>\n        );\n    }\n    private renderTooltip(tooltipId) {\n        if (this.label) {\n            return <limel-tooltip elementId={tooltipId} label={this.label} />;\n        }\n    }\n}\n"],"version":3}

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

@@ -23621,6 +23621,7 @@ class ColumnDefinitionFactory {
       field: column.field,
       hozAlign: column.horizontalAlign,
       headerSort: column.headerSort,
+      headerSortStartingDir: 'desc',
     };
     if (column.headerComponent) {
       definition.titleFormatter = formatHeader(column);