chore: test adjustments and minor layout adjustments

CHANGELOG.md

 # Changelog
 
-## 2024-06-22
-- new options to define the markers that are used for the label template  [#203](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/203)
-
 ## [3.69.2] - 2024-06-24
 
 ### Bug Fixes
 
 - the rest datasource should not reload if the query is undefined [#211](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/211)
 
-
-
 ## [3.69.1] - 2024-06-23
 
 ### Bug Fixes
 
 - small css adjustments to the field set [#209](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/209)
 
-
-
 ## [3.69.0] - 2024-06-23
 
 ### Add Features

source/components/datatable/style/datatable.pcss

@@ -8,7 +8,7 @@
 @import "../../style/link.pcss";
 @import "../../style/space.pcss";
 @import "../../style/icons.pcss";
-@import "../../style/mixin/form.pcss";
+@import "../../style/form.pcss";
 
 @import "../../style/mixin/button.pcss";
 @import "../../style/mixin/typography.pcss";

source/components/datatable/style/filter-controls-defaults.pcss

 @import "../../style/control.pcss";
 @import "../../style/floating-ui.pcss";
-@import "../../style/mixin/form.pcss";
+@import "../../style/form.pcss";
 
 
 div[data-monster-role=control] {

source/components/datatable/stylesheet/filter-controls-defaults.mjs

 /**
- * Copyright © schukai GmbH and all contributing authors, {{copyRightYear}}. All rights reserved.
+ * Copyright © schukai GmbH and all contributing authors, 2024. All rights reserved.
  * Node module: @schukai/monster
  *
  * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
@@ -8,14 +8,12 @@
  * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
  * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
  * For more information about purchasing a commercial license, please contact schukai GmbH.
- *
- * SPDX-License-Identifier: AGPL-3.0
  */
 
 import {addAttributeToken} from "../../../dom/attributes.mjs";
 import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
 
-export { FilterControlsDefaultsStyleSheet };
+export {FilterControlsDefaultsStyleSheet}
 
 /**
  * @private
@@ -24,17 +22,10 @@ export { FilterControlsDefaultsStyleSheet };
 const FilterControlsDefaultsStyleSheet = new CSSStyleSheet();
 
 try {
-	FilterControlsDefaultsStyleSheet.insertRule(
-		`
+  FilterControlsDefaultsStyleSheet.insertRule(`
 @layer filtercontrolsdefaults { 
-[data-monster-role=control]{outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}div[data-monster-role=popper]{align-content:center;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;justify-content:space-between;left:0;padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1}div[data-monster-role=control]{display:flex;height:100%;position:relative}div[data-monster-role=control] .form-container{margin:0 auto;max-width:600px}div[data-monster-role=control] .form-container .form-group{margin-bottom:.2rem}div[data-monster-role=control] .form-container .form-group input[type=number]{text-align:right;width:5rem}div[data-monster-role=control] .form-container .form-group input[type=number]::-webkit-inner-spin-button,div[data-monster-role=control] .form-container .form-group input[type=number]::-webkit-outer-spin-button{margin-left:10px}div[data-monster-role=control] .form-container .form-group input[type=radio]{accent-color:var(--monster-bg-color-primary-3)}[data-monster-role=popper]{position:absolute} 
-}`,
-		0,
-	);
+[data-monster-role=control]{outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}div[data-monster-role=popper]{align-content:center;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;justify-content:space-between;left:0;padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1}input,meter,progress,select,textarea{accent-color:var(--monster-color-secondary-2);background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-theme-control-border-color);border-radius:var(--monster-theme-control-border-radius);border-style:var(--monster-theme-control-border-style);border-width:var(--monster-theme-control-border-width);box-sizing:border-box;color:var(--monster-color-primary-1);font-family:inherit;font-size:100%;margin:0;outline:none}input,select,textarea{height:-moz-fit-content;height:fit-content;padding:.4rem .6rem}textarea{min-height:6rem;resize:vertical}input[type=color]{height:2rem;margin:0;padding:.1rem;width:2rem}input:hover:not([type=radio]):not([type=checkbox]):not([type=range]),select:hover,textarea:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}input:focus,select:focus,textarea:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:3px}div[data-monster-role=control]{display:flex;height:100%;position:relative}div[data-monster-role=control] .form-container{margin:0 auto;max-width:600px}div[data-monster-role=control] .form-container .form-group{margin-bottom:.2rem}div[data-monster-role=control] .form-container .form-group input[type=number]{text-align:right;width:5rem}div[data-monster-role=control] .form-container .form-group input[type=number]::-webkit-inner-spin-button,div[data-monster-role=control] .form-container .form-group input[type=number]::-webkit-outer-spin-button{margin-left:10px}div[data-monster-role=control] .form-container .form-group input[type=radio]{accent-color:var(--monster-bg-color-primary-3)}[data-monster-role=popper]{position:absolute} 
+}`, 0);
 } catch (e) {
-	addAttributeToken(
-		document.getRootNode().querySelector("html"),
-		ATTRIBUTE_ERRORMESSAGE,
-		e + "",
-	);
+  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
 }

source/components/form/field-set.mjs

@@ -268,7 +268,6 @@ class FieldSet extends CustomControl {
 
 function updateExtendedFields() {
     const nodes = getSlottedElements.call(this, "", "extended");
-	console.log(nodes.size);
     if (nodes.size > 0) {
         this[extendedSwitchSymbol].classList.remove("hidden");
     } else {
@@ -346,16 +345,14 @@ function getTemplate() {
                     <monster-toggle-switch></monster-toggle-switch>
                 </div>
             </div>
-            <div>
+            <div data-monster-role="container">
                 <div class="collapse-alignment">
-                    <slot></slot>
+                    <slot part="content"></slot>
                 </div>
                 <monster-collapse data-monster-role="collapse">
-                    <slot name="extended"></slot>
+                    <slot name="extended" part="extended"></slot>
                 </monster-collapse>
             </div>
-
-
         </div>`;
 }
 

source/components/form/form.mjs

@@ -183,7 +183,7 @@ class Form extends CustomElement {
 					errorHandler: undefined,
 				},
 				classes: {
-					form: "monster-form",
+					form: "",
 				},
 			},
 			initOptionsFromArguments.call(this),
@@ -251,7 +251,6 @@ class Form extends CustomElement {
 		initDatasource.call(this);
 		initUpdater.call(this);
 		initObserver.call(this);
-
 		return this;
 	}
 

source/components/layout/style/collapse.pcss

@@ -51,8 +51,6 @@
             }
 
             transition: background 0.4s ease-in-out;
-            
-            
         }
 
     }

test/cases/components/form/form.mjs

@@ -226,7 +226,7 @@ describe('Form', function () {
 
             setTimeout(() => {
                 try {
-                    expect(document.getElementById('mocks')).contain.html('<monster-form data-monster-objectlink="Symbol(@schukai/monster/dom/custom-element@@options-updater-link)"></monster-form>')
+                    expect(document.getElementById('mocks')).contain.html('<monster-form style="display: block;" data-monster-objectlink="Symbol(@schukai/monster/dom/custom-element@@options-updater-link)"></monster-form>')
                     done();
                 } catch (e) {
                     return done(e);

test/cases/components/host/details.mjs

@@ -55,7 +55,7 @@ describe('Details', function () {
             try {
                 
                 expect(document.getElementById('mocks')).contain.html(
-                    '<monster-details id="details1" data-monster-objectlink="Symbol(@schukai/monster/dom/custom-element@@options-updater-link)" data-monster-button-label="Details"></monster-details>')
+                    '<monster-details id="details1" style="display: block;" data-monster-objectlink="Symbol(@schukai/monster/dom/custom-element@@options-updater-link)" data-monster-button-label="Details"></monster-details>')
             } catch (e) {
                 return done(e);
             }

test/cases/components/host/host.mjs

@@ -52,7 +52,7 @@ describe('Host', function () {
 
         setTimeout(() => {
             try {
-                expect(document.getElementById('mocks')).contain.html('<monster-host data-monster-objectlink="Symbol(@schukai/monster/dom/custom-element@@options-updater-link)"></monster-host>')
+                expect(document.getElementById('mocks')).contain.html('<monster-host style="display: block;" data-monster-objectlink="Symbol(@schukai/monster/dom/custom-element@@options-updater-link)"></monster-host>')
             } catch (e) {
                 return done(e);
             }

test/cases/components/host/overlay.mjs

@@ -47,7 +47,7 @@ describe('Overlay', function () {
         setTimeout(() => {
             try {
                 expect(document.getElementById('mocks')).contain.html(
-                    ' <monster-overlay data-monster-objectlink="Symbol(@schukai/monster/dom/custom-element@@options-updater-link)"></monster-overlay>')
+                    ' <monster-overlay style="display: block;" data-monster-objectlink="Symbol(@schukai/monster/dom/custom-element@@options-updater-link)"></monster-overlay>')
             } catch (e) {
                 return done(e);
             }

test/cases/dom/customcontrol.mjs

@@ -138,7 +138,7 @@ describe('DOM', function () {
 
                 expect(document.getElementsByTagName('monster-customcontrol').length).is.equal(1);
                 // no data-monster-objectlink="Symbol(monsterUpdater)" because it has nothing to update 
-                expect(document.getElementById('test1')).contain.html('<monster-customcontrol data-monster-error="Error: html is not set."></monster-customcontrol>')
+                expect(document.getElementById('test1')).contain.html('<monster-customcontrol style="display: block;" data-monster-error="Error: html is not set."></monster-customcontrol>')
             });
         });
 

test/cases/dom/customelement.mjs

@@ -242,7 +242,7 @@ describe('DOM', function () {
                 expect(document.getElementsByTagName('monster-testclass').length).is.equal(1);
                 // no data-monster-objectlink="Symbol(monsterUpdater)" because it has nothing to update
                 // but data-monster-error="Error: html is not set."
-                expect(document.getElementById('test1')).contain.html('<monster-testclass data-monster-error="Error: html is not set."></monster-testclass>');
+                expect(document.getElementById('test1')).contain.html('<monster-testclass style="display: block;" data-monster-error="Error: html is not set."></monster-testclass>');
             });
         });
 
@@ -256,7 +256,7 @@ describe('DOM', function () {
                     try {
                         expect(document.getElementsByTagName('monster-testclass2').length).is.equal(1);
                         expect(document.getElementsByTagName('monster-testclass2').item(0).shadowRoot.innerHTML).is.equal('<h1></h1><article><p>test</p><div id="container"></div></article>');
-                        expect(document.getElementById('test1')).contain.html('<monster-testclass2 data-monster-objectlink="Symbol(' + updaterSymbolKey + ')"></monster-testclass2>');
+                        expect(document.getElementById('test1')).contain.html('<monster-testclass2 style="display: block;" data-monster-objectlink="Symbol(' + updaterSymbolKey + ')"></monster-testclass2>');
                         return done();
                     } catch (e) {
                         done(e);