@3fn/core 14.0.0 → 14.1.0

package/dist/browser/tokens.css

@@ -1,6 +1,6 @@
 /**
  * DesignerPunk Design System - Web Tokens
- * Generated: 2026-08-12T03:23:16.987Z
+ * Generated: 2026-08-26T14:15:24.233Z
  * Version: 1.0.0
  * Platform: Web (CSS Custom Properties)
  *
@@ -998,6 +998,8 @@
   --inputradio-box-lg: var(--size-500);
 
   /* Progress Component Tokens */
+  /* Connector line thickness (1px). References borderDefault primitive for consistent border treatment across the design system. */
+  --progress-connector-thickness: var(--border-width-100);
   /* Small node base size (12px). Inactive dots in compact mobile contexts. */
   --progress-node-size-sm: var(--size-150);
   /* Medium node base size (16px). Default inactive dot size. */
@@ -1016,8 +1018,6 @@
   --progress-node-gap-md: var(--space-100);
   /* Large gap between nodes (12px = 1.5× base). Generous spacing for detailed steppers with labels in desktop contexts. */
   --progress-node-gap-lg: var(--space-150);
-  /* Connector line thickness (1px). References borderDefault primitive for consistent border treatment across the design system. */
-  --progress-connector-thickness: var(--border-width-100);
 
   /* VerticalListItem Component Tokens */
   /* Block padding at rest state (1px border). 11px padding + 1px border = 12px per side, achieving 48px total with 24px content. Uses TokenWithValue pattern as no primitive token exists for 11px. */

package/dist/build/tokens/defineComponentTokens.d.ts

@@ -60,6 +60,16 @@ export interface PrimitiveTokenReference {
     name: string;
     /** Unitless base value from the primitive token */
     baseValue: number;
+    /**
+     * Primitive token family (the `category` field of a `PrimitiveToken`, e.g. 'spacing',
+     * 'sizing', 'radius'). OPTIONAL for backward compatibility: minimal `{ name, baseValue }`
+     * reference literals remain valid.
+     *
+     * When present, it is cross-checked against the call's declared `family` by the
+     * family-mismatch guard in {@link defineComponentTokens}. Real primitives from
+     * src/tokens/** always carry it, so the guard is active for all production authoring.
+     */
+    category?: string;
 }
 /**
  * Token definition with primitive reference

package/dist/build/tokens/defineComponentTokens.js

@@ -125,6 +125,32 @@ function defineComponentTokens(config) {
         if (isTokenWithReference(definition)) {
             // Token with primitive reference
             const primitiveToken = definition.reference;
+            // FAMILY-MISMATCH GUARD.
+            // The call's `family` is stamped onto every token it registers, and the generator
+            // derives platform output from it — notably the primitive class name used for
+            // reference-path tokens (getFamilyClassName) and the Android `.dp` suffix. A call
+            // that declares one family but references another family's primitive therefore emits
+            // a member that does not exist on the target platform. That is exactly the Button-Icon
+            // defect: a `family: 'spacing'` call referencing `sizingTokens.size600` generated
+            // `SpacingTokens.size600`, a non-existent member (PR #126).
+            //
+            // Only enforced when the reference carries a `category` — minimal `{ name, baseValue }`
+            // literals (used widely in tests) are intentionally exempt rather than rejected.
+            //
+            // Escape hatch: a token that legitimately needs another family's VALUE should use the
+            // value path (`value:`), which asserts no cross-family token-chain claim.
+            if (typeof primitiveToken.category === 'string' &&
+                primitiveToken.category !== family) {
+                throw new Error(`Token family mismatch in defineComponentTokens() for component '${component}': ` +
+                    `token '${key}' is declared in a '${family}' family call but references primitive ` +
+                    `'${primitiveToken.name}' from the '${primitiveToken.category}' family. ` +
+                    `Every token in a call is stamped with that call's family, which drives platform ` +
+                    `output (e.g. the generated '${family.charAt(0).toUpperCase() + family.slice(1)}Tokens' ` +
+                    `class reference), so this would emit a non-existent platform member. ` +
+                    `Fix: move '${key}' into a separate defineComponentTokens() call with ` +
+                    `family: '${primitiveToken.category}', or use the value path if no token-chain ` +
+                    `relationship is intended.`);
+            }
             const value = primitiveToken.baseValue;
             values[key] = value;
             registeredTokens.push({

package/dist/components/core/Avatar-Base/avatar.tokens.d.ts

@@ -34,6 +34,15 @@
  * - xs: calc(icon.size050 × 0.75) = 12px
  * - xxl: calc(icon.size050 × 4) = 64px
  *
+ * TOKEN FAMILY: all dimensional Avatar tokens (container `size.*` AND icon
+ * `icon.size.*` gap fillers) are registered by the single sizing-family call
+ * `AvatarSizingTokens` below. The `icon.size.*` pair previously lived in a
+ * separate `AvatarTokens` call stamped `family: 'spacing'` — a mislabel, since
+ * both are dimensional sizing values. `AvatarTokens` is removed; consumers use
+ * `AvatarSizingTokens` or the `getAvatarIconSize()` / `getAvatarSize()` accessors.
+ * Generated platform output is unaffected: both calls declare `component: 'Avatar'`,
+ * so all tokens still land in one `AvatarTokens` Swift enum / Kotlin object.
+ *
  * COLOR TOKENS (Spec 058):
  * Avatar color tokens are defined in this file following the Rosetta System architecture
  * which mandates component tokens live at src/components/[ComponentName]/tokens.ts.
@@ -52,13 +61,24 @@
  * @see .kiro/specs/058-component-token-architecture-cleanup for color token migration
  */
 /**
- * Avatar sizing tokens — container dimensions for each size variant.
+ * Avatar sizing tokens — container dimensions and icon dimensions for each size variant.
  *
  * Previously in a separate file (avatar-sizing.tokens.ts). Inlined to prevent
  * architectural anomaly (no other component splits tokens across files) and
  * simplify the package surface for sync.
  *
+ * ONE CALL PER FAMILY. Every token registered by a single defineComponentTokens()
+ * call is stamped with that call's `family`, and the family drives platform output
+ * (Swift type, Kotlin `.dp` suffix, primitive class name). The `icon.size.*` gap
+ * fillers below are dimensional sizing values, so they live in this sizing-family
+ * call — they were previously mis-stamped `family: 'spacing'` in a separate
+ * `AvatarTokens` call, the same latent mislabel class fixed for Button-Icon.
+ * Do NOT spread/merge this result with another call's result — the rich metadata
+ * rides on a non-enumerable brand (see src/build/tokens/defineComponentTokens.ts,
+ * TOKEN_CONTRACT_BRAND) that a spread would silently drop.
+ *
  * @see .kiro/specs/092-sizing-token-family/design.md
+ * @see src/components/core/Button-Icon/buttonIcon.tokens.ts for the two-call pattern
  */
 export declare const AvatarSizingTokens: import("../../../build/tokens").ComponentTokenValues<{
     'size.xs': {
@@ -85,31 +105,6 @@ export declare const AvatarSizingTokens: import("../../../build/tokens").Compone
         reference: import("../../../types").PrimitiveToken;
         reasoning: string;
     };
-}>;
-/**
- * Avatar component tokens defined using the hybrid authoring API.
- *
- * Each token either references a primitive spacing token or uses a family-conformant
- * derivation, and includes reasoning explaining why the token exists.
- *
- * NOTE: Web platform uses CSS calc() with icon tokens for sizing (see Avatar.styles.css).
- * These component tokens are primarily used for iOS/Android platforms and documentation.
- *
- * Size token values:
- * - size.xs: 24px (3 × base, references size300)
- * - size.sm: 32px (4 × base, references size400)
- * - size.md: 40px (5 × base, references size500)
- * - size.lg: 48px (6 × base, references size600)
- * - size.xl: 80px (10 × base, derivation)
- * - size.xxl: 128px (16 × base, derivation)
- *
- * Icon size token values (gap fillers - web uses calc() instead):
- * - icon.size.xs: 12px (1.5 × base, derivation) - web uses calc(icon.size050 × 0.75)
- * - icon.size.xxl: 64px (8 × base, derivation) - web uses calc(icon.size050 × 4)
- *
- * @see Requirements 2.1-2.6, 3.1, 3.6 in .kiro/specs/042-avatar-component/requirements.md
- */
-export declare const AvatarTokens: import("../../../build/tokens").ComponentTokenValues<{
     'icon.size.xs': {
         value: number;
         reasoning: string;

package/dist/components/core/Avatar-Base/avatar.tokens.js

@@ -35,6 +35,15 @@
  * - xs: calc(icon.size050 × 0.75) = 12px
  * - xxl: calc(icon.size050 × 4) = 64px
  *
+ * TOKEN FAMILY: all dimensional Avatar tokens (container `size.*` AND icon
+ * `icon.size.*` gap fillers) are registered by the single sizing-family call
+ * `AvatarSizingTokens` below. The `icon.size.*` pair previously lived in a
+ * separate `AvatarTokens` call stamped `family: 'spacing'` — a mislabel, since
+ * both are dimensional sizing values. `AvatarTokens` is removed; consumers use
+ * `AvatarSizingTokens` or the `getAvatarIconSize()` / `getAvatarSize()` accessors.
+ * Generated platform output is unaffected: both calls declare `component: 'Avatar'`,
+ * so all tokens still land in one `AvatarTokens` Swift enum / Kotlin object.
+ *
  * COLOR TOKENS (Spec 058):
  * Avatar color tokens are defined in this file following the Rosetta System architecture
  * which mandates component tokens live at src/components/[ComponentName]/tokens.ts.
@@ -53,7 +62,7 @@
  * @see .kiro/specs/058-component-token-architecture-cleanup for color token migration
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AvatarIconSizeTokenReferences = exports.AvatarSizeTokenReferences = exports.AvatarColorTokens = exports.AvatarTokens = exports.AvatarSizingTokens = void 0;
+exports.AvatarIconSizeTokenReferences = exports.AvatarSizeTokenReferences = exports.AvatarColorTokens = exports.AvatarSizingTokens = void 0;
 exports.getAvatarColorToken = getAvatarColorToken;
 exports.getAvatarSize = getAvatarSize;
 exports.getAvatarIconSize = getAvatarIconSize;
@@ -62,13 +71,24 @@ exports.getAvatarIconSizeTokenReference = getAvatarIconSizeTokenReference;
 const tokens_1 = require("../../../build/tokens");
 const SizingTokens_1 = require("../../../tokens/SizingTokens");
 /**
- * Avatar sizing tokens — container dimensions for each size variant.
+ * Avatar sizing tokens — container dimensions and icon dimensions for each size variant.
  *
  * Previously in a separate file (avatar-sizing.tokens.ts). Inlined to prevent
  * architectural anomaly (no other component splits tokens across files) and
  * simplify the package surface for sync.
  *
+ * ONE CALL PER FAMILY. Every token registered by a single defineComponentTokens()
+ * call is stamped with that call's `family`, and the family drives platform output
+ * (Swift type, Kotlin `.dp` suffix, primitive class name). The `icon.size.*` gap
+ * fillers below are dimensional sizing values, so they live in this sizing-family
+ * call — they were previously mis-stamped `family: 'spacing'` in a separate
+ * `AvatarTokens` call, the same latent mislabel class fixed for Button-Icon.
+ * Do NOT spread/merge this result with another call's result — the rich metadata
+ * rides on a non-enumerable brand (see src/build/tokens/defineComponentTokens.ts,
+ * TOKEN_CONTRACT_BRAND) that a spread would silently drop.
+ *
  * @see .kiro/specs/092-sizing-token-family/design.md
+ * @see src/components/core/Button-Icon/buttonIcon.tokens.ts for the two-call pattern
  */
 exports.AvatarSizingTokens = (0, tokens_1.defineComponentTokens)({
     component: 'Avatar',
@@ -98,37 +118,14 @@ exports.AvatarSizingTokens = (0, tokens_1.defineComponentTokens)({
             reference: SizingTokens_1.sizingTokens.size1600,
             reasoning: 'Extra extra large avatar (128px). Full profile view, onboarding.',
         },
-    },
-});
-/**
- * Avatar component tokens defined using the hybrid authoring API.
- *
- * Each token either references a primitive spacing token or uses a family-conformant
- * derivation, and includes reasoning explaining why the token exists.
- *
- * NOTE: Web platform uses CSS calc() with icon tokens for sizing (see Avatar.styles.css).
- * These component tokens are primarily used for iOS/Android platforms and documentation.
- *
- * Size token values:
- * - size.xs: 24px (3 × base, references size300)
- * - size.sm: 32px (4 × base, references size400)
- * - size.md: 40px (5 × base, references size500)
- * - size.lg: 48px (6 × base, references size600)
- * - size.xl: 80px (10 × base, derivation)
- * - size.xxl: 128px (16 × base, derivation)
- *
- * Icon size token values (gap fillers - web uses calc() instead):
- * - icon.size.xs: 12px (1.5 × base, derivation) - web uses calc(icon.size050 × 0.75)
- * - icon.size.xxl: 64px (8 × base, derivation) - web uses calc(icon.size050 × 4)
- *
- * @see Requirements 2.1-2.6, 3.1, 3.6 in .kiro/specs/042-avatar-component/requirements.md
- */
-exports.AvatarTokens = (0, tokens_1.defineComponentTokens)({
-    component: 'Avatar',
-    family: 'spacing',
-    tokens: {
-        // Icon size tokens (gap fillers for sizes without existing icon tokens)
-        // These fill gaps where no standard icon token exists at the required 50% ratio
+        // Icon size tokens (gap fillers for sizes without an existing icon token).
+        // Kept on the VALUE path deliberately: sizing primitives exist at both values
+        // (size150 = 12, size800 = 64), but the reference path currently emits a
+        // fabricated `SizingTokens.<name>` class on iOS/Android that no generated or
+        // hand-written platform file defines. Switching these to `reference:` would
+        // trade compiling output (`12.dp`) for non-compiling output and break
+        // Avatar.android.kt's `val iconSizeXs: Dp = GeneratedAvatarTokens.iconSizeXs`.
+        // Revisit once TokenFileGenerator.getFamilyClassName emits a real platform type.
         'icon.size.xs': {
             value: SizingTokens_1.SIZING_BASE_VALUE * 1.5,
             reasoning: 'Icon size for xs avatar (12px = 1.5× base) maintains 50% ratio (12/24). No existing icon token at this size, so component token fills the gap.',
@@ -254,7 +251,7 @@ function getAvatarSize(variant) {
  * @see Requirements 3.1, 3.6 in .kiro/specs/042-avatar-component/requirements.md
  */
 function getAvatarIconSize(variant) {
-    return exports.AvatarTokens[`icon.size.${variant}`];
+    return exports.AvatarSizingTokens[`icon.size.${variant}`];
 }
 /**
  * Semantic token references for Avatar size values

package/dist/components/core/Avatar-Base/index.d.ts

@@ -6,7 +6,7 @@
  */
 export type { AvatarProps, AvatarType, AvatarSize } from './types';
 export { AVATAR_DEFAULTS } from './types';
-export { AvatarTokens, getAvatarSize, getAvatarIconSize, getAvatarSizeTokenReference, getAvatarIconSizeTokenReference, AvatarSizeTokenReferences, AvatarIconSizeTokenReferences, } from './avatar.tokens';
+export { AvatarSizingTokens, getAvatarSize, getAvatarIconSize, getAvatarSizeTokenReference, getAvatarIconSizeTokenReference, AvatarSizeTokenReferences, AvatarIconSizeTokenReferences, } from './avatar.tokens';
 export type { AvatarSizeVariant, AvatarIconSizeVariant } from './avatar.tokens';
 export { AvatarBaseElement } from './platforms/web/Avatar.web';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/core/Avatar-Base/index.js

@@ -6,12 +6,12 @@
  * @see .kiro/specs/042-avatar-component/requirements.md for requirements
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AvatarBaseElement = exports.AvatarIconSizeTokenReferences = exports.AvatarSizeTokenReferences = exports.getAvatarIconSizeTokenReference = exports.getAvatarSizeTokenReference = exports.getAvatarIconSize = exports.getAvatarSize = exports.AvatarTokens = exports.AVATAR_DEFAULTS = void 0;
+exports.AvatarBaseElement = exports.AvatarIconSizeTokenReferences = exports.AvatarSizeTokenReferences = exports.getAvatarIconSizeTokenReference = exports.getAvatarSizeTokenReference = exports.getAvatarIconSize = exports.getAvatarSize = exports.AvatarSizingTokens = exports.AVATAR_DEFAULTS = void 0;
 var types_1 = require("./types");
 Object.defineProperty(exports, "AVATAR_DEFAULTS", { enumerable: true, get: function () { return types_1.AVATAR_DEFAULTS; } });
 // Token exports
 var avatar_tokens_1 = require("./avatar.tokens");
-Object.defineProperty(exports, "AvatarTokens", { enumerable: true, get: function () { return avatar_tokens_1.AvatarTokens; } });
+Object.defineProperty(exports, "AvatarSizingTokens", { enumerable: true, get: function () { return avatar_tokens_1.AvatarSizingTokens; } });
 Object.defineProperty(exports, "getAvatarSize", { enumerable: true, get: function () { return avatar_tokens_1.getAvatarSize; } });
 Object.defineProperty(exports, "getAvatarIconSize", { enumerable: true, get: function () { return avatar_tokens_1.getAvatarIconSize; } });
 Object.defineProperty(exports, "getAvatarSizeTokenReference", { enumerable: true, get: function () { return avatar_tokens_1.getAvatarSizeTokenReference; } });

package/dist/components/core/Button-Icon/buttonIcon.tokens.d.ts

@@ -8,18 +8,27 @@
  * Uses the defineComponentTokens() API to register tokens with the global
  * ComponentTokenRegistry for pipeline integration.
  *
+ * Two separate defineComponentTokens() calls are used — one per token family
+ * (spacing, sizing) — following the Avatar-Base pattern (avatar.tokens.ts). Every
+ * token registered by a single call is stamped with that call's `family`, so inset
+ * (spacing) and size (sizing) tokens must NOT share a call even though they live in
+ * the same file. The two branded results are exported separately and must NOT be
+ * spread/merged into one object — the rich metadata rides on a non-enumerable brand
+ * (see src/build/tokens/defineComponentTokens.ts, TOKEN_CONTRACT_BRAND) that a spread
+ * would silently drop.
+ *
  * The build system generates platform-specific values from these definitions:
  * - Web: CSS custom properties (var(--buttonicon-inset-large))
  * - iOS: Swift constants (ButtonIconTokens.insetLarge)
  * - Android: Kotlin constants (ButtonIconTokens.insetLarge)
  *
  * Token Relationships:
- * - buttonIcon.inset.large (12px) references space150
- * - buttonIcon.inset.medium (10px) references space125 (strategic flexibility token)
- * - buttonIcon.inset.small (8px) references space100
- * - buttonIcon.size.large (48px) references size600
- * - buttonIcon.size.medium (40px) references size500
- * - buttonIcon.size.small (32px) references size400
+ * - buttonIcon.inset.large (12px) references space150 — family: spacing
+ * - buttonIcon.inset.medium (10px) references space125 (strategic flexibility token) — family: spacing
+ * - buttonIcon.inset.small (8px) references space100 — family: spacing
+ * - buttonIcon.size.large (48px) references size600 — family: sizing
+ * - buttonIcon.size.medium (40px) references size500 — family: sizing
+ * - buttonIcon.size.small (32px) references size400 — family: sizing
  *
  * @see .kiro/specs/035-button-icon-component/design.md for token consumption strategy
  * @see .kiro/specs/034-component-architecture-system for Stemma System details
@@ -27,24 +36,18 @@
  * @see .kiro/specs/040-component-alignment/requirements.md Requirements 6.1, 6.2, 6.3
  */
 /**
- * Button-Icon component tokens defined using the hybrid authoring API.
+ * Button-Icon inset (padding) tokens — reference spacing primitives.
  *
  * Each token references a primitive token and includes reasoning
  * explaining why the token exists and its purpose in the component.
  *
- * Inset (padding) token values — reference spacing primitives:
  * - inset.large: 12px (1.5 × base, references space150)
  * - inset.medium: 10px (1.25 × base, references space125 strategic flexibility token)
  * - inset.small: 8px (1 × base, references space100)
  *
- * Size (width/height) token values:
- * - size.large: 48px (6 × base, references size600)
- * - size.medium: 40px (5 × base, references size500)
- * - size.small: 32px (4 × base, references size400)
- *
  * @see Requirements 6.1, 6.2, 6.3 in .kiro/specs/040-component-alignment/requirements.md
  */
-export declare const ButtonIconTokens: import("../../../build/tokens").ComponentTokenValues<{
+export declare const ButtonIconInsetTokens: import("../../../build/tokens").ComponentTokenValues<{
     'inset.large': {
         reference: import("../../../types").PrimitiveToken;
         reasoning: string;
@@ -57,6 +60,17 @@ export declare const ButtonIconTokens: import("../../../build/tokens").Component
         reference: import("../../../types").PrimitiveToken;
         reasoning: string;
     };
+}>;
+/**
+ * Button-Icon size (width/height) tokens — reference sizing primitives, not spacing.
+ *
+ * - size.large: 48px (6 × base, references size600)
+ * - size.medium: 40px (5 × base, references size500)
+ * - size.small: 32px (4 × base, references size400)
+ *
+ * @see Requirements 6.1, 6.2, 6.3 in .kiro/specs/040-component-alignment/requirements.md
+ */
+export declare const ButtonIconSizeTokens: import("../../../build/tokens").ComponentTokenValues<{
     'size.large': {
         reference: import("../../../types").PrimitiveToken;
         reasoning: string;

package/dist/components/core/Button-Icon/buttonIcon.tokens.js

@@ -9,18 +9,27 @@
  * Uses the defineComponentTokens() API to register tokens with the global
  * ComponentTokenRegistry for pipeline integration.
  *
+ * Two separate defineComponentTokens() calls are used — one per token family
+ * (spacing, sizing) — following the Avatar-Base pattern (avatar.tokens.ts). Every
+ * token registered by a single call is stamped with that call's `family`, so inset
+ * (spacing) and size (sizing) tokens must NOT share a call even though they live in
+ * the same file. The two branded results are exported separately and must NOT be
+ * spread/merged into one object — the rich metadata rides on a non-enumerable brand
+ * (see src/build/tokens/defineComponentTokens.ts, TOKEN_CONTRACT_BRAND) that a spread
+ * would silently drop.
+ *
  * The build system generates platform-specific values from these definitions:
  * - Web: CSS custom properties (var(--buttonicon-inset-large))
  * - iOS: Swift constants (ButtonIconTokens.insetLarge)
  * - Android: Kotlin constants (ButtonIconTokens.insetLarge)
  *
  * Token Relationships:
- * - buttonIcon.inset.large (12px) references space150
- * - buttonIcon.inset.medium (10px) references space125 (strategic flexibility token)
- * - buttonIcon.inset.small (8px) references space100
- * - buttonIcon.size.large (48px) references size600
- * - buttonIcon.size.medium (40px) references size500
- * - buttonIcon.size.small (32px) references size400
+ * - buttonIcon.inset.large (12px) references space150 — family: spacing
+ * - buttonIcon.inset.medium (10px) references space125 (strategic flexibility token) — family: spacing
+ * - buttonIcon.inset.small (8px) references space100 — family: spacing
+ * - buttonIcon.size.large (48px) references size600 — family: sizing
+ * - buttonIcon.size.medium (40px) references size500 — family: sizing
+ * - buttonIcon.size.small (32px) references size400 — family: sizing
  *
  * @see .kiro/specs/035-button-icon-component/design.md for token consumption strategy
  * @see .kiro/specs/034-component-architecture-system for Stemma System details
@@ -28,7 +37,7 @@
  * @see .kiro/specs/040-component-alignment/requirements.md Requirements 6.1, 6.2, 6.3
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ButtonIconSizeTokenReferences = exports.ButtonIconInsetTokenReferences = exports.ButtonIconTokens = void 0;
+exports.ButtonIconSizeTokenReferences = exports.ButtonIconInsetTokenReferences = exports.ButtonIconSizeTokens = exports.ButtonIconInsetTokens = void 0;
 exports.getButtonIconInset = getButtonIconInset;
 exports.getButtonIconSize = getButtonIconSize;
 exports.getButtonIconInsetTokenReference = getButtonIconInsetTokenReference;
@@ -37,28 +46,21 @@ const tokens_1 = require("../../../build/tokens");
 const SpacingTokens_1 = require("../../../tokens/SpacingTokens");
 const SizingTokens_1 = require("../../../tokens/SizingTokens");
 /**
- * Button-Icon component tokens defined using the hybrid authoring API.
+ * Button-Icon inset (padding) tokens — reference spacing primitives.
  *
  * Each token references a primitive token and includes reasoning
  * explaining why the token exists and its purpose in the component.
  *
- * Inset (padding) token values — reference spacing primitives:
  * - inset.large: 12px (1.5 × base, references space150)
  * - inset.medium: 10px (1.25 × base, references space125 strategic flexibility token)
  * - inset.small: 8px (1 × base, references space100)
  *
- * Size (width/height) token values:
- * - size.large: 48px (6 × base, references size600)
- * - size.medium: 40px (5 × base, references size500)
- * - size.small: 32px (4 × base, references size400)
- *
  * @see Requirements 6.1, 6.2, 6.3 in .kiro/specs/040-component-alignment/requirements.md
  */
-exports.ButtonIconTokens = (0, tokens_1.defineComponentTokens)({
+exports.ButtonIconInsetTokens = (0, tokens_1.defineComponentTokens)({
     component: 'ButtonIcon',
     family: 'spacing',
     tokens: {
-        // Inset (padding) tokens
         'inset.large': {
             reference: SpacingTokens_1.spacingTokens.space150,
             reasoning: 'Large button variant requires 12px padding (1.5× base) for comfortable touch target and visual balance with larger icon sizes',
@@ -71,8 +73,21 @@ exports.ButtonIconTokens = (0, tokens_1.defineComponentTokens)({
             reference: SpacingTokens_1.spacingTokens.space100,
             reasoning: 'Small button variant uses 8px padding (1× base) for minimal footprint in dense UI layouts while meeting minimum touch target requirements',
         },
-        // Size (width/height) tokens — reference sizing primitives, not spacing
-        // @see Requirements 6.1, 6.2, 6.3
+    },
+});
+/**
+ * Button-Icon size (width/height) tokens — reference sizing primitives, not spacing.
+ *
+ * - size.large: 48px (6 × base, references size600)
+ * - size.medium: 40px (5 × base, references size500)
+ * - size.small: 32px (4 × base, references size400)
+ *
+ * @see Requirements 6.1, 6.2, 6.3 in .kiro/specs/040-component-alignment/requirements.md
+ */
+exports.ButtonIconSizeTokens = (0, tokens_1.defineComponentTokens)({
+    component: 'ButtonIcon',
+    family: 'sizing',
+    tokens: {
         'size.large': {
             reference: SizingTokens_1.sizingTokens.size600,
             reasoning: 'Large button size (48px = 6× base) provides generous touch target exceeding tapAreaRecommended, calculated as icon (24px) + padding (12px × 2)',
@@ -101,7 +116,7 @@ exports.ButtonIconTokens = (0, tokens_1.defineComponentTokens)({
  * ```
  */
 function getButtonIconInset(variant) {
-    return exports.ButtonIconTokens[`inset.${variant}`];
+    return exports.ButtonIconInsetTokens[`inset.${variant}`];
 }
 /**
  * Get Button-Icon size (width/height) value for a given size variant
@@ -119,7 +134,7 @@ function getButtonIconInset(variant) {
  * @see Requirements 6.1, 6.2, 6.3 in .kiro/specs/040-component-alignment/requirements.md
  */
 function getButtonIconSize(variant) {
-    return exports.ButtonIconTokens[`size.${variant}`];
+    return exports.ButtonIconSizeTokens[`size.${variant}`];
 }
 /**
  * Semantic token references for Button-Icon inset values

package/dist/generators/TokenFileGenerator.js

@@ -400,6 +400,7 @@ class TokenFileGenerator {
     getiOSComponentTokenType(token) {
         switch (token.family) {
             case 'spacing':
+            case 'sizing':
             case 'radius':
             case 'fontSize':
             case 'tapArea':
@@ -449,8 +450,12 @@ class TokenFileGenerator {
             const familyClass = this.getFamilyClassName(token.family);
             return `${familyClass}.${token.primitiveReference}`;
         }
-        // Dimensional families need .dp suffix to match primitive token output (Task 1.4)
-        const dimensionalFamilies = ['spacing', 'radius', 'tapArea', 'fontSize', 'borderWidth'];
+        // Dimensional families need .dp suffix to match primitive token output (Task 1.4).
+        // 'sizing' is dimensional (component width/height) and belongs here: without it, a
+        // value-path sizing token emits a bare Int, which fails to compile against consumers
+        // that type the member as Dp (e.g. Avatar.android.kt's
+        // `val iconSizeXs: Dp = GeneratedAvatarTokens.iconSizeXs`).
+        const dimensionalFamilies = ['spacing', 'sizing', 'radius', 'tapArea', 'fontSize', 'borderWidth'];
         if (dimensionalFamilies.includes(token.family)) {
             return `${token.value}.dp`;
         }

package/dist/ios/DesignTokens.ios.swift

@@ -1,6 +1,6 @@
 ///
 /// DesignerPunk Design System - iOS Tokens
-/// Generated: 2026-08-02T19:49:06.802Z
+/// Generated: 2026-08-26T02:25:48.234Z
 /// Version: 1.0.0
 /// Platform: iOS (Swift Constants)
 ///

package/dist/tokens/component/progress.d.ts

@@ -19,16 +19,34 @@
  * @see .kiro/specs/048-progress-family/requirements.md (Requirements 5.7-5.15)
  * @see .kiro/specs/048-progress-family/design.md (Size Variant, Token Usage sections)
  */
+import type { RegisteredComponentToken } from '../../registries/ComponentTokenRegistry';
 /**
- * Progress Indicator component tokens defined using the hybrid authoring API.
+ * ONE CALL PER FAMILY.
+ *
+ * Every token registered by a single defineComponentTokens() call is stamped with that
+ * call's `family`, and the family drives platform output — notably the primitive class
+ * name emitted for reference-path tokens (TokenFileGenerator.getFamilyClassName) and the
+ * Android `.dp` suffix. These 10 tokens span THREE primitive families, so they require
+ * three calls. A single `family: 'spacing'` call previously produced
+ * `SpacingTokens.size150` / `SpacingTokens.borderWidth100` — members no generated platform
+ * file defines — the same defect fixed for Button-Icon in PR #126.
+ *
+ * The three branded results MUST NOT be spread/merged into one registration object: the
+ * rich metadata rides on a non-enumerable brand (src/build/tokens/defineComponentTokens.ts,
+ * TOKEN_CONTRACT_BRAND) that a spread silently drops. The harvest in loadComponentTokens
+ * collects each branded export separately. Use {@link progressTokenValues} for flat
+ * value lookups and {@link getProgressRegisteredTokens} for the rich metadata.
+ *
+ * All three calls declare `component: 'Progress'`, so platform output is still a single
+ * `ProgressTokens` Swift enum / Kotlin object.
+ */
+/**
+ * Node dimension tokens — reference sizing primitives (dimensions, not spacing).
  *
- * 13 tokens organized by concept:
  * - node.size.{sm|md|lg}         — base node dimensions
  * - node.size.{sm|md|lg}.current — emphasized node dimensions (+4px)
- * - node.gap.{sm|md|lg}          — spacing between nodes
- * - connector.thickness           — connector line width
  */
-export declare const ProgressTokens: import("../../build/tokens").ComponentTokenValues<{
+export declare const ProgressSizingTokens: import("../../build/tokens").ComponentTokenValues<{
     'node.size.sm': {
         reference: import("../../types").PrimitiveToken;
         reasoning: string;
@@ -53,6 +71,13 @@ export declare const ProgressTokens: import("../../build/tokens").ComponentToken
         reference: import("../../types").PrimitiveToken;
         reasoning: string;
     };
+}>;
+/**
+ * Node gap tokens — reference spacing primitives (gaps are spacing, not sizing).
+ *
+ * - node.gap.{sm|md|lg} — spacing between nodes
+ */
+export declare const ProgressSpacingTokens: import("../../build/tokens").ComponentTokenValues<{
     'node.gap.sm': {
         reference: import("../../types").PrimitiveToken;
         reasoning: string;
@@ -65,11 +90,46 @@ export declare const ProgressTokens: import("../../build/tokens").ComponentToken
         reference: import("../../types").PrimitiveToken;
         reasoning: string;
     };
+}>;
+/**
+ * Connector tokens — line connecting nodes in steppers. References a borderWidth primitive.
+ *
+ * - connector.thickness — connector line width
+ */
+export declare const ProgressBorderWidthTokens: import("../../build/tokens").ComponentTokenValues<{
     'connector.thickness': {
         reference: import("../../types").PrimitiveToken;
         reasoning: string;
     };
 }>;
+/**
+ * Flat value map across all three Progress token calls — a READ-ONLY convenience for
+ * value lookups (`progressTokenValues['node.size.md']`).
+ *
+ * NOT a registration surface: spreading drops the non-enumerable brand, so this object
+ * deliberately harvests to zero and cannot double-register. For the rich metadata use
+ * {@link getProgressRegisteredTokens}, never `getTokenContract(progressTokenValues)`.
+ */
+export declare const progressTokenValues: {
+    'connector.thickness': number;
+    'node.gap.sm': number;
+    'node.gap.md': number;
+    'node.gap.lg': number;
+    'node.size.sm': number;
+    'node.size.md': number;
+    'node.size.lg': number;
+    'node.size.sm.current': number;
+    'node.size.md.current': number;
+    'node.size.lg.current': number;
+};
+/**
+ * All Progress component tokens with their rich metadata, concatenated across the three
+ * family calls in declaration order (sizing → spacing → borderWidth).
+ *
+ * This is the brand-safe replacement for `getTokenContract(ProgressTokens)`, which is no
+ * longer meaningful now that Progress registers through three calls.
+ */
+export declare function getProgressRegisteredTokens(): RegisteredComponentToken[];
 /**
  * Expected token count for governance validation
  *