blue-web 1.15.1 → 1.16.1

package/dist/js/actions.bundle.js

@@ -1 +1 @@
-(()=>{"use strict";window.blueWeb=window.blueWeb||{},window.blueWeb.actions={init:function(e){let i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0,t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:void 0;function n(){for(const e of i.children)e.style.display="none";for(const e of t.children)e.style.display="",e.classList.add("BLUE-actions-collapse-visible");let n=0;for(const s of i.children){if(s.style.display="",t.children[n].style.display="none",t.children[n].classList.remove("BLUE-actions-collapse-visible"),e.scrollWidth>e.clientWidth){s.style.display="none",t.children[n].style.display="",t.children[n].classList.add("BLUE-actions-collapse-visible");break}n++}}i||(i=e.querySelector(".BLUE-actions-menu")),t||(t=e.querySelector(".BLUE-actions-collapse-menu")),n();const s=new ResizeObserver((()=>{requestAnimationFrame(n)}));s.observe(e);const l=i=>{if(!e)return;const t=e.querySelectorAll("details[open]");!t||t.length<=0||t.forEach((e=>{e.contains(i.target)||e.removeAttribute("open")}))};return document.addEventListener("click",l),{updateActions:n,resizeObserver:s,destroy(){s.disconnect(),document.removeEventListener("click",l)}}}}})();
+(()=>{"use strict";window.blueWeb=window.blueWeb||{},window.blueWeb.actions={init:function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:void 0;function s(){for(const e of t.children)e.style.display="none";for(const e of i.children)e.style.display="",e.classList.add("BLUE-actions-collapse-visible");let s=0;for(const n of t.children){if(n.style.display="",i.children[s].style.display="none",i.children[s].classList.remove("BLUE-actions-collapse-visible"),e.scrollWidth>e.clientWidth){n.style.display="none",i.children[s].style.display="",i.children[s].classList.add("BLUE-actions-collapse-visible");break}s++}}t||(t=e.querySelector(".BLUE-actions-menu")),i||(i=e.querySelector(".BLUE-actions-collapse-menu")),s();const n=()=>{requestAnimationFrame(s)},o=new ResizeObserver(n);o.observe(e);const l=new MutationObserver(n);l.observe(e,{attributes:!1,childList:!0,subtree:!0});const c=t=>{if(!e)return;const i=e.querySelectorAll("details[open]");!i||i.length<=0||i.forEach((e=>{e.contains(t.target)||e.removeAttribute("open")}))};return document.addEventListener("click",c),{updateActions:s,resizeObserver:o,mutationObserver:l,destroy(){o.disconnect(),l.disconnect(),document.removeEventListener("click",c)}}}}})();

package/dist/js/actions.d.ts

@@ -1,5 +1,6 @@
 export declare function init(actionsElement: HTMLElement, menu?: HTMLElement | undefined, collapseMenu?: HTMLElement | undefined): {
     updateActions: () => void;
     resizeObserver: ResizeObserver;
+    mutationObserver: MutationObserver;
     destroy(): void;
 };

package/dist/js/actions.js

@@ -31,10 +31,17 @@ export function init(actionsElement) {
     }
   }
   updateActions();
-  const resizeObserver = new ResizeObserver(() => {
+  const callback = () => {
     requestAnimationFrame(updateActions);
-  });
+  };
+  const resizeObserver = new ResizeObserver(callback);
   resizeObserver.observe(actionsElement);
+  const mutationObserver = new MutationObserver(callback);
+  mutationObserver.observe(actionsElement, {
+    attributes: false,
+    childList: true,
+    subtree: true
+  });
   const outsideClickHandler = event => {
     if (!actionsElement) return;
     const openDetails = actionsElement.querySelectorAll("details[open]");
@@ -49,8 +56,10 @@ export function init(actionsElement) {
   return {
     updateActions,
     resizeObserver,
+    mutationObserver,
     destroy() {
       resizeObserver.disconnect();
+      mutationObserver.disconnect();
       document.removeEventListener("click", outsideClickHandler);
     }
   };

package/dist/js/dialog.bundle.js

@@ -1 +1 @@
-(()=>{"use strict";var e={786:(e,n,t)=>{t.d(n,{k:()=>l});const o={Cancel:["Cancel","Abbrechen"],Yes:["Yes","Ja"],No:["No","Nein"],Message:["Message","Nachricht"],"Toggle menu":["Toggle menu","Menü umschalten"],"Close all":["Close all","Alle schließen"],Error:["Error","Fehler"],Information:["Information","Information"]};function l(e){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0,t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:void 0;return n=n||navigator.language.toLowerCase().indexOf("de")>-1?"de-DE":"en-US",t=t||o,t[e]?n.indexOf("de-")>-1?t[e][1]:t[e][0]:e}},762:(e,n,t)=>{function o(){return Math.floor(65536*(1+Math.random())).toString(16).substring(1)}t.d(n,{Os:()=>l});const l=()=>o()+o()+"-"+o()+"-"+o()+"-"+o()+"-"+o()+o()+o()}},n={};function t(o){var l=n[o];if(void 0!==l)return l.exports;var a=n[o]={exports:{}};return e[o](a,a.exports,t),a.exports}t.d=(e,n)=>{for(var o in n)t.o(n,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:n[o]})},t.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n);var o=t(762),l=t(786);async function a(e,n){let t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},{title:a=(0,l.k)("Message"),icon:i,switchPrimaryBtn:r=!1,acceptBtnText:s=("verify"===e?(0,l.k)("Yes"):"OK"),cancelBtnText:d=("verify"===e?(0,l.k)("No"):(0,l.k)("Cancel")),inputType:c="text"}=t;const u=(0,o.Os)();return document.getElementById(u)||document.body.insertAdjacentHTML("beforeend",`<dialog class="blue-modal modal" id="${u}" aria-labelledby="${u}-label">\n                <div class="modal-dialog">\n                    <div class="modal-content">\n                        <form>\n                            <div class="modal-header">\n                                ${i?`<div class="me-2">${i}</div>`:""}\n                                <h1 class="modal-title fs-5" id="${u}-label">${a}</h1>\n                                <button\n                                    type="button"\n                                    class="btn-close"\n                                    aria-label="${d}"\n                                    onclick="document.getElementById('${u}').close()"\n                                ></button>\n                            </div>\n                            <div class="modal-body">\n                                ${"ask"===e?`<label for="${u}-input">${n}</label>\n                                          <input type="${c}" id="${u}-input" class="form-control mt-3" />`:n}\n                            </div>\n                            <div class="modal-footer">\n                                ${"verify"===e||"ask"===e?`<button\n                                          type="button"\n                                          class="btn ${r?"btn-primary":"blue-btn-plain-primary"}"\n                                          onclick="document.getElementById('${u}').close()"\n                                      >\n                                          ${d}\n                                      </button>`:""}\n                                <button\n                                    type="submit"\n                                    class="btn ${r?"blue-btn-plain-primary":"btn-primary"}"\n                                >\n                                    ${s}\n                                </button>\n                            </div>\n                        </form>\n                    </div>\n                </div>\n\n                <form method="dialog" class="blue-modal-backdrop">\n                    <button>${d}</button>\n                </form>\n            </dialog>`),new Promise((n=>{const t=document.getElementById(u),o=()=>{const e=document.getElementById(u);e&&e.remove()};t?.showModal(),t?.addEventListener("close",(()=>{o(),n(!1)})),t?.querySelector(".modal-content > form")?.addEventListener("submit",(l=>{l.preventDefault(),"ask"===e&&(t.close(),o(),n((t?.querySelector("input")).value||"")),t.close(),o(),n(!0)}))}))}window.blueWeb=window.blueWeb||{},window.blueWeb.dialog={ask:async function(e){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return await a("ask",e,n)},tell:async function(e){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};await a("tell",e,n)},verify:async function(e){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return!0===await a("verify",e,n)}}})();
+(()=>{"use strict";var e={786:(e,n,t)=>{t.d(n,{k:()=>l});const o={Cancel:["Cancel","Abbrechen"],Yes:["Yes","Ja"],No:["No","Nein"],Message:["Message","Nachricht"],"Toggle menu":["Toggle menu","Menü umschalten"],"Close all":["Close all","Alle schließen"],Error:["Error","Fehler"],Information:["Information","Information"]};function l(e){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0,t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:void 0;return n=n||navigator.language.toLowerCase().indexOf("de")>-1?"de-DE":"en-US",t=t||o,t[e]?n.indexOf("de-")>-1?t[e][1]:t[e][0]:e}},762:(e,n,t)=>{function o(){return Math.floor(65536*(1+Math.random())).toString(16).substring(1)}t.d(n,{Os:()=>l});const l=()=>o()+o()+"-"+o()+"-"+o()+"-"+o()+"-"+o()+o()+o()}},n={};function t(o){var l=n[o];if(void 0!==l)return l.exports;var a=n[o]={exports:{}};return e[o](a,a.exports,t),a.exports}t.d=(e,n)=>{for(var o in n)t.o(n,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:n[o]})},t.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n);var o=t(762),l=t(786);async function a(e,n){let t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},{title:a=(0,l.k)("Message"),icon:i,switchPrimaryBtn:r=!1,acceptBtnText:s=("verify"===e?(0,l.k)("Yes"):"OK"),cancelBtnText:d=("verify"===e?(0,l.k)("No"):(0,l.k)("Cancel")),inputType:c="text",defaultValue:u}="string"==typeof t?JSON.parse(t):t;const m=(0,o.Os)();return document.getElementById(m)||document.body.insertAdjacentHTML("beforeend",`<dialog class="blue-modal modal" id="${m}" aria-labelledby="${m}-label">\n                <div class="modal-dialog">\n                    <div class="modal-content">\n                        <form>\n                            <div class="modal-header">\n                                ${i?`<div class="me-2">${i}</div>`:""}\n                                <h1 class="modal-title fs-5" id="${m}-label">${a}</h1>\n                                <button\n                                    type="button"\n                                    class="btn-close"\n                                    aria-label="${d}"\n                                    onclick="document.getElementById('${m}').close()"\n                                ></button>\n                            </div>\n                            <div class="modal-body">\n                                ${"ask"===e?`<label for="${m}-input">${n}</label>\n                                          <input\n                                              type="${c}"\n                                              ${void 0!==u?` value="${u}"`:""}\n                                              id="${m}-input"\n                                              class="form-control mt-3"\n                                          />`:n}\n                            </div>\n                            <div class="modal-footer">\n                                ${"verify"===e||"ask"===e?`<button\n                                          type="button"\n                                          class="btn ${r?"btn-primary":"blue-btn-plain-primary"}"\n                                          onclick="document.getElementById('${m}').close()"\n                                      >\n                                          ${d}\n                                      </button>`:""}\n                                <button\n                                    type="submit"\n                                    class="btn ${r?"blue-btn-plain-primary":"btn-primary"}"\n                                >\n                                    ${s}\n                                </button>\n                            </div>\n                        </form>\n                    </div>\n                </div>\n\n                <form method="dialog" class="blue-modal-backdrop">\n                    <button>${d}</button>\n                </form>\n            </dialog>`),new Promise((n=>{const t=document.getElementById(m),o=()=>{const e=document.getElementById(m);e&&e.remove()};t?.showModal(),t?.addEventListener("close",(()=>{o(),n(!1)})),t?.querySelector(".modal-content > form")?.addEventListener("submit",(l=>{l.preventDefault(),"ask"===e&&(t.close(),o(),n((t?.querySelector("input")).value||"")),t.close(),o(),n(!0)}))}))}window.blueWeb=window.blueWeb||{},window.blueWeb.dialog={ask:async function(e){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return await a("ask",e,n)},tell:async function(e){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};await a("tell",e,n)},verify:async function(e){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return!0===await a("verify",e,n)}}})();

package/dist/js/dialog.d.ts

@@ -6,10 +6,11 @@ export interface DialogOptions {
     acceptBtnText?: string;
     cancelBtnText?: string;
     inputType?: string;
+    defaultValue?: string;
 }
-export declare function ask(text: string, options?: DialogOptions): Promise<string | boolean>;
-export declare function tell(text: string, options?: DialogOptions): Promise<void>;
-export declare function verify(text: string, options?: DialogOptions): Promise<boolean>;
+export declare function ask(text: string, options?: DialogOptions | string): Promise<string | boolean>;
+export declare function tell(text: string, options?: DialogOptions | string): Promise<void>;
+export declare function verify(text: string, options?: DialogOptions | string): Promise<boolean>;
 declare global {
     interface Window {
         blueWeb: any;

package/dist/js/dialog.js

@@ -20,8 +20,9 @@ async function dialog(dialogType, text) {
     switchPrimaryBtn = false,
     acceptBtnText = dialogType === "verify" ? getPhrase("Yes") : "OK",
     cancelBtnText = dialogType === "verify" ? getPhrase("No") : getPhrase("Cancel"),
-    inputType = "text"
-  } = options;
+    inputType = "text",
+    defaultValue
+  } = typeof options === "string" ? JSON.parse(options) : options;
   const id = guid();
   const addToDom = () => {
     document.body.insertAdjacentHTML("beforeend", /* HTML */`<dialog class="blue-modal modal" id="${id}" aria-labelledby="${id}-label">
@@ -40,7 +41,12 @@ async function dialog(dialogType, text) {
                             </div>
                             <div class="modal-body">
                                 ${dialogType === "ask" ? /* HTML */`<label for="${id}-input">${text}</label>
-                                          <input type="${inputType}" id="${id}-input" class="form-control mt-3" />` : text}
+                                          <input
+                                              type="${inputType}"
+                                              ${defaultValue !== undefined ? ` value="${defaultValue}"` : ""}
+                                              id="${id}-input"
+                                              class="form-control mt-3"
+                                          />` : text}
                             </div>
                             <div class="modal-footer">
                                 ${dialogType === "verify" || dialogType === "ask" ? /* HTML */`<button

package/dist/merged.scss

@@ -1,12 +1,12 @@
 /*!
- * Blue Web v1.15.1 (https://bruegmann.github.io/blue-web)
+ * Blue Web v1.16.1 (https://bruegmann.github.io/blue-web)
  * Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-web/blob/master/LICENSE).
 */
 
 // Main color theme. E.g. used for background for body and sidebar.
 $theme: hsl(217deg 10% 94%) !default;
 $theme-dark: hsl(217deg 10% 8%) !default;
-$primary: hsl(217deg 91% 50%) !default;
+$primary: hsl(221, 97%, 53%) !default;
 $white: #fff !default;
 $gray-100: hsl(217deg 17% 98%) !default;
 $gray-200: hsl(217deg 16% 93%) !default;
@@ -3376,17 +3376,23 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
 @mixin box-shadow($shadow...) {
   @if $enable-shadows {
     $result: ();
+    $has-single-value: false;
+    $single-value: null;
 
     @each $value in $shadow {
       @if $value != null {
-        $result: append($result, $value, "comma");
-      }
-      @if $value == none and length($shadow) > 1 {
-        @warn "The keyword 'none' must be used as a single argument.";
+        @if $value == none or $value == initial or $value == inherit or $value == unset {
+          $has-single-value: true;
+          $single-value: $value;
+        } @else {
+          $result: append($result, $value, "comma");
+        }
       }
     }
 
-    @if (length($result) > 0) {
+    @if $has-single-value {
+      box-shadow: $single-value;
+    } @else if (length($result) > 0) {
       box-shadow: $result;
     }
   }
@@ -4167,7 +4173,7 @@ $sidebar-expanded-breakpoint: 1400px !default;
 
 @mixin bsBanner($file) {
   /*!
-   * Bootstrap #{$file} v5.3.6 (https://getbootstrap.com/)
+   * Bootstrap #{$file} v5.3.7 (https://getbootstrap.com/)
    * Copyright 2011-2025 The Bootstrap Authors
    * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
    */
@@ -10924,6 +10930,13 @@ body {
     @include scroll-shadow(var(--bs-body-bg));
 }
 
+// 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;
+}
+
 .blue-loading {
     background-color: $primary;
 }
@@ -12189,7 +12202,8 @@ dialog.blue-modal:has(.offcanvas-start) {
 .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;
@@ -12226,6 +12240,10 @@ dialog.blue-modal:has(.offcanvas-start) {
     position: absolute;
 }
 
+.BLUE-actions-collapse-menu:popover-open {
+    display: var(--display);
+}
+
 .blue-anchor {
     anchor-name: var(--blue-anchor-name, --anchor-1);
 }
@@ -12263,6 +12281,78 @@ dialog.blue-modal:has(.offcanvas-start) {
     }
 }
 
+.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;
+    }
+}
+
 
 /* Make DevExpress components look more like Bootstrap/Blue */
 [class^="dxbl-"] {