tyrell-components 1.0.0-RC7 → 1.0.0-RC9

package/lib/styles/checkbox.d.ts

@@ -5,5 +5,5 @@
  * to be inline-flex so the checkbox sizes to its visual instead of
  * inheriting `display: block; width: 100%` from input's :host rule.
  */
-export declare const checkboxStyles = "\n\n:host {\n  display: block;\n  font-family: var(--ty-font-sans);\n  width: 100%;\n}\n\n:host([size=\"xl\"]) {\n  font-size: 20px;\n}\n\n\n:host([size=\"xs\"]) {\n  font-size: 12px;\n}\n\n\n:host([size=\"sm\"]) {\n  font-size: 14px;\n}\n\n:host([size=\"lg\"]) {\n  font-size: 18px;\n}\n\n.input-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n/* ===== LABEL STYLING ===== */\n\n.input-label {\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-medium);\n  color: var(--ty-label-color);\n  margin-bottom: 6px;\n  padding-left: 12px;\n  display: flex;\n  align-items: center;\n}\n\n/* Required indicator - using SVG icon */\n.required-icon {\n  display: inline-flex;\n  align-items: center;\n  color: var(--ty-color-danger);\n  width: 12px;\n  height: 12px;\n  margin-left: 4px;\n  vertical-align: middle;\n}\n\n.required-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* ===== INPUT WRAPPER WITH SLOTS ===== */\n\n.input-wrapper {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem; /* No gap by default */\n  width: 100%;\n  box-sizing: border-box;\n  border: 1px solid var(--input-border, var(--ty-input-border));\n  border-radius: var(--ty-radius-base);\n  background: var(--input-bg, var(--input-bg, var(--ty-input-bg)));\n  transition: all 0.15s ease-in-out;\n  \n  /* Default size (md) */\n  min-height: 40px;\n  padding: 0 12px;\n}\n\n/* Wrapper states */\n.input-wrapper:hover:not(.disabled) {\n  border-color: var(--input-border-hover, var(--ty-input-border-hover));\n}\n\n.input-wrapper.focused {\n  border-color: var(--input-border-focus, var(--ty-input-border-focus));\n  box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n.input-wrapper.disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n  background: var(--input-disabled-bg, var(--ty-input-disabled-bg));\n  border-color: var(--input-disabled-border, var(--ty-input-disabled-border));\n}\n\n/* ===== SLOT STYLING ===== */\n\n/* Style slotted content directly (no wrappers needed) */\n::slotted([slot=\"start\"]),\n::slotted([slot=\"end\"]) {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  color: var(--ty-color-text-soft);\n}\n\n/* Icon sizing for slotted icons */\n::slotted(ty-icon) {\n  width: 1em;\n  height: 1em;\n  flex-shrink: 0;\n}\n\n/* ===== ERROR MESSAGE STYLING ===== */\n\n.error-message {\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  letter-spacing: var(--ty-tracking-xs);\n  color: var(--ty-color-danger);\n  margin-top: 4px;\n  padding-left: 12px;\n}\n\n/* Error state for wrapper */\n.input-wrapper.error {\n  border-color: var(--ty-color-danger);\n  background: var(--ty-bg-danger-soft);\n}\n\n.input-wrapper.error.focused {\n  border-color: var(--ty-color-danger-mild);\n  box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n/* ===== INPUT BASE STYLING ===== */\n\ninput {\n  /* Reset and base styles \u2014 Linear-paired typography */\n  flex: 1;\n  min-width: 0;\n  box-sizing: border-box;\n  border: none;\n  outline: none;\n  background: transparent;\n  color: var(--input-color, var(--ty-input-color));\n  font-family: inherit;\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-normal);\n  padding: 0;\n  margin: 0;\n}\n\n/* Remove number input spinner arrows */\ninput[type=\"number\"]::-webkit-outer-spin-button,\ninput[type=\"number\"]::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\ninput[type=\"number\"] {\n  -moz-appearance: textfield;\n}\n\n/* Disabled state */\ninput:disabled {\n  cursor: not-allowed;\n  color: var(--input-disabled-color, var(--ty-input-disabled-color));\n}\n\n/* Placeholder styling */\ninput::placeholder {\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n  font-weight: 400;\n}\n\n/* ===== SIZE MODIFIERS ===== */\n\n/* Extra Small */\n.input-wrapper.xs {\n  min-height: 32px;\n  padding: 0 8px;\n  border-radius: var(--ty-input-radius-xs, var(--ty-radius-base));\n}\n\n.input-wrapper.xs input {\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  letter-spacing: var(--ty-tracking-xs);\n}\n\n/* Small */\n.input-wrapper.sm {\n  min-height: 36px;\n  padding: 0 10px;\n  border-radius: var(--ty-input-radius-sm, var(--ty-radius-base));\n}\n\n.input-wrapper.sm input {\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n}\n\n/* Medium (default) */\n.input-wrapper.md {\n  min-height: 40px;\n  padding: 0 12px;\n  border-radius: var(--ty-input-radius-md, var(--ty-radius-base));\n}\n\n.input-wrapper.md input {\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n}\n\n/* Large */\n.input-wrapper.lg {\n  min-height: 44px;\n  padding: 0 14px;\n  border-radius: var(--ty-input-radius-lg, var(--ty-radius-base));\n}\n\n.input-wrapper.lg input {\n  font-size: var(--ty-font-base);\n  line-height: var(--ty-leading-base);\n  letter-spacing: var(--ty-tracking-base);\n}\n\n/* Extra Large */\n.input-wrapper.xl {\n  min-height: 48px;\n  padding: 0 16px;\n  border-radius: var(--ty-input-radius-xl, var(--ty-radius-base));\n}\n\n.input-wrapper.xl input {\n  font-size: var(--ty-font-lg);\n  line-height: var(--ty-leading-lg);\n  letter-spacing: var(--ty-tracking-lg);\n}\n\n/* ===== SEMANTIC FLAVOR MODIFIERS ===== */\n\n/* Primary */\n.input-wrapper.primary {\n  border-color: var(--ty-input-primary-border, var(--ty-color-primary));\n}\n\n.input-wrapper.primary:hover:not(.disabled) {\n  border-color: var(--ty-color-primary-mild);\n}\n\n.input-wrapper.primary.focused {\n  border-color: var(--ty-color-primary-mild);\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n/* Secondary */\n.input-wrapper.secondary {\n  border-color: var(--ty-input-secondary-border, var(--ty-color-secondary));\n}\n\n.input-wrapper.secondary.focused {\n  border-color: var(--ty-color-secondary-mild);\n  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);\n}\n\n/* Success */\n.input-wrapper.success {\n  border-color: var(--ty-input-success-border);\n}\n\n.input-wrapper.success:hover:not(.disabled) {\n  border-color: var(--ty-color-success-mild);\n}\n\n.input-wrapper.success.focused {\n  border-color: var(--ty-color-success-mild);\n  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);\n}\n\n/* Danger */\n.input-wrapper.danger {\n  border-color: var(--ty-input-danger-border);\n}\n\n.input-wrapper.danger:hover:not(.disabled) {\n  border-color: var(--ty-color-danger-mild);\n}\n\n.input-wrapper.danger.focused {\n  border-color: var(--ty-color-danger-mild);\n  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);\n}\n\n/* Warning */\n.input-wrapper.warning {\n  border-color: var(--ty-input-warning-border);\n}\n\n.input-wrapper.warning:hover:not(.disabled) {\n  border-color: var(--ty-color-warning-mild);\n}\n\n.input-wrapper.warning.focused {\n  border-color: var(--ty-color-warning-mild);\n  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);\n}\n\n/* Neutral (default) */\n.input-wrapper.neutral.focused {\n  border-color: var(--input-border-focus, var(--ty-input-border-focus));\n  box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n/* ===== ACCESSIBILITY ENHANCEMENTS ===== */\n\ninput:focus-visible {\n  outline: none;\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: high) {\n  .input-wrapper {\n    border-width: 2px;\n  }\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n  .input-wrapper {\n    transition: none;\n  }\n}\n\n/* ===== RESPONSIVE BEHAVIOR ===== */\n\n@media (max-width: 640px) {\n  .input-wrapper.lg {\n    min-height: 40px;\n    padding: 0 12px;\n  }\n\n  .input-wrapper.lg input {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n  }\n\n  .input-wrapper.xl {\n    min-height: 44px;\n    padding: 0 14px;\n  }\n\n  .input-wrapper.xl input {\n    font-size: var(--ty-font-base);\n    line-height: var(--ty-leading-base);\n    letter-spacing: var(--ty-tracking-base);\n  }\n}\n\n@media (max-width: 480px) {\n  .input-wrapper.xl {\n    min-height: 40px;\n    padding: 0 12px;\n  }\n\n  .input-wrapper.xl input {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n  }\n}\n\n/* ===== CHECKBOX STYLING ===== */\n\n.checkbox-container {\n  display: inline-flex;\n  align-items: center;\n  outline: none;\n  transition: all 0.15s ease-in-out;\n  user-select: none;\n  cursor: pointer;\n\n  /* Default size (md) - matching input sizes */\n  border-radius: 6px;\n  gap: var(--ty-spacing-1);\n  color: var(--ty-text-faint);\n}\n\n.checkbox-container[aria-checked=\"true\"] {\n  color: var(--ty-text);\n}\n\n/* Ensure slotted label content inherits the color from container */\n.checkbox-container ::slotted(*) {\n  color: inherit;\n  transition: color 0.15s ease-in-out;\n}\n\n.checkbox-container label {\n  cursor: pointer;\n}\n\n.checkbox-container label {\n  font-size: var(--ty-font-sm);\n}\n\n.checkbox-container.sm label {\n  font-size: var(--ty-font-xs);\n}\n\n.checkbox-container.lg label {\n  font-size: var(--ty-font-base);\n}\n\n.checkbox-container.xl label {\n  font-size: var(--ty-font-lg);\n}\n\n/* Checkbox input container - different layout for checkboxes */\n.input-container.checkbox-layout {\n  flex-direction: row;\n  align-items: center;\n  gap: 12px;\n  width: auto;\n  /* Don't force full width for checkboxes */\n}\n\n.input-container.checkbox-layout .input-label {\n  margin-bottom: 0;\n  padding-left: 0;\n  order: 2;\n  cursor: pointer;\n  flex: 1;\n}\n\n.input-container.checkbox-layout .checkbox-container {\n  order: 1;\n  flex-shrink: 0;\n}\n\n/* Error message positioning for checkboxes */\n.input-container.checkbox-layout .error-message {\n  padding-left: 0;\n  margin-left: 52px;\n  /* Align with label text */\n}\n\n.checkbox-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: inherit;\n  transition: color 0.15s ease-in-out;\n  pointer-events: none;\n  /* Let the container handle the click */\n}\n\n.checkbox-container svg {\n  width: 24px;\n  height: 24px;\n}\n\n/* ===== CHECKBOX SIZE MODIFIERS ===== */\n\n.checkbox-container.xs svg {\n  width: 16px;\n  height: 16px;\n}\n\n/* Adjust error message margin for XS */\n.input-container.checkbox-layout .checkbox-container.xs~.error-message {\n  margin-left: 44px;\n}\n\n\n.checkbox-container.sm svg {\n  width: 20px;\n  height: 20px;\n}\n\n/* Adjust error message margin for SM */\n.input-container.checkbox-layout .checkbox-container.sm~.error-message {\n  margin-left: 48px;\n}\n\n\n.checkbox-container.md svg {\n  width: 24px;\n  height: 24px;\n}\n\n\n.checkbox-container.lg svg {\n  width: 28px;\n  height: 28px;\n}\n\n.checkbox-container.xl svg {\n  width: 32px;\n  height: 32px;\n}\n\n\n.checkbox-container.xl svg {\n  font-size: 20px;\n}\n\n/* Adjust error message margin for LG */\n.input-container.checkbox-layout .checkbox-container.lg~.error-message {\n  margin-left: 56px;\n}\n\n\n/* Adjust error message margin for XL */\n.input-container.checkbox-layout .checkbox-container.xl~.error-message {\n  margin-left: 60px;\n  /* 48px + 12px gap */\n}\n\n/* ===== CHECKBOX SEMANTIC FLAVORS ===== */\n\n.checkbox-container.primary {\n  color: var(--ty-color-primary-soft);\n}\n\n\n.checkbox-container.primary[aria-checked=\"true\"] {\n  color: var(--ty-color-primary);\n}\n\n.checkbox-container.secondary {\n  color: var(--ty-color-secondary-soft);\n}\n\n\n.checkbox-container.secondary[aria-checked=\"true\"] {\n  color: var(--ty-color-secondary);\n}\n\n.checkbox-container.success {\n  color: var(--ty-color-success-soft);\n}\n\n\n.checkbox-container.success[aria-checked=\"true\"] {\n  color: var(--ty-color-success);\n}\n\n.checkbox-container.danger {\n  color: var(--ty-color-danger-soft);\n}\n\n.checkbox-container.danger[aria-checked=\"true\"] {\n  color: var(--ty-color-danger);\n}\n\n.checkbox-container.warning {\n  color: var(--ty-color-warning-soft);\n}\n\n.checkbox-container.warning[aria-checked=\"true\"] {\n  color: var(--ty-color-warning);\n}\n\n\n/* Neutral */\n.checkbox-container.neutral {\n  color: var(--ty-color-neutral-soft);\n}\n\n.checkbox-container.neutral[aria-checked=\"true\"] {\n  color: var(--ty-color-neutral);\n}\n\n/* Disabled state */\n.checkbox-container.disabled {\n  pointer-events: none;\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.checkbox-container.disabled .checkbox-icon {\n  color: var(--ty-color-neutral-faint);\n}\n\n/* Error state */\n.checkbox-container.error .checkbox-icon {\n  color: var(--ty-color-danger);\n}\n\n.checkbox-container.error:focus {\n  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);\n}\n\n/* Required state */\n.checkbox-container.required .checkbox-icon {\n  /* Could add specific styling for required checkboxes */\n}\n\n/* ===== RESPONSIVE CHECKBOX BEHAVIOR ===== */\n\n@container (max-width: 480px) {\n  .checkbox-container.lg {\n    width: 40px;\n    height: 40px;\n  }\n\n  .checkbox-container.lg svg {\n    width: 20px;\n    height: 20px;\n  }\n\n  .checkbox-container.xl {\n    width: 44px;\n    height: 44px;\n  }\n\n  .checkbox-container.xl svg {\n    width: 22px;\n    height: 22px;\n  }\n}\n\n@container (max-width: 320px) {\n  .checkbox-container.xl {\n    width: 40px;\n    height: 40px;\n  }\n\n  .checkbox-container.xl svg {\n    width: 20px;\n    height: 20px;\n  }\n}\n\n/* Fallback for browsers without container query support */\n@media (max-width: 640px) {\n  .checkbox-container.lg {\n    width: 40px;\n    height: 40px;\n  }\n\n  .checkbox-container.lg svg {\n    width: 20px;\n    height: 20px;\n  }\n\n  .checkbox-container.xl {\n    width: 44px;\n    height: 44px;\n  }\n\n  .checkbox-container.xl svg {\n    width: 22px;\n    height: 22px;\n  }\n}\n\n@media (max-width: 480px) {\n  .checkbox-container.xl {\n    width: 40px;\n    height: 40px;\n  }\n\n  .checkbox-container.xl svg {\n    width: 20px;\n    height: 20px;\n  }\n}\n\n\n/* Override input's :host to be inline (sized to its visual) */\n:host {\n  display: inline-flex;\n  width: auto;\n  vertical-align: middle;\n}\n";
+export declare const checkboxStyles = "\n\n:host {\n  display: block;\n  font-family: var(--ty-font-sans);\n  width: 100%;\n}\n\n:host([size=\"xl\"]) {\n  font-size: 20px;\n}\n\n\n:host([size=\"xs\"]) {\n  font-size: 12px;\n}\n\n\n:host([size=\"sm\"]) {\n  font-size: 14px;\n}\n\n:host([size=\"lg\"]) {\n  font-size: 18px;\n}\n\n.input-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n/* ===== LABEL STYLING ===== */\n\n.ty-field-label {\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-medium);\n  color: var(--ty-label-color);\n  margin-bottom: 6px;\n  padding-left: 12px;\n  display: flex;\n  align-items: center;\n}\n\n/* Required indicator - using SVG icon */\n.required-icon {\n  display: inline-flex;\n  align-items: center;\n  color: var(--ty-color-danger);\n  width: 12px;\n  height: 12px;\n  margin-left: 4px;\n  vertical-align: middle;\n}\n\n.required-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* ===== INPUT WRAPPER WITH SLOTS ===== */\n\n.input-wrapper {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem; /* No gap by default */\n  width: 100%;\n  box-sizing: border-box;\n  border: 1px solid var(--input-border, var(--ty-input-border));\n  border-radius: var(--ty-radius-base);\n  background: var(--input-bg, var(--input-bg, var(--ty-input-bg)));\n  transition: all 0.15s ease-in-out;\n  \n  /* Default size (md) */\n  min-height: 40px;\n  padding: 0 12px;\n}\n\n/* Wrapper states */\n.input-wrapper:hover:not(.disabled) {\n  border-color: var(--input-border-hover, var(--ty-input-border-hover));\n}\n\n.input-wrapper.focused {\n  border-color: var(--input-border-focus, var(--ty-input-border-focus));\n  box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n.input-wrapper.disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n  background: var(--input-disabled-bg, var(--ty-input-disabled-bg));\n  border-color: var(--input-disabled-border, var(--ty-input-disabled-border));\n}\n\n/* ===== SLOT STYLING ===== */\n\n/* Style slotted content directly (no wrappers needed) */\n::slotted([slot=\"start\"]),\n::slotted([slot=\"end\"]) {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  color: var(--ty-color-text-soft);\n}\n\n/* Icon sizing for slotted icons */\n::slotted(ty-icon) {\n  width: 1em;\n  height: 1em;\n  flex-shrink: 0;\n}\n\n/* ===== ERROR MESSAGE STYLING ===== */\n\n.error-message {\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  letter-spacing: var(--ty-tracking-xs);\n  color: var(--ty-color-danger);\n  margin-top: 4px;\n  padding-left: 12px;\n}\n\n/* Error state for wrapper */\n.input-wrapper.error {\n  border-color: var(--ty-color-danger);\n  background: var(--ty-bg-danger-soft);\n}\n\n.input-wrapper.error.focused {\n  border-color: var(--ty-color-danger-mild);\n  box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n/* ===== INPUT BASE STYLING ===== */\n\ninput {\n  /* Reset and base styles \u2014 Linear-paired typography */\n  flex: 1;\n  min-width: 0;\n  box-sizing: border-box;\n  border: none;\n  outline: none;\n  background: transparent;\n  color: var(--input-color, var(--ty-input-color));\n  font-family: inherit;\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-normal);\n  padding: 0;\n  margin: 0;\n}\n\n/* Remove number input spinner arrows */\ninput[type=\"number\"]::-webkit-outer-spin-button,\ninput[type=\"number\"]::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\ninput[type=\"number\"] {\n  -moz-appearance: textfield;\n}\n\n/* Disabled state */\ninput:disabled {\n  cursor: not-allowed;\n  color: var(--input-disabled-color, var(--ty-input-disabled-color));\n}\n\n/* Placeholder styling */\ninput::placeholder {\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n  font-weight: 400;\n}\n\n/* ===== SIZE MODIFIERS ===== */\n\n/* Extra Small */\n.input-wrapper.xs {\n  min-height: 32px;\n  padding: 0 8px;\n  border-radius: var(--ty-input-radius-xs, var(--ty-radius-base));\n}\n\n.input-wrapper.xs input {\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  letter-spacing: var(--ty-tracking-xs);\n}\n\n/* Small */\n.input-wrapper.sm {\n  min-height: 36px;\n  padding: 0 10px;\n  border-radius: var(--ty-input-radius-sm, var(--ty-radius-base));\n}\n\n.input-wrapper.sm input {\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n}\n\n/* Medium (default) */\n.input-wrapper.md {\n  min-height: 40px;\n  padding: 0 12px;\n  border-radius: var(--ty-input-radius-md, var(--ty-radius-base));\n}\n\n.input-wrapper.md input {\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n}\n\n/* Large */\n.input-wrapper.lg {\n  min-height: 44px;\n  padding: 0 14px;\n  border-radius: var(--ty-input-radius-lg, var(--ty-radius-base));\n}\n\n.input-wrapper.lg input {\n  font-size: var(--ty-font-base);\n  line-height: var(--ty-leading-base);\n  letter-spacing: var(--ty-tracking-base);\n}\n\n/* Extra Large */\n.input-wrapper.xl {\n  min-height: 48px;\n  padding: 0 16px;\n  border-radius: var(--ty-input-radius-xl, var(--ty-radius-base));\n}\n\n.input-wrapper.xl input {\n  font-size: var(--ty-font-lg);\n  line-height: var(--ty-leading-lg);\n  letter-spacing: var(--ty-tracking-lg);\n}\n\n/* ===== SEMANTIC FLAVOR MODIFIERS ===== */\n\n/* Primary */\n.input-wrapper.primary {\n  border-color: var(--ty-input-primary-border, var(--ty-color-primary));\n}\n\n.input-wrapper.primary:hover:not(.disabled) {\n  border-color: var(--ty-color-primary-mild);\n}\n\n.input-wrapper.primary.focused {\n  border-color: var(--ty-color-primary-mild);\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n/* Secondary */\n.input-wrapper.secondary {\n  border-color: var(--ty-input-secondary-border, var(--ty-color-secondary));\n}\n\n.input-wrapper.secondary.focused {\n  border-color: var(--ty-color-secondary-mild);\n  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);\n}\n\n/* Success */\n.input-wrapper.success {\n  border-color: var(--ty-input-success-border);\n}\n\n.input-wrapper.success:hover:not(.disabled) {\n  border-color: var(--ty-color-success-mild);\n}\n\n.input-wrapper.success.focused {\n  border-color: var(--ty-color-success-mild);\n  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);\n}\n\n/* Danger */\n.input-wrapper.danger {\n  border-color: var(--ty-input-danger-border);\n}\n\n.input-wrapper.danger:hover:not(.disabled) {\n  border-color: var(--ty-color-danger-mild);\n}\n\n.input-wrapper.danger.focused {\n  border-color: var(--ty-color-danger-mild);\n  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);\n}\n\n/* Warning */\n.input-wrapper.warning {\n  border-color: var(--ty-input-warning-border);\n}\n\n.input-wrapper.warning:hover:not(.disabled) {\n  border-color: var(--ty-color-warning-mild);\n}\n\n.input-wrapper.warning.focused {\n  border-color: var(--ty-color-warning-mild);\n  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);\n}\n\n/* Neutral (default) */\n.input-wrapper.neutral.focused {\n  border-color: var(--input-border-focus, var(--ty-input-border-focus));\n  box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n/* ===== ACCESSIBILITY ENHANCEMENTS ===== */\n\ninput:focus-visible {\n  outline: none;\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: high) {\n  .input-wrapper {\n    border-width: 2px;\n  }\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n  .input-wrapper {\n    transition: none;\n  }\n}\n\n/* ===== RESPONSIVE BEHAVIOR ===== */\n\n@media (max-width: 640px) {\n  .input-wrapper.lg {\n    min-height: 40px;\n    padding: 0 12px;\n  }\n\n  .input-wrapper.lg input {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n  }\n\n  .input-wrapper.xl {\n    min-height: 44px;\n    padding: 0 14px;\n  }\n\n  .input-wrapper.xl input {\n    font-size: var(--ty-font-base);\n    line-height: var(--ty-leading-base);\n    letter-spacing: var(--ty-tracking-base);\n  }\n}\n\n@media (max-width: 480px) {\n  .input-wrapper.xl {\n    min-height: 40px;\n    padding: 0 12px;\n  }\n\n  .input-wrapper.xl input {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n  }\n}\n\n/* ===== CHECKBOX STYLING ===== */\n\n.checkbox-container {\n  display: inline-flex;\n  align-items: center;\n  outline: none;\n  transition: all 0.15s ease-in-out;\n  user-select: none;\n  cursor: pointer;\n\n  /* Default size (md) - matching input sizes */\n  border-radius: 6px;\n  gap: var(--ty-spacing-1);\n  color: var(--ty-text-faint);\n}\n\n.checkbox-container[aria-checked=\"true\"] {\n  color: var(--ty-text);\n}\n\n/* Ensure slotted label content inherits the color from container */\n.checkbox-container ::slotted(*) {\n  color: inherit;\n  transition: color 0.15s ease-in-out;\n}\n\n.checkbox-container label {\n  cursor: pointer;\n}\n\n.checkbox-container label {\n  font-size: var(--ty-font-sm);\n}\n\n.checkbox-container.sm label {\n  font-size: var(--ty-font-xs);\n}\n\n.checkbox-container.lg label {\n  font-size: var(--ty-font-base);\n}\n\n.checkbox-container.xl label {\n  font-size: var(--ty-font-lg);\n}\n\n/* Checkbox input container - different layout for checkboxes */\n.input-container.checkbox-layout {\n  flex-direction: row;\n  align-items: center;\n  gap: 12px;\n  width: auto;\n  /* Don't force full width for checkboxes */\n}\n\n.input-container.checkbox-layout .ty-field-label {\n  margin-bottom: 0;\n  padding-left: 0;\n  order: 2;\n  cursor: pointer;\n  flex: 1;\n}\n\n.input-container.checkbox-layout .checkbox-container {\n  order: 1;\n  flex-shrink: 0;\n}\n\n/* Error message positioning for checkboxes */\n.input-container.checkbox-layout .error-message {\n  padding-left: 0;\n  margin-left: 52px;\n  /* Align with label text */\n}\n\n.checkbox-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: inherit;\n  transition: color 0.15s ease-in-out;\n  pointer-events: none;\n  /* Let the container handle the click */\n}\n\n.checkbox-container svg {\n  width: 24px;\n  height: 24px;\n}\n\n/* ===== CHECKBOX SIZE MODIFIERS ===== */\n\n.checkbox-container.xs svg {\n  width: 16px;\n  height: 16px;\n}\n\n/* Adjust error message margin for XS */\n.input-container.checkbox-layout .checkbox-container.xs~.error-message {\n  margin-left: 44px;\n}\n\n\n.checkbox-container.sm svg {\n  width: 20px;\n  height: 20px;\n}\n\n/* Adjust error message margin for SM */\n.input-container.checkbox-layout .checkbox-container.sm~.error-message {\n  margin-left: 48px;\n}\n\n\n.checkbox-container.md svg {\n  width: 24px;\n  height: 24px;\n}\n\n\n.checkbox-container.lg svg {\n  width: 28px;\n  height: 28px;\n}\n\n.checkbox-container.xl svg {\n  width: 32px;\n  height: 32px;\n}\n\n\n.checkbox-container.xl svg {\n  font-size: 20px;\n}\n\n/* Adjust error message margin for LG */\n.input-container.checkbox-layout .checkbox-container.lg~.error-message {\n  margin-left: 56px;\n}\n\n\n/* Adjust error message margin for XL */\n.input-container.checkbox-layout .checkbox-container.xl~.error-message {\n  margin-left: 60px;\n  /* 48px + 12px gap */\n}\n\n/* ===== CHECKBOX SEMANTIC FLAVORS ===== */\n\n.checkbox-container.primary {\n  color: var(--ty-color-primary-soft);\n}\n\n\n.checkbox-container.primary[aria-checked=\"true\"] {\n  color: var(--ty-color-primary);\n}\n\n.checkbox-container.secondary {\n  color: var(--ty-color-secondary-soft);\n}\n\n\n.checkbox-container.secondary[aria-checked=\"true\"] {\n  color: var(--ty-color-secondary);\n}\n\n.checkbox-container.success {\n  color: var(--ty-color-success-soft);\n}\n\n\n.checkbox-container.success[aria-checked=\"true\"] {\n  color: var(--ty-color-success);\n}\n\n.checkbox-container.danger {\n  color: var(--ty-color-danger-soft);\n}\n\n.checkbox-container.danger[aria-checked=\"true\"] {\n  color: var(--ty-color-danger);\n}\n\n.checkbox-container.warning {\n  color: var(--ty-color-warning-soft);\n}\n\n.checkbox-container.warning[aria-checked=\"true\"] {\n  color: var(--ty-color-warning);\n}\n\n\n/* Neutral */\n.checkbox-container.neutral {\n  color: var(--ty-color-neutral-soft);\n}\n\n.checkbox-container.neutral[aria-checked=\"true\"] {\n  color: var(--ty-color-neutral);\n}\n\n/* Disabled state */\n.checkbox-container.disabled {\n  pointer-events: none;\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.checkbox-container.disabled .checkbox-icon {\n  color: var(--ty-color-neutral-faint);\n}\n\n/* Error state */\n.checkbox-container.error .checkbox-icon {\n  color: var(--ty-color-danger);\n}\n\n.checkbox-container.error:focus {\n  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);\n}\n\n/* Required state */\n.checkbox-container.required .checkbox-icon {\n  /* Could add specific styling for required checkboxes */\n}\n\n/* ===== RESPONSIVE CHECKBOX BEHAVIOR ===== */\n\n@container (max-width: 480px) {\n  .checkbox-container.lg {\n    width: 40px;\n    height: 40px;\n  }\n\n  .checkbox-container.lg svg {\n    width: 20px;\n    height: 20px;\n  }\n\n  .checkbox-container.xl {\n    width: 44px;\n    height: 44px;\n  }\n\n  .checkbox-container.xl svg {\n    width: 22px;\n    height: 22px;\n  }\n}\n\n@container (max-width: 320px) {\n  .checkbox-container.xl {\n    width: 40px;\n    height: 40px;\n  }\n\n  .checkbox-container.xl svg {\n    width: 20px;\n    height: 20px;\n  }\n}\n\n/* Fallback for browsers without container query support */\n@media (max-width: 640px) {\n  .checkbox-container.lg {\n    width: 40px;\n    height: 40px;\n  }\n\n  .checkbox-container.lg svg {\n    width: 20px;\n    height: 20px;\n  }\n\n  .checkbox-container.xl {\n    width: 44px;\n    height: 44px;\n  }\n\n  .checkbox-container.xl svg {\n    width: 22px;\n    height: 22px;\n  }\n}\n\n@media (max-width: 480px) {\n  .checkbox-container.xl {\n    width: 40px;\n    height: 40px;\n  }\n\n  .checkbox-container.xl svg {\n    width: 20px;\n    height: 20px;\n  }\n}\n\n\n/* Override input's :host to be inline (sized to its visual) */\n:host {\n  display: inline-flex;\n  width: auto;\n  vertical-align: middle;\n}\n";
 //# sourceMappingURL=checkbox.d.ts.map

package/lib/styles/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/styles/checkbox.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,eAAO,MAAM,cAAc,ilcAS1B,CAAC"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/styles/checkbox.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,eAAO,MAAM,cAAc,ulcAS1B,CAAC"}

package/lib/styles/date-picker.d.ts

@@ -2,5 +2,5 @@
  * Date Picker Component Styles
  * PORTED FROM: cljs/ty/components/date_picker.css
  */
-export declare const datePickerStyles = "\n/* Date Picker Component Styles */\n:host {\n  display: block;\n  width: auto;\n  min-width: 200px;\n\n  /* ==========================================================================\n     Theming Tokens \u2014 Date Picker Stub\n     Thin shim over --ty-input-*. Override these to retheme just the date-picker\n     trigger without affecting other inputs.\n     ========================================================================== */\n  --ty-date-picker-bg: var(--ty-input-bg);\n  --ty-date-picker-color: var(--ty-input-color);\n  --ty-date-picker-placeholder: var(--ty-input-placeholder);\n  --ty-date-picker-border: var(--ty-input-border);\n  --ty-date-picker-border-hover: var(--ty-input-border-hover);\n  --ty-date-picker-border-focus: var(--ty-input-border-focus);\n  --ty-date-picker-shadow-focus: var(--ty-input-shadow-focus);\n  --ty-date-picker-disabled-bg: var(--ty-input-disabled-bg);\n  --ty-date-picker-disabled-color: var(--ty-input-disabled-color);\n  --ty-date-picker-radius: var(--ty-radius-md);\n\n  /* ==========================================================================\n     Theming Tokens \u2014 Calendar Popup Surface\n     Shared with ty-calendar / ty-calendar-month theming.\n     ========================================================================== */\n  --ty-calendar-surface-bg: var(--ty-surface-floating);\n  --ty-calendar-surface-border: var(--ty-input-border);\n  --ty-calendar-surface-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.1);\n  --ty-calendar-surface-radius: var(--ty-radius-lg);\n\n  /* ==========================================================================\n     Theming Tokens \u2014 Time Section\n     ========================================================================== */\n  --ty-calendar-time-bg: var(--ty-bg-neutral-faint);\n  --ty-calendar-time-border: var(--ty-input-border);\n  --ty-calendar-time-label-color: var(--ty-color-neutral);\n  --ty-calendar-time-input-color: var(--ty-input-color);\n  --ty-calendar-time-placeholder-color: var(--ty-input-placeholder);\n  --ty-calendar-time-icon-color: var(--ty-color-neutral-soft);\n}\n\n/* Container structure (reuses dropdown patterns) */\n.dropdown-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.dropdown-label {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--ty-label-color);\n  margin-bottom: 6px;\n  line-height: 1.25;\n  padding-left: 12px;\n}\n\n.required-icon {\n  display: inline-flex;\n  align-items: center;\n  color: #ef4444;\n  width: 12px;\n  height: 12px;\n  vertical-align: middle;\n  margin-left: 4px;\n}\n\n.dropdown-wrapper {\n  position: relative;\n  display: block;\n  width: 100%;\n}\n\n/* Start-slot icon (leading content inside the date-picker stub) */\n.date-picker-stub ::slotted([slot=\"start\"]) {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  margin-right: 0.5rem;\n  color: var(--ty-color-text-soft);\n}\n\n.date-picker-stub ::slotted(ty-icon[slot=\"start\"]) {\n  width: 1em;\n  height: 1em;\n}\n\n/* Date picker stub (styled like dropdown) */\n.date-picker-stub {\n  width: 100%;\n  cursor: pointer;\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-items: center;\n  background: var(--ty-date-picker-bg);\n  color: var(--ty-date-picker-color);\n  border: 1px solid var(--ty-date-picker-border);\n  border-radius: var(--ty-date-picker-radius);\n  font-family: var(--ty-font-sans);\n  font-size: var(--ty-font-sm);\n  font-weight: var(--ty-font-normal);\n  line-height: var(--ty-line-height-tight);\n  min-height: var(--ty-size-md);\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n  transition: var(--ty-transition-all), opacity 0.2s ease;\n  outline: none;\n}\n\n.date-picker-stub:hover:not([disabled]):not(.open) {\n  border-color: var(--ty-date-picker-border-hover);\n}\n\n.date-picker-stub[disabled] {\n  background-color: var(--ty-date-picker-disabled-bg);\n  color: var(--ty-date-picker-disabled-color);\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.date-picker-stub:focus,\n.date-picker-stub.open {\n  border-color: var(--ty-date-picker-border-focus);\n  box-shadow: 0 0 0 3px var(--ty-date-picker-shadow-focus);\n}\n\n/* Size variants */\n.date-picker-stub.xs {\n  min-height: var(--ty-size-xs);\n  font-size: var(--ty-font-xs);\n  padding: var(--ty-spacing-1) var(--ty-spacing-2);\n  padding-right: calc(var(--ty-spacing-2) + 0.875rem + var(--ty-spacing-1));\n}\n\n.date-picker-stub.sm {\n  min-height: var(--ty-size-sm);\n  font-size: var(--ty-font-xs);\n  padding: var(--ty-spacing-1) var(--ty-spacing-2);\n  padding-right: calc(var(--ty-spacing-2) + 0.875rem + var(--ty-spacing-1));\n}\n\n.date-picker-stub.lg {\n  min-height: var(--ty-size-lg);\n  font-size: var(--ty-font-base);\n  padding: var(--ty-spacing-2) var(--ty-spacing-4);\n  padding-right: calc(var(--ty-spacing-4) + 1.125rem + var(--ty-spacing-2));\n}\n\n.date-picker-stub.xl {\n  min-height: var(--ty-size-xl);\n  font-size: var(--ty-font-lg);\n  padding: var(--ty-spacing-3) var(--ty-spacing-4);\n  padding-right: calc(var(--ty-spacing-4) + 1.25rem + var(--ty-spacing-3));\n}\n\n/* Flavor variants */\n/* Primary - Main brand focus state */\n.date-picker-stub.primary {\n  border-color: var(--ty-input-primary-border, var(--ty-color-primary));\n}\n\n.date-picker-stub.primary:hover:not([disabled]) {\n  border-color: var(--ty-color-primary-mild);\n}\n\n.date-picker-stub.primary:focus,\n.date-picker-stub.primary.open {\n  border-color: var(--ty-color-primary-mild);\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n/* Secondary - Supporting action focus state */\n.date-picker-stub.secondary {\n  border-color: var(--ty-input-secondary-border, var(--ty-color-secondary));\n}\n\n.date-picker-stub.secondary:hover:not([disabled]) {\n  border-color: var(--ty-color-secondary-mild);\n}\n\n.date-picker-stub.secondary:focus,\n.date-picker-stub.secondary.open {\n  border-color: var(--ty-color-secondary-mild);\n  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);\n}\n\n/* Success - Valid/confirmed input state */\n.date-picker-stub.success {\n  border-color: var(--ty-input-success-border, var(--ty-color-success));\n}\n\n.date-picker-stub.success:hover:not([disabled]) {\n  border-color: var(--ty-color-success-mild);\n}\n\n.date-picker-stub.success:focus,\n.date-picker-stub.success.open {\n  border-color: var(--ty-color-success-mild);\n  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);\n}\n\n/* Danger - Error/invalid input state */\n.date-picker-stub.danger {\n  border-color: var(--ty-input-danger-border, var(--ty-color-danger));\n}\n\n.date-picker-stub.danger:hover:not([disabled]) {\n  border-color: var(--ty-color-danger-mild);\n}\n\n.date-picker-stub.danger:focus,\n.date-picker-stub.danger.open {\n  border-color: var(--ty-color-danger-mild);\n  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);\n}\n\n/* Warning - Caution/attention needed input state */\n.date-picker-stub.warning {\n  border-color: var(--ty-input-warning-border, var(--ty-color-warning));\n}\n\n.date-picker-stub.warning:hover:not([disabled]) {\n  border-color: var(--ty-color-warning-mild);\n}\n\n.date-picker-stub.warning:focus,\n.date-picker-stub.warning.open {\n  border-color: var(--ty-color-warning-mild);\n  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);\n}\n\n/* Text content */\n.stub-text {\n  flex: 1;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  user-select: none;\n  color: inherit;\n  pointer-events: none;\n}\n\n.stub-text.placeholder {\n  color: var(--ty-date-picker-placeholder);\n}\n\n/* Icons */\n.stub-icons {\n  display: flex;\n  align-items: center;\n  gap: var(--ty-spacing-1);\n  position: absolute;\n  right: var(--ty-spacing-3);\n  top: 50%;\n  transform: translateY(-50%);\n  height: 1rem;\n  pointer-events: none;\n  z-index: 2;\n}\n\n.stub-clear {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1rem;\n  height: 1rem;\n  padding: 0;\n  border: none;\n  background: none;\n  color: var(--ty-color-neutral-soft);\n  cursor: pointer;\n  border-radius: var(--ty-radius-sm);\n  transition: all 0.15s ease;\n  pointer-events: auto;\n}\n\n.stub-clear:hover {\n  color: var(--ty-color-negative);\n  background-color: var(--ty-bg-negative-faint);\n}\n\n.stub-arrow {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1rem;\n  height: 1rem;\n  color: var(--ty-color-neutral-soft);\n}\n\n.date-picker-stub:hover .stub-arrow {\n  color: var(--ty-color-neutral);\n}\n\n.date-picker-stub:focus .stub-arrow,\n.date-picker-stub.open .stub-arrow {\n  color: var(--ty-date-picker-border-focus);\n}\n\n/* Calendar dialog (showModal positioning system) */\n.calendar-dialog {\n  position: fixed;\n  flex-direction: column;\n  max-width: 90vw;\n  margin: 0;\n  padding: 0;\n  border: none;\n  background: transparent;\n  box-sizing: border-box;\n  padding: var(--calendar-padding, 8px);\n\n  /* Hidden by default */\n  opacity: 0;\n  transition: opacity 200ms ease;\n\n  transform: translate(var(--calendar-offset-x, 0px), var(--calendar-offset-y, 0px));\n  top: -1000px;\n  left: -1000px;\n}\n\n/* Direction-based positioning with CSS classes */\n.calendar-dialog.position-below {\n  left: var(--calendar-x);\n  top: var(--calendar-y);\n}\n\n.calendar-dialog.position-above {\n  left: var(--calendar-x);\n  bottom: var(--calendar-y);\n  top: auto;\n  flex-direction: column-reverse;\n}\n\n.calendar-dialog.open {\n  opacity: 1;\n}\n\n.calendar-dialog::backdrop {\n  background: transparent\n}\n\n/* Calendar content container */\n.calendar-content {\n  background-color: var(--ty-calendar-surface-bg);\n  border: 1px solid var(--ty-calendar-surface-border);\n  border-radius: var(--ty-calendar-surface-radius);\n  box-shadow: var(--ty-calendar-surface-shadow);\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n/* Native date input for mobile */\n/* Native input is invisible \u2014 used only to trigger the OS picker */\n.native-date-input {\n  position: absolute;\n  inset: 0;\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  border: none;\n  cursor: pointer;\n  z-index: 1;\n}\n\n.native-date-input::-webkit-calendar-picker-indicator {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  cursor: pointer;\n}\n\n/* Time input section */\n.time-section {\n  display: flex;\n  min-height: 2.5rem;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  padding: 0.5rem 1rem;\n  border-top: 1px solid var(--ty-calendar-time-border);\n  background-color: var(--ty-calendar-time-bg);\n  width: 100%;\n  box-sizing: border-box;\n  position: relative;\n}\n\n.time-label {\n  font-size: var(--ty-font-sm);\n  font-weight: 500;\n  color: var(--ty-calendar-time-label-color);\n  flex-shrink: 0;\n}\n\n.time-input {\n  width: 3.5rem;\n  border: none;\n  border-radius: var(--ty-radius-sm);\n  background: transparent;\n  color: var(--ty-calendar-time-input-color);\n  font-family: var(--ty-font-sans);\n  font-size: var(--ty-font-sm);\n  text-align: center;\n  outline: none;\n}\n\n.time-input::placeholder {\n  color: var(--ty-calendar-time-placeholder-color);\n}\n\n.time-icon {\n  display: flex;\n  align-items: center;\n  color: var(--ty-calendar-time-icon-color);\n  width: 1rem;\n  height: 1rem;\n  flex-shrink: 0;\n}\n";
+export declare const datePickerStyles = "\n/* Date Picker Component Styles */\n:host {\n  display: block;\n  width: auto;\n  min-width: 200px;\n\n  /* ==========================================================================\n     Theming Tokens \u2014 Date Picker Stub\n     Thin shim over --ty-input-*. Override these to retheme just the date-picker\n     trigger without affecting other inputs.\n     ========================================================================== */\n  --ty-date-picker-bg: var(--ty-input-bg);\n  --ty-date-picker-color: var(--ty-input-color);\n  --ty-date-picker-placeholder: var(--ty-input-placeholder);\n  --ty-date-picker-border: var(--ty-input-border);\n  --ty-date-picker-border-hover: var(--ty-input-border-hover);\n  --ty-date-picker-border-focus: var(--ty-input-border-focus);\n  --ty-date-picker-shadow-focus: var(--ty-input-shadow-focus);\n  --ty-date-picker-disabled-bg: var(--ty-input-disabled-bg);\n  --ty-date-picker-disabled-color: var(--ty-input-disabled-color);\n  --ty-date-picker-radius: var(--ty-radius-md);\n\n  /* ==========================================================================\n     Theming Tokens \u2014 Calendar Popup Surface\n     Shared with ty-calendar / ty-calendar-month theming.\n     ========================================================================== */\n  --ty-calendar-surface-bg: var(--ty-surface-floating);\n  --ty-calendar-surface-border: var(--ty-input-border);\n  --ty-calendar-surface-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.1);\n  --ty-calendar-surface-radius: var(--ty-radius-lg);\n\n  /* ==========================================================================\n     Theming Tokens \u2014 Time Section\n     ========================================================================== */\n  --ty-calendar-time-bg: var(--ty-bg-neutral-faint);\n  --ty-calendar-time-border: var(--ty-input-border);\n  --ty-calendar-time-label-color: var(--ty-color-neutral);\n  --ty-calendar-time-input-color: var(--ty-input-color);\n  --ty-calendar-time-placeholder-color: var(--ty-input-placeholder);\n  --ty-calendar-time-icon-color: var(--ty-color-neutral-soft);\n}\n\n/* Container structure (reuses dropdown patterns) */\n.dropdown-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.ty-field-label {\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-medium);\n  color: var(--ty-label-color);\n  margin-bottom: 6px;\n  padding-left: 12px;\n  display: flex;\n  align-items: center;\n}\n\n.required-icon {\n  display: inline-flex;\n  align-items: center;\n  color: #ef4444;\n  width: 12px;\n  height: 12px;\n  vertical-align: middle;\n  margin-left: 4px;\n}\n\n.dropdown-wrapper {\n  position: relative;\n  display: block;\n  width: 100%;\n}\n\n/* Start-slot icon (leading content inside the date-picker stub) */\n.date-picker-stub ::slotted([slot=\"start\"]) {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  margin-right: 0.5rem;\n  color: var(--ty-color-text-soft);\n}\n\n.date-picker-stub ::slotted(ty-icon[slot=\"start\"]) {\n  width: 1em;\n  height: 1em;\n}\n\n/* Date picker stub (styled like dropdown) */\n.date-picker-stub {\n  width: 100%;\n  cursor: pointer;\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-items: center;\n  background: var(--ty-date-picker-bg);\n  color: var(--ty-date-picker-color);\n  border: 1px solid var(--ty-date-picker-border);\n  border-radius: var(--ty-date-picker-radius);\n  font-family: var(--ty-font-sans);\n  font-size: var(--ty-font-sm);\n  font-weight: var(--ty-font-normal);\n  line-height: var(--ty-line-height-tight);\n  min-height: var(--ty-size-md);\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n  transition: var(--ty-transition-all), opacity 0.2s ease;\n  outline: none;\n}\n\n.date-picker-stub:hover:not([disabled]):not(.open) {\n  border-color: var(--ty-date-picker-border-hover);\n}\n\n.date-picker-stub[disabled] {\n  background-color: var(--ty-date-picker-disabled-bg);\n  color: var(--ty-date-picker-disabled-color);\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.date-picker-stub:focus,\n.date-picker-stub.open {\n  border-color: var(--ty-date-picker-border-focus);\n  box-shadow: 0 0 0 3px var(--ty-date-picker-shadow-focus);\n}\n\n/* Size variants */\n.date-picker-stub.xs {\n  min-height: var(--ty-size-xs);\n  font-size: var(--ty-font-xs);\n  padding: var(--ty-spacing-1) var(--ty-spacing-2);\n  padding-right: calc(var(--ty-spacing-2) + 0.875rem + var(--ty-spacing-1));\n}\n\n.date-picker-stub.sm {\n  min-height: var(--ty-size-sm);\n  font-size: var(--ty-font-xs);\n  padding: var(--ty-spacing-1) var(--ty-spacing-2);\n  padding-right: calc(var(--ty-spacing-2) + 0.875rem + var(--ty-spacing-1));\n}\n\n.date-picker-stub.lg {\n  min-height: var(--ty-size-lg);\n  font-size: var(--ty-font-base);\n  padding: var(--ty-spacing-2) var(--ty-spacing-4);\n  padding-right: calc(var(--ty-spacing-4) + 1.125rem + var(--ty-spacing-2));\n}\n\n.date-picker-stub.xl {\n  min-height: var(--ty-size-xl);\n  font-size: var(--ty-font-lg);\n  padding: var(--ty-spacing-3) var(--ty-spacing-4);\n  padding-right: calc(var(--ty-spacing-4) + 1.25rem + var(--ty-spacing-3));\n}\n\n/* Flavor variants */\n/* Primary - Main brand focus state */\n.date-picker-stub.primary {\n  border-color: var(--ty-input-primary-border, var(--ty-color-primary));\n}\n\n.date-picker-stub.primary:hover:not([disabled]) {\n  border-color: var(--ty-color-primary-mild);\n}\n\n.date-picker-stub.primary:focus,\n.date-picker-stub.primary.open {\n  border-color: var(--ty-color-primary-mild);\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n/* Secondary - Supporting action focus state */\n.date-picker-stub.secondary {\n  border-color: var(--ty-input-secondary-border, var(--ty-color-secondary));\n}\n\n.date-picker-stub.secondary:hover:not([disabled]) {\n  border-color: var(--ty-color-secondary-mild);\n}\n\n.date-picker-stub.secondary:focus,\n.date-picker-stub.secondary.open {\n  border-color: var(--ty-color-secondary-mild);\n  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);\n}\n\n/* Success - Valid/confirmed input state */\n.date-picker-stub.success {\n  border-color: var(--ty-input-success-border, var(--ty-color-success));\n}\n\n.date-picker-stub.success:hover:not([disabled]) {\n  border-color: var(--ty-color-success-mild);\n}\n\n.date-picker-stub.success:focus,\n.date-picker-stub.success.open {\n  border-color: var(--ty-color-success-mild);\n  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);\n}\n\n/* Danger - Error/invalid input state */\n.date-picker-stub.danger {\n  border-color: var(--ty-input-danger-border, var(--ty-color-danger));\n}\n\n.date-picker-stub.danger:hover:not([disabled]) {\n  border-color: var(--ty-color-danger-mild);\n}\n\n.date-picker-stub.danger:focus,\n.date-picker-stub.danger.open {\n  border-color: var(--ty-color-danger-mild);\n  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);\n}\n\n/* Warning - Caution/attention needed input state */\n.date-picker-stub.warning {\n  border-color: var(--ty-input-warning-border, var(--ty-color-warning));\n}\n\n.date-picker-stub.warning:hover:not([disabled]) {\n  border-color: var(--ty-color-warning-mild);\n}\n\n.date-picker-stub.warning:focus,\n.date-picker-stub.warning.open {\n  border-color: var(--ty-color-warning-mild);\n  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);\n}\n\n/* Text content */\n.stub-text {\n  flex: 1;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  user-select: none;\n  color: inherit;\n  pointer-events: none;\n}\n\n.stub-text.placeholder {\n  color: var(--ty-date-picker-placeholder);\n}\n\n/* Icons */\n.stub-icons {\n  display: flex;\n  align-items: center;\n  gap: var(--ty-spacing-1);\n  position: absolute;\n  right: var(--ty-spacing-3);\n  top: 50%;\n  transform: translateY(-50%);\n  height: 1rem;\n  pointer-events: none;\n  z-index: 2;\n}\n\n.stub-clear {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1rem;\n  height: 1rem;\n  padding: 0;\n  border: none;\n  background: none;\n  color: var(--ty-color-neutral-soft);\n  cursor: pointer;\n  border-radius: var(--ty-radius-sm);\n  transition: all 0.15s ease;\n  pointer-events: auto;\n}\n\n.stub-clear:hover {\n  color: var(--ty-color-negative);\n  background-color: var(--ty-bg-negative-faint);\n}\n\n.stub-arrow {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1rem;\n  height: 1rem;\n  color: var(--ty-color-neutral-soft);\n}\n\n.date-picker-stub:hover .stub-arrow {\n  color: var(--ty-color-neutral);\n}\n\n.date-picker-stub:focus .stub-arrow,\n.date-picker-stub.open .stub-arrow {\n  color: var(--ty-date-picker-border-focus);\n}\n\n/* Calendar dialog (showModal positioning system) */\n.calendar-dialog {\n  position: fixed;\n  flex-direction: column;\n  max-width: 90vw;\n  margin: 0;\n  padding: 0;\n  border: none;\n  background: transparent;\n  box-sizing: border-box;\n  padding: var(--calendar-padding, 8px);\n\n  /* Hidden by default */\n  opacity: 0;\n  transition: opacity 200ms ease;\n\n  transform: translate(var(--calendar-offset-x, 0px), var(--calendar-offset-y, 0px));\n  top: -1000px;\n  left: -1000px;\n}\n\n/* Direction-based positioning with CSS classes */\n.calendar-dialog.position-below {\n  left: var(--calendar-x);\n  top: var(--calendar-y);\n}\n\n.calendar-dialog.position-above {\n  left: var(--calendar-x);\n  bottom: var(--calendar-y);\n  top: auto;\n  flex-direction: column-reverse;\n}\n\n.calendar-dialog.open {\n  opacity: 1;\n}\n\n.calendar-dialog::backdrop {\n  background: transparent\n}\n\n/* Calendar content container */\n.calendar-content {\n  background-color: var(--ty-calendar-surface-bg);\n  border: 1px solid var(--ty-calendar-surface-border);\n  border-radius: var(--ty-calendar-surface-radius);\n  box-shadow: var(--ty-calendar-surface-shadow);\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n/* Native date input for mobile */\n/* Native input is invisible \u2014 used only to trigger the OS picker */\n.native-date-input {\n  position: absolute;\n  inset: 0;\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  border: none;\n  cursor: pointer;\n  z-index: 1;\n}\n\n.native-date-input::-webkit-calendar-picker-indicator {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  cursor: pointer;\n}\n\n/* Time input section */\n.time-section {\n  display: flex;\n  min-height: 2.5rem;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  padding: 0.5rem 1rem;\n  border-top: 1px solid var(--ty-calendar-time-border);\n  background-color: var(--ty-calendar-time-bg);\n  width: 100%;\n  box-sizing: border-box;\n  position: relative;\n}\n\n.time-label {\n  font-size: var(--ty-font-sm);\n  font-weight: 500;\n  color: var(--ty-calendar-time-label-color);\n  flex-shrink: 0;\n}\n\n.time-input {\n  width: 3.5rem;\n  border: none;\n  border-radius: var(--ty-radius-sm);\n  background: transparent;\n  color: var(--ty-calendar-time-input-color);\n  font-family: var(--ty-font-sans);\n  font-size: var(--ty-font-sm);\n  text-align: center;\n  outline: none;\n}\n\n.time-input::placeholder {\n  color: var(--ty-calendar-time-placeholder-color);\n}\n\n.time-icon {\n  display: flex;\n  align-items: center;\n  color: var(--ty-calendar-time-icon-color);\n  width: 1rem;\n  height: 1rem;\n  flex-shrink: 0;\n}\n";
 //# sourceMappingURL=date-picker.d.ts.map

package/lib/styles/date-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../src/styles/date-picker.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,gBAAgB,kwWA6a5B,CAAC"}
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../src/styles/date-picker.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,gBAAgB,q4WAgb5B,CAAC"}

package/lib/styles/date-picker.js

@@ -53,13 +53,16 @@ export const datePickerStyles = `
   box-sizing: border-box;
 }
 
-.dropdown-label {
-  font-size: 14px;
-  font-weight: 500;
+.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;
-  line-height: 1.25;
   padding-left: 12px;
+  display: flex;
+  align-items: center;
 }
 
 .required-icon {

package/lib/styles/date-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.js","sourceRoot":"","sources":["../../src/styles/date-picker.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,CAAC,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6a/B,CAAC"}
+{"version":3,"file":"date-picker.js","sourceRoot":"","sources":["../../src/styles/date-picker.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,CAAC,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgb/B,CAAC"}

package/lib/styles/dropdown.d.ts

@@ -8,5 +8,5 @@
  *
  * This prevents CSS conflicts between desktop dialog and mobile modal implementations.
  */
-export declare const dropdownStyles = "\n/* ==================== SHARED STYLES ==================== */\n/* These apply to BOTH desktop and mobile modes */\n\n:host {\n  display: block;\n  width: auto;\n  min-width: 200px;\n}\n\n:host {\n  --mobile-border-color: var(--ty-border, #5858587d);\n}\n\n.dropdown-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n/* Label styling */\n.dropdown-label {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--ty-label-color);\n  margin-bottom: 6px;\n  line-height: 1.25;\n  padding-left: 12px;\n}\n\n.required-icon {\n  display: inline-flex;\n  align-items: center;\n  color: #ef4444;\n  width: 12px;\n  height: 12px;\n  vertical-align: middle;\n  margin-left: 4px;\n}\n\n.dropdown-wrapper {\n  position: relative;\n  display: block;\n  width: 100%;\n}\n\n/* ==================== DESKTOP MODE STYLES ==================== */\n/* All styles scoped under .dropdown-mode-desktop */\n\n/* Stub (trigger button) */\n.dropdown-mode-desktop .dropdown-stub {\n  width: 100%;\n  cursor: pointer;\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-items: center;\n  background: var(--input-bg, var(--ty-input-bg));\n  color: var(--input-color, var(--ty-input-color));\n  border: 1px solid var(--input-border, var(--ty-input-border));\n  border-radius: var(--ty-radius-md);\n  font-family: var(--ty-font-sans);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-normal);\n  min-height: var(--ty-size-md);\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n  transition: var(--ty-transition-all), opacity 0.2s ease;\n  outline: none;\n}\n\n.dropdown-mode-desktop .dropdown-stub:hover {\n  border-color: var(--input-border-hover, var(--ty-input-border-hover));\n}\n\n.dropdown-mode-desktop .dropdown-stub[disabled] {\n  background-color: var(--input-disabled-bg, var(--ty-input-disabled-bg));\n  color: var(--input-disabled-color, var(--ty-input-disabled-color));\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.dropdown-mode-desktop .dropdown-stub:focus {\n  border-color: var(--input-border-hover, var(--ty-input-border-hover));\n}\n\n/* Hide stub when dropdown is open */\n.dropdown-mode-desktop .dropdown-wrapper:has(.dropdown-chevron.open) .dropdown-stub {\n  opacity: 0;\n  pointer-events: none;\n}\n\n/* Size variants */\n.dropdown-mode-desktop .dropdown-stub.xs {\n  min-height: var(--ty-size-xs);\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  letter-spacing: var(--ty-tracking-xs);\n  padding: var(--ty-spacing-1) var(--ty-spacing-2);\n  padding-right: calc(var(--ty-spacing-2) + 1rem + var(--ty-spacing-1));\n}\n\n.dropdown-mode-desktop .dropdown-stub.sm {\n  min-height: var(--ty-size-sm);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  padding: var(--ty-spacing-1) var(--ty-spacing-2);\n  padding-right: calc(var(--ty-spacing-2) + 1rem + var(--ty-spacing-1));\n}\n\n.dropdown-mode-desktop .dropdown-stub.md {\n  min-height: var(--ty-size-md);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n}\n\n.dropdown-mode-desktop .dropdown-stub.lg {\n  min-height: var(--ty-size-lg);\n  font-size: var(--ty-font-base);\n  line-height: var(--ty-leading-base);\n  letter-spacing: var(--ty-tracking-base);\n  padding: var(--ty-spacing-3) var(--ty-spacing-4);\n  padding-right: calc(var(--ty-spacing-4) + 1rem + var(--ty-spacing-3));\n}\n\n.dropdown-mode-desktop .dropdown-stub.xl {\n  min-height: var(--ty-size-xl);\n  font-size: var(--ty-font-lg);\n  line-height: var(--ty-leading-lg);\n  letter-spacing: var(--ty-tracking-lg);\n  padding: var(--ty-spacing-4) var(--ty-spacing-5);\n  padding-right: calc(var(--ty-spacing-5) + 1rem + var(--ty-spacing-4));\n}\n\n/* Clearable adjustments */\n.dropdown-mode-desktop .dropdown-stub.xs.clearable.has-selection {\n  padding-right: calc(var(--ty-spacing-2) + 2rem + var(--ty-spacing-2));\n}\n\n.dropdown-mode-desktop .dropdown-stub.sm.clearable.has-selection {\n  padding-right: calc(var(--ty-spacing-2) + 2rem + var(--ty-spacing-2));\n}\n\n.dropdown-mode-desktop .dropdown-stub.md.clearable.has-selection {\n  padding-right: calc(var(--ty-spacing-3) + 2rem + var(--ty-spacing-3));\n}\n\n.dropdown-mode-desktop .dropdown-stub.lg.clearable.has-selection {\n  padding-right: calc(var(--ty-spacing-4) + 2rem + var(--ty-spacing-4));\n}\n\n.dropdown-mode-desktop .dropdown-stub.xl.clearable.has-selection {\n  padding-right: calc(var(--ty-spacing-5) + 2rem + var(--ty-spacing-5));\n}\n\n/* Start-slot icon (leading content inside the stub trigger) */\n.dropdown-mode-desktop .dropdown-stub ::slotted([slot=\"start\"]),\n.dropdown-mode-mobile .dropdown-stub ::slotted([slot=\"start\"]) {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  margin-right: 0.5rem;\n  color: var(--ty-color-text-soft);\n}\n\n.dropdown-mode-desktop .dropdown-stub ::slotted(ty-icon[slot=\"start\"]),\n.dropdown-mode-mobile .dropdown-stub ::slotted(ty-icon[slot=\"start\"]) {\n  width: 1em;\n  height: 1em;\n}\n\n/* Placeholder */\n.dropdown-mode-desktop .dropdown-placeholder {\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n  font-weight: var(--ty-font-light);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-style: italic;\n  pointer-events: none;\n}\n\n.dropdown-mode-desktop .dropdown-stub.has-selection .dropdown-placeholder {\n  display: none;\n}\n\n/* Selected content */\n.dropdown-mode-desktop .dropdown-stub slot[name=\"selected\"] {\n  display: block;\n}\n\n.dropdown-mode-desktop .dropdown-stub.has-selection slot[name=\"selected\"] {\n  width: 100%;\n}\n\n.dropdown-mode-desktop .dropdown-stub slot[name=\"selected\"] * {\n  display: block;\n  width: 100%;\n  padding: 0;\n  margin: 0;\n  border: none;\n  background: none;\n  color: inherit;\n  font: inherit;\n  line-height: inherit;\n  outline: none;\n  appearance: none;\n}\n\n/* Chevron */\n.dropdown-mode-desktop .dropdown-chevron {\n  position: absolute;\n  top: 50%;\n  right: var(--ty-spacing-3);\n  transform: translateY(-50%);\n  width: 1rem;\n  height: 1rem;\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n  transition: var(--ty-transition-transform);\n  pointer-events: none;\n}\n\n.dropdown-mode-desktop .dropdown-chevron.open {\n  transform: translateY(-50%) rotate(180deg);\n}\n\n.dropdown-mode-desktop .dropdown-chevron svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* Clear button */\n.dropdown-mode-desktop .dropdown-clear-btn {\n  position: absolute;\n  top: 50%;\n  right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n  transform: translateY(-50%);\n  width: 1rem;\n  height: 1rem;\n  padding: 0;\n  border: none;\n  background: none;\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n  cursor: pointer;\n  transition: var(--ty-transition-colors);\n  display: none;\n}\n\n.dropdown-mode-desktop .dropdown-clear-btn:hover {\n  color: var(--ty-color-danger);\n}\n\n.dropdown-mode-desktop .dropdown-clear-btn:active {\n  transform: translateY(-50%) scale(0.9);\n}\n\n.dropdown-mode-desktop .dropdown-clear-btn svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n/* Dialog */\n.dropdown-mode-desktop .dropdown-dialog {\n  position: fixed;\n  width: var(--dropdown-width, 200px);\n  max-width: 100vw;\n  margin: 0;\n  padding: 0;\n  border: none;\n  background: transparent;\n  box-sizing: border-box;\n  padding: var(--dropdown-padding, 20px);\n  opacity: 0;\n  transition: opacity 400ms ease;\n  transform: translate(var(--dropdown-offset-x, 0px), var(--dropdown-offset-y, 0px));\n  top: -1000px;\n  left: -1000px;\n}\n\n/* When opened via showModal(), apply flex layout and direction */\n.dropdown-mode-desktop .dropdown-dialog[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n.dropdown-mode-desktop .dropdown-dialog.position-below {\n  left: var(--dropdown-x);\n  top: var(--dropdown-y);\n}\n\n.dropdown-mode-desktop .dropdown-dialog.position-above {\n  left: var(--dropdown-x);\n  bottom: var(--dropdown-y);\n  top: auto;\n  flex-direction: column-reverse;\n}\n\n.dropdown-mode-desktop .dropdown-dialog.position-above .dropdown-header {\n  margin-top: 4px;\n}\n\n.dropdown-mode-desktop .dropdown-dialog.position-below .dropdown-header {\n  margin-bottom: 4px;\n}\n\n.dropdown-mode-desktop .dropdown-dialog.position-below .dropdown-options {\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1), var(--ty-shadow-md);\n}\n\n.dropdown-mode-desktop .dropdown-dialog.open {\n  display: flex;\n  opacity: 1;\n}\n\n.dropdown-mode-desktop .dropdown-dialog.open .dropdown-options {\n  opacity: 1;\n  transform: translateY(0) scale(1);\n}\n\n.dropdown-mode-desktop .dropdown-dialog::backdrop {\n  background: transparent;\n}\n\n/* Dialog header */\n.dropdown-mode-desktop .dropdown-header {\n  display: flex;\n  align-items: center;\n  gap: var(--ty-spacing-2);\n  position: relative;\n}\n\n.dropdown-mode-desktop .dropdown-search-input {\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n  background: var(--input-bg, var(--ty-input-bg));\n  color: var(--input-color, var(--ty-input-color));\n  border: 1px solid var(--input-border, var(--ty-input-border));\n  border-radius: var(--ty-radius-md);\n  font-family: var(--ty-font-sans);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-normal);\n  min-height: var(--ty-size-md);\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n  transition: var(--ty-transition-all);\n  outline: none;\n}\n\n.dropdown-mode-desktop .dropdown-search-input:focus {\n  border-color: var(--input-border-focus, var(--ty-input-border-focus));\n  box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n.dropdown-mode-desktop .dropdown-search-input:disabled {\n  background-color: var(--input-disabled-bg, var(--ty-input-disabled-bg));\n  color: var(--input-disabled-color, var(--ty-input-disabled-color));\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.dropdown-mode-desktop .dropdown-search-input::placeholder {\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n}\n\n/* Search input sizes */\n.dropdown-mode-desktop .dropdown-search-input.xs {\n  min-height: var(--ty-size-xs);\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  letter-spacing: var(--ty-tracking-xs);\n  padding: var(--ty-spacing-1) var(--ty-spacing-2);\n  padding-right: calc(var(--ty-spacing-2) + 1rem + var(--ty-spacing-1));\n}\n\n.dropdown-mode-desktop .dropdown-search-input.sm {\n  min-height: var(--ty-size-sm);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  padding: var(--ty-spacing-1) var(--ty-spacing-2);\n  padding-right: calc(var(--ty-spacing-2) + 1rem + var(--ty-spacing-1));\n}\n\n.dropdown-mode-desktop .dropdown-search-input.md {\n  min-height: var(--ty-size-md);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n}\n\n.dropdown-mode-desktop .dropdown-search-input.lg {\n  min-height: var(--ty-size-lg);\n  font-size: var(--ty-font-base);\n  line-height: var(--ty-leading-base);\n  letter-spacing: var(--ty-tracking-base);\n  padding: var(--ty-spacing-3) var(--ty-spacing-4);\n  padding-right: calc(var(--ty-spacing-4) + 1rem + var(--ty-spacing-3));\n}\n\n.dropdown-mode-desktop .dropdown-search-input.xl {\n  min-height: var(--ty-size-xl);\n  font-size: var(--ty-font-lg);\n  line-height: var(--ty-leading-lg);\n  letter-spacing: var(--ty-tracking-lg);\n  padding: var(--ty-spacing-4) var(--ty-spacing-5);\n  padding-right: calc(var(--ty-spacing-5) + 1rem + var(--ty-spacing-4));\n}\n\n.dropdown-mode-desktop .dropdown-search-chevron {\n  position: absolute;\n  top: 50%;\n  right: var(--ty-spacing-3);\n  transform: translateY(-50%);\n  width: 1rem;\n  height: 1rem;\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n  transition: var(--ty-transition-transform);\n  pointer-events: none;\n}\n\n.dropdown-mode-desktop .dropdown-search-chevron.open {\n  transform: translateY(-50%) rotate(180deg);\n}\n\n.dropdown-mode-desktop .dropdown-search-chevron svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* Options container */\n.dropdown-mode-desktop .dropdown-options {\n  opacity: 0;\n  background: var(--input-bg, var(--ty-input-bg));\n  border: 1px solid var(--input-border, var(--ty-input-border));\n  border-radius: var(--ty-radius-lg);\n  max-height: 16rem;\n  width: 100%;\n  max-width: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  scroll-behavior: smooth;\n  box-sizing: border-box;\n  position: relative;\n  box-shadow:\n    0 20px 25px -5px rgba(0, 0, 0, 0.1),\n    0 10px 10px -5px rgba(0, 0, 0, 0.04);\n  transform: translateY(-20px) scale(0.90);\n  transition:\n    opacity 100ms cubic-bezier(0.16, 1, 0.3, 1),\n    transform 200ms cubic-bezier(0.16, 1, 0.3, 1);\n\n}\n\n/* Hide native scrollbar only when custom scrollbar is active */\n.dropdown-mode-desktop .dropdown-options.ty-custom-scroll {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.dropdown-mode-desktop .dropdown-options.ty-custom-scroll::-webkit-scrollbar {\n  display: none;\n}\n\n/* Options wrapper - positioned container for scrollbar track */\n.dropdown-mode-desktop .dropdown-options-wrapper {\n  position: relative;\n}\n\n/* Show custom scrollbar on hover over options */\n.dropdown-mode-desktop .dropdown-options-wrapper:hover .ty-scrollbar-track-y.has-overflow {\n  opacity: 1;\n}\n\n/* Option elements */\n.dropdown-mode-desktop .dropdown-options ::slotted(option) {\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  color: var(--input-color, var(--ty-input-color));\n  cursor: pointer;\n  transition:\n    var(--ty-transition-colors),\n    transform 150ms cubic-bezier(0.16, 1, 0.3, 1);\n  border: none;\n  background: none;\n  font-size: inherit;\n  font-family: inherit;\n  width: 100%;\n  text-align: left;\n  box-sizing: border-box;\n  transform: translateX(0);\n}\n\n.dropdown-mode-desktop .dropdown-options ::slotted(option:hover) {\n  background-color: var(--ty-bg-neutral-soft);\n}\n\n.dropdown-mode-desktop .dropdown-options ::slotted(option[highlighted]) {\n  background-color: var(--ty-bg-primary-soft);\n  color: var(--ty-color-primary-mild);\n}\n\n.dropdown-mode-desktop .dropdown-options ::slotted(option[selected]) {\n  background-color: var(--ty-color-primary);\n  color: #ffffff;\n}\n\n.dropdown-mode-desktop .dropdown-options ::slotted(option[hidden]),\n.dropdown-mode-desktop .dropdown-options ::slotted(ty-option[hidden]),\n.dropdown-mode-desktop .dropdown-options ::slotted(ty-tag[hidden]) {\n  display: none;\n}\n\n/* ==================== MOBILE MODE STYLES ==================== */\n/* All styles scoped under .dropdown-mode-mobile */\n/* Floating modal design (centered card with backdrop) */\n\n/* Stub (trigger button) - same as desktop but scoped */\n.dropdown-mode-mobile .dropdown-stub {\n  width: 100%;\n  cursor: pointer;\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-items: center;\n  background: var(--input-bg, var(--ty-input-bg));\n  color: var(--input-color, var(--ty-input-color));\n  border: 1px solid var(--input-border, var(--ty-input-border));\n  border-radius: var(--ty-radius-md);\n  font-family: var(--ty-font-sans);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-normal);\n  min-height: var(--ty-size-md);\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n  transition: var(--ty-transition-all);\n  outline: none;\n}\n\n.dropdown-mode-mobile .dropdown-stub:hover {\n  border-color: var(--input-border-hover, var(--ty-input-border-hover));\n}\n\n.dropdown-mode-mobile .dropdown-stub[disabled] {\n  background-color: var(--input-disabled-bg, var(--ty-input-disabled-bg));\n  color: var(--input-disabled-color, var(--ty-input-disabled-color));\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n/* Size variants */\n.dropdown-mode-mobile .dropdown-stub.xs {\n  min-height: var(--ty-size-xs);\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  letter-spacing: var(--ty-tracking-xs);\n  padding: var(--ty-spacing-1) var(--ty-spacing-2);\n  padding-right: calc(var(--ty-spacing-2) + 1rem + var(--ty-spacing-1));\n}\n\n.dropdown-mode-mobile .dropdown-stub.sm {\n  min-height: var(--ty-size-sm);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  padding: var(--ty-spacing-1) var(--ty-spacing-2);\n  padding-right: calc(var(--ty-spacing-2) + 1rem + var(--ty-spacing-1));\n}\n\n.dropdown-mode-mobile .dropdown-stub.md {\n  min-height: var(--ty-size-md);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n}\n\n.dropdown-mode-mobile .dropdown-stub.lg {\n  min-height: var(--ty-size-lg);\n  font-size: var(--ty-font-base);\n  line-height: var(--ty-leading-base);\n  letter-spacing: var(--ty-tracking-base);\n  padding: var(--ty-spacing-3) var(--ty-spacing-4);\n  padding-right: calc(var(--ty-spacing-4) + 1rem + var(--ty-spacing-3));\n}\n\n.dropdown-mode-mobile .dropdown-stub.xl {\n  min-height: var(--ty-size-xl);\n  font-size: var(--ty-font-lg);\n  line-height: var(--ty-leading-lg);\n  letter-spacing: var(--ty-tracking-lg);\n  padding: var(--ty-spacing-4) var(--ty-spacing-5);\n  padding-right: calc(var(--ty-spacing-5) + 1rem + var(--ty-spacing-4));\n}\n\n/* Placeholder */\n.dropdown-mode-mobile .dropdown-placeholder {\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n  font-weight: var(--ty-font-light);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-style: italic;\n  pointer-events: none;\n}\n\n.dropdown-mode-mobile .dropdown-stub.has-selection .dropdown-placeholder {\n  display: none;\n}\n\n/* Selected content */\n.dropdown-mode-mobile .dropdown-stub slot[name=\"selected\"] {\n  display: block;\n}\n\n.dropdown-mode-mobile .dropdown-stub.has-selection slot[name=\"selected\"] {\n  width: 100%;\n}\n\n.dropdown-mode-mobile .dropdown-stub slot[name=\"selected\"] * {\n  display: block;\n  width: 100%;\n  padding: 0;\n  margin: 0;\n  border: none;\n  background: none;\n  color: inherit;\n  font: inherit;\n  line-height: inherit;\n  outline: none;\n  appearance: none;\n}\n\n/* Chevron */\n.dropdown-mode-mobile .dropdown-chevron {\n  position: absolute;\n  top: 50%;\n  right: var(--ty-spacing-3);\n  transform: translateY(-50%);\n  width: 1rem;\n  height: 1rem;\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n  transition: var(--ty-transition-transform);\n  pointer-events: none;\n}\n\n.dropdown-mode-mobile .dropdown-chevron svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* Mobile dialog - full screen overlay with centered floating card */\n.dropdown-mode-mobile .mobile-dialog {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 100vw;\n  height: 100vh;\n  max-width: 100vw;\n  max-height: 100vh;\n  margin: 0;\n  padding: 0;\n  padding-top: 10vh;\n  border: none;\n  background: transparent;\n  align-items: flex-start;\n  justify-content: center;\n  opacity: 0;\n  transition: opacity 300ms ease;\n}\n\n/* When opened via showModal(), add flex layout */\n.dropdown-mode-mobile .mobile-dialog[open] {\n  display: flex;\n}\n\n.dropdown-mode-mobile .mobile-dialog.open {\n  opacity: 1;\n}\n\n/* Native dialog backdrop with blur */\n.dropdown-mode-mobile .mobile-dialog::backdrop {\n  background: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n}\n\n/* Mobile content container - floating card */\n.dropdown-mode-mobile .mobile-dialog-content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: calc(100% - 32px);\n  max-width: 400px;\n  min-height: 200px;\n  max-height: calc(90vh - 10vh);\n  opacity: 0;\n  transform: scale(0.95);\n  transition:\n    opacity 300ms cubic-bezier(0.16, 1, 0.3, 1),\n    transform 300ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.dropdown-mode-mobile .mobile-dialog.open .mobile-dialog-content {\n  opacity: 1;\n  transform: scale(1);\n}\n\n/* Mobile search header - label floats above, search + close below */\n.dropdown-mode-mobile .mobile-search-header {\n  flex-shrink: 0;\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 16px;\n  padding: 0;\n  background: transparent;\n  position: relative;\n}\n\n.dropdown-mode-mobile .mobile-header-content {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  width: 100%;\n}\n\n/* Header for non-searchable (label + close button) */\n.dropdown-mode-mobile .mobile-header-nosearch {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  margin-bottom: 16px;\n  padding: 0;\n  background: transparent;\n  position: relative;\n  min-height: 40px;\n}\n\n.dropdown-mode-mobile .mobile-header-label {\n  position: absolute;\n  bottom: 100%;\n  left: 6px;\n  margin-bottom: 4px;\n  font-size: var(--ty-font-lg);\n  line-height: var(--ty-leading-lg);\n  letter-spacing: var(--ty-tracking-lg);\n  font-weight: 700;\n  color: var(--ty-color-neutral);\n  pointer-events: none;\n}\n\n/* Close button - circular with border */\n.dropdown-mode-mobile .mobile-close-button {\n  flex-shrink: 0;\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--ty-surface-floating);\n  border: 2px solid var(--mobile-border-color);\n  border-radius: 50%;\n  color: var(--ty-text-strong);\n  cursor: pointer;\n  transition: var(--ty-transition-all);\n  padding: 0;\n}\n\n.dropdown-mode-mobile .mobile-close-button:hover {\n  background: var(--ty-bg-neutral);\n  border-color: var(--ty-border);\n  color: var(--ty-text-strong);\n}\n\n.dropdown-mode-mobile .mobile-close-button:active {\n  transform: scale(0.9);\n}\n\n.dropdown-mode-mobile .mobile-close-button svg {\n  width: 24px;\n  height: 24px;\n}\n\n/* Mobile search input */\n.dropdown-mode-mobile .mobile-search-input {\n  flex: 1;\n  min-width: 0;\n  box-sizing: border-box;\n  background: var(--ty-surface-floating);\n  color: var(--ty-text);\n  border: 1px solid var(--ty-border-soft);\n  border-radius: var(--ty-radius-md);\n  font-family: var(--ty-font-sans);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-normal);\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  height: 40px;\n  transition: var(--ty-transition-all);\n  outline: none;\n  border: 2px solid;\n  border-color: var(--mobile-border-color);\n}\n\n.dropdown-mode-mobile .mobile-search-input::placeholder {\n  color: var(--ty-text-faint);\n}\n\n/* Mobile options container - floating card with elevation */\n.dropdown-mode-mobile .mobile-options-container {\n  position: relative;\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  -webkit-overflow-scrolling: touch;\n  background: var(--ty-surface-floating); /* Floating card background */\n  border-radius: var(--ty-radius-lg);\n  border: 1px solid var(--ty-border-soft);\n  box-shadow: \n    0 20px 25px -5px rgba(0, 0, 0, 0.1),\n    0 10px 10px -5px rgba(0, 0, 0, 0.04);\n  border: 2px solid;\n  border-color: var(--mobile-border-color);\n}\n\n/* Hide scrollbar but keep functionality */\n.dropdown-mode-mobile .mobile-options-container {\n  scrollbar-width: none; /* Firefox */\n  -ms-overflow-style: none; /* IE/Edge */\n}\n\n.dropdown-mode-mobile .mobile-options-container::-webkit-scrollbar {\n  display: none; /* Chrome, Safari, Opera */\n}\n\n/* Mobile option styling - native <option> only */\n.dropdown-mode-mobile .mobile-options-container ::slotted(option) {\n  display: block;\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  margin: 2px 8px;\n  color: var(--ty-text);\n  cursor: pointer;\n  transition: var(--ty-transition-all);\n  border: none;\n  background: transparent;\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-family: inherit;\n  width: calc(100% - 16px);\n  text-align: left;\n  box-sizing: border-box;\n  border-radius: var(--ty-radius-sm);\n  min-height: 36px;\n}\n\n.dropdown-mode-mobile .mobile-options-container ::slotted(option:active) {\n  background-color: var(--ty-bg-neutral-soft);\n}\n\n.dropdown-mode-mobile .mobile-options-container ::slotted(option[highlighted]) {\n  background-color: var(--ty-bg-primary-soft);\n  color: var(--ty-color-primary-mild);\n}\n\n.dropdown-mode-mobile .mobile-options-container ::slotted(option[selected]) {\n  background: var(--ty-bg-primary);\n  color: var(--ty-color-primary-strong);\n}\n\n.dropdown-mode-mobile .mobile-options-container ::slotted(option[hidden]),\n.dropdown-mode-mobile .mobile-options-container ::slotted(ty-option[hidden]),\n.dropdown-mode-mobile .mobile-options-container ::slotted(ty-tag[hidden]) {\n  display: none;\n}\n\n/* ==================== FLAVOR VARIANTS ==================== */\n/* Apply to both modes */\n\n:host([flavor=\"primary\"]) .dropdown-stub,\n:host([flavor=\"primary\"]) .dropdown-search-input {\n  border-color: var(--ty-color-primary);\n}\n\n:host([flavor=\"primary\"]) .dropdown-stub:hover,\n:host([flavor=\"primary\"]) .dropdown-search-input:focus {\n  border-color: var(--ty-color-primary-mild);\n  box-shadow: 0 0 0 3px var(--ty-color-primary-faint);\n}\n\n:host([flavor=\"secondary\"]) .dropdown-stub,\n:host([flavor=\"secondary\"]) .dropdown-search-input {\n  border-color: var(--ty-color-secondary);\n}\n\n:host([flavor=\"secondary\"]) .dropdown-stub:hover,\n:host([flavor=\"secondary\"]) .dropdown-search-input:focus {\n  border-color: var(--ty-color-secondary-mild);\n  box-shadow: 0 0 0 3px var(--ty-color-secondary-faint);\n}\n\n:host([flavor=\"success\"]) .dropdown-stub,\n:host([flavor=\"success\"]) .dropdown-search-input {\n  border-color: var(--ty-color-success);\n}\n\n:host([flavor=\"success\"]) .dropdown-stub:hover,\n:host([flavor=\"success\"]) .dropdown-search-input:focus {\n  border-color: var(--ty-color-success-mild);\n  box-shadow: 0 0 0 3px var(--ty-color-success-faint);\n}\n\n:host([flavor=\"danger\"]) .dropdown-stub,\n:host([flavor=\"danger\"]) .dropdown-search-input {\n  border-color: var(--ty-color-danger);\n}\n\n:host([flavor=\"danger\"]) .dropdown-stub:hover,\n:host([flavor=\"danger\"]) .dropdown-search-input:focus {\n  border-color: var(--ty-color-danger-mild);\n  box-shadow: 0 0 0 3px var(--ty-color-danger-faint);\n}\n\n:host([flavor=\"warning\"]) .dropdown-stub,\n:host([flavor=\"warning\"]) .dropdown-search-input {\n  border-color: var(--ty-color-warning);\n}\n\n:host([flavor=\"warning\"]) .dropdown-stub:hover,\n:host([flavor=\"warning\"]) .dropdown-search-input:focus {\n  border-color: var(--ty-color-warning-mild);\n  box-shadow: 0 0 0 3px var(--ty-color-warning-faint);\n}\n\n/* ==================== READONLY STATE ==================== */\n\n:host([readonly]) .dropdown-chevron {\n  display: none;\n}\n\n:host([readonly]) .dropdown-stub {\n  padding-right: var(--ty-spacing-3);\n}\n\n:host([readonly]) .dropdown-stub,\n:host([readonly]) .dropdown-stub slot[name=\"selected\"] {\n  cursor: initial;\n}\n\n/* Custom scrollbar styles */\n\n/* ===================================== */\n/* Custom Scrollbar - Vertical Track     */\n/* ===================================== */\n\n.ty-scrollbar-track-y {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-y.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-y.has-overflow:hover,\n.ty-scrollbar-track-y.has-overflow.scrolling,\n.ty-scrollbar-track-y.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-y::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-y:hover::before,\n.ty-scrollbar-track-y.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, rgba(0, 0, 0, 0.06));\n}\n\n.ty-scrollbar-thumb-y {\n  position: absolute;\n  right: 0;\n  width: 100%;\n  min-height: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, rgba(0, 0, 0, 0.35));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: background 0.15s ease-out;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-y:hover,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-hover, rgba(0, 0, 0, 0.50));\n}\n\n.ty-scrollbar-thumb-y:active,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-active, rgba(0, 0, 0, 0.60));\n}\n\n/* ===================================== */\n/* Custom Scrollbar - Horizontal Track   */\n/* ===================================== */\n\n.ty-scrollbar-track-x {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-x.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-x.has-overflow:hover,\n.ty-scrollbar-track-x.has-overflow.scrolling,\n.ty-scrollbar-track-x.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-x::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-x:hover::before,\n.ty-scrollbar-track-x.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, rgba(0, 0, 0, 0.06));\n}\n\n.ty-scrollbar-thumb-x {\n  position: absolute;\n  bottom: 0;\n  height: 100%;\n  min-width: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, rgba(0, 0, 0, 0.35));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: background 0.15s ease-out;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-x:hover,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-hover, rgba(0, 0, 0, 0.50));\n}\n\n.ty-scrollbar-thumb-x:active,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-active, rgba(0, 0, 0, 0.60));\n}\n\n/* ===================================== */\n/* Touch devices - hide custom scrollbar */\n/* ===================================== */\n\n@media (pointer: coarse) and (hover: none) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x {\n    display: none !important;\n  }\n}\n\n/* Respect reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x,\n  .ty-scrollbar-thumb-y,\n  .ty-scrollbar-thumb-x {\n    transition-duration: 0ms !important;\n  }\n}\n\n";
+export declare const dropdownStyles = "\n/* ==================== SHARED STYLES ==================== */\n/* These apply to BOTH desktop and mobile modes */\n\n:host {\n  display: block;\n  width: auto;\n}\n\n:host {\n  --mobile-border-color: var(--ty-border, #5858587d);\n}\n\n.dropdown-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n/* Label styling */\n.ty-field-label {\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-medium);\n  color: var(--ty-label-color);\n  margin-bottom: 6px;\n  padding-left: 12px;\n  display: flex;\n  align-items: center;\n}\n\n.required-icon {\n  display: inline-flex;\n  align-items: center;\n  color: #ef4444;\n  width: 12px;\n  height: 12px;\n  vertical-align: middle;\n  margin-left: 4px;\n}\n\n.dropdown-wrapper {\n  position: relative;\n  display: block;\n  width: 100%;\n}\n\n/* ==================== DESKTOP MODE STYLES ==================== */\n/* All styles scoped under .dropdown-mode-desktop */\n\n/* Stub (trigger button) */\n.dropdown-mode-desktop .dropdown-stub {\n  width: 100%;\n  cursor: pointer;\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-items: center;\n  background: var(--input-bg, var(--ty-input-bg));\n  color: var(--input-color, var(--ty-input-color));\n  border: 1px solid var(--input-border, var(--ty-input-border));\n  border-radius: var(--ty-radius-md);\n  font-family: var(--ty-font-sans);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-normal);\n  min-height: var(--ty-size-md);\n  padding: 0 var(--ty-spacing-3);\n  padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n  transition: var(--ty-transition-all), opacity 0.2s ease;\n  outline: none;\n}\n\n.dropdown-mode-desktop .dropdown-stub:hover {\n  border-color: var(--input-border-hover, var(--ty-input-border-hover));\n}\n\n.dropdown-mode-desktop .dropdown-stub[disabled] {\n  background-color: var(--input-disabled-bg, var(--ty-input-disabled-bg));\n  color: var(--input-disabled-color, var(--ty-input-disabled-color));\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.dropdown-mode-desktop .dropdown-stub:focus {\n  border-color: var(--input-border-hover, var(--ty-input-border-hover));\n}\n\n/* Hide stub when dropdown is open */\n.dropdown-mode-desktop .dropdown-wrapper:has(.dropdown-chevron.open) .dropdown-stub {\n  opacity: 0;\n  pointer-events: none;\n}\n\n/* Size variants */\n.dropdown-mode-desktop .dropdown-stub.xs {\n  min-height: var(--ty-size-xs);\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  letter-spacing: var(--ty-tracking-xs);\n  padding: var(--ty-spacing-1) var(--ty-spacing-2);\n  padding-right: calc(var(--ty-spacing-2) + 1rem + var(--ty-spacing-1));\n}\n\n.dropdown-mode-desktop .dropdown-stub.sm {\n  min-height: var(--ty-size-sm);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  padding: var(--ty-spacing-1) var(--ty-spacing-2);\n  padding-right: calc(var(--ty-spacing-2) + 1rem + var(--ty-spacing-1));\n}\n\n.dropdown-mode-desktop .dropdown-stub.md {\n  min-height: var(--ty-size-md);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n}\n\n.dropdown-mode-desktop .dropdown-stub.lg {\n  min-height: var(--ty-size-lg);\n  font-size: var(--ty-font-base);\n  line-height: var(--ty-leading-base);\n  letter-spacing: var(--ty-tracking-base);\n  padding: var(--ty-spacing-3) var(--ty-spacing-4);\n  padding-right: calc(var(--ty-spacing-4) + 1rem + var(--ty-spacing-3));\n}\n\n.dropdown-mode-desktop .dropdown-stub.xl {\n  min-height: var(--ty-size-xl);\n  font-size: var(--ty-font-lg);\n  line-height: var(--ty-leading-lg);\n  letter-spacing: var(--ty-tracking-lg);\n  padding: var(--ty-spacing-4) var(--ty-spacing-5);\n  padding-right: calc(var(--ty-spacing-5) + 1rem + var(--ty-spacing-4));\n}\n\n/* Clearable adjustments */\n.dropdown-mode-desktop .dropdown-stub.xs.clearable.has-selection {\n  padding-right: calc(var(--ty-spacing-2) + 2rem + var(--ty-spacing-2));\n}\n\n.dropdown-mode-desktop .dropdown-stub.sm.clearable.has-selection {\n  padding-right: calc(var(--ty-spacing-2) + 2rem + var(--ty-spacing-2));\n}\n\n.dropdown-mode-desktop .dropdown-stub.md.clearable.has-selection {\n  padding-right: calc(var(--ty-spacing-3) + 2rem + var(--ty-spacing-3));\n}\n\n.dropdown-mode-desktop .dropdown-stub.lg.clearable.has-selection {\n  padding-right: calc(var(--ty-spacing-4) + 2rem + var(--ty-spacing-4));\n}\n\n.dropdown-mode-desktop .dropdown-stub.xl.clearable.has-selection {\n  padding-right: calc(var(--ty-spacing-5) + 2rem + var(--ty-spacing-5));\n}\n\n/* Start-slot icon (leading content inside the stub trigger) */\n.dropdown-mode-desktop .dropdown-stub ::slotted([slot=\"start\"]),\n.dropdown-mode-mobile .dropdown-stub ::slotted([slot=\"start\"]) {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  margin-right: 0.5rem;\n  color: var(--ty-color-text-soft);\n}\n\n.dropdown-mode-desktop .dropdown-stub ::slotted(ty-icon[slot=\"start\"]),\n.dropdown-mode-mobile .dropdown-stub ::slotted(ty-icon[slot=\"start\"]) {\n  width: 1em;\n  height: 1em;\n}\n\n/* Placeholder */\n.dropdown-mode-desktop .dropdown-placeholder {\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n  font-weight: var(--ty-font-light);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-style: italic;\n  pointer-events: none;\n}\n\n.dropdown-mode-desktop .dropdown-stub.has-selection .dropdown-placeholder {\n  display: none;\n}\n\n/* Selected content */\n.dropdown-mode-desktop .dropdown-stub slot[name=\"selected\"] {\n  display: block;\n}\n\n.dropdown-mode-desktop .dropdown-stub.has-selection slot[name=\"selected\"] {\n  width: 100%;\n}\n\n.dropdown-mode-desktop .dropdown-stub slot[name=\"selected\"] * {\n  display: block;\n  width: 100%;\n  padding: 0;\n  margin: 0;\n  border: none;\n  background: none;\n  color: inherit;\n  font: inherit;\n  line-height: inherit;\n  outline: none;\n  appearance: none;\n}\n\n/* Chevron */\n.dropdown-mode-desktop .dropdown-chevron {\n  position: absolute;\n  top: 50%;\n  right: var(--ty-spacing-3);\n  transform: translateY(-50%);\n  width: 1rem;\n  height: 1rem;\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n  transition: var(--ty-transition-transform);\n  pointer-events: none;\n}\n\n.dropdown-mode-desktop .dropdown-chevron.open {\n  transform: translateY(-50%) rotate(180deg);\n}\n\n.dropdown-mode-desktop .dropdown-chevron svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* Clear button */\n.dropdown-mode-desktop .dropdown-clear-btn {\n  position: absolute;\n  top: 50%;\n  right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n  transform: translateY(-50%);\n  width: 1rem;\n  height: 1rem;\n  padding: 0;\n  border: none;\n  background: none;\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n  cursor: pointer;\n  transition: var(--ty-transition-colors);\n  display: none;\n}\n\n.dropdown-mode-desktop .dropdown-clear-btn:hover {\n  color: var(--ty-color-danger);\n}\n\n.dropdown-mode-desktop .dropdown-clear-btn:active {\n  transform: translateY(-50%) scale(0.9);\n}\n\n.dropdown-mode-desktop .dropdown-clear-btn svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n/* Dialog */\n.dropdown-mode-desktop .dropdown-dialog {\n  position: fixed;\n  width: var(--dropdown-width, 200px);\n  max-width: 100vw;\n  margin: 0;\n  padding: 0;\n  border: none;\n  background: transparent;\n  box-sizing: border-box;\n  padding: var(--dropdown-padding, 20px);\n  opacity: 0;\n  transition: opacity 400ms ease;\n  transform: translate(var(--dropdown-offset-x, 0px), var(--dropdown-offset-y, 0px));\n  top: -1000px;\n  left: -1000px;\n}\n\n/* When opened via showModal(), apply flex layout and direction */\n.dropdown-mode-desktop .dropdown-dialog[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n.dropdown-mode-desktop .dropdown-dialog.position-below {\n  left: var(--dropdown-x);\n  top: var(--dropdown-y);\n}\n\n.dropdown-mode-desktop .dropdown-dialog.position-above {\n  left: var(--dropdown-x);\n  bottom: var(--dropdown-y);\n  top: auto;\n  flex-direction: column-reverse;\n}\n\n.dropdown-mode-desktop .dropdown-dialog.position-above .dropdown-header {\n  margin-top: 4px;\n}\n\n.dropdown-mode-desktop .dropdown-dialog.position-below .dropdown-header {\n  margin-bottom: 4px;\n}\n\n.dropdown-mode-desktop .dropdown-dialog.position-below .dropdown-options {\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1), var(--ty-shadow-md);\n}\n\n.dropdown-mode-desktop .dropdown-dialog.open {\n  display: flex;\n  opacity: 1;\n}\n\n.dropdown-mode-desktop .dropdown-dialog.open .dropdown-options {\n  opacity: 1;\n  transform: translateY(0) scale(1);\n}\n\n.dropdown-mode-desktop .dropdown-dialog::backdrop {\n  background: transparent;\n}\n\n/* Dialog header */\n.dropdown-mode-desktop .dropdown-header {\n  display: flex;\n  align-items: center;\n  gap: var(--ty-spacing-2);\n  position: relative;\n}\n\n.dropdown-mode-desktop .dropdown-search-input {\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n  background: var(--input-bg, var(--ty-input-bg));\n  color: var(--input-color, var(--ty-input-color));\n  border: 1px solid var(--input-border, var(--ty-input-border));\n  border-radius: var(--ty-radius-md);\n  font-family: var(--ty-font-sans);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-normal);\n  min-height: var(--ty-size-md);\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n  transition: var(--ty-transition-all);\n  outline: none;\n}\n\n.dropdown-mode-desktop .dropdown-search-input:focus {\n  border-color: var(--input-border-focus, var(--ty-input-border-focus));\n  box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n.dropdown-mode-desktop .dropdown-search-input:disabled {\n  background-color: var(--input-disabled-bg, var(--ty-input-disabled-bg));\n  color: var(--input-disabled-color, var(--ty-input-disabled-color));\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.dropdown-mode-desktop .dropdown-search-input::placeholder {\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n}\n\n/* Search input sizes */\n.dropdown-mode-desktop .dropdown-search-input.xs {\n  min-height: var(--ty-size-xs);\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  letter-spacing: var(--ty-tracking-xs);\n  padding: var(--ty-spacing-1) var(--ty-spacing-2);\n  padding-right: calc(var(--ty-spacing-2) + 1rem + var(--ty-spacing-1));\n}\n\n.dropdown-mode-desktop .dropdown-search-input.sm {\n  min-height: var(--ty-size-sm);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  padding: var(--ty-spacing-1) var(--ty-spacing-2);\n  padding-right: calc(var(--ty-spacing-2) + 1rem + var(--ty-spacing-1));\n}\n\n.dropdown-mode-desktop .dropdown-search-input.md {\n  min-height: var(--ty-size-md);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n}\n\n.dropdown-mode-desktop .dropdown-search-input.lg {\n  min-height: var(--ty-size-lg);\n  font-size: var(--ty-font-base);\n  line-height: var(--ty-leading-base);\n  letter-spacing: var(--ty-tracking-base);\n  padding: var(--ty-spacing-3) var(--ty-spacing-4);\n  padding-right: calc(var(--ty-spacing-4) + 1rem + var(--ty-spacing-3));\n}\n\n.dropdown-mode-desktop .dropdown-search-input.xl {\n  min-height: var(--ty-size-xl);\n  font-size: var(--ty-font-lg);\n  line-height: var(--ty-leading-lg);\n  letter-spacing: var(--ty-tracking-lg);\n  padding: var(--ty-spacing-4) var(--ty-spacing-5);\n  padding-right: calc(var(--ty-spacing-5) + 1rem + var(--ty-spacing-4));\n}\n\n.dropdown-mode-desktop .dropdown-search-chevron {\n  position: absolute;\n  top: 50%;\n  right: var(--ty-spacing-3);\n  transform: translateY(-50%);\n  width: 1rem;\n  height: 1rem;\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n  transition: var(--ty-transition-transform);\n  pointer-events: none;\n}\n\n.dropdown-mode-desktop .dropdown-search-chevron.open {\n  transform: translateY(-50%) rotate(180deg);\n}\n\n.dropdown-mode-desktop .dropdown-search-chevron svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* Options container */\n.dropdown-mode-desktop .dropdown-options {\n  opacity: 0;\n  background: var(--input-bg, var(--ty-input-bg));\n  border: 1px solid var(--input-border, var(--ty-input-border));\n  border-radius: var(--ty-radius-lg);\n  max-height: 16rem;\n  width: 100%;\n  max-width: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  scroll-behavior: smooth;\n  box-sizing: border-box;\n  position: relative;\n  box-shadow:\n    0 20px 25px -5px rgba(0, 0, 0, 0.1),\n    0 10px 10px -5px rgba(0, 0, 0, 0.04);\n  transform: translateY(-20px) scale(0.90);\n  transition:\n    opacity 100ms cubic-bezier(0.16, 1, 0.3, 1),\n    transform 200ms cubic-bezier(0.16, 1, 0.3, 1);\n\n}\n\n/* Hide native scrollbar only when custom scrollbar is active */\n.dropdown-mode-desktop .dropdown-options.ty-custom-scroll {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.dropdown-mode-desktop .dropdown-options.ty-custom-scroll::-webkit-scrollbar {\n  display: none;\n}\n\n/* Options wrapper - positioned container for scrollbar track */\n.dropdown-mode-desktop .dropdown-options-wrapper {\n  position: relative;\n}\n\n/* Show custom scrollbar on hover over options */\n.dropdown-mode-desktop .dropdown-options-wrapper:hover .ty-scrollbar-track-y.has-overflow {\n  opacity: 1;\n}\n\n/* Option elements */\n.dropdown-mode-desktop .dropdown-options ::slotted(option) {\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  color: var(--input-color, var(--ty-input-color));\n  cursor: pointer;\n  transition:\n    var(--ty-transition-colors),\n    transform 150ms cubic-bezier(0.16, 1, 0.3, 1);\n  border: none;\n  background: none;\n  font-size: inherit;\n  font-family: inherit;\n  width: 100%;\n  text-align: left;\n  box-sizing: border-box;\n  transform: translateX(0);\n}\n\n.dropdown-mode-desktop .dropdown-options ::slotted(option:hover) {\n  background-color: var(--ty-bg-neutral-soft);\n}\n\n.dropdown-mode-desktop .dropdown-options ::slotted(option[highlighted]) {\n  background-color: var(--ty-bg-primary-soft);\n  color: var(--ty-color-primary-mild);\n}\n\n.dropdown-mode-desktop .dropdown-options ::slotted(option[selected]) {\n  background-color: var(--ty-color-primary);\n  color: #ffffff;\n}\n\n.dropdown-mode-desktop .dropdown-options ::slotted(option[hidden]),\n.dropdown-mode-desktop .dropdown-options ::slotted(ty-option[hidden]),\n.dropdown-mode-desktop .dropdown-options ::slotted(ty-tag[hidden]) {\n  display: none;\n}\n\n/* ==================== MOBILE MODE STYLES ==================== */\n/* All styles scoped under .dropdown-mode-mobile */\n/* Floating modal design (centered card with backdrop) */\n\n/* Stub (trigger button) - same as desktop but scoped */\n.dropdown-mode-mobile .dropdown-stub {\n  width: 100%;\n  cursor: pointer;\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-items: center;\n  background: var(--input-bg, var(--ty-input-bg));\n  color: var(--input-color, var(--ty-input-color));\n  border: 1px solid var(--input-border, var(--ty-input-border));\n  border-radius: var(--ty-radius-md);\n  font-family: var(--ty-font-sans);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-normal);\n  min-height: var(--ty-size-md);\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n  transition: var(--ty-transition-all);\n  outline: none;\n}\n\n.dropdown-mode-mobile .dropdown-stub:hover {\n  border-color: var(--input-border-hover, var(--ty-input-border-hover));\n}\n\n.dropdown-mode-mobile .dropdown-stub[disabled] {\n  background-color: var(--input-disabled-bg, var(--ty-input-disabled-bg));\n  color: var(--input-disabled-color, var(--ty-input-disabled-color));\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n/* Size variants */\n.dropdown-mode-mobile .dropdown-stub.xs {\n  min-height: var(--ty-size-xs);\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  letter-spacing: var(--ty-tracking-xs);\n  padding: var(--ty-spacing-1) var(--ty-spacing-2);\n  padding-right: calc(var(--ty-spacing-2) + 1rem + var(--ty-spacing-1));\n}\n\n.dropdown-mode-mobile .dropdown-stub.sm {\n  min-height: var(--ty-size-sm);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  padding: var(--ty-spacing-1) var(--ty-spacing-2);\n  padding-right: calc(var(--ty-spacing-2) + 1rem + var(--ty-spacing-1));\n}\n\n.dropdown-mode-mobile .dropdown-stub.md {\n  min-height: var(--ty-size-md);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n}\n\n.dropdown-mode-mobile .dropdown-stub.lg {\n  min-height: var(--ty-size-lg);\n  font-size: var(--ty-font-base);\n  line-height: var(--ty-leading-base);\n  letter-spacing: var(--ty-tracking-base);\n  padding: var(--ty-spacing-3) var(--ty-spacing-4);\n  padding-right: calc(var(--ty-spacing-4) + 1rem + var(--ty-spacing-3));\n}\n\n.dropdown-mode-mobile .dropdown-stub.xl {\n  min-height: var(--ty-size-xl);\n  font-size: var(--ty-font-lg);\n  line-height: var(--ty-leading-lg);\n  letter-spacing: var(--ty-tracking-lg);\n  padding: var(--ty-spacing-4) var(--ty-spacing-5);\n  padding-right: calc(var(--ty-spacing-5) + 1rem + var(--ty-spacing-4));\n}\n\n/* Placeholder */\n.dropdown-mode-mobile .dropdown-placeholder {\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n  font-weight: var(--ty-font-light);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-style: italic;\n  pointer-events: none;\n}\n\n.dropdown-mode-mobile .dropdown-stub.has-selection .dropdown-placeholder {\n  display: none;\n}\n\n/* Selected content */\n.dropdown-mode-mobile .dropdown-stub slot[name=\"selected\"] {\n  display: block;\n}\n\n.dropdown-mode-mobile .dropdown-stub.has-selection slot[name=\"selected\"] {\n  width: 100%;\n}\n\n.dropdown-mode-mobile .dropdown-stub slot[name=\"selected\"] * {\n  display: block;\n  width: 100%;\n  padding: 0;\n  margin: 0;\n  border: none;\n  background: none;\n  color: inherit;\n  font: inherit;\n  line-height: inherit;\n  outline: none;\n  appearance: none;\n}\n\n/* Chevron */\n.dropdown-mode-mobile .dropdown-chevron {\n  position: absolute;\n  top: 50%;\n  right: var(--ty-spacing-3);\n  transform: translateY(-50%);\n  width: 1rem;\n  height: 1rem;\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n  transition: var(--ty-transition-transform);\n  pointer-events: none;\n}\n\n.dropdown-mode-mobile .dropdown-chevron svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* Mobile dialog - full screen overlay with centered floating card */\n.dropdown-mode-mobile .mobile-dialog {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 100vw;\n  height: 100vh;\n  max-width: 100vw;\n  max-height: 100vh;\n  margin: 0;\n  padding: 0;\n  padding-top: 10vh;\n  border: none;\n  background: transparent;\n  align-items: flex-start;\n  justify-content: center;\n  opacity: 0;\n  transition: opacity 300ms ease;\n}\n\n/* When opened via showModal(), add flex layout */\n.dropdown-mode-mobile .mobile-dialog[open] {\n  display: flex;\n}\n\n.dropdown-mode-mobile .mobile-dialog.open {\n  opacity: 1;\n}\n\n/* Native dialog backdrop with blur */\n.dropdown-mode-mobile .mobile-dialog::backdrop {\n  background: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n}\n\n/* Mobile content container - floating card */\n.dropdown-mode-mobile .mobile-dialog-content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: calc(100% - 32px);\n  max-width: 400px;\n  min-height: 200px;\n  max-height: calc(90vh - 10vh);\n  opacity: 0;\n  transform: scale(0.95);\n  transition:\n    opacity 300ms cubic-bezier(0.16, 1, 0.3, 1),\n    transform 300ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.dropdown-mode-mobile .mobile-dialog.open .mobile-dialog-content {\n  opacity: 1;\n  transform: scale(1);\n}\n\n/* Mobile search header - label floats above, search + close below */\n.dropdown-mode-mobile .mobile-search-header {\n  flex-shrink: 0;\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 16px;\n  padding: 0;\n  background: transparent;\n  position: relative;\n}\n\n.dropdown-mode-mobile .mobile-header-content {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  width: 100%;\n}\n\n/* Header for non-searchable (label + close button) */\n.dropdown-mode-mobile .mobile-header-nosearch {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  margin-bottom: 16px;\n  padding: 0;\n  background: transparent;\n  position: relative;\n  min-height: 40px;\n}\n\n.dropdown-mode-mobile .mobile-header-label {\n  position: absolute;\n  bottom: 100%;\n  left: 6px;\n  margin-bottom: 4px;\n  font-size: var(--ty-font-lg);\n  line-height: var(--ty-leading-lg);\n  letter-spacing: var(--ty-tracking-lg);\n  font-weight: 700;\n  color: var(--ty-color-neutral);\n  pointer-events: none;\n}\n\n/* Close button - circular with border */\n.dropdown-mode-mobile .mobile-close-button {\n  flex-shrink: 0;\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--ty-surface-floating);\n  border: 2px solid var(--mobile-border-color);\n  border-radius: 50%;\n  color: var(--ty-text-strong);\n  cursor: pointer;\n  transition: var(--ty-transition-all);\n  padding: 0;\n}\n\n.dropdown-mode-mobile .mobile-close-button:hover {\n  background: var(--ty-bg-neutral);\n  border-color: var(--ty-border);\n  color: var(--ty-text-strong);\n}\n\n.dropdown-mode-mobile .mobile-close-button:active {\n  transform: scale(0.9);\n}\n\n.dropdown-mode-mobile .mobile-close-button svg {\n  width: 24px;\n  height: 24px;\n}\n\n/* Mobile search input */\n.dropdown-mode-mobile .mobile-search-input {\n  flex: 1;\n  min-width: 0;\n  box-sizing: border-box;\n  background: var(--ty-surface-floating);\n  color: var(--ty-text);\n  border: 1px solid var(--ty-border-soft);\n  border-radius: var(--ty-radius-md);\n  font-family: var(--ty-font-sans);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-normal);\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  height: 40px;\n  transition: var(--ty-transition-all);\n  outline: none;\n  border: 2px solid;\n  border-color: var(--mobile-border-color);\n}\n\n.dropdown-mode-mobile .mobile-search-input::placeholder {\n  color: var(--ty-text-faint);\n}\n\n/* Mobile options container - floating card with elevation */\n.dropdown-mode-mobile .mobile-options-container {\n  position: relative;\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  -webkit-overflow-scrolling: touch;\n  background: var(--ty-surface-floating); /* Floating card background */\n  border-radius: var(--ty-radius-lg);\n  border: 1px solid var(--ty-border-soft);\n  box-shadow: \n    0 20px 25px -5px rgba(0, 0, 0, 0.1),\n    0 10px 10px -5px rgba(0, 0, 0, 0.04);\n  border: 2px solid;\n  border-color: var(--mobile-border-color);\n}\n\n/* Hide scrollbar but keep functionality */\n.dropdown-mode-mobile .mobile-options-container {\n  scrollbar-width: none; /* Firefox */\n  -ms-overflow-style: none; /* IE/Edge */\n}\n\n.dropdown-mode-mobile .mobile-options-container::-webkit-scrollbar {\n  display: none; /* Chrome, Safari, Opera */\n}\n\n/* Mobile option styling - native <option> only */\n.dropdown-mode-mobile .mobile-options-container ::slotted(option) {\n  display: block;\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  margin: 2px 8px;\n  color: var(--ty-text);\n  cursor: pointer;\n  transition: var(--ty-transition-all);\n  border: none;\n  background: transparent;\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-family: inherit;\n  width: calc(100% - 16px);\n  text-align: left;\n  box-sizing: border-box;\n  border-radius: var(--ty-radius-sm);\n  min-height: 36px;\n}\n\n.dropdown-mode-mobile .mobile-options-container ::slotted(option:active) {\n  background-color: var(--ty-bg-neutral-soft);\n}\n\n.dropdown-mode-mobile .mobile-options-container ::slotted(option[highlighted]) {\n  background-color: var(--ty-bg-primary-soft);\n  color: var(--ty-color-primary-mild);\n}\n\n.dropdown-mode-mobile .mobile-options-container ::slotted(option[selected]) {\n  background: var(--ty-bg-primary);\n  color: var(--ty-color-primary-strong);\n}\n\n.dropdown-mode-mobile .mobile-options-container ::slotted(option[hidden]),\n.dropdown-mode-mobile .mobile-options-container ::slotted(ty-option[hidden]),\n.dropdown-mode-mobile .mobile-options-container ::slotted(ty-tag[hidden]) {\n  display: none;\n}\n\n/* ==================== FLAVOR VARIANTS ==================== */\n/* Apply to both modes */\n\n:host([flavor=\"primary\"]) .dropdown-stub,\n:host([flavor=\"primary\"]) .dropdown-search-input {\n  border-color: var(--ty-color-primary);\n}\n\n:host([flavor=\"primary\"]) .dropdown-stub:hover,\n:host([flavor=\"primary\"]) .dropdown-search-input:focus {\n  border-color: var(--ty-color-primary-mild);\n  box-shadow: 0 0 0 3px var(--ty-color-primary-faint);\n}\n\n:host([flavor=\"secondary\"]) .dropdown-stub,\n:host([flavor=\"secondary\"]) .dropdown-search-input {\n  border-color: var(--ty-color-secondary);\n}\n\n:host([flavor=\"secondary\"]) .dropdown-stub:hover,\n:host([flavor=\"secondary\"]) .dropdown-search-input:focus {\n  border-color: var(--ty-color-secondary-mild);\n  box-shadow: 0 0 0 3px var(--ty-color-secondary-faint);\n}\n\n:host([flavor=\"success\"]) .dropdown-stub,\n:host([flavor=\"success\"]) .dropdown-search-input {\n  border-color: var(--ty-color-success);\n}\n\n:host([flavor=\"success\"]) .dropdown-stub:hover,\n:host([flavor=\"success\"]) .dropdown-search-input:focus {\n  border-color: var(--ty-color-success-mild);\n  box-shadow: 0 0 0 3px var(--ty-color-success-faint);\n}\n\n:host([flavor=\"danger\"]) .dropdown-stub,\n:host([flavor=\"danger\"]) .dropdown-search-input {\n  border-color: var(--ty-color-danger);\n}\n\n:host([flavor=\"danger\"]) .dropdown-stub:hover,\n:host([flavor=\"danger\"]) .dropdown-search-input:focus {\n  border-color: var(--ty-color-danger-mild);\n  box-shadow: 0 0 0 3px var(--ty-color-danger-faint);\n}\n\n:host([flavor=\"warning\"]) .dropdown-stub,\n:host([flavor=\"warning\"]) .dropdown-search-input {\n  border-color: var(--ty-color-warning);\n}\n\n:host([flavor=\"warning\"]) .dropdown-stub:hover,\n:host([flavor=\"warning\"]) .dropdown-search-input:focus {\n  border-color: var(--ty-color-warning-mild);\n  box-shadow: 0 0 0 3px var(--ty-color-warning-faint);\n}\n\n/* ==================== READONLY STATE ==================== */\n\n:host([readonly]) .dropdown-chevron {\n  display: none;\n}\n\n:host([readonly]) .dropdown-stub {\n  padding-right: var(--ty-spacing-3);\n}\n\n:host([readonly]) .dropdown-stub,\n:host([readonly]) .dropdown-stub slot[name=\"selected\"] {\n  cursor: initial;\n}\n\n/* ==================== LOADING STATE ====================\n   Spinner overlay shown inside the popup options area while\n   the parent (external-search mode) is fetching results.\n   Search input stays usable so users can keep refining.\n\n   Carries its own surface (background + radius + subtle border)\n   so it stays visible even when the host has restyled the popup\n   with a transparent or unusual background.\n   Override with --ty-loader-bg / --ty-loader-radius / --ty-loader-border\n   on the host element.\n*/\n.dropdown-loading {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  gap: var(--ty-spacing-2);\n  padding: var(--ty-spacing-4) var(--ty-spacing-3);\n  color: var(--ty-text-soft);\n  font-size: var(--ty-font-sm);\n  min-height: 4rem;\n  /* Match the .dropdown-options popup look \u2014 same background, border, radius, shadow */\n  background: var(--ty-loader-bg, var(--input-bg, var(--ty-input-bg)));\n  border: 1px solid var(--ty-loader-border, var(--input-border, var(--ty-input-border)));\n  border-radius: var(--ty-loader-radius, var(--ty-radius-lg));\n  box-shadow: var(--ty-loader-shadow, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04));\n  box-sizing: border-box;\n}\n\n.dropdown-options-wrapper.loading .dropdown-loading {\n  display: flex;\n}\n\n/* Make the loading slot transparent for layout so default fallback (spinner + text)\n   AND user-provided slotted content both act as direct flex children of .dropdown-loading. */\n.dropdown-loading > slot[name=\"loading\"] {\n  display: contents;\n}\n\n/* Mobile: full-screen dialog is the surface \u2014 drop the card chrome,\n   stack vertically, scale up so it feels native to a fullscreen view.\n   Slotted content adapts automatically since the slot is display:contents. */\n.dropdown-mode-mobile .dropdown-loading {\n  background: transparent;\n  border: none;\n  box-shadow: none;\n  flex: 1;\n  flex-direction: column;\n  gap: var(--ty-spacing-3);\n  padding: var(--ty-spacing-8) var(--ty-spacing-4);\n  min-height: 12rem;\n}\n\n.dropdown-mode-mobile .dropdown-loading-spinner {\n  width: 2rem;\n  height: 2rem;\n}\n\n.dropdown-mode-mobile .dropdown-loading-text {\n  font-size: var(--ty-font-base);\n}\n\n.dropdown-options-wrapper.loading .dropdown-options,\n.dropdown-options-wrapper.loading > slot#options-slot {\n  display: none;\n}\n\n.dropdown-loading-spinner {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.125rem;\n  height: 1.125rem;\n  flex-shrink: 0;\n  animation: ty-dropdown-spin 0.7s linear infinite;\n  color: var(--ty-color-primary);\n}\n\n.dropdown-loading-spinner svg {\n  width: 100%;\n  height: 100%;\n}\n\n.dropdown-loading-text {\n  color: var(--ty-text-soft);\n}\n\n@keyframes ty-dropdown-spin {\n  to { transform: rotate(360deg); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .dropdown-loading-spinner {\n    animation-duration: 1.6s;\n  }\n}\n\n/* Custom scrollbar styles */\n\n/* ===================================== */\n/* Custom Scrollbar - Vertical Track     */\n/* ===================================== */\n\n.ty-scrollbar-track-y {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-y.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-y.has-overflow:hover,\n.ty-scrollbar-track-y.has-overflow.scrolling,\n.ty-scrollbar-track-y.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-y::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-y:hover::before,\n.ty-scrollbar-track-y.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, rgba(0, 0, 0, 0.06));\n}\n\n.ty-scrollbar-thumb-y {\n  position: absolute;\n  right: 0;\n  width: 100%;\n  min-height: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, rgba(0, 0, 0, 0.35));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: background 0.15s ease-out;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-y:hover,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-hover, rgba(0, 0, 0, 0.50));\n}\n\n.ty-scrollbar-thumb-y:active,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-active, rgba(0, 0, 0, 0.60));\n}\n\n/* ===================================== */\n/* Custom Scrollbar - Horizontal Track   */\n/* ===================================== */\n\n.ty-scrollbar-track-x {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-x.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-x.has-overflow:hover,\n.ty-scrollbar-track-x.has-overflow.scrolling,\n.ty-scrollbar-track-x.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-x::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-x:hover::before,\n.ty-scrollbar-track-x.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, rgba(0, 0, 0, 0.06));\n}\n\n.ty-scrollbar-thumb-x {\n  position: absolute;\n  bottom: 0;\n  height: 100%;\n  min-width: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, rgba(0, 0, 0, 0.35));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: background 0.15s ease-out;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-x:hover,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-hover, rgba(0, 0, 0, 0.50));\n}\n\n.ty-scrollbar-thumb-x:active,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-active, rgba(0, 0, 0, 0.60));\n}\n\n/* ===================================== */\n/* Touch devices - hide custom scrollbar */\n/* ===================================== */\n\n@media (pointer: coarse) and (hover: none) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x {\n    display: none !important;\n  }\n}\n\n/* Respect reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x,\n  .ty-scrollbar-thumb-y,\n  .ty-scrollbar-thumb-x {\n    transition-duration: 0ms !important;\n  }\n}\n\n";
 //# sourceMappingURL=dropdown.d.ts.map

package/lib/styles/dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../src/styles/dropdown.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAIH,eAAO,MAAM,cAAc,41+BA08B1B,CAAC"}
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../src/styles/dropdown.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAIH,eAAO,MAAM,cAAc,u0kCA4iC1B,CAAC"}

package/lib/styles/dropdown.js

@@ -16,7 +16,6 @@ export const dropdownStyles = `
 :host {
   display: block;
   width: auto;
-  min-width: 200px;
 }
 
 :host {
@@ -31,13 +30,16 @@ export const dropdownStyles = `
 }
 
 /* Label styling */
-.dropdown-label {
-  font-size: 14px;
-  font-weight: 500;
+.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;
-  line-height: 1.25;
   padding-left: 12px;
+  display: flex;
+  align-items: center;
 }
 
 .required-icon {
@@ -77,7 +79,7 @@ export const dropdownStyles = `
   letter-spacing: var(--ty-tracking-sm);
   font-weight: var(--ty-font-normal);
   min-height: var(--ty-size-md);
-  padding: var(--ty-spacing-2) var(--ty-spacing-3);
+  padding: 0 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;
@@ -977,6 +979,102 @@ export const dropdownStyles = `
   cursor: initial;
 }
 
+/* ==================== LOADING STATE ====================
+   Spinner overlay shown inside the popup options area while
+   the parent (external-search mode) is fetching results.
+   Search input stays usable so users can keep refining.
+
+   Carries its own surface (background + radius + subtle border)
+   so it stays visible even when the host has restyled the popup
+   with a transparent or unusual background.
+   Override with --ty-loader-bg / --ty-loader-radius / --ty-loader-border
+   on the host element.
+*/
+.dropdown-loading {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ty-spacing-2);
+  padding: var(--ty-spacing-4) var(--ty-spacing-3);
+  color: var(--ty-text-soft);
+  font-size: var(--ty-font-sm);
+  min-height: 4rem;
+  /* Match the .dropdown-options popup look — same background, border, radius, shadow */
+  background: var(--ty-loader-bg, var(--input-bg, var(--ty-input-bg)));
+  border: 1px solid var(--ty-loader-border, var(--input-border, var(--ty-input-border)));
+  border-radius: var(--ty-loader-radius, var(--ty-radius-lg));
+  box-shadow: var(--ty-loader-shadow, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04));
+  box-sizing: border-box;
+}
+
+.dropdown-options-wrapper.loading .dropdown-loading {
+  display: flex;
+}
+
+/* Make the loading slot transparent for layout so default fallback (spinner + text)
+   AND user-provided slotted content both act as direct flex children of .dropdown-loading. */
+.dropdown-loading > slot[name="loading"] {
+  display: contents;
+}
+
+/* Mobile: full-screen dialog is the surface — drop the card chrome,
+   stack vertically, scale up so it feels native to a fullscreen view.
+   Slotted content adapts automatically since the slot is display:contents. */
+.dropdown-mode-mobile .dropdown-loading {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--ty-spacing-3);
+  padding: var(--ty-spacing-8) var(--ty-spacing-4);
+  min-height: 12rem;
+}
+
+.dropdown-mode-mobile .dropdown-loading-spinner {
+  width: 2rem;
+  height: 2rem;
+}
+
+.dropdown-mode-mobile .dropdown-loading-text {
+  font-size: var(--ty-font-base);
+}
+
+.dropdown-options-wrapper.loading .dropdown-options,
+.dropdown-options-wrapper.loading > slot#options-slot {
+  display: none;
+}
+
+.dropdown-loading-spinner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.125rem;
+  height: 1.125rem;
+  flex-shrink: 0;
+  animation: ty-dropdown-spin 0.7s linear infinite;
+  color: var(--ty-color-primary);
+}
+
+.dropdown-loading-spinner svg {
+  width: 100%;
+  height: 100%;
+}
+
+.dropdown-loading-text {
+  color: var(--ty-text-soft);
+}
+
+@keyframes ty-dropdown-spin {
+  to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dropdown-loading-spinner {
+    animation-duration: 1.6s;
+  }
+}
+
 /* Custom scrollbar styles */
 ${customScrollbarStyles}
 `;

package/lib/styles/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../src/styles/dropdown.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAE9D,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAy8B5B,qBAAqB;CACtB,CAAC"}
+{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../src/styles/dropdown.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAE9D,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2iC5B,qBAAqB;CACtB,CAAC"}

package/lib/styles/file-upload.d.ts

@@ -0,0 +1,2 @@
+export declare const fileUploadStyles = "\n:host {\n  display: block;\n  font-family: var(--ty-font-sans);\n  width: 100%;\n}\n\n.file-upload-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n/* ===== LABEL ===== */\n\n.upload-label {\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-medium);\n  color: var(--ty-label-color);\n  margin-bottom: 6px;\n  padding-left: 4px;\n  display: flex;\n  align-items: center;\n}\n\n.required-icon {\n  color: var(--ty-color-danger);\n  margin-left: 4px;\n  font-size: 0.75rem;\n  line-height: 1;\n}\n\n/* ===== DROP ZONE ===== */\n\n.drop-zone {\n  border: 2px dashed var(--ty-border);\n  border-radius: var(--ty-radius-base);\n  padding: 2rem 1.5rem;\n  text-align: center;\n  cursor: pointer;\n  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;\n  outline: none;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  min-height: 140px;\n  user-select: none;\n}\n\n.drop-zone:hover:not(.disabled) {\n  border-color: var(--ty-input-border-hover);\n  background: var(--ty-surface-content);\n}\n\n.drop-zone.focused {\n  border-color: var(--ty-input-border-focus);\n  box-shadow: 0 0 0 3px var(--ty-input-shadow-focus);\n}\n\n.drop-zone.drag-active {\n  border-color: var(--ty-color-primary);\n  border-style: solid;\n  background: var(--ty-bg-primary-);\n}\n\n.drop-zone.drag-active .upload-icon {\n  color: var(--ty-color-primary);\n  transform: translateY(-2px);\n}\n\n.drop-zone.has-files {\n  min-height: 80px;\n  padding: 1.25rem 1.5rem;\n}\n\n.drop-zone.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.drop-zone.error {\n  border-color: var(--ty-color-danger);\n}\n\n.drop-zone.error:not(.disabled) {\n  background: var(--ty-bg-danger-);\n}\n\n/* ===== UPLOAD ICON ===== */\n\n.upload-icon {\n  color: var(--ty-text-faint);\n  width: 2.5rem;\n  height: 2.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: color 0.15s ease, transform 0.15s ease;\n  pointer-events: none;\n}\n\n.upload-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* ===== HINT TEXT ===== */\n\n.upload-hint {\n  color: var(--ty-text-soft);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  pointer-events: none;\n}\n\n.browse-link {\n  color: var(--ty-color-primary);\n  font-weight: var(--ty-font-medium);\n}\n\n.upload-sub-hint {\n  color: var(--ty-text-faint);\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  pointer-events: none;\n}\n\n/* ===== FILE LIST ===== */\n\n.file-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n  margin-top: 0.5rem;\n}\n\n.file-item {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.5rem 0.75rem;\n  border-radius: var(--ty-radius-base);\n  background: var(--ty-surface-content);\n  border: 1px solid var(--ty-border-soft);\n}\n\n.file-icon {\n  color: var(--ty-text-faint);\n  flex-shrink: 0;\n  width: 1rem;\n  height: 1rem;\n  display: flex;\n  align-items: center;\n}\n\n.file-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n.file-name {\n  flex: 1;\n  font-size: var(--ty-font-sm);\n  color: var(--ty-text);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n\n.file-size {\n  font-size: var(--ty-font-xs);\n  color: var(--ty-text-faint);\n  flex-shrink: 0;\n  font-variant-numeric: tabular-nums;\n}\n\n.file-remove {\n  flex-shrink: 0;\n  cursor: pointer;\n  color: var(--ty-text-faint);\n  width: 1.25rem;\n  height: 1.25rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  transition: color 0.15s ease, background-color 0.15s ease;\n  border: none;\n  background: none;\n  padding: 0;\n  outline: none;\n}\n\n.file-remove:hover {\n  color: var(--ty-color-danger);\n  background: var(--ty-bg-danger-);\n}\n\n.file-remove:focus-visible {\n  box-shadow: 0 0 0 2px var(--ty-color-danger);\n}\n\n.file-remove svg {\n  width: 12px;\n  height: 12px;\n}\n\n/* ===== ERROR MESSAGE ===== */\n\n.error-message {\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  color: var(--ty-color-danger);\n  margin-top: 4px;\n  padding-left: 4px;\n}\n\n/* ===== ACCESSIBILITY ===== */\n\n@media (prefers-reduced-motion: reduce) {\n  .drop-zone,\n  .upload-icon,\n  .file-remove {\n    transition: none;\n  }\n}\n\n@media (prefers-contrast: high) {\n  .drop-zone {\n    border-width: 3px;\n  }\n}\n";
+//# sourceMappingURL=file-upload.d.ts.map

package/lib/styles/file-upload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.d.ts","sourceRoot":"","sources":["../../src/styles/file-upload.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,yhJA+O5B,CAAA"}