@schukai/monster/source/components/form/stylesheet/sheet.mjs

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

/**
 * Copyright © Volker Schukai and all contributing authors, 2026. 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 Volker Schukai.
 */

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

export { SheetStyleSheet };

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

try {
	SheetStyleSheet.insertRule(
		`
@layer sheet { 
:host{--sheet-border-color:var(--monster-theme-control-border-color);--sheet-border-strong:var(--monster-color-primary-4);--sheet-border-width:var(--monster-theme-control-border-width,1px);--sheet-border-style:var(--monster-theme-control-border-style,solid);--sheet-header-bg:var(--monster-bg-color-primary-2);--sheet-header-fg:var(--monster-color-primary-1);--sheet-cell-bg:var(--monster-bg-color-primary-1);--sheet-cell-fg:var(--monster-color-primary-1);--sheet-grid-gap:0;--sheet-row-header-width:56px;--sheet-header-height:32px;--sheet-cell-padding-inline:8px;--sheet-cell-padding-block:6px;--sheet-resize-handle:6px;color:var(--sheet-cell-fg);display:block;font-family:var(--monster-font-family)}[part=control]{flex-direction:column;height:100%}[part=control],[part=toolbar]{display:flex;gap:var(--monster-space-4)}[part=grid-wrapper]{border:var(--sheet-border-width) var(--sheet-border-style) var(--sheet-border-color);flex:1;min-height:0;overflow:auto;position:relative}[part=grid]{background:var(--sheet-cell-bg);display:grid;gap:var(--sheet-grid-gap);min-width:-moz-max-content;min-width:max-content}:host([data-virtualized]) [part=grid]{left:0;position:absolute;top:0;will-change:transform}:host([data-virtualized]) [part=column-header],:host([data-virtualized]) [part=corner],:host([data-virtualized]) [part=row-header]{position:relative}:host([data-resizing]) [part=grid]{-webkit-user-select:none;-moz-user-select:none;user-select:none}[part=column-header],[part=corner],[part=row-header]{align-items:center;background:var(--sheet-header-bg);color:var(--sheet-header-fg);display:flex;font-weight:600;position:sticky;white-space:nowrap;word-break:keep-all;z-index:2}[part=corner]{left:0;top:0;z-index:3}[part=column-header]{justify-content:center;top:0}[part=row-header]{justify-content:flex-end;left:0;padding-inline:var(--sheet-cell-padding-inline)}[part=cell]{align-items:stretch;background:var(--sheet-cell-bg);border-bottom:var(--sheet-border-width) var(--sheet-border-style) var(--sheet-border-color);border-right:var(--sheet-border-width) var(--sheet-border-style) var(--sheet-border-color);display:flex}[part=column-header],[part=corner],[part=row-header]{border-bottom:var(--sheet-border-width) var(--sheet-border-style) var(--sheet-border-strong);border-right:var(--sheet-border-width) var(--sheet-border-style) var(--sheet-border-strong)}[part=column-header],[part=corner]{border-bottom:0}[part=corner],[part=row-header]{border-right:0}[part=cell-input]{background:transparent;border:0;color:inherit;font:inherit;outline:none;padding:var(--sheet-cell-padding-block) var(--sheet-cell-padding-inline);width:100%}[part=cell-input]:focus{background:var(--monster-bg-color-primary-2)}[part=column-resize]{background:linear-gradient(to right,transparent 0,transparent calc(100% - 1px),var(--sheet-border-strong) calc(100% - 1px),var(--sheet-border-strong) 100%);cursor:col-resize;height:100%;right:-1px;top:0;width:var(--sheet-resize-handle)}[part=column-resize],[part=row-resize]{pointer-events:auto;position:absolute;touch-action:none;z-index:4}[part=row-resize]{background:linear-gradient(to bottom,transparent 0,transparent calc(100% - 1px),var(--sheet-border-strong) calc(100% - 1px),var(--sheet-border-strong) 100%);bottom:-1px;cursor:row-resize;height:var(--sheet-resize-handle);left:0;width:100%} 
}`,
		0,
	);
} catch (e) {
	addAttributeToken(
		document.getRootNode().querySelector("html"),
		ATTRIBUTE_ERRORMESSAGE,
		e + "",
	);
}