x4js 2.2.55 → 2.2.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x4js",
-  "version": "2.2.55",
+  "version": "2.2.57",
   "type": "module",
   "main": "src/x4.ts",
   "module": "src/x4.ts",

package/src/components/boxes/boxes.module.scss

@@ -5,7 +5,7 @@
  *   /    \____   _|  
  *  /__/\__\   |_|
  * 
- * @file boxes.ts
+ * @file boxes.module.scss
  * @author Etienne Cochard 
  * 
  * @copyright (c) 2026 R-libre ingenierie
@@ -14,529 +14,53 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { asap, class_ns, isArray, isNumber } from '../../core/core_tools';
-import { Component, ComponentEvents, ComponentProps, EvSelectionChange } from "../../core/component"
-import { EventCallback } from '../../core/core_events';
+@use "../shared.scss";
 
-import "./boxes.module.scss";
+.x4box {
+	// reset fieldset
+	margin: 0;
+	padding: 0;	
+	border: none;
 
-export interface BoxProps extends ComponentProps {
-	/** Optional HTML tag to use for the box. */
-	tag?: string;
+	min-width: 0;
+	min-height: 0;
+	flex-shrink: 0;
+	align-self: stretch;
 }
 
-/**
-* A generic container component for grouping and laying out child components.
- *
- * The `refs` object is a typed directory of the children you need to reach
- * again later. Assign a child to `refs` as you build the content: the
- * assignment expression evaluates to the component itself, so it can be
- * inlined directly in the content array.
- * 
- * @example
- * using refs: in your code, you can type
- * 
- * class MyBox extends Box {
- *   declare refs: {
- *   	a: Combobox;
- *      b: Input;
- *   }
- * 
- *   constructor( props ) {
- *      super( props );
- *      
- *      this.setContent( [
- *          this.refs.a = new ComboBox( { ... } );
- *          this.refs.b = new Input( { ... } );
- *      ])
- * 
- * 	 onSomeEvent() {
- *     this.refs.a.getValue();
- *   }
- * }
- * 
- * 
- * 
- */
-
-@class_ns( "x4" )
-export class Box<P extends BoxProps=BoxProps,E extends ComponentEvents=ComponentEvents> extends Component<P,E> {
-	protected refs: Record<string,Component> = {};
-}
-
-
-/**
- * A horizontal box layout component.
- * Arranges child components in a horizontal line.
- */
-
-@class_ns( "x4" )
-export class HBox<P extends BoxProps=BoxProps,E extends ComponentEvents=ComponentEvents> extends Box<P,E> {
-}
-
-/**
- * A vertical box layout component.
- * Arranges child components in a vertical stack.
- * The CSS class for this component is automatically generated as `x4vbox`.
- */
-
-@class_ns( "x4" )
-export class VBox<P extends BoxProps=BoxProps,E extends ComponentEvents=ComponentEvents> extends Box<P,E> {
-	constructor( p: P ) {
-		super( p );
+.x4hbox {
+	@extend %hbox;
+	&.align-start {
+		align-items: start;
 	}
 }
 
-
-type ContentBuilder = ( ) => Component;
-
-
-/**
- * Represents an item in a {@link StackBox}.
- */
-
-interface StackItem {
-	/** Unique name for the stack item. */
-	name: string;
-	/** Content of the stack item, either a component or a builder function. */
-	content: Component | ContentBuilder;
-	title?: string;
-}
-
-/**
- * Events specific to the {@link StackBox} component.
- */
-
-interface StackeBoxEvents extends ComponentEvents {
-	/** Fired when the current page changes. */
-	pageChange?: EvSelectionChange;
+.x4vbox {
+	@extend %vbox;
 }
 
-/**
- * Properties for the {@link StackBox} component.
- */
-
-export interface StackBoxProps extends Omit<ComponentProps,"content"> {
-	/** Name of the default page to display. */
-	default: string;
-
-	/** List of stack items. */
-	items: StackItem[];
-
-	/** Callback for page change events. */
-	pageChange?: EventCallback<EvSelectionChange>;
-}
-
-
-interface StackItemEx extends StackItem {
-	page: Component;
-}
-
-/**
- * A stack of widgets where only one widget is visible at a time.
- * The CSS class for this component is automatically generated as `x4stackbox`.
- */
-
-@class_ns( "x4" )
-export class StackBox<P extends StackBoxProps = StackBoxProps, E extends StackeBoxEvents = StackeBoxEvents>  extends Box<StackBoxProps,StackeBoxEvents> {
+.x4stackbox {
+	display: flex;
 	
-	protected _items: StackItemEx[];
-	protected _cur: number;
-
-	constructor( props: StackBoxProps ) {
-		super( props );
-
-		this.mapPropEvents( props, "pageChange" );
-
-		this._items = props.items?.map( itm => {
-			return { ...itm, page: null as any};
-		});
-
-		if( props.default ) {
-			this.select( props.default );
-		}
-		else if( this._items.length ) {
-			this.select( this._items[0].name );
-		}
-	}
-
-	/**
-     * Adds a new item to the stack.
-     * @param item - The item to add.
-     */
-
-	addItem( item: StackItem ) {
-		this._items.push( {
-			name: item.name,
-			content: item.content,
-			page: null
-		});
-	}
-
-	/**
-     * Removes an item from the stack by its name.
-     * @param name - The name of the item to remove.
-     */
-
-	removeItem( name: string ) {
-		const index = this._items.findIndex( x => x.name==name );
-		if( index>=0 ) {
-			const pg = this._items[index];
-			if( pg?.page ) {
-				this.removeChild( pg.page );
-			}
-
-			this._items.splice( index, 1 );
-		}
-	}
-
-	/**
-     * Selects a page by its name.
-     * @param name - The name of the page to select.
-     * @returns The selected page component, if any.
-     */
-	
-	select( name: string ) {
-		let sel = this.query( `:scope > .selected` );
-		if( sel ) {
-			sel.setClass( "selected", false );
-			(sel as any).deactivate?.( );
-		}
-
-		this._cur = this._items.findIndex( x => x.name==name );
-		const pg = this._items[this._cur];
-
-		if( pg ) {
-			if( !pg.page ) {
-				pg.page = this._createPage( pg );
-				this.appendContent( pg.page );
-			}
-
-			sel = pg.page;
-			if( sel ) {
-				(sel as any).activate?.( );
-				sel.setClass( "selected", true );
-			}
-
-			asap( ( ) => this.fire( "pageChange", { selection: [pg.name], empty: !sel } ) );
-		}
-
-		return pg?.page;
-	}
-
-	/**
-	 * 
-	 */
-
-	private _createPage( page: StackItemEx ) {
-		
-		let content: Component;
-		if( page.content instanceof Function ) {
-			content = page.content( );
-			page.content = content;	// keep it
-		}
-		else {
-			content = page.content;
-		}
-		
-		content?.setData( "stackname", page.name );
-		return content;
-	}
-
-	/**
-     * Retrieves a page by its name.
-     * @param name - The name of the page to retrieve.
-     * @returns The page content, if found.
-     */
-	
-	getPage( name: string ) {
-		const pg = this._items.find( x => x.name==name );
-		return pg ? pg.content : null;
+	&>* {
+		@extend %fit;
+		position: absolute !important;
 	}
 
-	/**
-     * Gets the total number of pages in the stack.
-     * @returns The number of pages.
-     */
-
-	getPageCount( ) {
-		return this._items.length;
-	}
-
-	/**
-     * Enumerates the names of all pages in the stack.
-     * @returns An array of page names.
-     */
-
-	enumPageNames( ) {
-		return this._items.map( x => x.name );
-	}
-
-	/**
-     * Retrieves a stack item by its name.
-     * @param name - The name of the item to retrieve.
-     * @returns The stack item, if found.
-     */
-
-	getItem( name: string ) {
-		const pg = this._items.find( x => x.name==name );
-		return pg;
-	}
-
-	/**
-     * Gets the name of the currently selected page.
-     * @returns The name of the current page, if any.
-     */
-
-	getCurPage( ) {
-		const c = this._items[this._cur];
-		return c?.name;
+	&>*:not(.selected) {
+		display: none !important;
 	}
 }
 
-// :: ASSIST BOX ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
-
-
-/**
- * A specialized stack box for assisted navigation, such as wizards or carousels.
- * The CSS class for this component is automatically generated as `x4assistbox`.
- */
-
-@class_ns( "x4" )
-export class AssistBox extends StackBox {
-
-	/**
-     * Selects the next or previous page in the stack.
-     * @param nxt - If `true`, selects the next page; otherwise, selects the previous page.
-     */
-
-	selectNextPage( nxt = true ) {
-		let p;
-		if( nxt && this._cur<this._items.length-1 ) {
-			p = this._items[this._cur+1];
-		}
-		else if( !nxt && this._cur>0 ) {
-			p = this._items[this._cur-1];
-		}
-
-		if( p ) {
-			this.select( p.name );
-		}
-	}
-
-	/**
-     * Checks if the current page is the first page.
-     * @returns `true` if the current page is the first page.
-     */
-
-	isFirstPage( ) {
-		return this._cur==0;
-	}
-
-	/**
-     * Checks if the current page is the last page.
-     * @returns `true` if the current page is the last page.
-     */
-
-	isLastPage( ) {
-		return this._cur==this._items.length-1;
-	}
-}
-
-
-
-// :: GRIDBOX ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
-
-interface GridBoxItem {
-	row: number;	// starts at 0
-	col: number;	// starts at 0
-	item: Component;
-}
-
-export interface GridBoxProps extends Omit<BoxProps,"content"> {
-	rows?: number | string | string[];
-	columns?: number | string | string[];
-	items?: GridBoxItem[];
-}
-
-/**
- * Grid-based layout container.
- * Auto-generates CSS class: `x4gridbox`.
- */
-
-@class_ns("x4")
-export class GridBox<P extends GridBoxProps=GridBoxProps,E extends ComponentEvents=ComponentEvents> extends Box<P,E> {
-
-	constructor( props: P ) {
-		super( props );
-
-		if( props.rows!==undefined ) {
-			this.setRows( props.rows );
-		}
-
-		if( props.columns!==undefined ) {
-			this.setCols( props.columns );
-		}
-
-		if( props.items ) {
-			this.setItems( props.items );
-		}
-	}
-
-	/**
-     * Sets grid rows (e.g., `2`, `"1fr 2fr"`, `["1fr", "2fr"]`).
-     * @param r - Rows definition.
-     */
-
-	setRows( r: number | string | string[] ) {
-		if( isArray(r) ) {
-			r = r.join( " " );
-		}
-		else if( isNumber(r) ) {
-			r = `repeat( ${r}, 1fr )`;
-		}
-
-		this.setStyleValue( "gridTemplateRows", r );
-	}
-
-	/**
-     * Sets grid columns (e.g., `3`, `"1fr 1fr"`, `["auto", "1fr"]`).
-     * @param r - Columns definition.
-     */
-
-	setCols( r: number | string | string[] ) {
-		if( isArray(r) ) {
-			r = r.join( " " );
-		}
-		else if( isNumber(r) ) {
-			r = `repeat( ${r}, 1fr )`;
-		}
-
-		this.setStyleValue( "gridTemplateColumns", r );
-	}
-
-	/**
-     * Sets the number of rows.
-     * @param n - Row count.
-     */
-
-	setRowCount( n: number ) {
-		this.setStyleValue( "gridTemplateRows", `repeat(${n})` );
-	}
-
-	/**
-     * Sets the number of columns.
-     * @param n - Column count.
-     */
-
-	setColCount( n: number ) {
-		this.setStyleValue( "gridTemplateColumns", `repeat(${n})` );
-	}
-
-	/**
-     * Sets grid template areas (e.g., `["a a", "b c"]`).
-     * @param t - Template strings.
-     */
-
-	setTemplate( t: string[] ) {
-		this.setAttribute( "grid-template-area", t.map( x => '"' + x + '"' ).join(" ") );
-	}
-
-	/**
-     * Places items at specific grid positions.
-     * @param items - Array of `{row, col, item}`.
-     */
-
-	setItems( items: GridBoxItem[] ) {
-		items.forEach( x => {
-			x.item.setStyle( {
-				gridColumn: (x.col+1)+"",
-				gridRow: (x.row+1)+"",
-			} );
-		});
-
-		this.setContent( items.map( x => x.item ) );
-	}
-}
-
-
-// :: MASONRY ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
-
-// from a nice article of Andy Barefoot
-//	https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb
-
-interface MasonryProps extends Omit<BoxProps,"content"> {
-	items: Component[];
+.x4gridbox {
+	display: grid;
 }
 
-/**
- * Masonry-style layout (Pinterest-like).
- * Auto-generates CSS class: `x4masonrybox`.
- */
-
-@class_ns("x4")
-export class MasonryBox extends Box<MasonryProps> {
-
-	constructor(props: MasonryProps ) {
-		super(props);
-
-		this.addDOMEvent( 'resized', () => {
-			this.resizeAllItems( );
-		});
-
-		if( props.items ) {
-			this.setItems( props.items );
-		}
-	}
-
-	/**
-     * Resizes a single masonry item.
-     * @param item - Item to resize.
-     */
-
-	resizeItem(item: Component) {
-		const style = this.getComputedStyle();
-
-		const rowHeight = parseInt(style['gridAutoRows']);
-		const rowGap = parseInt(style['rowGap']);
+.x4masonrybox {
+	display: grid;
+	grid-gap: 10px;
+	grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
+	grid-auto-rows: 10px;
 
-		let content = item.query('.content');
-		if( !content ) {
-			content = item;
-		}
-
-		if (content && (rowHeight + rowGap)) {
-			const rc = content.getBoundingRect();
-			const rowSpan = Math.ceil( (rc.height + rowGap) / (rowHeight + rowGap) );
-			item.setStyleValue('gridRowEnd', "span " + rowSpan);
-		}
-	}
-	  
-	/**
-     * Resizes all items to fit the grid.
-     */
-
-	resizeAllItems( ) {
-		const els = this.queryAll( ".item" );
-		els.forEach( itm => {
-			this.resizeItem( itm );
-		} );
-	}
-
-	/**
-     * Sets masonry items.
-     * @param items - Array of components.
-     */
-
-	setItems( items: Component[] ) {
-		const els = items.map( x => {
-			return new Box( {
-				cls: 'item',
-				content: x
-			} );
-		});
-		
-		this.setContent( els );
-	}
+	overflow: hidden;
 }
-

package/src/components/boxes/boxes.ts

@@ -62,6 +62,9 @@ export interface BoxProps extends ComponentProps {
 @class_ns( "x4" )
 export class Box<P extends BoxProps=BoxProps,E extends ComponentEvents=ComponentEvents> extends Component<P,E> {
 	protected refs: Record<string,Component> = {};
+	constructor( props: P ) {
+		super( { tag: "fieldset", ...props } );
+	}
 }
 
 

package/src/components/btngroup/btngroup.module.scss

@@ -38,4 +38,83 @@
 			fill: var( --border );
 		}
 	}
+}
+
+.x4btngroup.packed {
+    gap: 0px;
+
+    .x4button {
+        background-color: var( --ol-button-background );
+        margin: 0;
+        color: var( --ol-button-color );
+
+        .x4icon {
+            height: 1.5em;
+            width: 1.5em;
+        }
+
+            #icon {
+                height: 1.5em;
+                width: 1.5em;
+		}
+
+        &:not(:disabled) {
+            #icon {
+                .fa-secondary {
+                    fill: var( --accent-background-hover );
+                    opacity: 0.7;
+                }
+                
+                .fa-primary {
+                    fill:  var( --accent-background );
+                }
+            }
+
+            &.icon-danger:not(:disabled) {
+                #icon {
+                    .fa-primary {
+                        fill: var( --alert-background );
+                    }
+                }
+            }
+
+            &.icon-success {
+                #icon {
+                    .fa-primary {
+                        fill: var( --success-background );
+                    }
+                }
+            }
+
+            &:hover{
+                background-color: var( --ol-button-background-hover );
+                color: var( --ol-button-color-hover );
+            }	
+
+            &:active{
+                background-color: var( --ol-button-background-active );
+                color: var( --ol-button-color-active );
+                #icon {
+                    color: var( --button-icon-color );
+                }
+            }	
+
+            &:focus {
+                background-color: var( --ol-button-background-hover );
+            }
+        }
+
+        &:disabled {
+            color: var( --disabled-color-dark );
+            #icon {
+                .fa-primary {
+                    fill: var( --disabled-color-dark ) !important;
+                }
+
+				.fa-secondary {
+                    fill: var( --disabled-background ) !important;
+                }
+            }
+        }
+    }
 }

package/src/components/button/button.module.scss

@@ -85,6 +85,10 @@
 		}
 	}
 
+	&:disabled> #icon {
+		fill: var( --button-color-disabled );
+	}
+
 	&> #label {
 		flex-grow: 1;
 

package/src/components/header/header.module.scss

@@ -10,7 +10,7 @@
 	width: 100%;
 	display: block;
 	overflow: hidden;
-	min-height: 2em;
+	min-height: 1em;
 	border-bottom: 1px solid var( --border );
 
 

package/src/components/header/header.ts

@@ -1,4 +1,4 @@
-import { class_ns } from '../../core/core_tools';
+import { class_ns, getScrollbarSize } from '../../core/core_tools';
 import { Component, ComponentProps } from '../../core/component';
 import { HBox } from '../boxes/boxes';
 import { Label } from '../label/label';
@@ -106,8 +106,9 @@ export class Header extends HBox<HeaderProps> {
 		} );
 
 		const rc = this.getBoundingRect( );
+        const cs = this.getComputedStyle( );
 		
-		let   rest = (rc.width-filled-10);
+		let   rest = (rc.width-filled-getScrollbarSize()) - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight);
 		const unit = Math.ceil( rest/count );
 
 		//console.log( "filled", filled );

package/src/components/listbox/listbox.module.scss

@@ -44,6 +44,7 @@
 
 	&>.x4header {
 		border-bottom: 1px solid var( --border );
+        padding: 0 4px;
 	}
 
 	&>.title {
@@ -82,65 +83,64 @@
 		}
 	}
 
-		.x4item {
-			@extend %flex;
-			
-
-			padding: 4px;
-			background-color: transparent;
-			color: var( --text-primary );
-
-			// multicolumns
-			&:has( >.x4hbox ) {
-				padding: 4px 0;
-			}
-
-		--label-color: var( --listbox-item-color );
-			
-			.x4label,
-			.x4simpletext {
-				padding: 2px 6px;
-			
-				#icon {
-					color: var( --listbox-icon-color );
-					fill: var( --listbox-icon-color );
-				}
-			}
-
-			&:hover {
-				background-color: var( --listbox-item-background-hover );
-			--label-color: var( --listbox-item-color-hover );
-			}
-
-			&.selected {
-				background-color: var( --listbox-item-background-sel );
-				color: var( --listbox-item-color-sel );
-
-			--label-color: var( --listbox-item-color-sel );
-
-				&> .x4label {
-					#icon {
-						color: var( --listbox-item-color-sel );
-						fill: var( --listbox-item-color-sel );
-					}
-				}
-			}
-
-			.column {
-				background-color: transparent; 
-				overflow: hidden; 
-			}
-
-			.ref-c1 { width: var( --ref-c1-width); }
-			.ref-c2 { width: var( --ref-c2-width); }
-			.ref-c3 { width: var( --ref-c3-width); }
-			.ref-c4 { width: var( --ref-c4-width); }
-			.ref-c5 { width: var( --ref-c5-width); }
-
-			//&:active{
-				//background-color: var( --color-80 );
-				//color: var(--color-0);
-			//}	
+    .x4item {
+        @extend %flex;
+        
+        padding: 4px;
+        background-color: transparent;
+        color: var( --text-primary );
+
+        // multicolumns
+        &:has( >.x4hbox ) {
+            padding: 4px 0;
+        }
+
+        --label-color: var( --listbox-item-color );
+        
+        .x4label,
+        .x4simpletext {
+            padding: 2px 6px;
+        
+            #icon {
+                color: var( --listbox-icon-color );
+                fill: var( --listbox-icon-color );
+            }
+        }
+
+        &:hover {
+            background-color: var( --listbox-item-background-hover );
+        --label-color: var( --listbox-item-color-hover );
+        }
+
+        &.selected {
+            background-color: var( --listbox-item-background-sel );
+            color: var( --listbox-item-color-sel );
+
+        --label-color: var( --listbox-item-color-sel );
+
+            &> .x4label {
+                #icon {
+                    color: var( --listbox-item-color-sel );
+                    fill: var( --listbox-item-color-sel );
+                }
+            }
+        }
+
+        .column {
+            background-color: transparent; 
+            overflow: hidden; 
+        }
+
+        .ref-c1 { width: var( --ref-c1-width); }
+        .ref-c2 { width: var( --ref-c2-width); }
+        .ref-c3 { width: var( --ref-c3-width); }
+        .ref-c4 { width: var( --ref-c4-width); }
+        .ref-c5 { width: var( --ref-c5-width); }
+
+        //&:active{
+            //background-color: var( --color-80 );
+            //color: var(--color-0);
+        //}	
 
 	}
 
@@ -152,7 +152,7 @@
 		border-top: 1px solid var(--border);
 		margin: 0;
 
-		&.x4btngroup {
+		&.--x4btngroup {
 			gap: 0px;
 
 			.x4button {

package/src/components/listbox/listbox.ts

@@ -113,6 +113,7 @@ private _view: Viewport;
 
 		if( props.footer ) {
 			props.footer.setAttribute( "id", "footer" );
+            props.footer.addClass( "packed" );
 		}
 
 		if( props.header ) {

package/src/components/popup/popup.ts

@@ -172,12 +172,13 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 	displayAt( x: number, y: number ) {
 		const zm = getGlobalZoom( );
 		
-		//TODO: check is already visible
-		this.setStyle( {
-			left: (x/zm)+"px",
-			top: (y/zm)+"px",
-		})
+        x /= zm;
+        y /= zm;
 
+        this.setStyleValue( "left", x );
+		this.setStyleValue( "top", y );
+
+		//TODO: check is already visible
 		this._do_show( );	// to compute size
 
 		const rc = this.getBoundingRect( ).scale( 1/zm );

package/src/components/propgrid/progrid.module.scss

@@ -11,6 +11,7 @@
 
 	--propertygrid-odd-background: var(--color-primary-a5);
 	--propertygrid-even-background: transparent;
+	--propertygrid-disabled-background: rgb(170 170 170 / 14%);
 }
 
 .x4propertygrid {
@@ -31,71 +32,6 @@
 	&> #footer {
 		border-top: 1px solid var(--border);
 		margin: 0;
-
-		&.x4btngroup {
-			gap: 0px;
-
-			.x4button {
-				background-color: var( --ol-button-background );
-				margin: 0;
-				color: var( --ol-button-color );
-
-				&:disabled {
-					color: var( --ol-button-color-disabled );
-				}
-								
-				.x4icon {
-					height: 1.5em;
-					width: 1.5em;
-
-					.fa-primary, .fa-secondary {
-						fill:  var( --accent-background );
-					}
-				}
-
-				&.icon-danger {
-					.x4icon {
-						.fa-secondary {
-							fill: var( --disabled-color-dark);
-							opacity: 0.7;
-						}
-
-						.fa-primary {
-							fill: var( --alert-background );
-						}
-					}
-				}
-
-				&.icon-success {
-					.x4icon {
-						.fa-primary {
-							fill: var( --success-background );
-						}
-					}
-				}
-
-				&:hover{
-					background-color: var( --ol-button-background-hover );
-					color: var( --ol-button-color-hover );
-				}	
-
-				&:active{
-					background-color: var( --ol-button-background-active );
-					color: var( --ol-button-color-active );
-					#icon {
-						color: var( --button-icon-color );
-					}
-				}	
-
-				&:focus {
-					background-color: var( --ol-button-background-hover );
-				}
-
-				&:disabled {
-					color: var( --disabled-color-dark );
-				}
-			}
-		}
 	}
 
 	.root {
@@ -158,13 +94,18 @@
 		//border-left: 1px solid var(--color-primary-a50);
 		//border-right: 1px solid var(--color-primary-a50);
 
-		&.even {
+		&.even:not(:disabled) {
 			background-color: var(--propertygrid-even-background)
 		}
-		&.odd {
+		
+		&.odd:not(:disabled) {
 			background-color: var(--propertygrid-odd-background)
 		}
 
+		&.odd:disabled {
+			background-color: var(--propertygrid-disabled-background)
+		}
+		
 		&:has(:focus) {
 			background-color: var(--color-primary-a20);
 		}

package/src/components/propgrid/propgrid.ts

@@ -79,6 +79,7 @@ export class PropertyGrid extends VBox {
 
 		if( props.footer ) {
 			props.footer.setAttribute( "id", "footer" );
+			props.footer.addClass( "packed" );
 		}
 
 		const scroller = new ScrollView( { cls: "body" } );

package/src/components/tooltips/tooltips.scss

@@ -40,6 +40,8 @@
 	border: 1px solid var( --tooltip-border ); 
 	background-color: var( --tooltip-background );
 
+    width: max-content;
+
 	.x4icon {
 		padding: 2px 4px;
 		svg {

package/src/core/component.ts

@@ -899,18 +899,20 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 
 	enable( ena = true ): this {
 		this.setAttribute( "disabled", !ena ? 'true' : null );
+		this.setAttribute( "inert", !ena ? 'true' : null );
 
+		/*
+		boxes are now fieldset, this is native
 		if( this.dom instanceof HTMLInputElement || this.dom instanceof HTMLButtonElement ) {
 			this.dom.disabled = !ena;
 		}
 
-		// propagate diable state to all input children
-		const nodes = this.enumChildNodes( true );
+		// propagate enable state to all input children
+		const nodes = this.enumChildComponents( true );
 		nodes.forEach( x => {
-			if( x instanceof HTMLInputElement || x instanceof HTMLButtonElement ) {
-				x.disabled = !ena;
-			}
+			x.enable( ena );
 		});
+		*/
 
 		return this;
 	}