@schukai/monster/source/components/layout/stylesheet/vertical-tabs.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 { VerticalTabsStyleSheet };

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

try {
	VerticalTabsStyleSheet.insertRule(
		`
@layer tabs {
	[data-monster-role=control] {
		align-items: stretch;
		display: flex;
		flex-direction: row;
	}

	[data-monster-role=control] > slot[data-monster-role=slot] {
		flex: 1 1 auto;
	}

	nav[data-monster-role=nav] {
		align-items: stretch;
		border-bottom-width: 0;
		border-right-style: var(--monster-border-style);
		border-right-width: thin;
		border-color: var(--monster-bg-color-primary-2);
		flex-direction: column;
		margin-bottom: 0;
		margin-right: 0.75rem;
		max-height: 100%;
	}

	[data-monster-role=nav] button {
		border-bottom-width: 0;
		border-right-style: var(--monster-border-style);
		border-right-width: var(--monster-border-width);
		border-right-color: var(--monster-bg-color-primary-4);
		flex-direction: column;
		margin-bottom: 0.75rem;
		margin-right: 0;
		padding: 0.5rem 0.4rem;
	}

	[data-monster-role=nav] button[data-monster-role=button]:last-of-type {
		margin-bottom: 0;
	}

	[data-monster-role=nav] button:not([disabled]):hover {
		border-bottom-width: 0;
		border-right-color: var(--monster-bg-color-secondary-3);
	}

	[data-monster-role=nav] button[data-monster-state=active],
	[data-monster-role=nav] button[data-monster-state=active]:not([disabled]):hover {
		border-bottom-width: 0;
		border-right-color: var(--monster-bg-color-secondary-3);
	}

	[data-monster-role=nav] > button[data-monster-role=button] > span:first-of-type {
		display: inline-flex;
		text-orientation: mixed;
		white-space: nowrap;
		writing-mode: vertical-rl;
	}

	[data-monster-role=nav] button .remove-tab {
		margin-top: 0.35rem;
	}

	[data-monster-role=nav] button[data-monster-role=switch] {
		border-right-width: 0;
		margin-top: 0.5rem;
	}

	[data-monster-role=nav] [data-monster-role=popper-nav] button {
		flex-direction: row;
		margin-bottom: 0;
		padding-left: 15px;
		padding-right: 15px;
	}

	[data-monster-role=nav] [data-monster-role=popper-nav] button > span:first-of-type {
		text-orientation: mixed;
		writing-mode: horizontal-tb;
	}

	::slotted([slot]) {
		border-bottom-width: 0;
		border-right-style: var(--monster-border-style);
		border-right-width: var(--monster-border-width);
		border-color: var(--monster-bg-color-primary-4);
	}

	::slotted([slot=start]) {
		margin-bottom: 0.75rem;
		margin-right: 0;
	}

	::slotted([slot=end]) {
		margin-left: 0;
		margin-top: 0.75rem;
	}
}
`,
		0,
	);
} catch (e) {
	addAttributeToken(
		document.getRootNode().querySelector("html"),
		ATTRIBUTE_ERRORMESSAGE,
		e + "",
	);
}