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

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;

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

@@ -1,21 +1,27 @@
-import { Component, h, Prop, Element, Watch, Event, } from '@stencil/core';
+import { Component, h, Prop, Element, Watch, Event, Host, } from '@stencil/core';
 import TabulatorTable from 'tabulator-tables';
 import { ColumnDefinitionFactory, createColumnSorter } from './columns';
 import { isEqual, has } from 'lodash-es';
 import { ElementPool } from './element-pool';
 import { TableSelection } from './table-selection';
+import { mapLayout } from './layout';
 const FIRST_PAGE = 1;
 /**
  * @exampleComponent limel-example-table
  * @exampleComponent limel-example-table-custom-components
  * @exampleComponent limel-example-table-header-menu
  * @exampleComponent limel-example-table-movable-columns
+ * @exampleComponent limel-example-table-sorting-disabled
  * @exampleComponent limel-example-table-local
  * @exampleComponent limel-example-table-remote
  * @exampleComponent limel-example-table-activate-row
  * @exampleComponent limel-example-table-selectable-rows
  * @exampleComponent limel-example-table-default-sorted
- * @exampleComponent limel-example-table-low-density
+ * @exampleComponent limel-example-table-layout-default
+ * @exampleComponent limel-example-table-layout-stretch-last-column
+ * @exampleComponent limel-example-table-layout-stretch-columns
+ * @exampleComponent limel-example-table-layout-low-density
+ * @exampleComponent limel-example-table-interactive-rows
  */
 export class Table {
   constructor() {
@@ -254,7 +260,7 @@ export class Table {
     const ajaxOptions = this.getAjaxOptions();
     const paginationOptions = this.getPaginationOptions();
     const columnOptions = this.getColumnOptions();
-    return Object.assign(Object.assign(Object.assign(Object.assign({ data: this.data, layout: 'fitDataFill', columns: this.getColumnDefinitions(), dataSorting: this.handleDataSorting, pageLoaded: this.handlePageLoaded }, ajaxOptions), paginationOptions), { rowClick: this.onClickRow, rowFormatter: this.formatRow, initialSort: this.getColumnSorter(), nestedFieldSeparator: false }), columnOptions);
+    return Object.assign(Object.assign(Object.assign(Object.assign({ data: this.data, layout: mapLayout(this.layout), columns: this.getColumnDefinitions(), dataSorting: this.handleDataSorting, pageLoaded: this.handlePageLoaded }, ajaxOptions), paginationOptions), { rowClick: this.onClickRow, rowFormatter: this.formatRow, initialSort: this.getColumnSorter(), nestedFieldSeparator: false }), columnOptions);
   }
   getColumnSorter() {
     var _a;
@@ -433,18 +439,21 @@ export class Table {
   }
   render() {
     var _a;
-    return (h("div", { id: "tabulator-container", class: {
-        'has-pagination': this.totalRows > this.pageSize,
-        'has-aggregation': this.hasAggregation(this.columns),
-        'has-movable-columns': this.movableColumns,
-        'has-rowselector': this.selectable,
-        'has-selection': (_a = this.tableSelection) === null || _a === void 0 ? void 0 : _a.hasSelection,
+    return (h(Host, { class: {
+        'has-low-density': this.layout === 'lowDensity',
       } },
-      h("div", { id: "tabulator-loader", style: { display: this.loading ? 'flex' : 'none' } },
-        h("limel-spinner", { size: "large" })),
-      this.renderEmptyMessage(),
-      this.renderSelectAll(),
-      h("div", { id: "tabulator-table" })));
+      h("div", { id: "tabulator-container", class: {
+          'has-pagination': this.totalRows > this.pageSize,
+          'has-aggregation': this.hasAggregation(this.columns),
+          'has-movable-columns': this.movableColumns,
+          'has-rowselector': this.selectable,
+          'has-selection': (_a = this.tableSelection) === null || _a === void 0 ? void 0 : _a.hasSelection,
+        } },
+        h("div", { id: "tabulator-loader", style: { display: this.loading ? 'flex' : 'none' } },
+          h("limel-spinner", { size: "large" })),
+        this.renderEmptyMessage(),
+        this.renderSelectAll(),
+        h("div", { id: "tabulator-table" }))));
   }
   renderSelectAll() {
     var _a, _b, _c;
@@ -453,7 +462,7 @@ export class Table {
     }
     const showSelectAll = !this.loading && this.tableSelection;
     return (h("div", { class: "select-all", style: { display: showSelectAll ? 'inline-block' : 'none' } },
-      h("limel-checkbox", { onChange: this.selectAllOnChange, disabled: !this.totalRows, checked: (_a = this.tableSelection) === null || _a === void 0 ? void 0 : _a.hasSelection, indeterminate: ((_b = this.tableSelection) === null || _b === void 0 ? void 0 : _b.hasSelection) &&
+      h("limel-checkbox", { onChange: this.selectAllOnChange, disabled: !this.data.length, checked: (_a = this.tableSelection) === null || _a === void 0 ? void 0 : _a.hasSelection, indeterminate: ((_b = this.tableSelection) === null || _b === void 0 ? void 0 : _b.hasSelection) &&
           ((_c = this.selection) === null || _c === void 0 ? void 0 : _c.length) < this.data.length })));
   }
   renderEmptyMessage() {
@@ -525,6 +534,28 @@ export class Table {
       "reflect": false,
       "defaultValue": "'local'"
     },
+    "layout": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Layout",
+        "resolved": "\"default\" | \"lowDensity\" | \"stretchColumns\" | \"stretchLastColumn\"",
+        "references": {
+          "Layout": {
+            "location": "import",
+            "path": "./layout"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Defines the layout of the table, based on how width of the columns are calculated.\n\n- `default`: makes columns as wide as their contents.\n- `stretchLastColumn`: makes columns as wide as their contents, stretch the last column to fill up the remaining table width.\n- `stretchColumns`: stretches all columns to fill the available width when possible.\n- `lowDensity`: makes columns as wide as their contents, and creates a low density and airy layout."
+      },
+      "attribute": "layout",
+      "reflect": false
+    },
     "pageSize": {
       "type": "number",
       "mutable": false,

package/dist/collection/style/internal/codemirror-tooltip.scss

@@ -0,0 +1,19 @@
+.CodeMirror-lint-tooltip.cm-s-lime {
+    position: fixed;
+    z-index: var(--tooltip-z-index, var(--dropdown-z-index, 130));
+    transition: opacity 0.4s ease 0s;
+    opacity: 0;
+
+    color: var(--mdc-theme-text-primary-on-background);
+    background-color: var(--mdc-theme-on-primary);
+
+    font-family: monospace;
+    font-size: 0.875rem; // 14px, like the default code editor's font size
+    white-space: pre-wrap;
+    // overflow: hidden; // Why `hidden`?
+
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.5rem;
+    max-width: 40rem;
+    box-shadow: var(--shadow-depth-64);
+}

package/dist/collection/style/mixins.scss

@@ -1,5 +1,16 @@
 @use './functions';
 
+@mixin visualize-keyboard-focus {
+    &:focus {
+        outline: none;
+    }
+
+    &:focus-visible {
+        outline: none;
+        box-shadow: var(--shadow-depth-8-focused);
+    }
+}
+
 @mixin in($media) {
     @if $media == dark-mode {
         @media (prefers-color-scheme: dark) {

package/dist/esm/{dateFormatter-2cad0292.js → dateFormatter-784c3334.js}

@@ -1,5 +1,5 @@
 import { c as createCommonjsModule, b as commonjsRequire, a as commonjsGlobal } from './_commonjsHelpers-5ec8f9b7.js';
-import { m as moment } from './moment-367e51c5.js';
+import { m as moment } from './moment-faa8a4a8.js';
 
 createCommonjsModule(function (module, exports) {
 (function (global, factory) {