@bagelink/vue 1.15.27 → 1.15.32

package/package.json

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

package/src/components/form/inputs/Upload/UploadInput.vue

@@ -116,7 +116,7 @@ function fileName(pathKey: string) {
 						<Btn v-tooltip="'Delete'" color="gray" thin icon="delete" @click="removeFile(path_key)" />
 						<Btn v-tooltip="'Replace'" color="gray" thin icon="autorenew" @click="browse()" />
 						<Btn
-							icon="download" color="gray" thin :href="pathKeyToURL(path_key)"
+							icon="download" color="gray" thin target="_blank" :href="pathKeyToURL(path_key)"
 							:download="fileName(path_key)"
 						/>
 						<div class="flex gap-025 rounded pe-1 ps-05 py-025 -my-1 ">
@@ -195,7 +195,7 @@ function fileName(pathKey: string) {
 							/>
 							<Btn v-tooltip="'Replace'" color="white" frame thin icon="autorenew" @click="browse()" />
 							<Btn
-								v-tooltip="'Download'" color="white" frame thin icon="download"
+								v-tooltip="'Download'" color="white" frame thin target="_blank" icon="download"
 								:href="pathKeyToURL(path_key)" :download="fileName(path_key)"
 							/>
 						</div>

package/src/dialog/Dialog.vue

@@ -121,7 +121,7 @@ defineExpose({ close })
 			>
 				<Btn
 					v-if="dismissable && closePlacement === 'header-start'" flat icon="close" aria-label="Close"
-					class="dialog-close" thin @click="close"
+					class="dialog-close relative z-2" thin @click="close"
 				/>
 				<h3
 					v-if="title" class="dialog-title m-0 txt20 semi w-100p"
@@ -132,7 +132,7 @@ defineExpose({ close })
 				<div v-if="!title" class="flex-grow-1" />
 				<Btn
 					v-if="dismissable && closePlacement === 'header-end'" flat icon="close" aria-label="Close"
-					class="dialog-close" thin @click="close"
+					class="dialog-close relative z-2" thin @click="close"
 				/>
 			</header>
 			<!-- Body -->

package/src/styles/bagel.css

@@ -3,6 +3,13 @@
    specificity). Consumers override plain utilities with normal CSS, and
    override `!important` utilities by adding their own `!important`. */
 
+/* Icon fonts — must load via the main stylesheet (not only inside Icon.vue's
+   <style>), otherwise in Vite dev mode the @import is injected after other
+   rules and the browser ignores it, so Material/Font Awesome icons render as
+   raw ligature text. Keep these first so the @import rules stay valid. */
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css');
+
 /* Tokens — lowest priority, only custom properties */
 @import "theme.css";
 @import "dark.css";
@@ -26,6 +33,20 @@
 @import "mobileColors.css";
 @import "appearance.css";
 
+/* Icon font-family bindings — mirrored from Icon.vue so icons work even when
+   that component's injected <style> is not yet present (e.g. Vite dev mode). */
+.bgl_icon-font {
+    font-family: 'Material Symbols Outlined', serif !important;
+}
+
+.bgl_icon-font.fa {
+    font-family: 'Font Awesome 6 Free', serif !important;
+}
+
+.bgl_icon-font.fa-brands {
+    font-family: 'Font Awesome 6 Brands', serif !important;
+}
+
 /* Reset / base element styles */
 :root {
         --bgl-transition-ease: cubic-bezier(0.1, 0.5, 0.33, 1);