@schukai/monster 3.85.2 → 3.86.1

package/source/components/form/button-bar.mjs

@@ -124,39 +124,6 @@ const switchElementSymbol = Symbol("switchElement");
  */
 const ATTRIBUTE_POPPER_POSITION = "data-monster-popper-position";
 
-/**
- * This CustomControl creates a button bar.
- *
- * <img src="./images/button-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-tabs />` directly in the HTML or using
- * Javascript via the `document.createElement('monster-tabs');` method.
- *
- * ```html
- * <monster-tabs></monster-tabs>
- * ```
- *
- * Or you can create this CustomControl directly in Javascript:
- *
- * ```js
- * import {ButtonBar} from '@schukai/component-form/source/tab.js';
- * document.createElement('monster-tabs');
- * ```
- *
- * @startuml button-bar.png
- * skinparam monochrome true
- * skinparam shadowing false
- * HTMLElement <|-- CustomElement
- * CustomElement <|-- ButtonBar
- * @enduml
- *
- * @copyright schukai GmbH
- * @summary A configurable tab control
- * @fires monster-fetched
- */
-
 /**
  * A button bar control.
  *
@@ -164,9 +131,8 @@ const ATTRIBUTE_POPPER_POSITION = "data-monster-popper-position";
  *
  * @example /examples/components/form/button-bar-simple
  *
- * @since 3.19.0
  * @copyright schukai GmbH
- * @summary A button bar control
+ * @summary This is a button bar control that can be used to display a set of buttons.
  * @fires monster-fetched
  */
 class ButtonBar extends CustomElement {
@@ -198,7 +164,8 @@ class ButtonBar extends CustomElement {
 			},
 			labels: {},
 			popper: {
-				placement: "bottom",
+				placement: "left",
+				middleware: ["autoPlacement", "shift" ,"offset:5"],
 			},
 		});
 
@@ -448,8 +415,6 @@ function rearrangeButtons() {
 			continue;
 		}
 
-		const buttonLabel = element.innerText;
-
 		if (sum > space) {
 			element.setAttribute("slot", "popper");
 		} else {

package/source/components/form/button.mjs

@@ -47,7 +47,6 @@ export const buttonElementSymbol = Symbol("buttonElement");
  * @example /examples/components/form/button-simple
  * @example /examples/components/form/button-with-click-event
  *
- * @since 1.5.0
  * @copyright schukai GmbH
  * @summary A beautiful button that can make your life easier and also looks good.
  * @fires monster-button-clicked this event is triggered when the button is clicked. It contains the field {button} with the button instance.

package/source/components/form/style/button-bar.pcss

@@ -39,11 +39,12 @@ div[data-monster-role="control"] {
 
     & slot[name=popper] {
         display: flex;
-        flex-direction: row;
+        flex-direction: column;
         flex-wrap: nowrap;
-        align-items: stretch;
+        align-items: center;
         align-content: center;
         justify-content: space-between;
+        gap: 0.4rem;
     }
 
 

package/source/components/form/style/button.pcss

@@ -1,10 +1,15 @@
 @import "../../style/control.pcss";
 @import "../../style/button.pcss";
 @import "../../style/border.pcss";
+@import "../../style/typography.pcss";
 
 :host(monster-button){display:flex;}
 
 [data-monster-role="control"] {
     display: flex;
     align-items: stretch;   
-}
+}
+
+button {
+    width: max-content;
+}

package/source/components/form/style/confirm-button.pcss

@@ -6,7 +6,7 @@
 
 div[data-monster-role="decision"] {
     display: flex;
-    width: 100%;
+    width: max-content;
     align-items: center;
     justify-content: space-evenly;
     margin: 1rem 0 0.4rem 0;
@@ -14,4 +14,9 @@ div[data-monster-role="decision"] {
 
 div[data-monster-role="control"] {
     height: 100%;
+    width: max-content;
+}
+
+button {
+    width: max-content;
 }

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

@@ -53,7 +53,7 @@
 
 slot {
     display: grid;
-    grid-template-columns: 10em 1fr;
+    grid-template-columns: auto 1fr;
     grid-gap: 0.8rem;
     accent-color: var(--monster-color-secondary-2);
 }
@@ -68,13 +68,21 @@ slot {
     border-bottom: thin dotted var(--monster-color-primary-1);
 }
 
+::slotted(hr),
 ::slotted(h1),
 ::slotted(h2),
 ::slotted(h3),
 ::slotted(h4),
 ::slotted(h5),
-::slotted(h6) {
-    grid-column: 1 / 3;
+::slotted(h6) { 
+    grid-column: 1 / -1;
+}
+
+::slotted(hr) {
+    border: none;
+    border-top: thin dotted var(--monster-color-gray-3);
+    margin: 1rem 0;
+    padding: 0;
 }
 
 ::slotted(select) {
@@ -83,16 +91,13 @@ slot {
 
 ::slotted(monster-button),
 ::slotted(monster-state-button),
-::slotted(monster-select),
 ::slotted(monster-api-button),
 ::slotted(monster-state-button),
 ::slotted(monster-datasource-save-button) {
-    grid-column: 2;
 }
 
 ::slotted(input),
 ::slotted(monster-button),
-::slotted(monster-select),
 ::slotted(monster-state-button),
 ::slotted(monster-api-button),
 ::slotted(monster-state-button),
@@ -100,28 +105,16 @@ slot {
 
 }
 
-::slotted(input) {
+::slotted(input) ,
+::slotted(monster-toggle-switch) ,
+::slotted(select) {
     align-self: end;
-
 }
 
 ::slotted(monster-toggle-switch) {
-    width: 4.5rem;
-}
-
-.multiple-columns ::slotted(.span-1) {
-    grid-column: 2 / span 3;
+    width: 3rem;
 }
 
-.multiple-columns ::slotted(.span-1-max) {
-    grid-column: 2 / span 5;
-}
-
-.multiple-columns ::slotted(.span-2) {
-    grid-column: 4 / span 3;
-}
-
-
 @container field-set (max-width: 1200px) {
 
     .multiple-columns {
@@ -129,43 +122,19 @@ slot {
         & slot {
             grid-template-columns: auto 1fr auto 1fr;
         }
-
-        & ::slotted(.span-1) {
-            grid-column: 2 / span 3;
-        }
-
-        & ::slotted(.span-2) {
-            grid-column: unset;
-        }
-
-        & ::slotted(.span-1-max:first-child) {
-            grid-column: 2 / span 3;
-        }        
     }
 
 }
 
-@container field-set (max-width: 800px) {
+@container field-set (max-width: 900px) {
 
     .multiple-columns {
 
         & slot {
             grid-template-columns: auto 1fr;
         }
-        & ::slotted(.span-1) {
-            grid-column: unset;
-        }
-
-        & ::slotted(.span-2) {
-            grid-column: unset;
-        }
-
-        & ::slotted(.span-1-max) {
-            grid-column: unset;
-        }
     }
 
-
 }
 
 @container field-set (max-width: 500px) {
@@ -174,39 +143,55 @@ slot {
         gap: 0;
     }
 
-
     ::slotted(h1),
     ::slotted(h2),
     ::slotted(h3),
     ::slotted(h4),
     ::slotted(h5),
     ::slotted(h6) {
-        grid-column: 1
+        grid-column: 1;
     }
 
-    ::slotted(label),
-    ::slotted(.label) {
-        padding-top: 1rem;
-        border-bottom: none;
+    ::slotted(select) {
+        grid-column: 1;
+    }
+
+    ::slotted(input),
+    ::slotted(monster-toggle-switch),
+    ::slotted(textarea),
+    ::slotted(select) {
+        grid-column: 1;
     }
 
     ::slotted(monster-button),
+    ::slotted(monster-action-button),
     ::slotted(monster-state-button),
     ::slotted(monster-api-button),
     ::slotted(monster-state-button),
     ::slotted(monster-datasource-save-button) {
         grid-column: 1;
+    }    
+
+    ::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;
+    }
 
     .multiple-columns {
         & slot {
             grid-template-columns: 1fr;
         }
 
-        & ::slotted(.span-1-max) {
-            grid-column: unset;
-        }
     }
 
 

package/source/components/form/style/message-state-button.pcss

@@ -1,4 +1,4 @@
-
+@import "../../style/typography.pcss";
 
 
 
@@ -7,4 +7,8 @@
     [data-monster-role=button] {
         width: 100%;
     }
-}
+}
+
+button {
+    width: max-content;
+}

package/source/components/form/style/popper-button.pcss

@@ -1,6 +1,7 @@
 @import "../../style/control.pcss";
 @import "../../style/floating-ui.pcss";
 @import "../../style/button.pcss";
+@import "../../style/typography.pcss";
 
 [data-monster-role=control] {
     position: relative;
@@ -8,9 +9,14 @@
 }
 
 [data-monster-role=button] {
-    width: fill-available;
+    width: max-content;
 }
 
 div[data-monster-role="control"] {
     height: 100%;
+    width: max-content;
+}
+
+button {
+    width: max-content;
 }

package/source/components/form/style/select.pcss

@@ -16,7 +16,7 @@
     width: 100%;
     overflow: auto;
 
-    scrollbar-color: var(--monster-color-primary-1) var(--monster-color-primary-3);
+    scrollbar-color: var(--monster-color-primary-1) var(--monster-bg-color-primary-1);
     scrollbar-width: thin;
 
 }
@@ -231,7 +231,7 @@ div[data-monster-role=selection] {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
-    scrollbar-color: var(--monster-color-primary-1) var(--monster-color-primary-3);
+    scrollbar-color: var(--monster-color-primary-1) var(--monster-bg-color-primary-1);
     scrollbar-width: thin;    
     
 }

package/source/components/form/style/state-button.pcss

@@ -1,12 +1,15 @@
 @import "../../style/control.pcss";
 @import "../../style/border.pcss";
 @import "../../style/color.pcss";
+@import "../../style/typography.pcss";
 
 div[data-monster-role="control"] {
     height: 100%;
 }
 
-
+button {
+    width: max-content;
+}
 
 [data-monster-role=button] {
     display: flex;