import base_default from "../_virtual/inline-css_src/define/base.js";
import shared_default from "../_virtual/inline-css_src/define/shared.js";

//#region src/define/skin-mixin.ts
const STYLES_ID = "__media-styles";
function ensureRootStyles() {
	if (document.getElementById(STYLES_ID)) return;
	const style = document.createElement("style");
	style.id = STYLES_ID;
	style.textContent = base_default;
	document.head.appendChild(style);
}
const sharedSheet = new CSSStyleSheet();
sharedSheet.replaceSync(shared_default);
/**
* Mixin for skin elements that renders the template from a static
* `getTemplateHTML` method into a shadow root. Native `<slot>` elements
* handle light DOM projection automatically.
*
* When `static styles` is set, the stylesheet is adopted into the
* shadow root via `adoptedStyleSheets`.
*/
function SkinMixin(BaseClass) {
	class SkinElement extends BaseClass {
		static {
			this.shadowRootOptions = { mode: "open" };
		}
		constructor(...args) {
			super(...args);
			ensureRootStyles();
			if (!this.shadowRoot) {
				const ctor = this.constructor;
				this.attachShadow(ctor.shadowRootOptions);
				const sheets = [sharedSheet];
				if (ctor.styles) sheets.push(ctor.styles);
				this.shadowRoot.adoptedStyleSheets = sheets;
				if (ctor.getTemplateHTML) this.shadowRoot.innerHTML = ctor.getTemplateHTML();
			}
		}
	}
	return SkinElement;
}
/** Create a shared `CSSStyleSheet` from a CSS string. */
function createStyles(css) {
	const sheet = new CSSStyleSheet();
	sheet.replaceSync(css);
	return sheet;
}

//#endregion
export { SkinMixin, createStyles };
//# sourceMappingURL=skin-mixin.js.map