@bagelink/vue 1.15.129 → 1.15.133

package/package.json

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

package/src/components/Card.vue

@@ -164,12 +164,14 @@ const hasFooter = computed<boolean>(() =>
 border: 1px solid var(--bgl-border-color);
 }
 
-/* Header row (title + action). Pulls out to the card edges via negative margins
-   so its divider spans full-width regardless of the card's own padding, then
-   restores breathing room below. On a p-0 card the negative margins resolve to 0. */
+/* Header row (title + action). Content stays aligned with the card's own inline
+   padding — no horizontal margin/padding of its own. Only the bottom border is
+   pulled full-bleed (via negative inline margins matched by equal padding) so the
+   divider spans edge-to-edge while the content stays put. Bottom padding scales
+   with the card so `thin`/`p-0` stay consistent with the rest of the card. */
 .card_header {
-margin: calc(var(--bgl-card-pad) * -1) calc(var(--bgl-card-pad) * -1) var(--bgl-card-pad);
-padding: 0.85rem var(--bgl-card-pad);
+padding-bottom: calc(var(--bgl-card-pad) / 2);
+margin-bottom: calc(var(--bgl-card-pad) / 2);
 border-bottom: 1px solid var(--bgl-border-color);
 min-height: 0;
 }
@@ -181,11 +183,13 @@ min-width: 0;
 font-weight: 600;
 }
 
-/* Footer row: mirrors the header — full-bleed divider via negative margins,
-   border on top instead of bottom. */
+/* Footer row: mirrors the header — content aligned to the card's inline padding,
+   only the top border pulled full-bleed. */
 .card_footer {
-margin: var(--bgl-card-pad) calc(var(--bgl-card-pad) * -1) calc(var(--bgl-card-pad) * -1);
-padding: 0.85rem var(--bgl-card-pad);
+margin-inline: calc(var(--bgl-card-pad) * -1);
+padding-inline: var(--bgl-card-pad);
+padding-top: var(--bgl-card-pad);
+margin-top: var(--bgl-card-pad);
 border-top: 1px solid var(--bgl-border-color);
 min-height: 0;
 }
@@ -206,9 +210,16 @@ background: var(--bgl-gray-tint);
 --bgl-card-pad: 1rem;
 padding: var(--bgl-card-pad);
 }
-/* When padding is stripped via the p-0 utility, the header supplies its own. */
+/* When padding is stripped via the p-0 utility, the card has no inset for the
+   header/footer to inherit, so they supply their own inline+block padding and
+   drop the full-bleed margins (there's nothing to bleed into). */
 .bgl_card.p-0 { --bgl-card-pad: 0rem; }
-.bgl_card.p-0 .card_header { padding-inline: 1rem; padding-block: 0.75rem; margin-bottom: 0; }
+.bgl_card.p-0 .card_header {
+margin-inline: 0; padding-inline: 1rem; padding-block: 0.75rem; margin-bottom: 0;
+}
+.bgl_card.p-0 .card_footer {
+margin-inline: 0; padding-inline: 1rem; padding-block: 0.75rem; margin-top: 0;
+}
 .bgl_card.p-0 .card_label { padding-inline: 1rem; padding-top: 0.75rem; }
 
 .bgl_card.BagelTable {

package/src/components/ListItem.vue

@@ -21,6 +21,15 @@ const props = withDefaults(
 		iconEnd?: IconType
 		target?: '_blank' | '_self'
 		thin?: boolean
+		/** Row size — scales text, leading icon-chip/avatar, and vertical padding.
+		    Mirrors `Btn` (`size` prop or the boolean shorthands below). Default `md`. */
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+		/** Boolean size shorthands: `<ListItem sm … />` (same scale as Btn). */
+		xs?: boolean
+		sm?: boolean
+		md?: boolean
+		lg?: boolean
+		xl?: boolean
 		fullWidth?: boolean
 		ellipsis?: boolean
 		ripple?: boolean
@@ -63,6 +72,29 @@ const rootAttrs = computed(() => {
 	return out
 })
 
+// Resolve the effective size from the `size` prop or a boolean shorthand
+// (mirrors Btn). `undefined` → the default `md` visuals (no size class emitted).
+const computedSize = computed(() => {
+	if (props.size) { return props.size }
+	if (props.xs) { return 'xs' }
+	if (props.sm) { return 'sm' }
+	if (props.md) { return 'md' }
+	if (props.lg) { return 'lg' }
+	if (props.xl) { return 'xl' }
+	return undefined
+})
+
+// Avatar/icon glyph scale per size. When no size is given, preserve the historical
+// behavior (thin → 30px avatar, else 38px; 1.2rem icon glyph).
+const avatarSizeMap = { xs: 20, sm: 24, md: 38, lg: 46, xl: 56 } as const
+const iconSizeMap = { xs: 0.8, sm: 0.9, md: 1.2, lg: 1.5, xl: 1.8 } as const
+const avatarSize = computed(() =>
+	computedSize.value ? avatarSizeMap[computedSize.value] : (props.thin ? 30 : 38),
+)
+const iconSize = computed(() =>
+	computedSize.value ? iconSizeMap[computedSize.value] : 1.2,
+)
+
 const hasTo = computed(() => props.to !== undefined && props.to !== '')
 const hasHref = computed(() => props.href !== undefined && props.href !== '')
 // A `@click` listener (with or without modifiers like `.stop`) shows up in
@@ -100,7 +132,10 @@ const bind = computed(() => {
 	<div
 		v-bind="rootAttrs"
 		class="flex space-between list-item-row bg"
-		:class="{ 'no-border-list': props.flat || rounded, 'list-item-flush': props.fullWidth, 'list-item-fullrow': isClickable, 'list-item-rounded': rounded, 'list-item-active': active }"
+		:class="[
+			{ 'no-border-list': props.flat || rounded, 'list-item-flush': props.fullWidth, 'list-item-fullrow': isClickable, 'list-item-rounded': rounded, 'list-item-active': active },
+			computedSize ? `list-item-${computedSize}` : '',
+		]"
 		:style="color ? { '--bgl-list-item-accent': `var(--bgl-${color})` } : undefined"
 	>
 		<!-- Content rendered before the clickable area (e.g. a drag handle, avatar
@@ -119,9 +154,9 @@ const bind = computed(() => {
 			<!-- Leading visual INSIDE the clickable area. Use #media for custom art
 			     (covers, thumbnails); `src`/`showAvatar` and `icon` are shortcuts. -->
 			<slot name="media">
-				<Avatar v-if="src || showAvatar" :name="title" :src="src" :size="thin ? 30 : 38" class="flex-shrink-0" />
+				<Avatar v-if="src || showAvatar" :name="title" :src="src" :size="avatarSize" class="flex-shrink-0" />
 				<span v-if="icon" class="list-item-icon flex-shrink-0">
-					<Icon size="1.2" :icon="icon" />
+					<Icon :size="iconSize" :icon="icon" />
 				</span>
 			</slot>
 
@@ -333,4 +368,34 @@ white-space: nowrap;
 }
 .list-item-end:empty { display: none; }
 
+/* ── Size scale (mirrors Btn: xs · sm · md · lg · xl) ──────────────────────────
+   Each size scales the leading icon-chip, the title/subtitle/lead type, and the
+   row's vertical padding + horizontal gutter. `md` matches the historical
+   defaults, so unsized rows are unchanged. `size` composes with `thin` (which
+   only trims vertical padding). */
+.list-item-xs { --list-item-padding-inline: 0.4rem; }
+/* !important needed to beat the base .py-075/.py-05 utility classes. */
+.list-item-xs .list-item { padding-block: 0.1rem !important; gap: 0.4rem; }
+.list-item-xs .list-item-icon { width: 22px; height: 22px; border-radius: 6px; }
+.list-item-xs .list-item-title { font-size: 0.75rem; }
+.list-item-xs .list-item-subtitle { font-size: 0.625rem; }
+
+.list-item-sm { --list-item-padding-inline: 0.55rem; }
+.list-item-sm .list-item { padding-block: 0.2rem !important; gap: 0.5rem; }
+.list-item-sm .list-item-icon { width: 26px; height: 26px; border-radius: 7px; }
+.list-item-sm .list-item-title { font-size: 0.8125rem; }
+.list-item-sm .list-item-subtitle { font-size: 0.6875rem; }
+
+/* md = defaults (no overrides needed). */
+
+.list-item-lg .list-item { padding-block: 0.85rem !important; gap: 0.85rem; }
+.list-item-lg .list-item-icon { width: 42px; height: 42px; border-radius: 11px; }
+.list-item-lg .list-item-title { font-size: 1.0625rem; }
+.list-item-lg .list-item-subtitle { font-size: 0.875rem; }
+
+.list-item-xl .list-item { padding-block: 1.1rem !important; gap: 1rem; }
+.list-item-xl .list-item-icon { width: 50px; height: 50px; border-radius: 13px; }
+.list-item-xl .list-item-title { font-size: 1.1875rem; }
+.list-item-xl .list-item-subtitle { font-size: 0.9375rem; }
+
 </style>