@3mo/data-grid 0.5.12 → 0.5.13

package/dist/DataGrid.d.ts

@@ -81,20 +81,20 @@ export type DataGridSorting<TData> = DataGridSortingDefinition<TData> | Array<Da
  * @cssprop --mo-data-grid-cell-padding - The inline padding of the cells. Default to 3px.
  * @cssprop --mo-data-grid-column-sub-row-indentation - The indentation of the first column in the sub row. Default to 10px.
  *
- * @fires dataChange {CustomEvent<Array<TData>>}
- * @fires selectionChange {CustomEvent<Array<TData>>}
- * @fires pageChange {CustomEvent<number>}
- * @fires paginationChange {CustomEvent<DataGridPagination | undefined>}
- * @fires columnsChange {CustomEvent<Array<ColumnDefinition<TData>>>}
- * @fires sidePanelOpen {CustomEvent<DataGridSidePanelTab>}
- * @fires sidePanelClose {CustomEvent}
- * @fires sortingChange {CustomEvent<DataGridSorting<TData>>}
- * @fires rowDetailsOpen {CustomEvent<DataGridRow<TData, TDetailsElement>>}
- * @fires rowDetailsClose {CustomEvent<DataGridRow<TData, TDetailsElement>>}
- * @fires rowClick {CustomEvent<DataGridRow<TData, TDetailsElement>>}
- * @fires rowDoubleClick {CustomEvent<DataGridRow<TData, TDetailsElement>>}
- * @fires rowMiddleClick {CustomEvent<DataGridRow<TData, TDetailsElement>>}
- * @fires cellEdit {CustomEvent<DataGridCell<any, TData, TDetailsElement>>}
+ * @fires dataChange
+ * @fires selectionChange
+ * @fires pageChange
+ * @fires paginationChange
+ * @fires columnsChange
+ * @fires sidePanelOpen
+ * @fires sidePanelClose
+ * @fires sortingChange
+ * @fires rowDetailsOpen
+ * @fires rowDetailsClose
+ * @fires rowClick
+ * @fires rowDoubleClick
+ * @fires rowMiddleClick
+ * @fires cellEdit
  */
 export declare class DataGrid<TData, TDetailsElement extends Element | undefined = undefined> extends Component {
     static readonly rowHeight: LocalStorage<number>;

package/dist/DataGrid.js

@@ -101,20 +101,20 @@ export var DataGridEditability;
  * @cssprop --mo-data-grid-cell-padding - The inline padding of the cells. Default to 3px.
  * @cssprop --mo-data-grid-column-sub-row-indentation - The indentation of the first column in the sub row. Default to 10px.
  *
- * @fires dataChange {CustomEvent<Array<TData>>}
- * @fires selectionChange {CustomEvent<Array<TData>>}
- * @fires pageChange {CustomEvent<number>}
- * @fires paginationChange {CustomEvent<DataGridPagination | undefined>}
- * @fires columnsChange {CustomEvent<Array<ColumnDefinition<TData>>>}
- * @fires sidePanelOpen {CustomEvent<DataGridSidePanelTab>}
- * @fires sidePanelClose {CustomEvent}
- * @fires sortingChange {CustomEvent<DataGridSorting<TData>>}
- * @fires rowDetailsOpen {CustomEvent<DataGridRow<TData, TDetailsElement>>}
- * @fires rowDetailsClose {CustomEvent<DataGridRow<TData, TDetailsElement>>}
- * @fires rowClick {CustomEvent<DataGridRow<TData, TDetailsElement>>}
- * @fires rowDoubleClick {CustomEvent<DataGridRow<TData, TDetailsElement>>}
- * @fires rowMiddleClick {CustomEvent<DataGridRow<TData, TDetailsElement>>}
- * @fires cellEdit {CustomEvent<DataGridCell<any, TData, TDetailsElement>>}
+ * @fires dataChange
+ * @fires selectionChange
+ * @fires pageChange
+ * @fires paginationChange
+ * @fires columnsChange
+ * @fires sidePanelOpen
+ * @fires sidePanelClose
+ * @fires sortingChange
+ * @fires rowDetailsOpen
+ * @fires rowDetailsClose
+ * @fires rowClick
+ * @fires rowDoubleClick
+ * @fires rowMiddleClick
+ * @fires cellEdit
  */
 let DataGrid = DataGrid_1 = class DataGrid extends Component {
     constructor() {
@@ -391,7 +391,7 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
 				--mo-data-grid-row-tree-line-width: 8px;
 				--mo-details-data-grid-start-margin: 26px;
 
-				--mo-data-grid-selection-background: rgba(var(--mo-color-accent-base), 0.5);
+				--mo-data-grid-selection-background: color-mix(in srgb, var(--mo-color-accent), transparent 50%);
 				display: flex;
 				flex-direction: column;
 				height: 100%;
@@ -399,11 +399,11 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
 			}
 
 			:host([data-theme=light]) {
-				--mo-data-grid-alternating-background: rgba(var(--mo-color-foreground-base), 0.05);
+				--mo-data-grid-alternating-background: color-mix(in srgb, black, transparent 95%);
 			}
 
 			:host([data-theme=dark]) {
-				--mo-data-grid-alternating-background: rgba(var(--mo-color-background-base), 0.2);
+				--mo-data-grid-alternating-background: color-mix(in srgb, black, transparent 80%);
 			}
 
 			:host([preventVerticalContentScroll]) mo-scroller {

package/dist/DataGridCell.d.ts

@@ -12,7 +12,7 @@ export declare class DataGridCell<TValue extends KeyPathValueOf<TData>, TData =
     column: ColumnDefinition<TData, TValue>;
     row: DataGridRow<TData, TDetailsElement>;
     private editing;
-    get dataGrid(): import("./DataGrid.js").DataGrid<TData, TDetailsElement>;
+    get dataGrid(): import("DataGrid.js").DataGrid<TData, TDetailsElement>;
     get data(): TData;
     get dataSelector(): object extends TData ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | (Extract<keyof TData, `${number}`> extends infer T ? T extends Extract<keyof TData, `${number}`> ? T extends keyof TData ? `${T}.${object extends TData[T] ? string : TData[T] extends infer T_1 ? T_1 extends TData[T] ? T_1 extends readonly any[] ? Extract<keyof T_1, `${number}`> | (Extract<keyof T_1, `${number}`> extends infer T_2 ? T_2 extends Extract<keyof T_1, `${number}`> ? T_2 extends keyof T_1 ? never : never : never : never) : T_1 extends object ? Extract<keyof T_1, string> | (Extract<keyof T_1, string> extends infer T_3 ? T_3 extends Extract<keyof T_1, string> ? T_3 extends keyof T_1 ? never : never : never : never) : never : never : never}` : never : never : never) : TData extends object ? Extract<keyof TData, string> | (Extract<keyof TData, string> extends infer T_4 ? T_4 extends Extract<keyof TData, string> ? T_4 extends keyof TData ? `${T_4}.${object extends TData[T_4] ? string : TData[T_4] extends infer T_5 ? T_5 extends TData[T_4] ? T_5 extends readonly any[] ? Extract<keyof T_5, `${number}`> | (Extract<keyof T_5, `${number}`> extends infer T_6 ? T_6 extends Extract<keyof T_5, `${number}`> ? T_6 extends keyof T_5 ? never : never : never : never) : T_5 extends object ? Extract<keyof T_5, string> | (Extract<keyof T_5, string> extends infer T_7 ? T_7 extends Extract<keyof T_5, string> ? T_7 extends keyof T_5 ? never : never : never : never) : never : never : never}` : never : never : never) : never;
     private get cellIndex();

package/dist/DataGridCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridCell.d.ts","sourceRoot":"","sources":["../DataGridCell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAA6C,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAG/G,OAAO,EAAE,gBAAgB,EAAuB,WAAW,EAAE,MAAM,YAAY,CAAA;AAO/E;;;;;;GAMG;AACH,qBACa,YAAY,CAAC,MAAM,SAAS,cAAc,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,GAAG,EAAE,eAAe,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,CAAE,SAAQ,SAAS;IAC1H,KAAK,EAAG,MAAM,CAAA;IACd,MAAM,EAAG,gBAAgB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;IACxC,GAAG,EAAG,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAA;IAQlE,OAAO,CAAC,OAAO,CAAQ;IAE1B,IAAI,QAAQ,6DAA+B;IAC3C,IAAI,IAAI,UAA2B;IACnC,IAAI,YAAY,+/CAAsC;IAEtD,OAAO,KAAK,SAAS,GAAkD;IACvE,OAAO,KAAK,QAAQ,GAA0D;IAE9E,OAAO,KAAK,gBAAgB,GAAuD;IAEnF,OAAO,KAAK,UAAU,GAIrB;IAED,IAAI,SAAS,YAGZ;IAGD,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,YAAY;IAO/C,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,UAAU;cAQ7B,aAAa,CAAC,KAAK,EAAE,aAAa;IA2ClD,OAAO,CAAC,SAAS;IAWjB,WAAoB,MAAM,kCA0CzB;IAED,OAAO,KAAK,OAAO,GAAmC;IAEtD,cAAuB,QAAQ,uBAU9B;IAED,OAAO,KAAK,eAAe,GAE1B;IAED,OAAO,KAAK,mBAAmB,GAE9B;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,YAAY,CAAC,OAAO,CAAC,CAAA;KAC1C;CACD"}
+{"version":3,"file":"DataGridCell.d.ts","sourceRoot":"","sources":["../DataGridCell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAA6C,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAG/G,OAAO,EAAE,gBAAgB,EAAuB,WAAW,EAAE,MAAM,YAAY,CAAA;AAO/E;;;;;;GAMG;AACH,qBACa,YAAY,CAAC,MAAM,SAAS,cAAc,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,GAAG,EAAE,eAAe,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,CAAE,SAAQ,SAAS;IAC1H,KAAK,EAAG,MAAM,CAAA;IACd,MAAM,EAAG,gBAAgB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;IACxC,GAAG,EAAG,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAA;IAQlE,OAAO,CAAC,OAAO,CAAQ;IAE1B,IAAI,QAAQ,2DAA+B;IAC3C,IAAI,IAAI,UAA2B;IACnC,IAAI,YAAY,+/CAAsC;IAEtD,OAAO,KAAK,SAAS,GAAkD;IACvE,OAAO,KAAK,QAAQ,GAA0D;IAE9E,OAAO,KAAK,gBAAgB,GAAuD;IAEnF,OAAO,KAAK,UAAU,GAIrB;IAED,IAAI,SAAS,YAGZ;IAGD,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,YAAY;IAO/C,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,UAAU;cAQ7B,aAAa,CAAC,KAAK,EAAE,aAAa;IA2ClD,OAAO,CAAC,SAAS;IAWjB,WAAoB,MAAM,kCA0CzB;IAED,OAAO,KAAK,OAAO,GAAmC;IAEtD,cAAuB,QAAQ,uBAU9B;IAED,OAAO,KAAK,eAAe,GAE1B;IAED,OAAO,KAAK,mBAAmB,GAE9B;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,YAAY,CAAC,OAAO,CAAC,CAAA;KAC1C;CACD"}

package/dist/DataGridCell.js

@@ -99,46 +99,46 @@ let DataGridCell = class DataGridCell extends Component {
         }
     }
     static get styles() {
-        return css `
-			:host {
-				position: relative;
-				padding-inline: var(--mo-data-grid-cell-padding, 3px);
-				user-select: none;
-				line-height: var(--mo-data-grid-row-height);
-				white-space: nowrap;
-				overflow: hidden !important;
-				text-overflow: ellipsis;
-				font-size: var(--mo-data-grid-cell-font-size);
-			}
-
-			:host(:not([isEditing]):focus) {
-				outline: 2px solid var(--mo-color-accent);
-			}
-
-			:host([isEditing]) {
-				display: grid;
-			}
-
-			:host([alignment=end]) {
-				text-align: end;
-			}
-
-			:host([alignment=start]) {
-				text-align: start
-			}
-
-			:host([alignment=center]) {
-				text-align: center;
-			}
-
-			:host > :first-child {
-				line-height: var(--mo-data-grid-row-height);
-			}
-
-			:host([isEditing]) > :first-child {
-				align-self: center;
-				justify-self: stretch;
-			}
+        return css `
+			:host {
+				position: relative;
+				padding-inline: var(--mo-data-grid-cell-padding, 3px);
+				user-select: none;
+				line-height: var(--mo-data-grid-row-height);
+				white-space: nowrap;
+				overflow: hidden !important;
+				text-overflow: ellipsis;
+				font-size: var(--mo-data-grid-cell-font-size);
+			}
+
+			:host(:not([isEditing]):focus) {
+				outline: 2px solid var(--mo-color-accent);
+			}
+
+			:host([isEditing]) {
+				display: grid;
+			}
+
+			:host([alignment=end]) {
+				text-align: end;
+			}
+
+			:host([alignment=start]) {
+				text-align: start
+			}
+
+			:host([alignment=center]) {
+				text-align: center;
+			}
+
+			:host > :first-child {
+				line-height: var(--mo-data-grid-row-height);
+			}
+
+			:host([isEditing]) > :first-child {
+				align-self: center;
+				justify-self: stretch;
+			}
 		`;
     }
     get tooltip() { return this.valueTextContent; }

package/dist/DataGridFooter.js

@@ -23,33 +23,33 @@ let DataGridFooter = class DataGridFooter extends Component {
         this.manualPageSize = false;
     }
     static get styles() {
-        return css `
-			:host {
-				grid-column: 1 / last-line;
-				grid-row: 3;
-				min-height: var(--mo-data-grid-footer-min-height);
-				background: var(--mo-data-grid-footer-background);
-			}
-
-			:host(:not([hideTopBorder])) {
-				border-top: var(--mo-data-grid-border);
-			}
+        return css `
+			:host {
+				grid-column: 1 / last-line;
+				grid-row: 3;
+				min-height: var(--mo-data-grid-footer-min-height);
+				background: var(--mo-data-grid-footer-background);
+			}
+
+			:host(:not([hideTopBorder])) {
+				border-top: var(--mo-data-grid-border);
+			}
 		`;
     }
     get template() {
         this.toggleAttribute('hideTopBorder', this.dataGrid.hasFooter === false);
-        return this.dataGrid.hasFooter === false ? html.nothing : html `
-			<mo-flex direction='horizontal' justifyContent='space-between' alignItems='center' wrap='wrap-reverse' gap='6px' ${style({ flex: '1', padding: '0 6px', height: '100%' })}>
-				<mo-flex direction='horizontal' alignItems='center' gap='3vw' ${style({ flexBasis: 'auto' })}>
-					${this.paginationTemplate}
-					${this.exportTemplate}
-				</mo-flex>
-
-				<mo-flex direction='horizontal' alignItems='center' gap='10px' wrap='wrap-reverse' ${style({ paddingInlineEnd: 'var(--mo-data-grid-footer-trailing-padding)' })}>
-					${this.dataGrid.sumsTemplate}
-					<slot name='sum'></slot>
-				</mo-flex>
-			</mo-flex>
+        return this.dataGrid.hasFooter === false ? html.nothing : html `
+			<mo-flex direction='horizontal' justifyContent='space-between' alignItems='center' wrap='wrap-reverse' gap='6px' ${style({ flex: '1', padding: '0 6px', height: '100%' })}>
+				<mo-flex direction='horizontal' alignItems='center' gap='3vw' ${style({ flexBasis: 'auto' })}>
+					${this.paginationTemplate}
+					${this.exportTemplate}
+				</mo-flex>
+
+				<mo-flex direction='horizontal' alignItems='center' gap='10px' wrap='wrap-reverse' ${style({ paddingInlineEnd: 'var(--mo-data-grid-footer-trailing-padding)' })}>
+					${this.dataGrid.sumsTemplate}
+					<slot name='sum'></slot>
+				</mo-flex>
+			</mo-flex>
 		`;
     }
     get paginationTemplate() {
@@ -62,53 +62,53 @@ let DataGridFooter = class DataGridFooter extends Component {
             `${(Math.min(from, to)).format()}-${to.format()}`,
             hasUnknownDataLength ? undefined : this.dataGrid.dataLength.format(),
         ].filter(Boolean).join(' / ');
-        return !this.dataGrid.hasPagination ? html.nothing : html `
-			<mo-flex direction='horizontal' alignItems='center' gap='1vw'>
-				<mo-flex direction='horizontal' gap='4px' alignItems='center' justifyContent='center'>
-					<mo-icon-button dense icon=${isRtl ? 'last_page' : 'first_page'}
-						?disabled=${this.page === 1}
-						@click=${() => this.setPage(1)}
-					></mo-icon-button>
-
-					<mo-icon-button dense icon=${isRtl ? 'keyboard_arrow_right' : 'keyboard_arrow_left'}
-						?disabled=${this.page === 1}
-						@click=${() => this.setPage(this.page - 1)}
-					></mo-icon-button>
-
-					<div ${style({ cursor: 'pointer', width: hasUnknownDataLength ? '40px' : '75px', textAlign: 'center' })}>
-						${this.manualPagination ? html `
-							<mo-field-number dense
-								value=${this.page}
-								@change=${(e) => this.handleManualPageChange(e.detail)}>
-							</mo-field-number>
-						` : html `
-							<div ${style({ fontSize: 'small' })} @click=${() => this.manualPagination = hasUnknownDataLength === false}>${pageText}</div>
-						`}
-					</div>
-
-					<mo-icon-button dense icon=${isRtl ? 'keyboard_arrow_left' : 'keyboard_arrow_right'}
-						?disabled=${!this.dataGrid.hasNextPage}
-						@click=${() => this.setPage(this.page + 1)}
-					></mo-icon-button>
-
-					<mo-icon-button dense icon=${isRtl ? 'first_page' : 'last_page'}
-						?disabled=${hasUnknownDataLength || this.page === this.dataGrid.maxPage}
-						@click=${() => this.setPage(this.dataGrid.maxPage ?? 1)}
-					></mo-icon-button>
-				</mo-flex>
-
-				<div ${style({ color: 'var(--mo-color-gray)', marginInlineStart: '8px' })}>
-					${!this.manualPageSize ? html `
-						<div ${style({ fontSize: 'small' })} @click=${() => this.manualPageSize = true}>${pageSizeText}</div>
-					` : html `
-						<mo-field-select-data-grid-page-size dense ${style({ width: '90px' })}
-							.dataGrid=${this.dataGrid}
-							value=${ifDefined(this.dataGrid.pagination)}
-							@change=${(e) => this.handlePaginationChange(e.detail)}>
-						</mo-field-select-data-grid-page-size>
-					`}
-				</div>
-			</mo-flex>
+        return !this.dataGrid.hasPagination ? html.nothing : html `
+			<mo-flex direction='horizontal' alignItems='center' gap='1vw'>
+				<mo-flex direction='horizontal' gap='4px' alignItems='center' justifyContent='center'>
+					<mo-icon-button dense icon=${isRtl ? 'last_page' : 'first_page'}
+						?disabled=${this.page === 1}
+						@click=${() => this.setPage(1)}
+					></mo-icon-button>
+
+					<mo-icon-button dense icon=${isRtl ? 'keyboard_arrow_right' : 'keyboard_arrow_left'}
+						?disabled=${this.page === 1}
+						@click=${() => this.setPage(this.page - 1)}
+					></mo-icon-button>
+
+					<div ${style({ cursor: 'pointer', width: hasUnknownDataLength ? '40px' : '75px', textAlign: 'center' })}>
+						${this.manualPagination ? html `
+							<mo-field-number dense
+								value=${this.page}
+								@change=${(e) => this.handleManualPageChange(e.detail)}>
+							</mo-field-number>
+						` : html `
+							<div ${style({ fontSize: 'small' })} @click=${() => this.manualPagination = hasUnknownDataLength === false}>${pageText}</div>
+						`}
+					</div>
+
+					<mo-icon-button dense icon=${isRtl ? 'keyboard_arrow_left' : 'keyboard_arrow_right'}
+						?disabled=${!this.dataGrid.hasNextPage}
+						@click=${() => this.setPage(this.page + 1)}
+					></mo-icon-button>
+
+					<mo-icon-button dense icon=${isRtl ? 'first_page' : 'last_page'}
+						?disabled=${hasUnknownDataLength || this.page === this.dataGrid.maxPage}
+						@click=${() => this.setPage(this.dataGrid.maxPage ?? 1)}
+					></mo-icon-button>
+				</mo-flex>
+
+				<div ${style({ color: 'var(--mo-color-gray)', marginInlineStart: '8px' })}>
+					${!this.manualPageSize ? html `
+						<div ${style({ fontSize: 'small' })} @click=${() => this.manualPageSize = true}>${pageSizeText}</div>
+					` : html `
+						<mo-field-select-data-grid-page-size dense ${style({ width: '90px' })}
+							.dataGrid=${this.dataGrid}
+							value=${ifDefined(this.dataGrid.pagination)}
+							@change=${(e) => this.handlePaginationChange(e.detail)}>
+						</mo-field-select-data-grid-page-size>
+					`}
+				</div>
+			</mo-flex>
 		`;
     }
     handlePaginationChange(value) {
@@ -126,28 +126,28 @@ let DataGridFooter = class DataGridFooter extends Component {
         this.manualPagination = false;
     }
     get exportTemplate() {
-        return !this.dataGrid.exportable ? html.nothing : html `
-			<style>
-				#export {
-					height: 21px;
-					width: 21px;
-					aspect-ratio: 1 / 1;
-					transition: .25s;
-					-webkit-filter: grayscale(100%);
-					filter: grayscale(100%);
-					cursor: pointer;
-				}
-
-				#export:hover {
-					-webkit-filter: grayscale(0%);
-					filter: grayscale(0%);
-				}
-			</style>
-			<img id='export'
-				src=${`data:image/svg+xml,${encodeURIComponent(excelSvg)}`}
-				${tooltip(t('Export current view to Excel'), TooltipPlacement.BlockStart)}
-				@click=${() => this.dataGrid.exportExcelFile()}
-			/>
+        return !this.dataGrid.exportable ? html.nothing : html `
+			<style>
+				#export {
+					height: 21px;
+					width: 21px;
+					aspect-ratio: 1 / 1;
+					transition: .25s;
+					-webkit-filter: grayscale(100%);
+					filter: grayscale(100%);
+					cursor: pointer;
+				}
+
+				#export:hover {
+					-webkit-filter: grayscale(0%);
+					filter: grayscale(0%);
+				}
+			</style>
+			<img id='export'
+				src=${`data:image/svg+xml,${encodeURIComponent(excelSvg)}`}
+				${tooltip(t('Export current view to Excel'), TooltipPlacement.BlockStart)}
+				@click=${() => this.dataGrid.exportExcelFile()}
+			/>
 		`;
     }
     setPage(value) {

package/dist/DataGridHeader.js

@@ -40,45 +40,45 @@ let DataGridHeader = class DataGridHeader extends Component {
         this.dataGrid.selectionChange.unsubscribe(this.handleDataGridSelectionChange);
     }
     static get styles() {
-        return css `
-			:host {
-				--mo-data-grid-header-separator-height: 15px;
-				--mo-data-grid-header-separator-width: 2px;
-				display: inherit;
-				font-size: small;
-			}
-
-			#header {
-				border-top: var(--mo-data-grid-border);
-				border-bottom: var(--mo-data-grid-border);
-				position: relative;
-				height: var(--mo-data-grid-header-height);
-				background: var(--mo-data-grid-header-background);
-			}
-
-			.headerContent {
-				padding: 0 var(--mo-data-grid-cell-padding, 3px);
-				display: inline-block;
-				overflow: hidden !important;
-				color: var(--mo-color-foreground);
-				font-weight: 500;
-				line-height: var(--mo-data-grid-header-height);
-				white-space: nowrap;
-				text-overflow: ellipsis;
-			}
-
-			.sort-rank {
-				background: var(--mo-color-transparent-gray-3);
-				color: var(--mo-color-foreground);
-				border: 1px solid var(--mo-color-gray-transparent);
-				border-radius: 50%;
-				width: 20px;
-				height: 20px;
-				aspect-ratio: 1 / 1;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-			}
+        return css `
+			:host {
+				--mo-data-grid-header-separator-height: 15px;
+				--mo-data-grid-header-separator-width: 2px;
+				display: inherit;
+				font-size: small;
+			}
+
+			#header {
+				border-top: var(--mo-data-grid-border);
+				border-bottom: var(--mo-data-grid-border);
+				position: relative;
+				height: var(--mo-data-grid-header-height);
+				background: var(--mo-data-grid-header-background);
+			}
+
+			.headerContent {
+				padding: 0 var(--mo-data-grid-cell-padding, 3px);
+				display: inline-block;
+				overflow: hidden !important;
+				color: var(--mo-color-foreground);
+				font-weight: 500;
+				line-height: var(--mo-data-grid-header-height);
+				white-space: nowrap;
+				text-overflow: ellipsis;
+			}
+
+			.sort-rank {
+				background: var(--mo-color-transparent-gray-3);
+				color: var(--mo-color-foreground);
+				border: 1px solid var(--mo-color-gray-transparent);
+				border-radius: 50%;
+				width: 20px;
+				height: 20px;
+				aspect-ratio: 1 / 1;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
 		`;
     }
     get skeletonColumns() {
@@ -93,75 +93,75 @@ let DataGridHeader = class DataGridHeader extends Component {
         return this.dataGrid.dataColumnsWidths.join(' var(--mo-data-grid-columns-gap) ');
     }
     get template() {
-        return html `
-			<mo-grid id='header' columns=${this.skeletonColumns} columnGap='var(--mo-data-grid-columns-gap)'>
-				${this.detailsExpanderTemplate}
-				${this.selectionTemplate}
-				${this.contentTemplate}
-				${this.moreTemplate}
-			</mo-grid>
+        return html `
+			<mo-grid id='header' columns=${this.skeletonColumns} columnGap='var(--mo-data-grid-columns-gap)'>
+				${this.detailsExpanderTemplate}
+				${this.selectionTemplate}
+				${this.contentTemplate}
+				${this.moreTemplate}
+			</mo-grid>
 		`;
     }
     get detailsExpanderTemplate() {
-        return this.dataGrid.hasDetails === false ? html.nothing : html `
-			<mo-flex justifyContent='center' alignItems='center'>
-				${!this.dataGrid.hasDetails || !this.dataGrid.multipleDetails ? html.nothing : html `
-					<mo-icon-button dense ${style({ padding: '-10px 0px 0 -10px' })}
-						${style({ display: 'inherit' })}
-						icon=${this.dataGrid.allRowDetailsOpen ? 'unfold_less' : 'unfold_more'}
-						@click=${() => this.toggleAllDetails()}
-					></mo-icon-button>
-				`}
-			</mo-flex>
+        return this.dataGrid.hasDetails === false ? html.nothing : html `
+			<mo-flex justifyContent='center' alignItems='center'>
+				${!this.dataGrid.hasDetails || !this.dataGrid.multipleDetails ? html.nothing : html `
+					<mo-icon-button dense ${style({ padding: '-10px 0px 0 -10px' })}
+						${style({ display: 'inherit' })}
+						icon=${this.dataGrid.allRowDetailsOpen ? 'unfold_less' : 'unfold_more'}
+						@click=${() => this.toggleAllDetails()}
+					></mo-icon-button>
+				`}
+			</mo-flex>
 		`;
     }
     get selectionTemplate() {
-        return this.dataGrid.hasSelection === false || this.dataGrid.selectionCheckboxesHidden ? html.nothing : html `
-			<mo-flex justifyContent='center' alignItems='center'>
-				${this.dataGrid.selectionMode !== DataGridSelectionMode.Multiple ? html.nothing : html `
-					<mo-checkbox ${style({ position: 'absolute' })} .selected=${this.selection} @change=${this.handleSelectionChange}></mo-checkbox>
-				`}
-			</mo-flex>
+        return this.dataGrid.hasSelection === false || this.dataGrid.selectionCheckboxesHidden ? html.nothing : html `
+			<mo-flex justifyContent='center' alignItems='center'>
+				${this.dataGrid.selectionMode !== DataGridSelectionMode.Multiple ? html.nothing : html `
+					<mo-checkbox ${style({ position: 'absolute' })} .selected=${this.selection} @change=${this.handleSelectionChange}></mo-checkbox>
+				`}
+			</mo-flex>
 		`;
     }
     get contentTemplate() {
-        return html `
-			<mo-grid columns=${this.separatorAdjustedColumns}>
-				${join(this.dataGrid.visibleColumns.map(column => this.getHeaderCellTemplate(column)), index => html `
-					<mo-data-grid-header-separator
-						.dataGrid=${this.dataGrid}
-						.column=${this.dataGrid.visibleColumns[index]}
-						@columnUpdate=${() => this.dataGrid.requestUpdate()}
-					></mo-data-grid-header-separator>
-				`)}
-			</mo-grid>
+        return html `
+			<mo-grid columns=${this.separatorAdjustedColumns}>
+				${join(this.dataGrid.visibleColumns.map(column => this.getHeaderCellTemplate(column)), index => html `
+					<mo-data-grid-header-separator
+						.dataGrid=${this.dataGrid}
+						.column=${this.dataGrid.visibleColumns[index]}
+						@columnUpdate=${() => this.dataGrid.requestUpdate()}
+					></mo-data-grid-header-separator>
+				`)}
+			</mo-grid>
 		`;
     }
     getHeaderCellTemplate(column) {
         const sortingDefinition = this.dataGrid.getSortingDefinition(column);
         const sortIcon = !sortingDefinition ? undefined : sortingDefinition.strategy === DataGridSortingStrategy.Ascending ? 'arrow_upward' : 'arrow_downward';
         const sortingRank = !sortingDefinition || this.dataGrid.getSorting().length <= 1 ? undefined : sortingDefinition.rank;
-        return html `
-			<mo-flex direction=${column.alignment === 'end' ? 'horizontal-reversed' : 'horizontal'} alignItems='center'
-				${style({ overflow: 'hidden', position: 'relative', cursor: 'pointer', userSelect: 'none' })}
-				@click=${() => this.sort(column)}
-			>
-				<div class='headerContent' ${style({ width: '100%', textAlign: column.alignment })} title=${column.title || column.heading}>${column.heading}</div>
-
-				${sortIcon === undefined ? html.nothing : html `
-					${!sortingRank ? html.nothing : html `<span class='sort-rank'>${sortingRank}</span>`}
-					<mo-icon ${style({ color: 'var(--mo-color-accent)' })} icon=${ifDefined(sortIcon)}></mo-icon>
-				`}
-			</mo-flex>
+        return html `
+			<mo-flex direction=${column.alignment === 'end' ? 'horizontal-reversed' : 'horizontal'} alignItems='center'
+				${style({ overflow: 'hidden', position: 'relative', cursor: 'pointer', userSelect: 'none' })}
+				@click=${() => this.sort(column)}
+			>
+				<div class='headerContent' ${style({ width: '100%', textAlign: column.alignment })} title=${column.title || column.heading}>${column.heading}</div>
+
+				${sortIcon === undefined ? html.nothing : html `
+					${!sortingRank ? html.nothing : html `<span class='sort-rank'>${sortingRank}</span>`}
+					<mo-icon ${style({ color: 'var(--mo-color-accent)' })} icon=${ifDefined(sortIcon)}></mo-icon>
+				`}
+			</mo-flex>
 		`;
     }
     get moreTemplate() {
-        return this.dataGrid.hasToolbar || this.dataGrid.sidePanelHidden ? html.nothing : html `
-			<mo-flex alignItems='center' justifyContent='center' ${style({ marginInlineEnd: '8px', cursor: 'pointer', position: 'relative' })}>
-				<mo-icon-button dense icon='settings' ${style({ color: 'var(--mo-color-accent)', fontSize: 'large' })}
-					@click=${() => this.dataGrid.navigateToSidePanelTab(this.dataGrid.sidePanelTab ? undefined : DataGridSidePanelTab.Settings)}
-				></mo-icon-button>
-			</mo-flex>
+        return this.dataGrid.hasToolbar || this.dataGrid.sidePanelHidden ? html.nothing : html `
+			<mo-flex alignItems='center' justifyContent='center' ${style({ marginInlineEnd: '8px', cursor: 'pointer', position: 'relative' })}>
+				<mo-icon-button dense icon='settings' ${style({ color: 'var(--mo-color-accent)', fontSize: 'large' })}
+					@click=${() => this.dataGrid.navigateToSidePanelTab(this.dataGrid.sidePanelTab ? undefined : DataGridSidePanelTab.Settings)}
+				></mo-icon-button>
+			</mo-flex>
 		`;
     }
     sort(column) {

package/dist/DataGridHeaderSeparator.d.ts

@@ -1,6 +1,6 @@
 import { Component } from '@a11d/lit';
 import { ColumnDefinition, DataGrid } from './index.js';
-/** @fires columnUpdate {CustomEvent} */
+/** @fires columnUpdate */
 export declare class DataGridHeaderSeparator extends Component {
     static disableResizing: boolean;
     readonly columnUpdate: EventDispatcher;

package/dist/DataGridHeaderSeparator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridHeaderSeparator.d.ts","sourceRoot":"","sources":["../DataGridHeaderSeparator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsE,MAAM,WAAW,CAAA;AACzG,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAEvD,wCAAwC;AACxC,qBACa,uBAAwB,SAAQ,SAAS;IACrD,MAAM,CAAC,eAAe,UAAQ;IAErB,QAAQ,CAAC,YAAY,EAAG,eAAe,CAAA;IAEpB,QAAQ,EAAG,QAAQ,CAAC,OAAO,CAAC,CAAA;IAC5B,MAAM,EAAG,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAErD,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,KAAK,CAAI;IAE1B,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAK;IAE7B,OAAO,CAAC,YAAY,CAAC,CAAQ;IAC7B,OAAO,CAAC,WAAW,CAAC,CAAQ;IAE5B,WAAoB,MAAM,kCAuCzB;IAED,cAAuB,QAAQ,0CAW9B;IAGD,SAAS,CAAC,aAAa;IAavB,SAAS,CAAC,eAAe,CAAC,CAAC,EAAE,UAAU;IAmBvC,OAAO,CAAC,QAAQ,CAAC,eAAe,CAM/B;IAED,OAAO,CAAC,cAAc;CAmBtB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,+BAA+B,EAAE,uBAAuB,CAAA;KACxD;CACD"}
+{"version":3,"file":"DataGridHeaderSeparator.d.ts","sourceRoot":"","sources":["../DataGridHeaderSeparator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsE,MAAM,WAAW,CAAA;AACzG,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAEvD,0BAA0B;AAC1B,qBACa,uBAAwB,SAAQ,SAAS;IACrD,MAAM,CAAC,eAAe,UAAQ;IAErB,QAAQ,CAAC,YAAY,EAAG,eAAe,CAAA;IAEpB,QAAQ,EAAG,QAAQ,CAAC,OAAO,CAAC,CAAA;IAC5B,MAAM,EAAG,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAErD,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,KAAK,CAAI;IAE1B,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAK;IAE7B,OAAO,CAAC,YAAY,CAAC,CAAQ;IAC7B,OAAO,CAAC,WAAW,CAAC,CAAQ;IAE5B,WAAoB,MAAM,kCAuCzB;IAED,cAAuB,QAAQ,0CAW9B;IAGD,SAAS,CAAC,aAAa;IAavB,SAAS,CAAC,eAAe,CAAC,CAAC,EAAE,UAAU;IAmBvC,OAAO,CAAC,QAAQ,CAAC,eAAe,CAM/B;IAED,OAAO,CAAC,cAAc;CAmBtB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,+BAA+B,EAAE,uBAAuB,CAAA;KACxD;CACD"}