@keyfunc/keybricks-ds 2.4.7 → 2.4.8

package/components/navigation/Breadcrumb.jsx

@@ -40,7 +40,7 @@ function Overflow({ items, onSelect }) {
       </span>
       {open ? (
         <span style={{ position: "absolute", top: "calc(100% + 5px)", left: 0, zIndex: "var(--z-menu)", minWidth: 168, maxWidth: 260, background: "var(--bg-surface)", border: "1px solid var(--border-card)", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-menu)", padding: 4, display: "flex", flexDirection: "column" }}>
-          {items.map((it, i) => <OverflowItem key={it} label={it} depth={i} onSelect={(l) => { setOpen(false); onSelect && onSelect(l); }} />)}
+          {items.map((it, i) => <OverflowItem key={i} label={it} depth={i} onSelect={(l) => { setOpen(false); onSelect && onSelect(l); }} />)}
         </span>
       ) : null}
     </span>
@@ -67,23 +67,25 @@ export function Breadcrumb({ items = [], onSelect, maxItems = 4, hoveredIndex, s
   const head = collapse ? items.slice(0, 1) : items;
   const hidden = collapse ? items.slice(1, items.length - tailCount) : [];
   const tail = collapse ? items.slice(items.length - tailCount) : [];
-  const lastLabel = items[items.length - 1];
+  /* Crumbs are identified by position, never by label: a trail may repeat a name ("Workflow › Workflow", two "2026" folders). Only the last index is the current page. */
+  const lastIndex = items.length - 1;
+  const tailStart = items.length - tailCount;
   return (
     <nav style={{ display: "flex", alignItems: "center", gap: 4, ...style }}>
       {head.map((it, i) => (
-        <React.Fragment key={it}>
+        <React.Fragment key={i}>
           {i > 0 ? <Sep /> : null}
-          <Crumb label={it} last={it === lastLabel} hovered={hoveredIndex === i} onSelect={onSelect} />
+          <Crumb label={it} last={i === lastIndex} hovered={hoveredIndex === i} onSelect={onSelect} />
         </React.Fragment>
       ))}
       {collapse ? (
         <React.Fragment>
           <Sep />
           <Overflow items={hidden} onSelect={onSelect} />
-          {tail.map((it) => (
-            <React.Fragment key={it}>
+          {tail.map((it, k) => (
+            <React.Fragment key={tailStart + k}>
               <Sep />
-              <Crumb label={it} last={it === lastLabel} onSelect={onSelect} />
+              <Crumb label={it} last={tailStart + k === lastIndex} onSelect={onSelect} />
             </React.Fragment>
           ))}
         </React.Fragment>

package/components/navigation/Breadcrumb.vue

@@ -16,23 +16,25 @@ const tailCount = computed(() => props.maxItems - 2)
 const head = computed(() => collapse.value ? props.items.slice(0, 1) : props.items)
 const hidden = computed(() => collapse.value ? props.items.slice(1, props.items.length - tailCount.value) : [])
 const tail = computed(() => collapse.value ? props.items.slice(props.items.length - tailCount.value) : [])
-const lastLabel = computed(() => props.items[props.items.length - 1])
-const isLast = (it) => it === lastLabel.value
-const on = (i, it) => (hover.value === i || props.hoveredIndex === i) && !isLast(it)
-function pick(it) { if (!isLast(it)) emit('select', it) }
+// Crumbs are identified by position, never by label: a trail may repeat a name ("Workflow › Workflow", two "2026" folders). Only the last index is the current page.
+const tailStart = computed(() => props.items.length - tailCount.value)
+const isLast = (i) => i === props.items.length - 1
+// i = the crumb's index in items; hoveredIndex reaches the leading crumbs only (as in React)
+const on = (i, lead) => (hover.value === i || (lead && props.hoveredIndex === i)) && !isLast(i)
+function pick(it, i) { if (!isLast(i)) emit('select', it) }
 function pickHidden(it) { open.value = false; emit('select', it) }
 function onDoc(e) { if (root.value && !root.value.contains(e.target)) open.value = false }
 watch(open, (v) => { if (v) document.addEventListener('mousedown', onDoc); else document.removeEventListener('mousedown', onDoc) })
 onUnmounted(() => document.removeEventListener('mousedown', onDoc))
-const crumbStyle = (i, it) => ({ fontFamily: 'var(--font-sans)', fontSize: 'var(--text-base)', lineHeight: 'var(--leading-base)', color: isLast(it) || on(i, it) ? 'var(--text-heading)' : 'var(--text-secondary)', fontWeight: isLast(it) ? 'var(--weight-medium)' : 'var(--weight-regular)', cursor: isLast(it) ? 'default' : 'pointer', borderRadius: 'var(--radius-sm)', transition: 'var(--t-hover)' })
+const crumbStyle = (i, lead) => ({ fontFamily: 'var(--font-sans)', fontSize: 'var(--text-base)', lineHeight: 'var(--leading-base)', color: isLast(i) || on(i, lead) ? 'var(--text-heading)' : 'var(--text-secondary)', fontWeight: isLast(i) ? 'var(--weight-medium)' : 'var(--weight-regular)', cursor: isLast(i) ? 'default' : 'pointer', borderRadius: 'var(--radius-sm)', transition: 'var(--t-hover)' })
 </script>
 <template>
   <nav :style="{ display: 'flex', alignItems: 'center', gap: '4px', ...style }">
-    <template v-for="(it, i) in head" :key="it">
+    <template v-for="(it, i) in head" :key="i">
       <span v-if="i > 0" style="color:var(--text-muted);display:inline-flex"><Icon name="chevron-right" :size="13" /></span>
-      <span :role="isLast(it) ? undefined : 'button'" :tabindex="isLast(it) ? undefined : 0"
-        @click="pick(it)" @keydown.enter.prevent="pick(it)" @keydown.space.prevent="pick(it)"
-        @mouseenter="hover = i" @mouseleave="hover = -1" :style="crumbStyle(i, it)">{{ it }}</span>
+      <span :role="isLast(i) ? undefined : 'button'" :tabindex="isLast(i) ? undefined : 0"
+        @click="pick(it, i)" @keydown.enter.prevent="pick(it, i)" @keydown.space.prevent="pick(it, i)"
+        @mouseenter="hover = i" @mouseleave="hover = -1" :style="crumbStyle(i, true)">{{ it }}</span>
     </template>
     <template v-if="collapse">
       <span style="color:var(--text-muted);display:inline-flex"><Icon name="chevron-right" :size="13" /></span>
@@ -44,7 +46,7 @@ const crumbStyle = (i, it) => ({ fontFamily: 'var(--font-sans)', fontSize: 'var(
           <Icon name="ellipsis" :size="14" />
         </span>
         <span v-if="open" style="position:absolute;top:calc(100% + 5px);left:0;z-index:var(--z-menu);min-width:168px;max-width:260px;background:var(--bg-surface);border:1px solid var(--border-card);border-radius:var(--radius-md);box-shadow:var(--shadow-menu);padding:4px;display:flex;flex-direction:column">
-          <span v-for="(h, hi) in hidden" :key="h" role="menuitem" tabindex="0"
+          <span v-for="(h, hi) in hidden" :key="hi" role="menuitem" tabindex="0"
             @click="pickHidden(h)" @keydown.enter.prevent="pickHidden(h)" @keydown.space.prevent="pickHidden(h)"
             @mouseenter="menuHover = hi" @mouseleave="menuHover = -1"
             :style="{ display: 'flex', alignItems: 'center', gap: '6px', padding: '6px 9px', paddingLeft: (9 + hi * 12) + 'px', borderRadius: 'var(--radius-sm)', cursor: 'pointer', background: menuHover === hi ? 'var(--bg-hover)' : 'transparent', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-base)', lineHeight: 'var(--leading-base)', color: 'var(--text-heading)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', transition: 'var(--t-hover)' }">
@@ -52,11 +54,11 @@ const crumbStyle = (i, it) => ({ fontFamily: 'var(--font-sans)', fontSize: 'var(
           </span>
         </span>
       </span>
-      <template v-for="it in tail" :key="it">
+      <template v-for="(it, k) in tail" :key="tailStart + k">
         <span style="color:var(--text-muted);display:inline-flex"><Icon name="chevron-right" :size="13" /></span>
-        <span :role="isLast(it) ? undefined : 'button'" :tabindex="isLast(it) ? undefined : 0"
-          @click="pick(it)" @keydown.enter.prevent="pick(it)" @keydown.space.prevent="pick(it)"
-          :style="crumbStyle(-1, it)">{{ it }}</span>
+        <span :role="isLast(tailStart + k) ? undefined : 'button'" :tabindex="isLast(tailStart + k) ? undefined : 0"
+          @click="pick(it, tailStart + k)" @keydown.enter.prevent="pick(it, tailStart + k)" @keydown.space.prevent="pick(it, tailStart + k)"
+          @mouseenter="hover = tailStart + k" @mouseleave="hover = -1" :style="crumbStyle(tailStart + k, false)">{{ it }}</span>
       </template>
     </template>
   </nav>

package/components/tabs/CountBadge.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { computed } from 'vue'
-// Count badge beside a segment / pill label: --count-h tall (sm 16 · md 18 · lg 20), 6px sides, full radius, 12px tabular figures
+// Count badge beside a segment / pill label: --count-h tall (sm 16 · md and lg 18), 6px sides, full radius, 12px tabular figures
 // (digits are Latin, so not bumped in CJK). Fill: the alpha wash --neutral-alpha-8, so it darkens any surface by the same step (white tab,
 // #f5f5f5 active pill, dark theme); text tells selected from unselected: --text-heading vs --text-body (a lighter grey fails 4.5:1 at 12px).
 // Hidden for 0 or a missing count unless showZero, which draws a muted 0.

package/components/tabs/Tabs.d.ts

@@ -20,6 +20,6 @@ export type PillTab = TabItem;
 export type PillTabsProps = TabsProps;
 /** Text pill filter tabs at control height; active gets a tinted pill. A tab's count renders as a CountBadge 6px right of the label. */
 export declare function PillTabs(props: PillTabsProps): JSX.Element;
-/** Count badge beside a segment / pill label: --count-h tall (sm 16 · md 18 · lg 20), 6px sides, full radius, 12px tabular figures. Fill --neutral-alpha-8 on any surface; text --text-body, --text-heading when selected. Renders nothing for 0 or undefined unless showZero (muted 0). */
+/** Count badge beside a segment / pill label: --count-h tall (sm 16 · md and lg 18), 6px sides, full radius, 12px tabular figures. Fill --neutral-alpha-8 on any surface; text --text-body, --text-heading when selected. Renders nothing for 0 or undefined unless showZero (muted 0). */
 export interface CountBadgeProps { count?: number; selected?: boolean; showZero?: boolean; style?: React.CSSProperties; }
 export declare function CountBadge(props: CountBadgeProps): JSX.Element | null;

package/components/tabs/Tabs.jsx

@@ -39,7 +39,7 @@ export function PanelTabs({ tabs = [], active, onChange, size, showZero, style }
 }
 
 
-/* Count badge beside a segment / pill label: --count-h tall (sm 16 · md 18 · lg 20), 6px sides, full radius, 12px tabular figures
+/* Count badge beside a segment / pill label: --count-h tall (sm 16 · md and lg 18), 6px sides, full radius, 12px tabular figures
    (digits are Latin, so the size is not bumped in CJK). The fill is the alpha wash --neutral-alpha-8, so it darkens whatever it sits on by the
    same step (white tab, #f5f5f5 active pill, dark theme); the text tells selected from unselected: --text-heading vs --text-body
    (a lighter grey fails 4.5:1 on a grey fill at 12px). Hidden for 0 or a missing count unless showZero, which draws a muted 0. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keyfunc/keybricks-ds",
-  "version": "2.4.7",
+  "version": "2.4.8",
   "description": "Keybricks design system — design tokens, three size tiers and 121 UI components in React and Vue 3, source-only.",
   "license": "UNLICENSED",
   "type": "module",

package/tokens/layout.css

@@ -32,9 +32,9 @@
 --edge-pad:16px;                                                                          /* card edge → first control or cell */
 --cell-px:12px;                                                                           /* horizontal padding of a table cell */
 --check-size:16px;                                                                        /* checkbox and radio box */
---tag-h:24px;                                                                             /* Tag */
---count-h:18px;                                                                           /* count badge beside a segment / pill label (12px tabular figures, 6px sides, full radius) */
---switch-w:36px;--switch-h:20px;                                                          /* Switch track */
+--tag-h:24px;                                                                             /* Tag — two sizes only: lg keeps the md height */
+--count-h:18px;                                                                           /* count badge beside a segment / pill label (12px tabular figures, 6px sides, full radius) — lg keeps the md height */
+--switch-w:32px;--switch-h:18px;                                                          /* Switch track — two sizes only: lg keeps the md track */
 /* Two-line title cell (Table column `twoLine`): row padding, title → description gap, icon tile, tile → text gap. md row = 10 + 20 + 2 + 16 + 10 = 58px */
 --title-cell-py:10px;--title-cell-gap:2px;--title-cell-tile:32px;--title-cell-icon:16px;--title-cell-tile-r:8px;--title-cell-tile-gap:12px;
 /* Compatibility aliases — superseded by the tier tokens above */
@@ -51,5 +51,5 @@
 }
 /* The three tiers. Declared after :root so a tier set on <html> itself also wins. */
 [data-size="sm"]{--control-h:28px;--control-text:var(--text-xs);--control-leading:var(--leading-xs);--control-tracking:var(--tracking-xs);--control-icon:14px;--control-px:8px;--control-gap:8px;--group-gap:12px;--bar-h:36px;--bar-card-h:44px;--edge-pad:12px;--cell-px:8px;--check-size:14px;--tag-h:20px;--count-h:16px;--switch-w:28px;--switch-h:16px;--text-code:11px;--leading-code:16px;--title-cell-py:8px;--title-cell-gap:2px;--title-cell-tile:28px;--title-cell-icon:14px;--title-cell-tile-r:8px;--title-cell-tile-gap:8px}
-[data-size="md"]{--control-h:32px;--control-text:var(--text-base);--control-leading:var(--leading-base);--control-tracking:var(--tracking-base);--control-icon:16px;--control-px:12px;--control-gap:8px;--group-gap:16px;--bar-h:40px;--bar-card-h:48px;--edge-pad:16px;--cell-px:12px;--check-size:16px;--tag-h:24px;--count-h:18px;--switch-w:36px;--switch-h:20px;--text-code:12px;--leading-code:18px;--title-cell-py:10px;--title-cell-gap:2px;--title-cell-tile:32px;--title-cell-icon:16px;--title-cell-tile-r:8px;--title-cell-tile-gap:12px}
-[data-size="lg"]{--control-h:40px;--control-text:var(--text-base);--control-leading:var(--leading-base);--control-tracking:var(--tracking-base);--control-icon:16px;--control-px:16px;--control-gap:8px;--group-gap:24px;--bar-h:48px;--bar-card-h:56px;--edge-pad:16px;--cell-px:16px;--check-size:16px;--tag-h:28px;--count-h:20px;--switch-w:44px;--switch-h:24px;--text-code:12px;--leading-code:18px;--title-cell-py:14px;--title-cell-gap:4px;--title-cell-tile:40px;--title-cell-icon:20px;--title-cell-tile-r:10px;--title-cell-tile-gap:12px}
+[data-size="md"]{--control-h:32px;--control-text:var(--text-base);--control-leading:var(--leading-base);--control-tracking:var(--tracking-base);--control-icon:16px;--control-px:12px;--control-gap:8px;--group-gap:16px;--bar-h:40px;--bar-card-h:48px;--edge-pad:16px;--cell-px:12px;--check-size:16px;--tag-h:24px;--count-h:18px;--switch-w:32px;--switch-h:18px;--text-code:12px;--leading-code:18px;--title-cell-py:10px;--title-cell-gap:2px;--title-cell-tile:32px;--title-cell-icon:16px;--title-cell-tile-r:8px;--title-cell-tile-gap:12px}
+[data-size="lg"]{--control-h:40px;--control-text:var(--text-base);--control-leading:var(--leading-base);--control-tracking:var(--tracking-base);--control-icon:16px;--control-px:16px;--control-gap:8px;--group-gap:24px;--bar-h:48px;--bar-card-h:56px;--edge-pad:16px;--cell-px:16px;--check-size:16px;--tag-h:24px;--count-h:18px;--switch-w:32px;--switch-h:18px;--text-code:12px;--leading-code:18px;--title-cell-py:14px;--title-cell-gap:4px;--title-cell-tile:40px;--title-cell-icon:20px;--title-cell-tile-r:10px;--title-cell-tile-gap:12px}