x4js 2.3.24 → 2.3.26

package/src/components/messages/messages.ts

@@ -2,7 +2,7 @@
 // :: MESSAGEBOX ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 
 import { _tr } from '../../core/core_i18n';
-import { asap, class_ns, unsafeHtml, UnsafeHtml } from '../../core/core_tools';
+import { asap, sprintf, unsafeHtml, UnsafeHtml } from '../../core/core_tools';
 
 import { HBox, VBox } from '../boxes/boxes';
 import { Icon } from '../icon/icon';
@@ -11,10 +11,10 @@ import { Dialog, DialogProps } from "../dialog/dialog"
 import { Form } from '../form/form';
 import { BtnGroupItem } from '../btngroup/btngroup';
 import { Input } from '../input/input';
-import { SimpleTextArea } from '../textarea/textarea';
 import { Button } from '../button/button';
 import { Component } from '../../core/component';
 import { Progress } from '../components.js';
+import icons from '../assets/icons';
 
 import "./messages.module.scss";
 
@@ -38,14 +38,22 @@ export interface MessageBoxProps extends DialogProps {
  * --msgbox-icon-color
  * --msgbox-question-icon-color
  * --msgbox-log-background
+ * --msgbox-log-border
+ * --msgbox-log-border-focus
+ * --msgbox-log-error-color
+ * --msgbox-log-error-background
+ * --msgbox-log-warning-color
+ * --msgbox-log-warning-background
+ * --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
  */
 
-@class_ns( "x4" )
 export class MessageBox extends Dialog<DialogProps>
 {
+	static classPrefix = "x4";
+
 	constructor(props: DialogProps) {
 		super(props);
 	}
@@ -134,9 +142,10 @@ interface InputOptions {
 	trim?: boolean;
 }
 
-@class_ns( "x4" )
 export class InputBox extends Dialog<DialogProps>
 {
+	static classPrefix = "x4";
+
 	constructor(props: DialogProps) {
 		super(props);
 	}
@@ -203,9 +212,10 @@ export class InputBox extends Dialog<DialogProps>
 // :: PROMPT ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 
 
-@class_ns( "x4" )
 export class PromptBox extends Dialog<DialogProps>
 {
+	static classPrefix = "x4";
+
 	constructor(props: DialogProps) {
 		super(props);
 	}
@@ -279,15 +289,21 @@ export class PromptBox extends Dialog<DialogProps>
 
 /**
  * a modal box that follows a long task: a title, a bar, and the lines of what is done
- * in a textarea read only (they are text: a markup is shown as it is written).
- * done( ) shows its button OK: after an error it waits for it, else it closes the box
- * after 5s, the seconds left in the button.
+ * in a <pre>, in a fixed font, a <div> each: a string is text, an UnsafeHtml is html. An
+ * error, a warning are coloured on all their width, a bar on their left. addSection puts
+ * the lines that follow in a section that folds. Ctrl+A selects the lines.
+ * done( ) shows its button OK: after an error or a warning it waits for it, their counts
+ * on the left of the bar; else it closes the box after 5s, the seconds left in the button.
  */
 
-@class_ns( "x4" )
 export class ProgressionBox  extends Dialog {
+	static classPrefix = "x4";
+
+	// an error or a warning: done( ) waits for OK
+	private _errors = 0;
+	private _warnings = 0;
 
-	#has_errors = false;
+	private _section: Component;		// the last section (a <details>): the lines go in it
 
 	constructor( title: string ) {
 		super( { 
@@ -303,13 +319,15 @@ export class ProgressionBox  extends Dialog {
 							new VBox( { flex: 1, cls: "right", content: [
 								new SimpleText( { id: "title", text: title } ),
 								new Progress( { id:"prog", min: 0, max: 100, value: 0 } ),
-								new SimpleTextArea( { id: "sub-text", readonly: true, trim: false } ),
+								new Component( { tag: "pre", id: "sub-text", attrs: { tabindex: 0 }, dom_events: {
+									keydown: ( ev ) => this._on_log_key( ev ),
+								} } ),
 							]})
 						]
 					}),
 				]
 			}),
-			buttons: [ "ok.outline.default" ]
+			buttons: [ new Label( { id: "alerts", text: "" } ), "-", "ok.outline.default" ]
 		});
 
 		this.query("#btnbar").show( false );
@@ -328,50 +346,118 @@ export class ProgressionBox  extends Dialog {
 		this.query<Progress>( "#prog").setValue( perc );
 	}
 
-	/** a line at the end: done( ) then waits for the button OK */
+	/** a line at the end, with the icon of an error: done( ) then waits for the button OK */
 
 	addError( text: string | UnsafeHtml, perc: number ) {
-		this._addLine( text );
+		this._addLine( text, "error" );
+		this.query<Progress>( "#prog").setValue( perc );
+		this.addClass( "error" );		// the title bar in red, as the one of an error of MessageBox
+
+		this._errors++;
+	}
+
+	/** a line at the end, with the icon of a warning: done( ) then waits for the button OK */
+
+	addWarning( text: string | UnsafeHtml, perc: number ) {
+		this._addLine( text, "warning" );
 		this.query<Progress>( "#prog").setValue( perc );
 
-		this.#has_errors = true;
+		this._warnings++;
+	}
+
+	/**
+	 * a section at the end, open: the lines that follow go in it. A click on its title folds
+	 * it; its title has the icon of the worst of its lines (an error, a warning)
+	 */
+
+	addSection( title: string | UnsafeHtml, perc: number ) {
+		const summary = new Component( { tag: "summary", content: new Component( { tag: "span", cls: "alert" } ) } );
+		summary.appendContent( title );
+
+		this._section = new Component( { tag: "details", attrs: { open: true }, content: summary } );
+
+		const log = this.query( "#sub-text" );
+		log.appendContent( this._section );
+		log.dom.scrollTop = log.dom.scrollHeight;
+		this.query<Progress>( "#prog").setValue( perc );
 	}
 
 	/** the text in place of all the lines */
 
 	setText( text: string | UnsafeHtml, perc: number ) {
-		this.query<SimpleTextArea>( "#sub-text" ).setText( text.toString( ) );
+		this._section = null;
+		this.query( "#sub-text" ).setContent( text );
 		this.query<Progress>( "#prog").setValue( perc );
 	}
 
 	/** as at the start: no line, no error, no button OK */
 
 	clear( ) {
-		this.#has_errors = false;
+		this._errors = 0;
+		this._warnings = 0;
 		this.clearInterval( "close" );
 		this.query( "#btnbar" ).show( false );
-		this.query<SimpleTextArea>( "#sub-text" ).setText( "" );
+		this.removeClass( "error" );
+		this.query<Label>( "#alerts" ).setText( "" );
+		this.query<Label>( "#alerts" ).setIcon( null );
+		this._section = null;
+		this.query( "#sub-text" ).clearContent( );
 	}
 
-	// the line after the others, the last one shown
-	private _addLine( text: string | UnsafeHtml ) {
-		const log = this.query<SimpleTextArea>( "#sub-text" );
-		const lines = log.getText( );
+	// the line after the others (in the last section), the last one shown: a <div>, of the
+	// class of its kind for an error, a warning
+	private _addLine( text: string | UnsafeHtml, kind?: "error" | "warning" ) {
+		const log = this.query( "#sub-text" );
+		const target = this._section ?? log;
+
+		target.appendContent( new Component( { cls: kind ? "line " + kind : "line", content: text } ) );
+
+		// the title of the section: the icon of the worst, in its colour
+		const alert = this._section?.query( ".alert" );
+		if( kind && alert && !alert.hasClass( "error" ) ) {
+			alert.setClass( "warning", kind=="warning" );
+			alert.setClass( "error", kind=="error" );
+			alert.setContent( unsafeHtml( kind=="error" ? icons.danger : icons.warning ) );
+		}
+
+		log.dom.scrollTop = log.dom.scrollHeight;
+	}
 
-		log.setText( lines ? lines + "\n" + text : text.toString( ) );
-		log.scrollToBottom( );
+	// Ctrl+A: the lines only, not the whole page
+	private _on_log_key( ev: KeyboardEvent ) {
+		if( ( ev.ctrlKey || ev.metaKey ) && ev.key.toLowerCase( )=="a" ) {
+			document.getSelection( ).selectAllChildren( ev.currentTarget as HTMLElement );
+			ev.preventDefault( );
+		}
 	}
 
 	/**
-	 * the task is over: the button OK is shown. After an error it waits for a click;
-	 * without one it counts the seconds left, "OK (5s)", and closes the box at 0
+	 * the task is over: the button OK is shown. After an error or a warning it waits for
+	 * a click, their counts on the left of the bar ("2 errors / 1 warning"); without one it counts the
+	 * seconds left, "OK (5s)", and closes the box at 0
 	 */
 
 	done( ) {
 		const ok = this.query<Button>( "#ok" );
 		this.query( "#btnbar" ).show( true );
 
-		if( this.#has_errors ) {
+		if( this._errors || this._warnings ) {
+			const tr = _tr.global.progression;
+			const counts = [];
+			if( this._errors ) {
+				counts.push( sprintf( this._errors>1 ? tr.errors : tr.error, this._errors ) );
+			}
+			if( this._warnings ) {
+				counts.push( sprintf( this._warnings>1 ? tr.warnings : tr.warning, this._warnings ) );
+			}
+
+			// on the left, the icon of the worst
+			const alerts = this.query<Label>( "#alerts" );
+			alerts.setText( counts.join( " / " ) );
+			alerts.setIcon( this._errors ? icons.danger : icons.warning );
+			alerts.setClass( "error", this._errors>0 );
+			alerts.setClass( "warning", this._errors==0 );
+
 			ok.setText( _tr.global.ok );
 			return;
 		}

package/src/components/notification/notification.ts

@@ -15,7 +15,7 @@
  **/
 
 import { ComponentProps } from '../../core/component';
-import { asap, class_ns, Rect, UnsafeHtml } from '../../core/core_tools';
+import { asap, Rect, UnsafeHtml } from '../../core/core_tools';
 
 import { Popup } from '../popup/popup';
 import { HBox, VBox } from '../boxes/boxes';
@@ -61,18 +61,18 @@ interface NotificationProps extends ComponentProps {
  * ```
  */
 
-@class_ns( "x4" )
 export class Notification extends Popup {
+	static classPrefix = "x4";
+
 	private static list = new Set<Notification>( );
 
 	constructor( props: NotificationProps ) {
-		super( { } );
+		super( props );
 
 		let icon = props.iconId;
 		if( !icon ) {
 			if( props.loading ) {
 				icon = icons.loading;
-				this.addClass( "")
 			}
 			else if( props.mode=="danger" ) {
 				icon = icons.danger;
@@ -84,10 +84,10 @@ export class Notification extends Popup {
 
 		this.addClass( props.mode );
 
+		// the icon of loading turns (x4rotate, base.scss)
 		const _icon = new Icon( { iconId: icon } );
 		if( props.loading ) {
-			_icon.addClass( "rotate" );
-			//this.props.modal = true;
+			_icon.addClass( "x4rotate" );
 		}
 
 		this.setContent( new HBox( { 

package/src/components/panel/panel.ts

@@ -15,7 +15,7 @@
  **/
 
 import { Component, ComponentContent, ComponentProps } from '../../core/component';
-import { UnsafeHtml, Constructor, class_ns } from '../../core/core_tools';
+import { UnsafeHtml, Constructor } from '../../core/core_tools';
 
 import { VBox } from '../boxes/boxes';
 import { Label } from '../label/label';
@@ -37,8 +37,8 @@ interface PanelProps extends ComponentProps {
  * ```
  */
 
-@class_ns( "x4" )
 export class Panel extends VBox<PanelProps> {
+	static classPrefix = "x4";
 
 	private _title: Label;
 	private _body: Component;

package/src/components/popup/popup.ts

@@ -17,7 +17,7 @@
 import { Component, ComponentEvent, ComponentEvents, ComponentProps, componentFromDOM, makeUniqueComponentId } from "../../core/component"
 
 import { CSizer } from '../sizers/sizer';
-import { Rect, Point, class_ns, asap } from '../../core/core_tools';
+import { Rect, Point, asap } from '../../core/core_tools';
 import { Box } from '../boxes/boxes'
 
 import "./popup.module.scss"
@@ -70,11 +70,12 @@ function dismissLast( e: UIEvent ) {
  * ```
  */
 
-@class_ns( "x4" )
 export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = PopupEvents> extends Box<P,E> {
+	static classPrefix = "x4";
 
 	private _isshown = false;
 	protected _ismodal = false;
+	private _prevFocus: HTMLElement;		// modal: the element that had the focus when it opened
 
 	constructor( props: P ) {
 		super( props );
@@ -220,6 +221,11 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 			return;
 		}
 
+		// modal: the focus goes back to the element that had it when it opened, unless the
+		// user put it elsewhere (read before the popup leaves the page and its focus with it)
+		const active = document.activeElement;
+		const giveBack = this._ismodal && this._prevFocus && ( !active || active===document.body || this.dom.contains( active ) );
+
 		this.__hide( );
 		this.__remove( );
 
@@ -255,6 +261,11 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 			}
 		}
 
+		if( giveBack && this._prevFocus.isConnected ) {
+			this._prevFocus.focus( );
+		}
+		this._prevFocus = null;
+
 		this._isshown = false;
 		this.fire( "closed", {} );
 	}
@@ -272,6 +283,10 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 		this.__append( );
 
 		if( this._ismodal ) {
+			// given back the focus when it closes; <body>: nothing had it
+			const active = document.activeElement as HTMLElement;
+			this._prevFocus = active && active!==document.body ? active : null;
+
 			modal_stack.push( this );
 			this._showModalMask( );
 		}

package/src/components/progress/progress.ts

@@ -14,7 +14,6 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { class_ns } from '../../core/core_tools';
 import { Component, ComponentProps } from '../../core/component';
 
 import "./progress.module.scss";
@@ -33,8 +32,8 @@ interface ProgressProps extends ComponentProps {
  * ```
  */
 
-@class_ns( "x4" )
 export class Progress extends Component<ProgressProps> {
+	static classPrefix = "x4";
 
 	private _bar: Component;
 

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

@@ -117,9 +117,8 @@
 	}
 
 	// A row has no box of its own: its two cells go straight on the columns
-	// of the grid, which is how all the titles get the same width. (A row is
-	// a fieldset: it cannot be a subgrid.) What a row looked like, background
-	// and bottom line, is carried by its cells.
+	// of the grid, which is how all the titles get the same width. What a row
+	// looked like, background and bottom line, is carried by its cells.
 	.row {
 		display: contents;
 

package/src/components/propgrid/propgrid.ts

@@ -21,7 +21,7 @@ import { HBox, VBox } from "../boxes/boxes"
 import { Input } from "../input/input"
 import { ListboxID, ListItem } from "../listbox/listbox"
 import { Label, SimpleText } from "../label/label"
-import { asap, class_ns, isFunction, isNumber } from '../../core/core_tools';
+import { asap, isFunction, isNumber } from '../../core/core_tools';
 import { Icon, ScrollView } from '../components'
 import { ColorInput } from '../colorinput/colorinput'
 import { EvColorChange } from '../colorpicker/colorpicker'
@@ -84,12 +84,15 @@ export interface PropertyProps extends ComponentProps {
  * ```
  */
 
-@class_ns( "x4" )
 export class PropertyGrid extends VBox {
+	static classPrefix = "x4";
 
 	private root: Component;
 	private groups: PropertyGroup[];
 
+	// the editor of each property, by its name: no id, a name is not unique in a page
+	private editors = new Map<string, Component>( );
+
 	constructor(props: PropertyProps) {
 		super(props);
 
@@ -118,6 +121,8 @@ export class PropertyGrid extends VBox {
 
 	setItems( _grps: PropertyGroup[] ) {
 
+		this.editors.clear( );
+
 		if( !_grps || _grps.length==0 ) {
 			this.root.clearContent( );
 			return;
@@ -218,7 +223,6 @@ export class PropertyGrid extends VBox {
 		if (item.type === 'boolean') {
 			editor = new Input({ 
 				type: "checkbox", 
-				id: item.name,
 				//name: item.name, 
 				checked: value as boolean, 
 				dom_events: {
@@ -232,7 +236,6 @@ export class PropertyGrid extends VBox {
 		else if (item.type === 'options') {
 			editor = new Select( {
 				value: value as ListboxID,
-				id: item.name,
 				items: item.options,
 				//name: item.name,
 				change: ( e: EvChange ) => {
@@ -243,20 +246,23 @@ export class PropertyGrid extends VBox {
 		else if (item.type === 'password') {
 			editor = new Input({ 
 				type: 'password',
-				id: item.name,
-				//name: item.name, 
-				value: String(value), 
+				//name: item.name,
+				value: String(value),
 				focus: ( e: EvFocus ) => {
 					if( e.focus_out ) {
 						item.callback?.( item.name, (editor as Input).getValue() );
 					}
+				},
+				change: ( ) => {
+					if( item.live ) {
+						item.callback?.( item.name, (editor as Input).getValue() );
+					}
 				}
 			});
 		}
 		else if (item.type === 'number') {
 			editor = new Input({ 
 				type: 'number', 
-				id: item.name,
 				//name: item.name, 
 				value: String(value),
 				step: item.step,
@@ -276,7 +282,6 @@ export class PropertyGrid extends VBox {
 		}
 		else if (item.type === 'color') {
 			editor = new ColorInput({
-				id: item.name,
 				color: value as string,
 				format: "hex",
 				picker: true,
@@ -289,14 +294,12 @@ export class PropertyGrid extends VBox {
 		}
 		else if (item.type === 'label') {
 			editor = new Label({
-				id: item.name,
 				text: value as string,
 			});
 		}
 		else if (item.type === 'button') {
 			use_hdr = false;
 			editor = new Button({ 
-				id: item.name,
                 cls: "button",
 				label: value as string, 
 				click: ( ) => {
@@ -307,7 +310,6 @@ export class PropertyGrid extends VBox {
 		else {
             editor = new Input({ 
                 type: 'text', 
-                id: item.name,
                 //name: item.name, 
                 value: value as string,
                 focus: ( e: EvFocus ) => {
@@ -315,8 +317,17 @@ export class PropertyGrid extends VBox {
                         item.callback?.( item.name, (editor as Input).getValue() );
                     }
                 },
+				change: ( ) => {
+					if( item.live ) {
+						item.callback?.( item.name, (editor as Input).getValue() );
+					}
+				}
             })
 		}
+
+		if( item.name ) {
+			this.editors.set( item.name, editor );
+		}
 		
 		let cls = 'row';
 		if( item.cls ) {
@@ -340,7 +351,7 @@ export class PropertyGrid extends VBox {
 			cls,
 			content: [
                 use_hdr ? new Component({ cls: 'cell hdr', content: item.title ?? item.name, tooltip: item.desc }) : null,
-                new HBox({ cls: 'cell', tag: "label", attrs: { "labelFor": item.name }, content }),
+                new HBox({ cls: 'cell', tag: "label", content }),
             ]
 		});
 	}
@@ -352,45 +363,28 @@ export class PropertyGrid extends VBox {
 	setPropValue( name: string, value: any ) {
 		const all = this.groups.flatMap( x => [ ...x.items ] ) ;
 		const item = all.find( x => x.name==name );
-		if( !item ) {
+		const editor = this.editors.get( name );
+		if( !item || !editor ) {
 			return;
 		}
 
 		if (item.type === 'boolean') {
-			const editor = this.root.query<Input>( '#'+item.name );
-			if( editor ) {
-				editor.setCheck( value as boolean );
-			}
+			(editor as Input).setCheck( value as boolean );
 		}
 		else if (item.type === 'options') {
-			const editor = this.root.query<Select>( '#'+item.name );
-			if( editor ) {
-				editor.setValue( value as string );
-			}
+			(editor as Select).setValue( value as string );
 		}
 		else if (item.type === 'number') {
-			const editor = this.root.query<Input>( '#'+item.name );
-			if( editor ) {
-				editor.setNumValue( value as number, -2 );
-			}
+			(editor as Input).setNumValue( value as number, -2 );
 		}
 		else if (item.type === 'color') {
-			const editor = this.root.query<ColorInput>( '#'+item.name );
-			if( editor ) {
-				editor.setColor( value as string );
-			}
+			(editor as ColorInput).setColor( value as string );
 		}
 		else if (item.type === 'label') {
-			const label = this.root.query<Label>( '#'+item.name );
-			if( label ) {
-				label.setText( value );
-			}
+			(editor as Label).setText( value );
 		}
 		else {
-			const editor = this.root.query<Input>( '#'+item.name );
-			if( editor ) {
-				editor.setValue( value as string );
-			}
+			(editor as Input).setValue( value as string );
 		}
 	}
 

package/src/components/radio/radio.ts

@@ -15,7 +15,6 @@
  **/
 
 import { Component, ComponentEvents, ComponentProps, EvChange, makeUniqueComponentId } from '../../core/component';
-import { class_ns } from '../../core/core_tools';
 import { EventCallback } from '../../core/core_events';
 
 import { Label } from '../label/label';
@@ -57,8 +56,8 @@ interface RadioProps extends ComponentProps {
  * ```
  */
 
-@class_ns( "x4" )
 export class Radio extends Component<RadioProps,RadioEvents> {
+	static classPrefix = "x4";
 
 	private _check: HBox;
 	private _input: Input;

package/src/components/rating/rating.ts

@@ -18,7 +18,7 @@ import { Component, ComponentEvents, ComponentProps, EvChange } from '../../core
 import { EventCallback } from '../../core/core_events';
 import { HBox } from '../boxes/boxes';
 import { Icon } from '../icon/icon';
-import { class_ns, IComponentInterface, IFormElement } from '../../core/core_tools';
+import { IComponentInterface, IFormElement } from '../../core/core_tools';
 
 import icons from "../assets/icons"
 
@@ -49,8 +49,8 @@ export interface RatingProps extends ComponentProps {
  * ```
  */
 
-@class_ns( "x4" )
 export class Rating extends HBox<RatingProps,RatingEventMap> {
+	static classPrefix = "x4";
 
 	private m_els: Component[];
 

package/src/components/select/select.ts

@@ -17,7 +17,7 @@
 
 import { EventCallback } from '../../core/core_events';
 import { Component, ComponentEvents, ComponentProps, EvChange, EvFocus  } from '../../core/component';
-import { class_ns, IComponentInterface, IFormElement, isArray } from '../../core/core_tools';
+import { IComponentInterface, IFormElement, isArray } from '../../core/core_tools';
 
 import { ListboxID, ListItem } from '../components';
 
@@ -57,8 +57,8 @@ interface SelectEvents extends ComponentEvents {
  * ```
  */
 
-@class_ns( "x4" )
 export class Select extends Component<SelectProps,SelectEvents> {
+	static classPrefix = "x4";
 
 	private _items: ListItem[];
 

package/src/components/settingsview/settingsview.module.scss

@@ -16,8 +16,9 @@
 
 :root {
 	--settingsview-toc-width: 210px;
-	--settingsview-section-background: var( --color-primary-a10 );
-	--settingsview-section-title-background: var( --color-primary-a20 );
+	--settingsview-section-background: var( --background-primary );
+	--settingsview-section-title-background: transparent;
+	--settingsview-section-title-color: var( --accent-background );
 	--settingsview-hover-background: var( --color-primary-a20 );
 	--settingsview-marker: var( --accent-background );
 }
@@ -92,13 +93,13 @@
 		}
 	}
 
-	// a section: a panel, its title on a band
+	// a section: no frame, its title in the accent colour on a line
 	.section {
 		flex-shrink: 0;
 		width: 100%;
 		max-width: 900px;
 		padding: 0 8px 10px;
-		border: 1px solid var( --border );
+		border: none;
 		background: var( --settingsview-section-background );
 		overflow: hidden;
 		scroll-margin-top: 20px;	// brought to the top: below the padding of the view
@@ -115,7 +116,7 @@
 			background: var( --settingsview-section-title-background );
 			font-size: 1.1rem;
 			font-weight: 600;
-			--label-color: var( --text-primary );
+			--label-color: var( --settingsview-section-title-color );
 		}
 
 		> .description {