@limetech/lime-crm-building-blocks 1.98.0 → 1.100.0

package/dist/collection/components/lime-query-builder/expressions/lime-query-filter-builder.js

@@ -0,0 +1,225 @@
+import { h } from "@stencil/core";
+import { Operator, } from "@limetech/lime-web-components";
+/**
+ * Lime Query Filter Builder
+ *
+ * Entry component for building Lime Query filter expressions.
+ * This component wraps the expression router and adds promotion logic
+ * for handling Add buttons and expression structure.
+ *
+ * Unlike the expression router (which is pure routing), this component
+ * contains business logic for promoting expressions and managing the
+ * filter structure.
+ *
+ * @private
+ */
+export class LimeQueryFilterBuilderComponent {
+    constructor() {
+        this.handleAddFirstCondition = () => {
+            const newExpression = {
+                key: '',
+                op: Operator.EQUALS,
+                exp: '',
+            };
+            this.expressionChange.emit(newExpression);
+        };
+        this.handlePromoteAndAdd = () => {
+            if (!this.expression) {
+                return;
+            }
+            // Wrap current expression in AND and add a new comparison
+            const newExpression = {
+                op: Operator.AND,
+                exp: [
+                    this.expression,
+                    {
+                        key: '',
+                        op: Operator.EQUALS,
+                        exp: '',
+                    },
+                ],
+            };
+            this.expressionChange.emit(newExpression);
+        };
+        this.handleExpressionChange = (event) => {
+            var _a;
+            event.stopPropagation();
+            this.expressionChange.emit((_a = event.detail) !== null && _a !== void 0 ? _a : undefined);
+        };
+    }
+    render() {
+        if (!this.expression) {
+            return this.renderEmptyState();
+        }
+        // Check if we need to show promotion UI (comparison or NOT)
+        if (this.needsPromotion()) {
+            return this.renderWithPromotionButton();
+        }
+        // AND/OR groups handle their own Add buttons
+        return (h("limebb-lime-query-filter-expression", { platform: this.platform, context: this.context, limetype: this.limetype, activeLimetype: this.activeLimetype, expression: this.expression, onExpressionChange: this.handleExpressionChange }));
+    }
+    needsPromotion() {
+        if (!this.expression) {
+            return false;
+        }
+        // Basic comparison needs promotion
+        if ('key' in this.expression) {
+            return true;
+        }
+        // NOT needs promotion
+        return this.expression.op === Operator.NOT;
+    }
+    renderEmptyState() {
+        return (h("limel-button", { label: "Add a condition", icon: "plus_math", onClick: this.handleAddFirstCondition }));
+    }
+    renderWithPromotionButton() {
+        return (h("div", { class: "expression-with-promotion" }, h("limebb-lime-query-filter-expression", { platform: this.platform, context: this.context, limetype: this.limetype, activeLimetype: this.activeLimetype, expression: this.expression, onExpressionChange: this.handleExpressionChange }), h("limel-button", { label: "Add another condition", icon: "plus_math", onClick: this.handlePromoteAndAdd })));
+    }
+    static get is() { return "limebb-lime-query-filter-builder"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["lime-query-filter-builder.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lime-query-filter-builder.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": [],
+                    "text": "Platform service provider"
+                },
+                "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": [],
+                    "text": "Component context"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "limetype": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The limetype being queried (e.g., \"deal\", \"company\")"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "limetype",
+                "reflect": false
+            },
+            "activeLimetype": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The limetype of the active object (for %activeObject% placeholders)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "active-limetype",
+                "reflect": false
+            },
+            "expression": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Expression | undefined",
+                    "resolved": "undefined | { key: string; op: BasicOperator; exp: ExpressionValue; } | { key: string; op: Operator.IN; exp: ExpressionValue[]; } | { op: Operator.AND | Operator.OR; exp: Expression[]; } | { op: Operator.NOT; exp: Expression; } | { type: \"filter\"; key: string; op: Operator.IN; exp: string; }",
+                    "references": {
+                        "Expression": {
+                            "location": "import",
+                            "path": "@limetech/lime-web-components",
+                            "id": "node_modules::Expression"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The filter expression to build"
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "expressionChange",
+                "name": "expressionChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the filter expression changes\nEmits undefined when expression should be removed"
+                },
+                "complexType": {
+                    "original": "Expression | undefined",
+                    "resolved": "undefined | { key: string; op: BasicOperator; exp: ExpressionValue; } | { key: string; op: Operator.IN; exp: ExpressionValue[]; } | { op: Operator.AND | Operator.OR; exp: Expression[]; } | { op: Operator.NOT; exp: Expression; } | { type: \"filter\"; key: string; op: Operator.IN; exp: string; }",
+                    "references": {
+                        "Expression": {
+                            "location": "import",
+                            "path": "@limetech/lime-web-components",
+                            "id": "node_modules::Expression"
+                        }
+                    }
+                }
+            }];
+    }
+}

package/dist/collection/components/lime-query-builder/expressions/lime-query-filter-comparison.js

@@ -1,5 +1,52 @@
+import { Operator, } from "@limetech/lime-web-components";
 import { h } from "@stencil/core";
-import { LIME_QUERY_OPERATORS, } from "../lime-query.types";
+const LIME_QUERY_OPERATORS = [
+    { value: Operator.EQUALS, label: 'Equals', icon: 'equals' },
+    { value: Operator.NOT_EQUALS, label: 'Not Equals', icon: 'not-equal' },
+    {
+        value: Operator.GREATER,
+        label: 'Greater Than',
+        icon: 'greater-than',
+        applicableTypes: ['integer', 'decimal', 'date', 'time'],
+    },
+    {
+        value: Operator.GREATER_OR_EQUAL,
+        label: 'Greater or Equal',
+        icon: 'greater-or-equal',
+        applicableTypes: ['integer', 'decimal', 'date', 'time'],
+    },
+    {
+        value: Operator.LESS,
+        label: 'Less Than',
+        icon: 'less-than',
+        applicableTypes: ['integer', 'decimal', 'date', 'time'],
+    },
+    {
+        value: Operator.LESS_OR_EQUAL,
+        label: 'Less or Equal',
+        icon: 'less-or-equal',
+        applicableTypes: ['integer', 'decimal', 'date', 'time'],
+    },
+    { value: Operator.IN, label: 'In List', icon: 'list' },
+    {
+        value: Operator.LIKE,
+        label: 'Contains',
+        icon: '-lime-filter-contain',
+        applicableTypes: ['string', 'text'],
+    },
+    {
+        value: Operator.BEGINS,
+        label: 'Begins With',
+        icon: '-lime-filter-begin',
+        applicableTypes: ['string', 'text'],
+    },
+    {
+        value: Operator.ENDS,
+        label: 'Ends With',
+        icon: '-lime-filter-end',
+        applicableTypes: ['string', 'text'],
+    },
+];
 /**
  * Lime Query Filter Comparison Component
  *
@@ -24,52 +71,49 @@ import { LIME_QUERY_OPERATORS, } from "../lime-query.types";
  */
 export class LimeQueryFilterComparisonComponent {
     constructor() {
-        /**
-         * The comparison expression to render
-         */
-        this.expression = {
-            filter_type: 'comparison',
-            property: '',
-            operator: '=',
-            value: '',
-        };
         this.handlePropertyChange = (event) => {
             event.stopPropagation();
-            this.expressionChange.emit(Object.assign(Object.assign({}, this.expression), { property: event.detail }));
+            this.expressionChange.emit(Object.assign(Object.assign({}, this.expression), { key: event.detail }));
         };
         this.handleOperatorChange = (event) => {
             event.stopPropagation();
-            this.expressionChange.emit(Object.assign(Object.assign({}, this.expression), { operator: event.detail.value }));
+            // TODO: Clear value when switching between IN and other operators
+            // since array values are incompatible with single-value operators
+            this.expressionChange.emit({
+                key: this.expression.key,
+                op: event.detail.value,
+                exp: this.expression.exp,
+            });
         };
         this.handleValueChange = (event) => {
             event.stopPropagation();
-            this.expressionChange.emit(Object.assign(Object.assign({}, this.expression), { value: event.detail }));
+            this.expressionChange.emit(Object.assign(Object.assign({}, this.expression), { exp: event.detail }));
         };
         this.removeExpression = () => {
-            this.expressionChange.emit({ filter_type: '' });
+            this.expressionChange.emit(undefined);
         };
     }
     render() {
-        return (h("div", { key: '618150e84e87cdc234b5eab7cd0ef6443bcb261c', class: "expression" }, this.label && h("limel-header", { key: '7b9a35794777df5556b591ea54d1e63b64833808', heading: this.label }), h("div", { key: '4367741a9383fc268fcfe6dbcc14bea49f20871b', class: "expression-container" }, this.renderPropertySelector(), this.renderOperator(), this.renderValueInput(), h("limel-icon-button", { key: '3ad667258da994636f484c0f7a5649b1e13b063b', class: "remove", icon: "trash", label: "Remove condition", onClick: this.removeExpression }))));
+        return (h("div", { key: '668e0f05bdb1fb25ffd652ea650c34e5431a3332', class: "expression" }, this.label && h("limel-header", { key: '5034070b58afe31cf90699dd2a27f884e647f540', heading: this.label }), h("div", { key: '14a2b1270e5e6d7e158e29ebc5f61051e5670e80', class: "expression-container" }, this.renderPropertySelector(), this.renderOperator(), this.renderValueInput(), h("limel-icon-button", { key: 'b69bde6e88c40d2623ef015794db28cec3676c73', class: "remove", icon: "trash", label: "Remove condition", onClick: this.removeExpression }))));
     }
     renderPropertySelector() {
-        return (h("limebb-property-selector", { platform: this.platform, context: this.context, label: "Property", limetype: this.limetype, value: this.expression.property, required: true, onChange: this.handlePropertyChange }));
+        return (h("limebb-property-selector", { platform: this.platform, context: this.context, label: "Property", limetype: this.limetype, value: this.expression.key, required: true, onChange: this.handlePropertyChange }));
     }
     renderOperator() {
-        const operatorHasBeenSet = !!this.expression.operator;
+        const operatorHasBeenSet = !!this.expression.op;
         const options = LIME_QUERY_OPERATORS.map((op) => ({
             text: op.label,
             value: op.value,
             icon: op.icon ? { name: op.icon } : undefined,
         }));
-        const selectedOption = options.find((o) => o.value === this.expression.operator);
-        return (h("limel-select", { class: "operator", label: "Operator", value: selectedOption, options: options, disabled: !operatorHasBeenSet && !this.expression.property, onChange: this.handleOperatorChange }));
+        const selectedOption = options.find((o) => o.value === this.expression.op);
+        return (h("limel-select", { class: "operator", label: "Operator", value: selectedOption, options: options, disabled: !operatorHasBeenSet && !this.expression.key, onChange: this.handleOperatorChange }));
     }
     renderValueInput() {
-        if (!this.expression.operator) {
+        if (!this.expression.op) {
             return null;
         }
-        return (h("limebb-lime-query-value-input", { platform: this.platform, context: this.context, limetype: this.limetype, activeLimetype: this.activeLimetype, propertyPath: this.expression.property, operator: this.expression.operator, value: this.expression.value, onChange: this.handleValueChange }));
+        return (h("limebb-lime-query-value-input", { platform: this.platform, context: this.context, limetype: this.limetype, activeLimetype: this.activeLimetype, propertyPath: this.expression.key, operator: this.expression.op, value: this.expression.exp, onChange: this.handleValueChange }));
     }
     static get is() { return "limebb-lime-query-filter-comparison"; }
     static get encapsulation() { return "shadow"; }
@@ -192,13 +236,12 @@ export class LimeQueryFilterComparisonComponent {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "LimeQueryFilterComparison",
-                    "resolved": "LimeQueryFilterComparison",
+                    "original": "ComparisonExpression",
+                    "resolved": "{ key: string; op: BasicOperator; exp: ExpressionValue; } | { key: string; op: Operator.IN; exp: ExpressionValue[]; } | { type: \"filter\"; key: string; op: Operator.IN; exp: string; }",
                     "references": {
-                        "LimeQueryFilterComparison": {
-                            "location": "import",
-                            "path": "../lime-query.types",
-                            "id": "src/components/lime-query-builder/lime-query.types.ts::LimeQueryFilterComparison"
+                        "ComparisonExpression": {
+                            "location": "global",
+                            "id": "global::ComparisonExpression"
                         }
                     }
                 },
@@ -209,8 +252,7 @@ export class LimeQueryFilterComparisonComponent {
                     "text": "The comparison expression to render"
                 },
                 "getter": false,
-                "setter": false,
-                "defaultValue": "{\n        filter_type: 'comparison',\n        property: '',\n        operator: '=',\n        value: '',\n    }"
+                "setter": false
             }
         };
     }
@@ -223,21 +265,15 @@ export class LimeQueryFilterComparisonComponent {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the comparison expression changes (property/operator/value modified)"
+                    "text": "Emitted when the comparison expression changes (property/operator/value modified)\nEmits undefined when the expression should be removed"
                 },
                 "complexType": {
-                    "original": "LimeQueryFilterComparison | LimeQueryFilterMissing",
-                    "resolved": "LimeQueryFilterComparison | LimeQueryFilterMissing",
+                    "original": "ComparisonExpression | undefined",
+                    "resolved": "undefined | { key: string; op: BasicOperator; exp: ExpressionValue; } | { key: string; op: Operator.IN; exp: ExpressionValue[]; } | { type: \"filter\"; key: string; op: Operator.IN; exp: string; }",
                     "references": {
-                        "LimeQueryFilterComparison": {
-                            "location": "import",
-                            "path": "../lime-query.types",
-                            "id": "src/components/lime-query-builder/lime-query.types.ts::LimeQueryFilterComparison"
-                        },
-                        "LimeQueryFilterMissing": {
-                            "location": "import",
-                            "path": "../lime-query.types",
-                            "id": "src/components/lime-query-builder/lime-query.types.ts::LimeQueryFilterMissing"
+                        "ComparisonExpression": {
+                            "location": "global",
+                            "id": "global::ComparisonExpression"
                         }
                     }
                 }

package/dist/collection/components/lime-query-builder/expressions/lime-query-filter-expression.js

@@ -1,23 +1,27 @@
 import { h } from "@stencil/core";
+import { Operator, } from "@limetech/lime-web-components";
 /**
  * Lime Query Filter Expression Router
  *
- * This is the main entry point for rendering Lime Query filters.
- * It routes to the appropriate sub-component based on the filter type:
- * - `'AND'` → limebb-lime-query-filter-and
- * - `'OR'` → limebb-lime-query-filter-or
- * - `'NOT'` → limebb-lime-query-filter-not
- * - `'comparison'` → limebb-lime-query-filter-comparison
- * - `''` (missing) → limebb-lime-query-filter-comparison (default)
- *
- * Use this component when you need to render a complete filter expression
- * that may contain nested AND/OR/NOT logic.
+ * Router component for rendering Lime Query filter expressions.
+ * Routes to the appropriate sub-component based on expression structure:
+ * - Has `key` property → limebb-lime-query-filter-comparison
+ * - `op: Operator.AND | Operator.OR` → limebb-lime-query-filter-group
+ * - `op: Operator.NOT` → limebb-lime-query-filter-not
  *
  * @private
  */
 export class LimeQueryFilterExpressionComponent {
+    constructor() {
+        this.handleExpressionChange = (event) => {
+            event.stopPropagation();
+            this.expressionChange.emit(event.detail);
+        };
+    }
     render() {
-        var _a;
+        if (!this.expression) {
+            return;
+        }
         const props = {
             platform: this.platform,
             context: this.context,
@@ -25,30 +29,15 @@ export class LimeQueryFilterExpressionComponent {
             limetype: this.limetype,
             activeLimetype: this.activeLimetype,
         };
-        switch ((_a = this.expression) === null || _a === void 0 ? void 0 : _a.filter_type) {
-            case 'AND': {
-                return (h("limebb-lime-query-filter-and", Object.assign({}, props, { expression: this.expression })));
-            }
-            case 'OR': {
-                return (h("limebb-lime-query-filter-or", Object.assign({}, props, { expression: this.expression })));
-            }
-            case 'NOT': {
-                return (h("limebb-lime-query-filter-not", Object.assign({}, props, { expression: this.expression })));
-            }
-            case 'comparison': {
-                return (h("limebb-lime-query-filter-comparison", Object.assign({}, props, { expression: this.expression })));
-            }
-            default: {
-                // Default to comparison for empty/missing expressions
-                // Convert missing expression to empty comparison
-                const comparisonExpression = {
-                    filter_type: 'comparison',
-                    property: '',
-                    operator: '=',
-                    value: '',
-                };
-                return (h("limebb-lime-query-filter-comparison", Object.assign({}, props, { expression: comparisonExpression })));
-            }
+        if ('key' in this.expression) {
+            return (h("limebb-lime-query-filter-comparison", Object.assign({}, props, { expression: this.expression, onExpressionChange: this.handleExpressionChange })));
+        }
+        if (this.expression.op === Operator.AND ||
+            this.expression.op === Operator.OR) {
+            return (h("limebb-lime-query-filter-group", Object.assign({}, props, { expression: this.expression, onExpressionChange: this.handleExpressionChange })));
+        }
+        if (this.expression.op === Operator.NOT) {
+            return (h("limebb-lime-query-filter-not", Object.assign({}, props, { expression: this.expression, onExpressionChange: this.handleExpressionChange })));
         }
     }
     static get is() { return "limebb-lime-query-filter-expression"; }
@@ -172,13 +161,13 @@ export class LimeQueryFilterExpressionComponent {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "LimeQueryFilterExpression",
-                    "resolved": "LimeQueryFilterAnd | LimeQueryFilterComparison | LimeQueryFilterMissing | LimeQueryFilterNot | LimeQueryFilterOr",
+                    "original": "Expression",
+                    "resolved": "{ key: string; op: BasicOperator; exp: ExpressionValue; } | { key: string; op: Operator.IN; exp: ExpressionValue[]; } | { op: Operator.AND | Operator.OR; exp: Expression[]; } | { op: Operator.NOT; exp: Expression; } | { type: \"filter\"; key: string; op: Operator.IN; exp: string; }",
                     "references": {
-                        "LimeQueryFilterExpression": {
+                        "Expression": {
                             "location": "import",
-                            "path": "../lime-query.types",
-                            "id": "src/components/lime-query-builder/lime-query.types.ts::LimeQueryFilterExpression"
+                            "path": "@limetech/lime-web-components",
+                            "id": "node_modules::Expression"
                         }
                     }
                 },
@@ -202,16 +191,16 @@ export class LimeQueryFilterExpressionComponent {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the filter expression changes"
+                    "text": "Emitted when the filter expression changes\nEmits undefined when expression should be removed"
                 },
                 "complexType": {
-                    "original": "LimeQueryFilterExpression",
-                    "resolved": "LimeQueryFilterAnd | LimeQueryFilterComparison | LimeQueryFilterMissing | LimeQueryFilterNot | LimeQueryFilterOr",
+                    "original": "Expression | undefined",
+                    "resolved": "undefined | { key: string; op: BasicOperator; exp: ExpressionValue; } | { key: string; op: Operator.IN; exp: ExpressionValue[]; } | { op: Operator.AND | Operator.OR; exp: Expression[]; } | { op: Operator.NOT; exp: Expression; } | { type: \"filter\"; key: string; op: Operator.IN; exp: string; }",
                     "references": {
-                        "LimeQueryFilterExpression": {
+                        "Expression": {
                             "location": "import",
-                            "path": "../lime-query.types",
-                            "id": "src/components/lime-query-builder/lime-query.types.ts::LimeQueryFilterExpression"
+                            "path": "@limetech/lime-web-components",
+                            "id": "node_modules::Expression"
                         }
                     }
                 }

package/dist/collection/components/lime-query-builder/expressions/lime-query-filter-group.css

@@ -0,0 +1,130 @@
+@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.
+*/
+/**
+ * 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!
+  */
+/**
+* @mixin action-bar-interactions($item-selector)
+* This mixin applies styles for the action bar interactions.
+* For example, it animates the height of the action bar from `0` to `auto`.
+*
+* :::note
+* The consumer should set:
+* `--limebb-promoted-action-bar-grid-template-rows: 0fr;`
+* when the action bar is not supposed to be visible.
+* :::
+*
+* @param {string} $item-selector - The consumer component's tag name for the item that displays the action bar.
+*/
+.expression {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 1rem;
+  gap: 0;
+  background-color: rgb(var(--contrast-100));
+  border: 1px solid rgb(var(--contrast-500));
+  border-radius: 0.75rem;
+}
+.expression .clickable-header {
+  cursor: pointer;
+  user-select: none;
+}
+.expression .clickable-header:hover {
+  background-color: rgb(var(--contrast-200));
+}
+.expression > ul {
+  margin-top: 0;
+  margin-right: 1rem;
+  margin-bottom: 1rem;
+  margin-left: 1rem;
+  padding-left: 1rem;
+  list-style: disc;
+}
+.expression > ul li {
+  margin-top: 1rem;
+}
+.expression > ul li.add-button {
+  list-style: none;
+  display: flex;
+  gap: 0.5rem;
+}