@schukai/monster/source/components/layout/stylesheet/split-panel.mjs

Monster is a simple library for creating fast, robust and lightweight websites.

/**
 * Copyright © schukai GmbH and all contributing authors, 2025. All rights reserved.
 * Node module: @schukai/monster
 *
 * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
 * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
 *
 * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
 * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
 * For more information about purchasing a commercial license, please contact schukai GmbH.
 */

import { addAttributeToken } from "../../../dom/attributes.mjs";
import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";

export { SplitPanelStyleSheet };

/**
 * @private
 * @type {CSSStyleSheet}
 */
const SplitPanelStyleSheet = new CSSStyleSheet();

try {
	SplitPanelStyleSheet.insertRule(
		`
@layer splitpanel { 
[data-monster-role=split-panel]{box-sizing:border-box;display:flex;flex-direction:row;height:auto;margin:0;padding:0;width:100%}[data-monster-role=split-panel] .panel{flex-grow:1;overflow:auto}[data-monster-role=split-panel] [data-monster-role=dragger]{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4);height:auto;position:relative;width:var(--monster-dragger-width)}:is([data-monster-role=split-panel] [data-monster-role=dragger]) [data-monster-role=handle]{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3);cursor:pointer;height:var(--monster-dragger-handle-height);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--monster-dragger-handle-width);z-index:var(--monster-z-index-outline)}.horizontal[data-monster-role=split-panel]{flex-direction:column}.horizontal[data-monster-role=split-panel] [data-monster-role=dragger]{height:var(--monster-dragger-width);width:100%}:is(.horizontal[data-monster-role=split-panel] [data-monster-role=dragger]) [data-monster-role=handle]{height:var(--monster-dragger-handle-width);width:var(--monster-dragger-handle-height)} 
}`,
		0,
	);
} catch (e) {
	addAttributeToken(
		document.getRootNode().querySelector("html"),
		ATTRIBUTE_ERRORMESSAGE,
		e + "",
	);
}