@limetech/lime-elements 36.0.0-next.9 → 36.1.0-next.1

package/dist/collection/components/dock/dock.js

@@ -56,12 +56,7 @@ export class Dock {
       return (h("limel-dock-button", { class: {
           'dock-item': true,
           selected: item.selected,
-        }, item: item, expanded: this.expanded && !this.useMobileLayout, useMobileLayout: this.useMobileLayout, onInteract: this.handleDockItemClick }));
-    };
-    this.handleDockItemClick = (event) => {
-      if (!event.detail.selected) {
-        this.itemSelected.emit(event.detail);
-      }
+        }, item: item, expanded: this.expanded && !this.useMobileLayout, useMobileLayout: this.useMobileLayout }));
     };
     this.handleResize = () => {
       if (window.innerWidth <= this.mobileBreakPoint) {
@@ -239,7 +234,7 @@ export class Dock {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Fired when a Dock item has been selected from the dock."
+        "text": "Fired when a dock item has been selected from the dock."
       },
       "complexType": {
         "original": "DockItem",
@@ -251,6 +246,41 @@ export class Dock {
           }
         }
       }
+    }, {
+      "method": "menuOpen",
+      "name": "menuOpen",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fired when a dock menu is opened."
+      },
+      "complexType": {
+        "original": "DockItem",
+        "resolved": "DockItem",
+        "references": {
+          "DockItem": {
+            "location": "import",
+            "path": "./dock.types"
+          }
+        }
+      }
+    }, {
+      "method": "close",
+      "name": "close",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fired when the popover is closed."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
     }, {
       "method": "dockExpanded",
       "name": "dockExpanded",

package/dist/collection/components/input-field/input-field.js

@@ -7,6 +7,7 @@ import { createRandomString } from '../../util/random-string';
 const helperTextId = 'tf-helper-text';
 /**
  * @exampleComponent limel-example-input-field-text
+ * @exampleComponent limel-example-input-field-placeholder
  * @exampleComponent limel-example-input-field-text-multiple
  * @exampleComponent limel-example-input-field-number
  * @exampleComponent limel-example-input-field-autocomplete
@@ -101,6 +102,7 @@ export class InputField {
     this.getContainerClassList = () => {
       const classList = {
         'mdc-text-field': true,
+        'mdc-text-field--no-label': !this.label,
         'mdc-text-field--outlined': true,
         'mdc-text-field--invalid': this.isInvalid(),
         'mdc-text-field--disabled': this.disabled || this.readonly,
@@ -127,7 +129,7 @@ export class InputField {
         return;
       }
       const type = this.type === 'urlAsText' ? 'text' : this.type;
-      return (h("input", Object.assign({}, properties, { type: type, pattern: this.pattern, onWheel: this.handleWheel, onKeyDown: this.onKeyDown, value: this.value })));
+      return (h("input", Object.assign({}, properties, { type: type, pattern: this.pattern, onWheel: this.handleWheel, onKeyDown: this.onKeyDown, value: this.value, placeholder: this.placeholder })));
     };
     this.renderTextarea = (properties) => {
       if (this.type !== 'textarea') {
@@ -252,6 +254,17 @@ export class InputField {
       }
       return this.limelInputField.shadowRoot.querySelector(elementName);
     };
+    this.renderLabel = (labelId) => {
+      const labelClassList = {
+        'mdc-floating-label': true,
+        'mdc-floating-label--float-above': !!this.value || this.isFocused || this.readonly,
+      };
+      if (!this.label) {
+        return;
+      }
+      return (h("span", { class: "mdc-notched-outline__notch" },
+        h("span", { class: labelClassList, id: labelId }, this.label)));
+    };
     this.renderLeadingIcon = () => {
       if (this.type === 'textarea') {
         return;
@@ -516,16 +529,11 @@ export class InputField {
       properties['aria-controls'] = helperTextId;
       properties['aria-describedby'] = helperTextId;
     }
-    const labelClassList = {
-      'mdc-floating-label': true,
-      'mdc-floating-label--float-above': !!this.value || this.isFocused || this.readonly,
-    };
     return [
       h("label", { class: this.getContainerClassList() },
         h("span", { class: "mdc-notched-outline", tabindex: "-1" },
           h("span", { class: "mdc-notched-outline__leading" }),
-          h("span", { class: "mdc-notched-outline__notch" },
-            h("span", { class: labelClassList, id: labelId }, this.label)),
+          this.renderLabel(labelId),
           h("span", { class: "mdc-notched-outline__trailing" })),
         this.renderLeadingIcon(),
         this.renderEmptyValueForReadonly(),
@@ -627,6 +635,23 @@ export class InputField {
       "attribute": "label",
       "reflect": true
     },
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The placeholder text shown inside the input field, when the field is focused and empty."
+      },
+      "attribute": "placeholder",
+      "reflect": true
+    },
     "helperText": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/menu/menu.js

@@ -66,13 +66,8 @@ export class Menu {
       }
       this.open = !this.open;
     };
-    this.onListChange = (event) => {
-      this.items = this.items.map((item) => {
-        if (item === event.detail) {
-          return event.detail;
-        }
-        return item;
-      });
+    this.handleSelect = (event) => {
+      event.stopPropagation();
       this.select.emit(event.detail);
       this.open = false;
     };
@@ -90,12 +85,6 @@ export class Menu {
     };
     this.portalId = createRandomString();
   }
-  componentDidLoad() {
-    if (!this.host.querySelector('[slot="trigger"]')) {
-      // eslint-disable-next-line no-console
-      console.warn('Using limel-menu with the default trigger is deprecated. Please provide your own trigger element.');
-    }
-  }
   openWatcher() {
     if (!this.open) {
       return;
@@ -117,7 +106,7 @@ export class Menu {
           } },
           h("limel-menu-list", { class: {
               'has-grid-layout has-interactive-items': this.gridLayout,
-            }, items: this.items, type: "menu", badgeIcons: this.badgeIcons, onChange: this.onListChange, ref: this.setListElement })))));
+            }, items: this.items, type: "menu", badgeIcons: this.badgeIcons, onSelect: this.handleSelect, ref: this.setListElement })))));
   }
   componentDidRender() {
     const slotElement = this.host.shadowRoot.querySelector('slot');

package/dist/collection/components/menu-list/menu-list.js

@@ -67,10 +67,10 @@ export class MenuList {
         return !!item.selected;
       });
       if (selectedItem) {
-        this.change.emit(Object.assign(Object.assign({}, selectedItem), { selected: false }));
+        this.select.emit(Object.assign(Object.assign({}, selectedItem), { selected: false }));
       }
       if (MenuItems[index] !== selectedItem) {
-        this.change.emit(Object.assign(Object.assign({}, MenuItems[index]), { selected: false }));
+        this.select.emit(Object.assign(Object.assign({}, MenuItems[index]), { selected: false }));
       }
     };
     this.isMenuItem = (item) => {
@@ -223,26 +223,6 @@ export class MenuList {
     }
   }; }
   static get events() { return [{
-      "method": "change",
-      "name": "change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fired when a new value has been selected from the list. Only fired if selectable is set to true"
-      },
-      "complexType": {
-        "original": "MenuItem | MenuItem[]",
-        "resolved": "MenuItem<any> | MenuItem<any>[]",
-        "references": {
-          "MenuItem": {
-            "location": "import",
-            "path": "@limetech/lime-elements"
-          }
-        }
-      }
-    }, {
       "method": "select",
       "name": "select",
       "bubbles": true,
@@ -250,11 +230,11 @@ export class MenuList {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Fired when an action has been selected from the action menu of a list item"
+        "text": "Fired when a new value has been selected from the list."
       },
       "complexType": {
-        "original": "MenuItem | MenuItem[]",
-        "resolved": "MenuItem<any> | MenuItem<any>[]",
+        "original": "MenuItem",
+        "resolved": "MenuItem<any>",
         "references": {
           "MenuItem": {
             "location": "import",

package/dist/collection/components/popover-surface/popover-surface.css

@@ -31,12 +31,13 @@
   border-radius: var(--popover-border-radius, 0.75rem);
   background-color: var(--popover-body-background-color, rgb(var(--contrast-100)));
 }
-.limel-popover-surface:focus, .limel-popover-surface:focus-within {
+.limel-popover-surface:focus {
   outline: none;
 }
+.limel-popover-surface:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
 .limel-popover-surface:focus:after, .limel-popover-surface:focus-within:after {
   opacity: 1;
-}
-.limel-popover-surface:focus-visible {
-  box-shadow: var(--shadow-depth-16-focused);
 }

package/dist/collection/components/progress-flow/progress-flow-item/progress-flow-item.css

@@ -67,7 +67,6 @@
   font-size: 0.875rem;
 }
 .step.disabled {
-  opacity: 0.75;
   cursor: not-allowed;
 }
 .step.disabled.readonly {
@@ -159,24 +158,38 @@
   z-index: 2;
 }
 
-.step:after {
+.step:before, .step:after {
   pointer-events: none;
   box-sizing: border-box;
   z-index: 2;
   position: absolute;
   right: var(--selected-indicator-right);
-  background-color: var(--step-divider-color);
-  width: 0.375rem;
-  height: 0.375rem;
   border-radius: 50%;
-  opacity: 0.7;
 }
-.last .step:after {
+.last .step:before, .last .step:after {
   right: 0.5rem;
 }
 
-.flow-item:not(.off-progress-item) .step.selected:after {
+.flow-item:not(.off-progress-item) .step.selected:before, .flow-item:not(.off-progress-item) .step.selected:after {
+  content: "";
+  width: 0.375rem;
+  height: 0.375rem;
+}
+.flow-item:not(.off-progress-item) .step.selected:before {
+  background-color: var(--step-divider-color);
+  opacity: 0.7;
+}
+.flow-item:not(.off-progress-item) .step.disabled:before, .flow-item:not(.off-progress-item) .step.disabled:after {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+.flow-item:not(.off-progress-item) .step.disabled:after {
   content: "";
+  background-image: url("data:image/svg+xml;charset=utf-8, <svg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill-rule='evenodd' clip-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2'><path fill='rgb(127,127,127)' d='M32.18 13.711c0-2.207-1.793-4-4.002-4H11.821c-2.208 0-4 1.793-4 4V28.29a4 4 0 0 0 4 4h16.357a4.002 4.002 0 0 0 4.001-4V13.711Z'/><path fill='rgb(127,127,127)' d='M11.211 9.758V7.673A7.489 7.489 0 0 1 18.696.188h2.608a7.489 7.489 0 0 1 7.485 7.485v2.085h-3V7.673a4.488 4.488 0 0 0-4.485-4.485h-2.608a4.488 4.488 0 0 0-4.485 4.485v2.085h-3Z'/></svg>");
+  background-size: 90%;
+  background-repeat: no-repeat;
+  background-position: center;
+  mix-blend-mode: multiply;
 }
 
 .step {

package/dist/collection/components/select/select.css

@@ -1726,6 +1726,10 @@
   left: 1rem;
 }
 
+.mdc-select__dropdown-icon-graphic {
+  transition: transform 0.2s ease;
+}
+
 .limel-select__selected-option {
   display: flex;
   align-items: center;
@@ -1774,7 +1778,8 @@
   outline: none;
 }
 .limel-select .limel-select-trigger:focus-visible {
-  box-shadow: var(--shadow-depth-8-focused) !important;
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
 }
 .limel-select .limel-select-trigger .mdc-floating-label {
   color: rgba(var(--contrast-1200), 1);
@@ -1786,15 +1791,6 @@
   font-size: 0.875rem;
   transform: translateY(-2.171875rem) scale(0.75);
 }
-.limel-select .mdc-select__dropdown-icon {
-  transition: box-shadow 0.2s ease;
-  border-radius: 50%;
-  background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='10' height='5' viewBox='7 10 10 5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' opacity='.54' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat 50%;
-  position: relative;
-  bottom: unset;
-  margin-left: 0;
-  margin-right: 0.25rem;
-}
 .limel-select .limel-select-trigger,
 .limel-select .limel-select__selected-option {
   width: 100%;
@@ -1822,7 +1818,10 @@
   color: var(--mdc-theme-primary);
 }
 .limel-select:not(.mdc-select--disabled) .limel-select-trigger.limel-select--focused .mdc-select__dropdown-icon {
-  color: var(--mdc-theme-primary);
+  fill: var(--mdc-theme-primary);
+}
+.limel-select:not(.mdc-select--disabled) .limel-select-trigger.limel-select--focused .mdc-select__dropdown-icon-graphic {
+  transform: rotate(-180deg);
 }
 .limel-select.limel-select--required .mdc-floating-label::after {
   content: "*";

package/dist/collection/components/select/select.template.js

@@ -39,7 +39,7 @@ const SelectValue = (props) => {
     'mdc-floating-label--float-above': props.hasValue || props.isOpen || props.readonly,
     'mdc-floating-label--active': props.isOpen,
   };
-  return (h("div", { class: anchorClassList, tabindex: "0", onClick: props.open, onKeyPress: props.onTriggerPress, role: "button", "aria-haspopup": "listbox", "aria-expanded": "false", "aria-labelledby": "s-label s-selected-text" },
+  return (h("div", { class: anchorClassList, tabindex: "0", onClick: props.open, onKeyPress: props.onTriggerPress, role: "button", "aria-haspopup": "listbox", "aria-expanded": "false", "aria-labelledby": "s-label s-selected-text", "aria-required": props.required, "aria-disabled": props.disabled },
     h("span", { id: "s-label", class: labelClassList }, props.label),
     h("span", { class: "mdc-select__selected-text-container limel-select__selected-option" },
       getSelectedIcon(props.value),
@@ -47,8 +47,7 @@ const SelectValue = (props) => {
     h(ShowIcon, Object.assign({}, props, { isValid: props.isValid })),
     h("span", { class: "mdc-select__dropdown-icon" },
       h("svg", { class: "mdc-select__dropdown-icon-graphic", viewBox: "7 10 10 5", focusable: "false" },
-        h("polygon", { class: "mdc-select__dropdown-icon-inactive", stroke: "none", "fill-rule": "evenodd", points: "7 10 12 15 17 10" }),
-        h("polygon", { class: "mdc-select__dropdown-icon-active", stroke: "none", "fill-rule": "evenodd", points: "7 15 12 10 17 15" })))));
+        h("polygon", { stroke: "none", "fill-rule": "evenodd", points: "7 10 12 15 17 10" })))));
 };
 const ShowIcon = (props) => {
   if (props.isValid) {
@@ -80,7 +79,7 @@ const MenuDropdown = (props) => {
       h("limel-list", { items: items, type: props.multiple ? 'checkbox' : 'selectable', onChange: props.onMenuChange }))));
 };
 const NativeDropdown = (props) => {
-  return (h("select", { required: props.required, "aria-required": props.required, onChange: props.onNativeChange, onFocus: props.open, onBlur: props.close, class: "limel-select__native-control", disabled: props.disabled, multiple: props.multiple }, props.options.map((option) => {
+  return (h("select", { required: props.required, "aria-disabled": props.disabled, "aria-required": props.required, onChange: props.onNativeChange, onFocus: props.open, onBlur: props.close, class: "limel-select__native-control", disabled: props.disabled, multiple: props.multiple }, props.options.map((option) => {
     return (h("option", { key: option.value, value: option.value, selected: isSelected(option, props.value), disabled: option.disabled }, option.text));
   })));
 };

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

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

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

@@ -0,0 +1,8 @@
+export function mapLayout(layout) {
+  const layouts = {
+    stretchLastColumn: 'fitDataStretch',
+    stretchColumns: 'fitColumns',
+    lowDensity: 'fitData',
+  };
+  return layouts[layout] || 'fitDataFill';
+}

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

@@ -935,6 +935,9 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
   background: #333;
 }
 
+/*
+* @prop --table-max-column-width: defines a maximum width for columns using standard size units, to prevent the table from growing too wide. Set to `auto` if you do not need this limitation. Defaults to `40rem`.
+*/
 :host {
   display: block;
   --table-header-background-color: var(--contrast-500);
@@ -1010,9 +1013,20 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
 .tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
   background-color: rgb(var(--table-header-background-color--hover));
 }
+.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
+  padding-right: 0.5rem;
+}
+.tabulator .tabulator-header .tabulator-col-title-holder {
+  display: flex;
+  gap: 0.25rem;
+}
+.tabulator .tabulator-header .tabulator-col-sorter {
+  order: 1;
+}
 .tabulator .tabulator-header .tabulator-col-title {
+  order: 2;
   font-weight: 500;
-  padding-left: 0.125rem;
+  padding-right: 0 !important;
   line-height: 1.25rem;
 }
 
@@ -1034,6 +1048,7 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
 .tabulator-row .tabulator-cell {
   border-right: transparent;
   padding: 0.5rem;
+  padding-left: 1rem;
   display: inline-flex;
   align-items: center;
 }
@@ -1046,7 +1061,7 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
 
 .tabulator-col,
 .tabulator-cell {
-  max-width: 37.5rem;
+  max-width: var(--table-max-column-width, 40rem);
   font-size: 0.8125rem;
 }
 
@@ -1080,62 +1095,67 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
  * without being explicitly called by outside code.
  */
 .tabulator-col-sorter {
-  right: 1rem !important;
-}
-
-.tabulator-arrow {
-  position: absolute;
-  transition: border 0.2s ease;
-  top: 0.25rem;
+  transition: opacity 0.2s ease;
+  right: 0 !important;
+  position: relative !important;
+  justify-content: center;
   cursor: pointer;
 }
-[aria-sort=none] .tabulator-arrow {
-  border-bottom-color: rgb(var(--table-arrow-color)) !important;
-}
-[aria-sort=desc] .tabulator-arrow {
-  border-top-color: var(--table-arrow-color--active) !important;
-}
-[aria-sort=asc] .tabulator-arrow {
-  border-bottom-color: var(--table-arrow-color--active) !important;
+[aria-sort=none] .tabulator-col-sorter {
+  opacity: 0;
 }
-[aria-sort=desc] .tabulator-arrow:after, [aria-sort=asc] .tabulator-arrow:after {
-  background-color: var(--table-arrow-color--active);
+[aria-sort=desc] .tabulator-col-sorter, [aria-sort=asc] .tabulator-col-sorter {
+  opacity: 1;
 }
-.tabulator-arrow:before, .tabulator-arrow:after {
-  display: block;
-  content: "";
+[aria-sort=desc] .tabulator-col-sorter:before, [aria-sort=asc] .tabulator-col-sorter:before {
   position: absolute;
-  bottom: 0;
-}
-.tabulator-arrow:before {
-  background-color: rgb(var(--table-header-background-color));
-  width: 0.5rem;
-  height: 0.5rem;
-  transform: rotate(45deg);
-  left: -0.25rem;
-  top: 0.25rem;
+  content: "";
+  width: 0.125rem;
+  height: 0.4rem;
+  background-color: var(--table-arrow-color--active);
 }
-.tabulator-col.tabulator-sortable:hover .tabulator-arrow:before {
-  background-color: rgb(var(--table-header-background-color--hover));
+
+.tabulator-sortable[aria-sort=desc]:hover .tabulator-col-sorter, .tabulator-sortable[aria-sort=asc]:hover .tabulator-col-sorter {
+  opacity: 1;
+  animation: indicate-sortable-sorted-column 0.5s ease;
 }
-.tabulator-arrow:after {
-  width: 0.125rem;
-  background-color: rgb(var(--table-arrow-color));
-  height: 0.5625rem;
-  top: 0.125rem;
-  left: -0.0625rem;
+.tabulator-sortable[aria-sort=none]:hover .tabulator-col-sorter {
+  opacity: 1;
 }
-[aria-sort=desc] .tabulator-arrow {
-  top: 0.625rem;
+.tabulator-sortable[aria-sort=none]:hover .tabulator-col-sorter .tabulator-arrow {
+  animation: indicate-sortable-unsorted-column 2s ease forwards;
 }
-[aria-sort=desc] .tabulator-arrow:before {
-  top: -0.75rem;
+
+.tabulator-arrow {
+  transition: border 0.2s ease;
+  border-left: 0.25rem solid transparent !important;
+  border-right: 0.25rem solid transparent !important;
+}
+.tabulator#tabulator-table .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-arrow {
+  height: 0.75rem;
+  border-top-width: 0.25rem;
+  border-top-style: solid;
+  border-top-color: rgb(var(--table-arrow-color));
+  border-bottom-width: 0.25rem;
+  border-bottom-style: solid;
+  border-bottom-color: rgb(var(--table-arrow-color));
+}
+.tabulator#tabulator-table .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=desc] .tabulator-arrow {
+  height: 0;
+  transform: translate3d(0, 0.2rem, 0);
+  border-top-width: 0.25rem;
+  border-bottom-width: 0;
+  border-top-color: var(--table-arrow-color--active);
 }
-[aria-sort=desc] .tabulator-arrow:after {
-  top: -0.6875rem;
+.tabulator#tabulator-table .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=asc] .tabulator-arrow {
+  height: 0;
+  transform: translate3d(0, -0.2rem, 0);
+  border-top-width: 0;
+  border-bottom-width: 0.25rem;
+  border-bottom-color: var(--table-arrow-color--active);
 }
 
-@keyframes indicate-sortable-column {
+@keyframes indicate-sortable-sorted-column {
   0%, 100% {
     transform: translate3d(0, 0, 0);
   }
@@ -1146,10 +1166,27 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
     transform: translate3d(0, 0.0875rem, 0);
   }
 }
-.tabulator-col.tabulator-sortable:hover .tabulator-arrow {
-  animation: indicate-sortable-column 0.5s ease;
+@keyframes indicate-sortable-unsorted-column {
+  0%, 15%, 45%, 75% {
+    border-top-color: transparent;
+    border-bottom-color: transparent;
+    transform: translate3d(0, 0, 0);
+  }
+  30% {
+    border-top-color: transparent;
+    border-bottom-color: var(--table-arrow-color--active);
+    transform: translate3d(0, -0.3125rem, 0);
+  }
+  60% {
+    border-top-color: var(--table-arrow-color--active);
+    border-bottom-color: transparent;
+    transform: translate3d(0, 0.3125rem, 0);
+  }
+  100% {
+    border-top-color: rgb(var(--table-arrow-color));
+    border-bottom-color: rgb(var(--table-arrow-color));
+  }
 }
-
 /*
  * This file is imported into every component!
  *
@@ -1307,9 +1344,6 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
 :host(.has-low-density) .tabulator-header {
   border-radius: 0.375rem;
 }
-:host(.has-low-density) .tabulator-header .tabulator-col-content {
-  padding-left: 0.5rem;
-}
 :host(.has-low-density) .tabulator-footer {
   border-radius: 0.5rem;
 }
@@ -1327,8 +1361,6 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
 }
 :host(.has-low-density) .tabulator-row:not(.tabulator-calcs-bottom) .tabulator-cell {
   height: 2.75rem !important;
-  padding-left: 0.75rem;
-  padding-right: 0.5rem;
 }
 :host(.has-low-density) .tabulator-row:not(.tabulator-calcs-bottom) .tabulator-cell:first-child {
   border-radius: 0.5rem 0 0 0.5rem;
@@ -1373,6 +1405,7 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
   display: flex;
   align-items: center;
   margin-right: 1.25rem;
+  gap: 0.25rem;
 }
 
 .title-component-text {
@@ -1465,12 +1498,6 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
   align-items: center;
   justify-content: center;
 }
-.select-all limel-checkbox {
-  transform: translate(-0.25rem, 0);
-}
-:host(.has-low-density) .select-all limel-checkbox {
-  transform: translate(-0.15rem, 0);
-}
 
 .limel-table--row-selector {
   position: sticky !important;
@@ -1478,6 +1505,8 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
   border-width: 0;
   justify-content: center;
   z-index: 1;
+  padding-right: 0 !important;
+  padding-left: 0 !important;
 }
 .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));
@@ -1496,7 +1525,6 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
   transition: opacity 0.2s ease;
   align-self: center;
   opacity: 0.3;
-  transform: translate(-0.25rem, 0);
 }
 .tabulator-row:hover .limel-table--row-selector limel-checkbox {
   opacity: 1;