@schukai/monster 4.148.9 → 4.149.1

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

@@ -5,24 +5,150 @@
 [data-monster-role=control] {
     
     & div[data-monster-role=popper] {
-        padding: 2px;
+        padding: var(
+            --monster-action-button-popper-padding,
+            var(--monster-action-menu-padding, 2px)
+        );
+        background: var(
+            --monster-action-button-popper-background-color,
+            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-button-popper-border-color,
+            var(
+                --monster-action-menu-border-color,
+                var(--monster-bg-color-primary-4)
+            )
+        );
+        border-radius: var(
+            --monster-action-button-popper-border-radius,
+            var(--monster-action-menu-border-radius, var(--monster-border-radius))
+        );
+        box-shadow: var(
+            --monster-action-button-popper-box-shadow,
+            var(--monster-action-menu-box-shadow, var(--monster-box-shadow-1))
+        );
     }
 
     [data-monster-role=container] {
         [data-monster-role=buttons] {
             display: flex;
             flex-direction: column;
+            gap: var(
+                --monster-action-button-menu-gap,
+                var(--monster-action-menu-gap, 0)
+            );
+            min-inline-size: var(
+                --monster-action-button-menu-min-inline-size,
+                var(--monster-action-menu-min-inline-size, auto)
+            );
             width: 100%;
         }
     }
 
     & monster-message-state-button {
-        width: auto;
+        --monster-button-min-block-size: var(
+            --monster-action-menu-item-min-block-size,
+            var(--monster-control-min-block-size, auto)
+        );
+        --monster-state-button-label-justify-content: var(
+            --monster-action-button-item-label-justify-content,
+            center
+        );
+
+        width: var(--monster-action-button-item-inline-size, auto);
         border: 0;
+
         &::part(button-button) {
-            border: 0;
-            margin: 2px;
+            width: var(--monster-action-button-item-inline-size, revert-layer);
+            min-inline-size: var(
+                --monster-action-button-item-min-inline-size,
+                revert-layer
+            );
+            justify-content: var(
+                --monster-action-button-item-justify-content,
+                var(
+                    --monster-action-menu-item-justify-content,
+                    revert-layer
+                )
+            );
+            padding: var(
+                --monster-action-button-item-padding,
+                var(--monster-action-menu-item-padding, revert-layer)
+            );
+            color: var(
+                --monster-action-button-item-color,
+                var(--monster-action-menu-item-color, revert-layer)
+            );
+            background: var(
+                --monster-action-button-item-background-color,
+                var(
+                    --monster-action-menu-item-background-color,
+                    revert-layer
+                )
+            );
+            border: var(
+                --monster-action-button-item-border,
+                var(--monster-action-menu-item-border-width, 0)
+                var(--monster-action-menu-item-border-style, solid)
+                var(--monster-action-menu-item-border-color, transparent)
+            );
+            border-radius: var(
+                --monster-action-button-item-border-radius,
+                var(--monster-action-menu-item-border-radius, revert-layer)
+            );
+            box-shadow: var(
+                --monster-action-button-item-box-shadow,
+                var(--monster-action-menu-item-box-shadow, revert-layer)
+            );
+            margin: var(--monster-action-button-item-margin, 2px);
+            text-align: var(
+                --monster-action-button-item-text-align,
+                var(--monster-action-menu-item-text-align, revert-layer)
+            );
+        }
+
+        &::part(button-button):hover {
+            color: var(
+                --monster-action-button-item-hover-color,
+                var(--monster-action-menu-item-hover-color, revert-layer)
+            );
+            background: var(
+                --monster-action-button-item-hover-background-color,
+                var(
+                    --monster-action-menu-item-hover-background-color,
+                    revert-layer
+                )
+            );
+            box-shadow: var(
+                --monster-action-button-item-hover-box-shadow,
+                var(--monster-action-menu-item-hover-box-shadow, revert-layer)
+            );
+        }
+
+        &::part(button-button):focus-visible {
+            outline-offset: var(
+                --monster-action-button-item-focus-outline-offset,
+                var(
+                    --monster-action-menu-item-focus-outline-offset,
+                    revert-layer
+                )
+            );
         }
     }
 }
-

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

@@ -9,10 +9,44 @@ 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=button-bar] {
         display: flex;
         flex-direction: row;
         justify-content: flex-start;
+        gap: var(--monster-button-bar-gap, 0);
 
         &[data-monster-layout-alignment="right"] {
             justify-content: flex-end;
@@ -26,10 +60,22 @@ div[data-monster-role="control"] {
         & [data-monster-role=popper-nav] {
             display: flex;
             align-items: stretch;
+            flex: 0 0 var(
+                --monster-control-bar-height,
+                var(--monster-control-min-block-size, 2.75rem)
+            );
         }
 
         & [data-monster-role=switch] {
             display: flex;
+            min-width: var(
+                --monster-control-bar-height,
+                var(--monster-control-min-block-size, 2.75rem)
+            );
+            width: var(
+                --monster-control-bar-height,
+                var(--monster-control-min-block-size, 2.75rem)
+            );
 
             &.hidden {
                 display: none;
@@ -37,7 +83,10 @@ div[data-monster-role="control"] {
         }
 
         & ::slotted(*:not(:last-child)) {
-            margin-right: calc(-1 * var(--monster-border-width));
+            margin-right: var(
+                --monster-button-bar-item-spacing,
+                0
+            );
         }
 
     }
@@ -49,15 +98,167 @@ div[data-monster-role="control"] {
         align-items: stretch;
         align-content: stretch;
         justify-content: flex-start;
-        gap: 0;
+        gap: var(
+            --monster-button-bar-popper-gap,
+            var(--monster-action-menu-gap, 0)
+        );
 
         &::slotted(*) {
+            --monster-button-min-block-size: var(
+                --monster-action-menu-item-min-block-size,
+                var(--monster-control-min-block-size, auto)
+            );
+            --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
+            );
             display: flex;
             width: fill-available;
         }
 
+        &::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(button) {
+            appearance: none;
+            box-sizing: border-box;
+            inline-size: 100%;
+            min-block-size: var(
+                --monster-action-menu-item-min-block-size,
+                var(--monster-control-min-block-size, auto)
+            );
+            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(*:not(:first-child)) {
-            margin-top: calc(-1 * var(--monster-border-width));
+            margin-top: var(
+                --monster-button-bar-popper-item-spacing,
+                0
+            );
         }
 
     }