@bagelink/vue 1.15.303 → 1.15.307

package/package.json

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

package/src/components/AccordionItem.vue

@@ -113,7 +113,7 @@ cursor: pointer;
 }
 
 .accordion-head {
-height: var(--bgl-input-height);
+height: var(--bgl-accordion-height, var(--bgl-input-height));
 background: transparent;
 display: flex;
 width: 100%;
@@ -121,6 +121,7 @@ align-items: center;
 justify-content: space-between;
 border: none;
 color: inherit !important;
+padding-inline: var(--bgl-accordion-padding, 6px);
 }
 
 .accordion-icon {
@@ -128,9 +129,9 @@ transition: all 0.2s ease;
 display: flex;
 align-items: center;
 flex-shrink: 0;
-width: calc(var(--bgl-btn-height) / 1.5);
-height: calc(var(--bgl-btn-height) / 1.5);
-padding-inline: calc(var(--bgl-btn-padding) / 3);
+width: calc(var(--bgl-accordion-height, var(--bgl-btn-height)) / 1.5);
+height: calc(var(--bgl-accordion-height, var(--bgl-btn-height)) / 1.5);
+padding-inline: calc(var(--bgl-accordion-padding, var(--bgl-btn-padding)) / 3);
 justify-content: center;
 }
 

package/src/components/layout/AppContent.vue

@@ -52,6 +52,15 @@ interface Props {
 	 * mobile). Turn this on only for headers you know must stay one exact line.
 	 */
 	singleRow?: boolean
+	/**
+	 * Mobile (≤ breakpoint) only: collapse the header's three sides into one
+	 * continuous flow. The menu/back/title, center and trailing actions all sit in
+	 * a single wrapping row — items run one after another (no `space-between` gap,
+	 * no auto-margin pushing the actions to the far edge) and simply wrap onto the
+	 * next line as a continuous stream when they run out of room. Desktop is
+	 * unaffected. Off by default (mobile keeps the split leading/trailing layout).
+	 */
+	mobileSingleRow?: boolean
 	/**
 	 * Cap the readable width of the page and center it on wide screens. Applies to
 	 * BOTH the header and the body, so the title stays aligned above the content
@@ -80,6 +89,7 @@ const props = withDefaults(defineProps<Props>(), {
 	border: undefined,
 	headerHeight: '60px',
 	singleRow: false,
+	mobileSingleRow: false,
 	maxWidth: undefined,
 	fill: false,
 })
@@ -135,7 +145,10 @@ const hasCenter = computed(() => !!slots['header-center'])
 			:class="[
 				`app-header--${resolvedVariant}`,
 				`app-header--m-${resolvedMobileVariant}`,
-				{ 'app-header--single-row': singleRow },
+				{
+					'app-header--single-row': singleRow,
+					'app-header--m-single-flow': mobileSingleRow,
+				},
 			]"
 		>
 			<!-- Left Side -->
@@ -163,17 +176,23 @@ const hasCenter = computed(() => !!slots['header-center'])
 				</PageTitle>
 
 				<!-- Custom Left Content -->
-				<slot name="header-left" />
+				<div class="app-header-slot">
+					<slot name="header-left" />
+				</div>
 			</div>
 
 			<!-- Center Content (only rendered when the slot is provided) -->
 			<div v-if="hasCenter" class="app-header-center flex min-w-0">
-				<slot name="header-center" />
+				<div class="app-header-slot">
+					<slot name="header-center" />
+				</div>
 			</div>
 
 			<!-- Right Side -->
 			<div class="app-header-side flex gap-row-05 endNavTools">
-				<slot name="header-right" />
+				<div class="app-header-slot">
+					<slot name="header-right" />
+				</div>
 			</div>
 		</header>
 
@@ -262,6 +281,25 @@ padding-inline: 0;
 }
 }
 
+/* Slot content is rendered in the consumer's scope. Keep this mobile flow rule
+   unscoped so it targets the real rendered DOM directly and remains stable across
+   async slot updates and component HMR. */
+.app-header-slot {
+display: contents;
+}
+
+@media screen and (max-width: 910px) {
+.app-header.app-header--m-single-flow {
+justify-content: flex-start !important;
+}
+.app-header--m-single-flow > .app-header-side,
+.app-header--m-single-flow > .app-header-center,
+.app-header--m-single-flow > .app-header-side > .app-header-slot > *,
+.app-header--m-single-flow > .app-header-center > .app-header-slot > * {
+display: contents !important;
+}
+}
+
 </style>
 
 <style scoped>

package/src/components/layout/TimelineItem.vue

@@ -30,7 +30,7 @@ const slots = useSlots()
 </script>
 
 <template>
-	<div class="bgl-tl-item flex gap-075" :class="{ 'bgl-tl-item--last': last }">
+	<div class="bgl-tl-item flex gap-075 align-items-start" :class="{ 'bgl-tl-item--last': last }">
 		<div class="bgl-tl-rail flex-column align-items-center flex-shrink-0">
 			<span class="bgl-tl-marker flex-center" :style="{ '--tl-color': `var(--bgl-${color})` }">
 				<slot name="marker">
@@ -52,9 +52,13 @@ const slots = useSlots()
 .bgl-tl-item {
 	min-height: 1.75rem;
 }
+.bgl-tl-rail {
+	display: flex;
+	align-self: stretch;
+}
 .bgl-tl-marker {
-	width: 1.625rem;
-	height: 1.625rem;
+	width: 1.25rem;
+	height: 1.25rem;
 	border-radius: 50%;
 	background: color-mix(in srgb, var(--tl-color) 15%, transparent);
 	color: var(--tl-color);