blue-web 1.15.0 → 1.16.0

package/dist/style.scss

@@ -1,5 +1,5 @@
 /*!
- * Blue Web v1.15.0 (https://bruegmann.github.io/blue-web)
+ * Blue Web v1.16.0 (https://bruegmann.github.io/blue-web)
  * Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-web/blob/master/LICENSE).
 */
 
@@ -15,19 +15,28 @@
 
 @import "./styles/bootstrap";
 
-// Per CSS-Variablen überschreibbar machen, da es von Bootstrap aus noch nicht möglich ist.
-// Bei neuer Bootstrap-Version prüfen, ob es noch nötig ist.
+// Make it overridable via CSS variables, as it is not yet possible in Bootstrap.
+// Check with a newer Bootstrap version to see if it is still necessary.
 .form-check-input:checked {
     background-color: var(--bs-primary, #{$form-check-input-checked-bg-color});
     border-color: var(--bs-primary, #{$form-check-input-checked-border-color});
 }
 
+// Resets cursor from Bootstrap' _reboot.scss based on option.
+@if ($enable-button-pointers: false) {
+    summary,
+    [role="button"] {
+        cursor: unset;
+    }
+}
+
 @import "./styles/text-icons";
 @import "./styles/general";
+@import "./styles/utils";
 @import "./styles/status";
 @import "./styles/menu-item";
 @import "./styles/page-header";
-@import "./styles/search";
+@import "./styles/input-group";
 @import "./styles/action-menu";
 @import "./styles/caret";
 @import "./styles/tooltips";
@@ -41,6 +50,7 @@
 @import "./styles/collapse";
 @import "./styles/actions";
 @import "./styles/anchor";
+@import "./styles/scrollspy";
 
 @import "./styles/devexpress";
 @import "./styles/inter";

package/dist/styles/_bootstrap-variables.scss

@@ -41,3 +41,5 @@ $link-hover-decoration: underline !default;
 // In a future Bootstrap release, this might not be necessary anymore.
 $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;

package/dist/styles/_collapse.scss

@@ -60,7 +60,8 @@
 .blue-collapse-group {
     display: grid;
     grid-template-rows: auto;
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr);
+    max-width: 100%;
 
     & > details {
         display: contents;

package/dist/styles/_devexpress.css

@@ -23,6 +23,10 @@
     font-size: 1rem;
 }
 
+.dxbl-pager-page-edit {
+    min-width: 2.5em;
+}
+
 .dxbl-toolbar {
     --dxbl-toolbar-font-size: var(--bs-body-font-size) !important;
     font-size: var(--dxbl-toolbar-font-size);

package/dist/styles/_input-group.scss

@@ -0,0 +1,29 @@
+.blue-input-group {
+    border: $input-border-width solid $input-border-color;
+    border-radius: $input-border-radius;
+    background-color: $input-bg;
+
+    &.focus,
+    &:has(input:focus) {
+        box-shadow: $input-btn-focus-box-shadow;
+        border-color: $input-focus-border-color;
+
+        .input-group-text {
+            color: #{var(--bs-primary-text-emphasis)};
+        }
+    }
+
+    .input-group-text {
+        border-color: transparent;
+        background-color: transparent;
+    }
+
+    .form-control {
+        border: none;
+        background-color: transparent !important;
+
+        &:focus {
+            box-shadow: none;
+        }
+    }
+}

package/dist/styles/_scrollspy.scss

@@ -0,0 +1,71 @@
+.blue-scrollspy {
+    --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x * 0.5};
+    --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y * 0.5};
+    @include rfs(0.875rem, --#{$prefix}nav-link-font-size);
+    --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
+    --#{$prefix}nav-link-color: #{$nav-link-color};
+    --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
+    --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};
+
+    --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
+    --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
+    --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
+    --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
+    --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
+    --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
+    --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};
+
+    @media (prefers-reduced-motion: no-preference) {
+        scroll-behavior: smooth;
+    }
+
+    overflow-y: auto;
+    overscroll-behavior-y: contain;
+    scroll-snap-type: y mandatory;
+
+    scroll-marker-group: before;
+
+    &::scroll-marker-group {
+        display: flex;
+        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;
+    }
+
+    & > section {
+        &::scroll-marker {
+            content: attr(aria-label);
+
+            font-size: var(--#{$prefix}nav-link-font-size);
+            box-sizing: border-box;
+            text-decoration: none;
+
+            padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);
+            border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
+
+            border-radius: var(--#{$prefix}nav-tabs-border-radius);
+
+            &:is(:hover, :focus) {
+                border-color: var(--#{$prefix}nav-tabs-link-hover-border-color);
+            }
+
+            &:target-current,
+            &:is(:active) {
+                color: var(--#{$prefix}nav-tabs-link-active-color);
+                background-color: var(--#{$prefix}nav-tabs-link-active-bg);
+                border-color: var(--#{$prefix}border-color);
+            }
+        }
+    }
+}
+
+.blue-scrollspy-after {
+    scroll-marker-group: after;
+
+    &::scroll-marker-group {
+        margin-bottom: 0;
+        margin-top: 0.25rem;
+    }
+}

package/dist/styles/_tabs.scss

@@ -12,10 +12,13 @@
 
     position: relative;
     order: 0;
-    cursor: pointer;
     user-select: none;
     -webkit-appearance: none;
     appearance: none;
+
+    @if ($enable-button-pointers) {
+        cursor: pointer;
+    }
 }
 
 .blue-tab::before {

package/dist/styles/_utils.scss

@@ -0,0 +1,6 @@
+// Sets `margin: 0` to last child.
+// Useful for creating a gap between items together with `mb-3`.
+// Inspired by Tailwind CSS class `last:m-0`.
+.m-last-0:last-child {
+    margin: 0 !important;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "blue-web",
-    "version": "1.15.0",
+    "version": "1.16.0",
     "description": "UI components built on top of Bootstrap 5",
     "license": "LGPL-3.0-or-later",
     "type": "module",
@@ -36,8 +36,8 @@
         "bootstrap": "~5.3.6"
     },
     "devDependencies": {
-        "@astrojs/mdx": "^4.2.3",
-        "@astrojs/react": "^4.2.3",
+        "@astrojs/mdx": "^4.3.0",
+        "@astrojs/react": "^4.3.0",
         "@babel/cli": "^7.10.4",
         "@babel/preset-env": "^7.10.4",
         "@babel/preset-typescript": "^7.9.0",
@@ -46,7 +46,7 @@
         "@types/react": "^19.0.8",
         "@types/react-dom": "^19.0.3",
         "@types/react-syntax-highlighter": "^13.5.0",
-        "astro": "^5.6.1",
+        "astro": "^5.10.2",
         "autoprefixer": "^10.3.6",
         "babel-loader": "^8.4.1",
         "blue-react": "^10.1.1",

package/dist/styles/_search.scss

@@ -1,66 +0,0 @@
-.blue-search {
-    display: flex;
-    align-items: center;
-    border: $input-border-width solid $input-border-color;
-    border-radius: $input-border-radius;
-    background-color: $input-bg;
-
-    &.blue-search-body {
-        border: 1px solid $input-border-color;
-
-        .blue-search-input-group {
-            display: flex;
-        }
-
-        &.focus {
-            box-shadow: $input-btn-focus-box-shadow;
-        }
-    }
-
-    &.focus {
-        box-shadow: inset $input-btn-focus-box-shadow;
-    }
-}
-
-.blue-sidebar .blue-search:not(.blue-search-body) {
-    margin-left: map-get($spacers, 1);
-    margin-right: map-get($spacers, 1);
-}
-
-.blue-search-input-group {
-    display: none;
-
-    .input-group-text {
-        border-color: transparent;
-        background-color: transparent;
-    }
-}
-
-.blue-search-control {
-    border: none;
-    background-color: transparent !important;
-
-    &:focus {
-        box-shadow: none;
-    }
-}
-
-.blue-search-reset-btn {
-    color: rgba($input-color, 0.7);
-
-    &:hover {
-        color: $input-color;
-    }
-}
-
-.blue-search.blue-search-sidebar {
-    transition: opacity 0.2s ease-in-out;
-
-    @media (prefers-reduced-motion) {
-        transition: none;
-    }
-}
-
-.blue-search.blue-search-sidebar:not(:hover):not(.focus) {
-    opacity: 0.7;
-}