@sandlada/mdc/build/component-definitions/field.definition.d.ts

@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.

/**
 * Filled Field — `Widget.Material3.TextInputLayout.FilledBox`.
 *
 * Filled variant has rounded top corners (4dp) and square bottom corners.
 * The container is rendered with a `surface-container-highest` background
 * and a bottom-indicator underline that thickens on focus and switches to
 * the error color when `invalid`.
 */
export declare const FilledFieldDefinition: {
    readonly 'container-height': `56px`;
    readonly 'enabled-label-font': "var(--md-ref-typeface-font-plain, Roboto)";
    readonly 'enabled-label-size': "var(--md-sys-typescale-body-large-font-size, 16px)";
    readonly 'enabled-label-weight': "var(--md-ref-typeface-weight-regular, 400)";
    readonly 'enabled-label-tracking': "var(--md-sys-typescale-body-large-font-tracking, 0px)";
    readonly 'enabled-label-line-height': "var(--md-sys-typescale-body-large-font-line-height, 24px)";
    readonly 'floating-label-font': "var(--md-ref-typeface-font-plain, Roboto)";
    readonly 'floating-label-size': "var(--md-sys-typescale-body-small-font-size, 12px)";
    readonly 'floating-label-weight': "var(--md-ref-typeface-weight-regular, 400)";
    readonly 'floating-label-tracking': "var(--md-sys-typescale-body-small-font-tracking, 0.1px)";
    readonly 'floating-label-line-height': "var(--md-sys-typescale-body-small-font-line-height, 16px)";
    readonly 'supporting-text-font': "var(--md-ref-typeface-font-plain, Roboto)";
    readonly 'supporting-text-size': "var(--md-sys-typescale-body-small-font-size, 12px)";
    readonly 'supporting-text-weight': "var(--md-ref-typeface-weight-regular, 400)";
    readonly 'supporting-text-tracking': "var(--md-sys-typescale-body-small-font-tracking, 0.1px)";
    readonly 'supporting-text-line-height': "var(--md-sys-typescale-body-small-font-line-height, 16px)";
    readonly 'counter-font': "var(--md-ref-typeface-font-plain, Roboto)";
    readonly 'counter-size': "var(--md-sys-typescale-body-small-font-size, 12px)";
    readonly 'counter-weight': "var(--md-ref-typeface-weight-regular, 400)";
    readonly 'counter-tracking': "var(--md-sys-typescale-body-small-font-tracking, 0.1px)";
    readonly 'counter-line-height': "var(--md-sys-typescale-body-small-font-line-height, 16px)";
    readonly 'disabled-label-opacity': `0.38`;
    readonly 'disabled-supporting-text-opacity': `0.38`;
    readonly 'disabled-counter-opacity': `0.38`;
    readonly 'disabled-icon-opacity': `0.38`;
    readonly 'hovered-state-layer-opacity': `0.08`;
    readonly 'focused-state-layer-opacity': `0.1`;
    readonly 'pressed-state-layer-opacity': `0.1`;
    readonly 'container-inline-leading-padding-space': `16px`;
    readonly 'container-inline-trailing-padding-space': `16px`;
    readonly 'container-block-leading-padding-space': `8px`;
    readonly 'container-block-trailing-padding-space': `8px`;
    readonly 'leading-icon-size': `24px`;
    readonly 'trailing-icon-size': `24px`;
    readonly 'prefix-inline-leading-padding-space': `2px`;
    readonly 'prefix-inline-trailing-padding-space': `2px`;
    readonly 'suffix-inline-leading-padding-space': `2px`;
    readonly 'suffix-inline-trailing-padding-space': `2px`;
    readonly 'container-shape-start-start': "var(--md-sys-shape-corner-extra-small, 4px)";
    readonly 'container-shape-start-end': "var(--md-sys-shape-corner-extra-small, 4px)";
    readonly 'container-shape-end-start': "0";
    readonly 'container-shape-end-end': "0";
    readonly 'enabled-container-color': "var(--md-sys-color-surface-container-highest, light-dark(#dde4db, #303630))";
    readonly 'hovered-container-color': "var(--md-sys-color-surface-container-high, light-dark(#e3eae1, #252c25))";
    readonly 'focused-container-color': "var(--md-sys-color-surface-container-highest, light-dark(#dde4db, #303630))";
    readonly 'disabled-container-color': "var(--md-sys-color-surface-container-highest, light-dark(#dde4db, #303630))";
    readonly 'enabled-active-indicator-color': "var(--md-sys-color-on-surface-variant, light-dark(#3d4a3f, #bccabc))";
    readonly 'hovered-active-indicator-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
    readonly 'focused-active-indicator-color': "var(--md-sys-color-primary, light-dark(#006d38, #76f29e))";
    readonly 'invalid-active-indicator-color': "var(--md-sys-color-error, light-dark(#ba1a1a, #ffb4ab))";
    readonly 'disabled-active-indicator-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
    readonly 'enabled-active-indicator-height': "1px";
    readonly 'hovered-active-indicator-height': "1px";
    readonly 'focused-active-indicator-height': "2px";
    readonly 'invalid-active-indicator-height': "2px";
    readonly 'disabled-active-indicator-height': "1px";
    readonly 'enabled-label-color': "var(--md-sys-color-on-surface-variant, light-dark(#3d4a3f, #bccabc))";
    readonly 'focused-label-color': "var(--md-sys-color-primary, light-dark(#006d38, #76f29e))";
    readonly 'invalid-label-color': "var(--md-sys-color-error, light-dark(#ba1a1a, #ffb4ab))";
    readonly 'disabled-label-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
    readonly 'enabled-supporting-text-color': "var(--md-sys-color-on-surface-variant, light-dark(#3d4a3f, #bccabc))";
    readonly 'invalid-supporting-text-color': "var(--md-sys-color-error, light-dark(#ba1a1a, #ffb4ab))";
    readonly 'disabled-supporting-text-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
    readonly 'enabled-counter-color': "var(--md-sys-color-on-surface-variant, light-dark(#3d4a3f, #bccabc))";
    readonly 'invalid-counter-color': "var(--md-sys-color-error, light-dark(#ba1a1a, #ffb4ab))";
    readonly 'disabled-counter-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
    readonly 'enabled-icon-color': "var(--md-sys-color-on-surface-variant, light-dark(#3d4a3f, #bccabc))";
    readonly 'focused-icon-color': "var(--md-sys-color-on-surface-variant, light-dark(#3d4a3f, #bccabc))";
    readonly 'invalid-icon-color': "var(--md-sys-color-on-surface-variant, light-dark(#3d4a3f, #bccabc))";
    readonly 'disabled-icon-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
};
/**
 * Outlined Field — `Widget.Material3.TextInputLayout.OutlinedBox`.
 *
 * Outlined variant has uniform 4dp rounded corners and a 4-sided border. The
 * label "notch" effect is created by giving the label a solid background that
 * matches the container background (`transparent`), so the outline appears to
 * break at the label position.
 */
export declare const OutlinedFieldDefinition: {
    readonly 'container-height': `56px`;
    readonly 'enabled-label-font': "var(--md-ref-typeface-font-plain, Roboto)";
    readonly 'enabled-label-size': "var(--md-sys-typescale-body-large-font-size, 16px)";
    readonly 'enabled-label-weight': "var(--md-ref-typeface-weight-regular, 400)";
    readonly 'enabled-label-tracking': "var(--md-sys-typescale-body-large-font-tracking, 0px)";
    readonly 'enabled-label-line-height': "var(--md-sys-typescale-body-large-font-line-height, 24px)";
    readonly 'floating-label-font': "var(--md-ref-typeface-font-plain, Roboto)";
    readonly 'floating-label-size': "var(--md-sys-typescale-body-small-font-size, 12px)";
    readonly 'floating-label-weight': "var(--md-ref-typeface-weight-regular, 400)";
    readonly 'floating-label-tracking': "var(--md-sys-typescale-body-small-font-tracking, 0.1px)";
    readonly 'floating-label-line-height': "var(--md-sys-typescale-body-small-font-line-height, 16px)";
    readonly 'supporting-text-font': "var(--md-ref-typeface-font-plain, Roboto)";
    readonly 'supporting-text-size': "var(--md-sys-typescale-body-small-font-size, 12px)";
    readonly 'supporting-text-weight': "var(--md-ref-typeface-weight-regular, 400)";
    readonly 'supporting-text-tracking': "var(--md-sys-typescale-body-small-font-tracking, 0.1px)";
    readonly 'supporting-text-line-height': "var(--md-sys-typescale-body-small-font-line-height, 16px)";
    readonly 'counter-font': "var(--md-ref-typeface-font-plain, Roboto)";
    readonly 'counter-size': "var(--md-sys-typescale-body-small-font-size, 12px)";
    readonly 'counter-weight': "var(--md-ref-typeface-weight-regular, 400)";
    readonly 'counter-tracking': "var(--md-sys-typescale-body-small-font-tracking, 0.1px)";
    readonly 'counter-line-height': "var(--md-sys-typescale-body-small-font-line-height, 16px)";
    readonly 'disabled-label-opacity': `0.38`;
    readonly 'disabled-supporting-text-opacity': `0.38`;
    readonly 'disabled-counter-opacity': `0.38`;
    readonly 'disabled-icon-opacity': `0.38`;
    readonly 'hovered-state-layer-opacity': `0.08`;
    readonly 'focused-state-layer-opacity': `0.1`;
    readonly 'pressed-state-layer-opacity': `0.1`;
    readonly 'container-inline-leading-padding-space': `16px`;
    readonly 'container-inline-trailing-padding-space': `16px`;
    readonly 'container-block-leading-padding-space': `8px`;
    readonly 'container-block-trailing-padding-space': `8px`;
    readonly 'leading-icon-size': `24px`;
    readonly 'trailing-icon-size': `24px`;
    readonly 'prefix-inline-leading-padding-space': `2px`;
    readonly 'prefix-inline-trailing-padding-space': `2px`;
    readonly 'suffix-inline-leading-padding-space': `2px`;
    readonly 'suffix-inline-trailing-padding-space': `2px`;
    readonly 'container-shape-start-start': "var(--md-sys-shape-corner-extra-small, 4px)";
    readonly 'container-shape-start-end': "var(--md-sys-shape-corner-extra-small, 4px)";
    readonly 'container-shape-end-start': "var(--md-sys-shape-corner-extra-small, 4px)";
    readonly 'container-shape-end-end': "var(--md-sys-shape-corner-extra-small, 4px)";
    readonly 'enabled-container-color': "transparent";
    readonly 'hovered-container-color': "transparent";
    readonly 'focused-container-color': "transparent";
    readonly 'disabled-container-color': "transparent";
    readonly 'outline-width': "1px";
    readonly 'enabled-outline-color': "var(--md-sys-color-outline, light-dark(#6d7a6e, #879487))";
    readonly 'hovered-outline-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
    readonly 'focused-outline-color': "var(--md-sys-color-primary, light-dark(#006d38, #76f29e))";
    readonly 'invalid-outline-color': "var(--md-sys-color-error, light-dark(#ba1a1a, #ffb4ab))";
    readonly 'disabled-outline-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
    readonly 'enabled-label-color': "var(--md-sys-color-on-surface-variant, light-dark(#3d4a3f, #bccabc))";
    readonly 'focused-label-color': "var(--md-sys-color-primary, light-dark(#006d38, #76f29e))";
    readonly 'invalid-label-color': "var(--md-sys-color-error, light-dark(#ba1a1a, #ffb4ab))";
    readonly 'disabled-label-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
    readonly 'enabled-supporting-text-color': "var(--md-sys-color-on-surface-variant, light-dark(#3d4a3f, #bccabc))";
    readonly 'invalid-supporting-text-color': "var(--md-sys-color-error, light-dark(#ba1a1a, #ffb4ab))";
    readonly 'disabled-supporting-text-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
    readonly 'enabled-counter-color': "var(--md-sys-color-on-surface-variant, light-dark(#3d4a3f, #bccabc))";
    readonly 'invalid-counter-color': "var(--md-sys-color-error, light-dark(#ba1a1a, #ffb4ab))";
    readonly 'disabled-counter-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
    readonly 'enabled-icon-color': "var(--md-sys-color-on-surface-variant, light-dark(#3d4a3f, #bccabc))";
    readonly 'focused-icon-color': "var(--md-sys-color-on-surface-variant, light-dark(#3d4a3f, #bccabc))";
    readonly 'invalid-icon-color': "var(--md-sys-color-on-surface-variant, light-dark(#3d4a3f, #bccabc))";
    readonly 'disabled-icon-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
};
/**
 * Default export — kept for parity with single-definition components.
 * The concrete class uses `FilledFieldDefinition` / `OutlinedFieldDefinition`
 * directly via the `variant` attribute.
 */
export declare const FieldDefinition: {
    readonly 'container-height': `56px`;
    readonly 'enabled-label-font': "var(--md-ref-typeface-font-plain, Roboto)";
    readonly 'enabled-label-size': "var(--md-sys-typescale-body-large-font-size, 16px)";
    readonly 'enabled-label-weight': "var(--md-ref-typeface-weight-regular, 400)";
    readonly 'enabled-label-tracking': "var(--md-sys-typescale-body-large-font-tracking, 0px)";
    readonly 'enabled-label-line-height': "var(--md-sys-typescale-body-large-font-line-height, 24px)";
    readonly 'floating-label-font': "var(--md-ref-typeface-font-plain, Roboto)";
    readonly 'floating-label-size': "var(--md-sys-typescale-body-small-font-size, 12px)";
    readonly 'floating-label-weight': "var(--md-ref-typeface-weight-regular, 400)";
    readonly 'floating-label-tracking': "var(--md-sys-typescale-body-small-font-tracking, 0.1px)";
    readonly 'floating-label-line-height': "var(--md-sys-typescale-body-small-font-line-height, 16px)";
    readonly 'supporting-text-font': "var(--md-ref-typeface-font-plain, Roboto)";
    readonly 'supporting-text-size': "var(--md-sys-typescale-body-small-font-size, 12px)";
    readonly 'supporting-text-weight': "var(--md-ref-typeface-weight-regular, 400)";
    readonly 'supporting-text-tracking': "var(--md-sys-typescale-body-small-font-tracking, 0.1px)";
    readonly 'supporting-text-line-height': "var(--md-sys-typescale-body-small-font-line-height, 16px)";
    readonly 'counter-font': "var(--md-ref-typeface-font-plain, Roboto)";
    readonly 'counter-size': "var(--md-sys-typescale-body-small-font-size, 12px)";
    readonly 'counter-weight': "var(--md-ref-typeface-weight-regular, 400)";
    readonly 'counter-tracking': "var(--md-sys-typescale-body-small-font-tracking, 0.1px)";
    readonly 'counter-line-height': "var(--md-sys-typescale-body-small-font-line-height, 16px)";
    readonly 'disabled-label-opacity': `0.38`;
    readonly 'disabled-supporting-text-opacity': `0.38`;
    readonly 'disabled-counter-opacity': `0.38`;
    readonly 'disabled-icon-opacity': `0.38`;
    readonly 'hovered-state-layer-opacity': `0.08`;
    readonly 'focused-state-layer-opacity': `0.1`;
    readonly 'pressed-state-layer-opacity': `0.1`;
    readonly 'container-inline-leading-padding-space': `16px`;
    readonly 'container-inline-trailing-padding-space': `16px`;
    readonly 'container-block-leading-padding-space': `8px`;
    readonly 'container-block-trailing-padding-space': `8px`;
    readonly 'leading-icon-size': `24px`;
    readonly 'trailing-icon-size': `24px`;
    readonly 'prefix-inline-leading-padding-space': `2px`;
    readonly 'prefix-inline-trailing-padding-space': `2px`;
    readonly 'suffix-inline-leading-padding-space': `2px`;
    readonly 'suffix-inline-trailing-padding-space': `2px`;
    readonly 'container-shape-start-start': "var(--md-sys-shape-corner-extra-small, 4px)";
    readonly 'container-shape-start-end': "var(--md-sys-shape-corner-extra-small, 4px)";
    readonly 'container-shape-end-start': "0";
    readonly 'container-shape-end-end': "0";
    readonly 'enabled-container-color': "var(--md-sys-color-surface-container-highest, light-dark(#dde4db, #303630))";
    readonly 'hovered-container-color': "var(--md-sys-color-surface-container-high, light-dark(#e3eae1, #252c25))";
    readonly 'focused-container-color': "var(--md-sys-color-surface-container-highest, light-dark(#dde4db, #303630))";
    readonly 'disabled-container-color': "var(--md-sys-color-surface-container-highest, light-dark(#dde4db, #303630))";
    readonly 'enabled-active-indicator-color': "var(--md-sys-color-on-surface-variant, light-dark(#3d4a3f, #bccabc))";
    readonly 'hovered-active-indicator-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
    readonly 'focused-active-indicator-color': "var(--md-sys-color-primary, light-dark(#006d38, #76f29e))";
    readonly 'invalid-active-indicator-color': "var(--md-sys-color-error, light-dark(#ba1a1a, #ffb4ab))";
    readonly 'disabled-active-indicator-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
    readonly 'enabled-active-indicator-height': "1px";
    readonly 'hovered-active-indicator-height': "1px";
    readonly 'focused-active-indicator-height': "2px";
    readonly 'invalid-active-indicator-height': "2px";
    readonly 'disabled-active-indicator-height': "1px";
    readonly 'enabled-label-color': "var(--md-sys-color-on-surface-variant, light-dark(#3d4a3f, #bccabc))";
    readonly 'focused-label-color': "var(--md-sys-color-primary, light-dark(#006d38, #76f29e))";
    readonly 'invalid-label-color': "var(--md-sys-color-error, light-dark(#ba1a1a, #ffb4ab))";
    readonly 'disabled-label-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
    readonly 'enabled-supporting-text-color': "var(--md-sys-color-on-surface-variant, light-dark(#3d4a3f, #bccabc))";
    readonly 'invalid-supporting-text-color': "var(--md-sys-color-error, light-dark(#ba1a1a, #ffb4ab))";
    readonly 'disabled-supporting-text-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
    readonly 'enabled-counter-color': "var(--md-sys-color-on-surface-variant, light-dark(#3d4a3f, #bccabc))";
    readonly 'invalid-counter-color': "var(--md-sys-color-error, light-dark(#ba1a1a, #ffb4ab))";
    readonly 'disabled-counter-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
    readonly 'enabled-icon-color': "var(--md-sys-color-on-surface-variant, light-dark(#3d4a3f, #bccabc))";
    readonly 'focused-icon-color': "var(--md-sys-color-on-surface-variant, light-dark(#3d4a3f, #bccabc))";
    readonly 'invalid-icon-color': "var(--md-sys-color-on-surface-variant, light-dark(#3d4a3f, #bccabc))";
    readonly 'disabled-icon-color': "var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db))";
};
//# sourceMappingURL=field.definition.d.ts.map