x4js 2.3.29 → 2.3.31

package/README.md

@@ -4,7 +4,7 @@
 </picture>
 
 # x4js
-**A TypeScript framework for people who build applications, not markup.**
+**A full TypeScript framework for web and desktop applications.**
 
 ## Home page
 see [X4 home page](https://x4js.org)

package/aicontext.md

@@ -42,7 +42,7 @@ CoreElement<E>                 named timers + event surface (no DOM)
   │     ├── SvgComponent → Chart
   │     ├── CSizer → HSizer / VSizer
   │     ├── FileDialog, ScrollView, Viewport, DockingView, Carousel, Flex, Space
-  │     ├── HBox-based: ColorInput, Rating, Switch, Tag, Keyboard, TextEdit → AutoComplete, Breadcrumbs
+  │     ├── HBox-based: ColorInput, Rating, Switch, Tag, Keyboard, MenuBar, TextEdit → AutoComplete, Breadcrumbs
   │     └── VBox-based: Calendar, ColorPicker, FileDrop, Panel, PropertyGrid, TextArea, SettingsView, SettingItem
   └── Application<E>           singleton, no DOM of its own
 
@@ -832,7 +832,10 @@ type TextEditProps = (TextInputProps | NumberProps | DateProps | TimeProps) & {
   labelWidth?: number; inputWidth?: number; inputId?: string
   inputGadgets?: Component[]; inputAttrs?: any
 }
-// style, tooltip, hidden, flex, stretch, height: on the box (label + field); dom_events: on the input
+// style, tooltip, hidden, flex, stretch, height: on the box (label + field); dom_events: on the input,
+//   set when it is made, before the handlers of Input and of the class (the keys of an AutoComplete): they run
+//   first, and see the state before the class reacts (Enter before the suggestion is chosen). To run after them:
+//   textEdit.getInput( ).addDOMEvent( "keydown", ... ) once the component is made
 class TextEdit extends HBox {
   getValue(): string; setValue(value: string): void; getInput(): Input
 }
@@ -886,6 +889,7 @@ interface CheckboxProps extends ComponentProps {
 // 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 ) } )
+// its icon 24px: --checkbox-button-icon-size, set by a class of the application ( .small { --checkbox-button-icon-size: 16px } )
 // 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
@@ -911,6 +915,7 @@ class Radio extends Component {
 }
 // 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.
+// its icon 24px: --radio-button-icon-size, set by a class of the application ( .small { --radio-button-icon-size: 16px } )
 ```
 
 ### `Switch`
@@ -1162,6 +1167,7 @@ interface TreeviewProps extends Omit<ComponentProps,"content"> {
   click?: EventCallback<EvClick>
   dblClick?: EventCallback<EvDblClick>
   selectionChange?: EventCallback<EvSelectionChange>
+  contextMenu?: EventCallback<EvContextMenu>  // as a Listbox: the item under the mouse selected, ev.context its id (null out of the items), no menu of the browser
 }
 // emptyMsg: as for a Listbox. Without it the text is _tr.global.empty_list ("Empty list").
 // There is no `renderer`: an item is drawn from its `text`, `iconId`, `cls` and `sub_cols`.
@@ -1194,6 +1200,7 @@ interface SpreadsheetColumn {               // GridColumn +
 interface EvCellChange { row; col /* index */; colId /* store key */; value /* writable */; oldValue }
 class Spreadsheet extends Component {
   getSelection(): /* cell */; navigate(sens: kbNav): boolean; lock(lock): void
+  clearSelection(notify = true): void               // no cell selected; notify: selectionChange, its selection empty
   editCell(row, col, clear = false): boolean         // cell must be visible
   stopEdit(commit = true): void;  isEditing(): boolean
 }
@@ -1266,13 +1273,33 @@ class PropertyGrid extends VBox {
 interface MenuItem {
   text: string | UnsafeHtml
   cls?: string; icon?: string; menu?: Menu; disabled?: boolean
+  checked?: boolean | (() => boolean)                // a check as icon when there is no icon
   click?: DOMEventHandler
+  shortcut?: string                                  // "Mod+S": shown at the right (shortcutText), not added: see addShortcut
 }
 type MenuElement = MenuItem | Component | string    // string "-" = title/separator
 interface MenuProps extends Omit<PopupProps,"content"> { items: MenuElement[] }
 class Menu extends Popup {}                          // displayAt/displayNear/displayCenter/close
 ```
 
+### `MenuBar`
+
+```ts
+interface MenuBarItem {
+  text: string; icon?: string; disabled?: boolean
+  items: MenuElement[] | (() => MenuElement[])       // its Menu, built at each opening; a function is called then
+}
+interface MenuBarProps extends Omit<BoxProps,"content"> { items: MenuBarItem[] }
+class MenuBar extends HBox {}
+// a click on a title opens its menu under it, a second one closes it; while a menu is open, the mouse
+// on another title opens that one. No keyboard. For a web application: a desktop application
+// (Electron...) should use the menu of the system, not a MenuBar
+new MenuBar({ items: [
+  { text: "File", items: [{ text: "Open…", shortcut: "Mod+O", click: open }, "-", { text: "Quit", click: quit }] },
+  { text: "Edit", items: () => [{ text: "Undo", disabled: !canUndo(), click: undo }] },
+] })
+```
+
 ### `BtnGroup`
 
 ```ts
@@ -1335,7 +1362,9 @@ class Tabs extends Box {
 
 ```ts
 interface PopupProps extends ComponentProps {
-  autoClose?: boolean | string             // true, or a group name
+  autoClose?: boolean | string             // true, or a group name: closed by a press outside; while it is shown,
+                                           //   a wheel outside every popup is ignored (the page does not scroll);
+                                           //   a press in a popup closes the other groups opened after it, not its own
   sizable?: boolean; movable?: boolean
 }
 class Popup extends Box {
@@ -1343,7 +1372,8 @@ class Popup extends Box {
   displayNear(rc: Rect, dst?: string, src?: string, offset?: {x,y}): void
   displayCenter(center?: boolean): void
   close(): void
-  dismiss(after?: boolean): void
+  dismiss(after?: boolean): void           // closes the popups of its autoClose group; after: only those opened
+                                           //   after it (none when it is no longer open)
   isOpen(): boolean
   // show()/hide() inherited from Component; show() routes to displayCenter()
 }
@@ -1385,6 +1415,10 @@ class MessageBox extends Dialog {
   static showAsync(msg: string|UnsafeHtml, buttons?: BtnGroupItem[], title?: string,
                    icon_type?: "error"|"question"): Promise<string>
 }
+// no icon_type: an error (its icon, the title _tr.global.error, the class "error"); its title bar and its buttons
+//   in the colours of the alerts: a filled button in --alert-*, an outline one with a red border when focused.
+//   The "!" of an error, the "?" of a question: white in the disc of the icon (--msgbox-icon-mark-color,
+//   --msgbox-question-icon-mark-color)
 class InputBox extends Dialog {
   getValue(): string
   // static showAsync(msg, value, title?, options?: {password?, trim?}): Promise<string>  (null if cancelled or closed)
@@ -1759,6 +1793,7 @@ new Button({ label: 'Paste', click: async () => {
 - The events go to the component that has the focus: give it a `tabindex`.
 - Out of an event, the browser may refuse, and there is no system clipboard on a page that is not served in https. What the application set last is then what `getClipboard` gives: copy and paste still work inside the application.
 - An image is written as a PNG; another format is converted. Files can be read in a `paste` event only, and cannot be written.
+- An image offered in several formats (Inkscape: a SVG, then a PNG) is read as the PNG, by `getClipboard` and `getEventClipboard`; else the first image.
 
 ---
 
@@ -1834,14 +1869,15 @@ by the browser, in its own locale, whatever this one.
 --color-primary-a0 … --color-primary-a100     /* the scale: a0 the background, a100 the text, the accent between */
 /* the globals the components use: --background-primary / -secondary / -ternary / -hover / -active / -input,
    --text-primary / -secondary / -ternary, --border / -light / -hover / -focus, --accent-background / -hover /
-   -focus / -active / -light, --accent-color (the text on the accent), --disabled-*, --icon-color / -active,
-   --alert-*, --warning-*, --success-* */
+   -focus / -active / -light, --accent-color (the text on the accent), --accent-text (the accent as a text on the
+   background: a button checked or focused; light in the dark theme), --disabled-*, --icon-color / -active,
+   --alert-*, --warning-*, --success-*, --shadow-color (the shadow of what floats: dialog, list, notification, tooltip) */
 ```
 // The greys are mixes of a0 and a100: a theme that reverses the scale gets them light on dark.
 // Each component reads its own variables (the @cssvar of its class), which point to these globals:
 //   a theme redefines the globals, or one variable of a component.
 // Themes: Application.setTheme(name) puts the class x4theme-<name> on <html>. "" is the light theme (by default),
-//   "dark" the dark theme of x4 (the greys of VS Code Dark Modern, its blues from #5796ca). An application adds its own theme in its css,
+//   "dark" the dark theme of x4 (the greys of VS Code Dark Modern, its blues from #2d6fa5: the accent #245883). An application adds its own theme in its css,
 //   html.x4theme-pink { --color-primary-a0: ...; ... }, then Application.setTheme("pink").
 // The font: --font-name and --font-size (14px), on :root (normalize.scss); body takes them. To change the size
 //   of the text, set --font-size ( :root { --font-size: 13px } ), not the font-size of <html>: the components
@@ -2218,6 +2254,8 @@ class CMover {
 }
 createPainter(c2d: CanvasRenderingContext2D, w: number, h: number): CanvasEx   // Canvas painter
 initTooltips(): void                                   // initialize the global tooltip system
+// a tooltip: 30vw wide at most (--tooltip-max-width; none: the width of its text); it goes at a click, and when its
+//   element is removed or hidden (checked every second while it is shown)
 ```
 
 JSX, in `.tsx` files: in tsconfig.json `"jsx": "react"` and `"jsxFactory": "x4_react.create_element"` (esbuild reads

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "x4js",
-  "version": "2.3.29",
+  "version": "2.3.31",
+  "description": "A full TypeScript framework for web and desktop applications: components written as classes (layouts, inputs, lists, grids, dialogs, forms, charts...) and a command line to create, serve and build them.",
   "license": "MIT",
   "type": "module",
   "main": "src/x4.ts",

package/src/components/assets/icons.ts

@@ -19,6 +19,8 @@ const x4icons = {
 	danger: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>`,
 	loading: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M207.4 20.4c2.4 8.5-2.6 17.3-11.2 19.7C101.5 66.2 32 153 32 256c0 123.7 100.3 224 224 224s224-100.3 224-224c0-103-69.5-189.8-164.3-215.9c-8.5-2.4-13.5-11.2-11.2-19.7s11.2-13.5 19.7-11.2C432.5 39.1 512 138.2 512 256c0 141.4-114.6 256-256 256S0 397.4 0 256C0 138.2 79.5 39.1 187.7 9.2c8.5-2.4 17.3 2.6 19.7 11.2z"/></svg>`,
 	close_box: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="currentColor"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M192 233.4L59.5 100.9 36.9 123.5 169.4 256 36.9 388.5l22.6 22.6L192 278.6 324.5 411.1l22.6-22.6L214.6 256 347.1 123.5l-22.6-22.6L192 233.4z"/></svg>`,
+	// a triangle to the right: a menu item that opens a sub menu
+	caret: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" fill="currentColor"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/></svg>`,
 	// a triangle, a "!" cut in it
 	warning: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M8 1L15.5 14.5H.5zM7.25 5.5h1.5V10h-1.5zM7 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0z"/></svg>`,
 };

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

@@ -47,7 +47,7 @@
 	--ol-button-icon-color: var( --text-primary );
 
 	--ol-button-border-focus: var( --accent-background-focus );
-	--ol-button-color-focus: var( --accent-background );
+	--ol-button-color-focus: var( --accent-text );
 }
 
 .x4button {

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

@@ -29,9 +29,10 @@
 
 	--checkbox-button-border: var( --border );
 	--checkbox-button-color: var( --text-ternary );
-	--checkbox-button-color-checked: var( --accent-background-active );
+	--checkbox-button-color-checked: var( --accent-text );
 	--checkbox-button-background-checked: var( --background-secondary );
 	--checkbox-button-border-checked: var( --accent-background );
+	--checkbox-button-icon-size: 24px;		// set by a class of the application on a checkbox: it wins over :root
 
 	--checkbox-danger-color: var( --alert-background );
 	--checkbox-danger-background: var( --alert-background-light );
@@ -187,8 +188,8 @@
 		#icon {
 			color: var( --checkbox-ink );
 			fill: var( --checkbox-ink );
-			width: 24px;
-			height: 24px;
+			width: var( --checkbox-button-icon-size );
+			height: var( --checkbox-button-icon-size );
 		}
 	}
 

package/src/components/checkbox/checkbox.ts

@@ -54,6 +54,7 @@ interface CheckboxProps extends ComponentProps {
  * --checkbox-button-color-checked
  * --checkbox-button-background-checked
  * --checkbox-button-border-checked
+ * --checkbox-button-icon-size
  * --checkbox-danger-color
  * --checkbox-danger-background
  * ```

package/src/components/dialog/dialog.module.scss

@@ -20,6 +20,7 @@
 	--color-dialog-caption: var( --accent-background-active );
 	--color-dialog-caption-text: var( --accent-color );
 	--color-dialog-background: var( --background-primary );
+	--color-dialog-border: transparent;		// its shadow is enough on a light background
 }
 
 .x4dialog {
@@ -28,6 +29,7 @@
 
 	position: absolute !important;
 	background-color: var( --color-dialog-background );
+	border: 1px solid var( --color-dialog-border );
 	max-width: 99vw;
 	outline: none;
 	

package/src/components/dialog/dialog.ts

@@ -55,6 +55,7 @@ interface DialogEvents extends PopupEvents {
  * --color-dialog-caption
  * --color-dialog-caption-text
  * --color-dialog-background
+ * --color-dialog-border
  * ```
  */
 

package/src/components/menu/menu.module.scss

@@ -25,6 +25,15 @@
 	--menuitem-color-active: var( --accent-color-active );
 	--menuitem-background-hover: var( --accent-background-hover );
 	--menuitem-color-hover: var( --accent-color-hover );
+	--menuitem-shortcut-color: var( --text-secondary );
+
+	--menubar-background: var( --background-primary );
+	--menubar-border: var( --border );
+
+	--menubaritem-color: var( --text-primary );
+	--menubaritem-background-hover: var( --accent-background-hover );
+	--menubaritem-color-hover: var( --accent-color-hover );
+	--menubaritem-color-disabled: var( --disabled-color-dark );
 }
 
 .x4menu {
@@ -84,6 +93,20 @@
 			@extend %flex;
 		}
 
+		// the keys of the command: after the text, which takes the width, at the right
+		#shortcut {
+			color: var(--menuitem-shortcut-color);
+			padding-left: 16px;
+			white-space: nowrap;
+		}
+
+		// hovered, active, disabled: in the colour of the text
+		&:hover, &.opened, &:active, &[disabled] {
+			#shortcut {
+				color: inherit;
+			}
+		}
+
 		&.title {
 			color: var( --text-primary );
 			cursor: auto;
@@ -92,12 +115,10 @@
 			font-weight: 600;
 		}
 
-		&.popup {
-			&:after {
-				//<todo: see that
-				content: url("./caret-right-solid.svg");
-				width: 6px;
-			}
+		// the triangle of a sub menu: after the text, which takes the width, at the right
+		#sub {
+			width: 6px;
+			height: 12px;
 		}
 
 		&:hover:not(.title),
@@ -126,4 +147,40 @@
 		border-bottom: 1px solid var(--border);
 		margin-bottom: 4px;
 	}
+}
+
+.x4menubar {
+	padding: 0 4px;
+
+	background-color: var(--menubar-background);
+	border-bottom: 1px solid var(--menubar-border);
+
+	.x4cmenubaritem {
+		@extend %hbox;
+
+		gap: 6px;
+		padding: 4px 10px;
+		color: var(--menubaritem-color);
+		cursor: pointer;
+		user-select: none;
+
+		transition: background-color 0.1s;
+
+		#icon {
+			width: 16px;
+			height: 16px;
+		}
+
+		// hovered, or its menu open: as an item of the menu
+		&:hover:not([disabled]),
+		&.opened {
+			background-color: var(--menubaritem-background-hover);
+			color: var(--menubaritem-color-hover);
+		}
+
+		&[disabled] {
+			color: var(--menubaritem-color-disabled);
+			cursor: auto;
+		}
+	}
 }

package/src/components/menu/menu.ts

@@ -17,9 +17,11 @@
 import { Component } from "../../core/component"
 import { DOMEventHandler } from '../../core/core_dom';
 import { Timer, UnsafeHtml, isFunction, isString } from '../../core/core_tools';
+import { shortcutText } from '../../core/core_shortcuts';
 
 import { Popup, PopupProps } from '../popup/popup';
 import { Icon } from '../icon/icon';
+import { BoxProps, HBox } from '../boxes/boxes';
 
 import icons from "../assets/icons";
 import "./menu.module.scss"
@@ -38,6 +40,13 @@ export interface MenuItem {
 	disabled?: boolean;
 	checked?: boolean | ( () => boolean);
 	click?: DOMEventHandler;
+
+	/**
+	 * the keys of the command, shown at the right of the item: "Mod+S" is written
+	 * "Ctrl+S", "⌘S" on a Mac (shortcutText). Shown only: the shortcut itself
+	 * is added by Application.addShortcut or Component.addShortcut
+	 */
+	shortcut?: string;
 }
 
 export type MenuElement = MenuItem | Component | string;
@@ -56,6 +65,7 @@ export interface MenuProps extends Omit<PopupProps,"content"> {
  * --menuitem-color-active
  * --menuitem-background-hover
  * --menuitem-color-hover
+ * --menuitem-shortcut-color
  * ```
  */
 
@@ -95,8 +105,11 @@ class CMenuItem extends Component {
 		}
 
 		this.setContent( [
-			new Icon({ id:"icon", iconId }), 
-			new Component( { id: "text", content: itm.text } )
+			new Icon({ id:"icon", iconId }),
+			new Component( { id: "text", content: itm.text } ),
+			itm.shortcut ? new Component( { id: "shortcut", content: shortcutText( itm.shortcut ) } ) : null,
+			// a sub menu: a triangle at the right, in the colour of the text
+			itm.menu ? new Icon( { id: "sub", iconId: icons.caret } ) : null,
 		]);
 
 		if( itm.menu ) {
@@ -205,3 +218,134 @@ export class Menu extends Popup {
 	}
 }
 
+/**
+ *
+ */
+
+export interface MenuBarItem {
+	text: string;
+	icon?: string;
+	disabled?: boolean;
+
+	/** its menu; a function is called at each opening: it gives the items of that time */
+	items: MenuElement[] | ( ( ) => MenuElement[] );
+}
+
+export interface MenuBarProps extends Omit<BoxProps,"content"> {
+	items: MenuBarItem[];
+}
+
+/**
+ * a title of the bar
+ */
+
+class CMenuBarItem extends Component {
+	static classPrefix = "x4";
+
+	constructor( itm: MenuBarItem ) {
+		super( { disabled: itm.disabled } );
+
+		this.setContent( [
+			itm.icon ? new Icon( { id: "icon", iconId: itm.icon } ) : null,
+			new Component( { id: "text", content: itm.text } ),
+		] );
+	}
+}
+
+/**
+ * A row of titles, each one opens its menu under it.
+ * A click on a title opens its menu, a second one closes it. While a menu is open, the
+ * mouse on another title opens the menu of that one.
+ *
+ * For a web application. A desktop application (Electron...) should not use it: the menu
+ * of the system is preferable, where the user expects it (the top of the screen on a Mac)
+ * and with the keyboard of the system.
+ *
+ * @example
+ * new MenuBar( { items: [
+ *     { text: "File", items: [ { text: "Open…", shortcut: "Mod+O", click: open }, "-", { text: "Quit", click: quit } ] },
+ *     { text: "Edit", items: ( ) => [ { text: "Undo", disabled: !canUndo( ), click: undo } ] },
+ * ] } );
+ *
+ * @cssvar
+ * ```
+ * --menubar-background
+ * --menubar-border
+ * --menubaritem-color
+ * --menubaritem-background-hover
+ * --menubaritem-color-hover
+ * --menubaritem-color-disabled
+ * ```
+ */
+
+export class MenuBar extends HBox<MenuBarProps> {
+	static classPrefix = "x4";
+
+	private _menu: Menu;				// the menu open, null when none
+	private _title: CMenuBarItem;		// the title of that menu
+	private _closed: CMenuBarItem;		// the title whose menu closed last
+	private _closedAt = -1;				// when (performance.now)
+
+	constructor( props: MenuBarProps ) {
+		super( props );
+
+		this.setContent( props.items.map( itm => {
+			const title = new CMenuBarItem( itm );
+
+			// The menu closes by itself as soon as the button goes down outside of it,
+			// before the title hears of it: it was the menu of this title if it closed
+			// since this very press began.
+			let wasOpen = false;
+
+			title.addDOMEvent( "pointerdown", ev => { wasOpen = this._closed===title && this._closedAt >= ev.timeStamp; } );
+			title.addDOMEvent( "click", ( ) => {
+				if( !wasOpen ) {
+					this._open( title, itm );
+				}
+			} );
+
+			title.addDOMEvent( "mouseenter", ( ) => {
+				if( this._menu && this._title!==title ) {
+					this._open( title, itm );
+				}
+			} );
+
+			return title;
+		} ) );
+	}
+
+	/**
+	 * closes the menu open, opens the one of the title under it
+	 */
+
+	private _open( title: CMenuBarItem, itm: MenuBarItem ) {
+		if( title.isDisabled( ) ) {
+			return;
+		}
+
+		if( this._menu ) {
+			this._menu.dismiss( );
+		}
+
+		const menu = new Menu( { items: isFunction( itm.items ) ? itm.items( ) : itm.items } );
+
+		menu.on( "closed", ( ) => {
+			title.removeClass( "opened" );
+
+			this._closed = title;
+			this._closedAt = performance.now( );
+
+			if( this._menu===menu ) {
+				this._menu = null;
+				this._title = null;
+			}
+		} );
+
+		this._menu = menu;
+		this._title = title;
+		title.addClass( "opened" );
+
+		menu.displayNear( title.getBoundingRect( ), "top left", "bottom left" );
+	}
+}
+

package/src/components/messages/circle-exclamation.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/><path class="mark" d="M256 128c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>

package/src/components/messages/circle-question.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" fill="currentColor"><!--!Font Awesome Free 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM320 240C302.3 240 288 254.3 288 272C288 285.3 277.3 296 264 296C250.7 296 240 285.3 240 272C240 227.8 275.8 192 320 192C364.2 192 400 227.8 400 272C400 319.2 364 339.2 344 346.5L344 350.3C344 363.6 333.3 374.3 320 374.3C306.7 374.3 296 363.6 296 350.3L296 342.2C296 321.7 310.8 307 326.1 302C332.5 299.9 339.3 296.5 344.3 291.7C348.6 287.5 352 281.7 352 272.1C352 254.4 337.7 240.1 320 240.1zM288 432C288 414.3 302.3 400 320 400C337.7 400 352 414.3 352 432C352 449.7 337.7 464 320 464C302.3 464 288 449.7 288 432z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" fill="currentColor"><!--!Font Awesome Free 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576z"/><path class="mark" d="M320 240C302.3 240 288 254.3 288 272C288 285.3 277.3 296 264 296C250.7 296 240 285.3 240 272C240 227.8 275.8 192 320 192C364.2 192 400 227.8 400 272C400 319.2 364 339.2 344 346.5L344 350.3C344 363.6 333.3 374.3 320 374.3C306.7 374.3 296 363.6 296 350.3L296 342.2C296 321.7 310.8 307 326.1 302C332.5 299.9 339.3 296.5 344.3 291.7C348.6 287.5 352 281.7 352 272.1C352 254.4 337.7 240.1 320 240.1zM288 432C288 414.3 302.3 400 320 400C337.7 400 352 414.3 352 432C352 449.7 337.7 464 320 464C302.3 464 288 449.7 288 432z"/></svg>

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

@@ -22,6 +22,10 @@
 	--msgbox-icon-color:  var( --alert-background );
 	--msgbox-question-icon-color: var( --accent-background );		// a question, an InputBox, a PromptBox
 
+	// the "!" and the "?" in the disc of the icon: as the text on the red, on the accent
+	--msgbox-icon-mark-color: var( --alert-color );
+	--msgbox-question-icon-mark-color: var( --accent-color );
+
 	--msgbox-log-background: var( --background-ternary );		// the lines of a ProgressionBox
 	--msgbox-log-border: var( --border );
 	--msgbox-log-border-focus: var( --border-focus );
@@ -44,6 +48,22 @@
 		}
 	}
 
+	// the buttons of an error in the red of its title bar: a filled one, the focus of an outline
+	// one (its text stays the one of the text: a red text is not read on a dark background)
+	&.error {
+		--button-background: var( --alert-background );
+		--button-background-hover: var( --alert-background-active );
+		--button-background-focus: var( --alert-background-active );
+		--button-background-active: var( --alert-background-active );
+		--button-color: var( --alert-color );
+		--button-color-hover: var( --alert-color );
+		--button-color-focus: var( --alert-color );
+		--button-color-active: var( --alert-color );
+
+		--ol-button-border-focus: var( --alert-background );
+		--ol-button-color-focus: var( --ol-button-color );
+	}
+
 	& .x4form {
 		min-width: 400px;
 
@@ -51,6 +71,10 @@
 		> .x4hbox > .x4icon {
 			color: var( --msgbox-icon-color );
 			height: 96px;
+
+			.mark {
+				fill: var( --msgbox-icon-mark-color );
+			}
 		}
 
 		.x4label {
@@ -61,6 +85,10 @@
 
 	&.question .x4form > .x4hbox > .x4icon {
 		color: var( --msgbox-question-icon-color );
+
+		.mark {
+			fill: var( --msgbox-question-icon-mark-color );
+		}
 	}
 }
 

package/src/components/messages/messages.ts

@@ -37,6 +37,8 @@ export interface MessageBoxProps extends DialogProps {
  * --msgbox-caption-color
  * --msgbox-icon-color
  * --msgbox-question-icon-color
+ * --msgbox-icon-mark-color
+ * --msgbox-question-icon-mark-color
  * --msgbox-log-background
  * --msgbox-log-border
  * --msgbox-log-border-focus
@@ -47,7 +49,11 @@ export interface MessageBoxProps extends DialogProps {
  * --msgbox-log-scrollbar
  * ```
  * --msgbox-caption-* and --msgbox-icon-color are the ones of an error; a question, an InputBox
- * and a PromptBox have the title bar of a Dialog and their icon in --msgbox-question-icon-color
+ * and a PromptBox have the title bar of a Dialog and their icon in --msgbox-question-icon-color.
+ * The "!" of an error and the "?" of a question are drawn in the disc of their icon, in
+ * --msgbox-icon-mark-color and --msgbox-question-icon-mark-color.
+ * The buttons of an error are in the colours of the alerts (--alert-*): a filled one, the border
+ * of an outline one that has the focus
  */
 
 export class MessageBox extends Dialog<DialogProps>

package/src/components/notification/notification.module.scss

@@ -54,7 +54,10 @@
 		color: var( --notification-icon-default );
 	}
 	
+	// a box does not shrink (.x4box): this one does, down to the frame, its close button kept in it
 	.body {
+		flex-shrink: 1;
+
 		.title {
 			font-weight: bold;
 			padding: 6px 6px 3px 6px;
@@ -64,6 +67,7 @@
 		.text {
 			padding: 3px 6px 6px 6px;
 			color: var( --notification-text-color );
+			overflow-wrap: anywhere;		// a long word, an address: cut at the edge
 		}
 	}