@limetech/lime-crm-building-blocks 1.109.2 → 1.110.0

package/dist/collection/components/data-cells/data-cells.css

@@ -0,0 +1,210 @@
+@charset "UTF-8";
+/**
+* Note! This file is exported to `dist/scss/` in the published
+* node module, for consumer projects to import.
+* That means this file cannot import from any file that isn't
+* also exported, keeping the same relative path.
+*
+* Or, just don't import anything, that works too.
+*/
+/**
+* This can be used on a trigger element that opens a dropdown menu or a popover.
+*/
+/**
+ * This mixin will mask out the content that is close to
+ * the edges of a scrollable area.
+ * - If the scrollable content has `overflow-y`, use `vertically`
+ * as an argument for `$direction`.
+ - If the scrollable content has `overflow-x`, use `horizontally`
+ * as an argument for `$direction`.
+ *
+ * For the visual effect to work smoothly, we need to make sure that
+ * the size of the fade-out edge effect is the same as the
+ * internal paddings of the scrollable area. Otherwise, content of a
+ * scrollable area that does not have a padding will fade out before
+ * any scrolling has been done.
+ * This is why this mixin already adds paddings, which automatically
+ * default to the size of the fade-out effect.
+ * This size defaults to `1rem`, but to override the size use
+ * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
+ * when `vertically` argument is set, and use
+ * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
+ * when `horizontally` argument is set.
+ * Of course you can also programmatically increase and decrease the
+ * size of these variables for each edge, based on the amount of
+ * scrolling that has been done by the user. In this case, make sure
+ * to add a custom padding where the mixin is used, to override
+ * the paddings that are automatically added by the mixin in the
+ * compiled CSS code.
+ */
+/**
+* This mixin will add an animated underline to the bottom of an `a` elements.
+* Note that you may need to add `all: unset;` –depending on your use case–
+* before using this mixin.
+*/
+/**
+* This mixin creates a cross-browser font stack.
+* - `sans-serif` can be used for the UI of the components.
+* - `monospace` can be used for code.
+*
+* ⚠️ If we change the font stacks, we need to update
+* 1. the consumer documentation in `README.md`, and
+* 2. the CSS variables of `--kompendium-example-font-family`
+* in the `<style>` tag of `index.html`.
+*/
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
+/**
+* This mixin will add a chessboard background pattern,
+* typically used to visualize transparency.
+*/
+/**
+* Make a container resizable by the user.
+* This is used in the documentations and examples
+* of some components, to demonstrate how the component
+* behaves in a resizable container.
+*/
+/**
+ * Drag to reorder mixins
+ */
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 0;
+}
+
+:host(limebb-data-cells) {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: var(--limebb-data-cells-padding);
+}
+
+div {
+  display: flex;
+  flex-direction: column;
+}
+
+dl {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem 1rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+dd,
+dt {
+  display: flex;
+  align-items: center;
+}
+dd span,
+dt span {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+dd {
+  margin: 0;
+  font-size: var(--limel-theme-default-font-size);
+  line-height: 1.25rem;
+  height: 1.25rem;
+  font-weight: 500;
+  color: rgb(var(--contrast-1100));
+}
+dd a {
+  text-decoration: none;
+  border-radius: 1.25rem;
+}
+dd a:focus {
+  outline: none;
+}
+dd a:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
+dd a:not(.belongs-to) {
+  position: relative;
+  cursor: pointer;
+  transition: color 0.2s ease;
+  color: rgb(var(--color-blue-default));
+}
+dd a:not(.belongs-to):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);
+}
+dd a:not(.belongs-to):hover {
+  color: rgb(var(--color-blue-default));
+}
+dd a:not(.belongs-to):hover:before {
+  opacity: 0.3;
+  transform: scale(1);
+}
+dd a.belongs-to {
+  transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
+  color: inherit;
+  background-color: rgb(var(--contrast-400));
+  padding: 1px 0.375rem;
+}
+dd a.belongs-to:hover, dd a.belongs-to:focus-visible {
+  color: rgb(var(--color-white));
+  background-color: rgb(var(--color-sky-default));
+}
+dd:has(.belongs-to) {
+  transform: translateX(-0.375rem);
+}
+
+dt {
+  order: 1;
+  transition: color 0.2s ease;
+  font-size: 0.65rem;
+  color: rgb(var(--contrast-800));
+}
+:host(:hover) dt, :host(:focus-within) dt {
+  color: rgb(var(--contrast-900));
+}
+
+.primary + .secondary {
+  padding-top: 0.5rem;
+  border-top: 1px dashed rgb(var(--contrast-500));
+}
+
+.secondary dd {
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1rem;
+  height: 1rem;
+}

package/dist/collection/components/data-cells/data-cells.js

@@ -0,0 +1,217 @@
+import { h } from "@stencil/core";
+import { PlatformServiceName, } from "@limetech/lime-web-components";
+import { formatRelativeDate } from "../../util/format-relative-date";
+/**
+ * Renders a list of key-value data cells in two visual groups:
+ * primary (prominent) and secondary (less dominant).
+ *
+ * @exampleComponent limebb-example-data-cells-basic
+ * @exampleComponent limebb-example-data-cells-primary-secondary
+ * @exampleComponent limebb-example-data-cells-typed-values
+ * @exampleComponent limebb-example-data-cells-relative-dates
+ *
+ * @beta
+ */
+export class DataCells {
+    constructor() {
+        /**
+         * The data cells to render.
+         */
+        this.items = [];
+        this.renderCell = (item) => (h("div", null, h("dt", null, h("span", null, item.label)), h("dd", null, h("span", null, this.renderValue(item)))));
+    }
+    render() {
+        return [this.renderPrimary(), this.renderSecondary()];
+    }
+    renderPrimary() {
+        const items = this.items.filter((item) => item.value != null && item.value !== '' && !item.secondary);
+        if (items.length === 0) {
+            return;
+        }
+        return h("dl", { class: "primary" }, items.map(this.renderCell));
+    }
+    renderSecondary() {
+        const items = this.items.filter((item) => item.value != null && item.value !== '' && item.secondary);
+        if (items.length === 0) {
+            return;
+        }
+        return h("dl", { class: "secondary" }, items.map(this.renderCell));
+    }
+    renderValue(item) {
+        if (item.type === 'belongsto') {
+            const href = this.getBelongsToHref(item.field);
+            if (!href) {
+                return item.value;
+            }
+            return (h("a", { class: "belongs-to", href: href }, item.value));
+        }
+        if (item.type === 'phone') {
+            return h("a", { href: this.toTelUri(item.value) }, item.value);
+        }
+        if (item.type === 'email') {
+            return h("a", { href: `mailto:${item.value}` }, item.value);
+        }
+        if (item.type === 'link') {
+            return (h("a", { href: this.ensureUrlProtocol(item.value), target: "_blank", rel: "noopener" }, this.stripUrlPrefix(item.value)));
+        }
+        if (item.type === 'time' || item.type === 'date') {
+            return formatRelativeDate(new Date(item.value), this.language);
+        }
+        if (item.type === 'percent') {
+            return (h("limebb-percentage-visualizer", { value: Number(item.value), multiplier: 100, displayPercentageColors: true, reducePresence: false }));
+        }
+        return item.value;
+    }
+    toTelUri(phoneNumber) {
+        return `tel:${phoneNumber.replaceAll(' ', '')}`;
+    }
+    ensureUrlProtocol(url) {
+        if (/^https?:\/\//i.test(url)) {
+            return url;
+        }
+        return `https://${url}`;
+    }
+    stripUrlPrefix(url) {
+        return url.replace(/^https?:\/\//, '').replace(/^www\./, '');
+    }
+    getBelongsToHref(field) {
+        var _a;
+        if (!this.limeobject || !field) {
+            return undefined;
+        }
+        try {
+            const relatedObject = this.limeobject.getValue(field);
+            if (!relatedObject || typeof relatedObject !== 'object') {
+                return undefined;
+            }
+            const limetype = (_a = relatedObject.getLimetype) === null || _a === void 0 ? void 0 : _a.call(relatedObject);
+            if (!(limetype === null || limetype === void 0 ? void 0 : limetype.name) || !relatedObject.id) {
+                return undefined;
+            }
+            return `object/${limetype.name}/${relatedObject.id}`;
+        }
+        catch (_b) {
+            return undefined;
+        }
+    }
+    get language() {
+        var _a;
+        try {
+            return (_a = this.platform) === null || _a === void 0 ? void 0 : _a.get(PlatformServiceName.Application).getLanguage();
+        }
+        catch (_b) {
+            return navigator.language;
+        }
+    }
+    static get is() { return "limebb-data-cells"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["data-cells.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["data-cells.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "platform": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "LimeWebComponentPlatform",
+                    "resolved": "LimeWebComponentPlatform",
+                    "references": {
+                        "LimeWebComponentPlatform": {
+                            "location": "import",
+                            "path": "@limetech/lime-web-components",
+                            "id": "node_modules::LimeWebComponentPlatform"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "inheritdoc",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "context": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "LimeWebComponentContext",
+                    "resolved": "LimeWebComponentContext",
+                    "references": {
+                        "LimeWebComponentContext": {
+                            "location": "import",
+                            "path": "@limetech/lime-web-components",
+                            "id": "node_modules::LimeWebComponentContext"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "inheritdoc",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "limeobject": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The source LimeObject. Used by interactive cell types\nlike `belongsto` to resolve related objects."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "limeobject",
+                "reflect": false
+            },
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DataCell[]",
+                    "resolved": "DataCell[]",
+                    "references": {
+                        "DataCell": {
+                            "location": "import",
+                            "path": "./data-cells.types",
+                            "id": "src/components/data-cells/data-cells.types.ts::DataCell"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The data cells to render."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+}

package/dist/collection/components/data-cells/data-cells.types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/feed/feed-item/feed-timeline-item.js

@@ -50,12 +50,29 @@ export class FeedTimelineItem {
             }
         };
         this.bodyTextTall = (entries) => {
-            if (!(entries === null || entries === void 0 ? void 0 : entries.length)) {
+            if (!this.bodyTextElement || !(entries === null || entries === void 0 ? void 0 : entries.length)) {
                 return;
             }
-            const height = entries[0].contentRect.height;
+            const width = entries[0].contentRect.width;
+            // Only re-evaluate when the container width changes.
+            // Height-only changes are caused by our own CSS (the collapse/expand
+            // animation via `grid-template-rows`), and reacting to them would
+            // either cause an infinite loop or disrupt the transition.
+            if (width === this.lastMeasuredWidth) {
+                return;
+            }
+            this.lastMeasuredWidth = width;
+            // Temporarily remove `min-height` to measure the natural content height.
+            // The `.is-tall` CSS sets a `min-height` (~164px) on this element,
+            // which inflates `scrollHeight` and would prevent `isTall` from ever
+            // becoming `false` again. We use `scrollHeight` instead of
+            // `contentRect.height`, because the latter reflects the
+            // CSS-constrained size (e.g. `grid-template-rows: 0fr`).
+            this.bodyTextElement.style.minHeight = '0';
+            const height = this.bodyTextElement.scrollHeight;
+            this.bodyTextElement.style.removeProperty('min-height');
             const maxHeight = this.isThreadMessage ? 48 : 160;
-            this.isTall = height > maxHeight ? true : false;
+            this.isTall = height > maxHeight;
             if (this.bodyTextHeight === undefined) {
                 this.bodyTextHeight = height;
             }
@@ -188,7 +205,7 @@ export class FeedTimelineItem {
     render() {
         var _a, _b;
         const helperTextId = `helper-text-${this.item.id}`;
-        return (h(Host, { key: 'ae530cfe3aa5c54f8c1d3ceae6630b606f5ca57f', id: this.item.id, class: {
+        return (h(Host, { key: '032d6c6319e54b88fb00496c3427554d6b5ee8ea', id: this.item.id, class: {
                 'has-unpromoted-actions': !!((_a = this.item.unpromotedActions) === null || _a === void 0 ? void 0 : _a.length),
                 'has-author-picture': !!((_b = this.item.author) === null || _b === void 0 ? void 0 : _b.picture),
                 'shows-less': !this.showMore,

package/dist/collection/components/kanban/kanban-group/kanban-group.css

@@ -191,6 +191,9 @@
   width: 0.75rem;
 }
 
+/**
+* @prop --limebb-kanban-group-max-width: Maximum width of the kanban group. Defaults to `22rem`.
+*/
 * {
   box-sizing: border-box;
 }
@@ -222,7 +225,7 @@
 limel-header {
   padding-right: 0.5rem;
   background-color: rgb(var(--limebb-kanban-group-primary-background));
-  width: 22rem;
+  width: var(--limebb-kanban-group-max-width, 22rem);
 }
 limel-header:has(+ .items:empty) {
   width: 10rem;
@@ -244,7 +247,7 @@ limel-help {
   padding: 0 0.75rem 0.5rem 0.75rem;
   opacity: 0.6;
   max-height: 7rem;
-  max-width: 22rem;
+  max-width: var(--limebb-kanban-group-max-width, 22rem);
   overflow-y: auto;
 }
 
@@ -280,7 +283,7 @@ limel-spinner {
   -webkit-overflow-scrolling: touch;
 }
 .items:not(:empty) {
-  width: 22rem;
+  width: var(--limebb-kanban-group-max-width, 22rem);
 }
 
 limebb-kanban-item {

package/dist/collection/components/kanban/kanban-item/kanban-item.css

@@ -115,7 +115,6 @@
 
 .content {
   padding-top: 0.25rem;
-  min-height: 3rem;
 }
 
 .header {
@@ -166,7 +165,7 @@
 
 .body {
   --limel-top-edge-fade-height: 0.5rem;
-  --limel-bottom-edge-fade-height: 1rem;
+  --limel-bottom-edge-fade-height: 0.5rem;
   display: block;
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -342,5 +341,5 @@ limel-chip-set {
 
 slot[name=body] {
   display: block;
-  padding: 0 0.5rem 0.5rem 0.5rem;
+  padding: 0.5rem;
 }

package/dist/collection/components/kanban/kanban-item/kanban-item.js

@@ -60,7 +60,7 @@ export class KanbanItemComponent {
                 'is-selected': !!((_b = this.item) === null || _b === void 0 ? void 0 : _b.selected),
             }, style: {
                 '--limebb-kanban-item-color-code': `${this.item.color}`,
-            }, onClick: this.handleKanbanItemClick, onKeyDown: this.handleKeyDown }, this.renderHeader(), this.renderContent(), this.renderSlot(), this.renderFooter()));
+            }, onClick: this.handleKanbanItemClick, onKeyDown: this.handleKeyDown }, this.renderHeader(), this.renderContent(), this.renderSlot(), this.renderRelations(), this.renderFooter()));
     }
     renderHeader() {
         return (h("div", { class: "header" }, this.renderIcon(), this.renderHeading(), this.renderUnpromotedActionsMenu()));
@@ -76,7 +76,10 @@ export class KanbanItemComponent {
             } }));
     }
     renderContent() {
-        return (h("div", { class: "content" }, this.renderValue(), this.renderRelations()));
+        if (!this.item.value) {
+            return;
+        }
+        return h("div", { class: "content" }, this.renderValue());
     }
     renderHeading() {
         if (!this.item.heading) {

package/dist/collection/components/kanban/kanban.js

@@ -13,7 +13,7 @@ import { h } from "@stencil/core";
  * @exampleComponent limebb-example-kanban-assignees
  * @exampleComponent limebb-example-kanban-unpromoted-actions
  * @exampleComponent limebb-example-kanban-group-insights
- * @exampleComponent limebb-example-kanban-primary-component
+ * @exampleComponent limebb-example-kanban-body-component
  *
  * @beta
  */

package/dist/collection/util/format-relative-date.js

@@ -0,0 +1,30 @@
+const SECOND = 1000;
+const MINUTE = 60 * SECOND;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+const WEEK = 7 * DAY;
+const MONTH = 30 * DAY;
+const YEAR = 365 * DAY;
+const units = [
+    { unit: 'year', ms: YEAR },
+    { unit: 'month', ms: MONTH },
+    { unit: 'week', ms: WEEK },
+    { unit: 'day', ms: DAY },
+    { unit: 'hour', ms: HOUR },
+    { unit: 'minute', ms: MINUTE },
+    { unit: 'second', ms: SECOND },
+];
+/**
+ * Formats a date as a localized relative time expression,
+ * e.g. "3 days ago" or "in 2 months".
+ *
+ * Uses the browser's native `Intl.RelativeTimeFormat` API.
+ * @param date
+ * @param language
+ */
+export function formatRelativeDate(date, language) {
+    var _a;
+    const diff = date.getTime() - Date.now();
+    const { unit, ms } = (_a = units.find((u) => Math.abs(diff) >= u.ms)) !== null && _a !== void 0 ? _a : units.at(-1);
+    return new Intl.RelativeTimeFormat(language, { style: 'long' }).format(Math.round(diff / ms), unit);
+}

package/dist/components/feed-timeline-item.js

@@ -55,12 +55,29 @@ const FeedTimelineItem = /*@__PURE__*/ proxyCustomElement(class FeedTimelineItem
             }
         };
         this.bodyTextTall = (entries) => {
-            if (!(entries === null || entries === void 0 ? void 0 : entries.length)) {
+            if (!this.bodyTextElement || !(entries === null || entries === void 0 ? void 0 : entries.length)) {
                 return;
             }
-            const height = entries[0].contentRect.height;
+            const width = entries[0].contentRect.width;
+            // Only re-evaluate when the container width changes.
+            // Height-only changes are caused by our own CSS (the collapse/expand
+            // animation via `grid-template-rows`), and reacting to them would
+            // either cause an infinite loop or disrupt the transition.
+            if (width === this.lastMeasuredWidth) {
+                return;
+            }
+            this.lastMeasuredWidth = width;
+            // Temporarily remove `min-height` to measure the natural content height.
+            // The `.is-tall` CSS sets a `min-height` (~164px) on this element,
+            // which inflates `scrollHeight` and would prevent `isTall` from ever
+            // becoming `false` again. We use `scrollHeight` instead of
+            // `contentRect.height`, because the latter reflects the
+            // CSS-constrained size (e.g. `grid-template-rows: 0fr`).
+            this.bodyTextElement.style.minHeight = '0';
+            const height = this.bodyTextElement.scrollHeight;
+            this.bodyTextElement.style.removeProperty('min-height');
             const maxHeight = this.isThreadMessage ? 48 : 160;
-            this.isTall = height > maxHeight ? true : false;
+            this.isTall = height > maxHeight;
             if (this.bodyTextHeight === undefined) {
                 this.bodyTextHeight = height;
             }
@@ -193,7 +210,7 @@ const FeedTimelineItem = /*@__PURE__*/ proxyCustomElement(class FeedTimelineItem
     render() {
         var _a, _b;
         const helperTextId = `helper-text-${this.item.id}`;
-        return (h(Host, { key: 'ae530cfe3aa5c54f8c1d3ceae6630b606f5ca57f', id: this.item.id, class: {
+        return (h(Host, { key: '032d6c6319e54b88fb00496c3427554d6b5ee8ea', id: this.item.id, class: {
                 'has-unpromoted-actions': !!((_a = this.item.unpromotedActions) === null || _a === void 0 ? void 0 : _a.length),
                 'has-author-picture': !!((_b = this.item.author) === null || _b === void 0 ? void 0 : _b.picture),
                 'shows-less': !this.showMore,

package/dist/components/kanban-group.js

@@ -4,7 +4,7 @@ import { d as defineCustomElement$3 } from './kanban-item.js';
 import { d as defineCustomElement$2 } from './navigation-button.js';
 import { d as defineCustomElement$1 } from './summary-popover.js';
 
-const kanbanGroupCss = "@charset \"UTF-8\";:host(limebb-feed-timeline-item.is-tall) .markdown-container{margin-bottom:0.5rem}:host(limebb-feed-timeline-item.is-tall) .body-text{--body-text-min-height-set-by-code:10rem;min-height:calc(var(--body-text-min-height-set-by-code) + 0.25rem)}:host(limebb-feed-timeline-item.is-tall) .body-text:after{transition:opacity 0.6s ease;content:\"\";opacity:0.26;pointer-events:none;position:absolute;bottom:-0.125rem;right:-0.125rem;left:-0.125rem;height:2.5rem;background:radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0)) 0 100%, linear-gradient(to bottom, rgb(var(--limebb-feed-item-background-color), 0) 0%, rgb(var(--limebb-feed-item-background-color), 90%) 100%);background-repeat:no-repeat;background-size:100% 0.5rem, 100% 100%}:host(limebb-feed-timeline-item.is-tall.shows-less) .markdown-container{grid-template-rows:0fr}:host(limebb-feed-timeline-item.is-tall.shows-less) .body-text:after{opacity:1}:host(limebb-feed-timeline-item.is-tall.shows-more) .markdown-container{grid-template-rows:1fr}:host(limebb-feed-timeline-item.is-tall.shows-more) #show-more-button limel-icon{rotate:180deg}.markdown-container{position:relative;display:grid}.markdown-container:not(.opened){transition:grid-template-rows min(var(--body-text-height) * 1.2ms, 500ms) cubic-bezier(1, 0.09, 0, 0.89)}.body-text{display:block;overflow:hidden}#show-more-button{all:unset;transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal);z-index:1;position:absolute;right:0;bottom:-0.6rem;left:0;margin:0 auto;display:flex;align-items:center;justify-content:center;border-radius:3rem;width:2rem;height:1rem}#show-more-button:hover,#show-more-button:focus,#show-more-button:focus-visible{will-change:color, background-color, box-shadow, transform}#show-more-button:hover,#show-more-button:focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}#show-more-button:active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}#show-more-button:hover,#show-more-button:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}#show-more-button:focus{outline:none}#show-more-button:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}#show-more-button limel-icon{transition:rotate 0.2s ease 0.5s;color:var(--mdc-theme-primary);width:0.75rem}*{box-sizing:border-box}:host(limebb-kanban-group){position:relative;background-color:rgb(var(--limebb-kanban-group-primary-background));--header-top-right-left-border-radius:0.5rem;--limebb-kanban-group-secondary-background:var(--contrast-300);--limebb-kanban-group-primary-background:var(--contrast-600);scroll-snap-align:start;box-sizing:border-box;display:flex;flex-direction:column;border-radius:0.5rem}:host(limebb-kanban-group.secondary){border:1px dashed rgb(var(--contrast-700));background-color:rgb(var(--limebb-kanban-group-secondary-background))}:host(limebb-kanban-group.secondary) limebb-kanban-item{border:1px dashed rgb(var(--contrast-700))}:host(limebb-kanban-group.secondary) limel-header{background-color:rgb(var(--limebb-kanban-group-secondary-background))}limel-header{padding-right:0.5rem;background-color:rgb(var(--limebb-kanban-group-primary-background));width:22rem}limel-header:has(+.items:empty){width:10rem}limel-badge{--badge-background-color:rgb(var(--contrast-200))}limel-help{position:absolute;z-index:1;left:-0.25rem;top:-0.25rem}.group-summary{flex-shrink:0;padding:0 0.75rem 0.5rem 0.75rem;opacity:0.6;max-height:7rem;max-width:22rem;overflow-y:auto}.load-more-button,limel-spinner{align-self:center}.load-more-button{--icon-background-color:var(--lime-elevated-surface-background-color)}.items{--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);--limel-top-edge-fade-height:0.5rem;--limel-bottom-edge-fade-height:2rem;flex-grow:1;display:flex;flex-direction:column;gap:0.75rem;padding:var(--limel-top-edge-fade-height) 0.5rem var(--limel-bottom-edge-fade-height) 0.5rem;overflow-y:auto;-webkit-overflow-scrolling:touch}.items:not(:empty){width:22rem}limebb-kanban-item{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}limebb-kanban-item:hover,limebb-kanban-item:focus,limebb-kanban-item:focus-visible{will-change:color, background-color, box-shadow, transform}limebb-kanban-item:hover,limebb-kanban-item:focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}limebb-kanban-item:hover{box-shadow:var(--button-shadow-hovered)}limebb-kanban-item:active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}limebb-kanban-item:hover,limebb-kanban-item:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}limebb-kanban-item:focus{outline:none}limebb-kanban-item:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}limebb-kanban-item.is-selected{box-shadow:var(--shadow-focused-state)}limebb-kanban-item.is-selected:hover{box-shadow:var(--shadow-focused-state), var(--button-shadow-hovered)}";
+const kanbanGroupCss = "@charset \"UTF-8\";:host(limebb-feed-timeline-item.is-tall) .markdown-container{margin-bottom:0.5rem}:host(limebb-feed-timeline-item.is-tall) .body-text{--body-text-min-height-set-by-code:10rem;min-height:calc(var(--body-text-min-height-set-by-code) + 0.25rem)}:host(limebb-feed-timeline-item.is-tall) .body-text:after{transition:opacity 0.6s ease;content:\"\";opacity:0.26;pointer-events:none;position:absolute;bottom:-0.125rem;right:-0.125rem;left:-0.125rem;height:2.5rem;background:radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0)) 0 100%, linear-gradient(to bottom, rgb(var(--limebb-feed-item-background-color), 0) 0%, rgb(var(--limebb-feed-item-background-color), 90%) 100%);background-repeat:no-repeat;background-size:100% 0.5rem, 100% 100%}:host(limebb-feed-timeline-item.is-tall.shows-less) .markdown-container{grid-template-rows:0fr}:host(limebb-feed-timeline-item.is-tall.shows-less) .body-text:after{opacity:1}:host(limebb-feed-timeline-item.is-tall.shows-more) .markdown-container{grid-template-rows:1fr}:host(limebb-feed-timeline-item.is-tall.shows-more) #show-more-button limel-icon{rotate:180deg}.markdown-container{position:relative;display:grid}.markdown-container:not(.opened){transition:grid-template-rows min(var(--body-text-height) * 1.2ms, 500ms) cubic-bezier(1, 0.09, 0, 0.89)}.body-text{display:block;overflow:hidden}#show-more-button{all:unset;transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal);z-index:1;position:absolute;right:0;bottom:-0.6rem;left:0;margin:0 auto;display:flex;align-items:center;justify-content:center;border-radius:3rem;width:2rem;height:1rem}#show-more-button:hover,#show-more-button:focus,#show-more-button:focus-visible{will-change:color, background-color, box-shadow, transform}#show-more-button:hover,#show-more-button:focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}#show-more-button:active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}#show-more-button:hover,#show-more-button:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}#show-more-button:focus{outline:none}#show-more-button:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}#show-more-button limel-icon{transition:rotate 0.2s ease 0.5s;color:var(--mdc-theme-primary);width:0.75rem}*{box-sizing:border-box}:host(limebb-kanban-group){position:relative;background-color:rgb(var(--limebb-kanban-group-primary-background));--header-top-right-left-border-radius:0.5rem;--limebb-kanban-group-secondary-background:var(--contrast-300);--limebb-kanban-group-primary-background:var(--contrast-600);scroll-snap-align:start;box-sizing:border-box;display:flex;flex-direction:column;border-radius:0.5rem}:host(limebb-kanban-group.secondary){border:1px dashed rgb(var(--contrast-700));background-color:rgb(var(--limebb-kanban-group-secondary-background))}:host(limebb-kanban-group.secondary) limebb-kanban-item{border:1px dashed rgb(var(--contrast-700))}:host(limebb-kanban-group.secondary) limel-header{background-color:rgb(var(--limebb-kanban-group-secondary-background))}limel-header{padding-right:0.5rem;background-color:rgb(var(--limebb-kanban-group-primary-background));width:var(--limebb-kanban-group-max-width, 22rem)}limel-header:has(+.items:empty){width:10rem}limel-badge{--badge-background-color:rgb(var(--contrast-200))}limel-help{position:absolute;z-index:1;left:-0.25rem;top:-0.25rem}.group-summary{flex-shrink:0;padding:0 0.75rem 0.5rem 0.75rem;opacity:0.6;max-height:7rem;max-width:var(--limebb-kanban-group-max-width, 22rem);overflow-y:auto}.load-more-button,limel-spinner{align-self:center}.load-more-button{--icon-background-color:var(--lime-elevated-surface-background-color)}.items{--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);--limel-top-edge-fade-height:0.5rem;--limel-bottom-edge-fade-height:2rem;flex-grow:1;display:flex;flex-direction:column;gap:0.75rem;padding:var(--limel-top-edge-fade-height) 0.5rem var(--limel-bottom-edge-fade-height) 0.5rem;overflow-y:auto;-webkit-overflow-scrolling:touch}.items:not(:empty){width:var(--limebb-kanban-group-max-width, 22rem)}limebb-kanban-item{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}limebb-kanban-item:hover,limebb-kanban-item:focus,limebb-kanban-item:focus-visible{will-change:color, background-color, box-shadow, transform}limebb-kanban-item:hover,limebb-kanban-item:focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}limebb-kanban-item:hover{box-shadow:var(--button-shadow-hovered)}limebb-kanban-item:active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}limebb-kanban-item:hover,limebb-kanban-item:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}limebb-kanban-item:focus{outline:none}limebb-kanban-item:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}limebb-kanban-item.is-selected{box-shadow:var(--shadow-focused-state)}limebb-kanban-item.is-selected:hover{box-shadow:var(--shadow-focused-state), var(--button-shadow-hovered)}";
 const LimebbKanbanGroupStyle0 = kanbanGroupCss;
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {