@3fn/core 14.1.0 → 15.0.0

package/dist/components/core/Container-Base/platforms/web/token-mapping.js

@@ -31,6 +31,7 @@
  * @see Requirements 1.1-1.10, 2.1-2.5, 3.1-3.3, 4.1-4.3, 5.1-5.3, 6.1-6.3, 7.1-7.3, 8.1-8.4, 9.1-9.6
  */
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.tokenToCssCustomProperty = tokenToCssCustomProperty;
 exports.tokenToCssVar = tokenToCssVar;
 exports.mapPaddingToCSS = mapPaddingToCSS;
 exports.mapPaddingVerticalToCSS = mapPaddingVerticalToCSS;
@@ -46,13 +47,40 @@ exports.mapShadowToCSS = mapShadowToCSS;
 exports.mapOpacityToCSS = mapOpacityToCSS;
 exports.mapLayeringToCSS = mapLayeringToCSS;
 exports.buildContainerBaseStyles = buildContainerBaseStyles;
-const tokens_1 = require("../../tokens");
+const Container_Base_refs_1 = require("../../Container-Base.refs");
 /**
- * Convert token name to CSS custom property format
+ * Convert a token name to its generated CSS custom property name (`--…`).
+ *
+ * Mirrors the web generator's naming (the `platforms.web` names in token-index/,
+ * i.e. what DesignTokens.web.css emits): split on dots, kebab-case camelCase
+ * boundaries, hyphenate letter→digit boundaries, lowercase, join with '-':
+ * - 'space.inset.200'          -> '--space-inset-200'
+ * - 'zIndex.container'         -> '--z-index-container'
+ * - 'color.select.notSelected' -> '--color-select-not-selected'
+ * - 'icon.size100'             -> '--icon-size-100'
+ * - 'radius-050' (legacy form) -> '--radius-050'
+ *
+ * Parity with the generator is guarded: ContainerBase.token-resolution.test.ts
+ * asserts this function reproduces every token-index web name exactly.
+ *
+ * @param tokenName - Token name (dot notation)
+ * @returns The CSS custom property name, including the leading `--`
+ */
+function tokenToCssCustomProperty(tokenName) {
+    const kebab = tokenName
+        .split('.')
+        .map(part => part
+        .replace(/([a-z])([A-Z])/g, '$1-$2')
+        .replace(/([a-zA-Z])(\d)/g, '$1-$2')
+        .toLowerCase())
+        .join('-');
+    return `--${kebab}`;
+}
+/**
+ * Convert token name to a CSS `var()` reference.
  *
- * Transforms dot-notation token names to CSS variable format with var() wrapper:
- * - 'space.inset.200' -> 'var(--space-inset-200)'
- * - 'color.primary' -> 'var(--color-primary)'
+ * - 'space.inset.200'  -> 'var(--space-inset-200)'
+ * - 'zIndex.modal'     -> 'var(--z-index-modal)'
  * - 'shadow.container' -> 'var(--shadow-container)'
  *
  * @param tokenName - Token name in dot notation
@@ -61,11 +89,11 @@ const tokens_1 = require("../../tokens");
  * @example
  * ```typescript
  * tokenToCssVar('space.inset.200') // Returns 'var(--space-inset-200)'
- * tokenToCssVar('color.primary') // Returns 'var(--color-primary)'
+ * tokenToCssVar('zIndex.modal') // Returns 'var(--z-index-modal)'
  * ```
  */
 function tokenToCssVar(tokenName) {
-    return `var(--${tokenName.replace(/\./g, '-')})`;
+    return `var(${tokenToCssCustomProperty(tokenName)})`;
 }
 /**
  * Map padding value to CSS padding property
@@ -88,7 +116,7 @@ function mapPaddingToCSS(padding) {
     if (!padding || padding === 'none') {
         return '';
     }
-    const tokenName = tokens_1.paddingTokenMap[padding];
+    const tokenName = Container_Base_refs_1.paddingTokenMap[padding];
     if (!tokenName) {
         return '';
     }
@@ -116,7 +144,7 @@ function mapPaddingVerticalToCSS(paddingVertical) {
     if (!paddingVertical || paddingVertical === 'none') {
         return '';
     }
-    const tokenName = tokens_1.paddingTokenMap[paddingVertical];
+    const tokenName = Container_Base_refs_1.paddingTokenMap[paddingVertical];
     if (!tokenName) {
         return '';
     }
@@ -144,7 +172,7 @@ function mapPaddingHorizontalToCSS(paddingHorizontal) {
     if (!paddingHorizontal || paddingHorizontal === 'none') {
         return '';
     }
-    const tokenName = tokens_1.paddingTokenMap[paddingHorizontal];
+    const tokenName = Container_Base_refs_1.paddingTokenMap[paddingHorizontal];
     if (!tokenName) {
         return '';
     }
@@ -172,7 +200,7 @@ function mapPaddingBlockStartToCSS(paddingBlockStart) {
     if (!paddingBlockStart || paddingBlockStart === 'none') {
         return '';
     }
-    const tokenName = tokens_1.paddingTokenMap[paddingBlockStart];
+    const tokenName = Container_Base_refs_1.paddingTokenMap[paddingBlockStart];
     if (!tokenName) {
         return '';
     }
@@ -200,7 +228,7 @@ function mapPaddingBlockEndToCSS(paddingBlockEnd) {
     if (!paddingBlockEnd || paddingBlockEnd === 'none') {
         return '';
     }
-    const tokenName = tokens_1.paddingTokenMap[paddingBlockEnd];
+    const tokenName = Container_Base_refs_1.paddingTokenMap[paddingBlockEnd];
     if (!tokenName) {
         return '';
     }
@@ -228,7 +256,7 @@ function mapPaddingInlineStartToCSS(paddingInlineStart) {
     if (!paddingInlineStart || paddingInlineStart === 'none') {
         return '';
     }
-    const tokenName = tokens_1.paddingTokenMap[paddingInlineStart];
+    const tokenName = Container_Base_refs_1.paddingTokenMap[paddingInlineStart];
     if (!tokenName) {
         return '';
     }
@@ -256,7 +284,7 @@ function mapPaddingInlineEndToCSS(paddingInlineEnd) {
     if (!paddingInlineEnd || paddingInlineEnd === 'none') {
         return '';
     }
-    const tokenName = tokens_1.paddingTokenMap[paddingInlineEnd];
+    const tokenName = Container_Base_refs_1.paddingTokenMap[paddingInlineEnd];
     if (!tokenName) {
         return '';
     }
@@ -275,7 +303,7 @@ function mapPaddingInlineEndToCSS(paddingInlineEnd) {
  *
  * @example
  * ```typescript
- * mapBorderToCSS('default') // Returns 'border: var(--border-default) solid var(--color-border)'
+ * mapBorderToCSS('default') // Returns 'border: var(--border-default) solid var(--color-structure-border)'
  * mapBorderToCSS('default', 'color.structure.border.subtle') // Returns 'border: var(--border-default) solid var(--color-structure-border-subtle)'
  * mapBorderToCSS('none') // Returns ''
  * ```
@@ -286,13 +314,13 @@ function mapBorderToCSS(border, borderColor) {
     if (!border || border === 'none') {
         return '';
     }
-    const tokenName = tokens_1.borderTokenMap[border];
+    const tokenName = Container_Base_refs_1.borderTokenMap[border];
     if (!tokenName) {
         return '';
     }
     const widthVar = tokenToCssVar(tokenName);
     // Use provided borderColor or default to BORDER_COLOR_TOKEN
-    const colorVar = borderColor ? tokenToCssVar(borderColor) : tokenToCssVar(tokens_1.BORDER_COLOR_TOKEN);
+    const colorVar = borderColor ? tokenToCssVar(borderColor) : tokenToCssVar(Container_Base_refs_1.BORDER_COLOR_TOKEN);
     return `border: ${widthVar} solid ${colorVar}`;
 }
 /**
@@ -316,7 +344,7 @@ function mapBorderRadiusToCSS(borderRadius) {
     if (!borderRadius || borderRadius === 'none') {
         return '';
     }
-    const tokenName = tokens_1.borderRadiusTokenMap[borderRadius];
+    const tokenName = Container_Base_refs_1.borderRadiusTokenMap[borderRadius];
     if (!tokenName) {
         return '';
     }
@@ -333,7 +361,7 @@ function mapBorderRadiusToCSS(borderRadius) {
  *
  * @example
  * ```typescript
- * mapColorToCSS('color.primary') // Returns 'background: var(--color-primary)'
+ * mapColorToCSS('color.structure.surface') // Returns 'background: var(--color-structure-surface)'
  * mapColorToCSS('color.structure.surface') // Returns 'background: var(--color-structure-surface)'
  * ```
  *
@@ -417,7 +445,7 @@ function mapLayeringToCSS(layering) {
     if (!layering) {
         return '';
     }
-    const tokenName = tokens_1.layeringTokenMap.web[layering];
+    const tokenName = Container_Base_refs_1.layeringTokenMap.web[layering];
     if (!tokenName) {
         return '';
     }
@@ -449,7 +477,7 @@ function mapLayeringToCSS(layering) {
  *   padding: '200',
  *   paddingVertical: '100',
  *   paddingBlockStart: '050',
- *   background: 'color.surface',
+ *   background: 'color.structure.surface',
  *   shadow: 'shadow.container',
  *   borderRadius: 'normal'
  * })
@@ -457,7 +485,7 @@ function mapLayeringToCSS(layering) {
  * // padding: var(--space-inset-200);
  * // padding-block: var(--space-inset-100);
  * // padding-block-start: var(--space-inset-050);
- * // background: var(--color-surface);
+ * // background: var(--color-structure-surface);
  * // box-shadow: var(--shadow-container);
  * // border-radius: var(--radius-100)
  * ```

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

@@ -0,0 +1,149 @@
+/**
+ * Container-Card-Base Component Token References
+ *
+ * Stemma System naming: [Family]-[Type]-[Variant] = Container-Card-Base
+ * Type: Type Primitive (Card)
+ *
+ * Token reference mappings for the Container-Card-Base component.
+ * These mappings define which design system tokens the component uses.
+ *
+ * Container-Card-Base uses a CURATED SUBSET of Container-Base tokens,
+ * plus card-specific interaction tokens (blend, motion).
+ *
+ * @see .kiro/specs/043-container-card-base/design.md for token consumption strategy
+ * @see .kiro/specs/034-component-architecture-system for Stemma System details
+ */
+import type { CardPaddingValue, CardVerticalPaddingValue, CardHorizontalPaddingValue, CardBackgroundValue, CardShadowValue, CardBorderValue, CardBorderColorValue, CardBorderRadiusValue } from './types';
+/**
+ * Card padding token mapping
+ *
+ * Maps card padding prop values to space.inset token names.
+ * Curated subset of Container-Base padding tokens.
+ *
+ * @see Requirements 3.1, 4.1
+ */
+export declare const cardPaddingTokenMap: Record<CardPaddingValue, string>;
+/**
+ * Card vertical padding token mapping
+ *
+ * Includes '050' for fine-tuning vertical rhythm with typography.
+ *
+ * @see Requirements 3.2, 3.4, 3.5
+ */
+export declare const cardVerticalPaddingTokenMap: Record<CardVerticalPaddingValue, string>;
+/**
+ * Card horizontal padding token mapping
+ *
+ * Same values as cardPaddingTokenMap (excludes '050').
+ *
+ * @see Requirements 3.3, 3.6, 3.7
+ */
+export declare const cardHorizontalPaddingTokenMap: Record<CardHorizontalPaddingValue, string>;
+/**
+ * Card background token mapping
+ *
+ * Maps card background prop values to color.surface token names.
+ *
+ * @see Requirements 3.8, 4.2
+ */
+export declare const cardBackgroundTokenMap: Record<CardBackgroundValue, string>;
+/**
+ * Card shadow token mapping
+ *
+ * Maps card shadow prop values to shadow token names.
+ *
+ * @see Requirements 3.9, 4.3
+ */
+export declare const cardShadowTokenMap: Record<CardShadowValue, string>;
+/**
+ * Card border token mapping
+ *
+ * Maps card border prop values to border width token names.
+ *
+ * @see Requirements 3.10, 4.4
+ */
+export declare const cardBorderTokenMap: Record<CardBorderValue, string>;
+/**
+ * Card border color token mapping
+ *
+ * Maps card border color prop values to color.border token names.
+ *
+ * @see Requirements 3.11
+ */
+export declare const cardBorderColorTokenMap: Record<CardBorderColorValue, string>;
+/**
+ * Card border radius token mapping
+ *
+ * Maps card border radius prop values to radius token names.
+ * Only rounded values (no 'none' or 'tight' for cards).
+ *
+ * @see Requirements 3.12, 4.5
+ */
+export declare const cardBorderRadiusTokenMap: Record<CardBorderRadiusValue, string>;
+/**
+ * Default token values for Container-Card-Base
+ *
+ * These are the opinionated defaults that make zero-config cards look good.
+ *
+ * @see Requirements 4.1-4.7
+ */
+export declare const cardDefaultTokens: {
+    /** Default padding: space.inset.150 (12px) */
+    readonly padding: "space.inset.150";
+    /** Default background: color.structure.surface.primary */
+    readonly background: "color.structure.surface.primary";
+    /** Default shadow: shadow.container */
+    readonly shadow: "shadow.container";
+    /** Default border radius: radius-100 (8px) */
+    readonly borderRadius: "radius-100";
+    /** Default border color: color.structure.border */
+    readonly borderColor: "color.structure.border";
+};
+/**
+ * Interaction token values for Container-Card-Base
+ *
+ * These tokens control hover, press, and focus state styling.
+ *
+ * @see Requirements 5.1-5.10
+ */
+export declare const cardInteractionTokens: {
+    /** Hover feedback: blend.hoverDarker (8% darker) */
+    readonly hoverDarker: "blend.hoverDarker";
+    /** Press feedback: blend.pressedDarker (12% darker) */
+    readonly pressedDarker: "blend.pressedDarker";
+    /** Focus transition: motion.focusTransition (150ms ease-out) */
+    readonly focusTransition: "motion.focusTransition";
+};
+/**
+ * Get padding token name for a given card padding value
+ */
+export declare function getCardPaddingToken(padding: CardPaddingValue): string;
+/**
+ * Get vertical padding token name for a given card vertical padding value
+ */
+export declare function getCardVerticalPaddingToken(padding: CardVerticalPaddingValue): string;
+/**
+ * Get horizontal padding token name for a given card horizontal padding value
+ */
+export declare function getCardHorizontalPaddingToken(padding: CardHorizontalPaddingValue): string;
+/**
+ * Get background token name for a given card background value
+ */
+export declare function getCardBackgroundToken(background: CardBackgroundValue): string;
+/**
+ * Get shadow token name for a given card shadow value
+ */
+export declare function getCardShadowToken(shadow: CardShadowValue): string;
+/**
+ * Get border token name for a given card border value
+ */
+export declare function getCardBorderToken(border: CardBorderValue): string;
+/**
+ * Get border color token name for a given card border color value
+ */
+export declare function getCardBorderColorToken(borderColor: CardBorderColorValue): string;
+/**
+ * Get border radius token name for a given card border radius value
+ */
+export declare function getCardBorderRadiusToken(borderRadius: CardBorderRadiusValue): string;
+//# sourceMappingURL=Container-Card-Base.refs.d.ts.map

package/dist/components/core/Container-Card-Base/Container-Card-Base.refs.js

@@ -0,0 +1,207 @@
+"use strict";
+/**
+ * Container-Card-Base Component Token References
+ *
+ * Stemma System naming: [Family]-[Type]-[Variant] = Container-Card-Base
+ * Type: Type Primitive (Card)
+ *
+ * Token reference mappings for the Container-Card-Base component.
+ * These mappings define which design system tokens the component uses.
+ *
+ * Container-Card-Base uses a CURATED SUBSET of Container-Base tokens,
+ * plus card-specific interaction tokens (blend, motion).
+ *
+ * @see .kiro/specs/043-container-card-base/design.md for token consumption strategy
+ * @see .kiro/specs/034-component-architecture-system for Stemma System details
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cardInteractionTokens = exports.cardDefaultTokens = exports.cardBorderRadiusTokenMap = exports.cardBorderColorTokenMap = exports.cardBorderTokenMap = exports.cardShadowTokenMap = exports.cardBackgroundTokenMap = exports.cardHorizontalPaddingTokenMap = exports.cardVerticalPaddingTokenMap = exports.cardPaddingTokenMap = void 0;
+exports.getCardPaddingToken = getCardPaddingToken;
+exports.getCardVerticalPaddingToken = getCardVerticalPaddingToken;
+exports.getCardHorizontalPaddingToken = getCardHorizontalPaddingToken;
+exports.getCardBackgroundToken = getCardBackgroundToken;
+exports.getCardShadowToken = getCardShadowToken;
+exports.getCardBorderToken = getCardBorderToken;
+exports.getCardBorderColorToken = getCardBorderColorToken;
+exports.getCardBorderRadiusToken = getCardBorderRadiusToken;
+/**
+ * Card padding token mapping
+ *
+ * Maps card padding prop values to space.inset token names.
+ * Curated subset of Container-Base padding tokens.
+ *
+ * @see Requirements 3.1, 4.1
+ */
+exports.cardPaddingTokenMap = {
+    'none': '',
+    '100': 'space.inset.100',
+    '150': 'space.inset.150',
+    '200': 'space.inset.200'
+};
+/**
+ * Card vertical padding token mapping
+ *
+ * Includes '050' for fine-tuning vertical rhythm with typography.
+ *
+ * @see Requirements 3.2, 3.4, 3.5
+ */
+exports.cardVerticalPaddingTokenMap = {
+    'none': '',
+    '050': 'space.inset.050',
+    '100': 'space.inset.100',
+    '150': 'space.inset.150',
+    '200': 'space.inset.200'
+};
+/**
+ * Card horizontal padding token mapping
+ *
+ * Same values as cardPaddingTokenMap (excludes '050').
+ *
+ * @see Requirements 3.3, 3.6, 3.7
+ */
+exports.cardHorizontalPaddingTokenMap = {
+    'none': '',
+    '100': 'space.inset.100',
+    '150': 'space.inset.150',
+    '200': 'space.inset.200'
+};
+/**
+ * Card background token mapping
+ *
+ * Maps card background prop values to color.surface token names.
+ *
+ * @see Requirements 3.8, 4.2
+ */
+exports.cardBackgroundTokenMap = {
+    'surface.primary': 'color.structure.surface.primary',
+    'surface.secondary': 'color.structure.surface.secondary',
+    'surface.tertiary': 'color.structure.surface.tertiary'
+};
+/**
+ * Card shadow token mapping
+ *
+ * Maps card shadow prop values to shadow token names.
+ *
+ * @see Requirements 3.9, 4.3
+ */
+exports.cardShadowTokenMap = {
+    'none': '',
+    'container': 'shadow.container'
+};
+/**
+ * Card border token mapping
+ *
+ * Maps card border prop values to border width token names.
+ *
+ * @see Requirements 3.10, 4.4
+ */
+exports.cardBorderTokenMap = {
+    'none': '',
+    'default': 'border.default'
+};
+/**
+ * Card border color token mapping
+ *
+ * Maps card border color prop values to color.border token names.
+ *
+ * @see Requirements 3.11
+ */
+exports.cardBorderColorTokenMap = {
+    'border.default': 'color.structure.border',
+    'border.subtle': 'color.structure.border.subtle'
+};
+/**
+ * Card border radius token mapping
+ *
+ * Maps card border radius prop values to radius token names.
+ * Only rounded values (no 'none' or 'tight' for cards).
+ *
+ * @see Requirements 3.12, 4.5
+ */
+exports.cardBorderRadiusTokenMap = {
+    'normal': 'radius-100',
+    'loose': 'radius-200'
+};
+/**
+ * Default token values for Container-Card-Base
+ *
+ * These are the opinionated defaults that make zero-config cards look good.
+ *
+ * @see Requirements 4.1-4.7
+ */
+exports.cardDefaultTokens = {
+    /** Default padding: space.inset.150 (12px) */
+    padding: 'space.inset.150',
+    /** Default background: color.structure.surface.primary */
+    background: 'color.structure.surface.primary',
+    /** Default shadow: shadow.container */
+    shadow: 'shadow.container',
+    /** Default border radius: radius-100 (8px) */
+    borderRadius: 'radius-100',
+    /** Default border color: color.structure.border */
+    borderColor: 'color.structure.border'
+};
+/**
+ * Interaction token values for Container-Card-Base
+ *
+ * These tokens control hover, press, and focus state styling.
+ *
+ * @see Requirements 5.1-5.10
+ */
+exports.cardInteractionTokens = {
+    /** Hover feedback: blend.hoverDarker (8% darker) */
+    hoverDarker: 'blend.hoverDarker',
+    /** Press feedback: blend.pressedDarker (12% darker) */
+    pressedDarker: 'blend.pressedDarker',
+    /** Focus transition: motion.focusTransition (150ms ease-out) */
+    focusTransition: 'motion.focusTransition'
+};
+/**
+ * Get padding token name for a given card padding value
+ */
+function getCardPaddingToken(padding) {
+    return exports.cardPaddingTokenMap[padding];
+}
+/**
+ * Get vertical padding token name for a given card vertical padding value
+ */
+function getCardVerticalPaddingToken(padding) {
+    return exports.cardVerticalPaddingTokenMap[padding];
+}
+/**
+ * Get horizontal padding token name for a given card horizontal padding value
+ */
+function getCardHorizontalPaddingToken(padding) {
+    return exports.cardHorizontalPaddingTokenMap[padding];
+}
+/**
+ * Get background token name for a given card background value
+ */
+function getCardBackgroundToken(background) {
+    return exports.cardBackgroundTokenMap[background];
+}
+/**
+ * Get shadow token name for a given card shadow value
+ */
+function getCardShadowToken(shadow) {
+    return exports.cardShadowTokenMap[shadow];
+}
+/**
+ * Get border token name for a given card border value
+ */
+function getCardBorderToken(border) {
+    return exports.cardBorderTokenMap[border];
+}
+/**
+ * Get border color token name for a given card border color value
+ */
+function getCardBorderColorToken(borderColor) {
+    return exports.cardBorderColorTokenMap[borderColor];
+}
+/**
+ * Get border radius token name for a given card border radius value
+ */
+function getCardBorderRadiusToken(borderRadius) {
+    return exports.cardBorderRadiusTokenMap[borderRadius];
+}
+//# sourceMappingURL=Container-Card-Base.refs.js.map

package/dist/components/core/Container-Card-Base/index.d.ts

@@ -14,5 +14,5 @@
  */
 export type { CardPaddingValue, CardVerticalPaddingValue, CardHorizontalPaddingValue, CardBackgroundValue, CardShadowValue, CardBorderValue, CardBorderColorValue, CardBorderRadiusValue, CardSemanticElement, CardRole, ContainerCardBaseProps } from './types';
 export { isCardPaddingValue, isCardVerticalPaddingValue, isCardHorizontalPaddingValue, isCardBackgroundValue, isCardShadowValue, isCardBorderValue, isCardBorderColorValue, isCardBorderRadiusValue, isCardSemanticElement, isCardRole } from './types';
-export { cardPaddingTokenMap, cardVerticalPaddingTokenMap, cardHorizontalPaddingTokenMap, cardBackgroundTokenMap, cardShadowTokenMap, cardBorderTokenMap, cardBorderColorTokenMap, cardBorderRadiusTokenMap, cardDefaultTokens, cardInteractionTokens, getCardPaddingToken, getCardVerticalPaddingToken, getCardHorizontalPaddingToken, getCardBackgroundToken, getCardShadowToken, getCardBorderToken, getCardBorderColorToken, getCardBorderRadiusToken } from './tokens';
+export { cardPaddingTokenMap, cardVerticalPaddingTokenMap, cardHorizontalPaddingTokenMap, cardBackgroundTokenMap, cardShadowTokenMap, cardBorderTokenMap, cardBorderColorTokenMap, cardBorderRadiusTokenMap, cardDefaultTokens, cardInteractionTokens, getCardPaddingToken, getCardVerticalPaddingToken, getCardHorizontalPaddingToken, getCardBackgroundToken, getCardShadowToken, getCardBorderToken, getCardBorderColorToken, getCardBorderRadiusToken } from './Container-Card-Base.refs';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/core/Container-Card-Base/index.js

@@ -27,23 +27,23 @@ Object.defineProperty(exports, "isCardBorderRadiusValue", { enumerable: true, ge
 Object.defineProperty(exports, "isCardSemanticElement", { enumerable: true, get: function () { return types_1.isCardSemanticElement; } });
 Object.defineProperty(exports, "isCardRole", { enumerable: true, get: function () { return types_1.isCardRole; } });
 // Export tokens
-var tokens_1 = require("./tokens");
-Object.defineProperty(exports, "cardPaddingTokenMap", { enumerable: true, get: function () { return tokens_1.cardPaddingTokenMap; } });
-Object.defineProperty(exports, "cardVerticalPaddingTokenMap", { enumerable: true, get: function () { return tokens_1.cardVerticalPaddingTokenMap; } });
-Object.defineProperty(exports, "cardHorizontalPaddingTokenMap", { enumerable: true, get: function () { return tokens_1.cardHorizontalPaddingTokenMap; } });
-Object.defineProperty(exports, "cardBackgroundTokenMap", { enumerable: true, get: function () { return tokens_1.cardBackgroundTokenMap; } });
-Object.defineProperty(exports, "cardShadowTokenMap", { enumerable: true, get: function () { return tokens_1.cardShadowTokenMap; } });
-Object.defineProperty(exports, "cardBorderTokenMap", { enumerable: true, get: function () { return tokens_1.cardBorderTokenMap; } });
-Object.defineProperty(exports, "cardBorderColorTokenMap", { enumerable: true, get: function () { return tokens_1.cardBorderColorTokenMap; } });
-Object.defineProperty(exports, "cardBorderRadiusTokenMap", { enumerable: true, get: function () { return tokens_1.cardBorderRadiusTokenMap; } });
-Object.defineProperty(exports, "cardDefaultTokens", { enumerable: true, get: function () { return tokens_1.cardDefaultTokens; } });
-Object.defineProperty(exports, "cardInteractionTokens", { enumerable: true, get: function () { return tokens_1.cardInteractionTokens; } });
-Object.defineProperty(exports, "getCardPaddingToken", { enumerable: true, get: function () { return tokens_1.getCardPaddingToken; } });
-Object.defineProperty(exports, "getCardVerticalPaddingToken", { enumerable: true, get: function () { return tokens_1.getCardVerticalPaddingToken; } });
-Object.defineProperty(exports, "getCardHorizontalPaddingToken", { enumerable: true, get: function () { return tokens_1.getCardHorizontalPaddingToken; } });
-Object.defineProperty(exports, "getCardBackgroundToken", { enumerable: true, get: function () { return tokens_1.getCardBackgroundToken; } });
-Object.defineProperty(exports, "getCardShadowToken", { enumerable: true, get: function () { return tokens_1.getCardShadowToken; } });
-Object.defineProperty(exports, "getCardBorderToken", { enumerable: true, get: function () { return tokens_1.getCardBorderToken; } });
-Object.defineProperty(exports, "getCardBorderColorToken", { enumerable: true, get: function () { return tokens_1.getCardBorderColorToken; } });
-Object.defineProperty(exports, "getCardBorderRadiusToken", { enumerable: true, get: function () { return tokens_1.getCardBorderRadiusToken; } });
+var Container_Card_Base_refs_1 = require("./Container-Card-Base.refs");
+Object.defineProperty(exports, "cardPaddingTokenMap", { enumerable: true, get: function () { return Container_Card_Base_refs_1.cardPaddingTokenMap; } });
+Object.defineProperty(exports, "cardVerticalPaddingTokenMap", { enumerable: true, get: function () { return Container_Card_Base_refs_1.cardVerticalPaddingTokenMap; } });
+Object.defineProperty(exports, "cardHorizontalPaddingTokenMap", { enumerable: true, get: function () { return Container_Card_Base_refs_1.cardHorizontalPaddingTokenMap; } });
+Object.defineProperty(exports, "cardBackgroundTokenMap", { enumerable: true, get: function () { return Container_Card_Base_refs_1.cardBackgroundTokenMap; } });
+Object.defineProperty(exports, "cardShadowTokenMap", { enumerable: true, get: function () { return Container_Card_Base_refs_1.cardShadowTokenMap; } });
+Object.defineProperty(exports, "cardBorderTokenMap", { enumerable: true, get: function () { return Container_Card_Base_refs_1.cardBorderTokenMap; } });
+Object.defineProperty(exports, "cardBorderColorTokenMap", { enumerable: true, get: function () { return Container_Card_Base_refs_1.cardBorderColorTokenMap; } });
+Object.defineProperty(exports, "cardBorderRadiusTokenMap", { enumerable: true, get: function () { return Container_Card_Base_refs_1.cardBorderRadiusTokenMap; } });
+Object.defineProperty(exports, "cardDefaultTokens", { enumerable: true, get: function () { return Container_Card_Base_refs_1.cardDefaultTokens; } });
+Object.defineProperty(exports, "cardInteractionTokens", { enumerable: true, get: function () { return Container_Card_Base_refs_1.cardInteractionTokens; } });
+Object.defineProperty(exports, "getCardPaddingToken", { enumerable: true, get: function () { return Container_Card_Base_refs_1.getCardPaddingToken; } });
+Object.defineProperty(exports, "getCardVerticalPaddingToken", { enumerable: true, get: function () { return Container_Card_Base_refs_1.getCardVerticalPaddingToken; } });
+Object.defineProperty(exports, "getCardHorizontalPaddingToken", { enumerable: true, get: function () { return Container_Card_Base_refs_1.getCardHorizontalPaddingToken; } });
+Object.defineProperty(exports, "getCardBackgroundToken", { enumerable: true, get: function () { return Container_Card_Base_refs_1.getCardBackgroundToken; } });
+Object.defineProperty(exports, "getCardShadowToken", { enumerable: true, get: function () { return Container_Card_Base_refs_1.getCardShadowToken; } });
+Object.defineProperty(exports, "getCardBorderToken", { enumerable: true, get: function () { return Container_Card_Base_refs_1.getCardBorderToken; } });
+Object.defineProperty(exports, "getCardBorderColorToken", { enumerable: true, get: function () { return Container_Card_Base_refs_1.getCardBorderColorToken; } });
+Object.defineProperty(exports, "getCardBorderRadiusToken", { enumerable: true, get: function () { return Container_Card_Base_refs_1.getCardBorderRadiusToken; } });
 //# sourceMappingURL=index.js.map

package/dist/components/core/Container-Card-Base/platforms/web/ContainerCardBase.web.js

@@ -22,7 +22,8 @@ exports.ContainerCardBaseWeb = void 0;
 const blend_1 = require("@3fn/core/blend");
 // Ensure Container-Base is registered before Card uses it
 require("../../../Container-Base/platforms/web/ContainerBase.web");
-const tokens_1 = require("../../tokens");
+const token_mapping_1 = require("../../../Container-Base/platforms/web/token-mapping");
+const Container_Card_Base_refs_1 = require("../../Container-Card-Base.refs");
 /**
  * Base styles for Container-Card-Base component
  *
@@ -154,9 +155,9 @@ class ContainerCardBaseWeb extends HTMLElement {
         const background = this.getAttribute('background');
         let baseColor = '';
         if (background) {
-            const tokenName = tokens_1.cardBackgroundTokenMap[background];
+            const tokenName = Container_Card_Base_refs_1.cardBackgroundTokenMap[background];
             if (tokenName) {
-                const cssVarName = `--${tokenName.replace(/\./g, '-')}`;
+                const cssVarName = (0, token_mapping_1.tokenToCssCustomProperty)(tokenName);
                 baseColor = computedStyle.getPropertyValue(cssVarName).trim();
             }
         }
@@ -255,18 +256,18 @@ class ContainerCardBaseWeb extends HTMLElement {
         }
         // --- Resolve then pass props (Card shorthand → Base token name) ---
         const background = this.getAttribute('background') ?? D.background;
-        const bgToken = tokens_1.cardBackgroundTokenMap[background];
+        const bgToken = Container_Card_Base_refs_1.cardBackgroundTokenMap[background];
         if (bgToken)
             attrs.push(`background="${bgToken}"`);
         const shadow = this.getAttribute('shadow') ?? D.shadow;
         if (shadow !== 'none') {
-            const shadowToken = tokens_1.cardShadowTokenMap[shadow];
+            const shadowToken = Container_Card_Base_refs_1.cardShadowTokenMap[shadow];
             if (shadowToken)
                 attrs.push(`shadow="${shadowToken}"`);
         }
         if (border !== 'none') {
             const borderColor = this.getAttribute('border-color') ?? D.borderColor;
-            const borderColorToken = tokens_1.cardBorderColorTokenMap[borderColor];
+            const borderColorToken = Container_Card_Base_refs_1.cardBorderColorTokenMap[borderColor];
             if (borderColorToken)
                 attrs.push(`border-color="${borderColorToken}"`);
         }