@3fn/core 14.0.0 → 15.0.0

package/dist/components/core/Button-CTA/Button-CTA.tokens.js

@@ -17,6 +17,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ButtonCTATokens = void 0;
 exports.getButtonCTAMinWidth = getButtonCTAMinWidth;
+const SizingTokens_1 = require("../../../tokens/SizingTokens");
 /**
  * Minimum Width Tokens
  *
@@ -27,40 +28,50 @@ exports.getButtonCTAMinWidth = getButtonCTAMinWidth;
  * Design Rationale (from H3):
  * - Component-specific tokens provide clarity for button sizing
  * - Semantic naming (small/medium/large) balances component needs with system conventions
- * - Values don't need to align with existing primitive tokens (space700, space900, space1000)
  * - Compositional architecture maintained through mathematical relationships
  *
+ * Token linkage (corrected 2026-09-19 per the token-doc accuracy pass, F8 —
+ * see .kiro/issues/2026-09-19-token-source-accuracy-followups.md): these values
+ * are NOT independent literals — they equal the `sizing` primitive family's
+ * size700/size900/size1000 tokens exactly, and Token-Family-Sizing.md § "Component
+ * Consumers" already documented Button-CTA as a consumer of those three tokens.
+ * The values below now reference those primitives directly instead of restating
+ * their values, per the component-token construction rule (component tokens
+ * must reference an existing primitive or conform to its value system, never
+ * restate an arbitrary number). This is a linkage fix only — the rendered
+ * values (56 / 72 / 80) are unchanged.
+ *
  * Values:
- * - Small: 56px (7 × 8px baseline grid)
- * - Medium: 72px (9 × 8px baseline grid)
- * - Large: 80px (10 × 8px baseline grid, aligns with space1000)
+ * - Small: 56px (7 × 8px baseline grid, references size700)
+ * - Medium: 72px (9 × 8px baseline grid, references size900)
+ * - Large: 80px (10 × 8px baseline grid, references size1000)
  */
 exports.ButtonCTATokens = {
     /**
      * Minimum width for small buttons
      *
      * Usage: Small buttons in compact layouts, secondary actions
-     * Value: 56px (7 × 8px baseline grid)
+     * Value: 56px (7 × 8px baseline grid) — references sizingTokens.size700
      * Platforms: Web, iOS, Android
      */
     minWidth: {
-        small: 56,
+        small: SizingTokens_1.sizingTokens.size700.baseValue,
         /**
          * Minimum width for medium buttons
          *
          * Usage: Standard buttons, primary actions
-         * Value: 72px (9 × 8px baseline grid)
+         * Value: 72px (9 × 8px baseline grid) — references sizingTokens.size900
          * Platforms: Web, iOS, Android
          */
-        medium: 72,
+        medium: SizingTokens_1.sizingTokens.size900.baseValue,
         /**
          * Minimum width for large buttons
          *
          * Usage: Prominent buttons, hero actions
-         * Value: 80px (10 × 8px baseline grid, aligns with space1000)
+         * Value: 80px (10 × 8px baseline grid) — references sizingTokens.size1000
          * Platforms: Web, iOS, Android
          */
-        large: 80,
+        large: SizingTokens_1.sizingTokens.size1000.baseValue,
     },
 };
 /**

package/dist/components/core/Button-CTA/index.d.ts

@@ -9,6 +9,6 @@
  * @module Button-CTA
  */
 export type { ButtonProps, ButtonSize, ButtonStyle } from './types';
-export { ButtonCTATokens, getButtonCTAMinWidth } from './Button-CTA.tokens';
-export type { ButtonCTAMinWidthVariant } from './Button-CTA.tokens';
+export { ButtonCTATokens, getButtonCTAMinWidth } from './Button-CTA.refs';
+export type { ButtonCTAMinWidthVariant } from './Button-CTA.refs';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/core/Button-CTA/index.js

@@ -12,9 +12,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getButtonCTAMinWidth = exports.ButtonCTATokens = void 0;
 // Component tokens
-var Button_CTA_tokens_1 = require("./Button-CTA.tokens");
-Object.defineProperty(exports, "ButtonCTATokens", { enumerable: true, get: function () { return Button_CTA_tokens_1.ButtonCTATokens; } });
-Object.defineProperty(exports, "getButtonCTAMinWidth", { enumerable: true, get: function () { return Button_CTA_tokens_1.getButtonCTAMinWidth; } });
+var Button_CTA_refs_1 = require("./Button-CTA.refs");
+Object.defineProperty(exports, "ButtonCTATokens", { enumerable: true, get: function () { return Button_CTA_refs_1.ButtonCTATokens; } });
+Object.defineProperty(exports, "getButtonCTAMinWidth", { enumerable: true, get: function () { return Button_CTA_refs_1.getButtonCTAMinWidth; } });
 // Platform implementations are imported directly from their platform-specific paths
 // e.g., import { ButtonCTA } from './platforms/web/ButtonCTA.web';
 //# sourceMappingURL=index.js.map

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/components/core/Button-VerticalList-Item/platforms/web/ButtonVerticalListItem.web.d.ts

@@ -87,11 +87,13 @@ export declare class ButtonVerticalListItem extends HTMLElement {
      *
      * When these attributes change, attributeChangedCallback is invoked.
      *
-     * Note: 'disabled' is intentionally observed to throw an error if set.
-     * This component explicitly does NOT support disabled states per accessibility
-     * standards — unavailable options should be hidden, not disabled.
-     *
-     * @see Requirements 10.2
+     * Note: 'disabled' is intentionally NOT observed. Per the ignore-vs-throw
+     * parity ruling (2026-09-19), DesignerPunk components SHALL NOT observe,
+     * expose, or reject a consumer-set `disabled` input — the input is inert.
+     * A consumer-set `disabled` attribute is left on the element but has no
+     * effect; unavailable options should be hidden by the parent Set, not
+     * disabled. This mirrors the Button-CTA guard shape.
+     * @see .kiro/docs/ballots/2026-09-19-disabled-input-parity.md
      */
     static get observedAttributes(): string[];
     constructor();
@@ -149,13 +151,14 @@ export declare class ButtonVerticalListItem extends HTMLElement {
      * Called when an observed attribute changes.
      *
      * Triggers incremental DOM update to reflect the new attribute value.
-     * Throws error if 'disabled' attribute is set (fail loudly philosophy).
+     *
+     * Note: 'disabled' is not in observedAttributes (see above), so a
+     * consumer-set `disabled` attribute never reaches this callback — it is
+     * inert per the ignore-vs-throw parity ruling (2026-09-19).
      *
      * @param name - Attribute name
      * @param oldValue - Previous attribute value
      * @param newValue - New attribute value
-     * @throws Error if 'disabled' attribute is set
-     * @see Requirements 10.2
      */
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     /**
@@ -222,28 +225,6 @@ export declare class ButtonVerticalListItem extends HTMLElement {
      * Set the test ID.
      */
     set testID(value: string | undefined);
-    /**
-     * Disabled property getter.
-     *
-     * Always returns false because this component does not support disabled states.
-     * Per accessibility standards, unavailable options should be hidden, not disabled.
-     *
-     * @returns Always false
-     * @see Requirements 10.2
-     */
-    get disabled(): boolean;
-    /**
-     * Disabled property setter.
-     *
-     * Throws an error if called with true. This component explicitly does NOT support
-     * disabled states per accessibility standards — unavailable options should be hidden,
-     * not disabled.
-     *
-     * @param value - The disabled value (must be false)
-     * @throws Error if value is true
-     * @see Requirements 10.2
-     */
-    set disabled(value: boolean);
     /**
      * Get the ARIA role for the item.
      *

package/dist/components/core/Button-VerticalList-Item/platforms/web/ButtonVerticalListItem.web.js

@@ -190,11 +190,13 @@ class ButtonVerticalListItem extends HTMLElement {
      *
      * When these attributes change, attributeChangedCallback is invoked.
      *
-     * Note: 'disabled' is intentionally observed to throw an error if set.
-     * This component explicitly does NOT support disabled states per accessibility
-     * standards — unavailable options should be hidden, not disabled.
-     *
-     * @see Requirements 10.2
+     * Note: 'disabled' is intentionally NOT observed. Per the ignore-vs-throw
+     * parity ruling (2026-09-19), DesignerPunk components SHALL NOT observe,
+     * expose, or reject a consumer-set `disabled` input — the input is inert.
+     * A consumer-set `disabled` attribute is left on the element but has no
+     * effect; unavailable options should be hidden by the parent Set, not
+     * disabled. This mirrors the Button-CTA guard shape.
+     * @see .kiro/docs/ballots/2026-09-19-disabled-input-parity.md
      */
     static get observedAttributes() {
         return [
@@ -208,7 +210,6 @@ class ButtonVerticalListItem extends HTMLElement {
             'test-id',
             'role', // ARIA role (button, radio, checkbox) - set by parent Set
             'aria-checked', // ARIA checked state - set by parent Set
-            'disabled' // Observed to throw error if set (fail loudly)
         ];
     }
     constructor() {
@@ -404,24 +405,16 @@ class ButtonVerticalListItem extends HTMLElement {
      * Called when an observed attribute changes.
      *
      * Triggers incremental DOM update to reflect the new attribute value.
-     * Throws error if 'disabled' attribute is set (fail loudly philosophy).
+     *
+     * Note: 'disabled' is not in observedAttributes (see above), so a
+     * consumer-set `disabled` attribute never reaches this callback — it is
+     * inert per the ignore-vs-throw parity ruling (2026-09-19).
      *
      * @param name - Attribute name
      * @param oldValue - Previous attribute value
      * @param newValue - New attribute value
-     * @throws Error if 'disabled' attribute is set
-     * @see Requirements 10.2
      */
     attributeChangedCallback(name, oldValue, newValue) {
-        // Fail loudly if disabled attribute is set
-        // This component explicitly does NOT support disabled states per accessibility standards
-        // Unavailable options should be hidden, not disabled
-        // @see Requirements 10.2
-        if (name === 'disabled') {
-            throw new Error('Button-VerticalList-Item: The "disabled" attribute is not supported. ' +
-                'Per accessibility standards, unavailable options should be hidden rather than disabled. ' +
-                'Remove the disabled attribute and hide the component instead.');
-        }
         // Only update if the element is connected to the DOM, value changed, and DOM exists
         if (oldValue !== newValue && this.isConnected && this._tokensValidated && this._domCreated) {
             this._updateDOM();
@@ -552,37 +545,11 @@ class ButtonVerticalListItem extends HTMLElement {
             this.removeAttribute('test-id');
         }
     }
-    /**
-     * Disabled property getter.
-     *
-     * Always returns false because this component does not support disabled states.
-     * Per accessibility standards, unavailable options should be hidden, not disabled.
-     *
-     * @returns Always false
-     * @see Requirements 10.2
-     */
-    get disabled() {
-        return false;
-    }
-    /**
-     * Disabled property setter.
-     *
-     * Throws an error if called with true. This component explicitly does NOT support
-     * disabled states per accessibility standards — unavailable options should be hidden,
-     * not disabled.
-     *
-     * @param value - The disabled value (must be false)
-     * @throws Error if value is true
-     * @see Requirements 10.2
-     */
-    set disabled(value) {
-        if (value) {
-            throw new Error('Button-VerticalList-Item: The "disabled" property is not supported. ' +
-                'Per accessibility standards, unavailable options should be hidden rather than disabled. ' +
-                'Set disabled to false or hide the component instead.');
-        }
-        // If value is false, do nothing (component is already not disabled)
-    }
+    // Note: No `disabled` property is exposed. Per the ignore-vs-throw parity
+    // ruling (2026-09-19), DesignerPunk components SHALL NOT observe, expose,
+    // or reject a consumer-set `disabled` input — the input is inert. This
+    // mirrors the Button-CTA guard shape.
+    // @see .kiro/docs/ballots/2026-09-19-disabled-input-parity.md
     // ─────────────────────────────────────────────────────────────────
     // ARIA Properties (controlled by parent Set)
     // ─────────────────────────────────────────────────────────────────

package/dist/components/core/Container-Base/Container-Base.refs.d.ts

@@ -0,0 +1,181 @@
+/**
+ * Container-Base Component Token References
+ *
+ * Stemma System naming: [Family]-[Type] = Container-Base
+ * Type: Primitive (foundational component)
+ *
+ * Platform-agnostic token reference mappings for the Container-Base component.
+ * These mappings define which design system tokens the component uses,
+ * not how they're implemented per platform.
+ *
+ * The build system generates platform-specific values from these references:
+ * - Web: CSS custom properties (var(--space-inset-200))
+ * - iOS: Swift constants (spaceInset200)
+ * - Android: Kotlin constants (spaceInset200.dp)
+ *
+ * @see .kiro/specs/010-container-component/design.md for token consumption strategy
+ * @see .kiro/specs/034-component-architecture-system for Stemma System details
+ */
+import type { PaddingValue, BorderValue, BorderRadiusValue, LayeringValue } from './types';
+/**
+ * Platform identifier for token mapping
+ */
+export type Platform = 'web' | 'ios' | 'android';
+/**
+ * Padding token mapping
+ *
+ * Maps padding prop values to space.inset token names.
+ * These tokens follow the 8px baseline grid with mathematical relationships.
+ *
+ * Token values:
+ * - inset.050: 4px (0.5 × base)
+ * - inset.100: 8px (1 × base)
+ * - inset.150: 12px (1.5 × base)
+ * - inset.200: 16px (2 × base)
+ * - inset.300: 24px (3 × base)
+ * - inset.400: 32px (4 × base)
+ *
+ * @see Requirements 2.1, 3.1-3.7
+ */
+export declare const paddingTokenMap: Record<PaddingValue, string>;
+/**
+ * Border token mapping
+ *
+ * Maps border prop values to border width token names.
+ * Border color defaults to the color.structure.border token (BORDER_COLOR_TOKEN).
+ *
+ * Token values:
+ * - border.default: 1px
+ * - border.emphasis: 2px
+ * - border.heavy: 4px
+ *
+ * Values are canonical semantic token names (as registered in the token index), so
+ * `tokenToCssVar` resolves them to generated custom properties: border.default ->
+ * --border-default. (These were previously 'border.border.*', which assumed a
+ * category-prefix strip that tokenToCssVar never performed and emitted the
+ * nonexistent --border-border-*.)
+ *
+ * @see Requirements 2.4, 6.1-6.5
+ */
+export declare const borderTokenMap: Record<BorderValue, string>;
+/**
+ * Border radius token mapping
+ *
+ * Maps borderRadius prop values to radius token names.
+ *
+ * Token values:
+ * - radius-050: 4px
+ * - radius-100: 8px
+ * - radius-200: 16px
+ *
+ * @see Requirements 2.5, 7.1-7.4
+ */
+export declare const borderRadiusTokenMap: Record<BorderRadiusValue, string>;
+/**
+ * Platform-specific token mapping structure
+ *
+ * Allows different token references per platform.
+ * Used for layering tokens where web/iOS use z-index and Android uses elevation.
+ */
+export interface PlatformTokenMap {
+    web: Record<string, string>;
+    ios: Record<string, string>;
+    android: Record<string, string>;
+}
+/**
+ * Layering token mapping (platform-specific)
+ *
+ * Maps layering prop values to platform-specific stacking tokens:
+ * - Web/iOS: z-index tokens (control stacking order only)
+ * - Android: elevation tokens (control both stacking order and shadow rendering)
+ *
+ * Z-Index token values (web/iOS):
+ * - zIndex.container: 100
+ * - zIndex.navigation: 200
+ * - zIndex.dropdown: 300
+ * - zIndex.modal: 400
+ * - zIndex.toast: 500
+ * - zIndex.tooltip: 600
+ *
+ * Elevation token values (Android):
+ * - elevation.container: 8dp
+ * - elevation.navigation: 4dp
+ * - elevation.dropdown: 8dp
+ * - elevation.modal: 16dp
+ * - elevation.toast: 24dp
+ * - elevation.tooltip: 24dp
+ *
+ * Note: Android elevation tokens couple stacking order with shadow rendering,
+ * following Material Design guidelines. If both layering and shadow props are
+ * provided on Android, layering takes precedence.
+ *
+ * @see Requirements 9.1-9.9, 16.2-16.3
+ */
+export declare const layeringTokenMap: PlatformTokenMap;
+/**
+ * Get padding token name for a given padding value
+ *
+ * @param padding - Padding prop value
+ * @returns Token name or empty string for 'none'
+ *
+ * @example
+ * ```typescript
+ * getPaddingToken('200') // Returns 'space.inset.200'
+ * getPaddingToken('none') // Returns ''
+ * ```
+ */
+export declare function getPaddingToken(padding: PaddingValue): string;
+/**
+ * Get border token name for a given border value
+ *
+ * @param border - Border prop value
+ * @returns Token name or empty string for 'none'
+ *
+ * @example
+ * ```typescript
+ * getBorderToken('default') // Returns 'border.default'
+ * getBorderToken('none') // Returns ''
+ * ```
+ */
+export declare function getBorderToken(border: BorderValue): string;
+/**
+ * Get border radius token name for a given border radius value
+ *
+ * @param borderRadius - Border radius prop value
+ * @returns Token name or empty string for 'none'
+ *
+ * @example
+ * ```typescript
+ * getBorderRadiusToken('normal') // Returns 'radius-100'
+ * getBorderRadiusToken('none') // Returns ''
+ * ```
+ */
+export declare function getBorderRadiusToken(borderRadius: BorderRadiusValue): string;
+/**
+ * Get layering token name for a given layering value and platform
+ *
+ * Returns platform-specific token name:
+ * - Web/iOS: z-index token
+ * - Android: elevation token
+ *
+ * @param layering - Layering prop value
+ * @param platform - Target platform
+ * @returns Token name for the specified platform
+ *
+ * @example
+ * ```typescript
+ * getLayeringToken('modal', 'web') // Returns 'zIndex.modal'
+ * getLayeringToken('modal', 'android') // Returns 'elevation.modal'
+ * ```
+ */
+export declare function getLayeringToken(layering: LayeringValue, platform: Platform): string;
+/**
+ * Border color token constant
+ *
+ * All borders use the same semantic color token for consistency.
+ * This ensures borders have consistent appearance across the design system.
+ *
+ * @see Requirements 6.5
+ */
+export declare const BORDER_COLOR_TOKEN = "color.structure.border";
+//# sourceMappingURL=Container-Base.refs.d.ts.map