tyrell-components 1.0.0-TC18 → 1.0.0-TC22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/css/tyrell-brand.css +767 -0
  2. package/css/tyrell.css +64 -168
  3. package/dist/tyrell-brand.css +767 -0
  4. package/dist/tyrell.css +64 -168
  5. package/dist/tyrell.js +1 -1
  6. package/lib/components/modal.d.ts +24 -4
  7. package/lib/components/modal.d.ts.map +1 -1
  8. package/lib/components/modal.js +29 -15
  9. package/lib/components/modal.js.map +1 -1
  10. package/lib/components/tooltip.js +1 -1
  11. package/lib/styles/calendar-month.d.ts +1 -1
  12. package/lib/styles/calendar-month.js +3 -3
  13. package/lib/styles/checkbox.d.ts +1 -1
  14. package/lib/styles/checkbox.d.ts.map +1 -1
  15. package/lib/styles/custom-scrollbar.d.ts +1 -1
  16. package/lib/styles/custom-scrollbar.d.ts.map +1 -1
  17. package/lib/styles/custom-scrollbar.js +8 -8
  18. package/lib/styles/date-picker.d.ts +1 -1
  19. package/lib/styles/date-picker.d.ts.map +1 -1
  20. package/lib/styles/date-picker.js +16 -16
  21. package/lib/styles/dropdown.d.ts +1 -1
  22. package/lib/styles/dropdown.d.ts.map +1 -1
  23. package/lib/styles/dropdown.js +7 -7
  24. package/lib/styles/input.d.ts +1 -1
  25. package/lib/styles/input.d.ts.map +1 -1
  26. package/lib/styles/input.js +16 -16
  27. package/lib/styles/multiselect.d.ts +1 -1
  28. package/lib/styles/multiselect.d.ts.map +1 -1
  29. package/lib/styles/multiselect.js +1 -1
  30. package/lib/styles/option.d.ts +1 -1
  31. package/lib/styles/option.js +1 -1
  32. package/lib/styles/radio.d.ts +1 -1
  33. package/lib/styles/radio.d.ts.map +1 -1
  34. package/lib/styles/scroll-container.d.ts +1 -1
  35. package/lib/styles/scroll-container.d.ts.map +1 -1
  36. package/lib/styles/scroll-container.js +10 -10
  37. package/lib/styles/step.d.ts +1 -1
  38. package/lib/styles/step.d.ts.map +1 -1
  39. package/lib/styles/switch.d.ts +1 -1
  40. package/lib/styles/switch.d.ts.map +1 -1
  41. package/lib/styles/tab.d.ts +1 -1
  42. package/lib/styles/tab.d.ts.map +1 -1
  43. package/lib/styles/tag.d.ts +1 -1
  44. package/lib/styles/tag.d.ts.map +1 -1
  45. package/lib/styles/tag.js +15 -15
  46. package/lib/styles/textarea.d.ts +1 -1
  47. package/lib/styles/textarea.js +1 -1
  48. package/lib/styles/tooltip.d.ts.map +1 -1
  49. package/lib/styles/tooltip.js +12 -15
  50. package/lib/styles/tooltip.js.map +1 -1
  51. package/lib/styles/wizard.d.ts +12 -7
  52. package/lib/styles/wizard.d.ts.map +1 -1
  53. package/lib/styles/wizard.js +46 -74
  54. package/lib/styles/wizard.js.map +1 -1
  55. package/lib/version.d.ts +1 -1
  56. package/lib/version.js +1 -1
  57. package/package.json +3 -3
package/lib/styles/date-picker.js CHANGED
@@ -31,7 +31,7 @@ export const datePickerStyles = `
31
31
  ========================================================================== */
32
32
  --ty-calendar-surface-bg: var(--ty-surface-floating);
33
33
  --ty-calendar-surface-border: var(--ty-input-border);
34
- --ty-calendar-surface-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.1);
34
+ --ty-calendar-surface-shadow: var(--ty-shadow-lg, 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.1));
35
35
  --ty-calendar-surface-radius: var(--ty-radius-lg);
36
36
 
37
37
  /* ==========================================================================
@@ -172,13 +172,13 @@ export const datePickerStyles = `
172
172
  }
173
173
 
174
174
  .date-picker-stub.primary:hover:not([disabled]) {
175
- border-color: var(--ty-color-primary-mild);
175
+ border-color: var(--ty-color-primary-bold);
176
176
  }
177
177
 
178
178
  .date-picker-stub.primary:focus,
179
179
  .date-picker-stub.primary.open {
180
- border-color: var(--ty-color-primary-mild);
181
- box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
180
+ border-color: var(--ty-color-primary-bold);
181
+ box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-primary) 15%, transparent);
182
182
  }
183
183
 
184
184
  /* Secondary - Supporting action focus state */
@@ -187,13 +187,13 @@ export const datePickerStyles = `
187
187
  }
188
188
 
189
189
  .date-picker-stub.secondary:hover:not([disabled]) {
190
- border-color: var(--ty-color-secondary-mild);
190
+ border-color: var(--ty-color-secondary-bold);
191
191
  }
192
192
 
193
193
  .date-picker-stub.secondary:focus,
194
194
  .date-picker-stub.secondary.open {
195
- border-color: var(--ty-color-secondary-mild);
196
- box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
195
+ border-color: var(--ty-color-secondary-bold);
196
+ box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-secondary) 15%, transparent);
197
197
  }
198
198
 
199
199
  /* Success - Valid/confirmed input state */
@@ -202,13 +202,13 @@ export const datePickerStyles = `
202
202
  }
203
203
 
204
204
  .date-picker-stub.success:hover:not([disabled]) {
205
- border-color: var(--ty-color-success-mild);
205
+ border-color: var(--ty-color-success-bold);
206
206
  }
207
207
 
208
208
  .date-picker-stub.success:focus,
209
209
  .date-picker-stub.success.open {
210
- border-color: var(--ty-color-success-mild);
211
- box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
210
+ border-color: var(--ty-color-success-bold);
211
+ box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-success) 15%, transparent);
212
212
  }
213
213
 
214
214
  /* Danger - Error/invalid input state */
@@ -217,13 +217,13 @@ export const datePickerStyles = `
217
217
  }
218
218
 
219
219
  .date-picker-stub.danger:hover:not([disabled]) {
220
- border-color: var(--ty-color-danger-mild);
220
+ border-color: var(--ty-color-danger-bold);
221
221
  }
222
222
 
223
223
  .date-picker-stub.danger:focus,
224
224
  .date-picker-stub.danger.open {
225
- border-color: var(--ty-color-danger-mild);
226
- box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
225
+ border-color: var(--ty-color-danger-bold);
226
+ box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-danger) 15%, transparent);
227
227
  }
228
228
 
229
229
  /* Warning - Caution/attention needed input state */
@@ -232,13 +232,13 @@ export const datePickerStyles = `
232
232
  }
233
233
 
234
234
  .date-picker-stub.warning:hover:not([disabled]) {
235
- border-color: var(--ty-color-warning-mild);
235
+ border-color: var(--ty-color-warning-bold);
236
236
  }
237
237
 
238
238
  .date-picker-stub.warning:focus,
239
239
  .date-picker-stub.warning.open {
240
- border-color: var(--ty-color-warning-mild);
241
- box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
240
+ border-color: var(--ty-color-warning-bold);
241
+ box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-warning) 15%, transparent);
242
242
  }
243
243
 
244
244
  /* Text content */
package/lib/styles/dropdown.d.ts CHANGED
@@ -8,5 +8,5 @@
8
8
  *
9
9
  * This prevents CSS conflicts between desktop dialog and mobile modal implementations.
10
10
  */
11
- 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";
11
+ 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-bold);\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-bold);\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-bold);\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-bold);\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-bold);\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-bold);\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-bold);\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, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\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, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\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, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\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, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\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, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\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, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\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, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\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, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\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";
12
12
  //# sourceMappingURL=dropdown.d.ts.map
package/lib/styles/dropdown.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../src/styles/dropdown.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAIH,eAAO,MAAM,cAAc,u0kCA4iC1B,CAAC"}
1
+ {"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../src/styles/dropdown.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAIH,eAAO,MAAM,cAAc,6rlCA4iC1B,CAAC"}
package/lib/styles/dropdown.js CHANGED
@@ -522,7 +522,7 @@ export const dropdownStyles = `
522
522
 
523
523
  .dropdown-mode-desktop .dropdown-options ::slotted(option[highlighted]) {
524
524
  background-color: var(--ty-bg-primary-soft);
525
- color: var(--ty-color-primary-mild);
525
+ color: var(--ty-color-primary-bold);
526
526
  }
527
527
 
528
528
  .dropdown-mode-desktop .dropdown-options ::slotted(option[selected]) {
@@ -892,7 +892,7 @@ export const dropdownStyles = `
892
892
 
893
893
  .dropdown-mode-mobile .mobile-options-container ::slotted(option[highlighted]) {
894
894
  background-color: var(--ty-bg-primary-soft);
895
- color: var(--ty-color-primary-mild);
895
+ color: var(--ty-color-primary-bold);
896
896
  }
897
897
 
898
898
  .dropdown-mode-mobile .mobile-options-container ::slotted(option[selected]) {
@@ -916,7 +916,7 @@ export const dropdownStyles = `
916
916
 
917
917
  :host([flavor="primary"]) .dropdown-stub:hover,
918
918
  :host([flavor="primary"]) .dropdown-search-input:focus {
919
- border-color: var(--ty-color-primary-mild);
919
+ border-color: var(--ty-color-primary-bold);
920
920
  box-shadow: 0 0 0 3px var(--ty-color-primary-faint);
921
921
  }
922
922
 
@@ -927,7 +927,7 @@ export const dropdownStyles = `
927
927
 
928
928
  :host([flavor="secondary"]) .dropdown-stub:hover,
929
929
  :host([flavor="secondary"]) .dropdown-search-input:focus {
930
- border-color: var(--ty-color-secondary-mild);
930
+ border-color: var(--ty-color-secondary-bold);
931
931
  box-shadow: 0 0 0 3px var(--ty-color-secondary-faint);
932
932
  }
933
933
 
@@ -938,7 +938,7 @@ export const dropdownStyles = `
938
938
 
939
939
  :host([flavor="success"]) .dropdown-stub:hover,
940
940
  :host([flavor="success"]) .dropdown-search-input:focus {
941
- border-color: var(--ty-color-success-mild);
941
+ border-color: var(--ty-color-success-bold);
942
942
  box-shadow: 0 0 0 3px var(--ty-color-success-faint);
943
943
  }
944
944
 
@@ -949,7 +949,7 @@ export const dropdownStyles = `
949
949
 
950
950
  :host([flavor="danger"]) .dropdown-stub:hover,
951
951
  :host([flavor="danger"]) .dropdown-search-input:focus {
952
- border-color: var(--ty-color-danger-mild);
952
+ border-color: var(--ty-color-danger-bold);
953
953
  box-shadow: 0 0 0 3px var(--ty-color-danger-faint);
954
954
  }
955
955
 
@@ -960,7 +960,7 @@ export const dropdownStyles = `
960
960
 
961
961
  :host([flavor="warning"]) .dropdown-stub:hover,
962
962
  :host([flavor="warning"]) .dropdown-search-input:focus {
963
- border-color: var(--ty-color-warning-mild);
963
+ border-color: var(--ty-color-warning-bold);
964
964
  box-shadow: 0 0 0 3px var(--ty-color-warning-faint);
965
965
  }
966
966
 
package/lib/styles/input.d.ts CHANGED
@@ -3,5 +3,5 @@
3
3
  * PORTED FROM: clj/ty/components/input.css
4
4
  * Phase A: Regular input styles only (no checkbox, no numeric formatting)
5
5
  */
6
- export declare const inputStyles = "\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";
6
+ export declare const inputStyles = "\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-bold);\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-bold);\n}\n\n.input-wrapper.primary.focused {\n border-color: var(--ty-color-primary-bold);\n box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-primary) 15%, transparent);\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-bold);\n box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-secondary) 15%, transparent);\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-bold);\n}\n\n.input-wrapper.success.focused {\n border-color: var(--ty-color-success-bold);\n box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-success) 15%, transparent);\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-bold);\n}\n\n.input-wrapper.danger.focused {\n border-color: var(--ty-color-danger-bold);\n box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-danger) 15%, transparent);\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-bold);\n}\n\n.input-wrapper.warning.focused {\n border-color: var(--ty-color-warning-bold);\n box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-warning) 15%, transparent);\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 color-mix(in oklab, var(--ty-color-danger) 15%, transparent);\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";
7
7
  //# sourceMappingURL=input.d.ts.map
package/lib/styles/input.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/styles/input.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,eAAO,MAAM,WAAW,g8bAsqBvB,CAAA"}
1
+ {"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/styles/input.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,eAAO,MAAM,WAAW,sqcAsqBvB,CAAA"}
package/lib/styles/input.js CHANGED
@@ -137,7 +137,7 @@ export const inputStyles = `
137
137
  }
138
138
 
139
139
  .input-wrapper.error.focused {
140
- border-color: var(--ty-color-danger-mild);
140
+ border-color: var(--ty-color-danger-bold);
141
141
  box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));
142
142
  }
143
143
 
@@ -259,12 +259,12 @@ input::placeholder {
259
259
  }
260
260
 
261
261
  .input-wrapper.primary:hover:not(.disabled) {
262
- border-color: var(--ty-color-primary-mild);
262
+ border-color: var(--ty-color-primary-bold);
263
263
  }
264
264
 
265
265
  .input-wrapper.primary.focused {
266
- border-color: var(--ty-color-primary-mild);
267
- box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
266
+ border-color: var(--ty-color-primary-bold);
267
+ box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-primary) 15%, transparent);
268
268
  }
269
269
 
270
270
  /* Secondary */
@@ -273,8 +273,8 @@ input::placeholder {
273
273
  }
274
274
 
275
275
  .input-wrapper.secondary.focused {
276
- border-color: var(--ty-color-secondary-mild);
277
- box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
276
+ border-color: var(--ty-color-secondary-bold);
277
+ box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-secondary) 15%, transparent);
278
278
  }
279
279
 
280
280
  /* Success */
@@ -283,12 +283,12 @@ input::placeholder {
283
283
  }
284
284
 
285
285
  .input-wrapper.success:hover:not(.disabled) {
286
- border-color: var(--ty-color-success-mild);
286
+ border-color: var(--ty-color-success-bold);
287
287
  }
288
288
 
289
289
  .input-wrapper.success.focused {
290
- border-color: var(--ty-color-success-mild);
291
- box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
290
+ border-color: var(--ty-color-success-bold);
291
+ box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-success) 15%, transparent);
292
292
  }
293
293
 
294
294
  /* Danger */
@@ -297,12 +297,12 @@ input::placeholder {
297
297
  }
298
298
 
299
299
  .input-wrapper.danger:hover:not(.disabled) {
300
- border-color: var(--ty-color-danger-mild);
300
+ border-color: var(--ty-color-danger-bold);
301
301
  }
302
302
 
303
303
  .input-wrapper.danger.focused {
304
- border-color: var(--ty-color-danger-mild);
305
- box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
304
+ border-color: var(--ty-color-danger-bold);
305
+ box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-danger) 15%, transparent);
306
306
  }
307
307
 
308
308
  /* Warning */
@@ -311,12 +311,12 @@ input::placeholder {
311
311
  }
312
312
 
313
313
  .input-wrapper.warning:hover:not(.disabled) {
314
- border-color: var(--ty-color-warning-mild);
314
+ border-color: var(--ty-color-warning-bold);
315
315
  }
316
316
 
317
317
  .input-wrapper.warning.focused {
318
- border-color: var(--ty-color-warning-mild);
319
- box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
318
+ border-color: var(--ty-color-warning-bold);
319
+ box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-warning) 15%, transparent);
320
320
  }
321
321
 
322
322
  /* Neutral (default) */
@@ -603,7 +603,7 @@ input:focus-visible {
603
603
  }
604
604
 
605
605
  .checkbox-container.error:focus {
606
- box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
606
+ box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-danger) 15%, transparent);
607
607
  }
608
608
 
609
609
  /* Required state */