@schukai/monster 4.148.9 → 4.149.1

package/source/components/layout/style/tabs.pcss

@@ -16,17 +16,76 @@
 nav[data-monster-role=nav] {
     overflow: hidden;
     display: flex;
-    align-items: flex-end;
+    align-items: var(--monster-tabs-nav-align-items, flex-end);
     flex-direction: row;
     flex-wrap: nowrap;
     box-sizing: border-box;
-    margin-bottom: .75rem;
+    gap: var(--monster-tabs-nav-gap, 0);
+    justify-content: var(--monster-tabs-nav-justify-content, flex-start);
+    margin-bottom: var(--monster-tabs-nav-margin-block-end, .75rem);
+    padding: var(--monster-tabs-nav-padding, 0);
+
+    background-color: var(
+        --monster-tabs-nav-background-color,
+        transparent
+    );
+    border-width: var(
+        --monster-tabs-nav-border-width,
+        0 0 thin
+    );
+    border-style: var(
+        --monster-tabs-nav-border-style,
+        var(--monster-border-style)
+    );
+    border-color: var(
+        --monster-tabs-nav-border-color,
+        var(--monster-bg-color-primary-2)
+    );
+    border-radius: var(
+        --monster-tabs-nav-border-radius,
+        var(--monster-border-radius)
+    );
+    box-shadow: var(--monster-tabs-nav-box-shadow, var(--monster-box-shadow-1));
+}
+
+nav[data-monster-role=nav] > [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)
+    );
+}
 
-    border-bottom-width: thin;
-    border-radius: var(--monster-border-radius);
-    border-bottom-style: var(--monster-border-style);
-    box-shadow: var(--monster-box-shadow-1);
-    border-color: var(--monster-bg-color-primary-2);
+[data-monster-role=popper-nav] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--monster-action-menu-gap, 0);
+    min-inline-size: 100%;
 }
 
 [data-monster-role=nav] button .remove-tab {
@@ -79,32 +138,67 @@ nav[data-monster-role=nav] {
 [data-monster-role=nav] button {
     outline: none;
     cursor: pointer;
-    font-weight: 400;
+    font-weight: var(--monster-tabs-button-font-weight, 400);
     line-height: 1.5;
     text-align: center;
     text-decoration: none;
     vertical-align: middle;
     user-select: none;
-    border: none;
-    padding: .375rem 0;
-    margin-right: .75rem;
+    background-color: var(--monster-tabs-button-background-color, transparent);
+    border-width: var(--monster-tabs-button-border-width, 0);
+    border-style: var(
+        --monster-tabs-button-border-style,
+        var(--monster-border-style)
+    );
+    border-color: var(
+        --monster-tabs-button-border-color,
+        var(--monster-bg-color-primary-4)
+    );
+    padding: var(--monster-tabs-button-padding, .375rem 0);
+    margin: 0 var(--monster-tabs-button-margin-inline-end, .75rem) 0 0;
     font-size: 1rem;
     display: flex;
     justify-content: center;
+    min-height: var(--monster-tabs-button-min-block-size, auto);
+    position: relative;
+    width: auto;
 
+    border-radius: var(
+        --monster-tabs-button-border-radius,
+        var(--monster-border-radius)
+    );
+    box-shadow: var(--monster-tabs-button-box-shadow, var(--monster-box-shadow-1));
+    color: var(--monster-tabs-button-color, inherit);
 
-    border-radius: var(--monster-border-radius);
-    border-bottom-style: var(--monster-border-style);
-    box-shadow: var(--monster-box-shadow-1);
-    border-color: var(--monster-bg-color-primary-4);
-
-    transition: color 0.8s;
+    transition: var(--monster-tabs-button-transition, color 0.8s);
 
     align-self: stretch;
     align-content: center;
     align-items: center;
 }
 
+[data-monster-role=nav] button::before {
+    content: "";
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: var(--monster-tabs-indicator-inline-start, 0);
+    width: var(--monster-tabs-indicator-inline-size, 0);
+    height: var(--monster-tabs-indicator-block-size, 0);
+    pointer-events: none;
+    background-color: var(--monster-tabs-indicator-background-color, transparent);
+    border-radius: var(--monster-tabs-indicator-border-radius, 0);
+    opacity: 0;
+    transform: translateY(-50%) scaleY(.5);
+    transform-origin: center;
+    transition:
+        opacity 160ms ease,
+        transform 160ms ease;
+}
+
+[data-monster-role=nav] button:not([disabled]):hover::before {
+    opacity: var(--monster-tabs-indicator-hover-opacity, 0);
+}
+
 [data-monster-role=nav] button[draggable=true] {
     cursor: grab;
 }
@@ -119,28 +213,76 @@ nav[data-monster-role=nav] {
 }
 
 [data-monster-role=nav] button:not([disabled]):hover {
-
-    border-radius: var(--monster-border-radius);
-    border-bottom-style: var(--monster-border-style);
-    box-shadow: var(--monster-box-shadow-1);
-    border-color: var(--monster-bg-color-secondary-3);
-    color: var(--monster-bg-color-secondary-3);
-
+    background-color: var(
+        --monster-tabs-button-hover-background-color,
+        inherit
+    );
+    border-color: var(
+        --monster-tabs-button-hover-border-color,
+        var(--monster-bg-color-secondary-3)
+    );
+    box-shadow: var(
+        --monster-tabs-button-hover-box-shadow,
+        var(--monster-box-shadow-1)
+    );
+    color: var(
+        --monster-tabs-button-hover-color,
+        var(--monster-bg-color-secondary-3)
+    );
 }
 
 [data-monster-role=nav] button[data-monster-state=active]:not([disabled]):hover,
 [data-monster-role=nav] button[data-monster-state=active] {
-    border-radius: var(--monster-border-radius);
-    border-bottom-style: var(--monster-border-style);
-    box-shadow: var(--monster-box-shadow-1);
-    border-color: var(--monster-bg-color-secondary-3);
-    color: var(--monster-color-secondary-1) !important;
-    background-color: inherit;
+    background-color: var(
+        --monster-tabs-button-active-background-color,
+        inherit
+    );
+    border-color: var(
+        --monster-tabs-button-active-border-color,
+        var(--monster-bg-color-secondary-3)
+    );
+    box-shadow: var(
+        --monster-tabs-button-active-box-shadow,
+        var(--monster-box-shadow-1)
+    );
+    color: var(
+        --monster-tabs-button-active-color,
+        var(--monster-color-secondary-1)
+    ) !important;
+    font-weight: var(
+        --monster-tabs-button-active-font-weight,
+        var(--monster-tabs-button-font-weight, 400)
+    );
     @media (prefers-color-scheme: dark) {
-        border-color: var(--monster-bg-color-secondary-2);
-        color: var(--monster-color-secondary-2) !important;
+        border-color: var(
+            --monster-tabs-button-active-border-color,
+            var(--monster-bg-color-secondary-2)
+        );
+        color: var(
+            --monster-tabs-button-active-color,
+            var(--monster-color-secondary-2)
+        ) !important;
     }
+}
+
+[data-monster-role=nav] button[data-monster-state=active]::before {
+    opacity: var(--monster-tabs-indicator-active-opacity, 0);
+    transform: translateY(-50%) scaleY(1);
+}
 
+[data-monster-role=nav] button:focus-visible {
+    outline: var(--monster-focus-ring-width, 2px)
+        var(--monster-focus-ring-style, solid)
+        var(--monster-focus-ring-color, currentColor);
+    outline-offset: var(--monster-focus-ring-offset, 2px);
+    z-index: var(--monster-z-index-outline);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    [data-monster-role=nav] button,
+    [data-monster-role=nav] button::before {
+        transition: none;
+    }
 }
 
 [data-monster-role=nav] button[disabled] {
@@ -153,11 +295,40 @@ nav[data-monster-role=nav] {
     align-self: center;
     touch-action: none;
     order: 2;
-    border: 0;
+    inline-size: var(--monster-tabs-overflow-switch-inline-size, auto);
+    min-inline-size: var(--monster-tabs-overflow-switch-inline-size, auto);
+    justify-content: center;
+    padding: var(
+        --monster-tabs-overflow-switch-padding,
+        var(--monster-tabs-button-padding, .375rem 0)
+    );
+    background: var(
+        --monster-tabs-overflow-switch-background-color,
+        var(--monster-tabs-button-background-color, transparent)
+    );
+    border-width: var(
+        --monster-tabs-overflow-switch-border-width,
+        var(--monster-tabs-button-border-width, 0)
+    );
+    border-color: var(
+        --monster-tabs-overflow-switch-border-color,
+        transparent
+    );
 }
 
 [data-monster-role=nav] button[data-monster-role=switch]:not([disabled]):hover {
-    border-bottom-width: 0;
+    background: var(
+        --monster-tabs-overflow-switch-hover-background-color,
+        var(--monster-tabs-button-hover-background-color, inherit)
+    );
+    border-color: var(
+        --monster-tabs-overflow-switch-border-color,
+        transparent
+    );
+}
+
+[data-monster-role=nav] button[data-monster-role=switch]::before {
+    display: none;
 }
 
 [data-monster-role=nav] button [part=icon] {
@@ -185,13 +356,24 @@ nav[data-monster-role=nav] {
 }
 
 ::slotted([slot]) {
-
-    border-bottom-width: var(--monster-border-width);
-    border-radius: var(--monster-border-radius);
-    border-bottom-style: var(--monster-border-style);
-    box-shadow: var(--monster-box-shadow-1);
-
-    border-color: var(--monster-bg-color-primary-4);
+    border-width: var(
+        --monster-tabs-slot-border-width,
+        0 0 var(--monster-border-width)
+    );
+    border-style: var(
+        --monster-tabs-slot-border-style,
+        var(--monster-border-style)
+    );
+    border-color: var(
+        --monster-tabs-slot-border-color,
+        var(--monster-bg-color-primary-4)
+    );
+    border-radius: var(
+        --monster-tabs-slot-border-radius,
+        var(--monster-border-radius)
+    );
+    box-shadow: var(--monster-tabs-slot-box-shadow, var(--monster-box-shadow-1));
+    padding: var(--monster-tabs-slot-padding, 0);
 
 }
 
@@ -207,19 +389,67 @@ nav[data-monster-role=nav] {
 
 [data-monster-role=nav] [data-monster-role=popper-nav] button:not([disabled]) {
     width: 100%;
-    justify-content: left;
-    padding-left: 15px;
-    padding-right: 15px;
-    border: 0;
+    min-block-size: var(
+        --monster-action-menu-item-min-block-size,
+        auto
+    );
+    justify-content: var(
+        --monster-action-menu-item-justify-content,
+        flex-start
+    );
+    padding: var(
+        --monster-action-menu-item-padding,
+        0 15px
+    );
+    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);
 }
 
 [data-monster-role=nav] [data-monster-role=popper-nav] button:hover {
-    border: 0;
+    background: var(
+        --monster-action-menu-item-hover-background-color,
+        inherit
+    );
+    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);
 }
 
 [data-monster-role=nav] [data-monster-role=popper-nav] button[data-monster-state=active]:not([disabled]):hover,
 [data-monster-role=nav] [data-monster-role=popper-nav] button[data-monster-state=active] {
-    border: 0;
+    background: var(
+        --monster-action-menu-item-active-background-color,
+        inherit
+    );
+    border-color: var(
+        --monster-action-menu-item-border-color,
+        transparent
+    );
+    box-shadow: var(--monster-action-menu-item-box-shadow, none);
     @media (prefers-color-scheme: dark) {
         color: var(--monster-color-secondary-4) !important;
     }

package/source/components/layout/style/vertical-tabs.pcss

@@ -0,0 +1,147 @@
+[data-monster-role=control] {
+    align-items: stretch;
+    display: flex;
+    flex-direction: var(--monster-vertical-tabs-control-flex-direction, row);
+    gap: var(--monster-vertical-tabs-control-gap, 0);
+    min-block-size: var(--monster-vertical-tabs-control-min-block-size, auto);
+}
+
+[data-monster-role=control] > slot[data-monster-role=slot] {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+nav[data-monster-role=nav] {
+    align-items: stretch;
+    align-self: var(--monster-vertical-tabs-nav-align-self, stretch);
+    block-size: var(--monster-vertical-tabs-nav-block-size, auto);
+    border-bottom-width: 0;
+    border-right-style: var(
+        --monster-vertical-tabs-nav-border-style,
+        var(--monster-border-style)
+    );
+    border-right-width: var(--monster-vertical-tabs-nav-border-width, thin);
+    border-color: var(
+        --monster-vertical-tabs-nav-border-color,
+        var(--monster-bg-color-primary-2)
+    );
+    flex-direction: column;
+    gap: var(
+        --monster-vertical-tabs-nav-gap,
+        var(--monster-tabs-nav-gap, .25rem)
+    );
+    margin-bottom: 0;
+    margin-right: var(--monster-vertical-tabs-nav-margin-inline-end, .75rem);
+    max-height: var(--monster-vertical-tabs-nav-max-block-size, 100%);
+    min-block-size: var(--monster-vertical-tabs-nav-min-block-size, auto);
+    min-inline-size: var(--monster-vertical-tabs-nav-min-inline-size, auto);
+}
+
+[data-monster-role=nav] button {
+    border-bottom-width: 0;
+    border-right-style: var(
+        --monster-vertical-tabs-button-border-style,
+        var(--monster-border-style)
+    );
+    border-right-width: var(
+        --monster-vertical-tabs-button-border-width,
+        var(--monster-border-width)
+    );
+    border-right-color: var(
+        --monster-vertical-tabs-button-border-color,
+        var(--monster-bg-color-primary-4)
+    );
+    flex-direction: var(
+        --monster-vertical-tabs-button-flex-direction,
+        column
+    );
+    justify-content: var(
+        --monster-vertical-tabs-button-justify-content,
+        center
+    );
+    margin-bottom: var(
+        --monster-vertical-tabs-button-margin-block-end,
+        .75rem
+    );
+    margin-right: 0;
+    padding: var(--monster-vertical-tabs-button-padding, .5rem .4rem);
+    width: var(--monster-vertical-tabs-button-inline-size, auto);
+}
+
+[data-monster-role=nav] button[data-monster-role=button]:last-of-type {
+    margin-bottom: 0;
+}
+
+[data-monster-role=nav] button:not([disabled]):hover {
+    border-bottom-width: 0;
+    border-right-color: var(
+        --monster-vertical-tabs-button-hover-border-color,
+        var(--monster-bg-color-secondary-3)
+    );
+}
+
+[data-monster-role=nav] button[data-monster-state=active],
+[data-monster-role=nav] button[data-monster-state=active]:not([disabled]):hover {
+    border-bottom-width: 0;
+    border-right-color: var(
+        --monster-vertical-tabs-button-active-border-color,
+        var(--monster-bg-color-secondary-3)
+    );
+}
+
+[data-monster-role=nav] > button[data-monster-role=button] > span:first-of-type {
+    display: inline-flex;
+    text-orientation: var(
+        --monster-vertical-tabs-label-text-orientation,
+        mixed
+    );
+    white-space: nowrap;
+    writing-mode: var(
+        --monster-vertical-tabs-label-writing-mode,
+        vertical-rl
+    );
+}
+
+[data-monster-role=nav] button .remove-tab {
+    margin-top: .35rem;
+}
+
+[data-monster-role=nav] button[data-monster-role=switch] {
+    border-right-width: 0;
+    margin-top: .5rem;
+}
+
+[data-monster-role=nav] [data-monster-role=popper-nav] button {
+    flex-direction: row;
+    margin-bottom: 0;
+    padding-left: 15px;
+    padding-right: 15px;
+}
+
+[data-monster-role=nav] [data-monster-role=popper-nav] button > span:first-of-type {
+    text-orientation: mixed;
+    writing-mode: horizontal-tb;
+}
+
+::slotted([slot]) {
+    border-bottom-width: 0;
+    border-right-style: var(--monster-border-style);
+    border-right-width: var(
+        --monster-vertical-tabs-slotted-border-width,
+        var(--monster-border-width)
+    );
+    border-color: var(
+        --monster-vertical-tabs-slotted-border-color,
+        var(--monster-bg-color-primary-4)
+    );
+}
+
+::slotted([slot=start]) {
+    margin-bottom: .75rem;
+    margin-right: 0;
+}
+
+::slotted([slot=end]) {
+    margin-left: 0;
+    margin-top: .75rem;
+}