@keyfunc/keybricks-ds 2.4.6 → 2.4.8

package/components/icons/icon-paths.js

@@ -92,7 +92,7 @@ export const VUE_ICON_PATHS = {
   "dimension-custom_default": '<path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/>',
   "dimension-entity": '<path d="M2 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18"/><path d="M14 10h6a2 2 0 0 1 2 2v10"/><path d="M1 22h22"/><path d="M6 6h.01"/><path d="M10 6h.01"/><path d="M6 10h.01"/><path d="M10 10h.01"/><path d="M6 14h.01"/><path d="M10 14h.01"/><path d="M18 14h.01"/><path d="M18 18h.01"/><path d="M6 22v-3h4v3"/>',
   "dimension-group": '<rect x="16" y="16" width="6" height="6" rx="1"/><rect x="2" y="16" width="6" height="6" rx="1"/><rect x="9" y="2" width="6" height="6" rx="1"/><path d="M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3"/><path d="M12 12V8"/>',
-  "dimension-intercompany": '<path d="M8 3 4 7l4 4"/><path d="M4 7h16"/><path d="m16 21 4-4-4-4"/><path d="M20 17H4"/>',
+  "dimension-intercompany": '<path d="M2 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18"/><path d="M1 22h22"/><path d="M6 6h.01"/><path d="M10 6h.01"/><path d="M6 10h.01"/><path d="M6 14h.01"/><path d="M10 10h.01"/><path d="M10 14h.01"/><path d="M6 22v-3h4v3"/><path d="M14 15h6a2 2 0 0 1 2 2v5"/><path d="M18 18.5h.01"/><path d="M16 4h6"/><path d="m20 2 2 2-2 2"/><path d="M22 9h-6"/><path d="m18 7-2 2 2 2"/>',
   "dimension-subtable": '<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/><path d="M9 9v12"/><path d="M15 9v12"/>',
   "dimension-time": '<path d="M16 14v2.2l1.6 1"/><path d="M16 2v4"/><path d="M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5"/><path d="M3 10h5"/><path d="M8 2v4"/><circle cx="16" cy="16" r="6"/>',
   "dimension-version": '<line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/>',
@@ -104,7 +104,7 @@ export const VUE_ICON_PATHS = {
   admin: '<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>',
   analytics: '<rect width="20" height="14" x="2" y="3" rx="2"/><path d="M8 21h8"/><path d="M12 17v4"/><path d="M6 7h4"/><path d="M6 10h4"/><path d="M6 13h2"/><path d="m13 13 2-3 2 1 2-4"/>',
   automation: '<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><polygon points="10.5 9 15 12 10.5 15 10.5 9"/>',
-  "data_integration": '<path d="m17 18-1.535 1.605a5 5 0 0 1-8-1.5"/><path d="M17 22v-4h-4"/><path d="M20.996 15.251A4.5 4.5 0 0 0 17.495 8h-1.79a7 7 0 1 0-12.709 5.607"/><path d="M7 10v4h4"/><path d="m7 14 1.535-1.605a5 5 0 0 1 8 1.5"/>',
+  "data_integration": '<ellipse cx="17" cy="7" rx="5" ry="2"/><path d="M12 7v10a5 2 0 0 0 10 0V7"/><path d="M12 12a5 2 0 0 0 10 0"/><circle cx="3" cy="5" r="2"/><circle cx="3" cy="12" r="2"/><circle cx="3" cy="19" r="2"/><path d="M5 5h1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5"/><path d="M5 12h7"/>',
   "reconciliation-entity": '<path d="M2 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18"/><path d="M14 10h6a2 2 0 0 1 2 2v10"/><path d="M1 22h22"/><path d="M6 6h.01"/><path d="M10 6h.01"/><path d="M6 10h.01"/><path d="M10 10h.01"/><path d="M6 14h.01"/><path d="M10 14h.01"/><path d="M18 14h.01"/><path d="M18 18h.01"/><path d="M6 22v-3h4v3"/>',
   "reconciliation-balance": '<path d="M13.744 17.736a6 6 0 1 1-7.48-7.48"/><path d="M15 6h1v4"/><path d="m6.134 14.768.866-.5 2 3.464"/><circle cx="16" cy="8" r="6"/>',
   scenario: '<circle cx="18" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><path d="M13 6h3a2 2 0 0 1 2 2v7"/><path d="M11 18H8a2 2 0 0 1-2-2V9"/>',
@@ -161,4 +161,5 @@ export const VUE_ICON_PATHS = {
   "task-etl": '<rect width="8" height="4" x="8" y="2" rx="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><ellipse cx="12" cy="10.5" rx="3.5" ry="1.5"/><path d="M8.5 10.5v6c0 .83 1.57 1.5 3.5 1.5s3.5-.67 3.5-1.5v-6"/><path d="M8.5 13.5c0 .83 1.57 1.5 3.5 1.5s3.5-.67 3.5-1.5"/>',
   "task-shared": '<rect width="8" height="4" x="8" y="2" rx="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><g transform="translate(-.5 4)"><circle cx="15.3" cy="6.8" r=".75"/><circle cx="9.7" cy="10" r=".75"/><circle cx="15.3" cy="13.2" r=".75"/><path d="m11.35 9.06 2.3-1.32"/><path d="m11.35 10.94 2.3 1.32"/></g>',
   "task-intercompany": '<rect width="8" height="4" x="8" y="2" rx="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><g transform="translate(-.5 4)"><path d="M8.5 14V6.5a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1V14"/><path d="M13.5 9.5H16a1 1 0 0 1 1 1V14"/><path d="M7.5 14h10"/><path d="M11 8.5h.01"/><path d="M11 11h.01"/></g>',
+  ownership: '<path d="M11 15h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 17"/><path d="m7 21 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9"/><path d="m2 16 6 6"/><circle cx="9" cy="5" r="3"/><path d="M12 5h9"/><path d="M18 5v2.5"/><path d="M21 5v2"/>',
 };

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.6",
+  "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}