x4js 2.3.27 → 2.3.29

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 {
@@ -25,11 +53,14 @@
 	flex-direction: row;
 	align-items: center;
 
-	margin-left: 5px;
+	// the room of a checkbox
+	margin: 5px;
+	padding: 4px;
 	gap: 4px;
 	cursor: pointer;
 
 	.inner {
+		align-self: center;		// a Box stretches: the round in the middle of the line
 		position: relative;
 		height: 1rem;
 		width: 1rem;
@@ -69,7 +100,7 @@
 			height: 100%;
 
 			.fa-primary {
-				fill: var( --accent-background)
+				fill: var( --radio-check-background );
 			}
 
 			.fa-secondary {
@@ -98,20 +129,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 +152,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/slider/slider.module.scss

@@ -21,15 +21,17 @@
 	--slider-thumb-border-focus: var( --border-focus );
 }
 
+// all in rem: the thumb, its focus, the track and the box keep their proportions whatever the
+// size of <html>
 .x4slider {
 	outline: none;
 	touch-action: none;
 	overflow: hidden;
 
 	&:not(.vertical) {
-		padding: 10px 12px;
-		margin: 5px 0;
-		height: 28px;
+		padding: 0.625rem 0.75rem;
+		margin: 0.3125rem 0;
+		height: 1.75rem;
 		
 		.track {
 			background-color: var( --slider-track );
@@ -37,13 +39,13 @@
 
 			position: relative;
 			top: 50%;
-			height: 3px;
+			height: 0.1875rem;
 		}
 
 		.bar {
 			position: absolute;
 			width: 61%;
-			height: 3px;
+			height: 0.1875rem;
 			//padding: 4px 0;
 			//background-color: var( --color-60 );
 		}
@@ -54,12 +56,12 @@
 			outline: none;
 			
 			background-color: var( --slider-thumb-background );
-			border: 3px solid var( --slider-thumb-border );
-			border-radius: 8px;
+			border: 0.1875rem solid var( --slider-thumb-border );
+			border-radius: 50%;
 
 			top: 50%;
-			width: 16px;
-			height: 16px;
+			width: 1rem;
+			height: 1rem;
 
 			transform: translate(-50%,-50%);
 			cursor: pointer;
@@ -67,9 +69,9 @@
 	}
 
 	&.vertical {
-		padding: 12px 10px;
-		margin: 0 5px;
-		width: 28px;
+		padding: 0.75rem 0.625rem;
+		margin: 0 0.3125rem;
+		width: 1.75rem;
 
 		.track {
 			background-color: var( --slider-track );
@@ -77,12 +79,12 @@
 	
 			position: relative;
 			left: 50%;
-			width: 3px;
+			width: 0.1875rem;
 		}
 	
 		.bar {
 			position: absolute;
-			width: 3px;
+			width: 0.1875rem;
 			height: 61%;
 			//padding: 4px 0;
 			//background-color: var( --color-60 );
@@ -94,12 +96,12 @@
 			outline: none;
 			
 			background-color: var( --slider-thumb-background );
-			border: 3px solid var( --slider-thumb-border );
-			border-radius: 8px;
+			border: 0.1875rem solid var( --slider-thumb-border );
+			border-radius: 50%;
 	
 			top: 61%;
-			width: 16px;
-			height: 16px;
+			width: 1rem;
+			height: 1rem;
 	
 			transform: translate(-50%,-50%);
 			cursor: pointer;
@@ -110,9 +112,9 @@
 
 	
 	&:focus .thumb {
-		outline-offset: 3px;
+		outline-offset: 0.1875rem;
     	outline-color: var(--slider-thumb-border-focus);
 		outline-style: solid;
-    	outline-width: 1px;
+    	outline-width: 0.0625rem;
 	}
 }

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/switch/switch.module.scss

@@ -1,16 +1,16 @@
-/** 
+/**
  *  ___  ___ __
  *  \  \/  /  / _
  *   \    /  /_| |_
- *   /    \____   _|  
+ *   /    \____   _|
  *  /__/\__\   |_|
- * 
+ *
  * @file switch.module.scss
- * @author Etienne Cochard 
- * 
+ * @author Etienne Cochard
+ *
  * @copyright (c) 2026 R-libre ingenierie
  *
- * Use of this source code is governed by an MIT-style license 
+ * 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.
  **/
 
@@ -21,15 +21,21 @@
 	--switch-background: var( --background-hover );
 	--switch-background-disabled: var( --disabled-background );
 	--switch-checked: var( --accent-background );
+	--switch-danger: var( --alert-background );
 	--switch-thumb: var( --background-primary );
 }
 
+// The sizes come from H, the height of the track: 1.125rem rounded to an even number of pixels
+// (18px when <html> has 16px). The width is 2H - 2, the thumb H - 2 at 1px of the edges (inside
+// the border): all in whole pixels, the switch is drawn the same wherever it falls in the page.
+// The px values first: a browser without round() keeps them.
+
 .x4switch {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
 	position: relative;
-    
+
 	gap: 4px;
 	margin-left: 5px;
 	padding: 4px;
@@ -47,62 +53,79 @@
 		}
 	}
 
+	// the track; the input over it takes the click, the focus, and the value for a Form
 	.switch {
-		width: 2.2rem;
-		height: 18px;
 		position: relative;
+		flex: none;
+
+		width: 34px;
+		width: calc( round( 1.125rem, 2px ) * 2 - 2px );
+		height: 18px;
+		height: round( 1.125rem, 2px );
+
+		border: 1px solid var( --switch-border );
+		border-radius: 9px;
+		border-radius: calc( round( 1.125rem, 2px ) / 2 );
+		background-color: var( --switch-background );
+
+		transition: background-color ease 0.2s, border-color ease 0.2s;
 
 		input {
 			position: absolute;
-			width: 100%;
-			height: 100%;
-			appearance: none;
-			padding: 0;
-			margin: 0;
-			left: 0;
-			top: 0;
-			cursor: pointer;
-		}
-			
-		.track {
-			position: absolute;
-			pointer-events: none;
 			left: 0;
 			top: 0;
 			width: 100%;
 			height: 100%;
-			border: 1px solid var( --switch-border );
-
-			background-color: var( --switch-background );
-			border-radius: 9px;
-
-			transition: background-color ease 0.2s;
+			margin: 0;
+			padding: 0;
+			appearance: none;
+			opacity: 0;			// none of the look of a field (its background): the track is under it
+			cursor: pointer;
 		}
 
 		.thumb {
 			position: absolute;
 			pointer-events: none;
-			left: 0.05rem;
-			top: 1px;
+			left: 0;
+			top: 0;
 
-			width: 1rem;
-			height: 1rem;
+			width: 16px;
+			width: calc( round( 1.125rem, 2px ) - 2px );
+			height: 16px;
+			height: calc( round( 1.125rem, 2px ) - 2px );
 
-			border-radius: 8px;
+			border-radius: 50%;
 			background-color: var( --switch-thumb );
 			box-shadow: 0 0 2px rgba(0,0,0,0.5);
 
-			transition: left ease 0.2s;
+			transition: transform ease 0.2s;
 		}
 	}
 
-	&:has(input:checked) {
-		.switch .thumb {
-			left: 1.15rem;
+	// on: the colour on all the track, its border too; the thumb at the other end (H - 2 further)
+	&:has(input:checked) .switch {
+		background-color: var( --switch-checked );
+		border-color: var( --switch-checked );
+
+		.thumb {
+			transform: translateX( 16px );
+			transform: translateX( calc( round( 1.125rem, 2px ) - 2px ) );
 		}
-		.switch .track {
-			background-color: var( --switch-checked );
-			//border-color: var( --color-70 );
+	}
+
+	// danger: the colour of an alert when on
+	&.danger {
+		--switch-checked: var( --switch-danger );
+	}
+
+	// square: the corners of the track and of the thumb barely rounded
+	&.square .switch {
+		border-radius: 3px;
+		border-radius: round( 0.1875rem, 1px );
+
+		.thumb {
+			border-radius: 2px;
+			border-radius: round( 0.125rem, 1px );
 		}
 	}
 
@@ -110,7 +133,7 @@
 		&, * {
 			cursor: not-allowed;
 		}
-		
+
 		input {
 			pointer-events: none;
 		}
@@ -120,9 +143,10 @@
 			color: var( --checkbox-color-disabled );
 		}
 
-		.switch .track,
-		&.x4switch:has(input:checked) .switch .track {
+		.switch,
+		&.x4switch:has(input:checked) .switch {
 			background-color: var( --switch-background-disabled );
+			border-color: var( --switch-border );
 		}
 	}
-}
+}

package/src/components/switch/switch.ts

@@ -31,13 +31,16 @@ interface SwitchProps extends ComponentProps {
 }
 
 /**
- * 
+ * cls "square": the track and the thumb with corners barely rounded; "danger": the colour of an
+ * alert when on.
+ *
  * @cssvar
  * ```
  * --switch-border
  * --switch-background
  * --switch-background-disabled
  * --switch-checked
+ * --switch-danger
  * --switch-thumb
  * ```
  */
@@ -51,12 +54,12 @@ export class Switch extends HBox<SwitchProps> {
 		const inputId = makeUniqueComponentId( );
 
 		this.setContent( [
+			// the track, its thumb in it; the input over them (role switch: a screen reader says "switch, on")
 			new Component( {
 				cls: "switch",
 				content: [
 					// value: sent by a <form> of the browser when checked; a Form of x4 reads a boolean
-					new Input( { type: "checkbox", id: inputId, name: props.name, value: props.value, checked: props.checked } ),
-					new Component( { cls: "track" } ),
+					new Input( { type: "checkbox", id: inputId, name: props.name, value: props.value, checked: props.checked, attrs: { role: "switch" } } ),
 					new Component( { cls: "thumb" } ),
 				]
 	 		} ),

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/tag/tag.module.scss

@@ -19,8 +19,7 @@
 	--tag-border: var( --border );
 	--tag-border-focus: var( --border-focus );
 	--tag-background: var( --accent-background );
-	--tag-color: var( --text-primary );
-	--tag-icon-color: var( --tag-color );
+	--tag-color: var( --accent-color );
 }
 
 .x4tag {
@@ -37,9 +36,10 @@
 		display: none;
 	}
 
+	// --tag-icon-color is not set by x4: the icon has the color of the text of its tag
 	.x4icon {
 		height: 1em;
-		color: var( --tag-icon-color );
+		color: var( --tag-icon-color, var( --tag-color ) );
 	}
 
 	&> .x4simpletext {
@@ -50,6 +50,6 @@
 
 	&.alert {
 		--tag-color: var( --alert-color );
-		background-color: var( --alert-background );
+		--tag-background: var( --alert-background );
 	}
 }