@schukai/monster/source/components/form/stylesheet/invalid.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 { InvalidStyleSheet };

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

try {
	InvalidStyleSheet.insertRule(
		`
@layer invalid { 
:host(:invalid){position:relative}:host(:invalid):after{background:var(--monster-color-error-2);background-size:150px auto;bottom:-12px;content:\"\";height:12px;left:0;-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 150 11\"><defs><linearGradient id=\"a\" x1=\"0\" x2=\"150\" y1=\"0\" y2=\"0\" gradientUnits=\"userSpaceOnUse\"><stop offset=\"0%\"/><stop offset=\"50%\" stop-opacity=\".5\"/><stop offset=\"100%\"/></linearGradient></defs><path fill=\"none\" stroke=\"url(%23a)\" stroke-dasharray=\"url(%23widthGradient)\" stroke-linecap=\"round\" stroke-width=\"2\" d=\"M0 6c25-4 50 4 75 0s50 4 75 0\"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 150 11\"><defs><linearGradient id=\"a\" x1=\"0\" x2=\"150\" y1=\"0\" y2=\"0\" gradientUnits=\"userSpaceOnUse\"><stop offset=\"0%\"/><stop offset=\"50%\" stop-opacity=\".5\"/><stop offset=\"100%\"/></linearGradient></defs><path fill=\"none\" stroke=\"url(%23a)\" stroke-dasharray=\"url(%23widthGradient)\" stroke-linecap=\"round\" stroke-width=\"2\" d=\"M0 6c25-4 50 4 75 0s50 4 75 0\"/></svg>');-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;position:absolute;width:100%}input:invalid,select:invalid,textarea:invalid{outline-color:var(--monster-color-error-2)} 
}`,
		0,
	);
} catch (e) {
	addAttributeToken(
		document.getRootNode().querySelector("html"),
		ATTRIBUTE_ERRORMESSAGE,
		e + "",
	);
}