x4js 2.3.27 → 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

@@ -740,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
@@ -766,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`
@@ -845,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).
 ```
@@ -1121,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`
@@ -1345,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
 }
@@ -1781,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
@@ -1839,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
@@ -2079,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.27",
+  "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",

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/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/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/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);

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

@@ -9,7 +9,7 @@
     --propertygrid-gadget-background: var( --background-primary );
     --propertygrid-gadget-color: var( --text-primary );
 
-	--propertygrid-odd-background: var(--color-primary-a5);
+	--propertygrid-odd-background: var( --background-odd );
 	--propertygrid-even-background: transparent;
 	--propertygrid-disabled-background: rgb(170 170 170 / 14%);
 	--propertygrid-hover-background: var(--color-primary-a10);
@@ -54,8 +54,6 @@
 		padding: 6px 4px 4px 4px;
 		min-height: 2em;
 		background-color: var( --propertygrid-group-background );
-		margin-bottom: 8px;
-        box-shadow: 4px 3px 8px rgba(0, 0, 0, 0.4);
         color: var( --propertygrid-group-color );
         display: flex;
 		align-items: center;
@@ -81,9 +79,14 @@
                 font-weight: bold;
             }
             
+            // the button that folds the group: as high as the title, its icon in the colour
+            // of the group when it has the focus (its background stays transparent)
             &>.x4button {
+                --button-color-focus: var( --propertygrid-group-color );
                 background-color: transparent;
                 color: var( --propertygrid-group-color );
+                margin: 0;
+                padding: 0;
             }
 
             &>.x4label {
@@ -99,14 +102,19 @@
             }
         }
 
-        &>.desc {
+        // under the title, in the box of the header
+        .desc {
             font-style: italic;
             font-weight: normal;
-            font-size: 90%;
+            font-size: 80%;
+            padding-top: 4px;
+            padding-left: 1em;
             color: var( --text-ternary );
         }
 
+		// the space is between the last row of a group and the next group, none under the title
 		&:not(:first-child ) {
+			margin-top: 8px;
 			//border-top: 1px solid var(--color-primary-a50);
 		}
 

package/src/components/radio/radio.module.scss

@@ -16,8 +16,36 @@
 
 :root {
 	--radio-background: var( --background-primary );
+	--radio-check-background: var( --accent-background );
 	--radio-check-color: var( --accent-color );
-	--radio-square-border-checked: var( --accent-color );
+	--radio-focus: var( --accent-background );
+
+	--radio-button-border: var( --border );
+	--radio-button-color: var( --text-ternary );
+	--radio-button-color-checked: var( --accent-background-active );
+	--radio-button-background-checked: var( --background-secondary );
+	--radio-button-border-checked: var( --accent-background );
+
+	--radio-danger-color: var( --alert-background );
+	--radio-danger-background: var( --alert-background-light );
+}
+
+// button: the round hidden, its input still in the page (not display: none),
+// so that Tab and the arrows reach it; the focus of the keyboard shown around the radio
+%radio-no-round {
+	gap: 0;		// no space kept for the round
+
+	.inner {
+		width: 0;
+		height: 0;
+		overflow: hidden;
+		opacity: 0;
+	}
+
+	&:has(input:focus-visible) {
+		outline: 1px dotted var( --radio-focus );
+		outline-offset: 2px;
+	}
 }
 
 .x4radio {
@@ -69,7 +97,7 @@
 			height: 100%;
 
 			.fa-primary {
-				fill: var( --accent-background)
+				fill: var( --radio-check-background );
 			}
 
 			.fa-secondary {
@@ -98,20 +126,20 @@
 	}	
 }
 
-.x4radio.button {
+// square: its former name, kept for the code that has it (not documented)
+.x4radio.button,
+.x4radio.square {
 	--size: 24px;
 
 	&.outline {
 		border-radius: 22px;;
 	}
 
-	border: 1px solid transparent;
+	border: 1px solid var( --radio-button-border );
 	padding: 8px;
 	margin: 0;
-	
-	.inner {
-		display: none;
-	}
+
+	@extend %radio-no-round;
 
 	label {
 		display: flex;
@@ -121,49 +149,44 @@
 		#text {
 			flex-grow: 1;
 			text-align: center;
-			color: var( --text-ternary );
+			color: var( --radio-button-color );
 		}
-	
+
+		// fill and color: an icon is drawn in its fill, or in currentColor
 		#icon {
-			fill: var( --text-ternary );
+			fill: var( --radio-button-color );
+			color: var( --radio-button-color );
 			width: var( --size );
 			height: var( --size );
 		}
 	}
 
 	&:has(input:checked) {
-		background-color: var( --background-secondary );
-		border-color:  var( --accent-background );
+		background-color: var( --radio-button-background-checked );
+		border-color: var( --radio-button-border-checked );
 
 		.x4label {
+			// no bold: the width of the button would change with its state
 			#text {
-				color: var( --accent-background-active );
-				font-weight: bold;
+				color: var( --radio-button-color-checked );
 			}
 
 			#icon {
-				fill: var( --accent-background-active );
+				fill: var( --radio-button-color-checked );
+				color: var( --radio-button-color-checked );
 			}
 
 			.fa-primary {
-				fill: var( --accent-background-active );
+				fill: var( --radio-button-color-checked );
 			}
 		}
 	}
 }
 
-.x4radio.square {
-	padding: 5px;
-	border: 1px solid rgba(255,255,255,0.3);
-	margin: 0;
-		
-	.inner {
-		display: none;
-	}
-
-	&:has(input:checked) {
-		background-color: var( --accent-background-active );
-		border-color: var( --radio-square-border-checked );
-		font-weight: 700;
-	}
+// danger: checked in the red of the alerts, its round or its button
+.x4radio.danger {
+	--radio-check-background: var( --radio-danger-color );
+	--radio-button-color-checked: var( --radio-danger-color );
+	--radio-button-background-checked: var( --radio-danger-background );
+	--radio-button-border-checked: var( --radio-danger-color );
 }

package/src/components/radio/radio.ts

@@ -47,12 +47,23 @@ interface RadioProps extends ComponentProps {
 }
 
 /**
+ * A radio: the ones with the same name are a group. Its look, by its class (cls): "button"
+ * (a button, "button outline" rounded), "danger" (checked in red, its round or its button).
+ * Without the round, its input is still reached by Tab.
  *
  * @cssvar
  * ```
  * --radio-background
+ * --radio-check-background
  * --radio-check-color
- * --radio-square-border-checked
+ * --radio-focus
+ * --radio-button-border
+ * --radio-button-color
+ * --radio-button-color-checked
+ * --radio-button-background-checked
+ * --radio-button-border-checked
+ * --radio-danger-color
+ * --radio-danger-background
  * ```
  */
 

package/src/components/sizers/sizer.ts

@@ -167,7 +167,9 @@ export class CSizer extends Component<ComponentProps,CSizerEvent> {
 		if( this._type.includes("-prev") || this._type.includes("-next") ) {
 			const neighbour = this._type.includes("-prev") ? this.prevElement( ) : this.nextElement( );
 			if( neighbour ) {
-				this._ref.setStyleValue( "flex", `0 0 ${size}px` );
+				// shrink 1: no larger than the space the box has left (the flex neighbour at its
+				// padding); 0 at least, a negative basis is not a value
+				this._ref.setStyleValue( "flex", `0 1 ${Math.max( 0, size )}px` );
 			}
 			else {
 				this._ref.setStyle( nr );
@@ -185,18 +187,28 @@ export class CSizer extends Component<ComponentProps,CSizerEvent> {
 	}
 }
 
+/**
+ * a sizer between two children of a HBox: it resizes the one before it or the one after it
+ * (a boolean, as in older code: true after, false before)
+ */
+
 export class HSizer extends CSizer {
 	static classPrefix = "x4";
 
-	constructor( next = true ) {
-		super( next ? "hsize-next" : "hsize-prev" );
+	constructor( side: "before" | "after" | boolean = "after" ) {
+		super( side === "before" || side === false ? "hsize-prev" : "hsize-next" );
 	}
 }
 
+/**
+ * a sizer between two children of a VBox: it resizes the one before it (above) or the one
+ * after it (under); a boolean as for HSizer
+ */
+
 export class VSizer extends CSizer {
 	static classPrefix = "x4";
 
-	constructor( next = true ) {
-		super( next ? "vsize-next" : "vsize-prev" );
+	constructor( side: "before" | "after" | boolean = "after" ) {
+		super( side === "before" || side === false ? "vsize-prev" : "vsize-next" );
 	}
 }

package/src/components/spreadsheet/spreadsheet.module.scss

@@ -72,6 +72,11 @@
 	background-color: var( --spreadsheet-background );
 	border: 1px solid var( --spreadsheet-border );
 	color: var( --spreadsheet-cell-color );
+
+	// disabled: faded as a Box (a Spreadsheet is not one)
+	&[disabled] {
+		opacity: var( --box-disabled-opacity );
+	}
 		
 	.cell {
 		padding: 4px;
@@ -179,6 +184,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/tabs/tabs.module.scss

@@ -6,6 +6,7 @@
 	--tab-color-hover: var( --text-primary );
 	--tab-color: var( --text-primary );
 	--tab-color-selected: var( --text-primary );
+	--tab-icon-color: var( --icon-color );
 }
 
 .x4tabs {
@@ -24,6 +25,7 @@
 			border: none;
 			border-bottom: 2px solid transparent;
 			color: var( --tab-color );
+			--ol-button-icon-color: var( --tab-icon-color );
 			margin: 0;
 			outline: none;
 			transition: border-color 0.2s ease;

package/src/components/tabs/tabs.ts

@@ -149,6 +149,7 @@ interface TabsProps extends Omit<ComponentProps,"content"> {
  * --tab-color-hover
  * --tab-color
  * --tab-color-selected
+ * --tab-icon-color
  * ```
  */
 

package/src/components/textarea/textarea.module.scss

@@ -23,6 +23,7 @@
 	--textarea-selection-color: var( --accent-color );
 	--textarea-background: var( --background-input );
 	--textarea-color: var( --text-primary );
+	--textarea-required: var( --alert-background );
 }
 
 .x4simpletextarea {
@@ -77,6 +78,14 @@
 		display: none;
 	}
 
+	// required: a "*" before the label, as the one of a TextEdit
+	&:has( > .x4simpletextarea[required] ) > .x4label::before {
+		content: "*";
+		font-weight: bold;
+		color: var( --textarea-required );
+		margin-right: 2px;
+	}
+
 	.x4simpletextarea {
 		// its height of rows when the TextArea has none, the TextArea's height when it has one;
 		// a basis of 0 would leave it the height of its padding: a textarea scrolls, its min-height is 0

package/src/components/textarea/textarea.ts

@@ -139,6 +139,7 @@ export class SimpleTextArea extends Component<SimpleTextAreaProps,TextAreaEvents
  * --textarea-selection-color
  * --textarea-background
  * --textarea-color
+ * --textarea-required
  * ```
  */
 

package/src/components/themes.scss

@@ -52,6 +52,7 @@ $color--interval: 8.4%;
 	--background-primary: var(--color-primary-a0);
 	--background-secondary: var(--color-primary-a10);
 	--background-ternary: color-mix(in srgb, var(--color-primary-a100) 4.3%, var(--color-primary-a0));		// #f4f4f4
+	--background-odd: color-mix(in srgb, var(--color-primary-a100) 2.4%, var(--color-primary-a0));		// #f9f9f9, a row out of two
 	--background-hover: color-mix(in srgb, var(--color-primary-a100) 6.7%, var(--color-primary-a0));		// #eee
 	--background-active: color-mix(in srgb, var(--color-primary-a100) 20%, var(--color-primary-a0));		// #ccc
 	--background-input: color-mix(in srgb, var(--color-primary-a0) 60%, transparent);					// white at 60%

package/src/components/treeview/treeview.module.scss

@@ -20,6 +20,7 @@
 	--treeview-background: var( --background-primary );
 
 	--treeitem-color: var( --text-primary );
+	--treeitem-icon-color: var( --icon-color );
 
 	--treeitem-backgound-hover: var( --background-secondary );
 	--treeitem-color-hover: var( --text-primary );
@@ -79,7 +80,7 @@
 									
 				&>.label {
 					--label-color: var( --treeitem-color );
-					--label-icon-color: var( --treeitem-color );
+					--label-icon-color: var( --treeitem-icon-color );
 
 					gap: 4px;
 
@@ -210,6 +211,10 @@
 		border-color: var( --border );
 		color: var( --treeview-item-color-disabled );
 
+		// the texts and the icons of the items
+		--treeitem-color: var( --treeview-item-color-disabled );
+		--treeitem-icon-color: var( --treeview-item-color-disabled );
+
 		&>.body {
 			.x4viewport {
 				pointer-events: none;

package/src/components/treeview/treeview.ts

@@ -73,6 +73,7 @@ export interface TreeviewEvents extends ComponentEvents {
  * ```
  * --treeview-background
  * --treeitem-color
+ * --treeitem-icon-color
  * --treeitem-backgound-hover
  * --treeitem-color-hover
  * --treeitem-background-sel

package/src/components/video/video.module.scss

@@ -20,11 +20,14 @@
 	background-color: black;
 	position: relative;
 	
+	// the size of the box, whatever the size of the stream (a <video> keeps its own size
+	// with only left / right): the image fitted in it, black bands around
 	.vplayer {
 		position: absolute;
 		left: 0;
 		top: 0;
-		right: 0;
-		bottom: 0;
+		width: 100%;
+		height: 100%;
+		object-fit: contain;
 	}
 }

package/src/components/video/video.ts

@@ -23,7 +23,8 @@ interface VideoProps extends ComponentProps {
 	autoplay?: boolean;
 	muted?: boolean;
 	playsInline?: boolean;
-	stream: MediaStream;
+	src?: string;			// a file to play (url); a stream, when there is one, is shown instead
+	stream?: MediaStream;	// a camera, a screen, a canvas (captureStream)
 }
 
 /**
@@ -55,6 +56,10 @@ export class Video extends Box {
 			this.playsInline = props.playsInline;
 		}
 
+		if( props.src ) {
+			this.src = props.src;
+		}
+
 		this.stream = props.stream;
 	}
 
@@ -86,6 +91,14 @@ export class Video extends Box {
 		this.player.playsInline = set;
 	}
 
+	get src( ) {
+		return this.player.src;
+	}
+
+	set src( url: string ) {
+		this.player.src = url;
+	}
+
 	set stream( stream: MediaStream ) {
 		this.player.srcObject = stream;
 	}

package/src/core/core_pdf.ts

@@ -1543,6 +1543,23 @@ export class X4PDFBuilder {
 
 		return result
 	}
+
+	/**
+	 * the document as a file, of type application/pdf (build, its streams not compressed)
+	 */
+
+	buildBlob(): Blob {
+		return new Blob([this.build() as BlobPart], { type: 'application/pdf' })
+	}
+
+	/**
+	 * an object url of the document: the src of an iframe, the href of a link, window.open.
+	 * URL.revokeObjectURL( url ) frees it when it is no longer shown
+	 */
+
+	buildURL(): string {
+		return URL.createObjectURL(this.buildBlob())
+	}
 }
 
 /*

package/src/core/core_react.ts

@@ -13,25 +13,19 @@
  * Use of this source code is governed by an MIT-style license 
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  *
- * to use you must:
- * 
- * 1. add this to your tsconfig.json
+ * JSX in .tsx files:
+ *
+ * 1. in tsconfig.json (esbuild reads it too):
  * 		"compilerOptions": {
- * 			...
- * 			"jsx": "preserve",
- * 			...
- * 		}
- * 	
- * 2. be sure that esbuild has this:
- * 		jsxFactory: "x4create_element",
- * 		loader: { ".ts": "tsx" }
- * 		
- * 
- * after that, all things like that will be ok
- * 
- * 	import { x4_create_element }  from "x4react"
- * 	const xx = <h1>This is a title</h1>
- * 
+ * 			"jsx": "react",
+ * 			"jsxFactory": "x4_react.create_element"
+ * 		},
+ * 		"files": [ "node_modules/x4js/src/x4tsx.d.ts" ]	// the JSX types of x4 (ref)
+ *
+ * 2. in each .tsx file, the factory imported:
+ * 		import { Label, VBox, x4_react } from "x4js";
+ * 		const box = <VBox><Label text="Hello" /></VBox>;
+ *
  */
 
 import { Component } from './component';

package/src/core/core_svg.ts

@@ -557,7 +557,8 @@ export class SvgText extends SvgItem {
 	 * @returns The current `SvgText` instance for chaining.
 	 */
 	fontWeight( weight: 'light' | 'normal' | 'bold' ): this {
-		return this.setAttr( 'font-weight', weight );
+		// "light" is no value of font-weight: its number
+		return this.setAttr( 'font-weight', weight=='light' ? '300' : weight );
 	}
 
 	/**
@@ -583,23 +584,25 @@ export class SvgText extends SvgItem {
 	}
 
 	/**
-	 * change the vertical alignment
+	 * change the vertical alignment: y is the top, the middle, the bottom or the baseline
+	 * of the text. dominant-baseline, read by all the browsers (alignment-baseline is not
+	 * by Firefox before 149)
 	 */
 	verticalAlign( align: 'top' | 'center' | 'bottom' | 'baseline' ): this {
 
 		let al;
 		switch( align ) {
 			case 'top': al = 'hanging'; break;
-			case 'center': al = 'middle'; break;
-			case 'bottom': al = 'baseline'; break;
-			case 'baseline': al = 'mathematical'; break;
+			case 'center': al = 'central'; break;
+			case 'bottom': al = 'ideographic'; break;
+			case 'baseline': al = 'alphabetic'; break;
 			default:
 				// If an invalid alignment is provided, do nothing and return this for chaining.
 				console.warn(`Invalid verticalAlign value: ${align}. Must be 'top', 'center', 'bottom', or 'baseline'.`);
 				return this;
 		}
 
-		return this.setAttr( 'alignment-baseline', al );
+		return this.setAttr( 'dominant-baseline', al );
 	}
 }