blue-web 1.21.0 → 1.21.1

package/dist/js/odometer.bundle.js

@@ -1 +1 @@
-(()=>{"use strict";var t={};t.d=(e,n)=>{for(var i in n)t.o(n,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},t.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e);class e extends HTMLElement{static get observedAttributes(){return["value","max"]}constructor(){var t,e,n;super(),t=this,n=!1,(e=function(t){var e=function(t){if("object"!=typeof t||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var n=e.call(t,"string");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==typeof e?e:e+""}(e="_initialized"))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,this.attachShadow({mode:"open"})}connectedCallback(){this._initialized||(this.setup(),this._initialized=!0,this.updateValue(this.value))}setup(){const t=document.createElement("style");t.textContent="\n        :host {\n          display: inline-flex;\n          min-width: 1em;\n          height: 1em;\n          text-align: center;\n          overflow: hidden;\n          line-height: 1em;\n          transition: background-color 0.3s;\n        }\n        .numbers {\n          display: flex;\n          flex-direction: column;\n          transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n        }\n        .numbers span {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          height: 1em;\n        }";const e=document.createElement("span");e.classList.add("numbers"),e.setAttribute("aria-hidden","true"),this.shadowRoot.append(t,e),this.wrapper=e,this.rebuildNumbers()}rebuildNumbers(){this.wrapper.innerHTML="";const t=this.max;for(let e=0;e<=t;e++){const t=document.createElement("span");t.textContent=String(e),this.wrapper.appendChild(t)}const e=document.createElement("span");e.textContent="".concat(t,"+"),this.wrapper.appendChild(e),this._initialized&&this.updateValue(this.value)}attributeChangedCallback(t,e,n){n!==e&&this._initialized&&("value"===t?this.updateValue(parseInt(null!=n?n:"0",10)):"max"===t&&this.rebuildNumbers())}updateValue(t){const e=this.max,n=t>e?e+1:Math.max(0,t),i=this.wrapper.getBoundingClientRect().height||16;this.wrapper.style.transform="translateY(-".concat(n*i,"px)");const a=t>e?"".concat(e,"+"):"".concat(t);this.setAttribute("aria-label",a)}set value(t){this.value!==t&&(this.setAttribute("value",String(t)),this._initialized&&(this.updateValue(t),this.dispatchEvent(new CustomEvent("change",{detail:{value:t},bubbles:!0,composed:!0}))))}get value(){return parseInt(this.getAttribute("value")||"0",10)||0}set max(t){this.setAttribute("max",String(t))}get max(){return parseInt(this.getAttribute("max")||"9",10)||9}}customElements.get("bl-odometer")||customElements.define("bl-odometer",e)})();
+(()=>{"use strict";var e={};function t(e,t,i){return(t=function(e){var t=function(e){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var i=t.call(e,"string");if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}e.d=(t,i)=>{for(var n in i)e.o(i,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:i[n]})},e.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);class i extends HTMLElement{static get observedAttributes(){return["value","max"]}constructor(){super(),t(this,"_initialized",!1),t(this,"_resetTimer",null),this.attachShadow({mode:"open"})}connectedCallback(){this._initialized||(this.setup(),this._initialized=!0,this.updateValue(this.value))}setup(){const e=document.createElement("style");e.textContent="\n        :host {\n          display: inline-flex;\n          min-width: 1em;\n          height: 1em;\n          text-align: center;\n          overflow: hidden;\n          line-height: 1em;\n        }\n        .numbers {\n          display: flex;\n          flex-direction: column;\n          transition: transform var(--bl-odometer-duration, 0.4s) cubic-bezier(0.34, 1.56, 0.64, 1);\n        }\n        .numbers span {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          height: 1em;\n        }";const t=document.createElement("span");t.classList.add("numbers"),t.setAttribute("aria-hidden","true"),this.shadowRoot.append(e,t),this.wrapper=t,this.rebuildNumbers()}rebuildNumbers(){this.wrapper.innerHTML="";const e=this.max;for(let t=0;t<=e;t++){const e=document.createElement("span");e.textContent=String(t),this.wrapper.appendChild(e)}const t=document.createElement("span");t.textContent="".concat(e,"+"),this.wrapper.appendChild(t),this._initialized&&this.updateValue(this.value)}attributeChangedCallback(e,t,i){if(i!==t&&this._initialized)if("value"===e){const e=parseInt(null!=t?t:"0",10)||0,n=parseInt(null!=i?i:"0",10)||0;this.applyChangeState(e,n),this.updateValue(n)}else"max"===e&&this.rebuildNumbers()}updateValue(e){const t=this.max,i=e>t?t+1:Math.max(0,e),n=this.wrapper.getBoundingClientRect().height||16;this.wrapper.style.transform="translateY(-".concat(i*n,"px)");const r=e>t?"".concat(t,"+"):"".concat(e);this.setAttribute("aria-label",r)}clearResetTimer(){null!==this._resetTimer&&(clearTimeout(this._resetTimer),this._resetTimer=null)}scheduleResetChange(){this.clearResetTimer(),this._resetTimer=window.setTimeout(()=>{this.removeAttribute("data-change"),this._resetTimer=null},3e3)}applyChangeState(e,t){t>e?(this.setAttribute("data-change","up"),this.scheduleResetChange()):t<e&&(this.setAttribute("data-change","down"),this.scheduleResetChange())}set value(e){this.value!==e&&(this.setAttribute("value",String(e)),this._initialized&&this.dispatchEvent(new CustomEvent("change",{detail:{value:e},bubbles:!0,composed:!0})))}get value(){return parseInt(this.getAttribute("value")||"0",10)||0}set max(e){this.setAttribute("max",String(e))}get max(){return parseInt(this.getAttribute("max")||"9",10)||9}}customElements.get("bl-odometer")||customElements.define("bl-odometer",i)})();

package/dist/js/odometer.d.ts

@@ -1,6 +1,16 @@
+/**
+ * Odometer web component for animated number display
+ *
+ * @element bl-odometer
+ * @attr {number} value - Current value to display
+ * @attr {number} max - Maximum value before showing "+"
+ * @fires change - Fired when value changes
+ * @cssprop --bl-odometer-duration - Transition duration for number animation (default: 0.4s)
+ */
 declare class Odometer extends HTMLElement {
     private wrapper;
     private _initialized;
+    private _resetTimer;
     static get observedAttributes(): string[];
     constructor();
     connectedCallback(): void;
@@ -8,6 +18,9 @@ declare class Odometer extends HTMLElement {
     private rebuildNumbers;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     private updateValue;
+    private clearResetTimer;
+    private scheduleResetChange;
+    private applyChangeState;
     set value(value: number);
     get value(): number;
     set max(value: number);

package/dist/js/odometer.js

@@ -1,6 +1,15 @@
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
+ * Odometer web component for animated number display
+ *
+ * @element bl-odometer
+ * @attr {number} value - Current value to display
+ * @attr {number} max - Maximum value before showing "+"
+ * @fires change - Fired when value changes
+ * @cssprop --bl-odometer-duration - Transition duration for number animation (default: 0.4s)
+ */
 class Odometer extends HTMLElement {
   static get observedAttributes() {
     return ["value", "max"];
@@ -8,6 +17,7 @@ class Odometer extends HTMLElement {
   constructor() {
     super();
     _defineProperty(this, "_initialized", false);
+    _defineProperty(this, "_resetTimer", null);
     this.attachShadow({
       mode: "open"
     });
@@ -22,7 +32,7 @@ class Odometer extends HTMLElement {
   }
   setup() {
     const style = document.createElement("style");
-    style.textContent = /* CSS */"\n        :host {\n          display: inline-flex;\n          min-width: 1em;\n          height: 1em;\n          text-align: center;\n          overflow: hidden;\n          line-height: 1em;\n          transition: background-color 0.3s;\n        }\n        .numbers {\n          display: flex;\n          flex-direction: column;\n          transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n        }\n        .numbers span {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          height: 1em;\n        }";
+    style.textContent = /* CSS */"\n        :host {\n          display: inline-flex;\n          min-width: 1em;\n          height: 1em;\n          text-align: center;\n          overflow: hidden;\n          line-height: 1em;\n        }\n        .numbers {\n          display: flex;\n          flex-direction: column;\n          transition: transform var(--bl-odometer-duration, 0.4s) cubic-bezier(0.34, 1.56, 0.64, 1);\n        }\n        .numbers span {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          height: 1em;\n        }";
     const wrapper = document.createElement("span");
     wrapper.classList.add("numbers");
     wrapper.setAttribute("aria-hidden", "true");
@@ -50,7 +60,10 @@ class Odometer extends HTMLElement {
   attributeChangedCallback(name, oldValue, newValue) {
     if (newValue !== oldValue && this._initialized) {
       if (name === "value") {
-        this.updateValue(parseInt(newValue !== null && newValue !== void 0 ? newValue : "0", 10));
+        const prev = parseInt(oldValue !== null && oldValue !== void 0 ? oldValue : "0", 10) || 0;
+        const next = parseInt(newValue !== null && newValue !== void 0 ? newValue : "0", 10) || 0;
+        this.applyChangeState(prev, next);
+        this.updateValue(next);
       } else if (name === "max") {
         this.rebuildNumbers();
       }
@@ -64,12 +77,34 @@ class Odometer extends HTMLElement {
     const displayValue = value > max ? "".concat(max, "+") : "".concat(value);
     this.setAttribute("aria-label", displayValue);
   }
+  clearResetTimer() {
+    if (this._resetTimer !== null) {
+      clearTimeout(this._resetTimer);
+      this._resetTimer = null;
+    }
+  }
+  scheduleResetChange() {
+    this.clearResetTimer();
+    const delay = 3000;
+    this._resetTimer = window.setTimeout(() => {
+      this.removeAttribute("data-change");
+      this._resetTimer = null;
+    }, delay);
+  }
+  applyChangeState(previous, next) {
+    if (next > previous) {
+      this.setAttribute("data-change", "up");
+      this.scheduleResetChange();
+    } else if (next < previous) {
+      this.setAttribute("data-change", "down");
+      this.scheduleResetChange();
+    }
+  }
   set value(value) {
     const current = this.value;
     if (current !== value) {
       this.setAttribute("value", String(value));
       if (this._initialized) {
-        this.updateValue(value);
         this.dispatchEvent(new CustomEvent("change", {
           detail: {
             value

package/dist/merged.scss

@@ -1,5 +1,5 @@
 /*!
- * Blue Web v1.21.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).
 */
 
@@ -3758,6 +3758,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};
@@ -10728,12 +10729,11 @@ textarea {
 
 
 
-// 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
@@ -10864,37 +10864,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;
+// .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;
-    }
-}
+//     @media (prefers-reduced-motion) {
+//         transition: none;
+//     }
+// }
 
 .blue-scroll-shadow {
     @include scroll-shadow(var(--bs-body-bg));
@@ -11079,14 +11060,16 @@ body {
     }
 
     &::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;
@@ -11138,177 +11121,6 @@ body {
     }
 }
 
-// @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%;
-// }
-
 .blue-header-title {
     a {
         color: inherit;
@@ -11360,7 +11172,7 @@ body {
             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 {
@@ -11702,6 +11514,11 @@ body {
             $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,
@@ -11728,6 +11545,11 @@ body {
                 $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,
@@ -12012,17 +11834,13 @@ dialog.blue-modal:has(.offcanvas-start) {
     --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)};
@@ -12031,15 +11849,15 @@ dialog.blue-modal:has(.offcanvas-start) {
     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";
@@ -12103,6 +11921,7 @@ dialog.blue-modal:has(.offcanvas-start) {
 
     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);
@@ -12364,6 +12183,10 @@ dialog.blue-modal:has(.offcanvas-start) {
 
     &::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))
@@ -12376,6 +12199,7 @@ dialog.blue-modal:has(.offcanvas-start) {
     & > :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;
@@ -12409,6 +12233,29 @@ dialog.blue-modal:has(.offcanvas-start) {
     }
 }
 
+.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);
+        }
+    }
+}
+
 
 /* Make DevExpress components look more like Bootstrap/Blue */
 [class^="dxbl-"] {
@@ -12416,7 +12263,7 @@ dialog.blue-modal:has(.offcanvas-start) {
     --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;