@schukai/monster 3.63.2 → 3.64.0

package/CHANGELOG.md

@@ -1,4 +1,27 @@
 
+## [3.64.0] - 2024-04-04
+
+### Add Features
+
+- add new panel and rename switch-screen to switch-panel [#184](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/184)
+### Changes
+
+- fix tests
+- new command for create-issue, first step for theme generator
+- test runners are now empowered to run selected files [#166](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/166)
+
+## [3.63.3] - 2024-04-01
+
+### Bug Fixes
+
+- include state-button [#183](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/183)
+### Changes
+
+- release and publish to npm new version 3.63.3
+- update devenv
+- update issue templates
+- update template and create showroom section
+
 ## [3.63.2] - 2024-03-28
 
 ### Bug Fixes
@@ -6,6 +29,7 @@
 - colors and more, add igrnore change to savebutton [#181](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/181) [#180](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/180)
 ### Changes
 
+- release and publish to npm new version 3.63.2
 - reorganize playground
 
 ## [3.63.1] - 2024-03-27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schukai/monster",
-  "version": "3.63.2",
+  "version": "3.64.0",
   "description": "Monster is a simple library for creating fast, robust and lightweight websites.",
   "keywords": [
     "framework",

package/source/components/datatable/change-button.mjs

@@ -4,7 +4,6 @@
  */
 
 import { instanceSymbol } from "../../constants.mjs";
-import { diff } from "../../data/diff.mjs";
 import { addAttributeToken } from "../../dom/attributes.mjs";
 import { ATTRIBUTE_ERRORMESSAGE } from "../../dom/constants.mjs";
 import {
@@ -12,10 +11,9 @@ import {
 	CustomElement,
 	registerCustomElement,
 } from "../../dom/customelement.mjs";
-import { isString, isArray } from "../../types/is.mjs";
-import { Observer } from "../../types/observer.mjs";
-import { clone } from "../../util/clone.mjs";
+import { isString } from "../../types/is.mjs";
 import { State } from "../form/types/state.mjs";
+import  "../form/state-button.mjs";
 import { ATTRIBUTE_DATASOURCE_SELECTOR } from "./constants.mjs";
 import { ChangeButtonStyleSheet } from "./stylesheet/change-button.mjs";
 
@@ -38,6 +36,47 @@ const datasetLinkedElementSymbol = Symbol("datasetLinkedElement");
  */
 const overlayLinkedElementSymbol = Symbol("overlayLinkedElement");
 
+
+
+/**
+ * The ColumnBar component is used to show and configure the columns of a datatable.
+ *
+ * <img src="./images/change-button.png">
+ *
+ * You can create this control either by specifying the HTML tag <monster-datatable-change-button />` directly in the HTML or using
+ * Javascript via the `document.createElement('monster-datatable-change-button');` method.
+ *
+ * ```html
+ * <monster-datatable-change-button></monster-datatable-change-button>
+ * ```
+ *
+ * Or you can create this CustomControl directly in Javascript:
+ *
+ * ```js
+ * import '@schukai/monster/components/datatable/change-button.mjs';
+ * document.createElement('monster-datatable-change-button');
+ * ```
+ *
+ * The Body should have a class "hidden" to ensure that the 
+ * styles are applied correctly.
+ *
+ * ```css
+ * body.hidden {
+ *    visibility: hidden;
+ * }
+ * ```
+ *
+ * @startuml change-button.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ * HTMLElement <|-- CustomElement
+ * CustomElement <|-- ChangeButton
+ * @enduml
+ *
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.Datatable
+ * @summary A data set
+ */
 class ChangeButton extends CustomElement {
 	/**
 	 * This method is called by the `instanceof` operator.

package/source/components/datatable/columnbar.mjs

@@ -51,8 +51,6 @@ const popperInstanceSymbol = Symbol("popperInstance");
  *
  * <img src="./images/column-bar.png">
  *
- * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
- *
  * You can create this control either by specifying the HTML tag <monster-column-bar />` directly in the HTML or using
  * Javascript via the `document.createElement('monster-column-bar');` method.
  *
@@ -63,7 +61,7 @@ const popperInstanceSymbol = Symbol("popperInstance");
  * Or you can create this CustomControl directly in Javascript:
  *
  * ```js
- * import '@schukai/component-datatable/source/columnbar.mjs';
+ * import '@schukai/monster/components/datatable/column-bar.mjs';
  * document.createElement('monster-column-bar');
  * ```
  *

package/source/components/layout/panel.mjs

@@ -0,0 +1,271 @@
+/**
+ * Copyright 2023 schukai GmbH
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import {
+    assembleMethodSymbol,
+    CustomElement,
+    registerCustomElement,
+} from "../../dom/customelement.mjs";
+import {DeadMansSwitch} from "../../util/deadmansswitch.mjs";
+
+import {PanelStyleSheet} from "./stylesheet/panel.mjs";
+import {instanceSymbol} from "../../constants.mjs";
+
+export {Panel};
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const PanelElementSymbol = Symbol("PanelElement");
+
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const resizeObserverSymbol = Symbol("resizeObserver");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const timerCallbackSymbol = Symbol("timerCallback");
+
+/**
+ * The Panel component is used to display a panel, isn't that cool?
+ *
+ * <img src="./images/panel.png">
+ *
+ * You can create this control either by specifying the HTML tag <monster-panel />` directly in the HTML or using
+ * Javascript via the `document.createElement('monster-panel');` method.
+ *
+ * ```html
+ * <monster-panel></monster-panel>
+ * ```
+ *
+ * Or you can create this CustomControl directly in Javascript:
+ *
+ * ```js
+ * import '@schukai/monster/components/layout/panel.mjs';
+ * document.createElement('monster-panel');
+ * ```
+ *
+ * @startuml panel.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ * HTMLElement <|-- CustomElement
+ * CustomElement <|-- CustomControl
+ * CustomControl <|-- Panel
+ * @enduml
+ *
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.Layout
+ * @summary A simple panel component
+ */
+class Panel extends CustomElement {
+
+    /**
+     * This method is called by the `instanceof` operator.
+     * @returns {symbol}
+     */
+    static get [instanceSymbol]() {
+        return Symbol.for("@schukai/monster/components/layout/panel");
+    }
+
+    /**
+     * To set the options via the html tag the attribute `data-monster-options` must be used.
+     * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
+     *
+     * The individual configuration values can be found in the table.
+     *
+     * @property {Object} templates Template definitions
+     * @property {string} templates.main Main template
+     * @property {string} heightAdjustment Height adjustment
+     */
+    get defaults() {
+        return Object.assign({}, super.defaults, {
+            templates: {
+                main: getTemplate(),
+            },
+            heightAdjustment: 4,
+        });
+    }
+
+    /**
+     *
+     * @returns {Monster.Components.Host.Viewer}
+     */
+    [assembleMethodSymbol]() {
+        super[assembleMethodSymbol]();
+
+        initControlReferences.call(this);
+        initEventHandler.call(this);
+
+        calcHeight.call(this);
+
+    }
+
+    /**
+     * This method is called by the dom and should not be called directly.
+     *
+     * @return {void}
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        attachResizeObserver.call(this);
+    }
+
+    /**
+     * This method is called by the dom and should not be called directly.
+     *
+     * @return {void}
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        disconnectResizeObserver.call(this);
+    }
+
+    /**
+     * @return {string}
+     */
+    static getTag() {
+        return "monster-panel";
+    }
+
+    /**
+     * @return {CSSStyleSheet[]}
+     */
+    static getCSSStyleSheet() {
+        return [PanelStyleSheet];
+    }
+}
+
+/**
+ * @private
+ */
+function calcHeight() {
+
+    this.style.boxSizing = "border-box";
+
+    const height = calculateMaximumHeight.call(this, this);
+    if (height < 0) {
+        return;
+    }
+
+    this.style.height = `${height}px`;
+
+}
+
+function calculateMaximumHeight(element) {
+    let totalBottomBorder = 0;
+    let totalBottomPadding = 0;
+    let totalBottomMargin = 0;
+    let totalOutlineHeight = 0;
+    let totalBoxShadowHeight = 0;
+    let currentElement = element;
+
+    // Get the distance from the top of the element to the top of the viewport
+    const distanceFromTop = element.getBoundingClientRect().top;
+
+    // Loop through the elements up to the body to sum up the bottom borders, padding, and margin
+    while (currentElement && currentElement !== document.body) {
+        const style = window.getComputedStyle(currentElement);
+
+        // Box sizing
+        const boxSizing = style.boxSizing;
+
+        // Borders, padding, and margin
+        const borderBottomWidth = parseFloat(style.borderBottomWidth);
+        const paddingBottom = parseFloat(style.paddingBottom);
+        const marginBottom = parseFloat(style.marginBottom);
+
+        // Outline and box-shadow
+        const outlineHeight = parseFloat(style.outlineWidth);
+        // This is a simplification; box-shadow is more complex to parse
+        const boxShadowVertical = parseFloat(style.boxShadow.split(' ')[3] || 0);
+
+        // Accumulate values
+        totalBottomBorder += isNaN(borderBottomWidth) ? 0 : borderBottomWidth;
+        totalBottomPadding += (isNaN(paddingBottom) || boxSizing === 'border-box') ? 0 : paddingBottom;
+        totalBottomMargin += isNaN(marginBottom) ? 0 : marginBottom;
+        totalOutlineHeight += isNaN(outlineHeight) ? 0 : outlineHeight;
+        totalBoxShadowHeight += isNaN(boxShadowVertical) ? 0 : boxShadowVertical;
+
+        currentElement = currentElement.parentNode || currentElement.host;
+    }
+
+    // Calculate the maximum height by subtracting the distance, borders, padding, margin, outline, and box-shadow from the window's inner height
+    const maximumHeight = window.innerHeight - distanceFromTop - totalBottomBorder - totalBottomPadding - totalBottomMargin - totalOutlineHeight - totalBoxShadowHeight;
+    return maximumHeight + this.getOption("heightAdjustment");
+}
+
+
+/**
+ * @private
+ */
+function attachResizeObserver() {
+    // against flickering
+    this[resizeObserverSymbol] = new ResizeObserver(() => {
+        if (this[timerCallbackSymbol] instanceof DeadMansSwitch) {
+            try {
+                this[timerCallbackSymbol].touch();
+                return;
+            } catch (e) {
+                delete this[timerCallbackSymbol];
+            }
+        }
+
+        this[timerCallbackSymbol] = new DeadMansSwitch(200, () => {
+            calcHeight.call(this);
+        });
+    });
+
+    this[resizeObserverSymbol].observe(this.ownerDocument.body);
+    this[resizeObserverSymbol].observe(document.scrollingElement);
+
+}
+
+function disconnectResizeObserver() {
+    if (this[resizeObserverSymbol] instanceof ResizeObserver) {
+        this[resizeObserverSymbol].disconnect();
+    }
+}
+
+/**
+ * @private
+ * @return {Select}
+ * @throws {Error} no shadow-root is defined
+ */
+function initControlReferences() {
+    if (!this.shadowRoot) {
+        throw new Error("no shadow-root is defined");
+    }
+
+    this[PanelElementSymbol] = this.shadowRoot.querySelector("[data-monster-role=control]");
+
+
+}
+
+/**
+ * @private
+ */
+function initEventHandler() {
+    return this;
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+    // language=HTML
+    return `
+        <div data-monster-role="control" part="control">
+            <slot></slot>
+        </div>`;
+}
+
+registerCustomElement(Panel);

package/source/components/layout/{split-screen.mjs → split-panel.mjs}

@@ -11,11 +11,11 @@ import {
 import "../notify/notify.mjs";
 import {fireCustomEvent} from "../../dom/events.mjs";
 import {Observer} from "../../types/observer.mjs";
-import {SplitScreenStyleSheet} from "./stylesheet/split-screen.mjs";
+import {SplitPanelStyleSheet} from "./stylesheet/split-panel.mjs";
 import {instanceSymbol} from "../../constants.mjs";
 import {internalSymbol} from "../../constants.mjs";
 
-export {SplitScreen, TYPE_VERTICAL, TYPE_HORIZONTAL};
+export {SplitPanel, TYPE_VERTICAL, TYPE_HORIZONTAL};
 
 /**
  * @private
@@ -57,32 +57,43 @@ const TYPE_HORIZONTAL = "horizontal";
 
 
 /**
- * The SplitScreen control is a simple layout control that allows you to split the screen into two parts. The split can be
- * either vertical or horizontal. The control provides a draggable handle that allows you to adjust the size of the two
- * panels.
+ * The SplitPanel control is a simple layout control that allows you to split the screen 
+ * into two parts. The split can be either vertical or horizontal. The control provides a 
+ * draggable handle that allows you to adjust the size of the two panels.
  *
- * <img src="./images/splitscreen.png">
+ * <img src="./images/split-panel.png">
  *
- * You can create this control either by specifying the HTML tag <monster-splitscreen />` directly in the HTML or using
- * Javascript via the `document.createElement('monster-split-screen');` method.
+ * You can create this control either by specifying the HTML tag <monster-split-panel />` 
+ * directly in the HTML or using Javascript via the `document.createElement('monster-split-panel');` 
+ * method.
  *
  * ```html
- * <monster-split-screen></monster-split-screen>
+ * <monster-split-panel></monster-split-panel>
  * ```
  *
  * Or you can create this CustomControl directly in Javascript:
  *
  * ```js
- * import '@schukai/monster/components/layout/split-screen.mjs';
- * document.createElement('monster-split-screen');
+ * import '@schukai/monster/components/layout/split-panel.mjs';
+ * document.createElement('monster-split-panel');
+ * ```
+ * 
+ * It is best to hide unregistered elements with the css property `visibility: hidden;`
+ * 
+ * ```css
+ * <style>
+ *     *:not(:defined) {
+ *       visibility: hidden;
+ *     }
+ * </style>
  * ```
  *
- * @startuml splitscreen.png
+ * @startuml split-panel.png
  * skinparam monochrome true
  * skinparam shadowing false
  * HTMLElement <|-- CustomElement
  * CustomElement <|-- CustomControl
- * CustomControl <|-- SplitScreen
+ * CustomControl <|-- SplitPanel
  * @enduml
  *
  * @copyright schukai GmbH
@@ -90,14 +101,14 @@ const TYPE_HORIZONTAL = "horizontal";
  * @summary A simple split screen layout
  * @fires Monster.Components.Layout.event:monster-dimension-changed
  */
-class SplitScreen extends CustomElement {
+class SplitPanel extends CustomElement {
 
     /**
      * This method is called by the `instanceof` operator.
      * @returns {symbol}
      */
     static get [instanceSymbol]() {
-        return Symbol.for("@schukai/monster/components/layout/splitscreen");
+        return Symbol.for("@schukai/monster/components/layout/split-panel");
     }
 
     /**
@@ -127,23 +138,22 @@ class SplitScreen extends CustomElement {
             },
         });
     }
-    
+
     fullStartScreen() {
         this.setDimension("100%");
         return this;
     }
-    
+
     fullEndScreen() {
         this.setDimension("0%");
         return this;
     }
-    
+
     resetScreen() {
         this.setDimension(this.getOption("dimension").initial);
         return this;
     }
-    
-    
+
 
     setContent(html) {
         this.setOption("content", html);
@@ -189,14 +199,14 @@ class SplitScreen extends CustomElement {
      * @return {string}
      */
     static getTag() {
-        return "monster-split-screen";
+        return "monster-split-panel";
     }
 
     /**
      * @return {CSSStyleSheet[]}
      */
     static getCSSStyleSheet() {
-        return [SplitScreenStyleSheet];
+        return [SplitPanelStyleSheet];
     }
 }
 
@@ -230,7 +240,7 @@ function applyPanelDimensions() {
         controller: this,
         dimension: dimension
     });
-    
+
 }
 
 
@@ -244,7 +254,7 @@ function initControlReferences() {
         throw new Error("no shadow-root is defined");
     }
 
-    this[splitScreenElementSymbol] = this.shadowRoot.querySelector("[data-monster-role=split-screen]");
+    this[splitScreenElementSymbol] = this.shadowRoot.querySelector("[data-monster-role=split-panel]");
     this[draggerElementSymbol] = this.shadowRoot.querySelector("[data-monster-role=dragger]");
     this[handleElementSymbol] = this.shadowRoot.querySelector("[data-monster-role=handle]");
 
@@ -264,31 +274,38 @@ function initEventHandler() {
 
     this[internalSymbol].getSubject().isDragging = false;
 
-    this[draggerElementSymbol].addEventListener('dblclick', () => {
-        self[internalSymbol].getSubject().isDragging = false;
-        lastDimension = undefined;
-
-        let currentDimension;
-        if (self.getOption("splitType") === TYPE_VERTICAL) {
-            const topPanel = self[startPanelElementSymbol];
-            currentDimension = topPanel.style.width;
-        } else {
-            const topPanel = self[startPanelElementSymbol];
-            currentDimension = topPanel.style.height;
-        }
+    // @todo: add better touch support
+    const eventTypes = ["dblclick", "touchstart"];
+    for (const eventType of eventTypes) {
 
-        if (currentDimension === self.getOption("dimension").initial) {
-            self.setDimension(self.getOption("dimension").max);
-        } else if (currentDimension === self.getOption("dimension").max) {
-            self.setDimension(self.getOption("dimension").min);
-        } else if (currentDimension === self.getOption("dimension").min) {
-            self.setDimension(self.getOption("dimension").initial);
-        } else {
-            self.setDimension(self.getOption("dimension").initial);
-        }
-    });
 
-    this[draggerElementSymbol].addEventListener('mousedown', () => {
+        this[draggerElementSymbol].addEventListener(eventType, () => {
+            self[internalSymbol].getSubject().isDragging = false;
+            lastDimension = undefined;
+
+            let currentDimension;
+            if (self.getOption("splitType") === TYPE_VERTICAL) {
+                const topPanel = self[startPanelElementSymbol];
+                currentDimension = topPanel.style.width;
+            } else {
+                const topPanel = self[startPanelElementSymbol];
+                currentDimension = topPanel.style.height;
+            }
+
+            if (currentDimension === self.getOption("dimension").initial) {
+                self.setDimension(self.getOption("dimension").max);
+            } else if (currentDimension === self.getOption("dimension").max) {
+                self.setDimension(self.getOption("dimension").min);
+            } else if (currentDimension === self.getOption("dimension").min) {
+                self.setDimension(self.getOption("dimension").initial);
+            } else {
+                self.setDimension(self.getOption("dimension").initial);
+            }
+        });
+
+    }
+    
+    this[draggerElementSymbol].addEventListener("mousedown", () => {
         self[internalSymbol].getSubject().isDragging = true;
 
         const eventListener = (e) => {
@@ -311,25 +328,24 @@ function initEventHandler() {
                 const bottomPanel = self[endPanelElementSymbol];
                 let newTopHeight = e.clientY - containerOffsetTop;
 
-                 const min = this.getOption("dimension").min;
-                 const max = this.getOption("dimension").max;
+                const min = this.getOption("dimension").min;
+                const max = this.getOption("dimension").max;
 
                 const topAsPercent = (newTopHeight / this[splitScreenElementSymbol].offsetHeight) * 100;
-                 if (parseInt(min) > topAsPercent) {
-                     newTopHeight = min;
-                 } else if (parseInt(max) < topAsPercent) {
-                     newTopHeight = max;
-                 } else {
-                     newTopHeight = topAsPercent + "%";
-                 }
-                 
-                 // calc new top height to pixel    
+                if (parseInt(min) > topAsPercent) {
+                    newTopHeight = min;
+                } else if (parseInt(max) < topAsPercent) {
+                    newTopHeight = max;
+                } else {
+                    newTopHeight = topAsPercent + "%";
+                }
+
+                // calc new top height to pixel    
                 const newTopHeightPx = (parseInt(newTopHeight) / 100) * this[splitScreenElementSymbol].offsetHeight;
 
                 topPanel.style.height = `${newTopHeightPx}px`;
                 bottomPanel.style.height = `calc(100% - ${newTopHeightPx}px - ${draggerWidth})`; // 5px is dragger height
 
-
             } else {
 
                 const containerOffsetLeft = self[splitScreenElementSymbol].offsetLeft;
@@ -367,7 +383,6 @@ function initEventHandler() {
 
     });
 
-
     this[internalSymbol].attachObserver(
         new Observer(() => {
 
@@ -401,7 +416,7 @@ function initEventHandler() {
 function getTemplate() {
     // language=HTML
     return `
-        <div data-monster-role="split-screen" part="control">
+        <div data-monster-role="split-panel" part="control">
             <div data-monster-role="startPanel" class="panel" part="startPanel">
                 <slot name="start"></slot>
             </div>
@@ -411,9 +426,7 @@ function getTemplate() {
             <div data-monster-role="endPanel" class="panel" part="endPanel">
                 <slot name="end"></slot>
             </div>
-
-
         </div>`;
 }
 
-registerCustomElement(SplitScreen);
+registerCustomElement(SplitPanel);

package/source/components/layout/style/panel.pcss

@@ -0,0 +1,38 @@
+@import "../../style/property.pcss";
+@import "../../style/display.pcss";
+@import "../../style/border.pcss";
+@import "../../style/theme.pcss";
+@import "../../style/popper.pcss";
+@import "../../style/control.pcss";
+@import "../../style/badge.pcss";
+@import '../../style/mixin/button.pcss';
+@import '../../style/mixin/typography.pcss';
+@import '../../style/mixin/hover.pcss';
+
+:host {
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+    overflow: auto;
+    
+}
+
+[data-monster-role="control"] {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    box-sizing: border-box;
+    outline: none;
+    overflow: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--monster-color-primary-1) var(--monster-bg-color-primary-1);
+    
+    
+    //position: fixed; 
+    //top: 0;
+    //left: 0;
+    //right: 0;
+    //bottom: 0;
+    //overflow: auto; 
+    //box-sizing: border-box;
+}

package/source/components/layout/style/{split-screen.pcss → split-panel.pcss}

@@ -1,6 +1,6 @@
 
 
-[data-monster-role="split-screen"] {
+[data-monster-role="split-panel"] {
 
     box-sizing: border-box;
     display: flex;

package/source/components/layout/style/width-toggle.pcss

@@ -10,17 +10,34 @@
     background-size: cover;
     width: 1rem;
     height: 1rem;
+    position: absolute;
+    right: 0;
+    top: -1rem;
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3C/svg%3E");
+    cursor: pointer;
+    transition: right 0.5s ease-in-out;
 }
 
 [data-monster-role="toggle"][data-monster-state="wide"] {
-    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrows-angle-contract' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M.172 15.828a.5.5 0 0 0 .707 0l4.096-4.096V14.5a.5.5 0 1 0 1 0v-3.975a.5.5 0 0 0-.5-.5H1.5a.5.5 0 0 0 0 1h2.768L.172 15.121a.5.5 0 0 0 0 .707M15.828.172a.5.5 0 0 0-.707 0l-4.096 4.096V1.5a.5.5 0 1 0-1 0v3.975a.5.5 0 0 0 .5.5H14.5a.5.5 0 0 0 0-1h-2.768L15.828.879a.5.5 0 0 0 0-.707'/%3E%3C/svg%3E")
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M.172 15.828a.5.5 0 0 0 .707 0l4.096-4.096V14.5a.5.5 0 1 0 1 0v-3.975a.5.5 0 0 0-.5-.5H1.5a.5.5 0 0 0 0 1h2.768L.172 15.121a.5.5 0 0 0 0 .707M15.828.172a.5.5 0 0 0-.707 0l-4.096 4.096V1.5a.5.5 0 1 0-1 0v3.975a.5.5 0 0 0 .5.5H14.5a.5.5 0 0 0 0-1h-2.768L15.828.879a.5.5 0 0 0 0-.707'/%3E%3C/svg%3E")
 }
 
 [data-monster-role="toggle"][data-monster-state="small"] {
-    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrows-angle-expand' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M5.828 10.172a.5.5 0 0 0-.707 0l-4.096 4.096V11.5a.5.5 0 0 0-1 0v3.975a.5.5 0 0 0 .5.5H4.5a.5.5 0 0 0 0-1H1.732l4.096-4.096a.5.5 0 0 0 0-.707m4.344-4.344a.5.5 0 0 0 .707 0l4.096-4.096V4.5a.5.5 0 1 0 1 0V.525a.5.5 0 0 0-.5-.5H11.5a.5.5 0 0 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 0 .707'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M5.828 10.172a.5.5 0 0 0-.707 0l-4.096 4.096V11.5a.5.5 0 0 0-1 0v3.975a.5.5 0 0 0 .5.5H4.5a.5.5 0 0 0 0-1H1.732l4.096-4.096a.5.5 0 0 0 0-.707m4.344-4.344a.5.5 0 0 0 .707 0l4.096-4.096V4.5a.5.5 0 1 0 1 0V.525a.5.5 0 0 0-.5-.5H11.5a.5.5 0 0 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 0 .707'/%3E%3C/svg%3E");
 }
 
-[data-monster-role="container"] {
+[data-monster-role=container] {
     box-sizing: border-box;
-    transition: width 0.5s ease-in-out;
-}
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    
+    & [data-monster-role="inside"] {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: width 0.5s ease-in-out;
+    }
+    
+}

package/source/components/layout/stylesheet/panel.mjs

@@ -0,0 +1,27 @@
+
+/**
+ * Copyright schukai GmbH and contributors 2024. All Rights Reserved.
+ * Node module: @schukai/monster
+ * This file is licensed under the AGPLv3 License.
+ * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
+ */
+
+import {addAttributeToken} from "../../../dom/attributes.mjs";
+import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
+
+export {PanelStyleSheet}
+
+/**
+ * @private
+ * @type {CSSStyleSheet}
+ */
+const PanelStyleSheet = new CSSStyleSheet();
+
+try {
+  PanelStyleSheet.insertRule(`
+@layer panel { 
+:after,:before,:root{--monster-font-family:-apple-system,BlinkMacSystemFont,\"Quicksand\",\"Segoe UI\",\"Roboto\",\"Oxygen\",\"Ubuntu\",\"Cantarell\",\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";--monster-color-primary-1:var(--monster-color-cinnamon-6);--monster-color-primary-2:var(--monster-color-cinnamon-6);--monster-color-primary-3:var(--monster-color-cinnamon-1);--monster-color-primary-4:var(--monster-color-cinnamon-1);--monster-bg-color-primary-1:var(--monster-color-cinnamon-1);--monster-bg-color-primary-2:var(--monster-color-cinnamon-2);--monster-bg-color-primary-3:var(--monster-color-cinnamon-3);--monster-bg-color-primary-4:var(--monster-color-cinnamon-6);--monster-color-secondary-1:var(--monster-color-red-4);--monster-color-secondary-2:var(--monster-color-red-4);--monster-color-secondary-3:var(--monster-color-red-1);--monster-color-secondary-4:var(--monster-color-red-1);--monster-bg-color-secondary-1:var(--monster-color-gray-1);--monster-bg-color-secondary-2:var(--monster-color-red-2);--monster-bg-color-secondary-3:var(--monster-color-red-3);--monster-bg-color-secondary-4:var(--monster-color-red-6);--monster-color-tertiary-1:var(--monster-color-magenta-4);--monster-color-tertiary-2:var(--monster-color-magenta-4);--monster-color-tertiary-3:var(--monster-color-magenta-6);--monster-color-tertiary-4:var(--monster-color-magenta-1);--monster-bg-color-tertiary-1:var(--monster-color-gray-1);--monster-bg-color-tertiary-2:var(--monster-color-magenta-1);--monster-bg-color-tertiary-3:var(--monster-color-magenta-2);--monster-bg-color-tertiary-4:var(--monster-color-magenta-6);--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-4);--monster-color-destructive-3:var(--monster-color-red-6);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-4);--monster-bg-color-destructive-2:var(--monster-color-gray-1);--monster-bg-color-destructive-3:var(--monster-color-red-2);--monster-bg-color-destructive-4:var(--monster-color-red-5);--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-4);--monster-color-success-3:var(--monster-color-green-6);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-3);--monster-bg-color-success-2:var(--monster-color-gray-1);--monster-bg-color-success-3:var(--monster-color-green-2);--monster-bg-color-success-4:var(--monster-color-green-5);--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-4);--monster-color-warning-3:var(--monster-color-orange-6);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-3);--monster-bg-color-warning-2:var(--monster-color-gray-1);--monster-bg-color-warning-3:var(--monster-color-orange-2);--monster-bg-color-warning-4:var(--monster-color-orange-5);--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-4);--monster-color-error-3:var(--monster-color-red-6);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-4);--monster-bg-color-error-2:var(--monster-color-gray-1);--monster-bg-color-error-3:var(--monster-color-red-2);--monster-bg-color-error-4:var(--monster-color-red-5);--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6);--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-4);--monster-color-primary-disabled-4:var(--monster-color-gray-4);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-1);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-6);--monster-color-gradient-1:#833ab4;--monster-color-gradient-2:#fd1d1d;--monster-color-gradient-3:#fcb045;--monster-box-shadow-1:none;--monster-box-shadow-2:-1px 1px 10px 1px hsla(0,0%,76%,.61);--monster-text-shadow:none;--monster-theme-control-bg-color:var(--monster-gradient-tangerine-1);--monster-theme-control-color:var(--monster-gradient-tangerine-6);--monster-theme-control-border-color:var(--monster-gradient-tangerine-2);--monster-theme-control-hover-color:var(--monster-gradient-tangerine-6);--monster-theme-control-hover-bg-color:var(--monster-gradient-tangerine-2);--monster-theme-on-color:var(--monster-color-green-1);--monster-theme-on-bg-color:var(--monster-color-green-5);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-4);--monster-border-style:solid;--monster-border-width:2px;--monster-border-radius:0;--monster-popper-witharrrow-distance:-4px;--monster-z-index-default:0;--monster-z-index-outline:10;--monster-z-index-dropdown:200;--monster-z-index-dropdown-overlay:210;--monster-z-index-sticky:300;--monster-z-index-sticky-overlay:310;--monster-z-index-fixed:400;--monster-z-index-fixed-overlay:410;--monster-z-index-modal-backdrop:500;--monster-z-index-modal-backdrop-overlay:510;--monster-z-index-offcanvas:600;--monster-z-index-offcanvas-overlay:610;--monster-z-index-modal:700;--monster-z-index-modal-overlay:710;--monster-z-index-popover:800;--monster-z-index-popover-overlay:810;--monster-z-index-tooltip:800;--monster-z-index-tooltip-overlay:910;--monster-space-0:0;--monster-space-1:2px;--monster-space-2:4px;--monster-space-3:6px;--monster-space-4:10px;--monster-space-5:16px;--monster-space-6:26px;--monster-space-7:42px;--monster-breakpoint-0:480px;--monster-breakpoint-4:480px;--monster-breakpoint-7:768px;--monster-breakpoint-9:992px;--monster-breakpoint-12:1200px;--monster-dragger-width:1px;--monster-dragger-handle-width:4px;--monster-dragger-handle-height:50px}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-1);--monster-color-primary-2:var(--monster-color-gray-1);--monster-color-primary-3:var(--monster-color-gray-6);--monster-color-primary-4:var(--monster-color-gray-6);--monster-bg-color-primary-1:var(--monster-color-gray-6);--monster-bg-color-primary-2:var(--monster-color-gray-3);--monster-bg-color-primary-3:var(--monster-color-gray-2);--monster-bg-color-primary-4:var(--monster-color-gray-1);--monster-color-secondary-1:var(--monster-color-red-1);--monster-color-secondary-2:var(--monster-color-red-1);--monster-color-secondary-3:var(--monster-color-red-6);--monster-color-secondary-4:var(--monster-color-red-4);--monster-bg-color-secondary-1:var(--monster-color-gray-6);--monster-bg-color-secondary-2:var(--monster-color-red-3);--monster-bg-color-secondary-3:var(--monster-color-red-2);--monster-bg-color-secondary-4:var(--monster-color-red-1);--monster-color-tertiary-1:var(--monster-color-magenta-1);--monster-color-tertiary-2:var(--monster-color-magenta-6);--monster-color-tertiary-3:var(--monster-color-magenta-4);--monster-color-tertiary-4:var(--monster-color-magenta-4);--monster-bg-color-tertiary-1:var(--monster-color-gray-6);--monster-bg-color-tertiary-2:var(--monster-color-magenta-2);--monster-bg-color-tertiary-3:var(--monster-color-magenta-1);--monster-bg-color-tertiary-4:var(--monster-color-magenta-1);--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-3);--monster-color-destructive-3:var(--monster-color-red-4);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-5);--monster-bg-color-destructive-2:var(--monster-color-gray-6);--monster-bg-color-destructive-3:var(--monster-color-red-1);--monster-bg-color-destructive-4:var(--monster-color-red-4);--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-2);--monster-color-success-3:var(--monster-color-green-4);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-5);--monster-bg-color-success-2:var(--monster-color-gray-6);--monster-bg-color-success-3:var(--monster-color-green-1);--monster-bg-color-success-4:var(--monster-color-green-3);--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-3);--monster-color-warning-3:var(--monster-color-orange-4);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-5);--monster-bg-color-warning-2:var(--monster-color-gray-6);--monster-bg-color-warning-3:var(--monster-color-orange-1);--monster-bg-color-warning-4:var(--monster-color-orange-3);--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-3);--monster-color-error-3:var(--monster-color-red-4);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-5);--monster-bg-color-error-2:var(--monster-color-gray-6);--monster-bg-color-error-3:var(--monster-color-red-1);--monster-bg-color-error-4:var(--monster-color-red-4);--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6);--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-3);--monster-color-primary-disabled-4:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-6);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-1);--monster-theme-control-bg-color:var(--monster-color-gray-5);--monster-theme-control-color:var(--monster-color-gray-1);--monster-theme-control-border-color:var(--monster-color-gray-3);--monster-theme-control-hover-color:var(--monster-color-gray-1);--monster-theme-control-hover-bg-color:var(--monster-color-gray-6);--monster-theme-on-color:var(--monster-color-gray-6);--monster-theme-on-bg-color:var(--monster-color-gray-1);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-5)}}.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}.monster-theme-primary-1{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-theme-primary-disabled-1{background-color:var(--monster-bg-color-primary-disabled-1);color:var(--monster-color-primary-disabled-1)}.monster-theme-secondary-1{background-color:var(--monster-bg-color-secondary-1);color:var(--monster-color-secondary-1)}.monster-theme-tertiary-1{background-color:var(--monster-bg-color-tertiary-1);color:var(--monster-color-tertiary-1)}.monster-theme-destructive-1{background-color:var(--monster-bg-color-destructive-1);color:var(--monster-color-destructive-1)}.monster-theme-success-1{background-color:var(--monster-bg-color-success-1);color:var(--monster-color-success-1)}.monster-theme-warning-1{background-color:var(--monster-bg-color-warning-1);color:var(--monster-color-warning-1)}.monster-theme-error-1{background-color:var(--monster-bg-color-error-1);color:var(--monster-color-error-1)}.monster-theme-selection-1{background-color:var(--monster-bg-color-selection-1);color:var(--monster-color-selection-1)}.monster-border-color-1{border-color:var(--monster-color-border-1)}.monster-color-neutral-1{color:var(--monster-color-primary-1)}.monster-bg-color-primary-1{background-color:var(--monster-bg-color-primary-1)}.monster-bg-color-secondary-1{background-color:var(--monster-bg-color-secondary-1)}.monster-bg-color-tertiary-1{background-color:var(--monster-bg-color-tertiary-1)}.monster-color-primary-1{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-color-secondary-1{background-color:var(--monster-bg-color-secondary-1);color:var(--monster-color-secondary-1)}.monster-color-tertiary-1{background-color:var(--monster-bg-color-tertiary-1);color:var(--monster-color-tertiary-1)}.monster-color-destructive-1{background-color:var(--monster-bg-color-destructive-1);color:var(--monster-color-destructive-1)}.monster-color-success-1{background-color:var(--monster-bg-color-success-1);color:var(--monster-color-success-1)}.monster-color-warning-1{background-color:var(--monster-bg-color-warning-1);color:var(--monster-color-warning-1)}.monster-color-error-1{background-color:var(--monster-bg-color-error-1);color:var(--monster-color-error-1)}.monster-color-selection-1{background-color:var(--monster-bg-color-selection-1);color:var(--monster-color-selection-1)}.monster-theme-primary-2{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}.monster-theme-primary-disabled-2{background-color:var(--monster-bg-color-primary-disabled-2);color:var(--monster-color-primary-disabled-2)}.monster-theme-secondary-2{background-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)}.monster-theme-tertiary-2{background-color:var(--monster-bg-color-tertiary-2);color:var(--monster-color-tertiary-2)}.monster-theme-destructive-2{background-color:var(--monster-bg-color-destructive-2);color:var(--monster-color-destructive-2)}.monster-theme-success-2{background-color:var(--monster-bg-color-success-2);color:var(--monster-color-success-2)}.monster-theme-warning-2{background-color:var(--monster-bg-color-warning-2);color:var(--monster-color-warning-2)}.monster-theme-error-2{background-color:var(--monster-bg-color-error-2);color:var(--monster-color-error-2)}.monster-theme-selection-2{background-color:var(--monster-bg-color-selection-2);color:var(--monster-color-selection-2)}.monster-border-color-2{border-color:var(--monster-color-border-2)}.monster-color-neutral-2{color:var(--monster-color-primary-2)}.monster-bg-color-primary-2{background-color:var(--monster-bg-color-primary-2)}.monster-bg-color-secondary-2{background-color:var(--monster-bg-color-secondary-2)}.monster-bg-color-tertiary-2{background-color:var(--monster-bg-color-tertiary-2)}.monster-color-primary-2{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}.monster-color-secondary-2{background-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)}.monster-color-tertiary-2{background-color:var(--monster-bg-color-tertiary-2);color:var(--monster-color-tertiary-2)}.monster-color-destructive-2{background-color:var(--monster-bg-color-destructive-2);color:var(--monster-color-destructive-2)}.monster-color-success-2{background-color:var(--monster-bg-color-success-2);color:var(--monster-color-success-2)}.monster-color-warning-2{background-color:var(--monster-bg-color-warning-2);color:var(--monster-color-warning-2)}.monster-color-error-2{background-color:var(--monster-bg-color-error-2);color:var(--monster-color-error-2)}.monster-color-selection-2{background-color:var(--monster-bg-color-selection-2);color:var(--monster-color-selection-2)}.monster-theme-primary-3{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-theme-primary-disabled-3{background-color:var(--monster-bg-color-primary-disabled-3);color:var(--monster-color-primary-disabled-3)}.monster-theme-secondary-3{background-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-3)}.monster-theme-tertiary-3{background-color:var(--monster-bg-color-tertiary-3);color:var(--monster-color-tertiary-3)}.monster-theme-destructive-3{background-color:var(--monster-bg-color-destructive-3);color:var(--monster-color-destructive-3)}.monster-theme-success-3{background-color:var(--monster-bg-color-success-3);color:var(--monster-color-success-3)}.monster-theme-warning-3{background-color:var(--monster-bg-color-warning-3);color:var(--monster-color-warning-3)}.monster-theme-error-3{background-color:var(--monster-bg-color-error-3);color:var(--monster-color-error-3)}.monster-theme-selection-3{background-color:var(--monster-bg-color-selection-3);color:var(--monster-color-selection-3)}.monster-border-color-3{border-color:var(--monster-color-border-3)}.monster-color-neutral-3{color:var(--monster-color-primary-3)}.monster-bg-color-primary-3{background-color:var(--monster-bg-color-primary-3)}.monster-bg-color-secondary-3{background-color:var(--monster-bg-color-secondary-3)}.monster-bg-color-tertiary-3{background-color:var(--monster-bg-color-tertiary-3)}.monster-color-primary-3{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-color-secondary-3{background-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-3)}.monster-color-tertiary-3{background-color:var(--monster-bg-color-tertiary-3);color:var(--monster-color-tertiary-3)}.monster-color-destructive-3{background-color:var(--monster-bg-color-destructive-3);color:var(--monster-color-destructive-3)}.monster-color-success-3{background-color:var(--monster-bg-color-success-3);color:var(--monster-color-success-3)}.monster-color-warning-3{background-color:var(--monster-bg-color-warning-3);color:var(--monster-color-warning-3)}.monster-color-error-3{background-color:var(--monster-bg-color-error-3);color:var(--monster-color-error-3)}.monster-color-selection-3{background-color:var(--monster-bg-color-selection-3);color:var(--monster-color-selection-3)}.monster-theme-primary-4{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-theme-primary-disabled-4{background-color:var(--monster-bg-color-primary-disabled-4);color:var(--monster-color-primary-disabled-4)}.monster-theme-secondary-4{background-color:var(--monster-bg-color-secondary-4);color:var(--monster-color-secondary-4)}.monster-theme-tertiary-4{background-color:var(--monster-bg-color-tertiary-4);color:var(--monster-color-tertiary-4)}.monster-theme-destructive-4{background-color:var(--monster-bg-color-destructive-4);color:var(--monster-color-destructive-4)}.monster-theme-success-4{background-color:var(--monster-bg-color-success-4);color:var(--monster-color-success-4)}.monster-theme-warning-4{background-color:var(--monster-bg-color-warning-4);color:var(--monster-color-warning-4)}.monster-theme-error-4{background-color:var(--monster-bg-color-error-4);color:var(--monster-color-error-4)}.monster-theme-selection-4{background-color:var(--monster-bg-color-selection-4);color:var(--monster-color-selection-4)}.monster-border-color-4{border-color:var(--monster-color-border-4)}.monster-color-neutral-4{color:var(--monster-color-primary-4)}.monster-bg-color-primary-4{background-color:var(--monster-bg-color-primary-4)}.monster-bg-color-secondary-4{background-color:var(--monster-bg-color-secondary-4)}.monster-bg-color-tertiary-4{background-color:var(--monster-bg-color-tertiary-4)}.monster-color-primary-4{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-color-secondary-4{background-color:var(--monster-bg-color-secondary-4);color:var(--monster-color-secondary-4)}.monster-color-tertiary-4{background-color:var(--monster-bg-color-tertiary-4);color:var(--monster-color-tertiary-4)}.monster-color-destructive-4{background-color:var(--monster-bg-color-destructive-4);color:var(--monster-color-destructive-4)}.monster-color-success-4{background-color:var(--monster-bg-color-success-4);color:var(--monster-color-success-4)}.monster-color-warning-4{background-color:var(--monster-bg-color-warning-4);color:var(--monster-color-warning-4)}.monster-color-error-4{background-color:var(--monster-bg-color-error-4);color:var(--monster-color-error-4)}.monster-color-selection-4{background-color:var(--monster-bg-color-selection-4);color:var(--monster-color-selection-4)}.monster-theme-control-container-1,.monster-theme-control-row-1{border:1px solid var(--monster-theme-control-border-color)}.monster-theme-control-container-1,.monster-theme-control-element,.monster-theme-control-row-1{background-color:var(--monster-theme-control-bg-color);color:var(--monster-theme-control-color)}.monster-theme-control-background{background-color:var(--monster-theme-control-bg-color)}.monster-theme-background-inherit{background-color:inherit!important}.monster-theme-on{background-color:var(--monster-theme-on-bg-color);color:var(--monster-theme-on-color)}.monster-theme-off{background-color:var(--monster-theme-off-bg-color);color:var(--monster-theme-off-color)}div[data-monster-role=popper]{background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;padding:1.1em;z-index:var(--monster-z-index-modal)}[data-popper-arrow],[data-popper-arrow]:before{background:inherit;height:calc(max(var(--monster-popper-witharrrow-distance), -1*var(--monster-popper-witharrrow-distance))*2);position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1*var(--monster-popper-witharrrow-distance))*2)}[data-popper-arrow]{visibility:hidden}[data-popper-arrow]:before{box-sizing:border-box;content:\"\";transform:rotate(45deg);visibility:visible}div[data-popper-placement^=top]>[data-popper-arrow]{bottom:calc(var(--monster-popper-witharrrow-distance) - var(--monster-border-width)/2)}div[data-popper-placement^=top]>[data-popper-arrow]:before{border-bottom:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);border-left:transparent;border-right:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);border-top:transparent}div[data-popper-placement^=bottom]>[data-popper-arrow]{top:calc(var(--monster-popper-witharrrow-distance) - var(--monster-border-width))}div[data-popper-placement^=bottom]>[data-popper-arrow]:before{border-bottom:transparent;border-left:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);border-right:transparent;border-top:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4)}div[data-popper-placement^=left]>[data-popper-arrow]{right:calc(var(--monster-popper-witharrrow-distance) - var(--monster-border-width))}div[data-popper-placement^=left]>[data-popper-arrow]:before{border-bottom:transparent;border-left:transparent;border-right:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);border-top:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4)}div[data-popper-placement^=right]>[data-popper-arrow]{left:calc(var(--monster-popper-witharrrow-distance) - var(--monster-border-width)/2)}div[data-popper-placement^=right]>[data-popper-arrow]:before{border-bottom:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);border-left:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);border-right:transparent;border-top:transparent}[data-monster-role=control]{width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}.monster-badge-primary{padding:.25em .4em}.monster-badge-primary,.monster-badge-primary-pill{background-color:var(--monster-bg-color-primary-4);border-radius:.25rem;color:var(--monster-color-primary-4);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-primary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-secondary{padding:.25em .4em}.monster-badge-secondary,.monster-badge-secondary-pill{background-color:var(--monster-bg-color-secondary-3);border-radius:.25rem;color:var(--monster-color-secondary-3);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-secondary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-tertiary{padding:.25em .4em}.monster-badge-tertiary,.monster-badge-tertiary-pill{background-color:var(--monster-bg-color-tertiary-3);border-radius:.25rem;color:var(--monster-color-tertiary-3);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-tertiary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-destructive{padding:.25em .4em}.monster-badge-destructive,.monster-badge-destructive-pill{background-color:var(--monster-bg-color-destructive-1);border-radius:.25rem;color:var(--monster-color-destructive-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-destructive-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-success{padding:.25em .4em}.monster-badge-success,.monster-badge-success-pill{background-color:var(--monster-bg-color-success-1);border-radius:.25rem;color:var(--monster-color-success-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-success-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-warning{padding:.25em .4em}.monster-badge-warning,.monster-badge-warning-pill{background-color:var(--monster-bg-color-warning-1);border-radius:.25rem;color:var(--monster-color-warning-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-warning-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-error{padding:.25em .4em}.monster-badge-error,.monster-badge-error-pill{background-color:var(--monster-bg-color-error-1);border-radius:.25rem;color:var(--monster-color-error-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-error-pill{border-radius:10rem;padding:.25em .6em}:host{box-sizing:border-box;display:block;overflow:auto;width:100%}[data-monster-role=control]{border:0;box-sizing:border-box;margin:0;outline:none;overflow:auto;padding:0;scrollbar-color:var(--monster-color-primary-1) var(--monster-bg-color-primary-1);scrollbar-width:thin;//position:fixed;//top:0;//left:0;//right:0;//bottom:0;//overflow:auto;//box-sizing:border-box} 
+}`, 0);
+} catch (e) {
+  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
+}

package/source/components/layout/stylesheet/split-panel.mjs

@@ -0,0 +1,27 @@
+
+/**
+ * Copyright schukai GmbH and contributors 2024. All Rights Reserved.
+ * Node module: @schukai/monster
+ * This file is licensed under the AGPLv3 License.
+ * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
+ */
+
+import {addAttributeToken} from "../../../dom/attributes.mjs";
+import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
+
+export {SplitPanelStyleSheet}
+
+/**
+ * @private
+ * @type {CSSStyleSheet}
+ */
+const SplitPanelStyleSheet = new CSSStyleSheet();
+
+try {
+  SplitPanelStyleSheet.insertRule(`
+@layer splitpanel { 
+[data-monster-role=split-panel]{box-sizing:border-box;display:flex;flex-direction:row;height:auto;margin:0;padding:0;width:100%}[data-monster-role=split-panel] .panel{flex-grow:1;overflow:auto}[data-monster-role=split-panel] [data-monster-role=dragger]{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4);height:auto;position:relative;width:var(--monster-dragger-width)}[data-monster-role=split-panel] [data-monster-role=dragger] [data-monster-role=handle]{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3);cursor:pointer;height:var(--monster-dragger-handle-height);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--monster-dragger-handle-width);z-index:var(--monster-z-index-outline)}.horizontal[data-monster-role=split-panel]{flex-direction:column}.horizontal[data-monster-role=split-panel] [data-monster-role=dragger]{height:var(--monster-dragger-width);width:100%}.horizontal[data-monster-role=split-panel] [data-monster-role=dragger] [data-monster-role=handle]{height:var(--monster-dragger-handle-width);width:var(--monster-dragger-handle-height)} 
+}`, 0);
+} catch (e) {
+  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
+}

package/source/components/layout/stylesheet/width-toggle.mjs

@@ -20,7 +20,7 @@ const WidthToggleStyleSheet = new CSSStyleSheet();
 try {
   WidthToggleStyleSheet.insertRule(`
 @layer widthtoggle { 
- 
+[data-monster-role=toggle]{background-color:var(--monster-bg-color-primary-4);background-position:50%;background-repeat:no-repeat;background-size:cover;cursor:pointer;height:1rem;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'/%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'/%3E\");position:absolute;right:0;top:-1rem;transition:right .5s ease-in-out;width:1rem}[data-monster-role=toggle][data-monster-state=wide]{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M.172 15.828a.5.5 0 0 0 .707 0l4.096-4.096V14.5a.5.5 0 1 0 1 0v-3.975a.5.5 0 0 0-.5-.5H1.5a.5.5 0 0 0 0 1h2.768L.172 15.121a.5.5 0 0 0 0 .707M15.828.172a.5.5 0 0 0-.707 0l-4.096 4.096V1.5a.5.5 0 1 0-1 0v3.975a.5.5 0 0 0 .5.5H14.5a.5.5 0 0 0 0-1h-2.768L15.828.879a.5.5 0 0 0 0-.707'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M.172 15.828a.5.5 0 0 0 .707 0l4.096-4.096V14.5a.5.5 0 1 0 1 0v-3.975a.5.5 0 0 0-.5-.5H1.5a.5.5 0 0 0 0 1h2.768L.172 15.121a.5.5 0 0 0 0 .707M15.828.172a.5.5 0 0 0-.707 0l-4.096 4.096V1.5a.5.5 0 1 0-1 0v3.975a.5.5 0 0 0 .5.5H14.5a.5.5 0 0 0 0-1h-2.768L15.828.879a.5.5 0 0 0 0-.707'/%3E%3C/svg%3E\")}[data-monster-role=toggle][data-monster-state=small]{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M5.828 10.172a.5.5 0 0 0-.707 0l-4.096 4.096V11.5a.5.5 0 0 0-1 0v3.975a.5.5 0 0 0 .5.5H4.5a.5.5 0 0 0 0-1H1.732l4.096-4.096a.5.5 0 0 0 0-.707m4.344-4.344a.5.5 0 0 0 .707 0l4.096-4.096V4.5a.5.5 0 1 0 1 0V.525a.5.5 0 0 0-.5-.5H11.5a.5.5 0 0 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 0 .707'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M5.828 10.172a.5.5 0 0 0-.707 0l-4.096 4.096V11.5a.5.5 0 0 0-1 0v3.975a.5.5 0 0 0 .5.5H4.5a.5.5 0 0 0 0-1H1.732l4.096-4.096a.5.5 0 0 0 0-.707m4.344-4.344a.5.5 0 0 0 .707 0l4.096-4.096V4.5a.5.5 0 1 0 1 0V.525a.5.5 0 0 0-.5-.5H11.5a.5.5 0 0 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 0 .707'/%3E%3C/svg%3E\")}[data-monster-role=container]{align-items:center;box-sizing:border-box;display:flex;justify-content:center;position:relative}[data-monster-role=container] [data-monster-role=inside]{align-items:center;display:flex;justify-content:center;transition:width .5s ease-in-out} 
 }`, 0);
 } catch (e) {
   addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");

package/source/components/layout/width-toggle.mjs

@@ -3,19 +3,20 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
+import {addAttributeToken} from "../../dom/attributes.mjs";
+import {ATTRIBUTE_ERRORMESSAGE} from "../../dom/constants.mjs";
 import {
     assembleMethodSymbol,
     CustomElement,
     registerCustomElement,
 } from "../../dom/customelement.mjs";
-import "../notify/notify.mjs";
 import {fireCustomEvent} from "../../dom/events.mjs";
 import {Observer} from "../../types/observer.mjs";
 import {WidthToggleStyleSheet} from "./stylesheet/width-toggle.mjs";
 import {instanceSymbol} from "../../constants.mjs";
 import {internalSymbol} from "../../constants.mjs";
 
-export {WidthToggle, TYPE_VERTICAL, TYPE_HORIZONTAL};
+export {WidthToggle, MODE_SMALL, MODE_WIDE};
 
 /**
  * @private
@@ -28,6 +29,22 @@ const widthToggleElementSymbol = Symbol("WidthToggleElement");
  * @type {symbol}
  */
 const toggleElementSymbol = Symbol("toggleElement");
+/**
+ * @private
+ * @type {symbol}
+ */
+const insideElementSymbol = Symbol("insideElement");
+
+/**
+ *
+ * @type {string}
+ */
+const MODE_SMALL = "small";
+/**
+ *
+ * @type {string}
+ */
+const MODE_WIDE = "wide";
 
 /**
  * The WidthToggle component is used to change the width of a panel.
@@ -38,14 +55,14 @@ const toggleElementSymbol = Symbol("toggleElement");
  * Javascript via the `document.createElement('monster-split-screen');` method.
  *
  * ```html
- * <monster-split-screen></monster-split-screen>
+ * <monster-width-toggle></monster-width-toggle>
  * ```
  *
  * Or you can create this CustomControl directly in Javascript:
  *
  * ```js
- * import '@schukai/monster/components/layout/split-screen.mjs';
- * document.createElement('monster-split-screen');
+ * import '@schukai/monster/components/layout/width-toggle.mjs';
+ * document.createElement('monster-width-toggle');
  * ```
  *
  * @startuml widthToggle.png
@@ -76,7 +93,7 @@ class WidthToggle extends CustomElement {
      * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
      *
      * The individual configuration values can be found in the table.
-     *
+     * 
      * @property {Object} templates Template definitions
      * @property {string} templates.main Main template
      * @property {string} splitType Split type (vertical or horizontal)
@@ -90,36 +107,14 @@ class WidthToggle extends CustomElement {
             templates: {
                 main: getTemplate(),
             },
-            splitType: TYPE_VERTICAL,
-            dimension: {
-                initial: "60%",
-                max: "80%",
-                min: "20%",
+            width: {
+                small: "40%",
+                wide: "95%",
             },
+            default: MODE_SMALL,
         });
     }
 
-    fullStartScreen() {
-        this.setDimension("100%");
-        return this;
-    }
-
-    fullEndScreen() {
-        this.setDimension("0%");
-        return this;
-    }
-
-    resetScreen() {
-        this.setDimension(this.getOption("dimension").initial);
-        return this;
-    }
-
-
-    setContent(html) {
-        this.setOption("content", html);
-        return this;
-    }
-
     /**
      *
      * @returns {Monster.Components.Host.Viewer}
@@ -129,27 +124,19 @@ class WidthToggle extends CustomElement {
 
         initControlReferences.call(this);
         initEventHandler.call(this);
-        //applyContainerWidth.call(this);
-        this.setDimension(this.getOption("dimension").initial);
+        applyContainerWidth.call(this, this.getOption("default"));
+
     }
 
     /**
      * Check if the dimension is a percentage and within a valid range, then set the dimension option.
      *
-     * @param {string} width - The dimension to be set, can be in percentage or absolute value.
+     * @param {string} mode - The mode of the panel. Possible values are "wide" or "small".
      * @return {Object} - Returns the current object instance for chaining.
+     * @throws {Error} - If the mode is not supported.
      */
-    setWidth(width) {
-        // check if percent and greater than100
-        if (width.includes("%")) {
-            if (parseInt(width) > 100) {
-                throw new Error("width must be less than 100%");
-            } else if (parseInt(width) < 0) {
-                throw new Error("width must be greater than 0%");
-            }
-        }
-
-        this.setOption("width", width);
+    setWidth(mode) {
+        applyContainerWidth.call(this, mode);
         return this;
     }
 
@@ -173,21 +160,36 @@ class WidthToggle extends CustomElement {
 
 /**
  * Set the dimensions of the panel based on the split type.
+ * @param {string} mode - The mode of the panel. Possible values are "wide" or "small".
  * @fires Monster.Components.Layout.event:monster-dimension-changed
  */
-function applyContainerWidth() {
+function applyContainerWidth(mode) {
 
-    let width = this.getOption("width");
+    const width = this.getOption("width." + mode)
     if (!width) {
-        width = "100%";
+        addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
+        throw new Error("unsupported mode");
     }
 
-    this[widthToggleElementSymbol].style.width = width;
+    switch (mode) {
+        case MODE_SMALL:
+        case MODE_WIDE:
 
-    fireCustomEvent(this, "monster-dimension-changed", {
-        controller: this,
-        dimension: width
-    });
+            this[toggleElementSymbol].style.right = "calc( 50% - (" + width + " / 2) + 1rem)"
+            this[toggleElementSymbol].setAttribute("data-monster-state", mode);
+            this[insideElementSymbol].style.width = width;
+
+            fireCustomEvent(this, "monster-dimension-changed", {
+                controller: this,
+                dimension: width
+            });
+            break;
+
+        default:
+            const error = new Error("unsupported mode")
+            addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error.message);
+            throw error;
+    }
 
 }
 
@@ -202,8 +204,9 @@ function initControlReferences() {
         throw new Error("no shadow-root is defined");
     }
 
-    this[widthToggleElementSymbol] = this.shadowRoot.querySelector("[data-monster-role=width-toggle]");
+    this[widthToggleElementSymbol] = this.shadowRoot.querySelector("[data-monster-role=control]");
     this[toggleElementSymbol] = this.shadowRoot.querySelector("[data-monster-role=toggle]");
+    this[insideElementSymbol] = this.shadowRoot.querySelector("[data-monster-role=inside]");
 
 
 }
@@ -214,10 +217,10 @@ function initControlReferences() {
 function initEventHandler() {
     const self = this;
 
-    this[internalSymbol].attachObserver(
-        new Observer(() => {
-            applyContainerWidth.call(self);
-        }));
+    this[toggleElementSymbol].addEventListener("click", function () {
+        const mode = self[toggleElementSymbol].getAttribute("data-monster-state") === MODE_SMALL ? MODE_WIDE : MODE_SMALL;
+        applyContainerWidth.call(self, mode);
+    });
 
 
     return this;
@@ -231,10 +234,12 @@ function initEventHandler() {
 function getTemplate() {
     // language=HTML
     return `
-        <div data-monster-role="width-toggle" part="control">
+        <div data-monster-role="control" part="control">
             <div part="container" data-monster-role="container">
-                <div data-monster-role="toggle">ICON</div>
-                <slot></slot>
+                <div part="toggle" data-monster-role="toggle" data-monster-state="wide"></div>
+                <div part="inside" data-monster-role="inside">
+                    <slot></slot>
+                </div>
             </div>
         </div>`;
 }

package/source/monster.mjs

@@ -17,7 +17,7 @@
  */
 
 export * from "./components/layout/tabs.mjs";
-export * from "./components/layout/split-screen.mjs";
+export * from "./components/layout/split-panel.mjs";
 export * from "./components/layout/stylesheet/tabs.mjs";
 export * from "./components/layout/stylesheet/split-screen.mjs";
 export * from "./components/form/message-state-button.mjs";

package/source/types/version.mjs

@@ -152,7 +152,7 @@ function getMonsterVersion() {
 	}
 
 	/** don't touch, replaced by make with package.json version */
-	monsterVersion = new Version("3.63.2");
+	monsterVersion = new Version("3.64.0");
 
 	return monsterVersion;
 }

package/test/cases/components/layout/{slit-screen.mjs → panel.mjs}

@@ -11,9 +11,9 @@ const global = getGlobal();
 
 // language=html
 let html1 = `
-    <monster-split-screen id="my-split-screen">
+    <monster-panel id="my-panel">
        
-    </monster-split-screen>
+    </monster-panel>
 `;
 
 let SplitScreen;
@@ -34,8 +34,8 @@ describe('SplitScreen', function () {
                 }));
             }
 
-            promises.push(import("../../../../source/components/layout/split-screen.mjs").then((m) => {
-                SplitScreen = m['SplitScreen'];
+            promises.push(import("../../../../source/components/layout/panel.mjs").then((m) => {
+                SplitScreen = m['Panel'];
             }))
 
             Promise.all(promises).then(()=>{
@@ -59,7 +59,7 @@ describe('SplitScreen', function () {
 
             setTimeout(() => {
                 try {
-                    const SplitScreen = document.getElementById('my-split-screen')
+                    const SplitScreen = document.getElementById('my-panel')
                     expect(SplitScreen).is.instanceof(HTMLElement);
 
                     setTimeout(() => {

package/test/cases/components/layout/slit-panel.mjs

@@ -0,0 +1,83 @@
+import {getGlobal} from "../../../../source/types/global.mjs";
+import chai from "chai"
+import {chaiDom} from "../../../util/chai-dom.mjs";
+import {initJSDOM} from "../../../util/jsdom.mjs";
+
+let expect = chai.expect;
+chai.use(chaiDom);
+
+const global = getGlobal();
+
+
+// language=html
+let html1 = `
+    <monster-split-panel id="my-split-panel">
+       
+    </monster-split-panel>
+`;
+
+let SplitScreen;
+
+describe('SplitScreen', function () {
+
+    before(function (done) {
+        initJSDOM().then(() => {
+
+            import("element-internals-polyfill").catch(e => done(e));
+            
+            let promises = []
+
+            if (!global['crypto']) {
+                promises.push(import("@peculiar/webcrypto").then((m) => {
+                    const Crypto = m['Crypto'];
+                    global['crypto'] = new Crypto();
+                }));
+            }
+
+            promises.push(import("../../../../source/components/layout/split-panel.mjs").then((m) => {
+                SplitScreen = m['SplitPanel'];
+            }))
+
+            Promise.all(promises).then(()=>{
+                done();
+            }).catch(e => done(e))
+
+        });
+    })
+
+    describe('document.createElement()', function () {
+
+        afterEach(() => {
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = "";
+        })
+
+        it('should have buttons and SplitScreen', function (done) {
+
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = html1;
+
+            setTimeout(() => {
+                try {
+                    const SplitScreen = document.getElementById('my-split-panel')
+                    expect(SplitScreen).is.instanceof(HTMLElement);
+
+                    setTimeout(() => {
+                        let div = SplitScreen.shadowRoot.querySelector('div');
+                        expect(div.hasChildNodes()).to.be.true;
+                        done();
+                    }, 100)
+
+                } catch (e) {
+                    return done(e);
+                }
+
+            }, 0)
+
+
+        });
+
+    });
+
+
+});

package/test/cases/monster.mjs

@@ -7,7 +7,7 @@ describe('Monster', function () {
         let monsterVersion
 
         /** don´t touch, replaced by make with package.json version */
-        monsterVersion = new Version("3.63.2")
+        monsterVersion = new Version("3.64.0")
 
         let m = getMonsterVersion();
 

package/test/web/tests.js

@@ -35855,7 +35855,7 @@ span.monster-fx-ripple{animation:monster-fx-ripple .6s linear;background-color:h
           }));
         }
         promises.push(Promise.resolve().then(() => (init_split_screen2(), split_screen_exports)).then((m) => {
-          SplitScreen2 = m["SplitScreen"];
+          SplitScreen2 = m["SplitPanel"];
         }));
         Promise.all(promises).then(() => {
           done();

package/source/components/layout/stylesheet/split-screen.mjs

@@ -1,27 +0,0 @@
-
-/**
- * Copyright schukai GmbH and contributors 2024. All Rights Reserved.
- * Node module: @schukai/monster
- * This file is licensed under the AGPLv3 License.
- * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
- */
-
-import {addAttributeToken} from "../../../dom/attributes.mjs";
-import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
-
-export {SplitScreenStyleSheet}
-
-/**
- * @private
- * @type {CSSStyleSheet}
- */
-const SplitScreenStyleSheet = new CSSStyleSheet();
-
-try {
-  SplitScreenStyleSheet.insertRule(`
-@layer splitscreen { 
-[data-monster-role=split-screen]{box-sizing:border-box;display:flex;flex-direction:row;height:auto;margin:0;padding:0;width:100%}[data-monster-role=split-screen] .panel{flex-grow:1;overflow:auto}[data-monster-role=split-screen] [data-monster-role=dragger]{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4);height:auto;position:relative;width:var(--monster-dragger-width)}[data-monster-role=split-screen] [data-monster-role=dragger] [data-monster-role=handle]{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3);cursor:pointer;height:var(--monster-dragger-handle-height);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--monster-dragger-handle-width);z-index:var(--monster-z-index-outline)}.horizontal[data-monster-role=split-screen]{flex-direction:column}.horizontal[data-monster-role=split-screen] [data-monster-role=dragger]{height:var(--monster-dragger-width);width:100%}.horizontal[data-monster-role=split-screen] [data-monster-role=dragger] [data-monster-role=handle]{height:var(--monster-dragger-handle-width);width:var(--monster-dragger-handle-height)} 
-}`, 0);
-} catch (e) {
-  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
-}