refactor: adjustments to the form stylesheets #214

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

 @import "../../style/color.pcss";
 @import "../../style/theme.pcss";
-@import "../../style/display.pcss";
 @import "../../style/border.pcss";
 @import "../../style/control.pcss";
 @import "../../style/badge.pcss";
@@ -10,11 +9,16 @@
 @import "../../style/control.pcss";
 @import "../../style/floating-ui.pcss";
 
-[data-monster-role=control] {
-   & .collapse-alignment {
-      padding: 0 1rem;
-   }
-} 
+[data-monster-role="container"] {
+   container-type: inline-size;
+   container-name: form-set;
+   margin-bottom: 1rem;
+   @mixin paragraph;
+}
+
+.collapse-alignment {
+   padding: 0 1rem;
+}
 
 [data-monster-role=header] {
    display: flex;
@@ -24,9 +28,9 @@
    margin-bottom: 1rem;
    padding-bottom: 0.2rem;
    
-   
    & label {
       padding-right: 0.3rem;
+      @mixin paragraph;
    }
    
    & [data-monster-role=extended-switch] {
@@ -41,3 +45,58 @@
       padding-left: 1rem;
    }
 }
+
+.hidden {
+   display: none !important;   
+}
+
+slot {
+   display: grid;
+   grid-template-columns: 10em 1fr;
+   grid-gap: 0.8rem;
+   accent-color: var(--monster-color-secondary-2);
+}
+
+::slotted(label),
+::slotted(.label)
+{
+   color: var(--monster-color-primary-1);
+   border-bottom: thin dotted var(--monster-color-primary-1);
+}
+
+::slotted(h1),
+::slotted(h2),
+::slotted(h3),
+::slotted(h4),
+::slotted(h5),
+::slotted(h6) {
+   grid-column: 1 / 3;
+}
+
+::slotted(select) {
+   
+}
+
+@container form-set (max-width: 500px) {
+   slot {
+      grid-template-columns: 1fr;
+      gap: 0;
+   }
+
+   ::slotted(h1),
+   ::slotted(h2),
+   ::slotted(h3),
+   ::slotted(h4),
+   ::slotted(h5),
+   ::slotted(h6) {
+      grid-column: 1
+   }
+
+   ::slotted(label),
+   ::slotted(.label)
+   {
+      padding-top: 1rem;
+      border-bottom: none;
+   }      
+}
+

source/components/form/style/form.pcss

@@ -4,7 +4,3 @@
 @import "../../style/typography.pcss";
 @import "../../style/control.pcss";
 
-
-[data-monster-role="control"] {
-    position: relative;
-}
\ No newline at end of file

source/components/form/style/select.pcss

@@ -60,10 +60,11 @@ div[data-monster-role="control"] {
     accent-color: var(--monster-color-secondary-2);
 
     border-image: initial;
-    border-color: var(--monster-bg-color-primary-2);
-    border-radius: var(--monster-border-radius);
-    border-style: var(--monster-border-style);
-    border-width: var(--monster-border-width);
+
+    border-width: var(--monster-theme-control-border-width);
+    border-radius: var(--monster-theme-control-border-radius);
+    border-style: var(--monster-theme-control-border-style);
+    border-color: var(--monster-theme-control-border-color);
 
     background-color: var(--monster-bg-color-primary-1);
     color: var(--monster-color-primary-1);

source/components/style/form.pcss

-@import "mixin/form.pcss";
+@import "mixin/hover.pcss";
+
+progress,
+meter {
+    accent-color: var(--monster-color-secondary-2);
+    box-sizing: border-box;
+    color: var(--monster-color-primary-1);
+    background-color: var(--monster-bg-color-primary-1);
+    font-family: inherit;
+    font-size: 100%;
+    margin: 0;
+
+    outline: none;
+
+    border-width: var(--monster-theme-control-border-width);
+    border-radius: var(--monster-theme-control-border-radius);
+    border-style: var(--monster-theme-control-border-style);
+    border-color: var(--monster-theme-control-border-color);
+
+}
+
+input,
+select,
+textarea {
+    box-sizing: border-box;
+    accent-color: var(--monster-color-secondary-2);
+    color: var(--monster-color-primary-1);
+    background-color: var(--monster-bg-color-primary-1);
+    font-family: inherit;
+    font-size: 100%;
+    padding: 0.4rem 0.6rem;
+    margin: 0;
+    outline: none;
+
+    border-width: var(--monster-theme-control-border-width);
+    border-radius: var(--monster-theme-control-border-radius);
+    border-style: var(--monster-theme-control-border-style);
+    border-color: var(--monster-theme-control-border-color);
+
+    height: fit-content;
 
-.monster-form {
-    @mixin form;
 }
+
+textarea {
+    resize: vertical;
+    min-height: 6rem;
+}
+
+input[type="color"] {
+    padding: 0.1rem;
+    margin: 0;
+    height: 2rem;
+    width: 2rem;
+}
+
+input:hover:not([type="radio"]):not([type="checkbox"]):not([type="range"]),
+select:hover,
+textarea:hover {
+    @mixin box-hover;
+}
+
+
+input:focus,
+select:focus,
+textarea:focus {
+    outline: 1px dashed var(--monster-color-selection-3);
+    outline-offset: 3px;
+}
\ No newline at end of file

source/components/style/mixin/form.pcss

-@import "hover.pcss";
-
-@define-mixin form {
-
-    box-sizing: border-box;
-    display: flex;
-    flex-wrap: nowrap;
-    position: relative;
-    flex-direction: column;
-    align-content: flex-start;
-    align-items: flex-start;
-    accent-color: var(--monster-color-secondary-2);
-
-    & label {
-        color: var(--monster-color-primary-1);
-        background-color: var(--monster-bg-color-primary-1);
-        display: grid;
-    }
-
-    & label:has(input[type="radio"]) {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
-        justify-content: flex-start;
-
-        & input {
-            margin-right: 0.4rem;
-            margin-left: 0.4rem;
-        }
-    }
-
-    & label:has(input[type="radio"]) ~ label:has(input[type="radio"]) {
-        margin-top: 0.2rem;
-    }
-
-    & label:has(input[type="checkbox"]) {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
-        justify-content: flex-start;
-
-        & input {
-            margin-right: 0.4rem;
-            margin-left: 0.4rem;
-        }
-
-    }
-
-    & label:has(input[type="checkbox"]) ~ label:has(input[type="checkbox"]) {
-        margin-top: 0.2rem;
-    }
-
-    & label ~ label {
-        margin-top: 1rem;
-    }
-
-    & label ~ fieldset {
-        margin-top: 1rem;
-    }
-
-    & button,
-    & input,
-    & select,
-    & textarea {
-        font-family: inherit;
-        font-size: 100%;
-        padding: 0.4rem 0.6rem;
-        margin: 0;
-        outline: none;
-        box-sizing: border-box;
-        accent-color: var(--monster-color-secondary-2);
-
-        color: var(--monster-color-primary-1);
-        background-color: var(--monster-bg-color-primary-1);
-
-    }
-
-
-    & button {
-        color: var(--monster-color-tertiary-1);
-        background-color: var(--monster-bg-color-tertiary-1);
-
-        /** monster-border-primary-1 */
-        border-width: var(--monster-border-width);
-        border-radius: var(--monster-border-radius);
-        border-style: var(--monster-border-style);
-        border-color: var(--monster-bg-color-primary-3);
-    }
-
-    & option:checked {
-        background-color: var(--monster-bg-color-primary-3);
-        color: var(--monster-color-primary-3);
-    }
-
-    & option:focus {
-        background-color: var(--monster-bg-color-primary-3);
-        color: var(--monster-color-primary-3);
-    }
-
-    & option:hover {
-        background-color: var(--monster-bg-color-primary-2);
-        color: var(--monster-color-primary-2);
-    }
-
-    & input,
-    & select,
-    & textarea {
-        border: 0;
-        border-bottom-width: thin;
-        border-radius: var(--monster-border-radius);
-        border-bottom-style: var(--monster-border-style);
-        border-bottom-color: var(--monster-bg-color-primary-1);
-    }
-
-
-    & input,
-    & select,
-    & textarea {
-        border-width: thin;
-        border-radius: var(--monster-border-radius);
-        border-style: var(--monster-border-style);
-        border-color: var(--monster-bg-color-primary-2);
-    }
-
-
-    & button,
-    & input:not([type="radio"]):not([type="checkbox"]),
-    & select,
-    & textarea {
-        width: 100%;
-    }
-
-    & label {
-        width: 100%;
-
-        & input:not([type="radio"]):not([type="checkbox"]),
-        & select,
-        & textarea {
-            width: 100%;
-            margin-top: 0.2rem;
-        }
-
-    }
-
-    & label + input:not([type="radio"]):not([type="checkbox"]),
-    & label + select,
-    & label + textarea {
-        width: 100%;
-        margin-top: 0.2rem;
-    }
-
-
-    & fieldset {
-        margin: 0;
-        position: relative;
-        padding: 2.5rem 2rem 2rem;
-        border: 1px dotted var(--monster-bg-color-primary-4);
-
-        background-color: var(--monster-bg-color-primary-1);
-        color: var(--monster-color-primary-1);
-
-        box-sizing: border-box;
-        width: 100%;
-        outline: none;
-
-        & legend {
-            position: absolute;
-            top: 0;
-            right: 0;
-            padding: 0.1rem 2rem 0.2rem 0.5rem;
-            max-width: 95%;
-            text-align: right;
-            text-transform: uppercase;
-            text-overflow: ellipsis;
-            font-size: 0.8rem;
-            overflow: hidden;
-            white-space: nowrap;
-        }
-
-        & label {
-        }
-
-    }
-
-    & fieldset ~ fieldset {
-        margin-top: 1rem;
-    }
-
-    & button {
-        margin: 0.2rem 0;
-    }
-
-    & button:first-of-type {
-        margin-top: 1rem;
-    }
-
-    & button:last-of-type {
-        margin-bottom: 1rem;
-    }
-
-    & input:focus-visible {
-        outline: none;
-    }
-
-
-    & button:focus,
-    & input:focus,
-    & select:focus,
-    & textarea:focus {
-        outline: 1px dashed var(--monster-color-selection-4);
-        outline-offset: 2px;
-    }
-
-
-    @media (prefers-color-scheme: light) {
-        & button,
-        & input,
-        & select,
-        & textarea {
-            background-color: var(--monster-bg-color-primary-1);
-            color: var(--monster-color-primary-1);
-            border-color: var(--monster-bg-color-primary-4);
-        }
-
-        & button:focus,
-        & input:focus,
-        & select:focus,
-        & textarea:focus {
-            outline: 1px dashed var(--monster-color-selection-3);
-        }        
-        
-    }
-
-    & button:hover,
-    & input:hover:not([type="radio"]):not([type="checkbox"]):not([type="range"]),
-    & select:hover,
-    & textarea:hover {
-        @mixin box-hover;
-    }
-
-
-}
\ No newline at end of file

source/components/style/mixin/property.pcss

@@ -317,10 +317,17 @@
 
     --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-control-border-width: 2px;
+    --monster-theme-control-border-style: solid;
+    --monster-theme-control-border-radius: 0;
+    --monster-theme-control-border-color: var(--monster-color-primary-1);
+
+
+
+
     @media (prefers-color-scheme: dark) {
         --monster-theme-control-bg-color: var(--monster-color-gray-5);
         --monster-theme-control-color: var(--monster-color-gray-1);

source/components/style/typography.pcss

@@ -43,28 +43,20 @@ p {
 
 /*noinspection ALL*/
 @for $i from 1 to 6 { 
-    h$(i) { @mixin h$(i) {
-}
-}
-.monster-h$(i) {
-@mixin h$(i) {
-}
-}
+    h$(i) { @mixin h$(i) {} }
+    .monster-h$(i) {@mixin h$(i) {}}
 }
 
 /*noinspection ALL*/
 @for $i from 1 to 6 {
-    p+h$(i) { margin-top: calc(calc(6 - $(i)) * 0.75rem);
-}
+    p+h$(i) { margin-top: calc(calc(6 - $(i)) * 0.75rem);  }
 }
 
 /*noinspection ALL*/
 @for $i from 1 to 6 {
-    div+h$(i) { margin-top: 0;
-}
+    div+h$(i) { margin-top: 0; }
 }
 
-
 /*noinspection CssInvalidPropertyValue*/
 .deco {
     color: var(--monster-color-secondary-1);

source/components/stylesheet/form.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";
+import {addAttributeToken} from "../../dom/attributes.mjs";
+import {ATTRIBUTE_ERRORMESSAGE} from "../../dom/constants.mjs";
 
-export { FormStyleSheet };
+export {FormStyleSheet}
 
 /**
  * @private
@@ -24,17 +22,10 @@ export { FormStyleSheet };
 const FormStyleSheet = new CSSStyleSheet();
 
 try {
-	FormStyleSheet.insertRule(
-		`
+  FormStyleSheet.insertRule(`
 @layer form { 
-.monster-form{accent-color:var(--monster-color-secondary-2);align-content:flex-start;align-items:flex-start;box-sizing:border-box;display:flex;flex-direction:column;flex-wrap:nowrap;position:relative}.monster-form label{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1);display:grid}.monster-form label:has(input[type=radio]){display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start}.monster-form label:has(input[type=radio]) input{margin-left:.4rem;margin-right:.4rem}.monster-form label:has(input[type=radio])~label:has(input[type=radio]){margin-top:.2rem}.monster-form label:has(input[type=checkbox]){display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start}.monster-form label:has(input[type=checkbox]) input{margin-left:.4rem;margin-right:.4rem}.monster-form label:has(input[type=checkbox])~label:has(input[type=checkbox]){margin-top:.2rem}.monster-form label~fieldset,.monster-form label~label{margin-top:1rem}.monster-form button,.monster-form input,.monster-form select,.monster-form textarea{accent-color:var(--monster-color-secondary-2);background-color:var(--monster-bg-color-primary-1);box-sizing:border-box;color:var(--monster-color-primary-1);font-family:inherit;font-size:100%;margin:0;outline:none;padding:.4rem .6rem}.monster-form button{background-color:var(--monster-bg-color-tertiary-1);border-color:var(--monster-bg-color-primary-3);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-color-tertiary-1)}.monster-form option:checked,.monster-form option:focus{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-form option:hover{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}.monster-form input,.monster-form select,.monster-form textarea{border:0;border-bottom:thin var(--monster-border-style) var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-2);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:thin}.monster-form button,.monster-form input:not([type=radio]):not([type=checkbox]),.monster-form label,.monster-form select,.monster-form textarea{width:100%}.monster-form label input:not([type=radio]):not([type=checkbox]),.monster-form label select,.monster-form label textarea,.monster-form label+input:not([type=radio]):not([type=checkbox]),.monster-form label+select,.monster-form label+textarea{margin-top:.2rem;width:100%}.monster-form fieldset{background-color:var(--monster-bg-color-primary-1);border:1px dotted var(--monster-bg-color-primary-4);box-sizing:border-box;color:var(--monster-color-primary-1);margin:0;outline:none;padding:2.5rem 2rem 2rem;position:relative;width:100%}.monster-form fieldset legend{font-size:.8rem;max-width:95%;overflow:hidden;padding:.1rem 2rem .2rem .5rem;position:absolute;right:0;text-align:right;text-overflow:ellipsis;text-transform:uppercase;top:0;white-space:nowrap}.monster-form fieldset~fieldset{margin-top:1rem}.monster-form button{margin:.2rem 0}.monster-form button:first-of-type{margin-top:1rem}.monster-form button:last-of-type{margin-bottom:1rem}.monster-form input:focus-visible{outline:none}.monster-form button:focus,.monster-form input:focus,.monster-form select:focus,.monster-form textarea:focus{outline:1px dashed var(--monster-color-selection-4);outline-offset:2px}@media (prefers-color-scheme:light){.monster-form button,.monster-form input,.monster-form select,.monster-form textarea{background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-1)}.monster-form button:focus,.monster-form input:focus,.monster-form select:focus,.monster-form textarea:focus{outline:1px dashed var(--monster-color-selection-3)}}.monster-form button:hover,.monster-form input:hover:not([type=radio]):not([type=checkbox]):not([type=range]),.monster-form select:hover,.monster-form textarea:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s} 
-}`,
-		0,
-	);
+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} 
+}`, 0);
 } catch (e) {
-	addAttributeToken(
-		document.getRootNode().querySelector("html"),
-		ATTRIBUTE_ERRORMESSAGE,
-		e + "",
-	);
+  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
 }

source/components/stylesheet/mixin/form.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";
+import {addAttributeToken} from "../../../dom/attributes.mjs";
+import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
 
-export { FormStyleSheet };
+export {FormStyleSheet}
 
 /**
  * @private
@@ -24,17 +22,10 @@ export { FormStyleSheet };
 const FormStyleSheet = new CSSStyleSheet();
 
 try {
-	FormStyleSheet.insertRule(
-		`
+  FormStyleSheet.insertRule(`
 @layer form { 
  
-}`,
-		0,
-	);
+}`, 0);
 } catch (e) {
-	addAttributeToken(
-		document.getRootNode().querySelector("html"),
-		ATTRIBUTE_ERRORMESSAGE,
-		e + "",
-	);
+  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
 }

source/components/stylesheet/mixin/property.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 { PropertyStyleSheet };
+export {PropertyStyleSheet}
 
 /**
  * @private
@@ -22,17 +22,10 @@ export { PropertyStyleSheet };
 const PropertyStyleSheet = new CSSStyleSheet();
 
 try {
-	PropertyStyleSheet.insertRule(
-		`
+  PropertyStyleSheet.insertRule(`
 @layer property { 
  
-}`,
-		0,
-	);
+}`, 0);
 } catch (e) {
-	addAttributeToken(
-		document.getRootNode().querySelector("html"),
-		ATTRIBUTE_ERRORMESSAGE,
-		e + "",
-	);
+  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
 }