@bagelink/vue 1.15.141 → 1.15.145

package/package.json

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

package/src/components/ListItem.vue

@@ -30,12 +30,47 @@ const props = withDefaults(
 		md?: boolean
 		lg?: boolean
 		xl?: boolean
+		/** Fine-grained size overrides — take precedence over `size`. Accept any CSS
+		    length (e.g. `'1.1rem'`, `'18px'`) or a raw number (treated as `rem` for
+		    text, `px` for the avatar). Leave unset to inherit from `size`.
+		    Under the hood these set public CSS vars you can also drive externally:
+		    `--bgl-list-item-title-size`, `--bgl-list-item-subtitle-size`,
+		    `--bgl-list-item-lead-size`, `--bgl-list-item-icon-chip-size`. */
+		fontSize?: string | number
+		titleSize?: string | number
+		subtitleSize?: string | number
+		leadSize?: string | number
+		/** Font weights — take precedence over `size`/defaults. Accept a number
+		    (`600`) or a keyword (`'bold'`). Leave unset to keep the defaults
+		    (title 600, subtitle 300, lead 600). Set the same public CSS vars:
+		    `--bgl-list-item-title-weight`, `--bgl-list-item-subtitle-weight`,
+		    `--bgl-list-item-lead-weight`. */
+		fontWeight?: string | number
+		titleWeight?: string | number
+		subtitleWeight?: string | number
+		leadWeight?: string | number
+		/** Glyph size of the leading `icon` (and, if a number, of the trailing
+		    `iconEnd`). Any CSS length or number-as-rem. */
+		iconSize?: string | number
+		/** Box size of the leading icon-chip (the tinted square). CSS length / px. */
+		iconChipSize?: string | number
+		/** Toggle the leading icon's tinted background chip. Defaults `true` (the
+		    tinted rounded square). Set `:icon-chip="false"` to drop the background
+		    and render the bare glyph (still accent-colored). */
+		iconChip?: boolean
+		/** Override the leading avatar diameter (px). */
+		avatarSize?: number
 		fullWidth?: boolean
 		ellipsis?: boolean
 		ripple?: boolean
 		/** Theme accent for the leading icon-chip and hover/active tint.
 		    Defaults to the surface's primary. e.g. `color="purple"`. */
 		color?: ThemeType
+		/** Color of the leading icon glyph ONLY — overrides the accent for the
+		    glyph without touching the chip background or hover/active tint.
+		    Accepts a theme name (`'purple'` → `var(--bgl-purple)`) or any raw CSS
+		    color (`'#f00'`, `'currentColor'`). */
+		iconColor?: ThemeType | (string & {})
 		/** Card-style row: rounded, no divider, tinted hover. Use for standalone
 		    selectable lists (vs. the default flush divided rows in a panel). */
 		rounded?: boolean
@@ -48,6 +83,7 @@ const props = withDefaults(
 	{
 		ellipsis: true,
 		ripple: false,
+		iconChip: true,
 	}
 )
 
@@ -95,12 +131,62 @@ const computedSize = computed(() => {
 // 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
+
+// Normalize a size prop to a usable CSS length: bare numbers → `rem` (text/glyph)
+// or `px` (box), while any string (`'1.1rem'`, `'18px'`, `'2em'`) passes through.
+const toRem = (v: string | number | undefined) =>
+	v === undefined ? undefined : (typeof v === 'number' ? `${v}rem` : v)
+const toPx = (v: string | number | undefined) =>
+	v === undefined ? undefined : (typeof v === 'number' ? `${v}px` : v)
+
+// Effective avatar diameter: explicit `avatarSize` prop wins, then `size`, then
+// the historical thin/default fallback.
 const avatarSize = computed(() =>
-	computedSize.value ? avatarSizeMap[computedSize.value] : (props.thin ? 30 : 38),
-)
-const iconSize = computed(() =>
-	computedSize.value ? iconSizeMap[computedSize.value] : 1.2,
+	props.avatarSize ?? (computedSize.value ? avatarSizeMap[computedSize.value] : (props.thin ? 30 : 38)),
 )
+// Effective leading-icon glyph size passed to <Icon :size>. `<Icon>` appends
+// `rem` to its `size`, so we resolve to a bare rem number: a numeric prop is used
+// as-is; a `'1.5rem'` string has its number extracted; a `size` step maps via
+// iconSizeMap; otherwise the historical 1.2rem. (For px control of the chip box,
+// use `iconChipSize`.)
+const iconSize = computed(() => {
+	if (typeof props.iconSize === 'number') { return props.iconSize }
+	if (typeof props.iconSize === 'string') {
+		const n = Number.parseFloat(props.iconSize)
+		if (!Number.isNaN(n)) { return n }
+	}
+	return computedSize.value ? iconSizeMap[computedSize.value] : 1.2
+})
+
+// Inline CSS vars set from the fine-grained size props. These map onto the same
+// public custom properties consumers can set externally, so a `prop` is just a
+// convenient way to set the var for a single row.
+// A theme name (`blue`, `purple-light`, …) maps to its `--bgl-<name>` token; any
+// other value (hex, rgb(), currentColor, a custom var) is used verbatim. Theme
+// names are plain lowercase identifiers with optional `-` (e.g. `blue-light`).
+const resolveColor = (v: string) =>
+	/^[a-z]+(-[a-z]+)*$/.test(v) ? `var(--bgl-${v})` : v
+
+const listItemVars = computed(() => {
+	const vars: Record<string, string> = {}
+	if (props.color) { vars['--bgl-list-item-accent'] = `var(--bgl-${props.color})` }
+	if (props.iconColor) { vars['--bgl-list-item-icon-color'] = resolveColor(props.iconColor) }
+	const title = toRem(props.titleSize ?? props.fontSize)
+	if (title) { vars['--bgl-list-item-title-size'] = title }
+	const subtitle = toRem(props.subtitleSize)
+	if (subtitle) { vars['--bgl-list-item-subtitle-size'] = subtitle }
+	const lead = toRem(props.leadSize)
+	if (lead) { vars['--bgl-list-item-lead-size'] = lead }
+	const chip = toPx(props.iconChipSize)
+	if (chip) { vars['--bgl-list-item-icon-chip-size'] = chip }
+	// Font weights — a number or keyword passes through as-is. `fontWeight` acts
+	// as the base for the title unless a more specific `titleWeight` is given.
+	const titleW = props.titleWeight ?? props.fontWeight
+	if (titleW !== undefined) { vars['--bgl-list-item-title-weight'] = String(titleW) }
+	if (props.subtitleWeight !== undefined) { vars['--bgl-list-item-subtitle-weight'] = String(props.subtitleWeight) }
+	if (props.leadWeight !== undefined) { vars['--bgl-list-item-lead-weight'] = String(props.leadWeight) }
+	return vars
+})
 
 const hasTo = computed(() => props.to !== undefined && props.to !== '')
 const hasHref = computed(() => props.href !== undefined && props.href !== '')
@@ -143,7 +229,7 @@ const bind = computed(() => {
 			{ '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"
+		:style="listItemVars"
 	>
 		<!-- Content rendered before the clickable area (e.g. a drag handle, avatar
 		     or leading visual). Lives outside the clickable component so interacting
@@ -162,7 +248,7 @@ const bind = computed(() => {
 			     (covers, thumbnails); `src`/`showAvatar` and `icon` are shortcuts. -->
 			<slot name="media">
 				<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">
+				<span v-if="icon" class="list-item-icon flex-shrink-0" :class="{ 'list-item-icon-nobg': !iconChip }">
 					<Icon :size="iconSize" :icon="icon" />
 				</span>
 			</slot>
@@ -345,15 +431,32 @@ background-color: var(--bgl-list-item-hover, color-mix(in srgb, var(--bgl-list-i
 filter: var(--bgl-hover-filter);
 }
 
-/* Leading icon chip — tinted with the row accent (primary by default). */
+/* Leading icon chip — tinted with the row accent (primary by default).
+   The tinted square's box size is driven by a public CSS var so consumers (or
+   the `iconChipSize` prop) can retune it without a `size` step:
+     --bgl-list-item-icon-chip-size  → the tinted square (default 34px)
+   The glyph *inside* it is sized via the `iconSize` prop (→ <Icon :size>). */
 .list-item-icon {
 display: grid;
 place-items: center;
-width: 34px;
-height: 34px;
+width: var(--bgl-list-item-icon-chip-size, 34px);
+height: var(--bgl-list-item-icon-chip-size, 34px);
 border-radius: 9px;
 background: color-mix(in srgb, var(--bgl-list-item-accent) 12%, transparent);
-color: var(--bgl-list-item-accent);
+/* Glyph color: an explicit `iconColor` (→ --bgl-list-item-icon-color) wins;
+   otherwise fall back to the row accent so existing rows are unchanged. The
+   chip background above stays tied to the accent regardless. */
+color: var(--bgl-list-item-icon-color, var(--bgl-list-item-accent));
+}
+/* `:icon-chip="false"` → drop the tinted square and its fixed box so the bare
+   glyph sits at its natural size (still accent-colored). The `.list-item-row`
+   prefix lifts specificity above the per-size `.list-item-<sz> .list-item-icon`
+   rules below, which also pin width/height. */
+.list-item-row .list-item-icon-nobg {
+width: auto;
+height: auto;
+background: none;
+border-radius: 0;
 }
 
 /* Text block: tight, clear hierarchy. min-width:0 lets the ellipsis titles/
@@ -362,24 +465,28 @@ color: var(--bgl-list-item-accent);
 min-width: 0;
 }
 .list-item-body > p { margin: 0; padding: 0; }
+/* Type sizes read a public CSS var with the historical value as fallback, so
+   consumers / the fontSize·titleSize·subtitleSize·leadSize props can retune the
+   text without stepping the whole `size` scale:
+     --bgl-list-item-title-size · --bgl-list-item-subtitle-size · --bgl-list-item-lead-size */
 .list-item-lead {
-font-size: 0.6875rem;
-font-weight: 600;
+font-size: var(--bgl-list-item-lead-size, 0.6875rem);
+font-weight: var(--bgl-list-item-lead-weight, 600);
 text-transform: uppercase;
 letter-spacing: 0.04em;
 opacity: 0.5;
 line-height: 1.3;
 }
 .list-item-title {
-font-size: 0.9375rem;
-font-weight: 600;
+font-size: var(--bgl-list-item-title-size, 0.9375rem);
+font-weight: var(--bgl-list-item-title-weight, 600);
 line-height: 1.35;
 }
 .list-item-subtitle {
-font-size: 0.8125rem;
+font-size: var(--bgl-list-item-subtitle-size, 0.8125rem);
 opacity: 0.6;
 line-height: 1.35;
-font-weight: 300;
+font-weight: var(--bgl-list-item-subtitle-weight, 300);
 margin-top: 1px;
 }
 .list-item-endtext {
@@ -395,29 +502,27 @@ min-width: 0;
    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; }
+/* Each size sets the public type vars (not font-size directly) so a per-row
+   fontSize/titleSize/… prop — which sets the same var inline — still wins over
+   the chosen `size`. The icon-chip box size stays a direct width/height here;
+   its border-radius keeps its per-size tuning. */
+.list-item-xs { --list-item-padding-inline: 0.4rem; --bgl-list-item-title-size: 0.75rem; --bgl-list-item-subtitle-size: 0.625rem; }
 /* !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-xs .list-item-icon { width: var(--bgl-list-item-icon-chip-size, 22px); height: var(--bgl-list-item-icon-chip-size, 22px); border-radius: 6px; }
 
-.list-item-sm { --list-item-padding-inline: 0.55rem; }
+.list-item-sm { --list-item-padding-inline: 0.55rem; --bgl-list-item-title-size: 0.8125rem; --bgl-list-item-subtitle-size: 0.6875rem; }
 .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; }
+.list-item-sm .list-item-icon { width: var(--bgl-list-item-icon-chip-size, 26px); height: var(--bgl-list-item-icon-chip-size, 26px); border-radius: 7px; }
 
 /* md = defaults (no overrides needed). */
 
+.list-item-lg { --bgl-list-item-title-size: 1.0625rem; --bgl-list-item-subtitle-size: 0.875rem; }
 .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-lg .list-item-icon { width: var(--bgl-list-item-icon-chip-size, 42px); height: var(--bgl-list-item-icon-chip-size, 42px); border-radius: 11px; }
 
+.list-item-xl { --bgl-list-item-title-size: 1.1875rem; --bgl-list-item-subtitle-size: 0.9375rem; }
 .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; }
+.list-item-xl .list-item-icon { width: var(--bgl-list-item-icon-chip-size, 50px); height: var(--bgl-list-item-icon-chip-size, 50px); border-radius: 13px; }
 
 </style>

package/src/components/layout/AppContent.vue

@@ -325,7 +325,8 @@ flex-grow: 1;
    the row and it wraps), rather than the header force-stacking every left side. */
 .endNavTools {
 margin-inline-start: auto;
-justify-content: flex-end;
+/* justify-content: flex-end; */
+width: auto;
 }
 /* Mobile: don't push the trailing side to the far edge — let it sit right after the
    leading side (no auto margin, start-aligned) so the header reads as one compact
@@ -333,7 +334,7 @@ justify-content: flex-end;
 @media screen and (max-width: 910px) {
 .endNavTools {
 margin-inline-start: 0;
-justify-content: flex-start;
+/* justify-content: flex-start; */
 }
 }
 
@@ -444,7 +445,7 @@ padding-top: 0;
 .pageContent--fill {
 display: flex;
 flex-direction: column;
-overflow: hidden;
+/* overflow: hidden; */
 }
 .pageContent--fill > * {
 flex: 1 1 auto;