@design.estate/dees-catalog 3.62.0 → 3.63.0

package/dist_ts_web/elements/00group-dataview/dees-table/styles.js

@@ -113,29 +113,48 @@ export const tableStyles = [
         border-bottom-width: 0px;
       }
 
+      /* Default mode (Mode B, page sticky): horizontal scroll lives on
+         .tableScroll (so wide tables don't get clipped by an ancestor
+         overflow:hidden such as dees-tile). Vertical sticky is handled by
+         a JS-managed floating header (.floatingHeader, position:fixed),
+         which is unaffected by ancestor overflow. */
       .tableScroll {
-        /* enable horizontal scroll only when content exceeds width */
+        position: relative;
         overflow-x: auto;
-        /* prevent vertical scroll inside the table container */
-        overflow-y: hidden;
-        /* avoid reserving extra space for classic scrollbars where possible */
+        overflow-y: visible;
+        scrollbar-gutter: stable;
+      }
+      /* Mode A, internal scroll: opt-in via fixed-height attribute.
+         The table scrolls inside its own box and the header sticks via plain CSS sticky. */
+      :host([fixed-height]) .tableScroll {
+        max-height: var(--table-max-height, 360px);
+        overflow: auto;
         scrollbar-gutter: stable both-edges;
       }
-      /* Hide horizontal scrollbar entirely when not using sticky header */
-      :host(:not([sticky-header])) .tableScroll {
-        -ms-overflow-style: none; /* IE/Edge */
-        scrollbar-width: none;   /* Firefox (hides both axes) */
+      :host([fixed-height]) .tableScroll::-webkit-scrollbar:horizontal {
+        height: 0px;
+      }
+
+      /* Floating header overlay (Mode B). Position is managed by JS so it
+         escapes any ancestor overflow:hidden (position:fixed is not clipped
+         by overflow ancestors). */
+      .floatingHeader {
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 100;
+        visibility: hidden;
+        overflow: hidden;
+        pointer-events: none;
       }
-      :host(:not([sticky-header])) .tableScroll::-webkit-scrollbar {
-        display: none; /* Chrome/Safari */
+      .floatingHeader.active {
+        visibility: visible;
       }
-      /* In sticky-header mode, hide only the horizontal scrollbar in WebKit/Blink */
-      :host([sticky-header]) .tableScroll::-webkit-scrollbar:horizontal {
-        height: 0px;
+      .floatingHeader table {
+        margin: 0;
       }
-      :host([sticky-header]) .tableScroll {
-        max-height: var(--table-max-height, 360px);
-        overflow: auto;
+      .floatingHeader th {
+        pointer-events: auto;
       }
 
       table {
@@ -158,11 +177,20 @@ export const tableStyles = [
         background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 9%)')};
         border-bottom: 1px solid var(--dees-color-border-strong);
       }
-      :host([sticky-header]) thead th {
+      /* th needs its own background so sticky cells paint over scrolled rows
+         (browsers don't paint the <thead> box behind a sticky <th>). */
+      th {
+        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 9%)')};
+      }
+      /* Mode A — internal scroll sticky */
+      :host([fixed-height]) thead th {
         position: sticky;
         top: 0;
         z-index: 2;
       }
+      :host([fixed-height]) thead tr.filtersRow th {
+        top: 36px; /* matches th { height: 36px } below */
+      }
       
       tbody tr {
         transition: background-color 0.15s ease;
@@ -462,4 +490,4 @@ export const tableStyles = [
       }
   `,
 ];
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3R5bGVzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vdHNfd2ViL2VsZW1lbnRzLzAwZ3JvdXAtZGF0YXZpZXcvZGVlcy10YWJsZS9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFVBQVUsRUFBRSxHQUFHLEVBQWtCLE1BQU0sNkJBQTZCLENBQUM7QUFDOUUsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFDdEQsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFFdEQsTUFBTSxDQUFDLE1BQU0sV0FBVyxHQUFnQjtJQUN0QyxrQkFBa0I7SUFDbEIsVUFBVSxDQUFDLGFBQWE7SUFDeEIsR0FBRyxDQUFBOzs7Ozs7Ozs7dUJBU2tCLGtCQUFrQjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O2lCQWlDeEIsVUFBVSxDQUFDLE9BQU8sQ0FBQyx3QkFBd0IsRUFBRSxzQkFBc0IsQ0FBQzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O2lCQXlHcEUsVUFBVSxDQUFDLE9BQU8sQ0FBQyx3QkFBd0IsRUFBRSxzQkFBc0IsQ0FBQzs7OztzQkFJL0QsVUFBVSxDQUFDLE9BQU8sQ0FBQyxvQkFBb0IsRUFBRSxjQUFjLENBQUM7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O3NCQXNDeEQsVUFBVSxDQUFDLE9BQU8sQ0FBQywrQkFBK0IsRUFBRSwrQkFBK0IsQ0FBQzs7Ozs7Ozs7Ozs7Ozs7O3NCQWVwRixVQUFVLENBQUMsT0FBTyxDQUFDLCtCQUErQixFQUFFLCtCQUErQixDQUFDOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7c0JBbURwRixVQUFVLENBQUMsT0FBTyxDQUFDLDhCQUE4QixFQUFFLCtCQUErQixDQUFDOzs7O3NCQUluRixVQUFVLENBQUMsT0FBTyxDQUFDLDhCQUE4QixFQUFFLDhCQUE4QixDQUFDOzs7Ozs7Ozs7aUJBU3ZGLFVBQVUsQ0FBQyxPQUFPLENBQUMsd0JBQXdCLEVBQUUsc0JBQXNCLENBQUM7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztpQkF3QnBFLFVBQVUsQ0FBQyxPQUFPLENBQUMsc0JBQXNCLEVBQUUsc0JBQXNCLENBQUM7c0JBQzdELFVBQVUsQ0FBQyxPQUFPLENBQUMsK0JBQStCLEVBQUUsK0JBQStCLENBQUM7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztzQkF5RHBGLFVBQVUsQ0FBQyxPQUFPLENBQUMsZ0JBQWdCLEVBQUUsY0FBYyxDQUFDOzs7Ozs7Ozs7O3dCQVVsRCxVQUFVLENBQUMsT0FBTyxDQUFDLHdCQUF3QixFQUFFLHdCQUF3QixDQUFDOzs7Z0NBRzlELFVBQVUsQ0FBQyxPQUFPLENBQUMsOEJBQThCLEVBQUUsOEJBQThCLENBQUM7Ozs7Ozs7Ozs7Ozs7O3NCQWM1RixVQUFVLENBQUMsT0FBTyxDQUFDLGdCQUFnQixFQUFFLGNBQWMsQ0FBQzs7Ozs7Ozs7Ozs7Ozs7OztpQkFnQnpELFVBQVUsQ0FBQyxPQUFPLENBQUMsd0JBQXdCLEVBQUUsc0JBQXNCLENBQUM7Ozs7OztzQkFNL0QsVUFBVSxDQUFDLE9BQU8sQ0FBQyxvQkFBb0IsRUFBRSxpQkFBaUIsQ0FBQztpQkFDaEUsVUFBVSxDQUFDLE9BQU8sQ0FBQyxjQUFjLEVBQUUsZUFBZSxDQUFDOzs7O3NCQUk5QyxVQUFVLENBQUMsT0FBTyxDQUFDLG9CQUFvQixFQUFFLGlCQUFpQixDQUFDOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7aUJBb0NoRSxVQUFVLENBQUMsT0FBTyxDQUFDLHdCQUF3QixFQUFFLHNCQUFzQixDQUFDOzs7Ozs7OztzQkFRL0QsVUFBVSxDQUFDLE9BQU8sQ0FBQyxpQkFBaUIsRUFBRSxpQkFBaUIsQ0FBQztpQkFDN0QsVUFBVSxDQUFDLE9BQU8sQ0FBQyxjQUFjLEVBQUUsZUFBZSxDQUFDOzs7Ozs7O0dBT2pFO0NBQ0YsQ0FBQyJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3R5bGVzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vdHNfd2ViL2VsZW1lbnRzLzAwZ3JvdXAtZGF0YXZpZXcvZGVlcy10YWJsZS9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFVBQVUsRUFBRSxHQUFHLEVBQWtCLE1BQU0sNkJBQTZCLENBQUM7QUFDOUUsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFDdEQsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFFdEQsTUFBTSxDQUFDLE1BQU0sV0FBVyxHQUFnQjtJQUN0QyxrQkFBa0I7SUFDbEIsVUFBVSxDQUFDLGFBQWE7SUFDeEIsR0FBRyxDQUFBOzs7Ozs7Ozs7dUJBU2tCLGtCQUFrQjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O2lCQWlDeEIsVUFBVSxDQUFDLE9BQU8sQ0FBQyx3QkFBd0IsRUFBRSxzQkFBc0IsQ0FBQzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztpQkE0SHBFLFVBQVUsQ0FBQyxPQUFPLENBQUMsd0JBQXdCLEVBQUUsc0JBQXNCLENBQUM7Ozs7c0JBSS9ELFVBQVUsQ0FBQyxPQUFPLENBQUMsb0JBQW9CLEVBQUUsY0FBYyxDQUFDOzs7Ozs7c0JBTXhELFVBQVUsQ0FBQyxPQUFPLENBQUMsb0JBQW9CLEVBQUUsY0FBYyxDQUFDOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztzQkF5Q3hELFVBQVUsQ0FBQyxPQUFPLENBQUMsK0JBQStCLEVBQUUsK0JBQStCLENBQUM7Ozs7Ozs7Ozs7Ozs7OztzQkFlcEYsVUFBVSxDQUFDLE9BQU8sQ0FBQywrQkFBK0IsRUFBRSwrQkFBK0IsQ0FBQzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O3NCQW1EcEYsVUFBVSxDQUFDLE9BQU8sQ0FBQyw4QkFBOEIsRUFBRSwrQkFBK0IsQ0FBQzs7OztzQkFJbkYsVUFBVSxDQUFDLE9BQU8sQ0FBQyw4QkFBOEIsRUFBRSw4QkFBOEIsQ0FBQzs7Ozs7Ozs7O2lCQVN2RixVQUFVLENBQUMsT0FBTyxDQUFDLHdCQUF3QixFQUFFLHNCQUFzQixDQUFDOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7aUJBd0JwRSxVQUFVLENBQUMsT0FBTyxDQUFDLHNCQUFzQixFQUFFLHNCQUFzQixDQUFDO3NCQUM3RCxVQUFVLENBQUMsT0FBTyxDQUFDLCtCQUErQixFQUFFLCtCQUErQixDQUFDOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7c0JBeURwRixVQUFVLENBQUMsT0FBTyxDQUFDLGdCQUFnQixFQUFFLGNBQWMsQ0FBQzs7Ozs7Ozs7Ozt3QkFVbEQsVUFBVSxDQUFDLE9BQU8sQ0FBQyx3QkFBd0IsRUFBRSx3QkFBd0IsQ0FBQzs7O2dDQUc5RCxVQUFVLENBQUMsT0FBTyxDQUFDLDhCQUE4QixFQUFFLDhCQUE4QixDQUFDOzs7Ozs7Ozs7Ozs7OztzQkFjNUYsVUFBVSxDQUFDLE9BQU8sQ0FBQyxnQkFBZ0IsRUFBRSxjQUFjLENBQUM7Ozs7Ozs7Ozs7Ozs7Ozs7aUJBZ0J6RCxVQUFVLENBQUMsT0FBTyxDQUFDLHdCQUF3QixFQUFFLHNCQUFzQixDQUFDOzs7Ozs7c0JBTS9ELFVBQVUsQ0FBQyxPQUFPLENBQUMsb0JBQW9CLEVBQUUsaUJBQWlCLENBQUM7aUJBQ2hFLFVBQVUsQ0FBQyxPQUFPLENBQUMsY0FBYyxFQUFFLGVBQWUsQ0FBQzs7OztzQkFJOUMsVUFBVSxDQUFDLE9BQU8sQ0FBQyxvQkFBb0IsRUFBRSxpQkFBaUIsQ0FBQzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O2lCQW9DaEUsVUFBVSxDQUFDLE9BQU8sQ0FBQyx3QkFBd0IsRUFBRSxzQkFBc0IsQ0FBQzs7Ozs7Ozs7c0JBUS9ELFVBQVUsQ0FBQyxPQUFPLENBQUMsaUJBQWlCLEVBQUUsaUJBQWlCLENBQUM7aUJBQzdELFVBQVUsQ0FBQyxPQUFPLENBQUMsY0FBYyxFQUFFLGVBQWUsQ0FBQzs7Ozs7OztHQU9qRTtDQUNGLENBQUMifQ==

package/dist_watch/bundle.js

@@ -169260,29 +169260,48 @@ var tableStyles = [
         border-bottom-width: 0px;
       }
 
+      /* Default mode (Mode B, page sticky): horizontal scroll lives on
+         .tableScroll (so wide tables don't get clipped by an ancestor
+         overflow:hidden such as dees-tile). Vertical sticky is handled by
+         a JS-managed floating header (.floatingHeader, position:fixed),
+         which is unaffected by ancestor overflow. */
       .tableScroll {
-        /* enable horizontal scroll only when content exceeds width */
+        position: relative;
         overflow-x: auto;
-        /* prevent vertical scroll inside the table container */
-        overflow-y: hidden;
-        /* avoid reserving extra space for classic scrollbars where possible */
+        overflow-y: visible;
+        scrollbar-gutter: stable;
+      }
+      /* Mode A, internal scroll: opt-in via fixed-height attribute.
+         The table scrolls inside its own box and the header sticks via plain CSS sticky. */
+      :host([fixed-height]) .tableScroll {
+        max-height: var(--table-max-height, 360px);
+        overflow: auto;
         scrollbar-gutter: stable both-edges;
       }
-      /* Hide horizontal scrollbar entirely when not using sticky header */
-      :host(:not([sticky-header])) .tableScroll {
-        -ms-overflow-style: none; /* IE/Edge */
-        scrollbar-width: none;   /* Firefox (hides both axes) */
+      :host([fixed-height]) .tableScroll::-webkit-scrollbar:horizontal {
+        height: 0px;
       }
-      :host(:not([sticky-header])) .tableScroll::-webkit-scrollbar {
-        display: none; /* Chrome/Safari */
+
+      /* Floating header overlay (Mode B). Position is managed by JS so it
+         escapes any ancestor overflow:hidden (position:fixed is not clipped
+         by overflow ancestors). */
+      .floatingHeader {
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 100;
+        visibility: hidden;
+        overflow: hidden;
+        pointer-events: none;
       }
-      /* In sticky-header mode, hide only the horizontal scrollbar in WebKit/Blink */
-      :host([sticky-header]) .tableScroll::-webkit-scrollbar:horizontal {
-        height: 0px;
+      .floatingHeader.active {
+        visibility: visible;
       }
-      :host([sticky-header]) .tableScroll {
-        max-height: var(--table-max-height, 360px);
-        overflow: auto;
+      .floatingHeader table {
+        margin: 0;
+      }
+      .floatingHeader th {
+        pointer-events: auto;
       }
 
       table {
@@ -169305,11 +169324,20 @@ var tableStyles = [
         background: ${cssManager.bdTheme("hsl(210 40% 96.1%)", "hsl(0 0% 9%)")};
         border-bottom: 1px solid var(--dees-color-border-strong);
       }
-      :host([sticky-header]) thead th {
+      /* th needs its own background so sticky cells paint over scrolled rows
+         (browsers don't paint the <thead> box behind a sticky <th>). */
+      th {
+        background: ${cssManager.bdTheme("hsl(210 40% 96.1%)", "hsl(0 0% 9%)")};
+      }
+      /* Mode A — internal scroll sticky */
+      :host([fixed-height]) thead th {
         position: sticky;
         top: 0;
         z-index: 2;
       }
+      :host([fixed-height]) thead tr.filtersRow th {
+        top: 36px; /* matches th { height: 36px } below */
+      }
       
       tbody tr {
         transition: background-color 0.15s ease;
@@ -169867,7 +169895,7 @@ __name(compileLucenePredicate, "compileLucenePredicate");
 init_dist_ts30();
 init_dist_ts29();
 init_theme();
-var _selectedIds_dec, _selectionMode_dec, _searchMode_dec, _stickyHeader_dec, _showColumnFilters_dec, _columnFilters_dec, _filterText_dec, _sortBy_dec, _showGrid_dec, _showHorizontalLines_dec, _showVerticalLines_dec, _editableFields_dec, _selectedDataRow_dec, _reverseDisplayFunction_dec, _displayFunction_dec, _augmentFromDisplayFunction_dec, _rowKey_dec, _columns_dec, _dataActions_dec, _searchable_dec, _dataName_dec, _required_dec3, _disabled_dec3, _label_dec3, _key_dec2, _data_dec, _heading2_dec, _heading1_dec, _a42, _DeesTable_decorators, _init39, _heading1, _heading22, _data, _key2, _label3, _disabled3, _required3, _dataName, _searchable, _dataActions, _columns, _rowKey, _augmentFromDisplayFunction, _displayFunction, _reverseDisplayFunction, _selectedDataRow, _editableFields, _showVerticalLines, _showHorizontalLines, _showGrid, _sortBy, _filterText, _columnFilters, _showColumnFilters, _stickyHeader, _searchMode, _selectionMode, _selectedIds;
+var _selectedIds_dec, _selectionMode_dec, _searchMode_dec, _fixedHeight_dec, _showColumnFilters_dec, _columnFilters_dec, _filterText_dec, _sortBy_dec, _showGrid_dec, _showHorizontalLines_dec, _showVerticalLines_dec, _editableFields_dec, _selectedDataRow_dec, _reverseDisplayFunction_dec, _displayFunction_dec, _augmentFromDisplayFunction_dec, _rowKey_dec, _columns_dec, _dataActions_dec, _searchable_dec, _dataName_dec, _required_dec3, _disabled_dec3, _label_dec3, _key_dec2, _data_dec, _heading2_dec, _heading1_dec, _a42, _DeesTable_decorators, _init39, _heading1, _heading22, _data, _key2, _label3, _disabled3, _required3, _dataName, _searchable, _dataActions, _columns, _rowKey, _augmentFromDisplayFunction, _displayFunction, _reverseDisplayFunction, _selectedDataRow, _editableFields, _showVerticalLines, _showHorizontalLines, _showGrid, _sortBy, _filterText, _columnFilters, _showColumnFilters, _fixedHeight, _searchMode, _selectionMode, _selectedIds;
 function ordinalLabel(n12) {
   const s10 = ["th", "st", "nd", "rd"];
   const v5 = n12 % 100;
@@ -169916,7 +169944,7 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
   type: Boolean,
   reflect: true,
   attribute: "show-grid"
-})], _sortBy_dec = [n5({ attribute: false })], _filterText_dec = [n5({ type: String })], _columnFilters_dec = [n5({ attribute: false })], _showColumnFilters_dec = [n5({ type: Boolean, attribute: "show-column-filters" })], _stickyHeader_dec = [n5({ type: Boolean, reflect: true, attribute: "sticky-header" })], _searchMode_dec = [n5({ type: String })], _selectionMode_dec = [n5({ type: String })], _selectedIds_dec = [n5({ attribute: false })], _a42) {
+})], _sortBy_dec = [n5({ attribute: false })], _filterText_dec = [n5({ type: String })], _columnFilters_dec = [n5({ attribute: false })], _showColumnFilters_dec = [n5({ type: Boolean, attribute: "show-column-filters" })], _fixedHeight_dec = [n5({ type: Boolean, reflect: true, attribute: "fixed-height" })], _searchMode_dec = [n5({ type: String })], _selectionMode_dec = [n5({ type: String })], _selectedIds_dec = [n5({ attribute: false })], _a42) {
   constructor() {
     super();
     __privateAdd(this, _heading1, __runInitializers(_init39, 8, this, "heading 1")), __runInitializers(_init39, 11, this);
@@ -169947,7 +169975,7 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
     __privateAdd(this, _filterText, __runInitializers(_init39, 92, this, "")), __runInitializers(_init39, 95, this);
     __privateAdd(this, _columnFilters, __runInitializers(_init39, 96, this, {})), __runInitializers(_init39, 99, this);
     __privateAdd(this, _showColumnFilters, __runInitializers(_init39, 100, this, false)), __runInitializers(_init39, 103, this);
-    __privateAdd(this, _stickyHeader, __runInitializers(_init39, 104, this, false)), __runInitializers(_init39, 107, this);
+    __privateAdd(this, _fixedHeight, __runInitializers(_init39, 104, this, false)), __runInitializers(_init39, 107, this);
     __privateAdd(this, _searchMode, __runInitializers(_init39, 108, this, "table")), __runInitializers(_init39, 111, this);
     __publicField(this, "__searchTextSub");
     __publicField(this, "__searchModeSub");
@@ -169955,6 +169983,11 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
     __privateAdd(this, _selectedIds, __runInitializers(_init39, 116, this, /* @__PURE__ */ new Set())), __runInitializers(_init39, 119, this);
     __publicField(this, "_rowIdMap", /* @__PURE__ */ new WeakMap());
     __publicField(this, "_rowIdCounter", 0);
+    // ─── Floating header (page-sticky) lifecycle ─────────────────────────
+    __publicField(this, "__floatingResizeObserver");
+    __publicField(this, "__floatingScrollHandler");
+    __publicField(this, "__floatingActive", false);
+    __publicField(this, "__scrollAncestors", []);
     __publicField(this, "__debounceTimer");
   }
   get value() {
@@ -170045,58 +170078,7 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
               <div class="tableScroll">
               <table>
                 <thead>
-                  <tr>
-                    ${this.selectionMode !== "none" ? b2`
-                          <th style="width:42px; text-align:center;">
-                            ${this.selectionMode === "multi" ? b2`
-                                  <dees-input-checkbox
-                                    .value=${this.areAllVisibleSelected()}
-                                    .indeterminate=${this.isVisibleSelectionIndeterminate()}
-                                    @newValue=${(e11) => {
-      e11.stopPropagation();
-      this.setSelectVisible(e11.detail === true);
-    }}
-                                  ></dees-input-checkbox>
-                                ` : b2``}
-                          </th>
-                        ` : b2``}
-                    ${effectiveColumns.filter((c11) => !c11.hidden).map((col) => {
-      const isSortable = !!col.sortable;
-      const ariaSort = this.getAriaSort(col);
-      return b2`
-                          <th
-                            role="columnheader"
-                            aria-sort=${ariaSort}
-                            style="${isSortable ? "cursor: pointer;" : ""}"
-                            @click=${(eventArg) => isSortable ? this.handleHeaderClick(eventArg, col, effectiveColumns) : null}
-                            @contextmenu=${(eventArg) => isSortable ? this.openHeaderContextMenu(eventArg, col, effectiveColumns) : null}
-                          >
-                            ${col.header ?? col.key}
-                            ${this.renderSortIndicator(col)}
-                          </th>`;
-    })}
-                    ${(() => {
-      if (this.dataActions && this.dataActions.length > 0) {
-        return b2` <th class="actionsCol">Actions</th> `;
-      }
-    })()}
-                  </tr>
-                  ${this.showColumnFilters ? b2`<tr class="filtersRow">
-                        ${this.selectionMode !== "none" ? b2`<th style="width:42px;"></th>` : b2``}
-                        ${effectiveColumns.filter((c11) => !c11.hidden).map((col) => {
-      const key2 = String(col.key);
-      if (col.filterable === false) return b2`<th></th>`;
-      return b2`<th>
-                              <input type="text" placeholder="Filter..." .value=${this.columnFilters[key2] || ""}
-                                @input=${(e11) => this.setColumnFilter(key2, e11.target.value)} />
-                            </th>`;
-    })}
-                        ${(() => {
-      if (this.dataActions && this.dataActions.length > 0) {
-        return b2` <th></th> `;
-      }
-    })()}
-                      </tr>` : b2``}
+                  ${this.renderHeaderRows(effectiveColumns)}
                 </thead>
                 <tbody>
                   ${viewData.map((itemArg, rowIndex) => {
@@ -170230,6 +170212,13 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
                 </tbody>
               </table>
               </div>
+              <div class="floatingHeader" aria-hidden="true">
+                <table>
+                  <thead>
+                    ${this.renderHeaderRows(effectiveColumns)}
+                  </thead>
+                </table>
+              </div>
             ` : b2` <div class="noDataSet">No data set!</div> `}
         <div slot="footer" class="footer">
           <div class="tableStatistics">
@@ -170264,11 +170253,226 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
       </dees-tile>
     `;
   }
+  /**
+   * Renders the header rows. Used twice per render: once inside the real
+   * `<thead>` and once inside the floating-header clone, so sort indicators
+   * and filter inputs stay in sync automatically.
+   */
+  renderHeaderRows(effectiveColumns) {
+    return b2`
+      <tr>
+        ${this.selectionMode !== "none" ? b2`
+              <th style="width:42px; text-align:center;">
+                ${this.selectionMode === "multi" ? b2`
+                      <dees-input-checkbox
+                        .value=${this.areAllVisibleSelected()}
+                        .indeterminate=${this.isVisibleSelectionIndeterminate()}
+                        @newValue=${(e11) => {
+      e11.stopPropagation();
+      this.setSelectVisible(e11.detail === true);
+    }}
+                      ></dees-input-checkbox>
+                    ` : b2``}
+              </th>
+            ` : b2``}
+        ${effectiveColumns.filter((c11) => !c11.hidden).map((col) => {
+      const isSortable = !!col.sortable;
+      const ariaSort = this.getAriaSort(col);
+      return b2`
+              <th
+                role="columnheader"
+                aria-sort=${ariaSort}
+                style="${isSortable ? "cursor: pointer;" : ""}"
+                @click=${(eventArg) => isSortable ? this.handleHeaderClick(eventArg, col, effectiveColumns) : null}
+                @contextmenu=${(eventArg) => isSortable ? this.openHeaderContextMenu(eventArg, col, effectiveColumns) : null}
+              >
+                ${col.header ?? col.key}
+                ${this.renderSortIndicator(col)}
+              </th>`;
+    })}
+        ${this.dataActions && this.dataActions.length > 0 ? b2`<th class="actionsCol">Actions</th>` : b2``}
+      </tr>
+      ${this.showColumnFilters ? b2`<tr class="filtersRow">
+            ${this.selectionMode !== "none" ? b2`<th style="width:42px;"></th>` : b2``}
+            ${effectiveColumns.filter((c11) => !c11.hidden).map((col) => {
+      const key2 = String(col.key);
+      if (col.filterable === false) return b2`<th></th>`;
+      return b2`<th>
+                  <input type="text" placeholder="Filter..." .value=${this.columnFilters[key2] || ""}
+                    @input=${(e11) => this.setColumnFilter(key2, e11.target.value)} />
+                </th>`;
+    })}
+            ${this.dataActions && this.dataActions.length > 0 ? b2`<th></th>` : b2``}
+          </tr>` : b2``}
+    `;
+  }
+  get __floatingHeaderEl() {
+    return this.shadowRoot?.querySelector(".floatingHeader") ?? null;
+  }
+  get __realTableEl() {
+    return this.shadowRoot?.querySelector(".tableScroll > table") ?? null;
+  }
+  get __floatingTableEl() {
+    return this.shadowRoot?.querySelector(".floatingHeader > table") ?? null;
+  }
+  /**
+   * Walks up the DOM (and through shadow roots) collecting every ancestor
+   * element whose computed `overflow-y` makes it a scroll container, plus
+   * `window` at the end. We listen for scroll on all of them so the floating
+   * header reacts whether the user scrolls the page or any nested container.
+   */
+  __collectScrollAncestors() {
+    const result = [];
+    let node2 = this;
+    const scrollish = /* @__PURE__ */ __name((v5) => v5 === "auto" || v5 === "scroll" || v5 === "overlay", "scrollish");
+    while (node2) {
+      if (node2 instanceof Element) {
+        const style2 = getComputedStyle(node2);
+        const sy = scrollish(style2.overflowY);
+        const sx = scrollish(style2.overflowX);
+        if (sy || sx) {
+          result.push({ target: node2, scrollsY: sy, scrollsX: sx });
+        }
+      }
+      const parent = node2.assignedSlot ? node2.assignedSlot : node2.parentNode;
+      if (parent) {
+        node2 = parent;
+      } else if (node2.host) {
+        node2 = node2.host;
+      } else {
+        node2 = null;
+      }
+    }
+    result.push({ target: window, scrollsY: true, scrollsX: true });
+    return result;
+  }
+  /**
+   * Returns the "stick line" — the y-coordinate (in viewport space) at which
+   * the floating header should appear. Defaults to 0 (page top), but if the
+   * table is inside a scroll container we use that container's content-box
+   * top so the header sits inside the container's border/padding instead of
+   * floating over it.
+   */
+  __getStickContext() {
+    let top = 0;
+    let left = 0;
+    let right = window.innerWidth;
+    for (const a5 of this.__scrollAncestors) {
+      if (a5.target === window) continue;
+      const el = a5.target;
+      const r11 = el.getBoundingClientRect();
+      const cs = getComputedStyle(el);
+      if (a5.scrollsY) {
+        const bt = parseFloat(cs.borderTopWidth) || 0;
+        top = Math.max(top, r11.top + bt);
+      }
+      if (a5.scrollsX) {
+        const bl = parseFloat(cs.borderLeftWidth) || 0;
+        const br = parseFloat(cs.borderRightWidth) || 0;
+        left = Math.max(left, r11.left + bl);
+        right = Math.min(right, r11.right - br);
+      }
+    }
+    return { top, left, right };
+  }
+  setupFloatingHeader() {
+    this.teardownFloatingHeader();
+    if (this.fixedHeight) return;
+    const realTable = this.__realTableEl;
+    if (!realTable) return;
+    this.__scrollAncestors = this.__collectScrollAncestors();
+    const tableScrollEl = this.shadowRoot?.querySelector(".tableScroll");
+    if (tableScrollEl) {
+      this.__scrollAncestors.unshift({ target: tableScrollEl, scrollsY: false, scrollsX: true });
+    }
+    this.__floatingResizeObserver = new ResizeObserver(() => {
+      this.__syncFloatingHeader();
+    });
+    this.__floatingResizeObserver.observe(realTable);
+    this.__floatingScrollHandler = () => this.__syncFloatingHeader();
+    for (const a5 of this.__scrollAncestors) {
+      a5.target.addEventListener("scroll", this.__floatingScrollHandler, { passive: true });
+    }
+    window.addEventListener("resize", this.__floatingScrollHandler, { passive: true });
+    this.__syncFloatingHeader();
+  }
+  teardownFloatingHeader() {
+    this.__floatingResizeObserver?.disconnect();
+    this.__floatingResizeObserver = void 0;
+    if (this.__floatingScrollHandler) {
+      for (const a5 of this.__scrollAncestors) {
+        a5.target.removeEventListener("scroll", this.__floatingScrollHandler);
+      }
+      window.removeEventListener("resize", this.__floatingScrollHandler);
+      this.__floatingScrollHandler = void 0;
+    }
+    this.__scrollAncestors = [];
+    this.__floatingActive = false;
+    const fh = this.__floatingHeaderEl;
+    if (fh) fh.classList.remove("active");
+  }
+  /**
+   * Single function that drives both activation and geometry of the floating
+   * header. Called on scroll, resize, table-resize, and after each render.
+   */
+  __syncFloatingHeader() {
+    const fh = this.__floatingHeaderEl;
+    const realTable = this.__realTableEl;
+    const floatTable = this.__floatingTableEl;
+    if (!fh || !realTable || !floatTable) return;
+    const tableRect = realTable.getBoundingClientRect();
+    const stick = this.__getStickContext();
+    floatTable.style.tableLayout = realTable.style.tableLayout || "auto";
+    const realHeadRows = realTable.tHead?.rows;
+    const floatHeadRows = floatTable.tHead?.rows;
+    let headerHeight = 0;
+    if (realHeadRows && floatHeadRows) {
+      for (let r11 = 0; r11 < realHeadRows.length && r11 < floatHeadRows.length; r11++) {
+        headerHeight += realHeadRows[r11].getBoundingClientRect().height;
+        const realCells = realHeadRows[r11].cells;
+        const floatCells = floatHeadRows[r11].cells;
+        for (let c11 = 0; c11 < realCells.length && c11 < floatCells.length; c11++) {
+          const w4 = realCells[c11].getBoundingClientRect().width;
+          floatCells[c11].style.width = `${w4}px`;
+          floatCells[c11].style.minWidth = `${w4}px`;
+          floatCells[c11].style.maxWidth = `${w4}px`;
+        }
+      }
+    }
+    const shouldBeActive = tableRect.top < stick.top && tableRect.bottom > stick.top + Math.min(headerHeight, 1);
+    if (shouldBeActive !== this.__floatingActive) {
+      this.__floatingActive = shouldBeActive;
+      fh.classList.toggle("active", shouldBeActive);
+    }
+    if (!shouldBeActive) return;
+    const clipLeft = Math.max(tableRect.left, stick.left);
+    const clipRight = Math.min(tableRect.right, stick.right);
+    const clipWidth = Math.max(0, clipRight - clipLeft);
+    fh.style.top = `${stick.top}px`;
+    fh.style.left = `${clipLeft}px`;
+    fh.style.width = `${clipWidth}px`;
+    floatTable.style.width = `${tableRect.width}px`;
+    floatTable.style.marginLeft = `${tableRect.left - clipLeft}px`;
+  }
+  async disconnectedCallback() {
+    super.disconnectedCallback();
+    this.teardownFloatingHeader();
+  }
   async firstUpdated() {
   }
   async updated(changedProperties) {
     super.updated(changedProperties);
     this.determineColumnWidths();
+    if (changedProperties.has("fixedHeight") || changedProperties.has("data") || changedProperties.has("columns") || !this.__floatingScrollHandler) {
+      if (!this.fixedHeight && this.data.length > 0) {
+        this.setupFloatingHeader();
+      } else {
+        this.teardownFloatingHeader();
+      }
+    }
+    if (!this.fixedHeight && this.data.length > 0) {
+      this.__syncFloatingHeader();
+    }
     if (this.searchable) {
       const existing = this.dataActions.find((actionArg) => actionArg.type?.includes("header") && actionArg.name === "Search");
       if (!existing) {
@@ -170829,7 +171033,7 @@ _sortBy = new WeakMap();
 _filterText = new WeakMap();
 _columnFilters = new WeakMap();
 _showColumnFilters = new WeakMap();
-_stickyHeader = new WeakMap();
+_fixedHeight = new WeakMap();
 _searchMode = new WeakMap();
 _selectionMode = new WeakMap();
 _selectedIds = new WeakMap();
@@ -170857,7 +171061,7 @@ __decorateElement(_init39, 4, "sortBy", _sortBy_dec, _DeesTable, _sortBy);
 __decorateElement(_init39, 4, "filterText", _filterText_dec, _DeesTable, _filterText);
 __decorateElement(_init39, 4, "columnFilters", _columnFilters_dec, _DeesTable, _columnFilters);
 __decorateElement(_init39, 4, "showColumnFilters", _showColumnFilters_dec, _DeesTable, _showColumnFilters);
-__decorateElement(_init39, 4, "stickyHeader", _stickyHeader_dec, _DeesTable, _stickyHeader);
+__decorateElement(_init39, 4, "fixedHeight", _fixedHeight_dec, _DeesTable, _fixedHeight);
 __decorateElement(_init39, 4, "searchMode", _searchMode_dec, _DeesTable, _searchMode);
 __decorateElement(_init39, 4, "selectionMode", _selectionMode_dec, _DeesTable, _selectionMode);
 __decorateElement(_init39, 4, "selectedIds", _selectedIds_dec, _DeesTable, _selectedIds);