@proximus/lavender-header 1.4.15-beta.1 → 1.4.16-alpha.10

package/dist/Header.d.ts

@@ -9,6 +9,20 @@ import type { Dropdown } from '@proximus/lavender-dropdown';
 import type { Stack } from '@proximus/lavender-layout';
 import type { ButtonIcon } from '@proximus/lavender-button-icon';
 import type { HeaderEventMap } from './events.ts';
+/**
+ * Site header, wrapping the whole page: the page body itself is projected
+ * through the `main` slot.
+ *
+ * @slot skip - Slot for the skip link, e.g. `px-a[variant="skip-link"]`.
+ * @slot target-group - Slot for the segment `px-dropdown`.
+ * @slot user-language - Slot for the language `px-dropdown`.
+ * @slot header-logo - Slot for the logo link.
+ * @slot header-entries - Slot for the `px-header-item` navigation entries, which assign themselves to it.
+ * @slot header-actions - Slot for the `px-action-link` / `px-action-button` actions, which assign themselves to it.
+ * @slot header-panels - Slot for the `px-mdd` panels and the `px-header-mobile-menu`.
+ * @slot main - Slot for the page content.
+ * @slot editor - Slot for CMS authoring chrome. A page editor such as Magnolia injects its controls as direct children of `px-header`; without a slot they stay in the DOM but are never projected. Assign them to this slot to keep them visible.
+ */
 export declare class Header extends WithExtraAttributes {
     #private;
     internals: ElementInternals;
@@ -20,6 +34,8 @@ export declare class Header extends WithExtraAttributes {
     static get observedAttributes(): string[];
     attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
     get $backdropFilter(): HTMLDivElement;
+    /** Landing zone for CMS authoring chrome, see the `editor` slot. */
+    get $editorSlot(): HTMLSlotElement;
     get $burgerMenu(): ButtonIcon;
     get $slotMain(): HTMLSlotElement;
     get $targetGroupDropdown(): Dropdown | null;

package/dist/index.es.js

@@ -342,7 +342,7 @@ var te = class extends HTMLElement {
 customElements.get("px-mdd-a") || customElements.define("px-mdd-a", te);
 //#endregion
 //#region src/header.css?inline
-var ne = "#navigation-container{border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}#dropdown-zone--desktop{display:none}#primary-navigation{margin:0;padding:0;display:none}#primary-navigation div,#primary-navigation px-hstack{height:100%}#panel-container{z-index:999;position:absolute;top:0;left:0;right:0}#backdrop-filter{z-index:998;-webkit-backdrop-filter:saturate(180%)blur(15px);backdrop-filter:saturate(180%)blur(15px);background:#0000004d;width:100vw;height:100%;display:none;position:absolute;left:0}::slotted([slot=header-logo]){--px-size-icon-l:1.9rem;--px-size-icon-xl:1.9rem}@media screen and (width>=64.0625rem){#primary-navigation{display:block}#panel-container{top:auto}#dropdown-zone--desktop{justify-content:space-between;align-items:center;display:flex}#dropdown-zone--desktop ::slotted([slot=target-group]),#dropdown-zone--desktop ::slotted([slot=user-language]){margin-bottom:var(--px-spacing-s-laptop)}::slotted([slot=header-actions]){margin-bottom:var(--px-padding-s-laptop)}::slotted([slot=header-logo]){--px-size-icon-l:3.2rem;--px-size-icon-xl:3.2rem;margin-left:-.1rem}}@media screen and (width>=90.0625rem){#dropdown-zone--desktop ::slotted([slot=target-group]),#dropdown-zone--desktop ::slotted([slot=user-language]){margin-bottom:var(--px-spacing-s-desktop)}::slotted([slot=header-actions]){margin-bottom:var(--px-padding-s-desktop)}}";
+var ne = "#navigation-container{border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}#editor-slot{z-index:1000;position:relative}#dropdown-zone--desktop{display:none}#primary-navigation{margin:0;padding:0;display:none}#primary-navigation div,#primary-navigation px-hstack{height:100%}#panel-container{z-index:999;position:absolute;top:0;left:0;right:0}#backdrop-filter{z-index:998;-webkit-backdrop-filter:saturate(180%)blur(15px);backdrop-filter:saturate(180%)blur(15px);background:#0000004d;width:100vw;height:100%;display:none;position:absolute;left:0}::slotted([slot=header-logo]){--px-size-icon-l:1.9rem;--px-size-icon-xl:1.9rem}@media screen and (width>=64.0625rem){#primary-navigation{display:block}#panel-container{top:auto}#dropdown-zone--desktop{justify-content:space-between;align-items:center;display:flex}#dropdown-zone--desktop ::slotted([slot=target-group]),#dropdown-zone--desktop ::slotted([slot=user-language]){margin-bottom:var(--px-spacing-s-laptop)}::slotted([slot=header-actions]){margin-bottom:var(--px-padding-s-laptop)}::slotted([slot=header-logo]){--px-size-icon-l:3.2rem;--px-size-icon-xl:3.2rem;margin-left:-.1rem}}@media screen and (width>=90.0625rem){#dropdown-zone--desktop ::slotted([slot=target-group]),#dropdown-zone--desktop ::slotted([slot=user-language]){margin-bottom:var(--px-spacing-s-desktop)}::slotted([slot=header-actions]){margin-bottom:var(--px-padding-s-desktop)}}";
 //#endregion
 //#region ../../../node_modules/lodash-es/isObject.js
 function w(e) {
@@ -480,6 +480,11 @@ var _e = "Menu", q = class extends t {
 	constructor() {
 		super(K), this.template = `
     <div>
+      <!-- Landing zone for CMS authoring chrome. Elements injected by a CMS
+           page editor (Magnolia editor bars, placeholders...) end up as direct
+           children of px-header. Without a matching slot they stay in the DOM
+           but are never projected, so the controls become invisible. -->
+      <div id="editor-slot"><slot name="editor"></slot></div>
       <header>
         <slot name="skip"></slot>
         <px-section 
@@ -623,6 +628,9 @@ var _e = "Menu", q = class extends t {
 	get $backdropFilter() {
 		return this.shadowRoot.querySelector("#backdrop-filter");
 	}
+	get $editorSlot() {
+		return this.shadowRoot.querySelector("slot[name=\"editor\"]");
+	}
 	get $burgerMenu() {
 		return this.shadowRoot.querySelector("#burger-menu");
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-header",
-  "version": "1.4.15-beta.1",
+  "version": "1.4.16-alpha.10",
   "description": "",
   "main": "dist/index.es.js",
   "types": "dist/index.d.ts",