@schukai/monster 4.148.8 → 4.149.0

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

@@ -6,13 +6,49 @@
 @import "../../style/floating-ui.pcss";
 
 :host {
-    --monster-control-bar-height: 2.5rem;
+    --monster-control-bar-height: var(
+        --monster-control-min-block-size,
+        2.5rem
+    );
 }
 
 div[data-monster-role="control"] {
     position: relative;
     height: 100%;
 
+    & > [data-monster-role=popper] {
+        padding: var(--monster-action-menu-padding, 1.1em);
+        min-inline-size: var(--monster-action-menu-min-inline-size, auto);
+        background: var(
+            --monster-action-menu-background-color,
+            var(--monster-bg-color-primary-1)
+        );
+        color: var(
+            --monster-action-menu-color,
+            var(--monster-color-primary-1)
+        );
+        border-width: var(
+            --monster-action-menu-border-width,
+            var(--monster-border-width)
+        );
+        border-style: var(
+            --monster-action-menu-border-style,
+            var(--monster-border-style)
+        );
+        border-color: var(
+            --monster-action-menu-border-color,
+            var(--monster-bg-color-primary-4)
+        );
+        border-radius: var(
+            --monster-action-menu-border-radius,
+            var(--monster-border-radius)
+        );
+        box-shadow: var(
+            --monster-action-menu-box-shadow,
+            var(--monster-box-shadow-1)
+        );
+    }
+
     & [data-monster-role=control-bar],
     & [data-monster-role=button-bar] {
         display: flex;
@@ -30,6 +66,12 @@ div[data-monster-role="control"] {
             justify-content: center;
         }
 
+        & > slot:not([name]) {
+            display: flex;
+            flex: var(--monster-control-bar-slot-flex, 0 1 auto);
+            min-width: 0;
+        }
+
         & :not(slot) {
             display: flex;
         }
@@ -37,42 +79,48 @@ div[data-monster-role="control"] {
         & [data-monster-role=popper-nav] {
             display: flex;
             align-items: stretch;
+            flex: 0 0 var(--monster-control-bar-height);
             height: var(--monster-control-bar-height);
+            min-width: var(--monster-control-bar-height);
             min-height: var(--monster-control-bar-height);
         }
 
         & [data-monster-role=switch] {
+            --monster-control-min-block-size: var(--monster-control-bar-height);
             display: flex;
             height: var(--monster-control-bar-height);
+            min-width: var(--monster-control-bar-height);
             min-height: var(--monster-control-bar-height);
+            width: var(--monster-control-bar-height);
 
             &.hidden {
                 display: none;
             }
         }
 
-        & ::slotted(*) {
+        & > slot:not([name])::slotted(*) {
+            --monster-control-min-block-size: var(--monster-control-bar-height);
             display: flex;
             box-sizing: border-box;
-            flex: 0 0 auto !important;
+            flex: var(--monster-control-bar-item-flex, 0 0 auto) !important;
             align-self: stretch;
             height: var(--monster-control-bar-height);
             min-height: var(--monster-control-bar-height);
             min-width: 0;
         }
 
-        & ::slotted(form),
-        & ::slotted(div),
-        & ::slotted(section) {
+        & > slot:not([name])::slotted(form),
+        & > slot:not([name])::slotted(div),
+        & > slot:not([name])::slotted(section) {
             flex-direction: row;
             align-items: stretch;
             gap: 0;
         }
 
-        & ::slotted(input),
-        & ::slotted(select),
-        & ::slotted(textarea),
-        & ::slotted(button) {
+        & > slot:not([name])::slotted(input),
+        & > slot:not([name])::slotted(select),
+        & > slot:not([name])::slotted(textarea),
+        & > slot:not([name])::slotted(button) {
             appearance: none;
             box-sizing: border-box;
             border-width: var(--monster-theme-control-border-width, var(--monster-border-width));
@@ -86,12 +134,13 @@ div[data-monster-role="control"] {
             inline-size: auto !important;
         }
 
-        & ::slotted(monster-select) {
+        & > slot:not([name])::slotted(monster-select) {
             --monster-select-container-align-self: stretch;
             --monster-select-container-block-size: 100%;
             --monster-select-container-overflow: hidden;
             --monster-select-selection-flex-wrap: nowrap;
             --monster-select-selection-margin: 0;
+            --monster-select-control-min-block-size: var(--monster-control-bar-height);
             --monster-select-control-padding: 0.4rem 0.6rem;
             width: auto !important;
             inline-size: auto !important;
@@ -100,22 +149,40 @@ div[data-monster-role="control"] {
             min-width: var(--monster-control-bar-select-min-inline-size, 12rem) !important;
         }
 
-        & ::slotted(monster-button),
-        & ::slotted(monster-popper-button) {
-            --monster-button-control-inline-size: max-content;
-            --monster-button-inline-size: max-content;
-            --monster-popper-button-control-inline-size: max-content;
-            --monster-popper-button-inline-size: max-content;
-            width: max-content !important;
-            inline-size: max-content !important;
+        & > slot:not([name])::slotted(monster-button),
+        & > slot:not([name])::slotted(monster-popper-button) {
+            --monster-button-control-inline-size: var(
+                --monster-control-bar-button-inline-size,
+                max-content
+            );
+            --monster-button-inline-size: var(
+                --monster-control-bar-button-inline-size,
+                max-content
+            );
+            --monster-popper-button-control-inline-size: var(
+                --monster-control-bar-button-inline-size,
+                max-content
+            );
+            --monster-popper-button-inline-size: var(
+                --monster-control-bar-button-inline-size,
+                max-content
+            );
+            width: var(
+                --monster-control-bar-button-inline-size,
+                max-content
+            ) !important;
+            inline-size: var(
+                --monster-control-bar-button-inline-size,
+                max-content
+            ) !important;
             max-inline-size: 100%;
         }
 
-        & ::slotted(monster-input-group) {
+        & > slot:not([name])::slotted(monster-input-group) {
             width: max-content;
         }
 
-        & ::slotted(monster-control-bar-spacer) {
+        & > slot:not([name])::slotted(monster-control-bar-spacer) {
             --monster-control-bar-spacer-inline-size: 0.8rem;
             --monster-control-bar-spacer-block-size: var(--monster-control-bar-height);
             --monster-control-bar-spacer-line-inline-size: var(--monster-border-width);
@@ -131,14 +198,104 @@ div[data-monster-role="control"] {
         align-items: stretch;
         align-content: stretch;
         justify-content: flex-start;
-        gap: 0;
+        gap: var(--monster-action-menu-gap, 0);
 
         &::slotted(*) {
+            --monster-control-min-block-size: var(
+                --monster-action-menu-item-min-block-size,
+                var(--monster-control-bar-height)
+            );
+            --monster-button-min-block-size: var(
+                --monster-action-menu-item-min-block-size,
+                var(--monster-control-bar-height)
+            );
+            --monster-button-padding: var(
+                --monster-action-menu-item-padding,
+                var(--monster-control-padding-block, .375rem)
+                var(--monster-control-padding-inline, .75rem)
+            );
+            --monster-button-color: var(
+                --monster-action-menu-item-color,
+                var(--monster-color-primary-1)
+            );
+            --monster-button-background-color: var(
+                --monster-action-menu-item-background-color,
+                transparent
+            );
+            --monster-button-border-width: var(
+                --monster-action-menu-item-border-width,
+                0
+            );
+            --monster-button-border-style: var(
+                --monster-action-menu-item-border-style,
+                solid
+            );
+            --monster-button-border-color: var(
+                --monster-action-menu-item-border-color,
+                transparent
+            );
+            --monster-button-border-radius: var(
+                --monster-action-menu-item-border-radius,
+                var(--monster-border-radius)
+            );
+            --monster-button-box-shadow: var(
+                --monster-action-menu-item-box-shadow,
+                none
+            );
+            --monster-button-justify-content: var(
+                --monster-action-menu-item-justify-content,
+                flex-start
+            );
+            --monster-button-text-align: var(
+                --monster-action-menu-item-text-align,
+                left
+            );
+            --monster-focus-ring-offset: var(
+                --monster-action-menu-item-focus-outline-offset,
+                -2px
+            );
+            --monster-state-button-label-justify-content: var(
+                --monster-action-menu-item-justify-content,
+                flex-start
+            );
+            --monster-state-button-justify-content: var(
+                --monster-action-menu-item-justify-content,
+                flex-start
+            );
+            --monster-button-control-inline-size: 100%;
+            --monster-button-inline-size: 100%;
+            --monster-popper-button-control-inline-size: 100%;
+            --monster-popper-button-inline-size: 100%;
             display: flex;
             box-sizing: border-box;
-            width: fill-available;
-            height: var(--monster-control-bar-height);
-            min-height: var(--monster-control-bar-height);
+            align-self: stretch;
+            flex: 0 0 auto !important;
+            width: fill-available !important;
+            inline-size: 100% !important;
+            height: auto !important;
+            min-height: var(
+                --monster-action-menu-item-min-block-size,
+                var(--monster-control-bar-height)
+            ) !important;
+        }
+
+        &::slotted(*:is(:hover, :active)) {
+            --monster-button-color: var(
+                --monster-action-menu-item-hover-color,
+                var(--monster-color-primary-1)
+            );
+            --monster-button-background-color: var(
+                --monster-action-menu-item-hover-background-color,
+                var(--monster-bg-color-primary-2)
+            );
+            --monster-button-border-color: var(
+                --monster-action-menu-item-hover-border-color,
+                transparent
+            );
+            --monster-box-shadow-2: var(
+                --monster-action-menu-item-hover-box-shadow,
+                none
+            );
         }
 
         &::slotted(form),
@@ -160,16 +317,84 @@ div[data-monster-role="control"] {
             border-style: var(--monster-theme-control-border-style, var(--monster-border-style));
             border-color: var(--monster-theme-control-border-color, var(--monster-bg-color-primary-4));
             line-height: 1.5;
-            height: var(--monster-control-bar-height);
+            min-height: var(
+                --monster-action-menu-item-min-block-size,
+                var(--monster-control-bar-height)
+            );
             padding: var(--monster-select-control-padding, 0.4rem 0.6rem);
         }
 
+        &::slotted(button) {
+            inline-size: 100%;
+            justify-content: var(
+                --monster-action-menu-item-justify-content,
+                flex-start
+            );
+            padding: var(
+                --monster-action-menu-item-padding,
+                var(--monster-control-padding-block, .375rem)
+                var(--monster-control-padding-inline, .75rem)
+            );
+            background: var(
+                --monster-action-menu-item-background-color,
+                transparent
+            );
+            color: var(
+                --monster-action-menu-item-color,
+                var(--monster-color-primary-1)
+            );
+            border-width: var(
+                --monster-action-menu-item-border-width,
+                0
+            );
+            border-style: var(
+                --monster-action-menu-item-border-style,
+                solid
+            );
+            border-color: var(
+                --monster-action-menu-item-border-color,
+                transparent
+            );
+            border-radius: var(
+                --monster-action-menu-item-border-radius,
+                var(--monster-border-radius)
+            );
+            box-shadow: var(
+                --monster-action-menu-item-box-shadow,
+                none
+            );
+            text-align: var(
+                --monster-action-menu-item-text-align,
+                left
+            );
+        }
+
+        &::slotted(button:hover) {
+            background: var(
+                --monster-action-menu-item-hover-background-color,
+                var(--monster-bg-color-primary-2)
+            );
+            color: var(
+                --monster-action-menu-item-hover-color,
+                var(--monster-color-primary-1)
+            );
+            border-color: var(
+                --monster-action-menu-item-hover-border-color,
+                transparent
+            );
+            box-shadow: var(
+                --monster-action-menu-item-hover-box-shadow,
+                none
+            );
+        }
+
         &::slotted(monster-select) {
             --monster-select-container-align-self: stretch;
             --monster-select-container-block-size: 100%;
             --monster-select-container-overflow: hidden;
             --monster-select-selection-flex-wrap: nowrap;
             --monster-select-selection-margin: 0;
+            --monster-select-control-min-block-size: var(--monster-control-bar-height);
             --monster-select-control-padding: 0.4rem 0.6rem;
         }
 
@@ -182,6 +407,9 @@ div[data-monster-role="control"] {
             --monster-control-bar-spacer-block-size: 0.8rem;
             --monster-control-bar-spacer-line-inline-size: calc(100% - 1rem);
             --monster-control-bar-spacer-line-block-size: var(--monster-border-width);
+            flex-basis: var(--monster-control-bar-spacer-block-size) !important;
+            height: var(--monster-control-bar-spacer-block-size) !important;
+            min-height: var(--monster-control-bar-spacer-block-size) !important;
         }
 
     }

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

@@ -24,15 +24,16 @@
 }
 
 [data-monster-role="digits"] > input {
-    width: 2rem;
+    flex: 0 0 var(--monster-control-min-block-size, 2.5rem);
+    inline-size: var(--monster-control-min-block-size, 2.5rem);
+    min-inline-size: var(--monster-control-min-block-size, 2.5rem);
+    block-size: var(--monster-control-min-block-size, 2.5rem);
+    min-block-size: var(--monster-control-min-block-size, 2.5rem);
+    padding: 0;
     text-align: center;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    display: block;
 }
 
 .invalid {
     outline-color: var(--monster-color-error-2) !important;
 }
-
-

package/source/components/form/style/input-group.pcss

@@ -9,10 +9,48 @@
     display: flex;
     box-sizing: border-box;
     height: 100%;
+    min-block-size: var(--monster-control-min-block-size, auto);
     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);
+    color: var(--monster-input-group-color, inherit);
+    background-color: var(--monster-input-group-background-color, transparent);
+    box-shadow: var(--monster-input-group-box-shadow, none);
+    transition:
+        background-color
+        var(--monster-input-group-hover-duration, 140ms)
+        var(--monster-input-group-hover-timing, ease-out),
+        border-color
+        var(--monster-input-group-hover-duration, 140ms)
+        var(--monster-input-group-hover-timing, ease-out);
+}
+
+:host(:hover) {
+    color: var(
+        --monster-input-group-hover-color,
+        var(--monster-input-group-color, inherit)
+    );
+    background-color: var(
+        --monster-input-group-hover-background-color,
+        var(--monster-input-group-background-color, transparent)
+    );
+    border-color: var(
+        --monster-input-group-hover-border-color,
+        var(--monster-theme-control-border-color)
+    );
+    box-shadow: var(
+        --monster-input-group-hover-box-shadow,
+        var(--monster-input-group-box-shadow, none)
+    );
+}
+
+:host(:focus-within) {
+    outline:
+        var(--monster-focus-ring-width, 2px)
+        var(--monster-focus-ring-style, solid)
+        var(--monster-focus-ring-color, var(--monster-color-selection-4));
+    outline-offset: var(--monster-focus-ring-offset, 2px);
 }
 
 [data-monster-role="control"] {
@@ -35,15 +73,25 @@
     ::slotted(textarea),
     ::slotted(button) {
         height: auto;
+        min-block-size: 0 !important;
         border: none;
     }
 
+    ::slotted(input:focus-visible),
+    ::slotted(select:focus-visible),
+    ::slotted(textarea:focus-visible),
+    ::slotted(button:focus-visible) {
+        outline: none !important;
+    }
+
     ::slotted(svg) {
+        box-sizing: content-box !important;
+        flex: 0 0 auto;
+        height: 1.1rem;
         width: 1.1rem;
         padding: 0 0.5rem 0 0.5rem;
     }
 
-    ::slotted(input:focus-visible),
     ::slotted(input) {
         outline: none;
         position: relative;
@@ -53,7 +101,23 @@
         display: block;
         appearance: none;
         border: none !important;
+        background-color: var(
+            --monster-input-group-field-background-color,
+            var(--monster-bg-color-primary-1)
+        ) !important;
         padding: 0.5rem 0.5rem 0.5rem 0.5rem;
     }
 
+    ::slotted(input:hover) {
+        background-color: var(
+            --monster-input-group-field-hover-background-color,
+            var(
+                --monster-input-group-field-background-color,
+                var(--monster-bg-color-primary-1)
+            )
+        ) !important;
+        box-shadow: none !important;
+        transition: none !important;
+    }
+
 }

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

@@ -26,7 +26,7 @@
 }
 
 monster-message-state-button {
-    margin-top: 2.9rem;
+    margin-top: 1.5rem;
 }
 
 .hidden {

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

@@ -20,6 +20,14 @@
         justify-content: space-between;
     }
 
+    ::slotted([data-monster-field-set-choice-label]) {
+        align-items: center;
+        justify-content: flex-start;
+        min-block-size: var(--monster-control-min-block-size, 2.75rem);
+        text-align: start;
+        cursor: pointer;
+    }
+
     ::slotted(hr),
     ::slotted(h1),
     ::slotted(h2),

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

@@ -3,6 +3,23 @@
 @import "../../style/border.pcss";
 @import "../../style/typography.pcss";
 
+:host {
+    display: block;
+    box-sizing: border-box;
+    block-size: var(
+        --monster-password-control-block-size,
+        var(--monster-control-min-block-size, 2.5rem)
+    );
+    min-block-size: var(
+        --monster-password-control-block-size,
+        var(--monster-control-min-block-size, 2.5rem)
+    );
+}
+
+[data-monster-role="control"],
+monster-input-group {
+    block-size: 100%;
+}
 
 input:focus-visible,
 input {
@@ -11,8 +28,15 @@ input {
     background-color: var(--monster-bg-color-primary-1);
 }
 
+monster-input-group {
+    background-color: var(
+        --monster-theme-control-bg-color,
+        var(--monster-bg-color-primary-1)
+    );
+    overflow: hidden;
+}
+
 svg {
     cursor: pointer;
     stroke: var(--monster-color-primary-1);
 }
-

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

@@ -1,4 +1,5 @@
 @import "../../style/control.pcss";
+@import "../../style/form.pcss";
 @import "../../style/floating-ui.pcss";
 @import "../../style/button.pcss";
 @import "../../style/typography.pcss";

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

@@ -2,10 +2,11 @@
 
 :host {
   /* Size tokens */
-  --qty-height: 40px;
+  --qty-height: var(--monster-control-min-block-size, 40px);
+  --qty-button-size: max(1.5rem, calc(var(--qty-height) - var(--monster-space-4)));
   --qty-radius: 0; 
   --qty-gap: var(--monster-space-4);
-  --qty-pad-x: var(--monster-space-4);
+  --qty-pad-x: var(--monster-space-2);
 
   /* Anbindung an eure zentralen Tokens */
   --qty-bg: var(--monster-theme-control-bg-color);
@@ -54,26 +55,23 @@
 /* Buttons */
 [part="decrement-button"],
 [part="increment-button"] {
+  box-sizing: border-box;
   display: inline-grid;
   place-items: center;
-  width: calc(var(--qty-height) - var(--monster-space-4));
-  height: calc(var(--qty-height) - var(--monster-space-4));
+  width: var(--qty-button-size);
+  min-width: var(--qty-button-size);
+  height: var(--qty-button-size);
+  min-height: var(--qty-button-size);
+  padding: 0;
   border: 0;
   border-radius: var(--qty-radius);
   background: var(--qty-btn-bg);
   color: var(--qty-btn-fg);
+  line-height: 1;
   cursor: pointer;
   transition: transform .08s ease, background-color .15s ease;
 }
 
-[part="decrement-button"] {
-  transform: translateX(-7px);
-}
-[part="increment-button"] {
-  transform: translateX(7px);
-}
-
-
 [part="decrement-button"]:hover,
 [part="increment-button"]:hover {
   background: var(--qty-btn-bg-hover);
@@ -82,13 +80,7 @@
 [part="decrement-button"]:active,
 [part="increment-button"]:active {
   background: var(--qty-btn-bg-active);
-}
-
-[part="decrement-button"]:active {
-  transform: scale(.95) translateX(-7px);
-}
-[part="increment-button"]:active {
-  transform: scale(.95) translateX(7px);
+  transform: scale(.95);
 }
 
 [part="decrement-button"] svg,
@@ -147,4 +139,3 @@
   [part="decrement-button"],
   [part="increment-button"] { transition: none; }
 }
-