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

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

try {
	QuantityStyleSheet.insertRule(
		`
@layer quantity { 
:host{--qty-height:40px;--qty-radius:0;--qty-gap:var(--monster-space-4);--qty-pad-x:var(--monster-space-4);--qty-bg:var(--monster-theme-control-bg-color);--qty-fg:var(--monster-theme-control-color);--qty-border-color:var(--monster-theme-control-border-color);--qty-outline:var(--monster-outline-width) solid var(--monster-theme-control-border-color);--qty-btn-bg:var(--monster-bg-color-primary-3);--qty-btn-bg-hover:var(--monster-bg-color-primary-4);--qty-btn-bg-active:var(--monster-bg-color-primary-2);--qty-btn-fg:var(--monster-color-primary-3);--qty-input-fg:var(--monster-color-primary-1);--qty-input-bg:transparent;--qty-shadow:none;color:var(--qty-fg);font-family:var(--monster-font-family)}[part=control]{display:inline-flex;vertical-align:middle}[part=input-group]{align-items:center;background:var(--qty-bg);border:var(--monster-theme-control-border-width,1px) var(--monster-theme-control-border-style,solid) var(--qty-border-color);border-radius:var(--qty-radius);box-shadow:var(--qty-shadow);color:var(--qty-fg);display:inline-grid;gap:var(--qty-gap);grid-auto-flow:column;height:var(--qty-height);padding-inline:var(--qty-pad-x)}[part=decrement-button],[part=increment-button]{background:var(--qty-btn-bg);border:0;border-radius:var(--qty-radius);color:var(--qty-btn-fg);cursor:pointer;display:inline-grid;height:calc(var(--qty-height) - var(--monster-space-4));place-items:center;transition:transform .08s ease,background-color .15s ease;width:calc(var(--qty-height) - var(--monster-space-4))}[part=decrement-button]{transform:translateX(-7px)}[part=increment-button]{transform:translateX(7px)}[part=decrement-button]:hover,[part=increment-button]:hover{background:var(--qty-btn-bg-hover)}[part=decrement-button]:active,[part=increment-button]:active{background:var(--qty-btn-bg-active)}[part=decrement-button]:active{transform:scale(.95) translateX(-7px)}[part=increment-button]:active{transform:scale(.95) translateX(7px)}[part=decrement-button] svg,[part=increment-button] svg{display:block;height:18px;pointer-events:none;width:18px}[part=input]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;background:var(--qty-input-bg);border:0;color:var(--qty-input-fg);font:inherit;max-width:6.5ch;min-width:2.5ch;outline:none;padding:0 .25rem;text-align:center}[part=input]::-webkit-inner-spin-button,[part=input]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}:host(:focus-within) [part=input-group]{outline:var(--qty-outline);outline-offset:2px}:host([disabled]) [part=decrement-button],:host([disabled]) [part=increment-button]{cursor:not-allowed;opacity:.5}:host([disabled]) [part=input]{cursor:not-allowed;opacity:.75}:host([data-size=compact]){--qty-height:32px}:host([data-size=large]){--qty-height:48px}@media (prefers-reduced-motion:reduce){[part=decrement-button],[part=increment-button]{transition:none}} 
}`,
		0,
	);
} catch (e) {
	addAttributeToken(
		document.getRootNode().querySelector("html"),
		ATTRIBUTE_ERRORMESSAGE,
		e + "",
	);
}