@limetech/lime-elements 38.28.1 → 38.29.0

package/dist/collection/components/radio-button-group/radio-button.css

@@ -0,0 +1,279 @@
+@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!
+  */
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+.boolean-input {
+  --limel-boolean-input-box-size: 1.25rem;
+  --limel-boolean-input-gap-size: 0.5rem;
+  position: relative;
+  isolation: isolate;
+  display: flex;
+  align-items: center;
+  min-height: var(--limel-checkbox-min-height, 2.5rem);
+  width: 100%;
+}
+.boolean-input input[type=checkbox],
+.boolean-input input[type=radio] {
+  position: absolute;
+  width: 0;
+  height: 0;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+label.boolean-input-label {
+  min-width: var(--limel-boolean-input-box-size);
+  min-height: var(--limel-boolean-input-box-size);
+  padding-top: 0.125rem;
+  cursor: pointer;
+  position: relative;
+  width: 100%;
+  font-size: var(--limel-theme-default-small-font-size);
+  color: var(--limel-theme-text-primary-on-background-color);
+  padding-left: calc(var(--limel-boolean-input-box-size) + var(--limel-boolean-input-gap-size));
+}
+.disabled:not([readonly]):not([readonly=true]) label.boolean-input-label {
+  cursor: not-allowed;
+  color: var(--limel-theme-text-disabled-color);
+}
+.required label.boolean-input-label:after {
+  margin-left: 0.0625rem;
+  content: "*";
+}
+.invalid:not(.readonly) label.boolean-input-label {
+  color: var(--limel-theme-error-text-color);
+}
+:host(limel-checkbox.hide-label) label.boolean-input-label, .hide-label label.boolean-input-label {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  opacity: 0;
+  width: var(--limel-boolean-input-box-size);
+}
+
+.box {
+  position: absolute;
+  pointer-events: none;
+  transition: border-color 0.4s ease 0.2s, background-color 0.2s ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease;
+  display: inline-block;
+  vertical-align: middle;
+  width: var(--limel-boolean-input-box-size);
+  height: var(--limel-boolean-input-box-size);
+  margin-right: var(--limel-boolean-input-gap-size);
+  border-radius: var(--limel-boolean-input-box-border-radius);
+  border: 0.125rem solid;
+  border-color: var(--checkbox-unchecked-border-color, rgb(var(--contrast-900)));
+  background-color: var(--limel-checkbox-background-color, rgb(var(--contrast-300)));
+  /*
+   * NOTE: Original selectors using `:has()` are commented out due to Safari
+   * rendering bugs where descendant transitions (e.g. SVG stroke animations)
+   * or box/background updates sometimes fail to animate or even repaint
+   * reliably when the state change is detected only via `:has()`.
+   *
+   * Original (kept for future re-implementation, or cleanup):
+   * .boolean-input:has(input[type='checkbox']:checked) &,
+   * .boolean-input:has(input[type='radio']:checked) & {
+   *   ...
+   * }
+   *
+   * Replacement uses adjacency: the markup places the `<input>` immediately
+   * before .box, so we can select the checked state with
+   * input:checked + .box. We retain the explicit `.checked` class pathway in
+   * case some templates toggle that class manually.
+   *
+   * Using the `:has()` selector is more reliable, because it doesn't
+   * depend on the DOM structure (e.g. if the markup changes and the input is
+   * no longer adjacent to the box), but Safari support for `:has()` is still
+   * somewhat inconsistent.
+   */
+  /*
+   * See previous comment about Safari rendering bugs ☝️.
+   *
+   * Original (kept for for future re-implementation, or cleanup):
+   * .boolean-input:not(.disabled):has(label.boolean-input-label:hover) & { ... }
+   * .boolean-input:not(.disabled):has(label.boolean-input-label:active) & { ... }
+   */
+}
+.checked .box, .boolean-input > input[type=checkbox]:checked + .box, .boolean-input > input[type=radio]:checked + .box {
+  background-color: var(--lime-primary-color, var(--limel-theme-primary-color));
+  border-color: var(--lime-primary-color, var(--limel-theme-primary-color));
+}
+.disabled .box {
+  opacity: 0.4;
+}
+.boolean-input:not(.disabled):hover .box {
+  will-change: box-shadow;
+  box-shadow: var(--button-shadow-hovered);
+}
+.boolean-input:not(.disabled):active .box {
+  will-change: box-shadow;
+  box-shadow: var(--button-shadow-pressed);
+}
+.box:before {
+  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);
+  content: "";
+  position: absolute;
+  inset: -0.1875rem;
+  border-radius: inherit;
+  /*
+   * See previous comment about Safari rendering bugs ☝️.
+   *
+   * Original (kept for for future re-implementation, or cleanup):
+   * .boolean-input:has(input[type='checkbox']:focus-visible) &,
+   * .boolean-input:has(input[type='radio']:focus-visible) & { ...}
+   */
+}
+.boolean-input > input[type=checkbox]:focus-visible + .box:before, .boolean-input > input[type=radio]:focus-visible + .box:before {
+  will-change: box-shadow;
+  box-shadow: var(--shadow-depth-8-focused);
+}
+.box:after {
+  transition: opacity 0.2s ease, width 0.4s ease, box-shadow 0.6s cubic-bezier(0.68, -0.55, 0, 1.87), transform 0.6s cubic-bezier(0.68, -0.55, 0, 1.87);
+  content: "";
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  border-radius: 1rem;
+  opacity: 0;
+  background-color: rgb(var(--color-white));
+  /* Hover fallback for pseudo-element (see explanation above). */
+}
+.boolean-input:not(.disabled):hover .box:after {
+  will-change: opacity, box-shadow, transform, width;
+}
+
+/**
+* :::important
+* The `limel-radio-button` component can be used inside the HTML of
+* other components to render a decorative radio button in
+* their UI. An example of this is the list component.
+* This means the content of `limel-radio-button` will become a part of the
+* consumer's DOM structure.
+*
+* Additionally, the consumer components also need to import the current `.scss`
+* file into their own styles file for the radio button to be rendered correctly!
+* This means, if the styles in this file are not "specific" enough,
+* there is a risk that the consumer component's styles are affected by
+* our styles here.
+*
+* For instance if the consumer has a `<label>`,
+* it might unintentionally inherit styles from the radio button; unless we
+* make the such styles more specific here.
+*
+* Naturally, we cannot mitigate all sorts of potential styling problems.
+* The consumer component should be aware of this issue too.
+* But we can ensure that our styles here both make sense,
+* are readable, and are as specific as possible to avoid unintended side effects.
+* :::
+*/
+.radio-button {
+  --limel-boolean-input-box-border-radius: var(
+      --limel-boolean-input-box-size
+  );
+}
+
+.box:after {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+.boolean-input:has(input[type=radio]:checked) .box:after {
+  opacity: 1;
+  transform: scale(0.6);
+  box-shadow: var(--shadow-depth-8);
+}

package/dist/collection/components/radio-button-group/radio-button.js

@@ -0,0 +1,151 @@
+import { Host, h } from '@stencil/core';
+/**
+ * This is a low-level private component that renders individual radio button elements.
+ * It's used internally by the list-item component to render radio buttons when
+ * `type="radio"` is specified.
+ *
+ * ## Usage in the Library
+ *
+ * This template is primarily used by:
+ * - `limel-list` component when `type="radio"`
+ * - `limel-radio-button-group` component (which wraps `limel-list`)
+ *
+ * ## Why This Exists
+ *
+ * While we have `limel-radio-button-group` for most use cases, this template provides
+ * the actual radio button HTML structure with proper MDC classes and accessibility
+ * attributes. It ensures consistent styling and behavior across all radio button
+ * implementations in the library.
+ *
+ * ## Design Philosophy
+ *
+ * This follows the principle that individual radio buttons should not be standalone
+ * components, as a single radio button is never useful in a UI. Instead, this template
+ * is used to build groups of radio buttons through higher-level components.
+ *
+ * However, since this is a private component, consumers who need to use a radio button
+ * outside of the context of a list or group, can still use the `limel-radio-button`
+ * component directly according to in their UI needs.
+ *
+ * @private
+ */
+export class RadioButtonComponent {
+  constructor() {
+    this.checked = undefined;
+    this.disabled = undefined;
+    this.id = undefined;
+    this.label = undefined;
+    this.onChange = undefined;
+  }
+  render() {
+    return (h(Host, { class: {
+        'boolean-input': true,
+        'radio-button': true,
+        checked: this.checked,
+        disabled: this.disabled,
+      } }, h("input", { type: "radio", id: this.id, checked: this.checked, disabled: this.disabled, onChange: this.onChange }), h("div", { class: "box" }), h("label", { class: "boolean-input-label", htmlFor: this.id }, this.label)));
+  }
+  static get is() { return "limel-radio-button"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["radio-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["radio-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "checked": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Indicates whether the radio button is checked."
+        },
+        "attribute": "checked",
+        "reflect": true
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Disables the radio button when set to `true`."
+        },
+        "attribute": "disabled",
+        "reflect": true
+      },
+      "id": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Associates the internal input with an external label."
+        },
+        "attribute": "id",
+        "reflect": false
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Visual label shown next to the radio button."
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "onChange": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(event: Event) => void",
+          "resolved": "(event: Event) => void",
+          "references": {
+            "Event": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Change handler forwarded to the underlying input element."
+        }
+      }
+    };
+  }
+}
+//# sourceMappingURL=radio-button.js.map

package/dist/collection/components/radio-button-group/radio-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-button.js","sourceRoot":"","sources":["../../../src/components/radio-button-group/radio-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAMH,MAAM,OAAO,oBAAoB;;;;;;;;EA+BtB,MAAM;IACT,OAAO,CACH,EAAC,IAAI,IACD,KAAK,EAAE;QACH,eAAe,EAAE,IAAI;QACrB,cAAc,EAAE,IAAI;QACpB,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;OAC1B;MAED,aACI,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB;MACF,WAAK,KAAK,EAAC,KAAK,GAAG;MACnB,aAAO,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,IAAI,CAAC,EAAE,IAC9C,IAAI,CAAC,KAAK,CACP,CACL,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n/**\n * This is a low-level private component that renders individual radio button elements.\n * It's used internally by the list-item component to render radio buttons when\n * `type=\"radio\"` is specified.\n *\n * ## Usage in the Library\n *\n * This template is primarily used by:\n * - `limel-list` component when `type=\"radio\"`\n * - `limel-radio-button-group` component (which wraps `limel-list`)\n *\n * ## Why This Exists\n *\n * While we have `limel-radio-button-group` for most use cases, this template provides\n * the actual radio button HTML structure with proper MDC classes and accessibility\n * attributes. It ensures consistent styling and behavior across all radio button\n * implementations in the library.\n *\n * ## Design Philosophy\n *\n * This follows the principle that individual radio buttons should not be standalone\n * components, as a single radio button is never useful in a UI. Instead, this template\n * is used to build groups of radio buttons through higher-level components.\n *\n * However, since this is a private component, consumers who need to use a radio button\n * outside of the context of a list or group, can still use the `limel-radio-button`\n * component directly according to in their UI needs.\n *\n * @private\n */\n@Component({\n    tag: 'limel-radio-button',\n    shadow: false,\n    styleUrl: 'radio-button.scss',\n})\nexport class RadioButtonComponent {\n    /**\n     * Indicates whether the radio button is checked.\n     */\n    @Prop({ reflect: true })\n    public checked?: boolean;\n\n    /**\n     * Disables the radio button when set to `true`.\n     */\n    @Prop({ reflect: true })\n    public disabled?: boolean;\n\n    /**\n     * Associates the internal input with an external label.\n     */\n    @Prop()\n    public id!: string;\n\n    /**\n     * Visual label shown next to the radio button.\n     */\n    @Prop()\n    public label?: string;\n\n    /**\n     * Change handler forwarded to the underlying input element.\n     */\n    @Prop()\n    public onChange?: (event: Event) => void;\n\n    public render() {\n        return (\n            <Host\n                class={{\n                    'boolean-input': true,\n                    'radio-button': true,\n                    checked: this.checked,\n                    disabled: this.disabled,\n                }}\n            >\n                <input\n                    type=\"radio\"\n                    id={this.id}\n                    checked={this.checked}\n                    disabled={this.disabled}\n                    onChange={this.onChange}\n                />\n                <div class=\"box\" />\n                <label class=\"boolean-input-label\" htmlFor={this.id}>\n                    {this.label}\n                </label>\n            </Host>\n        );\n    }\n}\n"]}

package/dist/collection/components/table/table.css

@@ -1063,11 +1063,6 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
   flex-shrink: 0;
 }
 
-#tabulator-container:not(.has-pagination) .tabulator-paginator {
-  visibility: hidden;
-  display: none !important;
-}
-
 #tabulator-container {
   position: relative;
 }
@@ -1118,18 +1113,8 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
 }
 
 .tabulator-row {
-  transition: background-color 0.2s ease;
   height: 2.25rem;
 }
-.tabulator-row:hover {
-  transition: background-color 0.1s ease;
-}
-.tabulator-row.tabulator-row-odd, .tabulator-row.tabulator-row-odd:hover {
-  background-color: rgb(var(--table-row-background-color--odd));
-}
-.tabulator-row.tabulator-row-even, .tabulator-row.tabulator-row-even:hover {
-  background-color: rgb(var(--table-row-background-color--even));
-}
 .tabulator-row .tabulator-cell {
   border-right: transparent;
   padding: 0.5rem;
@@ -1367,6 +1352,10 @@ limel-chip {
  * Nothing in this file may output any CSS
  * without being explicitly called by outside code.
  */
+#tabulator-container:not(.has-pagination) .tabulator-paginator {
+  display: none !important;
+}
+
 .tabulator .tabulator-footer .tabulator-paginator {
   box-sizing: border-box;
   display: grid;
@@ -1608,8 +1597,22 @@ button.tabulator-page[data-page=first]:not([disabled]):hover:after, button.tabul
   inset: 0;
   min-height: 0.125rem;
   transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  background-color: rgb(var(--limel-table-row-background-color));
 }
 
+.tabulator-row:not(.tabulator-calcs) {
+  background-color: transparent;
+}
+.tabulator-row:not(.tabulator-calcs).tabulator-row-odd {
+  --limel-table-row-background-color: var(
+      --table-row-background-color--odd
+  );
+}
+.tabulator-row:not(.tabulator-calcs).tabulator-row-even {
+  --limel-table-row-background-color: var(
+      --table-row-background-color--even
+  );
+}
 .tabulator-row:not(.tabulator-calcs) .tabulator-cell {
   pointer-events: none;
 }
@@ -1619,8 +1622,12 @@ button.tabulator-page[data-page=first]:not([disabled]):hover:after, button.tabul
 .tabulator-row:not(.tabulator-calcs).tabulator-selectable:hover {
   z-index: 2;
 }
+.tabulator-row:not(.tabulator-calcs).tabulator-selectable.active {
+  --limel-table-row-background-color: var(
+      --table-row-background-color--active
+  );
+}
 .tabulator-row:not(.tabulator-calcs).tabulator-selectable.active .interactive-feedback {
-  background-color: rgb(var(--table-row-background-color--active));
   box-shadow: var(--button-shadow-inset-pressed);
 }
 .tabulator-row:not(.tabulator-calcs).tabulator-selectable.active:before {
@@ -1702,10 +1709,6 @@ button.tabulator-page[data-page=first]:not([disabled]):hover:after, button.tabul
 :host(.has-pagination-on-top) .select-all {
   top: 2.625rem;
 }
-:host(.has-pagination-on-top) #tabulator-container:not(.has-pagination) .tabulator-paginator {
-  display: grid !important;
-  opacity: 0;
-}
 
 /**
  * Note! This file is exported to `dist/scss/` in the published
@@ -1881,22 +1884,21 @@ button.tabulator-page[data-page=first]:not([disabled]):hover:after, button.tabul
   padding-bottom: 0;
 }
 
-/*
- * This file is imported into every component!
- *
- * Nothing in this file may output any CSS
- * without being explicitly called by outside code.
- */
 .select-all,
 .limel-table--row-selector {
   --limel-checkbox-min-height: 1.25rem;
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+  text-overflow: unset !important;
+  padding: 0 !important;
 }
 
 .select-all {
   position: absolute;
   z-index: 1;
-  left: 0.5rem;
-  top: 0.375rem;
+  left: 0.375rem;
+  top: 0.25rem;
 }
 
 .limel-table--row-selector {
@@ -1904,21 +1906,12 @@ button.tabulator-page[data-page=first]:not([disabled]):hover:after, button.tabul
   left: 0;
   border-width: 0;
   z-index: 1;
-  text-overflow: unset !important;
-  padding-left: 0.5rem !important;
-  padding-top: 0.25rem !important;
-}
-.limel-table--row-selector limel-checkbox {
-  margin-top: 0.0625rem;
-}
-.tabulator-row-odd .limel-table--row-selector {
-  background-image: linear-gradient(to right, rgb(var(--table-row-background-color--odd)) 70%, rgb(var(--table-row-background-color--odd), 0));
-}
-.tabulator-row-even .limel-table--row-selector {
-  background-image: linear-gradient(to right, rgb(var(--table-row-background-color--even)) 70%, rgb(var(--table-row-background-color--even), 0));
 }
-.tabulator-row.active .limel-table--row-selector {
-  background-image: linear-gradient(to right, rgb(var(--table-row-background-color--active)) 70%, rgb(var(--table-row-background-color--active), 0));
+.limel-table--row-selector:before {
+  content: "";
+  inset: 0.25rem 0;
+  position: absolute;
+  background-image: linear-gradient(to right, rgb(var(--limel-table-row-background-color)) 70%, rgb(var(--limel-table-row-background-color), 0));
 }
 .limel-table--row-selector limel-checkbox {
   transition: opacity 0.2s ease;

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

@@ -80,6 +80,7 @@ export class Table {
     this.sorting = [];
     this.activeRow = undefined;
     this.movableColumns = undefined;
+    this.sortableColumns = true;
     this.loading = false;
     this.page = FIRST_PAGE;
     this.emptyMessage = undefined;
@@ -192,6 +193,13 @@ export class Table {
     this.initTableSelection();
     this.init();
   }
+  updateSortableColumns() {
+    if (!this.tabulator) {
+      return;
+    }
+    this.tabulator.setColumns(this.getColumnDefinitions());
+    this.shouldSort = true;
+  }
   updateSorting(newValue, oldValue) {
     const newSorting = this.getColumnSorter(newValue);
     const oldSorting = this.getColumnSorter(oldValue);
@@ -300,7 +308,13 @@ export class Table {
   getColumnDefinitions() {
     const columnDefinitions = this.columns
       .map(this.addColumnAggregator)
-      .map(this.columnFactory.create);
+      .map((column) => {
+      var _a;
+      const definition = this.columnFactory.create(column);
+      const columnSortable = (_a = column.headerSort) !== null && _a !== void 0 ? _a : true;
+      definition.headerSort = this.sortableColumns && columnSortable;
+      return definition;
+    });
     if (this.tableSelection) {
       return this.tableSelection.getColumnDefinitions(columnDefinitions);
     }
@@ -691,6 +705,24 @@ export class Table {
         "attribute": "movable-columns",
         "reflect": false
       },
+      "sortableColumns": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `false` to disable column sorting through header interactions.\nProgrammatic sorting through the `sorting` prop and `sort` event remains available."
+        },
+        "attribute": "sortable-columns",
+        "reflect": false,
+        "defaultValue": "true"
+      },
       "loading": {
         "type": "boolean",
         "mutable": false,
@@ -973,6 +1005,9 @@ export class Table {
       }, {
         "propName": "selectable",
         "methodName": "updateSelectable"
+      }, {
+        "propName": "sortableColumns",
+        "methodName": "updateSortableColumns"
       }, {
         "propName": "sorting",
         "methodName": "updateSorting"