@bagelink/vue 1.15.82 → 1.15.88

package/package.json

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

package/src/components/Alert.vue

@@ -2,17 +2,21 @@
 defineOptions({ name: 'BglAlert' })
 import type { IconType } from '@bagelink/vue'
 import { Icon } from '@bagelink/vue'
-import { computed, ref } from 'vue'
+import { computed, ref, useSlots } from 'vue'
 import Btn from './Btn.vue'
 
 type AlertType = 'info' | 'success' | 'warning' | 'error'
 
 interface Props {
 	message?: string
+	/** Bold heading above the message / default slot. */
+	title?: string
 	thin?: boolean
 	/** Border + transparent background (drops the tinted fill). */
 	outline?: boolean
-	/** Adds a border while keeping the tinted background. */
+	/** Neutral surface card: standard box background + a subtle neutral
+	    (non-accent) border. Only the icon/title keep the accent color — use
+	    when a full tinted fill reads as too loud. */
 	frame?: boolean
 	dismissable?: boolean
 	type?: AlertType
@@ -25,6 +29,7 @@ interface Props {
 }
 
 const props = defineProps<Props>()
+const slots = useSlots()
 
 const computedType = computed<AlertType>(() => {
 	if (props.type) { return props.type }
@@ -47,11 +52,17 @@ const typeIcon: Record<AlertType, IconType> = {
 <template>
 	<div v-if="!isDismissed" class="alert" :class="[computedType, { thin, outline, frame }]" :dismissable="dismissable">
 		<Icon v-if="icon !== 'none'" class="alert_icon" :icon="icon || typeIcon[computedType]" :size="1.7" />
-		<slot>
-			<p class="m-0">
-				{{ message }}
-			</p>
-		</slot>
+		<div class="alert_content">
+			<p v-if="title" class="alert_title m-0">{{ title }}</p>
+			<slot>
+				<p class="m-0 light">
+					{{ message }}
+				</p>
+			</slot>
+		</div>
+		<div v-if="slots.actions" class="alert_actions">
+			<slot name="actions" />
+		</div>
 		<Btn flat thin class="alert_close" icon="close" @click="isDismissed = true" />
 	</div>
 </template>
@@ -94,6 +105,23 @@ const typeIcon: Record<AlertType, IconType> = {
   color: var(--alert-outline);
 }
 
+.alert_content {
+  flex: 1;
+  min-width: 0;
+}
+
+.alert_title {
+  font-weight: 600;
+}
+
+.alert_actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+  align-self: center;
+}
+
 .alert.thin {
   padding: 1rem;
 }
@@ -103,9 +131,12 @@ const typeIcon: Record<AlertType, IconType> = {
   background: unset;
 }
 
-/* frame: border in the alert's accent color, keeps the tinted background. */
+/* frame: neutral surface card — box bg + subtle border tinted by the accent;
+   accent stays on the icon/title only (use when a full tinted fill is too loud). */
 .alert.frame {
-  border: 1px solid var(--alert-outline);
+  background: var(--bgl-box-bg);
+  border: 1px solid color-mix(in srgb, var(--alert-outline) 35%, var(--bgl-border-color));
+  color: inherit;
 }
 
 .alert_icon {

package/src/components/Avatar.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-// Forward consumer class/style/attrs to the inner (rounded, clipped) avatar
-// element rather than the positioning wrapper — otherwise a custom background
-// would render as a square behind the circle.
-defineOptions({ name: 'BglAvatar', inheritAttrs: false })
+// A consumer `class` lands on the positioning wrapper (the root) like any normal
+// component — so spacing/layout utilities (mb-2, me-2, …) work as expected. To
+// style the inner rounded/clipped element (e.g. a custom background that must
+// stay circular), use the `innerClass` prop — mirrors `triggerClass` on Dropdown.
+defineOptions({ name: 'BglAvatar' })
 import type { IconType, ThemeType } from '@bagelink/vue'
 import { initials, Icon } from '@bagelink/vue'
 import { computed } from 'vue'
@@ -24,6 +25,8 @@ const props = withDefaults(defineProps<{
 	status?: boolean | ThemeType
 	/** Accessible label / tooltip for the status dot. */
 	statusTitle?: string
+	/** Class applied to the inner rounded/clipped avatar element (vs. the wrapper). */
+	innerClass?: string
 }>(), { size: 50 })
 
 const statusColor = computed(() => (props.status === true ? 'green' : props.status || null))
@@ -48,8 +51,8 @@ const themed = computed(() => props.color
 <template>
 	<div class="avatar-wrap" :style="{ width: `${size}px`, height: `${size}px` }">
 		<div
-			v-bind="$attrs"
 			class="overflow-hidden txt-center p-0 avatar flex justify-content-center align-items-center"
+			:class="innerClass"
 			:style="{ width: `${size}px`, height: `${size}px`, borderRadius: radius, ...themed }"
 		>
 			<Image v-if="src" :src="src" :alt="alt || name" />

package/src/components/Badge.vue

@@ -52,6 +52,10 @@ const props = defineProps<{
 	/** Boolean size shorthands: <Badge sm value="New" /> */
 	sm?: boolean
 	lg?: boolean
+	/** Mobile-only size override (≤ 910px). Lets a `lg` desktop badge shrink on
+	    phones so it doesn't overflow / touch neighbours. e.g.
+	    <Badge lg mobile-size="sm" />. Mirrors `Icon`'s `mobileSize` prop. */
+	mobileSize?: 'sm' | 'md' | 'lg'
 	uppercase?: boolean
 }>()
 
@@ -87,6 +91,10 @@ const computedSize = computed(() => {
 	return 'md'
 })
 
+/** Mobile-only size override (≤ 910px). Falls back to undefined when not set,
+    so the desktop size keeps applying at all widths. */
+const computedMobileSize = computed(() => props.mobileSize)
+
 const computedVariant = computed(() => {
 	if (props.variant) { return props.variant }
 	if (isGradient.value) { return 'gradient' }
@@ -111,6 +119,9 @@ const computedClasses = computed(() => {
 		'gradient': computedVariant.value === 'gradient',
 		'pillLarge': computedSize.value === 'lg',
 		'pillSmall': computedSize.value === 'sm',
+		'm_pillLarge': computedMobileSize.value === 'lg',
+		'm_pillMd': computedMobileSize.value === 'md',
+		'm_pillSmall': computedMobileSize.value === 'sm',
 	}
 
 	// Add the pair class
@@ -156,8 +167,27 @@ const computedClasses = computed(() => {
 --bgl-pill-font-size: 9px;
 --bgl-pill-height:15px;
 }
+
+/* Mobile-only size overrides (≤ 910px). These win over the desktop size class
+   because the size is driven entirely by --bgl-pill-font-size / --bgl-pill-height,
+   and a later @media rule with equal specificity overrides the base class. */
+@media screen and (max-width: 910px) {
+	.m_pillLarge {
+		--bgl-pill-font-size: var(--bgl-font-size);
+		--bgl-pill-height: auto;
+	}
+	.m_pillMd {
+		--bgl-pill-font-size: 12px;
+		--bgl-pill-height: 20px;
+	}
+	.m_pillSmall {
+		--bgl-pill-font-size: 9px;
+		--bgl-pill-height: 15px;
+	}
+}
 .pillText{
 font-size: var(--bgl-pill-font-size);
+white-space: nowrap;
 }
 .bgl_pill-dot{
 width: 6px;

package/src/components/Dropdown.vue

@@ -271,7 +271,7 @@ function onDocumentPointerDown(e: PointerEvent) {
 	// that each Dropdown sets on its popover element to point to the nearest ancestor popover's id.
 	const openPopovers = document.querySelectorAll<HTMLElement>('[popover]:popover-open')
 	const myId = popoverRef.value?.dataset.bglId
-	for (const p of openPopovers) {
+	for (const p of Array.from(openPopovers)) {
 		if (p === popoverRef.value) continue
 		if (p.contains(target) && myId && p.dataset.bglOwner === myId) return
 	}

package/src/components/EmptyState.vue

@@ -39,7 +39,7 @@ const slots = useSlots()
 </script>
 
 <template>
-	<div class="bgl-empty flex-column align-items-center justify-content-center txt-center" :class="[{ 'bgl-empty--compact': compact }, className]">
+	<div class="bgl-empty txt-center" :class="[{ 'bgl-empty--compact': compact }, className]">
 		<div v-if="slots.icon || icon !== 'none'" class="bgl-empty-icon flex-center">
 			<slot name="icon"><Icon :icon="icon" :size="compact ? 1.6 : 2.2" /></slot>
 		</div>
@@ -57,6 +57,10 @@ const slots = useSlots()
 
 <style scoped>
 .bgl-empty {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
 	gap: 0.75rem;
 	padding: 2.5rem 1.5rem;
 	color: var(--bgl-text-soft, var(--bgl-gray));

package/src/components/Image.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 defineOptions({ name: 'BglImage', inheritAttrs: true })
 import { Skeleton, normalizeDimension, Icon, useImageSrc } from '@bagelink/vue'
-import { computed, useSlots } from 'vue'
+import { Comment, computed, useSlots, type StyleValue, type VNode } from 'vue'
 
 interface ImageProps {
 	src?: string
@@ -29,9 +29,16 @@ const { imageSrc, loadingError } = useImageSrc(() => props.src ?? props.pathKey
 
 // ── Framed mode (ratio / gradient / blend / rounded / overlay slot) ──────────
 const slots = useSlots()
+// Only count the default slot as "framed" when it actually renders nodes — an
+// empty/whitespace slot (or none) must NOT force framed mode, otherwise a plain
+// `<Image :src />` renders an absolute-fill img that collapses the box to 0×0.
+const hasOverlay = computed(() => {
+	const nodes = slots.default?.({}) as VNode[] | undefined
+	return !!nodes?.some((n: VNode) => n.type !== Comment && !(typeof n.children === 'string' && n.children.trim() === ''))
+})
 const framed = computed(() =>
 	props.ratio !== undefined || props.gradient !== undefined || props.blend !== undefined
-	|| props.rounded !== undefined || !!slots.default)
+	|| props.rounded !== undefined || hasOverlay.value)
 
 // Resolve `gradient` into a CSS background. Accepts a tone name, a [from,to]
 // pair (tone or color), or a raw CSS gradient/color string.
@@ -49,6 +56,10 @@ const gradientCss = computed(() => {
 })
 
 const ratioClass = computed(() => (props.ratio ? `ratio-${props.ratio}` : ''))
+// When the frame has no intrinsic height (no ratio + no explicit height), the
+// absolute-fill img would collapse the box to 0. In that case let the img flow
+// naturally (relative) so the frame sizes to the image.
+const frameHasHeight = computed(() => props.ratio !== undefined || props.height !== undefined)
 const radiusStyle = computed(() => {
 	if (props.rounded === undefined || props.rounded === false) return undefined
 	return typeof props.rounded === 'number' ? `${props.rounded}px` : 'var(--bgl-card-radius, 12px)'
@@ -73,8 +84,9 @@ const imgFit = computed(() => props.fit ?? ((props.ratio || props.gradient) ? 'c
 			v-if="imageSrc"
 			:src="imageSrc"
 			:alt="alt"
-			class="bgl-image-frame-img absolute-fill"
-			:style="{ objectFit: imgFit, mixBlendMode: blend }"
+			class="bgl-image-frame-img"
+			:class="frameHasHeight ? 'absolute-fill' : 'bgl-image-frame-img--flow'"
+			:style="{ objectFit: imgFit, mixBlendMode: blend } as StyleValue"
 		>
 		<Skeleton v-else-if="!gradientCss && !loadingError" class="absolute-fill" />
 		<div v-else-if="loadingError && !gradientCss" class="flex-center absolute-fill error-image">
@@ -140,5 +152,7 @@ background-color: var(--bgl-skeleton-bg);
 
 .bgl-image-frame { display: block; }
 .bgl-image-frame-img { width: 100%; height: 100%; }
+/* no ratio/height → flow naturally so the frame gets the image's height (avoids 0×0 collapse) */
+.bgl-image-frame-img--flow { position: relative; height: auto; display: block; }
 
 </style>

package/src/components/form/inputs/ArrayInput.vue

@@ -4,7 +4,7 @@ import type { Ref, WritableComputedRef } from 'vue'
 import type { DraggableEvent } from '../../draggable/useDraggable'
 
 import { Btn, resolveI18n, useI18n, pathKeyToURL } from '@bagelink/vue'
-import { computed, ref, watch, useSlots } from 'vue'
+import { computed, ref, watch, useSlots, type VNode } from 'vue'
 import Draggable from '../../draggable/Draggable.vue'
 import type { BagelInputShellProps } from './bagelInputShell'
 import { useBagelInputShell } from './bagelInputShell'
@@ -141,7 +141,7 @@ const isSimple = computed(() => {
 	if (props.simple) return true
 	if (!slots.default) return false
 	const dummyItem = computed({ get: () => undefined as T, set: () => { } })
-	const vnodes = slots.default({ item: dummyItem, index: 0 })
+	const vnodes = slots.default({ item: dummyItem, index: 0 }) as VNode[]
 	return vnodes.filter(vn => typeof vn.type !== 'symbol').length === 1
 })
 

package/src/components/form/inputs/RangeInput.vue

@@ -46,8 +46,6 @@ onMounted(() => {
 		inheritedRtl.value = getComputedStyle(rootEl.value).direction === 'rtl'
 	}
 })
-const isRtl = computed(() => props.rtl ?? inheritedRtl.value)
-
 const from = ref<number>(Array.isArray(props.modelValue) ? props.modelValue[0] : (props.modelValue ?? min))
 const to = ref<number>(Array.isArray(props.modelValue) ? props.modelValue[1] : max)
 

package/src/components/form/inputs/RichText/components/TableGridSelector.vue

@@ -80,7 +80,7 @@ function handleMouseLeave() {
 							cursor: 'pointer',
 							borderRadius: '2px',
 							transition: 'background-color 0.1s ease',
-						}" @focus="handleCellHover(cell)" @mouseenter="handleCellHover(cell.row, cell.col)" @click="handleCellClick(cell.row, cell.col, hide)"
+						}" @focus="handleCellHover(cell.row, cell.col)" @mouseenter="handleCellHover(cell.row, cell.col)" @click="handleCellClick(cell.row, cell.col, hide)"
 					/>
 				</div>
 

package/src/components/form/inputs/RichText/editor.css

@@ -164,11 +164,15 @@ th {
     text-align: end;
     max-width: 100%;
     cursor: pointer;
-    transition: opacity 0.2s ease;
+    transition: var(--bgl-transition);
 }
 
 .richtext-editor-content .image-figure:hover {
-    opacity: 0.8;
+    filter: var(--bgl-hover-filter);
+}
+
+.richtext-editor-content .image-figure:active {
+    filter: var(--bgl-active-filter);
 }
 
 .richtext-editor-content .image-figure img {
@@ -229,9 +233,7 @@ th {
 }
 
 .richtext-editor-content .video-figure:hover {
-    cursor: pointer;
-    filter: brightness(90%);
-    --bgl-transition-400: all 400ms ease;
+    filter: var(--bgl-hover-filter);
 }
 
 .richtext-editor-content .video-figure:active {
@@ -292,13 +294,17 @@ th {
     text-align: center;
     max-width: 100%;
     cursor: pointer;
-    transition: all 0.3s ease;
+    transition: var(--bgl-transition);
 }
 
 .richtext-editor-content .embed-figure:hover {
     filter: var(--bgl-hover-filter);
 }
 
+.richtext-editor-content .embed-figure:active {
+    filter: var(--bgl-active-filter);
+}
+
 .richtext-editor-content .embed-figure iframe {
     display: block;
     max-width: 100%;
@@ -307,12 +313,12 @@ th {
     border: 1px solid var(--bgl-border-color, #ddd);
     border-radius: 8px;
     background: white;
-    transition: all 0.3s ease;
+    transition: var(--bgl-transition);
     pointer-events: none;
 }
 
 .richtext-editor-content .embed-figure:hover iframe {
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 12px var(--bgl-shadow);
 }
 
 .richtext-editor-content .embed-figure figcaption {

package/src/components/form/inputs/RichText/index.vue

@@ -2119,7 +2119,7 @@ onUnmounted(() => {
 function setupTableEditButtons(doc: Document) {
 	// Simple function to add edit buttons to all tables
 	function addEditButtonsToTables() {
-		const tables = doc.querySelectorAll('table:not([data-edit-button-added])')
+		const tables = doc.querySelectorAll<HTMLTableElement>('table:not([data-edit-button-added])')
 
 		tables.forEach((table, index) => {
 			// Create edit button as a span element instead of button

package/src/components/form/inputs/TextInput.vue

@@ -247,7 +247,9 @@ background: #f5f5f5;
 color: var(--bgl-input-color);
 position: absolute;
 inset-inline-end: calc(var(--bgl-input-height) / 3 - 0.25rem);
-margin-top: calc(var(--bgl-input-height) / 2 + 0.1rem);
+/* center on the input row regardless of input height (dense/small/default) */
+top: calc(var(--bgl-input-height) / 2);
+transform: translateY(-50%);
 line-height: 0;
 }
 
@@ -260,7 +262,9 @@ padding-inline-end: calc(var(--bgl-input-height) / 3 + 1.5rem);
 color: var(--bgl-input-color);
 position: absolute;
 inset-inline-start: calc(var(--bgl-input-height) / 3 - 0.25rem);
-margin-top: calc(var(--bgl-input-height) / 2);
+/* center on the input row regardless of input height (dense/small/default) */
+top: calc(var(--bgl-input-height) / 2);
+transform: translateY(-50%);
 line-height: 0;
 }
 

package/src/components/form/inputs/Upload/upload.css

@@ -23,7 +23,13 @@
 
 .fileUploadWrap.dragover,
 .fileUploadWrap:hover {
-    box-shadow: inset 0 0 10px #00000012;
+    box-shadow: inset 0 0 10px var(--bgl-shadow);
+    filter: var(--bgl-hover-filter);
+}
+
+.fileUploadWrap.dragover:active,
+.fileUploadWrap:active {
+    filter: var(--bgl-active-filter);
 }
 
 .fileUploadWrap[style*='height: auto;'] {

package/src/components/index.ts

@@ -22,6 +22,8 @@ export { default as DragOver } from './DragOver.vue'
 export { default as Dropdown } from './Dropdown.vue'
 export { default as EmptyState } from './EmptyState.vue'
 export { default as FieldSetVue } from './FieldSetVue.vue'
+export { default as KanbanBoard } from './kanban/KanbanBoard.vue'
+export type { KanbanBoardProps, KanbanColumn, KanbanCardSchema, KanbanMoveEvent } from './kanban/kanbanTypes'
 export { default as FilterQuery } from './FilterQuery.vue'
 export type { FilterField, QueryOption } from './FilterQuery.types'
 export { default as Flag } from './Flag.vue'