@keyfunc/keybricks-ds 1.0.3 → 2.1.1

package/components/pipeline/PortLabel.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { ref } from 'vue'
+import Icon from '../icons/Icon.vue'
+import { portSkin } from './port-skin.js'
+// Labeled input port pill ("A >", "B >") — 28×22, same three tones as Port.
+defineProps({ label: { type: String, default: 'A' }, tone: { type: String, default: 'default' }, interactive: Boolean, style: Object })
+const hover = ref(false)
+</script>
+<template>
+  <span @mouseenter="hover = true" @mouseleave="hover = false"
+    :style="{ width: '28px', height: '22px', borderRadius: 'var(--radius-full)', boxSizing: 'border-box', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: '2px', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-xs)', letterSpacing: 'var(--tracking-xs)', lineHeight: 1, ...portSkin(tone, hover, interactive), ...style }">
+    <Icon v-if="tone === 'target'" name="plus" :size="12" :stroke-width="2.2" />
+    <template v-else>{{ label }}<Icon name="chevron-right" :size="9" :stroke-width="2.5" /></template>
+  </span>
+</template>

package/components/pipeline/ZoomControls.vue

@@ -5,7 +5,7 @@ const props = defineProps({ modelValue: { type: Number, default: 100 }, style: O
 const emit = defineEmits(['update:modelValue', 'fit'])
 </script>
 <template>
-  <div :style="{ display: 'inline-flex', alignItems: 'center', gap: 2, background: 'var(--bg-surface)', border: '1px solid var(--border-control)', borderRadius: 'var(--radius-md)', boxShadow: 'var(--shadow-menu)', padding: 3, boxSizing: 'border-box', ...style }">
+  <div :style="{ display: 'inline-flex', alignItems: 'center', gap: '2px', background: 'var(--bg-surface)', border: '1px solid var(--border-control)', borderRadius: 'var(--radius-md)', boxShadow: 'var(--shadow-menu)', padding: '3px', boxSizing: 'border-box', ...style }">
     <IconButton icon="minus" size="sm" label="Zoom out" @click="emit('update:modelValue', Math.max(25, modelValue - 10))" />
     <span style="min-width:40px;text-align:center;font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-secondary)">{{ modelValue }}%</span>
     <IconButton icon="plus" size="sm" label="Zoom in" @click="emit('update:modelValue', Math.min(200, modelValue + 10))" />

package/components/pipeline/port-skin.js

@@ -0,0 +1,13 @@
+// Shared port skin for Port.vue / PortLabel.vue / NodeCard.vue — mirrors portSkin() in NodeCard.jsx.
+// tone: "default" | "active" (a wire is being dragged from it) | "target" (valid drop here).
+export function portSkin(tone, hover, interactive) {
+  const hot = tone === 'active' || tone === 'target' || (interactive && hover)
+  return {
+    background: tone === 'target' ? 'var(--soft-bg)' : 'var(--bg-surface)',
+    border: `2px solid ${hot ? 'var(--action-primary)' : 'var(--port-border)'}`,
+    boxShadow: tone === 'active' || tone === 'target' ? '0 0 0 3px var(--focus-ring)' : 'none',
+    color: hot ? 'var(--action-primary)' : 'var(--text-muted)',
+    cursor: interactive ? (tone === 'active' ? 'grabbing' : 'grab') : 'default',
+    transition: 'var(--t-hover)'
+  }
+}

package/components/px.js

@@ -0,0 +1,4 @@
+// Vue's :style binding does not append "px" to numbers the way React does —
+// { height: 30 } is silently dropped by the browser. Wrap any numeric length in px().
+// Strings ('100%', 'var(--radius-md)', '12px') pass through untouched.
+export const px = (v) => (typeof v === 'number' ? v + 'px' : v)

package/components/tabs/PanelTabs.vue

@@ -1,10 +1,11 @@
 <script setup>
-defineProps({ tabs: { type: Array, default: () => [] }, active: String, style: Object })
+// Panel tabs (Node Info · Calc Rules · …): a lighter underline tab bar at the region's bar height with regular-weight control text. Put the panel in an sm region for the compact 32px/12px look.
+defineProps({ tabs: { type: Array, default: () => [] }, active: String, size: String, style: Object })
 const emit = defineEmits(['change'])
 </script>
 <template>
-  <div :style="{ display: 'flex', borderBottom: '1px solid var(--border-subtle)', ...style }">
-    <button v-for="t in tabs" :key="t" type="button" @click="emit('change', t)"
-      :style="{ background: 'transparent', border: 'none', cursor: 'pointer', padding: '8px 12px', marginBottom: -1, borderBottom: t === active ? '2px solid var(--action-primary)' : '2px solid transparent', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-sm)', color: t === active ? 'var(--action-primary)' : 'var(--text-secondary)' }">{{ t }}</button>
+  <div role="tablist" :data-size="size" :style="{ display: 'flex', borderBottom: '1px solid var(--border-subtle)', ...style }">
+    <button v-for="t in tabs" :key="t" type="button" role="tab" :aria-selected="t === active" :data-ink="t === active ? undefined : ''" @click="emit('change', t)"
+      :style="{ background: 'transparent', border: 'none', cursor: 'pointer', height: 'var(--bar-h)', boxSizing: 'border-box', padding: '0 var(--control-px)', marginBottom: '-1px', borderBottom: t === active ? '2px solid var(--action-primary)' : '2px solid transparent', fontFamily: 'var(--font-sans)', fontSize: 'var(--control-text)', lineHeight: 'var(--control-leading)', letterSpacing: 'var(--control-tracking)', color: t === active ? 'var(--action-primary)' : 'var(--ink, var(--text-secondary))', whiteSpace: 'nowrap' }">{{ t }}</button>
   </div>
 </template>

package/components/tabs/PillTabs.vue

@@ -1,10 +1,11 @@
 <script setup>
-defineProps({ tabs: { type: Array, default: () => [] }, active: String, style: Object })
+// Text pill filter tabs. Active = tinted pill. Pills are control-height (sm 24 · md 32 · lg 36); omit `size` to inherit.
+defineProps({ tabs: { type: Array, default: () => [] }, active: String, size: String, style: Object })
 const emit = defineEmits(['change'])
 </script>
 <template>
-  <div :style="{ display: 'flex', gap: 8, ...style }">
-    <button v-for="t in tabs" :key="t" type="button" @click="emit('change', t)"
-      :style="{ background: t === active ? 'var(--bg-active)' : 'transparent', border: 'none', cursor: 'pointer', height: 28, padding: '0 11px', borderRadius: 'var(--radius-md)', fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-sm)', color: t === active ? 'var(--text-heading)' : 'var(--text-secondary)' }">{{ t }}</button>
+  <div role="tablist" :data-size="size" :style="{ display: 'flex', gap: 'var(--control-gap)', ...style }">
+    <button v-for="t in tabs" :key="t" type="button" role="tab" :aria-selected="t === active" :data-ink="t === active ? undefined : ''" :data-wash="t === active ? undefined : ''" @click="emit('change', t)"
+      :style="{ background: t === active ? 'var(--bg-active)' : 'var(--wash, transparent)', border: 'none', cursor: 'pointer', height: 'var(--control-h)', padding: '0 var(--control-px)', borderRadius: 'var(--radius-md)', fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: 'var(--control-text)', lineHeight: 'var(--control-leading)', letterSpacing: 'var(--control-tracking)', color: t === active ? 'var(--text-heading)' : 'var(--ink, var(--text-secondary))', whiteSpace: 'nowrap' }">{{ t }}</button>
   </div>
 </template>

package/components/tabs/SegmentedControl.d.ts

@@ -1,11 +1,18 @@
 import * as React from "react";
-/** Inset segmented control with a raised active segment. Addition — not in the source file. */
+/** Inset segmented control with a raised active segment — switches views of the same data, applies instantly. ← → move between enabled segments. */
 export interface SegmentedControlProps {
-  /** Plain labels, or {label, icon} entries */
-  options?: (string | { label: string; icon?: string })[];
+  /** Plain labels, or { label, icon?, disabled? } entries. Value is matched by label. */
+  options?: (string | { label: string; icon?: string; disabled?: boolean })[];
   value?: string;
   onChange?: (value: string) => void;
-  size?: "sm" | "md";
+  /** Size tier: sm 24 · md 32 · lg 36. Omit to inherit the enclosing region's tier (the default). */
+  size?: "sm" | "md" | "lg";
+  /** Hide labels; each label becomes the segment's aria-label and tooltip */
+  iconOnly?: boolean;
+  /** Greys the whole control */
+  disabled?: boolean;
+  /** Stretch to the container, segments share the width evenly */
+  fullWidth?: boolean;
   style?: React.CSSProperties;
 }
 export declare function SegmentedControl(props: SegmentedControlProps): JSX.Element;

package/components/tabs/SegmentedControl.jsx

@@ -1,18 +1,33 @@
 import React from "react";
 import { Icon } from "../icons/Icon.jsx";
 
-/** Segmented control — inset track, raised active segment. options: string[] or [{label,icon}]. */
-export function SegmentedControl({ options = [], value, onChange, size = "md", style }) {
-  const h = size === "sm" ? 26 : 32;
+/**
+ * Segmented control — inset track, raised active segment. Switches views of the same data, applies instantly.
+ * options: string[] | { label, icon?, disabled? }[]   value/onChange by label
+ * size sm 24 | md 32 | lg 36 — omit it to inherit the region's tier · iconOnly hides labels (label becomes aria-label / title)
+ * disabled greys the whole control · fullWidth stretches segments evenly
+ * Keyboard: ← → move between enabled segments.
+ */
+const tierIcon = { width: "var(--control-icon)", height: "var(--control-icon)" };
+export function SegmentedControl({ options = [], value, onChange, size, iconOnly, disabled, fullWidth, style }) {
+  const opts = options.map((o) => (typeof o === "string" ? { label: o } : o));
+  const enabled = opts.filter((o) => !o.disabled);
+  const onKey = (e) => {
+    if (e.key !== "ArrowLeft" && e.key !== "ArrowRight" || disabled || !enabled.length) return;
+    e.preventDefault();
+    const i = enabled.findIndex((o) => o.label === value);
+    const n = e.key === "ArrowRight" ? enabled[(i + 1) % enabled.length] : enabled[(i - 1 + enabled.length) % enabled.length];
+    onChange && onChange(n.label);
+  };
   return (
-    <div style={{ display: "inline-flex", padding: 2, gap: 2, background: "var(--bg-inset)", border: "1px solid var(--border-control)", borderRadius: "var(--radius-md)", boxSizing: "border-box", ...style }}>
-      {options.map((o) => {
-        const label = typeof o === "string" ? o : o.label;
-        const is = value === label;
+    <div role="tablist" data-size={size} aria-disabled={disabled || undefined} onKeyDown={onKey} style={{ display: fullWidth ? "flex" : "inline-flex", height: "var(--control-h)", padding: 2, gap: 2, background: "var(--bg-inset)", border: "1px solid var(--border-control)", borderRadius: "var(--radius-md)", boxSizing: "border-box", opacity: disabled ? .5 : 1, ...style }}>
+      {opts.map((o) => {
+        const is = value === o.label, off = disabled || o.disabled;
         return (
-          <button key={label} type="button" onClick={() => onChange && onChange(label)}
-            style={{ height: h - 6, padding: "0 10px", display: "inline-flex", alignItems: "center", gap: 6, borderRadius: "var(--radius-sm)", border: "none", cursor: "pointer", background: is ? "var(--bg-surface)" : "transparent", boxShadow: is ? "0 1px 2px rgba(0,0,0,.08)" : "none", fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: size === "sm" ? "var(--text-xs)" : "var(--text-sm)", color: is ? "var(--text-heading)" : "var(--text-secondary)", whiteSpace: "nowrap", transition: "var(--t-hover)" }}>
-            {typeof o === "object" && o.icon ? <Icon name={o.icon} size={13} /> : null}{label}
+          <button key={o.label} type="button" role="tab" aria-selected={is} aria-label={iconOnly ? o.label : undefined} title={iconOnly ? o.label : undefined} disabled={off} tabIndex={is ? 0 : -1} data-ink={is || off ? undefined : ""}
+            onClick={() => !off && onChange && onChange(o.label)}
+            style={{ height: "calc(var(--control-h) - 6px)", padding: iconOnly ? "0 calc(var(--control-px) - 4px)" : "0 calc(var(--control-px) - 2px)", flex: fullWidth ? 1 : "none", justifyContent: "center", display: "inline-flex", alignItems: "center", gap: 6, borderRadius: "var(--radius-sm)", border: "none", cursor: off ? "not-allowed" : "pointer", background: is ? "var(--bg-surface)" : "transparent", boxShadow: is ? "0 1px 2px rgba(0,0,0,.08)" : "none", fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)", color: is ? "var(--text-heading)" : "var(--ink, var(--text-secondary))", opacity: o.disabled && !disabled ? .45 : 1, whiteSpace: "nowrap", transition: "var(--t-hover)" }}>
+            {o.icon ? <Icon name={o.icon} size={16} style={tierIcon} /> : null}{iconOnly ? null : o.label}
           </button>
         );
       })}

package/components/tabs/SegmentedControl.vue

@@ -1,15 +1,27 @@
 <script setup>
+import { computed } from 'vue'
 import Icon from '../icons/Icon.vue'
-// Segmented control — inset track, raised active segment. options: string[] or [{label,icon}].
-const props = defineProps({ options: { type: Array, default: () => [] }, modelValue: String, size: { type: String, default: 'md' }, style: Object })
+// Segmented control — inset track, raised active segment. Switches views of the same data, applies instantly.
+// options: string[] | { label, icon?, disabled? }[] · v-model by label · size sm 24 | md 32 | lg 36 — omit it to inherit the region's tier
+// iconOnly hides labels (label → aria-label/title) · disabled greys the control · fullWidth stretches segments · ← → keyboard.
+const tierIcon = { width: 'var(--control-icon)', height: 'var(--control-icon)' }
+const props = defineProps({ options: { type: Array, default: () => [] }, modelValue: String, size: String, iconOnly: Boolean, disabled: Boolean, fullWidth: Boolean, style: Object })
 const emit = defineEmits(['update:modelValue'])
-function label(o) { return typeof o === 'string' ? o : o.label }
+const opts = computed(() => props.options.map(o => typeof o === 'string' ? { label: o } : o))
+const enabled = computed(() => opts.value.filter(o => !o.disabled))
+const pick = (o) => { if (!(props.disabled || o.disabled)) emit('update:modelValue', o.label) }
+function onKey(e) {
+  if ((e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') || props.disabled || !enabled.value.length) return
+  e.preventDefault()
+  const i = enabled.value.findIndex(o => o.label === props.modelValue), n = enabled.value.length
+  emit('update:modelValue', (e.key === 'ArrowRight' ? enabled.value[(i + 1) % n] : enabled.value[(i - 1 + n) % n]).label)
+}
 </script>
 <template>
-  <div :style="{ display: 'inline-flex', padding: 2, gap: 2, background: 'var(--bg-inset)', border: '1px solid var(--border-control)', borderRadius: 'var(--radius-md)', boxSizing: 'border-box', ...style }">
-    <button v-for="o in options" :key="label(o)" type="button" @click="emit('update:modelValue', label(o))"
-      :style="{ height: (size === 'sm' ? 26 : 32) - 6, padding: '0 10px', display: 'inline-flex', alignItems: 'center', gap: 6, borderRadius: 'var(--radius-sm)', border: 'none', cursor: 'pointer', background: modelValue === label(o) ? 'var(--bg-surface)' : 'transparent', boxShadow: modelValue === label(o) ? '0 1px 2px rgba(0,0,0,.08)' : 'none', fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: size === 'sm' ? 'var(--text-xs)' : 'var(--text-sm)', color: modelValue === label(o) ? 'var(--text-heading)' : 'var(--text-secondary)', whiteSpace: 'nowrap', transition: 'var(--t-hover)' }">
-      <Icon v-if="typeof o === 'object' && o.icon" :name="o.icon" :size="13" />{{ label(o) }}
+  <div role="tablist" :data-size="size" :aria-disabled="disabled || undefined" @keydown="onKey" :style="{ display: fullWidth ? 'flex' : 'inline-flex', height: 'var(--control-h)', padding: '2px', gap: '2px', background: 'var(--bg-inset)', border: '1px solid var(--border-control)', borderRadius: 'var(--radius-md)', boxSizing: 'border-box', opacity: disabled ? .5 : 1, ...style }">
+    <button v-for="o in opts" :key="o.label" type="button" role="tab" :aria-selected="modelValue === o.label" :aria-label="iconOnly ? o.label : undefined" :title="iconOnly ? o.label : undefined" :disabled="disabled || o.disabled" :tabindex="modelValue === o.label ? 0 : -1" :data-ink="modelValue === o.label || disabled || o.disabled ? undefined : ''" @click="pick(o)"
+      :style="{ height: 'calc(var(--control-h) - 6px)', padding: iconOnly ? '0 calc(var(--control-px) - 4px)' : '0 calc(var(--control-px) - 2px)', flex: fullWidth ? 1 : 'none', justifyContent: 'center', display: 'inline-flex', alignItems: 'center', gap: '6px', borderRadius: 'var(--radius-sm)', border: 'none', cursor: (disabled || o.disabled) ? 'not-allowed' : 'pointer', background: modelValue === o.label ? 'var(--bg-surface)' : 'transparent', boxShadow: modelValue === o.label ? '0 1px 2px rgba(0,0,0,.08)' : 'none', fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: 'var(--control-text)', lineHeight: 'var(--control-leading)', letterSpacing: 'var(--control-tracking)', color: modelValue === o.label ? 'var(--text-heading)' : 'var(--ink, var(--text-secondary))', opacity: o.disabled && !disabled ? .45 : 1, whiteSpace: 'nowrap', transition: 'var(--t-hover)' }">
+      <Icon v-if="o.icon" :name="o.icon" :size="16" :style="tierIcon" /><template v-if="!iconOnly">{{ o.label }}</template>
     </button>
   </div>
 </template>

package/components/tabs/Tabs.d.ts

@@ -1,13 +1,15 @@
 import * as React from "react";
-/** Underline tabs (Import/Export). Active: blue text + 2px blue underline on hairline baseline. */
+/** Underline tabs (Import/Export). Active: blue text + 2px blue underline on hairline baseline. The bar is the region's bar height (sm 32 · md 40 · lg 44). */
 export interface TabsProps {
   tabs?: string[];
   active?: string;
   onChange?: (tab: string) => void;
+  /** Size tier. Omit to inherit the enclosing region's tier (the default). */
+  size?: "sm" | "md" | "lg";
   style?: React.CSSProperties;
 }
 export declare function Tabs(props: TabsProps): JSX.Element;
-/** 12px compact underline tabs for panels (Node Info / Calc Rules / ...). */
+/** Lighter underline tabs for panels (Node Info / Calc Rules / ...), regular weight; an sm region gives the compact 32px/12px look. */
 export declare function PanelTabs(props: TabsProps): JSX.Element;
-/** Text pill filter tabs; active gets a #f5f5f5 pill. */
+/** Text pill filter tabs at control height; active gets a tinted pill. */
 export declare function PillTabs(props: TabsProps): JSX.Element;

package/components/tabs/Tabs.jsx

@@ -1,14 +1,14 @@
 import React from "react";
 
-/** Underline tabs on a hairline baseline (Import/Export). Active = blue text + 2px blue underline. */
-export function Tabs({ tabs = [], active, onChange, style }) {
+/** Underline tabs on a hairline baseline (Import/Export). Active = blue text + 2px blue underline. The bar is the region's bar height (sm 32 · md 40 · lg 44) with the tier's control text; omit `size` to inherit. */
+export function Tabs({ tabs = [], active, onChange, size, style }) {
   return (
-    <div style={{ display: "flex", gap: 4, borderBottom: "1px solid var(--border-control)", ...style }}>
+    <div role="tablist" data-size={size} style={{ display: "flex", gap: 4, borderBottom: "1px solid var(--border-control)", ...style }}>
       {tabs.map((t) => {
         const is = t === active;
         return (
-          <button key={t} type="button" onClick={() => onChange && onChange(t)}
-            style={{ background: "transparent", border: "none", cursor: "pointer", padding: "9px 16px", marginBottom: -1, borderBottom: is ? "2px solid var(--action-primary)" : "2px solid transparent", fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)", color: is ? "var(--action-primary)" : "var(--text-body)" }}>
+          <button key={t} type="button" role="tab" aria-selected={is} data-ink={is ? undefined : ""} onClick={() => onChange && onChange(t)}
+            style={{ background: "transparent", border: "none", cursor: "pointer", height: "var(--bar-h)", boxSizing: "border-box", padding: "0 var(--control-px)", marginBottom: -1, borderBottom: is ? "2px solid var(--action-primary)" : "2px solid transparent", fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)", color: is ? "var(--action-primary)" : "var(--ink, var(--text-body))", whiteSpace: "nowrap" }}>
             {t}
           </button>
         );
@@ -17,15 +17,15 @@ export function Tabs({ tabs = [], active, onChange, style }) {
   );
 }
 
-/** Compact panel tabs (Node Info · Calc Rules · Output Fields · SQL Preview), 12px. */
-export function PanelTabs({ tabs = [], active, onChange, style }) {
+/** Panel tabs (Node Info · Calc Rules · Output Fields · SQL Preview): a lighter underline tab bar at the region's bar height with regular-weight control text. Put the panel in an sm region for the compact 32px/12px look. */
+export function PanelTabs({ tabs = [], active, onChange, size, style }) {
   return (
-    <div style={{ display: "flex", borderBottom: "1px solid var(--border-subtle)", ...style }}>
+    <div role="tablist" data-size={size} style={{ display: "flex", borderBottom: "1px solid var(--border-subtle)", ...style }}>
       {tabs.map((t) => {
         const is = t === active;
         return (
-          <button key={t} type="button" onClick={() => onChange && onChange(t)}
-            style={{ background: "transparent", border: "none", cursor: "pointer", padding: "8px 12px", marginBottom: -1, borderBottom: is ? "2px solid var(--action-primary)" : "2px solid transparent", fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", lineHeight: "var(--leading-sm)", color: is ? "var(--action-primary)" : "var(--text-secondary)" }}>
+          <button key={t} type="button" role="tab" aria-selected={is} data-ink={is ? undefined : ""} onClick={() => onChange && onChange(t)}
+            style={{ background: "transparent", border: "none", cursor: "pointer", height: "var(--bar-h)", boxSizing: "border-box", padding: "0 var(--control-px)", marginBottom: -1, borderBottom: is ? "2px solid var(--action-primary)" : "2px solid transparent", fontFamily: "var(--font-sans)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)", color: is ? "var(--action-primary)" : "var(--ink, var(--text-secondary))", whiteSpace: "nowrap" }}>
             {t}
           </button>
         );
@@ -34,15 +34,15 @@ export function PanelTabs({ tabs = [], active, onChange, style }) {
   );
 }
 
-/** Text pill filter tabs (For Review · To be Submitted · For Approval). Active = #f5f5f5 pill. */
-export function PillTabs({ tabs = [], active, onChange, style }) {
+/** Text pill filter tabs (For Review · To be Submitted · For Approval). Active = tinted pill. Pills are control-height (sm 24 · md 32 · lg 36); omit `size` to inherit. */
+export function PillTabs({ tabs = [], active, onChange, size, style }) {
   return (
-    <div style={{ display: "flex", gap: 8, ...style }}>
+    <div role="tablist" data-size={size} style={{ display: "flex", gap: "var(--control-gap)", ...style }}>
       {tabs.map((t) => {
         const is = t === active;
         return (
-          <button key={t} type="button" onClick={() => onChange && onChange(t)}
-            style={{ background: is ? "var(--bg-active)" : "transparent", border: "none", cursor: "pointer", height: 28, padding: "0 11px", borderRadius: "var(--radius-md)", fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-sm)", lineHeight: "var(--leading-sm)", color: is ? "var(--text-heading)" : "var(--text-secondary)" }}>
+          <button key={t} type="button" role="tab" aria-selected={is} data-ink={is ? undefined : ""} data-wash={is ? undefined : ""} onClick={() => onChange && onChange(t)}
+            style={{ background: is ? "var(--bg-active)" : "var(--wash, transparent)", border: "none", cursor: "pointer", height: "var(--control-h)", padding: "0 var(--control-px)", borderRadius: "var(--radius-md)", fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)", color: is ? "var(--text-heading)" : "var(--ink, var(--text-secondary))", whiteSpace: "nowrap" }}>
             {t}
           </button>
         );

package/components/tabs/Tabs.vue

@@ -1,11 +1,11 @@
 <script setup>
-// Underline tabs on a hairline baseline (Import/Export). Active = blue text + 2px blue underline.
-defineProps({ tabs: { type: Array, default: () => [] }, active: String, style: Object })
+// Underline tabs on a hairline baseline (Import/Export). Active = blue text + 2px blue underline. The bar is the region's bar height (sm 32 · md 40 · lg 44) with the tier's control text; omit `size` to inherit.
+defineProps({ tabs: { type: Array, default: () => [] }, active: String, size: String, style: Object })
 const emit = defineEmits(['change'])
 </script>
 <template>
-  <div :style="{ display: 'flex', gap: 4, borderBottom: '1px solid var(--border-control)', ...style }">
-    <button v-for="t in tabs" :key="t" type="button" @click="emit('change', t)"
-      :style="{ background: 'transparent', border: 'none', cursor: 'pointer', padding: '9px 16px', marginBottom: -1, borderBottom: t === active ? '2px solid var(--action-primary)' : '2px solid transparent', fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: 'var(--text-base)', lineHeight: 'var(--leading-base)', letterSpacing: 'var(--tracking-base)', color: t === active ? 'var(--action-primary)' : 'var(--text-body)' }">{{ t }}</button>
+  <div role="tablist" :data-size="size" :style="{ display: 'flex', gap: '4px', borderBottom: '1px solid var(--border-control)', ...style }">
+    <button v-for="t in tabs" :key="t" type="button" role="tab" :aria-selected="t === active" :data-ink="t === active ? undefined : ''" @click="emit('change', t)"
+      :style="{ background: 'transparent', border: 'none', cursor: 'pointer', height: 'var(--bar-h)', boxSizing: 'border-box', padding: '0 var(--control-px)', marginBottom: '-1px', borderBottom: t === active ? '2px solid var(--action-primary)' : '2px solid transparent', fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: 'var(--control-text)', lineHeight: 'var(--control-leading)', letterSpacing: 'var(--control-tracking)', color: t === active ? 'var(--action-primary)' : 'var(--ink, var(--text-body))', whiteSpace: 'nowrap' }">{{ t }}</button>
   </div>
 </template>

package/components/tabs/ViewToggle.d.ts

@@ -1,7 +1,9 @@
 import * as React from "react";
-/** list/grid segmented icon toggle (26px, r4, active #f5f5f5). */
+/** list/grid icon toggle — two IconButtons at the region's tier (sm 24 · md 32 · lg 36), active gets the tinted wash. */
 export interface ViewToggleProps {
   value?: "list" | "grid";
+  /** Size tier. Omit to inherit the enclosing region's tier (the default). */
+  size?: "sm" | "md" | "lg";
   onChange?: (v: "list" | "grid") => void;
   style?: React.CSSProperties;
 }

package/components/tabs/ViewToggle.jsx

@@ -1,12 +1,12 @@
 import React from "react";
 import { IconButton } from "../buttons/IconButton.jsx";
 
-/** Two-state list/grid icon toggle (palette header). */
-export function ViewToggle({ value = "grid", onChange, style }) {
+/** Two-state list/grid icon toggle (palette header). Two IconButtons at the region's tier; omit `size` to inherit. */
+export function ViewToggle({ value = "grid", onChange, size, style }) {
   return (
-    <div style={{ display: "inline-flex", gap: 2, ...style }}>
-      <IconButton icon="list" size="sm" active={value === "list"} onClick={() => onChange && onChange("list")} label="List view" />
-      <IconButton icon="layout-grid" size="sm" active={value === "grid"} onClick={() => onChange && onChange("grid")} label="Grid view" />
+    <div data-size={size} style={{ display: "inline-flex", gap: 2, ...style }}>
+      <IconButton icon="list" active={value === "list"} onClick={() => onChange && onChange("list")} label="List view" />
+      <IconButton icon="layout-grid" active={value === "grid"} onClick={() => onChange && onChange("grid")} label="Grid view" />
     </div>
   );
 }

package/components/tabs/ViewToggle.vue

@@ -1,12 +1,12 @@
 <script setup>
 import IconButton from '../buttons/IconButton.vue'
-// Two-state list/grid icon toggle (palette header).
-defineProps({ modelValue: { type: String, default: 'grid' }, style: Object })
+// Two-state list/grid icon toggle (palette header). Two IconButtons at the region's tier; omit `size` to inherit.
+defineProps({ modelValue: { type: String, default: 'grid' }, size: String, style: Object })
 const emit = defineEmits(['update:modelValue'])
 </script>
 <template>
-  <div :style="{ display: 'inline-flex', gap: 2, ...style }">
-    <IconButton icon="list" size="sm" :active="modelValue === 'list'" label="List view" @click="emit('update:modelValue', 'list')" />
-    <IconButton icon="layout-grid" size="sm" :active="modelValue === 'grid'" label="Grid view" @click="emit('update:modelValue', 'grid')" />
+  <div :data-size="size" :style="{ display: 'inline-flex', gap: '2px', ...style }">
+    <IconButton icon="list" :active="modelValue === 'list'" label="List view" @click="emit('update:modelValue', 'list')" />
+    <IconButton icon="layout-grid" :active="modelValue === 'grid'" label="Grid view" @click="emit('update:modelValue', 'grid')" />
   </div>
 </template>

package/components/tabs/tabs.prompt.md

@@ -1,4 +1,4 @@
-Tab systems: `Tabs` (13px underline — page level), `PanelTabs` (12px underline — config panel), `PillTabs` (pill filters), `ViewToggle` (list/grid icons).
+Tab systems: `Tabs` (underline — page level), `PanelTabs` (lighter underline — config panel, put the panel in an sm region), `PillTabs` (pill filters), `ViewToggle` (list/grid icons). All read the region's size tier: bars are 32 / 40 / 44px, pills 24 / 32 / 36px.
 
 ```jsx
 <Tabs tabs={["Import","Export"]} active={tab} onChange={setTab}/>
@@ -7,8 +7,10 @@ Tab systems: `Tabs` (13px underline — page level), `PanelTabs` (12px underline
 <ViewToggle value={view} onChange={setView}/>
 ```
 
-`SegmentedControl` (addition) for view/range switches:
+`SegmentedControl` (addition) for view/range switches — same data, instant; never a saved value and never page navigation. `iconOnly`, per-option `disabled`, `fullWidth`:
 
 ```jsx
 <SegmentedControl options={[{label:"List",icon:"list"},{label:"Grid",icon:"layout-grid"}]} value={v} onChange={setV}/>
+<SegmentedControl iconOnly options={[{icon:"table",label:"Table"},{icon:"chart-column",label:"Chart"}]} value={m} onChange={setM}/>
+<SegmentedControl fullWidth options={["Overview","Details","History"]} value={t} onChange={setT}/>
 ```

package/keybricks.css

@@ -0,0 +1,4 @@
+/* Consumer entry: tokens + the hover hooks that component inline styles read.
+   (hover.css stays outside styles.css so the design-system compiler does not register its state signals as tokens.) */
+@import './styles.css';
+@import './tokens/hover.css';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@keyfunc/keybricks-ds",
-  "version": "1.0.3",
-  "description": "Keybricks design system — 334 design tokens and 118 UI components in React and Vue 3, source-only.",
+  "version": "2.1.1",
+  "description": "Keybricks design system — 352 design tokens, three size tiers and 117 UI components in React and Vue 3, source-only.",
   "license": "UNLICENSED",
   "type": "module",
   "sideEffects": [
@@ -13,7 +13,8 @@
       "default": "./components/index.js"
     },
     "./vue": "./components/_vue/index.mjs",
-    "./styles.css": "./styles.css",
+    "./styles.css": "./keybricks.css",
+    "./keybricks.css": "./keybricks.css",
     "./tokens": {
       "types": "./tokens/tokens.d.ts",
       "default": "./tokens/tokens.js"
@@ -31,7 +32,9 @@
     "assets",
     "_scripts",
     "styles.css",
+    "keybricks.css",
     "readme.md",
+    "readme.zh-CN.md",
     "DESIGN.md",
     "INTEGRATION.md",
     "DEPLOY.md",