@proximus/lavender-common 1.4.15-beta.1 → 1.4.16-alpha.3

package/dist/cms-editor-slots.js

@@ -0,0 +1 @@
+(function(){var e=`.mgnlEditor`,t={"PX-HEADER":`editor`};function n(e){return!!e.shadowRoot?.querySelector(`slot:not([name])`)}function r(e,t){return t[e.tagName]??null}function i(i,{selector:a=e,slotByHost:o=t}={}){if(!i.matches(a)||i.hasAttribute(`slot`))return null;let s=i.parentElement;if(!s?.shadowRoot||n(s))return null;let c=r(s,o);return c?(i.setAttribute(`slot`,c),c):null}function a({selector:n=e,slotByHost:r=t,root:a=document.documentElement}={}){let o=0;return a.querySelectorAll(n).forEach(e=>{i(e,{selector:n,slotByHost:r})&&(o+=1)}),o}function o({selector:n=e,slotByHost:r=t,root:o=document.documentElement}={}){a({selector:n,slotByHost:r,root:o});let s=new MutationObserver(e=>{e.forEach(e=>{e.addedNodes.forEach(e=>{e instanceof Element&&(i(e,{selector:n,slotByHost:r}),e.querySelectorAll(n).forEach(e=>{i(e,{selector:n,slotByHost:r})}))})})});return s.observe(o,{childList:!0,subtree:!0}),()=>s.disconnect()}function s(){window.pxCmsEditorSlotsStop=o(window.pxCmsEditorSlots)}document.readyState===`loading`?document.addEventListener(`DOMContentLoaded`,s,{once:!0}):s()})();

package/dist/cms-editor-slots.script.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Standalone, side-effecting entry point for the CMS authoring chrome shim.
+ *
+ * Built to `dist/cms-editor-slots.js` as a classic script, so it can be dropped
+ * into a CMS author instance with a plain tag, without any bundler:
+ *
+ * ```html
+ * <script src="/.resources/lavender/cms-editor-slots.js"></script>
+ * ```
+ *
+ * In Magnolia, guard the include so it never reaches a public page:
+ *
+ * ```ftl
+ * [#if cmsfn.editMode]
+ *   <script src="${ctx.contextPath}/.resources/lavender/cms-editor-slots.js"></script>
+ * [/#if]
+ * ```
+ *
+ * The host to slot mapping can be extended before the script runs:
+ *
+ * ```html
+ * <script>
+ *   window.pxCmsEditorSlots = { slotByHost: { 'PX-HEADER': 'editor' } };
+ * </script>
+ * <script src="/.resources/lavender/cms-editor-slots.js"></script>
+ * ```
+ *
+ * Import `observeCmsEditorSlots` from `@proximus/lavender-common` instead when
+ * you drive the integration from your own bundle.
+ */
+import { type CmsEditorSlotsOptions } from './cmsEditorSlots';
+declare global {
+    interface Window {
+        /** Optional configuration, read once when the standalone script runs. */
+        pxCmsEditorSlots?: CmsEditorSlotsOptions;
+        /** Disconnects the observer started by the standalone script. */
+        pxCmsEditorSlotsStop?: () => void;
+    }
+}

package/dist/cmsEditorSlots.d.ts

@@ -0,0 +1,60 @@
+/**
+ * CMS authoring chrome slot assignment.
+ *
+ * A CMS page editor injects its controls (edit bars, placeholders, drop zones)
+ * next to the markers it rendered server side. Magnolia, for instance, emits
+ * `cms:area` / `cms:component` HTML comments and, client side, inserts a
+ * `div.mgnlEditorBar` as a sibling of each comment.
+ *
+ * When such a comment sits inside a Lavender custom element, the injected
+ * control becomes a direct child of a shadow host. Shadow DOM only projects
+ * children that match a slot, and most Lavender components expose named slots
+ * only, with no default `<slot>`. The control therefore stays in the DOM but is
+ * never rendered, and the authoring UI silently disappears.
+ *
+ * These helpers assign the injected elements to a slot the host actually
+ * exposes, for example the `editor` slot of `px-header`.
+ *
+ * They are meant to run on an author instance only, never on a public page.
+ */
+/** Maps a host tag name to the slot its authoring chrome should be assigned to. */
+export type CmsEditorSlotMap = Record<string, string>;
+export interface CmsEditorSlotsOptions {
+    /**
+     * Selector matching the elements injected by the page editor.
+     * Defaults to Magnolia's `.mgnlEditor` marker class.
+     */
+    selector?: string;
+    /**
+     * Slot name to use per host tag name. Tag names are matched upper case, the
+     * way `Element.tagName` reports them.
+     */
+    slotByHost?: CmsEditorSlotMap;
+    /** Root to scan and observe. Defaults to `document.documentElement`. */
+    root?: ParentNode & Node;
+}
+/**
+ * Assigns a single element to the slot of its host when it would otherwise stay
+ * unprojected.
+ *
+ * Nothing happens when the element already carries a `slot` attribute, when its
+ * parent is not a shadow host, or when that host exposes a default `<slot>`,
+ * since in that case the element is projected already.
+ *
+ * @returns the slot name that was applied, or `null` when the element was left
+ * untouched.
+ */
+export declare function assignCmsEditorSlot(element: Element, { selector, slotByHost, }?: Omit<CmsEditorSlotsOptions, 'root'>): string | null;
+/**
+ * Assigns every already injected control found under `root`.
+ *
+ * @returns the number of elements that were assigned to a slot.
+ */
+export declare function assignCmsEditorSlots({ selector, slotByHost, root, }?: CmsEditorSlotsOptions): number;
+/**
+ * Assigns the controls already present, then keeps watching for the ones the
+ * page editor injects later, after a save or a selection change.
+ *
+ * @returns a function disconnecting the observer.
+ */
+export declare function observeCmsEditorSlots({ selector, slotByHost, root, }?: CmsEditorSlotsOptions): () => void;

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export * from './common';
 export * from './breakpoints';
+export * from './cmsEditorSlots';

package/dist/index.es.js

@@ -155,235 +155,235 @@ var u = class e extends HTMLElement {
 		return this.getAttribute("grow");
 	}
 	set grow(e) {
-		G(this, "grow", e);
+		W(this, "grow", e);
 	}
 	get growMobile() {
 		return this.getAttribute("grow--mobile");
 	}
 	set growMobile(e) {
-		G(this, "grow--mobile", e);
+		W(this, "grow--mobile", e);
 	}
 	get growTablet() {
 		return this.getAttribute("grow--tablet");
 	}
 	set growTablet(e) {
-		G(this, "grow--tablet", e);
+		W(this, "grow--tablet", e);
 	}
 	get growLaptop() {
 		return this.getAttribute("grow--laptop");
 	}
 	set growLaptop(e) {
-		G(this, "grow--laptop", e);
+		W(this, "grow--laptop", e);
 	}
 	get growDesktop() {
 		return this.getAttribute("grow--desktop");
 	}
 	set growDesktop(e) {
-		G(this, "grow--desktop", e);
+		W(this, "grow--desktop", e);
 	}
 	get shrink() {
 		return this.getAttribute("shrink");
 	}
 	set shrink(e) {
-		G(this, "shrink", e);
+		W(this, "shrink", e);
 	}
 	get shrinkMobile() {
 		return this.getAttribute("shrink--mobile");
 	}
 	set shrinkMobile(e) {
-		G(this, "shrink--mobile", e);
+		W(this, "shrink--mobile", e);
 	}
 	get shrinkTablet() {
 		return this.getAttribute("shrink--tablet");
 	}
 	set shrinkTablet(e) {
-		G(this, "shrink--tablet", e);
+		W(this, "shrink--tablet", e);
 	}
 	get shrinkLaptop() {
 		return this.getAttribute("shrink--laptop");
 	}
 	set shrinkLaptop(e) {
-		G(this, "shrink--laptop", e);
+		W(this, "shrink--laptop", e);
 	}
 	get shrinkDesktop() {
 		return this.getAttribute("shrink--desktop");
 	}
 	set shrinkDesktop(e) {
-		G(this, "shrink--desktop", e);
+		W(this, "shrink--desktop", e);
 	}
 	get basis() {
 		return this.getAttribute("basis");
 	}
 	set basis(e) {
-		G(this, "basis", e);
+		W(this, "basis", e);
 	}
 	get basisMobile() {
 		return this.getAttribute("basis--mobile");
 	}
 	set basisMobile(e) {
-		G(this, "basis--mobile", e);
+		W(this, "basis--mobile", e);
 	}
 	get basisTablet() {
 		return this.getAttribute("basis--tablet");
 	}
 	set basisTablet(e) {
-		G(this, "basis--tablet", e);
+		W(this, "basis--tablet", e);
 	}
 	get basisLaptop() {
 		return this.getAttribute("basis--laptop");
 	}
 	set basisLaptop(e) {
-		G(this, "basis--laptop", e);
+		W(this, "basis--laptop", e);
 	}
 	get basisDesktop() {
 		return this.getAttribute("basis--desktop");
 	}
 	set basisDesktop(e) {
-		G(this, "basis--desktop", e);
+		W(this, "basis--desktop", e);
 	}
 	get alignSelf() {
 		return this.getAttribute("align-self");
 	}
 	set alignSelf(e) {
-		G(this, "align-self", e);
+		W(this, "align-self", e);
 	}
 	get alignSelfMobile() {
 		return this.getAttribute("align-self--mobile");
 	}
 	set alignSelfMobile(e) {
-		G(this, "align-self--mobile", e);
+		W(this, "align-self--mobile", e);
 	}
 	get alignSelfTablet() {
 		return this.getAttribute("align-self--tablet");
 	}
 	set alignSelfTablet(e) {
-		G(this, "align-self--tablet", e);
+		W(this, "align-self--tablet", e);
 	}
 	get alignSelfLaptop() {
 		return this.getAttribute("align-self--laptop");
 	}
 	set alignSelfLaptop(e) {
-		G(this, "align-self--laptop", e);
+		W(this, "align-self--laptop", e);
 	}
 	get alignSelfDesktop() {
 		return this.getAttribute("align-self--desktop");
 	}
 	set alignSelfDesktop(e) {
-		G(this, "align-self--desktop", e);
+		W(this, "align-self--desktop", e);
 	}
 	get justifySelf() {
 		return this.getAttribute("justify-self");
 	}
 	set justifySelf(e) {
-		G(this, "justify-self", e);
+		W(this, "justify-self", e);
 	}
 	get justifySelfMobile() {
 		return this.getAttribute("justify-self--mobile");
 	}
 	set justifySelfMobile(e) {
-		G(this, "justify-self--mobile", e);
+		W(this, "justify-self--mobile", e);
 	}
 	get justifySelfTablet() {
 		return this.getAttribute("justify-self--tablet");
 	}
 	set justifySelfTablet(e) {
-		G(this, "justify-self--tablet", e);
+		W(this, "justify-self--tablet", e);
 	}
 	get justifySelfLaptop() {
 		return this.getAttribute("justify-self--laptop");
 	}
 	set justifySelfLaptop(e) {
-		G(this, "justify-self--laptop", e);
+		W(this, "justify-self--laptop", e);
 	}
 	get justifySelfDesktop() {
 		return this.getAttribute("justify-self--desktop");
 	}
 	set justifySelfDesktop(e) {
-		G(this, "justify-self--desktop", e);
+		W(this, "justify-self--desktop", e);
 	}
 	get hiddenMobile() {
 		return this.hasAttribute("hidden--mobile");
 	}
 	set hiddenMobile(e) {
-		K(this, "hidden--mobile", e);
+		G(this, "hidden--mobile", e);
 	}
 	get hiddenTablet() {
 		return this.hasAttribute("hidden--tablet");
 	}
 	set hiddenTablet(e) {
-		K(this, "hidden--tablet", e);
+		G(this, "hidden--tablet", e);
 	}
 	get hiddenLaptop() {
 		return this.hasAttribute("hidden--laptop");
 	}
 	set hiddenLaptop(e) {
-		K(this, "hidden--laptop", e);
+		G(this, "hidden--laptop", e);
 	}
 	get hiddenDesktop() {
 		return this.hasAttribute("hidden--desktop");
 	}
 	set hiddenDesktop(e) {
-		K(this, "hidden--desktop", e);
+		G(this, "hidden--desktop", e);
 	}
 	get colSpan() {
 		return this.getAttribute("col-span");
 	}
 	set colSpan(e) {
-		G(this, "col-span", e);
+		W(this, "col-span", e);
 	}
 	get colSpanMobile() {
 		return this.getAttribute("col-span--mobile");
 	}
 	set colSpanMobile(e) {
-		G(this, "col-span--mobile", e);
+		W(this, "col-span--mobile", e);
 	}
 	get colSpanTablet() {
 		return this.getAttribute("col-span--tablet");
 	}
 	set colSpanTablet(e) {
-		G(this, "col-span--tablet", e);
+		W(this, "col-span--tablet", e);
 	}
 	get colSpanLaptop() {
 		return this.getAttribute("col-span--laptop");
 	}
 	set colSpanLaptop(e) {
-		G(this, "col-span--laptop", e);
+		W(this, "col-span--laptop", e);
 	}
 	get colSpanDesktop() {
 		return this.getAttribute("col-span--desktop");
 	}
 	set colSpanDesktop(e) {
-		G(this, "col-span--desktop", e);
+		W(this, "col-span--desktop", e);
 	}
 	get order() {
 		return this.getAttribute("order");
 	}
 	set order(e) {
-		G(this, "order", e);
+		W(this, "order", e);
 	}
 	get orderMobile() {
 		return this.getAttribute("order--mobile");
 	}
 	set orderMobile(e) {
-		G(this, "order--mobile", e);
+		W(this, "order--mobile", e);
 	}
 	get orderTablet() {
 		return this.getAttribute("order--tablet");
 	}
 	set orderTablet(e) {
-		G(this, "order--tablet", e);
+		W(this, "order--tablet", e);
 	}
 	get orderLaptop() {
 		return this.getAttribute("order--laptop");
 	}
 	set orderLaptop(e) {
-		G(this, "order--laptop", e);
+		W(this, "order--laptop", e);
 	}
 	get orderDesktop() {
 		return this.getAttribute("order--desktop");
 	}
 	set orderDesktop(e) {
-		G(this, "order--desktop", e);
+		W(this, "order--desktop", e);
 	}
 }, d = class extends u {
 	static {
@@ -419,10 +419,10 @@ var u = class e extends HTMLElement {
 		return this.shadowRoot.querySelector(this.ctor.nativeName);
 	}
 	_updateAttribute(e, t) {
-		G(this, e, t);
+		W(this, e, t);
 	}
 	_updateBooleanAttribute(e, t) {
-		K(this, e, t);
+		G(this, e, t);
 	}
 }, f = class extends d {
 	connectedCallback() {
@@ -541,17 +541,17 @@ var u = class e extends HTMLElement {
 	"M",
 	"L",
 	"Xl"
-], w = [
+], ee = [
 	"",
 	"default",
 	...C.map((e) => e.toLowerCase())
-], T = [
+], w = [
 	"",
 	"default",
 	"left",
 	"center",
 	"right"
-], E = [
+], T = [
 	"",
 	"none",
 	"3xs",
@@ -561,18 +561,18 @@ var u = class e extends HTMLElement {
 	"m",
 	"l",
 	"xl"
-], D = [
+], E = [
 	"",
 	"none",
 	"s",
 	"m",
 	"l"
-], O = [
+], D = [
 	"",
 	"none",
 	"main",
 	"pill"
-], k = [
+], O = [
 	"none",
 	"main",
 	"brand",
@@ -583,7 +583,7 @@ var u = class e extends HTMLElement {
 	"purpose-warning",
 	"purpose-error",
 	"purpose-unlimited"
-], A = [
+], k = [
 	"",
 	"all",
 	"top",
@@ -592,19 +592,19 @@ var u = class e extends HTMLElement {
 	"left",
 	"block",
 	"inline"
-], j = /* @__PURE__ */ ".none.surface-light.surface-default.surface-strong.surface-stronger.surface-dark.surface-brand.surface-brand-light.container-primary.container-secondary.container-light.container-default.container-strong.state-hover.state-hover-bordered.state-active.state-disabled.purpose-success.purpose-warning.purpose-error.purpose-unlimited.purpose-promo.purpose-info.purpose-eco.purpose-notification.footer-sitemap".split("."), M = [
+], A = /* @__PURE__ */ ".none.surface-light.surface-default.surface-strong.surface-stronger.surface-dark.surface-brand.surface-brand-light.container-primary.container-secondary.container-light.container-default.container-strong.state-hover.state-hover-bordered.state-active.state-disabled.purpose-success.purpose-warning.purpose-error.purpose-unlimited.purpose-promo.purpose-info.purpose-eco.purpose-notification.footer-sitemap".split("."), j = [
 	"",
 	"cover",
 	"contain",
 	"default"
-], N = [
+], M = [
 	"",
 	"none",
 	"s",
 	"m",
 	"l",
 	"xl"
-], P = [
+], N = [
 	"",
 	"default",
 	"title-4xl",
@@ -615,7 +615,7 @@ var u = class e extends HTMLElement {
 	"title-m",
 	"title-s",
 	"subtitle"
-], F = /* @__PURE__ */ ".purple-top-red.purple-top-magenta.purple-top-orange.purple-top-blue.purple-top-turquoise.purple-top-green.purple-right-red.purple-right-magenta.purple-right-orange.purple-right-blue.purple-right-turquoise.purple-right-green.purple-top-right-red.purple-top-right-magenta.purple-top-right-orange.purple-top-right-blue.purple-top-right-turquoise.purple-top-right-green.purple-bottom-right-red.purple-bottom-right-magenta.purple-bottom-right-orange.purple-bottom-right-blue.purple-bottom-right-turquoise.purple-bottom-right-green.color-top-red.color-top-magenta.color-top-orange.color-top-blue.color-top-turquoise.color-top-green.color-right-red.color-right-magenta.color-right-orange.color-right-blue.color-right-turquoise.color-right-green.color-top-right-red.color-top-right-magenta.color-top-right-orange.color-top-right-blue.color-top-right-turquoise.color-top-right-green.color-bottom-right-red.color-bottom-right-magenta.color-bottom-right-orange.color-bottom-right-blue.color-bottom-right-turquoise.color-bottom-right-green".split("."), I = [
+], P = /* @__PURE__ */ ".purple-top-red.purple-top-magenta.purple-top-orange.purple-top-blue.purple-top-turquoise.purple-top-green.purple-right-red.purple-right-magenta.purple-right-orange.purple-right-blue.purple-right-turquoise.purple-right-green.purple-top-right-red.purple-top-right-magenta.purple-top-right-orange.purple-top-right-blue.purple-top-right-turquoise.purple-top-right-green.purple-bottom-right-red.purple-bottom-right-magenta.purple-bottom-right-orange.purple-bottom-right-blue.purple-bottom-right-turquoise.purple-bottom-right-green.color-top-red.color-top-magenta.color-top-orange.color-top-blue.color-top-turquoise.color-top-green.color-right-red.color-right-magenta.color-right-orange.color-right-blue.color-right-turquoise.color-right-green.color-top-right-red.color-top-right-magenta.color-top-right-orange.color-top-right-blue.color-top-right-turquoise.color-top-right-green.color-bottom-right-red.color-bottom-right-magenta.color-bottom-right-orange.color-bottom-right-blue.color-bottom-right-turquoise.color-bottom-right-green".split("."), F = [
 	"none",
 	"2xs",
 	"xs",
@@ -625,14 +625,14 @@ var u = class e extends HTMLElement {
 	"heading-to-subtitle",
 	"heading-to-content",
 	"page-layout-between-sections"
-], L = [
+], I = [
 	"",
 	"all",
 	"top",
 	"right",
 	"bottom",
 	"left"
-], R = [
+], L = [
 	"",
 	"default",
 	"xs",
@@ -641,36 +641,36 @@ var u = class e extends HTMLElement {
 	"l",
 	"xl"
 ];
-function z(e) {
+function R(e) {
 	let t = document.createElement("style");
 	t.innerHTML = e, document.head.appendChild(t);
 }
-function B(e) {
+function z(e) {
 	return typeof e == "string" && (e === "false" || e === "0" || e === "null") || typeof e == "boolean" && !e;
 }
-function V() {
+function B() {
 	return window.matchMedia("only screen and (min-width: 768px)").matches ? "tablet" : window.matchMedia("only screen and (min-width: 1025px)").matches ? "laptop" : "mobile";
 }
-function H(e, t) {
+function V(e, t) {
 	return t !== null && e.includes(t);
 }
-var U = /* @__PURE__ */ "aria-label.aria-labelledby.aria-describedby.aria-controls.aria-expanded.aria-haspopup.aria-pressed.aria-selected.aria-required.aria-disabled.aria-live.aria-atomic.aria-relevant.aria-orientation.aria-valuenow.aria-valuetext.aria-valuemin.aria-valuemax.aria-details.aria-modal.aria-autocomplete.aria-activedescendant.aria-colcount.aria-colindex.aria-colspan.aria-rowcount.aria-rowindex.aria-rowspan.aria-keyshortcuts.aria-placeholder.aria-invalid.aria-busy.aria-owns".split(".");
-function W(e, t, n = !1) {
-	if (U.forEach((n) => {
+var H = /* @__PURE__ */ "aria-label.aria-labelledby.aria-describedby.aria-controls.aria-expanded.aria-haspopup.aria-pressed.aria-selected.aria-required.aria-disabled.aria-live.aria-atomic.aria-relevant.aria-orientation.aria-valuenow.aria-valuetext.aria-valuemin.aria-valuemax.aria-details.aria-modal.aria-autocomplete.aria-activedescendant.aria-colcount.aria-colindex.aria-colspan.aria-rowcount.aria-rowindex.aria-rowspan.aria-keyshortcuts.aria-placeholder.aria-invalid.aria-busy.aria-owns".split(".");
+function U(e, t, n = !1) {
+	if (H.forEach((n) => {
 		e.getAttribute(n) && (t.setAttribute(n, e.getAttribute(n)), e.removeAttribute(n));
 	}), n && !e.getAttribute("aria-labelledby")) {
 		let n = `px-${t.localName?.toLowerCase() ?? "component"}-${Math.random().toString(36).substring(2, 15)}`;
 		t.setAttribute("id", n), e.setAttribute("aria-labelledby", n);
 	}
 }
-function G(e, t, n) {
+function W(e, t, n) {
 	if (n == null || n === "") {
 		e.removeAttribute(t);
 		return;
 	}
 	e.setAttribute(t, n.toString());
 }
-function K(e, t, n) {
+function G(e, t, n) {
 	if (!n) {
 		e.removeAttribute(t);
 		return;
@@ -679,7 +679,7 @@ function K(e, t, n) {
 }
 //#endregion
 //#region src/breakpoints.ts
-function q(e, t, n, r = "", i, a = e) {
+function K(e, t, n, r = "", i, a = e) {
 	let o = new CSSStyleSheet(), s = n.reduce((n, o) => n + `
   ${t(a, o)} {
     ${e}: var(--${r}-${o}-desktop);
@@ -722,7 +722,7 @@ function q(e, t, n, r = "", i, a = e) {
   }`, "");
 	return o.replaceSync(s), o;
 }
-var J = class {
+var q = class {
 	constructor(e, t, n, r) {
 		this.component = e, this.attributeName = t, this.cssVariable = r, this.attributeNameMobile = `${this.attributeName}--mobile`, this.attributeNameTablet = `${this.attributeName}--tablet`, this.attributeNameLaptop = `${this.attributeName}--laptop`, this.attributeNameDesktop = `${this.attributeName}--desktop`, this._attributeValue = n, Object.defineProperty(this.component, this.toCamelCase(this.attributeName), {
 			get: () => this.component.getAttribute(this.attributeName),
@@ -768,6 +768,54 @@ var J = class {
 	set attributeValue(e) {
 		this._attributeValue = e, this.setCSSProperties();
 	}
-};
+}, J = ".mgnlEditor", Y = { "PX-HEADER": "editor" };
+function X(e) {
+	return !!e.shadowRoot?.querySelector("slot:not([name])");
+}
+function Z(e, t) {
+	return t[e.tagName] ?? null;
+}
+function Q(e, { selector: t = J, slotByHost: n = Y } = {}) {
+	if (!e.matches(t) || e.hasAttribute("slot")) return null;
+	let r = e.parentElement;
+	if (!r?.shadowRoot || X(r)) return null;
+	let i = Z(r, n);
+	return i ? (e.setAttribute("slot", i), i) : null;
+}
+function $({ selector: e = J, slotByHost: t = Y, root: n = document.documentElement } = {}) {
+	let r = 0;
+	return n.querySelectorAll(e).forEach((n) => {
+		Q(n, {
+			selector: e,
+			slotByHost: t
+		}) && (r += 1);
+	}), r;
+}
+function te({ selector: e = J, slotByHost: t = Y, root: n = document.documentElement } = {}) {
+	$({
+		selector: e,
+		slotByHost: t,
+		root: n
+	});
+	let r = new MutationObserver((n) => {
+		n.forEach((n) => {
+			n.addedNodes.forEach((n) => {
+				n instanceof Element && (Q(n, {
+					selector: e,
+					slotByHost: t
+				}), n.querySelectorAll(e).forEach((n) => {
+					Q(n, {
+						selector: e,
+						slotByHost: t
+					});
+				}));
+			});
+		});
+	});
+	return r.observe(n, {
+		childList: !0,
+		subtree: !0
+	}), () => r.disconnect();
+}
 //#endregion
-export { J as AttributeBreakpointHandlerDelegate, d as PxElement, f as VerticallyExtendedElement, u as WithExtraAttributes, c as WrappedInteractiveStateController, U as accessibilityAttributes, z as addGlobalStylesheet, R as assetContainerImgWidthValues, j as backgroundColorValues, M as backgroundSizeValues, K as booleanPropertyToAttributeSetter, k as borderColorValues, O as borderRadiusValues, A as borderSideValues, D as borderValues, N as boxShadowValues, H as checkName, x as colorValues, h as cssGridAlignSelfValues, _ as cssGridColSpanValues, g as cssGridJustifySelfValues, v as cssGridOrderValues, y as cssGridPlaceSelfValues, q as cssTokenBreakpoints, m as flexboxAlignSelfValues, b as fontsizeValues, S as fontweightValues, I as gapValues, n as getSupportedAttributeNames, t as getSupportedPropertyNames, V as getViewportFormat, F as gradientValues, p as gridGapValues, P as headingValues, C as iconSizeValues, w as iconSizeValuesKC, o as isComponentDebug, B as isFalsy, s as log, L as noBorderRadiusValues, E as paddingValues, G as propertyToAttributeSetter, T as textalignValues, W as transferAccessibilityAttributes };
+export { q as AttributeBreakpointHandlerDelegate, d as PxElement, f as VerticallyExtendedElement, u as WithExtraAttributes, c as WrappedInteractiveStateController, H as accessibilityAttributes, R as addGlobalStylesheet, L as assetContainerImgWidthValues, Q as assignCmsEditorSlot, $ as assignCmsEditorSlots, A as backgroundColorValues, j as backgroundSizeValues, G as booleanPropertyToAttributeSetter, O as borderColorValues, D as borderRadiusValues, k as borderSideValues, E as borderValues, M as boxShadowValues, V as checkName, x as colorValues, h as cssGridAlignSelfValues, _ as cssGridColSpanValues, g as cssGridJustifySelfValues, v as cssGridOrderValues, y as cssGridPlaceSelfValues, K as cssTokenBreakpoints, m as flexboxAlignSelfValues, b as fontsizeValues, S as fontweightValues, F as gapValues, n as getSupportedAttributeNames, t as getSupportedPropertyNames, B as getViewportFormat, P as gradientValues, p as gridGapValues, N as headingValues, C as iconSizeValues, ee as iconSizeValuesKC, o as isComponentDebug, z as isFalsy, s as log, I as noBorderRadiusValues, te as observeCmsEditorSlots, T as paddingValues, W as propertyToAttributeSetter, w as textalignValues, U as transferAccessibilityAttributes };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-common",
-  "version": "1.4.15-beta.1",
+  "version": "1.4.16-alpha.3",
   "description": "",
   "main": "dist/index.es.js",
   "types": "dist/index.d.ts",
@@ -11,7 +11,8 @@
   "scripts": {
     "transform-package-json": "node ../../../scripts/tranformPackageJson.js package.json dist/far/away",
     "clean": "rm -rf dist",
-    "build": "npm run clean && NODE_ENV=development vite build &&  tsc && npm run transform-package-json",
+    "build": "npm run clean && NODE_ENV=development vite build && npm run build:cms-editor-slots && tsc && npm run transform-package-json",
+    "build:cms-editor-slots": "NODE_ENV=development vite build --config vite.cms-editor-slots.config.js",
     "test": "vitest run --coverage"
   },
   "publishConfig": {