tyrell-components 1.0.0-TC55 → 1.0.0-TC56

package/lib/styles/calendar-navigation.js

@@ -1,22 +1,22 @@
 export const calendarNavigationStyles = `
 :host([data-size="md"]) {
---nav-btn-size: 2rem;
---nav-btn-icon-size: 1.25rem;
---nav-font-size: 0.875rem;
+--nav-btn-size: 1.875rem;
+--nav-btn-icon-size: 1.125rem;
+--nav-font-size: 1rem;
 --nav-padding: 0.5rem 0.75rem;
 --nav-default-width: 280px;
 }
 :host([data-size="sm"]) {
 --nav-btn-size: 1.5rem;
---nav-btn-icon-size: 1rem;
+--nav-btn-icon-size: 0.9375rem;
 --nav-font-size: 0.875rem;
 --nav-padding: 0.375rem 0.5rem;
 --nav-default-width: 240px;
 }
 :host([data-size="lg"]) {
---nav-btn-size: 2.5rem;
---nav-btn-icon-size: 1.5rem;
---nav-font-size: 0.875rem;
+--nav-btn-size: 2.25rem;
+--nav-btn-icon-size: 1.25rem;
+--nav-font-size: 1.125rem;
 --nav-padding: 0.625rem 1rem;
 --nav-default-width: 360px;
 }
@@ -34,15 +34,55 @@ box-sizing: border-box;
 display: flex;
 align-items: center;
 gap: 0.25rem;
-}
-.nav-group-left,
-.nav-group-right {
 flex: 0 0 auto;
 }
-.nav-group-center {
-flex: 1;
-justify-content: center;
+.nav-title {
+display: inline-flex;
+align-items: center;
+gap: 0.375rem;
 min-width: 0;
+margin-left: -0.375rem;
+padding: 0.25rem 0.375rem;
+border: none;
+border-radius: var(--ty-radius-base);
+background: transparent;
+font-family: inherit;
+font-size: var(--nav-font-size);
+line-height: 1.2;
+white-space: nowrap;
+cursor: pointer;
+transition: var(--ty-local-transition, background-color 0.15s ease);
+outline: none;
+}
+.nav-title:hover,
+.nav-title[aria-expanded="true"] {
+background-color: var(--ty-calendar-nav-hover-bg, var(--ty-bg-neutral-soft));
+}
+.nav-title:focus-visible {
+outline: 2px solid var(--ty-calendar-nav-focus-outline, var(--ty-calendar-accent, var(--ty-color-primary)));
+outline-offset: 2px;
+}
+.nav-title-month {
+font-weight: 600;
+letter-spacing: -0.01em;
+color: var(--ty-calendar-nav-title-color, var(--ty-text-strong, var(--ty-color-neutral-strong)));
+}
+.nav-title-year {
+font-weight: 400;
+color: var(--ty-calendar-nav-year-color, var(--ty-text-soft, var(--ty-color-neutral)));
+}
+.nav-caret {
+display: inline-flex;
+color: var(--ty-calendar-nav-color, var(--ty-color-neutral));
+transition: transform 0.15s ease;
+}
+.nav-caret svg {
+width: 1em;
+height: 1em;
+display: block;
+}
+.nav-title[aria-expanded="true"] .nav-caret {
+transform: rotate(180deg);
 }
 .nav-btn {
 display: inline-flex;
@@ -51,10 +91,10 @@ justify-content: center;
 width: var(--nav-btn-size);
 height: var(--nav-btn-size);
 padding: 0;
-border: none;
+border: 1px solid var(--ty-calendar-nav-border, var(--ty-border));
 border-radius: var(--ty-radius-base);
 background-color: transparent;
-color: var(--ty-calendar-nav-color, var(--ty-color-neutral));
+color: var(--ty-calendar-nav-color, var(--ty-color-neutral-strong));
 cursor: pointer;
 transition: var(--ty-local-transition, all 0.15s ease);
 outline: none;
@@ -81,15 +121,4 @@ width: var(--nav-btn-icon-size);
 height: var(--nav-btn-icon-size);
 display: block;
 }
-.month-year-display {
-font-size: var(--nav-font-size);
-font-weight: 600;
-color: var(--ty-calendar-nav-title-color, var(--ty-color-neutral-strong));
-text-align: center;
-white-space: nowrap;
-text-transform: uppercase;
-letter-spacing: 0.04em;
-overflow: hidden;
-text-overflow: ellipsis;
-}
 `;

package/lib/styles/calendar-navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-navigation.js","sourceRoot":"","sources":["../../src/styles/calendar-navigation.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,CAAC,MAAM,wBAAwB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuHvC,CAAC"}

package/lib/styles/calendar.d.ts

@@ -1,5 +1,6 @@
 /**
  * Calendar Orchestration Styles
- * Simple container for navigation + month display
+ * Container for navigation + month display, plus the month/year grid
+ * ty-calendar shows in place of the day grid.
  */
-export declare const calendarStyles = "\n.calendar-container {\n  display: flex;\n  flex-direction: column;\n  gap: 0.125rem;\n  box-sizing: border-box;\n  font-family: inherit;\n  /* Nav is a fixed width and the grid is fit-content, so in any host wider\n     than them (a popup, a stretched cell) the default stretch alignment\n     left-pinned both. Centring keeps the block centred in whatever space it\n     gets \u2014 without widening the calendar itself to fill it. */\n  align-items: center;\n}\n\n@media (max-width: 320px) {\n  .calendar-container {\n    gap: 0.375rem;\n  }\n}\n";
+export declare const calendarStyles: string;

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

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../src/styles/calendar.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,cAAc,snBAsB1B,CAAC"}

package/lib/styles/calendar.js

@@ -1,3 +1,6 @@
+import { calendarMonthFlavorCss } from './calendar-month.js';
+const selectedBg = 'var(--ty-calendar-selected-bg, var(--ty-calendar-accent, var(--calendar-month-selected-bg, var(--ty-solid-primary, var(--ty-color-primary)))))';
+const selectedFg = 'var(--ty-calendar-selected-color, var(--calendar-month-selected-color, var(--ty-solid-primary-fg, white)))';
 export const calendarStyles = `
 .calendar-container {
 display: flex;
@@ -12,4 +15,75 @@ align-items: center;
 gap: 0.375rem;
 }
 }
+.month-grid {
+display: grid;
+grid-template-columns: repeat(3, 1fr);
+grid-auto-rows: 1fr;
+gap: 0.375rem;
+box-sizing: border-box;
+padding: 0.75rem;
+min-width: 280px;
+width: var(--calendar-width, auto);
+}
+.month-grid.size-sm { padding: 0.5rem; min-width: 240px; gap: 0.25rem; }
+.month-grid.size-lg { padding: 1rem; min-width: 360px; gap: 0.5rem; }
+.month-cell {
+position: relative;
+display: flex;
+align-items: center;
+justify-content: center;
+min-height: 2.5rem;
+padding: 0;
+border: none;
+border-radius: var(--ty-calendar-day-radius, 0.5rem);
+background: transparent;
+color: var(--ty-calendar-day-color, var(--ty-text));
+font-family: inherit;
+font-size: 0.875rem;
+cursor: pointer;
+outline: none;
+transition: var(--ty-local-transition, background-color 0.15s ease, color 0.15s ease);
+}
+.month-grid.size-sm .month-cell { font-size: 0.75rem; min-height: 2rem; }
+.month-grid.size-lg .month-cell { font-size: 1rem; min-height: 3rem; }
+.month-cell:hover {
+color: var(--ty-calendar-day-hover-color, var(--ty-text-strong));
+background-color: var(--ty-calendar-day-hover-bg, var(--ty-bg-neutral));
+font-weight: 500;
+}
+.month-cell:focus-visible {
+box-shadow: 0 0 0 2px var(--calendar-month-accent, var(--ty-color-primary));
+}
+.month-cell.current {
+color: var(--ty-calendar-today-color, var(--ty-calendar-today-accent, var(--calendar-month-accent, var(--ty-color-primary))));
+font-weight: 600;
+}
+.month-cell.current::after {
+content: "";
+position: absolute;
+top: calc(50% + 0.72em);
+left: 50%;
+width: 4px;
+height: 4px;
+margin-left: -2px;
+border-radius: 50%;
+background: currentColor;
+}
+.month-cell.selected {
+background-color: ${selectedBg};
+color: ${selectedFg};
+font-weight: 600;
+}
+.month-cell.selected:hover {
+background-color: var(--ty-calendar-selected-hover-bg, var(--calendar-month-selected-hover-bg, color-mix(in oklab, ${selectedBg} 85%, ${selectedFg})));
+}
+.month-cell:disabled {
+color: var(--ty-calendar-disabled-color, var(--ty-text-faint));
+opacity: var(--ty-calendar-disabled-opacity, 0.7);
+text-decoration: line-through;
+text-decoration-color: color-mix(in oklab, currentColor 60%, transparent);
+cursor: default;
+pointer-events: none;
+}
+${calendarMonthFlavorCss}
 `;

package/lib/styles/calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.js","sourceRoot":"","sources":["../../src/styles/calendar.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;CAsB7B,CAAC"}

package/lib/styles/checkbox.js

@@ -4,9 +4,9 @@ const tok = (s) => fb
 ? `var(--ty-color-${f}${s}, var(--ty-color-${fb}${s}))`
 : `var(--ty-color-${f}${s})`;
 return `
-:host([flavor="${f}"])  { --checkbox-color: ${tok("")}; --checkbox-color-off: ${tok("-soft")}; --checkbox-ring: color-mix(in oklab, ${tok("")} 25%, transparent); }
-:host([flavor="${f}+"]) { --checkbox-color: ${tok("-strong")}; --checkbox-color-off: ${tok("-soft")}; --checkbox-ring: color-mix(in oklab, ${tok("-strong")} 25%, transparent); }
-:host([flavor="${f}-"]) { --checkbox-color: ${tok("-soft")}; --checkbox-color-off: ${tok("-faint")}; --checkbox-ring: color-mix(in oklab, ${tok("-soft")} 25%, transparent); }
+:host([flavor="${f}"])  { --checkbox-color: ${tok("-strong")}; --checkbox-ring: color-mix(in oklab, ${tok("")} 25%, transparent); }
+:host([flavor="${f}+"]) { --checkbox-color: ${tok("-strong")}; --checkbox-ring: color-mix(in oklab, ${tok("-strong")} 25%, transparent); }
+:host([flavor="${f}-"]) { --checkbox-color: ${tok("")}; --checkbox-ring: color-mix(in oklab, ${tok("")} 25%, transparent); }
 `;
 };
 export const checkboxCustomFlavorCss = (base) => checkboxFlavor(base, "neutral");
@@ -19,16 +19,28 @@ vertical-align: middle;
 .checkbox-container {
 display: inline-flex;
 align-items: center;
+justify-content: center;
+min-height: 1.25em;
+min-height: 1lh;
 outline: none;
 transition: var(--ty-local-transition, all 0.15s ease-in-out);
 user-select: none;
 cursor: pointer;
 border-radius: 6px;
 gap: var(--ty-spacing-1);
-color: var(--checkbox-color-off, var(--ty-color-neutral-soft));
+color: var(--checkbox-color-off, color-mix(in oklab, var(--ty-text) 30%, transparent));
+box-sizing: border-box;
+padding: 2px;
+border-radius: 5px;
+}
+.checkbox-container:hover {
+background: var(--checkbox-hover-bg, color-mix(in oklab, var(--ty-text) 8%, transparent));
+}
+.checkbox-container:not([aria-checked="true"]):not([aria-checked="mixed"]):hover {
+color: var(--checkbox-color-off-hover, color-mix(in oklab, var(--ty-text) 50%, transparent));
 }
 .checkbox-container[aria-checked="true"] {
-color: var(--checkbox-color, var(--ty-color-neutral));
+color: var(--checkbox-color, var(--ty-text));
 }
 .checkbox-container.focused,
 .checkbox-container:focus-visible {
@@ -63,11 +75,8 @@ width: 24px;
 height: 24px;
 }
 ${FLAVORS.map((f) => checkboxFlavor(f)).join("")}
-.checkbox-container:not([aria-checked="true"]) {
-opacity: 0.35;
-}
 .checkbox-container[aria-checked="mixed"] {
-opacity: 0.7;
+color: var(--checkbox-color, var(--ty-text));
 }
 .checkbox-container.disabled {
 pointer-events: none;
@@ -76,7 +85,10 @@ opacity: 0.5;
 filter: grayscale(1);
 }
 .checkbox-container.disabled:not([aria-checked="true"]) {
-opacity: 0.2;
+opacity: 0.45;
+}
+.checkbox-container.disabled:hover {
+background: none;
 }
 .checkbox-container.error .checkbox-icon {
 color: var(--ty-color-danger);

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

@@ -0,0 +1 @@
+{"version":3,"file":"copy.d.ts","sourceRoot":"","sources":["../../src/styles/copy.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,eAAO,MAAM,UAAU,0hDAkFtB,CAAA"}

package/lib/styles/copy.js

@@ -27,9 +27,13 @@ padding: 0;
 margin: 0;
 background: transparent;
 border: none;
-color: inherit;
+color: var(--input-color, var(--ty-input-color));
 font-family: inherit;
 }
+code.copy-field-value {
+font-family: var(--ty-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+font-size: calc(var(--ty-field-font) * 0.93);
+}
 .copy-field-value.multiline {
 white-space: pre-wrap;
 word-break: break-word;

package/lib/styles/copy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy.js","sourceRoot":"","sources":["../../src/styles/copy.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkFzB,CAAA"}

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

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

package/lib/styles/date-picker.js

@@ -277,50 +277,80 @@ cursor: pointer;
 }
 .time-section {
 display: flex;
-min-height: 2.5rem;
-align-items: center;
-justify-content: center;
-gap: 0.5rem;
-padding: 0.5rem 1rem;
-border-top: 1px solid var(--ty-calendar-time-border);
-background-color: var(--ty-calendar-time-bg);
+flex-direction: column;
+gap: 0.375rem;
 width: 100%;
 box-sizing: border-box;
-position: relative;
+padding: 0.75rem 1rem 0.875rem;
+border-top: 1px solid var(--ty-calendar-time-border);
+background-color: var(--ty-calendar-time-bg);
+}
+.time-row {
+display: flex;
+align-items: center;
+justify-content: space-between;
+gap: 0.75rem;
 }
 .time-label {
+display: inline-flex;
+align-items: center;
+gap: 0.5rem;
 font-size: var(--ty-font-sm);
 font-weight: 500;
 color: var(--ty-calendar-time-label-color);
-flex-shrink: 0;
+}
+.time-icon {
+display: flex;
+color: var(--ty-calendar-time-icon-color);
+width: 1rem;
+height: 1rem;
+}
+.time-fields {
+display: inline-flex;
+align-items: center;
+gap: 0.25rem;
+}
+.time-colon {
+font-weight: 600;
+color: var(--ty-calendar-time-label-color);
 }
 .time-input {
-width: 3.5rem;
+width: 2.75rem;
+height: 2.125rem;
+box-sizing: border-box;
 border: 1px solid var(--ty-input-border);
-border-radius: var(--ty-radius-sm);
+border-radius: var(--ty-radius-md, 0.5rem);
 background: var(--ty-input-bg);
 color: var(--ty-calendar-time-input-color);
 font-family: inherit;
-font-size: var(--ty-font-sm);
+font-size: var(--ty-font-base, 0.9375rem);
+font-weight: 500;
 font-variant-numeric: tabular-nums;
 text-align: center;
-padding: 0.25rem 0.375rem;
+padding: 0;
 outline: none;
+caret-color: transparent;
 transition: var(--ty-transition-all);
 }
+.time-input::selection {
+background: var(--ty-bg-primary-soft, var(--ty-bg-primary));
+}
+.time-input:hover {
+border-color: var(--ty-input-border-hover, var(--ty-input-border));
+}
 .time-input:focus {
 border-color: var(--ty-input-border-focus);
 box-shadow: 0 0 0 3px var(--ty-input-shadow-focus);
 }
-.time-input::placeholder {
-color: var(--ty-calendar-time-placeholder-color);
-}
-.time-icon {
+.time-summary {
 display: flex;
-align-items: center;
-color: var(--ty-calendar-time-icon-color);
-width: 1rem;
-height: 1rem;
-flex-shrink: 0;
+justify-content: space-between;
+gap: 0.75rem;
+font-size: var(--ty-font-xs, 0.75rem);
+color: var(--ty-calendar-time-label-color);
+}
+.time-summary-iso {
+font-family: var(--ty-font-mono, ui-monospace, SFMono-Regular, monospace);
+color: var(--ty-calendar-time-placeholder-color);
 }
 `;

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

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

package/lib/styles/dropdown.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Dropdown Component Styles
+ *
+ * ARCHITECTURE:
+ * - Shared styles: Apply to both desktop and mobile
+ * - Desktop styles: Scoped under .dropdown-mode-desktop
+ * - Mobile styles: Scoped under .dropdown-mode-mobile
+ *
+ * This prevents CSS conflicts between desktop dialog and mobile modal implementations.
+ */
+export declare const dropdownStyles = "\n/* ==================== SHARED STYLES ==================== */\n/* These apply to BOTH desktop and mobile modes */\n\n:host {\n  display: block;\n  width: auto;\n  min-width: 200px;\n}\n\n:host {\n  --mobile-border-color: #5858587d; \n}\n\n.dropdown-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n/* Label styling */\n.dropdown-label {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--ty-label-color);\n  margin-bottom: 6px;\n  line-height: 1.25;\n  padding-left: 12px;\n}\n\n.required-icon {\n  display: inline-flex;\n  align-items: center;\n  color: #ef4444;\n  width: 12px;\n  height: 12px;\n  vertical-align: middle;\n  margin-left: 4px;\n}\n\n.dropdown-wrapper {\n  position: relative;\n  display: block;\n  width: 100%;\n}\n\n/* ==================== DESKTOP MODE STYLES ==================== */\n/* All styles scoped under .dropdown-mode-desktop */\n\n/* Stub (trigger button) */\n.dropdown-mode-desktop .dropdown-stub {\n  width: 100%;\n  cursor: pointer;\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-items: center;\n  background: var(--ty-input-bg);\n  color: var(--ty-input-color);\n  border: 1px solid 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  font-weight: var(--ty-font-normal);\n  line-height: var(--ty-line-height-tight);\n  min-height: var(--ty-size-md);\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n  transition: var(--ty-transition-all), opacity 0.2s ease;\n  outline: none;\n}\n\n.dropdown-mode-desktop .dropdown-stub:hover {\n  border-color: var(--ty-input-border-hover);\n}\n\n.dropdown-mode-desktop .dropdown-stub[disabled] {\n  background-color: var(--ty-input-disabled-bg);\n  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(--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  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  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  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  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  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/* Placeholder */\n.dropdown-mode-desktop .dropdown-placeholder {\n  color: var(--ty-input-placeholder);\n  font-weight: var(--ty-font-light);\n  font-size: var(--ty-font-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(--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(--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(--ty-input-bg);\n  color: var(--ty-input-color);\n  border: 1px solid 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  font-weight: var(--ty-font-normal);\n  line-height: var(--ty-line-height-tight);\n  min-height: var(--ty-size-md);\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n  transition: var(--ty-transition-all);\n  outline: none;\n}\n\n.dropdown-mode-desktop .dropdown-search-input:focus {\n  border-color: var(--ty-input-border-focus);\n  box-shadow: 0 0 0 3px var(--ty-input-shadow-focus);\n}\n\n.dropdown-mode-desktop .dropdown-search-input:disabled {\n  background-color: var(--ty-input-disabled-bg);\n  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(--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  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  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  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  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  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(--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(--ty-input-bg);\n  border: 1px solid var(--ty-input-border);\n  border-radius: var(--ty-radius-lg);\n  box-shadow: var(--ty-shadow-md);\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  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/* Option elements */\n.dropdown-mode-desktop .dropdown-options ::slotted(option) {\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  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(--ty-input-bg);\n  color: var(--ty-input-color);\n  border: 1px solid 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  font-weight: var(--ty-font-normal);\n  line-height: var(--ty-line-height-tight);\n  min-height: var(--ty-size-md);\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n  transition: var(--ty-transition-all);\n  outline: none;\n}\n\n.dropdown-mode-mobile .dropdown-stub:hover {\n  border-color: var(--ty-input-border-hover);\n}\n\n.dropdown-mode-mobile .dropdown-stub[disabled] {\n  background-color: var(--ty-input-disabled-bg);\n  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  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  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  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  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  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(--ty-input-placeholder);\n  font-weight: var(--ty-font-light);\n  font-size: var(--ty-font-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(--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 modal - full screen overlay with centered floating card */\n.dropdown-mode-mobile .mobile-modal {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 100vw;\n  height: 100vh;\n  z-index: 9999;\n  display: flex;\n  align-items: flex-start; /* Align to top */\n  justify-content: center;\n  padding-top: 10vh; /* Fixed position from top */\n  opacity: 0;\n  transition: opacity 300ms ease;\n  pointer-events: none;\n}\n\n.dropdown-mode-mobile .mobile-modal.open {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* Mobile backdrop - full viewport with blur */\n.dropdown-mode-mobile .mobile-modal-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  background: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n  z-index: 1;\n}\n\n/* Mobile content container - floating card (transparent background) */\n.dropdown-mode-mobile .mobile-modal-content {\n  position: relative;\n  z-index: 2;\n  display: flex;\n  flex-direction: column;\n  width: calc(100% - 32px); /* Side margins */\n  max-width: 400px; /* Constrained width */\n  min-height: 200px;\n  max-height: calc(90vh - 10vh); /* Account for top padding */\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-modal.open .mobile-modal-content {\n  opacity: 1;\n  transform: scale(1);\n}\n\n/* Mobile search header - floating row with search and close */\n.dropdown-mode-mobile .mobile-search-header {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  gap: 12px;\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 (close button only) */\n.dropdown-mode-mobile .mobile-header-nosearch {\n  flex-shrink: 0;\n  display: flex;\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/* 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: 1px solid var(--ty-border-);\n  border-radius: 50%; /* Circular */\n  color: var(--ty-text-);\n  cursor: pointer;\n  transition: var(--ty-transition-all);\n  padding: 0;\n  border: 3px solid;\n  border-color: var(--mobile-border-color);\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);\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-);\n  border-radius: var(--ty-radius-md);\n  font-family: var(--ty-font-sans);\n  font-size: var(--ty-font-sm);\n  font-weight: var(--ty-font-normal);\n  line-height: var(--ty-line-height-tight);\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  height: 40px;\n  transition: var(--ty-transition-all);\n  outline: none;\n  border: 3px solid;\n  border-color: var(--mobile-border-color);\n}\n\n.dropdown-mode-mobile .mobile-search-input::placeholder {\n  color: var(--ty-text--);\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-);\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: 3px 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  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";
+//# sourceMappingURL=dropdown.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../src/styles/dropdown.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,eAAO,MAAM,cAAc,+7vBA82B1B,CAAA"}