x4js 2.3.28 → 2.3.30

package/src/components/popup/popup.ts

@@ -62,6 +62,32 @@ function dismissLast( e: UIEvent ) {
 	autoclose_list[autoclose_list.length-1].dismiss( );
 }
 
+/**
+ * a wheel outside every popup is ignored: the page under them does not scroll, it would leave
+ * them where they were. In a popup (a long menu), it scrolls as usual
+ */
+
+function ignoreWheel( e: WheelEvent ) {
+	if( !autoclose_list.some( x => x.contains( e.target as Node ) ) ) {
+		e.preventDefault( );
+	}
+}
+
+/**
+ * the listeners of the document while a popup that closes by itself is shown
+ */
+
+function watchOutside( on: boolean ) {
+	if( on ) {
+		document.addEventListener( "pointerdown", dismissLast, true );
+		document.addEventListener( "wheel", ignoreWheel, { capture: true, passive: false } );
+	}
+	else {
+		document.removeEventListener( "pointerdown", dismissLast, true );
+		document.removeEventListener( "wheel", ignoreWheel, true );
+	}
+}
+
 /**
  * @cssvar
  * ```
@@ -256,7 +282,7 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 			if( idx>=0 ) {
 				autoclose_list.splice( idx, 1 );
 				if( autoclose_list.length==0 ) {
-					document.removeEventListener( "pointerdown", dismissLast, true );
+					watchOutside( false );
 				}
 			}
 		}
@@ -295,7 +321,7 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 				
 		if( this.props.autoClose ) {
 			if( autoclose_list.length==0 ) {
-				document.addEventListener( "pointerdown", dismissLast, true );
+				watchOutside( true );
 			}
 
 			autoclose_list.push( this );
@@ -384,7 +410,7 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 		const list = inc_group.reverse( );
 		autoclose_list = excl_group;
 		if( autoclose_list.length==0 ) {
-			document.removeEventListener( "pointerdown", dismissLast, true );
+			watchOutside( false );
 		}
 		
 		list.forEach( x => x.close() );

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

@@ -53,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;

package/src/components/shared.scss

@@ -62,8 +62,9 @@
 	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
 }
 
+// its colour from the theme (--shadow-color): darker on a dark background
 %shadow-xl {
-	box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+	box-shadow: 0 20px 25px -5px var( --shadow-color ), 0 8px 10px -6px var( --shadow-color );
 }
 
 %shadow-xxl {

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

package/src/components/textedit/textedit.module.scss

@@ -21,7 +21,7 @@
 	--textedit-border-focus: var( --border-focus );
 	--textedit-required: var( --alert-background );
 
-	--textedit-btn-background: inherit;
+	--textedit-btn-background: var( --background-input );		// the one of its field: inherit was the page (dark theme)
 	--textedit-btn-color: var( --text-secondary );
 	--textedit-btn-color-hover: var( --text-primary );
 
@@ -64,6 +64,7 @@
 		.x4button {
 			margin: 0;
 			padding: 0;
+			align-self: stretch;		// the height of the field: no strip of the page above and under it
 			background-color: var( --textedit-btn-background );
 			color: var( --textedit-btn-color );
 
@@ -108,7 +109,9 @@
 			color: var( --textedit-color-disabled );
 		}
 
-		#edit input {
+		// the field and its gadgets lose their background together
+		#edit input,
+		#edit .x4button {
 			color: var( --textedit-color-disabled );
 			background-color: unset;
 		}

package/src/components/themes.scss

@@ -19,6 +19,10 @@
 $color--base: #569cd6;
 $color--interval: 8.4%;
 
+// the blues of the dark theme, from their own base, with the intervals of the light one: its accent
+// (a60, the base less one interval) #245883
+$color--dark-base: #2d6fa5;
+
 :root {
 	--color-primary-a0: #ffffff;
 	--color-primary-a5: #{color.adjust($color--base, $lightness: 35%)};
@@ -90,6 +94,9 @@ $color--interval: 8.4%;
 	--border-hover: color-mix(in srgb, var(--color-primary-a100) 23.9%, var(--color-primary-a0));		// #c2c2c2
 	--border-focus: var(--accent-background);
 
+	// the shadow of what floats over the page (%shadow-xl: a dialog, a list, a notification, a tooltip)
+	--shadow-color: rgb(0 0 0 / 0.1);
+
 	// the red, orange and green do not follow the scale: their text stays white
 	--alert-background: var(--color-danger-a50);
 	--alert-background-active: var(--color-danger-a60);
@@ -119,12 +126,16 @@ html.x4theme-dark {
 	--color-primary-a10: #2a2d2e;		// list.hoverBackground
 	--color-primary-a20: #37373d;		// list.inactiveSelectionBackground
 	--color-primary-a30: #3c3c3c;		// input.border
-	--color-primary-a40: #04395e;		// list.activeSelectionBackground
-	--color-primary-a50: #0078d4;		// button.background, focusBorder
-	--color-primary-a55: #026ec1;		// button.hoverBackground
-	--color-primary-a60: #0078d4;
-	--color-primary-a70: #026ec1;
-	--color-primary-a80: #04395e;
+
+	// the blues: from $color--dark-base (chosen), as the light theme makes them; a40, a selection,
+	// where VS Code has list.activeSelectionBackground
+	--color-primary-a40: #{color.adjust($color--dark-base, $lightness: -19.4%)};						// a selection
+	--color-primary-a50: #{$color--dark-base};
+	--color-primary-a55: #{color.adjust($color--dark-base, $lightness: -5%)};							// the accent hovered
+	--color-primary-a60: #{color.adjust($color--dark-base, $lightness: -$color--interval)};				// the accent
+	--color-primary-a70: #{color.adjust($color--dark-base, $lightness: -$color--interval * 2)};			// focused
+	--color-primary-a80: #{color.adjust($color--dark-base, $lightness: -$color--interval * 3)};			// active
+
 	--color-primary-a90: #cccccc;
 	--color-primary-a100: #cccccc;		// foreground
 
@@ -155,6 +166,16 @@ html.x4theme-dark {
 	--color-dialog-caption: #181818;			// titleBar.activeBackground
 	--color-dialog-caption-text: #cccccc;		// titleBar.activeForeground
 	--color-dialog-background: #202020;			// editorWidget.background
+	--color-dialog-border: #313131;				// widget.border: its edge on the dark background
+
+	// a shadow seen on a dark background: darker
+	--shadow-color: rgb(0 0 0 / 0.5);
+
+	// the tiles of a MapView are light: turned dark, their colours kept
+	--mapview-tile-filter: invert( 1 ) hue-rotate( 180deg ) brightness( 0.95 ) contrast( 0.9 );
+
+	// the marks of the events out of the view of a Planner: the darkest blue (a90 is the text here)
+	--planner-edge-background: var( --accent-background-active );
 
 	color-scheme: dark;		// the native parts: select, scroll bars, number spinners
 }

package/src/components/tooltips/tooltips.scss

@@ -27,6 +27,8 @@
 	--tooltip-color: var( --color-primary-a90 );
 	--tooltip-border: var( --color-primary-a20 );
 	--tooltip-image-background: var( --background-primary );
+
+	--tooltip-max-width: 30vw;		// a long text goes on the next line; none: the width of the text
 }
 
 .x4tooltip {
@@ -41,6 +43,12 @@
 	border: 1px solid var( --tooltip-border ); 
 	background-color: var( --tooltip-background );
     width: max-content;
+	max-width: var( --tooltip-max-width );
+
+	// its content (a Box: it does not shrink) as wide as the tooltip at most: the text goes on the next line
+	> .x4hbox {
+		flex-shrink: 1;
+	}
 
 	.x4icon {
 		padding: 2px 4px;

package/src/components/tooltips/tooltips.ts

@@ -72,6 +72,14 @@ export function initTooltips( ) {
 
 	}, true );
 
+	// a click: no tooltip, it would stay over what the click opens
+	document.addEventListener( "mousedown", ( ) => {
+		if( last_hit ) {
+			last_hit = null;
+			closeTT( );
+		}
+	}, true );
+
 	document.addEventListener( "mousemove", ( ev: MouseEvent ) => {
 		if( last_hit ) {
 			mouse_pos = { x:ev.pageX, y:ev.pageY }
@@ -85,6 +93,11 @@ function showTT( text: string, rc: Rect, pt: Point ) {
 	}
 
 	timer.setTimeout( "update", 300, ( ) => {
+		// its element gone in the meantime
+		if( !last_hit || isGone( last_hit ) ) {
+			return;
+		}
+
 		tooltip.setText( unsafeHtml(text) );
 
 		let y = mouse_pos.y;
@@ -94,12 +107,29 @@ function showTT( text: string, rc: Rect, pt: Point ) {
 
 		//tooltip.displayNear( rc, "top left", "bottom left", {x:0,y:4} );
 		tooltip.displayAt( mouse_pos.x+17, y+5 );
+
+		// an element removed or hidden under the mouse has no mouseleave: it is checked every second
+		timer.setInterval( "check", 1000, ( ) => {
+			if( !last_hit || isGone( last_hit ) ) {
+				last_hit = null;
+				closeTT( );
+			}
+		} );
 	} );
 }
 
 function closeTT( ) {
 	tooltip.show( false );
 	timer.clearTimeout( "update" );
+	timer.clearInterval( "check" );
+}
+
+/**
+ * the element of the tooltip, not shown any more: removed from the page, or hidden
+ */
+
+function isGone( el: HTMLElement ) {
+	return !el.isConnected || el.getClientRects( ).length==0;
 }
 
 /**
@@ -114,6 +144,7 @@ function closeTT( ) {
  * --tooltip-color
  * --tooltip-border
  * --tooltip-image-background
+ * --tooltip-max-width
  * ```
  */