@3fn/core 14.0.0 → 15.0.0

package/dist/components/core/Input-Text-Base/Input-Text-Base.refs.d.ts

@@ -0,0 +1,331 @@
+/**
+ * Input-Text-Base Component Token References
+ *
+ * Platform-agnostic token references for the Input-Text-Base component.
+ * These references will be resolved to platform-specific values by the build system.
+ *
+ * Stemma System: Form Inputs Family
+ * Component Type: Primitive (Base)
+ * Naming Convention: [Family]-[Type]-[Variant] = Input-Text-Base
+ *
+ * This file defines WHICH tokens the component uses, not HOW they're implemented per platform.
+ * The build system generates platform-specific values (CSS custom properties, Swift constants, Kotlin constants).
+ *
+ * Token Selection Rationale:
+ * - Typography: Uses labelMd/labelMdFloat for label animation, input for text, caption for helper/error
+ * - Color: Uses semantic color tokens for text, borders, and backgrounds with state variations
+ * - Spacing: Uses inset tokens for padding, grouped tokens for element spacing
+ * - Motion: Uses motion.floatLabel semantic token for label animation timing
+ * - Border: Uses borderDefault for standard border, radius150 for rounded corners
+ * - Accessibility: Uses focus tokens for keyboard navigation indicators, tapAreaComfortable for touch targets
+ * - Blend: Uses focusSaturate for enhanced focus state emphasis
+ */
+/**
+ * Typography token references for Input-Text-Base
+ *
+ * All typography tokens reference semantic typography tokens that combine
+ * fontSize, lineHeight, fontFamily, fontWeight, and letterSpacing primitives.
+ */
+export declare const typographyTokens: {
+    /** Label typography when inside input (16px) */
+    readonly label: "typography.labelMd";
+    /** Label typography when floated above input (14px, via scale088 × fontSize100) */
+    readonly labelFloat: "typography.labelMdFloat";
+    /** Input text typography (16px) */
+    readonly input: "typography.input";
+    /** Helper text typography (13px) */
+    readonly helper: "typography.caption";
+    /** Error message typography (13px) */
+    readonly error: "typography.caption";
+};
+/**
+ * Color token references for Input-Text-Base
+ *
+ * All color tokens reference semantic color tokens that provide contextual meaning
+ * and support light/dark mode theming.
+ */
+export declare const colorTokens: {
+    /** Label color when not focused */
+    readonly labelDefault: "color.text.muted";
+    /** Label color when focused (enhanced with blend.focusSaturate) */
+    readonly labelFocused: "color.primary";
+    /** Label color in error state */
+    readonly labelError: "color.error";
+    /** Label color in success state */
+    readonly labelSuccess: "color.success.strong";
+    /** Input text color */
+    readonly inputText: "color.text.default";
+    /** Helper text color */
+    readonly helperText: "color.text.muted";
+    /** Error message color */
+    readonly errorText: "color.error";
+    /** Border color when not focused */
+    readonly borderDefault: "color.border";
+    /** Border color when focused (enhanced with blend.focusSaturate) */
+    readonly borderFocused: "color.primary";
+    /** Border color in error state */
+    readonly borderError: "color.error";
+    /** Border color in success state */
+    readonly borderSuccess: "color.success.strong";
+    /** Input background color (supports future tint variations) */
+    readonly background: "color.background";
+    /** Focus ring color for keyboard navigation */
+    readonly focusRing: "accessibility.focus.color";
+};
+/**
+ * Spacing token references for Input-Text-Base
+ *
+ * Uses inset tokens for internal padding and grouped tokens for element spacing.
+ * Asymmetric vertical padding: larger top padding for floated label clearance,
+ * no bottom padding since input text sits at the bottom of the input box.
+ */
+export declare const spacingTokens: {
+    /** Input top padding (16px) - provides clearance for floated label */
+    readonly inputPaddingTop: "space.inset.200";
+    /** Input bottom padding (0px) - input text sits at bottom */
+    readonly inputPaddingBottom: "space.inset.none";
+    /** Input horizontal padding (8px) */
+    readonly inputPaddingHorizontal: "space.inset.100";
+    /** Space between floated label and input - 4px */
+    readonly labelOffset: "space.grouped.tight";
+    /** Space between input and helper text - 2px */
+    readonly helperOffset: "space.grouped.minimal";
+    /** Space between helper text and error message - 2px */
+    readonly errorOffset: "space.grouped.minimal";
+};
+/**
+ * Motion token references for Input-Text-Base
+ *
+ * Uses motion.floatLabel semantic token for label animation timing and scale088 for typography scaling.
+ */
+export declare const motionTokens: {
+    /** Label float animation timing (duration250 + easingStandard) */
+    readonly labelFloat: "motion.floatLabel";
+    /** Icon fade animation timing (reuses labelFloat for coordination) */
+    readonly iconFade: "motion.floatLabel";
+    /** Typography scale for label animation (0.88 × fontSize100 = 14px) */
+    readonly scale: "scale088";
+};
+/**
+ * Border token references for Input-Text-Base
+ *
+ * Uses borderDefault for standard border width and radius150 for rounded corners.
+ */
+export declare const borderTokens: {
+    /** Border width (1px) */
+    readonly width: "borderDefault";
+    /** Border radius (12px) */
+    readonly radius: "radius150";
+};
+/**
+ * Accessibility token references for Input-Text-Base
+ *
+ * Uses accessibility.focus tokens for keyboard navigation indicators and tapAreaComfortable for touch targets.
+ */
+export declare const accessibilityTokens: {
+    /** Minimum touch target height (56px) for comfortable interaction */
+    readonly minHeight: "tapAreaComfortable";
+    /** Focus ring width (2px) */
+    readonly focusWidth: "accessibility.focus.width";
+    /** Focus ring offset (2px) */
+    readonly focusOffset: "accessibility.focus.offset";
+    /** Focus ring color (primary) */
+    readonly focusColor: "accessibility.focus.color";
+};
+/**
+ * Blend token references for Input-Text-Base
+ *
+ * Uses blend.focusSaturate for enhanced focus state emphasis.
+ */
+export declare const blendTokens: {
+    /** Focus state emphasis (8% more saturated) */
+    readonly focusSaturate: "blend.focusSaturate";
+};
+/**
+ * Complete Input-Text-Base token references
+ *
+ * Exports all token categories for easy import and usage.
+ */
+export declare const inputTextBaseTokens: {
+    readonly typography: {
+        /** Label typography when inside input (16px) */
+        readonly label: "typography.labelMd";
+        /** Label typography when floated above input (14px, via scale088 × fontSize100) */
+        readonly labelFloat: "typography.labelMdFloat";
+        /** Input text typography (16px) */
+        readonly input: "typography.input";
+        /** Helper text typography (13px) */
+        readonly helper: "typography.caption";
+        /** Error message typography (13px) */
+        readonly error: "typography.caption";
+    };
+    readonly color: {
+        /** Label color when not focused */
+        readonly labelDefault: "color.text.muted";
+        /** Label color when focused (enhanced with blend.focusSaturate) */
+        readonly labelFocused: "color.primary";
+        /** Label color in error state */
+        readonly labelError: "color.error";
+        /** Label color in success state */
+        readonly labelSuccess: "color.success.strong";
+        /** Input text color */
+        readonly inputText: "color.text.default";
+        /** Helper text color */
+        readonly helperText: "color.text.muted";
+        /** Error message color */
+        readonly errorText: "color.error";
+        /** Border color when not focused */
+        readonly borderDefault: "color.border";
+        /** Border color when focused (enhanced with blend.focusSaturate) */
+        readonly borderFocused: "color.primary";
+        /** Border color in error state */
+        readonly borderError: "color.error";
+        /** Border color in success state */
+        readonly borderSuccess: "color.success.strong";
+        /** Input background color (supports future tint variations) */
+        readonly background: "color.background";
+        /** Focus ring color for keyboard navigation */
+        readonly focusRing: "accessibility.focus.color";
+    };
+    readonly spacing: {
+        /** Input top padding (16px) - provides clearance for floated label */
+        readonly inputPaddingTop: "space.inset.200";
+        /** Input bottom padding (0px) - input text sits at bottom */
+        readonly inputPaddingBottom: "space.inset.none";
+        /** Input horizontal padding (8px) */
+        readonly inputPaddingHorizontal: "space.inset.100";
+        /** Space between floated label and input - 4px */
+        readonly labelOffset: "space.grouped.tight";
+        /** Space between input and helper text - 2px */
+        readonly helperOffset: "space.grouped.minimal";
+        /** Space between helper text and error message - 2px */
+        readonly errorOffset: "space.grouped.minimal";
+    };
+    readonly motion: {
+        /** Label float animation timing (duration250 + easingStandard) */
+        readonly labelFloat: "motion.floatLabel";
+        /** Icon fade animation timing (reuses labelFloat for coordination) */
+        readonly iconFade: "motion.floatLabel";
+        /** Typography scale for label animation (0.88 × fontSize100 = 14px) */
+        readonly scale: "scale088";
+    };
+    readonly border: {
+        /** Border width (1px) */
+        readonly width: "borderDefault";
+        /** Border radius (12px) */
+        readonly radius: "radius150";
+    };
+    readonly accessibility: {
+        /** Minimum touch target height (56px) for comfortable interaction */
+        readonly minHeight: "tapAreaComfortable";
+        /** Focus ring width (2px) */
+        readonly focusWidth: "accessibility.focus.width";
+        /** Focus ring offset (2px) */
+        readonly focusOffset: "accessibility.focus.offset";
+        /** Focus ring color (primary) */
+        readonly focusColor: "accessibility.focus.color";
+    };
+    readonly blend: {
+        /** Focus state emphasis (8% more saturated) */
+        readonly focusSaturate: "blend.focusSaturate";
+    };
+};
+/**
+ * Type definitions for token references
+ */
+export type TypographyTokens = typeof typographyTokens;
+export type ColorTokens = typeof colorTokens;
+export type SpacingTokens = typeof spacingTokens;
+export type MotionTokens = typeof motionTokens;
+export type BorderTokens = typeof borderTokens;
+export type AccessibilityTokens = typeof accessibilityTokens;
+export type BlendTokens = typeof blendTokens;
+export type InputTextBaseTokens = typeof inputTextBaseTokens;
+/** @deprecated Use inputTextBaseTokens instead */
+export declare const textInputFieldTokens: {
+    readonly typography: {
+        /** Label typography when inside input (16px) */
+        readonly label: "typography.labelMd";
+        /** Label typography when floated above input (14px, via scale088 × fontSize100) */
+        readonly labelFloat: "typography.labelMdFloat";
+        /** Input text typography (16px) */
+        readonly input: "typography.input";
+        /** Helper text typography (13px) */
+        readonly helper: "typography.caption";
+        /** Error message typography (13px) */
+        readonly error: "typography.caption";
+    };
+    readonly color: {
+        /** Label color when not focused */
+        readonly labelDefault: "color.text.muted";
+        /** Label color when focused (enhanced with blend.focusSaturate) */
+        readonly labelFocused: "color.primary";
+        /** Label color in error state */
+        readonly labelError: "color.error";
+        /** Label color in success state */
+        readonly labelSuccess: "color.success.strong";
+        /** Input text color */
+        readonly inputText: "color.text.default";
+        /** Helper text color */
+        readonly helperText: "color.text.muted";
+        /** Error message color */
+        readonly errorText: "color.error";
+        /** Border color when not focused */
+        readonly borderDefault: "color.border";
+        /** Border color when focused (enhanced with blend.focusSaturate) */
+        readonly borderFocused: "color.primary";
+        /** Border color in error state */
+        readonly borderError: "color.error";
+        /** Border color in success state */
+        readonly borderSuccess: "color.success.strong";
+        /** Input background color (supports future tint variations) */
+        readonly background: "color.background";
+        /** Focus ring color for keyboard navigation */
+        readonly focusRing: "accessibility.focus.color";
+    };
+    readonly spacing: {
+        /** Input top padding (16px) - provides clearance for floated label */
+        readonly inputPaddingTop: "space.inset.200";
+        /** Input bottom padding (0px) - input text sits at bottom */
+        readonly inputPaddingBottom: "space.inset.none";
+        /** Input horizontal padding (8px) */
+        readonly inputPaddingHorizontal: "space.inset.100";
+        /** Space between floated label and input - 4px */
+        readonly labelOffset: "space.grouped.tight";
+        /** Space between input and helper text - 2px */
+        readonly helperOffset: "space.grouped.minimal";
+        /** Space between helper text and error message - 2px */
+        readonly errorOffset: "space.grouped.minimal";
+    };
+    readonly motion: {
+        /** Label float animation timing (duration250 + easingStandard) */
+        readonly labelFloat: "motion.floatLabel";
+        /** Icon fade animation timing (reuses labelFloat for coordination) */
+        readonly iconFade: "motion.floatLabel";
+        /** Typography scale for label animation (0.88 × fontSize100 = 14px) */
+        readonly scale: "scale088";
+    };
+    readonly border: {
+        /** Border width (1px) */
+        readonly width: "borderDefault";
+        /** Border radius (12px) */
+        readonly radius: "radius150";
+    };
+    readonly accessibility: {
+        /** Minimum touch target height (56px) for comfortable interaction */
+        readonly minHeight: "tapAreaComfortable";
+        /** Focus ring width (2px) */
+        readonly focusWidth: "accessibility.focus.width";
+        /** Focus ring offset (2px) */
+        readonly focusOffset: "accessibility.focus.offset";
+        /** Focus ring color (primary) */
+        readonly focusColor: "accessibility.focus.color";
+    };
+    readonly blend: {
+        /** Focus state emphasis (8% more saturated) */
+        readonly focusSaturate: "blend.focusSaturate";
+    };
+};
+/** @deprecated Use InputTextBaseTokens instead */
+export type TextInputFieldTokens = InputTextBaseTokens;
+//# sourceMappingURL=Input-Text-Base.refs.d.ts.map

package/dist/components/core/Input-Text-Base/Input-Text-Base.refs.js

@@ -0,0 +1,164 @@
+"use strict";
+/**
+ * Input-Text-Base Component Token References
+ *
+ * Platform-agnostic token references for the Input-Text-Base component.
+ * These references will be resolved to platform-specific values by the build system.
+ *
+ * Stemma System: Form Inputs Family
+ * Component Type: Primitive (Base)
+ * Naming Convention: [Family]-[Type]-[Variant] = Input-Text-Base
+ *
+ * This file defines WHICH tokens the component uses, not HOW they're implemented per platform.
+ * The build system generates platform-specific values (CSS custom properties, Swift constants, Kotlin constants).
+ *
+ * Token Selection Rationale:
+ * - Typography: Uses labelMd/labelMdFloat for label animation, input for text, caption for helper/error
+ * - Color: Uses semantic color tokens for text, borders, and backgrounds with state variations
+ * - Spacing: Uses inset tokens for padding, grouped tokens for element spacing
+ * - Motion: Uses motion.floatLabel semantic token for label animation timing
+ * - Border: Uses borderDefault for standard border, radius150 for rounded corners
+ * - Accessibility: Uses focus tokens for keyboard navigation indicators, tapAreaComfortable for touch targets
+ * - Blend: Uses focusSaturate for enhanced focus state emphasis
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.textInputFieldTokens = exports.inputTextBaseTokens = exports.blendTokens = exports.accessibilityTokens = exports.borderTokens = exports.motionTokens = exports.spacingTokens = exports.colorTokens = exports.typographyTokens = void 0;
+/**
+ * Typography token references for Input-Text-Base
+ *
+ * All typography tokens reference semantic typography tokens that combine
+ * fontSize, lineHeight, fontFamily, fontWeight, and letterSpacing primitives.
+ */
+exports.typographyTokens = {
+    /** Label typography when inside input (16px) */
+    label: 'typography.labelMd',
+    /** Label typography when floated above input (14px, via scale088 × fontSize100) */
+    labelFloat: 'typography.labelMdFloat',
+    /** Input text typography (16px) */
+    input: 'typography.input',
+    /** Helper text typography (13px) */
+    helper: 'typography.caption',
+    /** Error message typography (13px) */
+    error: 'typography.caption'
+};
+/**
+ * Color token references for Input-Text-Base
+ *
+ * All color tokens reference semantic color tokens that provide contextual meaning
+ * and support light/dark mode theming.
+ */
+exports.colorTokens = {
+    /** Label color when not focused */
+    labelDefault: 'color.text.muted',
+    /** Label color when focused (enhanced with blend.focusSaturate) */
+    labelFocused: 'color.primary',
+    /** Label color in error state */
+    labelError: 'color.error',
+    /** Label color in success state */
+    labelSuccess: 'color.success.strong',
+    /** Input text color */
+    inputText: 'color.text.default',
+    /** Helper text color */
+    helperText: 'color.text.muted',
+    /** Error message color */
+    errorText: 'color.error',
+    /** Border color when not focused */
+    borderDefault: 'color.border',
+    /** Border color when focused (enhanced with blend.focusSaturate) */
+    borderFocused: 'color.primary',
+    /** Border color in error state */
+    borderError: 'color.error',
+    /** Border color in success state */
+    borderSuccess: 'color.success.strong',
+    /** Input background color (supports future tint variations) */
+    background: 'color.background',
+    /** Focus ring color for keyboard navigation */
+    focusRing: 'accessibility.focus.color'
+};
+/**
+ * Spacing token references for Input-Text-Base
+ *
+ * Uses inset tokens for internal padding and grouped tokens for element spacing.
+ * Asymmetric vertical padding: larger top padding for floated label clearance,
+ * no bottom padding since input text sits at the bottom of the input box.
+ */
+exports.spacingTokens = {
+    /** Input top padding (16px) - provides clearance for floated label */
+    inputPaddingTop: 'space.inset.200',
+    /** Input bottom padding (0px) - input text sits at bottom */
+    inputPaddingBottom: 'space.inset.none',
+    /** Input horizontal padding (8px) */
+    inputPaddingHorizontal: 'space.inset.100',
+    /** Space between floated label and input - 4px */
+    labelOffset: 'space.grouped.tight',
+    /** Space between input and helper text - 2px */
+    helperOffset: 'space.grouped.minimal',
+    /** Space between helper text and error message - 2px */
+    errorOffset: 'space.grouped.minimal'
+};
+/**
+ * Motion token references for Input-Text-Base
+ *
+ * Uses motion.floatLabel semantic token for label animation timing and scale088 for typography scaling.
+ */
+exports.motionTokens = {
+    /** Label float animation timing (duration250 + easingStandard) */
+    labelFloat: 'motion.floatLabel',
+    /** Icon fade animation timing (reuses labelFloat for coordination) */
+    iconFade: 'motion.floatLabel',
+    /** Typography scale for label animation (0.88 × fontSize100 = 14px) */
+    scale: 'scale088'
+};
+/**
+ * Border token references for Input-Text-Base
+ *
+ * Uses borderDefault for standard border width and radius150 for rounded corners.
+ */
+exports.borderTokens = {
+    /** Border width (1px) */
+    width: 'borderDefault',
+    /** Border radius (12px) */
+    radius: 'radius150'
+};
+/**
+ * Accessibility token references for Input-Text-Base
+ *
+ * Uses accessibility.focus tokens for keyboard navigation indicators and tapAreaComfortable for touch targets.
+ */
+exports.accessibilityTokens = {
+    /** Minimum touch target height (56px) for comfortable interaction */
+    minHeight: 'tapAreaComfortable',
+    /** Focus ring width (2px) */
+    focusWidth: 'accessibility.focus.width',
+    /** Focus ring offset (2px) */
+    focusOffset: 'accessibility.focus.offset',
+    /** Focus ring color (primary) */
+    focusColor: 'accessibility.focus.color'
+};
+/**
+ * Blend token references for Input-Text-Base
+ *
+ * Uses blend.focusSaturate for enhanced focus state emphasis.
+ */
+exports.blendTokens = {
+    /** Focus state emphasis (8% more saturated) */
+    focusSaturate: 'blend.focusSaturate'
+};
+/**
+ * Complete Input-Text-Base token references
+ *
+ * Exports all token categories for easy import and usage.
+ */
+exports.inputTextBaseTokens = {
+    typography: exports.typographyTokens,
+    color: exports.colorTokens,
+    spacing: exports.spacingTokens,
+    motion: exports.motionTokens,
+    border: exports.borderTokens,
+    accessibility: exports.accessibilityTokens,
+    blend: exports.blendTokens
+};
+// Legacy exports for backward compatibility during migration
+/** @deprecated Use inputTextBaseTokens instead */
+exports.textInputFieldTokens = exports.inputTextBaseTokens;
+//# sourceMappingURL=Input-Text-Base.refs.js.map

package/dist/components/core/Input-Text-Base/platforms/web/InputTextBase.web.js

@@ -250,7 +250,7 @@ class InputTextBase extends HTMLElement {
             trailingIconHTML = (0, IconBase_web_1.createIconBase)({
                 name: 'x',
                 size: iconSize,
-                color: 'color-error',
+                color: 'color-feedback-error-text',
                 className: 'trailing-icon error-icon'
             });
         }

package/dist/components/core/Input-Text-Email/Input-Text-Email.refs.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Input-Text-Email Component Token References
+ *
+ * Inherits all tokens from Input-Text-Base.
+ * Email-specific components use the same visual tokens as the base component.
+ *
+ * Stemma System: Form Inputs Family
+ * Component Type: Semantic (inherits from Input-Text-Base)
+ * Naming Convention: [Family]-[Type]-[Variant] = Input-Text-Email
+ *
+ * Token Inheritance:
+ * Input-Text-Email inherits ALL tokens from Input-Text-Base.
+ * No additional tokens are required for email-specific functionality.
+ *
+ * This file re-exports Input-Text-Base tokens for consistency and
+ * to allow future email-specific token additions if needed.
+ */
+export { typographyTokens, colorTokens, spacingTokens, motionTokens, borderTokens, accessibilityTokens, blendTokens, inputTextBaseTokens } from '../Input-Text-Base/Input-Text-Base.refs';
+export { inputTextBaseTokens as inputTextEmailTokens } from '../Input-Text-Base/Input-Text-Base.refs';
+//# sourceMappingURL=Input-Text-Email.refs.d.ts.map

package/dist/components/core/Input-Text-Email/Input-Text-Email.refs.js

@@ -0,0 +1,34 @@
+"use strict";
+/**
+ * Input-Text-Email Component Token References
+ *
+ * Inherits all tokens from Input-Text-Base.
+ * Email-specific components use the same visual tokens as the base component.
+ *
+ * Stemma System: Form Inputs Family
+ * Component Type: Semantic (inherits from Input-Text-Base)
+ * Naming Convention: [Family]-[Type]-[Variant] = Input-Text-Email
+ *
+ * Token Inheritance:
+ * Input-Text-Email inherits ALL tokens from Input-Text-Base.
+ * No additional tokens are required for email-specific functionality.
+ *
+ * This file re-exports Input-Text-Base tokens for consistency and
+ * to allow future email-specific token additions if needed.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inputTextEmailTokens = exports.inputTextBaseTokens = exports.blendTokens = exports.accessibilityTokens = exports.borderTokens = exports.motionTokens = exports.spacingTokens = exports.colorTokens = exports.typographyTokens = void 0;
+// Re-export all tokens from Input-Text-Base
+var Input_Text_Base_refs_1 = require("../Input-Text-Base/Input-Text-Base.refs");
+Object.defineProperty(exports, "typographyTokens", { enumerable: true, get: function () { return Input_Text_Base_refs_1.typographyTokens; } });
+Object.defineProperty(exports, "colorTokens", { enumerable: true, get: function () { return Input_Text_Base_refs_1.colorTokens; } });
+Object.defineProperty(exports, "spacingTokens", { enumerable: true, get: function () { return Input_Text_Base_refs_1.spacingTokens; } });
+Object.defineProperty(exports, "motionTokens", { enumerable: true, get: function () { return Input_Text_Base_refs_1.motionTokens; } });
+Object.defineProperty(exports, "borderTokens", { enumerable: true, get: function () { return Input_Text_Base_refs_1.borderTokens; } });
+Object.defineProperty(exports, "accessibilityTokens", { enumerable: true, get: function () { return Input_Text_Base_refs_1.accessibilityTokens; } });
+Object.defineProperty(exports, "blendTokens", { enumerable: true, get: function () { return Input_Text_Base_refs_1.blendTokens; } });
+Object.defineProperty(exports, "inputTextBaseTokens", { enumerable: true, get: function () { return Input_Text_Base_refs_1.inputTextBaseTokens; } });
+// Alias for semantic naming
+var Input_Text_Base_refs_2 = require("../Input-Text-Base/Input-Text-Base.refs");
+Object.defineProperty(exports, "inputTextEmailTokens", { enumerable: true, get: function () { return Input_Text_Base_refs_2.inputTextBaseTokens; } });
+//# sourceMappingURL=Input-Text-Email.refs.js.map

package/dist/components/core/Input-Text-Password/Input-Text-Password.refs.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Input-Text-Password Component Token References
+ *
+ * Inherits all tokens from Input-Text-Base.
+ * Password-specific components use the same visual tokens as the base component.
+ *
+ * Stemma System: Form Inputs Family
+ * Component Type: Semantic (inherits from Input-Text-Base)
+ * Naming Convention: [Family]-[Type]-[Variant] = Input-Text-Password
+ *
+ * Token Inheritance:
+ * Input-Text-Password inherits ALL tokens from Input-Text-Base.
+ * No additional tokens are required for password-specific functionality.
+ *
+ * This file re-exports Input-Text-Base tokens for consistency and
+ * to allow future password-specific token additions if needed.
+ */
+export { typographyTokens, colorTokens, spacingTokens, motionTokens, borderTokens, accessibilityTokens, blendTokens, inputTextBaseTokens } from '../Input-Text-Base/Input-Text-Base.refs';
+export { inputTextBaseTokens as inputTextPasswordTokens } from '../Input-Text-Base/Input-Text-Base.refs';
+//# sourceMappingURL=Input-Text-Password.refs.d.ts.map

package/dist/components/core/Input-Text-Password/Input-Text-Password.refs.js

@@ -0,0 +1,34 @@
+"use strict";
+/**
+ * Input-Text-Password Component Token References
+ *
+ * Inherits all tokens from Input-Text-Base.
+ * Password-specific components use the same visual tokens as the base component.
+ *
+ * Stemma System: Form Inputs Family
+ * Component Type: Semantic (inherits from Input-Text-Base)
+ * Naming Convention: [Family]-[Type]-[Variant] = Input-Text-Password
+ *
+ * Token Inheritance:
+ * Input-Text-Password inherits ALL tokens from Input-Text-Base.
+ * No additional tokens are required for password-specific functionality.
+ *
+ * This file re-exports Input-Text-Base tokens for consistency and
+ * to allow future password-specific token additions if needed.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inputTextPasswordTokens = exports.inputTextBaseTokens = exports.blendTokens = exports.accessibilityTokens = exports.borderTokens = exports.motionTokens = exports.spacingTokens = exports.colorTokens = exports.typographyTokens = void 0;
+// Re-export all tokens from Input-Text-Base
+var Input_Text_Base_refs_1 = require("../Input-Text-Base/Input-Text-Base.refs");
+Object.defineProperty(exports, "typographyTokens", { enumerable: true, get: function () { return Input_Text_Base_refs_1.typographyTokens; } });
+Object.defineProperty(exports, "colorTokens", { enumerable: true, get: function () { return Input_Text_Base_refs_1.colorTokens; } });
+Object.defineProperty(exports, "spacingTokens", { enumerable: true, get: function () { return Input_Text_Base_refs_1.spacingTokens; } });
+Object.defineProperty(exports, "motionTokens", { enumerable: true, get: function () { return Input_Text_Base_refs_1.motionTokens; } });
+Object.defineProperty(exports, "borderTokens", { enumerable: true, get: function () { return Input_Text_Base_refs_1.borderTokens; } });
+Object.defineProperty(exports, "accessibilityTokens", { enumerable: true, get: function () { return Input_Text_Base_refs_1.accessibilityTokens; } });
+Object.defineProperty(exports, "blendTokens", { enumerable: true, get: function () { return Input_Text_Base_refs_1.blendTokens; } });
+Object.defineProperty(exports, "inputTextBaseTokens", { enumerable: true, get: function () { return Input_Text_Base_refs_1.inputTextBaseTokens; } });
+// Alias for semantic naming
+var Input_Text_Base_refs_2 = require("../Input-Text-Base/Input-Text-Base.refs");
+Object.defineProperty(exports, "inputTextPasswordTokens", { enumerable: true, get: function () { return Input_Text_Base_refs_2.inputTextBaseTokens; } });
+//# sourceMappingURL=Input-Text-Password.refs.js.map

package/dist/components/core/Input-Text-Password/platforms/web/InputTextPassword.web.d.ts

@@ -36,6 +36,8 @@ export declare class InputTextPassword extends HTMLElement {
     private _isPasswordVisible;
     private _hasBeenValidated;
     private _isPasswordValid;
+    private _blendUtils;
+    private _toggleHoverColor;
     constructor();
     /**
      * Get shadow root (for testing and external access)
@@ -47,8 +49,36 @@ export declare class InputTextPassword extends HTMLElement {
     static get observedAttributes(): string[];
     /**
      * Connected callback - called when element is added to DOM
+     *
+     * Defers blend color calculation until document is ready to ensure CSS custom
+     * properties are available from parsed stylesheets (same deferral pattern as
+     * Button-Icon / Chip-Base).
      */
     connectedCallback(): void;
+    /**
+     * Calculate blend colors with retry logic for CSS loading race conditions.
+     *
+     * Uses requestAnimationFrame to ensure CSS is fully applied before reading
+     * custom properties. Falls back to the CSS-in-JS render default if tokens are
+     * still unavailable.
+     */
+    private _calculateBlendColorsWithRetry;
+    /**
+     * Calculate the toggle-button hover background color from CSS custom properties.
+     *
+     * The toggle button's resting background is transparent — it sits directly on the
+     * input container's canvas background (`--color-structure-canvas`). On hover, the
+     * button darkens relative to that surface, matching the pattern Chip-Base uses for
+     * its own resting-background hover (`darkerBlend(color.structure.surface,
+     * blend.hoverDarker)`) — here the "surface the element sits on" is the input's
+     * canvas rather than the chip's own background, since the toggle button itself has
+     * no background of its own to darken.
+     *
+     * - Hover: darkerBlend(color.structure.canvas, blend.hoverDarker) - 8% darker
+     *
+     * @throws Error if the required token is missing from CSS custom properties
+     */
+    private _calculateBlendColors;
     /**
      * Disconnected callback - called when element is removed from DOM
      */