x4js 2.3.26 → 2.3.28

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2026 R-libre ingenierie
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -1,3 +1,8 @@
+<picture>
+	<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/rlibre/x4/main/logox4-v3-dark.svg">
+	<img src="https://raw.githubusercontent.com/rlibre/x4/main/logox4-v3.svg" alt="x4 logo" width="96">
+</picture>
+
 # x4js
 **A TypeScript framework for people who build applications, not markup.**
 

package/aicontext.md

@@ -36,7 +36,7 @@ CoreElement<E>                 named timers + event surface (no DOM)
   │     │     ├── BtnGroup, Tabs, Video, Saturation
   │     ├── Button, Input, Icon, Label, SimpleText, Checkbox, Radio, Link, SimpleTextArea
   │     ├── Listbox, Gridview, Treeview, Select, Combobox, Slider, Gauge
-  │     ├── Progress, TickLine, Canvas, Image, Spreadsheet, MonacoEditor
+  │     ├── Progress, TickLine, Timeline, Canvas, Image, Spreadsheet, MonacoEditor
   │     ├── SvgComponent → Chart
   │     ├── CSizer → HSizer / VSizer
   │     ├── FileDialog, ScrollView, Viewport, DockingView, Flex, Space
@@ -227,12 +227,16 @@ queryAll(selector: string): Component[]
 firstChild<T>(): T;  lastChild<T>(): T
 nextElement<T>(): T; prevElement<T>(): T
 parentElement<T>(cls?: Constructor<T>): T
+closest<T>(selector: string): T             // this one or an ancestor whose element matches the css selector; null if none
+contains(other: Component | Node): boolean  // other (a node, or the element of a component) is the element of this one or inside it
 childCount(): number
 enumChildComponents(recursive: boolean): Component[]
 enumChildNodes(recursive: boolean): Node[]
 visitChildren(cb: (el: Component) => boolean): void
 static parentElement<T>(dom: Node, cls?: Constructor<T>): T   // starts at the parent of dom, not at dom:
                                                                // test componentFromDOM(dom) first for the component of dom itself
+static closest<T>(dom: Element, selector: string): T           // starts at dom itself: in a click handler,
+                                                               // Component.closest(ev.target as Element, '.item')
 ```
 
 ### Visibility / state / focus / geometry
@@ -614,6 +618,41 @@ class Rating extends HBox {
 }
 ```
 
+### `Timeline` — events on a line, each with its icon in a round mark
+
+```ts
+interface TimelineItem {
+  icon?: string                            // in the round mark
+  title: string | UnsafeHtml               // in bold
+  text?: string | UnsafeHtml               // the sentence under it, in grey
+  date?: Date                              // written relative to now, in the locale: "il y a 2 heures", "yesterday"; none: no time shown
+  done?: boolean                           // the mark in the accent; else a grey mark
+}
+interface TimelineProps extends ComponentProps {
+  items?: TimelineItem[]
+  vertical?: boolean                       // true by default; false: the events side by side
+  renderer?: (item: TimelineItem) => Component   // what is beside the mark (the mark and the line stay)
+  click?: EventCallback<EvClick>           // a click anywhere in an event: ev.context is its TimelineItem
+}
+interface TimelineEvents extends ComponentEvents { click: EvClick }
+class Timeline extends Component<TimelineProps, TimelineEvents> {
+  setItems(items: TimelineItem[]): void    // the relative times are written here, not updated after
+}
+// the line to the next mark: in the accent when the next event is done, dashed after an event not done
+// CSS vars: --timeline-done-color --timeline-done-icon-color --timeline-todo-color --timeline-todo-icon-color
+//           --timeline-title-color --timeline-text-color --timeline-time-color
+```
+
+```ts
+new Timeline({
+  items: [
+    { icon: branch, title: 'New branch', text: 'fix-notifications, from master', date: created, done: true },
+    { icon: review, title: 'Code review', text: 'Waiting for a reviewer' },
+  ],
+  click: ev => this.openStep(ev.context as TimelineItem),
+})
+```
+
 ---
 
 ## Input components
@@ -701,9 +740,14 @@ new SimpleTextArea({ flex: 1, placeholder: 'Your message', resize: false })
 
 ```ts
 interface CheckboxProps extends ComponentProps {
-  label: string; checked?: boolean; value?: boolean|number|string; name?: string
+  label?: string; icon?: string            // no label: the icon alone (give it a tooltip)
+  checked?: boolean; value?: boolean|number|string; name?: string
   change?: EventCallback<EvChange>
 }
+// cls: "left" (label on the left), "button" ("button outline" rounded), "danger" (checked in red, its box or its
+// button: "button danger"); without the box, the input is still reached by Tab (--checkbox-button-*, -danger-*)
+// A toggle button is a Checkbox with cls "button": getCheck() tells whether it is pressed, change when it changes
+//   new Checkbox( { cls: "button", icon: icon_bold, tooltip: "Bold", change: ( ev ) => this.setBold( ev.value ) } )
 // in a Form: without value (or a boolean one), a boolean; with one, the value when checked, null when not
 class Checkbox extends Component {
   getCheck(): boolean; setCheck(ck: boolean): void
@@ -727,6 +771,8 @@ class Radio extends Component {
   setLabel(text: string): void
   checkValue(vname: string): void          // check the radio whose value === vname, in the group of its form (else of the page)
 }
+// cls: "button" (a button; "button outline" rounded), "danger" (checked in red, its round or its button: "button
+// danger"). Without the round, the input is still reached by Tab.
 ```
 
 ### `Switch`
@@ -806,6 +852,8 @@ class AutoComplete extends TextEdit {
   getSelection(): ListboxID                 // id of the picked item, undefined for a free text
   setSelection(item: ListItem): void;  showDropDown(): void
 }
+// Keys: ↓ (or ↑), the list closed, opens it: the suggestions found last, or else a search of the text as it is
+// (even empty: minChars is for typing). The list open: ↑ ↓ choose, Enter picks, Escape closes.
 // Use Combobox for a fixed, known list; AutoComplete when suggestions come from a search (server).
 // In a Form the value is the field content (text or id, per itemValue).
 ```
@@ -1082,6 +1130,8 @@ class Button extends Component {
   setText(text: string|UnsafeHtml): void
   setIcon(icon: string): void
 }
+// A toggle button (pressed / not pressed) is not a Button: it is a Checkbox with cls "button" (see Checkbox),
+// and one choice among several pressed buttons, Radios with cls "button".
 ```
 
 ### `Tabs`
@@ -1306,20 +1356,27 @@ class VSplitBox extends VBox               // panels stacked, resizable height:
 
 // Low level: only place sizers by hand when a SplitBox does not fit (popup edges, header cells...).
 class CSizer extends Component             // base splitter; events start, resize { size, width, height }, stop
-class HSizer extends CSizer                // horizontal splitter
-class VSizer extends CSizer                // vertical splitter
+class HSizer extends CSizer {              // horizontal splitter, between two children of a HBox
+  constructor(side: "before" | "after" | boolean = "after")   // the child it resizes; a boolean (older code): true after, false before
+}
+class VSizer extends CSizer {              // vertical splitter, between two children of a VBox; same constructor
+  constructor(side: "before" | "after" | boolean = "after")
+}
+// new HBox( { content: [ list, new HSizer( "before" ), new VBox( { flex: 1 } ) ] } )   // the list is resized
 // A pointercancel (a touch taken by the browser) ends the resize as a pointerup does: stop is fired.
 // The columns of a Gridview or a Spreadsheet are 16px wide at least (the min-width of a cell).
 class ScrollView extends Component { getViewport(): Component }
 class Viewport extends Component
 class Canvas extends Component { getContext(): CanvasRenderingContext2D; paint(): void }
-class Video extends Box {                   // class x4video
+class Video extends Box {                   // class x4video; props: src? (a file, url), stream? (wins over src), autoplay?, muted?, playsInline?
   play(): Promise<boolean>                 // false: could not start (a click of the user wanted, a source not playable); no source: waits for one
   pause(); mute(set: boolean)
   get player(): HTMLVideoElement; get duration(): number; get paused(): boolean
   get volume(): number; get videoWidth(): number; get videoHeight(): number
+  get src(): string; set src(url: string)
   set stream(stream: MediaStream)
 }
+// The image fills the box of the Video, fitted (object-fit: contain): the box keeps its size, whatever the size of the stream.
 class Calendar extends VBox {               // props: date?, minDate?, maxDate? (days out of them cannot be chosen), change ("change": the day clicked)
   getDate(): Date; setDate(date: Date): void   // copies: the calendar keeps its own date
 }
@@ -1453,6 +1510,7 @@ component.addShortcut(keys, callback, options?)         // a view: while the foc
 Application.instance().addShortcut(keys, callback, options?)   // the whole application, wherever the focus is
 
 shortcutText(keys: string): string                     // for a tooltip or a menu: "Ctrl+Z", "⌘Z" on a Mac
+isMac: boolean                                          // true on a Mac, an iPhone or an iPad: Mod is Cmd there
 
 class Shortcuts {                                       // the list itself; rarely used directly
   add(keys: string | string[], callback: (ev: KeyboardEvent) => void, options?: ShortcutOptions): void
@@ -1741,6 +1799,8 @@ class X4PDFBuilder {
   page(width: number, height: number, callback: (ctx: PageContext) => void): void   // points; without size 612 x 792
   build(): Uint8Array
   buildAsync(): Promise<Uint8Array>          // streams compressed (FlateDecode)
+  buildBlob(): Blob                          // the file, application/pdf (build)
+  buildURL(): string                         // an object url of it: iframe src, link, window.open; URL.revokeObjectURL frees it
 }
 export interface PageContext {                // origin bottom left, y goes up
   text(str, x, y, size, opts?: { align?: 'left'|'center'|'right'; width?; color?; bold? }): void
@@ -1799,6 +1859,13 @@ createPainter(c2d: CanvasRenderingContext2D, w: number, h: number): CanvasEx   /
 initTooltips(): void                                   // initialize the global tooltip system
 ```
 
+JSX, in `.tsx` files: in tsconfig.json `"jsx": "react"` and `"jsxFactory": "x4_react.create_element"` (esbuild reads
+them), and `"files": [ "node_modules/x4js/src/x4tsx.d.ts" ]` for the JSX types (`ref`); each `.tsx` file imports `x4_react`.
+`<X a={1}>{kids}</X>` is `new X( { a: 1, content: kids } )`; a tag in lower case is an html element (its attributes set,
+an attribute `on...` an event); arrays in braces are flattened, `null`, `undefined` and `false` give nothing (`setContent`
+does not flatten nested arrays: build such a content in JSX); `ref={[owner, "name"]}` keeps the element in
+`owner.refs.name`, the owner a Box.
+
 No tooltip is shown until the application calls `initTooltips()` once (the prop `tooltip` only sets an attribute).
 `initTooltips()` shows the text of the attribute `tooltip` (the prop `tooltip`), or the one `getTip()`
 of a `"tip-handler"` gives, **as html**. A text that comes from a user is escaped by the application
@@ -2039,6 +2106,6 @@ Optional keys: `external`, `define`, `esbuild`, `dev` (`host`, `port`, `https`,
 - `Gridview` is backed by a `DataStore`; `Spreadsheet` is backed by a `Store` (different, cell-based).
 - `DataRecordID` is currently typed `any`; `strictNullChecks` is intentionally off in the recommended `tsconfig.json`.
 - `MonacoEditor` requires `MonacoEditor.start()` (async) before use; register extra typings with `MonacoEditor.addTypelib(name, code)`.
-- `x4_react.create_element` is the JSX pragma; 
+- `x4_react.create_element` is the JSX pragma (the setup: JSX factory & helpers).
 - A DOM handler of an ancestor is called for the events of its descendants, as in the browser. Not for the events that do not bubble: `focus`, `blur`, `mouseenter`, `mouseleave` (use `focusin` / `focusout`, `mouseover` / `mouseout`), nor for those of x4: `created`, `removed`, `resized`.
 - Several handlers of one event on one node are called in the order they were added. One that returns `true` stops those that follow it.

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "x4js",
-  "version": "2.3.26",
+  "version": "2.3.28",
+  "license": "MIT",
   "type": "module",
   "main": "src/x4.ts",
   "module": "src/x4.ts",

package/src/components/autocomplete/autocomplete.ts

@@ -63,7 +63,7 @@ export interface AutoCompleteProps extends Omit<TextInputProps,"type"|"change">,
 	/** delay between the last key and the search, in ms (default 250) */
 	delay?: number;
 
-	/** number of chars needed to start a search (default 1) */
+	/** number of chars typed needed to start a search (default 1); ↓ searches whatever the length */
 	minChars?: number;
 
 	/** custom renderer for the suggestions */
@@ -84,6 +84,10 @@ const render_id_item = ( item: ListItem ) => {
 /**
  * Text field with suggestions asked on demand (search event).
  *
+ * Keys: ↓ (or ↑), the list closed, opens it: the suggestions found last, or else a search of
+ * the text as it is, whatever its length (minChars is for typing). The list open: ↑ ↓ choose,
+ * Enter picks, Escape closes.
+ *
  * @example
  * new AutoComplete( {
  *   label: "Customer",
@@ -268,7 +272,7 @@ export class AutoComplete extends TextEdit<AutoCompleteEvents> {
 	private _on_focusout( ev: FocusEvent ) {
 		// focus is moving inside the control
 		const to = ev.relatedTarget as Node;
-		if( to && this.dom.contains( to ) ) {
+		if( to && this.contains( to ) ) {
 			return;
 		}
 

package/src/components/boxes/boxes.ts

@@ -123,8 +123,8 @@ function split_content( panels: Component[], horz: boolean ) {
 	els.forEach( ( p, i ) => {
 		if( i>0 ) {
 			const prev = els[i-1];
-			const next = prev.hasClass( "x4flex" ) && !p.hasClass( "x4flex" );
-			res.push( horz ? new HSizer( next ) : new VSizer( next ) );
+			const side = prev.hasClass( "x4flex" ) && !p.hasClass( "x4flex" ) ? "after" : "before";
+			res.push( horz ? new HSizer( side ) : new VSizer( side ) );
 		}
 
 		res.push( p );

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

@@ -165,11 +165,12 @@
 		color: var( --ol-button-color-active );
 		fill: var( --ol-button-color-active );
 
+		// in the colour of the text: the background stays light, not the accent of a filled button
 		#icon {
-			color: var( --button-icon-color );
-			fill: var( --button-icon-color );
+			color: var( --ol-button-color-active );
+			fill: var( --ol-button-color-active );
 		}
-	}	
+	}
 }
 
 .x4button.danger:not([disabled]) {

package/src/components/calendar/calendar.ts

@@ -358,7 +358,7 @@ export class PopupCalendar extends Popup {
 		let newfocus = <HTMLElement>e.target;
 
 		// child of this: ok
-		if (this.dom.contains(newfocus)) {
+		if (this.contains(newfocus)) {
 			return;
 		}
 

package/src/components/chart/chart.ts

@@ -264,7 +264,7 @@ export class Chart extends SvgComponent<ChartProps,ChartEvents> {
 
 		this.addDOMEvent( "click", ( e ) => {
 			const el = ( e.target as Element ).closest( "[data-index]" );
-			if( el && this.dom.contains( el ) ) {
+			if( el && this.contains( el ) ) {
 				const serie = parseInt( el.getAttribute( "data-serie" ) );
 				const index = parseInt( el.getAttribute( "data-index" ) );
 				this.fire( "click", { serie, index, value: this._series[serie]?.values[index] } );

package/src/components/checkbox/checkbox.module.scss

@@ -25,6 +25,16 @@
 	--checkbox-check-border: var( --border );
 	--checkbox-check-border-hover: var( --border-hover );
 	--checkbox-check-color: var( --accent-color );
+	--checkbox-focus: var( --accent-background );
+
+	--checkbox-button-border: var( --border );
+	--checkbox-button-color: var( --text-ternary );
+	--checkbox-button-color-checked: var( --accent-background-active );
+	--checkbox-button-background-checked: var( --background-secondary );
+	--checkbox-button-border-checked: var( --accent-background );
+
+	--checkbox-danger-color: var( --alert-background );
+	--checkbox-danger-background: var( --alert-background-light );
 }
 
 .x4checkbox {
@@ -136,8 +146,64 @@
 		order: 2;
 	}
 
-	&.left #label {
+	// its label has no id: the element, before the box
+	&.left label {
 		order: 0;
 		text-align: left;
 	}
+}
+
+// button: a button, its background and its border marked when checked (no bold: its width
+// would change with its state). The box hidden, its input still in the page (not display: none),
+// so that Tab and the space bar reach it; the focus of the keyboard shown around it
+.x4checkbox.button {
+	// the colour of its icon and its text
+	--checkbox-ink: var( --checkbox-button-color );
+
+	gap: 0;
+	margin: 0;
+	padding: 8px;
+	border: 1px solid var( --checkbox-button-border );
+
+	&.outline {
+		border-radius: 22px;
+	}
+
+	.inner {
+		width: 0;
+		height: 0;
+		overflow: hidden;
+		opacity: 0;
+	}
+
+	&:has(input:focus-visible) {
+		outline: 1px dotted var( --checkbox-focus );
+		outline-offset: 2px;
+	}
+
+	label {
+		--label-color: var( --checkbox-ink );
+
+		#icon {
+			color: var( --checkbox-ink );
+			fill: var( --checkbox-ink );
+			width: 24px;
+			height: 24px;
+		}
+	}
+
+	&:has(input:checked) {
+		--checkbox-ink: var( --checkbox-button-color-checked );
+		background-color: var( --checkbox-button-background-checked );
+		border-color: var( --checkbox-button-border-checked );
+	}
+}
+
+// danger: checked in the red of the alerts, its box or its button
+.x4checkbox.danger {
+	--checkbox-background-check: var( --checkbox-danger-color );
+	--checkbox-background-check-hover: var( --checkbox-danger-color );
+	--checkbox-button-color-checked: var( --checkbox-danger-color );
+	--checkbox-button-background-checked: var( --checkbox-danger-background );
+	--checkbox-button-border-checked: var( --checkbox-danger-color );
 }

package/src/components/checkbox/checkbox.ts

@@ -21,7 +21,8 @@ interface CheckBoxEvents extends ComponentEvents {
  */
 
 interface CheckboxProps extends ComponentProps {
-	label: string; 			// The text label for the checkbox.
+	label?: string; 		// The text label for the checkbox; none: its icon alone (with a tooltip)
+	icon?: string;			// an icon before its label
 	checked?: boolean;		// Optional boolean indicating if the checkbox is checked by default.
 	value?: boolean | number | string;			// Optional value associated with the checkbox.
 	name?: string;
@@ -30,7 +31,13 @@ interface CheckboxProps extends ComponentProps {
 
 /**
  * Checkbox component that can be checked or unchecked.
- * 
+ * Its look, by its class (cls): "left" (its label on the left), "button" (a button, "button
+ * outline" rounded), "danger" (checked in red, its box or its button). Without the box, its
+ * input is still reached by Tab.
+ *
+ * A toggle button is a Checkbox with the class "button":
+ * new Checkbox( { cls: "button", icon: icon_bold, tooltip: "Bold", change: ( ev ) => setBold( ev.value ) } )
+ *
  * @cssvar
  * ```
  * --checkbox-background-check
@@ -41,6 +48,14 @@ interface CheckboxProps extends ComponentProps {
  * --checkbox-check-border
  * --checkbox-check-border-hover
  * --checkbox-check-color
+ * --checkbox-focus
+ * --checkbox-button-border
+ * --checkbox-button-color
+ * --checkbox-button-color-checked
+ * --checkbox-button-background-checked
+ * --checkbox-button-border-checked
+ * --checkbox-danger-color
+ * --checkbox-danger-background
  * ```
  */
 
@@ -80,11 +95,12 @@ export class Checkbox extends Component<CheckboxProps,CheckBoxEvents> {
 					})
 				] 
 			}),
-			new Label( { 
+			new Label( {
 				tag: 'label',
-				text: props.label, 
-				labelFor: inputId, 
-				id: undefined 
+				text: props.label,
+				icon: props.icon,
+				labelFor: inputId,
+				id: undefined
 			} ),
 		])
 

package/src/components/colorinput/colorinput.module.scss

@@ -71,6 +71,7 @@
 		margin: 0;
 		height: 100%;
 		flex-grow: 1;
+		min-width: 0;		// narrower than its default size in a narrow box: it does not overflow
 	}
 
 	// the eye dropper: as high as the field, and wide enough to be aimed at

package/src/components/combobox/combobox.module.scss

@@ -72,7 +72,10 @@
 	&> #label {
 
 		&> .x4label {
-			padding: 0 6px 0 0;
+			// its text on the right of its width (labelWidth), its colon against the gap of the box:
+			// in a form, under the one of a TextEdit
+			justify-content: end;
+			padding: 0;
 			border-bottom: 1px solid transparent;
 	
 			height: 100%;

package/src/components/components.ts

@@ -45,6 +45,7 @@ export * from "./tag/tag"
 export * from "./textarea/textarea"
 export * from "./textedit/textedit"
 export * from "./tickline/tickline"
+export * from "./timeline/timeline"
 export * from "./tooltips/tooltips"
 export * from "./treeview/treeview"
 export * from "./video/video"

package/src/components/dockingview/dockingview.ts

@@ -404,7 +404,7 @@ export class DockingView extends Component<DockingViewProps, DockingViewEvents>
 		this.fills.forEach( fill => fill( ) );
 		this.placeFloats( );
 
-		if( focused instanceof HTMLElement && this.dom.contains( focused ) ) {
+		if( focused instanceof HTMLElement && this.contains( focused ) ) {
 			focused.focus( );
 		}
 	}

package/src/components/gridview/gridview.module.scss

@@ -73,6 +73,11 @@
 
 	background-color: var( --gridview-background );
 	border: 1px solid var( --gridview-border );
+
+	// disabled: faded as a Box (a Gridview is not one)
+	&[disabled] {
+		opacity: var( --box-disabled-opacity );
+	}
 	color: var( --gridview-cell-color );
 		
 	.cell {
@@ -159,6 +164,7 @@
 			}
 
 			.percent {
+				align-self: center;		// a Box stretches (top of the cell): centered in the row
 				width: 100%;
 				border: 1px solid var( --border );
 				height: 8px;

package/src/components/input/input.module.scss

@@ -20,7 +20,7 @@
 
 	--input-sel-background: var( --accent-background );
 	--input-sel-color: var( --accent-color );
-	--input-placeholder: var( --disabled-background );
+	--input-placeholder: var( --disabled-color-dark );		// a text colour: seen on the background of the field, in both themes
 	--input-error: var( --alert-background );
 
 	--input-color-disabled: var( --disabled-color-dark );

package/src/components/listbox/listbox.ts

@@ -14,7 +14,7 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { Component, ComponentEvent, ComponentEvents, componentFromDOM, ComponentProps, EvChange, EvClick, EvContextMenu, EvDblClick, EvSelectionChange } from '../../core/component';
+import { Component, ComponentEvent, ComponentEvents, ComponentProps, EvChange, EvClick, EvContextMenu, EvDblClick, EvSelectionChange } from '../../core/component';
 import { EventCallback } from '../../core/core_events';
 import { kbNav, isArray, UnsafeHtml, asap } from '../../core/core_tools';
 
@@ -283,47 +283,38 @@ private _view: Viewport;
 	 */
 	
 	private _on_click( ev: MouseEvent ) {
-		let target = ev.target as HTMLElement;
-		let on_check = false;
+		const target = ev.target as Element;
 
-		while( target && target!=this.dom ) {
-			const c = componentFromDOM( target );
+		// avoid trapping child click
+		if( Component.closest( target, "input" ) ) {
+			return;
+		}
 
-			// avoid trapping child click
-			if( c && c.dom.tagName==='INPUT' ) {
+		// an item of this list, not of a list around it
+		const c = Component.closest( target, ".x4item" );
+		if( c && this.contains( c ) ) {
+			// the case changes alone; a double click on it is ignored
+			if( Component.closest( target, ".x4check" ) ) {
+				if( ev.type == 'click' ) {
+					this._toggleCheck( c );
+				}
 				return;
 			}
 
-			if( c && c.hasClass("x4check") ) {
-				on_check = true;
+			const id = c.getInternalData( "id" );
+			const fev: EvClick = { context:id };
+			if (ev.type == 'click') {
+				this.fire('click', fev );
+			}
+			else {
+				this.fire('dblClick', fev );
 			}
 
-			if( c && c.hasClass("x4item") ) {
-				// the case changes alone; a double click on it is ignored
-				if( on_check ) {
-					if( ev.type == 'click' ) {
-						this._toggleCheck( c );
-					}
-					return;
-				}
-
-				const id = c.getInternalData( "id" );
-				const fev: EvClick = { context:id };
-				if (ev.type == 'click') {
-					this.fire('click', fev );
-				}
-				else {
-					this.fire('dblClick', fev );
-				}
-
-				if (!fev.defaultPrevented) {
-					this._selectItem( id, c, ev.ctrlKey ? 'toggle' : 'single', ev.type == 'click' && this.props.reselect );
-				}
-				
-				return;
+			if (!fev.defaultPrevented) {
+				this._selectItem( id, c, ev.ctrlKey ? 'toggle' : 'single', ev.type == 'click' && this.props.reselect );
 			}
 
-			target = target.parentElement;
+			return;
 		}
 
 		if (ev.type == 'click') {
@@ -344,19 +335,14 @@ private _view: Viewport;
 
 		ev.preventDefault();		
 
-		let target = ev.target as HTMLElement;
-		while( target && target!=this.dom ) {
-			const c = componentFromDOM( target );
-			if( c && c.hasClass("x4item") ) {
-				const id = c.getInternalData( "id" );
-				
-				this._selectItem(id, c, 'single' );
-				this.fire('contextMenu', {uievent: ev, context: id } );
-			
-				return;
-			}
+		const c = Component.closest( ev.target as Element, ".x4item" );
+		if( c && this.contains( c ) ) {
+			const id = c.getInternalData( "id" );
 
-			target = target.parentElement;
+			this._selectItem(id, c, 'single' );
+			this.fire('contextMenu', {uievent: ev, context: id } );
+
+			return;
 		}
 
 		this.fire('contextMenu', { uievent:ev, context: null } );

package/src/components/messages/messages.module.scss

@@ -46,7 +46,9 @@
 
 	& .x4form {
 		min-width: 400px;
-		.x4icon {
+
+		// the icon of the box only, not those of its message
+		> .x4hbox > .x4icon {
 			color: var( --msgbox-icon-color );
 			height: 96px;
 		}
@@ -57,7 +59,7 @@
 		}
 	}
 
-	&.question .x4form .x4icon {
+	&.question .x4form > .x4hbox > .x4icon {
 		color: var( --msgbox-question-icon-color );
 	}
 }
@@ -68,7 +70,9 @@
 
 	& .x4form {
 		min-width: 400px;
-		.x4icon {
+
+		// the icon of the box only, not those of its editor (the stars of a Rating...)
+		> .x4hbox > .x4icon {
 			color: var( --msgbox-question-icon-color );
 			height: 64px;
 		}
@@ -141,7 +145,8 @@
 			}
 		}
 
-		.x4icon {
+		// the spinner of the box only, not the icons of the lines of its log
+		> .x4hbox > .x4icon {
 			    height: 64px;
 				animation: rotating 3s linear infinite;
 				fill: var(--accent-background);