tyrell-components 1.0.0-TC7 → 1.0.0-TC9

package/lib/styles/multiselect.d.ts

@@ -2,5 +2,5 @@
  * Multiselect Component Styles
  * PORTED FROM: clj/ty/components/multiselect.css
  */
-export declare const multiselectStyles = "\n/* Multiselect-specific styles extending dropdown base styles */\n\n:host {\n  --mobile-border-color: var(--ty-border, #5858587d);\n}\n\n/* ===== DIALOG POSITIONING SUPPORT ===== */\n\n.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  /* Modal handles z-index automatically */\n\n  /* Hidden by default */\n  opacity: 0;\n  transition: opacity 400ms ease;\n\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-dialog[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n/* Direction-based positioning with CSS classes */\n.dropdown-dialog.position-below {\n  left: var(--dropdown-x);\n  top: var(--dropdown-y);\n}\n\n.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-dialog.position-above .dropdown-header {\n  margin-top: 4px;\n}\n\n.dropdown-dialog.position-below .dropdown-header {\n  margin-bottom: 4px;\n}\n\n.dropdown-dialog.position-below .dropdown-options {\n  /* Optional: Add upward-pointing shadow for below positioning */\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/* Animate when .open class is added */\n.dropdown-dialog.open {\n  opacity: 1;\n}\n\n.dropdown-dialog.open .dropdown-options {\n  opacity: 1;\n  transform: translateY(0) scale(1);\n}\n\n.dropdown-dialog::backdrop {\n  background: transparent;\n}\n\n/* ===== DIALOG HEADER ===== */\n\n.dropdown-header {\n  display: flex;\n  align-items: center;\n  gap: var(--ty-spacing-2);\n  position: relative;\n}\n\n.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-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-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-search-input::placeholder {\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n}\n\n.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-search-chevron.open {\n  transform: translateY(-50%) rotate(180deg);\n}\n\n.dropdown-search-chevron svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* ===== MULTISELECT-SPECIFIC STYLES ===== */\n\n/* Multiselect stub modifications */\n.multiselect-stub {\n  min-height: 2.5rem;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.25rem;\n  align-items: center;\n  padding: 0.5rem 2.5rem 0.5rem 0.75rem;\n  /* Transitions - includes opacity for open state */\n  transition: var(--ty-transition-all), opacity 0.2s ease;\n  outline: none;\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  cursor: pointer;\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.multiselect-stub:hover {\n  border-color: var(--input-border-hover, var(--ty-input-border-hover));\n}\n\n.multiselect-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/* Hide stub when dropdown is open */\n.dropdown-wrapper:has(.dropdown-chevron.open) .multiselect-stub {\n  opacity: 0;\n  pointer-events: none;\n}\n\n/* Hide stub chips when mobile dialog is open (let modal show them) */\n.dropdown-mode-mobile .dropdown-wrapper:has(.mobile-dialog[open]) .multiselect-chips {\n  display: none;\n}\n\n/* When tags are present, reduce padding to make room */\n.multiselect-stub.has-tags {\n  padding: 0.25rem 2.5rem 0.25rem 0.5rem;\n  width: 100%;\n}\n\n.multiselect-stub.has-tags slot[name=\"selected\"] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.25rem;\n}\n\n/* ===== CHEVRON INDICATOR ===== */\n\n.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-chevron.open {\n  transform: translateY(-50%) rotate(180deg);\n}\n\n.dropdown-chevron svg {\n  width: 100%;\n  height: 100%;\n}\n\n\n/* Tags container */\n.multiselect-chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  align-items: center;\n  min-width: 0;\n}\n\n.dropdown-placeholder {\n  flex-grow: 1;\n  color: var(--input-placeholder, var(--ty-input-placeholder, #9ca3af));\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-light);\n  font-style: italic;\n}\n\n/* Placeholder styling when tags are present */\n.dropdown-placeholder.hidden {\n  display: none;\n}\n\n/* Options area styling - Override for multiselect */\n.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\n  /* Animation properties */\n  transform: translateY(-8px) scale(0.95);\n  transition:\n    opacity 200ms cubic-bezier(0.16, 1, 0.3, 1),\n    transform 200ms cubic-bezier(0.16, 1, 0.3, 1);\n\n  /* Multiselect-specific: flex wrap for tags */\n  display: flex;\n  flex-wrap: wrap;\n  padding: 0.5rem;\n  gap: 0.5rem;\n\n}\n\n/* Hide native scrollbar only when custom scrollbar is active */\n.dropdown-options.ty-custom-scroll {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.dropdown-options.ty-custom-scroll::-webkit-scrollbar {\n  display: none;\n}\n\n/* Options wrapper - positioned container for scrollbar track */\n.dropdown-options-wrapper {\n  position: relative;\n}\n\n/* Show custom scrollbar on hover */\n.dropdown-options-wrapper:hover .ty-scrollbar-track-y.has-overflow {\n  opacity: 1;\n}\n\n/* Make ty-tags in dropdown clickable with pointer cursor */\n.dropdown-options ty-tag {\n  user-select: none;\n  transition: transform 0.1s ease;\n}\n\n.dropdown-options ty-tag:hover {\n  transform: scale(1.02);\n}\n\n.dropdown-options ty-tag:active {\n  transform: scale(0.98);\n}\n\n/* Visual feedback for selected tags in options */\n.dropdown-options ty-tag[selected] {\n  opacity: 0.5;\n}\n\n/* Ensure ty-tag components in multiselect have proper sizing */\n.multiselect-chips ty-tag {\n  max-width: 150px;\n}\n\n/* Responsive adjustments */\n@media (max-width: 640px) {\n  .multiselect-chips ty-tag {\n    max-width: 100px;\n  }\n}\n\n\n/* Ensure proper spacing in container layouts */\n.multiselect-container {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n/* ===== DROPDOWN WRAPPER & LABEL ===== */\n\n.dropdown-wrapper {\n  position: relative;\n  display: block;\n  width: 100%;\n}\n\n.dropdown-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: #ef4444;\n  width: 12px;\n  height: 12px;\n  vertical-align: middle;\n  margin-left: 4px;\n}\n\n.required-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n:host([disabled]) .multiselect-container {\n  pointer-events: none;\n}\n\n/* ============================================================================\n   MOBILE MODAL STYLES\n   ============================================================================ */\n\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; /* Position content from top */\n  border: none;\n  background: transparent; /* Backdrop handles background */\n  /* Note: Don't set display - browser controls <dialog> visibility */\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.dropdown-mode-mobile .mobile-dialog-content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: calc(100% - 32px); /* Side margins */\n  max-width: 400px; /* Constrained width like dropdown */\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.dropdown-mode-mobile .mobile-search-input:focus {\n  border-color: var(--ty-border);\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 (matches dropdown.ts) */\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 (matches dropdown.ts) */\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: 2px solid;\n  border-color: var(--mobile-border-color);\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}\n\n.dropdown-mode-mobile .mobile-search-input::placeholder {\n  color: var(--ty-text-faint);\n}\n\n.dropdown-mode-mobile .mobile-search-input:focus {\n  border-color: var(--ty-border);\n}\n\n/* ============================================================================\n   MOBILE BODY & SECTIONS - UPDATED STRUCTURE\n   ============================================================================ */\n\n/* Mobile body - contains both sections */\n.dropdown-mode-mobile .mobile-body {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  height: var(--body-height, 350px);\n  max-height: 350px;\n  overflow: hidden;\n  background: var(--ty-surface-floating);\n  border-radius: var(--ty-radius-lg);\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/* ===== SECTION HEADERS - Fixed 48px height ===== */\n\n.dropdown-mode-mobile .section-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 48px;\n  flex-shrink: 0;\n  padding: 0 16px;\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--ty-text);\n  background: var(--ty-bg-neutral-soft);\n  border-bottom: 1px solid var(--ty-border-faint);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n/* Expanded section is mild (already viewing it), collapsed is normal (draws attention) */\n.dropdown-mode-mobile [data-expanded=\"false\"] .section-header {\n  color: var(--ty-text);\n}\n\n.dropdown-mode-mobile [data-expanded=\"true\"] .section-header {\n  color: var(--ty-text-mild);\n}\n\n.dropdown-mode-mobile .section-header:hover {\n  background: var(--ty-bg-neutral);\n}\n\n.dropdown-mode-mobile .section-header:active {\n  background: var(--ty-bg-neutral-mild);\n}\n\n.dropdown-mode-mobile .section-header .section-title {\n  flex: 1;\n}\n\n.dropdown-mode-mobile .section-header .section-count {\n  font-weight: 400;\n  opacity: 0.7;\n  margin-left: 0.25rem;\n}\n\n/* Chevron indicator (only for selected section) */\n.dropdown-mode-mobile .section-header .section-chevron {\n  width: 16px;\n  height: 16px;\n  color: var(--ty-text-faint);\n  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.dropdown-mode-mobile .section-header .section-chevron svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* Rotate chevron when expanded */\n.dropdown-mode-mobile .mobile-selected-section[data-expanded=\"true\"] .section-chevron {\n  transform: rotate(180deg);\n}\n\n/* Available section header - not clickable */\n.dropdown-mode-mobile .mobile-available-section .section-header {\n  cursor: default;\n}\n\n.dropdown-mode-mobile .mobile-available-section .section-header:hover {\n  background: var(--ty-bg-neutral-soft);\n}\n\n/* ===== SELECTED SECTION - Expandable with smooth transition ===== */\n\n.dropdown-mode-mobile .mobile-selected-section {\n  display: flex;\n  flex-direction: column;\n  background: var(--ty-surface-elevated);\n  border-bottom: 2px solid var(--ty-border);\n  overflow: hidden;\n  transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Collapsed state - just header (48px) */\n.dropdown-mode-mobile .mobile-selected-section[data-expanded=\"false\"] {\n  max-height: 48px;\n  flex: 0 0 48px;\n}\n\n/* Expanded state - takes remaining space */\n.dropdown-mode-mobile .mobile-selected-section[data-expanded=\"true\"] {\n  max-height: 1000px; /* Large enough for content */\n  flex: 1;\n}\n\n.dropdown-mode-mobile .mobile-selected-section .section-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 0.75rem 1rem;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  align-content: flex-start;\n}\n\n/* ===== AVAILABLE SECTION ===== */\n\n.dropdown-mode-mobile .mobile-available-section {\n  display: flex;\n  flex-direction: column;\n  background: var(--ty-surface-floating);\n  overflow: hidden;\n  transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Collapsed state - just header (48px) */\n.dropdown-mode-mobile .mobile-available-section[data-expanded=\"false\"] {\n  max-height: 48px;\n  flex: 0 0 48px;\n}\n\n/* Expanded state - takes remaining space */\n.dropdown-mode-mobile .mobile-available-section[data-expanded=\"true\"] {\n  max-height: 1000px; /* Large enough for content */\n  flex: 1;\n}\n\n.dropdown-mode-mobile .mobile-available-section .section-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 0.75rem 1rem;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  align-content: flex-start;\n}\n\n/* ===== EMPTY STATES ===== */\n\n.dropdown-mode-mobile .empty-state {\n  display: none;\n  width: 100%;\n  padding: 2rem 1rem;\n  text-align: center;\n  color: var(--ty-text-faint);\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}\n\n/* Show empty state when no tags present */\n.dropdown-mode-mobile .mobile-selected-section[data-empty=\"true\"] .empty-state,\n.dropdown-mode-mobile .mobile-available-section[data-empty=\"true\"] .empty-state {\n  display: block;\n}\n\n/* Hide slot content when empty */\n.dropdown-mode-mobile .mobile-selected-section[data-empty=\"true\"] slot,\n.dropdown-mode-mobile .mobile-available-section[data-empty=\"true\"] slot {\n  display: none;\n}\n\n/* ===== TAG STYLING IN MOBILE ===== */\n\n.dropdown-mode-mobile .section-content ::slotted(ty-tag) {\n  cursor: pointer;\n  user-select: none;\n  transition: transform 0.1s ease;\n  margin: 2px 0; /* Vertical spacing like dropdown options */\n}\n\n.dropdown-mode-mobile .section-content ::slotted(ty-tag:hover) {\n  transform: scale(1.02);\n}\n\n.dropdown-mode-mobile .section-content ::slotted(ty-tag:active) {\n  transform: scale(0.98);\n}\n\n/* Dimmed appearance for hidden filtered tags */\n.dropdown-mode-mobile .section-content ::slotted(ty-tag[hidden]) {\n  display: none !important;\n}\n\n/* Custom scrollbar styles */\n\n/* ===================================== */\n/* Custom Scrollbar - Vertical Track     */\n/* ===================================== */\n\n.ty-scrollbar-track-y {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-y.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-y.has-overflow:hover,\n.ty-scrollbar-track-y.has-overflow.scrolling,\n.ty-scrollbar-track-y.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-y::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-y:hover::before,\n.ty-scrollbar-track-y.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, rgba(0, 0, 0, 0.06));\n}\n\n.ty-scrollbar-thumb-y {\n  position: absolute;\n  right: 0;\n  width: 100%;\n  min-height: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, rgba(0, 0, 0, 0.35));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: background 0.15s ease-out;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-y:hover,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-hover, rgba(0, 0, 0, 0.50));\n}\n\n.ty-scrollbar-thumb-y:active,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-active, rgba(0, 0, 0, 0.60));\n}\n\n/* ===================================== */\n/* Custom Scrollbar - Horizontal Track   */\n/* ===================================== */\n\n.ty-scrollbar-track-x {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-x.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-x.has-overflow:hover,\n.ty-scrollbar-track-x.has-overflow.scrolling,\n.ty-scrollbar-track-x.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-x::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-x:hover::before,\n.ty-scrollbar-track-x.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, rgba(0, 0, 0, 0.06));\n}\n\n.ty-scrollbar-thumb-x {\n  position: absolute;\n  bottom: 0;\n  height: 100%;\n  min-width: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, rgba(0, 0, 0, 0.35));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: background 0.15s ease-out;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-x:hover,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-hover, rgba(0, 0, 0, 0.50));\n}\n\n.ty-scrollbar-thumb-x:active,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-active, rgba(0, 0, 0, 0.60));\n}\n\n/* ===================================== */\n/* Touch devices - hide custom scrollbar */\n/* ===================================== */\n\n@media (pointer: coarse) and (hover: none) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x {\n    display: none !important;\n  }\n}\n\n/* Respect reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x,\n  .ty-scrollbar-thumb-y,\n  .ty-scrollbar-thumb-x {\n    transition-duration: 0ms !important;\n  }\n}\n\n";
+export declare const multiselectStyles = "\n/* Multiselect-specific styles extending dropdown base styles */\n\n:host {\n  --mobile-border-color: var(--ty-border, #5858587d);\n}\n\n/* ===== DIALOG POSITIONING SUPPORT ===== */\n\n.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  /* Modal handles z-index automatically */\n\n  /* Hidden by default */\n  opacity: 0;\n  transition: opacity 400ms ease;\n\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-dialog[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n/* Direction-based positioning with CSS classes */\n.dropdown-dialog.position-below {\n  left: var(--dropdown-x);\n  top: var(--dropdown-y);\n}\n\n.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-dialog.position-above .dropdown-header {\n  margin-top: 4px;\n}\n\n.dropdown-dialog.position-below .dropdown-header {\n  margin-bottom: 4px;\n}\n\n.dropdown-dialog.position-below .dropdown-options {\n  /* Optional: Add upward-pointing shadow for below positioning */\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/* Animate when .open class is added */\n.dropdown-dialog.open {\n  opacity: 1;\n}\n\n.dropdown-dialog.open .dropdown-options {\n  opacity: 1;\n  transform: translateY(0) scale(1);\n}\n\n.dropdown-dialog::backdrop {\n  background: transparent;\n}\n\n/* ===== DIALOG HEADER ===== */\n\n.dropdown-header {\n  display: flex;\n  align-items: center;\n  gap: var(--ty-spacing-2);\n  position: relative;\n}\n\n.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-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-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-search-input::placeholder {\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n}\n\n.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-search-chevron.open {\n  transform: translateY(-50%) rotate(180deg);\n}\n\n.dropdown-search-chevron svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* ===== MULTISELECT-SPECIFIC STYLES ===== */\n\n/* Multiselect stub modifications */\n.multiselect-stub {\n  min-height: 2.5rem;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.25rem;\n  align-items: center;\n  padding: 0.5rem 2.5rem 0.5rem 0.75rem;\n  /* Transitions - includes opacity for open state */\n  transition: var(--ty-transition-all), opacity 0.2s ease;\n  outline: none;\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  cursor: pointer;\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.multiselect-stub:hover {\n  border-color: var(--input-border-hover, var(--ty-input-border-hover));\n}\n\n.multiselect-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/* Hide stub when dropdown is open */\n.dropdown-wrapper:has(.dropdown-chevron.open) .multiselect-stub {\n  opacity: 0;\n  pointer-events: none;\n}\n\n/* Hide stub chips when mobile dialog is open (let modal show them) */\n.dropdown-mode-mobile .dropdown-wrapper:has(.mobile-dialog[open]) .multiselect-chips {\n  display: none;\n}\n\n/* When tags are present, reduce padding to make room */\n.multiselect-stub.has-tags {\n  padding: 0.25rem 2.5rem 0.25rem 0.5rem;\n  width: 100%;\n}\n\n.multiselect-stub.has-tags slot[name=\"selected\"] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.25rem;\n}\n\n/* ===== CHEVRON INDICATOR ===== */\n\n.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-chevron.open {\n  transform: translateY(-50%) rotate(180deg);\n}\n\n.dropdown-chevron svg {\n  width: 100%;\n  height: 100%;\n}\n\n\n/* Tags container */\n.multiselect-chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  align-items: center;\n  min-width: 0;\n}\n\n.dropdown-placeholder {\n  flex-grow: 1;\n  color: var(--input-placeholder, var(--ty-input-placeholder, #9ca3af));\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-light);\n  font-style: italic;\n}\n\n/* Placeholder styling when tags are present */\n.dropdown-placeholder.hidden {\n  display: none;\n}\n\n/* Options area styling - Override for multiselect */\n.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\n  /* Animation properties */\n  transform: translateY(-8px) scale(0.95);\n  transition:\n    opacity 200ms cubic-bezier(0.16, 1, 0.3, 1),\n    transform 200ms cubic-bezier(0.16, 1, 0.3, 1);\n\n  /* Multiselect-specific: flex wrap for tags */\n  display: flex;\n  flex-wrap: wrap;\n  padding: 0.5rem;\n  gap: 0.5rem;\n\n}\n\n/* Hide native scrollbar only when custom scrollbar is active */\n.dropdown-options.ty-custom-scroll {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.dropdown-options.ty-custom-scroll::-webkit-scrollbar {\n  display: none;\n}\n\n/* Options wrapper - positioned container for scrollbar track */\n.dropdown-options-wrapper {\n  position: relative;\n}\n\n/* Show custom scrollbar on hover */\n.dropdown-options-wrapper:hover .ty-scrollbar-track-y.has-overflow {\n  opacity: 1;\n}\n\n/* Make ty-tags in dropdown clickable with pointer cursor */\n.dropdown-options ty-tag {\n  user-select: none;\n  transition: transform 0.1s ease;\n}\n\n.dropdown-options ty-tag:hover {\n  transform: scale(1.02);\n}\n\n.dropdown-options ty-tag:active {\n  transform: scale(0.98);\n}\n\n/* Visual feedback for selected tags in options */\n.dropdown-options ty-tag[selected] {\n  opacity: 0.5;\n}\n\n/* Ensure ty-tag components in multiselect have proper sizing */\n.multiselect-chips ty-tag {\n  max-width: 150px;\n}\n\n/* Responsive adjustments */\n@media (max-width: 640px) {\n  .multiselect-chips ty-tag {\n    max-width: 100px;\n  }\n}\n\n\n/* Ensure proper spacing in container layouts */\n.multiselect-container {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n/* ===== DROPDOWN WRAPPER & LABEL ===== */\n\n.dropdown-wrapper {\n  position: relative;\n  display: block;\n  width: 100%;\n}\n\n.dropdown-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: #ef4444;\n  width: 12px;\n  height: 12px;\n  vertical-align: middle;\n  margin-left: 4px;\n}\n\n.required-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n:host([disabled]) .multiselect-container {\n  pointer-events: none;\n}\n\n/* ============================================================================\n   MOBILE MODAL STYLES\n   ============================================================================ */\n\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; /* Position content from top */\n  border: none;\n  background: transparent; /* Backdrop handles background */\n  /* Note: Don't set display - browser controls <dialog> visibility */\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.dropdown-mode-mobile .mobile-dialog-content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: calc(100% - 32px); /* Side margins */\n  max-width: 400px; /* Constrained width like dropdown */\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.dropdown-mode-mobile .mobile-search-input:focus {\n  border-color: var(--ty-border);\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 (matches dropdown.ts) */\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 (matches dropdown.ts) */\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: 2px solid;\n  border-color: var(--mobile-border-color);\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}\n\n.dropdown-mode-mobile .mobile-search-input::placeholder {\n  color: var(--ty-text-faint);\n}\n\n.dropdown-mode-mobile .mobile-search-input:focus {\n  border-color: var(--ty-border);\n}\n\n/* ============================================================================\n   MOBILE BODY & SECTIONS - UPDATED STRUCTURE\n   ============================================================================ */\n\n/* Mobile body - contains both sections */\n.dropdown-mode-mobile .mobile-body {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  height: var(--body-height, 350px);\n  max-height: 350px;\n  overflow: hidden;\n  background: var(--ty-surface-floating);\n  border-radius: var(--ty-radius-lg);\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/* ===== SECTION HEADERS - Fixed 48px height ===== */\n\n.dropdown-mode-mobile .section-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 48px;\n  flex-shrink: 0;\n  padding: 0 16px;\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--ty-text);\n  background: var(--ty-bg-neutral-soft);\n  border-bottom: 1px solid var(--ty-border-faint);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n/* Expanded section is mild (already viewing it), collapsed is normal (draws attention) */\n.dropdown-mode-mobile [data-expanded=\"false\"] .section-header {\n  color: var(--ty-text);\n}\n\n.dropdown-mode-mobile [data-expanded=\"true\"] .section-header {\n  color: var(--ty-text-mild);\n}\n\n.dropdown-mode-mobile .section-header:hover {\n  background: var(--ty-bg-neutral);\n}\n\n.dropdown-mode-mobile .section-header:active {\n  background: var(--ty-bg-neutral-mild);\n}\n\n.dropdown-mode-mobile .section-header .section-title {\n  flex: 1;\n}\n\n.dropdown-mode-mobile .section-header .section-count {\n  font-weight: 400;\n  opacity: 0.7;\n  margin-left: 0.25rem;\n}\n\n/* Chevron indicator (only for selected section) */\n.dropdown-mode-mobile .section-header .section-chevron {\n  width: 16px;\n  height: 16px;\n  color: var(--ty-text-faint);\n  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.dropdown-mode-mobile .section-header .section-chevron svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* Rotate chevron when expanded */\n.dropdown-mode-mobile .mobile-selected-section[data-expanded=\"true\"] .section-chevron {\n  transform: rotate(180deg);\n}\n\n/* Available section header - not clickable */\n.dropdown-mode-mobile .mobile-available-section .section-header {\n  cursor: default;\n}\n\n.dropdown-mode-mobile .mobile-available-section .section-header:hover {\n  background: var(--ty-bg-neutral-soft);\n}\n\n/* ===== SELECTED SECTION - Expandable with smooth transition ===== */\n\n.dropdown-mode-mobile .mobile-selected-section {\n  display: flex;\n  flex-direction: column;\n  background: var(--ty-surface-elevated);\n  border-bottom: 2px solid var(--ty-border);\n  overflow: hidden;\n  transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Collapsed state - just header (48px) */\n.dropdown-mode-mobile .mobile-selected-section[data-expanded=\"false\"] {\n  max-height: 48px;\n  flex: 0 0 48px;\n}\n\n/* Expanded state - takes remaining space */\n.dropdown-mode-mobile .mobile-selected-section[data-expanded=\"true\"] {\n  max-height: 1000px; /* Large enough for content */\n  flex: 1;\n}\n\n.dropdown-mode-mobile .mobile-selected-section .section-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 0.75rem 1rem;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  align-content: flex-start;\n}\n\n/* ===== AVAILABLE SECTION ===== */\n\n.dropdown-mode-mobile .mobile-available-section {\n  display: flex;\n  flex-direction: column;\n  background: var(--ty-surface-floating);\n  overflow: hidden;\n  transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Collapsed state - just header (48px) */\n.dropdown-mode-mobile .mobile-available-section[data-expanded=\"false\"] {\n  max-height: 48px;\n  flex: 0 0 48px;\n}\n\n/* Expanded state - takes remaining space */\n.dropdown-mode-mobile .mobile-available-section[data-expanded=\"true\"] {\n  max-height: 1000px; /* Large enough for content */\n  flex: 1;\n}\n\n.dropdown-mode-mobile .mobile-available-section .section-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 0.75rem 1rem;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  align-content: flex-start;\n}\n\n/* ===== EMPTY STATES ===== */\n\n.dropdown-mode-mobile .empty-state {\n  display: none;\n  width: 100%;\n  padding: 2rem 1rem;\n  text-align: center;\n  color: var(--ty-text-faint);\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}\n\n/* Show empty state when no tags present */\n.dropdown-mode-mobile .mobile-selected-section[data-empty=\"true\"] .empty-state,\n.dropdown-mode-mobile .mobile-available-section[data-empty=\"true\"] .empty-state {\n  display: block;\n}\n\n/* Hide slot content when empty */\n.dropdown-mode-mobile .mobile-selected-section[data-empty=\"true\"] slot,\n.dropdown-mode-mobile .mobile-available-section[data-empty=\"true\"] slot {\n  display: none;\n}\n\n/* ===== TAG STYLING IN MOBILE ===== */\n\n.dropdown-mode-mobile .section-content ::slotted(ty-tag) {\n  cursor: pointer;\n  user-select: none;\n  transition: transform 0.1s ease;\n  margin: 2px 0; /* Vertical spacing like dropdown options */\n}\n\n.dropdown-mode-mobile .section-content ::slotted(ty-tag:hover) {\n  transform: scale(1.02);\n}\n\n.dropdown-mode-mobile .section-content ::slotted(ty-tag:active) {\n  transform: scale(0.98);\n}\n\n/* Dimmed appearance for hidden filtered tags */\n.dropdown-mode-mobile .section-content ::slotted(ty-tag[hidden]) {\n  display: none !important;\n}\n\n/* ==================== LOADING STATE ====================\n   Spinner overlay shown inside the options area while the parent\n   (external-search mode) is fetching. Search input stays usable.\n\n   Carries its own surface so it stays visible even when the host\n   has restyled the popup with a transparent or unusual background.\n   Override with --ty-loader-bg / --ty-loader-radius / --ty-loader-border.\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-);\n  font-size: var(--ty-font-sm);\n  min-height: 4rem;\n  background: var(--ty-loader-bg, var(--ty-surface-floating));\n  border: 1px solid var(--ty-loader-border, var(--ty-border-soft));\n  border-radius: var(--ty-loader-radius, var(--ty-radius-base));\n  box-sizing: border-box;\n}\n\n.dropdown-options-wrapper.loading .dropdown-loading {\n  display: flex;\n}\n\n.dropdown-options-wrapper.loading .dropdown-options,\n.dropdown-options-wrapper.loading > slot#options-slot,\n.dropdown-options-wrapper.loading .empty-state {\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-multiselect-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-);\n}\n\n@keyframes ty-multiselect-spin {\n  to { transform: rotate(360deg); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .dropdown-loading-spinner {\n    animation-duration: 1.6s;\n  }\n}\n\n/* Custom scrollbar styles */\n\n/* ===================================== */\n/* Custom Scrollbar - Vertical Track     */\n/* ===================================== */\n\n.ty-scrollbar-track-y {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-y.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-y.has-overflow:hover,\n.ty-scrollbar-track-y.has-overflow.scrolling,\n.ty-scrollbar-track-y.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-y::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-y:hover::before,\n.ty-scrollbar-track-y.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, rgba(0, 0, 0, 0.06));\n}\n\n.ty-scrollbar-thumb-y {\n  position: absolute;\n  right: 0;\n  width: 100%;\n  min-height: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, rgba(0, 0, 0, 0.35));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: background 0.15s ease-out;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-y:hover,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-hover, rgba(0, 0, 0, 0.50));\n}\n\n.ty-scrollbar-thumb-y:active,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-active, rgba(0, 0, 0, 0.60));\n}\n\n/* ===================================== */\n/* Custom Scrollbar - Horizontal Track   */\n/* ===================================== */\n\n.ty-scrollbar-track-x {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-x.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-x.has-overflow:hover,\n.ty-scrollbar-track-x.has-overflow.scrolling,\n.ty-scrollbar-track-x.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-x::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-x:hover::before,\n.ty-scrollbar-track-x.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, rgba(0, 0, 0, 0.06));\n}\n\n.ty-scrollbar-thumb-x {\n  position: absolute;\n  bottom: 0;\n  height: 100%;\n  min-width: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, rgba(0, 0, 0, 0.35));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: background 0.15s ease-out;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-x:hover,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-hover, rgba(0, 0, 0, 0.50));\n}\n\n.ty-scrollbar-thumb-x:active,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-active, rgba(0, 0, 0, 0.60));\n}\n\n/* ===================================== */\n/* Touch devices - hide custom scrollbar */\n/* ===================================== */\n\n@media (pointer: coarse) and (hover: none) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x {\n    display: none !important;\n  }\n}\n\n/* Respect reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x,\n  .ty-scrollbar-thumb-y,\n  .ty-scrollbar-thumb-x {\n    transition-duration: 0ms !important;\n  }\n}\n\n";
 //# sourceMappingURL=multiselect.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"multiselect.d.ts","sourceRoot":"","sources":["../../src/styles/multiselect.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,eAAO,MAAM,iBAAiB,8+tBA+vB7B,CAAC"}
+{"version":3,"file":"multiselect.d.ts","sourceRoot":"","sources":["../../src/styles/multiselect.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,eAAO,MAAM,iBAAiB,0rxBA8zB7B,CAAC"}

package/lib/styles/multiselect.js

@@ -768,6 +768,69 @@ export const multiselectStyles = `
   display: none !important;
 }
 
+/* ==================== LOADING STATE ====================
+   Spinner overlay shown inside the options area while the parent
+   (external-search mode) is fetching. Search input stays usable.
+
+   Carries its own surface so it stays visible even when the host
+   has restyled the popup with a transparent or unusual background.
+   Override with --ty-loader-bg / --ty-loader-radius / --ty-loader-border.
+*/
+.dropdown-loading {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ty-spacing-2);
+  padding: var(--ty-spacing-4) var(--ty-spacing-3);
+  color: var(--ty-text-);
+  font-size: var(--ty-font-sm);
+  min-height: 4rem;
+  background: var(--ty-loader-bg, var(--ty-surface-floating));
+  border: 1px solid var(--ty-loader-border, var(--ty-border-soft));
+  border-radius: var(--ty-loader-radius, var(--ty-radius-base));
+  box-sizing: border-box;
+}
+
+.dropdown-options-wrapper.loading .dropdown-loading {
+  display: flex;
+}
+
+.dropdown-options-wrapper.loading .dropdown-options,
+.dropdown-options-wrapper.loading > slot#options-slot,
+.dropdown-options-wrapper.loading .empty-state {
+  display: none;
+}
+
+.dropdown-loading-spinner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.125rem;
+  height: 1.125rem;
+  flex-shrink: 0;
+  animation: ty-multiselect-spin 0.7s linear infinite;
+  color: var(--ty-color-primary);
+}
+
+.dropdown-loading-spinner svg {
+  width: 100%;
+  height: 100%;
+}
+
+.dropdown-loading-text {
+  color: var(--ty-text-);
+}
+
+@keyframes ty-multiselect-spin {
+  to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dropdown-loading-spinner {
+    animation-duration: 1.6s;
+  }
+}
+
 /* Custom scrollbar styles */
 ${customScrollbarStyles}
 `;

package/lib/styles/multiselect.js.map

@@ -1 +1 @@
-{"version":3,"file":"multiselect.js","sourceRoot":"","sources":["../../src/styles/multiselect.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAE9D,MAAM,CAAC,MAAM,iBAAiB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8vB/B,qBAAqB;CACtB,CAAC"}
+{"version":3,"file":"multiselect.js","sourceRoot":"","sources":["../../src/styles/multiselect.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAE9D,MAAM,CAAC,MAAM,iBAAiB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6zB/B,qBAAqB;CACtB,CAAC"}

package/lib/styles/tag.d.ts

@@ -2,5 +2,5 @@
  * Tag Component Styles
  * PORTED FROM: clj/ty/components/tag.css
  */
-export declare const tagStyles = "\n/* Tag Component Styles using centralized ty.variables.css */\n\n/* Host element */\n\n/* Hidden attribute support */\n:host([hidden]) {\n  display: none !important;\n}\n\n/* Main container */\n.tag-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--ty-spacing-1);\n  /* Default pill shape - can be overridden */\n  border-radius: var(--ty-radius-full);\n  font-family: var(--ty-font-sans);\n  font-weight: var(--ty-font-medium);\n  text-align: center;\n  white-space: nowrap;\n  user-select: none;\n  box-sizing: border-box;\n\n  /* Default MD size \u2014 anchor at 28px, even +4 steps for other sizes */\n  padding: 0 0.625rem;                            /* 0 10px */\n  font-size: var(--ty-font-sm);                   /* 14px */\n  line-height: var(--ty-leading-sm);              /* 21px */\n  letter-spacing: var(--ty-tracking-sm);          /* -0.013em */\n  min-height: 28px;\n\n  /* Transitions using centralized values */\n  transition: var(--ty-transition-all);\n\n  /* Colors via custom properties \u2014 override on :host for full control */\n  background: var(--tag-bg, transparent);\n  color: var(--tag-color, var(--ty-text));\n  border: 1.5px solid;\n  border-color: var(--tag-border-color, var(--ty-text-soft));\n}\n\n/* Non-pill variant - rectangular with rounded corners */\n:host([pill=\"false\"]) .tag-container,\n:host([not-pill]) .tag-container {\n  border-radius: var(--ty-radius-md);\n  /* 6px instead of full pill */\n}\n\n/* Tags with value attribute but NOT selected should be clickable */\n:host([value]:not([selected])) .tag-container:not([aria-disabled=\"true\"]) {\n  cursor: pointer;\n}\n\n:host([selected]) .tag-container:not([aria-disabled=\"true\"]) {\n  cursor: initial;\n}\n\n.tag-container[tabindex]:not([aria-disabled=\"true\"]):hover {\n  background: var(--ty-bg-neutral-soft);\n  transform: translateY(-1px);\n  box-shadow: var(--ty-shadow-sm);\n}\n\n.tag-container[tabindex]:not([aria-disabled=\"true\"]):active {\n  transform: translateY(0);\n  box-shadow: var(--ty-shadow-sm);\n}\n\n.tag-container[tabindex]:focus {\n  outline: none;\n}\n\n/* Disabled state */\n.tag-container[aria-disabled=\"true\"] {\n  opacity: 0.6;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* Slot containers */\n.tag-start,\n.tag-content,\n.tag-end {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.tag-content {\n  flex: 1;\n  min-width: 0;\n}\n\n/* Dismiss button */\n.tag-dismiss {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  background: none;\n  border: none;\n  color: currentColor;\n  cursor: pointer;\n  border-radius: var(--ty-radius-full);\n  transition: var(--ty-transition-all);\n  opacity: 0.7;\n  flex-shrink: 0;\n  /* Default MD dismiss button size */\n  width: var(--ty-spacing-4);\n  /* 16px */\n  height: var(--ty-spacing-4);\n}\n\n.tag-dismiss:hover {\n  opacity: 1;\n  background: rgba(0, 0, 0, 0.1);\n}\n\n.tag-dismiss svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* Size variants - override defaults */\n:host([size=\"xs\"]) .tag-container {\n  padding: 0 0.375rem;                            /* 0 6px */\n  font-size: var(--ty-font-xs);                   /* 12px */\n  line-height: var(--ty-leading-xs);\n  letter-spacing: var(--ty-tracking-xs);\n  min-height: 20px;\n}\n\n:host([size=\"xs\"]) .tag-dismiss {\n  width: var(--ty-spacing-3);\n  height: var(--ty-spacing-3);\n  margin-left: var(--ty-spacing-2);\n}\n\n:host([size=\"sm\"]) .tag-container {\n  padding: 0 var(--ty-spacing-2);                 /* 0 8px */\n  font-size: var(--ty-font-xs);                   /* 12px */\n  line-height: var(--ty-leading-xs);\n  letter-spacing: var(--ty-tracking-xs);\n  min-height: 24px;\n}\n\n:host([size=\"sm\"]) .tag-dismiss {\n  width: var(--ty-spacing-3);\n  height: var(--ty-spacing-3);\n  margin-left: var(--ty-spacing-2);\n}\n\n/* MD is now the default - no need for explicit [size=\"md\"] selector */\n/* All default styles above apply to MD size (min-height: 24px) */\n\n:host([size=\"lg\"]) .tag-container {\n  padding: 0 var(--ty-spacing-3);                 /* 0 12px */\n  font-size: var(--ty-font-sm);                   /* 14px */\n  line-height: var(--ty-leading-sm);              /* 21px */\n  letter-spacing: var(--ty-tracking-sm);          /* -0.013em */\n  min-height: 32px;\n}\n\n:host([size=\"lg\"]) .tag-dismiss {\n  width: var(--ty-spacing-5);\n  height: var(--ty-spacing-5);\n  margin-left: var(--ty-spacing-4);\n}\n\n:host([size=\"xl\"]) .tag-container {\n  padding: 0 0.875rem;                            /* 0 14px */\n  font-size: var(--ty-font-sm);                   /* 14px */\n  line-height: var(--ty-leading-sm);              /* 21px */\n  letter-spacing: var(--ty-tracking-sm);          /* -0.013em */\n  min-height: 36px;\n}\n\n:host([size=\"xl\"]) .tag-dismiss {\n  width: var(--ty-spacing-5);\n  height: var(--ty-spacing-5);\n  margin-left: var(--ty-spacing-4);\n}\n\n/* ===== FLAVOR VARIANTS =====\n   Each flavor sets --tag-bg / --tag-color / --tag-border-color on :host.\n   Append '+' to flavor for a stronger shade (mild background, strong color),\n   or '-' for a softer shade (soft background, base color). */\n\n/* ----- PRIMARY ----- */\n:host([flavor=\"primary\"]) {\n  --tag-bg: var(--ty-bg-primary);\n  --tag-color: var(--ty-color-primary-strong);\n  --tag-border-color: var(--ty-border-primary);\n}\n:host([flavor=\"primary+\"]) {\n  --tag-bg: var(--ty-bg-primary-mild);\n  --tag-color: var(--ty-color-primary-strong);\n  --tag-border-color: var(--ty-color-primary);\n}\n:host([flavor=\"primary-\"]) {\n  --tag-bg: var(--ty-bg-primary-soft);\n  --tag-color: var(--ty-color-primary);\n  --tag-border-color: var(--ty-border-primary);\n}\n:host([flavor=\"primary\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"primary+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"primary-\"]) .tag-container[tabindex]:hover {\n  background: var(--ty-bg-primary-mild);\n}\n:host([flavor=\"primary\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"primary+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"primary-\"]) .tag-container[tabindex]:focus {\n  box-shadow: 0 0 0 3px var(--ty-color-primary-faint);\n}\n\n/* ----- SECONDARY ----- */\n:host([flavor=\"secondary\"]) {\n  --tag-bg: var(--ty-bg-secondary);\n  --tag-color: var(--ty-color-secondary-strong);\n  --tag-border-color: var(--ty-border-secondary);\n}\n:host([flavor=\"secondary+\"]) {\n  --tag-bg: var(--ty-bg-secondary-mild);\n  --tag-color: var(--ty-color-secondary-strong);\n  --tag-border-color: var(--ty-color-secondary);\n}\n:host([flavor=\"secondary-\"]) {\n  --tag-bg: var(--ty-bg-secondary-soft);\n  --tag-color: var(--ty-color-secondary);\n  --tag-border-color: var(--ty-border-secondary);\n}\n:host([flavor=\"secondary\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"secondary+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"secondary-\"]) .tag-container[tabindex]:hover {\n  background: var(--ty-bg-secondary-mild);\n}\n:host([flavor=\"secondary\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"secondary+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"secondary-\"]) .tag-container[tabindex]:focus {\n  box-shadow: 0 0 0 3px var(--ty-color-secondary-faint);\n}\n\n/* ----- SUCCESS ----- */\n:host([flavor=\"success\"]) {\n  --tag-bg: var(--ty-bg-success);\n  --tag-color: var(--ty-color-success-strong);\n  --tag-border-color: var(--ty-border-success);\n}\n:host([flavor=\"success+\"]) {\n  --tag-bg: var(--ty-bg-success-mild);\n  --tag-color: var(--ty-color-success-strong);\n  --tag-border-color: var(--ty-color-success);\n}\n:host([flavor=\"success-\"]) {\n  --tag-bg: var(--ty-bg-success-soft);\n  --tag-color: var(--ty-color-success);\n  --tag-border-color: var(--ty-border-success);\n}\n:host([flavor=\"success\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"success+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"success-\"]) .tag-container[tabindex]:hover {\n  background: var(--ty-bg-success-mild);\n}\n:host([flavor=\"success\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"success+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"success-\"]) .tag-container[tabindex]:focus {\n  box-shadow: 0 0 0 3px var(--ty-color-success-faint);\n}\n\n/* ----- DANGER ----- */\n:host([flavor=\"danger\"]) {\n  --tag-bg: var(--ty-bg-danger);\n  --tag-color: var(--ty-color-danger-strong);\n  --tag-border-color: var(--ty-border-danger);\n}\n:host([flavor=\"danger+\"]) {\n  --tag-bg: var(--ty-bg-danger-mild);\n  --tag-color: var(--ty-color-danger-strong);\n  --tag-border-color: var(--ty-color-danger);\n}\n:host([flavor=\"danger-\"]) {\n  --tag-bg: var(--ty-bg-danger-soft);\n  --tag-color: var(--ty-color-danger);\n  --tag-border-color: var(--ty-border-danger);\n}\n:host([flavor=\"danger\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"danger+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"danger-\"]) .tag-container[tabindex]:hover {\n  background: var(--ty-bg-danger-mild);\n}\n:host([flavor=\"danger\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"danger+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"danger-\"]) .tag-container[tabindex]:focus {\n  box-shadow: 0 0 0 3px var(--ty-color-danger-faint);\n}\n\n/* ----- WARNING ----- */\n:host([flavor=\"warning\"]) {\n  --tag-bg: var(--ty-bg-warning);\n  --tag-color: var(--ty-color-warning-strong);\n  --tag-border-color: var(--ty-border-warning);\n}\n:host([flavor=\"warning+\"]) {\n  --tag-bg: var(--ty-bg-warning-mild);\n  --tag-color: var(--ty-color-warning-strong);\n  --tag-border-color: var(--ty-color-warning);\n}\n:host([flavor=\"warning-\"]) {\n  --tag-bg: var(--ty-bg-warning-soft);\n  --tag-color: var(--ty-color-warning);\n  --tag-border-color: var(--ty-border-warning);\n}\n:host([flavor=\"warning\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"warning+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"warning-\"]) .tag-container[tabindex]:hover {\n  background: var(--ty-bg-warning-mild);\n}\n:host([flavor=\"warning\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"warning+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"warning-\"]) .tag-container[tabindex]:focus {\n  box-shadow: 0 0 0 3px var(--ty-color-warning-faint);\n}\n\n/* ----- INFO (kept for back-compat \u2014 not in built-in Flavor union) ----- */\n:host([flavor=\"info\"]) {\n  --tag-bg: var(--ty-bg-info);\n  --tag-color: var(--ty-color-info-strong);\n  --tag-border-color: var(--ty-border-info);\n}\n\n:host([flavor=\"info\"]) .tag-container[tabindex]:hover {\n  background: var(--ty-bg-info-mild);\n}\n\n:host([flavor=\"info\"]) .tag-container[tabindex]:focus {\n  box-shadow: 0 0 0 3px var(--ty-color-info-faint);\n}\n\n/* ----- NEUTRAL ----- */\n:host([flavor=\"neutral+\"]) {\n  --tag-bg: var(--ty-bg-neutral-mild);\n  --tag-color: var(--ty-text-strong);\n  --tag-border-color: var(--ty-border-strong);\n}\n:host([flavor=\"neutral-\"]) {\n  --tag-bg: var(--ty-bg-neutral-soft);\n  --tag-color: var(--ty-text-soft);\n  --tag-border-color: var(--ty-border-soft);\n}\n:host([flavor=\"neutral\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"neutral+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"neutral-\"]) .tag-container[tabindex]:hover {\n  background: var(--ty-bg-neutral-soft);\n}\n:host([flavor=\"neutral\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"neutral+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"neutral-\"]) .tag-container[tabindex]:focus {\n  box-shadow: 0 0 0 3px var(--ty-border-soft);\n}\n\n/* Slotted content styling */\n.tag-start ::slotted(*),\n.tag-content ::slotted(*),\n.tag-end ::slotted(*) {\n  display: flex;\n  align-items: center;\n}\n\n/* Icon sizing for slotted icons */\n.tag-start ::slotted(ty-icon),\n.tag-end ::slotted(ty-icon) {\n  width: 1em;\n  height: 1em;\n  flex-shrink: 0;\n}\n\n/* Count/badge styling using centralized spacing */\n.tag-end ::slotted(.count) {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--ty-spacing-6);\n  /* 24px */\n  height: var(--ty-spacing-5);\n  /* 20px */\n  padding: 0 var(--ty-spacing-2);\n  /* 0 8px */\n  background: rgba(0, 0, 0, 0.1);\n  border-radius: var(--ty-radius-full);\n  font-size: var(--ty-font-xs);\n  font-weight: var(--ty-font-semibold);\n  line-height: var(--ty-line-height-none);\n  flex-shrink: 0;\n}\n\n/* Special handling for long text content */\n.tag-content {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n:host([data-type=\"user\"]) .tag-container {\n  min-width: var(--ty-spacing-20);\n  /* 80px for user tags */\n}\n\n/* Dark mode is handled automatically by the centralized variables */\n";
+export declare const tagStyles = "\n/* Tag Component Styles using centralized ty.variables.css */\n\n/* Host element */\n\n/* Hidden attribute support */\n:host([hidden]) {\n  display: none !important;\n}\n\n/* Main container */\n.tag-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--ty-spacing-1);\n  /* Default pill shape - can be overridden */\n  border-radius: var(--ty-radius-full);\n  font-weight: var(--ty-font-medium);\n  text-align: center;\n  white-space: nowrap;\n  user-select: none;\n  box-sizing: border-box;\n\n  /* Default MD size \u2014 anchor at 28px, even +4 steps for other sizes */\n  padding: 0 0.625rem;                            /* 0 10px */\n  font-size: var(--ty-font-xs);                   /* 14px */\n  line-height: var(--ty-leading-xs);              /* 21px */\n  letter-spacing: var(--ty-tracking-xs);          /* -0.013em */\n  min-height: 28px;\n\n  /* Transitions using centralized values */\n  transition: var(--ty-transition-all);\n\n  /* Colors via custom properties \u2014 override on :host for full control */\n  background: var(--tag-bg, transparent);\n  color: var(--tag-color, var(--ty-text));\n  border: 1px solid;jk\n  border-color: var(--tag-border-color, var(--ty-border));\n}\n\n/* Non-pill variant - rectangular with rounded corners */\n:host([pill=\"false\"]) .tag-container,\n:host([not-pill]) .tag-container {\n  border-radius: var(--ty-radius-md);\n  /* 6px instead of full pill */\n}\n\n/* Tags with value attribute but NOT selected should be clickable */\n:host([value]:not([selected])) .tag-container:not([aria-disabled=\"true\"]) {\n  cursor: pointer;\n}\n\n:host([selected]) .tag-container:not([aria-disabled=\"true\"]) {\n  cursor: initial;\n}\n\n.tag-container[tabindex]:not([aria-disabled=\"true\"]):hover {\n  background: var(--ty-bg-neutral-soft);\n  transform: translateY(-1px);\n  box-shadow: var(--ty-shadow-sm);\n}\n\n.tag-container[tabindex]:not([aria-disabled=\"true\"]):active {\n  transform: translateY(0);\n  box-shadow: var(--ty-shadow-sm);\n}\n\n.tag-container[tabindex]:focus {\n  outline: none;\n}\n\n/* Disabled state */\n.tag-container[aria-disabled=\"true\"] {\n  opacity: 0.6;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* Slot containers */\n.tag-start,\n.tag-content,\n.tag-end {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.tag-content {\n  flex: 1;\n  min-width: 0;\n}\n\n/* Dismiss button */\n.tag-dismiss {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  background: none;\n  border: none;\n  color: currentColor;\n  cursor: pointer;\n  border-radius: var(--ty-radius-full);\n  transition: var(--ty-transition-all);\n  opacity: 0.7;\n  flex-shrink: 0;\n  /* Default MD dismiss button size */\n  width: var(--ty-spacing-4);\n  /* 16px */\n  height: var(--ty-spacing-4);\n}\n\n.tag-dismiss:hover {\n  opacity: 1;\n  background: rgba(0, 0, 0, 0.1);\n}\n\n.tag-dismiss svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* Size variants - override defaults */\n:host([size=\"xs\"]) .tag-container {\n  padding: 0 0.375rem;                            /* 0 6px */\n  font-size: var(--ty-font-xs);                   /* 12px */\n  line-height: var(--ty-leading-xs);\n  letter-spacing: var(--ty-tracking-xs);\n  min-height: 20px;\n}\n\n:host([size=\"xs\"]) .tag-dismiss {\n  width: var(--ty-spacing-3);\n  height: var(--ty-spacing-3);\n  margin-left: var(--ty-spacing-2);\n}\n\n:host([size=\"sm\"]) .tag-container {\n  padding: 0 var(--ty-spacing-2);                 /* 0 8px */\n  font-size: var(--ty-font-xs);                   /* 12px */\n  line-height: var(--ty-leading-xs);\n  letter-spacing: var(--ty-tracking-xs);\n  min-height: 24px;\n}\n\n:host([size=\"sm\"]) .tag-dismiss {\n  width: var(--ty-spacing-3);\n  height: var(--ty-spacing-3);\n  margin-left: var(--ty-spacing-2);\n}\n\n/* MD is now the default - no need for explicit [size=\"md\"] selector */\n/* All default styles above apply to MD size (min-height: 24px) */\n\n:host([size=\"lg\"]) .tag-container {\n  padding: 0 var(--ty-spacing-3);                 /* 0 12px */\n  font-size: var(--ty-font-sm);                   /* 14px */\n  line-height: var(--ty-leading-sm);              /* 21px */\n  letter-spacing: var(--ty-tracking-sm);          /* -0.013em */\n  min-height: 32px;\n}\n\n:host([size=\"lg\"]) .tag-dismiss {\n  width: var(--ty-spacing-5);\n  height: var(--ty-spacing-5);\n  margin-left: var(--ty-spacing-4);\n}\n\n:host([size=\"xl\"]) .tag-container {\n  padding: 0 0.875rem;                            /* 0 14px */\n  font-size: var(--ty-font-sm);                   /* 14px */\n  line-height: var(--ty-leading-sm);              /* 21px */\n  letter-spacing: var(--ty-tracking-sm);          /* -0.013em */\n  min-height: 36px;\n}\n\n:host([size=\"xl\"]) .tag-dismiss {\n  width: var(--ty-spacing-5);\n  height: var(--ty-spacing-5);\n  margin-left: var(--ty-spacing-4);\n}\n\n/* ===== FLAVOR VARIANTS =====\n   Each flavor sets --tag-bg / --tag-color / --tag-border-color on :host.\n   Append '+' to flavor for a stronger shade (mild background, strong color),\n   or '-' for a softer shade (soft background, base color). */\n\n/* ----- PRIMARY ----- */\n:host([flavor=\"primary\"]) {\n  --tag-bg: var(--ty-bg-primary);\n  --tag-color: var(--ty-color-primary-strong);\n  --tag-border-color: var(--ty-border-primary);\n}\n:host([flavor=\"primary+\"]) {\n  --tag-bg: var(--ty-bg-primary-mild);\n  --tag-color: var(--ty-color-primary-strong);\n  --tag-border-color: var(--ty-color-primary);\n}\n:host([flavor=\"primary-\"]) {\n  --tag-bg: var(--ty-bg-primary-soft);\n  --tag-color: var(--ty-color-primary);\n  --tag-border-color: var(--ty-border-primary);\n}\n:host([flavor=\"primary\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"primary+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"primary-\"]) .tag-container[tabindex]:hover {\n  background: var(--ty-bg-primary-mild);\n}\n:host([flavor=\"primary\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"primary+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"primary-\"]) .tag-container[tabindex]:focus {\n  box-shadow: 0 0 0 3px var(--ty-color-primary-faint);\n}\n\n/* ----- SECONDARY ----- */\n:host([flavor=\"secondary\"]) {\n  --tag-bg: var(--ty-bg-secondary);\n  --tag-color: var(--ty-color-secondary-strong);\n  --tag-border-color: var(--ty-border-secondary);\n}\n:host([flavor=\"secondary+\"]) {\n  --tag-bg: var(--ty-bg-secondary-mild);\n  --tag-color: var(--ty-color-secondary-strong);\n  --tag-border-color: var(--ty-color-secondary);\n}\n:host([flavor=\"secondary-\"]) {\n  --tag-bg: var(--ty-bg-secondary-soft);\n  --tag-color: var(--ty-color-secondary);\n  --tag-border-color: var(--ty-border-secondary);\n}\n:host([flavor=\"secondary\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"secondary+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"secondary-\"]) .tag-container[tabindex]:hover {\n  background: var(--ty-bg-secondary-mild);\n}\n:host([flavor=\"secondary\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"secondary+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"secondary-\"]) .tag-container[tabindex]:focus {\n  box-shadow: 0 0 0 3px var(--ty-color-secondary-faint);\n}\n\n/* ----- SUCCESS ----- */\n:host([flavor=\"success\"]) {\n  --tag-bg: var(--ty-bg-success);\n  --tag-color: var(--ty-color-success-strong);\n  --tag-border-color: var(--ty-border-success);\n}\n:host([flavor=\"success+\"]) {\n  --tag-bg: var(--ty-bg-success-mild);\n  --tag-color: var(--ty-color-success-strong);\n  --tag-border-color: var(--ty-color-success);\n}\n:host([flavor=\"success-\"]) {\n  --tag-bg: var(--ty-bg-success-soft);\n  --tag-color: var(--ty-color-success);\n  --tag-border-color: var(--ty-border-success);\n}\n:host([flavor=\"success\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"success+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"success-\"]) .tag-container[tabindex]:hover {\n  background: var(--ty-bg-success-mild);\n}\n:host([flavor=\"success\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"success+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"success-\"]) .tag-container[tabindex]:focus {\n  box-shadow: 0 0 0 3px var(--ty-color-success-faint);\n}\n\n/* ----- DANGER ----- */\n:host([flavor=\"danger\"]) {\n  --tag-bg: var(--ty-bg-danger);\n  --tag-color: var(--ty-color-danger-strong);\n  --tag-border-color: var(--ty-border-danger);\n}\n:host([flavor=\"danger+\"]) {\n  --tag-bg: var(--ty-bg-danger-mild);\n  --tag-color: var(--ty-color-danger-strong);\n  --tag-border-color: var(--ty-color-danger);\n}\n:host([flavor=\"danger-\"]) {\n  --tag-bg: var(--ty-bg-danger-soft);\n  --tag-color: var(--ty-color-danger);\n  --tag-border-color: var(--ty-border-danger);\n}\n:host([flavor=\"danger\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"danger+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"danger-\"]) .tag-container[tabindex]:hover {\n  background: var(--ty-bg-danger-mild);\n}\n:host([flavor=\"danger\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"danger+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"danger-\"]) .tag-container[tabindex]:focus {\n  box-shadow: 0 0 0 3px var(--ty-color-danger-faint);\n}\n\n/* ----- WARNING ----- */\n:host([flavor=\"warning\"]) {\n  --tag-bg: var(--ty-bg-warning);\n  --tag-color: var(--ty-color-warning-strong);\n  --tag-border-color: var(--ty-border-warning);\n}\n:host([flavor=\"warning+\"]) {\n  --tag-bg: var(--ty-bg-warning-mild);\n  --tag-color: var(--ty-color-warning-strong);\n  --tag-border-color: var(--ty-color-warning);\n}\n:host([flavor=\"warning-\"]) {\n  --tag-bg: var(--ty-bg-warning-soft);\n  --tag-color: var(--ty-color-warning);\n  --tag-border-color: var(--ty-border-warning);\n}\n:host([flavor=\"warning\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"warning+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"warning-\"]) .tag-container[tabindex]:hover {\n  background: var(--ty-bg-warning-mild);\n}\n:host([flavor=\"warning\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"warning+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"warning-\"]) .tag-container[tabindex]:focus {\n  box-shadow: 0 0 0 3px var(--ty-color-warning-faint);\n}\n\n/* ----- INFO (kept for back-compat \u2014 not in built-in Flavor union) ----- */\n:host([flavor=\"info\"]) {\n  --tag-bg: var(--ty-bg-info);\n  --tag-color: var(--ty-color-info-strong);\n  --tag-border-color: var(--ty-border-info);\n}\n\n:host([flavor=\"info\"]) .tag-container[tabindex]:hover {\n  background: var(--ty-bg-info-mild);\n}\n\n:host([flavor=\"info\"]) .tag-container[tabindex]:focus {\n  box-shadow: 0 0 0 3px var(--ty-color-info-faint);\n}\n\n/* ----- NEUTRAL ----- */\n:host([flavor=\"neutral\"]) {\n  --tag-color: var(--ty-text-mild);\n  --tag-bg: var(--ty-bg-neutral-soft);\n  --tag-border-color: var(--ty-border-mild);\n}\n\n:host([flavor=\"neutral+\"]) {\n  --tag-bg: var(--ty-bg-neutral-mild);\n  --tag-color: var(--ty-text-mild);\n  --tag-border-color: var(--ty-border-strong);\n}\n:host([flavor=\"neutral-\"]) {\n  --tag-bg: var(--ty-bg-neutral-soft);\n  --tag-color: var(--ty-text-soft);\n  --tag-border-color: var(--ty-border-mildstrong);\n}\n:host([flavor=\"neutral\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"neutral+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"neutral-\"]) .tag-container[tabindex]:hover {\n  background: var(--ty-bg-neutral-soft);\n}\n:host([flavor=\"neutral\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"neutral+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"neutral-\"]) .tag-container[tabindex]:focus {\n  box-shadow: 0 0 0 3px var(--ty-border-soft);\n}\n\n/* Slotted content styling */\n.tag-start ::slotted(*),\n.tag-content ::slotted(*),\n.tag-end ::slotted(*) {\n  display: flex;\n  align-items: center;\n}\n\n/* Icon sizing for slotted icons */\n.tag-start ::slotted(ty-icon),\n.tag-end ::slotted(ty-icon) {\n  width: 1em;\n  height: 1em;\n  flex-shrink: 0;\n}\n\n/* Count/badge styling using centralized spacing */\n.tag-end ::slotted(.count) {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--ty-spacing-6);\n  /* 24px */\n  height: var(--ty-spacing-5);\n  /* 20px */\n  padding: 0 var(--ty-spacing-2);\n  /* 0 8px */\n  background: rgba(0, 0, 0, 0.1);\n  border-radius: var(--ty-radius-full);\n  font-size: var(--ty-font-xs);\n  font-weight: var(--ty-font-semibold);\n  line-height: var(--ty-line-height-none);\n  flex-shrink: 0;\n}\n\n/* Special handling for long text content */\n.tag-content {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n:host([data-type=\"user\"]) .tag-container {\n  min-width: var(--ty-spacing-20);\n  /* 80px for user tags */\n}\n\n/* Dark mode is handled automatically by the centralized variables */\n";
 //# sourceMappingURL=tag.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../src/styles/tag.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,SAAS,46YAyZrB,CAAC"}
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../src/styles/tag.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,SAAS,uiZA8ZrB,CAAC"}

package/lib/styles/tag.js

@@ -20,7 +20,6 @@ export const tagStyles = `
   gap: var(--ty-spacing-1);
   /* Default pill shape - can be overridden */
   border-radius: var(--ty-radius-full);
-  font-family: var(--ty-font-sans);
   font-weight: var(--ty-font-medium);
   text-align: center;
   white-space: nowrap;
@@ -29,9 +28,9 @@ export const tagStyles = `
 
   /* Default MD size — anchor at 28px, even +4 steps for other sizes */
   padding: 0 0.625rem;                            /* 0 10px */
-  font-size: var(--ty-font-sm);                   /* 14px */
-  line-height: var(--ty-leading-sm);              /* 21px */
-  letter-spacing: var(--ty-tracking-sm);          /* -0.013em */
+  font-size: var(--ty-font-xs);                   /* 14px */
+  line-height: var(--ty-leading-xs);              /* 21px */
+  letter-spacing: var(--ty-tracking-xs);          /* -0.013em */
   min-height: 28px;
 
   /* Transitions using centralized values */
@@ -40,8 +39,8 @@ export const tagStyles = `
   /* Colors via custom properties — override on :host for full control */
   background: var(--tag-bg, transparent);
   color: var(--tag-color, var(--ty-text));
-  border: 1.5px solid;
-  border-color: var(--tag-border-color, var(--ty-text-soft));
+  border: 1px solid;jk
+  border-color: var(--tag-border-color, var(--ty-border));
 }
 
 /* Non-pill variant - rectangular with rounded corners */
@@ -343,15 +342,21 @@ export const tagStyles = `
 }
 
 /* ----- NEUTRAL ----- */
+:host([flavor="neutral"]) {
+  --tag-color: var(--ty-text-mild);
+  --tag-bg: var(--ty-bg-neutral-soft);
+  --tag-border-color: var(--ty-border-mild);
+}
+
 :host([flavor="neutral+"]) {
   --tag-bg: var(--ty-bg-neutral-mild);
-  --tag-color: var(--ty-text-strong);
+  --tag-color: var(--ty-text-mild);
   --tag-border-color: var(--ty-border-strong);
 }
 :host([flavor="neutral-"]) {
   --tag-bg: var(--ty-bg-neutral-soft);
   --tag-color: var(--ty-text-soft);
-  --tag-border-color: var(--ty-border-soft);
+  --tag-border-color: var(--ty-border-mildstrong);
 }
 :host([flavor="neutral"]) .tag-container[tabindex]:hover,
 :host([flavor="neutral+"]) .tag-container[tabindex]:hover,

package/lib/styles/tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../src/styles/tag.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,CAAC,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyZxB,CAAC"}
+{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../src/styles/tag.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,CAAC,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8ZxB,CAAC"}

package/lib/utils/loader-registry.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Global loader-icon registry.
+ *
+ * Set once at app bootstrap to override the default spinner SVG used by
+ * every loading-aware component (`ty-button`, `ty-dropdown`, `ty-multiselect`,
+ * etc.). Components call `getLoaderSvg()` on every render, so changing the
+ * registered SVG affects future renders.
+ *
+ * The wrapper element rotates the SVG with `transform: rotate()`, so prefer
+ * a *static* SVG. If you must use a self-animating SVG, disable the wrapper
+ * spin with the `--ty-loader-animation: none` CSS custom property.
+ *
+ * @example
+ *   import { setLoaderSvg } from 'tyrell-components'
+ *   setLoaderSvg('<svg viewBox="0 0 24 24">...</svg>')
+ *
+ *   // CDN / vanilla
+ *   window.tyLoader.set('<svg ...>...</svg>')
+ *
+ *   // Reset to default
+ *   setLoaderSvg(null)
+ */
+/**
+ * Register a custom spinner SVG (markup string). Pass `null` to reset to
+ * the built-in default.
+ */
+export declare function setLoaderSvg(svg: string | null): void;
+/**
+ * Get the currently registered spinner SVG, or the built-in default if
+ * none has been set. Components call this on every render.
+ */
+export declare function getLoaderSvg(): string;
+/** Reset the registered loader back to the built-in default. */
+export declare function resetLoaderSvg(): void;
+//# sourceMappingURL=loader-registry.d.ts.map

package/lib/utils/loader-registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader-registry.d.ts","sourceRoot":"","sources":["../../src/utils/loader-registry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAMH;;;GAGG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAErD;AAED;;;GAGG;AACH,wBAAgB,YAAY,IAAI,MAAM,CAErC;AAED,gEAAgE;AAChE,wBAAgB,cAAc,IAAI,IAAI,CAErC"}

package/lib/utils/loader-registry.js

@@ -0,0 +1,43 @@
+/**
+ * Global loader-icon registry.
+ *
+ * Set once at app bootstrap to override the default spinner SVG used by
+ * every loading-aware component (`ty-button`, `ty-dropdown`, `ty-multiselect`,
+ * etc.). Components call `getLoaderSvg()` on every render, so changing the
+ * registered SVG affects future renders.
+ *
+ * The wrapper element rotates the SVG with `transform: rotate()`, so prefer
+ * a *static* SVG. If you must use a self-animating SVG, disable the wrapper
+ * spin with the `--ty-loader-animation: none` CSS custom property.
+ *
+ * @example
+ *   import { setLoaderSvg } from 'tyrell-components'
+ *   setLoaderSvg('<svg viewBox="0 0 24 24">...</svg>')
+ *
+ *   // CDN / vanilla
+ *   window.tyLoader.set('<svg ...>...</svg>')
+ *
+ *   // Reset to default
+ *   setLoaderSvg(null)
+ */
+const DEFAULT_LOADER_SVG = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" stroke-opacity="0.25"/><path d="M22 12a10 10 0 0 1-10 10" stroke="currentColor" stroke-width="3" stroke-linecap="round"/></svg>`;
+let customLoaderSvg = null;
+/**
+ * Register a custom spinner SVG (markup string). Pass `null` to reset to
+ * the built-in default.
+ */
+export function setLoaderSvg(svg) {
+    customLoaderSvg = svg && svg.trim() ? svg : null;
+}
+/**
+ * Get the currently registered spinner SVG, or the built-in default if
+ * none has been set. Components call this on every render.
+ */
+export function getLoaderSvg() {
+    return customLoaderSvg ?? DEFAULT_LOADER_SVG;
+}
+/** Reset the registered loader back to the built-in default. */
+export function resetLoaderSvg() {
+    customLoaderSvg = null;
+}
+//# sourceMappingURL=loader-registry.js.map

package/lib/utils/loader-registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader-registry.js","sourceRoot":"","sources":["../../src/utils/loader-registry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,MAAM,kBAAkB,GAAG,kSAAkS,CAAA;AAE7T,IAAI,eAAe,GAAkB,IAAI,CAAA;AAEzC;;;GAGG;AACH,MAAM,UAAU,YAAY,CAAC,GAAkB;IAC7C,eAAe,GAAG,GAAG,IAAI,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAA;AAClD,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,YAAY;IAC1B,OAAO,eAAe,IAAI,kBAAkB,CAAA;AAC9C,CAAC;AAED,gEAAgE;AAChE,MAAM,UAAU,cAAc;IAC5B,eAAe,GAAG,IAAI,CAAA;AACxB,CAAC"}

package/lib/utils/property-manager.d.ts

@@ -83,7 +83,7 @@ export declare class PropertyManager<T = any> {
      */
     shouldEmitChange(name: string): boolean;
     /**
-     * Handle property aliases (e.g., not-searchable → searchable: false)
+     * Handle property aliases (e.g., not-clearable → clearable: false)
      */
     handleAlias(aliasName: string, value: any): PropertyChange | null;
 }

package/lib/utils/property-manager.js

@@ -181,7 +181,7 @@ export class PropertyManager {
         return this._config[name]?.emitChange ?? false;
     }
     /**
-     * Handle property aliases (e.g., not-searchable → searchable: false)
+     * Handle property aliases (e.g., not-clearable → clearable: false)
      */
     handleAlias(aliasName, value) {
         // Find property with this alias

package/lib/version.d.ts

@@ -4,5 +4,5 @@
  * This is automatically synced with package.json during build.
  * Use `npm version` to bump versions.
  */
-export declare const VERSION = "1.0.0-TC7";
+export declare const VERSION = "1.0.0-TC9";
 //# sourceMappingURL=version.d.ts.map

package/lib/version.js

@@ -7,5 +7,5 @@
  * This is automatically synced with package.json during build.
  * Use `npm version` to bump versions.
  */
-export const VERSION = '1.0.0-TC7';
+export const VERSION = '1.0.0-TC9';
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tyrell-components",
-  "version": "1.0.0-TC7",
+  "version": "1.0.0-TC9",
   "description": "Tyrell Components - Framework-agnostic web components with semantic design system",
   "type": "module",
   "sideEffects": [
@@ -44,6 +44,10 @@
       "types": "./lib/components/copy.d.ts",
       "import": "./lib/components/copy.js"
     },
+    "./file-upload": {
+      "types": "./lib/components/file-upload.d.ts",
+      "import": "./lib/components/file-upload.js"
+    },
     "./popup": {
       "types": "./lib/components/popup.d.ts",
       "import": "./lib/components/popup.js"