@bagelink/vue 1.15.133 → 1.15.135

package/package.json

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

package/src/components/ListItem.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { IconType, ThemeType } from '@bagelink/vue'
 import { Avatar, Icon } from '@bagelink/vue'
-import { computed, useAttrs } from 'vue'
+import { computed, useAttrs, useSlots } from 'vue'
 
 defineOptions({ inheritAttrs: false })
 
@@ -51,8 +51,15 @@ const props = withDefaults(
 	}
 )
 
+const slots = useSlots()
 const attrs = useAttrs()
 
+// Only reserve trailing room for the floating #end meta when there's actually
+// something there (an #end slot, `end` text, or `iconEnd`). Otherwise a plain
+// clickable row (e.g. `<ListItem to=… />` with no trailing content) would carry
+// a wasted 3.5rem inline-end gutter — which reads as a stray "start" pad in RTL.
+const hasEnd = computed(() => Boolean(slots.end || props.end || props.iconEnd))
+
 // Split inherited attrs: event listeners (onClick, onClickStop, …) belong on the
 // clickable element so handlers + modifiers like `.stop` fire on the actual
 // button/link row; everything else (class, style, data-*, …) stays on the root
@@ -131,9 +138,9 @@ const bind = computed(() => {
 <template>
 	<div
 		v-bind="rootAttrs"
-		class="flex space-between list-item-row bg"
+		class="flex space-between list-item-row "
 		:class="[
-			{ 'no-border-list': props.flat || rounded, 'list-item-flush': props.fullWidth, 'list-item-fullrow': isClickable, 'list-item-rounded': rounded, 'list-item-active': active },
+			{ 'no-border-list': props.flat || rounded, 'list-item-flush': props.fullWidth, 'list-item-fullrow': isClickable, 'list-item-has-end': hasEnd, 'list-item-rounded': rounded, 'list-item-active': active },
 			computedSize ? `list-item-${computedSize}` : '',
 		]"
 		:style="color ? { '--bgl-list-item-accent': `var(--bgl-${color})` } : undefined"
@@ -233,7 +240,10 @@ padding-inline-end: 0.25rem;
 .list-item-fullrow .list-item-end :where(button, a, input, select, label, [role="button"], [tabindex]) {
 pointer-events: auto;
 }
-.list-item-fullrow .list-item { padding-inline-end: var(--bgl-list-item-end-space); }
+/* Reserve trailing room for the floating #end meta ONLY when there's end content
+   (see .list-item-has-end). A clickable row with no #end keeps its natural width
+   — otherwise it carries a wasted end gutter that looks like a stray start pad. */
+.list-item-fullrow.list-item-has-end .list-item { padding-inline-end: var(--bgl-list-item-end-space); }
 .list-item-fullrow.list-item-flush .list-item-end { --bgl-list-item-end-inset: 0; }
 .list-item-row::after {
 content: '';
@@ -253,6 +263,9 @@ background-color: unset;
 width: 100%;
 font: inherit;
 text-align: inherit;
+/* Zero the UA-default button padding so a clickable <button> row lines up
+   flush with router-link/div rows — otherwise it carries a stray inline pad. */
+padding-inline-start: 0;
 }
 
 /* Allow the clickable flex row to shrink below its content's intrinsic width.