blue-web 1.19.1 → 1.21.0

package/dist/style.scss

@@ -1,5 +1,5 @@
 /*!
- * Blue Web v1.19.1 (https://bruegmann.github.io/blue-web)
+ * Blue Web v1.21.0 (https://bruegmann.github.io/blue-web)
  * Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-web/blob/master/LICENSE).
 */
 
@@ -53,3 +53,9 @@
 
 @import "./styles/devexpress";
 @import "./styles/inter";
+
+*,
+*:before,
+*:after {
+    corner-shape: var(--blue-corner-shape);
+}

package/dist/styles/_anchor.scss

@@ -1,36 +1,25 @@
-.blue-anchor {
-    anchor-name: var(--blue-anchor-name, --anchor-1);
-}
-
-@position-try --blue-anchored-below {
-    top: anchor(var(--blue-anchor-name, --anchor-1) bottom);
-    bottom: unset;
-}
-
-@position-try --blue-anchored-above {
-    bottom: anchor(var(--blue-anchor-name, --anchor-1) top);
-    top: unset;
-}
-
 .blue-anchored {
-    top: anchor(var(--blue-anchor-name, --anchor-1) bottom);
-    position-try: --blue-anchored-below, --blue-anchored-above;
+    position-try: flip-inline;
+    position-area: bottom span-right;
+    position: fixed;
+
+    // Normalize popover
+    &[popover] {
+        margin: 0;
+        padding: 0;
+        border: 0;
+    }
 }
 
 .blue-anchored-start {
-    left: anchor(var(--blue-anchor-name, --anchor-1) left);
+    position-area: bottom span-right;
 }
 
 .blue-anchored-end {
-    left: anchor(var(--blue-anchor-name, --anchor-1) right);
-    translate: -100%;
+    position-area: bottom span-left;
 }
 
 @supports not (anchor-name: --anchor-1) {
-    .blue-anchored-end {
-        translate: none;
-    }
-
     .blue-anchored-fallback {
         left: 50%;
         top: 50%;
@@ -45,3 +34,9 @@
         }
     }
 }
+
+.btn:has(+ :popover-open):not(:focus-visible):not(.blue-menu-item) {
+    --bs-focus-ring-color: rgba(var(--bs-secondary-rgb), 0.25);
+    box-shadow: var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0)
+        var(--bs-focus-ring-width) var(--bs-focus-ring-color);
+}

package/dist/styles/_bootstrap-variables.scss

@@ -43,3 +43,4 @@ $focus-ring-color: #{rgba(var(--bs-primary-rgb), 25%)} !default;
 $input-focus-border-color: #{rgba(var(--bs-primary-rgb), 50%)} !default;
 
 $enable-button-pointers: false !default;
+$focus-ring-width: 0.125rem !default;

package/dist/styles/_button-icon-wrapper.scss

@@ -22,3 +22,7 @@
         }
     }
 }
+
+.blue-btn-square {
+    padding: calc(var(--bs-btn-padding-y) + #{$icon-link-underline-offset});
+}

package/dist/styles/_collapse.scss

@@ -14,8 +14,7 @@
         transition: transform 0.2s;
     }
 
-    &[open] > summary > .blue-collapse-header > .blue-collapse-chevron,
-    &[open] > summary > .blue-collapse-chevron {
+    &[open] > summary .blue-collapse-chevron {
         --blue-collapse-chevron-rotate: 90deg;
         transform: rotate(var(--blue-collapse-chevron-rotate));
     }
@@ -46,6 +45,12 @@
     }
 }
 
+.blue-collapse-indent {
+    // 0.5em is half of icon width
+    --margin-inline-start: calc(#{$input-btn-padding-x} + 0.5em + #{$input-btn-border-width});
+    margin-inline-start: var(--margin-inline-start);
+}
+
 // Let's you group a collapse together with another UI element like a button that should come before the collapse summary.
 .blue-collapse-group {
     display: grid;
@@ -60,7 +65,7 @@
             grid-column: 2;
 
             & + * {
-                width: calc(100% + 1rem - 2px);
+                width: calc(100% + var(--margin-inline-start) - 3px);
             }
         }
     }

package/dist/styles/_inter.scss

@@ -1,12 +1,7 @@
 :root {
     --bs-font-sans-serif: Inter, #{$font-family-sans-serif};
-    font-feature-settings:
-        "liga" 1,
-        "calt" 1,
-        "cv05" 1,
-        "cv07" 1,
-        "tnum" 1,
-        "zero" 1;
+    --blue-font-feature-settings: "liga" 1, "calt" 1, "cv05" 1, "cv07" 1, "tnum" 1, "zero" 1;
+    font-feature-settings: var(--blue-font-feature-settings);
     font-size: 14px;
 }
 @supports (font-variation-settings: normal) {

package/dist/styles/_layout.scss

@@ -108,6 +108,12 @@
     grid-area: side;
     overflow: auto;
     background: inherit;
+    scrollbar-color: transparent transparent;
+
+    &:hover,
+    &:focus-within {
+        scrollbar-color: color-mix(in srgb, currentColor 50%, transparent) transparent;
+    }
 }
 
 @media (width < 64rem) {
@@ -143,6 +149,7 @@
     margin-left: auto;
     margin-right: auto;
     overflow: auto;
+    scrollbar-color: color-mix(in srgb, currentColor 50%, transparent) transparent;
     background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity, 1));
     color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity, 1));
     box-shadow: var(--bs-box-shadow-sm);

package/dist/styles/_menu-item.scss

@@ -1,81 +1,27 @@
-@keyframes blue-menu-item-indicator-in-from-side {
-    from {
-        transform: translateX(-100%);
-    }
-    to {
-        transform: translateX(1);
-    }
-}
-
-@keyframes blue-menu-item-indicator-in-from-below {
-    from {
-        transform: translateY(100%);
-    }
-    to {
-        transform: translateY(1);
-    }
-}
-
 .blue-menu-item {
+    display: inline-flex;
+    align-items: center;
     transition:
         width 0.5s,
         background-color 0.3s,
         color 0.15s,
         box-shadow 0.3s,
         opacity 0.3s !important;
+    color: inherit;
+    border-color: transparent;
+    --bs-btn-active-border-color: transparent;
+    --bs-btn-disabled-border-color: transparent;
 
     @media (prefers-reduced-motion) {
         transition: none !important;
     }
 
-    & {
-        border: none;
-        box-shadow: none;
-        background-image: none;
-    }
-
-    &:focus {
-        box-shadow: none;
-    }
-
     &:focus-visible {
         &,
         &.active {
             box-shadow: inset 0 0 0 0.25rem color-mix(in srgb, currentColor 15%, transparent);
         }
     }
-}
-
-.blue-menu-item-icon {
-    display: inline-block;
-
-    & > * {
-        display: block;
-        width: 1.5rem;
-    }
-}
-
-.blue-menu-item-icon.iconForActive {
-    display: none;
-}
-
-.blue-menu-item.active {
-    .blue-menu-item-icon.hasIconForActive {
-        display: none;
-    }
-    .blue-menu-item-icon.iconForActive {
-        display: inline-block;
-    }
-}
-
-.blue-menu-item-dropdown {
-    margin-left: 1rem;
-    animation: blue-menu-item-dropdown 0.15s;
-    position: relative;
-
-    @media (prefers-reduced-motion) {
-        animation-duration: 0s;
-    }
 
     &::before {
         content: "";
@@ -84,88 +30,226 @@
         right: 0.125rem;
         bottom: 0.125rem;
         left: 0.125rem;
+        background-color: currentColor;
         border-radius: $border-radius;
-        box-shadow: $box-shadow;
-        border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
-        background-color: var(--blue-menu-item-dropdown-bg);
-    }
-
-    &[popover] {
-        position: fixed;
-        margin: 0;
-        padding: 0;
-        z-index: 1000;
-        border: none;
-        background: transparent;
-        border-radius: calc(#{$border-radius} + 0.1rem);
-        box-shadow: $box-shadow;
-    }
-}
-
-.blue-menu-item {
-    color: inherit;
-    width: auto;
-    height: $normal-size;
-    font-size: $bla-btn-font-size;
-    display: flex;
-    align-items: center;
-    border-color: transparent;
-    --bs-btn-padding-x: 0.437rem;
-    @include slide-transition();
+        transform: scale(0.9);
+        opacity: 0;
+        transition: all 0.2s;
 
-    &::before {
-        @include blue-menu-item-background();
-    }
-
-    &[draggable] {
-        cursor: grab;
-
-        &:active {
-            box-shadow: inset 0 0 0.25rem;
+        @media (prefers-reduced-motion) {
+            transition: none;
         }
     }
 
     &:hover,
     &:active,
-    &.highlighted,
+    &.active,
     &:has(+ :popover-open) {
-        color: inherit;
-        border-color: transparent;
-
         &::before {
             transform: scale(1);
             opacity: 0.25;
         }
     }
 
-    &.highlighted,
+    &.active,
     &:has(+ :popover-open) {
         &::before {
             opacity: 0.16;
         }
     }
 
-    &:hover,
-    &:active {
-        &::before {
-            opacity: 0.25;
+    &.current {
+        position: relative;
+        &::after {
+            @include blue-menu-item-indicator();
         }
     }
+}
 
-    &.active::after {
-        @include blue-menu-item-indicator();
+.blue-horizontal {
+    .blue-menu-item.current::after {
+        @include blue-menu-item-indicator-horizontal();
     }
+}
 
-    & > * + .blue-menu-item-label {
-        margin-left: 0.5rem;
+.blue-menu-item-current-hidden {
+    &:is(:where(.blue-menu-item):is(.current) *) {
+        display: none !important;
     }
 }
-
-.blue-menu-item-wrapper {
-    display: contents;
+.blue-menu-item-default-hidden {
+    &:is(:where(.blue-menu-item):is(:not(.current)) *) {
+        display: none !important;
+    }
 }
 
-.blue-menu-item-dropdown > .blue-menu-item-wrapper > .blue-menu-item,
-.blue-menu-item-dropdown > .blue-menu-item {
-    width: 100%;
-}
+// @keyframes blue-menu-item-indicator-in-from-side {
+//     from {
+//         transform: translateX(-100%);
+//     }
+//     to {
+//         transform: translateX(1);
+//     }
+// }
+
+// @keyframes blue-menu-item-indicator-in-from-below {
+//     from {
+//         transform: translateY(100%);
+//     }
+//     to {
+//         transform: translateY(1);
+//     }
+// }
+
+// .blue-menu-item {
+//     transition:
+//         width 0.5s,
+//         background-color 0.3s,
+//         color 0.15s,
+//         box-shadow 0.3s,
+//         opacity 0.3s !important;
+
+//     @media (prefers-reduced-motion) {
+//         transition: none !important;
+//     }
+
+//     & {
+//         border: none;
+//         box-shadow: none;
+//         background-image: none;
+//     }
+
+//     &:focus {
+//         box-shadow: none;
+//     }
+
+//     &:focus-visible {
+//         &,
+//         &.active {
+//             box-shadow: inset 0 0 0 0.25rem color-mix(in srgb, currentColor 15%, transparent);
+//         }
+//     }
+// }
+
+// .blue-menu-item-icon {
+//     display: inline-block;
+
+//     & > * {
+//         display: block;
+//         width: 1.5rem;
+//     }
+// }
+
+// .blue-menu-item-icon.iconForActive {
+//     display: none;
+// }
+
+// .blue-menu-item.active {
+//     .blue-menu-item-icon.hasIconForActive {
+//         display: none;
+//     }
+//     .blue-menu-item-icon.iconForActive {
+//         display: inline-block;
+//     }
+// }
+
+// .blue-menu-item-dropdown {
+//     margin-left: 1rem;
+//     animation: blue-menu-item-dropdown 0.15s;
+//     position: relative;
+
+//     @media (prefers-reduced-motion) {
+//         animation-duration: 0s;
+//     }
+
+//     &::before {
+//         content: "";
+//         position: absolute;
+//         top: 0.125rem;
+//         right: 0.125rem;
+//         bottom: 0.125rem;
+//         left: 0.125rem;
+//         border-radius: $border-radius;
+//         box-shadow: $box-shadow;
+//         border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
+//         background-color: var(--blue-menu-item-dropdown-bg);
+//     }
+
+//     &[popover] {
+//         position: fixed;
+//         margin: 0;
+//         padding: 0;
+//         z-index: 1000;
+//         border: none;
+//         background: transparent;
+//         border-radius: calc(#{$border-radius} + 0.1rem);
+//         box-shadow: $box-shadow;
+//     }
+// }
+
+// .blue-menu-item {
+//     color: inherit;
+//     width: auto;
+//     height: $normal-size;
+//     font-size: $bla-btn-font-size;
+//     display: flex;
+//     align-items: center;
+//     border-color: transparent;
+//     --bs-btn-padding-x: 0.437rem;
+
+//     &::before {
+//         @include blue-menu-item-background();
+//     }
+
+//     &[draggable] {
+//         cursor: grab;
+
+//         &:active {
+//             box-shadow: inset 0 0 0.25rem;
+//         }
+//     }
+
+//     &:hover,
+//     &:active,
+//     &.highlighted,
+//     &:has(+ :popover-open) {
+//         color: inherit;
+//         border-color: transparent;
+
+//         &::before {
+//             transform: scale(1);
+//             opacity: 0.25;
+//         }
+//     }
+
+//     &.highlighted,
+//     &:has(+ :popover-open) {
+//         &::before {
+//             opacity: 0.16;
+//         }
+//     }
+
+//     &:hover,
+//     &:active {
+//         &::before {
+//             opacity: 0.25;
+//         }
+//     }
+
+//     &.active::after {
+//         @include blue-menu-item-indicator();
+//     }
+
+//     & > * + .blue-menu-item-label {
+//         margin-left: 0.5rem;
+//     }
+// }
+
+// .blue-menu-item-wrapper {
+//     display: contents;
+// }
+
+// .blue-menu-item-dropdown > .blue-menu-item-wrapper > .blue-menu-item,
+// .blue-menu-item-dropdown > .blue-menu-item {
+//     width: 100%;
+// }

package/dist/styles/_scrollspy.scss

@@ -32,9 +32,11 @@
                 (var(--#{$prefix}nav-link-font-size) * var(--#{$prefix}body-line-height))
         );
         margin-bottom: 0.25rem;
+        padding-inline: var(--blue-scrollspy-marker-group-padding-inline);
+        gap: var(--blue-scrollspy-marker-group-gap);
     }
 
-    & > section {
+    & > :is(section, .blue-scrollspy-group) {
         &::scroll-marker {
             content: attr(aria-label);
 

package/dist/styles/_utils.scss

@@ -4,3 +4,17 @@
 .m-last-0:last-child {
     margin: 0 !important;
 }
+
+// Shows empty message if the element has no children.
+// Can be used for lists and such.
+// For localization you should override CSS variable `--message` dynamically.
+.blue-empty-message {
+    --message: "No items found.";
+    &:empty::before {
+        content: var(--message);
+        color: var(--bs-secondary-color);
+        display: flex;
+        padding: 1rem;
+        justify-content: center;
+    }
+}

package/dist/styles/_variables.scss

@@ -90,6 +90,8 @@ $sidebar-shrink-breakpoint: 600px !default;
 // Breakpoint for sidebar fully expanded
 $sidebar-expanded-breakpoint: 1400px !default;
 
+$corner-shape: #{round} !default;
+
 :root {
     --blue-app-bg: #{$app-bg};
 
@@ -107,6 +109,8 @@ $sidebar-expanded-breakpoint: 1400px !default;
     --blue-action-link-bg-color: var(--blue-theme);
     --blue-menu-item-indicator-bg: #{$sidebar-indicator-color};
     --blue-menu-item-height: #{$normal-size};
+
+    --blue-corner-shape: #{$corner-shape};
 }
 
 @include color-mode(dark, true) {