@bagelink/vue 1.15.34 → 1.15.38

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.15.34",
+  "version": "1.15.38",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

package/src/styles/appearance.css

@@ -1,135 +1,135 @@
 .opacity-0 {
-    opacity: 0 !important;
+    opacity: 0;
 }
 
 .opacity-1 {
-    opacity: 0.1 !important;
+    opacity: 0.1;
 }
 
 .opacity-2 {
-    opacity: 0.2 !important;
+    opacity: 0.2;
 }
 
 .opacity-3 {
-    opacity: 0.3 !important;
+    opacity: 0.3;
 }
 
 .opacity-4 {
-    opacity: 0.4 !important;
+    opacity: 0.4;
 }
 
 .opacity-5 {
-    opacity: 0.5 !important;
+    opacity: 0.5;
 }
 
 .opacity-6 {
-    opacity: 0.6 !important;
+    opacity: 0.6;
 }
 
 .opacity-7 {
-    opacity: 0.7 !important;
+    opacity: 0.7;
 }
 
 .opacity-8 {
-    opacity: 0.8 !important;
+    opacity: 0.8;
 }
 
 .opacity-9 {
-    opacity: 0.9 !important;
+    opacity: 0.9;
 }
 
 .opacity-10 {
-    opacity: 1 !important;
+    opacity: 1;
 }
 
 .-z-index-1,
 .-z-1 {
-    z-index: -1 !important;
+    z-index: -1;
 }
 
 .z-index-0,
 .z-0 {
-    z-index: 0 !important;
+    z-index: 0;
 }
 
 .z-index-1,
 .z-1 {
-    z-index: 1 !important;
+    z-index: 1;
 }
 
 .z-index-2,
 .z-2 {
-    z-index: 2 !important;
+    z-index: 2;
 }
 
 .z-index-3,
 .z-3 {
-    z-index: 3 !important;
+    z-index: 3;
 }
 
 .z-index-4,
 .z-4 {
-    z-index: 4 !important;
+    z-index: 4;
 }
 
 .z-index-5,
 .z-5 {
-    z-index: 5 !important;
+    z-index: 5;
 }
 
 .z-index-9,
 .z-9 {
-    z-index: 9 !important;
+    z-index: 9;
 }
 
 .z-index-99,
 .z-99 {
-    z-index: 99 !important;
+    z-index: 99;
 }
 
 .z-index-999,
 .z-999 {
-    z-index: 999 !important;
+    z-index: 999;
 }
 
 .z-index-9999,
 .z-9999 {
-    z-index: 9999 !important;
+    z-index: 9999;
 }
 
 .pointer-events-none {
-    pointer-events: none !important;
+    pointer-events: none;
 }
 
 .pointer-events-all {
-    pointer-events: all !important;
+    pointer-events: all;
 }
 
 .cover,
 .object-fit-cover {
-    object-fit: cover !important;
+    object-fit: cover;
 }
 
 .contain,
 .object-fit-contain {
-    object-fit: contain !important;
+    object-fit: contain;
 }
 
 .scale-down,
 .object-fit-scale-down {
-    object-fit: scale-down !important;
+    object-fit: scale-down;
 }
 
 .object-position-top {
-    object-position: top !important;
+    object-position: top;
 }
 
 .object-position-center {
-    object-position: center !important;
+    object-position: center;
 }
 
 .object-position-bottom {
-    object-position: bottom !important;
+    object-position: bottom;
 }
 
 .shadow-10 {
@@ -154,7 +154,7 @@
 }
 
 .shadow-txt {
-    filter: drop-shadow(0 0 10px var(--bgl-black-tint)) !important;
+    filter: drop-shadow(0 0 10px var(--bgl-black-tint));
 }
 
 .border-color-unset {
@@ -212,51 +212,51 @@
 }
 
 .border-top-none {
-    border-top: none
+    border-top: none !important
 }
 
 .border-start-none {
-    border-inline-start: none
+    border-inline-start: none !important
 }
 
 .border-end-none {
-    border-inline-end: none
+    border-inline-end: none !important
 }
 
 .border-none {
-    border: none
+    border: none !important
 }
 
 .last-border-none:last-child {
-    border-bottom: none !important;
+    border-bottom: none;
 }
 
 .border-inner-bottom-none>* {
-    border-bottom: none
+    border-bottom: none !important
 }
 
 .border-inner-top-none>* {
-    border-top: none
+    border-top: none !important
 }
 
 .border-inner-start-none>* {
-    border-inline-start: none
+    border-inline-start: none !important
 }
 
 .border-inner-end-none>* {
-    border-inline-end: none
+    border-inline-end: none !important
 }
 
 .border-inner-none>* {
-    border: none
+    border: none !important
 }
 
 .user-select-none {
-    user-select: none !important;
+    user-select: none;
 }
 
 .user-select-all {
-    user-select: all !important;
+    user-select: all;
 }
 
 .rotateY-180 {
@@ -268,65 +268,65 @@
 }
 
 .scrollbar-gutter {
-    scrollbar-gutter: stable !important;
+    scrollbar-gutter: stable;
 }
 
 .scrollbar-gutter-auto {
-    scrollbar-gutter: auto !important;
+    scrollbar-gutter: auto;
 }
 
 .scrollbar-gutter-stable-both,
 .scrollbar-gutter-both {
-    scrollbar-gutter: stable both-edges !important;
+    scrollbar-gutter: stable both-edges;
 }
 
 .mix-blend-mode-multiply {
-    mix-blend-mode: multiply !important;
+    mix-blend-mode: multiply;
 }
 
 .mix-blend-mode-screen {
-    mix-blend-mode: screen !important;
+    mix-blend-mode: screen;
 }
 
 .mix-blend-mode-overlay {
-    mix-blend-mode: overlay !important;
+    mix-blend-mode: overlay;
 }
 
 .mix-blend-mode-darken {
-    mix-blend-mode: darken !important;
+    mix-blend-mode: darken;
 }
 
 .mix-blend-mode-lighten {
-    mix-blend-mode: lighten !important;
+    mix-blend-mode: lighten;
 }
 
 .mix-blend-mode-color-dodge {
-    mix-blend-mode: color-dodge !important;
+    mix-blend-mode: color-dodge;
 }
 
 .mix-blend-mode-color-burn {
-    mix-blend-mode: color-burn !important;
+    mix-blend-mode: color-burn;
 }
 
 .mix-blend-mode-hard-light {
-    mix-blend-mode: hard-light !important;
+    mix-blend-mode: hard-light;
 }
 
 .mix-blend-mode-soft-light {
-    mix-blend-mode: soft-light !important;
+    mix-blend-mode: soft-light;
 }
 
 .mix-blend-mode-none,
 .mix-blend-mode-normal {
-    mix-blend-mode: normal !important;
+    mix-blend-mode: normal;
 }
 
 .v-popper--theme-tooltip .v-popper__inner {
     background: var(--bgl-tooltip-bg) !important;
     color: var(--bgl-tooltip-color) !important;
-    font-size: var(--bgl-tooltip-font-size) !important;
-    padding: var(--bgl-tooltip-padding) !important;
-    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1) !important;
+    font-size: var(--bgl-tooltip-font-size);
+    padding: var(--bgl-tooltip-padding);
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
 }
 
 .v-popper--theme-tooltip .v-popper__arrow-outer {
@@ -335,144 +335,144 @@
 
 @media screen and (max-width: 910px) {
     .m_scrollbar-gutter {
-        scrollbar-gutter: stable !important;
+        scrollbar-gutter: stable;
     }
 
     .m_scrollbar-gutter-auto {
-        scrollbar-gutter: auto !important;
+        scrollbar-gutter: auto;
     }
 
     .m_scrollbar-gutter-stable-both {
-        scrollbar-gutter: stable both-edges !important;
+        scrollbar-gutter: stable both-edges;
     }
 
     .m_opacity-0 {
-        opacity: 0 !important;
+        opacity: 0;
     }
 
     .m_opacity-1 {
-        opacity: 0.1 !important;
+        opacity: 0.1;
     }
 
     .m_opacity-2 {
-        opacity: 0.2 !important;
+        opacity: 0.2;
     }
 
     .m_opacity-3 {
-        opacity: 0.3 !important;
+        opacity: 0.3;
     }
 
     .m_opacity-4 {
-        opacity: 0.4 !important;
+        opacity: 0.4;
     }
 
     .m_opacity-5 {
-        opacity: 0.5 !important;
+        opacity: 0.5;
     }
 
     .m_opacity-6 {
-        opacity: 0.6 !important;
+        opacity: 0.6;
     }
 
     .m_opacity-7 {
-        opacity: 0.7 !important;
+        opacity: 0.7;
     }
 
     .m_opacity-8 {
-        opacity: 0.8 !important;
+        opacity: 0.8;
     }
 
     .m_opacity-9 {
-        opacity: 0.9 !important;
+        opacity: 0.9;
     }
 
     .m_opacity-10 {
-        opacity: 1 !important;
+        opacity: 1;
     }
 
     .m_-z-index-1,
     .m_-z-1 {
-        z-index: -1 !important;
+        z-index: -1;
     }
 
     .m_z-index-0,
     .m_z-0 {
-        z-index: 0 !important;
+        z-index: 0;
     }
 
     .m_z-index-1,
     .m_z-1 {
-        z-index: 1 !important;
+        z-index: 1;
     }
 
     .m_z-index-2,
     .m_z-2 {
-        z-index: 2 !important;
+        z-index: 2;
     }
 
     .m_z-index-3,
     .m_z-3 {
-        z-index: 3 !important;
+        z-index: 3;
     }
 
     .m_z-index-4,
     .m_z-4 {
-        z-index: 4 !important;
+        z-index: 4;
     }
 
     .m_z-index-5,
     .m_z-5 {
-        z-index: 5 !important;
+        z-index: 5;
     }
 
     .m_z-index-9,
     .m_z-9 {
-        z-index: 9 !important;
+        z-index: 9;
     }
 
     .m_z-index-99,
     .m_z-99 {
-        z-index: 99 !important;
+        z-index: 99;
     }
 
     .m_z-index-999,
     .m_z-999 {
-        z-index: 999 !important;
+        z-index: 999;
     }
 
     .m_pointer-events-none {
-        pointer-events: none !important;
+        pointer-events: none;
     }
 
     .m_pointer-events-all {
-        pointer-events: all !important;
+        pointer-events: all;
     }
 
     .m_cover,
     .m_object-fit-cover {
-        object-fit: cover !important;
+        object-fit: cover;
     }
 
     .m_contain,
     .m_object-fit-contain {
-        object-fit: contain !important;
+        object-fit: contain;
     }
 
     .m_scale-down,
     .m_object-fit-scale-down {
-        object-fit: scale-down !important;
+        object-fit: scale-down;
     }
 
     .m_object-position-top {
-        object-position: top !important;
+        object-position: top;
     }
 
     .m_object-position-center {
-        object-position: center !important;
+        object-position: center;
     }
 
     .m_object-position-bottom {
-        object-position: bottom !important;
+        object-position: bottom;
     }
 
     .m_shadow-light {
@@ -501,11 +501,11 @@
     }
 
     .m_border-none {
-        border: none
+        border: none !important
     }
 
     .m_last-border-none:last-child {
-        border-bottom: none !important;
+        border-bottom: none;
     }
 
     .m_border-inner-bottom>* {
@@ -525,48 +525,48 @@
     }
 
     .m_border-inner-none>* {
-        border: none
+        border: none !important
     }
 
 
     .m_border-bottom-none {
-        border-bottom: none
+        border-bottom: none !important
     }
 
     .m_border-top-none {
-        border-top: none
+        border-top: none !important
     }
 
     .m_border-start-none {
-        border-inline-start: none
+        border-inline-start: none !important
     }
 
     .m_border-end-none {
-        border-inline-end: none
+        border-inline-end: none !important
     }
 
     .m_border-inner-bottom-none>* {
-        border-bottom: none
+        border-bottom: none !important
     }
 
     .m_border-inner-top-none>* {
-        border-top: none
+        border-top: none !important
     }
 
     .m_border-inner-start-none>* {
-        border-inline-start: none
+        border-inline-start: none !important
     }
 
     .m_border-inner-end-none>* {
-        border-inline-end: none
+        border-inline-end: none !important
     }
 
     .m_user-select-none {
-        user-select: none !important;
+        user-select: none;
     }
 
     .m_user-select-all {
-        user-select: all !important;
+        user-select: all;
     }
 
     .m_shadow-10 {
@@ -589,7 +589,7 @@
     /* .m_shadow-light already defined above (line 478) */
 
     .m_shadow-txt {
-        filter: drop-shadow(0 0 10px var(--bgl-black-tint)) !important;
+        filter: drop-shadow(0 0 10px var(--bgl-black-tint));
     }
 
     .m_rotateY-180 {
@@ -601,44 +601,44 @@
     }
 
     .m_mix-blend-mode-multiply {
-        mix-blend-mode: multiply !important;
+        mix-blend-mode: multiply;
     }
 
     .m_mix-blend-mode-screen {
-        mix-blend-mode: screen !important;
+        mix-blend-mode: screen;
     }
 
     .m_mix-blend-mode-overlay {
-        mix-blend-mode: overlay !important;
+        mix-blend-mode: overlay;
     }
 
     .m_mix-blend-mode-darken {
-        mix-blend-mode: darken !important;
+        mix-blend-mode: darken;
     }
 
     .m_mix-blend-mode-lighten {
-        mix-blend-mode: lighten !important;
+        mix-blend-mode: lighten;
     }
 
     .m_mix-blend-mode-color-dodge {
-        mix-blend-mode: color-dodge !important;
+        mix-blend-mode: color-dodge;
     }
 
     .m_mix-blend-mode-color-burn {
-        mix-blend-mode: color-burn !important;
+        mix-blend-mode: color-burn;
     }
 
     .m_mix-blend-mode-hard-light {
-        mix-blend-mode: hard-light !important;
+        mix-blend-mode: hard-light;
     }
 
     .m_mix-blend-mode-soft-light {
-        mix-blend-mode: soft-light !important;
+        mix-blend-mode: soft-light;
     }
 
     .m_mix-blend-mode-none,
     .m_mix-blend-mode-normal {
-        mix-blend-mode: normal !important;
+        mix-blend-mode: normal;
     }
 
     .m_border-input input,

package/src/styles/buttons.css

@@ -16,6 +16,22 @@
     padding: 0;
 }
 
+/*
+ * Remove the lingering focus ring after a MOUSE click, while preserving it for
+ * KEYBOARD navigation (accessibility). Without this, clicking a button leaves a
+ * visible focus outline that "sticks" until the user clicks elsewhere — most
+ * noticeable on dropdown menu items and the dialog close button.
+ *
+ * :focus-visible is set by the browser only for keyboard/programmatic focus,
+ * so :focus:not(:focus-visible) targets pointer focus exclusively.
+ */
+.bgl_btn:focus:not(:focus-visible),
+.bgl_flatBtn:focus:not(:focus-visible),
+.bgl_btn-icon:focus:not(:focus-visible),
+.btn-close:focus:not(:focus-visible) {
+    outline: none;
+}
+
 .btn-close {
     margin-top: -20px;
     margin-inline-end: -20px;