blue-web 1.20.0 → 1.21.1

package/dist/style.scss

@@ -1,5 +1,5 @@
 /*!
- * Blue Web v1.20.0 (https://bruegmann.github.io/blue-web)
+ * Blue Web v1.21.1 (https://bruegmann.github.io/blue-web)
  * Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-web/blob/master/LICENSE).
 */
 
@@ -50,6 +50,7 @@
 @import "./styles/actions";
 @import "./styles/anchor";
 @import "./styles/scrollspy";
+@import "./styles/intro";
 
 @import "./styles/devexpress";
 @import "./styles/inter";

package/dist/styles/_action-menu.scss

@@ -4,7 +4,7 @@
             var(--bs-btn-padding-x, 0.75rem) + var(--bs-btn-border-width, 1px)
     );
 
-    max-height: $normal-size;
+    max-height: var(--blue-header-height);
     overflow: hidden;
 
     .blue-actions-menu {

package/dist/styles/_anchor.scss

@@ -34,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/_bootstrap.scss

@@ -46,12 +46,11 @@
 // Helpers
 @import "node_modules/bootstrap/scss/helpers";
 
-// Custom added utilities for Blue Web
+// Enable responsive for position
 $utilities: map-merge(
     $utilities,
     (
-        "position":
-            map-merge(
+        "position": map-merge(
                 map-get($utilities, "position"),
                 (
                     responsive: true

package/dist/styles/_buttons.scss

@@ -70,6 +70,11 @@
             $text-color: color-contrast($value);
         }
 
+        // More contrast for secondary plain button
+        @if $color == "secondary" {
+            $text-color: shade-color($value, 60%);
+        }
+
         @include button-variant(
             transparent,
             transparent,
@@ -96,6 +101,11 @@
                 $text-color: color-contrast($value);
             }
 
+            // More contrast for secondary plain button
+            @if $color == "secondary" {
+                $text-color: tint-color($value, 60%);
+            }
+
             @include button-variant(
                 transparent,
                 transparent,

package/dist/styles/_devexpress.scss

@@ -4,7 +4,7 @@
     --dxbl-text-edit-padding-x: 0.75rem !important;
     --dxbl-text-edit-padding-y: 0.375rem !important;
     --dxbl-text-edit-line-height: 1.5 !important;
-    --dxbl-text-edit-focus-shadow-spread: 0.25rem !important;
+    --dxbl-text-edit-focus-shadow-spread: #{$focus-ring-width} !important;
     --dxbl-listbox-border-radius: var(--bs-border-radius) !important;
     --dxbl-toolbar-font-size: var(--bs-body-font-size) !important;
     --dxbl-toolbar-btn-border-radius: var(--bs-border-radius) !important;

package/dist/styles/_general.scss

@@ -37,37 +37,18 @@ body {
     }
 }
 
-.sign-in-screen {
-    padding-top: $normal-size;
-
-    .sign-in-container {
-        animation: enabledBlueAppPage 0.5s;
-
-        @media (prefers-reduced-motion) {
-            animation-duration: 0s;
-        }
-    }
-
-    @media screen and (min-width: 768px) {
-        .sign-in-container {
-            padding: var(--blue-sign-in-container-md-padding, 0 calc(50% - 18rem));
-            width: var(--blue-sign-in-container-md-width, auto);
-        }
-    }
-}
-
-.blue-header-title.sidebar {
-    width: $bla-sidebar-width;
-    padding-left: calc(#{$normal-size} + #{$spacer});
-    transform: translateX(-100%);
-    transition: transform 0.4s;
-    background: var(--blue-sidebar-bg);
-    color: $sidebar-color;
-
-    @media (prefers-reduced-motion) {
-        transition: none;
-    }
-}
+// .blue-header-title.sidebar {
+//     width: $bla-sidebar-width;
+//     padding-left: calc(#{$normal-size} + #{$spacer});
+//     transform: translateX(-100%);
+//     transition: transform 0.4s;
+//     background: var(--blue-sidebar-bg);
+//     color: $sidebar-color;
+
+//     @media (prefers-reduced-motion) {
+//         transition: none;
+//     }
+// }
 
 .blue-scroll-shadow {
     @include scroll-shadow(var(--bs-body-bg));

package/dist/styles/_intro.scss

@@ -0,0 +1,22 @@
+.sign-in-screen {
+    padding-top: var(--blue-header-height);
+
+    &:last-child {
+        padding-bottom: var(--blue-header-height);
+    }
+
+    .sign-in-container {
+        animation: enabledBlueAppPage 0.5s;
+
+        @media (prefers-reduced-motion) {
+            animation-duration: 0s;
+        }
+    }
+
+    @media screen and (min-width: 768px) {
+        .sign-in-container {
+            padding: var(--blue-sign-in-container-md-padding, 0 calc(50% - 18rem));
+            width: var(--blue-sign-in-container-md-width, auto);
+        }
+    }
+}

package/dist/styles/_layout.scss

@@ -8,17 +8,13 @@
     --drawer-side-shadow:
         rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
         rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
-    --toggler-size: calc(
-        var(--bs-btn-border-width, 1px) + var(--bs-btn-padding-y, 0.375rem) +
-            (var(--bs-btn-font-size, 1rem) * var(--bs-btn-line-height, 1.5)) + var(--bs-btn-padding-y, 0.375rem) +
-            var(--bs-btn-border-width, 1px)
-    );
     --side-width: 18rem;
     --base-z-index: 0;
 
     --base-z-index: 500;
     --side-width: var(--blue-sidebar-width);
-    --toggler-size: var(--blue-menu-item-height);
+    --toggler-width: 2.714rem;
+    --toggler-height: var(--blue-header-height);
 
     --blue-menu-item-indicator-bg: #{color-contrast($sidebar-bg, $sidebar-indicator-color)};
     --bs-link-hover-color: #{color-contrast($sidebar-bg, $link-hover-color)};
@@ -27,15 +23,15 @@
     position: relative;
     display: grid;
 
-    grid-template-rows: var(--toggler-size) auto;
+    grid-template-rows: var(--toggler-height) auto;
     grid-template-areas: "header" "main";
 
     color: var(--blue-sidebar-color);
     background-color: var(--blue-sidebar-bg);
 
     &:has(> .blue-layout-toggle) {
-        grid-template-columns: 0 0 var(--toggler-size) calc(var(--side-width) - var(--toggler-size)) 1fr;
-        grid-template-rows: var(--toggler-size) auto;
+        grid-template-columns: 0 0 var(--toggler-width) calc(var(--side-width) - var(--toggler-width)) 1fr;
+        grid-template-rows: var(--toggler-height) auto;
         grid-template-areas:
             "state .    toggle header header"
             ".     side main   main   main";
@@ -99,6 +95,7 @@
 
     display: flex;
     justify-content: space-between;
+    align-items: center;
     position: relative;
     z-index: var(--blue-layout-header-z-index, 4);
     --blue-menu-item-dropdown-bg: var(--blue-sidebar-bg);
@@ -108,6 +105,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 +146,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

@@ -24,14 +24,16 @@
     }
 
     &::before {
+        --visual-padding: 0.125rem;
+
         content: "";
         position: absolute;
-        top: 0.125rem;
-        right: 0.125rem;
-        bottom: 0.125rem;
-        left: 0.125rem;
+        top: var(--visual-padding);
+        right: var(--visual-padding);
+        bottom: var(--visual-padding);
+        left: var(--visual-padding);
         background-color: currentColor;
-        border-radius: $border-radius;
+        border-radius: var(--bs-btn-border-radius);
         transform: scale(0.9);
         opacity: 0;
         transition: all 0.2s;
@@ -82,174 +84,3 @@
         display: none !important;
     }
 }
-
-// @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

@@ -27,16 +27,23 @@
 
     &::scroll-marker-group {
         display: flex;
+        overflow-x: auto;
+        overflow-y: hidden;
+        -ms-overflow-style: none;
+        scrollbar-width: none;
         min-height: calc(
             (var(--#{$prefix}nav-link-padding-y) + var(--#{$prefix}nav-tabs-border-width)) * 2 +
                 (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);
+            white-space: nowrap;
 
             font-size: var(--#{$prefix}nav-link-font-size);
             box-sizing: border-box;

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

@@ -105,6 +105,7 @@ $corner-shape: #{round} !default;
     --blue-sidebar-bg: #{$sidebar-bg};
     --blue-header-bg: #{$header-bg};
 
+    --blue-header-height: 3.429rem;
     --blue-header-color: #{$header-color};
     --blue-action-link-bg-color: var(--blue-theme);
     --blue-menu-item-indicator-bg: #{$sidebar-indicator-color};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "blue-web",
-    "version": "1.20.0",
+    "version": "1.21.1",
     "description": "UI components built on top of Bootstrap 5",
     "license": "LGPL-3.0-or-later",
     "type": "module",
@@ -36,7 +36,7 @@
         "bootstrap": "~5.3.8"
     },
     "devDependencies": {
-        "@astrojs/mdx": "^4.3.10",
+        "@astrojs/mdx": "^4.3.13",
         "@astrojs/react": "^4.4.2",
         "@babel/cli": "^7.10.4",
         "@babel/preset-env": "^7.10.4",
@@ -47,10 +47,10 @@
         "@types/react": "^19.0.8",
         "@types/react-dom": "^19.0.3",
         "@types/react-syntax-highlighter": "^13.5.0",
-        "astro": "^5.15.4",
+        "astro": "^5.16.5",
         "autoprefixer": "^10.3.6",
         "babel-loader": "^8.4.1",
-        "blue-react": "file:../blue-react/blue-react-10.2.1010.tgz",
+        "blue-react": "^11.0.2",
         "blue-themify": "^1.0.0",
         "colorjs.io": "^0.5.2",
         "gh-pages": "^3.1.0",