chore: wip showroom

source/components/layout/tabs.mjs

@@ -585,7 +585,7 @@ function show(element) {
 			node.classList.add("active");
 			
 			const openDelay = parseInt(this.getOption("features.openDelay"), 10);
-			console.log(openDelay)
+			
 			if(!isNaN(openDelay) && openDelay>0) {
 				node.style.visibility = "hidden";
 

source/components/layout/width-toggle.mjs

@@ -51,8 +51,8 @@ const MODE_WIDE = "wide";
  *
  * <img src="./images/widthToggle.png">
  *
- * You can create this control either by specifying the HTML tag <monster-WidthToggle />` 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-width-toggle />` directly in the HTML or using
+ * Javascript via the `document.createElement('monster-width-toggle');` method.
  *
  * ```html
  * <monster-width-toggle></monster-width-toggle>
@@ -85,7 +85,7 @@ class WidthToggle extends CustomElement {
      * @returns {symbol}
      */
     static get [instanceSymbol]() {
-        return Symbol.for("@schukai/monster/components/layout/WidthToggle");
+        return Symbol.for("@schukai/monster/components/layout/width-toggle@@instance");
     }
 
     /**

source/components/style/link.pcss

@@ -39,7 +39,6 @@ a:focus {
     
     a, a:link, a:visited, a:hover, a:active, a:focus {
         color: var(--monster-color-amber-2);
-        
     }
     
     a:focus {

source/components/style/mixin/typography.pcss

@@ -3,42 +3,42 @@
 @define-mixin h1 {
     font-size: 3rem;
     line-height: 1.15;   
-    margin-bottom: 1.5rem;
+    margin: 4rem 0 1.5rem;
     font-weight: normal;
 }
 
 @define-mixin h2 {
     font-size: 2.5rem;
     line-height: 1.2;
-    margin-bottom: 1.5rem;
+    margin: 4rem 0 1.5rem;
     font-weight: normal;
 }
 
 @define-mixin h3 {
     font-size: 2rem;
     line-height: 1.25;
-    margin-bottom: 1.25rem;
+    margin: 4rem 0 1.25rem;
     font-weight: normal;
 }
 
 @define-mixin h4 {
     font-size: 1.5rem;
     line-height: 1.3;
-    margin-bottom: 1.25rem;
+    margin: 4rem 0 1.25rem;
     font-weight: normal;
 }
 
 @define-mixin h5 {
     font-size: 1.4rem;
     line-height: 1.3;
-    margin-bottom: 1.25rem;
+    margin: 4rem 0 1.25rem;
     font-weight: bolder;
 }
 
 @define-mixin h6 {
     font-size: 1.3rem;
     line-height: 1.3;
-    margin-bottom: 1.25rem;
+    margin: 4rem 0 1.25rem;
     font-weight: bold;
 }
  

source/monster.mjs

@@ -18,14 +18,12 @@
  * @namespace Monster
  * @author schukai GmbH
  */
+export * from "./components/layout/collapse.mjs";
 export * from "./components/layout/tabs.mjs";
 export * from "./components/layout/split-panel.mjs";
 export * from "./components/layout/width-toggle.mjs";
 export * from "./components/layout/panel.mjs";
-export * from "./components/layout/stylesheet/tabs.mjs";
-export * from "./components/layout/stylesheet/split-panel.mjs";
-export * from "./components/layout/stylesheet/width-toggle.mjs";
-export * from "./components/layout/stylesheet/panel.mjs";
+export * from "./components/layout/details.mjs";
 export * from "./components/form/message-state-button.mjs";
 export * from "./components/form/button-bar.mjs";
 export * from "./components/form/reload.mjs";
@@ -35,7 +33,6 @@ export * from "./components/form/util/floating-ui.mjs";
 export * from "./components/form/context-help.mjs";
 export * from "./components/form/tabs.mjs";
 export * from "./components/form/state-button.mjs";
-export * from "./components/form/form-field.mjs";
 export * from "./components/form/popper.mjs";
 export * from "./components/form/select.mjs";
 export * from "./components/form/confirm-button.mjs";
@@ -47,33 +44,15 @@ export * from "./components/form/tree-select.mjs";
 export * from "./components/form/popper-button.mjs";
 export * from "./components/form/shadow-reload.mjs";
 export * from "./components/form/button.mjs";
+export * from "./components/form/field-set.mjs";
 export * from "./components/form/toggle-switch.mjs";
 export * from "./components/form/types/state.mjs";
 export * from "./components/form/template.mjs";
 export * from "./components/form/constants.mjs";
-export * from "./components/form/stylesheet/message-state-button.mjs";
-export * from "./components/form/stylesheet/button-bar.mjs";
-export * from "./components/form/stylesheet/context-help.mjs";
-export * from "./components/form/stylesheet/state-button.mjs";
-export * from "./components/form/stylesheet/form-field.mjs";
-export * from "./components/form/stylesheet/popper.mjs";
-export * from "./components/form/stylesheet/select.mjs";
-export * from "./components/form/stylesheet/confirm-button.mjs";
-export * from "./components/form/stylesheet/context-error.mjs";
-export * from "./components/form/stylesheet/action-button.mjs";
-export * from "./components/form/stylesheet/form.mjs";
-export * from "./components/form/stylesheet/api-button.mjs";
-export * from "./components/form/stylesheet/tree-select.mjs";
-export * from "./components/form/stylesheet/popper-button.mjs";
-export * from "./components/form/stylesheet/button.mjs";
-export * from "./components/form/stylesheet/toggle-switch.mjs";
 export * from "./components/notify/message.mjs";
 export * from "./components/notify/notify.mjs";
 export * from "./components/notify/constants.mjs";
-export * from "./components/notify/stylesheet/message.mjs";
-export * from "./components/notify/stylesheet/notify.mjs";
 export * from "./components/tree-menu/tree-menu.mjs";
-export * from "./components/tree-menu/stylesheet/tree-menu.mjs";
 export * from "./components/host/collapse.mjs";
 export * from "./components/host/config-manager.mjs";
 export * from "./components/host/host.mjs";
@@ -84,14 +63,6 @@ export * from "./components/host/util.mjs";
 export * from "./components/host/call-button.mjs";
 export * from "./components/host/details.mjs";
 export * from "./components/host/constants.mjs";
-export * from "./components/host/stylesheet/collapse.mjs";
-export * from "./components/host/stylesheet/config-manager.mjs";
-export * from "./components/host/stylesheet/host.mjs";
-export * from "./components/host/stylesheet/overlay.mjs";
-export * from "./components/host/stylesheet/toggle-button.mjs";
-export * from "./components/host/stylesheet/viewer.mjs";
-export * from "./components/host/stylesheet/call-button.mjs";
-export * from "./components/host/stylesheet/details.mjs";
 export * from "./components/datatable/filter/input.mjs";
 export * from "./components/datatable/filter/date-range.mjs";
 export * from "./components/datatable/filter/abstract-base.mjs";
@@ -113,63 +84,11 @@ export * from "./components/datatable/embedded-pagination.mjs";
 export * from "./components/datatable/status.mjs";
 export * from "./components/datatable/change-button.mjs";
 export * from "./components/datatable/constants.mjs";
-export * from "./components/datatable/stylesheet/select-filter.mjs";
-export * from "./components/datatable/stylesheet/datasource.mjs";
-export * from "./components/datatable/stylesheet/column-bar.mjs";
-export * from "./components/datatable/stylesheet/filter-button.mjs";
-export * from "./components/datatable/stylesheet/filter-date-range.mjs";
-export * from "./components/datatable/stylesheet/datatable.mjs";
-export * from "./components/datatable/stylesheet/pagination.mjs";
-export * from "./components/datatable/stylesheet/filter.mjs";
-export * from "./components/datatable/stylesheet/save-button.mjs";
-export * from "./components/datatable/stylesheet/dataset.mjs";
-export * from "./components/datatable/stylesheet/embedded-pagination.mjs";
-export * from "./components/datatable/stylesheet/filter-controls-defaults.mjs";
-export * from "./components/datatable/stylesheet/status.mjs";
-export * from "./components/datatable/stylesheet/change-button.mjs";
-export * from "./components/datatable/stylesheet/filter-range.mjs";
 export * from "./components/state/log/entry.mjs";
 export * from "./components/state/state.mjs";
 export * from "./components/state/log.mjs";
-export * from "./components/state/stylesheet/state.mjs";
-export * from "./components/state/stylesheet/log.mjs";
 export * from "./components/constants.mjs";
 export * from "./components/constants.mjs";
-export * from "./components/stylesheet/host.mjs";
-export * from "./components/stylesheet/badge.mjs";
-export * from "./components/stylesheet/border.mjs";
-export * from "./components/stylesheet/mixin/hover.mjs";
-export * from "./components/stylesheet/mixin/badge.mjs";
-export * from "./components/stylesheet/mixin/spinner.mjs";
-export * from "./components/stylesheet/mixin/property.mjs";
-export * from "./components/stylesheet/mixin/form.mjs";
-export * from "./components/stylesheet/mixin/skeleton.mjs";
-export * from "./components/stylesheet/mixin/typography.mjs";
-export * from "./components/stylesheet/mixin/media.mjs";
-export * from "./components/stylesheet/mixin/button.mjs";
-export * from "./components/stylesheet/mixin/icon.mjs";
-export * from "./components/stylesheet/spinner.mjs";
-export * from "./components/stylesheet/control.mjs";
-export * from "./components/stylesheet/card.mjs";
-export * from "./components/stylesheet/common.mjs";
-export * from "./components/stylesheet/icons.mjs";
-export * from "./components/stylesheet/popper.mjs";
-export * from "./components/stylesheet/theme.mjs";
-export * from "./components/stylesheet/data-grid.mjs";
-export * from "./components/stylesheet/space.mjs";
-export * from "./components/stylesheet/normalize.mjs";
-export * from "./components/stylesheet/ripple.mjs";
-export * from "./components/stylesheet/link.mjs";
-export * from "./components/stylesheet/property.mjs";
-export * from "./components/stylesheet/form.mjs";
-export * from "./components/stylesheet/skeleton.mjs";
-export * from "./components/stylesheet/typography.mjs";
-export * from "./components/stylesheet/tree-menu.mjs";
-export * from "./components/stylesheet/table.mjs";
-export * from "./components/stylesheet/button.mjs";
-export * from "./components/stylesheet/display.mjs";
-export * from "./components/stylesheet/color.mjs";
-export * from "./components/stylesheet/floating-ui.mjs";
 export * from "./text/formatter.mjs";
 export * from "./text/generate-range-comparison-expression.mjs";
 export * from "./text/util.mjs";

test/web/tests.js

@@ -24173,7 +24173,7 @@ ${key.data.toString("base64")}
   }
   var splitScreenElementSymbol, draggerElementSymbol, startPanelElementSymbol, endPanelElementSymbol, handleElementSymbol, TYPE_VERTICAL, TYPE_HORIZONTAL, SplitScreen;
   var init_split_screen2 = __esm({
-    "source/components/layout/split-screen.mjs"() {
+    "source/components/layout/split-panel.mjs"() {
       init_customelement();
       init_notify2();
       init_events();
@@ -24271,7 +24271,7 @@ ${key.data.toString("base64")}
          * @return {string}
          */
         static getTag() {
-          return "monster-split-screen";
+          return "monster-split-panel";
         }
         /**
          * @return {CSSStyleSheet[]}
@@ -35838,9 +35838,9 @@ span.monster-fx-ripple{animation:monster-fx-ripple .6s linear;background-color:h
   chai_default.use(chaiDom);
   var global3 = getGlobal();
   var html12 = `
-    <monster-split-screen id="my-split-screen">
+    <monster-split-panel id="my-split-screen">
        
-    </monster-split-screen>
+    </monster-split-panel>
 `;
   var SplitScreen2;
   describe("SplitScreen", function() {