regular-layout 0.0.2 → 0.2.0

package/src/regular-layout.ts

@@ -16,25 +16,28 @@
  * @packageDocumentation
  */
 
-import {
-	EMPTY_PANEL,
-	iter_panel_children,
-	OVERLAY_DEFAULT,
-} from "./common/layout_config.ts";
-import { create_css_grid_layout } from "./common/generate_grid.ts";
+import { EMPTY_PANEL } from "./layout/types.ts";
+import { create_css_grid_layout } from "./layout/generate_grid.ts";
 import type {
 	LayoutPath,
 	Layout,
 	LayoutDivider,
 	TabLayout,
-} from "./common/layout_config.ts";
-import { calculate_intersection } from "./common/calculate_intersect.ts";
-import { remove_child } from "./common/remove_child.ts";
-import { insert_child } from "./common/insert_child.ts";
-import { redistribute_panel_sizes } from "./common/redistribute_panel_sizes.ts";
-import { updateOverlaySheet } from "./common/generate_overlay.ts";
-import { calculate_split } from "./common/calculate_split.ts";
-import { flatten } from "./common/flatten.ts";
+	OverlayMode,
+	Orientation,
+} from "./layout/types.ts";
+import { calculate_intersection } from "./layout/calculate_intersect.ts";
+import { remove_child } from "./layout/remove_child.ts";
+import { insert_child } from "./layout/insert_child.ts";
+import { redistribute_panel_sizes } from "./layout/redistribute_panel_sizes.ts";
+import { updateOverlaySheet } from "./layout/generate_overlay.ts";
+import { calculate_edge } from "./layout/calculate_edge.ts";
+import { flatten } from "./layout/flatten.ts";
+import {
+	CUSTOM_EVENT_NAME_PREFIX,
+	OVERLAY_CLASSNAME,
+	OVERLAY_DEFAULT,
+} from "./layout/constants.ts";
 
 /**
  * A Web Component that provides a resizable panel layout system.
@@ -45,8 +48,8 @@ import { flatten } from "./common/flatten.ts";
  * @example
  * ```html
  * <regular-layout>
- *   <div slot="sidebar">Sidebar content</div>
- *   <div slot="main">Main content</div>
+ *   <div name="sidebar">Sidebar content</div>
+ *   <div name="main">Main content</div>
  * </regular-layout>
  * ```
  *
@@ -73,22 +76,34 @@ export class RegularLayout extends HTMLElement {
 	private _shadowRoot: ShadowRoot;
 	private _panel: Layout;
 	private _stylesheet: CSSStyleSheet;
-	private _dragPath?: [LayoutDivider, number, number];
-	private _slots: Map<string, HTMLSlotElement>;
-	private _unslotted_slot: HTMLSlotElement;
+	private _cursor_stylesheet: CSSStyleSheet;
+	private _drag_target?: [LayoutDivider, number, number];
+	private _cursor_override: boolean;
+	private _dimensions?: { box: DOMRect; style: CSSStyleDeclaration };
 
 	constructor() {
 		super();
 		this._panel = structuredClone(EMPTY_PANEL);
-		this._stylesheet = new CSSStyleSheet();
-		this._unslotted_slot = document.createElement("slot");
+
+		// Why does this implementation use a `<slot>` at all? We must use
+		// `<slot>` and the Shadow DOM to scope the grid CSS rules to each
+		// instance of `<regular-layout>` (without e.g. giving them unique
+		// `"id"` and injecting into `document,head`), and we can only select
+		// `::slotted` light DOM children from `adoptedStyleSheets` on the
+		// `ShadowRoot`.
+
+		// In addition, this model uses a single un-named `<slot>` to host all
+		// light-DOM children, and the child's `"name"` attribute to identify
+		// its position in the `Layout`. Alternatively, using named
 		this._shadowRoot = this.attachShadow({ mode: "open" });
-		this._shadowRoot.adoptedStyleSheets = [this._stylesheet];
-		this._shadowRoot.appendChild(this._unslotted_slot);
-		this._slots = new Map();
-		this.onPointerDown = this.onPointerDown.bind(this);
-		this.onPointerMove = this.onPointerMove.bind(this);
-		this.onPointerUp = this.onPointerUp.bind(this);
+		this._shadowRoot.innerHTML = `<slot></slot>`;
+		this._stylesheet = new CSSStyleSheet();
+		this._cursor_stylesheet = new CSSStyleSheet();
+		this._cursor_override = false;
+		this._shadowRoot.adoptedStyleSheets = [
+			this._stylesheet,
+			this._cursor_stylesheet,
+		];
 	}
 
 	connectedCallback() {
@@ -103,124 +118,173 @@ export class RegularLayout extends HTMLElement {
 		this.removeEventListener("pointermove", this.onPointerMove);
 	}
 
+	/**
+	 * Determines which panel is at a given screen coordinate.
+	 *
+	 * @param column - X coordinate in screen pixels.
+	 * @param row - Y coordinate in screen pixels.
+	 * @returns Panel information if a panel is at that position, null otherwise.
+	 */
+	calculateIntersect = (
+		x: number,
+		y: number,
+		check_dividers: boolean = false,
+	): LayoutPath<Layout> | null => {
+		const [col, row, box] = this.relativeCoordinates(x, y, false);
+		const panel = calculate_intersection(
+			col,
+			row,
+			this._panel,
+			check_dividers ? box : null,
+		);
+
+		if (panel?.type === "layout-path") {
+			return { ...panel, layout: this.save() };
+		}
+
+		return null;
+	};
+
 	/**
 	 * Sets the visual overlay state during drag-and-drop operations.
 	 * Displays a preview of where a panel would be placed at the given coordinates.
 	 *
 	 * @param x - X coordinate in screen pixels.
 	 * @param y - Y coordinate in screen pixels.
-	 * @param layoutPath - Layout path containing the slot identifier.
-	 * @param mode - Overlay rendering mode: "grid" highlights the target,
-	 *   "absolute" positions the panel absolutely, "interactive" updates the
-	 *   actual layout in real-time. Defaults to "absolute".
+	 * @param dragTarget - A `LayoutPath` (presumably from `calculateIntersect`)
+	 *     which points to the drag element in the current layout.
+	 * @param className - The CSS class name to use for the overlay panel
+	 *     (defaults to "overlay").
+	 * @param mode - Overlay rendering mode: "grid" uses CSS grid to position
+	 *     the target, "absolute" positions the panel absolutely. Defaults to
+	 *     "absolute".
 	 */
-	setOverlayState<T>(
+	setOverlayState = (
 		x: number,
 		y: number,
-		{ slot }: LayoutPath<T>,
-		mode: "grid" | "absolute" | "interactive" = OVERLAY_DEFAULT,
-	) {
-		let panel = this._panel;
-		if (mode === "absolute") {
-			panel = remove_child(panel, slot);
-			this._slots.get(slot)?.assignedElements()[0]?.removeAttribute("slot");
-		}
+		{ slot }: LayoutPath<unknown>,
+		className: string = OVERLAY_CLASSNAME,
+		mode: OverlayMode = OVERLAY_DEFAULT,
+	) => {
+		const panel = remove_child(this._panel, slot);
+		Array.from(this.children)
+			.find((x) => x.getAttribute("name") === slot)
+			?.classList.add(className);
 
-		const [col, row, box] = this.relativeCoordinates(x, y);
-		let drop_target = calculate_intersection(col, row, panel, false);
+		const [col, row, box, style] = this.relativeCoordinates(x, y, false);
+		let drop_target = calculate_intersection(col, row, panel);
 		if (drop_target) {
-			drop_target = calculate_split(col, row, panel, slot, drop_target);
-			if (mode === "interactive") {
-				let new_panel = remove_child(this._panel, slot);
-				new_panel = flatten(insert_child(new_panel, slot, drop_target.path));
-				const css = create_css_grid_layout(new_panel);
-				this._stylesheet.replaceSync(css);
-			} else if (mode === "grid") {
-				const path: [string, string] = [slot, drop_target.slot];
-				const css = create_css_grid_layout(this._panel, false, path);
-				this._stylesheet.replaceSync(css);
-			} else if (mode === "absolute") {
-				const css = `${create_css_grid_layout(panel)}\n${updateOverlaySheet({ ...drop_target, box })}`;
-				this._stylesheet.replaceSync(css);
-			}
-		} else {
-			const css = `${create_css_grid_layout(panel)}}`;
+			drop_target = calculate_edge(col, row, panel, slot, drop_target, box);
+		}
+
+		if (mode === "grid" && drop_target) {
+			const path: [string, string] = [slot, drop_target?.slot];
+			const css = create_css_grid_layout(panel, false, path);
 			this._stylesheet.replaceSync(css);
+		} else if (mode === "absolute") {
+			const grid_css = create_css_grid_layout(panel);
+			const overlay_css = updateOverlaySheet(slot, box, style, drop_target);
+			this._stylesheet.replaceSync([grid_css, overlay_css].join("\n"));
 		}
 
-		const event = new CustomEvent("regular-layout-update", { detail: panel });
+		const event_name = `${CUSTOM_EVENT_NAME_PREFIX}-before-update`;
+		const event = new CustomEvent<Layout>(event_name, { detail: panel });
 		this.dispatchEvent(event);
-	}
+	};
 
 	/**
 	 * Clears the overlay state and commits the panel placement.
 	 *
 	 * @param x - X coordinate in screen pixels.
 	 * @param y - Y coordinate in screen pixels.
-	 * @param layout_path - Layout path containing the slot identifier.
+	 * @param dragTarget - A `LayoutPath` (presumably from `calculateIntersect`)
+	 *     which points to the drag element in the current layout.
+	 * @param className - The CSS class name to use for the overlay panel
+	 *     (defaults to "overlay").
 	 * @param mode - Overlay rendering mode that was used, must match the mode
-	 *   passed to `setOverlayState`. Defaults to "absolute".
+	 *     passed to `setOverlayState`. Defaults to "absolute".
 	 */
-	clearOverlayState<T>(
+	clearOverlayState = (
 		x: number,
 		y: number,
-		drag_target: LayoutPath<T>,
-		mode: "grid" | "absolute" | "interactive" = OVERLAY_DEFAULT,
-	) {
+		drag_target: LayoutPath<Layout>,
+		className: string = OVERLAY_CLASSNAME,
+	) => {
 		let panel = this._panel;
-		if (mode === "absolute") {
-			panel = remove_child(panel, drag_target.slot);
-			this._unslotted_slot
-				.assignedElements()[0]
-				?.setAttribute("slot", drag_target.slot);
-		}
+		panel = remove_child(panel, drag_target.slot);
+		Array.from(this.children)
+			.find((x) => x.getAttribute("name") === drag_target.slot)
+			?.classList.remove(className);
 
-		const [col, row, _] = this.relativeCoordinates(x, y);
-		let drop_target = calculate_intersection(col, row, panel, false);
+		const [col, row, box] = this.relativeCoordinates(x, y, false);
+		let drop_target = calculate_intersection(col, row, panel);
 		if (drop_target) {
-			// TODO I think I only need the new path here?
-			drop_target = calculate_split(
+			drop_target = calculate_edge(
 				col,
 				row,
 				panel,
 				drag_target.slot,
 				drop_target,
+				box,
 			);
 		}
 
 		const { path, orientation } = drop_target ? drop_target : drag_target;
+		const new_layout = drop_target
+			? insert_child(
+					panel,
+					drag_target.slot,
+					path,
+					drop_target?.is_edge ? orientation : undefined,
+				)
+			: drag_target.layout;
 
-		this.restore(
-			insert_child(
-				panel,
-				drag_target.slot,
-				path,
-				orientation,
-				!drop_target?.is_edge,
-			),
-		);
-	}
+		this.restore(new_layout);
+	};
 
 	/**
 	 * Inserts a new panel into the layout at a specified path.
 	 *
 	 * @param name - Unique identifier for the new panel.
 	 * @param path - Index path defining where to insert.
+	 * @param split - Force a split in the layout at the end of `path`
+	 *     regardless if there is a leaf at this position or not. Optionally,
+	 *.    `split` may be your preferred `Orientation`, which will be used by
+	 *     the new `SplitPanel` _if_ there is an option of orientation (e.g. if
+	 *     the layout had no pre-existing `SplitPanel`)
 	 */
-	insertPanel(name: string, path: number[] = []) {
-		this.restore(insert_child(this._panel, name, path));
-	}
+	insertPanel = (
+		name: string,
+		path: number[] = [],
+		split?: boolean | Orientation,
+	) => {
+		let orientation: Orientation | undefined;
+		if (typeof split === "boolean" && split) {
+			orientation = "horizontal";
+		} else if (typeof split === "string") {
+			orientation = split;
+		}
+
+		this.restore(insert_child(this._panel, name, path, orientation));
+	};
 
 	/**
 	 * Removes a panel from the layout by name.
 	 *
 	 * @param name - Name of the panel to remove
 	 */
-	removePanel(name: string) {
+	removePanel = (name: string) => {
 		this.restore(remove_child(this._panel, name));
-	}
+	};
 
-	getPanel(name: string, layout: Layout = this._panel): TabLayout | null {
+	/**
+	 * Retrieves a panel by name from the layout tree.
+	 *
+	 * @param name - Name of the panel to find.
+	 * @param layout - Optional layout tree to search in (defaults to current layout).
+	 * @returns The TabLayout containing the panel if found, null otherwise.
+	 */
+	getPanel = (name: string, layout: Layout = this._panel): TabLayout | null => {
 		if (layout.type === "child-panel") {
 			if (layout.child.includes(name)) {
 				return layout;
@@ -236,33 +300,14 @@ export class RegularLayout extends HTMLElement {
 		}
 
 		return null;
-	}
+	};
 
 	/**
-	 * Determines which panel is at a given screen coordinate.
-	 * Useful for drag-and-drop operations or custom interactions.
-	 *
-	 * @param column - X coordinate in screen pixels.
-	 * @param row - Y coordinate in screen pixels.
-	 * @returns Panel information if a panel is at that position, null otherwise.
+	 * Clears the entire layout, unslotting all panels.
 	 */
-	calculateIntersect(
-		x: number,
-		y: number,
-		check_dividers: boolean = false,
-	): LayoutPath<DOMRect> | null {
-		const [col, row, box] = this.relativeCoordinates(x, y);
-		const panel = calculate_intersection(col, row, this._panel, check_dividers);
-		if (panel?.type === "layout-path") {
-			return { ...panel, box };
-		}
-
-		return null;
-	}
-
-	clear() {
+	clear = () => {
 		this.restore(EMPTY_PANEL);
-	}
+	};
 
 	/**
 	 * Restores the layout from a saved state.
@@ -276,32 +321,14 @@ export class RegularLayout extends HTMLElement {
 	 * layout.restore(savedState);
 	 * ```
 	 */
-	restore(layout: Layout, _is_flattened: boolean = false) {
+	restore = (layout: Layout, _is_flattened: boolean = false) => {
 		this._panel = !_is_flattened ? flatten(layout) : layout;
-		const css = create_css_grid_layout(layout);
+		const css = create_css_grid_layout(this._panel);
 		this._stylesheet.replaceSync(css);
-		const old = new Set(this._slots.keys());
-		for (const name of iter_panel_children(layout)) {
-			old.delete(name);
-			if (!this._slots.has(name)) {
-				const slot = document.createElement("slot");
-				slot.setAttribute("name", name);
-				this._shadowRoot.appendChild(slot);
-				this._slots.set(name, slot);
-			}
-		}
-
-		for (const key of old) {
-			const child = this._slots.get(key);
-			if (child) {
-				this._shadowRoot.removeChild(child);
-				this._slots.delete(key);
-			}
-		}
-
-		const event = new CustomEvent("regular-layout-update", { detail: layout });
+		const event_name = `${CUSTOM_EVENT_NAME_PREFIX}-update`;
+		const event = new CustomEvent<Layout>(event_name, { detail: this._panel });
 		this.dispatchEvent(event);
-	}
+	};
 
 	/**
 	 * Serializes the current layout state, which can be restored via `restore`.
@@ -315,59 +342,114 @@ export class RegularLayout extends HTMLElement {
 	 * localStorage.setItem('layout', JSON.stringify(state));
 	 * ```
 	 */
-	save(): Layout {
+	save = (): Layout => {
 		return structuredClone(this._panel);
-	}
+	};
 
-	private relativeCoordinates(
+	/**
+	 * Converts screen coordinates to relative layout coordinates.
+	 *
+	 * Transforms absolute pixel positions into normalized coordinates (0-1 range)
+	 * relative to the layout's bounding box.
+	 *
+	 * @param clientX - X coordinate in screen pixels (client space).
+	 * @param clientY - Y coordinate in screen pixels (client space).
+	 * @returns A tuple containing:
+	 *   - col: Normalized X coordinate (0 = left edge, 1 = right edge)
+	 *   - row: Normalized Y coordinate (0 = top edge, 1 = bottom edge)
+	 *   - box: The layout element's bounding rectangle
+	 */
+	relativeCoordinates = (
 		clientX: number,
 		clientY: number,
-	): [number, number, DOMRect] {
-		const box = this.getBoundingClientRect();
-		const col = (clientX - box.left) / (box.right - box.left);
-		const row = (clientY - box.top) / (box.bottom - box.top);
-		return [col, row, box];
-	}
+		recalculate_bounds: boolean = true,
+	): [number, number, DOMRect, CSSStyleDeclaration] => {
+		if (recalculate_bounds || !this._dimensions) {
+			this._dimensions = {
+				box: this.getBoundingClientRect(),
+				style: getComputedStyle(this),
+			};
+		}
+
+		const box = this._dimensions.box;
+		const style = this._dimensions.style;
+		const col =
+			(clientX - box.left - parseFloat(style.paddingLeft)) /
+			(box.width -
+				parseFloat(style.paddingLeft) -
+				parseFloat(style.paddingRight));
+		const row =
+			(clientY - box.top - parseFloat(style.paddingTop)) /
+			(box.height -
+				parseFloat(style.paddingTop) -
+				parseFloat(style.paddingBottom));
+
+		return [col, row, box, style];
+	};
 
-	private onPointerDown(event: PointerEvent) {
+	private onPointerDown = (event: PointerEvent) => {
 		if (event.target === this) {
-			const [col, row] = this.relativeCoordinates(event.clientX, event.clientY);
-			const hit = calculate_intersection(col, row, this._panel);
+			const [col, row, box] = this.relativeCoordinates(
+				event.clientX,
+				event.clientY,
+			);
+
+			const hit = calculate_intersection(col, row, this._panel, box);
 			if (hit && hit.type !== "layout-path") {
-				this._dragPath = [hit, col, row];
+				this._drag_target = [hit, col, row];
 				this.setPointerCapture(event.pointerId);
-				// event.preventDefault();
-				// event.stopImmediatePropagation();
+				event.preventDefault();
 			}
 		}
-	}
+	};
+
+	private onPointerMove = (event: PointerEvent) => {
+		if (this._drag_target) {
+			const [col, row] = this.relativeCoordinates(
+				event.clientX,
+				event.clientY,
+				false,
+			);
 
-	private onPointerMove(event: PointerEvent) {
-		if (this._dragPath) {
-			const [col, row] = this.relativeCoordinates(event.clientX, event.clientY);
-			const old_panel = this._panel;
-			const [{ path, type }, old_col, old_row] = this._dragPath;
+			const [{ path, type }, old_col, old_row] = this._drag_target;
 			const offset = type === "horizontal" ? old_col - col : old_row - row;
-			const panel = redistribute_panel_sizes(old_panel, path, offset);
+			const panel = redistribute_panel_sizes(this._panel, path, offset);
 			this._stylesheet.replaceSync(create_css_grid_layout(panel));
+		} else if (event.target === this) {
+			const [col, row, box] = this.relativeCoordinates(
+				event.clientX,
+				event.clientY,
+				false,
+			);
+
+			const divider = calculate_intersection(col, row, this._panel, box);
+			if (divider?.type === "vertical") {
+				this._cursor_stylesheet.replaceSync(":host{cursor:row-resize");
+				this._cursor_override = true;
+			} else if (divider?.type === "horizontal") {
+				this._cursor_stylesheet.replaceSync(":host{cursor:col-resize");
+				this._cursor_override = true;
+			}
+		} else if (this._cursor_override) {
+			this._cursor_override = false;
+			this._cursor_stylesheet.replaceSync("");
 		}
-	}
+	};
 
-	private onPointerUp(event: PointerEvent) {
-		if (this._dragPath) {
+	private onPointerUp = (event: PointerEvent) => {
+		if (this._drag_target) {
 			this.releasePointerCapture(event.pointerId);
-			const [col, row] = this.relativeCoordinates(event.clientX, event.clientY);
-			const old_panel = this._panel;
-			const [{ path }, old_col, old_row] = this._dragPath;
-			if (this._dragPath[0].type === "horizontal") {
-				const panel = redistribute_panel_sizes(old_panel, path, old_col - col);
-				this.restore(panel, true);
-			} else {
-				const panel = redistribute_panel_sizes(old_panel, path, old_row - row);
-				this.restore(panel, true);
-			}
+			const [col, row] = this.relativeCoordinates(
+				event.clientX,
+				event.clientY,
+				false,
+			);
 
-			this._dragPath = undefined;
+			const [{ path, type }, old_col, old_row] = this._drag_target;
+			const offset = type === "horizontal" ? old_col - col : old_row - row;
+			const panel = redistribute_panel_sizes(this._panel, path, offset);
+			this.restore(panel, true);
+			this._drag_target = undefined;
 		}
-	}
+	};
 }

package/themes/chicago.css

@@ -0,0 +1,89 @@
+/* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+ * ░░░░░░░░▄▀░█▀▄░█▀▀░█▀▀░█░█░█░░░█▀█░█▀▄░░░░░█░░░█▀█░█░█░█▀█░█░█░▀█▀░▀▄░░░░░░░░
+ * ░░░░░░░▀▄░░█▀▄░█▀▀░█░█░█░█░█░░░█▀█░█▀▄░▀▀▀░█░░░█▀█░░█░░█░█░█░█░░█░░░▄▀░░░░░░░
+ * ░░░░░░░░░▀░▀░▀░▀▀▀░▀▀▀░▀▀▀░▀▀▀░▀░▀░▀░▀░░░░░▀▀▀░▀░▀░░▀░░▀▀▀░▀▀▀░░▀░░▀░░░░░░░░░
+ * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+ * ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃  *  Copyright (c) 2026, the Regular Layout Authors. This file is part  *  ┃
+ * ┃  *  of the Regular Layout library, distributed under the terms of the  *  ┃
+ * ┃  *  [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). *  ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
+
+regular-layout.chicago {
+    background-color: #008080;
+    font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
+    padding: 24px;
+}
+
+/* Frame */
+regular-layout.chicago regular-layout-frame {
+    position: relative;
+    box-sizing: border-box;
+    margin: 12px;
+    background: #C0C0C0;
+    border-width: 2px;
+    border-color: #FFFFFF #808080 #808080 #FFFFFF;
+    border-style: solid;
+}
+
+regular-layout.chicago regular-layout-frame::part(close) {
+    border-width: 1px;
+    border-color: #FFFFFF #808080 #808080 #FFFFFF;
+    border-style: solid;
+    height: 16px;
+    background: #C0C0C0;
+    align-self: center;
+    display: flex;
+    align-items: center;
+    padding: 0px 4px;
+}
+
+regular-layout.chicago regular-layout-frame::part(close):before {
+    content: "X";
+    font-size: 10px;
+    font-weight: bold;
+}
+
+regular-layout.chicago regular-layout-frame::part(titlebar) {
+    display: flex;
+    align-items: stretch;
+    padding-right: 0px;
+}
+
+regular-layout.chicago regular-layout-frame::part(tab) {
+    display: flex;
+    flex: 1 1 150px;
+    align-items: center;
+    padding: 0 3px 0 8px;
+    cursor: pointer;
+    text-overflow: ellipsis;
+    background: #808080;
+    color: #FFF;
+    font-family: "Tahoma", "Arial", sans-serif;
+    font-weight: bold;
+    font-size: 11px;
+}
+
+regular-layout.chicago regular-layout-frame::part(active-tab) {
+    background: #000080;
+    opacity: 1;
+}
+
+regular-layout.chicago:has(.overlay)>* {
+    opacity: 0.8;
+}
+
+regular-layout.chicago:has(.overlay)>.overlay {
+    opacity: 1;
+}
+
+/* Frame in Overlay Mode */
+regular-layout.chicago regular-layout-frame.overlay {
+    margin: 0;
+    transition:
+        top 0.1s ease-in-out,
+        height 0.1s ease-in-out,
+        width 0.1s ease-in-out,
+        left 0.1s ease-in-out;
+}