tyrell-components 1.0.0-RC14 → 1.0.0-RC15

package/lib/styles/date-picker.js

@@ -1,396 +1,326 @@
 import { FLAVORS } from "../types/common.js";
+import { fieldSizeVars } from "./field-size.js";
 const datePickerFlavor = (f, fb) => {
-    const c = (s) => fb
-        ? s
-            ? `var(--ty-color-${f}${s}, var(--ty-color-${f}, var(--ty-color-${fb}${s})))`
-            : `var(--ty-color-${f}, var(--ty-color-${fb}))`
-        : s
-            ? `var(--ty-color-${f}${s}, var(--ty-color-${f}))`
-            : `var(--ty-color-${f})`;
-    return `
+const c = (s) => fb
+? s
+? `var(--ty-color-${f}${s}, var(--ty-color-${f}, var(--ty-color-${fb}${s})))`
+: `var(--ty-color-${f}, var(--ty-color-${fb}))`
+: s
+? `var(--ty-color-${f}${s}, var(--ty-color-${f}))`
+: `var(--ty-color-${f})`;
+return `
 :host([flavor="${f}"]) {
-  --date-picker-accent: var(--ty-input-${f}-border, ${c("-soft")});
-  --date-picker-accent-bold: ${c("")};
-  --date-picker-ring: color-mix(in oklab, ${c("")} 15%, transparent);
+--date-picker-accent: var(--ty-input-${f}-border, ${c("-soft")});
+--date-picker-accent-bold: ${c("")};
+--date-picker-ring: color-mix(in oklab, ${c("")} 15%, transparent);
 }
 :host([flavor="${f}+"]) {
-  --date-picker-accent: ${c("")};
-  --date-picker-accent-bold: ${c("-strong")};
-  --date-picker-ring: color-mix(in oklab, ${c("-strong")} 15%, transparent);
+--date-picker-accent: ${c("")};
+--date-picker-accent-bold: ${c("-strong")};
+--date-picker-ring: color-mix(in oklab, ${c("-strong")} 15%, transparent);
 }
 :host([flavor="${f}-"]) {
-  --date-picker-accent: ${c("-faint")};
-  --date-picker-accent-bold: ${c("-soft")};
-  --date-picker-ring: color-mix(in oklab, ${c("-soft")} 15%, transparent);
+--date-picker-accent: ${c("-faint")};
+--date-picker-accent-bold: ${c("-soft")};
+--date-picker-ring: color-mix(in oklab, ${c("-soft")} 15%, transparent);
 }
 `;
 };
 export const datePickerCustomFlavorCss = (base) => datePickerFlavor(base, "neutral");
 export const datePickerStyles = `
+${fieldSizeVars}
 :host {
-  display: block;
-  width: auto;
-  min-width: 200px;
-  font-family: inherit;
-
-  /* Theming tokens — date-picker stub. Thin shim over --ty-input-*: override
-     these to retheme just the date-picker trigger, not other inputs. */
-  --ty-date-picker-bg: var(--ty-input-bg);
-  --ty-date-picker-color: var(--ty-input-color);
-  --ty-date-picker-placeholder: var(--ty-input-placeholder);
-  --ty-date-picker-border: var(--ty-input-border);
-  --ty-date-picker-border-hover: var(--ty-input-border-hover);
-  --ty-date-picker-border-focus: var(--ty-input-border-focus);
-  --ty-date-picker-shadow-focus: var(--ty-input-shadow-focus);
-  --ty-date-picker-disabled-bg: var(--ty-input-disabled-bg);
-  --ty-date-picker-disabled-color: var(--ty-input-disabled-color);
-  --ty-date-picker-radius: var(--ty-radius-md);
-
-  /* Theming tokens — calendar popup surface. Shared with ty-calendar /
-     ty-calendar-month theming. */
-  --ty-calendar-surface-bg: var(--ty-surface-floating);
-  --ty-calendar-surface-border: var(--ty-input-border);
-  --ty-calendar-surface-shadow: var(--ty-shadow-lg, 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.1));
-  --ty-calendar-surface-radius: var(--ty-radius-lg);
-
-  /* Theming tokens — time section */
-  --ty-calendar-time-bg: transparent;
-  --ty-calendar-time-border: var(--ty-border-faint);
-  --ty-calendar-time-label-color: var(--ty-color-neutral);
-  --ty-calendar-time-input-color: var(--ty-input-color);
-  --ty-calendar-time-placeholder-color: var(--ty-input-placeholder);
-  --ty-calendar-time-icon-color: var(--ty-color-neutral-soft);
-}
-
-/* Container structure (reuses dropdown patterns) */
+display: block;
+width: auto;
+min-width: 200px;
+font-family: inherit;
+--ty-date-picker-bg: var(--ty-input-bg);
+--ty-date-picker-color: var(--ty-input-color);
+--ty-date-picker-placeholder: var(--ty-input-placeholder);
+--ty-date-picker-border: var(--ty-input-border);
+--ty-date-picker-border-hover: var(--ty-input-border-hover);
+--ty-date-picker-border-focus: var(--ty-input-border-focus);
+--ty-date-picker-shadow-focus: var(--ty-input-shadow-focus);
+--ty-date-picker-disabled-bg: var(--ty-input-disabled-bg);
+--ty-date-picker-disabled-color: var(--ty-input-disabled-color);
+--ty-date-picker-radius: var(--ty-radius-md);
+--ty-calendar-surface-bg: var(--ty-surface-floating);
+--ty-calendar-surface-border: var(--ty-input-border);
+--ty-calendar-surface-shadow: var(--ty-shadow-lg, 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.1));
+--ty-calendar-surface-radius: var(--ty-radius-lg);
+--ty-calendar-time-bg: transparent;
+--ty-calendar-time-border: var(--ty-border-faint);
+--ty-calendar-time-label-color: var(--ty-color-neutral);
+--ty-calendar-time-input-color: var(--ty-input-color);
+--ty-calendar-time-placeholder-color: var(--ty-input-placeholder);
+--ty-calendar-time-icon-color: var(--ty-color-neutral-soft);
+}
 .dropdown-container {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  box-sizing: border-box;
+display: flex;
+flex-direction: column;
+width: 100%;
+box-sizing: border-box;
 }
-
 .ty-field-label {
-  font-size: var(--ty-font-sm);
-  line-height: var(--ty-leading-sm);
-  letter-spacing: var(--ty-tracking-sm);
-  font-weight: var(--ty-font-medium);
-  color: var(--ty-label-color);
-  margin-bottom: 6px;
-  padding-left: 12px;
-  display: flex;
-  align-items: center;
-}
-
+font-size: var(--ty-field-label-font);
+line-height: var(--ty-field-label-leading);
+letter-spacing: var(--ty-tracking-sm);
+font-weight: var(--ty-font-medium);
+color: var(--ty-label-color);
+margin-bottom: var(--ty-field-label-gap);
+padding-left: var(--ty-field-outer-pad-x);
+display: flex;
+align-items: center;
+}
 .required-icon {
-  display: inline-flex;
-  align-items: center;
-  color: #ef4444;
-  width: 12px;
-  height: 12px;
-  vertical-align: middle;
-  margin-left: 4px;
-}
-
+display: inline-flex;
+align-items: center;
+color: #ef4444;
+width: 12px;
+height: 12px;
+vertical-align: middle;
+margin-left: 4px;
+}
 .dropdown-wrapper {
-  position: relative;
-  display: block;
-  width: 100%;
+position: relative;
+display: block;
+width: 100%;
 }
-
 .date-picker-stub ::slotted([slot="start"]) {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  margin-right: 0.5rem;
-  color: var(--ty-color-text-soft);
-}
-
+display: flex;
+align-items: center;
+justify-content: center;
+flex-shrink: 0;
+margin-right: 0.5rem;
+color: var(--ty-color-text-soft);
+}
 .date-picker-stub ::slotted(ty-icon[slot="start"]) {
-  width: 1em;
-  height: 1em;
+width: 1em;
+height: 1em;
 }
-
 .date-picker-stub {
-  width: 100%;
-  cursor: pointer;
-  box-sizing: border-box;
-  position: relative;
-  display: flex;
-  align-items: center;
-  background: var(--ty-date-picker-bg);
-  color: var(--ty-date-picker-color);
-  border: 1px solid var(--date-picker-accent, var(--ty-date-picker-border));
-  border-radius: var(--ty-date-picker-radius);
-  font-family: inherit;
-  font-size: var(--ty-font-sm);
-  font-weight: var(--ty-font-normal);
-  line-height: var(--ty-line-height-tight);
-  min-height: var(--ty-size-md);
-  padding: var(--ty-spacing-2) var(--ty-spacing-3);
-  padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));
-  transition: var(--ty-transition-all), opacity 0.2s ease;
-  outline: none;
-}
-
+width: 100%;
+cursor: pointer;
+box-sizing: border-box;
+position: relative;
+display: flex;
+align-items: center;
+background: var(--ty-date-picker-bg);
+color: var(--ty-date-picker-color);
+border: 1px solid var(--date-picker-accent, var(--ty-date-picker-border));
+border-radius: var(--ty-date-picker-radius);
+font-family: inherit;
+font-size: var(--ty-field-font);
+font-weight: var(--ty-font-normal);
+line-height: var(--ty-field-leading);
+min-height: var(--ty-field-height);
+padding: 0 var(--ty-field-pad-x);
+padding-right: calc(var(--ty-field-pad-x) + 1rem + var(--ty-field-pad-x));
+transition: var(--ty-transition-all), opacity 0.2s ease;
+outline: none;
+}
 .date-picker-stub:hover:not([disabled]):not(.open) {
-  border-color: var(--date-picker-accent-bold, var(--ty-date-picker-border-hover));
+border-color: var(--date-picker-accent-bold, var(--ty-date-picker-border-hover));
 }
-
 .date-picker-stub[disabled] {
-  background-color: var(--ty-date-picker-disabled-bg);
-  color: var(--ty-date-picker-disabled-color);
-  cursor: not-allowed;
-  opacity: 0.6;
+background-color: var(--ty-date-picker-disabled-bg);
+color: var(--ty-date-picker-disabled-color);
+cursor: not-allowed;
+opacity: 0.6;
 }
-
 .date-picker-stub:focus,
 .date-picker-stub.open {
-  border-color: var(--date-picker-accent-bold, var(--ty-date-picker-border-focus));
-  box-shadow: 0 0 0 3px var(--date-picker-ring, var(--ty-date-picker-shadow-focus));
-}
-
-.date-picker-stub.sm {
-  min-height: var(--ty-size-sm);
-  font-size: var(--ty-font-xs);
-  padding: var(--ty-spacing-1) var(--ty-spacing-2);
-  padding-right: calc(var(--ty-spacing-2) + 0.875rem + var(--ty-spacing-1));
-}
-
-.date-picker-stub.lg {
-  min-height: var(--ty-size-lg);
-  font-size: var(--ty-font-base);
-  padding: var(--ty-spacing-2) var(--ty-spacing-4);
-  padding-right: calc(var(--ty-spacing-4) + 1.125rem + var(--ty-spacing-2));
-}
-
-/* Flavor variants — set --date-picker-accent*, consumed by the stub rules above */
+border-color: var(--date-picker-accent-bold, var(--ty-date-picker-border-focus));
+box-shadow: 0 0 0 3px var(--date-picker-ring, var(--ty-date-picker-shadow-focus));
+}
 ${FLAVORS.filter((f) => f !== "neutral").map((f) => datePickerFlavor(f)).join("")}
-
 .stub-text {
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  user-select: none;
-  color: inherit;
-  pointer-events: none;
-}
-
+flex: 1;
+white-space: nowrap;
+overflow: hidden;
+text-overflow: ellipsis;
+user-select: none;
+color: inherit;
+pointer-events: none;
+}
 .stub-text.placeholder {
-  color: var(--ty-date-picker-placeholder);
+color: var(--ty-date-picker-placeholder);
 }
-
 .stub-icons {
-  display: flex;
-  align-items: center;
-  gap: var(--ty-spacing-1);
-  position: absolute;
-  right: var(--ty-spacing-3);
-  top: 50%;
-  transform: translateY(-50%);
-  height: 1rem;
-  pointer-events: none;
-  z-index: 2;
-}
-
+display: flex;
+align-items: center;
+gap: var(--ty-spacing-1);
+position: absolute;
+right: var(--ty-spacing-3);
+top: 50%;
+transform: translateY(-50%);
+height: 1rem;
+pointer-events: none;
+z-index: 2;
+}
 .stub-clear {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1rem;
-  height: 1rem;
-  padding: 0;
-  border: none;
-  background: none;
-  color: var(--ty-color-neutral-soft);
-  cursor: pointer;
-  border-radius: var(--ty-radius-sm);
-  transition: var(--ty-local-transition, all 0.15s ease);
-  pointer-events: auto;
-}
-
+display: flex;
+align-items: center;
+justify-content: center;
+width: 1rem;
+height: 1rem;
+padding: 0;
+border: none;
+background: none;
+color: var(--ty-color-neutral-soft);
+cursor: pointer;
+border-radius: var(--ty-radius-sm);
+transition: var(--ty-local-transition, all 0.15s ease);
+pointer-events: auto;
+}
 .stub-clear:hover {
-  /* Clear is a destructive utility action, not the field's semantic flavor
-     — it stays neutral at rest and always warns danger-red on hover,
-     regardless of the field's own flavor. (--ty-color-negative/
-     --ty-bg-negative-faint used here previously don't exist as tokens —
-     this silently fell back to unstyled inherited color.) */
-  color: var(--ty-color-danger);
-  background-color: var(--ty-bg-danger-soft);
-}
-
+color: var(--ty-color-danger);
+background-color: var(--ty-bg-danger-soft);
+}
 .stub-arrow {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1rem;
-  height: 1rem;
-  color: var(--date-picker-accent, var(--ty-color-neutral-soft));
-}
-
+display: flex;
+align-items: center;
+justify-content: center;
+width: 1rem;
+height: 1rem;
+color: var(--date-picker-accent, var(--ty-color-neutral-soft));
+}
 .date-picker-stub:hover .stub-arrow {
-  color: var(--date-picker-accent-bold, var(--ty-color-neutral));
+color: var(--date-picker-accent-bold, var(--ty-color-neutral));
 }
-
 .date-picker-stub:focus .stub-arrow,
 .date-picker-stub.open .stub-arrow {
-  color: var(--date-picker-accent-bold, var(--ty-date-picker-border-focus));
+color: var(--date-picker-accent-bold, var(--ty-date-picker-border-focus));
 }
-
-/* Calendar dialog (showModal positioning system) */
 .calendar-dialog {
-  position: fixed;
-  flex-direction: column;
-  max-width: 90vw;
-  margin: 0;
-  padding: 0;
-  border: none;
-  background: transparent;
-  box-sizing: border-box;
-  padding: var(--calendar-padding, 8px);
-
-  opacity: 0;
-  /* Entrance motion uses the individual scale/translate properties so it
-     composes with the collision-shift transform below (they apply first). */
-  scale: 0.96;
-  translate: 0 -6px;
-  transform-origin: top center;
-  transition:
-    opacity var(--ty-popup-duration, 180ms) var(--ty-popup-ease, cubic-bezier(0.34, 1.56, 0.64, 1)),
-    scale var(--ty-popup-duration, 180ms) var(--ty-popup-ease, cubic-bezier(0.34, 1.56, 0.64, 1)),
-    translate var(--ty-popup-duration, 180ms) var(--ty-popup-ease, cubic-bezier(0.34, 1.56, 0.64, 1));
-
-  transform: translate(var(--calendar-offset-x, 0px), var(--calendar-offset-y, 0px));
-  top: -1000px;
-  left: -1000px;
-}
-
+position: fixed;
+flex-direction: column;
+max-width: 90vw;
+margin: 0;
+padding: 0;
+border: none;
+background: transparent;
+box-sizing: border-box;
+padding: var(--calendar-padding, 8px);
+opacity: 0;
+scale: 0.96;
+translate: 0 -6px;
+transform-origin: top center;
+transition:
+opacity var(--ty-popup-duration, 180ms) var(--ty-popup-ease, cubic-bezier(0.34, 1.56, 0.64, 1)),
+scale var(--ty-popup-duration, 180ms) var(--ty-popup-ease, cubic-bezier(0.34, 1.56, 0.64, 1)),
+translate var(--ty-popup-duration, 180ms) var(--ty-popup-ease, cubic-bezier(0.34, 1.56, 0.64, 1));
+transform: translate(var(--calendar-offset-x, 0px), var(--calendar-offset-y, 0px));
+top: -1000px;
+left: -1000px;
+}
 .calendar-dialog.position-below {
-  left: var(--calendar-x);
-  top: var(--calendar-y);
+left: var(--calendar-x);
+top: var(--calendar-y);
 }
-
 .calendar-dialog.position-above {
-  left: var(--calendar-x);
-  bottom: var(--calendar-y);
-  top: auto;
-  flex-direction: column-reverse;
-  translate: 0 6px;
-  transform-origin: bottom center;
-}
-
+left: var(--calendar-x);
+bottom: var(--calendar-y);
+top: auto;
+flex-direction: column-reverse;
+translate: 0 6px;
+transform-origin: bottom center;
+}
 .calendar-dialog.open {
-  opacity: 1;
-  scale: 1;
-  translate: 0 0;
+opacity: 1;
+scale: 1;
+translate: 0 0;
 }
-
-/* First-frame "from" values — see select-base.ts: transitions can't start on
-   an element that was display:none last frame; @starting-style fixes that. */
 @starting-style {
-  .calendar-dialog.open {
-    opacity: 0;
-    scale: 0.96;
-    translate: 0 -6px;
-  }
-
-  .calendar-dialog.open.position-above {
-    translate: 0 6px;
-  }
-}
-
+.calendar-dialog.open {
+opacity: 0;
+scale: 0.96;
+translate: 0 -6px;
+}
+.calendar-dialog.open.position-above {
+translate: 0 6px;
+}
+}
 .calendar-dialog::backdrop {
-  background: transparent
+background: transparent
 }
-
 .calendar-content {
-  background-color: var(--ty-calendar-surface-bg);
-  border: 1px solid var(--ty-calendar-surface-border);
-  border-radius: var(--ty-calendar-surface-radius);
-  box-shadow: var(--ty-calendar-surface-shadow);
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-/* Native input is invisible — used only to trigger the OS picker */
+background-color: var(--ty-calendar-surface-bg);
+border: 1px solid var(--ty-calendar-surface-border);
+border-radius: var(--ty-calendar-surface-radius);
+box-shadow: var(--ty-calendar-surface-shadow);
+overflow: hidden;
+display: flex;
+flex-direction: column;
+align-items: center;
+}
 .native-date-input {
-  position: absolute;
-  inset: 0;
-  opacity: 0;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  border: none;
-  cursor: pointer;
-  z-index: 1;
-}
-
+position: absolute;
+inset: 0;
+opacity: 0;
+width: 100%;
+height: 100%;
+margin: 0;
+padding: 0;
+border: none;
+cursor: pointer;
+z-index: 1;
+}
 .native-date-input::-webkit-calendar-picker-indicator {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  cursor: pointer;
-}
-
+position: absolute;
+inset: 0;
+width: 100%;
+height: 100%;
+margin: 0;
+padding: 0;
+cursor: pointer;
+}
 .time-section {
-  display: flex;
-  min-height: 2.5rem;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  padding: 0.5rem 1rem;
-  border-top: 1px solid var(--ty-calendar-time-border);
-  background-color: var(--ty-calendar-time-bg);
-  width: 100%;
-  box-sizing: border-box;
-  position: relative;
-}
-
+display: flex;
+min-height: 2.5rem;
+align-items: center;
+justify-content: center;
+gap: 0.5rem;
+padding: 0.5rem 1rem;
+border-top: 1px solid var(--ty-calendar-time-border);
+background-color: var(--ty-calendar-time-bg);
+width: 100%;
+box-sizing: border-box;
+position: relative;
+}
 .time-label {
-  font-size: var(--ty-font-sm);
-  font-weight: 500;
-  color: var(--ty-calendar-time-label-color);
-  flex-shrink: 0;
+font-size: var(--ty-font-sm);
+font-weight: 500;
+color: var(--ty-calendar-time-label-color);
+flex-shrink: 0;
 }
-
 .time-input {
-  width: 3.5rem;
-  border: 1px solid var(--ty-input-border);
-  border-radius: var(--ty-radius-sm);
-  background: var(--ty-input-bg);
-  color: var(--ty-calendar-time-input-color);
-  font-family: inherit;
-  font-size: var(--ty-font-sm);
-  font-variant-numeric: tabular-nums;
-  text-align: center;
-  padding: 0.25rem 0.375rem;
-  outline: none;
-  transition: var(--ty-transition-all);
-}
-
+width: 3.5rem;
+border: 1px solid var(--ty-input-border);
+border-radius: var(--ty-radius-sm);
+background: var(--ty-input-bg);
+color: var(--ty-calendar-time-input-color);
+font-family: inherit;
+font-size: var(--ty-font-sm);
+font-variant-numeric: tabular-nums;
+text-align: center;
+padding: 0.25rem 0.375rem;
+outline: none;
+transition: var(--ty-transition-all);
+}
 .time-input:focus {
-  border-color: var(--ty-input-border-focus);
-  box-shadow: 0 0 0 3px var(--ty-input-shadow-focus);
+border-color: var(--ty-input-border-focus);
+box-shadow: 0 0 0 3px var(--ty-input-shadow-focus);
 }
-
 .time-input::placeholder {
-  color: var(--ty-calendar-time-placeholder-color);
+color: var(--ty-calendar-time-placeholder-color);
 }
-
 .time-icon {
-  display: flex;
-  align-items: center;
-  color: var(--ty-calendar-time-icon-color);
-  width: 1rem;
-  height: 1rem;
-  flex-shrink: 0;
+display: flex;
+align-items: center;
+color: var(--ty-calendar-time-icon-color);
+width: 1rem;
+height: 1rem;
+flex-shrink: 0;
 }
 `;

package/lib/styles/field-size.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 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";