/**
 * Field Size Ladder
 * One source of truth for how `size` scales every field component.
 * Components consume the --ty-field-* vars; nothing hardcodes a size.
 */
export declare const fieldSizeVars = "\n:host {\n  --ty-field-height: var(--ty-size-sm, 2rem);\n  --ty-field-pad-x: 10px;\n  --ty-field-font: var(--ty-font-sm);\n  --ty-field-leading: 20px;\n  --ty-field-tracking: var(--ty-tracking-sm);\n  --ty-field-label-font: var(--ty-font-xs);\n  --ty-field-label-leading: var(--ty-leading-xs);\n  --ty-field-label-gap: 5px;\n  /* Text that sits OUTSIDE the field box (label, error message) has to line up\n     with the value INSIDE it. The value is inset by the wrapper's 1px border\n     plus --ty-field-pad-x; outside text only ever cleared the padding, so it\n     started exactly 1px to the left of the value it labelled \u2014 at every rung,\n     on every field. Resolved per rung: the calc reads whichever --ty-field-pad-x\n     is winning on the host. */\n  --ty-field-outer-pad-x: calc(var(--ty-field-pad-x) + 1px);\n  --ty-field-control: 24px;\n  --ty-field-icon: 16px;\n}\n\n:host([size=\"xs\"]) {\n  --ty-field-height: var(--ty-size-xs, 1.75rem);\n  --ty-field-pad-x: 8px;\n  --ty-field-font: var(--ty-font-xs);\n  --ty-field-leading: 16px;\n  --ty-field-tracking: var(--ty-tracking-xs);\n  --ty-field-label-font: var(--ty-font-xs);\n  --ty-field-label-leading: var(--ty-leading-xs);\n  --ty-field-label-gap: 4px;\n  --ty-field-control: 20px;\n  --ty-field-icon: 14px;\n}\n\n:host([size=\"md\"]) {\n  --ty-field-height: var(--ty-size-md, 2.25rem);\n  --ty-field-pad-x: 12px;\n  --ty-field-font: var(--ty-font-sm);\n  --ty-field-leading: 20px;\n  --ty-field-tracking: var(--ty-tracking-sm);\n  --ty-field-label-font: var(--ty-font-sm);\n  --ty-field-label-leading: var(--ty-leading-sm);\n  --ty-field-label-gap: 6px;\n  --ty-field-control: 28px;\n  --ty-field-icon: 18px;\n}\n\n:host([size=\"lg\"]) {\n  --ty-field-height: var(--ty-size-lg, 2.5rem);\n  --ty-field-pad-x: 14px;\n  --ty-field-font: var(--ty-font-base);\n  --ty-field-leading: 24px;\n  --ty-field-tracking: var(--ty-tracking-base);\n  --ty-field-label-font: var(--ty-font-sm);\n  --ty-field-label-leading: var(--ty-leading-sm);\n  --ty-field-label-gap: 6px;\n  --ty-field-control: 32px;\n  --ty-field-icon: 20px;\n}\n\n:host([size=\"xl\"]) {\n  --ty-field-height: var(--ty-size-xl, 2.75rem);\n  --ty-field-pad-x: 16px;\n  --ty-field-font: var(--ty-font-lg);\n  --ty-field-leading: 28px;\n  --ty-field-tracking: var(--ty-tracking-base);\n  --ty-field-label-font: var(--ty-font-base);\n  --ty-field-label-leading: var(--ty-leading-base);\n  --ty-field-label-gap: 8px;\n  --ty-field-control: 36px;\n  --ty-field-icon: 22px;\n}\n\n/* Narrow viewports drop the two biggest rungs one step \u2014 same ladder, no\n   component-specific overrides.\n\n   A stepped-down rung must carry the WHOLE rung: --ty-field-control is the\n   in-field button box (ty-copy's copy button, the date-picker's icon), and it\n   sets the wrapper's content height. Leave it at the original rung and the\n   field ends up taller than --ty-field-height \u2014 the ladder silently breaks on\n   exactly one component. */\n@media (max-width: 640px) {\n  :host([size=\"lg\"]) {\n    --ty-field-height: var(--ty-size-md, 2.25rem);\n    --ty-field-pad-x: 12px;\n    --ty-field-font: var(--ty-font-sm);\n    --ty-field-leading: 20px;\n    --ty-field-control: 28px;\n    --ty-field-icon: 18px;\n  }\n\n  :host([size=\"xl\"]) {\n    --ty-field-height: var(--ty-size-lg, 2.5rem);\n    --ty-field-pad-x: 14px;\n    --ty-field-font: var(--ty-font-base);\n    --ty-field-leading: 24px;\n    --ty-field-control: 32px;\n    --ty-field-icon: 20px;\n  }\n}\n\n@media (max-width: 480px) {\n  :host([size=\"xl\"]) {\n    --ty-field-height: var(--ty-size-md, 2.25rem);\n    --ty-field-pad-x: 12px;\n    --ty-field-font: var(--ty-font-sm);\n    --ty-field-leading: 20px;\n    --ty-field-control: 28px;\n    --ty-field-icon: 18px;\n  }\n}\n";