@bagelink/vue 1.15.61 → 1.15.63

package/package.json

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

package/src/components/Dropdown.vue

@@ -484,7 +484,7 @@ transform-origin: top left;
 
 /* Default menu breathing room so consumers don't wrap content in py-* just to
    stop items touching the rounded edges. */
-.bgl-dropdown__content--card {
+.bgl-dropdown__content--card .bgl_card{
 padding-block: 0.375rem;
 }
 

package/src/components/layout/AppSidebar.vue

@@ -173,6 +173,7 @@ const sidebarStyles = computed(() => {
 					v-for="link in props.navLinks" :key="link.to || link.label"
 					:link="link"
 					:open="isVisuallyOpen"
+					:real-open="isOpen"
 					:is-mobile="isMobile"
 					:bg-color="props.bgColor"
 					:text-color="props.textColor"

package/src/components/layout/Divider.vue

@@ -36,9 +36,9 @@ const slots = useSlots()
 	/>
 
 	<!-- horizontal with label/slot: line — content — line -->
-	<div v-else-if="label || slots.default" class="bgl-divider-labeled" :class="className" role="separator">
+	<div v-else-if="label || slots.default" class="bgl-divider-labeled flex gap-075" :class="className" role="separator">
 		<span class="divider bgl-divider-line" />
-		<span class="bgl-divider-label"><slot>{{ label }}</slot></span>
+		<span class="bgl-divider-label flex-shrink-0 white-space-nowrap"><slot>{{ label }}</slot></span>
 		<span class="divider bgl-divider-line" />
 	</div>
 
@@ -47,18 +47,11 @@ const slots = useSlots()
 </template>
 
 <style scoped>
-.bgl-divider-labeled {
-	display: flex;
-	align-items: center;
-	gap: 0.75rem;
-}
 .bgl-divider-line {
 	flex: 1;
 }
 .bgl-divider-label {
 	font-size: 0.8125rem;
 	color: var(--bgl-text-soft, var(--bgl-gray));
-	white-space: nowrap;
-	flex-shrink: 0;
 }
 </style>

package/src/components/layout/SidebarNavItem.vue

@@ -13,8 +13,10 @@ interface LinkWithAction extends NavLink {
 
 const props = withDefaults(defineProps<{
 	link: LinkWithAction
-	/** sidebar is expanded (true) or collapsed to icons (false) */
+	/** sidebar is visually expanded (stays true during the collapse transition) */
 	open: boolean
+	/** real open state — flips immediately when the user toggles the sidebar */
+	realOpen?: boolean
 	isMobile: boolean
 	bgColor: string
 	textColor: string
@@ -45,6 +47,16 @@ const isActive = computed(() => selfActive.value || (hasChildren.value && childA
 const expanded = ref(childActive.value)
 watch(childActive, v => { if (v) expanded.value = true })
 
+// Collapse the open child group smoothly *before* the layout switches to the
+// icon-only flyout, so parents don't jump up when the sidebar narrows. We watch
+// `realOpen` (which flips immediately on toggle) rather than `open` (which stays
+// true throughout the width transition), so the grid-rows collapse animation runs
+// in sync with the sidebar narrowing instead of snapping at the end.
+watch(() => props.realOpen, (isOpenNow) => {
+	if (isOpenNow) expanded.value = childActive.value
+	else expanded.value = false
+})
+
 function onParentClick() {
 	if (hasChildren.value) expanded.value = !expanded.value
 	else props.link.action?.()
@@ -71,11 +83,10 @@ function onParentClick() {
 	<!-- PARENT with children, EXPANDED sidebar -->
 	<div v-else-if="open || isMobile" class="sidebar-group w100p">
 		<Btn
-			fullWidth alignTxt="start" class="flex-shrink-0 px-075 sidebar-group-toggle"
-			:class="{ 'nav-btn-active': isActive }"
+			fullWidth alignTxt="start" flat class="flex-shrink-0 px-075 sidebar-group-toggle txt-start sidebar-parent"
+			:class="{ 'sidebar-parent-active bold': isActive }"
 			:style="{
-				backgroundColor: isActive ? activeColor : bgColor,
-				color: isActive ? 'white' : textColor,
+				color: isActive ? activeColor : textColor,
 			}"
 			@click="onParentClick"
 		>
@@ -84,19 +95,22 @@ function onParentClick() {
 			<Icon name="expand_more" size="1.1" class="nav-text sidebar-chevron" :class="{ 'sidebar-chevron-open': expanded }" />
 		</Btn>
 		<div class="sidebar-children" :class="{ 'sidebar-children-open': expanded }">
-			<Btn
-				v-for="child in link.children" :key="child.to || child.label"
-				fullWidth alignTxt="start" class="flex-shrink-0 ps-2 pe-075 sidebar-child"
-				:class="{ 'nav-btn-active': linkActive(child) }"
-				:style="{
-					backgroundColor: linkActive(child) ? activeColor : 'transparent',
-					color: linkActive(child) ? 'white' : textColor,
-				}"
-				:to="child.to || '/'" @click="child.action"
-			>
-				<Icon v-if="child.icon" :name="child.icon" size="1.05" class="opacity-7" />
-				<span class="nav-text">{{ resolveI18n(child.label) }}</span>
-			</Btn>
+			<div class="sidebar-children-inner ps-1">
+				<Btn
+					v-for="child in link.children" :key="child.to || child.label"
+					fullWidth alignTxt="start"  class="flex-shrink-0 ps-075 pe-075 sidebar-child"
+					:class="{ 'bold sidebar-child-active': linkActive(child) }"
+					:style="{
+						color: linkActive(child) ? activeColor : textColor,
+						'--sidebar-active-color': activeColor,
+					}"
+					flat
+					:to="child.to || '/'" @click="child.action"
+				>
+					<Icon v-if="child.icon" :name="child.icon" size="1.05" class="opacity-7" />
+					<span class="nav-text">{{ resolveI18n(child.label) }}</span>
+				</Btn>
+			</div>
 		</div>
 	</div>
 
@@ -105,6 +119,7 @@ function onParentClick() {
 		v-else
 		placement="right-start"
 		:triggers="['hover']"
+		:delay="{ show: 0, hide: 200 }"
 		card
 		class="w100p sidebar-flyout-trigger"
 	>
@@ -122,15 +137,15 @@ function onParentClick() {
 			</Btn>
 		</template>
 		<!-- flyout content -->
-		<div class="sidebar-flyout p-05">
-			<p class="sidebar-flyout-label">{{ resolveI18n(link.label) }}</p>
+		<div class="sidebar-flyout p-05 min-w-180px display-flex gap-025 column">
+			<p class="sidebar-flyout-label m-0 semi opacity-5 uppercase">{{ resolveI18n(link.label) }}</p>
 			<Btn
 				v-for="child in link.children" :key="child.to || child.label"
-				fullWidth alignTxt="start" thin class="flex-shrink-0 px-075 sidebar-flyout-item"
-				:class="{ 'nav-btn-active': linkActive(child) }"
+				fullWidth alignTxt="start" thin flat class="flex-shrink-0 px-075 radius-1 sidebar-child"
+				:class="{ 'bold sidebar-child-active': linkActive(child) }"
 				:style="{
-					backgroundColor: linkActive(child) ? activeColor : 'transparent',
-					color: linkActive(child) ? 'white' : 'var(--bgl-text-color)',
+					color: linkActive(child) ? activeColor : 'var(--bgl-text-color)',
+					'--sidebar-active-color': activeColor,
 				}"
 				:to="child.to || '/'" @click="child.action"
 			>
@@ -148,39 +163,65 @@ function onParentClick() {
 	opacity: 0.6;
 }
 .sidebar-chevron-open {
-	transform: rotate(180deg);
+	transform: rotate(180deg)!important;
 }
 .sidebar-children {
 	display: grid;
 	grid-template-rows: 0fr;
-	transition: grid-template-rows 0.25s ease;
+	transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 	overflow: hidden;
 }
 .sidebar-children-open {
 	grid-template-rows: 1fr;
 }
-.sidebar-children > * {
+.sidebar-children-inner {
 	min-height: 0;
-}
-.sidebar-child {
-	font-size: 0.85rem;
-}
-.sidebar-flyout {
-	min-width: 180px;
 	display: flex;
 	flex-direction: column;
-	gap: 2px;
+	gap: 0.125rem;
 }
+.sidebar-children-open .sidebar-children-inner {
+	padding-block: 0.25rem;
+}
+/* Parent toggle — flat <Btn> with no color prop picks up a default `pair-black`
+   background; neutralize it so the active parent shows only colored text/icon. */
+.sidebar-parent.bgl_btn {
+	background-color: transparent !important;
+	transition: background-color 0.15s ease, color 0.15s ease;
+}
+.sidebar-parent.bgl_btn:hover {
+	background-color: color-mix(in srgb, currentColor 8%, transparent) !important;
+	filter: none;
+}
+
 .sidebar-flyout-label {
-	margin: 0;
 	padding: 0.25rem 0.5rem 0.375rem;
 	font-size: 0.6875rem;
-	font-weight: 600;
-	text-transform: uppercase;
-	letter-spacing: 0.05em;
-	opacity: 0.45;
 }
-.sidebar-flyout-item {
-	border-radius: var(--bgl-btn-border-radius);
+</style>
+
+<!-- Global (un-scoped) so the same child styling also applies inside the flyout,
+     which is teleported to <body> and therefore outside this component's scope. -->
+<style>
+.sidebar-child {
+	font-size: 0.85rem;
+	position: relative;
+	transition: background-color 0.15s ease, color 0.15s ease, font-weight 0.15s ease;
+}
+/* Neutralize the default `pair-black` background a flat <Btn> picks up when no
+   color prop is set, so we can control the child background ourselves. */
+.sidebar-child.bgl_btn {
+	background-color: transparent !important;
+}
+/* Active child — filled with a subtle tint of the active color. */
+.sidebar-child.bgl_btn.sidebar-child-active,
+.sidebar-child.bgl_btn.sidebar-child-active:hover {
+	background-color: color-mix(in srgb, var(--sidebar-active-color) 14%, transparent) !important;
+}
+
+/* Hover indication for children (mirrors the parent feel) */
+.sidebar-child.bgl_btn:hover {
+	background-color: color-mix(in srgb, currentColor 12%, transparent) !important;
+	filter: none;
 }
 </style>

package/src/styles/dark.css

@@ -80,6 +80,10 @@
   --bgl-skeleton-bg: var(--bgl-dm-surface-2);
   --bgl-skeleton-pulse: var(--bgl-dm-surface);
   --bgl-gray-light: var(--bgl-dm-surface-2);
+  /* --bgl-gray (#b7b7b7 in light) is used directly by color-gray / bg-gray and
+     as a neutral mid tone. On dark, keep it a readable mid-gray so color-gray
+     text stays legible; bg-gray fills get a dedicated darker treatment below. */
+  --bgl-gray: #8b8f96;
 
   /* ---- Text ------------------------------------------------------------- */
   --bgl-text-color: var(--bgl-dm-text);
@@ -269,6 +273,15 @@
   color: var(--bgl-dm-text);
 }
 
+/* bg-gray is a solid light-gray (#b7b7b7) fill in light mode — used as a
+   neutral surface. On dark it becomes a bright patch, so remap it to a raised
+   dark surface (one step up from the card) like the other neutral fills. */
+.bgl-dark-mode .bg-gray:not(.keep-white) {
+  background: var(--bgl-dm-surface-2) !important;
+  --alpha-color: var(--bgl-dm-surface-2);
+  color: var(--bgl-dm-text);
+}
+
 .bgl-dark-mode .bg-input-white:not(.keep-white) input,
 .bgl-dark-mode .bg-input-white:not(.keep-white) textarea,
 .bgl-dark-mode .bg-input-white:not(.keep-white) .selectinput-btn,

package/src/styles/text.css

@@ -217,21 +217,38 @@
     font-size: 0.25rem;
 }
 
+.txt0375rem,
+.txt-0375rem {
+    font-size: 0.375rem;
+}
+
 .txt05rem,
 .txt-05rem {
     font-size: 0.5rem;
 }
 
+.txt0625rem,
+.txt-0625rem {
+    font-size: 0.625rem;
+}
+
 .txt075rem,
 .txt-075rem {
     font-size: 0.75rem;
 }
 
+.txt0875rem,
+.txt-0875rem {
+    font-size: 0.875rem;
+}
+
 .txt1rem,
 .txt-1rem {
     font-size: 1rem;
 }
 
+
+
 .txt1-25rem,
 .txt-1-25rem {
     font-size: 1.25rem;
@@ -1788,21 +1805,36 @@
         font-size: 9px;
     }
 
-    .m_txt025,
-    .m_txt-025 {
+    .m_txt025rem,
+    .m_txt-025rem {
         font-size: 0.25rem;
     }
 
-    .m_txt05,
-    .m_txt-05 {
+    .m_txt0375rem,
+    .m_txt-0375rem {
+        font-size: 0.375rem;
+    }
+
+    .m_txt05rem,
+    .m_txt-05rem {
         font-size: 0.5rem;
     }
 
-    .m_txt075,
-    .m_txt-075 {
+    .m_txt0625rem,
+    .m_txt-0625rem {
+        font-size: 0.625rem;
+    }
+
+    .m_txt075rem,
+    .m_txt-075rem {
         font-size: 0.75rem;
     }
 
+    .m_txt0875rem,
+    .m_txt-0875rem {
+        font-size: 0.875rem;
+    }
+
     .m_txt1rem,
     .m_txt-1rem {
         font-size: 1rem;