refactor: paragraph mixin without text-alignment #220

source/components/datatable/style/datatable.pcss

@@ -31,7 +31,7 @@
     padding: 20px;
     box-sizing: border-box;
     min-width: fit-content;
-    @mixin paragraph;
+    @mixin text;
 
     & .bar {
         display: flex;
@@ -60,12 +60,12 @@
 
 [data-monster-role=datatable] {
     display: grid;
-    @mixin paragraph;
+    @mixin text;
     box-sizing: border-box;
 
     & > div {
         padding: 0.4rem 0.2rem;
-        @mixin paragraph;
+        @mixin text;
         display: flex;
         align-items: center;
         justify-content: flex-start;
@@ -107,7 +107,9 @@
     }
 
     & .monster-form {
-        @mixin form;
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
     }
 
 }
@@ -135,7 +137,7 @@
     display: grid;
 
     & > div {
-        @mixin paragraph;
+        @mixin text;
         font-weight: bold;
         padding: 0.3rem 0.2rem;
         display: flex;

source/components/datatable/style/embedded-pagination.pcss

@@ -8,7 +8,7 @@
 @import "../../style/property.pcss";
 
 [data-monster-role=pagination] {
-    @mixin paragraph;
+    @mixin text;
     display: flex;
     justify-content: center;
     box-sizing: border-box;

source/components/datatable/style/pagination.pcss

@@ -10,7 +10,7 @@
 
 
 [data-monster-role=pagination] {
-    @mixin paragraph;
+    @mixin text;
     display: flex;
     justify-content: center;
     box-sizing: border-box;

source/components/datatable/stylesheet/datasource.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,8 +8,6 @@
  * 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";

source/components/datatable/stylesheet/filter-button.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,8 +8,6 @@
  * 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";

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

@@ -10,10 +10,10 @@
  * For more information about purchasing a commercial license, please contact schukai GmbH.
  */
 
-import {addAttributeToken} from "../../../dom/attributes.mjs";
-import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
+import { addAttributeToken } from "../../../dom/attributes.mjs";
+import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
 
-export {FilterControlsDefaultsStyleSheet}
+export { FilterControlsDefaultsStyleSheet };
 
 /**
  * @private
@@ -22,10 +22,17 @@ 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}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);
+[data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}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/datatable/stylesheet/filter-date-range.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,8 +8,6 @@
  * 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";

source/components/datatable/stylesheet/filter-range.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,8 +8,6 @@
  * 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";

source/components/form/style/field-set.pcss

@@ -13,7 +13,7 @@
    container-type: inline-size;
    container-name: form-set;
    margin-bottom: 1rem;
-   @mixin paragraph;
+   @mixin text;
 }
 
 .collapse-alignment {
@@ -30,7 +30,7 @@
    
    & label {
       padding-right: 0.3rem;
-      @mixin paragraph;
+      @mixin text;
    }
    
    & [data-monster-role=extended-switch] {

source/components/form/style/form.pcss

@@ -10,3 +10,9 @@
 }
 
 
+:host {
+    display: block;
+    box-sizing: border-box;
+}
+
+