tyrell-components 1.0.0-TC14 → 1.0.0-TC15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/tyrell.js +1 -1
- package/lib/styles/date-picker.d.ts +1 -1
- package/lib/styles/date-picker.d.ts.map +1 -1
- package/lib/styles/date-picker.js +6 -3
- package/lib/styles/date-picker.js.map +1 -1
- package/lib/styles/dropdown.d.ts +1 -1
- package/lib/styles/dropdown.d.ts.map +1 -1
- package/lib/styles/dropdown.js +7 -4
- package/lib/styles/dropdown.js.map +1 -1
- package/lib/version.d.ts +1 -1
- package/lib/version.js +1 -1
- package/package.json +1 -1
package/dist/tyrell.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! Tyrell Components | Components Only (NO Icons) | MIT License | https://github.com/gersak/tyrell */
|
|
2
|
-
!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((n="undefined"!=typeof globalThis?globalThis:n||self).Tyrell={})}(this,function(n){"use strict";class t{constructor(n){this.t=new Map,this.o=n,this.i()}i(){for(const[n,t]of Object.entries(this.o))void 0!==t.default&&this.t.set(n,t.default)}hasConfig(n){return n in this.o}updateProperty(n,t,e="property"){const o=this.o[n];if(!o)return null;const i=this.t.get(n),r=this.l(n,t,o);return this.h(n,r,o)?this.p(i,r)?null:(this.t.set(n,r),{name:n,oldValue:i,newValue:r,source:e}):null}l(n,t,e){if(e.coerce)return e.coerce(t);if(null==t)return e.default??null;switch(e.type){case"boolean":if("string"==typeof t){if(""===t)return!0;const n=t.toLowerCase().trim();return"false"!==n&&"0"!==n}return!!t;case"number":const n=+t;return isNaN(n)?e.default??0:n;case"string":return t+"";case"object":case"array":if("string"==typeof t)try{return JSON.parse(t)}catch{return e.default??("array"===e.type?[]:{})}return t;default:return t}}h(n,t,e){return!e.validate||e.validate(t)}p(n,t){if("object"!=typeof n||"object"!=typeof t)return n===t;if(null===n||null===t)return n===t;try{return JSON.stringify(n)===JSON.stringify(t)}catch{return!1}}get(n){return this.t.get(n)}getAll(){return Object.fromEntries(this.t)}getConfig(n){return this.o[n]}isVisual(n){return this.o[n]?.visual??!1}isFormValue(n){return this.o[n]?.formValue??!1}shouldEmitChange(n){return this.o[n]?.emitChange??!1}handleAlias(n,t){for(const[e,o]of Object.entries(this.o))if(o.aliases&&n in o.aliases)return this.updateProperty(e,o.aliases[n],"attribute");return null}}const e=class extends HTMLElement{constructor(){super(),this.u=!1,this.v=!1,this.props=new t(this.constructor.properties),this.m=this.attachInternals(),this.shadowRoot||this.attachShadow({mode:"open"})}static get observedAttributes(){const n=[];for(const[t,e]of Object.entries(this.properties))if(n.push(t.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()),e.aliases)for(const o of Object.keys(e.aliases))n.push(o);return n}setProperty(n,t){const e=this.props.updateProperty(n,t,"property");e&&(this.k(e),this.C([e]))}getProperty(n){return this.props.get(n)}k(n){const{name:t,newValue:e}=n,o=this.props.getConfig(t);if(!o)return;const i=this.S(t);"boolean"===o.type?e?this.setAttribute(i,""):this.removeAttribute(i):null==e?this.removeAttribute(i):this.setAttribute(i,"object"==typeof e?JSON.stringify(e):e+"")}S(n){return n.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}T(n){return n.replace(/-([a-z])/g,(n,t)=>t.toUpperCase())}attributeChangedCallback(n,t,e){if(t===e)return;let o=this.props.handleAlias(n,e);if(!o){const t=this.T(n),i=this.props.hasConfig(n)?n:t;o=this.props.updateProperty(i,e,"attribute")}o&&this.C([o])}connectedCallback(){this.u=!0;const n=this.M();n.length>0&&this.C(n),this.onConnect(),this.v||(this.render(),this.v=!0)}disconnectedCallback(){this.u=!1,this.onDisconnect()}M(){const n=[],t=this.constructor;for(const e of Object.keys(t.properties)){const t=Object.getOwnPropertyDescriptor(this,e);if(t&&void 0!==t.value){const o=this.props.updateProperty(e,t.value,"property");o&&n.push(o)}}return n}C(n){0!==n.length&&(this.onPropertiesChanged(n),n.some(n=>this.props.isFormValue(n.name))&&this.updateFormValue(),n.some(n=>this.props.isVisual(n.name))&&this.u&&this.render(),this.D(n))}D(n){for(const t of n)this.props.shouldEmitChange(t.name)&&this.dispatchEvent(new CustomEvent("prop:change",{detail:{property:t.name,oldValue:t.oldValue,newValue:t.newValue},bubbles:!0,composed:!0}))}updateFormValue(){const n=this.getFormValue();this.m.setFormValue(n)}getFormValue(){return this.props.get("value")??null}onPropertiesChanged(n){}onConnect(){}onDisconnect(){}get form(){return this.m.form}formResetCallback(){const n=this.constructor.properties.value;n&&this.setProperty("value",n.default??""),this.onFormReset()}onFormReset(){}};e.formAssociated=!0,e.properties={};let o=e;const i=new Map;function r(n,t){const{css:e,id:o}=t;let r;o&&i.has(o)?r=i.get(o):(r=new CSSStyleSheet,r.replaceSync(e),o&&i.set(o,r));const s=n.adoptedStyleSheets||[];s.includes(r)||(n.adoptedStyleSheets=[...s,r])}let s=null;function a(n){s=n&&n.trim()?n:null}function l(){return s??'<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>'}function d(){s=null}const c=class extends o{constructor(){super(),this.$=!1,r(this.shadowRoot,{css:'\n:host {\n display: inline-block;\n font-family: var(--ty-font-sans);\n}\n\n:host([wide]) {\n display: flex;\n flex-grow: 1;\n}\n\nbutton {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--ty-spacing-1);\n font-size: var(--ty-font-xs);\n line-height: var(--ty-leading-xs);\n letter-spacing: var(--ty-tracking-xs);\n font-weight: var(--ty-font-medium);\n white-space: nowrap;\n cursor: pointer;\n user-select: none;\n transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;\n background: transparent;\n color: var(--ty-color-neutral);\n border: 1px solid transparent;\n}\n\nbutton:not(.action) {\n min-width: 4rem;\n}\n\nbutton:not(.pill) {\n border-radius: var(--ty-radius-md);\n}\n\nbutton.xs:not(.pill) { border-radius: var(--ty-button-radius-xs, var(--ty-radius-md)); }\nbutton.sm:not(.pill) { border-radius: var(--ty-button-radius-sm, var(--ty-radius-md)); }\nbutton.md:not(.pill) { border-radius: var(--ty-button-radius-md, var(--ty-radius-md)); }\nbutton.lg:not(.pill) { border-radius: var(--ty-button-radius-lg, var(--ty-radius-md)); }\nbutton.xl:not(.pill) { border-radius: var(--ty-button-radius-xl, var(--ty-radius-md)); }\n\nbutton:focus-visible {\n outline: none;\n}\n\nbutton:disabled {\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n/* ===== LOADING STATE =====\n Spinner overlays the button center; original content kept in flow but\n hidden via visibility so width/height are preserved (no layout shift).\n*/\n.loader-icon {\n display: none;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 1em;\n height: 1em;\n color: currentColor;\n}\n.loader-icon svg {\n width: 100%;\n height: 100%;\n}\nbutton.loading {\n cursor: wait;\n}\nbutton.loading > *:not(.loader-icon) {\n visibility: hidden;\n}\nbutton.loading > .loader-icon {\n display: inline-flex;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n animation: ty-button-spin 0.7s linear infinite;\n}\n@keyframes ty-button-spin {\n to { transform: translate(-50%, -50%) rotate(360deg); }\n}\n@media (prefers-reduced-motion: reduce) {\n button.loading > .loader-icon {\n animation-duration: 1.6s;\n }\n}\n\n::slotted(*) {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n::slotted(ty-icon) {\n flex-shrink: 0;\n}\n\n:host([wide]) button {\n flex-grow: 1;\n}\n\n/* ===== SIZES ===== */\n\nbutton.xs {\n padding: 0 var(--ty-spacing-2);\n font-size: var(--ty-font-xs);\n line-height: var(--ty-leading-xs);\n letter-spacing: var(--ty-tracking-xs);\n gap: var(--ty-spacing-1);\n height: 1.375rem;\n}\n\nbutton.sm {\n padding: 0 var(--ty-spacing-2);\n font-size: var(--ty-font-xs);\n line-height: var(--ty-leading-xs);\n letter-spacing: var(--ty-tracking-xs);\n gap: var(--ty-spacing-1);\n height: 1.5rem;\n}\n\nbutton.md {\n padding: 0.375rem var(--ty-spacing-3);\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n gap: var(--ty-spacing-2);\n height: 1.8rem;\n}\n\nbutton.lg {\n padding: 0.375rem var(--ty-spacing-4);\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n gap: var(--ty-spacing-2);\n height: 2.1rem;\n}\n\nbutton.xl {\n padding: var(--ty-spacing-2) var(--ty-spacing-6);\n font-size: var(--ty-font-base);\n line-height: var(--ty-leading-base);\n letter-spacing: var(--ty-tracking-base);\n gap: var(--ty-spacing-2);\n height: 2.3rem;\n}\n\n/* ===== ACTION (icon-only square) ===== */\n\nbutton.action {\n gap: 0px !important;\n height: 2rem;\n width: 2rem;\n padding: 0px !important;\n}\n\nbutton.action ::slotted(ty-icon) {\n height: 1rem;\n width: 1rem;\n}\n\nbutton.action.xs { height: 1.375rem; width: 1.375rem; }\nbutton.action.xs ::slotted(ty-icon) { height: 0.75rem; width: 0.75rem; }\n\nbutton.action.sm { height: 1.5rem; width: 1.5rem; }\nbutton.action.sm ::slotted(ty-icon) { height: 0.875rem; width: 0.875rem; }\n\nbutton.action.lg { height: 2.25rem; width: 2.25rem; }\nbutton.action.lg ::slotted(ty-icon) { height: 1.125rem; width: 1.125rem; }\n\nbutton.action.xl { height: 2.5rem; width: 2.5rem; }\nbutton.action.xl ::slotted(ty-icon) { height: 1.25rem; width: 1.25rem; }\n\n/* ===== PILL ===== */\n\nbutton.pill {\n border-radius: 9999px;\n padding-left: 1.25em;\n padding-right: 1.25em;\n}\n\nbutton.pill.xs { padding-left: 1em; padding-right: 1em; }\nbutton.pill.sm { padding-left: 1.125em; padding-right: 1.125em; }\nbutton.pill.lg { padding-left: 1.5em; padding-right: 1.5em; }\nbutton.pill.xl { padding-left: 1.75em; padding-right: 1.75em; }\n\nbutton.pill:has(ty-icon:only-child),\nbutton.pill:has(slot[name="start"]:only-child),\nbutton.pill:has(slot[name="end"]:only-child) {\n padding: 0;\n aspect-ratio: 1;\n min-width: var(--ty-size-md);\n}\n\nbutton.pill.xs:has(ty-icon:only-child) { min-width: 1.375rem; min-height: 1.375rem; }\nbutton.pill.sm:has(ty-icon:only-child) { min-width: 1.5rem; min-height: 1.5rem; }\nbutton.pill.md:has(ty-icon:only-child) { min-width: 2rem; min-height: 2rem; }\nbutton.pill.lg:has(ty-icon:only-child) { min-width: 2.25rem; min-height: 2.25rem; }\nbutton.pill.xl:has(ty-icon:only-child) { min-width: 2.5rem; min-height: 2.5rem; }\n\n/* ============================================================\n SOLID — saturated brand fill (uses --ty-solid-{flavor}-* tokens)\n Bare .solid rule = fallback for custom flavors (theme via --ty-button-*).\n ============================================================ */\n\nbutton.solid {\n border: none;\n background: var(--ty-button-bg, var(--ty-solid-neutral));\n color: var(--ty-button-color, var(--ty-solid-neutral-fg));\n}\nbutton.solid:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-button-bg, var(--ty-solid-neutral-strong)));\n}\n\n/* Primary */\nbutton.solid.primary {\n background: var(--ty-button-bg, var(--ty-solid-primary));\n color: var(--ty-button-color, var(--ty-solid-primary-fg));\n}\nbutton.solid.primary.tone-plus { background: var(--ty-button-bg, var(--ty-solid-primary-strong)); }\nbutton.solid.primary.tone-minus { background: var(--ty-button-bg, var(--ty-solid-primary-soft)); }\nbutton.solid.primary:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-solid-primary-strong));\n}\nbutton.solid.primary:focus-visible {\n box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--ty-color-primary);\n}\n\n/* Secondary */\nbutton.solid.secondary {\n background: var(--ty-button-bg, var(--ty-solid-secondary));\n color: var(--ty-button-color, var(--ty-solid-secondary-fg));\n}\nbutton.solid.secondary.tone-plus { background: var(--ty-button-bg, var(--ty-solid-secondary-strong)); }\nbutton.solid.secondary.tone-minus { background: var(--ty-button-bg, var(--ty-solid-secondary-soft)); }\nbutton.solid.secondary:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-solid-secondary-strong));\n}\nbutton.solid.secondary:focus-visible {\n box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--ty-color-secondary);\n}\n\n/* Success */\nbutton.solid.success {\n background: var(--ty-button-bg, var(--ty-solid-success));\n color: var(--ty-button-color, var(--ty-solid-success-fg));\n}\nbutton.solid.success.tone-plus { background: var(--ty-button-bg, var(--ty-solid-success-strong)); }\nbutton.solid.success.tone-minus { background: var(--ty-button-bg, var(--ty-solid-success-soft)); }\nbutton.solid.success:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-solid-success-strong));\n}\nbutton.solid.success:focus-visible {\n box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--ty-color-success);\n}\n\n/* Danger */\nbutton.solid.danger {\n background: var(--ty-button-bg, var(--ty-solid-danger));\n color: var(--ty-button-color, var(--ty-solid-danger-fg));\n}\nbutton.solid.danger.tone-plus { background: var(--ty-button-bg, var(--ty-solid-danger-strong)); }\nbutton.solid.danger.tone-minus { background: var(--ty-button-bg, var(--ty-solid-danger-soft)); }\nbutton.solid.danger:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-solid-danger-strong));\n}\nbutton.solid.danger:focus-visible {\n box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--ty-color-danger);\n}\n\n/* Warning */\nbutton.solid.warning {\n background: var(--ty-button-bg, var(--ty-solid-warning));\n color: var(--ty-button-color, var(--ty-solid-warning-fg));\n}\nbutton.solid.warning.tone-plus { background: var(--ty-button-bg, var(--ty-solid-warning-strong)); }\nbutton.solid.warning.tone-minus { background: var(--ty-button-bg, var(--ty-solid-warning-soft)); }\nbutton.solid.warning:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-solid-warning-strong));\n}\nbutton.solid.warning:focus-visible {\n box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--ty-color-warning);\n}\n\n/* Neutral */\nbutton.solid.neutral {\n background: var(--ty-button-bg, var(--ty-solid-neutral));\n color: var(--ty-button-color, var(--ty-solid-neutral-fg));\n}\nbutton.solid.neutral.tone-plus { background: var(--ty-button-bg, var(--ty-solid-neutral-strong)); }\nbutton.solid.neutral.tone-minus { background: var(--ty-button-bg, var(--ty-solid-neutral-soft)); }\nbutton.solid.neutral:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-solid-neutral-strong));\n}\nbutton.solid.neutral:focus-visible {\n box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--ty-color-neutral);\n}\n\n/* ============================================================\n OUTLINED — transparent bg, text === border (uses --ty-color-*)\n Bare .outlined rule = fallback for custom flavors. For outlined,\n text is bound to border color (the rule "text === border"), so the\n fallback chain prefers --ty-button-border, then --ty-button-color.\n ============================================================ */\n\nbutton.outlined {\n background: transparent;\n color: var(--ty-button-border, var(--ty-button-color, var(--ty-color-neutral)));\n border-color: var(--ty-button-border, var(--ty-button-color, var(--ty-color-neutral)));\n}\nbutton.outlined:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-bg-neutral-soft));\n}\n\n/* Primary */\nbutton.outlined.primary {\n color: var(--ty-button-color, var(--ty-color-primary));\n border-color: var(--ty-button-border, var(--ty-color-primary));\n}\nbutton.outlined.primary.tone-plus {\n color: var(--ty-button-color, var(--ty-color-primary-strong));\n border-color: var(--ty-button-border, var(--ty-color-primary-strong));\n}\nbutton.outlined.primary.tone-minus {\n color: var(--ty-button-color, var(--ty-color-primary-soft));\n border-color: var(--ty-button-border, var(--ty-color-primary-soft));\n}\nbutton.outlined.primary:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-bg-primary-soft));\n}\n\n/* Secondary */\nbutton.outlined.secondary {\n color: var(--ty-button-color, var(--ty-color-secondary));\n border-color: var(--ty-button-border, var(--ty-color-secondary));\n}\nbutton.outlined.secondary.tone-plus {\n color: var(--ty-button-color, var(--ty-color-secondary-strong));\n border-color: var(--ty-button-border, var(--ty-color-secondary-strong));\n}\nbutton.outlined.secondary.tone-minus {\n color: var(--ty-button-color, var(--ty-color-secondary-soft));\n border-color: var(--ty-button-border, var(--ty-color-secondary-soft));\n}\nbutton.outlined.secondary:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-bg-secondary-soft));\n}\n\n/* Success */\nbutton.outlined.success {\n color: var(--ty-button-color, var(--ty-color-success));\n border-color: var(--ty-button-border, var(--ty-color-success));\n}\nbutton.outlined.success.tone-plus {\n color: var(--ty-button-color, var(--ty-color-success-strong));\n border-color: var(--ty-button-border, var(--ty-color-success-strong));\n}\nbutton.outlined.success.tone-minus {\n color: var(--ty-button-color, var(--ty-color-success-soft));\n border-color: var(--ty-button-border, var(--ty-color-success-soft));\n}\nbutton.outlined.success:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-bg-success-soft));\n}\n\n/* Danger */\nbutton.outlined.danger {\n color: var(--ty-button-color, var(--ty-color-danger));\n border-color: var(--ty-button-border, var(--ty-color-danger));\n}\nbutton.outlined.danger.tone-plus {\n color: var(--ty-button-color, var(--ty-color-danger-strong));\n border-color: var(--ty-button-border, var(--ty-color-danger-strong));\n}\nbutton.outlined.danger.tone-minus {\n color: var(--ty-button-color, var(--ty-color-danger-soft));\n border-color: var(--ty-button-border, var(--ty-color-danger-soft));\n}\nbutton.outlined.danger:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-bg-danger-soft));\n}\n\n/* Warning */\nbutton.outlined.warning {\n color: var(--ty-button-color, var(--ty-color-warning));\n border-color: var(--ty-button-border, var(--ty-color-warning));\n}\nbutton.outlined.warning.tone-plus {\n color: var(--ty-button-color, var(--ty-color-warning-strong));\n border-color: var(--ty-button-border, var(--ty-color-warning-strong));\n}\nbutton.outlined.warning.tone-minus {\n color: var(--ty-button-color, var(--ty-color-warning-soft));\n border-color: var(--ty-button-border, var(--ty-color-warning-soft));\n}\nbutton.outlined.warning:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-bg-warning-soft));\n}\n\n/* Neutral */\nbutton.outlined.neutral {\n color: var(--ty-button-color, var(--ty-color-neutral));\n border-color: var(--ty-button-border, var(--ty-color-neutral));\n}\nbutton.outlined.neutral.tone-plus {\n color: var(--ty-button-color, var(--ty-color-neutral-strong));\n border-color: var(--ty-button-border, var(--ty-color-neutral-strong));\n}\nbutton.outlined.neutral.tone-minus {\n color: var(--ty-button-color, var(--ty-color-neutral-soft));\n border-color: var(--ty-button-border, var(--ty-color-neutral-soft));\n}\nbutton.outlined.neutral:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-bg-neutral-soft));\n}\n\n/* ============================================================\n GHOST — text only, hover bg (uses --ty-color-* + --ty-bg-*-soft)\n Bare .ghost rule = fallback for custom flavors.\n ============================================================ */\n\nbutton.ghost {\n background: transparent;\n border: none;\n color: var(--ty-button-color, var(--ty-color-neutral));\n}\nbutton.ghost:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-bg-neutral-soft));\n}\n\n/* Primary */\nbutton.ghost.primary { color: var(--ty-button-color, var(--ty-color-primary)); }\nbutton.ghost.primary.tone-plus { color: var(--ty-button-color, var(--ty-color-primary-strong)); }\nbutton.ghost.primary.tone-minus { color: var(--ty-button-color, var(--ty-color-primary-soft)); }\nbutton.ghost.primary:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-bg-primary-soft));\n}\n\n/* Secondary */\nbutton.ghost.secondary { color: var(--ty-button-color, var(--ty-color-secondary)); }\nbutton.ghost.secondary.tone-plus { color: var(--ty-button-color, var(--ty-color-secondary-strong)); }\nbutton.ghost.secondary.tone-minus { color: var(--ty-button-color, var(--ty-color-secondary-soft)); }\nbutton.ghost.secondary:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-bg-secondary-soft));\n}\n\n/* Success */\nbutton.ghost.success { color: var(--ty-button-color, var(--ty-color-success)); }\nbutton.ghost.success.tone-plus { color: var(--ty-button-color, var(--ty-color-success-strong)); }\nbutton.ghost.success.tone-minus { color: var(--ty-button-color, var(--ty-color-success-soft)); }\nbutton.ghost.success:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-bg-success-soft));\n}\n\n/* Danger */\nbutton.ghost.danger { color: var(--ty-button-color, var(--ty-color-danger)); }\nbutton.ghost.danger.tone-plus { color: var(--ty-button-color, var(--ty-color-danger-strong)); }\nbutton.ghost.danger.tone-minus { color: var(--ty-button-color, var(--ty-color-danger-soft)); }\nbutton.ghost.danger:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-bg-danger-soft));\n}\n\n/* Warning */\nbutton.ghost.warning { color: var(--ty-button-color, var(--ty-color-warning)); }\nbutton.ghost.warning.tone-plus { color: var(--ty-button-color, var(--ty-color-warning-strong)); }\nbutton.ghost.warning.tone-minus { color: var(--ty-button-color, var(--ty-color-warning-soft)); }\nbutton.ghost.warning:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-bg-warning-soft));\n}\n\n/* Neutral */\nbutton.ghost.neutral { color: var(--ty-button-color, var(--ty-color-neutral)); }\nbutton.ghost.neutral.tone-plus { color: var(--ty-button-color, var(--ty-color-neutral-strong)); }\nbutton.ghost.neutral.tone-minus { color: var(--ty-button-color, var(--ty-color-neutral-soft)); }\nbutton.ghost.neutral:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-bg-neutral-soft));\n}\n',id:"ty-button"})}onConnect(){}onDisconnect(){}onPropertiesChanged(n){}get flavor(){return this.getProperty("flavor")}set flavor(n){this.setProperty("flavor",n)}get size(){return this.getProperty("size")}set size(n){this.setProperty("size",n)}get appearance(){return this.getProperty("appearance")}set appearance(n){this.setProperty("appearance",n)}get disabled(){return this.getProperty("disabled")}set disabled(n){this.setProperty("disabled",n)}get loading(){return this.getProperty("loading")}set loading(n){this.setProperty("loading",n)}get type(){return this.getProperty("type")}set type(n){this.setProperty("type",n)}get pill(){return this.getProperty("pill")}set pill(n){this.setProperty("pill",n)}get action(){return this.getProperty("action")}set action(n){this.setProperty("action",n)}get wide(){return this.getProperty("wide")}set wide(n){this.setProperty("wide",n)}get name(){return this.getProperty("name")}set name(n){this.setProperty("name",n)}get value(){return this.getProperty("value")}set value(n){this.setProperty("value",n)}parseFlavor(){const n=this.flavor||"";return n.length>1&&n.endsWith("+")?{base:n.slice(0,-1),tone:"+"}:n.length>1&&n.endsWith("-")?{base:n.slice(0,-1),tone:"-"}:{base:n,tone:""}}buildClasses(){const{base:n,tone:t}=this.parseFlavor();return function(...n){return n.filter(Boolean).join(" ")}(n,this.size,this.appearance,this.pill&&"pill",this.action&&"action","+"===t&&"tone-plus","-"===t&&"tone-minus")}handleFormAction(){const n=this.m.form;if(n)switch(this.type){case"submit":this.name&&this.value&&this.m.setFormValue(this.value),n.requestSubmit();break;case"reset":n.reset()}}initializeButtonStructure(){const n=this.shadowRoot,t=this.buildClasses(),e=document.createElement("button");e.disabled=this.disabled,e.className=t;const o=document.createElement("span");o.className="loader-icon",o.setAttribute("aria-hidden","true"),o.innerHTML=l();const i=document.createElement("slot");i.name="start",i.className="start";const r=document.createElement("slot"),s=document.createElement("slot");s.name="end",s.className="end",e.appendChild(o),e.appendChild(i),e.appendChild(r),e.appendChild(s),e.addEventListener("click",n=>{this.disabled||this.loading||(n.stopPropagation(),this.handleFormAction(),this.dispatchEvent(new CustomEvent("click",{bubbles:!0,composed:!0,detail:{originalEvent:n}})))}),this.applyLoadingState(e),n.appendChild(e),this.$=!0}applyLoadingState(n){const t=this.loading;if(n.classList.toggle("loading",t),t){n.setAttribute("aria-busy","true");const t=n.querySelector(".loader-icon");t&&(t.innerHTML=l())}else n.removeAttribute("aria-busy")}render(){const n=this.shadowRoot;if(!this.$)return void this.initializeButtonStructure();const t=this.buildClasses(),e=n.querySelector("button");e&&(e.disabled=this.disabled,e.className=t,this.applyLoadingState(e))}};c.formAssociated=!0,c.properties={flavor:{type:"string",visual:!0,default:"neutral"},size:{type:"string",visual:!0,default:"md",validate:n=>["xs","sm","md","lg","xl"].includes(n),coerce:n=>["xs","sm","md","lg","xl"].includes(n)?n:"md"},appearance:{type:"string",visual:!0,default:"solid",validate:n=>["solid","outlined","ghost"].includes(n),coerce:n=>["solid","outlined","ghost"].includes(n)?n:"solid"},disabled:{type:"boolean",visual:!0,default:!1},loading:{type:"boolean",visual:!0,default:!1},type:{type:"string",visual:!1,default:"submit"},pill:{type:"boolean",visual:!0,default:!1},action:{type:"boolean",visual:!0,default:!1},wide:{type:"boolean",visual:!1,default:!1},name:{type:"string",default:""},value:{type:"string",default:""}};let h=c;customElements.get("ty-button")||customElements.define("ty-button",h);const p="1.0.0-TC14",u=new Map,g=new Map,b=new Map;let v=null,m=null;const y="ty-icons-v"+p,f="https://ty-icons.local/",w=new Map;let x=!1;async function k(n,t){if("caches"in window)try{const e=await caches.open(y),o=new Response(t,{headers:{"Content-Type":"image/svg+xml"}});await e.put(`${f}${n}`,o)}catch(e){}}async function z(n){const t=w.get(n);if(t)return t;const e=(async()=>{try{await async function(){if(!x&&"caches"in window){x=!0;try{const n=(await caches.keys()).filter(n=>n.startsWith("ty-icons-v")&&n!==y);await Promise.all(n.map(n=>caches.delete(n)))}catch(n){}}}();const t=await caches.open(y),e=await t.match(`${f}${n}`);if(e)return await e.text()}catch(t){}return null})();return w.set(n,e),e.finally(()=>{w.delete(n)}),e}function C(n){const t=new Set;Object.entries(n).forEach(([n,e])=>{u.set(n,e),t.add(n)}),t.size>0&&$(t)}function S(n){return u.get(n)}function E(n){return u.has(n)}async function T(){const n=new Set(u.keys());if(u.clear(),"caches"in window)try{await caches.delete(y),x=!1}catch(t){}$(n)}function M(n,t,e){g.set(n,e),t&&b.set(n,t)}function D(n){g.delete(n),b.delete(n)}function $(n){v||(v=new Set),n.forEach(n=>v.add(n)),null!==m&&clearTimeout(m);const t="undefined"!=typeof requestIdleCallback?requestIdleCallback:n=>setTimeout(n,0);m=t(()=>{const n=v;v=null,m=null,n&&n.size>0&&function(n){g.forEach((t,e)=>{const o=b.get(e);o?n.has(o)&&t(new Set([o])):t(n)})}(n)})}function A(){return Array.from(u.keys())}async function I(){const n={version:p,cacheName:y,available:"caches"in window};if(!n.available)return n;try{const t=await caches.open(y),e=(await t.keys()).filter(n=>n.url.startsWith(f));return{...n,iconCount:e.length}}catch(t){return n}}const O=Object.freeze(Object.defineProperty({__proto__:null,addWatcher:M,clearIcons:T,getCacheInfo:I,getCachedIcon:z,getIcon:S,getIconCount:function(){return u.size},getIconNames:A,hasIcon:E,registerIcon:function(n,t){u.set(n,t),$(new Set([n])),z(n).then(e=>{e!==t&&k(n,t).catch(()=>{})}).catch(()=>{k(n,t).catch(()=>{})})},registerIcons:C,removeWatcher:D},Symbol.toStringTag,{value:"Module"}));let L=0;const N='<svg xmlns="http://www.w3.org/2000/svg"\n viewBox="0 0 512 512"\n fill="currentColor"\n opacity="0.2">\n <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/>\n</svg>',q=class extends o{constructor(){super(),this.A=null,this.I="",this.O=null,r(this.shadowRoot,{css:"\n:host {\n /* Display & Layout - CRITICAL: No containment to prevent paint deferral */\n display: flex;\n align-items: center;\n justify-content: center;\n line-height: 0;\n \n /* Dimensions with CSS variable support for flexibility */\n width: var(--ty-icon-size, 1em);\n height: var(--ty-icon-size, 1em);\n \n /* Enforce square aspect ratio */\n aspect-ratio: 1 / 1;\n \n \n /* Color & Transitions */\n color: inherit;\n transition: color var(--ty-transition-fast);\n \n /* Flex Behavior */\n flex-shrink: 0;\n \n /* Visibility - Force immediate rendering */\n visibility: visible !important;\n opacity: 1;\n \n /* ANTI-FLICKER: Force browser to paint immediately */\n will-change: contents;\n \n /* Prevent any sub-pixel rendering issues */\n transform: translateZ(0);\n -webkit-font-smoothing: antialiased;\n}\n\n/* The SVG element inside shadow DOM (registry / fallback path) */\n:host svg {\n width: 100%;\n height: 100%;\n display: block;\n\n /* Force immediate SVG rendering */\n will-change: auto;\n transform: translateZ(0);\n}\n\n/* Slotted SVG (server-side path: <ty-icon><svg>...</svg></ty-icon>).\n ::slotted() targets light-DOM children so they fill the host the same way\n shadow-DOM SVG does. Color is inherited from :host via currentColor. */\n::slotted(svg),\n::slotted(img) {\n width: 100%;\n height: 100%;\n display: block;\n}\n\n/* When used in slots, ensure proper display */\n:host([slot]) {\n display: inline-flex;\n}\n\n/* Size variants via CSS classes on the host */\n:host(.icon-xs) {\n width: 0.75em;\n height: 0.75em;\n}\n\n:host(.icon-sm) {\n width: 0.875em;\n height: 0.875em;\n}\n\n:host(.icon-md) {\n width: 1em;\n height: 1em;\n}\n\n:host(.icon-lg) {\n width: 1.25em;\n height: 1.25em;\n}\n\n:host(.icon-xl) {\n width: 1.5em;\n height: 1.5em;\n}\n\n:host(.icon-2xl) {\n width: 2em;\n height: 2em;\n}\n\n/* Fixed pixel sizes */\n:host(.icon-12) {\n width: 12px;\n height: 12px;\n}\n\n:host(.icon-14) {\n width: 14px;\n height: 14px;\n}\n\n:host(.icon-16) {\n width: 16px;\n height: 16px;\n}\n\n:host(.icon-18) {\n width: 18px;\n height: 18px;\n}\n\n:host(.icon-20) {\n width: 20px;\n height: 20px;\n}\n\n:host(.icon-24) {\n width: 24px;\n height: 24px;\n}\n\n:host(.icon-32) {\n width: 32px;\n height: 32px;\n}\n\n:host(.icon-48) {\n width: 48px;\n height: 48px;\n}\n\n:host(.icon-64) {\n width: 64px;\n height: 64px;\n}\n\n:host(.icon-80) {\n width: 80px;\n height: 80px;\n}\n\n:host(.icon-96) {\n width: 96px;\n height: 96px;\n}\n\n/* Spinning animation - default tempo */\n:host(.icon-spin) {\n animation: icon-spin 1s linear infinite;\n}\n\n/* Spinning animation - slow tempo */\n:host(.icon-spin.icon-tempo-slow) {\n animation: icon-spin 2s linear infinite;\n}\n\n/* Spinning animation - fast tempo */\n:host(.icon-spin.icon-tempo-fast) {\n animation: icon-spin 0.5s linear infinite;\n}\n\n@keyframes icon-spin {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n\n/* Pulse animation - default tempo */\n:host(.icon-pulse) {\n animation: icon-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n/* Pulse animation - slow tempo */\n:host(.icon-pulse.icon-tempo-slow) {\n animation: icon-pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n/* Pulse animation - fast tempo */\n:host(.icon-pulse.icon-tempo-fast) {\n animation: icon-pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n@keyframes icon-pulse {\n 0%,\n 100% {\n opacity: 1;\n }\n\n 50% {\n opacity: 0.5;\n }\n}\n\n/* Accessibility: ensure icons are not announced by screen readers by default */\n:host {\n -webkit-user-select: none;\n user-select: none;\n}\n\n/* Allow pointer events to pass through by default */\n:host(:not(.icon-clickable)) {\n pointer-events: none;\n}\n\n/* Clickable icons */\n:host(.icon-clickable) {\n cursor: pointer;\n pointer-events: auto;\n transition: color var(--ty-transition-fast), transform var(--ty-transition-fast);\n}\n\n:host(.icon-clickable:hover) {\n transform: scale(1.1);\n}\n\n:host(.icon-clickable:active) {\n transform: scale(0.95);\n}\n\n/* Disabled state */\n:host(.icon-disabled) {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* Block display variant */\n:host(.icon-block) {\n display: block;\n}\n",id:"ty-icon"}),this.O=document.createElement("slot"),this.O.innerHTML=N,this.I=N,this.shadowRoot.appendChild(this.O)}onConnect(){this.A="ty-icon-"+ ++L,this.name&&M(this.A,this.name,n=>{this.name&&n.has(this.name)&&this.render()}),this.updateClasses()}onDisconnect(){this.A&&(D(this.A),this.A=null)}onPropertiesChanged(n){for(const t of n)if("name"===t.name){this.A&&D(this.A);const n=t.newValue||"";n&&this.isConnected&&(this.A="ty-icon-"+ ++L,M(this.A,n,n=>{this.name&&n.has(this.name)&&this.render()}))}this.updateClasses()}get name(){return this.getProperty("name")}set name(n){this.setProperty("name",n)}get size(){return this.getProperty("size")||void 0}set size(n){this.setProperty("size",n||"")}get spin(){return this.getProperty("spin")}set spin(n){this.setProperty("spin",n)}get pulse(){return this.getProperty("pulse")}set pulse(n){this.setProperty("pulse",n)}get tempo(){return this.getProperty("tempo")||void 0}set tempo(n){this.setProperty("tempo",n||"")}buildClasses(){const n=[],t=this.getProperty("size");t&&n.push("icon-"+t),this.getProperty("spin")&&n.push("icon-spin"),this.getProperty("pulse")&&n.push("icon-pulse");const e=this.getProperty("tempo");e&&(this.getProperty("spin")||this.getProperty("pulse"))&&n.push("icon-tempo-"+e);const o=this.className.split(/\s+/).filter(n=>n&&!n.startsWith("icon-")&&"icon-spin"!==n&&"icon-pulse"!==n);return[...n,...o]}updateClasses(){const n=this.buildClasses().join(" ");this.className!==n&&(this.className=n)}render(){const n=this.getProperty("name");if(!n)return void this.renderSvg(N);const t=S(n);this.renderSvg(t||N)}renderSvg(n){this.I!==n&&this.O&&(this.O.innerHTML=n,this.I=n)}};q.formAssociated=!1,q.properties={name:{type:"string",visual:!0,default:""},size:{type:"string",visual:!0,default:""},spin:{type:"boolean",visual:!0,default:!1},pulse:{type:"boolean",visual:!0,default:!1},tempo:{type:"string",visual:!0,default:""}};let R=q;customElements.get("ty-icon")||customElements.define("ty-icon",R);const P=class extends o{constructor(){super(),this.L=null,this.handleClick=n=>{this.clickable&&!this.disabled&&(n.preventDefault(),n.stopPropagation(),this.dispatchTagEvent("click",{target:this}),this.dispatchTagEvent("pointerdown",{target:this}))},this.handleDismiss=n=>{this.dismissible&&!this.disabled&&(n.preventDefault(),n.stopPropagation(),this.dispatchTagEvent("dismiss",{target:this}))},this.handleKeydown=n=>{const t=n;if(!this.disabled)switch(t.keyCode){case 13:case 32:this.clickable&&(t.preventDefault(),this.dispatchTagEvent("click",{target:this}));break;case 8:case 46:this.dismissible&&(t.preventDefault(),this.dispatchTagEvent("dismiss",{target:this}))}},r(this.shadowRoot,{css:'\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 — 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 — override on :host for full control */\n background: var(--tag-bg, transparent);\n color: var(--tag-color, var(--ty-text));\n border: 1px solid;\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: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',id:"ty-tag"})}onConnect(){queueMicrotask(()=>{this.setupEventListeners()})}onDisconnect(){this.cleanupEventListeners()}onPropertiesChanged(n){}dispatchTagEvent(n,t){this.dispatchEvent(new CustomEvent(n,{detail:t,bubbles:!0,composed:!0,cancelable:!0}))}cleanupEventListeners(){this.L&&(this.L(),this.L=null)}setupEventListeners(){this.cleanupEventListeners();const n=this.shadowRoot,t=n.querySelector(".tag-container"),e=n.querySelector(".tag-dismiss");t&&(t.addEventListener("click",this.handleClick),t.addEventListener("keydown",this.handleKeydown),e&&e.addEventListener("click",this.handleDismiss),this.L=()=>{t.removeEventListener("click",this.handleClick),t.removeEventListener("keydown",this.handleKeydown),e&&e.removeEventListener("click",this.handleDismiss)})}render(){this.shadowRoot.innerHTML=`\n <div class="tag-container" part="container"${this.clickable?' tabindex="0"':""}${this.disabled?' aria-disabled="true"':""}${this.value?` data-value="${this.value}"`:""}>\n <div class="tag-start">\n <slot name="start" class="tag-start"></slot>\n </div>\n <div class="tag-content">\n <slot></slot>\n </div>\n <div class="tag-end">\n <slot name="end"></slot>\n ${this.dismissible?'\n <button class="tag-dismiss" type="button" aria-label="Remove tag">\n <svg viewBox="0 0 20 20" fill="currentColor">\n <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />\n </svg>\n </button>\n ':""}\n </div>\n </div>\n `,this.u&&this.setupEventListeners()}get flavor(){return this.getProperty("flavor")}set flavor(n){this.setProperty("flavor",n)}get size(){return this.getProperty("size")}set size(n){this.setProperty("size",n)}get value(){return this.getProperty("value")}set value(n){this.setProperty("value",n)}get selected(){return this.getProperty("selected")}set selected(n){this.setProperty("selected",n)}get pill(){return this.getProperty("pill")}set pill(n){this.setProperty("pill",n)}get clickable(){return this.getProperty("clickable")}set clickable(n){this.setProperty("clickable",n)}get dismissible(){return this.getProperty("dismissible")}set dismissible(n){this.setProperty("dismissible",n)}get disabled(){return this.getProperty("disabled")}set disabled(n){this.setProperty("disabled",n)}};P.formAssociated=!0,P.properties={flavor:{type:"string",visual:!0,default:"neutral"},size:{type:"string",visual:!0,default:"md",validate:n=>["xs","sm","md","lg","xl"].includes(n),coerce:n=>["xs","sm","md","lg","xl"].includes(n)?n:"md"},value:{type:"string",visual:!0,default:""},selected:{type:"boolean",visual:!0,default:!1},pill:{type:"boolean",visual:!0,default:!0,aliases:{"not-pill":!1}},clickable:{type:"boolean",visual:!0,default:!1},dismissible:{type:"boolean",visual:!0,default:!1},disabled:{type:"boolean",visual:!0,default:!1}};let V=P;function B(n=768){return window.matchMedia(`(pointer: coarse) and (max-width: ${n}px)`).matches}customElements.get("ty-tag")||customElements.define("ty-tag",V);class TyOption extends HTMLElement{constructor(){super(),this.N=void 0,this.q=!1,this.R=!1,this.P=!1,this.V=!1,this.B=null,this.F=B(),r(this.attachShadow({mode:"open"}),{css:"\n/* Ty Option Component Styles */\n\n.option-content {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--ty-spacing-2);\n box-sizing: border-box;\n width: 100%;\n\n /* Ensure content is clickable */\n cursor: pointer;\n user-select: none;\n\n /* Smooth transitions */\n transition: var(--ty-transition-all);\n\n /* Text styling — Linear-paired typography */\n color: var(--ty-text);\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 padding: var(--ty-spacing-2) var(--ty-spacing-3);\n}\n\n:host([cloned]) .option-content {\n padding: 0px;\n background: transparent;\n}\n\n.option-content:hover {\n background: var(--ty-bg-primary-soft);\n}\n\n.option-content[highlighted] {\n background: var(--ty-bg-primary-soft);\n color: var(--ty-text-strong);\n font-weight: var(--ty-font-semibold);\n}\n\n.option-content[selected] {\n background: var(--ty-bg-primary-mild);\n color: var(--ty-text-strong);\n font-weight: var(--ty-font-medium);\n}\n\n.option-text {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.option-clear-btn {\n flex-shrink: 0;\n width: 28px;\n height: 28px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(0, 0, 0, 0.5);\n border: none;\n border-radius: 50%;\n cursor: pointer;\n padding: 0;\n transition: all 150ms ease;\n opacity: 0.9;\n}\n\n.option-clear-btn:hover {\n background: rgba(0, 0, 0, 0.7);\n opacity: 1;\n transform: scale(1.05);\n}\n\n.option-clear-btn:active {\n background: rgba(0, 0, 0, 0.85);\n transform: scale(0.95);\n}\n\n.option-clear-btn svg {\n width: 16px;\n height: 16px;\n color: #ffffff;\n stroke-width: 2.5;\n}\n\n.option-content[disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.option-content[hidden] {}\n\n/* Ensure nested elements inherit proper styling */\n.option-content * {\n pointer-events: none;\n}\n\n/* CRITICAL: Re-enable pointer events on clear button */\n.option-clear-btn {\n pointer-events: auto !important;\n}\n\n.option-clear-btn * {\n pointer-events: none;\n}\n",id:"ty-option"}),this.render()}static get observedAttributes(){return["value","disabled","selected","highlighted","hidden"]}connectedCallback(){const n=Object.getOwnPropertyDescriptor(this,"value");n&&void 0!==n.value&&(this.N=n.value,delete this.value),this.render()}disconnectedCallback(){this.removeClearButtonListener()}attributeChangedCallback(n,t,e){if(t!==e){switch(n){case"value":this.N=e||void 0;break;case"selected":this.q=null!==e;break;case"disabled":this.R=null!==e;break;case"highlighted":this.P=null!==e;break;case"hidden":this.V=null!==e}this.render()}}getOptionValue(){if(void 0!==this.N)return this.N;const n=this.getAttribute("value");return null!==n?n:this.textContent?.trim()||""}get value(){return this.getOptionValue()}set value(n){this.N!==n&&(this.N=n,void 0!==n?this.setAttribute("value",n):this.removeAttribute("value"),this.render())}get selected(){return this.q}set selected(n){this.q!==n&&(this.q=n,n?this.setAttribute("selected",""):this.removeAttribute("selected"),this.render())}get disabled(){return this.R}set disabled(n){this.R!==n&&(this.R=n,n?this.setAttribute("disabled",""):this.removeAttribute("disabled"),this.render())}get highlighted(){return this.P}set highlighted(n){this.P!==n&&(this.P=n,n?this.setAttribute("highlighted",""):this.removeAttribute("highlighted"),this.render())}get hidden(){return this.V}set hidden(n){this.V!==n&&(this.V=n,n?this.setAttribute("hidden",""):this.removeAttribute("hidden"),this.render())}removeClearButtonListener(){if(this.B){const n=this.shadowRoot?.querySelector(".option-clear-btn");n&&n.removeEventListener("click",this.B),this.B=null}}addClearButtonListener(n){this.removeClearButtonListener(),this.B=n=>{n.preventDefault(),n.stopPropagation(),this.dispatchEvent(new CustomEvent("clear-selection",{bubbles:!0,composed:!0,detail:{value:this.N}}))},n.addEventListener("click",this.B)}render(){const n=this.shadowRoot;if(this.getOptionValue(),n.querySelector(".option-content")){const t=this.q&&this.F,e=n.querySelector(".option-clear-btn");if(t&&!e){const t=n.querySelector(".option-content");if(t){const n=t.querySelector("slot");if(n&&!n.parentElement?.classList.contains("option-text")){const t=document.createElement("span");t.className="option-text",n.parentNode?.insertBefore(t,n),t.appendChild(n)}const e=document.createElement("button");e.className="option-clear-btn",e.type="button",e.setAttribute("aria-label","Clear selection"),e.innerHTML='\n <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">\n <line x1="18" y1="6" x2="6" y2="18"></line>\n <line x1="6" y1="6" x2="18" y2="18"></line>\n </svg>\n ',this.addClearButtonListener(e),t.appendChild(e)}}else!t&&e&&(e.remove(),this.removeClearButtonListener())}else if(this.q&&this.F){n.innerHTML='\n <div class="option-content">\n <span class="option-text"><slot></slot></span>\n <button class="option-clear-btn" type="button" aria-label="Clear selection">\n <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">\n <line x1="18" y1="6" x2="6" y2="18"></line>\n <line x1="6" y1="6" x2="18" y2="18"></line>\n </svg>\n </button>\n </div>\n ';const t=n.querySelector(".option-clear-btn");t&&this.addClearButtonListener(t)}else n.innerHTML='<div class="option-content"><slot></slot></div>';const t=n.querySelector(".option-content");t&&(this.R?t.setAttribute("disabled",""):t.removeAttribute("disabled"),this.q?t.setAttribute("selected",""):t.removeAttribute("selected"),this.P?t.setAttribute("highlighted",""):t.removeAttribute("highlighted"),this.V?t.setAttribute("hidden",""):t.removeAttribute("hidden"))}}customElements.get("ty-option")||customElements.define("ty-option",TyOption);const F='\n:host {\n display: block;\n font-family: var(--ty-font-sans);\n width: 100%;\n}\n\n:host([size="xl"]) {\n font-size: 20px;\n}\n\n\n:host([size="xs"]) {\n font-size: 12px;\n}\n\n\n:host([size="sm"]) {\n font-size: 14px;\n}\n\n:host([size="lg"]) {\n font-size: 18px;\n}\n\n.input-container {\n display: flex;\n flex-direction: column;\n width: 100%;\n box-sizing: border-box;\n}\n\n/* ===== LABEL STYLING ===== */\n\n.input-label {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n font-weight: var(--ty-font-medium);\n color: var(--ty-label-color);\n margin-bottom: 6px;\n padding-left: 12px;\n display: flex;\n align-items: center;\n}\n\n/* Required indicator - using SVG icon */\n.required-icon {\n display: inline-flex;\n align-items: center;\n color: var(--ty-color-danger);\n width: 12px;\n height: 12px;\n margin-left: 4px;\n vertical-align: middle;\n}\n\n.required-icon svg {\n width: 100%;\n height: 100%;\n}\n\n/* ===== INPUT WRAPPER WITH SLOTS ===== */\n\n.input-wrapper {\n display: flex;\n align-items: center;\n gap: 0.5rem; /* No gap by default */\n width: 100%;\n box-sizing: border-box;\n border: 1px solid var(--input-border, var(--ty-input-border));\n border-radius: var(--ty-radius-base);\n background: var(--input-bg, var(--input-bg, var(--ty-input-bg)));\n transition: all 0.15s ease-in-out;\n \n /* Default size (md) */\n min-height: 40px;\n padding: 0 12px;\n}\n\n/* Wrapper states */\n.input-wrapper:hover:not(.disabled) {\n border-color: var(--input-border-hover, var(--ty-input-border-hover));\n}\n\n.input-wrapper.focused {\n border-color: var(--input-border-focus, var(--ty-input-border-focus));\n box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n.input-wrapper.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n background: var(--input-disabled-bg, var(--ty-input-disabled-bg));\n border-color: var(--input-disabled-border, var(--ty-input-disabled-border));\n}\n\n/* ===== SLOT STYLING ===== */\n\n/* Style slotted content directly (no wrappers needed) */\n::slotted([slot="start"]),\n::slotted([slot="end"]) {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: var(--ty-color-text-soft);\n}\n\n/* Icon sizing for slotted icons */\n::slotted(ty-icon) {\n width: 1em;\n height: 1em;\n flex-shrink: 0;\n}\n\n/* ===== ERROR MESSAGE STYLING ===== */\n\n.error-message {\n font-size: var(--ty-font-xs);\n line-height: var(--ty-leading-xs);\n letter-spacing: var(--ty-tracking-xs);\n color: var(--ty-color-danger);\n margin-top: 4px;\n padding-left: 12px;\n}\n\n/* Error state for wrapper */\n.input-wrapper.error {\n border-color: var(--ty-color-danger);\n background: var(--ty-bg-danger-soft);\n}\n\n.input-wrapper.error.focused {\n border-color: var(--ty-color-danger-mild);\n box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n/* ===== INPUT BASE STYLING ===== */\n\ninput {\n /* Reset and base styles — Linear-paired typography */\n flex: 1;\n min-width: 0;\n box-sizing: border-box;\n border: none;\n outline: none;\n background: transparent;\n color: var(--input-color, var(--ty-input-color));\n font-family: inherit;\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n font-weight: var(--ty-font-normal);\n padding: 0;\n margin: 0;\n}\n\n/* Remove number input spinner arrows */\ninput[type="number"]::-webkit-outer-spin-button,\ninput[type="number"]::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\ninput[type="number"] {\n -moz-appearance: textfield;\n}\n\n/* Disabled state */\ninput:disabled {\n cursor: not-allowed;\n color: var(--input-disabled-color, var(--ty-input-disabled-color));\n}\n\n/* Placeholder styling */\ninput::placeholder {\n color: var(--input-placeholder, var(--ty-input-placeholder));\n font-weight: 400;\n}\n\n/* ===== SIZE MODIFIERS ===== */\n\n/* Extra Small */\n.input-wrapper.xs {\n min-height: 32px;\n padding: 0 8px;\n border-radius: var(--ty-input-radius-xs, var(--ty-radius-base));\n}\n\n.input-wrapper.xs input {\n font-size: var(--ty-font-xs);\n line-height: var(--ty-leading-xs);\n letter-spacing: var(--ty-tracking-xs);\n}\n\n/* Small */\n.input-wrapper.sm {\n min-height: 36px;\n padding: 0 10px;\n border-radius: var(--ty-input-radius-sm, var(--ty-radius-base));\n}\n\n.input-wrapper.sm input {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n}\n\n/* Medium (default) */\n.input-wrapper.md {\n min-height: 40px;\n padding: 0 12px;\n border-radius: var(--ty-input-radius-md, var(--ty-radius-base));\n}\n\n.input-wrapper.md input {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n}\n\n/* Large */\n.input-wrapper.lg {\n min-height: 44px;\n padding: 0 14px;\n border-radius: var(--ty-input-radius-lg, var(--ty-radius-base));\n}\n\n.input-wrapper.lg input {\n font-size: var(--ty-font-base);\n line-height: var(--ty-leading-base);\n letter-spacing: var(--ty-tracking-base);\n}\n\n/* Extra Large */\n.input-wrapper.xl {\n min-height: 48px;\n padding: 0 16px;\n border-radius: var(--ty-input-radius-xl, var(--ty-radius-base));\n}\n\n.input-wrapper.xl input {\n font-size: var(--ty-font-lg);\n line-height: var(--ty-leading-lg);\n letter-spacing: var(--ty-tracking-lg);\n}\n\n/* ===== SEMANTIC FLAVOR MODIFIERS ===== */\n\n/* Primary */\n.input-wrapper.primary {\n border-color: var(--ty-input-primary-border, var(--ty-color-primary));\n}\n\n.input-wrapper.primary:hover:not(.disabled) {\n border-color: var(--ty-color-primary-mild);\n}\n\n.input-wrapper.primary.focused {\n border-color: var(--ty-color-primary-mild);\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n/* Secondary */\n.input-wrapper.secondary {\n border-color: var(--ty-input-secondary-border, var(--ty-color-secondary));\n}\n\n.input-wrapper.secondary.focused {\n border-color: var(--ty-color-secondary-mild);\n box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);\n}\n\n/* Success */\n.input-wrapper.success {\n border-color: var(--ty-input-success-border);\n}\n\n.input-wrapper.success:hover:not(.disabled) {\n border-color: var(--ty-color-success-mild);\n}\n\n.input-wrapper.success.focused {\n border-color: var(--ty-color-success-mild);\n box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);\n}\n\n/* Danger */\n.input-wrapper.danger {\n border-color: var(--ty-input-danger-border);\n}\n\n.input-wrapper.danger:hover:not(.disabled) {\n border-color: var(--ty-color-danger-mild);\n}\n\n.input-wrapper.danger.focused {\n border-color: var(--ty-color-danger-mild);\n box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);\n}\n\n/* Warning */\n.input-wrapper.warning {\n border-color: var(--ty-input-warning-border);\n}\n\n.input-wrapper.warning:hover:not(.disabled) {\n border-color: var(--ty-color-warning-mild);\n}\n\n.input-wrapper.warning.focused {\n border-color: var(--ty-color-warning-mild);\n box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);\n}\n\n/* Neutral (default) */\n.input-wrapper.neutral.focused {\n border-color: var(--input-border-focus, var(--ty-input-border-focus));\n box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n/* ===== ACCESSIBILITY ENHANCEMENTS ===== */\n\ninput:focus-visible {\n outline: none;\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: high) {\n .input-wrapper {\n border-width: 2px;\n }\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n .input-wrapper {\n transition: none;\n }\n}\n\n/* ===== RESPONSIVE BEHAVIOR ===== */\n\n@media (max-width: 640px) {\n .input-wrapper.lg {\n min-height: 40px;\n padding: 0 12px;\n }\n\n .input-wrapper.lg input {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n }\n\n .input-wrapper.xl {\n min-height: 44px;\n padding: 0 14px;\n }\n\n .input-wrapper.xl input {\n font-size: var(--ty-font-base);\n line-height: var(--ty-leading-base);\n letter-spacing: var(--ty-tracking-base);\n }\n}\n\n@media (max-width: 480px) {\n .input-wrapper.xl {\n min-height: 40px;\n padding: 0 12px;\n }\n\n .input-wrapper.xl input {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n }\n}\n\n/* ===== CHECKBOX STYLING ===== */\n\n.checkbox-container {\n display: inline-flex;\n align-items: center;\n outline: none;\n transition: all 0.15s ease-in-out;\n user-select: none;\n cursor: pointer;\n\n /* Default size (md) - matching input sizes */\n border-radius: 6px;\n gap: var(--ty-spacing-1);\n color: var(--ty-text-faint);\n}\n\n.checkbox-container[aria-checked="true"] {\n color: var(--ty-text);\n}\n\n/* Ensure slotted label content inherits the color from container */\n.checkbox-container ::slotted(*) {\n color: inherit;\n transition: color 0.15s ease-in-out;\n}\n\n.checkbox-container label {\n cursor: pointer;\n}\n\n.checkbox-container label {\n font-size: var(--ty-font-sm);\n}\n\n.checkbox-container.sm label {\n font-size: var(--ty-font-xs);\n}\n\n.checkbox-container.lg label {\n font-size: var(--ty-font-base);\n}\n\n.checkbox-container.xl label {\n font-size: var(--ty-font-lg);\n}\n\n/* Checkbox input container - different layout for checkboxes */\n.input-container.checkbox-layout {\n flex-direction: row;\n align-items: center;\n gap: 12px;\n width: auto;\n /* Don\'t force full width for checkboxes */\n}\n\n.input-container.checkbox-layout .input-label {\n margin-bottom: 0;\n padding-left: 0;\n order: 2;\n cursor: pointer;\n flex: 1;\n}\n\n.input-container.checkbox-layout .checkbox-container {\n order: 1;\n flex-shrink: 0;\n}\n\n/* Error message positioning for checkboxes */\n.input-container.checkbox-layout .error-message {\n padding-left: 0;\n margin-left: 52px;\n /* Align with label text */\n}\n\n.checkbox-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n color: inherit;\n transition: color 0.15s ease-in-out;\n pointer-events: none;\n /* Let the container handle the click */\n}\n\n.checkbox-container svg {\n width: 24px;\n height: 24px;\n}\n\n/* ===== CHECKBOX SIZE MODIFIERS ===== */\n\n.checkbox-container.xs svg {\n width: 16px;\n height: 16px;\n}\n\n/* Adjust error message margin for XS */\n.input-container.checkbox-layout .checkbox-container.xs~.error-message {\n margin-left: 44px;\n}\n\n\n.checkbox-container.sm svg {\n width: 20px;\n height: 20px;\n}\n\n/* Adjust error message margin for SM */\n.input-container.checkbox-layout .checkbox-container.sm~.error-message {\n margin-left: 48px;\n}\n\n\n.checkbox-container.md svg {\n width: 24px;\n height: 24px;\n}\n\n\n.checkbox-container.lg svg {\n width: 28px;\n height: 28px;\n}\n\n.checkbox-container.xl svg {\n width: 32px;\n height: 32px;\n}\n\n\n.checkbox-container.xl svg {\n font-size: 20px;\n}\n\n/* Adjust error message margin for LG */\n.input-container.checkbox-layout .checkbox-container.lg~.error-message {\n margin-left: 56px;\n}\n\n\n/* Adjust error message margin for XL */\n.input-container.checkbox-layout .checkbox-container.xl~.error-message {\n margin-left: 60px;\n /* 48px + 12px gap */\n}\n\n/* ===== CHECKBOX SEMANTIC FLAVORS ===== */\n\n.checkbox-container.primary {\n color: var(--ty-color-primary-soft);\n}\n\n\n.checkbox-container.primary[aria-checked="true"] {\n color: var(--ty-color-primary);\n}\n\n.checkbox-container.secondary {\n color: var(--ty-color-secondary-soft);\n}\n\n\n.checkbox-container.secondary[aria-checked="true"] {\n color: var(--ty-color-secondary);\n}\n\n.checkbox-container.success {\n color: var(--ty-color-success-soft);\n}\n\n\n.checkbox-container.success[aria-checked="true"] {\n color: var(--ty-color-success);\n}\n\n.checkbox-container.danger {\n color: var(--ty-color-danger-soft);\n}\n\n.checkbox-container.danger[aria-checked="true"] {\n color: var(--ty-color-danger);\n}\n\n.checkbox-container.warning {\n color: var(--ty-color-warning-soft);\n}\n\n.checkbox-container.warning[aria-checked="true"] {\n color: var(--ty-color-warning);\n}\n\n\n/* Neutral */\n.checkbox-container.neutral {\n color: var(--ty-color-neutral-soft);\n}\n\n.checkbox-container.neutral[aria-checked="true"] {\n color: var(--ty-color-neutral);\n}\n\n/* Disabled state */\n.checkbox-container.disabled {\n pointer-events: none;\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.checkbox-container.disabled .checkbox-icon {\n color: var(--ty-color-neutral-faint);\n}\n\n/* Error state */\n.checkbox-container.error .checkbox-icon {\n color: var(--ty-color-danger);\n}\n\n.checkbox-container.error:focus {\n box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);\n}\n\n/* Required state */\n.checkbox-container.required .checkbox-icon {\n /* Could add specific styling for required checkboxes */\n}\n\n/* ===== RESPONSIVE CHECKBOX BEHAVIOR ===== */\n\n@container (max-width: 480px) {\n .checkbox-container.lg {\n width: 40px;\n height: 40px;\n }\n\n .checkbox-container.lg svg {\n width: 20px;\n height: 20px;\n }\n\n .checkbox-container.xl {\n width: 44px;\n height: 44px;\n }\n\n .checkbox-container.xl svg {\n width: 22px;\n height: 22px;\n }\n}\n\n@container (max-width: 320px) {\n .checkbox-container.xl {\n width: 40px;\n height: 40px;\n }\n\n .checkbox-container.xl svg {\n width: 20px;\n height: 20px;\n }\n}\n\n/* Fallback for browsers without container query support */\n@media (max-width: 640px) {\n .checkbox-container.lg {\n width: 40px;\n height: 40px;\n }\n\n .checkbox-container.lg svg {\n width: 20px;\n height: 20px;\n }\n\n .checkbox-container.xl {\n width: 44px;\n height: 44px;\n }\n\n .checkbox-container.xl svg {\n width: 22px;\n height: 22px;\n }\n}\n\n@media (max-width: 480px) {\n .checkbox-container.xl {\n width: 40px;\n height: 40px;\n }\n\n .checkbox-container.xl svg {\n width: 20px;\n height: 20px;\n }\n}\n';function H(n){return["number","currency","percent","compact"].includes(n)}function j(n,t){if(t)return t;const e=n.closest("[lang]");if(e){const n=e.getAttribute("lang");if(n)return n}return document.documentElement.lang?document.documentElement.lang:navigator.language?navigator.language:"en-US"}function W(n,t){let e=j(n);const o=new MutationObserver(o=>{for(const i of o)if("attributes"===i.type&&"lang"===i.attributeName){const o=j(n);o!==e&&(e=o,t(o))}});return o.observe(document.documentElement,{attributes:!0,attributeFilter:["lang"],subtree:!0}),()=>o.disconnect()}const Y='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-asterisk-icon lucide-asterisk"><path d="M12 6v12"/><path d="M17.196 9 6.804 15"/><path d="m6.804 9 10.392 6"/></svg>',_=class extends o{constructor(){super(),this.H=null,this.j=!1,this.W=!1,this.Y=null,this._=null,this.U=null,this.G=null,this.X=null,this.K=null,r(this.shadowRoot,{css:F,id:"ty-input"})}onConnect(){this.initializeShadowValue(),this.Z=W(this,()=>{this.render()})}onDisconnect(){this.removeEventListeners(),this.Z&&(this.Z(),this.Z=void 0),null!==this.X&&(clearTimeout(this.X),this.X=null),null!==this.K&&(clearTimeout(this.K),this.K=null)}onPropertiesChanged(n){for(const{name:t,newValue:e}of n)switch(t){case"value":this.H=this.parseShadowValue(e||"");break;case"type":const n=this.getProperty("value")||"";this.H=this.parseShadowValue(n);break;case"error":e&&"neutral"===this.getProperty("flavor")&&this.setProperty("flavor","danger")}}onFormReset(){this.H=null,this.j=!1,null!==this.X&&(clearTimeout(this.X),this.X=null),null!==this.K&&(clearTimeout(this.K),this.K=null),this.render()}getFormValue(){return null!==this.H?this.H+"":null}initializeShadowValue(){const n=this.getProperty("value");n&&(this.H=this.parseShadowValue(n),this.m.setFormValue(null!==this.H?this.H+"":null))}parseShadowValue(n){if(!n||"string"!=typeof n||""===n.trim())return null;if(H(this.type)){const t=function(n){if(!n||""===n.trim())return null;let t=n.replace(/[^\d.,-]/g,"").trim();if(""===t||"-"===t)return null;const e=t.lastIndexOf(","),o=t.lastIndexOf("."),i=Math.max(e,o);if(-1===i){const n=parseFloat(t);return isNaN(n)?null:n}const r=t.slice(0,i).replace(/[.,]/g,""),s=t.slice(i+1),a=parseFloat(r+"."+s);return isNaN(a)?null:a}(n);return null!==t&&0===this.precision?Math.round(t):t}return n}shouldFormat(){return H(this.type)&&!this.j&&null!==this.H&&"number"==typeof this.H}getFormatConfig(){return{type:this.type,locale:this.locale,currency:this.currency,precision:this.precision}}getDisplayValue(){if(this.shouldFormat()){let n=this.H;return"percent"===this.type&&(n/=100),function(n,t){const{type:e,locale:o="en-US",currency:i="USD",precision:r}=t,s={};switch(void 0!==r&&(s.minimumFractionDigits=r,s.maximumFractionDigits=r),e){case"currency":s.style="currency",s.currency=i;break;case"percent":s.style="percent";break;case"compact":s.notation="compact",s.compactDisplay="short";break;default:s.style="decimal"}return new Intl.NumberFormat(o,s).format(n).replace(/\u202F/g," ").replace(/\u2009/g," ")}(n,this.getFormatConfig())}return null!==this.H?this.H+"":""}get type(){return this.getProperty("type")}set type(n){this.setProperty("type",n)}get value(){return null!==this.H?this.H+"":""}set value(n){this.setProperty("value",n)}get name(){return this.getProperty("name")}set name(n){this.setProperty("name",n)}get placeholder(){return this.getProperty("placeholder")}set placeholder(n){this.setProperty("placeholder",n)}get label(){return this.getProperty("label")}set label(n){this.setProperty("label",n)}get disabled(){return this.getProperty("disabled")}set disabled(n){this.setProperty("disabled",n)}get required(){return this.getProperty("required")}set required(n){this.setProperty("required",n)}get error(){return this.getProperty("error")}set error(n){this.setProperty("error",n)}get size(){return this.getProperty("size")}set size(n){this.setProperty("size",n)}get flavor(){return this.getProperty("flavor")}set flavor(n){this.setProperty("flavor",n)}get currency(){return this.getProperty("currency")}set currency(n){this.setProperty("currency",n)}get locale(){return j(this,this.getProperty("locale"))}set locale(n){this.setProperty("locale",n)}get precision(){return this.getProperty("precision")}set precision(n){this.setProperty("precision",n)}get debounce(){return this.getProperty("debounce")}set debounce(n){this.setProperty("debounce",n)}get form(){return this.m.form}buildClassList(){const n=[this.size,this.flavor];return this.disabled&&n.push("disabled"),this.required&&n.push("required"),this.error&&n.push("error"),n.join(" ")}dispatchInputEvent(n,t){this.dispatchEvent(new CustomEvent("input",{detail:{value:this.H,formattedValue:this.shouldFormat()?this.getDisplayValue():null,rawValue:n,originalEvent:t},bubbles:!0,composed:!0}))}dispatchChangeEvent(n,t){this.dispatchEvent(new CustomEvent("change",{detail:{value:this.H,formattedValue:this.shouldFormat()?this.getDisplayValue():null,rawValue:n,originalEvent:t},bubbles:!0,composed:!0}))}removeEventListeners(){if(!this.W)return;const n=this.shadowRoot;if(!n)return;const t=n.querySelector("input");t&&(this.Y&&(t.removeEventListener("input",this.Y),this.Y=null),this._&&(t.removeEventListener("change",this._),this._=null),this.U&&(t.removeEventListener("focus",this.U),this.U=null),this.G&&(t.removeEventListener("blur",this.G),this.G=null),this.W=!1)}setupEventListeners(){if(this.W)return;const n=this.shadowRoot,t=n.querySelector("input"),e=n.querySelector(".input-wrapper");t&&e&&(this.Y=n=>{n.stopPropagation(),n.stopImmediatePropagation();const e=n.target.value;this.H=this.parseShadowValue(e),this.m.setFormValue(null!==this.H?this.H+"":null),null!==this.X&&clearTimeout(this.X),this.debounce>0?this.X=window.setTimeout(()=>{this.dispatchInputEvent(t.value,n),this.X=null},this.debounce):this.dispatchInputEvent(e,n)},this._=n=>{n.stopPropagation(),n.stopImmediatePropagation();const e=n.target.value;this.H=this.parseShadowValue(e),this.m.setFormValue(null!==this.H?this.H+"":null),null!==this.K&&clearTimeout(this.K),this.debounce>0?this.K=window.setTimeout(()=>{this.dispatchChangeEvent(t.value,n),this.K=null},this.debounce):this.dispatchChangeEvent(e,n)},this.U=n=>{this.j=!0,e.classList.add("focused"),H(this.type)&&null!==this.H&&(t.value=this.H+""),this.dispatchEvent(new CustomEvent("focus",{detail:{originalEvent:n},bubbles:!0,composed:!0}))},this.G=n=>{const o=n.target.value;null!==this.X&&(clearTimeout(this.X),this.X=null,this.dispatchInputEvent(o,n)),null!==this.K&&(clearTimeout(this.K),this.K=null,this.dispatchChangeEvent(o,n)),this.j=!1,e.classList.remove("focused"),this.shouldFormat()&&(t.value=this.getDisplayValue()),this.dispatchEvent(new CustomEvent("blur",{detail:{originalEvent:n},bubbles:!0,composed:!0}))},t.addEventListener("input",this.Y),t.addEventListener("change",this._),t.addEventListener("focus",this.U),t.addEventListener("blur",this.G),this.W=!0)}render(){const n=this.shadowRoot,t=n.querySelector("input"),e=n.querySelector(".input-wrapper"),o=n.querySelector(".input-label"),i=n.querySelector(".error-message"),r=this.buildClassList(),s=["password","email","tel","url"].includes(this.type)?this.type:"text",a=H(this.type)?"decimal":"email"===this.type?"email":"tel"===this.type?"tel":"url"===this.type?"url":void 0,l=this.getDisplayValue();if(t&&e){if(t.type=s,t.value=l,t.placeholder=this.placeholder,t.name=this.name,a?t.inputMode=a:t.removeAttribute("inputmode"),e.className="input-wrapper "+r,t.disabled=this.disabled,this.disabled?t.setAttribute("disabled",""):t.removeAttribute("disabled"),t.required=this.required,this.required?t.setAttribute("required",""):t.removeAttribute("required"),this.label)if(o)o.innerHTML=`${this.label}${this.required?`<span class="required-icon">${Y}</span>`:""}`,o.style.display="flex";else{const t=document.createElement("label");t.className="input-label",t.innerHTML=`${this.label}${this.required?`<span class="required-icon">${Y}</span>`:""}`;const o=n.querySelector(".input-container");o&&o.insertBefore(t,e)}else o&&(o.style.display="none");if(this.error)if(i)i.textContent=this.error;else{const t=document.createElement("div");t.className="error-message",t.textContent=this.error,n.querySelector(".input-container")?.appendChild(t)}else i&&i.remove()}else{n.innerHTML=`\n <div class="input-container">\n ${this.label?`\n <label class="input-label">\n ${this.label}\n ${this.required?`<span class="required-icon">${Y}</span>`:""}\n </label>\n `:""}\n <div class="input-wrapper ${r}">\n <slot name="start"></slot>\n <input\n type="${s}"\n value="${l}"\n placeholder="${this.placeholder}"\n name="${this.name}"\n ${a?`inputmode="${a}"`:""}\n />\n <slot name="end"></slot>\n </div>\n ${this.error?`\n <div class="error-message">${this.error}</div>\n `:""}\n </div>\n `;const t=n.querySelector("input");t.disabled=this.disabled,t.required=this.required,this.setupEventListeners()}}};_.formAssociated=!0,_.properties={type:{type:"string",visual:!0,default:"text",validate:n=>["text","email","password","number","tel","url","currency","percent","compact"].includes(n),coerce:n=>["text","email","password","number","tel","url","currency","percent","compact"].includes(n)?n:"text"},value:{type:"string",visual:!0,formValue:!0,emitChange:!0,default:""},name:{type:"string",default:""},placeholder:{type:"string",visual:!0,default:""},label:{type:"string",visual:!0,default:""},disabled:{type:"boolean",visual:!0,default:!1},required:{type:"boolean",visual:!0,default:!1},error:{type:"string",visual:!0,default:""},size:{type:"string",visual:!0,default:"md",validate:n=>["xs","sm","md","lg","xl"].includes(n),coerce:n=>["xs","sm","md","lg","xl"].includes(n)?n:"md"},flavor:{type:"string",visual:!0,default:"neutral",validate:n=>["primary","secondary","success","danger","warning","neutral"].includes(n),coerce:n=>["primary","secondary","success","danger","warning","neutral"].includes(n)?n:"neutral"},currency:{type:"string",visual:!0,default:"USD"},locale:{type:"string",visual:!0,default:"en-US"},precision:{type:"number",visual:!0,default:void 0,validate:n=>null==n||"number"==typeof n&&n>=0&&10>=n,coerce:n=>{if(null==n)return;const t=+n;return isNaN(t)?void 0:Math.max(0,Math.min(10,Math.floor(t)))}},debounce:{type:"number",default:0,validate:n=>{const t=+n;return!isNaN(t)&&t>=0&&5e3>=t},coerce:n=>{const t=+n;return isNaN(t)?0:Math.max(0,Math.min(5e3,Math.floor(t)))}}};let U=_;customElements.get("ty-input")||customElements.define("ty-input",U);const G=`\n${F}\n\n/* Override input's :host to be inline (sized to its visual) */\n:host {\n display: inline-flex;\n width: auto;\n vertical-align: middle;\n}\n`,X='<svg fill=\'currentColor\' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">\x3c!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--\x3e<path d="M160 96L480 96C515.3 96 544 124.7 544 160L544 480C544 515.3 515.3 544 480 544L160 544C124.7 544 96 515.3 96 480L96 160C96 124.7 124.7 96 160 96z"/></svg>',K='<svg fill=\'currentColor\' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">\x3c!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--\x3e<path d="M480 96C515.3 96 544 124.7 544 160L544 480C544 515.3 515.3 544 480 544L160 544C124.7 544 96 515.3 96 480L96 160C96 124.7 124.7 96 160 96L480 96zM438 209.7C427.3 201.9 412.3 204.3 404.5 215L285.1 379.2L233 327.1C223.6 317.7 208.4 317.7 199.1 327.1C189.8 336.5 189.7 351.7 199.1 361L271.1 433C276.1 438 283 440.5 289.9 440C296.8 439.5 303.3 435.9 307.4 430.2L443.3 243.2C451.1 232.5 448.7 217.5 438 209.7z"/></svg>',Z=class extends o{constructor(){super(),this.W=!1,this.J=null,this.nn=null,this.U=null,this.G=null,r(this.shadowRoot,{css:G,id:"ty-checkbox"})}onConnect(){}onDisconnect(){this.removeEventListeners()}onPropertiesChanged(n){}getFormValue(){return this.checked?this.value:null}buildClassList(){const n=[this.size,this.flavor];return this.disabled&&n.push("disabled"),this.required&&n.push("required"),n.join(" ")}handleCheckboxClick(n){if(this.disabled)return;const t=!this.checked;this.checked=t,setTimeout(()=>{const e={value:t,checked:t,formValue:t?this.value:null,originalEvent:n};this.dispatchEvent(new CustomEvent("input",{detail:e,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:e,bubbles:!0,composed:!0}))},0)}handleCheckboxKeydown(n){this.disabled||["Space"," ","Enter"].includes(n.key)&&(n.preventDefault(),n.stopPropagation(),this.handleCheckboxClick(n))}removeEventListeners(){if(!this.W)return;const n=this.shadowRoot;if(!n)return;const t=n.querySelector(".checkbox-container");t&&(this.J&&(t.removeEventListener("click",this.J),this.J=null),this.nn&&(t.removeEventListener("keydown",this.nn),this.nn=null),this.U&&(t.removeEventListener("focus",this.U),this.U=null),this.G&&(t.removeEventListener("blur",this.G),this.G=null),this.W=!1)}setupEventListeners(){if(this.W)return;const n=this.shadowRoot.querySelector(".checkbox-container");n&&(this.J=n=>{this.handleCheckboxClick(n)},this.nn=n=>{this.handleCheckboxKeydown(n)},this.U=()=>{n.classList.add("focused")},this.G=()=>{n.classList.remove("focused")},n.addEventListener("click",this.J),n.addEventListener("keydown",this.nn),n.addEventListener("focus",this.U),n.addEventListener("blur",this.G),this.W=!0)}render(){const n=this.shadowRoot;let t=n.querySelector(".checkbox-container");const e=this.buildClassList();if(t){t.className="checkbox-container "+e,t.tabIndex=this.disabled?-1:0,t.setAttribute("aria-checked",this.checked+""),t.setAttribute("aria-disabled",this.disabled+""),t.setAttribute("aria-required",this.required+"");const n=t.querySelector(".checkbox-icon");n&&(n.innerHTML=this.checked?K:X)}else{t=document.createElement("div"),t.className="checkbox-container "+e,t.tabIndex=this.disabled?-1:0,t.setAttribute("role","checkbox"),t.setAttribute("aria-checked",this.checked+""),t.setAttribute("aria-disabled",this.disabled+""),t.setAttribute("aria-required",this.required+"");const o=document.createElement("div");o.className="checkbox-icon",o.innerHTML=this.checked?K:X,t.appendChild(o),n.appendChild(t),this.setupEventListeners()}}get checked(){return this.getProperty("checked")}set checked(n){this.setProperty("checked",n)}get value(){return this.getProperty("value")}set value(n){this.setProperty("value",n)}get name(){return this.getProperty("name")}set name(n){this.setProperty("name",n)}get disabled(){return this.getProperty("disabled")}set disabled(n){this.setProperty("disabled",n)}get required(){return this.getProperty("required")}set required(n){this.setProperty("required",n)}get size(){return this.getProperty("size")}set size(n){this.setProperty("size",n)}get flavor(){return this.getProperty("flavor")}set flavor(n){this.setProperty("flavor",n)}get form(){return this.m.form}};Z.formAssociated=!0,Z.properties={checked:{type:"boolean",visual:!0,formValue:!0,emitChange:!0,default:!1},value:{type:"string",default:"on"},name:{type:"string",default:""},disabled:{type:"boolean",visual:!0,default:!1},required:{type:"boolean",visual:!0,default:!1},size:{type:"string",visual:!0,default:"md",validate:n=>["xs","sm","md","lg","xl"].includes(n),coerce:n=>["xs","sm","md","lg","xl"].includes(n)?n:"md"},flavor:{type:"string",visual:!0,default:"neutral",validate:n=>["primary","secondary","success","danger","warning","neutral"].includes(n),coerce:n=>["primary","secondary","success","danger","warning","neutral"].includes(n)?n:"neutral"}};let J=Z;customElements.get("ty-checkbox")||customElements.define("ty-checkbox",J);const Q=`\n${F}\n\n/* Override input's :host so the switch sizes to its visual */\n:host {\n display: inline-flex;\n width: auto;\n vertical-align: middle;\n}\n\n/* ===== SWITCH CONTAINER (just the visual) ===== */\n.switch-container {\n display: inline-block;\n cursor: pointer;\n user-select: none;\n outline: none;\n vertical-align: middle;\n}\n\n.switch-container.disabled {\n cursor: not-allowed;\n opacity: 0.55;\n}\n\n.switch-container:focus-visible .switch-track,\n.switch-container.focused .switch-track {\n box-shadow: 0 0 0 3px var(--ty-input-shadow-focus);\n}\n\n/* ===== TRACK ===== */\n.switch-track {\n position: relative;\n flex-shrink: 0;\n width: 36px;\n height: 20px;\n border-radius: 999px;\n background: var(--ty-color-neutral-soft, var(--ty-input-border));\n transition: background-color 0.18s ease-in-out;\n box-sizing: border-box;\n}\n\n/* ===== THUMB ===== */\n.switch-thumb {\n position: absolute;\n top: 2px;\n left: 2px;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: white;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n transition: transform 0.18s ease-in-out, background-color 0.18s ease-in-out;\n}\n\n/* ===== CHECKED STATE ===== */\n.switch-container[aria-checked="true"] .switch-track {\n background: var(--ty-color-primary);\n}\n\n.switch-container[aria-checked="true"] .switch-thumb {\n transform: translateX(16px);\n}\n\n/* ===== SIZE VARIANTS ===== */\n.switch-container.xs .switch-track { width: 26px; height: 14px; }\n.switch-container.xs .switch-thumb { width: 10px; height: 10px; }\n.switch-container.xs[aria-checked="true"] .switch-thumb { transform: translateX(12px); }\n\n.switch-container.sm .switch-track { width: 30px; height: 16px; }\n.switch-container.sm .switch-thumb { width: 12px; height: 12px; }\n.switch-container.sm[aria-checked="true"] .switch-thumb { transform: translateX(14px); }\n\n/* md is default — already set above */\n\n.switch-container.lg .switch-track { width: 44px; height: 24px; }\n.switch-container.lg .switch-thumb { width: 20px; height: 20px; }\n.switch-container.lg[aria-checked="true"] .switch-thumb { transform: translateX(20px); }\n\n.switch-container.xl .switch-track { width: 52px; height: 28px; }\n.switch-container.xl .switch-thumb { width: 24px; height: 24px; }\n.switch-container.xl[aria-checked="true"] .switch-thumb { transform: translateX(24px); }\n\n/* ===== FLAVOR VARIANTS (checked-state colors) ===== */\n.switch-container.primary[aria-checked="true"] .switch-track { background: var(--ty-color-primary); }\n.switch-container.secondary[aria-checked="true"] .switch-track { background: var(--ty-color-secondary); }\n.switch-container.success[aria-checked="true"] .switch-track { background: var(--ty-color-success); }\n.switch-container.danger[aria-checked="true"] .switch-track { background: var(--ty-color-danger); }\n.switch-container.warning[aria-checked="true"] .switch-track { background: var(--ty-color-warning); }\n.switch-container.neutral[aria-checked="true"] .switch-track { background: var(--ty-color-neutral); }\n\n`,nn=class extends o{constructor(){super(),this.W=!1,this.J=null,this.nn=null,this.U=null,this.G=null,r(this.shadowRoot,{css:Q,id:"ty-switch"})}onConnect(){}onDisconnect(){this.removeEventListeners()}onPropertiesChanged(n){}getFormValue(){return this.checked?this.value:null}buildClassList(){const n=[this.size,this.flavor];return this.disabled&&n.push("disabled"),this.required&&n.push("required"),n.join(" ")}handleSwitchClick(n){if(this.disabled)return;const t=!this.checked;this.checked=t,setTimeout(()=>{const e={value:t,checked:t,formValue:t?this.value:null,originalEvent:n};this.dispatchEvent(new CustomEvent("input",{detail:e,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:e,bubbles:!0,composed:!0}))},0)}handleSwitchKeydown(n){this.disabled||["Space"," ","Enter"].includes(n.key)&&(n.preventDefault(),n.stopPropagation(),this.handleSwitchClick(n))}removeEventListeners(){if(!this.W)return;const n=this.shadowRoot;if(!n)return;const t=n.querySelector(".switch-container");t&&(this.J&&(t.removeEventListener("click",this.J),this.J=null),this.nn&&(t.removeEventListener("keydown",this.nn),this.nn=null),this.U&&(t.removeEventListener("focus",this.U),this.U=null),this.G&&(t.removeEventListener("blur",this.G),this.G=null),this.W=!1)}setupEventListeners(){if(this.W)return;const n=this.shadowRoot.querySelector(".switch-container");n&&(this.J=n=>this.handleSwitchClick(n),this.nn=n=>this.handleSwitchKeydown(n),this.U=()=>n.classList.add("focused"),this.G=()=>n.classList.remove("focused"),n.addEventListener("click",this.J),n.addEventListener("keydown",this.nn),n.addEventListener("focus",this.U),n.addEventListener("blur",this.G),this.W=!0)}render(){const n=this.shadowRoot;let t=n.querySelector(".switch-container");const e=this.buildClassList();if(t)t.className="switch-container "+e,t.tabIndex=this.disabled?-1:0,t.setAttribute("aria-checked",this.checked?"true":"false"),t.setAttribute("aria-disabled",this.disabled?"true":"false"),t.setAttribute("aria-required",this.required?"true":"false");else{t=document.createElement("div"),t.className="switch-container "+e,t.tabIndex=this.disabled?-1:0,t.setAttribute("role","switch"),t.setAttribute("aria-checked",this.checked?"true":"false"),t.setAttribute("aria-disabled",this.disabled?"true":"false"),t.setAttribute("aria-required",this.required?"true":"false");const o=document.createElement("div");o.className="switch-track";const i=document.createElement("div");i.className="switch-thumb",o.appendChild(i),t.appendChild(o),n.appendChild(t),this.setupEventListeners()}}get checked(){return this.getProperty("checked")}set checked(n){this.setProperty("checked",n)}get value(){return this.getProperty("value")}set value(n){this.setProperty("value",n)}get name(){return this.getProperty("name")}set name(n){this.setProperty("name",n)}get disabled(){return this.getProperty("disabled")}set disabled(n){this.setProperty("disabled",n)}get required(){return this.getProperty("required")}set required(n){this.setProperty("required",n)}get size(){return this.getProperty("size")}set size(n){this.setProperty("size",n)}get flavor(){return this.getProperty("flavor")}set flavor(n){this.setProperty("flavor",n)}get form(){return this.m.form}};nn.formAssociated=!0,nn.properties={checked:{type:"boolean",visual:!0,formValue:!0,emitChange:!0,default:!1},value:{type:"string",default:"on"},name:{type:"string",default:""},disabled:{type:"boolean",visual:!0,default:!1},required:{type:"boolean",visual:!0,default:!1},size:{type:"string",visual:!0,default:"md",validate:n=>["xs","sm","md","lg","xl"].includes(n),coerce:n=>["xs","sm","md","lg","xl"].includes(n)?n:"md"},flavor:{type:"string",visual:!0,default:"primary",validate:n=>["primary","secondary","success","danger","warning","neutral"].includes(n),coerce:n=>["primary","secondary","success","danger","warning","neutral"].includes(n)?n:"primary"}};let tn=nn;customElements.get("ty-switch")||customElements.define("ty-switch",tn);const en=`\n${F}\n\n/* Override input's :host. ty-radio is just the circle (inline);\n ty-radio-group is a form-field block. */\n:host(ty-radio) {\n display: inline-flex;\n width: auto;\n vertical-align: middle;\n}\n\n:host(ty-radio-group) {\n display: block;\n width: 100%;\n}\n\n/* ===== RADIO GROUP ===== */\n.radio-group-container {\n display: flex;\n flex-direction: column;\n gap: 0.4rem;\n font-family: var(--ty-font-sans);\n color: var(--ty-color-text);\n}\n\n.radio-group-label {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n font-weight: var(--ty-font-medium);\n color: var(--ty-color-text);\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.radio-group-list {\n display: flex;\n gap: 0.6rem;\n align-items: flex-start;\n}\n\n.radio-group-list.vertical {\n flex-direction: column;\n align-items: flex-start;\n}\n\n.radio-group-list.horizontal {\n flex-direction: row;\n flex-wrap: wrap;\n align-items: center;\n}\n\n.radio-group-error {\n font-size: var(--ty-font-xs);\n line-height: var(--ty-leading-xs);\n color: var(--ty-color-danger);\n}\n\n.radio-group-container .required-icon {\n width: 0.65em;\n height: 0.65em;\n color: var(--ty-color-danger);\n}\n.radio-group-container .required-icon svg {\n width: 100%;\n height: 100%;\n}\n\n/* ===== RADIO ITEM (just the circle) ===== */\n.radio-container {\n display: inline-block;\n cursor: pointer;\n user-select: none;\n outline: none;\n vertical-align: middle;\n}\n\n.radio-container.disabled {\n cursor: not-allowed;\n opacity: 0.55;\n}\n\n.radio-container:focus-visible .radio-circle,\n.radio-container.focused .radio-circle {\n box-shadow: 0 0 0 3px var(--ty-input-shadow-focus);\n}\n\n.radio-circle {\n position: relative;\n flex-shrink: 0;\n width: 18px;\n height: 18px;\n border-radius: 50%;\n border: 2px solid var(--ty-input-border);\n background: var(--ty-input-bg);\n box-sizing: border-box;\n transition: border-color 0.15s ease-in-out;\n}\n\n.radio-circle::after {\n content: "";\n position: absolute;\n top: 50%;\n left: 50%;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--ty-color-primary);\n transform: translate(-50%, -50%) scale(0);\n transition: transform 0.15s ease-in-out;\n}\n\n.radio-container[aria-checked="true"] .radio-circle {\n border-color: var(--ty-color-primary);\n}\n\n.radio-container[aria-checked="true"] .radio-circle::after {\n transform: translate(-50%, -50%) scale(1);\n}\n\n/* Size variants */\n.radio-container.xs .radio-circle { width: 14px; height: 14px; }\n.radio-container.xs .radio-circle::after { width: 6px; height: 6px; }\n\n.radio-container.sm .radio-circle { width: 16px; height: 16px; }\n.radio-container.sm .radio-circle::after { width: 7px; height: 7px; }\n\n.radio-container.lg .radio-circle { width: 22px; height: 22px; }\n.radio-container.lg .radio-circle::after { width: 10px; height: 10px; }\n\n.radio-container.xl .radio-circle { width: 26px; height: 26px; }\n.radio-container.xl .radio-circle::after { width: 12px; height: 12px; }\n\n/* Flavor variants — color of inner dot + checked border */\n.radio-container.primary[aria-checked="true"] .radio-circle { border-color: var(--ty-color-primary); }\n.radio-container.primary .radio-circle::after { background: var(--ty-color-primary); }\n\n.radio-container.secondary[aria-checked="true"] .radio-circle { border-color: var(--ty-color-secondary); }\n.radio-container.secondary .radio-circle::after { background: var(--ty-color-secondary); }\n\n.radio-container.success[aria-checked="true"] .radio-circle { border-color: var(--ty-color-success); }\n.radio-container.success .radio-circle::after { background: var(--ty-color-success); }\n\n.radio-container.danger[aria-checked="true"] .radio-circle { border-color: var(--ty-color-danger); }\n.radio-container.danger .radio-circle::after { background: var(--ty-color-danger); }\n\n.radio-container.warning[aria-checked="true"] .radio-circle { border-color: var(--ty-color-warning); }\n.radio-container.warning .radio-circle::after { background: var(--ty-color-warning); }\n\n.radio-container.neutral[aria-checked="true"] .radio-circle { border-color: var(--ty-color-neutral); }\n.radio-container.neutral .radio-circle::after { background: var(--ty-color-neutral); }\n`,on='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 6v12"/><path d="M17.196 9 6.804 15"/><path d="m6.804 9 10.392 6"/></svg>',rn=class extends o{constructor(){super(),this.W=!1,this.J=null,this.U=null,this.G=null,r(this.shadowRoot,{css:en,id:"ty-radio"})}onConnect(){}onDisconnect(){this.removeEventListeners()}onPropertiesChanged(n){}buildClassList(){const n=[this.size,this.flavor];return this.disabled&&n.push("disabled"),n.join(" ")}handleClick(n){this.disabled||(n.stopPropagation(),this.dispatchEvent(new CustomEvent("ty-radio-select",{detail:{value:this.value},bubbles:!0,composed:!0})))}removeEventListeners(){if(!this.W)return;const n=this.shadowRoot?.querySelector(".radio-container");n&&(this.J&&(n.removeEventListener("click",this.J),this.J=null),this.U&&(n.removeEventListener("focus",this.U),this.U=null),this.G&&(n.removeEventListener("blur",this.G),this.G=null),this.W=!1)}setupEventListeners(){if(this.W)return;const n=this.shadowRoot.querySelector(".radio-container");n&&(this.J=n=>this.handleClick(n),this.U=()=>n.classList.add("focused"),this.G=()=>n.classList.remove("focused"),n.addEventListener("click",this.J),n.addEventListener("focus",this.U),n.addEventListener("blur",this.G),this.W=!0)}render(){const n=this.shadowRoot;let t=n.querySelector(".radio-container");const e=this.buildClassList();if(t)t.className="radio-container "+e,t.tabIndex=this.disabled?-1:0,t.setAttribute("aria-checked",this.checked+""),t.setAttribute("aria-disabled",this.disabled+"");else{t=document.createElement("div"),t.className="radio-container "+e,t.tabIndex=this.disabled?-1:0,t.setAttribute("role","radio"),t.setAttribute("aria-checked",this.checked+""),t.setAttribute("aria-disabled",this.disabled+"");const o=document.createElement("div");o.className="radio-circle",t.appendChild(o),n.appendChild(t),this.setupEventListeners()}}get value(){return this.getProperty("value")}set value(n){this.setProperty("value",n)}get checked(){return this.getProperty("checked")}set checked(n){this.setProperty("checked",n)}get disabled(){return this.getProperty("disabled")}set disabled(n){this.setProperty("disabled",n)}get size(){return this.getProperty("size")}set size(n){this.setProperty("size",n)}get flavor(){return this.getProperty("flavor")}set flavor(n){this.setProperty("flavor",n)}};rn.properties={value:{type:"string",default:""},checked:{type:"boolean",visual:!0,default:!1},disabled:{type:"boolean",visual:!0,default:!1},size:{type:"string",visual:!0,default:"md"},flavor:{type:"string",visual:!0,default:"primary"}};let sn=rn;customElements.get("ty-radio")||customElements.define("ty-radio",sn);const an=class extends o{constructor(){super(),this.W=!1,this.tn=null,this.nn=null,r(this.shadowRoot,{css:en,id:"ty-radio-group"})}onConnect(){queueMicrotask(()=>this.syncChildren())}onDisconnect(){this.removeEventListeners()}onPropertiesChanged(n){n.some(n=>"value"===n.name||"size"===n.name||"flavor"===n.name||"disabled"===n.name)&&this.syncChildren()}getFormValue(){return this.value||null}getRadios(){return Array.from(this.querySelectorAll("ty-radio"))}syncChildren(){const n=this.getRadios();for(const t of n)t.checked=t.value===this.value,this.disabled&&(t.disabled=!0),t.size=this.size,t.flavor=this.flavor}handleRadioSelect(n){if(this.disabled)return;const t=n.detail,e=t?.value;"string"==typeof e&&e!==this.value&&(this.value=e,this.syncChildren(),setTimeout(()=>{const t={value:e,formValue:e,originalEvent:n};this.dispatchEvent(new CustomEvent("input",{detail:t,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:t,bubbles:!0,composed:!0}))},0))}handleKeydown(n){if(this.disabled)return;const t=this.getRadios().filter(n=>!n.disabled);if(0===t.length)return;const e=document.activeElement,o=t.find(n=>n===e||n.contains(e));let i=-1;if(["ArrowDown","ArrowRight"].includes(n.key))n.preventDefault(),i=o?(t.indexOf(o)+1)%t.length:0;else{if(!["ArrowUp","ArrowLeft"].includes(n.key)){if(["Space"," ","Enter"].includes(n.key)){if(o){n.preventDefault(),this.value=o.value,this.syncChildren();const t={value:o.value,formValue:o.value,originalEvent:n};setTimeout(()=>{this.dispatchEvent(new CustomEvent("change",{detail:t,bubbles:!0,composed:!0}))},0)}return}return}n.preventDefault(),i=o?(t.indexOf(o)-1+t.length)%t.length:t.length-1}const r=t[i];if(r){r.focus(),this.value=r.value,this.syncChildren();const t={value:r.value,formValue:r.value,originalEvent:n};setTimeout(()=>{this.dispatchEvent(new CustomEvent("change",{detail:t,bubbles:!0,composed:!0}))},0)}}removeEventListeners(){this.W&&(this.tn&&(this.removeEventListener("ty-radio-select",this.tn),this.tn=null),this.nn&&(this.removeEventListener("keydown",this.nn),this.nn=null),this.W=!1)}setupEventListeners(){this.W||(this.tn=n=>this.handleRadioSelect(n),this.nn=n=>this.handleKeydown(n),this.addEventListener("ty-radio-select",this.tn),this.addEventListener("keydown",this.nn),this.W=!0)}render(){const n=this.shadowRoot;let t=n.querySelector(".radio-group-container");if(t){let n=t.querySelector(".radio-group-label");if(this.label)if(n||(n=document.createElement("div"),n.className="radio-group-label",t.insertBefore(n,t.firstChild)),n.textContent=this.label,this.required&&!n.querySelector(".required-icon")){const t=document.createElement("span");t.className="required-icon",t.innerHTML=on,n.appendChild(t)}else this.required||n.querySelector(".required-icon")?.remove();else n&&n.remove();const e=t.querySelector(".radio-group-list");e&&(e.className="radio-group-list "+this.orientation);let o=t.querySelector(".radio-group-error");this.error?(o||(o=document.createElement("div"),o.className="radio-group-error",t.appendChild(o)),o.textContent=this.error):o&&o.remove(),t.setAttribute("aria-disabled",this.disabled+"")}else{if(t=document.createElement("div"),t.className="radio-group-container",t.setAttribute("role","radiogroup"),t.setAttribute("aria-disabled",this.disabled+""),this.label){const n=document.createElement("div");if(n.className="radio-group-label",n.textContent=this.label,this.required){const t=document.createElement("span");t.className="required-icon",t.innerHTML=on,n.appendChild(t)}t.appendChild(n)}const e=document.createElement("div");e.className="radio-group-list "+this.orientation;const o=document.createElement("slot");if(e.appendChild(o),t.appendChild(e),this.error){const n=document.createElement("div");n.className="radio-group-error",n.textContent=this.error,t.appendChild(n)}n.appendChild(t),this.setupEventListeners()}this.syncChildren()}get value(){return this.getProperty("value")}set value(n){this.setProperty("value",n)}get name(){return this.getProperty("name")}set name(n){this.setProperty("name",n)}get label(){return this.getProperty("label")}set label(n){this.setProperty("label",n)}get disabled(){return this.getProperty("disabled")}set disabled(n){this.setProperty("disabled",n)}get required(){return this.getProperty("required")}set required(n){this.setProperty("required",n)}get error(){return this.getProperty("error")}set error(n){this.setProperty("error",n)}get orientation(){return this.getProperty("orientation")}set orientation(n){this.setProperty("orientation",n)}get size(){return this.getProperty("size")}set size(n){this.setProperty("size",n)}get flavor(){return this.getProperty("flavor")}set flavor(n){this.setProperty("flavor",n)}get form(){return this.m.form}};an.formAssociated=!0,an.properties={value:{type:"string",visual:!0,formValue:!0,emitChange:!0,default:""},name:{type:"string",default:""},label:{type:"string",visual:!0,default:""},disabled:{type:"boolean",visual:!0,default:!1},required:{type:"boolean",visual:!0,default:!1},error:{type:"string",visual:!0,default:""},orientation:{type:"string",visual:!0,default:"vertical"},size:{type:"string",visual:!0,default:"md"},flavor:{type:"string",visual:!0,default:"primary"}};let ln=an;customElements.get("ty-radio-group")||customElements.define("ty-radio-group",ln);const dn='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>',cn='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>',hn=class extends o{constructor(){super(),this.en=null,this.rn=!1,r(this.shadowRoot,{css:F,id:"ty-input"}),r(this.shadowRoot,{css:"\n/* Copy field value display */\n.copy-field-value {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n user-select: none;\n padding: 0;\n margin: 0;\n background: transparent;\n border: none;\n color: inherit;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n}\n\n/* Multiline variant */\n.copy-field-value.multiline {\n white-space: pre-wrap;\n word-break: break-word;\n max-height: 200px;\n overflow-y: auto;\n}\n\n/* Code format */\n.copy-field-value {\n font-size: 0.8em;\n}\n\n/* Hover state - primary soft background */\n.input-wrapper:not(.disabled):hover {\n background: var(--ty-bg-primary-soft);\n transition: background 0.2s ease;\n}\n\n/* Copy button */\n.copy-button {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n cursor: pointer;\n border: none;\n background: transparent;\n color: var(--ty-text-soft);\n transition: color 0.2s ease, transform 0.2s ease;\n padding: 0;\n margin: 0;\n}\n\n.copy-button:hover:not(.disabled) {\n color: var(--ty-text);\n transform: scale(1.1);\n}\n\n.copy-button.success {\n color: var(--ty-color-success);\n animation: copy-feedback 0.3s ease;\n}\n\n.copy-button.error {\n color: var(--ty-color-danger);\n animation: copy-feedback 0.3s ease;\n}\n\n@keyframes copy-feedback {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.2); }\n}\n\n.copy-button svg {\n width: 18px;\n height: 18px;\n}\n\n.input-wrapper.disabled .copy-button {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.input-wrapper.disabled {\n cursor: not-allowed;\n}\n",id:"ty-copy"})}onConnect(){}onDisconnect(){null!==this.en&&(clearTimeout(this.en),this.en=null)}onPropertiesChanged(n){}buildClassList(){const n=[this.size,this.flavor];return this.disabled&&n.push("disabled"),this.required&&n.push("required"),n.join(" ")}async copyToClipboard(){if(!this.disabled&&this.value){try{await navigator.clipboard.writeText(this.value),this.dispatchEvent(new CustomEvent("copy-success",{detail:{value:this.value},bubbles:!0,composed:!0}))}catch(n){try{const n=document.createElement("textarea");n.value=this.value,n.style.position="fixed",n.style.opacity="0",document.body.appendChild(n),n.select(),document.execCommand("copy"),document.body.removeChild(n),this.dispatchEvent(new CustomEvent("copy-success",{detail:{value:this.value},bubbles:!0,composed:!0}))}catch(t){return this.dispatchEvent(new CustomEvent("copy-error",{detail:{error:t},bubbles:!0,composed:!0})),void this.showCopyError()}}this.showCopySuccess()}}showCopySuccess(){null!==this.en&&clearTimeout(this.en),this.rn=!0;const n=this.shadowRoot.querySelector(".copy-button");n&&(n.classList.add("success"),n.innerHTML=cn),this.en=window.setTimeout(()=>{this.rn=!1;const n=this.shadowRoot.querySelector(".copy-button");n&&(n.classList.remove("success"),n.innerHTML=dn),this.en=null},2e3)}showCopyError(){null!==this.en&&clearTimeout(this.en),this.rn=!1;const n=this.shadowRoot.querySelector(".copy-button");n&&(n.classList.add("error"),n.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>'),this.en=window.setTimeout(()=>{const n=this.shadowRoot.querySelector(".copy-button");n&&(n.classList.remove("error"),n.innerHTML=dn),this.en=null},2e3)}setupEventListeners(){const n=this.shadowRoot,t=n.querySelector(".input-wrapper"),e=n.querySelector(".copy-button");if(t&&!this.disabled){const n=t;n.addEventListener("click",n=>{n.target===e||n.target.closest(".copy-button")||this.copyToClipboard()}),n.style.cursor="pointer"}e&&e.addEventListener("click",()=>{this.copyToClipboard()})}render(){const n=this.shadowRoot,t=this.buildClassList(),e=this.multiline?" multiline":"";n.innerHTML=`\n <div class="input-container">\n ${this.label?`\n <label class="input-label">\n ${this.label}\n ${this.required?'<span class="required-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-asterisk-icon lucide-asterisk"><path d="M12 6v12"/><path d="M17.196 9 6.804 15"/><path d="m6.804 9 10.392 6"/></svg></span>':""}\n </label>\n `:""}\n <div class="input-wrapper ${t}">\n ${"code"===this.format?`<code class="copy-field-value${e}">${this.value||""}</code>`:`<div class="copy-field-value${e}">${this.value||""}</div>`}\n <button class="copy-button${this.rn?" success":""}" type="button" ${this.disabled?"disabled":""}>\n ${this.rn?cn:dn}\n </button>\n </div>\n </div>\n `,this.setupEventListeners()}get value(){return this.getProperty("value")}set value(n){this.setProperty("value",n)}get label(){return this.getProperty("label")}set label(n){this.setProperty("label",n)}get size(){return this.getProperty("size")}set size(n){this.setProperty("size",n)}get flavor(){return this.getProperty("flavor")}set flavor(n){this.setProperty("flavor",n)}get format(){return this.getProperty("format")}set format(n){this.setProperty("format",n)}get multiline(){return this.getProperty("multiline")}set multiline(n){this.setProperty("multiline",n)}get disabled(){return this.getProperty("disabled")}set disabled(n){this.setProperty("disabled",n)}get required(){return this.getProperty("required")}set required(n){this.setProperty("required",n)}};hn.formAssociated=!0,hn.properties={value:{type:"string",visual:!0,formValue:!0,default:""},label:{type:"string",visual:!0,default:""},size:{type:"string",visual:!0,default:"md",validate:n=>["xs","sm","md","lg","xl"].includes(n),coerce:n=>["xs","sm","md","lg","xl"].includes(n)?n:"md"},flavor:{type:"string",visual:!0,default:"neutral",validate:n=>["primary","secondary","success","danger","warning","neutral"].includes(n),coerce:n=>["primary","secondary","success","danger","warning","neutral"].includes(n)?n:"neutral"},format:{type:"string",visual:!0,default:"text",coerce:n=>"code"===n?"code":"text"},multiline:{type:"boolean",visual:!0,default:!1},disabled:{type:"boolean",visual:!0,default:!1},required:{type:"boolean",visual:!0,default:!1}};let pn=hn;function un(n){return 1024>n?n+" B":1048576>n?(n/1024).toFixed(1)+" KB":1073741824>n?(n/1024/1024).toFixed(1)+" MB":(n/1024/1024/1024).toFixed(1)+" GB"}customElements.get("ty-copy")||customElements.define("ty-copy",pn);const gn=class extends o{constructor(){super(),this.sn=[],this.an=!1,this.W=!1,this.ln=null,this.dn=null,this.cn=null,this.hn=null,this.pn=null,this.un=null,this.gn=null,this.bn=null,r(this.shadowRoot,{css:"\n:host {\n display: block;\n font-family: var(--ty-font-sans);\n width: 100%;\n}\n\n.file-upload-container {\n display: flex;\n flex-direction: column;\n width: 100%;\n box-sizing: border-box;\n}\n\n/* ===== LABEL ===== */\n\n.upload-label {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n font-weight: var(--ty-font-medium);\n color: var(--ty-label-color);\n margin-bottom: 6px;\n padding-left: 4px;\n display: flex;\n align-items: center;\n}\n\n.required-icon {\n color: var(--ty-color-danger);\n margin-left: 4px;\n font-size: 0.75rem;\n line-height: 1;\n}\n\n/* ===== DROP ZONE ===== */\n\n.drop-zone {\n border: 2px dashed var(--ty-border);\n border-radius: var(--ty-radius-base);\n padding: 2rem 1.5rem;\n text-align: center;\n cursor: pointer;\n transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;\n outline: none;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n min-height: 140px;\n user-select: none;\n}\n\n.drop-zone:hover:not(.disabled) {\n border-color: var(--ty-input-border-hover);\n background: var(--ty-surface-content);\n}\n\n.drop-zone.focused {\n border-color: var(--ty-input-border-focus);\n box-shadow: 0 0 0 3px var(--ty-input-shadow-focus);\n}\n\n.drop-zone.drag-active {\n border-color: var(--ty-color-primary);\n border-style: solid;\n background: var(--ty-bg-primary-);\n}\n\n.drop-zone.drag-active .upload-icon {\n color: var(--ty-color-primary);\n transform: translateY(-2px);\n}\n\n.drop-zone.has-files {\n min-height: 80px;\n padding: 1.25rem 1.5rem;\n}\n\n.drop-zone.disabled {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n.drop-zone.error {\n border-color: var(--ty-color-danger);\n}\n\n.drop-zone.error:not(.disabled) {\n background: var(--ty-bg-danger-);\n}\n\n/* ===== UPLOAD ICON ===== */\n\n.upload-icon {\n color: var(--ty-text-faint);\n width: 2.5rem;\n height: 2.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: color 0.15s ease, transform 0.15s ease;\n pointer-events: none;\n}\n\n.upload-icon svg {\n width: 100%;\n height: 100%;\n}\n\n/* ===== HINT TEXT ===== */\n\n.upload-hint {\n color: var(--ty-text-soft);\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n pointer-events: none;\n}\n\n.browse-link {\n color: var(--ty-color-primary);\n font-weight: var(--ty-font-medium);\n}\n\n.upload-sub-hint {\n color: var(--ty-text-faint);\n font-size: var(--ty-font-xs);\n line-height: var(--ty-leading-xs);\n pointer-events: none;\n}\n\n/* ===== FILE LIST ===== */\n\n.file-list {\n display: flex;\n flex-direction: column;\n gap: 0.375rem;\n margin-top: 0.5rem;\n}\n\n.file-item {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.5rem 0.75rem;\n border-radius: var(--ty-radius-base);\n background: var(--ty-surface-content);\n border: 1px solid var(--ty-border-soft);\n}\n\n.file-icon {\n color: var(--ty-text-faint);\n flex-shrink: 0;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n}\n\n.file-icon svg {\n width: 100%;\n height: 100%;\n}\n\n.file-name {\n flex: 1;\n font-size: var(--ty-font-sm);\n color: var(--ty-text);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n}\n\n.file-size {\n font-size: var(--ty-font-xs);\n color: var(--ty-text-faint);\n flex-shrink: 0;\n font-variant-numeric: tabular-nums;\n}\n\n.file-remove {\n flex-shrink: 0;\n cursor: pointer;\n color: var(--ty-text-faint);\n width: 1.25rem;\n height: 1.25rem;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n transition: color 0.15s ease, background-color 0.15s ease;\n border: none;\n background: none;\n padding: 0;\n outline: none;\n}\n\n.file-remove:hover {\n color: var(--ty-color-danger);\n background: var(--ty-bg-danger-);\n}\n\n.file-remove:focus-visible {\n box-shadow: 0 0 0 2px var(--ty-color-danger);\n}\n\n.file-remove svg {\n width: 12px;\n height: 12px;\n}\n\n/* ===== ERROR MESSAGE ===== */\n\n.error-message {\n font-size: var(--ty-font-xs);\n line-height: var(--ty-leading-xs);\n color: var(--ty-color-danger);\n margin-top: 4px;\n padding-left: 4px;\n}\n\n/* ===== ACCESSIBILITY ===== */\n\n@media (prefers-reduced-motion: reduce) {\n .drop-zone,\n .upload-icon,\n .file-remove {\n transition: none;\n }\n}\n\n@media (prefers-contrast: high) {\n .drop-zone {\n border-width: 3px;\n }\n}\n",id:"ty-file-upload"})}onConnect(){}onDisconnect(){this.removeEventListeners()}onPropertiesChanged(n){}onFormReset(){this.sn=[],this.updateFormValue(),this.u&&this.render();const n=this.shadowRoot?.querySelector(".file-input");n&&(n.value="")}getFormValue(){if(0===this.sn.length)return null;const n=new FormData,t=this.name||"files";for(const e of this.sn)n.append(t,e);return n}get files(){return[...this.sn]}get multiple(){return this.getProperty("multiple")}set multiple(n){this.setProperty("multiple",n)}get accept(){return this.getProperty("accept")}set accept(n){this.setProperty("accept",n)}get name(){return this.getProperty("name")}set name(n){this.setProperty("name",n)}get disabled(){return this.getProperty("disabled")}set disabled(n){this.setProperty("disabled",n)}get required(){return this.getProperty("required")}set required(n){this.setProperty("required",n)}get label(){return this.getProperty("label")}set label(n){this.setProperty("label",n)}get placeholder(){return this.getProperty("placeholder")}set placeholder(n){this.setProperty("placeholder",n)}get error(){return this.getProperty("error")}set error(n){this.setProperty("error",n)}get form(){return this.m.form}setFiles(n){this.sn=this.multiple?n:n.slice(0,1),this.updateFormValue(),this.render();const t={value:this.sn,files:this.sn,names:this.sn.map(n=>n.name)};setTimeout(()=>{this.dispatchEvent(new CustomEvent("change",{detail:t,bubbles:!0,composed:!0}))},0)}removeFile(n){const t=[...this.sn];t.splice(n,1),this.setFiles(t);const e=this.shadowRoot?.querySelector(".file-input");e&&(e.value="")}setupEventListeners(){if(this.W)return;const n=this.shadowRoot,t=n.querySelector(".drop-zone"),e=n.querySelector(".file-input");this.ln=n=>{this.disabled||n.target.closest(".file-remove")||e.click()},this.dn=n=>{this.disabled||"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),e.click())},this.cn=()=>{t.classList.add("focused")},this.hn=()=>{t.classList.remove("focused")},this.pn=n=>{this.disabled||(n.preventDefault(),n.stopPropagation(),this.an||(this.an=!0,t.classList.add("drag-active")))},this.un=n=>{t.contains(n.relatedTarget)||(this.an=!1,t.classList.remove("drag-active"))},this.gn=n=>{if(this.disabled)return;n.preventDefault(),n.stopPropagation(),this.an=!1,t.classList.remove("drag-active");const e=Array.from(n.dataTransfer?.files??[]);e.length>0&&this.setFiles(e)},this.bn=n=>{const t=n.target;t.files&&t.files.length>0&&this.setFiles(Array.from(t.files))},t.addEventListener("click",this.ln),t.addEventListener("keydown",this.dn),t.addEventListener("focus",this.cn),t.addEventListener("blur",this.hn),t.addEventListener("dragover",this.pn),t.addEventListener("dragleave",this.un),t.addEventListener("drop",this.gn),e.addEventListener("change",this.bn),this.W=!0}removeEventListeners(){if(!this.W)return;const n=this.shadowRoot;if(!n)return;const t=n.querySelector(".drop-zone"),e=n.querySelector(".file-input");t&&e&&(this.ln&&t.removeEventListener("click",this.ln),this.dn&&t.removeEventListener("keydown",this.dn),this.cn&&t.removeEventListener("focus",this.cn),this.hn&&t.removeEventListener("blur",this.hn),this.pn&&t.removeEventListener("dragover",this.pn),this.un&&t.removeEventListener("dragleave",this.un),this.gn&&t.removeEventListener("drop",this.gn),this.bn&&e.removeEventListener("change",this.bn),this.W=!1)}buildDropZoneClasses(){const n=["drop-zone"];return this.an&&n.push("drag-active"),this.sn.length>0&&n.push("has-files"),this.disabled&&n.push("disabled"),this.error&&n.push("error"),n.join(" ")}renderFileList(n){n.innerHTML="";for(let t=0;this.sn.length>t;t++){const e=this.sn[t],o=document.createElement("div");o.className="file-item";const i=document.createElement("span");i.className="file-icon",i.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>';const r=document.createElement("span");r.className="file-name",r.textContent=e.name,r.title=e.name;const s=document.createElement("span");s.className="file-size",s.textContent=un(e.size);const a=document.createElement("button");a.className="file-remove",a.type="button",a.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>',a.setAttribute("aria-label","Remove "+e.name);const l=t;a.addEventListener("click",n=>{n.stopPropagation(),this.removeFile(l)}),o.appendChild(i),o.appendChild(r),o.appendChild(s),o.appendChild(a),n.appendChild(o)}}render(){const n=this.shadowRoot;let t=n.querySelector(".file-upload-container");if(!t){t=document.createElement("div"),t.className="file-upload-container";const e=document.createElement("div");e.className="upload-label",t.appendChild(e);const o=document.createElement("div");o.className="drop-zone",o.setAttribute("role","button");const i=document.createElement("input");i.type="file",i.className="file-input",i.style.display="none",o.appendChild(i);const r=document.createElement("div");r.className="upload-icon",r.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>',o.appendChild(r);const s=document.createElement("div");s.className="upload-hint",o.appendChild(s);const a=document.createElement("div");a.className="upload-sub-hint",o.appendChild(a),t.appendChild(o);const l=document.createElement("div");l.className="file-list",t.appendChild(l);const d=document.createElement("div");d.className="error-message",t.appendChild(d),n.appendChild(t),this.setupEventListeners()}const e=t.querySelector(".upload-label");if(this.label){if(e.style.display="",e.innerHTML="",e.appendChild(document.createTextNode(this.label)),this.required){const n=document.createElement("span");n.className="required-icon",n.textContent="*",n.setAttribute("aria-hidden","true"),e.appendChild(n)}}else e.style.display="none";const o=t.querySelector(".drop-zone");o.className=this.buildDropZoneClasses(),o.tabIndex=this.disabled?-1:0,o.setAttribute("aria-disabled",this.disabled+""),o.setAttribute("aria-label",this.placeholder||"Upload files");const i=t.querySelector(".file-input");i.multiple=this.multiple,i.accept=this.accept,i.disabled=this.disabled,t.querySelector(".upload-icon").style.display=this.sn.length>0?"none":"",t.querySelector(".upload-hint").innerHTML=this.sn.length>0?`<strong>${this.sn.length} file${1!==this.sn.length?"s":""} selected</strong>`:'Drop files here or <span class="browse-link">click to browse</span>';const r=t.querySelector(".upload-sub-hint");this.accept&&0===this.sn.length?(r.textContent="Accepted: "+this.accept,r.style.display=""):r.style.display="none";const s=t.querySelector(".file-list");this.renderFileList(s);const a=t.querySelector(".error-message");a.textContent=this.error,a.style.display=this.error?"":"none"}};gn.formAssociated=!0,gn.properties={multiple:{type:"boolean",visual:!0,default:!1},accept:{type:"string",visual:!0,default:""},name:{type:"string",default:""},disabled:{type:"boolean",visual:!0,default:!1},required:{type:"boolean",visual:!0,default:!1},label:{type:"string",visual:!0,default:""},placeholder:{type:"string",visual:!0,default:"Drop files here or click to browse"},error:{type:"string",visual:!0,default:""}};let bn=gn;function vn(){return"native"!==document.documentElement.getAttribute("data-ty-scrollbar")}customElements.get("ty-file-upload")||customElements.define("ty-file-upload",bn);class mn{constructor(n,t={}){this.trackY=null,this.thumbY=null,this.trackX=null,this.thumbX=null,this.an=!1,this.vn="y",this.mn=0,this.yn=0,this.fn=null,this.wn=null,this.xn=null,this.kn=n,this.zn=!1!==t.vertical,this.Cn=t.horizontal??!1,this.Sn=t.autoHideDelay??1e3,this.En=this.Tn.bind(this),this.Mn=this.Dn.bind(this),this.$n=this.An.bind(this),this.In=this.On.bind(this),this.Ln=this.Nn.bind(this),this.qn=this.Rn.bind(this),this.Pn=this.Vn.bind(this),this.zn&&(this.trackY=this.Bn("y"),this.thumbY=this.Fn("y"),this.trackY.appendChild(this.thumbY)),this.Cn&&(this.trackX=this.Bn("x"),this.thumbX=this.Fn("x"),this.trackX.appendChild(this.thumbX)),this.kn.addEventListener("scroll",this.En,{passive:!0}),this.thumbY&&this.thumbY.addEventListener("pointerdown",this.Mn),this.trackY&&this.trackY.addEventListener("pointerdown",this.In),this.thumbX&&this.thumbX.addEventListener("pointerdown",this.$n),this.trackX&&this.trackX.addEventListener("pointerdown",this.Ln),this.xn=new ResizeObserver(()=>this.update()),this.xn.observe(this.kn),this.update()}Bn(n){const t=document.createElement("div");return t.className="ty-scrollbar-track-"+n,t}Fn(n){const t=document.createElement("div");return t.className="ty-scrollbar-thumb-"+n,t}update(){this.Hn(),this.jn()}scrollToTop(n=!1){this.kn.scrollTo({top:0,behavior:n?"smooth":"auto"})}scrollToBottom(n=!1){this.kn.scrollTo({top:this.kn.scrollHeight,behavior:n?"smooth":"auto"})}scrollToLeft(n=!1){this.kn.scrollTo({left:0,behavior:n?"smooth":"auto"})}scrollToRight(n=!1){this.kn.scrollTo({left:this.kn.scrollWidth,behavior:n?"smooth":"auto"})}destroy(){this.kn.removeEventListener("scroll",this.En),this.thumbY&&this.thumbY.removeEventListener("pointerdown",this.Mn),this.trackY&&this.trackY.removeEventListener("pointerdown",this.In),this.thumbX&&this.thumbX.removeEventListener("pointerdown",this.$n),this.trackX&&this.trackX.removeEventListener("pointerdown",this.Ln),this.xn&&(this.xn.disconnect(),this.xn=null),null!==this.fn&&(cancelAnimationFrame(this.fn),this.fn=null),null!==this.wn&&(clearTimeout(this.wn),this.wn=null)}Tn(){null===this.fn&&(this.fn=requestAnimationFrame(()=>{this.fn=null,this.Wn(),this.Yn()}))}Hn(){if(!this.trackY||!this.thumbY)return;const{scrollHeight:n,clientHeight:t}=this.kn,e=n>t+2;this.trackY.classList.toggle("has-overflow",e),e&&(this.thumbY.style.height=Math.max(t/n*100,0)+"%"),this._n()}jn(){if(!this.trackX||!this.thumbX)return;const{scrollWidth:n,clientWidth:t}=this.kn,e=n>t+2;this.trackX.classList.toggle("has-overflow",e),e&&(this.thumbX.style.width=Math.max(t/n*100,0)+"%"),this.Un()}Wn(){this._n(),this.Un()}_n(){if(!this.trackY||!this.thumbY)return;const{scrollTop:n,scrollHeight:t,clientHeight:e}=this.kn,o=t-e;o>0&&(this.thumbY.style.top=n/o*(this.trackY.clientHeight-this.thumbY.offsetHeight)+"px")}Un(){if(!this.trackX||!this.thumbX)return;const{scrollLeft:n,scrollWidth:t,clientWidth:e}=this.kn,o=t-e;o>0&&(this.thumbX.style.left=n/o*(this.trackX.clientWidth-this.thumbX.offsetWidth)+"px")}Yn(){this.an||(this.trackY?.classList.add("scrolling"),this.trackX?.classList.add("scrolling"),null!==this.wn&&clearTimeout(this.wn),this.wn=setTimeout(()=>{this.trackY?.classList.remove("scrolling"),this.trackX?.classList.remove("scrolling"),this.wn=null},this.Sn))}Dn(n){0===n.button&&(n.preventDefault(),n.stopPropagation(),this.an=!0,this.vn="y",this.mn=n.clientY,this.yn=this.kn.scrollTop,this.thumbY.setPointerCapture(n.pointerId),this.trackY?.classList.add("dragging"),this.thumbY.addEventListener("pointermove",this.qn),this.thumbY.addEventListener("pointerup",this.Pn),this.thumbY.addEventListener("pointercancel",this.Pn))}An(n){0===n.button&&(n.preventDefault(),n.stopPropagation(),this.an=!0,this.vn="x",this.mn=n.clientX,this.yn=this.kn.scrollLeft,this.thumbX.setPointerCapture(n.pointerId),this.trackX?.classList.add("dragging"),this.thumbX.addEventListener("pointermove",this.qn),this.thumbX.addEventListener("pointerup",this.Pn),this.thumbX.addEventListener("pointercancel",this.Pn))}Rn(n){if(this.an)if("y"===this.vn){const t=n.clientY-this.mn,{scrollHeight:e,clientHeight:o}=this.kn,i=this.trackY.clientHeight-this.thumbY.offsetHeight;if(0>=i)return;this.kn.scrollTop=this.yn+t*((e-o)/i)}else{const t=n.clientX-this.mn,{scrollWidth:e,clientWidth:o}=this.kn,i=this.trackX.clientWidth-this.thumbX.offsetWidth;if(0>=i)return;this.kn.scrollLeft=this.yn+t*((e-o)/i)}}Vn(n){const t="y"===this.vn?this.thumbY:this.thumbX,e="y"===this.vn?this.trackY:this.trackX;this.an=!1,t.releasePointerCapture(n.pointerId),e?.classList.remove("dragging"),t.removeEventListener("pointermove",this.qn),t.removeEventListener("pointerup",this.Pn),t.removeEventListener("pointercancel",this.Pn),this.Yn()}On(n){if(n.target===this.thumbY||0!==n.button)return;n.preventDefault();const t=this.trackY.getBoundingClientRect(),e=(n.clientY-t.top)/t.height,{scrollHeight:o,clientHeight:i}=this.kn;this.kn.scrollTo({top:e*(o-i),behavior:"smooth"})}Nn(n){if(n.target===this.thumbX||0!==n.button)return;n.preventDefault();const t=this.trackX.getBoundingClientRect(),e=(n.clientX-t.left)/t.width,{scrollWidth:o,clientWidth:i}=this.kn;this.kn.scrollTo({left:e*(o-i),behavior:"smooth"})}}const yn="\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",fn='<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>',wn=class extends o{constructor(){super(),this.Gn=null,this.Xn=null,this.Kn=null,this.j=!1,this.handleInputEvent=n=>{this.value=n.target.value,this.Gn&&this.Xn&&this.resizeTextarea(this.Gn,this.Xn),this.emitValueEvents(n)},this.handleFocusEvent=()=>{this.j=!0},this.handleBlurEvent=()=>{this.j=!1};const n=this.shadowRoot;r(n,{css:"\n:host {\n display: block;\n font-family: var(--ty-font-sans);\n width: 100%;\n}\n\n.textarea-container {\n display: flex;\n flex-direction: column;\n width: 100%;\n box-sizing: border-box;\n position: relative;\n /* For absolute positioned dummy element */\n}\n\n.textarea-wrapper {\n position: relative;\n width: 100%;\n}\n\n/* Custom scrollbar track positioning within textarea border */\n.textarea-wrapper .ty-scrollbar-track-y {\n top: 2px;\n right: 2px;\n bottom: 2px;\n border-radius: 0 4px 4px 0;\n}\n\n/* ===== LABEL STYLING ===== */\n\n.textarea-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}\n\n/* Required indicator - using SVG icon instead of CSS */\n.required-icon {\n display: inline-flex;\n align-items: center;\n color: var(--ty-color-danger);\n width: 12px;\n height: 12px;\n vertical-align: middle;\n}\n\n/* ===== ERROR MESSAGE STYLING ===== */\n\n.error-message {\n font-size: var(--ty-font-xs);\n line-height: var(--ty-leading-xs);\n letter-spacing: var(--ty-tracking-xs);\n color: var(--ty-color-danger);\n margin-top: 4px;\n padding-left: 12px;\n}\n\n/* Error state for textareas */\ntextarea.error {\n border-color: var(--ty-color-danger);\n background: var(--ty-bg-danger-soft);\n}\n\ntextarea.error:focus {\n border-color: var(--ty-color-danger-mild);\n box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n/* ===== TEXTAREA BASE STYLING ===== */\n\ntextarea {\n /* Base appearance — elegant and minimal like input */\n box-sizing: border-box;\n width: 100%;\n border: 1px solid var(--input-border, var(--ty-input-border));\n border-radius: 6px;\n background: var(--input-bg, var(--ty-input-bg));\n color: var(--input-color, var(--ty-input-color));\n font-family: inherit;\n /* Linear-paired typography */\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 transition: all 0.15s ease-in-out;\n outline: none;\n\n /* Default size (md) - refined spacing */\n min-height: 80px;\n /* Larger than input for multiline */\n padding: 12px 12px;\n /* Slightly larger padding for text areas */\n\n /* Auto-resize specific styles */\n overflow: hidden;\n /* Hide scrollbars since we're auto-resizing */\n resize: none;\n /* Disable manual resize by default */\n\n /* Ensure consistent text wrapping */\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n\n/* Hide native scrollbar for webkit when custom scrollbar is active\n (scrollbar-width: none handles Firefox; this handles Chrome/Safari) */\n:host([data-custom-scroll]) textarea::-webkit-scrollbar {\n display: none;\n}\n\n/* Focus state - elegant blue glow like input */\ntextarea: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 background: var(--input-bg, var(--ty-input-bg));\n}\n\n/* Hover state - subtle feedback */\ntextarea:hover:not(:disabled) {\n border-color: var(--input-border-hover, var(--ty-input-border-hover));\n}\n\n/* Disabled state - refined opacity */\ntextarea:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n background: var(--input-disabled-bg, var(--ty-input-disabled-bg));\n border-color: var(--input-disabled-border, var(--ty-input-disabled-border));\n color: var(--input-disabled-color, var(--ty-input-disabled-color));\n}\n\n/* Placeholder styling - subtle and elegant */\ntextarea::placeholder {\n color: var(--input-placeholder, var(--ty-input-placeholder));\n font-weight: 400;\n}\n\n/* ===== RESIZE CONTROL OPTIONS ===== */\n\n/* Allow manual resizing */\ntextarea.resize-both {\n resize: both;\n}\n\ntextarea.resize-horizontal {\n resize: horizontal;\n}\n\ntextarea.resize-vertical {\n resize: vertical;\n}\n\ntextarea.resize-none {\n resize: none;\n}\n\n/* Auto-resize mode (default) disables manual resize */\ntextarea:not(.resize-both):not(.resize-horizontal):not(.resize-vertical) {\n resize: none;\n}\n\n/* ===== DUMMY ELEMENT FOR AUTO-RESIZE ===== */\n\n.textarea-dummy {\n /* Hidden element that measures text height */\n position: absolute !important;\n top: 0 !important;\n left: 0 !important;\n visibility: hidden !important;\n white-space: pre-wrap !important;\n word-break: break-word !important;\n box-sizing: border-box !important;\n overflow: hidden !important;\n pointer-events: none !important;\n z-index: -1 !important;\n\n /* Ensure it has the same text behavior as textarea */\n word-wrap: break-word !important;\n overflow-wrap: break-word !important;\n}\n\n/* ===== SIZE MODIFIERS ===== */\n\n/* Extra Small */\ntextarea.xs {\n min-height: 64px;\n padding: 8px 10px;\n font-size: var(--ty-font-xs);\n line-height: var(--ty-leading-xs);\n letter-spacing: var(--ty-tracking-xs);\n}\n\n/* Small */\ntextarea.sm {\n min-height: 72px;\n padding: 10px 10px;\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n}\n\n/* Medium (default) */\ntextarea.md {\n min-height: 80px;\n padding: 12px 12px;\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n}\n\n/* Large */\ntextarea.lg {\n min-height: 96px;\n padding: 14px 14px;\n font-size: var(--ty-font-base);\n line-height: var(--ty-leading-base);\n letter-spacing: var(--ty-tracking-base);\n}\n\n/* Extra Large */\ntextarea.xl {\n min-height: 112px;\n padding: 16px 16px;\n font-size: var(--ty-font-lg);\n line-height: var(--ty-leading-lg);\n letter-spacing: var(--ty-tracking-lg);\n}\n\n/* ===== ACCESSIBILITY ENHANCEMENTS ===== */\n\ntextarea:focus-visible {\n outline: none;\n /* We use box-shadow instead */\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: high) {\n textarea {\n border-width: 2px;\n }\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n textarea {\n transition: none;\n }\n\n .textarea-dummy {\n transition: none;\n }\n}\n\n/* ===== CONTAINER-AWARE RESPONSIVE BEHAVIOR ===== */\n\n/* Scale down on smaller containers using container queries */\n@container (max-width: 480px) {\n textarea.lg {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n padding: 12px 12px;\n min-height: 80px;\n }\n\n textarea.xl {\n font-size: var(--ty-font-base);\n line-height: var(--ty-leading-base);\n letter-spacing: var(--ty-tracking-base);\n padding: 14px 14px;\n min-height: 96px;\n }\n}\n\n@container (max-width: 320px) {\n textarea.xl {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n padding: 12px 12px;\n min-height: 80px;\n }\n}\n\n/* Fallback for browsers without container query support */\n@media (max-width: 640px) {\n textarea.lg {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n padding: 12px 12px;\n min-height: 80px;\n }\n\n textarea.xl {\n font-size: var(--ty-font-base);\n line-height: var(--ty-leading-base);\n letter-spacing: var(--ty-tracking-base);\n padding: 14px 14px;\n min-height: 96px;\n }\n}\n\n@media (max-width: 480px) {\n textarea.xl {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n padding: 12px 12px;\n min-height: 80px;\n }\n}\n\n/* ===== ANIMATION AND TRANSITIONS ===== */\n\n/* Smooth height transitions for auto-resize */\ntextarea {\n transition:\n border-color 0.15s ease-in-out,\n box-shadow 0.15s ease-in-out,\n background-color 0.15s ease-in-out,\n height 0.1s ease-out;\n /* Smooth height changes */\n}\n\n/* Disable height transition on focus to avoid jarring effect */\ntextarea:focus {\n transition:\n border-color 0.15s ease-in-out,\n box-shadow 0.15s ease-in-out,\n background-color 0.15s ease-in-out;\n}\n\n/* For users who prefer reduced motion, disable height transitions */\n@media (prefers-reduced-motion: reduce) {\n textarea {\n transition: none;\n }\n}\n",id:"ty-textarea"}),vn()&&r(n,{css:yn,id:"ty-custom-scrollbar"})}onConnect(){}onDisconnect(){if(this.Zn(),this.Gn){const n=this.Gn.cloneNode(!0);this.Gn.parentNode?.replaceChild(n,this.Gn),this.Gn=null}this.Xn=null}onPropertiesChanged(n){}getFormValue(){return this.getProperty("value")||null}get value(){return this.getProperty("value")}set value(n){this.setProperty("value",n)}get name(){return this.getProperty("name")}set name(n){this.setProperty("name",n)}get placeholder(){return this.getProperty("placeholder")}set placeholder(n){this.setProperty("placeholder",n)}get label(){return this.getProperty("label")}set label(n){this.setProperty("label",n)}get disabled(){return this.getProperty("disabled")}set disabled(n){this.setProperty("disabled",n)}get required(){return this.getProperty("required")}set required(n){this.setProperty("required",n)}get error(){return this.getProperty("error")}set error(n){this.setProperty("error",n)}get size(){return this.getProperty("size")}set size(n){this.setProperty("size",n)}get rows(){return this.getProperty("rows")}set rows(n){this.setProperty("rows",n)}get cols(){return this.getProperty("cols")}set cols(n){this.setProperty("cols",n)}get resize(){return this.getProperty("resize")}set resize(n){this.setProperty("resize",n)}get minHeight(){return this.getProperty("minHeight")}set minHeight(n){this.setProperty("minHeight",n)}get maxHeight(){return this.getProperty("maxHeight")}set maxHeight(n){this.setProperty("maxHeight",n)}getFontStyle(n){const t=window.getComputedStyle(n);return{fontFamily:t.fontFamily,fontSize:t.fontSize,fontWeight:t.fontWeight,lineHeight:t.lineHeight,letterSpacing:t.letterSpacing,fontStyle:t.fontStyle}}getSpacingStyle(n){const t=window.getComputedStyle(n);return{padding:t.padding,paddingTop:t.paddingTop,paddingRight:t.paddingRight,paddingBottom:t.paddingBottom,paddingLeft:t.paddingLeft,margin:t.margin,borderWidth:t.borderWidth}}setupDummyElement(n){const t=this.shadowRoot,e=t.querySelector(".textarea-dummy");e&&e.remove();const o=document.createElement("pre"),i=this.getFontStyle(n),r=this.getSpacingStyle(n);o.className="textarea-dummy";const s=o.style;return s.position="absolute",s.top="0",s.left="0",s.visibility="hidden",s.whiteSpace="pre-wrap",s.wordBreak="break-word",s.boxSizing="border-box",s.overflow="hidden",s.pointerEvents="none",Object.entries(i).forEach(([n,t])=>{s[n]=t}),Object.entries(r).forEach(([n,t])=>{s[n]=t}),t.appendChild(o),this.Xn=o,o}resizeTextarea(n,t){if(!n||!t)return;const e=this.value,o=this.placeholder,i=n.clientHeight;t.textContent=""===e&&o?o:e+" ",t.style.width=n.clientWidth+"px";const r=t.scrollHeight,s=this.minHeight?parseInt(this.minHeight.replace("px",""),10):null,a=this.maxHeight?parseInt(this.maxHeight.replace("px",""),10):null;let l=r;null!==s&&(l=Math.max(l,s)),null!==a&&(l=Math.min(l,a)),Math.abs(l-i)>2&&(n.style.height=l+"px",null===a||a>r?(n.style.overflowY="hidden",this.Zn()):(n.style.overflowY="auto",this.Jn(n))),this.Kn?.update()}Jn(n){if(this.Kn||!vn())return;n.style.scrollbarWidth="none",this.setAttribute("data-custom-scroll",""),this.Kn=new mn(n,{vertical:!0,horizontal:!1});const t=this.shadowRoot.querySelector(".textarea-wrapper");t&&this.Kn.trackY&&t.appendChild(this.Kn.trackY)}Zn(){this.Kn&&(this.Kn.trackY?.remove(),this.Kn.destroy(),this.Kn=null,this.removeAttribute("data-custom-scroll"),this.Gn&&(this.Gn.style.scrollbarWidth=""))}emitValueEvents(n){const t=this.value;this.m.setFormValue(t||"");const e={bubbles:!0,composed:!0,detail:{value:t,originalEvent:n}};setTimeout(()=>{this.dispatchEvent(new CustomEvent("input",e)),this.dispatchEvent(new CustomEvent("change",e))},0)}buildClassList(){const n=[this.size];this.disabled&&n.push("disabled"),this.required&&n.push("required"),this.error&&n.push("error"),"none"!==this.resize&&n.push("resize-"+this.resize);const t=this.getAttribute("class");return t&&n.push(t),n.join(" ")}applyHeightConstraints(n){this.minHeight&&(n.style.minHeight=this.minHeight),this.maxHeight&&(n.style.maxHeight=this.maxHeight)}setupTextareaEvents(n){n.addEventListener("input",this.handleInputEvent),n.addEventListener("change",this.handleInputEvent),n.addEventListener("focus",this.handleFocusEvent),n.addEventListener("blur",this.handleBlurEvent)}render(){const n=this.shadowRoot,t=n.querySelector(".textarea-container"),e=n.querySelector("label"),o=n.querySelector("textarea"),i=n.querySelector(".error-message");if(t&&o){if(this.label?e&&(e.innerHTML=this.label+(this.required?` <span class="required-icon">${fn}</span>`:""),e.style.display="block"):e&&(e.style.display="none"),o.value=this.value||"",o.placeholder=this.placeholder||"",o.disabled=this.disabled,o.required=this.required,o.className=this.buildClassList(),this.name?o.setAttribute("name",this.name):o.removeAttribute("name"),this.rows&&o.setAttribute("rows",this.rows),this.cols&&o.setAttribute("cols",this.cols),this.applyHeightConstraints(o),this.error){if(!i){const n=document.createElement("div");n.className="error-message",t.appendChild(n)}const e=n.querySelector(".error-message");e&&(e.textContent=this.error)}else i&&i.remove();const r=this.setupDummyElement(o);setTimeout(()=>this.resizeTextarea(o,r),0),this.Gn=o}else{const t=document.createElement("div");t.className="textarea-container";const e=document.createElement("label");e.className="textarea-label",this.label?(e.innerHTML=this.label+(this.required?` <span class="required-icon">${fn}</span>`:""),e.style.display="block"):e.style.display="none";const o=document.createElement("textarea");o.value=this.value||"",o.placeholder=this.placeholder||"",o.disabled=this.disabled,o.required=this.required,o.className=this.buildClassList(),this.name&&o.setAttribute("name",this.name),o.setAttribute("rows",this.rows||"3"),this.cols&&o.setAttribute("cols",this.cols),this.applyHeightConstraints(o),this.setupTextareaEvents(o);const i=document.createElement("div");if(i.className="textarea-wrapper",i.appendChild(o),t.appendChild(e),t.appendChild(i),this.error){const n=document.createElement("div");n.className="error-message",n.textContent=this.error,t.appendChild(n)}n.appendChild(t);const r=this.setupDummyElement(o);setTimeout(()=>this.resizeTextarea(o,r),0),this.Gn=o}}};wn.formAssociated=!0,wn.properties={value:{type:"string",visual:!0,formValue:!0,emitChange:!0,default:""},name:{type:"string",default:""},placeholder:{type:"string",visual:!0,default:""},label:{type:"string",visual:!0,default:""},disabled:{type:"boolean",visual:!0,default:!1},required:{type:"boolean",visual:!0,default:!1},error:{type:"string",visual:!0,default:""},size:{type:"string",visual:!0,default:"md",validate:n=>["xs","sm","md","lg","xl"].includes(n),coerce:n=>["xs","sm","md","lg","xl"].includes(n)?n:"md"},rows:{type:"string",visual:!0,default:"3",coerce:n=>n+""},cols:{type:"string",visual:!0,default:"",coerce:n=>n?n+"":""},resize:{type:"string",visual:!0,default:"none",validate:n=>["none","both","horizontal","vertical"].includes(n),coerce:n=>["none","both","horizontal","vertical"].includes(n)?n:"none"},minHeight:{type:"string",visual:!0,default:""},maxHeight:{type:"string",visual:!0,default:""}};let xn=wn;customElements.get("ty-textarea")||customElements.define("ty-textarea",xn);const kn={"top-start":{vertical:"top",horizontal:"start"},top:{vertical:"top",horizontal:"center"},"top-end":{vertical:"top",horizontal:"end"},"right-start":{vertical:"center",horizontal:"end",orientation:"vertical"},right:{vertical:"center",horizontal:"end",orientation:"vertical"},"right-end":{vertical:"end",horizontal:"end",orientation:"vertical"},"bottom-start":{vertical:"bottom",horizontal:"start"},bottom:{vertical:"bottom",horizontal:"center"},"bottom-end":{vertical:"bottom",horizontal:"end"},"left-start":{vertical:"center",horizontal:"start",orientation:"vertical"},left:{vertical:"center",horizontal:"start",orientation:"vertical"},"left-end":{vertical:"end",horizontal:"start",orientation:"vertical"}},zn={default:["bottom-start","bottom-end","top-start","top-end","bottom","top","left","right"],tooltip:["top","bottom","left","right","top-start","top-end","bottom-start","bottom-end"]};function Cn(n){const t=n.getBoundingClientRect();return{top:t.top,left:t.left,right:t.right,bottom:t.bottom,width:t.width,height:t.height,centerX:t.left+t.width/2,centerY:t.top+t.height/2}}function Sn(n){const{targetEl:t,floatingEl:e,preferences:o=zn.default,offset:i=8,padding:r=8,containerPadding:s=0}=n,a=Cn(t),l=Cn(e),d=o.map(n=>function(n){const{targetRect:t,floatingRect:e,placement:o,offset:i,padding:r,scrollbarWidth:s,containerPadding:a}=n,l=kn[o],{vertical:d,horizontal:c,orientation:h}=l,p=window.innerWidth,u=window.innerHeight;let g,b;window,window,g="vertical"===h?"start"===c?t.left-e.width-i+a:t.right+i-a:"start"===c?t.left:"center"===c?t.centerX-e.width/2:t.right-e.width,b="vertical"===h?"center"===d?t.centerY-e.height/2:"end"===d?t.bottom-e.height-a:t.top:"top"===d?t.top-e.height-i+a:t.bottom+i-a;const v={top:Math.min(0,b-r),left:Math.min(0,g-r),bottom:Math.min(0,u-(b+e.height+r)),right:Math.min(0,p-(g+e.width+r+s))},m=Object.values(v).reduce((n,t)=>n+Math.abs(t),0);return{x:Math.round(g),y:Math.round(b),placement:o,overflow:v,overflowAmount:m,fits:0===m}}({targetRect:a,floatingRect:l,placement:n,offset:i,padding:r,containerPadding:s,scrollbarWidth:15})),c=d.find(n=>n.fits)||d.reduce((n,t)=>n.overflowAmount>t.overflowAmount?t:n);return 0>c.overflow.right&&(c.x+=c.overflow.right),c}const En={id:"ty-tooltip",css:'\n/* Tooltip host element - display contents to not affect layout */\n:host {\n display: contents;\n}\n\n/* Tooltip container - positioned element */\n#tooltip-container {\n position: fixed;\n top: var(--y, 0px);\n left: var(--x, 0px);\n z-index: var(--ty-z-tooltip, 9999);\n\n /* Hidden by default */\n visibility: hidden;\n opacity: 0;\n transition: opacity 200ms, visibility 200ms;\n\n /* Prevent interaction */\n pointer-events: none;\n user-select: none;\n -webkit-user-select: none;\n \n /* Bold shadow for depth */\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), \n 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n}\n\n/* When open */\n#tooltip-container.open {\n visibility: visible;\n opacity: 1;\n}\n\n/* Base tooltip styling - Dark inverted style (like buttons) */\n#tooltip-container {\n /* Bold, high-contrast styling */\n background: var(--ty-tooltip-bg, #1f2937);\n color: var(--ty-tooltip-color, #ffffff);\n \n /* Comfortable padding */\n padding: var(--ty-tooltip-padding, 8px 12px);\n border-radius: var(--ty-tooltip-radius, 6px);\n \n /* No border - solid color provides contrast */\n border: none;\n \n /* Sizing */\n max-width: var(--ty-tooltip-max-width, 250px);\n \n /* Typography - clear and readable */\n font-size: var(--ty-font-sm, 14px);\n font-weight: var(--ty-font-semibold, 600);\n line-height: 1.5;\n text-align: center;\n}\n\n/* Content slot */\n#tooltip-container ::slotted(*) {\n /* Ensure slotted content inherits styles */\n color: inherit;\n font-size: inherit;\n line-height: inherit;\n}\n\n/* ============================================ */\n/* Flavor Variants - Bold, Button-like Colors */\n/* ============================================ */\n\n/* Primary - Bold blue (like primary button) */\n#tooltip-container[data-flavor="primary"] {\n background: var(--ty-color-primary, #3b82f6);\n color: #ffffff;\n}\n\n/* Success - Bold green */\n#tooltip-container[data-flavor="success"] {\n background: var(--ty-color-success, #10b981);\n color: #ffffff;\n}\n\n/* Danger - Bold red */\n#tooltip-container[data-flavor="danger"] {\n background: var(--ty-color-danger, #ef4444);\n color: #ffffff;\n}\n\n/* Warning - Bold orange/amber */\n#tooltip-container[data-flavor="warning"] {\n background: var(--ty-color-warning, #f59e0b);\n color: #ffffff;\n}\n\n/* Info - Bold cyan/blue */\n#tooltip-container[data-flavor="info"] {\n background: var(--ty-color-info, #06b6d4);\n color: #ffffff;\n}\n\n/* Neutral - Medium gray (default alternative) */\n#tooltip-container[data-flavor="neutral"] {\n background: var(--ty-color-neutral, #6b7280);\n color: #ffffff;\n}\n\n/* Light - For dark backgrounds */\n#tooltip-container[data-flavor="light"] {\n background: var(--ty-surface-elevated, #ffffff);\n color: var(--ty-text-strong, #111827);\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15), \n 0 4px 6px -4px rgba(0, 0, 0, 0.1),\n 0 0 0 1px rgba(0, 0, 0, 0.05);\n}\n\n/* Dark - Inverted style (default) */\n#tooltip-container[data-flavor="dark"] {\n background: var(--ty-tooltip-bg, #1f2937);\n color: #ffffff;\n}\n\n/* Secondary - Purple/indigo */\n#tooltip-container[data-flavor="secondary"] {\n background: var(--ty-color-secondary, #8b5cf6);\n color: #ffffff;\n}\n'},Tn=new WeakMap,Mn=new WeakMap,Dn=new WeakMap,$n=new WeakMap;function An(n){const t=n||"dark";return["dark","light","primary","secondary","success","danger","warning","info","neutral"].includes(t)?t:"dark"}function In(n){let t=Dn.get(n);return t||(t={showTimeout:null,hideTimeout:null},Dn.set(n,t)),t}function On(n,t){return n.hasAttribute(t)}function Ln(n,t,e){const o=n.getAttribute(t);if(null===o)return e;const i=parseInt(o,10);return isNaN(i)?e:i}function Nn(n){return{placement:n.getAttribute("placement")||"top",offset:Ln(n,"offset",8),delay:Ln(n,"delay",600),disabled:On(n,"disabled"),flavor:An(n.getAttribute("flavor"))}}function qn(n){return n.parentElement}function Rn(n,t){switch(n.style.removeProperty("background"),n.style.removeProperty("color"),n.style.removeProperty("border-color"),t){case"primary":n.style.background="var(--ty-bg-primary, #3b82f6)",n.style.color="var(--ty-color-primary-strong, #eff6ff)",n.style.borderColor="var(--ty-border-primary, #60a5fa)";break;case"secondary":n.style.background="var(--ty-bg-secondary, #8b5cf6)",n.style.color="var(--ty-color-secondary-strong, #f5f3ff)",n.style.borderColor="var(--ty-border-secondary, #a78bfa)";break;case"success":n.style.background="var(--ty-bg-success-mild, #10b981)",n.style.color="var(--ty-color-success-strong, #ecfdf5)",n.style.borderColor="var(--ty-border-success, #34d399)";break;case"danger":n.style.background="var(--ty-bg-danger, #ef4444)",n.style.color="var(--ty-color-danger-strong, #fef2f2)",n.style.borderColor="var(--ty-border-danger, #f87171)";break;case"warning":n.style.background="var(--ty-bg-warning, #f59e0b)",n.style.color="var(--ty-color-warning-strong, #fffbeb)",n.style.borderColor="var(--ty-border-warning, #fbbf24)";break;case"info":n.style.background="var(--ty-bg-info, #06b6d4)",n.style.color="var(--ty-text-strong, #f0f9ff)",n.style.borderColor="var(--ty-border-info, #22d3ee)";break;case"light":n.style.background="var(--ty-surface-elevated, #ffffff)",n.style.color="var(--ty-text-strong, #111827)",n.style.borderColor="var(--ty-border, #e5e7eb)";break;case"neutral":n.style.background="var(--ty-bg-neutral, #6b7280)",n.style.color="var(--ty-color-neutral-strong, #f9fafb)",n.style.borderColor="var(--ty-border-neutral, #9ca3af)";break;default:n.style.background="var(--ty-bg-neutral-soft, #4b5563)",n.style.color="var(--ty-color-neutral-strong, #f3f4f6)",n.style.borderColor="var(--ty-border-strong, #6b7280)"}}function Pn(n){const{placement:t,offset:e}=Nn(n),o=qn(n),i=$n.get(n);if(!o||!i)return;const r=Sn({targetEl:o,floatingEl:i,preferences:"top"===t?zn.tooltip:"bottom"===t?["bottom","top","left","right"]:"left"===t?["left","right","top","bottom"]:"right"===t?["right","left","top","bottom"]:zn.tooltip,offset:e});i.style.left=r.x+"px",i.style.top=r.y+"px"}function Vn(n){const t=Tn.get(n);t&&(t(),Tn.delete(n))}function Bn(n){const t=In(n);null!==t.showTimeout&&(clearTimeout(t.showTimeout),t.showTimeout=null),null!==t.hideTimeout&&(clearTimeout(t.hideTimeout),t.hideTimeout=null)}function Fn(n){const t=$n.get(n);if(t)try{t.hidePopover(),n.Qn=!1,Vn(n)}catch(e){}}function Hn(n){const t=In(n),{delay:e}=Nn(n);Bn(n),t.showTimeout=window.setTimeout(()=>function(n){const{disabled:t}=Nn(n);if(t)return;const e=function(n){let t=$n.get(n);if(!t){t=document.createElement("div"),t.id="ty-tooltip-"+Math.random().toString(36).substr(2,9),t.setAttribute("popover","manual"),t.className="ty-tooltip-popover";const{flavor:e}=Nn(n);t.setAttribute("data-flavor",e),t.textContent=n.textContent||"",t.style.cssText="\n position: fixed;\n margin: 0;\n padding: 8px 12px;\n background: var(--ty-tooltip-bg, #1f2937);\n color: #ffffff;\n border: none;\n border-radius: 6px;\n font-size: var(--ty-font-sm, 14px);\n font-weight: var(--ty-font-semibold, 600);\n line-height: 1.5;\n max-width: 250px;\n text-align: center;\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n user-select: none;\n pointer-events: none;\n ",Rn(t,e),document.body.appendChild(t),$n.set(n,t)}return t}(n);try{e.showPopover(),n.Qn=!0,Pn(n),function(n){const t=qn(n),e=$n.get(n);if(!t||!e)return;let o=null;const i=()=>{null!==o&&clearTimeout(o),o=window.setTimeout(()=>{o=null,Pn(n)},10)},r=new ResizeObserver(i);r.observe(t),r.observe(e);let s=null;const a=()=>{null===s&&(s=requestAnimationFrame(()=>{s=null,Pn(n)}))};window.addEventListener("scroll",a,!0),window.addEventListener("resize",i),Tn.set(n,()=>{r.disconnect(),window.removeEventListener("scroll",a,!0),window.removeEventListener("resize",i),null!==o&&clearTimeout(o),null!==s&&cancelAnimationFrame(s)})}(n)}catch(o){}}(n),e)}function jn(n){const t=In(n);Bn(n),t.hideTimeout=window.setTimeout(()=>Fn(n),200)}class TyTooltip extends HTMLElement{constructor(){super(),this.Qn=!1,this.attachShadow({mode:"open"})}static get observedAttributes(){return["placement","offset","delay","disabled","flavor"]}connectedCallback(){this.Qn=!1,r(this.shadowRoot,En),function(n){const t=qn(n);if(!t)return;const e=()=>Hn(n),o=()=>jn(n),i=()=>Hn(n),r=()=>jn(n);t.addEventListener("mouseenter",e),t.addEventListener("mouseleave",o),t.addEventListener("focusin",i),t.addEventListener("focusout",r),Mn.set(n,()=>{t.removeEventListener("mouseenter",e),t.removeEventListener("mouseleave",o),t.removeEventListener("focusin",i),t.removeEventListener("focusout",r)})}(this)}disconnectedCallback(){!function(n){Bn(n),Vn(n);const t=Mn.get(n);t&&(t(),Mn.delete(n));const e=$n.get(n);e&&(e.remove(),$n.delete(n)),Dn.delete(n)}(this)}attributeChangedCallback(n,t,e){if("flavor"===n&&this.Qn){const n=$n.get(this);n&&Rn(n,An(e))}"disabled"===n&&null!==e&&Fn(this)}}customElements.get("ty-tooltip")||customElements.define("ty-tooltip",TyTooltip);const Wn={locked:!1,scrollY:0,activeLocks:new Set};function Yn(){return document.documentElement}function _n(){if(!Wn.locked)return;const n=Yn();window,n.classList.remove("ty-scroll-locked"),n.style.overflow="",n.style.paddingRight="",Wn.locked=!1}function Un(n){Wn.activeLocks.has(n)||(Wn.activeLocks.add(n),1===Wn.activeLocks.size&&function(){if(Wn.locked)return;const n=window.innerWidth-Yn().clientWidth,t=Yn();window,Wn.scrollY=window.scrollY||Yn().scrollTop||0,Wn.locked=!0,t.style.overflow="hidden",n>0&&(t.style.paddingRight=n+"px"),t.classList.add("ty-scroll-locked")}())}function Gn(n){Wn.activeLocks.has(n)&&(Wn.activeLocks.delete(n),0===Wn.activeLocks.size&&_n())}const Xn=new WeakMap,Kn=new WeakMap,Zn=new WeakMap,Jn=new WeakMap,Qn=new WeakMap;function nt(n,t){return n.hasAttribute(t)}function tt(n,t,e){const o=n.getAttribute(t);if(null===o)return e;const i=parseInt(o,10);return isNaN(i)?e:i}function et(n){return{manual:nt(n,"manual"),disableClose:nt(n,"disable-close"),placement:n.getAttribute("placement")||"bottom",offset:tt(n,"offset",8)}}function ot(n){return n.parentElement}function it(n){return n.querySelector(".popup-dialog")}function rt(n){let t=Qn.get(n);return t||(t="popup-"+(n.id||Math.random().toString(36).substr(2,9)),Qn.set(n,t)),t}function st(n,t=!1){const{disableClose:e}=et(n);if(!t&&e)return;const o=n.shadowRoot,i=o?it(o):null;i&&(i.classList.remove("open"),i.classList.remove("preparing-animation"),setTimeout(()=>{i.classList.remove("position-calculated"),i.close()},150),n.dispatchEvent(new CustomEvent("close",{bubbles:!0})))}function at(n){Un(rt(n));const t=n.shadowRoot,e=t?it(t):null;e&&(e.showModal(),requestAnimationFrame(()=>{!function(n){const{placement:t,offset:e}=et(n),o=n.shadowRoot,i=ot(n),r=o?it(o):null;if(!i||!r)return;const s=Sn({targetEl:i,floatingEl:r,preferences:"top"===t?["top","bottom","left","right"]:"bottom"===t?["bottom","top","left","right"]:"left"===t?["left","right","top","bottom"]:"right"===t?["right","left","top","bottom"]:["bottom","top","right","left"],offset:e,padding:8,containerPadding:16});n.style.setProperty("--popup-x",s.x+"px"),n.style.setProperty("--popup-y",s.y+"px"),r.classList.add("position-calculated")}(n),e.classList.add("preparing-animation"),requestAnimationFrame(()=>{e.classList.add("open"),n.dispatchEvent(new CustomEvent("open",{bubbles:!0}))})}))}function lt(n){const t=n.shadowRoot,e=t?it(t):null;e&&(e.classList.contains("open")?st(n):at(n))}function dt(n){const{manual:t}=et(n),e=ot(n);if(!e||t)return;const o=Xn.get(n);o&&e.removeEventListener("pointerdown",o);const i=t=>function(n,t){t.preventDefault(),t.stopPropagation(),lt(n)}(n,t);Xn.set(n,i),e.addEventListener("pointerdown",i)}function ct(n){const t=ot(n),e=Xn.get(n);t&&e&&(t.removeEventListener("pointerdown",e),Xn.delete(n))}function ht(n){const t=n.shadowRoot;if(!t)return;const e=it(t);if(r(t,{css:"\n/* Popup component with dropdown-like behavior and tooltip positioning */\n/* Uses dialog element for top layer rendering like dropdown and date-picker */\n\n.popup-dialog {\n position: fixed;\n top: 0;\n left: 0;\n\n /* Reset dialog defaults */\n margin: 0;\n border: none;\n background: transparent;\n max-width: none;\n max-height: none;\n\n /* Shadow infrastructure - provide space for user shadows */\n padding: var(--popup-padding, 16px);\n\n /* Hidden by default - even when [open] (for positioning phase) */\n visibility: hidden;\n opacity: 0;\n /* NO TRANSFORM here - apply only when animating to avoid measurement errors! */\n\n /* Smooth transitions */\n transition:\n opacity 150ms ease-out,\n visibility 150ms ease-out,\n transform 150ms ease-out;\n\n /* Prevent interactions when hidden */\n pointer-events: none;\n}\n\n/* Apply position variables only when position is calculated (like dropdown) */\n.popup-dialog.position-calculated {\n top: var(--popup-y, 0px);\n left: var(--popup-x, 0px);\n}\n\n/* Apply scale for entrance animation (right before .open) */\n.popup-dialog.preparing-animation {\n transform: scale(0.95);\n}\n\n/* When open - smooth entrance animation */\n.popup-dialog.open {\n visibility: visible;\n opacity: 1;\n transform: scale(1);\n pointer-events: auto;\n}\n\n/* Make dialog backdrop transparent like dropdown/date-picker */\n.popup-dialog::backdrop {\n background: transparent;\n}\n\n/* Inner container - neutral structural container */\n.popup-container {\n /* No default styling - just provides structure */\n /* Users control all visual aspects via slotted content */\n display: contents;\n}\n\n/* Content slot styling */\n#popup-content {\n /* Allow slotted content to define its own styling */\n display: contents;\n}\n\n/* Remove default styling from slotted content - users have full control */\n#popup-content ::slotted(*) {\n /* Remove default styling that conflicts with user styling */\n /* Users now have complete control over popup appearance */\n /* background: unset; */\n /* border: unset; */\n /* box-shadow: unset; */\n\n /* Only maintain essential positioning */\n position: relative;\n\n /* Prevent content from being too wide - still helpful */\n max-width: min(400px, 90vw);\n max-height: min(500px, 80vh);\n overflow: auto;\n}\n",id:"ty-popup"}),!e){const e=document.createElement("dialog"),o=document.createElement("div"),i=document.createElement("slot");e.className="popup-dialog",o.className="popup-container",i.id="popup-content",t.appendChild(e),e.appendChild(o),o.appendChild(i),n.style.setProperty("--popup-x","0px"),n.style.setProperty("--popup-y","0px");const r=t=>function(n,t){t.stopPropagation();const e=n.shadowRoot,o=e?it(e):null;o&&t.target===o&&(t.preventDefault(),st(n))}(n,t);Kn.set(n,r),e.addEventListener("pointerdown",r);const s=t=>function(n,t){if(t.stopPropagation(),"Escape"===t.key){const{disableClose:e}=et(n);e?t.preventDefault():st(n)}}(n,t);Zn.set(n,s),n.addEventListener("keydown",s),e.addEventListener("close",()=>{Gn(rt(n)),e.classList.remove("open"),e.classList.remove("preparing-animation"),n.dispatchEvent(new CustomEvent("close",{bubbles:!0}))})}n.closePopup=()=>st(n,!0),n.openPopup=()=>at(n),n.togglePopup=()=>lt(n);const o=t=>function(n,t){t.stopPropagation(),st(n,!0)}(n,t);Jn.set(n,o),n.addEventListener("ty:close-popup",o),dt(n)}class TyPopup extends HTMLElement{static get observedAttributes(){return["manual","disable-close","placement","offset"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){ht(this)}disconnectedCallback(){!function(n){const t=Qn.get(n);t&&(Gn(t),Qn.delete(n)),ct(n);const e=n.shadowRoot,o=e?it(e):null;if(o){const t=Kn.get(n);t&&(o.removeEventListener("pointerdown",t),Kn.delete(n))}const i=Zn.get(n);i&&(n.removeEventListener("keydown",i),Zn.delete(n));const r=Jn.get(n);r&&(n.removeEventListener("ty:close-popup",r),Jn.delete(n))}(this)}attributeChangedCallback(n,t,e){switch(ht(this),n){case"placement":case"offset":ht(this);break;case"manual":case"disable-close":ct(this),dt(this)}}}customElements.get("ty-popup")||customElements.define("ty-popup",TyPopup);const pt=new WeakMap,ut=new WeakMap,gt=new WeakMap,bt=new WeakMap,vt=new WeakMap,mt=new WeakMap;function yt(n,t){if(!n.hasAttribute(t))return!1;const e=n.getAttribute(t);return null===e||"false"!==e.toLowerCase()}function ft(n){return{open:yt(n,"open"),backdrop:!n.hasAttribute("backdrop")||yt(n,"backdrop"),closeOnOutsideClick:!n.hasAttribute("close-on-outside-click")||yt(n,"close-on-outside-click"),closeOnEscape:!n.hasAttribute("close-on-escape")||yt(n,"close-on-escape"),protected:yt(n,"protected")}}function wt(n){return n.querySelector(".ty-modal-dialog")}function xt(n,t,e){const o=new CustomEvent(t,{detail:e,bubbles:!0,cancelable:!0});n.dispatchEvent(o)}function kt(n){const{protected:t}=ft(n),e=n.shadowRoot,o=e?wt(e):null;if(o&&o.open){if(t&&!confirm("You have unsaved changes. Are you sure you want to close?"))return;n.removeAttribute("open")}}function zt(n){const t=n.shadowRoot;if(!t)return;const e=ft(n),o=function(n){let t=wt(n);if(!t){t=document.createElement("dialog");const e=document.createElement("button"),o=document.createElement("div"),i=document.createElement("slot");t.className="ty-modal-dialog",e.className="close-button",e.type="button",e.setAttribute("aria-label","Close modal"),e.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',o.className="modal-content",o.appendChild(i),t.appendChild(e),t.appendChild(o),n.appendChild(t)}return t}(t),i=function(n){let t=mt.get(n);return t||(t="modal-"+(n.id||Math.random().toString(36).substr(2,9)),mt.set(n,t)),t}(n);r(t,{css:"\n/* Modal Host Styling */\n:host {\n display: contents;\n /* Don't interfere with layout */\n /* CSS variables are now auto-generated via the with-vars? option */\n}\n\n/* ===== CLOSE BUTTON STYLING ===== */\n/* This is part of the modal wrapper functionality, not user content styling */\n\n.close-button {\n position: absolute;\n top: -8px;\n right: -8px;\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 4px;\n border-radius: 4px;\n transition: var(--ty-transition-colors);\n z-index: 1;\n color: #d8d8d8;\n\n /* Remove all default browser styling that could cause outlines/borders */\n outline: none;\n box-shadow: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n\n /* Remove mobile tap highlights and focus rings */\n -webkit-tap-highlight-color: transparent;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.close-button:hover {\n color: white;\n}\n\n/* Explicitly remove focus and active states for all interaction modes */\n.close-button:focus,\n.close-button:focus-visible,\n.close-button:focus-within,\n.close-button:active {\n outline: none !important;\n box-shadow: none !important;\n border: none !important;\n background: transparent !important;\n}\n\n/* Override hover color even in focus/active states */\n.close-button:hover,\n.close-button:focus:hover,\n.close-button:active:hover {\n color: white;\n}\n\n.close-button.hide {\n visibility: hidden;\n}\n\n/* ===== DIALOG ELEMENT - PURE WRAPPER ===== */\n/* Modal dialog - provides only essential modal functionality without styling user content */\n\n.ty-modal-dialog {\n /* Reset default dialog styles */\n padding: 18px;\n border: none;\n margin: 0;\n background: transparent;\n\n /* Modal positioning - centered */\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n\n /* Layer management */\n z-index: 1000;\n overflow: hidden;\n\n /* No sizing - let user content determine size */\n max-width: 85vw;\n max-height: 90vh;\n\n outline: none;\n}\n\n/* ===== BACKDROP STYLING ===== */\n/* Backdrop is part of modal functionality, not user content */\n\n.ty-modal-dialog::backdrop {\n background: var(--ty-modal-backdrop, rgba(0, 0, 0, 0.5));\n backdrop-filter: var(--ty-modal-backdrop-blur, blur(2px));\n animation: ty-modal-backdrop-enter var(--ty-modal-duration, 200ms) ease-out;\n}\n\n/* When backdrop is disabled */\n.ty-modal-dialog:not([data-backdrop])::backdrop {\n background: transparent;\n backdrop-filter: none;\n}\n\n/* ===== MODAL CONTENT CONTAINER ===== */\n/* Minimal container - no styling imposed on user content */\n\n.modal-content {\n color: var(--ty-text);\n}\n\n/* ===== ANIMATION KEYFRAMES ===== */\n\n@keyframes ty-modal-backdrop-enter {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n",id:"ty-modal"}),o.className="ty-modal-dialog",e.backdrop?o.setAttribute("data-backdrop","true"):o.removeAttribute("data-backdrop"),function(n,t,e){const o=pt.get(n);if(o&&(t.removeEventListener("click",o),pt.delete(n)),e){const e=t=>function(n,t){t.stopPropagation();const e=n.shadowRoot,o=e?wt(e):null;o&&t.target===o&&(t.preventDefault(),kt(n))}(n,t);pt.set(n,e),t.addEventListener("click",e)}}(n,o,e.closeOnOutsideClick),function(n,t,e){const o=ut.get(n);if(o&&(t.removeEventListener("keydown",o),ut.delete(n)),e){const e=t=>function(n,t){t.stopPropagation(),"Escape"===t.key&&(t.preventDefault(),kt(n))}(n,t);ut.set(n,e),t.addEventListener("keydown",e)}}(n,o,e.closeOnEscape),function(n,t,e){const o=t.querySelector(".close-button");if(!o)return;o.style.display=e?"":"none";const i=gt.get(n);if(i&&(o.removeEventListener("click",i),gt.delete(n)),e){const t=t=>function(n,t){t.preventDefault(),t.stopPropagation(),kt(n)}(n,t);gt.set(n,t),o.addEventListener("click",t)}}(n,o,e.closeOnOutsideClick),function(n,t){const e=t.querySelector(".modal-content");if(!e)return;const o=bt.get(n),i=vt.get(n);if(o&&(e.removeEventListener("mouseenter",o),bt.delete(n)),i&&(e.removeEventListener("mouseleave",i),vt.delete(n)),window.innerWidth>=768&&0>=navigator.maxTouchPoints){const t=n=>function(n,t){const e=t.currentTarget.closest(".ty-modal-dialog");if(e){const n=e.querySelector(".close-button");n&&n.classList.add("hide")}}(0,n),o=n=>function(n,t){const e=t.currentTarget.closest(".ty-modal-dialog");if(e){const n=e.querySelector(".close-button");n&&n.classList.remove("hide")}}(0,n);bt.set(n,t),vt.set(n,o),e.addEventListener("mouseenter",t),e.addEventListener("mouseleave",o)}}(n,o),e.open?o.open||(Un(i),e.backdrop?o.showModal():o.show(),xt(n,"open",{})):o.open&&(Gn(i),o.close(),xt(n,"close",{reason:"programmatic"})),o.onclose=()=>{Gn(i),n.hasAttribute("open")&&(n.removeAttribute("open"),xt(n,"close",{reason:"native",returnValue:o.returnValue||void 0}))}}class TyModal extends HTMLElement{static get observedAttributes(){return["open","backdrop","close-on-outside-click","close-on-escape","protected"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){zt(this),this.show=()=>{this.setAttribute("open","true")},this.hide=()=>kt(this)}disconnectedCallback(){!function(n){const t=mt.get(n),e=n.shadowRoot,o=e?wt(e):null;if(t&&(Gn(t),mt.delete(n)),!o)return;const i=pt.get(n);i&&(o.removeEventListener("click",i),pt.delete(n));const r=ut.get(n);r&&(o.removeEventListener("keydown",r),ut.delete(n));const s=o.querySelector(".close-button");if(s){const t=gt.get(n);t&&(s.removeEventListener("click",t),gt.delete(n))}const a=o.querySelector(".modal-content");if(a){const t=bt.get(n),e=vt.get(n);t&&(a.removeEventListener("mouseenter",t),bt.delete(n)),e&&(a.removeEventListener("mouseleave",e),vt.delete(n))}}(this)}attributeChangedCallback(n,t,e){zt(this)}}customElements.get("ty-modal")||customElements.define("ty-modal",TyModal);const Ct=`\n/* ==================== SHARED STYLES ==================== */\n/* These apply to BOTH desktop and mobile modes */\n\n:host {\n display: block;\n width: auto;\n}\n\n:host {\n --mobile-border-color: var(--ty-border, #5858587d);\n}\n\n.dropdown-container {\n display: flex;\n flex-direction: column;\n width: 100%;\n box-sizing: border-box;\n}\n\n/* Label styling */\n.dropdown-label {\n font-size: 14px;\n font-weight: 500;\n color: var(--ty-label-color);\n margin-bottom: 6px;\n line-height: 1.25;\n padding-left: 12px;\n}\n\n.required-icon {\n display: inline-flex;\n align-items: center;\n color: #ef4444;\n width: 12px;\n height: 12px;\n vertical-align: middle;\n margin-left: 4px;\n}\n\n.dropdown-wrapper {\n position: relative;\n display: block;\n width: 100%;\n}\n\n/* ==================== DESKTOP MODE STYLES ==================== */\n/* All styles scoped under .dropdown-mode-desktop */\n\n/* Stub (trigger button) */\n.dropdown-mode-desktop .dropdown-stub {\n width: 100%;\n cursor: pointer;\n box-sizing: border-box;\n position: relative;\n display: flex;\n align-items: center;\n background: var(--input-bg, var(--ty-input-bg));\n color: var(--input-color, var(--ty-input-color));\n border: 1px solid var(--input-border, var(--ty-input-border));\n border-radius: var(--ty-radius-md);\n font-family: var(--ty-font-sans);\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n font-weight: var(--ty-font-normal);\n min-height: var(--ty-size-md);\n padding: var(--ty-spacing-2) var(--ty-spacing-3);\n padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n transition: var(--ty-transition-all), opacity 0.2s ease;\n outline: none;\n}\n\n.dropdown-mode-desktop .dropdown-stub:hover {\n border-color: var(--input-border-hover, var(--ty-input-border-hover));\n}\n\n.dropdown-mode-desktop .dropdown-stub[disabled] {\n background-color: var(--input-disabled-bg, var(--ty-input-disabled-bg));\n color: var(--input-disabled-color, var(--ty-input-disabled-color));\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n.dropdown-mode-desktop .dropdown-stub:focus {\n border-color: var(--input-border-hover, var(--ty-input-border-hover));\n}\n\n/* Hide stub when dropdown is open */\n.dropdown-mode-desktop .dropdown-wrapper:has(.dropdown-chevron.open) .dropdown-stub {\n opacity: 0;\n pointer-events: none;\n}\n\n/* Size variants */\n.dropdown-mode-desktop .dropdown-stub.xs {\n min-height: var(--ty-size-xs);\n font-size: var(--ty-font-xs);\n line-height: var(--ty-leading-xs);\n letter-spacing: var(--ty-tracking-xs);\n padding: var(--ty-spacing-1) var(--ty-spacing-2);\n padding-right: calc(var(--ty-spacing-2) + 1rem + var(--ty-spacing-1));\n}\n\n.dropdown-mode-desktop .dropdown-stub.sm {\n min-height: var(--ty-size-sm);\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n padding: var(--ty-spacing-1) var(--ty-spacing-2);\n padding-right: calc(var(--ty-spacing-2) + 1rem + var(--ty-spacing-1));\n}\n\n.dropdown-mode-desktop .dropdown-stub.md {\n min-height: var(--ty-size-md);\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n padding: var(--ty-spacing-2) var(--ty-spacing-3);\n padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n}\n\n.dropdown-mode-desktop .dropdown-stub.lg {\n min-height: var(--ty-size-lg);\n font-size: var(--ty-font-base);\n line-height: var(--ty-leading-base);\n letter-spacing: var(--ty-tracking-base);\n padding: var(--ty-spacing-3) var(--ty-spacing-4);\n padding-right: calc(var(--ty-spacing-4) + 1rem + var(--ty-spacing-3));\n}\n\n.dropdown-mode-desktop .dropdown-stub.xl {\n min-height: var(--ty-size-xl);\n font-size: var(--ty-font-lg);\n line-height: var(--ty-leading-lg);\n letter-spacing: var(--ty-tracking-lg);\n padding: var(--ty-spacing-4) var(--ty-spacing-5);\n padding-right: calc(var(--ty-spacing-5) + 1rem + var(--ty-spacing-4));\n}\n\n/* Clearable adjustments */\n.dropdown-mode-desktop .dropdown-stub.xs.clearable.has-selection {\n padding-right: calc(var(--ty-spacing-2) + 2rem + var(--ty-spacing-2));\n}\n\n.dropdown-mode-desktop .dropdown-stub.sm.clearable.has-selection {\n padding-right: calc(var(--ty-spacing-2) + 2rem + var(--ty-spacing-2));\n}\n\n.dropdown-mode-desktop .dropdown-stub.md.clearable.has-selection {\n padding-right: calc(var(--ty-spacing-3) + 2rem + var(--ty-spacing-3));\n}\n\n.dropdown-mode-desktop .dropdown-stub.lg.clearable.has-selection {\n padding-right: calc(var(--ty-spacing-4) + 2rem + var(--ty-spacing-4));\n}\n\n.dropdown-mode-desktop .dropdown-stub.xl.clearable.has-selection {\n padding-right: calc(var(--ty-spacing-5) + 2rem + var(--ty-spacing-5));\n}\n\n/* Start-slot icon (leading content inside the stub trigger) */\n.dropdown-mode-desktop .dropdown-stub ::slotted([slot="start"]),\n.dropdown-mode-mobile .dropdown-stub ::slotted([slot="start"]) {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin-right: 0.5rem;\n color: var(--ty-color-text-soft);\n}\n\n.dropdown-mode-desktop .dropdown-stub ::slotted(ty-icon[slot="start"]),\n.dropdown-mode-mobile .dropdown-stub ::slotted(ty-icon[slot="start"]) {\n width: 1em;\n height: 1em;\n}\n\n/* Placeholder */\n.dropdown-mode-desktop .dropdown-placeholder {\n color: var(--input-placeholder, var(--ty-input-placeholder));\n font-weight: var(--ty-font-light);\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n font-style: italic;\n pointer-events: none;\n}\n\n.dropdown-mode-desktop .dropdown-stub.has-selection .dropdown-placeholder {\n display: none;\n}\n\n/* Selected content */\n.dropdown-mode-desktop .dropdown-stub slot[name="selected"] {\n display: block;\n}\n\n.dropdown-mode-desktop .dropdown-stub.has-selection slot[name="selected"] {\n width: 100%;\n}\n\n.dropdown-mode-desktop .dropdown-stub slot[name="selected"] * {\n display: block;\n width: 100%;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n color: inherit;\n font: inherit;\n line-height: inherit;\n outline: none;\n appearance: none;\n}\n\n/* Chevron */\n.dropdown-mode-desktop .dropdown-chevron {\n position: absolute;\n top: 50%;\n right: var(--ty-spacing-3);\n transform: translateY(-50%);\n width: 1rem;\n height: 1rem;\n color: var(--input-placeholder, var(--ty-input-placeholder));\n transition: var(--ty-transition-transform);\n pointer-events: none;\n}\n\n.dropdown-mode-desktop .dropdown-chevron.open {\n transform: translateY(-50%) rotate(180deg);\n}\n\n.dropdown-mode-desktop .dropdown-chevron svg {\n width: 100%;\n height: 100%;\n}\n\n/* Clear button */\n.dropdown-mode-desktop .dropdown-clear-btn {\n position: absolute;\n top: 50%;\n right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n transform: translateY(-50%);\n width: 1rem;\n height: 1rem;\n padding: 0;\n border: none;\n background: none;\n color: var(--input-placeholder, var(--ty-input-placeholder));\n cursor: pointer;\n transition: var(--ty-transition-colors);\n display: none;\n}\n\n.dropdown-mode-desktop .dropdown-clear-btn:hover {\n color: var(--ty-color-danger);\n}\n\n.dropdown-mode-desktop .dropdown-clear-btn:active {\n transform: translateY(-50%) scale(0.9);\n}\n\n.dropdown-mode-desktop .dropdown-clear-btn svg {\n width: 100%;\n height: 100%;\n display: block;\n}\n\n/* Dialog */\n.dropdown-mode-desktop .dropdown-dialog {\n position: fixed;\n width: var(--dropdown-width, 200px);\n max-width: 100vw;\n margin: 0;\n padding: 0;\n border: none;\n background: transparent;\n box-sizing: border-box;\n padding: var(--dropdown-padding, 20px);\n opacity: 0;\n transition: opacity 400ms ease;\n transform: translate(var(--dropdown-offset-x, 0px), var(--dropdown-offset-y, 0px));\n top: -1000px;\n left: -1000px;\n}\n\n/* When opened via showModal(), apply flex layout and direction */\n.dropdown-mode-desktop .dropdown-dialog[open] {\n display: flex;\n flex-direction: column;\n}\n\n.dropdown-mode-desktop .dropdown-dialog.position-below {\n left: var(--dropdown-x);\n top: var(--dropdown-y);\n}\n\n.dropdown-mode-desktop .dropdown-dialog.position-above {\n left: var(--dropdown-x);\n bottom: var(--dropdown-y);\n top: auto;\n flex-direction: column-reverse;\n}\n\n.dropdown-mode-desktop .dropdown-dialog.position-above .dropdown-header {\n margin-top: 4px;\n}\n\n.dropdown-mode-desktop .dropdown-dialog.position-below .dropdown-header {\n margin-bottom: 4px;\n}\n\n.dropdown-mode-desktop .dropdown-dialog.position-below .dropdown-options {\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1), var(--ty-shadow-md);\n}\n\n.dropdown-mode-desktop .dropdown-dialog.open {\n display: flex;\n opacity: 1;\n}\n\n.dropdown-mode-desktop .dropdown-dialog.open .dropdown-options {\n opacity: 1;\n transform: translateY(0) scale(1);\n}\n\n.dropdown-mode-desktop .dropdown-dialog::backdrop {\n background: transparent;\n}\n\n/* Dialog header */\n.dropdown-mode-desktop .dropdown-header {\n display: flex;\n align-items: center;\n gap: var(--ty-spacing-2);\n position: relative;\n}\n\n.dropdown-mode-desktop .dropdown-search-input {\n width: 100%;\n min-width: 0;\n box-sizing: border-box;\n background: var(--input-bg, var(--ty-input-bg));\n color: var(--input-color, var(--ty-input-color));\n border: 1px solid var(--input-border, var(--ty-input-border));\n border-radius: var(--ty-radius-md);\n font-family: var(--ty-font-sans);\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n font-weight: var(--ty-font-normal);\n min-height: var(--ty-size-md);\n padding: var(--ty-spacing-2) var(--ty-spacing-3);\n padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n transition: var(--ty-transition-all);\n outline: none;\n}\n\n.dropdown-mode-desktop .dropdown-search-input:focus {\n border-color: var(--input-border-focus, var(--ty-input-border-focus));\n box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n.dropdown-mode-desktop .dropdown-search-input:disabled {\n background-color: var(--input-disabled-bg, var(--ty-input-disabled-bg));\n color: var(--input-disabled-color, var(--ty-input-disabled-color));\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n.dropdown-mode-desktop .dropdown-search-input::placeholder {\n color: var(--input-placeholder, var(--ty-input-placeholder));\n}\n\n/* Search input sizes */\n.dropdown-mode-desktop .dropdown-search-input.xs {\n min-height: var(--ty-size-xs);\n font-size: var(--ty-font-xs);\n line-height: var(--ty-leading-xs);\n letter-spacing: var(--ty-tracking-xs);\n padding: var(--ty-spacing-1) var(--ty-spacing-2);\n padding-right: calc(var(--ty-spacing-2) + 1rem + var(--ty-spacing-1));\n}\n\n.dropdown-mode-desktop .dropdown-search-input.sm {\n min-height: var(--ty-size-sm);\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n padding: var(--ty-spacing-1) var(--ty-spacing-2);\n padding-right: calc(var(--ty-spacing-2) + 1rem + var(--ty-spacing-1));\n}\n\n.dropdown-mode-desktop .dropdown-search-input.md {\n min-height: var(--ty-size-md);\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n padding: var(--ty-spacing-2) var(--ty-spacing-3);\n padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n}\n\n.dropdown-mode-desktop .dropdown-search-input.lg {\n min-height: var(--ty-size-lg);\n font-size: var(--ty-font-base);\n line-height: var(--ty-leading-base);\n letter-spacing: var(--ty-tracking-base);\n padding: var(--ty-spacing-3) var(--ty-spacing-4);\n padding-right: calc(var(--ty-spacing-4) + 1rem + var(--ty-spacing-3));\n}\n\n.dropdown-mode-desktop .dropdown-search-input.xl {\n min-height: var(--ty-size-xl);\n font-size: var(--ty-font-lg);\n line-height: var(--ty-leading-lg);\n letter-spacing: var(--ty-tracking-lg);\n padding: var(--ty-spacing-4) var(--ty-spacing-5);\n padding-right: calc(var(--ty-spacing-5) + 1rem + var(--ty-spacing-4));\n}\n\n.dropdown-mode-desktop .dropdown-search-chevron {\n position: absolute;\n top: 50%;\n right: var(--ty-spacing-3);\n transform: translateY(-50%);\n width: 1rem;\n height: 1rem;\n color: var(--input-placeholder, var(--ty-input-placeholder));\n transition: var(--ty-transition-transform);\n pointer-events: none;\n}\n\n.dropdown-mode-desktop .dropdown-search-chevron.open {\n transform: translateY(-50%) rotate(180deg);\n}\n\n.dropdown-mode-desktop .dropdown-search-chevron svg {\n width: 100%;\n height: 100%;\n}\n\n/* Options container */\n.dropdown-mode-desktop .dropdown-options {\n opacity: 0;\n background: var(--input-bg, var(--ty-input-bg));\n border: 1px solid var(--input-border, var(--ty-input-border));\n border-radius: var(--ty-radius-lg);\n max-height: 16rem;\n width: 100%;\n max-width: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n scroll-behavior: smooth;\n box-sizing: border-box;\n position: relative;\n box-shadow:\n 0 20px 25px -5px rgba(0, 0, 0, 0.1),\n 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n transform: translateY(-20px) scale(0.90);\n transition:\n opacity 100ms cubic-bezier(0.16, 1, 0.3, 1),\n transform 200ms cubic-bezier(0.16, 1, 0.3, 1);\n\n}\n\n/* Hide native scrollbar only when custom scrollbar is active */\n.dropdown-mode-desktop .dropdown-options.ty-custom-scroll {\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n\n.dropdown-mode-desktop .dropdown-options.ty-custom-scroll::-webkit-scrollbar {\n display: none;\n}\n\n/* Options wrapper - positioned container for scrollbar track */\n.dropdown-mode-desktop .dropdown-options-wrapper {\n position: relative;\n}\n\n/* Show custom scrollbar on hover over options */\n.dropdown-mode-desktop .dropdown-options-wrapper:hover .ty-scrollbar-track-y.has-overflow {\n opacity: 1;\n}\n\n/* Option elements */\n.dropdown-mode-desktop .dropdown-options ::slotted(option) {\n padding: var(--ty-spacing-2) var(--ty-spacing-3);\n color: var(--input-color, var(--ty-input-color));\n cursor: pointer;\n transition:\n var(--ty-transition-colors),\n transform 150ms cubic-bezier(0.16, 1, 0.3, 1);\n border: none;\n background: none;\n font-size: inherit;\n font-family: inherit;\n width: 100%;\n text-align: left;\n box-sizing: border-box;\n transform: translateX(0);\n}\n\n.dropdown-mode-desktop .dropdown-options ::slotted(option:hover) {\n background-color: var(--ty-bg-neutral-soft);\n}\n\n.dropdown-mode-desktop .dropdown-options ::slotted(option[highlighted]) {\n background-color: var(--ty-bg-primary-soft);\n color: var(--ty-color-primary-mild);\n}\n\n.dropdown-mode-desktop .dropdown-options ::slotted(option[selected]) {\n background-color: var(--ty-color-primary);\n color: #ffffff;\n}\n\n.dropdown-mode-desktop .dropdown-options ::slotted(option[hidden]),\n.dropdown-mode-desktop .dropdown-options ::slotted(ty-option[hidden]),\n.dropdown-mode-desktop .dropdown-options ::slotted(ty-tag[hidden]) {\n display: none;\n}\n\n/* ==================== MOBILE MODE STYLES ==================== */\n/* All styles scoped under .dropdown-mode-mobile */\n/* Floating modal design (centered card with backdrop) */\n\n/* Stub (trigger button) - same as desktop but scoped */\n.dropdown-mode-mobile .dropdown-stub {\n width: 100%;\n cursor: pointer;\n box-sizing: border-box;\n position: relative;\n display: flex;\n align-items: center;\n background: var(--input-bg, var(--ty-input-bg));\n color: var(--input-color, var(--ty-input-color));\n border: 1px solid var(--input-border, var(--ty-input-border));\n border-radius: var(--ty-radius-md);\n font-family: var(--ty-font-sans);\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n font-weight: var(--ty-font-normal);\n min-height: var(--ty-size-md);\n padding: var(--ty-spacing-2) var(--ty-spacing-3);\n padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n transition: var(--ty-transition-all);\n outline: none;\n}\n\n.dropdown-mode-mobile .dropdown-stub:hover {\n border-color: var(--input-border-hover, var(--ty-input-border-hover));\n}\n\n.dropdown-mode-mobile .dropdown-stub[disabled] {\n background-color: var(--input-disabled-bg, var(--ty-input-disabled-bg));\n color: var(--input-disabled-color, var(--ty-input-disabled-color));\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n/* Size variants */\n.dropdown-mode-mobile .dropdown-stub.xs {\n min-height: var(--ty-size-xs);\n font-size: var(--ty-font-xs);\n line-height: var(--ty-leading-xs);\n letter-spacing: var(--ty-tracking-xs);\n padding: var(--ty-spacing-1) var(--ty-spacing-2);\n padding-right: calc(var(--ty-spacing-2) + 1rem + var(--ty-spacing-1));\n}\n\n.dropdown-mode-mobile .dropdown-stub.sm {\n min-height: var(--ty-size-sm);\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n padding: var(--ty-spacing-1) var(--ty-spacing-2);\n padding-right: calc(var(--ty-spacing-2) + 1rem + var(--ty-spacing-1));\n}\n\n.dropdown-mode-mobile .dropdown-stub.md {\n min-height: var(--ty-size-md);\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n padding: var(--ty-spacing-2) var(--ty-spacing-3);\n padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n}\n\n.dropdown-mode-mobile .dropdown-stub.lg {\n min-height: var(--ty-size-lg);\n font-size: var(--ty-font-base);\n line-height: var(--ty-leading-base);\n letter-spacing: var(--ty-tracking-base);\n padding: var(--ty-spacing-3) var(--ty-spacing-4);\n padding-right: calc(var(--ty-spacing-4) + 1rem + var(--ty-spacing-3));\n}\n\n.dropdown-mode-mobile .dropdown-stub.xl {\n min-height: var(--ty-size-xl);\n font-size: var(--ty-font-lg);\n line-height: var(--ty-leading-lg);\n letter-spacing: var(--ty-tracking-lg);\n padding: var(--ty-spacing-4) var(--ty-spacing-5);\n padding-right: calc(var(--ty-spacing-5) + 1rem + var(--ty-spacing-4));\n}\n\n/* Placeholder */\n.dropdown-mode-mobile .dropdown-placeholder {\n color: var(--input-placeholder, var(--ty-input-placeholder));\n font-weight: var(--ty-font-light);\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n font-style: italic;\n pointer-events: none;\n}\n\n.dropdown-mode-mobile .dropdown-stub.has-selection .dropdown-placeholder {\n display: none;\n}\n\n/* Selected content */\n.dropdown-mode-mobile .dropdown-stub slot[name="selected"] {\n display: block;\n}\n\n.dropdown-mode-mobile .dropdown-stub.has-selection slot[name="selected"] {\n width: 100%;\n}\n\n.dropdown-mode-mobile .dropdown-stub slot[name="selected"] * {\n display: block;\n width: 100%;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n color: inherit;\n font: inherit;\n line-height: inherit;\n outline: none;\n appearance: none;\n}\n\n/* Chevron */\n.dropdown-mode-mobile .dropdown-chevron {\n position: absolute;\n top: 50%;\n right: var(--ty-spacing-3);\n transform: translateY(-50%);\n width: 1rem;\n height: 1rem;\n color: var(--input-placeholder, var(--ty-input-placeholder));\n transition: var(--ty-transition-transform);\n pointer-events: none;\n}\n\n.dropdown-mode-mobile .dropdown-chevron svg {\n width: 100%;\n height: 100%;\n}\n\n/* Mobile dialog - full screen overlay with centered floating card */\n.dropdown-mode-mobile .mobile-dialog {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n width: 100vw;\n height: 100vh;\n max-width: 100vw;\n max-height: 100vh;\n margin: 0;\n padding: 0;\n padding-top: 10vh;\n border: none;\n background: transparent;\n align-items: flex-start;\n justify-content: center;\n opacity: 0;\n transition: opacity 300ms ease;\n}\n\n/* When opened via showModal(), add flex layout */\n.dropdown-mode-mobile .mobile-dialog[open] {\n display: flex;\n}\n\n.dropdown-mode-mobile .mobile-dialog.open {\n opacity: 1;\n}\n\n/* Native dialog backdrop with blur */\n.dropdown-mode-mobile .mobile-dialog::backdrop {\n background: rgba(0, 0, 0, 0.5);\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n}\n\n/* Mobile content container - floating card */\n.dropdown-mode-mobile .mobile-dialog-content {\n position: relative;\n display: flex;\n flex-direction: column;\n width: calc(100% - 32px);\n max-width: 400px;\n min-height: 200px;\n max-height: calc(90vh - 10vh);\n opacity: 0;\n transform: scale(0.95);\n transition:\n opacity 300ms cubic-bezier(0.16, 1, 0.3, 1),\n transform 300ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.dropdown-mode-mobile .mobile-dialog.open .mobile-dialog-content {\n opacity: 1;\n transform: scale(1);\n}\n\n/* Mobile search header - label floats above, search + close below */\n.dropdown-mode-mobile .mobile-search-header {\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n margin-bottom: 16px;\n padding: 0;\n background: transparent;\n position: relative;\n}\n\n.dropdown-mode-mobile .mobile-header-content {\n display: flex;\n align-items: center;\n gap: 12px;\n width: 100%;\n}\n\n/* Header for non-searchable (label + close button) */\n.dropdown-mode-mobile .mobile-header-nosearch {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n margin-bottom: 16px;\n padding: 0;\n background: transparent;\n position: relative;\n min-height: 40px;\n}\n\n.dropdown-mode-mobile .mobile-header-label {\n position: absolute;\n bottom: 100%;\n left: 6px;\n margin-bottom: 4px;\n font-size: var(--ty-font-lg);\n line-height: var(--ty-leading-lg);\n letter-spacing: var(--ty-tracking-lg);\n font-weight: 700;\n color: var(--ty-color-neutral);\n pointer-events: none;\n}\n\n/* Close button - circular with border */\n.dropdown-mode-mobile .mobile-close-button {\n flex-shrink: 0;\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--ty-surface-floating);\n border: 2px solid var(--mobile-border-color);\n border-radius: 50%;\n color: var(--ty-text-strong);\n cursor: pointer;\n transition: var(--ty-transition-all);\n padding: 0;\n}\n\n.dropdown-mode-mobile .mobile-close-button:hover {\n background: var(--ty-bg-neutral);\n border-color: var(--ty-border);\n color: var(--ty-text-strong);\n}\n\n.dropdown-mode-mobile .mobile-close-button:active {\n transform: scale(0.9);\n}\n\n.dropdown-mode-mobile .mobile-close-button svg {\n width: 24px;\n height: 24px;\n}\n\n/* Mobile search input */\n.dropdown-mode-mobile .mobile-search-input {\n flex: 1;\n min-width: 0;\n box-sizing: border-box;\n background: var(--ty-surface-floating);\n color: var(--ty-text);\n border: 1px solid var(--ty-border-soft);\n border-radius: var(--ty-radius-md);\n font-family: var(--ty-font-sans);\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n font-weight: var(--ty-font-normal);\n padding: var(--ty-spacing-2) var(--ty-spacing-3);\n height: 40px;\n transition: var(--ty-transition-all);\n outline: none;\n border: 2px solid;\n border-color: var(--mobile-border-color);\n}\n\n.dropdown-mode-mobile .mobile-search-input::placeholder {\n color: var(--ty-text-faint);\n}\n\n/* Mobile options container - floating card with elevation */\n.dropdown-mode-mobile .mobile-options-container {\n position: relative;\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n background: var(--ty-surface-floating); /* Floating card background */\n border-radius: var(--ty-radius-lg);\n border: 1px solid var(--ty-border-soft);\n box-shadow: \n 0 20px 25px -5px rgba(0, 0, 0, 0.1),\n 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n border: 2px solid;\n border-color: var(--mobile-border-color);\n}\n\n/* Hide scrollbar but keep functionality */\n.dropdown-mode-mobile .mobile-options-container {\n scrollbar-width: none; /* Firefox */\n -ms-overflow-style: none; /* IE/Edge */\n}\n\n.dropdown-mode-mobile .mobile-options-container::-webkit-scrollbar {\n display: none; /* Chrome, Safari, Opera */\n}\n\n/* Mobile option styling - native <option> only */\n.dropdown-mode-mobile .mobile-options-container ::slotted(option) {\n display: block;\n padding: var(--ty-spacing-2) var(--ty-spacing-3);\n margin: 2px 8px;\n color: var(--ty-text);\n cursor: pointer;\n transition: var(--ty-transition-all);\n border: none;\n background: transparent;\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n font-family: inherit;\n width: calc(100% - 16px);\n text-align: left;\n box-sizing: border-box;\n border-radius: var(--ty-radius-sm);\n min-height: 36px;\n}\n\n.dropdown-mode-mobile .mobile-options-container ::slotted(option:active) {\n background-color: var(--ty-bg-neutral-soft);\n}\n\n.dropdown-mode-mobile .mobile-options-container ::slotted(option[highlighted]) {\n background-color: var(--ty-bg-primary-soft);\n color: var(--ty-color-primary-mild);\n}\n\n.dropdown-mode-mobile .mobile-options-container ::slotted(option[selected]) {\n background: var(--ty-bg-primary);\n color: var(--ty-color-primary-strong);\n}\n\n.dropdown-mode-mobile .mobile-options-container ::slotted(option[hidden]),\n.dropdown-mode-mobile .mobile-options-container ::slotted(ty-option[hidden]),\n.dropdown-mode-mobile .mobile-options-container ::slotted(ty-tag[hidden]) {\n display: none;\n}\n\n/* ==================== FLAVOR VARIANTS ==================== */\n/* Apply to both modes */\n\n:host([flavor="primary"]) .dropdown-stub,\n:host([flavor="primary"]) .dropdown-search-input {\n border-color: var(--ty-color-primary);\n}\n\n:host([flavor="primary"]) .dropdown-stub:hover,\n:host([flavor="primary"]) .dropdown-search-input:focus {\n border-color: var(--ty-color-primary-mild);\n box-shadow: 0 0 0 3px var(--ty-color-primary-faint);\n}\n\n:host([flavor="secondary"]) .dropdown-stub,\n:host([flavor="secondary"]) .dropdown-search-input {\n border-color: var(--ty-color-secondary);\n}\n\n:host([flavor="secondary"]) .dropdown-stub:hover,\n:host([flavor="secondary"]) .dropdown-search-input:focus {\n border-color: var(--ty-color-secondary-mild);\n box-shadow: 0 0 0 3px var(--ty-color-secondary-faint);\n}\n\n:host([flavor="success"]) .dropdown-stub,\n:host([flavor="success"]) .dropdown-search-input {\n border-color: var(--ty-color-success);\n}\n\n:host([flavor="success"]) .dropdown-stub:hover,\n:host([flavor="success"]) .dropdown-search-input:focus {\n border-color: var(--ty-color-success-mild);\n box-shadow: 0 0 0 3px var(--ty-color-success-faint);\n}\n\n:host([flavor="danger"]) .dropdown-stub,\n:host([flavor="danger"]) .dropdown-search-input {\n border-color: var(--ty-color-danger);\n}\n\n:host([flavor="danger"]) .dropdown-stub:hover,\n:host([flavor="danger"]) .dropdown-search-input:focus {\n border-color: var(--ty-color-danger-mild);\n box-shadow: 0 0 0 3px var(--ty-color-danger-faint);\n}\n\n:host([flavor="warning"]) .dropdown-stub,\n:host([flavor="warning"]) .dropdown-search-input {\n border-color: var(--ty-color-warning);\n}\n\n:host([flavor="warning"]) .dropdown-stub:hover,\n:host([flavor="warning"]) .dropdown-search-input:focus {\n border-color: var(--ty-color-warning-mild);\n box-shadow: 0 0 0 3px var(--ty-color-warning-faint);\n}\n\n/* ==================== READONLY STATE ==================== */\n\n:host([readonly]) .dropdown-chevron {\n display: none;\n}\n\n:host([readonly]) .dropdown-stub {\n padding-right: var(--ty-spacing-3);\n}\n\n:host([readonly]) .dropdown-stub,\n:host([readonly]) .dropdown-stub slot[name="selected"] {\n cursor: initial;\n}\n\n/* ==================== LOADING STATE ====================\n Spinner overlay shown inside the popup options area while\n the parent (external-search mode) is fetching results.\n Search input stays usable so users can keep refining.\n\n Carries its own surface (background + radius + subtle border)\n so it stays visible even when the host has restyled the popup\n with a transparent or unusual background.\n Override with --ty-loader-bg / --ty-loader-radius / --ty-loader-border\n on the host element.\n*/\n.dropdown-loading {\n display: none;\n align-items: center;\n justify-content: center;\n gap: var(--ty-spacing-2);\n padding: var(--ty-spacing-4) var(--ty-spacing-3);\n color: var(--ty-text-soft);\n font-size: var(--ty-font-sm);\n min-height: 4rem;\n /* Match the .dropdown-options popup look — same background, border, radius, shadow */\n background: var(--ty-loader-bg, var(--input-bg, var(--ty-input-bg)));\n border: 1px solid var(--ty-loader-border, var(--input-border, var(--ty-input-border)));\n border-radius: var(--ty-loader-radius, var(--ty-radius-lg));\n box-shadow: var(--ty-loader-shadow, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04));\n box-sizing: border-box;\n}\n\n.dropdown-options-wrapper.loading .dropdown-loading {\n display: flex;\n}\n\n/* Make the loading slot transparent for layout so default fallback (spinner + text)\n AND user-provided slotted content both act as direct flex children of .dropdown-loading. */\n.dropdown-loading > slot[name="loading"] {\n display: contents;\n}\n\n/* Mobile: full-screen dialog is the surface — drop the card chrome,\n stack vertically, scale up so it feels native to a fullscreen view.\n Slotted content adapts automatically since the slot is display:contents. */\n.dropdown-mode-mobile .dropdown-loading {\n background: transparent;\n border: none;\n box-shadow: none;\n flex: 1;\n flex-direction: column;\n gap: var(--ty-spacing-3);\n padding: var(--ty-spacing-8) var(--ty-spacing-4);\n min-height: 12rem;\n}\n\n.dropdown-mode-mobile .dropdown-loading-spinner {\n width: 2rem;\n height: 2rem;\n}\n\n.dropdown-mode-mobile .dropdown-loading-text {\n font-size: var(--ty-font-base);\n}\n\n.dropdown-options-wrapper.loading .dropdown-options,\n.dropdown-options-wrapper.loading > slot#options-slot {\n display: none;\n}\n\n.dropdown-loading-spinner {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 1.125rem;\n height: 1.125rem;\n flex-shrink: 0;\n animation: ty-dropdown-spin 0.7s linear infinite;\n color: var(--ty-color-primary);\n}\n\n.dropdown-loading-spinner svg {\n width: 100%;\n height: 100%;\n}\n\n.dropdown-loading-text {\n color: var(--ty-text-soft);\n}\n\n@keyframes ty-dropdown-spin {\n to { transform: rotate(360deg); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .dropdown-loading-spinner {\n animation-duration: 1.6s;\n }\n}\n\n/* Custom scrollbar styles */\n${yn}\n`;let St=0;const Et=new WeakMap,Tt='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-asterisk"><path d="M12 6v12"/><path d="M17.196 9 6.804 15"/><path d="m6.804 9 10.392 6"/></svg>',Mt='<svg viewBox="0 0 20 20" fill="currentColor">\n <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />\n</svg>',Dt=class extends o{constructor(){super(),this.N="",this.nt="Select an option...",this.tt="",this.R=!1,this.et=!1,this.ot=!1,this.it=!1,this.rt=!0,this.st=!1,this.lt="md",this.dt={open:!1,search:"",highlightedIndex:-1,filteredOptions:[],currentValue:null,mode:"desktop"},this.ct=null,this.ht=null,this.ut=null,this.gt=null,this.bt=null,this.vt=null,this.yt=null,this.ft=null,this.wt=0,this.xt=null,this.kt=null,this.zt=null,r(this.shadowRoot,{css:Ct,id:"ty-dropdown"})}render(){this.dt.mode=B()?"mobile":"desktop","mobile"===this.dt.mode?this.renderMobile():this.renderDesktop(),this.applyLoadingState()}onConnect(){this.initializeState(),this.zt=new MutationObserver(()=>this.redisplaySelected()),this.zt.observe(this,{childList:!0})}onDisconnect(){const n=this.tyOutsideClickHandler;n&&(document.removeEventListener("click",n),this.tyOutsideClickHandler=null),null!==this.xt&&(clearTimeout(this.xt),this.xt=null),this.Ct(),this.zt&&(this.zt.disconnect(),this.zt=null)}redisplaySelected(){const n=this.dt.currentValue;if(!n)return;const t=this.getOptions().find(t=>this.getOptionData(t).value===n);if(!t||t.hasAttribute("selected"))return;this.clearSelection();const e=t.cloneNode(!0);e.setAttribute("slot","selected"),e.setAttribute("cloned","true"),t.parentNode.appendChild(e),t.setAttribute("selected",""),this.updateSelectionDisplay()}onPropertiesChanged(n){for(const{name:t,newValue:e}of n)switch(t){case"value":this.N=e||"",this.dt.currentValue=e||null,this.syncSelectedOption();break;case"placeholder":this.nt=e||"Select an option...",this.updatePlaceholderInDOM();break;case"label":this.tt=e||"";break;case"disabled":this.R=e;break;case"readonly":this.et=e;break;case"required":this.ot=e;break;case"externalSearch":this.it=e;break;case"clearable":this.rt=e,this.updateClearButton();break;case"size":this.lt=e;break;case"debounce":this.wt=e;break;case"loading":this.st=e,this.applyLoadingState()}}applyLoadingState(){const n=this.shadowRoot;if(!n)return;const t=this.st?l():null;n.querySelectorAll(".dropdown-options-wrapper").forEach(n=>{if(n.classList.toggle("loading",this.st),this.st){n.setAttribute("aria-busy","true");const e=n.querySelector(".dropdown-loading-spinner");e&&t&&(e.innerHTML=t)}else n.removeAttribute("aria-busy")})}getFormValue(){return this.dt.currentValue||null}parseValue(n){return n&&"string"==typeof n&&""!==n.trim()?n.trim():null}initializeState(){this.N&&(this.dt.currentValue=this.parseValue(this.N),requestAnimationFrame(()=>{this.syncSelectedOption()})),this.addEventListener("clear-selection",n=>{n.stopPropagation(),this.clearSelection(),this.dt.currentValue=null,this.updateComponentValue(),this.updateSelectionDisplay(),this.dispatchEvent(new CustomEvent("change",{detail:{value:null,text:"",option:null,originalEvent:n},bubbles:!0,composed:!0})),this.dt.open&&"mobile"===this.dt.mode&&this.closeMobileModal()}),this.render()}updatePlaceholderInDOM(){const n=this.shadowRoot,t=n.querySelector(".dropdown-placeholder");t&&(t.textContent=this.nt);const e=n.querySelector(".dropdown-search-input");e&&(e.placeholder=this.nt);const o=n.querySelector(".mobile-search-input");o&&(o.placeholder=this.nt)}getOptions(){const n=this.shadowRoot.querySelector("slot:not([name])");return n?(n.assignedElements?n.assignedElements():[]).filter(n=>{const t=n.tagName;return"OPTION"===t||"TY-OPTION"===t||"TY-TAG"===t}):[]}getOptionData(n){const t=n.tagName;return"OPTION"===t||"TY-OPTION"===t?{value:n.value||n.textContent||"",text:n.textContent||"",element:n}:"TY-TAG"===t?{value:n.getAttribute("value")||n.textContent||"",text:n.textContent||"",element:n}:{value:n.textContent||"",text:n.textContent||"",element:n}}clearSelection(){const n=this.shadowRoot;this.getOptions().forEach(n=>n.removeAttribute("selected"));const t=n.querySelector('slot[name="selected"]');if(t){const n=t.assignedElements?t.assignedElements():[];Array.from(n).filter(n=>n.hasAttribute("cloned")).forEach(n=>n.remove())}}selectOption(n,t){const e=this.getOptionData(n),o=!e.value||""===e.value.trim();if(this.clearSelection(),o)this.dt.currentValue=null;else{const t=n.cloneNode(!0);t.setAttribute("slot","selected"),t.setAttribute("cloned","true"),n.parentNode.appendChild(t),n.setAttribute("selected",""),this.dt.currentValue=e.value}this.updateComponentValue(),this.updateSelectionDisplay(),this.dispatchChangeEvent(n,t)}syncSelectedOption(){const n=this.getOptions(),t=this.dt.currentValue;if(!t)return void this.clearSelection();const e=n.find(n=>this.getOptionData(n).value===t);e&&this.selectOption(e)}updateComponentValue(){const n=this.dt.currentValue;null!==n?this.setAttribute("value",n):this.removeAttribute("value"),this.N=n||""}updateSelectionDisplay(){const n=this.shadowRoot.querySelector(".dropdown-stub");n&&(this.getOptions().some(n=>n.hasAttribute("selected"))?n.classList.add("has-selection"):n.classList.remove("has-selection"),this.updateClearButton())}updateClearButton(){const n=this.shadowRoot.querySelector(".dropdown-clear-btn");n&&(n.style.display=!this.rt||null===this.dt.currentValue||""===this.dt.currentValue||this.R||this.et||this.dt.open||"mobile"===this.dt.mode?"none":"block")}dispatchChangeEvent(n,t){const e=this.getOptionData(n);this.dispatchEvent(new CustomEvent("change",{detail:{value:this.dt.currentValue,text:e.text,option:n,originalEvent:t||null},bubbles:!0,composed:!0}))}filterOptions(n,t){if(!t||""===t.trim())return n;const e=t.toLowerCase();return n.filter(({text:n})=>n.toLowerCase().includes(e))}updateOptionVisibility(n,t){const e=new Set(n.map(n=>n.value));t.forEach(({value:n,element:t})=>{e.has(n)?t.removeAttribute("hidden"):t.setAttribute("hidden","")})}clearHighlights(n){n.forEach(({element:n})=>{n.removeAttribute("highlighted")})}highlightOption(n,t){if(this.clearHighlights(n),t>=0&&n.length>t){const{element:e}=n[t];e.setAttribute("highlighted",""),e.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"})}}setupDesktopEventListeners(){const n=this.shadowRoot,t=n.querySelector(".dropdown-stub"),e=n.querySelector("#options-slot"),o=n.querySelector(".dropdown-search-input");t&&(this.ht=this.handleDesktopStubClick.bind(this),t.addEventListener("click",this.ht)),e&&(this.gt=this.handleDesktopOptionClick.bind(this),e.addEventListener("click",this.gt)),o&&(this.bt=this.handleSearchInput.bind(this),this.vt=this.blockSearchClick.bind(this),o.addEventListener("input",this.bt),o.addEventListener("click",this.vt));const i=n.querySelector(".dropdown-clear-btn");i&&(this.ft=this.handleDesktopClearClick.bind(this),i.addEventListener("click",this.ft)),this.ut=this.handleDesktopOutsideClick.bind(this),this.yt=this.handleDesktopKeyboard.bind(this),document.addEventListener("click",this.ut),document.addEventListener("keydown",this.yt)}lockDropdownScroll(){const n=`dropdown-${this.id||"anon"}-${function(n){let t=Et.get(n);return void 0===t&&(t=++St,Et.set(n,t)),t}(this)}`;this.ct=n,Un(n)}unlockDropdownScroll(){this.ct&&(Gn(this.ct),this.ct=null)}initializeOptionsState(n=!1){const t=this.getOptions().map(n=>this.getOptionData(n)),e=this.dt.currentValue;if(this.dt.filteredOptions=t,n&&e){const n=t.findIndex(n=>n.value===e);this.dt.highlightedIndex=n,0>n||this.highlightOption(t,n)}else this.dt.highlightedIndex=-1}handleStubClickBase(n,t){n.preventDefault(),n.stopPropagation(),this.R||this.et||t()}handleOptionClickBase(n,t){n.preventDefault(),n.stopPropagation();const e=n.target.closest("option, ty-option, ty-tag");e&&(this.selectOption(e,n),this.updateSelectionDisplay(),t())}handleClearClickBase(n,t){n.preventDefault(),n.stopPropagation(),this.clearSelection(),this.dt.currentValue=null,this.updateComponentValue(),this.updateSelectionDisplay(),this.dispatchEvent(new CustomEvent("change",{detail:{value:null,text:"",option:null,originalEvent:n},bubbles:!0,composed:!0})),t&&t()}calculateDesktopPosition(){const n=this.shadowRoot,t=n.querySelector(".dropdown-stub"),e=n.querySelector(".dropdown-dialog");if(!t||!e)return;const o=t.getBoundingClientRect(),i=window.innerHeight,r=window.innerWidth,s=e.getBoundingClientRect(),a=i-o.bottom>=(s.height||200)+8,l=a?o.top-20:i-o.bottom-20,d=o.width+20+20;this.style.setProperty("--dropdown-x",(o.width>r-o.left?Math.max(8,r-o.width-8):o.left-20)+"px"),this.style.setProperty("--dropdown-y",l+"px"),this.style.setProperty("--dropdown-width",d+"px"),this.style.setProperty("--dropdown-offset-x","0px"),this.style.setProperty("--dropdown-offset-y","0px"),this.style.setProperty("--dropdown-padding","20px"),a?(e.classList.add("position-below"),e.classList.remove("position-above")):(e.classList.add("position-above"),e.classList.remove("position-below")),this.style.setProperty("--dropdown-direction",a?"below":"above")}openDesktopDropdown(){const n=this.shadowRoot,t=n.querySelector(".dropdown-dialog");if(!t)return;this.lockDropdownScroll(),t.showModal(),t.classList.add("open"),this.calculateDesktopPosition(),this.dt.open=!0;const e=n.querySelector(".dropdown-chevron");e&&e.classList.add("open");const o=n.querySelector(".dropdown-search-chevron");o&&o.classList.add("open"),this.initializeOptionsState(!0);const i=n.querySelector(".dropdown-search-input");i&&setTimeout(()=>i.focus(),100),this.St(),this.updateClearButton(),this.fireOpenEvent()}closeDesktopDropdown(){const n=this.shadowRoot,t=n.querySelector(".dropdown-dialog");if(!t)return;this.unlockDropdownScroll(),this.Ct(),t.classList.remove("open"),t.classList.remove("position-above"),t.classList.remove("position-below"),t.close(),this.dt.open=!1,this.dt.highlightedIndex=-1;const e=n.querySelector(".dropdown-chevron");e&&e.classList.remove("open");const o=n.querySelector(".dropdown-search-chevron");o&&o.classList.remove("open"),this.it&&(this.dt.search=""),this.updateClearButton(),this.fireCloseEvent()}handleDesktopOutsideClick(n){if(!this.dt.open)return;const t=n.target,e=this.shadowRoot.querySelector(".dropdown-wrapper");e&&e.contains(t)||this.closeDesktopDropdown()}handleSearchInput(n){const t=n.target.value;if(this.dt.search=t,this.it)this.dispatchSearchEvent(t,n);else{const n=this.getOptions().map(n=>this.getOptionData(n)),e=this.filterOptions(n,t);this.dt.filteredOptions=e,this.dt.highlightedIndex=-1,this.updateOptionVisibility(e,n),this.clearHighlights(n)}}blockSearchClick(n){n.stopPropagation(),n.preventDefault()}dispatchSearchEvent(n,t){null!==this.xt&&(clearTimeout(this.xt),this.xt=null),this.wt>0?this.xt=window.setTimeout(()=>{this.fireSearchEvent(n,t),this.xt=null},this.wt):this.fireSearchEvent(n,t)}fireSearchEvent(n,t){this.dispatchEvent(new CustomEvent("search",{detail:{query:n,originalEvent:t||null},bubbles:!0,composed:!0}))}fireOpenEvent(){this.dispatchEvent(new CustomEvent("open",{detail:{mode:this.dt.mode},bubbles:!0,composed:!0})),this.it&&this.fireSearchEvent("")}fireCloseEvent(){this.dispatchEvent(new CustomEvent("close",{detail:{mode:this.dt.mode},bubbles:!0,composed:!0}))}handleDesktopKeyboard(n){if(!this.dt.open)return;const t=this.shadowRoot.querySelector(".dropdown-search-input");if(n.target!==t&&document.activeElement===t)return;const e=this.dt.filteredOptions,o=e.length,i=this.dt.highlightedIndex;switch(n.key){case"Escape":n.preventDefault(),n.stopPropagation(),this.closeDesktopDropdown();break;case"Enter":n.preventDefault(),n.stopPropagation(),i>=0&&o>i&&(this.selectOption(e[i].element,n),this.updateSelectionDisplay(),this.closeDesktopDropdown());break;case"ArrowUp":let t;n.preventDefault(),n.stopPropagation(),t=0===o?-1:-1===i||0===i?o-1:i-1,this.dt.highlightedIndex=t,this.highlightOption(e,t);break;case"ArrowDown":let r;n.preventDefault(),n.stopPropagation(),r=0===o?-1:-1===i||i===o-1?0:i+1,this.dt.highlightedIndex=r,this.highlightOption(e,r)}}handleDesktopStubClick(n){this.handleStubClickBase(n,()=>this.openDesktopDropdown())}handleDesktopOptionClick(n){this.handleOptionClickBase(n,()=>this.closeDesktopDropdown())}handleDesktopClearClick(n){this.handleClearClickBase(n)}St(){if(!vn())return;const n=this.shadowRoot,t=n.querySelector(".dropdown-options"),e=n.querySelector(".dropdown-options-wrapper");t&&e&&(this.Ct(),t.classList.add("ty-custom-scroll"),this.kt=new mn(t,{vertical:!0}),this.kt.trackY&&e.appendChild(this.kt.trackY))}Ct(){this.kt&&(this.kt.trackY?.remove(),this.kt.destroy(),this.kt=null)}buildStubClasses(){const n=[this.lt];return this.R&&n.push("disabled"),this.rt&&n.push("clearable"),n.join(" ")}renderDesktop(){const n=this.shadowRoot;if(!n.querySelector(".dropdown-container")){const t=this.buildStubClasses();n.innerHTML=`\n <div class="dropdown-container dropdown-mode-desktop">\n ${this.tt?`\n <label class="dropdown-label">\n ${this.tt}\n ${this.ot?`<span class="required-icon">${Tt}</span>`:""}\n </label>\n `:""}\n <div class="dropdown-wrapper">\n <div class="dropdown-stub ${t}"\n ${this.R?"disabled":""}>\n <slot name="start"></slot>\n <slot name="selected"></slot>\n <span class="dropdown-placeholder">${this.nt}</span>\n <button class="dropdown-clear-btn" type="button" aria-label="Clear selection">\n <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2">\n <path d="M6 6L14 14M14 6L6 14" stroke-linecap="round" />\n</svg>\n </button>\n <div class="dropdown-chevron">\n ${Mt}\n </div>\n </div>\n <dialog class="dropdown-dialog">\n <div class="dropdown-header">\n <input \n class="dropdown-search-input ${this.lt}" \n type="text"\n placeholder="${this.nt}"\n ${this.R?"disabled":""}\n />\n <div class="dropdown-search-chevron">\n ${Mt}\n </div>\n </div>\n <div class="dropdown-options-wrapper">\n <div class="dropdown-options">\n <slot id="options-slot"></slot>\n </div>\n <div class="dropdown-loading" aria-hidden="true">\n <slot name="loading">\n <span class="dropdown-loading-spinner"></span>\n <span class="dropdown-loading-text">Searching…</span>\n </slot>\n </div>\n </div>\n </dialog>\n </div>\n </div>\n `,this.setupDesktopEventListeners()}const t=n.querySelector(".dropdown-label"),e=n.querySelector(".dropdown-container"),o=n.querySelector(".dropdown-wrapper");if(this.tt){if(t)t.innerHTML=this.tt+(this.ot?'<span class="required-icon">'+Tt+"</span>":""),t.style.display="flex";else if(e&&o){const n=document.createElement("label");n.className="dropdown-label",n.innerHTML=this.tt+(this.ot?'<span class="required-icon">'+Tt+"</span>":""),e.insertBefore(n,o)}}else t&&(t.style.display="none");this.updateSelectionDisplay()}renderMobile(){const n=this.shadowRoot;if(!n.querySelector(".dropdown-container")){const t=this.buildStubClasses();n.innerHTML=`\n <div class="dropdown-container dropdown-mode-mobile">\n ${this.tt?`\n <label class="dropdown-label">\n ${this.tt}\n ${this.ot?`<span class="required-icon">${Tt}</span>`:""}\n </label>\n `:""}\n <div class="dropdown-wrapper">\n <div class="dropdown-stub ${t}"\n ${this.R?"disabled":""}>\n <slot name="start"></slot>\n <slot name="selected"></slot>\n <span class="dropdown-placeholder">${this.nt}</span>\n <div class="dropdown-chevron">\n ${Mt}\n </div>\n </div>\n <dialog class="mobile-dialog">\n <div class="mobile-dialog-content">\n \n <div class="mobile-search-header">\n ${this.tt?`<span class="mobile-header-label">${this.tt}</span>`:""}\n <div class="mobile-header-content">\n <input\n class="mobile-search-input ${this.lt}"\n type="text"\n placeholder="${this.tt?`Search ${this.tt}...`:"Search..."}"\n ${this.R?"disabled":""}\n />\n <button class="mobile-close-button" type="button" aria-label="Close">\n <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">\n <line x1="18" y1="6" x2="6" y2="18"></line>\n <line x1="6" y1="6" x2="18" y2="18"></line>\n </svg>\n </button>\n </div>\n </div>\n \n <div class="mobile-options-container dropdown-options-wrapper">\n <slot id="options-slot"></slot>\n <div class="dropdown-loading" aria-hidden="true">\n <slot name="loading">\n <span class="dropdown-loading-spinner"></span>\n <span class="dropdown-loading-text">Searching…</span>\n </slot>\n </div>\n </div>\n </div>\n </dialog>\n </div>\n </div>\n `,this.setupMobileEventListeners()}this.updateSelectionDisplay()}setupMobileEventListeners(){const n=this.shadowRoot,t=n.querySelector(".dropdown-stub"),e=n.querySelector("#options-slot"),o=n.querySelector(".mobile-search-input"),i=n.querySelector(".mobile-close-button"),r=n.querySelector(".mobile-dialog");t&&t.addEventListener("click",n=>this.handleMobileStubClick(n)),e&&e.addEventListener("click",n=>this.handleMobileOptionClick(n)),o&&o.addEventListener("input",n=>this.handleSearchInput(n)),i&&i.addEventListener("click",()=>this.closeMobileModal()),e&&e.addEventListener("clear-selection",n=>{n.preventDefault(),n.stopPropagation(),this.handleMobileClearClick(n)}),r&&(r.addEventListener("click",n=>{n.target===r&&this.closeMobileModal()}),r.addEventListener("cancel",n=>{n.preventDefault(),this.closeMobileModal()}))}handleMobileStubClick(n){this.handleStubClickBase(n,()=>this.openMobileModal())}handleMobileOptionClick(n){this.handleOptionClickBase(n,()=>this.closeMobileModal())}handleMobileClearClick(n){this.handleClearClickBase(n,()=>this.closeMobileModal())}openMobileModal(){const n=this.shadowRoot,t=n.querySelector(".mobile-dialog");if(!t)return;this.lockDropdownScroll(),t.showModal(),requestAnimationFrame(()=>{t.classList.add("open")}),this.dt.open=!0,this.initializeOptionsState(!1);const e=n.querySelector(".mobile-search-input");e&&setTimeout(()=>e.focus(),300),this.updateClearButton(),this.fireOpenEvent()}closeMobileModal(){const n=this.shadowRoot,t=n.querySelector(".mobile-dialog");if(!t)return;this.unlockDropdownScroll(),t.classList.remove("open"),t.close(),this.dt.open=!1,this.dt.highlightedIndex=-1,this.dt.search="",this.dt.filteredOptions=[];const e=n.querySelector(".mobile-search-input");e&&(e.value=""),this.it||this.getOptions().map(n=>this.getOptionData(n)).forEach(({element:n})=>n.removeAttribute("hidden")),this.updateClearButton(),this.fireCloseEvent()}get value(){return this.getProperty("value")}set value(n){this.setProperty("value",n)}get name(){return this.getProperty("name")}set name(n){this.setProperty("name",n)}get placeholder(){return this.getProperty("placeholder")}set placeholder(n){this.setProperty("placeholder",n)}get label(){return this.getProperty("label")}set label(n){this.setProperty("label",n)}get disabled(){return this.getProperty("disabled")}set disabled(n){this.setProperty("disabled",n)}get readonly(){return this.getProperty("readonly")}set readonly(n){this.setProperty("readonly",n)}get required(){return this.getProperty("required")}set required(n){this.setProperty("required",n)}get externalSearch(){return this.getProperty("externalSearch")}set externalSearch(n){this.setProperty("externalSearch",n)}get clearable(){return this.getProperty("clearable")}set clearable(n){this.setProperty("clearable",n)}get loading(){return this.getProperty("loading")}set loading(n){this.setProperty("loading",n)}get size(){return this.getProperty("size")}set size(n){this.setProperty("size",n)}get flavor(){return this.getProperty("flavor")}set flavor(n){this.setProperty("flavor",n)}get debounce(){return this.getProperty("debounce")}set debounce(n){this.setProperty("debounce",n)}get form(){return this.m.form}};Dt.properties={value:{type:"string",visual:!0,formValue:!0,emitChange:!0,default:""},name:{type:"string",default:""},placeholder:{type:"string",visual:!0,default:"Select an option..."},label:{type:"string",visual:!0,default:""},disabled:{type:"boolean",visual:!0,default:!1},readonly:{type:"boolean",visual:!0,default:!1},required:{type:"boolean",visual:!0,default:!1},externalSearch:{type:"boolean",visual:!0,default:!1,aliases:{"external-search":!0}},clearable:{type:"boolean",visual:!0,default:!0,aliases:{"not-clearable":!1}},size:{type:"string",visual:!0,default:"md",validate:n=>["xs","sm","md","lg","xl"].includes(n),coerce:n=>["xs","sm","md","lg","xl"].includes(n)?n:"md"},flavor:{type:"string",visual:!0,default:"neutral",validate:n=>["primary","secondary","success","danger","warning","neutral"].includes(n),coerce:n=>["primary","secondary","success","danger","warning","neutral"].includes(n)?n:"neutral"},debounce:{type:"number",default:0,validate:n=>n>=0&&5e3>=n,coerce:n=>{const t=+n;return isNaN(t)?0:Math.max(0,Math.min(5e3,t))}},loading:{type:"boolean",visual:!0,default:!1}};let $t=Dt;customElements.get("ty-dropdown")||customElements.define("ty-dropdown",$t);const At=`\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 - Labels, not buttons ===== */\n\n.dropdown-mode-mobile .section-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 36px;\n flex-shrink: 0;\n padding: 0 16px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.06em;\n color: var(--ty-text-mild);\n background: transparent;\n cursor: default;\n user-select: none;\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: 500;\n color: var(--ty-text-faint);\n margin-left: 0.25rem;\n}\n\n/* ===== SELECTED STRIP - pinned, capped height, collapses when empty ===== */\n\n.dropdown-mode-mobile .mobile-selected-section {\n display: flex;\n flex-direction: column;\n background: var(--ty-input-bg);\n overflow: hidden;\n flex: 0 0 auto;\n max-height: 40%;\n transition: max-height 200ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Empty: collapse to header only */\n.dropdown-mode-mobile .mobile-selected-section[data-empty="true"] {\n max-height: 36px;\n flex: 0 0 36px;\n}\n\n.dropdown-mode-mobile .mobile-selected-section .section-content {\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n overscroll-behavior: contain;\n padding: 0.75rem 1rem;\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n align-content: flex-start;\n /* Soft fade at bottom edge — hints at scrollable overflow */\n -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 12px), transparent);\n mask-image: linear-gradient(to bottom, black calc(100% - 12px), transparent);\n}\n\n/* ===== AVAILABLE LIST - takes remaining space ===== */\n\n.dropdown-mode-mobile .mobile-available-section {\n display: flex;\n flex-direction: column;\n background: var(--ty-input-bg);\n overflow: hidden;\n flex: 1 1 auto;\n min-height: 0;\n}\n\n.dropdown-mode-mobile .mobile-available-section .section-content {\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n overscroll-behavior: contain;\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 Selected strip collapses (no text needed).\n Available shows the empty message only when there are zero tags total. */\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.dropdown-mode-mobile .mobile-available-section[data-empty="true"] .empty-state {\n display: block;\n}\n\n.dropdown-mode-mobile .mobile-selected-section[data-empty="true"] .section-content,\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 /* Fade + scale entry — replays on each (re)insertion when a tag moves\n between selected and available slots */\n animation: ty-multiselect-tag-enter 180ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n@media (hover: hover) {\n .dropdown-mode-mobile .section-content ::slotted(ty-tag:hover) {\n transform: scale(1.02);\n }\n}\n\n.dropdown-mode-mobile .section-content ::slotted(ty-tag:active) {\n transform: scale(0.96);\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@keyframes ty-multiselect-tag-enter {\n from { opacity: 0; transform: scale(0.85); }\n to { opacity: 1; transform: scale(1); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .dropdown-mode-mobile .section-content ::slotted(ty-tag) {\n animation: none;\n }\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-soft);\n font-size: var(--ty-font-sm);\n min-height: 4rem;\n /* Match the .dropdown-options popup look — same background, border, radius, shadow */\n background: var(--ty-loader-bg, var(--input-bg, var(--ty-input-bg)));\n border: 1px solid var(--ty-loader-border, var(--input-border, var(--ty-input-border)));\n border-radius: var(--ty-loader-radius, var(--ty-radius-lg));\n box-shadow: var(--ty-loader-shadow, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04));\n box-sizing: border-box;\n}\n\n.dropdown-options-wrapper.loading .dropdown-loading {\n display: flex;\n}\n\n/* Slot is transparent for layout — fallback (spinner + text) and user-provided\n slotted content both act as direct flex children of .dropdown-loading. */\n.dropdown-loading > slot[name="loading"] {\n display: contents;\n}\n\n/* Mobile: full-screen dialog is the surface — drop the card chrome,\n stack vertically, scale up so it feels native to a fullscreen view.\n Slotted content adapts automatically since the slot is display:contents. */\n.dropdown-mode-mobile .dropdown-loading {\n background: transparent;\n border: none;\n box-shadow: none;\n flex: 1;\n flex-direction: column;\n gap: var(--ty-spacing-3);\n padding: var(--ty-spacing-8) var(--ty-spacing-4);\n min-height: 12rem;\n}\n\n.dropdown-mode-mobile .dropdown-loading-spinner {\n width: 2rem;\n height: 2rem;\n}\n\n.dropdown-mode-mobile .dropdown-loading-text {\n font-size: var(--ty-font-base);\n}\n\n.dropdown-options-wrapper.loading .dropdown-options,\n.dropdown-options-wrapper.loading > slot#options-slot,\n.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-soft);\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${yn}\n`;let It=0;const Ot=new WeakMap;function Lt(n){let t=Ot.get(n);return void 0===t&&(t=++It,Ot.set(n,t)),t}const Nt='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-asterisk"><path d="M12 6v12"/><path d="M17.196 9 6.804 15"/><path d="m6.804 9 10.392 6"/></svg>',qt='<svg viewBox="0 0 20 20" fill="currentColor">\n <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />\n</svg>',Rt=class extends o{constructor(){super(),this.Et="",this.nt="Select options...",this.tt="",this.R=!1,this.et=!1,this.ot=!1,this.it=!1,this.st=!1,this.ct=null,this.lt="md",this.Tt="Selected",this.Mt="Available",this.Dt="No options available",this.dt={open:!1,search:"",highlightedIndex:-1,filteredTags:[],selectedValues:[],mode:"desktop"},this.ht=null,this.$t=null,this.At=null,this.bt=null,this.vt=null,this.yt=null,this.wt=0,this.xt=null,this.kt=null,this.zt=null,r(this.shadowRoot,{css:At,id:"ty-multiselect"})}onConnect(){this.shadowRoot.querySelectorAll("dialog").forEach(n=>{n.open&&n.close()}),this.render(),requestAnimationFrame(()=>{this.initializeState()}),this.zt=new MutationObserver(()=>{this.dt.selectedValues.length>0&&this.syncSelectedTags(this.dt.selectedValues)}),this.zt.observe(this,{childList:!0})}onDisconnect(){this.shadowRoot.querySelectorAll("dialog").forEach(n=>{n.open&&n.close()}),this.yt&&(document.removeEventListener("keydown",this.yt),this.yt=null),null!==this.xt&&(clearTimeout(this.xt),this.xt=null),this.Ct(),this.zt&&(this.zt.disconnect(),this.zt=null)}onPropertiesChanged(n){for(const{name:t,newValue:e}of n)switch(t){case"value":const n=this.parseValue(e);this.dt.selectedValues=n,this.isConnected&&this.shadowRoot&&(this.syncSelectedTags(n),this.updateSelectionDisplay(),this.updateMobileSelectedState());break;case"name":this.Et=e||"";break;case"placeholder":this.nt=e||"Select options...";break;case"label":this.tt=e||"";break;case"disabled":this.R=e;break;case"readonly":this.et=e;break;case"required":this.ot=e;break;case"externalSearch":this.it=e;break;case"size":this.lt=e;break;case"debounce":this.wt=e;break;case"selected-label":this.Tt=e||"Selected";break;case"available-label":this.Mt=e||"Available";break;case"no-options-message":this.Dt=e||"No options available";break;case"loading":this.st=e,this.applyLoadingState()}}applyLoadingState(){const n=this.shadowRoot;if(!n)return;const t=this.st?l():null;n.querySelectorAll(".dropdown-options-wrapper").forEach(n=>{if(n.classList.toggle("loading",this.st),this.st){n.setAttribute("aria-busy","true");const e=n.querySelector(".dropdown-loading-spinner");e&&t&&(e.innerHTML=t)}else n.removeAttribute("aria-busy")})}getFormValue(){const n=this.dt.selectedValues;if(this.Et&&n.length>0){const t=new FormData;return n.forEach(n=>{t.append(this.Et,n)}),t}return null}parseValue(n){return n&&"string"==typeof n&&""!==n.trim()?n.split(",").map(n=>n.trim()).filter(n=>""!==n):[]}initializeState(){const n=this.getProperty("value")||"";if(n){const t=this.parseValue(n);this.dt.selectedValues=t,this.syncSelectedTags(t),this.updateSelectionDisplay(),this.updateMobileSelectedState()}else{const n=this.getTagElements().filter(n=>n.hasAttribute("selected")).map(n=>this.getTagData(n).value);n.length>0&&this.updateComponentValue(n,!1)}}getTagElements(){return Array.from(this.querySelectorAll("ty-tag"))}getTagData(n){return{value:n.value||n.getAttribute("value")||n.textContent||"",text:n.textContent||"",element:n}}selectTag(n){this.getTagData(n),n.setAttribute("selected",""),n.setAttribute("slot","selected"),n.setAttribute("dismissible","true");const t=n.parentNode;t&&(t.removeChild(n),t.appendChild(n))}deselectTag(n){n.removeAttribute("selected"),n.removeAttribute("slot"),n.removeAttribute("dismissible");const t=n.parentNode;t&&(t.removeChild(n),t.appendChild(n))}getSelectedValues(){return this.getTagElements().filter(n=>n.hasAttribute("selected")).map(n=>this.getTagData(n).value).filter(n=>""!==n)}allTagsSelected(){const n=this.getTagElements();return 0!==n.length&&n.filter(n=>n.hasAttribute("selected")).length===n.length}syncSelectedTags(n){const t=new Set(n);this.getTagElements().forEach(n=>{const e=this.getTagData(n).value,o=t.has(e),i=n.hasAttribute("selected");o&&!i?this.selectTag(n):!o&&i&&this.deselectTag(n)})}updateComponentValue(n,t=!1,e="set",o=null){const i=this.getSelectedValues(),r=n.join(",");JSON.stringify(n.sort())!==JSON.stringify(i.sort())&&(this.setProperty("value",r),t&&this.dispatchChangeEvent({values:n,action:e,item:o}))}calculatePosition(){const n=this.shadowRoot,t=n.querySelector(".multiselect-stub"),e=n.querySelector(".dropdown-dialog");if(!t||!e)return;const o=t.getBoundingClientRect(),i=window.innerHeight,r=window.innerWidth,s=e.getBoundingClientRect(),a=i-o.bottom>=(s.height||200)+8,l=a?o.top-20:i-o.bottom-20,d=o.width+20+20;this.style.setProperty("--dropdown-x",(o.width>r-o.left?Math.max(8,r-o.width-8):o.left-20)+"px"),this.style.setProperty("--dropdown-y",l+"px"),this.style.setProperty("--dropdown-width",d+"px"),this.style.setProperty("--dropdown-offset-x","0px"),this.style.setProperty("--dropdown-offset-y","0px"),this.style.setProperty("--dropdown-padding","20px"),a?(e.classList.add("position-below"),e.classList.remove("position-above")):(e.classList.add("position-above"),e.classList.remove("position-below")),this.style.setProperty("--dropdown-direction",a?"below":"above")}St(){if(!vn())return;const n=this.shadowRoot,t=n.querySelector(".dropdown-options"),e=n.querySelector(".dropdown-options-wrapper");t&&e&&(this.Ct(),t.classList.add("ty-custom-scroll"),this.kt=new mn(t,{vertical:!0}),this.kt.trackY&&e.appendChild(this.kt.trackY))}Ct(){this.kt&&(this.kt.trackY?.remove(),this.kt.destroy(),this.kt=null)}openDropdown(){const n=this.shadowRoot,t=n.querySelector(".dropdown-dialog");if(!t)return;const e=`multiselect-${this.id||"anon"}-${Lt(this)}`;this.ct=e,Un(e),t.showModal(),t.classList.add("open"),this.calculatePosition(),this.dt.open=!0;const o=n.querySelector(".dropdown-chevron");o&&o.classList.add("open");const i=n.querySelector(".dropdown-search-chevron");i&&i.classList.add("open");const r=this.getTagElements().map(n=>this.getTagData(n));this.dt.filteredTags=r,this.dt.highlightedIndex=-1,this.updateOptionsVisibility(!0),this.St();const s=n.querySelector(".dropdown-search-input");s&&setTimeout(()=>s.focus(),100),this.fireOpenEvent()}closeDropdown(){const n=this.shadowRoot,t=n.querySelector(".dropdown-dialog");if(!t)return;this.Ct(),t.classList.remove("open"),t.classList.remove("position-above"),t.classList.remove("position-below"),t.close(),this.ct&&(Gn(this.ct),this.ct=null),this.dt.open=!1,this.dt.highlightedIndex=-1;const e=n.querySelector(".dropdown-chevron");e&&e.classList.remove("open");const o=n.querySelector(".dropdown-search-chevron");o&&o.classList.remove("open");const i=""!==this.dt.search;this.dt.search="";const r=n.querySelector(".dropdown-search-input");if(r&&(r.value=""),this.it)i&&(null!==this.xt&&(clearTimeout(this.xt),this.xt=null),this.fireSearchEvent(""));else{const n=this.getTagElements().map(n=>this.getTagData(n));this.dt.filteredTags=n,this.updateTagVisibility(n,n),this.clearHighlights(n)}this.fireCloseEvent()}openMobileModal(){const n=this.shadowRoot,t=n.querySelector(".mobile-dialog");if(!t)return;const e=`multiselect-${this.id||"anon"}-${Lt(this)}`;this.ct=e,Un(e),t.showModal(),t.classList.add("open");const o=n.querySelector("#stub-slot"),i=n.querySelector("#mobile-slot");o.name="selected-blocked",i.name="selected",this.dt.open=!0;const r=this.getTagElements().map(n=>this.getTagData(n));this.dt.filteredTags=r;const s=n.querySelector(".mobile-search-input");s&&setTimeout(()=>s.focus(),100),requestAnimationFrame(()=>{this.updateMobileSelectedState()}),this.fireOpenEvent()}closeMobileModal(){const n=this.shadowRoot,t=n.querySelector(".mobile-dialog");if(!t)return;t.classList.remove("open"),t.close(),this.ct&&(Gn(this.ct),this.ct=null);const e=n.querySelector("#stub-slot"),o=n.querySelector("#mobile-slot");e.name="selected",o.name="selected-blocked",this.dt.open=!1,this.dt.highlightedIndex=-1;const i=""!==this.dt.search;this.dt.search="";const r=n.querySelector(".mobile-search-input");r&&(r.value=""),this.it?i&&(null!==this.xt&&(clearTimeout(this.xt),this.xt=null),this.fireSearchEvent("")):this.getTagElements().forEach(n=>n.removeAttribute("hidden")),this.fireCloseEvent()}handleStubClick(n){n.preventDefault(),n.stopPropagation(),this.R||this.et||this.allTagsSelected()||this.openDropdown()}handleTagClick(n){const t=n.target,e="TY-TAG"===t.tagName?t:t.closest("ty-tag");if(!e||e.hasAttribute("disabled"))return;if(e.hasAttribute("selected"))return;n.preventDefault(),n.stopPropagation();const o=this.getTagData(e).value,i=[...this.getSelectedValues(),o];this.updateComponentValue(i,!0,"add",o),this.allTagsSelected()&&("desktop"===this.dt.mode?this.closeDropdown():this.closeMobileModal())}handleTagDismiss(n){n.preventDefault(),n.stopPropagation();const t=n,e=t.detail?.target;if(!e)return;const o=this.getTagData(e).value,i=this.getSelectedValues().filter(n=>n!==o);this.updateComponentValue(i,!0,"remove",o)}blockSearchClick(n){n.stopPropagation(),n.preventDefault()}handleSearchInput(n){const t=n.target.value;if(this.dt.search=t,this.it)return void this.dispatchSearchEvent(t);const e=this.getTagElements().map(n=>this.getTagData(n)),o=e.filter(n=>!n.element.hasAttribute("selected")),i=this.filterTags(o,t);this.dt.filteredTags=i,this.dt.highlightedIndex=-1,this.updateTagVisibility(i,e),this.updateOptionsVisibility(i.length>0),this.updateMobileSelectedState(),this.clearHighlights(e)}handleKeyboard(n){if(!this.dt.open)return;const t=this.shadowRoot.querySelector(".dropdown-search-input");if(n.target!==t&&document.activeElement===t)return;const e=this.dt.filteredTags,o=e.length,i=this.dt.highlightedIndex;switch(n.key){case"Escape":n.preventDefault(),n.stopPropagation(),this.closeDropdown();break;case"Enter":n.preventDefault(),n.stopPropagation(),i>=0&&o>i&&this.handleTagClick({target:e[i].element});break;case"ArrowUp":let t;n.preventDefault(),n.stopPropagation(),t=0===o?-1:-1===i||0===i?o-1:i-1,this.dt.highlightedIndex=t,this.highlightTag(e,t);break;case"ArrowDown":let r;n.preventDefault(),n.stopPropagation(),r=0===o?-1:-1===i||i===o-1?0:i+1,this.dt.highlightedIndex=r,this.highlightTag(e,r)}}filterTags(n,t){if(!t||""===t.trim())return n;const e=t.toLowerCase();return n.filter(({text:n})=>n.toLowerCase().includes(e))}updateTagVisibility(n,t){const e=new Set(n.map(n=>n.value));t.forEach(({value:n,element:t})=>{e.has(n)?t.removeAttribute("hidden"):t.setAttribute("hidden","")})}updateOptionsVisibility(n){const t=this.shadowRoot.querySelector(".dropdown-options");t&&(t.style.display=n?"":"none")}clearHighlights(n){n.forEach(({element:n})=>{n.removeAttribute("highlighted")})}highlightTag(n,t){if(this.clearHighlights(n),t>=0&&n.length>t){const{element:e}=n[t];e.setAttribute("highlighted",""),e.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"})}}dispatchSearchEvent(n){null!==this.xt&&(clearTimeout(this.xt),this.xt=null),this.wt>0?this.xt=window.setTimeout(()=>{this.fireSearchEvent(n),this.xt=null},this.wt):this.fireSearchEvent(n)}fireSearchEvent(n){this.dispatchEvent(new CustomEvent("search",{detail:{query:n,element:this},bubbles:!0,composed:!0}))}fireOpenEvent(){this.dispatchEvent(new CustomEvent("open",{detail:{mode:this.dt.mode,element:this},bubbles:!0,composed:!0})),this.it&&this.fireSearchEvent("")}fireCloseEvent(){this.dispatchEvent(new CustomEvent("close",{detail:{mode:this.dt.mode,element:this},bubbles:!0,composed:!0}))}dispatchChangeEvent(n){this.dispatchEvent(new CustomEvent("change",{detail:n,bubbles:!0,cancelable:!0}))}render(){this.dt.mode=B()?"mobile":"desktop","mobile"===this.dt.mode?this.renderMobile():this.renderDesktop(),this.applyLoadingState()}setupEventListeners(){const n=this.shadowRoot,t=n.querySelector(".multiselect-stub"),e=n.querySelector("#options-slot"),o=n.querySelector(".dropdown-search-input");t&&(this.ht=this.handleStubClick.bind(this),t.addEventListener("click",this.ht)),e&&(this.$t=this.handleTagClick.bind(this),e.addEventListener("click",this.$t)),o&&(this.bt=this.handleSearchInput.bind(this),this.vt=this.blockSearchClick.bind(this),o.addEventListener("input",this.bt),o.addEventListener("click",this.vt));const i=n.querySelector(".dropdown-dialog");i&&i.addEventListener("click",n=>{n.target===i&&this.closeDropdown()}),this.yt=this.handleKeyboard.bind(this),document.addEventListener("keydown",this.yt),this.At=this.handleTagDismiss.bind(this),this.addEventListener("dismiss",this.At)}buildStubClasses(){const n=[this.lt];return this.R&&n.push("disabled"),n.join(" ")}renderDesktop(){const n=this.shadowRoot;if(!n.querySelector(".multiselect-container")){const t=this.buildStubClasses();n.innerHTML=`\n <div class="multiselect-container dropdown-mode-desktop">\n ${this.tt?`\n <label class="dropdown-label">\n ${this.tt}\n ${this.ot?`<span class="required-icon">${Nt}</span>`:""}\n </label>\n `:""}\n <div class="dropdown-wrapper">\n <div class="dropdown-stub multiselect-stub ${t}"\n ${this.R?"disabled":""}>\n <slot name="start"></slot>\n <div class="multiselect-chips">\n <slot name="selected"></slot>\n </div>\n <span class="dropdown-placeholder">${this.nt}</span>\n <div class="dropdown-chevron">\n ${qt}\n </div>\n </div>\n <dialog class="dropdown-dialog">\n <div class="dropdown-header">\n <input \n class="dropdown-search-input ${this.lt}" \n type="text"\n placeholder="Search..."\n ${this.R?"disabled":""}\n />\n <div class="dropdown-search-chevron">\n ${qt}\n </div>\n </div>\n <div class="dropdown-options-wrapper">\n <div class="dropdown-options">\n <slot id="options-slot"></slot>\n </div>\n <div class="dropdown-loading" aria-hidden="true">\n <slot name="loading">\n <span class="dropdown-loading-spinner"></span>\n <span class="dropdown-loading-text">Searching…</span>\n </slot>\n </div>\n </div>\n </dialog>\n </div>\n </div>\n `,this.setupEventListeners()}this.updateSelectionDisplay()}renderMobile(){const n=this.shadowRoot;if(!n.querySelector(".multiselect-container")){const t=this.buildStubClasses();n.innerHTML=`\n <div class="multiselect-container dropdown-mode-mobile">\n ${this.tt?`\n <label class="dropdown-label">\n ${this.tt}\n ${this.ot?`<span class="required-icon">${Nt}</span>`:""}\n </label>\n `:""}\n <div class="dropdown-wrapper">\n <div class="dropdown-stub multiselect-stub ${t}"\n ${this.R?"disabled":""}>\n <slot name="start"></slot>\n <div class="multiselect-chips">\n <slot id="stub-slot" name="selected"></slot>\n </div>\n <span class="dropdown-placeholder">${this.nt}</span>\n <div class="dropdown-chevron">\n ${qt}\n </div>\n </div>\n\n <dialog class="mobile-dialog">\n <div class="mobile-dialog-content">\n \n \x3c!-- HEADER (matches dropdown.ts) --\x3e\n \n <div class="mobile-search-header">\n ${this.tt?`<span class="mobile-header-label">${this.tt}</span>`:""}\n <div class="mobile-header-content">\n <input\n class="mobile-search-input ${this.lt}"\n type="text"\n placeholder="${this.tt?`Search ${this.tt}...`:"Search..."}"\n ${this.R?"disabled":""}\n />\n <button class="mobile-close-button" type="button" aria-label="Close">\n <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">\n <line x1="18" y1="6" x2="6" y2="18"></line>\n <line x1="6" y1="6" x2="18" y2="18"></line>\n </svg>\n </button>\n </div>\n </div>\n \n \n \x3c!-- BODY: pinned selected strip + filter list --\x3e\n <div class="mobile-body">\n\n \x3c!-- SELECTED STRIP (pinned, collapses when empty) --\x3e\n <div class="mobile-selected-section" data-empty="true">\n <div class="section-header">\n <span class="section-title">${this.Tt} <span class="section-count">(0)</span></span>\n </div>\n <div class="section-content">\n <slot id="mobile-slot" name="selected"></slot>\n </div>\n </div>\n\n \x3c!-- AVAILABLE LIST (always visible, takes remaining space) --\x3e\n <div class="mobile-available-section" data-empty="false">\n <div class="section-header">\n <span class="section-title">${this.Mt}</span>\n </div>\n <div class="section-content dropdown-options-wrapper">\n <slot id="options-slot"></slot>\n <div class="empty-state">${this.Dt}</div>\n <div class="dropdown-loading" aria-hidden="true">\n <slot name="loading">\n <span class="dropdown-loading-spinner"></span>\n <span class="dropdown-loading-text">Searching…</span>\n </slot>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </dialog>\n </div>\n </div>\n `,this.setupMobileEventListeners()}this.updateSelectionDisplay()}setupMobileEventListeners(){const n=this.shadowRoot,t=n.querySelector(".multiselect-stub"),e=n.querySelector("#options-slot"),o=n.querySelector(".mobile-search-input"),i=n.querySelector(".mobile-close-button"),r=n.querySelector(".mobile-dialog");t&&t.addEventListener("click",n=>this.handleMobileStubClick(n)),e&&e.addEventListener("click",n=>this.handleMobileTagClick(n)),o&&o.addEventListener("input",n=>this.handleSearchInput(n)),i&&i.addEventListener("click",()=>this.closeMobileModal()),this.At=this.handleTagDismiss.bind(this),this.addEventListener("dismiss",this.At),r&&(r.addEventListener("click",n=>{n.target===r&&this.closeMobileModal()}),r.addEventListener("cancel",n=>{n.preventDefault(),this.closeMobileModal()}))}handleMobileStubClick(n){n.preventDefault(),n.stopPropagation(),this.R||this.et||this.allTagsSelected()||this.openMobileModal()}handleMobileTagClick(n){this.handleTagClick(n)}updateMobileSelectedState(){if("mobile"!==this.dt.mode)return;const n=this.shadowRoot,t=n.querySelector(".mobile-selected-section"),e=n.querySelector(".mobile-available-section"),o=n.querySelector(".section-count");if(t){const n=this.dt.selectedValues.length;t.setAttribute("data-empty",!(n>0)+""),o&&(o.textContent=`(${n})`)}if(e){const t=this.getTagElements().filter(n=>!n.hasAttribute("selected")&&!n.hasAttribute("hidden")).length;e.setAttribute("data-empty",(0===t)+"");const o=n.querySelector(".mobile-available-section .section-title");o&&(o.textContent=`${this.Mt} (${t})`)}}updateSelectionDisplay(){const n=this.shadowRoot.querySelector(".multiselect-stub");n&&(this.getTagElements().filter(n=>n.hasAttribute("selected")).length>0?n.classList.add("has-selection"):n.classList.remove("has-selection"))}get value(){return this.getSelectedValues().join(",")}set value(n){this.setProperty("value",n)}get name(){return this.getProperty("name")}set name(n){this.setProperty("name",n)}get placeholder(){return this.getProperty("placeholder")}set placeholder(n){this.setProperty("placeholder",n)}get label(){return this.getProperty("label")}set label(n){this.setProperty("label",n)}get disabled(){return this.getProperty("disabled")}set disabled(n){this.setProperty("disabled",n)}get loading(){return this.getProperty("loading")}set loading(n){this.setProperty("loading",n)}get readonly(){return this.getProperty("readonly")}set readonly(n){this.setProperty("readonly",n)}get required(){return this.getProperty("required")}set required(n){this.setProperty("required",n)}get externalSearch(){return this.getProperty("externalSearch")}set externalSearch(n){this.setProperty("externalSearch",n)}get debounce(){return this.getProperty("debounce")}set debounce(n){this.setProperty("debounce","string"==typeof n?parseInt(n,10):n)}get size(){return this.getProperty("size")}set size(n){this.setProperty("size",n)}get flavor(){return this.getProperty("flavor")}set flavor(n){this.setProperty("flavor",n)}get form(){return this.m.form}};Rt.properties={value:{type:"string",visual:!0,formValue:!0,emitChange:!1,default:"",coerce:n=>Array.isArray(n)?n.join(","):null==n?"":n+""},name:{type:"string",default:""},placeholder:{type:"string",visual:!0,default:"Select options..."},label:{type:"string",visual:!0,default:""},disabled:{type:"boolean",visual:!0,default:!1},readonly:{type:"boolean",visual:!0,default:!1},required:{type:"boolean",visual:!0,default:!1},externalSearch:{type:"boolean",visual:!0,default:!1,aliases:{"external-search":!0}},size:{type:"string",visual:!0,default:"md",validate:n=>["sm","md","lg"].includes(n),coerce:n=>["sm","md","lg"].includes(n)?n:"md"},flavor:{type:"string",visual:!0,default:"neutral",validate:n=>["primary","secondary","success","danger","warning","neutral"].includes(n),coerce:n=>["primary","secondary","success","danger","warning","neutral"].includes(n)?n:"neutral"},debounce:{type:"number",default:0,validate:n=>n>=0&&5e3>=n,coerce:n=>{const t=+n;return isNaN(t)?0:Math.max(0,Math.min(5e3,t))}},"selected-label":{type:"string",visual:!0,default:"Selected"},"available-label":{type:"string",visual:!0,default:"Available"},"no-options-message":{type:"string",visual:!0,default:"No options available"},loading:{type:"boolean",visual:!0,default:!1}};let Pt=Rt;customElements.get("ty-multiselect")||customElements.define("ty-multiselect",Pt);const Vt=new WeakMap,Bt=new WeakMap;function Ft(n){return{width:n.getAttribute("width")||"100%",height:n.getAttribute("height")||"400px",active:n.getAttribute("active"),placement:n.getAttribute("placement")||"top"}}function Ht(n){return Array.from(n.querySelectorAll("ty-tab"))}function jt(n){return n.getAttribute("id")}function Wt(n,t){const e=jt(t);return e&&function(n,t){return null!==n.querySelector(`[slot='label-${t}']`)}(n,e)?"slot":"text"}function Yt(n){return n.hasAttribute("disabled")}function _t(n,t){const e=n.findIndex(n=>jt(n)===t);return 0>e?void 0:e}function Ut(n,t){const e=n.getAttribute("active");return e&&void 0!==_t(t,e)?e:t.length>0?jt(t[0]):null}function Gt(n){const t=Vt.get(n);if(!t)return;const e=n.shadowRoot;e&&(t.tabClickHandlers.forEach((n,t)=>{const o=e.querySelector(`[data-tab-id='${t}']`);o&&o.removeEventListener("pointerdown",n)}),t.tabClickHandlers.clear())}function Xt(n,t,e){Gt(n);const o={tabClickHandlers:new Map};e.forEach(e=>{const i=jt(e);if(!i)return;const r=t.querySelector(`[data-tab-id='${i}']`);if(r){const t=t=>function(n,t,e){e.preventDefault(),e.stopPropagation(),function(n,t){n.setAttribute("active",t)}(n,t)}(n,i,t);r.addEventListener("pointerdown",t),o.tabClickHandlers.set(i,t)}}),Vt.set(n,o)}function Kt(n,t){const e=n.shadowRoot;if(!e)return;const o=e.querySelector(".panels-wrapper");o&&(o.style.transform=`translateX(-${t*n.offsetWidth}px)`)}function Zt(n,t,e){Ht(n).forEach(o=>{const i=jt(o);if(!i)return;const r=t.querySelector(`[data-tab-id='${i}']`),s=i===e;if(r){r.setAttribute("aria-selected",s+""),r.setAttribute("tabindex",s?"0":"-1"),r.setAttribute("data-active",s+"");const t=n.querySelector(`[slot='label-${i}']`);t&&t.setAttribute("data-active",s+"")}})}function Jt(n,t){Ht(n).forEach(n=>{const e=jt(n);if(!e)return;const o=e===t;n.setAttribute("data-active",o+""),o?(n.style.pointerEvents="auto",n.style.opacity="1"):(n.style.pointerEvents="none",n.style.opacity="0")})}function Qt(n,t){const e=n.shadowRoot;if(!e)return;const o=e.querySelector(".marker-wrapper");if(!o)return;const i=function(n,t,e){const o=t.querySelector(`[data-tab-id='${e}']`),i=t.querySelector(".tab-buttons");if(!o||!i)return null;const r=o.getBoundingClientRect();return{left:o.offsetLeft,top:o.offsetTop,width:r.width,height:r.height}}(0,e,t);i&&(o.style.left=i.left+"px",o.style.top=i.top+"px",o.style.width=i.width+"px",o.style.height=i.height+"px")}function ne(n){const t=n.shadowRoot;if(!t)return;const{width:e,height:o,placement:i}=Ft(n),s=Ht(n),a=Ut(n,s),l=a?_t(s,a)??0:0,d=t.querySelector(".tabs-container"),c=t.querySelector(".tab-buttons"),h=t.querySelector(".panels-viewport");if(r(t,{css:'\n:host {\n display: block;\n width: var(--tabs-width, 100%);\n height: var(--tabs-height, 400px);\n box-sizing: border-box;\n}\n\n.tabs-container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n position: relative;\n box-sizing: border-box;\n}\n\n/* Bottom placement reverses the order */\n.tabs-container[data-placement="bottom"] {\n flex-direction: column-reverse;\n}\n\n/* ===================================== */\n/* Tab Buttons Container */\n/* Expose as CSS Part for full styling control */\n/* ===================================== */\n\n.tab-buttons {\n display: flex;\n gap: 0;\n flex-shrink: 0;\n position: relative;\n /* For absolute positioned marker */\n \n /* Default minimal styling - customize via ::part(buttons-container) */\n border-bottom: 1px solid var(--ty-border);\n background: transparent;\n}\n\n/* Bottom placement moves border to top */\n.tabs-container[data-placement="bottom"] .tab-buttons {\n border-bottom: none;\n border-top: 1px solid var(--ty-border);\n}\n\n/* ===================================== */\n/* Marker Wrapper */\n/* Expose as CSS Part for custom marker styling */\n/* ===================================== */\n\n.marker-wrapper {\n position: absolute;\n z-index: 0;\n /* Behind buttons */\n pointer-events: none;\n /* Don\'t block clicks */\n transition: left var(--transition-duration, 300ms) var(--transition-easing, ease-in-out),\n width var(--transition-duration, 300ms) var(--transition-easing, ease-in-out),\n height var(--transition-duration, 300ms) var(--transition-easing, ease-in-out),\n top var(--transition-duration, 300ms) var(--transition-easing, ease-in-out);\n}\n\n/* Default marker - simple underline */\n.default-marker {\n position: absolute;\n bottom: 0;\n left: 0;\n height: 2px;\n width: 100%;\n background: var(--ty-color-primary);\n pointer-events: none;\n}\n\n/* Hide default marker when custom marker is slotted */\n.marker-wrapper:has(::slotted([slot="marker"])) .default-marker {\n display: none;\n}\n\n/* User\'s marker element fills the wrapper */\n::slotted([slot="marker"]) {\n display: block;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n}\n\n/* ===================================== */\n/* Tab Buttons */\n/* ===================================== */\n\n.tab-button {\n min-width: 120px;\n padding: 6px 12px;\n border: none;\n background: transparent;\n cursor: pointer;\n font: inherit;\n color: var(--ty-text-soft);\n transition: color 200ms, background-color 200ms;\n white-space: nowrap;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n font-weight: var(--ty-font-bold);\n font-size: var(--ty-font-sm);\n position: relative;\n /* Establish stacking context */\n z-index: 10;\n /* Above marker */\n}\n\n.tab-button[aria-selected=true] {\n color: var(--ty-text-strong);\n}\n\n.tab-button[disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n.tab-button:focus-visible {\n outline: 2px solid var(--ty-color-primary);\n outline-offset: -2px;\n}\n\n/* ===================================== */\n/* Panels Viewport */\n/* Expose as CSS Part for panels container styling */\n/* ===================================== */\n\n.panels-viewport {\n position: relative;\n flex: 1;\n overflow: hidden;\n /* Critical: hides off-screen panels */\n min-height: 0;\n /* Allows flex child to shrink */\n}\n\n/* ===================================== */\n/* Panels Wrapper (slides horizontally) */\n/* ===================================== */\n\n.panels-wrapper {\n display: flex;\n height: 100%;\n transition: transform var(--transition-duration, 300ms) var(--transition-easing, ease-in-out);\n}\n\n/* Respect user\'s motion preferences */\n@media (prefers-reduced-motion: reduce) {\n .panels-wrapper {\n transition-duration: 0ms !important;\n }\n\n .marker-wrapper {\n transition-duration: 0ms !important;\n }\n}\n\n/* ===================================== */\n/* Slotted Tab Panels */\n/* ===================================== */\n\n::slotted(ty-tab) {\n width: var(--tabs-width, 100%);\n height: 100%;\n flex-shrink: 0;\n}\n',id:"ty-tabs"}),n.style.setProperty("--tabs-width",e.includes("%")?"100%":e),n.style.setProperty("--tabs-height",o),n.style.setProperty("--active-index",l+""),d&&c&&h){d.setAttribute("data-placement",i),c.querySelectorAll(".tab-button").forEach(n=>n.remove());const e=function(n,t,e){return t.map(t=>{const o=jt(t);if(!o)return"";const i=Wt(n,t),r="text"===i?t.getAttribute("label")||"Tab":"",s=Yt(t),a=o===e;return`<button\n class="tab-button"\n role="tab"\n data-tab-id="${o}"\n id="tab-${o}"\n aria-controls="panel-${o}"\n aria-selected="${a}"\n tabindex="${a?"0":"-1"}"\n data-active="${a}"\n ${s?'disabled aria-disabled="true"':""}\n >\n ${"slot"===i?`<slot name="label-${o}"></slot>`:r}\n </button>`}).join("")}(n,s,a),o=document.createElement("div");o.innerHTML=e,Array.from(o.children).forEach(n=>{c.appendChild(n)}),Xt(n,t,s),Zt(n,t,a||""),requestAnimationFrame(()=>{const e=t.querySelector(".tab-buttons");e&&n.style.setProperty("--buttons-height",e.offsetHeight+"px"),Kt(n,l),a&&Qt(n,a)}),a&&Jt(n,a)}else{t.innerHTML=`\n <div class="tabs-container" data-placement="${i}">\n ${function(n,t,e){const o=t.map(t=>{const o=jt(t);if(!o)return"";const i=Wt(n,t),r="text"===i?t.getAttribute("label")||"Tab":"",s=Yt(t),a=o===e;return`<button\n class="tab-button"\n role="tab"\n data-tab-id="${o}"\n id="tab-${o}"\n aria-controls="panel-${o}"\n aria-selected="${a}"\n tabindex="${a?"0":"-1"}"\n data-active="${a}"\n ${s?'disabled aria-disabled="true"':""}\n >\n ${"slot"===i?`<slot name="label-${o}"></slot>`:r}\n </button>`}).join("");return`\n <div class="tab-buttons" role="tablist" part="buttons-container">\n <div class="marker-wrapper" part="marker-wrapper">\n ${i=n,null===i.querySelector('[slot="marker"]')?'<div class="default-marker"></div>':""}\n <slot name="marker"></slot>\n </div>\n ${o}\n </div>\n `;var i}(n,s,a)}\n <div class="panels-viewport" part="panels-container">\n <div class="panels-wrapper">\n <slot></slot>\n </div>\n </div>\n </div>\n `,requestAnimationFrame(()=>{const e=t.querySelector(".tab-buttons");e&&n.style.setProperty("--buttons-height",e.offsetHeight+"px"),Kt(n,l),a&&Qt(n,a)}),Xt(n,t,s),Zt(n,t,a||""),function(n){const t=Bt.get(n);t&&t.disconnect();const{width:e}=Ft(n);if(e.includes("%")){const t=new ResizeObserver(t=>{const e=t[0].contentRect.width,o=Ht(n),i=Ut(n,o),r=i?_t(o,i):0;n.style.setProperty("--tabs-width",e+"px"),void 0!==r&&Kt(n,r),i&&Qt(n,i)});t.observe(n),Bt.set(n,t)}}(n),a&&Jt(n,a);const e=t.querySelector('slot[name="marker"]');if(e){const n=()=>{const n=t.querySelector(".default-marker");if(n){const t=e.assignedElements().length>0;n.style.display=t?"none":""}};e.addEventListener("slotchange",n),n()}}}class TyTabs extends HTMLElement{static get observedAttributes(){return["width","height","active","placement"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){ne(this)}disconnectedCallback(){Gt(this),function(n){const t=Bt.get(n);t&&(t.disconnect(),Bt.delete(n))}(this)}attributeChangedCallback(n,t,e){"active"===n?(e&&function(n,t,e){const o=Ht(n),i=n.shadowRoot;if(!i)return;const r=e?_t(o,e):void 0,s=_t(o,t);if(e===t||void 0===s)return;n.style.setProperty("--active-index",s+""),Kt(n,s),Zt(n,i,t),Jt(n,t),Qt(n,t);const a=o[s];a?.resetScroll&&a.resetScroll(),function(n,t,e,o,i){const r=new CustomEvent("ty-tab-change",{detail:{activeId:t,activeIndex:e,previousId:o,previousIndex:i},bubbles:!0,cancelable:!1});n.dispatchEvent(r)}(n,t,s,e,r??null)}(this,e,t),ne(this)):ne(this)}}customElements.get("ty-tabs")||customElements.define("ty-tabs",TyTabs);const te=`\n:host {\n width: var(--tabs-width, 100%);\n height: calc(var(--tabs-height, 400px) - var(--buttons-height, 48px));\n display: block;\n box-sizing: border-box;\n flex-shrink: 0;\n transition: opacity var(--transition-duration, 400ms) var(--transition-easing, ease-in-out);\n}\n\n@media (prefers-reduced-motion: reduce) {\n :host {\n transition-duration: 0ms !important;\n }\n}\n\n.tab-wrapper {\n width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n}\n\n.tab-panel {\n width: 100%;\n height: 100%;\n overflow: auto;\n box-sizing: border-box;\n}\n\n.tab-panel.ty-custom-scroll {\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n\n.tab-panel.ty-custom-scroll::-webkit-scrollbar {\n display: none;\n}\n\n/* Show scrollbar on hover */\n.tab-wrapper:hover .ty-scrollbar-track-y.has-overflow {\n opacity: 1;\n}\n\n${yn}\n`;class TyTab extends HTMLElement{constructor(){super(),this.Kn=null,this.attachShadow({mode:"open"})}static get observedAttributes(){return["id","label","disabled"]}connectedCallback(){this.It()}disconnectedCallback(){this.Zn()}attributeChangedCallback(n,t,e){this.It()}It(){const n=this.shadowRoot;if(!n)return;const t=this.getAttribute("id");n.querySelector(".tab-wrapper")||(r(n,{css:te,id:"ty-tab"}),n.innerHTML=`\n <div class="tab-wrapper"\n role="tabpanel"\n ${t?`id="panel-${t}"`:""}\n ${t?`aria-labelledby="tab-${t}"`:""}\n >\n <div class="tab-panel">\n <slot></slot>\n </div>\n </div>\n `,this.Jn())}Jn(){const n=this.shadowRoot?.querySelector(".tab-panel"),t=this.shadowRoot?.querySelector(".tab-wrapper");n&&t&&vn()&&(n.classList.add("ty-custom-scroll"),this.Kn=new mn(n,{vertical:!0}),this.Kn.trackY&&t.appendChild(this.Kn.trackY))}Zn(){this.Kn&&(this.Kn.trackY?.remove(),this.Kn.destroy(),this.Kn=null)}resetScroll(){this.Kn?.scrollToTop(!1)}}customElements.get("ty-tab")||customElements.define("ty-tab",TyTab);const ee=new WeakMap,oe=new WeakMap;function ie(n){return{width:n.getAttribute("width")||"100%",height:n.getAttribute("height")||"700px",active:n.getAttribute("active"),completed:n.getAttribute("completed")||"",orientation:n.getAttribute("orientation")||"horizontal"}}function re(n){return Array.from(n.querySelectorAll("ty-step"))}function se(n){return n.getAttribute("id")}function ae(n){const t=n.getAttribute("completed")||"";return t.trim()?new Set(t.split(",").map(n=>n.trim()).filter(Boolean)):new Set}function le(n,t){const e=n.findIndex(n=>se(n)===t);return 0>e?void 0:e}function de(n,t){const e=n.getAttribute("active");return e&&void 0!==le(t,e)?e:t.length>0?se(t[0]):null}function ce(n,t){return n.length>1&&t?n.findIndex(n=>se(n)===t)/(n.length-1)*100:0}function he(n){const t=ee.get(n);if(!t)return;const e=n.shadowRoot;e&&(t.stepClickHandlers.forEach((n,t)=>{const o=e.querySelector(`[data-step-id='${t}']`);o&&o.removeEventListener("pointerdown",n)}),t.stepClickHandlers.clear())}function pe(n,t,e){he(n);const o={stepClickHandlers:new Map};e.forEach(e=>{const i=se(e);if(!i)return;const r=t.querySelector(`[data-step-id='${i}']`);if(r){const t=t=>function(n,t,e){e.preventDefault(),e.stopPropagation();const o=re(n),i=o.findIndex(n=>se(n)===t);if(0>i)return;const r=de(n,o),s=r?le(o,r)??null:null,a=new CustomEvent("ty-wizard-step-change",{detail:{activeId:t,activeIndex:i,previousId:r,previousIndex:s,direction:null===s?"none":i>s?"forward":s>i?"backward":"none"},bubbles:!0,cancelable:!1});n.dispatchEvent(a)}(n,i,t);r.addEventListener("pointerdown",t),o.stepClickHandlers.set(i,t)}}),ee.set(n,o)}function ue(n,t){const e=n.shadowRoot;if(!e)return;const o=e.querySelector(".panels-wrapper");o&&(o.style.transform=`translateX(-${t*n.offsetWidth}px)`)}function ge(n){const t=n.shadowRoot;if(!t)return;const e=t.querySelector(".progress-overlay");if(!e)return;const o=re(n),i=de(n,o);ae(n);const r=ce(o,i);e.style.width=r+"%"}function be(n,t,e){const o=re(n),i=ae(n);e&&o.findIndex(n=>se(n)===e),o.forEach(o=>{const r=se(o);if(!r)return;const s=t.querySelector(`[data-step-id='${r}']`),a=t.querySelector(`[data-step-id='${r}'] .step-circle`),l=r===e;if(s&&(s.setAttribute("aria-selected",l+""),s.setAttribute("tabindex",l?"0":"-1"),s.setAttribute("data-active",l+"")),a){const n=me(o,r,e,i);a.setAttribute("data-state",n)}const d=n.querySelector(`[slot='indicator-${r}']`);d&&d.setAttribute("data-active",l+"")})}function ve(n,t){re(n).forEach(n=>{const e=se(n);if(!e)return;const o=e===t;n.setAttribute("data-active",o+""),o?(n.style.pointerEvents="auto",n.style.opacity="1"):(n.style.pointerEvents="none",n.style.opacity="0")})}function me(n,t,e,o){const i=n.getAttribute("status");if(i&&["completed","active","pending","error"].includes(i))return i;const r=t===e;return o.has(t)?"completed":r?"active":"pending"}function ye(n,t,e,o){e&&t.findIndex(n=>se(n)===e);const i=t.map((t,i)=>{const r=se(t);if(!r)return"";const s=t.getAttribute("label")||"Step "+(i+1),a=t.getAttribute("description")||"",l=function(n){return n.hasAttribute("disabled")}(t),d=r===e,c=function(n,t){return null!==n.querySelector(`[slot='indicator-${t}']`)}(n,r),h=me(t,r,e,o);let p="";return p=c?`<slot name="indicator-${r}"></slot>`:"completed"===h?'<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>':"error"===h?'<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>':`<span style="font-size: 12px; font-weight: 700;">${i+1}</span>`,`<button\n class="step-indicator"\n role="tab"\n data-step-id="${r}"\n id="step-${r}"\n aria-controls="panel-${r}"\n aria-selected="${d}"\n tabindex="${d?"0":"-1"}"\n data-active="${d}"\n ${l?'disabled aria-disabled="true"':""}\n >\n <div class="step-circle" data-state="${h}" part="step-circle">\n ${p}\n </div>\n <div class="step-text">\n <span class="step-label">${s}</span>\n ${a?`<span class="step-description">${a}</span>`:""}\n </div>\n </button>`}).join(""),r=ce(t,e);return`\n <div class="step-indicators-wrapper" part="indicators-wrapper">\n <div class="step-indicators" style="--step-count: ${t.length}">\n <div class="progress-line" part="progress-line" role="progressbar" aria-valuenow="${Math.round(r)}" aria-valuemin="0" aria-valuemax="100">\n <div class="progress-overlay" style="width: ${r}%"></div>\n </div>\n ${i}\n </div>\n </div>\n `}function fe(n){const t=n.shadowRoot;if(!t)return;const{width:e,height:o}=ie(n),i=re(n),s=de(n,i),a=s?le(i,s)??0:0,l=ae(n),d=t.querySelector(".wizard-container"),c=t.querySelector(".step-indicators-wrapper"),h=t.querySelector(".panels-viewport");if(r(t,{css:'\n:host {\n display: block;\n width: var(--wizard-width, 100%);\n height: var(--wizard-height, 700px);\n box-sizing: border-box;\n /* Note: --step-circle-size is NOT set here to allow inheritance from light DOM.\n Use fallbacks in var() calls instead. Set on ty-wizard element to customize. */\n}\n\n.wizard-container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n position: relative;\n box-sizing: border-box;\n border-radius: 12px;\n border: 1px solid var(--ty-border);\n background: var(--ty-surface-floating);\n box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n}\n\n/* ===================================== */\n/* Step Indicators Wrapper */\n/* Expose as CSS Part for full styling control */\n/* ===================================== */\n\n.step-indicators-wrapper {\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n position: relative;\n padding: 24px 24px 16px;\n border-bottom: 1px solid var(--ty-border-soft, var(--ty-border));\n background: var(--ty-surface-content);\n}\n\n/* ===================================== */\n/* Progress Line (behind step circles) */\n/* Expose as CSS Part for custom styling */\n/* ===================================== */\n\n.progress-line {\n position: absolute;\n /*\n * With equal-width indicators (flex: 1), each takes 100%/N of the width.\n * Circle centers are at: 50%/N, 150%/N, 250%/N, ... from left.\n * Line spans from first center (50%/N) to last center (100% - 50%/N).\n * Inset = 50% / step-count from each side.\n */\n left: calc(50% / var(--step-count, 4));\n right: calc(50% / var(--step-count, 4));\n /* Vertically center with step circles - uses circle size variable */\n top: calc(var(--step-circle-size, 32px) / 2 - 1px);\n height: 2px;\n background: var(--ty-border);\n z-index: 0;\n pointer-events: none;\n transition: opacity var(--transition-duration, 300ms) var(--transition-easing, ease-in-out);\n}\n\n.progress-overlay {\n position: absolute;\n left: 0;\n top: 0;\n height: 100%;\n background: var(--ty-color-success);\n transition: width var(--transition-duration, 500ms) var(--transition-easing, ease-in-out);\n will-change: width;\n}\n\n/* ===================================== */\n/* Step Indicators Container */\n/* ===================================== */\n\n.step-indicators {\n display: flex;\n align-items: flex-start;\n position: relative;\n /* No padding - let equal-width indicators fill the space */\n}\n\n/* ===================================== */\n/* Individual Step Indicator */\n/* Expose as CSS Part for step styling */\n/* ===================================== */\n\n.step-indicator {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n background: transparent;\n border: none;\n padding: 0;\n font: inherit;\n transition: opacity 200ms;\n /* Equal width for all indicators - makes progress line alignment predictable */\n flex: 1;\n min-width: 0;\n}\n\n.step-indicator[aria-disabled="true"] {\n opacity: 0.4;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n.step-indicator:focus-visible {\n outline: 2px solid var(--ty-color-primary);\n outline-offset: 4px;\n border-radius: 50%;\n}\n\n/* ===================================== */\n/* Step Circle - Smaller, cleaner */\n/* Expose as CSS Part for circle styling */\n/* ===================================== */\n\n.step-circle {\n /* Circle size - set --step-circle-size on ty-wizard element to customize */\n width: var(--step-circle-size, 32px);\n height: var(--step-circle-size, 32px);\n border-radius: 50%;\n border: 2px solid;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n z-index: 10;\n transition: all var(--transition-duration, 300ms) var(--transition-easing, ease-in-out);\n box-sizing: border-box;\n flex-shrink: 0;\n}\n\n/* Completed state - green with success glow */\n.step-circle[data-state="completed"] {\n background: var(--ty-color-success);\n border-color: var(--ty-color-success-600, var(--ty-color-success));\n color: white;\n box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1);\n}\n\n/* Active state - primary with primary glow */\n.step-circle[data-state="active"] {\n background: var(--ty-color-primary);\n border-color: var(--ty-color-primary-600, var(--ty-color-primary));\n color: white;\n box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);\n}\n\n/* Pending state - neutral gray */\n.step-circle[data-state="pending"] {\n background: var(--ty-surface-elevated, #f3f4f6);\n border-color: var(--ty-border, #d1d5db);\n color: var(--ty-text-soft, #6b7280);\n}\n\n/* Error state - red with danger glow */\n.step-circle[data-state="error"] {\n background: var(--ty-color-danger, #ef4444);\n border-color: var(--ty-color-danger-600, #dc2626);\n color: white;\n box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);\n}\n\n/* ===================================== */\n/* Step Text Container */\n/* Wraps label and description */\n/* ===================================== */\n\n.step-text {\n display: flex;\n flex-direction: column;\n gap: 2px;\n align-items: center;\n}\n\n/* ===================================== */\n/* Step Label - Main title */\n/* ===================================== */\n\n.step-label {\n font-size: var(--ty-font-sm, 14px);\n font-weight: var(--ty-font-semibold, 600);\n color: var(--ty-text, inherit);\n transition: color 200ms;\n}\n\n.step-indicator[aria-selected="true"] .step-label {\n color: var(--ty-text-strong, inherit);\n}\n\n.step-indicator[aria-selected="false"] .step-label {\n color: var(--ty-text-soft, inherit);\n}\n\n/* ===================================== */\n/* Step Description - Subtitle */\n/* ===================================== */\n\n.step-description {\n font-size: var(--ty-font-xs, 12px);\n font-weight: var(--ty-font-normal, 400);\n color: var(--ty-text-soft, #9ca3af);\n transition: color 200ms;\n text-align: center;\n max-width: 120px;\n}\n\n.step-indicator[aria-selected="true"] .step-description {\n color: var(--ty-text, inherit);\n}\n\n/* ===================================== */\n/* Custom Indicator Content via Slots */\n/* ===================================== */\n\n::slotted([slot^="indicator-"]) {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n}\n\n/* ===================================== */\n/* Panels Viewport */\n/* Expose as CSS Part for panels container styling */\n/* ===================================== */\n\n.panels-viewport {\n position: relative;\n flex: 1;\n overflow: hidden;\n /* Critical: hides off-screen panels */\n min-height: 0;\n /* Allows flex child to shrink */\n background: var(--ty-surface-elevated);\n}\n\n/* ===================================== */\n/* Panels Wrapper (slides horizontally) */\n/* ===================================== */\n\n.panels-wrapper {\n display: flex;\n height: 100%;\n transition: transform var(--transition-duration, 300ms) var(--transition-easing, ease-in-out);\n will-change: transform;\n}\n\n/* ===================================== */\n/* Slotted Step Panels */\n/* ===================================== */\n\n::slotted(ty-step) {\n width: var(--wizard-width, 100%);\n height: 100%;\n flex-shrink: 0;\n}\n\n/* ===================================== */\n/* Accessibility & Motion Preferences */\n/* ===================================== */\n\n/* Respect user\'s motion preferences */\n@media (prefers-reduced-motion: reduce) {\n .panels-wrapper {\n transition-duration: 0ms !important;\n }\n\n .progress-overlay {\n transition-duration: 0ms !important;\n }\n\n .step-circle {\n transition-duration: 0ms !important;\n }\n\n .progress-line {\n transition-duration: 0ms !important;\n }\n}\n\n/* Screen reader only content */\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n',id:"ty-wizard"}),n.style.setProperty("--wizard-width",e.includes("%")?"100%":e),n.style.setProperty("--wizard-height",o),n.style.setProperty("--active-index",a+""),n.style.setProperty("--step-count",i.length+""),d&&c&&h){c.remove();const e=ye(n,i,s,l),o=document.createElement("div");o.innerHTML=e,d.insertBefore(o.firstElementChild,h),pe(n,t,i),be(n,t,s||""),requestAnimationFrame(()=>{const e=t.querySelector(".step-indicators-wrapper");e&&n.style.setProperty("--indicators-height",e.offsetHeight+"px"),ue(n,a),ge(n)}),s&&ve(n,s)}else t.innerHTML=`\n <div class="wizard-container">\n ${ye(n,i,s,l)}\n <div class="panels-viewport" part="panels-container">\n <div class="panels-wrapper">\n <slot></slot>\n </div>\n </div>\n </div>\n `,requestAnimationFrame(()=>{const e=t.querySelector(".step-indicators-wrapper");e&&n.style.setProperty("--indicators-height",e.offsetHeight+"px"),ue(n,a),ge(n)}),pe(n,t,i),be(n,t,s||""),function(n){const t=oe.get(n);t&&t.disconnect();const{width:e}=ie(n);if(e.includes("%")){const t=new ResizeObserver(t=>{const e=t[0].contentRect.width,o=re(n),i=de(n,o),r=i?le(o,i):0;n.style.setProperty("--wizard-width",e+"px"),void 0!==r&&ue(n,r)});t.observe(n),oe.set(n,t)}}(n),s&&ve(n,s)}class TyWizard extends HTMLElement{static get observedAttributes(){return["width","height","active","completed","orientation"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){fe(this)}disconnectedCallback(){he(this),function(n){const t=oe.get(n);t&&(t.disconnect(),oe.delete(n))}(this)}attributeChangedCallback(n,t,e){"active"===n?(e&&function(n,t){const e=re(n),o=n.shadowRoot;if(!o)return;const i=de(n,e),r=i?le(e,i):void 0,s=le(e,t);if(i===t||void 0===s)return;n.style.setProperty("--active-index",s+""),ue(n,s),be(n,o,t),ge(n),ve(n,t);const a=e[s];a?.resetScroll&&a.resetScroll(),function(n,t,e,o,i){const r=new CustomEvent("ty-wizard-step-change",{detail:{activeId:t,activeIndex:e,previousId:o,previousIndex:i,direction:null===i?"none":e>i?"forward":i>e?"backward":"none"},bubbles:!0,cancelable:!1});n.dispatchEvent(r)}(n,t,s,i,r??null)}(this,e),fe(this)):fe(this)}}customElements.get("ty-wizard")||customElements.define("ty-wizard",TyWizard);const we=`\n:host {\n width: var(--wizard-width, 100%);\n height: calc(var(--wizard-height, 700px) - var(--indicators-height, 120px));\n display: block;\n box-sizing: border-box;\n flex-shrink: 0;\n transition: opacity var(--transition-duration, 400ms) var(--transition-easing, ease-in-out);\n}\n\n@media (prefers-reduced-motion: reduce) {\n :host {\n transition-duration: 0ms !important;\n }\n}\n\n.step-wrapper {\n width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n}\n\n.step-panel {\n width: 100%;\n height: 100%;\n overflow: auto;\n box-sizing: border-box;\n}\n\n.step-panel.ty-custom-scroll {\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n\n.step-panel.ty-custom-scroll::-webkit-scrollbar {\n display: none;\n}\n\n.step-wrapper:hover .ty-scrollbar-track-y.has-overflow {\n opacity: 1;\n}\n\n${yn}\n`;class TyStep extends HTMLElement{constructor(){super(),this.Kn=null,this.attachShadow({mode:"open"})}static get observedAttributes(){return["id","label","description","disabled","status"]}connectedCallback(){this.It()}disconnectedCallback(){this.Zn()}attributeChangedCallback(n,t,e){this.It()}It(){const n=this.shadowRoot;if(!n)return;const t=this.getAttribute("id");n.querySelector(".step-wrapper")||(r(n,{css:we,id:"ty-step"}),n.innerHTML=`\n <div class="step-wrapper"\n role="tabpanel"\n ${t?`id="panel-${t}"`:""}\n ${t?`aria-labelledby="step-${t}"`:""}\n >\n <div class="step-panel">\n <slot></slot>\n </div>\n </div>\n `,this.Jn())}Jn(){const n=this.shadowRoot?.querySelector(".step-panel"),t=this.shadowRoot?.querySelector(".step-wrapper");n&&t&&vn()&&(n.classList.add("ty-custom-scroll"),this.Kn=new mn(n,{vertical:!0}),this.Kn.trackY&&t.appendChild(this.Kn.trackY))}Zn(){this.Kn&&(this.Kn.trackY?.remove(),this.Kn.destroy(),this.Kn=null)}resetScroll(){this.Kn?.scrollToTop(!1)}}function xe(n){if(!Number.isInteger(n)||1>n||n>12)throw new RangeError(`Invalid month: ${n}. Must be an integer between 1 and 12.`)}function ke(n,t,e,o){const i=n.getFullYear(),r=n.getMonth()+1,s=n.getDate(),a=n.getDay(),l=i!==t||r!==e;let d=!1,c=!1;l&&(t>i||i===t&&e>r?d=!0:c=!0);const h=(u=function(){const n=new Date;return new Date(n.getFullYear(),n.getMonth(),n.getDate(),0,0,0,0)}(),(p=n).getFullYear()===u.getFullYear()&&p.getMonth()===u.getMonth()&&p.getDate()===u.getDate());var p,u;const g=o?.year===i&&o?.month===r&&o?.day===s;return{value:Date.UTC(i,r-1,s,0,0,0,0),localValue:n.getTime(),year:i,month:r,dayInMonth:s,weekend:0===a||6===a,otherMonth:l,prevMonth:d,nextMonth:c,today:h,isSelected:g,selectedYear:o?.year,selectedMonth:o?.month,selectedDay:o?.day}}function ze(n,t){const e=new Date(n);return e.setDate(e.getDate()+t),e}function Ce(n){return n instanceof HTMLElement}function Se(n){if(!n||""===n)return null;const t=n+"";return/^\d+(\.\d+)?$/.test(t)?t+"px":t}customElements.get("ty-step")||customElements.define("ty-step",TyStep);class TyCalendarMonth extends HTMLElement{constructor(){super(),this.Ot="en-US",this.lt="md";const n=new Date;this.Lt=n.getFullYear(),this.Nt=n.getMonth()+1,this.attachShadow({mode:"open"})}static get observedAttributes(){return["locale","size"]}connectedCallback(){this.Nt||(this.Nt=(new Date).getMonth()+1),this.Lt||(this.Lt=(new Date).getFullYear()),this.Ot||(this.Ot=this.getAttribute("locale")||"en-US");const n=this.getAttribute("size");!n||"sm"!==n&&"md"!==n&&"lg"!==n||(this.lt=n);const t=this.dayContentFn;t&&!this.qt&&(this.qt=t,delete this.dayContentFn);const e=this.customCSS;e&&!this.Rt&&(this.Rt=e,delete this.customCSS),this.Z=W(this,()=>{this.render()}),this.render()}disconnectedCallback(){this.Z&&(this.Z(),this.Z=void 0)}attributeChangedCallback(n,t,e){"locale"===n?(this.Ot=e||"en-US",this.render()):"size"===n&&("sm"!==e&&"md"!==e&&"lg"!==e||(this.lt=e,this.render()))}get displayYear(){return this.Lt}set displayYear(n){this.Lt!==n&&(this.Lt=n,this.render())}get displayMonth(){return this.Nt}set displayMonth(n){this.Nt!==n&&(this.Nt=n,this.render())}get locale(){return j(this,this.getAttribute("locale"))}set locale(n){this.Ot!==n&&(this.Ot=n,this.render())}get size(){return this.lt}set size(n){this.lt!==n&&(this.lt=n,this.render())}get width(){return this.Pt}set width(n){this.Pt!==n&&(this.Pt=n,this.applyWidthProperties())}get minWidth(){return this.Vt}set minWidth(n){this.Vt!==n&&(this.Vt=n,this.applyWidthProperties())}get maxWidth(){return this.Bt}set maxWidth(n){this.Bt!==n&&(this.Bt=n,this.applyWidthProperties())}get dayContentFn(){return this.qt}set dayContentFn(n){this.qt!==n&&(this.qt=n,this.render())}get customCSS(){return this.Rt}set customCSS(n){this.Rt!==n&&(this.Rt=n,this.applyCustomCSS())}get value(){return this.N}set value(n){const t=n??void 0;this.N!==t&&(this.N=t,this.render())}applyWidthProperties(){const n=Se(this.Pt),t=Se(this.Vt),e=Se(this.Bt);n?this.style.setProperty("--calendar-width",n):this.style.removeProperty("--calendar-width"),t?this.style.setProperty("--calendar-min-width",t):this.style.removeProperty("--calendar-min-width"),e?this.style.setProperty("--calendar-max-width",e):this.style.removeProperty("--calendar-max-width")}applyCustomCSS(){if(!this.Rt||!this.shadowRoot)return;const n=this.shadowRoot.adoptedStyleSheets;n.includes(this.Rt)||(this.shadowRoot.adoptedStyleSheets=[...n,this.Rt])}refresh(){this.render()}dispatchDayClick(n,t){const e={dayContext:n,value:n.value,year:n.year,month:n.month,day:n.dayInMonth,isHoliday:n.holiday,isToday:n.today,isWeekend:n.weekend,isOtherMonth:n.otherMonth};for(const o of["day-click","day-select"]){const n=new CustomEvent(o,{detail:e,bubbles:!0,cancelable:!0});this.dispatchEvent(n)}}renderDayCell(n){const t=document.createElement("div"),e=this.qt?this.qt(n):function(n){return""+n.dayInMonth}(n);if(this.qt&&e&&!Ce(e)&&"string"!=typeof e)throw Error(`Custom dayContentFn must return a DOM element or string, got: ${typeof e}. Use document.createElement() to create DOM elements.`);const o=function(n){const t=["calendar-day"];return n.today&&t.push("today"),n.weekend&&t.push("weekend"),n.otherMonth&&t.push("other-month"),n.isSelected&&t.push("selected"),t}(n);return t.className=o.join(" "),"string"==typeof e?t.textContent=e:Ce(e)&&t.appendChild(e),t.addEventListener("pointerdown",t=>{t.preventDefault(),this.dispatchDayClick(n,t)}),t}render(){const n=this.shadowRoot;if(!n)return;let t;if(r(n,{css:"\n/* ============================================================================\n Theming Tokens\n Override these to retheme the calendar without touching the global palette.\n Defaults chain back to the global --ty-color-* / --ty-bg-* / --ty-border tokens.\n ============================================================================ */\n\n:host {\n /* Accent aliases — override these three for thin retheming */\n --ty-calendar-accent: var(--ty-color-primary);\n --ty-calendar-today-accent: var(--ty-color-secondary);\n --ty-calendar-muted: var(--ty-color-neutral);\n\n /* Header (weekday names) */\n --ty-calendar-header-color: var(--ty-color-neutral-strong);\n\n /* Day cell — base */\n --ty-calendar-day-color: var(--ty-calendar-muted);\n --ty-calendar-day-bg: transparent;\n --ty-calendar-day-border: var(--ty-border);\n --ty-calendar-day-radius: 0.375rem;\n\n /* Day cell — hover */\n --ty-calendar-day-hover-color: var(--ty-color-neutral-strong);\n --ty-calendar-day-hover-bg: var(--ty-bg-neutral-soft);\n --ty-calendar-day-hover-border: var(--ty-border-mild);\n\n /* Today */\n --ty-calendar-today-color: var(--ty-color-secondary-strong);\n --ty-calendar-today-bg: var(--ty-bg-secondary-soft);\n --ty-calendar-today-border: var(--ty-calendar-today-accent);\n\n /* Selected */\n --ty-calendar-selected-color: var(--ty-color-primary-strong);\n --ty-calendar-selected-bg: var(--ty-bg-primary);\n --ty-calendar-selected-border: var(--ty-calendar-accent);\n --ty-calendar-selected-hover-bg: var(--ty-bg-primary-mild);\n --ty-calendar-selected-hover-border: var(--ty-color-primary-mild);\n\n /* Modifier states */\n --ty-calendar-weekend-color: var(--ty-color-danger-soft);\n --ty-calendar-other-month-color: var(--ty-color-neutral-faint);\n --ty-calendar-other-month-opacity: 0.5;\n}\n\n/* ============================================================================\n Base Calendar Container\n ============================================================================ */\n\n.calendar-flex-container {\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n gap: 0;\n padding: 0.75rem;\n border-radius: 0.5rem;\n font-family: system-ui, sans-serif;\n user-select: none;\n width: var(--calendar-width, fit-content);\n min-width: 280px;\n max-width: var(--calendar-max-width, none);\n}\n\n/* ============================================================================\n Rows (Header + 6 Day Rows)\n ============================================================================ */\n\n.calendar-row {\n display: flex;\n flex: 1;\n min-height: 0;\n}\n\n.calendar-header-row {\n flex: 0 0 auto;\n color: var(--ty-calendar-header-color);\n}\n\n.calendar-day-row {\n flex: 1;\n min-height: 2rem;\n margin-bottom: 0.125rem;\n}\n\n/* ============================================================================\n Base Cell Styles\n ============================================================================ */\n\n.calendar-cell {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 0;\n position: relative;\n box-sizing: border-box;\n}\n\n/* ============================================================================\n Header Cells\n ============================================================================ */\n\n.calendar-header-cell {\n text-align: center;\n font-weight: 600;\n text-transform: uppercase;\n padding: 0.25rem;\n letter-spacing: 0.05em;\n}\n\n/* ============================================================================\n Day Cells - Square with Better Visual Hierarchy\n ============================================================================ */\n\n.calendar-day-cell {\n /* Square cells */\n aspect-ratio: 1;\n\n /* Layout */\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n\n /* Spacing */\n margin: 0.125rem;\n\n /* Visual */\n border-radius: var(--ty-calendar-day-radius);\n border: 1px solid var(--ty-calendar-day-border);\n background-color: var(--ty-calendar-day-bg);\n color: var(--ty-calendar-day-color);\n cursor: pointer;\n transition: all 0.15s ease;\n\n /* Typography */\n font-weight: 400;\n}\n\n/* Hover State - Stronger Feedback */\n.calendar-day-cell:hover {\n color: var(--ty-calendar-day-hover-color);\n background-color: var(--ty-calendar-day-hover-bg);\n border-color: var(--ty-calendar-day-hover-border);\n}\n\n/* ============================================================================\n Day States\n ============================================================================ */\n\n/* Today - Strong Visual Indicator */\n.calendar-day-cell.today {\n background-color: var(--ty-calendar-today-bg);\n color: var(--ty-calendar-today-color);\n border-color: var(--ty-calendar-today-border);\n font-weight: 600;\n}\n\n/* Weekend - Subtle Color Shift */\n.calendar-day-cell.weekend {\n color: var(--ty-calendar-weekend-color);\n}\n\n/* Other Month - Muted */\n.calendar-day-cell.other-month {\n color: var(--ty-calendar-other-month-color);\n opacity: var(--ty-calendar-other-month-opacity);\n}\n\n.calendar-day-cell.other-month:hover { \n color: var(--ty-calendar-day-hover-color);\n background-color: var(--ty-calendar-day-hover-bg);\n opacity: 0.7;\n}\n\n/* Selected State (for custom usage) */\n.calendar-day-cell.selected {\n background-color: var(--ty-calendar-selected-bg);\n color: var(--ty-calendar-selected-color);\n border-color: var(--ty-calendar-selected-border);\n font-weight: 600;\n}\n\n.calendar-day-cell.selected:hover {\n background-color: var(--ty-calendar-selected-hover-bg);\n border-color: var(--ty-calendar-selected-hover-border);\n}\n\n.calendar-day-cell.selected.other-month {\n opacity: 0.7;\n}\n\n/* ============================================================================\n Size Variants\n ============================================================================ */\n\n/* Small - Compact (240px min-width) */\n.calendar-size-sm {\n padding: 0.5rem;\n min-width: 240px;\n}\n\n.calendar-size-sm .calendar-header-cell {\n font-size: 0.625rem;\n padding: 0.125rem;\n}\n\n.calendar-size-sm .calendar-day-cell {\n font-size: 0.75rem;\n margin: 0.0625rem;\n}\n\n.calendar-size-sm .calendar-day-row {\n min-height: 1.5rem;\n}\n\n/* Medium - Default (280px min-width) */\n.calendar-size-md {\n padding: 0.75rem;\n min-width: 280px;\n}\n\n.calendar-size-md .calendar-header-cell {\n font-size: 0.6875rem;\n padding: 0.25rem;\n}\n\n.calendar-size-md .calendar-day-cell {\n font-size: 0.8125rem;\n margin: 0.125rem;\n}\n\n.calendar-size-md .calendar-day-row {\n min-height: 2rem;\n}\n\n/* Large - Spacious (360px min-width) */\n.calendar-size-lg {\n padding: 1rem;\n min-width: 360px;\n}\n\n.calendar-size-lg .calendar-header-cell {\n font-size: 0.75rem;\n padding: 0.375rem;\n}\n\n.calendar-size-lg .calendar-day-cell {\n font-size: 0.875rem;\n margin: 0.1875rem;\n}\n\n.calendar-size-lg .calendar-day-row {\n min-height: 2.5rem;\n}\n\n/* ============================================================================\n Backwards Compatibility\n ============================================================================ */\n\n.calendar-day {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n}\n",id:"ty-calendar-month"}),this.applyCustomCSS(),this.applyWidthProperties(),this.N){const n=new Date(this.N);t={year:n.getFullYear(),month:n.getMonth()+1,day:n.getDate()}}const e=function(n,t,e){return function(n){if(!Number.isInteger(n)||1>n||n>9999)throw new RangeError(`Invalid year: ${n}. Must be an integer between 1 and 9999.`)}(n),xe(t),function(n,t,e,o,i){const r=[];for(let s=0;42>s;s++){const t=ze(n,s);r.push(ke(t,e,o,i))}return r}(function(n,t){const e=function(n,t){return new Date(n,t-1,1,0,0,0,0)}(n,t);return function(n){const t=n.getDay(),e=0===t?6:t-1,o=new Date(n);return o.setDate(n.getDate()-e),o.setHours(0,0,0,0),o}(e)}(n,t),0,n,t,e)}(this.Lt,this.Nt,t),o=function(n,t="short"){const e=new Intl.DateTimeFormat(n,{weekday:t}),o=new Date(2024,0,7),i=Array.from({length:7},(n,t)=>{const i=ze(o,t);return e.format(i)}),[r,...s]=i;return[...s,r]}(this.Ot,"short");n.innerHTML="";const i=document.createElement("div");i.className="calendar-flex-container calendar-size-"+this.lt;const s=document.createElement("div");s.className="calendar-row calendar-header-row",o.forEach(n=>{const t=document.createElement("div");t.className="calendar-cell calendar-header-cell",t.textContent=n,s.appendChild(t)}),i.appendChild(s);const a=[];for(let r=0;42>r;r+=7)a.push(e.slice(r,r+7));a.forEach(n=>{const t=document.createElement("div");t.className="calendar-row calendar-day-row",n.forEach(n=>{const e=this.renderDayCell(n);e.className=e.className+" calendar-cell calendar-day-cell",t.appendChild(e)}),i.appendChild(t)}),n.appendChild(i)}}customElements.get("ty-calendar-month")||customElements.define("ty-calendar-month",TyCalendarMonth);const Ee='\n/* ============================================================================\n Size Variants (CSS Custom Properties)\n ============================================================================ */\n\n:host {\n /* Default (md) */\n --nav-btn-size: 2rem;\n --nav-btn-icon-size: 1.25rem;\n --nav-font-size: 1rem;\n --nav-padding: 0.5rem 0.75rem;\n --nav-default-width: 280px;\n\n /* ==========================================================================\n Theming Tokens\n Override these to retheme navigation without touching the global palette.\n ========================================================================== */\n\n /* Accent alias — drives focus outline, mirrors --ty-calendar-accent */\n --ty-calendar-accent: var(--ty-color-primary);\n\n /* Nav button (prev/next chevrons) */\n --ty-calendar-nav-color: var(--ty-color-neutral);\n --ty-calendar-nav-hover-color: var(--ty-color-neutral-strong);\n --ty-calendar-nav-hover-bg: var(--ty-bg-neutral-soft);\n --ty-calendar-nav-active-bg: var(--ty-bg-neutral);\n --ty-calendar-nav-focus-outline: var(--ty-calendar-accent);\n\n /* Title (month/year display) */\n --ty-calendar-nav-title-color: var(--ty-color-neutral-strong);\n}\n\n:host([data-size="sm"]) {\n --nav-btn-size: 1.5rem;\n --nav-btn-icon-size: 1rem;\n --nav-font-size: 0.875rem;\n --nav-padding: 0.375rem 0.5rem;\n --nav-default-width: 240px;\n}\n\n:host([data-size="lg"]) {\n --nav-btn-size: 2.5rem;\n --nav-btn-icon-size: 1.5rem;\n --nav-font-size: 1.125rem;\n --nav-padding: 0.625rem 1rem;\n --nav-default-width: 360px;\n}\n\n/* ============================================================================\n Main Navigation Header\n ============================================================================ */\n\n.calendar-navigation-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--nav-padding);\n font-family: system-ui, sans-serif;\n user-select: none;\n width: var(--nav-width, var(--nav-default-width));\n box-sizing: border-box;\n}\n\n/* ============================================================================\n Navigation Groups (Left, Center, Right)\n ============================================================================ */\n\n.nav-group {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.nav-group-left,\n.nav-group-right {\n flex: 0 0 auto;\n}\n\n.nav-group-center {\n flex: 1;\n justify-content: center;\n}\n\n/* ============================================================================\n Navigation Buttons\n ============================================================================ */\n\n.nav-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--nav-btn-size);\n height: var(--nav-btn-size);\n padding: 0;\n border: none;\n border-radius: 0.375rem;\n background-color: transparent;\n color: var(--ty-calendar-nav-color);\n cursor: pointer;\n transition: all 0.15s ease;\n outline: none;\n}\n\n.nav-btn:hover {\n background-color: var(--ty-calendar-nav-hover-bg);\n color: var(--ty-calendar-nav-hover-color);\n}\n\n.nav-btn:active {\n background-color: var(--ty-calendar-nav-active-bg);\n transform: scale(0.95);\n}\n\n.nav-btn:focus-visible {\n outline: 2px solid var(--ty-calendar-nav-focus-outline);\n outline-offset: 2px;\n}\n\n/* SVG sizing */\n.nav-btn svg {\n width: var(--nav-btn-icon-size);\n height: var(--nav-btn-icon-size);\n display: block;\n}\n\n/* ============================================================================\n Month/Year Display (Center)\n ============================================================================ */\n\n.month-year-display {\n font-size: var(--nav-font-size);\n font-weight: 600;\n color: var(--ty-calendar-nav-title-color);\n text-align: center;\n white-space: nowrap;\n letter-spacing: -0.01em;\n}\n',Te=class extends o{constructor(){super();const n=new Date;this.dt={displayMonth:n.getMonth()+1,displayYear:n.getFullYear()},r(this.shadowRoot,{css:Ee,id:"ty-calendar-navigation"})}onConnect(){this.dt.displayMonth=this.displayMonth,this.dt.displayYear=this.displayYear,this.Z=W(this,()=>{this.render()}),this.render()}onDisconnect(){this.Z&&(this.Z(),this.Z=void 0)}onPropertiesChanged(n){for(const{name:t,newValue:e}of n)switch(t){case"display-month":this.dt.displayMonth=e;break;case"display-year":this.dt.displayYear=e}}get displayMonth(){return this.getProperty("display-month")}set displayMonth(n){this.setProperty("display-month",n)}get displayYear(){return this.getProperty("display-year")}set displayYear(n){this.setProperty("display-year",n)}get locale(){return j(this,this.getProperty("locale"))}set locale(n){this.setProperty("locale",n)}get size(){return this.getProperty("size")}set size(n){this.setProperty("size",n)}get width(){return this.getProperty("width")}set width(n){this.setProperty("width",n)}emitChangeEvent(n,t){const e=new CustomEvent("change",{detail:{month:n,year:t},bubbles:!0,cancelable:!0});this.dispatchEvent(e)}navigateMonth(n){const t=this.dt.displayMonth+n;let e,o;1>t?(e=12,o=this.dt.displayYear-1):t>12?(e=1,o=this.dt.displayYear+1):(e=t,o=this.dt.displayYear),this.emitChangeEvent(e,o)}navigateYear(n){this.emitChangeEvent(this.dt.displayMonth,this.dt.displayYear+n)}createButton(n,t,e,o){const i=document.createElement("button");return i.className=n,i.title=t,i.innerHTML=e,i.addEventListener("click",o),i}render(){const n=this.shadowRoot;if(!n)return;r(n,{css:Ee,id:"ty-calendar-navigation"}),this.setAttribute("data-size",this.size);const t=this.width;t?this.style.setProperty("--nav-width",t):this.style.removeProperty("--nav-width");const e=function(n,t="en-US",e="long"){xe(n);const o=new Date(2024,n-1,1);return new Intl.DateTimeFormat(t,{month:e}).format(o)}(this.dt.displayMonth,this.locale,"long");n.innerHTML="";const o=document.createElement("div");o.className="calendar-navigation-header";const i=document.createElement("div");i.className="nav-group nav-group-left",i.appendChild(this.createButton("nav-btn nav-year-prev","Previous year","<?xml version='1.0' encoding='UTF-8'?>\n<svg width='24' viewBox='0 0 24 24' height='24' enable-background='new 0 0 24 24' xmlns='http://www.w3.org/2000/svg' stroke-width='0' stroke='currentColor' fill='currentColor'>\n<g>\n<rect width='24' height='24' fill='none'/>\n</g>\n<g>\n<g>\n<polygon points='17.59,18 19,16.59 14.42,12 19,7.41 17.59,6 11.59,12'/>\n<polygon points='11,18 12.41,16.59 7.83,12 12.41,7.41 11,6 5,12'/>\n</g>\n</g>\n</svg>",()=>this.navigateYear(-1))),i.appendChild(this.createButton("nav-btn nav-month-prev","Previous month","<?xml version='1.0' encoding='UTF-8'?>\n<svg width='24' viewBox='0 0 24 24' height='24' xmlns='http://www.w3.org/2000/svg' stroke-width='0' stroke='currentColor' fill='currentColor'>\n<path fill='none' d='M0 0h24v24H0V0z'/>\n<path d='M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z'/>\n</svg>",()=>this.navigateMonth(-1)));const s=document.createElement("div");s.className="nav-group nav-group-center";const a=document.createElement("div");a.className="month-year-display",a.textContent=`${e} ${this.dt.displayYear}`,s.appendChild(a);const l=document.createElement("div");l.className="nav-group nav-group-right",l.appendChild(this.createButton("nav-btn nav-month-next","Next month","<?xml version='1.0' encoding='UTF-8'?>\n<svg width='24' viewBox='0 0 24 24' height='24' xmlns='http://www.w3.org/2000/svg' stroke-width='0' stroke='currentColor' fill='currentColor'>\n<path fill='none' d='M0 0h24v24H0V0z'/>\n<path d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z'/>\n</svg>",()=>this.navigateMonth(1))),l.appendChild(this.createButton("nav-btn nav-year-next","Next year","<?xml version='1.0' encoding='UTF-8'?>\n<svg width='24' viewBox='0 0 24 24' height='24' enable-background='new 0 0 24 24' xmlns='http://www.w3.org/2000/svg' stroke-width='0' stroke='currentColor' fill='currentColor'>\n<g>\n<rect width='24' height='24' fill='none'/>\n</g>\n<g>\n<g>\n<polygon points='6.41,6 5,7.41 9.58,12 5,16.59 6.41,18 12.41,12'/>\n<polygon points='13,6 11.59,7.41 16.17,12 11.59,16.59 13,18 19,12'/>\n</g>\n</g>\n</svg>",()=>this.navigateYear(1))),o.appendChild(i),o.appendChild(s),o.appendChild(l),n.appendChild(o)}};Te.properties={"display-month":{type:"number",visual:!0,default:()=>(new Date).getMonth()+1,validate:n=>{const t=+n;return Number.isInteger(t)&&t>=1&&12>=t},coerce:n=>{const t=+n;return isNaN(t)||1>t||t>12?(new Date).getMonth()+1:t}},"display-year":{type:"number",visual:!0,default:()=>(new Date).getFullYear(),validate:n=>{const t=+n;return Number.isInteger(t)&&t>=1&&9999>=t},coerce:n=>{const t=+n;return isNaN(t)||1>t||t>9999?(new Date).getFullYear():t}},locale:{type:"string",visual:!0,default:"en-US"},size:{type:"string",visual:!0,default:"md",validate:n=>["sm","md","lg"].includes(n),coerce:n=>["sm","md","lg"].includes(n)?n:"md"},width:{type:"string",visual:!0,default:""}};let Me=Te;function De(n){return n&&/^\d{4}$/.test(n)?parseInt(n,10):null}function $e(n){if(!n||!/^\d{1,2}$/.test(n))return null;const t=parseInt(n,10);return 1>t||t>12?null:t}function Ae(n,t,e){if(!n||!/^\d{1,2}$/.test(n))return null;const o=parseInt(n,10),i=new Date(t,e,0).getDate();return 1>o||o>i?null:o}function Ie(n,t,e){return`${n}-${(""+t).padStart(2,"0")}-${(""+e).padStart(2,"0")}`}customElements.get("ty-calendar-navigation")||customElements.define("ty-calendar-navigation",Me);const Oe=class extends HTMLElement{constructor(){super(),this.Ot="en-US",this.Ft=!0,this.Ht=!1,this.lt="md";const n=function(){const n=new Date;return{year:n.getFullYear(),month:n.getMonth()+1,day:n.getDate()}}();this.dt={displayYear:n.year,displayMonth:n.month},this.attachShadow({mode:"open"}),"attachInternals"in this&&(this.m=this.attachInternals())}static get observedAttributes(){return["year","month","day","show-navigation","stateless","locale","name","size","width"]}connectedCallback(){this.initializeFromAttributes();const n=this.dayContentFn;n&&!this.qt&&(this.qt=n,delete this.dayContentFn);const t=this.customCSS;t&&!this.Rt&&(this.Rt=t,delete this.customCSS);const e=this.value;if(e&&"string"==typeof e&&e!==this.value){const n=e.match(/^(\d{4})-(\d{2})-(\d{2})$/);if(n){const t=parseInt(n[1],10),e=parseInt(n[2],10),o=parseInt(n[3],10);this.dt.selectedYear=t,this.dt.selectedMonth=e,this.dt.selectedDay=o,this.dt.displayYear=t,this.dt.displayMonth=e,this.Ht||(this.setAttribute("year",""+t),this.setAttribute("month",""+e),this.setAttribute("day",""+o))}delete this.value}this.render(),this.updateFormValue(),this.Z=W(this,()=>{this.render()})}disconnectedCallback(){this.Z&&(this.Z(),this.Z=void 0),this.jt=void 0,this.Wt=void 0}attributeChangedCallback(n,t,e){if(t!==e)switch(n){case"year":case"month":case"day":this.syncStateFromAttributes(),this.syncChildComponents(),this.updateFormValue();break;case"show-navigation":this.Ft="false"!==e,this.render();break;case"stateless":this.Ht=null!==e&&"false"!==e;break;case"locale":this.Ot=e||"en-US",this.syncChildComponents();break;case"size":"sm"!==e&&"md"!==e&&"lg"!==e||(this.lt=e,this.Pt=void 0,this.removeAttribute("width"),this.syncChildComponents());break;case"width":this.Pt=e||void 0,e&&(this.lt="md",this.removeAttribute("size")),this.syncChildComponents();break;case"name":this.updateFormValue()}}get year(){return this.dt.selectedYear}set year(n){void 0!==n?this.Ht?(this.dt.displayYear=n,this.setAttribute("year",""+n)):(this.dt.selectedYear=n,this.dt.displayYear=n,this.setAttribute("year",""+n)):(this.Ht||delete this.dt.selectedYear,this.removeAttribute("year")),this.syncChildComponents(),this.Ht||this.updateFormValue()}get month(){return this.dt.selectedMonth}set month(n){void 0!==n?this.Ht?(this.dt.displayMonth=n,this.setAttribute("month",""+n)):(this.dt.selectedMonth=n,this.dt.displayMonth=n,this.setAttribute("month",""+n)):(this.Ht||delete this.dt.selectedMonth,this.removeAttribute("month")),this.syncChildComponents(),this.Ht||this.updateFormValue()}get day(){return this.dt.selectedDay}set day(n){void 0!==n?(this.dt.selectedDay=n,this.setAttribute("day",""+n)):(delete this.dt.selectedDay,this.removeAttribute("day")),this.syncChildComponents(),this.updateFormValue()}get locale(){return j(this,this.getAttribute("locale"))}set locale(n){this.Ot=n,this.setAttribute("locale",n)}get showNavigation(){return this.Ft}set showNavigation(n){this.Ft=n,this.setAttribute("show-navigation",""+n)}get stateless(){return this.Ht}set stateless(n){this.Ht=n,n?this.setAttribute("stateless",""):this.removeAttribute("stateless")}get size(){return this.lt}set size(n){this.lt!==n&&(this.lt=n,this.Pt=void 0,this.removeAttribute("width"),this.setAttribute("size",n),this.syncChildComponents())}get width(){return this.Pt}set width(n){this.Pt!==n&&(this.Pt=n,n?(this.lt="md",this.removeAttribute("size"),this.setAttribute("width",n)):this.removeAttribute("width"),this.syncChildComponents())}get dayContentFn(){return this.qt}set dayContentFn(n){this.qt=n,this.syncChildComponents()}get customCSS(){return this.Rt}set customCSS(n){this.Rt=n,this.syncChildComponents()}get value(){const{selectedYear:n,selectedMonth:t,selectedDay:e}=this.dt;return n&&t&&e?Ie(n,t,e):""}set value(n){if(n){const t=n.match(/^(\d{4})-(\d{2})-(\d{2})$/);if(t){const n=parseInt(t[1],10),e=parseInt(t[2],10),o=parseInt(t[3],10);this.dt.selectedYear=n,this.dt.selectedMonth=e,this.dt.selectedDay=o,this.dt.displayYear=n,this.dt.displayMonth=e,this.Ht||(this.setAttribute("year",""+n),this.setAttribute("month",""+e),this.setAttribute("day",""+o))}}else delete this.dt.selectedYear,delete this.dt.selectedMonth,delete this.dt.selectedDay,this.Ht||(this.removeAttribute("year"),this.removeAttribute("month"),this.removeAttribute("day"));this.syncChildComponents(),this.Ht||this.updateFormValue()}initializeFromAttributes(){const n=this.getAttribute("year"),t=this.getAttribute("month"),e=this.getAttribute("day"),o=this.getAttribute("locale"),i=this.getAttribute("show-navigation"),r=this.getAttribute("stateless"),s=this.getAttribute("size"),a=this.getAttribute("width"),l=De(n);l&&(this.dt.displayYear=l);const d=$e(t);if(d&&(this.dt.displayMonth=d),l&&d){const n=Ae(e,l,d);n&&(this.dt.selectedYear=l,this.dt.selectedMonth=d,this.dt.selectedDay=n)}o&&(this.Ot=o),i&&(this.Ft="false"!==i),null!==r&&(this.Ht="false"!==r),!s||"sm"!==s&&"md"!==s&&"lg"!==s||(this.lt=s),a&&(this.Pt=a)}syncStateFromAttributes(){const n=this.getAttribute("year"),t=this.getAttribute("month"),e=this.getAttribute("day"),o=De(n),i=$e(t);if(o&&(this.dt.displayYear=o),i&&(this.dt.displayMonth=i),o&&i){const n=Ae(e,o,i);n?(this.dt.selectedYear=o,this.dt.selectedMonth=i,this.dt.selectedDay=n):(delete this.dt.selectedYear,delete this.dt.selectedMonth,delete this.dt.selectedDay)}else delete this.dt.selectedYear,delete this.dt.selectedMonth,delete this.dt.selectedDay}syncChildComponents(){if(this.jt&&(this.jt.displayMonth=this.dt.displayMonth,this.jt.displayYear=this.dt.displayYear,this.jt.locale=this.locale,this.jt.size=this.lt,this.jt.width=this.Pt),this.Wt){this.Wt.displayMonth=this.dt.displayMonth,this.Wt.displayYear=this.dt.displayYear,this.Wt.locale=this.locale,this.Wt.size=this.lt,this.Wt.width=this.Pt,this.qt&&(this.Wt.dayContentFn=this.qt),this.Rt&&(this.Wt.customCSS=this.Rt);const{selectedYear:n,selectedMonth:t,selectedDay:e}=this.dt;this.Wt.value=n&&t&&e?new Date(n,t-1,e).getTime():null}}updateFormValue(){if(this.Ht)return;if(!this.m)return;const n=this.getAttribute("name"),{selectedYear:t,selectedMonth:e,selectedDay:o}=this.dt;if(n&&t&&e&&o){const n=Ie(t,e,o);this.m.setFormValue(n)}else this.m.setFormValue("")}handleNavigationChange(n){n.preventDefault(),n.stopPropagation();const{month:t,year:e}=n.detail;this.dt.displayMonth=t,this.dt.displayYear=e,this.syncChildComponents(),this.dispatchEvent(new CustomEvent("navigate",{detail:{month:t,year:e,action:"navigate",source:"navigation"},bubbles:!0,composed:!0,cancelable:!1}))}handleDayClick(n){n.preventDefault(),n.stopPropagation();const{dayContext:t,year:e,month:o,day:i}=n.detail;this.Ht?this.dispatchEvent(new CustomEvent("day-click",{detail:n.detail,bubbles:!0,composed:!0,cancelable:!0})):(this.dt.selectedYear=e,this.dt.selectedMonth=o,this.dt.selectedDay=i,this.dt.displayYear=e,this.dt.displayMonth=o,this.setAttribute("year",""+e),this.setAttribute("month",""+o),this.setAttribute("day",""+i),this.updateFormValue(),this.syncChildComponents(),this.dispatchEvent(new CustomEvent("change",{detail:{year:e,month:o,day:i,action:"select",source:"day-click",dayContext:t},bubbles:!0,composed:!0,cancelable:!1})))}refresh(){this.syncChildComponents(),this.Wt&&"function"==typeof this.Wt.refresh&&this.Wt.refresh()}createNavigation(){const n=document.createElement("ty-calendar-navigation");return n.displayMonth=this.dt.displayMonth,n.displayYear=this.dt.displayYear,n.locale=this.locale,n.size=this.lt,this.Pt&&(n.width=this.Pt),n.addEventListener("change",n=>this.handleNavigationChange(n)),this.jt=n,n}createMonthDisplay(){const n=document.createElement("ty-calendar-month");n.displayMonth=this.dt.displayMonth,n.displayYear=this.dt.displayYear,n.locale=this.locale,n.size=this.lt,this.Pt&&(n.width=this.Pt);const{selectedYear:t,selectedMonth:e,selectedDay:o}=this.dt;return t&&e&&o&&(n.value=new Date(t,e-1,o).getTime()),this.qt&&(n.dayContentFn=this.qt),this.Rt&&(n.customCSS=this.Rt),n.addEventListener("day-click",n=>this.handleDayClick(n)),this.Wt=n,n}render(){const n=this.shadowRoot;if(!n)return;r(n,{css:"\n/* ============================================================================\n Calendar Container\n ============================================================================ */\n\n.calendar-container {\n display: flex;\n flex-direction: column;\n gap: 0.125rem;\n box-sizing: border-box;\n font-family: system-ui, sans-serif;\n}\n\n/* ============================================================================\n Responsive Adjustments\n ============================================================================ */\n\n@media (max-width: 320px) {\n .calendar-container {\n gap: 0.375rem;\n }\n}\n",id:"ty-calendar"}),n.innerHTML="";const t=document.createElement("div");if(t.className="calendar-container",this.Ft){const n=this.createNavigation();t.appendChild(n)}const e=this.createMonthDisplay();t.appendChild(e),n.appendChild(t)}};Oe.formAssociated=!0;let Le=Oe;customElements.get("ty-calendar")||customElements.define("ty-calendar",Le);const Ne='\n/* Date Picker Component Styles */\n:host {\n display: block;\n width: auto;\n min-width: 200px;\n\n /* ==========================================================================\n Theming Tokens — Date Picker Stub\n Thin shim over --ty-input-*. Override these to retheme just the date-picker\n trigger without affecting other inputs.\n ========================================================================== */\n --ty-date-picker-bg: var(--ty-input-bg);\n --ty-date-picker-color: var(--ty-input-color);\n --ty-date-picker-placeholder: var(--ty-input-placeholder);\n --ty-date-picker-border: var(--ty-input-border);\n --ty-date-picker-border-hover: var(--ty-input-border-hover);\n --ty-date-picker-border-focus: var(--ty-input-border-focus);\n --ty-date-picker-shadow-focus: var(--ty-input-shadow-focus);\n --ty-date-picker-disabled-bg: var(--ty-input-disabled-bg);\n --ty-date-picker-disabled-color: var(--ty-input-disabled-color);\n --ty-date-picker-radius: var(--ty-radius-md);\n\n /* ==========================================================================\n Theming Tokens — Calendar Popup Surface\n Shared with ty-calendar / ty-calendar-month theming.\n ========================================================================== */\n --ty-calendar-surface-bg: var(--ty-surface-floating);\n --ty-calendar-surface-border: var(--ty-input-border);\n --ty-calendar-surface-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.1);\n --ty-calendar-surface-radius: var(--ty-radius-lg);\n\n /* ==========================================================================\n Theming Tokens — Time Section\n ========================================================================== */\n --ty-calendar-time-bg: var(--ty-bg-neutral-faint);\n --ty-calendar-time-border: var(--ty-input-border);\n --ty-calendar-time-label-color: var(--ty-color-neutral);\n --ty-calendar-time-input-color: var(--ty-input-color);\n --ty-calendar-time-placeholder-color: var(--ty-input-placeholder);\n --ty-calendar-time-icon-color: var(--ty-color-neutral-soft);\n}\n\n/* Container structure (reuses dropdown patterns) */\n.dropdown-container {\n display: flex;\n flex-direction: column;\n width: 100%;\n box-sizing: border-box;\n}\n\n.dropdown-label {\n font-size: 14px;\n font-weight: 500;\n color: var(--ty-label-color);\n margin-bottom: 6px;\n line-height: 1.25;\n padding-left: 12px;\n}\n\n.required-icon {\n display: inline-flex;\n align-items: center;\n color: #ef4444;\n width: 12px;\n height: 12px;\n vertical-align: middle;\n margin-left: 4px;\n}\n\n.dropdown-wrapper {\n position: relative;\n display: block;\n width: 100%;\n}\n\n/* Start-slot icon (leading content inside the date-picker stub) */\n.date-picker-stub ::slotted([slot="start"]) {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin-right: 0.5rem;\n color: var(--ty-color-text-soft);\n}\n\n.date-picker-stub ::slotted(ty-icon[slot="start"]) {\n width: 1em;\n height: 1em;\n}\n\n/* Date picker stub (styled like dropdown) */\n.date-picker-stub {\n width: 100%;\n cursor: pointer;\n box-sizing: border-box;\n position: relative;\n display: flex;\n align-items: center;\n background: var(--ty-date-picker-bg);\n color: var(--ty-date-picker-color);\n border: 1px solid var(--ty-date-picker-border);\n border-radius: var(--ty-date-picker-radius);\n font-family: var(--ty-font-sans);\n font-size: var(--ty-font-sm);\n font-weight: var(--ty-font-normal);\n line-height: var(--ty-line-height-tight);\n min-height: var(--ty-size-md);\n padding: var(--ty-spacing-2) var(--ty-spacing-3);\n padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n transition: var(--ty-transition-all), opacity 0.2s ease;\n outline: none;\n}\n\n.date-picker-stub:hover:not([disabled]):not(.open) {\n border-color: var(--ty-date-picker-border-hover);\n}\n\n.date-picker-stub[disabled] {\n background-color: var(--ty-date-picker-disabled-bg);\n color: var(--ty-date-picker-disabled-color);\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n.date-picker-stub:focus,\n.date-picker-stub.open {\n border-color: var(--ty-date-picker-border-focus);\n box-shadow: 0 0 0 3px var(--ty-date-picker-shadow-focus);\n}\n\n/* Size variants */\n.date-picker-stub.xs {\n min-height: var(--ty-size-xs);\n font-size: var(--ty-font-xs);\n padding: var(--ty-spacing-1) var(--ty-spacing-2);\n padding-right: calc(var(--ty-spacing-2) + 0.875rem + var(--ty-spacing-1));\n}\n\n.date-picker-stub.sm {\n min-height: var(--ty-size-sm);\n font-size: var(--ty-font-xs);\n padding: var(--ty-spacing-1) var(--ty-spacing-2);\n padding-right: calc(var(--ty-spacing-2) + 0.875rem + var(--ty-spacing-1));\n}\n\n.date-picker-stub.lg {\n min-height: var(--ty-size-lg);\n font-size: var(--ty-font-base);\n padding: var(--ty-spacing-2) var(--ty-spacing-4);\n padding-right: calc(var(--ty-spacing-4) + 1.125rem + var(--ty-spacing-2));\n}\n\n.date-picker-stub.xl {\n min-height: var(--ty-size-xl);\n font-size: var(--ty-font-lg);\n padding: var(--ty-spacing-3) var(--ty-spacing-4);\n padding-right: calc(var(--ty-spacing-4) + 1.25rem + var(--ty-spacing-3));\n}\n\n/* Flavor variants */\n/* Primary - Main brand focus state */\n.date-picker-stub.primary {\n border-color: var(--ty-input-primary-border, var(--ty-color-primary));\n}\n\n.date-picker-stub.primary:hover:not([disabled]) {\n border-color: var(--ty-color-primary-mild);\n}\n\n.date-picker-stub.primary:focus,\n.date-picker-stub.primary.open {\n border-color: var(--ty-color-primary-mild);\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n/* Secondary - Supporting action focus state */\n.date-picker-stub.secondary {\n border-color: var(--ty-input-secondary-border, var(--ty-color-secondary));\n}\n\n.date-picker-stub.secondary:hover:not([disabled]) {\n border-color: var(--ty-color-secondary-mild);\n}\n\n.date-picker-stub.secondary:focus,\n.date-picker-stub.secondary.open {\n border-color: var(--ty-color-secondary-mild);\n box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);\n}\n\n/* Success - Valid/confirmed input state */\n.date-picker-stub.success {\n border-color: var(--ty-input-success-border, var(--ty-color-success));\n}\n\n.date-picker-stub.success:hover:not([disabled]) {\n border-color: var(--ty-color-success-mild);\n}\n\n.date-picker-stub.success:focus,\n.date-picker-stub.success.open {\n border-color: var(--ty-color-success-mild);\n box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);\n}\n\n/* Danger - Error/invalid input state */\n.date-picker-stub.danger {\n border-color: var(--ty-input-danger-border, var(--ty-color-danger));\n}\n\n.date-picker-stub.danger:hover:not([disabled]) {\n border-color: var(--ty-color-danger-mild);\n}\n\n.date-picker-stub.danger:focus,\n.date-picker-stub.danger.open {\n border-color: var(--ty-color-danger-mild);\n box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);\n}\n\n/* Warning - Caution/attention needed input state */\n.date-picker-stub.warning {\n border-color: var(--ty-input-warning-border, var(--ty-color-warning));\n}\n\n.date-picker-stub.warning:hover:not([disabled]) {\n border-color: var(--ty-color-warning-mild);\n}\n\n.date-picker-stub.warning:focus,\n.date-picker-stub.warning.open {\n border-color: var(--ty-color-warning-mild);\n box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);\n}\n\n/* Text content */\n.stub-text {\n flex: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n user-select: none;\n color: inherit;\n pointer-events: none;\n}\n\n.stub-text.placeholder {\n color: var(--ty-date-picker-placeholder);\n}\n\n/* Icons */\n.stub-icons {\n display: flex;\n align-items: center;\n gap: var(--ty-spacing-1);\n position: absolute;\n right: var(--ty-spacing-3);\n top: 50%;\n transform: translateY(-50%);\n height: 1rem;\n pointer-events: none;\n z-index: 2;\n}\n\n.stub-clear {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1rem;\n height: 1rem;\n padding: 0;\n border: none;\n background: none;\n color: var(--ty-color-neutral-soft);\n cursor: pointer;\n border-radius: var(--ty-radius-sm);\n transition: all 0.15s ease;\n pointer-events: auto;\n}\n\n.stub-clear:hover {\n color: var(--ty-color-negative);\n background-color: var(--ty-bg-negative-faint);\n}\n\n.stub-arrow {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1rem;\n height: 1rem;\n color: var(--ty-color-neutral-soft);\n}\n\n.date-picker-stub:hover .stub-arrow {\n color: var(--ty-color-neutral);\n}\n\n.date-picker-stub:focus .stub-arrow,\n.date-picker-stub.open .stub-arrow {\n color: var(--ty-date-picker-border-focus);\n}\n\n/* Calendar dialog (showModal positioning system) */\n.calendar-dialog {\n position: fixed;\n flex-direction: column;\n max-width: 90vw;\n margin: 0;\n padding: 0;\n border: none;\n background: transparent;\n box-sizing: border-box;\n padding: var(--calendar-padding, 8px);\n\n /* Hidden by default */\n opacity: 0;\n transition: opacity 200ms ease;\n\n transform: translate(var(--calendar-offset-x, 0px), var(--calendar-offset-y, 0px));\n top: -1000px;\n left: -1000px;\n}\n\n/* Direction-based positioning with CSS classes */\n.calendar-dialog.position-below {\n left: var(--calendar-x);\n top: var(--calendar-y);\n}\n\n.calendar-dialog.position-above {\n left: var(--calendar-x);\n bottom: var(--calendar-y);\n top: auto;\n flex-direction: column-reverse;\n}\n\n.calendar-dialog.open {\n opacity: 1;\n}\n\n.calendar-dialog::backdrop {\n background: transparent\n}\n\n/* Calendar content container */\n.calendar-content {\n background-color: var(--ty-calendar-surface-bg);\n border: 1px solid var(--ty-calendar-surface-border);\n border-radius: var(--ty-calendar-surface-radius);\n box-shadow: var(--ty-calendar-surface-shadow);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n/* Native date input for mobile */\n/* Native input is invisible — used only to trigger the OS picker */\n.native-date-input {\n position: absolute;\n inset: 0;\n opacity: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n border: none;\n cursor: pointer;\n z-index: 1;\n}\n\n.native-date-input::-webkit-calendar-picker-indicator {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n cursor: pointer;\n}\n\n/* Time input section */\n.time-section {\n display: flex;\n min-height: 2.5rem;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n padding: 0.5rem 1rem;\n border-top: 1px solid var(--ty-calendar-time-border);\n background-color: var(--ty-calendar-time-bg);\n width: 100%;\n box-sizing: border-box;\n position: relative;\n}\n\n.time-label {\n font-size: var(--ty-font-sm);\n font-weight: 500;\n color: var(--ty-calendar-time-label-color);\n flex-shrink: 0;\n}\n\n.time-input {\n width: 3.5rem;\n border: none;\n border-radius: var(--ty-radius-sm);\n background: transparent;\n color: var(--ty-calendar-time-input-color);\n font-family: var(--ty-font-sans);\n font-size: var(--ty-font-sm);\n text-align: center;\n outline: none;\n}\n\n.time-input::placeholder {\n color: var(--ty-calendar-time-placeholder-color);\n}\n\n.time-icon {\n display: flex;\n align-items: center;\n color: var(--ty-calendar-time-icon-color);\n width: 1rem;\n height: 1rem;\n flex-shrink: 0;\n}\n',qe="<svg stroke='currentColor' fill='none' stroke-width='2' viewBox='0 0 24 24' width='16' height='16' xmlns='http://www.w3.org/2000/svg'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'></rect><line x1='16' y1='2' x2='16' y2='6'></line><line x1='8' y1='2' x2='8' y2='6'></line><line x1='3' y1='10' x2='21' y2='10'></line></svg>",Re="<svg stroke='currentColor' fill='none' stroke-width='2' viewBox='0 0 24 24' width='14' height='14' xmlns='http://www.w3.org/2000/svg'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>";function Pe(n,t){if(!n)return null;let e=null;if("string"==typeof n)if(/^\d{4}-\d{2}-\d{2}$/.test(n)){const[t,o,i]=n.split("-");e=new Date(parseInt(t,10),parseInt(o,10)-1,parseInt(i,10),0,0,0,0)}else e=new Date(n);else"number"==typeof n&&(e=new Date(n));return!e||isNaN(e.getTime())?null:{year:e.getFullYear(),month:e.getMonth()+1,day:e.getDate(),hour:t?e.getHours():0,minute:t?e.getMinutes():0}}function Ve(n){const{year:t,month:e,day:o,hour:i,minute:r}=n;return t&&e&&o?new Date(t,e-1,o,i||0,r||0,0,0):null}function Be(n){if(!n.year||!n.month||!n.day)return null;const t=Ve(n);return t?t.toISOString():null}function Fe(n,t){if(!n.year||!n.month||!n.day)return null;const e=(""+n.year).padStart(4,"0"),o=(""+n.month).padStart(2,"0"),i=(""+n.day).padStart(2,"0");return t?`${e}-${o}-${i}T${(""+(n.hour||0)).padStart(2,"0")}:${(""+(n.minute||0)).padStart(2,"0")}`:`${e}-${o}-${i}`}function He(n,t){return`${(""+n).padStart(2,"0")}:${(""+t).padStart(2,"0")}`}function je(n){switch(n){case 0:return 1;case 1:return 3;case 3:return 4;case 4:case 5:return 5;default:return n}}class We{constructor(n,t,e=0,o=0){this.element=n,this.datePickerElement=t;const i=He(e,o);this.state={hour:e,minute:o,caretPosition:0,displayValue:i,rawDigits:(""+e).padStart(2,"0")+(""+o).padStart(2,"0")},this.element.value=i,this.setupEventListeners()}setupEventListeners(){this.element.addEventListener("keydown",n=>this.handleKeyDown(n)),this.element.addEventListener("input",n=>this.handleInput(n)),this.element.addEventListener("click",n=>this.handleClick(n)),this.element.addEventListener("focus",n=>this.handleFocus(n))}handleKeyDown(n){const t=n.key;switch(t){case"ArrowRight":this.handleArrowRight(n);break;case"ArrowLeft":this.handleArrowLeft(n);break;case"Backspace":this.handleBackspace(n);break;case"Delete":this.handleDelete(n);break;case"Home":n.preventDefault(),this.updateState({caretPosition:0});break;case"End":n.preventDefault(),this.updateState({caretPosition:5});break;case"Tab":break;default:/^\d$/.test(t)&&this.handleDigitInput(n,parseInt(t,10))}}handleInput(n){n.preventDefault()}handleClick(n){this.updateState({caretPosition:0})}handleFocus(n){this.updateState({caretPosition:0})}handleArrowRight(n){n.preventDefault();const t=je(this.state.caretPosition);this.updateState({caretPosition:t})}handleArrowLeft(n){n.preventDefault();const t=function(n){switch(n){case 5:return 4;case 4:return 3;case 3:return 1;case 1:case 0:return 0;default:return n}}(this.state.caretPosition);this.updateState({caretPosition:t})}handleDigitInput(n,t){n.preventDefault();const e=this.state.caretPosition;if(![0,1,3,4].includes(e))return;if(!function(n,t,e){switch(t){case 0:return 2>=n;case 1:return 2!==parseInt(e[0],10)||3>=n;case 3:return 5>=n;case 4:return!0;default:return!1}}(t,e,this.state.rawDigits))return;const o=this.replaceDigitAtPosition(e,t);if(!o)return;const i=je(e);this.updateState({...o,caretPosition:i}),this.notifyTimeChange()}handleBackspace(n){n.preventDefault();const t=this.state.caretPosition;if(0===t)return;const e=1===t?0:3===t?1:4===t?3:5===t?4:0,o=this.zeroDigitAtPosition(e);o&&(this.updateState({...o,caretPosition:e}),this.notifyTimeChange())}handleDelete(n){n.preventDefault();const t=this.state.caretPosition;if(![0,1,3,4].includes(t))return;const e=this.zeroDigitAtPosition(t);e&&(this.updateState({...e,caretPosition:t}),this.notifyTimeChange())}replaceDigitAtPosition(n,t){const e=function(n){switch(n){case 0:default:return 0;case 1:return 1;case 3:return 2;case 4:return 3}}(n),o=this.state.rawDigits.split("");o[e]=""+t;const i=o.join(""),r=function(n){if(!n||4!==n.length)return null;const t=n.substring(0,2),e=n.substring(2,4),o=parseInt(t,10),i=parseInt(e,10);return 0>o||o>23||0>i||i>59?null:{hour:o,minute:i}}(i);return r?{rawDigits:i,hour:r.hour,minute:r.minute,displayValue:He(r.hour,r.minute)}:null}zeroDigitAtPosition(n){return this.replaceDigitAtPosition(n,0)}updateState(n){this.state={...this.state,...n},this.element.value=this.state.displayValue;const t=this.state.caretPosition,e=0===t?0:1===t?1:2===t||3===t?3:4===t?4:5===t?5:t;this.element.setSelectionRange(e,e)}notifyTimeChange(){this.datePickerElement.handleTimeInputChange(this.state.hour,this.state.minute)}getTime(){return{hour:this.state.hour,minute:this.state.minute}}setTime(n,t){const e=He(n,t);this.state={...this.state,hour:n,minute:t,displayValue:e,rawDigits:(""+n).padStart(2,"0")+(""+t).padStart(2,"0")},this.element.value=e}}const Ye=class extends o{constructor(){super(),this.dt={withTime:!1,open:!1},this.Yt=0,r(this.shadowRoot,{css:Ne,id:"ty-date-picker"})}onConnect(){this.initializeState(),this.render(),this.Z=W(this,()=>{this.render()})}onDisconnect(){this.Z&&(this.Z(),this.Z=void 0),this.cleanup()}onPropertiesChanged(n){for(const{name:t,newValue:e}of n)switch(t){case"size":case"flavor":case"label":case"placeholder":case"required":case"disabled":case"clearable":case"format":case"locale":break;case"value":{const n=Pe(e,this.dt.withTime);if(null===n){(void 0!==this.dt.year||void 0!==this.dt.month||void 0!==this.dt.day)&&(this.dt={withTime:this.dt.withTime,open:this.dt.open});break}const t={year:this.dt.year,month:this.dt.month,day:this.dt.day,hour:this.dt.hour,minute:this.dt.minute};(n?.year!==t.year||n?.month!==t.month||n?.day!==t.day||n?.hour!==t.hour||n?.minute!==t.minute)&&(this.dt={...this.dt,...n});break}case"with-time":e!==this.dt.withTime&&(this.dt.withTime=e,void 0!==this.dt.year&&void 0!==this.dt.month&&void 0!==this.dt.day&&this.syncFormValue())}}getFormValue(){return Be(this.getComponents())}getComponents(){return{year:this.dt.year,month:this.dt.month,day:this.dt.day,hour:this.dt.hour,minute:this.dt.minute}}hasDate(){return!!(this.dt.year&&this.dt.month&&this.dt.day)}getFormattedValue(n){const t=n||this.getComponents();return t.year&&t.month&&t.day?function(n,t,e,o){if(!n.year||!n.month||!n.day)return null;const i=Ve(n);if(!i)return null;const r={dateStyle:t};return o&&(r.timeStyle="short"),new Intl.DateTimeFormat(e,r).format(i)}(t,this.getProperty("format")||"long",j(this,this.getProperty("locale")),this.dt.withTime):null}initializeState(){const n=this.getProperty("value"),t=this.getProperty("with-time"),e=Pe(n,t);this.dt=null===e?{withTime:t,open:!1}:{...e,withTime:t,open:!1},this.syncFormValue()}updateState(n,t=!1){this.dt={...this.dt,...n},(t||!this.dt.open||!this.dt.withTime)&&this.syncFormValue()}syncFormValue(){const n=this.getFormValue();n!==this.getProperty("value")&&this.setProperty("value",n||null)}handleTimeInputChange(n,t){if(!this.hasDate())return;const e={...this.getComponents(),hour:n,minute:t};this.updateState(e,!0),this.emitChangeEvent(e,"time-change")}emitChangeEvent(n,t){const e=n?Be(n):null,o=n?Fe(n,this.dt.withTime):null,i=n?Ve(n)?.getTime()??null:null,r=n?this.getFormattedValue(n):null,s=new CustomEvent("change",{detail:{value:e,localValue:o,milliseconds:i,formatted:r,source:t},bubbles:!0,cancelable:!0});this.dispatchEvent(s)}get size(){return this.getProperty("size")}set size(n){this.setProperty("size",n)}get flavor(){return this.getProperty("flavor")}set flavor(n){this.setProperty("flavor",n)}get label(){return this.getProperty("label")}set label(n){this.setProperty("label",n)}get placeholder(){return this.getProperty("placeholder")}set placeholder(n){this.setProperty("placeholder",n)}get name(){return this.getProperty("name")}set name(n){this.setProperty("name",n)}get format(){return this.getProperty("format")}set format(n){this.setProperty("format",n)}get locale(){return this.getProperty("locale")}set locale(n){this.setProperty("locale",n)}get required(){return this.getProperty("required")}set required(n){this.setProperty("required",n)}get disabled(){return this.getProperty("disabled")}set disabled(n){this.setProperty("disabled",n)}get clearable(){return this.getProperty("clearable")}set clearable(n){this.setProperty("clearable",n)}get withTime(){return this.getProperty("with-time")}set withTime(n){this.setProperty("with-time",n)}get value(){return this.getProperty("value")||null}set value(n){if(null==n||""===n)this.setProperty("value",null);else{const t=n instanceof Date?n.toISOString():n;this.setProperty("value",t)}}buildStubClasses(){const n=["date-picker-stub"],t=this.getProperty("size")||"md",e=this.getProperty("flavor");return n.push(t),e&&"default"!==e&&n.push(e),this.getProperty("disabled")&&n.push("disabled"),this.getProperty("required")&&n.push("required"),this.dt.open&&n.push("open"),n.join(" ")}renderStub(){const n=document.createElement("div");n.className=this.buildStubClasses();const t=this.getProperty("disabled");t&&n.setAttribute("disabled","true");const e=document.createElement("slot");e.name="start";const o=document.createElement("span");o.className="stub-text";const i=this.getFormattedValue(),r=this.getProperty("placeholder")||"Select date...";o.textContent=i||r,i||o.classList.add("placeholder");const s=document.createElement("div");if(s.className="stub-icons",this.getProperty("clearable")&&i&&!t){const n=document.createElement("button");n.className="stub-clear",n.type="button",n.innerHTML=Re,n.addEventListener("click",n=>this.handleClearClick(n)),s.appendChild(n)}const a=document.createElement("span");return a.className="stub-arrow",a.innerHTML=qe,s.appendChild(a),n.addEventListener("click",n=>this.handleStubClick(n)),n.appendChild(e),n.appendChild(o),n.appendChild(s),n}createTimeInputElement(){const n=document.createElement("input");return n.type="text",n.className="time-input",n.placeholder="HH:mm",n.autocomplete="off",n.maxLength=5,n}renderTimeSection(){const n=document.createElement("div");n.className="time-section";const t=document.createElement("label");t.className="time-label",t.textContent="Time:";const e=this.createTimeInputElement();this._t=new We(e,this,this.dt.hour||0,this.dt.minute||0);const o=document.createElement("span");return o.className="time-icon",o.innerHTML="<svg stroke='currentColor' fill='none' stroke-width='2' viewBox='0 0 24 24' width='16' height='16' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='10'></circle><polyline points='12,6 12,12 16,14'></polyline></svg>",n.appendChild(t),n.appendChild(e),n.appendChild(o),n}renderCalendarDropdown(){const n=document.createElement("dialog");n.className="calendar-dialog";const t=document.createElement("div");t.className="calendar-content";const e=document.createElement("ty-calendar");this.dt.year&&this.dt.month&&this.dt.day&&(e.setAttribute("year",""+this.dt.year),e.setAttribute("month",""+this.dt.month),e.setAttribute("day",""+this.dt.day));const o=j(this,this.getProperty("locale"));return o&&e.setAttribute("locale",o),e.addEventListener("change",n=>this.handleCalendarChange(n)),t.appendChild(e),this.dt.withTime&&t.appendChild(this.renderTimeSection()),n.appendChild(t),n.addEventListener("close",()=>{this.updateState({open:!1})}),n}renderNativeInput(){const n=document.createElement("div");n.className="dropdown-wrapper";const t=document.createElement("div");t.className=this.buildStubClasses();const e=this.getProperty("disabled");e&&t.setAttribute("disabled","true");const o=document.createElement("input");o.className="native-date-input",o.type=this.dt.withTime?"datetime-local":"date",e&&(o.disabled=!0),this.getProperty("required")&&(o.required=!0);const i=Fe(this.getComponents(),this.dt.withTime);i&&(o.value=i);const r=this.getProperty("placeholder")||"Select date...",s=this.getFormattedValue(),a=document.createElement("span");a.className="stub-text"+(s?"":" placeholder"),a.textContent=s||r,o.addEventListener("change",()=>{if(!o.value)return void this.clearValue();const n=Pe(o.value,this.dt.withTime);n&&(this.updateState(n,!0),this.emitChangeEvent(n,"selection"))});const l=document.createElement("slot");l.name="start",t.appendChild(l),t.appendChild(o),t.appendChild(a);const d=document.createElement("div");if(d.className="stub-icons",this.getProperty("clearable")&&i&&!e){const n=document.createElement("button");n.className="stub-clear",n.type="button",n.innerHTML=Re,n.addEventListener("click",n=>this.handleClearClick(n)),d.appendChild(n)}const c=document.createElement("span");return c.className="stub-arrow",c.innerHTML=qe,d.appendChild(c),t.appendChild(d),n.appendChild(t),n}calculateCalendarPosition(){if(!this.shadowRoot)return;if(B())return;const n=this.shadowRoot.querySelector(".date-picker-stub"),t=this.shadowRoot.querySelector(".calendar-dialog");if(!n||!t)return;const e=n.getBoundingClientRect(),o=window.innerHeight,i=window.innerWidth,r=e.top,s=o-e.bottom>=400,a=e.width>i-e.left?Math.max(0,i-e.width-0):e.left-8,l=s?e.bottom:400>r?Math.max(0,Math.min(e.bottom,o-400-0)):o-e.top;this.style.setProperty("--calendar-x",a+"px"),this.style.setProperty("--calendar-y",l+"px"),this.style.setProperty("--calendar-offset-x","0px"),this.style.setProperty("--calendar-offset-y","0px"),s?(t.classList.add("position-below"),t.classList.remove("position-above")):(t.classList.add("position-above"),t.classList.remove("position-below"))}renderContainer(){const n=document.createElement("div");n.className="dropdown-container";const t=this.getProperty("label");if(t){const e=document.createElement("label");e.className="dropdown-label",e.innerHTML=t+(this.getProperty("required")?'<span class="required-icon">*</span>':""),n.appendChild(e)}return n}render(){if(!this.shadowRoot)return;if(r(this.shadowRoot,{css:Ne,id:"ty-date-picker"}),B()){if(this.shadowRoot.querySelector(".native-date-input"))return void this.updateDisplay();this.shadowRoot.innerHTML="";const n=this.renderContainer();return n.appendChild(this.renderNativeInput()),void this.shadowRoot.appendChild(n)}const n=this.shadowRoot.querySelector(".calendar-dialog");if(n&&n.open&&this.dt.open)return this.updateDisplay(),void this.calculateCalendarPosition();this.shadowRoot.innerHTML="";const t=this.renderContainer(),e=document.createElement("div");e.className="dropdown-wrapper",e.appendChild(this.renderStub()),e.appendChild(this.renderCalendarDropdown()),t.appendChild(e),this.shadowRoot.appendChild(t),this.setupEventListeners()}updateDisplay(){if(!this.shadowRoot)return;const n=this.getFormattedValue(),t=this.getProperty("placeholder")||"Select date...",e=this.hasDate(),o=this.getProperty("clearable"),i=this.getProperty("disabled"),r=this.shadowRoot.querySelector(".stub-text");r&&(r.textContent=n||t,r.classList.toggle("placeholder",!n));const s=this.shadowRoot.querySelector(".stub-clear");if(s&&(s.style.display=o&&e&&!i?"":"none"),B()){const n=this.shadowRoot.querySelector(".native-date-input");if(n){const t=Fe(this.getComponents(),this.dt.withTime);n.value=t||""}return}const a=this.shadowRoot.querySelector("ty-calendar");a&&e&&(a.setAttribute("year",""+this.dt.year),a.setAttribute("month",""+this.dt.month),a.setAttribute("day",""+this.dt.day)),this._t&&void 0!==this.dt.hour&&void 0!==this.dt.minute&&this._t.setTime(this.dt.hour,this.dt.minute)}setupEventListeners(){this.Ut&&document.removeEventListener("click",this.Ut),this.Gt&&document.removeEventListener("keydown",this.Gt),this.Ut=n=>this.handleOutsideClick(n),this.Gt=n=>this.handleEscapeKey(n),document.addEventListener("click",this.Ut),document.addEventListener("keydown",this.Gt);const n=this.shadowRoot?.querySelector(".calendar-dialog");n&&(this.Xt=n=>this.handleDialogClick(n),n.addEventListener("click",this.Xt))}handleStubClick(n){n.preventDefault(),!this.getProperty("disabled")&&Date.now()-this.Yt>300&&this.openDropdown()}clearValue(){this.updateState({year:void 0,month:void 0,day:void 0,hour:void 0,minute:void 0},!0),this.value=null,this.emitChangeEvent(null,"clear"),this.render()}handleClearClick(n){n.preventDefault(),n.stopPropagation(),this.clearValue()}handleCalendarChange(n){n.preventDefault(),n.stopPropagation();const t=n.detail.dayContext;if(!t)return;const e={year:t.year,month:t.month,day:t.dayInMonth,hour:this.dt.hour,minute:this.dt.minute};this.updateState(e,!0),this.emitChangeEvent(e,"selection"),this.dt.withTime?requestAnimationFrame(()=>{if(!this.shadowRoot)return;const n=this.shadowRoot.querySelector(".time-input");n&&n.focus()}):this.closeDropdown()}handleDialogClick(n){if(!this.shadowRoot)return;const t=this.shadowRoot.querySelector(".calendar-dialog"),e=this.shadowRoot.querySelector(".calendar-content");n.target===t&&this.dt.open&&e&&!e.contains(n.target)&&(n.preventDefault(),n.stopPropagation(),this.closeDropdown())}handleOutsideClick(n){if(!this.shadowRoot)return;const t=n.target,e=this.shadowRoot.querySelector(".calendar-dialog");this.dt.open&&e&&!this.contains(t)&&!e.contains(t)&&this.closeDropdown()}handleEscapeKey(n){"Escape"===n.key&&this.dt.open&&(n.preventDefault(),this.closeDropdown())}openDropdown(){this.dt.open||B()||(this.updateState({open:!0}),this.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0})),this.render(),requestAnimationFrame(()=>{if(!this.shadowRoot)return;const n=this.shadowRoot.querySelector(".calendar-dialog");if(n){Un("date-picker-"+(this.id||""+this)),n.showModal(),this.calculateCalendarPosition(),n.classList.add("open");const t=this.shadowRoot.activeElement;t&&t.blur()}}))}closeDropdown(){if(!this.dt.open)return;this.Yt=Date.now();const n="date-picker-"+(this.id||""+this);if(this.updateState({open:!1},!0),Gn(n),this.shadowRoot){const n=this.shadowRoot.querySelector(".calendar-dialog");n&&(n.classList.remove("position-above","position-below","open"),n.close())}this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0})),this.render()}cleanup(){if(this.Ut&&document.removeEventListener("click",this.Ut),this.Gt&&document.removeEventListener("keydown",this.Gt),this.Xt&&this.shadowRoot){const n=this.shadowRoot.querySelector(".calendar-dialog");n&&n.removeEventListener("click",this.Xt)}this.dt.open&&Gn("date-picker-"+(this.id||""+this)),this.Ut=void 0,this.Gt=void 0,this.Xt=void 0,this._t=void 0}};Ye.properties={size:{type:"string",visual:!0,default:"md",validate:n=>["xs","sm","md","lg","xl"].includes(n),coerce:n=>["xs","sm","md","lg","xl"].includes(n)?n:"md"},flavor:{type:"string",visual:!0,default:"default"},label:{type:"string",visual:!0,default:""},placeholder:{type:"string",visual:!0,default:"Select date..."},name:{type:"string",visual:!1,default:""},required:{type:"boolean",visual:!0,default:!1},disabled:{type:"boolean",visual:!0,default:!1},clearable:{type:"boolean",visual:!0,default:!0,aliases:{"not-clearable":!1}},format:{type:"string",visual:!0,default:"long",validate:n=>["short","medium","long","full"].includes(n),coerce:n=>["short","medium","long","full"].includes(n)?n:"long"},locale:{type:"string",visual:!0,default:""},value:{type:"string",visual:!0,formValue:!0,emitChange:!1,default:null},"with-time":{type:"boolean",visual:!0,default:!1}},Ye.formAssociated=!0;let _e=Ye;customElements.get("ty-date-picker")||customElements.define("ty-date-picker",_e);const Ue=new Map,Ge=new Map;function Xe(n){return Ue.get(n)}function Ke(n,t){Ge.has(n)||Ge.set(n,new Set),Ge.get(n).add(t);const e=Ue.get(n);return e&&t(e),()=>{Ge.get(n)?.delete(t),0===Ge.get(n)?.size&&Ge.delete(n)}}function Ze(){return Object.fromEntries(Ue)}class TyResizeObserver extends HTMLElement{constructor(){super(),this.xn=null,this.Kt=null;const n=this.attachShadow({mode:"open"});r(n,{css:"\n:host {\n /* Default to block display, user can override */\n display: block;\n /* Ensure the component can participate in layout */\n position: relative;\n}\n\n/* Slot content styling */\n::slotted(*) {\n /* No default styling - preserve natural layout */\n}\n",id:"ty-resize-observer"}),n.innerHTML="<slot></slot>"}static get observedAttributes(){return["id","debounce"]}get debounce(){return parseInt(this.getAttribute("debounce")||"0")}set debounce(n){this.setAttribute("debounce",n+"")}connectedCallback(){this.setupObserver()}disconnectedCallback(){this.cleanup()}setupObserver(){this.xn=new ResizeObserver(n=>{this.debounce>0?(this.Kt&&clearTimeout(this.Kt),this.Kt=window.setTimeout(()=>{this.handleResize(n)},this.debounce)):this.handleResize(n)}),this.xn.observe(this)}handleResize(n){const{width:t,height:e}=n[0].contentRect;this.id&&function(n,t,e){Ue.set(n,{width:t,height:e});const o=Ge.get(n);if(o){const n={width:t,height:e};o.forEach(t=>t(n))}}(this.id,t,e)}cleanup(){var n;this.xn&&(this.xn.disconnect(),this.xn=null),this.Kt&&(clearTimeout(this.Kt),this.Kt=null),this.id&&(Ue.delete(n=this.id),Ge.delete(n))}}customElements.define("ty-resize-observer",TyResizeObserver);const Je=`\n:host {\n display: block;\n position: relative;\n overflow: hidden;\n}\n\n.scroll-wrapper {\n width: 100%;\n height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n/* Allow horizontal scrolling when enabled */\n:host([overflow-x]) .scroll-wrapper {\n overflow-x: auto;\n}\n\n:host([max-height]) .scroll-wrapper {\n max-height: var(--scroll-max-height);\n}\n\n/* ===================================== */\n/* hide-scrollbar: hides native, no custom */\n/* ===================================== */\n\n:host([hide-scrollbar]) .scroll-wrapper {\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n\n:host([hide-scrollbar]) .scroll-wrapper::-webkit-scrollbar {\n display: none;\n}\n\n/* ===================================== */\n/* custom-scrollbar: hides native */\n/* ===================================== */\n\n:host([custom-scrollbar]) .scroll-wrapper {\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n\n:host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar {\n display: none;\n}\n\n/* Show scrollbar tracks on host hover */\n:host([custom-scrollbar]:hover) .ty-scrollbar-track-y.has-overflow,\n:host([custom-scrollbar]:hover) .ty-scrollbar-track-x.has-overflow {\n opacity: 1;\n}\n\n/* Corner gap when both axes are present */\n:host([custom-scrollbar][overflow-x]) .ty-scrollbar-track-y {\n bottom: var(--ty-scrollbar-width, 8px);\n}\n\n:host([custom-scrollbar]) .ty-scrollbar-track-x {\n right: var(--ty-scrollbar-width, 8px);\n}\n\n/* ===================================== */\n/* Shadow Indicators */\n/* ===================================== */\n\n.shadow-overlay {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 2;\n}\n\n.shadow-top,\n.shadow-bottom,\n.shadow-left,\n.shadow-right {\n position: absolute;\n opacity: 0;\n transition: var(--ty-scroll-shadow-transition, opacity 0.2s ease-out);\n pointer-events: none;\n}\n\n.shadow-top {\n top: -40px;\n left: 0;\n right: 0;\n height: 80px;\n background: var(--ty-scroll-shadow-top, radial-gradient(\n ellipse 100% 30% at center,\n rgba(0, 0, 0, 0.1),\n rgba(0, 0, 0, 0),\n transparent\n ));\n clip-path: inset(50% 0 0 0);\n}\n\n.shadow-bottom {\n bottom: -30px;\n left: 0;\n right: 0;\n height: 60px;\n background: var(--ty-scroll-shadow-bottom, radial-gradient(\n ellipse 100% 20% at center,\n rgba(0, 0, 0, 0.15),\n rgba(0, 0, 0, 0),\n transparent\n ));\n clip-path: inset(0 0 50% 0);\n}\n\n.shadow-left {\n left: -30px;\n top: 0;\n bottom: 0;\n width: 60px;\n background: var(--ty-scroll-shadow-left, radial-gradient(\n ellipse 30% 100% at center,\n rgba(0, 0, 0, 0.1),\n rgba(0, 0, 0, 0),\n transparent\n ));\n clip-path: inset(0 0 0 50%);\n}\n\n.shadow-right {\n right: -30px;\n top: 0;\n bottom: 0;\n width: 60px;\n background: var(--ty-scroll-shadow-right, radial-gradient(\n ellipse 30% 100% at center,\n rgba(0, 0, 0, 0.1),\n rgba(0, 0, 0, 0),\n transparent\n ));\n clip-path: inset(0 50% 0 0);\n}\n\n.shadow-left,\n.shadow-right {\n display: none;\n}\n\n:host([overflow-x]) .shadow-left,\n:host([overflow-x]) .shadow-right {\n display: block;\n}\n\n.shadow-top.visible,\n.shadow-bottom.visible,\n.shadow-left.visible,\n.shadow-right.visible {\n opacity: 1;\n}\n\n:host([shadow="false"]) .shadow-overlay {\n display: none;\n}\n\n/* Touch devices - restore native scrollbar */\n@media (pointer: coarse) and (hover: none) {\n :host([custom-scrollbar]) .scroll-wrapper {\n scrollbar-width: thin;\n scrollbar-color: var(--ty-border, rgba(0,0,0,0.2)) transparent;\n }\n :host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar {\n display: block;\n width: 4px;\n height: 4px;\n }\n :host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar-thumb {\n background: var(--ty-border, rgba(0,0,0,0.2));\n border-radius: 2px;\n }\n}\n\n/* Respect reduced motion */\n@media (prefers-reduced-motion: reduce) {\n .shadow-top,\n .shadow-bottom,\n .shadow-left,\n .shadow-right {\n transition-duration: 0ms !important;\n }\n}\n\n/* Shared scrollbar styles */\n${yn}\n`;class TyScrollContainer extends HTMLElement{constructor(){super(),this.Zt=null,this.Jt=null,this.Qt=null,this.ne=null,this.te=null,this.Kn=null,this.xn=null,this.fn=null,this.En=()=>{null===this.fn&&(this.fn=requestAnimationFrame(()=>{this.fn=null,this.ee()}))},this.oe=()=>{this.Kn?.update(),this.ee()};const n=this.attachShadow({mode:"open"});r(n,{css:Je,id:"ty-scroll-container"}),n.innerHTML='\n <div class="scroll-wrapper">\n <slot></slot>\n </div>\n <div class="shadow-overlay">\n <div class="shadow-top"></div>\n <div class="shadow-bottom"></div>\n <div class="shadow-left"></div>\n <div class="shadow-right"></div>\n </div>\n ',this.Zt=n.querySelector(".scroll-wrapper"),this.Jt=n.querySelector(".shadow-top"),this.Qt=n.querySelector(".shadow-bottom"),this.ne=n.querySelector(".shadow-left"),this.te=n.querySelector(".shadow-right")}static get observedAttributes(){return["shadow","max-height","hide-scrollbar","custom-scrollbar","overflow-x"]}get shadow(){return"false"!==this.getAttribute("shadow")}set shadow(n){n?this.removeAttribute("shadow"):this.setAttribute("shadow","false")}get maxHeight(){return this.getAttribute("max-height")}set maxHeight(n){n?this.setAttribute("max-height",n):this.removeAttribute("max-height"),this.ie()}get hideScrollbar(){return this.hasAttribute("hide-scrollbar")}set hideScrollbar(n){n?this.setAttribute("hide-scrollbar",""):this.removeAttribute("hide-scrollbar")}get customScrollbar(){return this.hasAttribute("custom-scrollbar")}set customScrollbar(n){n?this.setAttribute("custom-scrollbar",""):this.removeAttribute("custom-scrollbar")}get overflowX(){return this.hasAttribute("overflow-x")}set overflowX(n){n?this.setAttribute("overflow-x",""):this.removeAttribute("overflow-x")}connectedCallback(){if(this.Zt?.addEventListener("scroll",this.En,{passive:!0}),this.xn=new ResizeObserver(()=>{this.Kn?.update(),this.ee()}),this.Zt){this.xn.observe(this.Zt);const n=this.Zt.querySelector("slot");n&&n.addEventListener("slotchange",this.oe)}this.ie(),this.ee(),this.Jn()}disconnectedCallback(){this.Zt?.removeEventListener("scroll",this.En),this.Zn(),this.xn&&(this.xn.disconnect(),this.xn=null),null!==this.fn&&(cancelAnimationFrame(this.fn),this.fn=null)}attributeChangedCallback(n,t,e){t!==e&&("max-height"===n&&(this.ie(),this.ee(),this.Kn?.update()),"custom-scrollbar"!==n&&"overflow-x"!==n||(this.Zn(),this.Jn(),this.ee()))}Jn(){if(!this.Zt||!this.customScrollbar)return;this.Kn=new mn(this.Zt,{vertical:!0,horizontal:this.overflowX});const n=this.shadowRoot;this.Kn.trackY&&n.appendChild(this.Kn.trackY),this.Kn.trackX&&n.appendChild(this.Kn.trackX)}Zn(){this.Kn&&(this.Kn.trackY?.remove(),this.Kn.trackX?.remove(),this.Kn.destroy(),this.Kn=null)}ie(){if(this.Zt){const n=this.maxHeight;n?(this.Zt.style.setProperty("--scroll-max-height",n),this.Zt.style.maxHeight=n):(this.Zt.style.removeProperty("--scroll-max-height"),this.Zt.style.maxHeight="")}}ee(){if(!this.Zt)return;const{scrollTop:n,scrollLeft:t,scrollHeight:e,scrollWidth:o,clientHeight:i,clientWidth:r}=this.Zt;this.Jt&&this.Jt.classList.toggle("visible",n>2),this.Qt&&this.Qt.classList.toggle("visible",e-2>n+i),this.overflowX&&(this.ne&&this.ne.classList.toggle("visible",t>2),this.te&&this.te.classList.toggle("visible",o-2>t+r))}updateShadows(){this.ee(),this.Kn?.update()}scrollToTop(n=!0){this.Zt?.scrollTo({top:0,behavior:n?"smooth":"auto"})}scrollToBottom(n=!0){this.Zt&&this.Zt.scrollTo({top:this.Zt.scrollHeight,behavior:n?"smooth":"auto"})}scrollToLeft(n=!0){this.Zt?.scrollTo({left:0,behavior:n?"smooth":"auto"})}scrollToRight(n=!0){this.Zt&&this.Zt.scrollTo({left:this.Zt.scrollWidth,behavior:n?"smooth":"auto"})}get scrollElement(){return this.Zt}}customElements.define("ty-scroll-container",TyScrollContainer),"undefined"!=typeof window&&(window.tyVersion=p,window.tyIcons={register:n=>{C(n)},get:n=>S(n),has:n=>E(n),list:()=>A(),cacheInfo:()=>I(),clearCache:()=>T()},window.tyResizeObserver={getSize:n=>Xe(n),onResize:(n,t)=>Ke(n,t),get sizes(){return Ze()}},window.tyLoader={set:n=>a(n),get:()=>l(),reset:()=>d()}),n.IconRegistry=O,n.TyButton=h,n.TyCalendar=Le,n.TyCalendarMonth=TyCalendarMonth,n.TyCalendarNavigation=Me,n.TyCheckbox=J,n.TyCopy=pn,n.TyDatePicker=_e,n.TyDropdown=$t,n.TyFileUpload=bn,n.TyIcon=R,n.TyInput=U,n.TyModal=TyModal,n.TyMultiselect=Pt,n.TyOption=TyOption,n.TyPopup=TyPopup,n.TyRadio=sn,n.TyRadioGroup=ln,n.TyResizeObserver=TyResizeObserver,n.TyScrollContainer=TyScrollContainer,n.TyStep=TyStep,n.TySwitch=tn,n.TyTab=TyTab,n.TyTabs=TyTabs,n.TyTag=V,n.TyTextarea=xn,n.TyTooltip=TyTooltip,n.TyWizard=TyWizard,n.disableScrollLockDebug=function(){window.tyScrollDebug=!1},n.enableScrollLockDebug=function(){window.tyScrollDebug=!0},n.forceUnlockAll=function(){Wn.activeLocks.clear(),_n()},n.getActiveLocks=function(){return new Set(Wn.activeLocks)},n.getAllSizes=Ze,n.getLoaderSvg=l,n.getLockState=function(){return{locked:Wn.locked,scrollY:Wn.scrollY,activeLocks:Array.from(Wn.activeLocks)}},n.getSize=Xe,n.isLocked=function(){return Wn.locked},n.isLockedBy=function(n){return Wn.activeLocks.has(n)},n.lockScroll=Un,n.onResize=Ke,n.resetLoaderSvg=d,n.setLoaderSvg=a,n.unlockScroll=Gn,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});
|
|
2
|
+
!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((n="undefined"!=typeof globalThis?globalThis:n||self).Tyrell={})}(this,function(n){"use strict";class t{constructor(n){this.t=new Map,this.o=n,this.i()}i(){for(const[n,t]of Object.entries(this.o))void 0!==t.default&&this.t.set(n,t.default)}hasConfig(n){return n in this.o}updateProperty(n,t,e="property"){const o=this.o[n];if(!o)return null;const i=this.t.get(n),r=this.l(n,t,o);return this.h(n,r,o)?this.p(i,r)?null:(this.t.set(n,r),{name:n,oldValue:i,newValue:r,source:e}):null}l(n,t,e){if(e.coerce)return e.coerce(t);if(null==t)return e.default??null;switch(e.type){case"boolean":if("string"==typeof t){if(""===t)return!0;const n=t.toLowerCase().trim();return"false"!==n&&"0"!==n}return!!t;case"number":const n=+t;return isNaN(n)?e.default??0:n;case"string":return t+"";case"object":case"array":if("string"==typeof t)try{return JSON.parse(t)}catch{return e.default??("array"===e.type?[]:{})}return t;default:return t}}h(n,t,e){return!e.validate||e.validate(t)}p(n,t){if("object"!=typeof n||"object"!=typeof t)return n===t;if(null===n||null===t)return n===t;try{return JSON.stringify(n)===JSON.stringify(t)}catch{return!1}}get(n){return this.t.get(n)}getAll(){return Object.fromEntries(this.t)}getConfig(n){return this.o[n]}isVisual(n){return this.o[n]?.visual??!1}isFormValue(n){return this.o[n]?.formValue??!1}shouldEmitChange(n){return this.o[n]?.emitChange??!1}handleAlias(n,t){for(const[e,o]of Object.entries(this.o))if(o.aliases&&n in o.aliases)return this.updateProperty(e,o.aliases[n],"attribute");return null}}const e=class extends HTMLElement{constructor(){super(),this.u=!1,this.v=!1,this.props=new t(this.constructor.properties),this.m=this.attachInternals(),this.shadowRoot||this.attachShadow({mode:"open"})}static get observedAttributes(){const n=[];for(const[t,e]of Object.entries(this.properties))if(n.push(t.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()),e.aliases)for(const o of Object.keys(e.aliases))n.push(o);return n}setProperty(n,t){const e=this.props.updateProperty(n,t,"property");e&&(this.k(e),this.C([e]))}getProperty(n){return this.props.get(n)}k(n){const{name:t,newValue:e}=n,o=this.props.getConfig(t);if(!o)return;const i=this.S(t);"boolean"===o.type?e?this.setAttribute(i,""):this.removeAttribute(i):null==e?this.removeAttribute(i):this.setAttribute(i,"object"==typeof e?JSON.stringify(e):e+"")}S(n){return n.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}T(n){return n.replace(/-([a-z])/g,(n,t)=>t.toUpperCase())}attributeChangedCallback(n,t,e){if(t===e)return;let o=this.props.handleAlias(n,e);if(!o){const t=this.T(n),i=this.props.hasConfig(n)?n:t;o=this.props.updateProperty(i,e,"attribute")}o&&this.C([o])}connectedCallback(){this.u=!0;const n=this.M();n.length>0&&this.C(n),this.onConnect(),this.v||(this.render(),this.v=!0)}disconnectedCallback(){this.u=!1,this.onDisconnect()}M(){const n=[],t=this.constructor;for(const e of Object.keys(t.properties)){const t=Object.getOwnPropertyDescriptor(this,e);if(t&&void 0!==t.value){const o=this.props.updateProperty(e,t.value,"property");o&&n.push(o)}}return n}C(n){0!==n.length&&(this.onPropertiesChanged(n),n.some(n=>this.props.isFormValue(n.name))&&this.updateFormValue(),n.some(n=>this.props.isVisual(n.name))&&this.u&&this.render(),this.D(n))}D(n){for(const t of n)this.props.shouldEmitChange(t.name)&&this.dispatchEvent(new CustomEvent("prop:change",{detail:{property:t.name,oldValue:t.oldValue,newValue:t.newValue},bubbles:!0,composed:!0}))}updateFormValue(){const n=this.getFormValue();this.m.setFormValue(n)}getFormValue(){return this.props.get("value")??null}onPropertiesChanged(n){}onConnect(){}onDisconnect(){}get form(){return this.m.form}formResetCallback(){const n=this.constructor.properties.value;n&&this.setProperty("value",n.default??""),this.onFormReset()}onFormReset(){}};e.formAssociated=!0,e.properties={};let o=e;const i=new Map;function r(n,t){const{css:e,id:o}=t;let r;o&&i.has(o)?r=i.get(o):(r=new CSSStyleSheet,r.replaceSync(e),o&&i.set(o,r));const s=n.adoptedStyleSheets||[];s.includes(r)||(n.adoptedStyleSheets=[...s,r])}let s=null;function a(n){s=n&&n.trim()?n:null}function l(){return s??'<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>'}function d(){s=null}const c=class extends o{constructor(){super(),this.$=!1,r(this.shadowRoot,{css:'\n:host {\n display: inline-block;\n font-family: var(--ty-font-sans);\n}\n\n:host([wide]) {\n display: flex;\n flex-grow: 1;\n}\n\nbutton {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--ty-spacing-1);\n font-size: var(--ty-font-xs);\n line-height: var(--ty-leading-xs);\n letter-spacing: var(--ty-tracking-xs);\n font-weight: var(--ty-font-medium);\n white-space: nowrap;\n cursor: pointer;\n user-select: none;\n transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;\n background: transparent;\n color: var(--ty-color-neutral);\n border: 1px solid transparent;\n}\n\nbutton:not(.action) {\n min-width: 4rem;\n}\n\nbutton:not(.pill) {\n border-radius: var(--ty-radius-md);\n}\n\nbutton.xs:not(.pill) { border-radius: var(--ty-button-radius-xs, var(--ty-radius-md)); }\nbutton.sm:not(.pill) { border-radius: var(--ty-button-radius-sm, var(--ty-radius-md)); }\nbutton.md:not(.pill) { border-radius: var(--ty-button-radius-md, var(--ty-radius-md)); }\nbutton.lg:not(.pill) { border-radius: var(--ty-button-radius-lg, var(--ty-radius-md)); }\nbutton.xl:not(.pill) { border-radius: var(--ty-button-radius-xl, var(--ty-radius-md)); }\n\nbutton:focus-visible {\n outline: none;\n}\n\nbutton:disabled {\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n/* ===== LOADING STATE =====\n Spinner overlays the button center; original content kept in flow but\n hidden via visibility so width/height are preserved (no layout shift).\n*/\n.loader-icon {\n display: none;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 1em;\n height: 1em;\n color: currentColor;\n}\n.loader-icon svg {\n width: 100%;\n height: 100%;\n}\nbutton.loading {\n cursor: wait;\n}\nbutton.loading > *:not(.loader-icon) {\n visibility: hidden;\n}\nbutton.loading > .loader-icon {\n display: inline-flex;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n animation: ty-button-spin 0.7s linear infinite;\n}\n@keyframes ty-button-spin {\n to { transform: translate(-50%, -50%) rotate(360deg); }\n}\n@media (prefers-reduced-motion: reduce) {\n button.loading > .loader-icon {\n animation-duration: 1.6s;\n }\n}\n\n::slotted(*) {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n::slotted(ty-icon) {\n flex-shrink: 0;\n}\n\n:host([wide]) button {\n flex-grow: 1;\n}\n\n/* ===== SIZES ===== */\n\nbutton.xs {\n padding: 0 var(--ty-spacing-2);\n font-size: var(--ty-font-xs);\n line-height: var(--ty-leading-xs);\n letter-spacing: var(--ty-tracking-xs);\n gap: var(--ty-spacing-1);\n height: 1.375rem;\n}\n\nbutton.sm {\n padding: 0 var(--ty-spacing-2);\n font-size: var(--ty-font-xs);\n line-height: var(--ty-leading-xs);\n letter-spacing: var(--ty-tracking-xs);\n gap: var(--ty-spacing-1);\n height: 1.5rem;\n}\n\nbutton.md {\n padding: 0.375rem var(--ty-spacing-3);\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n gap: var(--ty-spacing-2);\n height: 1.8rem;\n}\n\nbutton.lg {\n padding: 0.375rem var(--ty-spacing-4);\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n gap: var(--ty-spacing-2);\n height: 2.1rem;\n}\n\nbutton.xl {\n padding: var(--ty-spacing-2) var(--ty-spacing-6);\n font-size: var(--ty-font-base);\n line-height: var(--ty-leading-base);\n letter-spacing: var(--ty-tracking-base);\n gap: var(--ty-spacing-2);\n height: 2.3rem;\n}\n\n/* ===== ACTION (icon-only square) ===== */\n\nbutton.action {\n gap: 0px !important;\n height: 2rem;\n width: 2rem;\n padding: 0px !important;\n}\n\nbutton.action ::slotted(ty-icon) {\n height: 1rem;\n width: 1rem;\n}\n\nbutton.action.xs { height: 1.375rem; width: 1.375rem; }\nbutton.action.xs ::slotted(ty-icon) { height: 0.75rem; width: 0.75rem; }\n\nbutton.action.sm { height: 1.5rem; width: 1.5rem; }\nbutton.action.sm ::slotted(ty-icon) { height: 0.875rem; width: 0.875rem; }\n\nbutton.action.lg { height: 2.25rem; width: 2.25rem; }\nbutton.action.lg ::slotted(ty-icon) { height: 1.125rem; width: 1.125rem; }\n\nbutton.action.xl { height: 2.5rem; width: 2.5rem; }\nbutton.action.xl ::slotted(ty-icon) { height: 1.25rem; width: 1.25rem; }\n\n/* ===== PILL ===== */\n\nbutton.pill {\n border-radius: 9999px;\n padding-left: 1.25em;\n padding-right: 1.25em;\n}\n\nbutton.pill.xs { padding-left: 1em; padding-right: 1em; }\nbutton.pill.sm { padding-left: 1.125em; padding-right: 1.125em; }\nbutton.pill.lg { padding-left: 1.5em; padding-right: 1.5em; }\nbutton.pill.xl { padding-left: 1.75em; padding-right: 1.75em; }\n\nbutton.pill:has(ty-icon:only-child),\nbutton.pill:has(slot[name="start"]:only-child),\nbutton.pill:has(slot[name="end"]:only-child) {\n padding: 0;\n aspect-ratio: 1;\n min-width: var(--ty-size-md);\n}\n\nbutton.pill.xs:has(ty-icon:only-child) { min-width: 1.375rem; min-height: 1.375rem; }\nbutton.pill.sm:has(ty-icon:only-child) { min-width: 1.5rem; min-height: 1.5rem; }\nbutton.pill.md:has(ty-icon:only-child) { min-width: 2rem; min-height: 2rem; }\nbutton.pill.lg:has(ty-icon:only-child) { min-width: 2.25rem; min-height: 2.25rem; }\nbutton.pill.xl:has(ty-icon:only-child) { min-width: 2.5rem; min-height: 2.5rem; }\n\n/* ============================================================\n SOLID — saturated brand fill (uses --ty-solid-{flavor}-* tokens)\n Bare .solid rule = fallback for custom flavors (theme via --ty-button-*).\n ============================================================ */\n\nbutton.solid {\n border: none;\n background: var(--ty-button-bg, var(--ty-solid-neutral));\n color: var(--ty-button-color, var(--ty-solid-neutral-fg));\n}\nbutton.solid:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-button-bg, var(--ty-solid-neutral-strong)));\n}\n\n/* Primary */\nbutton.solid.primary {\n background: var(--ty-button-bg, var(--ty-solid-primary));\n color: var(--ty-button-color, var(--ty-solid-primary-fg));\n}\nbutton.solid.primary.tone-plus { background: var(--ty-button-bg, var(--ty-solid-primary-strong)); }\nbutton.solid.primary.tone-minus { background: var(--ty-button-bg, var(--ty-solid-primary-soft)); }\nbutton.solid.primary:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-solid-primary-strong));\n}\nbutton.solid.primary:focus-visible {\n box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--ty-color-primary);\n}\n\n/* Secondary */\nbutton.solid.secondary {\n background: var(--ty-button-bg, var(--ty-solid-secondary));\n color: var(--ty-button-color, var(--ty-solid-secondary-fg));\n}\nbutton.solid.secondary.tone-plus { background: var(--ty-button-bg, var(--ty-solid-secondary-strong)); }\nbutton.solid.secondary.tone-minus { background: var(--ty-button-bg, var(--ty-solid-secondary-soft)); }\nbutton.solid.secondary:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-solid-secondary-strong));\n}\nbutton.solid.secondary:focus-visible {\n box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--ty-color-secondary);\n}\n\n/* Success */\nbutton.solid.success {\n background: var(--ty-button-bg, var(--ty-solid-success));\n color: var(--ty-button-color, var(--ty-solid-success-fg));\n}\nbutton.solid.success.tone-plus { background: var(--ty-button-bg, var(--ty-solid-success-strong)); }\nbutton.solid.success.tone-minus { background: var(--ty-button-bg, var(--ty-solid-success-soft)); }\nbutton.solid.success:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-solid-success-strong));\n}\nbutton.solid.success:focus-visible {\n box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--ty-color-success);\n}\n\n/* Danger */\nbutton.solid.danger {\n background: var(--ty-button-bg, var(--ty-solid-danger));\n color: var(--ty-button-color, var(--ty-solid-danger-fg));\n}\nbutton.solid.danger.tone-plus { background: var(--ty-button-bg, var(--ty-solid-danger-strong)); }\nbutton.solid.danger.tone-minus { background: var(--ty-button-bg, var(--ty-solid-danger-soft)); }\nbutton.solid.danger:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-solid-danger-strong));\n}\nbutton.solid.danger:focus-visible {\n box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--ty-color-danger);\n}\n\n/* Warning */\nbutton.solid.warning {\n background: var(--ty-button-bg, var(--ty-solid-warning));\n color: var(--ty-button-color, var(--ty-solid-warning-fg));\n}\nbutton.solid.warning.tone-plus { background: var(--ty-button-bg, var(--ty-solid-warning-strong)); }\nbutton.solid.warning.tone-minus { background: var(--ty-button-bg, var(--ty-solid-warning-soft)); }\nbutton.solid.warning:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-solid-warning-strong));\n}\nbutton.solid.warning:focus-visible {\n box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--ty-color-warning);\n}\n\n/* Neutral */\nbutton.solid.neutral {\n background: var(--ty-button-bg, var(--ty-solid-neutral));\n color: var(--ty-button-color, var(--ty-solid-neutral-fg));\n}\nbutton.solid.neutral.tone-plus { background: var(--ty-button-bg, var(--ty-solid-neutral-strong)); }\nbutton.solid.neutral.tone-minus { background: var(--ty-button-bg, var(--ty-solid-neutral-soft)); }\nbutton.solid.neutral:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-solid-neutral-strong));\n}\nbutton.solid.neutral:focus-visible {\n box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--ty-color-neutral);\n}\n\n/* ============================================================\n OUTLINED — transparent bg, text === border (uses --ty-color-*)\n Bare .outlined rule = fallback for custom flavors. For outlined,\n text is bound to border color (the rule "text === border"), so the\n fallback chain prefers --ty-button-border, then --ty-button-color.\n ============================================================ */\n\nbutton.outlined {\n background: transparent;\n color: var(--ty-button-border, var(--ty-button-color, var(--ty-color-neutral)));\n border-color: var(--ty-button-border, var(--ty-button-color, var(--ty-color-neutral)));\n}\nbutton.outlined:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-bg-neutral-soft));\n}\n\n/* Primary */\nbutton.outlined.primary {\n color: var(--ty-button-color, var(--ty-color-primary));\n border-color: var(--ty-button-border, var(--ty-color-primary));\n}\nbutton.outlined.primary.tone-plus {\n color: var(--ty-button-color, var(--ty-color-primary-strong));\n border-color: var(--ty-button-border, var(--ty-color-primary-strong));\n}\nbutton.outlined.primary.tone-minus {\n color: var(--ty-button-color, var(--ty-color-primary-soft));\n border-color: var(--ty-button-border, var(--ty-color-primary-soft));\n}\nbutton.outlined.primary:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-bg-primary-soft));\n}\n\n/* Secondary */\nbutton.outlined.secondary {\n color: var(--ty-button-color, var(--ty-color-secondary));\n border-color: var(--ty-button-border, var(--ty-color-secondary));\n}\nbutton.outlined.secondary.tone-plus {\n color: var(--ty-button-color, var(--ty-color-secondary-strong));\n border-color: var(--ty-button-border, var(--ty-color-secondary-strong));\n}\nbutton.outlined.secondary.tone-minus {\n color: var(--ty-button-color, var(--ty-color-secondary-soft));\n border-color: var(--ty-button-border, var(--ty-color-secondary-soft));\n}\nbutton.outlined.secondary:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-bg-secondary-soft));\n}\n\n/* Success */\nbutton.outlined.success {\n color: var(--ty-button-color, var(--ty-color-success));\n border-color: var(--ty-button-border, var(--ty-color-success));\n}\nbutton.outlined.success.tone-plus {\n color: var(--ty-button-color, var(--ty-color-success-strong));\n border-color: var(--ty-button-border, var(--ty-color-success-strong));\n}\nbutton.outlined.success.tone-minus {\n color: var(--ty-button-color, var(--ty-color-success-soft));\n border-color: var(--ty-button-border, var(--ty-color-success-soft));\n}\nbutton.outlined.success:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-bg-success-soft));\n}\n\n/* Danger */\nbutton.outlined.danger {\n color: var(--ty-button-color, var(--ty-color-danger));\n border-color: var(--ty-button-border, var(--ty-color-danger));\n}\nbutton.outlined.danger.tone-plus {\n color: var(--ty-button-color, var(--ty-color-danger-strong));\n border-color: var(--ty-button-border, var(--ty-color-danger-strong));\n}\nbutton.outlined.danger.tone-minus {\n color: var(--ty-button-color, var(--ty-color-danger-soft));\n border-color: var(--ty-button-border, var(--ty-color-danger-soft));\n}\nbutton.outlined.danger:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-bg-danger-soft));\n}\n\n/* Warning */\nbutton.outlined.warning {\n color: var(--ty-button-color, var(--ty-color-warning));\n border-color: var(--ty-button-border, var(--ty-color-warning));\n}\nbutton.outlined.warning.tone-plus {\n color: var(--ty-button-color, var(--ty-color-warning-strong));\n border-color: var(--ty-button-border, var(--ty-color-warning-strong));\n}\nbutton.outlined.warning.tone-minus {\n color: var(--ty-button-color, var(--ty-color-warning-soft));\n border-color: var(--ty-button-border, var(--ty-color-warning-soft));\n}\nbutton.outlined.warning:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-bg-warning-soft));\n}\n\n/* Neutral */\nbutton.outlined.neutral {\n color: var(--ty-button-color, var(--ty-color-neutral));\n border-color: var(--ty-button-border, var(--ty-color-neutral));\n}\nbutton.outlined.neutral.tone-plus {\n color: var(--ty-button-color, var(--ty-color-neutral-strong));\n border-color: var(--ty-button-border, var(--ty-color-neutral-strong));\n}\nbutton.outlined.neutral.tone-minus {\n color: var(--ty-button-color, var(--ty-color-neutral-soft));\n border-color: var(--ty-button-border, var(--ty-color-neutral-soft));\n}\nbutton.outlined.neutral:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-bg-neutral-soft));\n}\n\n/* ============================================================\n GHOST — text only, hover bg (uses --ty-color-* + --ty-bg-*-soft)\n Bare .ghost rule = fallback for custom flavors.\n ============================================================ */\n\nbutton.ghost {\n background: transparent;\n border: none;\n color: var(--ty-button-color, var(--ty-color-neutral));\n}\nbutton.ghost:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-bg-neutral-soft));\n}\n\n/* Primary */\nbutton.ghost.primary { color: var(--ty-button-color, var(--ty-color-primary)); }\nbutton.ghost.primary.tone-plus { color: var(--ty-button-color, var(--ty-color-primary-strong)); }\nbutton.ghost.primary.tone-minus { color: var(--ty-button-color, var(--ty-color-primary-soft)); }\nbutton.ghost.primary:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-bg-primary-soft));\n}\n\n/* Secondary */\nbutton.ghost.secondary { color: var(--ty-button-color, var(--ty-color-secondary)); }\nbutton.ghost.secondary.tone-plus { color: var(--ty-button-color, var(--ty-color-secondary-strong)); }\nbutton.ghost.secondary.tone-minus { color: var(--ty-button-color, var(--ty-color-secondary-soft)); }\nbutton.ghost.secondary:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-bg-secondary-soft));\n}\n\n/* Success */\nbutton.ghost.success { color: var(--ty-button-color, var(--ty-color-success)); }\nbutton.ghost.success.tone-plus { color: var(--ty-button-color, var(--ty-color-success-strong)); }\nbutton.ghost.success.tone-minus { color: var(--ty-button-color, var(--ty-color-success-soft)); }\nbutton.ghost.success:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-bg-success-soft));\n}\n\n/* Danger */\nbutton.ghost.danger { color: var(--ty-button-color, var(--ty-color-danger)); }\nbutton.ghost.danger.tone-plus { color: var(--ty-button-color, var(--ty-color-danger-strong)); }\nbutton.ghost.danger.tone-minus { color: var(--ty-button-color, var(--ty-color-danger-soft)); }\nbutton.ghost.danger:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-bg-danger-soft));\n}\n\n/* Warning */\nbutton.ghost.warning { color: var(--ty-button-color, var(--ty-color-warning)); }\nbutton.ghost.warning.tone-plus { color: var(--ty-button-color, var(--ty-color-warning-strong)); }\nbutton.ghost.warning.tone-minus { color: var(--ty-button-color, var(--ty-color-warning-soft)); }\nbutton.ghost.warning:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-bg-warning-soft));\n}\n\n/* Neutral */\nbutton.ghost.neutral { color: var(--ty-button-color, var(--ty-color-neutral)); }\nbutton.ghost.neutral.tone-plus { color: var(--ty-button-color, var(--ty-color-neutral-strong)); }\nbutton.ghost.neutral.tone-minus { color: var(--ty-button-color, var(--ty-color-neutral-soft)); }\nbutton.ghost.neutral:hover:not(:disabled) {\n background: var(--ty-button-bg-hover, var(--ty-bg-neutral-soft));\n}\n',id:"ty-button"})}onConnect(){}onDisconnect(){}onPropertiesChanged(n){}get flavor(){return this.getProperty("flavor")}set flavor(n){this.setProperty("flavor",n)}get size(){return this.getProperty("size")}set size(n){this.setProperty("size",n)}get appearance(){return this.getProperty("appearance")}set appearance(n){this.setProperty("appearance",n)}get disabled(){return this.getProperty("disabled")}set disabled(n){this.setProperty("disabled",n)}get loading(){return this.getProperty("loading")}set loading(n){this.setProperty("loading",n)}get type(){return this.getProperty("type")}set type(n){this.setProperty("type",n)}get pill(){return this.getProperty("pill")}set pill(n){this.setProperty("pill",n)}get action(){return this.getProperty("action")}set action(n){this.setProperty("action",n)}get wide(){return this.getProperty("wide")}set wide(n){this.setProperty("wide",n)}get name(){return this.getProperty("name")}set name(n){this.setProperty("name",n)}get value(){return this.getProperty("value")}set value(n){this.setProperty("value",n)}parseFlavor(){const n=this.flavor||"";return n.length>1&&n.endsWith("+")?{base:n.slice(0,-1),tone:"+"}:n.length>1&&n.endsWith("-")?{base:n.slice(0,-1),tone:"-"}:{base:n,tone:""}}buildClasses(){const{base:n,tone:t}=this.parseFlavor();return function(...n){return n.filter(Boolean).join(" ")}(n,this.size,this.appearance,this.pill&&"pill",this.action&&"action","+"===t&&"tone-plus","-"===t&&"tone-minus")}handleFormAction(){const n=this.m.form;if(n)switch(this.type){case"submit":this.name&&this.value&&this.m.setFormValue(this.value),n.requestSubmit();break;case"reset":n.reset()}}initializeButtonStructure(){const n=this.shadowRoot,t=this.buildClasses(),e=document.createElement("button");e.disabled=this.disabled,e.className=t;const o=document.createElement("span");o.className="loader-icon",o.setAttribute("aria-hidden","true"),o.innerHTML=l();const i=document.createElement("slot");i.name="start",i.className="start";const r=document.createElement("slot"),s=document.createElement("slot");s.name="end",s.className="end",e.appendChild(o),e.appendChild(i),e.appendChild(r),e.appendChild(s),e.addEventListener("click",n=>{this.disabled||this.loading||(n.stopPropagation(),this.handleFormAction(),this.dispatchEvent(new CustomEvent("click",{bubbles:!0,composed:!0,detail:{originalEvent:n}})))}),this.applyLoadingState(e),n.appendChild(e),this.$=!0}applyLoadingState(n){const t=this.loading;if(n.classList.toggle("loading",t),t){n.setAttribute("aria-busy","true");const t=n.querySelector(".loader-icon");t&&(t.innerHTML=l())}else n.removeAttribute("aria-busy")}render(){const n=this.shadowRoot;if(!this.$)return void this.initializeButtonStructure();const t=this.buildClasses(),e=n.querySelector("button");e&&(e.disabled=this.disabled,e.className=t,this.applyLoadingState(e))}};c.formAssociated=!0,c.properties={flavor:{type:"string",visual:!0,default:"neutral"},size:{type:"string",visual:!0,default:"md",validate:n=>["xs","sm","md","lg","xl"].includes(n),coerce:n=>["xs","sm","md","lg","xl"].includes(n)?n:"md"},appearance:{type:"string",visual:!0,default:"solid",validate:n=>["solid","outlined","ghost"].includes(n),coerce:n=>["solid","outlined","ghost"].includes(n)?n:"solid"},disabled:{type:"boolean",visual:!0,default:!1},loading:{type:"boolean",visual:!0,default:!1},type:{type:"string",visual:!1,default:"submit"},pill:{type:"boolean",visual:!0,default:!1},action:{type:"boolean",visual:!0,default:!1},wide:{type:"boolean",visual:!1,default:!1},name:{type:"string",default:""},value:{type:"string",default:""}};let h=c;customElements.get("ty-button")||customElements.define("ty-button",h);const p="1.0.0-TC15",u=new Map,g=new Map,b=new Map;let v=null,m=null;const y="ty-icons-v"+p,f="https://ty-icons.local/",w=new Map;let x=!1;async function k(n,t){if("caches"in window)try{const e=await caches.open(y),o=new Response(t,{headers:{"Content-Type":"image/svg+xml"}});await e.put(`${f}${n}`,o)}catch(e){}}async function z(n){const t=w.get(n);if(t)return t;const e=(async()=>{try{await async function(){if(!x&&"caches"in window){x=!0;try{const n=(await caches.keys()).filter(n=>n.startsWith("ty-icons-v")&&n!==y);await Promise.all(n.map(n=>caches.delete(n)))}catch(n){}}}();const t=await caches.open(y),e=await t.match(`${f}${n}`);if(e)return await e.text()}catch(t){}return null})();return w.set(n,e),e.finally(()=>{w.delete(n)}),e}function C(n){const t=new Set;Object.entries(n).forEach(([n,e])=>{u.set(n,e),t.add(n)}),t.size>0&&$(t)}function S(n){return u.get(n)}function E(n){return u.has(n)}async function T(){const n=new Set(u.keys());if(u.clear(),"caches"in window)try{await caches.delete(y),x=!1}catch(t){}$(n)}function M(n,t,e){g.set(n,e),t&&b.set(n,t)}function D(n){g.delete(n),b.delete(n)}function $(n){v||(v=new Set),n.forEach(n=>v.add(n)),null!==m&&clearTimeout(m);const t="undefined"!=typeof requestIdleCallback?requestIdleCallback:n=>setTimeout(n,0);m=t(()=>{const n=v;v=null,m=null,n&&n.size>0&&function(n){g.forEach((t,e)=>{const o=b.get(e);o?n.has(o)&&t(new Set([o])):t(n)})}(n)})}function A(){return Array.from(u.keys())}async function I(){const n={version:p,cacheName:y,available:"caches"in window};if(!n.available)return n;try{const t=await caches.open(y),e=(await t.keys()).filter(n=>n.url.startsWith(f));return{...n,iconCount:e.length}}catch(t){return n}}const O=Object.freeze(Object.defineProperty({__proto__:null,addWatcher:M,clearIcons:T,getCacheInfo:I,getCachedIcon:z,getIcon:S,getIconCount:function(){return u.size},getIconNames:A,hasIcon:E,registerIcon:function(n,t){u.set(n,t),$(new Set([n])),z(n).then(e=>{e!==t&&k(n,t).catch(()=>{})}).catch(()=>{k(n,t).catch(()=>{})})},registerIcons:C,removeWatcher:D},Symbol.toStringTag,{value:"Module"}));let L=0;const N='<svg xmlns="http://www.w3.org/2000/svg"\n viewBox="0 0 512 512"\n fill="currentColor"\n opacity="0.2">\n <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/>\n</svg>',q=class extends o{constructor(){super(),this.A=null,this.I="",this.O=null,r(this.shadowRoot,{css:"\n:host {\n /* Display & Layout - CRITICAL: No containment to prevent paint deferral */\n display: flex;\n align-items: center;\n justify-content: center;\n line-height: 0;\n \n /* Dimensions with CSS variable support for flexibility */\n width: var(--ty-icon-size, 1em);\n height: var(--ty-icon-size, 1em);\n \n /* Enforce square aspect ratio */\n aspect-ratio: 1 / 1;\n \n \n /* Color & Transitions */\n color: inherit;\n transition: color var(--ty-transition-fast);\n \n /* Flex Behavior */\n flex-shrink: 0;\n \n /* Visibility - Force immediate rendering */\n visibility: visible !important;\n opacity: 1;\n \n /* ANTI-FLICKER: Force browser to paint immediately */\n will-change: contents;\n \n /* Prevent any sub-pixel rendering issues */\n transform: translateZ(0);\n -webkit-font-smoothing: antialiased;\n}\n\n/* The SVG element inside shadow DOM (registry / fallback path) */\n:host svg {\n width: 100%;\n height: 100%;\n display: block;\n\n /* Force immediate SVG rendering */\n will-change: auto;\n transform: translateZ(0);\n}\n\n/* Slotted SVG (server-side path: <ty-icon><svg>...</svg></ty-icon>).\n ::slotted() targets light-DOM children so they fill the host the same way\n shadow-DOM SVG does. Color is inherited from :host via currentColor. */\n::slotted(svg),\n::slotted(img) {\n width: 100%;\n height: 100%;\n display: block;\n}\n\n/* When used in slots, ensure proper display */\n:host([slot]) {\n display: inline-flex;\n}\n\n/* Size variants via CSS classes on the host */\n:host(.icon-xs) {\n width: 0.75em;\n height: 0.75em;\n}\n\n:host(.icon-sm) {\n width: 0.875em;\n height: 0.875em;\n}\n\n:host(.icon-md) {\n width: 1em;\n height: 1em;\n}\n\n:host(.icon-lg) {\n width: 1.25em;\n height: 1.25em;\n}\n\n:host(.icon-xl) {\n width: 1.5em;\n height: 1.5em;\n}\n\n:host(.icon-2xl) {\n width: 2em;\n height: 2em;\n}\n\n/* Fixed pixel sizes */\n:host(.icon-12) {\n width: 12px;\n height: 12px;\n}\n\n:host(.icon-14) {\n width: 14px;\n height: 14px;\n}\n\n:host(.icon-16) {\n width: 16px;\n height: 16px;\n}\n\n:host(.icon-18) {\n width: 18px;\n height: 18px;\n}\n\n:host(.icon-20) {\n width: 20px;\n height: 20px;\n}\n\n:host(.icon-24) {\n width: 24px;\n height: 24px;\n}\n\n:host(.icon-32) {\n width: 32px;\n height: 32px;\n}\n\n:host(.icon-48) {\n width: 48px;\n height: 48px;\n}\n\n:host(.icon-64) {\n width: 64px;\n height: 64px;\n}\n\n:host(.icon-80) {\n width: 80px;\n height: 80px;\n}\n\n:host(.icon-96) {\n width: 96px;\n height: 96px;\n}\n\n/* Spinning animation - default tempo */\n:host(.icon-spin) {\n animation: icon-spin 1s linear infinite;\n}\n\n/* Spinning animation - slow tempo */\n:host(.icon-spin.icon-tempo-slow) {\n animation: icon-spin 2s linear infinite;\n}\n\n/* Spinning animation - fast tempo */\n:host(.icon-spin.icon-tempo-fast) {\n animation: icon-spin 0.5s linear infinite;\n}\n\n@keyframes icon-spin {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n\n/* Pulse animation - default tempo */\n:host(.icon-pulse) {\n animation: icon-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n/* Pulse animation - slow tempo */\n:host(.icon-pulse.icon-tempo-slow) {\n animation: icon-pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n/* Pulse animation - fast tempo */\n:host(.icon-pulse.icon-tempo-fast) {\n animation: icon-pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n@keyframes icon-pulse {\n 0%,\n 100% {\n opacity: 1;\n }\n\n 50% {\n opacity: 0.5;\n }\n}\n\n/* Accessibility: ensure icons are not announced by screen readers by default */\n:host {\n -webkit-user-select: none;\n user-select: none;\n}\n\n/* Allow pointer events to pass through by default */\n:host(:not(.icon-clickable)) {\n pointer-events: none;\n}\n\n/* Clickable icons */\n:host(.icon-clickable) {\n cursor: pointer;\n pointer-events: auto;\n transition: color var(--ty-transition-fast), transform var(--ty-transition-fast);\n}\n\n:host(.icon-clickable:hover) {\n transform: scale(1.1);\n}\n\n:host(.icon-clickable:active) {\n transform: scale(0.95);\n}\n\n/* Disabled state */\n:host(.icon-disabled) {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* Block display variant */\n:host(.icon-block) {\n display: block;\n}\n",id:"ty-icon"}),this.O=document.createElement("slot"),this.O.innerHTML=N,this.I=N,this.shadowRoot.appendChild(this.O)}onConnect(){this.A="ty-icon-"+ ++L,this.name&&M(this.A,this.name,n=>{this.name&&n.has(this.name)&&this.render()}),this.updateClasses()}onDisconnect(){this.A&&(D(this.A),this.A=null)}onPropertiesChanged(n){for(const t of n)if("name"===t.name){this.A&&D(this.A);const n=t.newValue||"";n&&this.isConnected&&(this.A="ty-icon-"+ ++L,M(this.A,n,n=>{this.name&&n.has(this.name)&&this.render()}))}this.updateClasses()}get name(){return this.getProperty("name")}set name(n){this.setProperty("name",n)}get size(){return this.getProperty("size")||void 0}set size(n){this.setProperty("size",n||"")}get spin(){return this.getProperty("spin")}set spin(n){this.setProperty("spin",n)}get pulse(){return this.getProperty("pulse")}set pulse(n){this.setProperty("pulse",n)}get tempo(){return this.getProperty("tempo")||void 0}set tempo(n){this.setProperty("tempo",n||"")}buildClasses(){const n=[],t=this.getProperty("size");t&&n.push("icon-"+t),this.getProperty("spin")&&n.push("icon-spin"),this.getProperty("pulse")&&n.push("icon-pulse");const e=this.getProperty("tempo");e&&(this.getProperty("spin")||this.getProperty("pulse"))&&n.push("icon-tempo-"+e);const o=this.className.split(/\s+/).filter(n=>n&&!n.startsWith("icon-")&&"icon-spin"!==n&&"icon-pulse"!==n);return[...n,...o]}updateClasses(){const n=this.buildClasses().join(" ");this.className!==n&&(this.className=n)}render(){const n=this.getProperty("name");if(!n)return void this.renderSvg(N);const t=S(n);this.renderSvg(t||N)}renderSvg(n){this.I!==n&&this.O&&(this.O.innerHTML=n,this.I=n)}};q.formAssociated=!1,q.properties={name:{type:"string",visual:!0,default:""},size:{type:"string",visual:!0,default:""},spin:{type:"boolean",visual:!0,default:!1},pulse:{type:"boolean",visual:!0,default:!1},tempo:{type:"string",visual:!0,default:""}};let R=q;customElements.get("ty-icon")||customElements.define("ty-icon",R);const P=class extends o{constructor(){super(),this.L=null,this.handleClick=n=>{this.clickable&&!this.disabled&&(n.preventDefault(),n.stopPropagation(),this.dispatchTagEvent("click",{target:this}),this.dispatchTagEvent("pointerdown",{target:this}))},this.handleDismiss=n=>{this.dismissible&&!this.disabled&&(n.preventDefault(),n.stopPropagation(),this.dispatchTagEvent("dismiss",{target:this}))},this.handleKeydown=n=>{const t=n;if(!this.disabled)switch(t.keyCode){case 13:case 32:this.clickable&&(t.preventDefault(),this.dispatchTagEvent("click",{target:this}));break;case 8:case 46:this.dismissible&&(t.preventDefault(),this.dispatchTagEvent("dismiss",{target:this}))}},r(this.shadowRoot,{css:'\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 — 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 — override on :host for full control */\n background: var(--tag-bg, transparent);\n color: var(--tag-color, var(--ty-text));\n border: 1px solid;\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: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',id:"ty-tag"})}onConnect(){queueMicrotask(()=>{this.setupEventListeners()})}onDisconnect(){this.cleanupEventListeners()}onPropertiesChanged(n){}dispatchTagEvent(n,t){this.dispatchEvent(new CustomEvent(n,{detail:t,bubbles:!0,composed:!0,cancelable:!0}))}cleanupEventListeners(){this.L&&(this.L(),this.L=null)}setupEventListeners(){this.cleanupEventListeners();const n=this.shadowRoot,t=n.querySelector(".tag-container"),e=n.querySelector(".tag-dismiss");t&&(t.addEventListener("click",this.handleClick),t.addEventListener("keydown",this.handleKeydown),e&&e.addEventListener("click",this.handleDismiss),this.L=()=>{t.removeEventListener("click",this.handleClick),t.removeEventListener("keydown",this.handleKeydown),e&&e.removeEventListener("click",this.handleDismiss)})}render(){this.shadowRoot.innerHTML=`\n <div class="tag-container" part="container"${this.clickable?' tabindex="0"':""}${this.disabled?' aria-disabled="true"':""}${this.value?` data-value="${this.value}"`:""}>\n <div class="tag-start">\n <slot name="start" class="tag-start"></slot>\n </div>\n <div class="tag-content">\n <slot></slot>\n </div>\n <div class="tag-end">\n <slot name="end"></slot>\n ${this.dismissible?'\n <button class="tag-dismiss" type="button" aria-label="Remove tag">\n <svg viewBox="0 0 20 20" fill="currentColor">\n <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />\n </svg>\n </button>\n ':""}\n </div>\n </div>\n `,this.u&&this.setupEventListeners()}get flavor(){return this.getProperty("flavor")}set flavor(n){this.setProperty("flavor",n)}get size(){return this.getProperty("size")}set size(n){this.setProperty("size",n)}get value(){return this.getProperty("value")}set value(n){this.setProperty("value",n)}get selected(){return this.getProperty("selected")}set selected(n){this.setProperty("selected",n)}get pill(){return this.getProperty("pill")}set pill(n){this.setProperty("pill",n)}get clickable(){return this.getProperty("clickable")}set clickable(n){this.setProperty("clickable",n)}get dismissible(){return this.getProperty("dismissible")}set dismissible(n){this.setProperty("dismissible",n)}get disabled(){return this.getProperty("disabled")}set disabled(n){this.setProperty("disabled",n)}};P.formAssociated=!0,P.properties={flavor:{type:"string",visual:!0,default:"neutral"},size:{type:"string",visual:!0,default:"md",validate:n=>["xs","sm","md","lg","xl"].includes(n),coerce:n=>["xs","sm","md","lg","xl"].includes(n)?n:"md"},value:{type:"string",visual:!0,default:""},selected:{type:"boolean",visual:!0,default:!1},pill:{type:"boolean",visual:!0,default:!0,aliases:{"not-pill":!1}},clickable:{type:"boolean",visual:!0,default:!1},dismissible:{type:"boolean",visual:!0,default:!1},disabled:{type:"boolean",visual:!0,default:!1}};let V=P;function B(n=768){return window.matchMedia(`(pointer: coarse) and (max-width: ${n}px)`).matches}customElements.get("ty-tag")||customElements.define("ty-tag",V);class TyOption extends HTMLElement{constructor(){super(),this.N=void 0,this.q=!1,this.R=!1,this.P=!1,this.V=!1,this.B=null,this.F=B(),r(this.attachShadow({mode:"open"}),{css:"\n/* Ty Option Component Styles */\n\n.option-content {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--ty-spacing-2);\n box-sizing: border-box;\n width: 100%;\n\n /* Ensure content is clickable */\n cursor: pointer;\n user-select: none;\n\n /* Smooth transitions */\n transition: var(--ty-transition-all);\n\n /* Text styling — Linear-paired typography */\n color: var(--ty-text);\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 padding: var(--ty-spacing-2) var(--ty-spacing-3);\n}\n\n:host([cloned]) .option-content {\n padding: 0px;\n background: transparent;\n}\n\n.option-content:hover {\n background: var(--ty-bg-primary-soft);\n}\n\n.option-content[highlighted] {\n background: var(--ty-bg-primary-soft);\n color: var(--ty-text-strong);\n font-weight: var(--ty-font-semibold);\n}\n\n.option-content[selected] {\n background: var(--ty-bg-primary-mild);\n color: var(--ty-text-strong);\n font-weight: var(--ty-font-medium);\n}\n\n.option-text {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.option-clear-btn {\n flex-shrink: 0;\n width: 28px;\n height: 28px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(0, 0, 0, 0.5);\n border: none;\n border-radius: 50%;\n cursor: pointer;\n padding: 0;\n transition: all 150ms ease;\n opacity: 0.9;\n}\n\n.option-clear-btn:hover {\n background: rgba(0, 0, 0, 0.7);\n opacity: 1;\n transform: scale(1.05);\n}\n\n.option-clear-btn:active {\n background: rgba(0, 0, 0, 0.85);\n transform: scale(0.95);\n}\n\n.option-clear-btn svg {\n width: 16px;\n height: 16px;\n color: #ffffff;\n stroke-width: 2.5;\n}\n\n.option-content[disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.option-content[hidden] {}\n\n/* Ensure nested elements inherit proper styling */\n.option-content * {\n pointer-events: none;\n}\n\n/* CRITICAL: Re-enable pointer events on clear button */\n.option-clear-btn {\n pointer-events: auto !important;\n}\n\n.option-clear-btn * {\n pointer-events: none;\n}\n",id:"ty-option"}),this.render()}static get observedAttributes(){return["value","disabled","selected","highlighted","hidden"]}connectedCallback(){const n=Object.getOwnPropertyDescriptor(this,"value");n&&void 0!==n.value&&(this.N=n.value,delete this.value),this.render()}disconnectedCallback(){this.removeClearButtonListener()}attributeChangedCallback(n,t,e){if(t!==e){switch(n){case"value":this.N=e||void 0;break;case"selected":this.q=null!==e;break;case"disabled":this.R=null!==e;break;case"highlighted":this.P=null!==e;break;case"hidden":this.V=null!==e}this.render()}}getOptionValue(){if(void 0!==this.N)return this.N;const n=this.getAttribute("value");return null!==n?n:this.textContent?.trim()||""}get value(){return this.getOptionValue()}set value(n){this.N!==n&&(this.N=n,void 0!==n?this.setAttribute("value",n):this.removeAttribute("value"),this.render())}get selected(){return this.q}set selected(n){this.q!==n&&(this.q=n,n?this.setAttribute("selected",""):this.removeAttribute("selected"),this.render())}get disabled(){return this.R}set disabled(n){this.R!==n&&(this.R=n,n?this.setAttribute("disabled",""):this.removeAttribute("disabled"),this.render())}get highlighted(){return this.P}set highlighted(n){this.P!==n&&(this.P=n,n?this.setAttribute("highlighted",""):this.removeAttribute("highlighted"),this.render())}get hidden(){return this.V}set hidden(n){this.V!==n&&(this.V=n,n?this.setAttribute("hidden",""):this.removeAttribute("hidden"),this.render())}removeClearButtonListener(){if(this.B){const n=this.shadowRoot?.querySelector(".option-clear-btn");n&&n.removeEventListener("click",this.B),this.B=null}}addClearButtonListener(n){this.removeClearButtonListener(),this.B=n=>{n.preventDefault(),n.stopPropagation(),this.dispatchEvent(new CustomEvent("clear-selection",{bubbles:!0,composed:!0,detail:{value:this.N}}))},n.addEventListener("click",this.B)}render(){const n=this.shadowRoot;if(this.getOptionValue(),n.querySelector(".option-content")){const t=this.q&&this.F,e=n.querySelector(".option-clear-btn");if(t&&!e){const t=n.querySelector(".option-content");if(t){const n=t.querySelector("slot");if(n&&!n.parentElement?.classList.contains("option-text")){const t=document.createElement("span");t.className="option-text",n.parentNode?.insertBefore(t,n),t.appendChild(n)}const e=document.createElement("button");e.className="option-clear-btn",e.type="button",e.setAttribute("aria-label","Clear selection"),e.innerHTML='\n <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">\n <line x1="18" y1="6" x2="6" y2="18"></line>\n <line x1="6" y1="6" x2="18" y2="18"></line>\n </svg>\n ',this.addClearButtonListener(e),t.appendChild(e)}}else!t&&e&&(e.remove(),this.removeClearButtonListener())}else if(this.q&&this.F){n.innerHTML='\n <div class="option-content">\n <span class="option-text"><slot></slot></span>\n <button class="option-clear-btn" type="button" aria-label="Clear selection">\n <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">\n <line x1="18" y1="6" x2="6" y2="18"></line>\n <line x1="6" y1="6" x2="18" y2="18"></line>\n </svg>\n </button>\n </div>\n ';const t=n.querySelector(".option-clear-btn");t&&this.addClearButtonListener(t)}else n.innerHTML='<div class="option-content"><slot></slot></div>';const t=n.querySelector(".option-content");t&&(this.R?t.setAttribute("disabled",""):t.removeAttribute("disabled"),this.q?t.setAttribute("selected",""):t.removeAttribute("selected"),this.P?t.setAttribute("highlighted",""):t.removeAttribute("highlighted"),this.V?t.setAttribute("hidden",""):t.removeAttribute("hidden"))}}customElements.get("ty-option")||customElements.define("ty-option",TyOption);const F='\n:host {\n display: block;\n font-family: var(--ty-font-sans);\n width: 100%;\n}\n\n:host([size="xl"]) {\n font-size: 20px;\n}\n\n\n:host([size="xs"]) {\n font-size: 12px;\n}\n\n\n:host([size="sm"]) {\n font-size: 14px;\n}\n\n:host([size="lg"]) {\n font-size: 18px;\n}\n\n.input-container {\n display: flex;\n flex-direction: column;\n width: 100%;\n box-sizing: border-box;\n}\n\n/* ===== LABEL STYLING ===== */\n\n.input-label {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n font-weight: var(--ty-font-medium);\n color: var(--ty-label-color);\n margin-bottom: 6px;\n padding-left: 12px;\n display: flex;\n align-items: center;\n}\n\n/* Required indicator - using SVG icon */\n.required-icon {\n display: inline-flex;\n align-items: center;\n color: var(--ty-color-danger);\n width: 12px;\n height: 12px;\n margin-left: 4px;\n vertical-align: middle;\n}\n\n.required-icon svg {\n width: 100%;\n height: 100%;\n}\n\n/* ===== INPUT WRAPPER WITH SLOTS ===== */\n\n.input-wrapper {\n display: flex;\n align-items: center;\n gap: 0.5rem; /* No gap by default */\n width: 100%;\n box-sizing: border-box;\n border: 1px solid var(--input-border, var(--ty-input-border));\n border-radius: var(--ty-radius-base);\n background: var(--input-bg, var(--input-bg, var(--ty-input-bg)));\n transition: all 0.15s ease-in-out;\n \n /* Default size (md) */\n min-height: 40px;\n padding: 0 12px;\n}\n\n/* Wrapper states */\n.input-wrapper:hover:not(.disabled) {\n border-color: var(--input-border-hover, var(--ty-input-border-hover));\n}\n\n.input-wrapper.focused {\n border-color: var(--input-border-focus, var(--ty-input-border-focus));\n box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n.input-wrapper.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n background: var(--input-disabled-bg, var(--ty-input-disabled-bg));\n border-color: var(--input-disabled-border, var(--ty-input-disabled-border));\n}\n\n/* ===== SLOT STYLING ===== */\n\n/* Style slotted content directly (no wrappers needed) */\n::slotted([slot="start"]),\n::slotted([slot="end"]) {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: var(--ty-color-text-soft);\n}\n\n/* Icon sizing for slotted icons */\n::slotted(ty-icon) {\n width: 1em;\n height: 1em;\n flex-shrink: 0;\n}\n\n/* ===== ERROR MESSAGE STYLING ===== */\n\n.error-message {\n font-size: var(--ty-font-xs);\n line-height: var(--ty-leading-xs);\n letter-spacing: var(--ty-tracking-xs);\n color: var(--ty-color-danger);\n margin-top: 4px;\n padding-left: 12px;\n}\n\n/* Error state for wrapper */\n.input-wrapper.error {\n border-color: var(--ty-color-danger);\n background: var(--ty-bg-danger-soft);\n}\n\n.input-wrapper.error.focused {\n border-color: var(--ty-color-danger-mild);\n box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n/* ===== INPUT BASE STYLING ===== */\n\ninput {\n /* Reset and base styles — Linear-paired typography */\n flex: 1;\n min-width: 0;\n box-sizing: border-box;\n border: none;\n outline: none;\n background: transparent;\n color: var(--input-color, var(--ty-input-color));\n font-family: inherit;\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n font-weight: var(--ty-font-normal);\n padding: 0;\n margin: 0;\n}\n\n/* Remove number input spinner arrows */\ninput[type="number"]::-webkit-outer-spin-button,\ninput[type="number"]::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\ninput[type="number"] {\n -moz-appearance: textfield;\n}\n\n/* Disabled state */\ninput:disabled {\n cursor: not-allowed;\n color: var(--input-disabled-color, var(--ty-input-disabled-color));\n}\n\n/* Placeholder styling */\ninput::placeholder {\n color: var(--input-placeholder, var(--ty-input-placeholder));\n font-weight: 400;\n}\n\n/* ===== SIZE MODIFIERS ===== */\n\n/* Extra Small */\n.input-wrapper.xs {\n min-height: 32px;\n padding: 0 8px;\n border-radius: var(--ty-input-radius-xs, var(--ty-radius-base));\n}\n\n.input-wrapper.xs input {\n font-size: var(--ty-font-xs);\n line-height: var(--ty-leading-xs);\n letter-spacing: var(--ty-tracking-xs);\n}\n\n/* Small */\n.input-wrapper.sm {\n min-height: 36px;\n padding: 0 10px;\n border-radius: var(--ty-input-radius-sm, var(--ty-radius-base));\n}\n\n.input-wrapper.sm input {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n}\n\n/* Medium (default) */\n.input-wrapper.md {\n min-height: 40px;\n padding: 0 12px;\n border-radius: var(--ty-input-radius-md, var(--ty-radius-base));\n}\n\n.input-wrapper.md input {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n}\n\n/* Large */\n.input-wrapper.lg {\n min-height: 44px;\n padding: 0 14px;\n border-radius: var(--ty-input-radius-lg, var(--ty-radius-base));\n}\n\n.input-wrapper.lg input {\n font-size: var(--ty-font-base);\n line-height: var(--ty-leading-base);\n letter-spacing: var(--ty-tracking-base);\n}\n\n/* Extra Large */\n.input-wrapper.xl {\n min-height: 48px;\n padding: 0 16px;\n border-radius: var(--ty-input-radius-xl, var(--ty-radius-base));\n}\n\n.input-wrapper.xl input {\n font-size: var(--ty-font-lg);\n line-height: var(--ty-leading-lg);\n letter-spacing: var(--ty-tracking-lg);\n}\n\n/* ===== SEMANTIC FLAVOR MODIFIERS ===== */\n\n/* Primary */\n.input-wrapper.primary {\n border-color: var(--ty-input-primary-border, var(--ty-color-primary));\n}\n\n.input-wrapper.primary:hover:not(.disabled) {\n border-color: var(--ty-color-primary-mild);\n}\n\n.input-wrapper.primary.focused {\n border-color: var(--ty-color-primary-mild);\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n/* Secondary */\n.input-wrapper.secondary {\n border-color: var(--ty-input-secondary-border, var(--ty-color-secondary));\n}\n\n.input-wrapper.secondary.focused {\n border-color: var(--ty-color-secondary-mild);\n box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);\n}\n\n/* Success */\n.input-wrapper.success {\n border-color: var(--ty-input-success-border);\n}\n\n.input-wrapper.success:hover:not(.disabled) {\n border-color: var(--ty-color-success-mild);\n}\n\n.input-wrapper.success.focused {\n border-color: var(--ty-color-success-mild);\n box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);\n}\n\n/* Danger */\n.input-wrapper.danger {\n border-color: var(--ty-input-danger-border);\n}\n\n.input-wrapper.danger:hover:not(.disabled) {\n border-color: var(--ty-color-danger-mild);\n}\n\n.input-wrapper.danger.focused {\n border-color: var(--ty-color-danger-mild);\n box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);\n}\n\n/* Warning */\n.input-wrapper.warning {\n border-color: var(--ty-input-warning-border);\n}\n\n.input-wrapper.warning:hover:not(.disabled) {\n border-color: var(--ty-color-warning-mild);\n}\n\n.input-wrapper.warning.focused {\n border-color: var(--ty-color-warning-mild);\n box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);\n}\n\n/* Neutral (default) */\n.input-wrapper.neutral.focused {\n border-color: var(--input-border-focus, var(--ty-input-border-focus));\n box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n/* ===== ACCESSIBILITY ENHANCEMENTS ===== */\n\ninput:focus-visible {\n outline: none;\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: high) {\n .input-wrapper {\n border-width: 2px;\n }\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n .input-wrapper {\n transition: none;\n }\n}\n\n/* ===== RESPONSIVE BEHAVIOR ===== */\n\n@media (max-width: 640px) {\n .input-wrapper.lg {\n min-height: 40px;\n padding: 0 12px;\n }\n\n .input-wrapper.lg input {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n }\n\n .input-wrapper.xl {\n min-height: 44px;\n padding: 0 14px;\n }\n\n .input-wrapper.xl input {\n font-size: var(--ty-font-base);\n line-height: var(--ty-leading-base);\n letter-spacing: var(--ty-tracking-base);\n }\n}\n\n@media (max-width: 480px) {\n .input-wrapper.xl {\n min-height: 40px;\n padding: 0 12px;\n }\n\n .input-wrapper.xl input {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n }\n}\n\n/* ===== CHECKBOX STYLING ===== */\n\n.checkbox-container {\n display: inline-flex;\n align-items: center;\n outline: none;\n transition: all 0.15s ease-in-out;\n user-select: none;\n cursor: pointer;\n\n /* Default size (md) - matching input sizes */\n border-radius: 6px;\n gap: var(--ty-spacing-1);\n color: var(--ty-text-faint);\n}\n\n.checkbox-container[aria-checked="true"] {\n color: var(--ty-text);\n}\n\n/* Ensure slotted label content inherits the color from container */\n.checkbox-container ::slotted(*) {\n color: inherit;\n transition: color 0.15s ease-in-out;\n}\n\n.checkbox-container label {\n cursor: pointer;\n}\n\n.checkbox-container label {\n font-size: var(--ty-font-sm);\n}\n\n.checkbox-container.sm label {\n font-size: var(--ty-font-xs);\n}\n\n.checkbox-container.lg label {\n font-size: var(--ty-font-base);\n}\n\n.checkbox-container.xl label {\n font-size: var(--ty-font-lg);\n}\n\n/* Checkbox input container - different layout for checkboxes */\n.input-container.checkbox-layout {\n flex-direction: row;\n align-items: center;\n gap: 12px;\n width: auto;\n /* Don\'t force full width for checkboxes */\n}\n\n.input-container.checkbox-layout .input-label {\n margin-bottom: 0;\n padding-left: 0;\n order: 2;\n cursor: pointer;\n flex: 1;\n}\n\n.input-container.checkbox-layout .checkbox-container {\n order: 1;\n flex-shrink: 0;\n}\n\n/* Error message positioning for checkboxes */\n.input-container.checkbox-layout .error-message {\n padding-left: 0;\n margin-left: 52px;\n /* Align with label text */\n}\n\n.checkbox-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n color: inherit;\n transition: color 0.15s ease-in-out;\n pointer-events: none;\n /* Let the container handle the click */\n}\n\n.checkbox-container svg {\n width: 24px;\n height: 24px;\n}\n\n/* ===== CHECKBOX SIZE MODIFIERS ===== */\n\n.checkbox-container.xs svg {\n width: 16px;\n height: 16px;\n}\n\n/* Adjust error message margin for XS */\n.input-container.checkbox-layout .checkbox-container.xs~.error-message {\n margin-left: 44px;\n}\n\n\n.checkbox-container.sm svg {\n width: 20px;\n height: 20px;\n}\n\n/* Adjust error message margin for SM */\n.input-container.checkbox-layout .checkbox-container.sm~.error-message {\n margin-left: 48px;\n}\n\n\n.checkbox-container.md svg {\n width: 24px;\n height: 24px;\n}\n\n\n.checkbox-container.lg svg {\n width: 28px;\n height: 28px;\n}\n\n.checkbox-container.xl svg {\n width: 32px;\n height: 32px;\n}\n\n\n.checkbox-container.xl svg {\n font-size: 20px;\n}\n\n/* Adjust error message margin for LG */\n.input-container.checkbox-layout .checkbox-container.lg~.error-message {\n margin-left: 56px;\n}\n\n\n/* Adjust error message margin for XL */\n.input-container.checkbox-layout .checkbox-container.xl~.error-message {\n margin-left: 60px;\n /* 48px + 12px gap */\n}\n\n/* ===== CHECKBOX SEMANTIC FLAVORS ===== */\n\n.checkbox-container.primary {\n color: var(--ty-color-primary-soft);\n}\n\n\n.checkbox-container.primary[aria-checked="true"] {\n color: var(--ty-color-primary);\n}\n\n.checkbox-container.secondary {\n color: var(--ty-color-secondary-soft);\n}\n\n\n.checkbox-container.secondary[aria-checked="true"] {\n color: var(--ty-color-secondary);\n}\n\n.checkbox-container.success {\n color: var(--ty-color-success-soft);\n}\n\n\n.checkbox-container.success[aria-checked="true"] {\n color: var(--ty-color-success);\n}\n\n.checkbox-container.danger {\n color: var(--ty-color-danger-soft);\n}\n\n.checkbox-container.danger[aria-checked="true"] {\n color: var(--ty-color-danger);\n}\n\n.checkbox-container.warning {\n color: var(--ty-color-warning-soft);\n}\n\n.checkbox-container.warning[aria-checked="true"] {\n color: var(--ty-color-warning);\n}\n\n\n/* Neutral */\n.checkbox-container.neutral {\n color: var(--ty-color-neutral-soft);\n}\n\n.checkbox-container.neutral[aria-checked="true"] {\n color: var(--ty-color-neutral);\n}\n\n/* Disabled state */\n.checkbox-container.disabled {\n pointer-events: none;\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.checkbox-container.disabled .checkbox-icon {\n color: var(--ty-color-neutral-faint);\n}\n\n/* Error state */\n.checkbox-container.error .checkbox-icon {\n color: var(--ty-color-danger);\n}\n\n.checkbox-container.error:focus {\n box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);\n}\n\n/* Required state */\n.checkbox-container.required .checkbox-icon {\n /* Could add specific styling for required checkboxes */\n}\n\n/* ===== RESPONSIVE CHECKBOX BEHAVIOR ===== */\n\n@container (max-width: 480px) {\n .checkbox-container.lg {\n width: 40px;\n height: 40px;\n }\n\n .checkbox-container.lg svg {\n width: 20px;\n height: 20px;\n }\n\n .checkbox-container.xl {\n width: 44px;\n height: 44px;\n }\n\n .checkbox-container.xl svg {\n width: 22px;\n height: 22px;\n }\n}\n\n@container (max-width: 320px) {\n .checkbox-container.xl {\n width: 40px;\n height: 40px;\n }\n\n .checkbox-container.xl svg {\n width: 20px;\n height: 20px;\n }\n}\n\n/* Fallback for browsers without container query support */\n@media (max-width: 640px) {\n .checkbox-container.lg {\n width: 40px;\n height: 40px;\n }\n\n .checkbox-container.lg svg {\n width: 20px;\n height: 20px;\n }\n\n .checkbox-container.xl {\n width: 44px;\n height: 44px;\n }\n\n .checkbox-container.xl svg {\n width: 22px;\n height: 22px;\n }\n}\n\n@media (max-width: 480px) {\n .checkbox-container.xl {\n width: 40px;\n height: 40px;\n }\n\n .checkbox-container.xl svg {\n width: 20px;\n height: 20px;\n }\n}\n';function H(n){return["number","currency","percent","compact"].includes(n)}function j(n,t){if(t)return t;const e=n.closest("[lang]");if(e){const n=e.getAttribute("lang");if(n)return n}return document.documentElement.lang?document.documentElement.lang:navigator.language?navigator.language:"en-US"}function W(n,t){let e=j(n);const o=new MutationObserver(o=>{for(const i of o)if("attributes"===i.type&&"lang"===i.attributeName){const o=j(n);o!==e&&(e=o,t(o))}});return o.observe(document.documentElement,{attributes:!0,attributeFilter:["lang"],subtree:!0}),()=>o.disconnect()}const Y='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-asterisk-icon lucide-asterisk"><path d="M12 6v12"/><path d="M17.196 9 6.804 15"/><path d="m6.804 9 10.392 6"/></svg>',_=class extends o{constructor(){super(),this.H=null,this.j=!1,this.W=!1,this.Y=null,this._=null,this.U=null,this.G=null,this.X=null,this.K=null,r(this.shadowRoot,{css:F,id:"ty-input"})}onConnect(){this.initializeShadowValue(),this.Z=W(this,()=>{this.render()})}onDisconnect(){this.removeEventListeners(),this.Z&&(this.Z(),this.Z=void 0),null!==this.X&&(clearTimeout(this.X),this.X=null),null!==this.K&&(clearTimeout(this.K),this.K=null)}onPropertiesChanged(n){for(const{name:t,newValue:e}of n)switch(t){case"value":this.H=this.parseShadowValue(e||"");break;case"type":const n=this.getProperty("value")||"";this.H=this.parseShadowValue(n);break;case"error":e&&"neutral"===this.getProperty("flavor")&&this.setProperty("flavor","danger")}}onFormReset(){this.H=null,this.j=!1,null!==this.X&&(clearTimeout(this.X),this.X=null),null!==this.K&&(clearTimeout(this.K),this.K=null),this.render()}getFormValue(){return null!==this.H?this.H+"":null}initializeShadowValue(){const n=this.getProperty("value");n&&(this.H=this.parseShadowValue(n),this.m.setFormValue(null!==this.H?this.H+"":null))}parseShadowValue(n){if(!n||"string"!=typeof n||""===n.trim())return null;if(H(this.type)){const t=function(n){if(!n||""===n.trim())return null;let t=n.replace(/[^\d.,-]/g,"").trim();if(""===t||"-"===t)return null;const e=t.lastIndexOf(","),o=t.lastIndexOf("."),i=Math.max(e,o);if(-1===i){const n=parseFloat(t);return isNaN(n)?null:n}const r=t.slice(0,i).replace(/[.,]/g,""),s=t.slice(i+1),a=parseFloat(r+"."+s);return isNaN(a)?null:a}(n);return null!==t&&0===this.precision?Math.round(t):t}return n}shouldFormat(){return H(this.type)&&!this.j&&null!==this.H&&"number"==typeof this.H}getFormatConfig(){return{type:this.type,locale:this.locale,currency:this.currency,precision:this.precision}}getDisplayValue(){if(this.shouldFormat()){let n=this.H;return"percent"===this.type&&(n/=100),function(n,t){const{type:e,locale:o="en-US",currency:i="USD",precision:r}=t,s={};switch(void 0!==r&&(s.minimumFractionDigits=r,s.maximumFractionDigits=r),e){case"currency":s.style="currency",s.currency=i;break;case"percent":s.style="percent";break;case"compact":s.notation="compact",s.compactDisplay="short";break;default:s.style="decimal"}return new Intl.NumberFormat(o,s).format(n).replace(/\u202F/g," ").replace(/\u2009/g," ")}(n,this.getFormatConfig())}return null!==this.H?this.H+"":""}get type(){return this.getProperty("type")}set type(n){this.setProperty("type",n)}get value(){return null!==this.H?this.H+"":""}set value(n){this.setProperty("value",n)}get name(){return this.getProperty("name")}set name(n){this.setProperty("name",n)}get placeholder(){return this.getProperty("placeholder")}set placeholder(n){this.setProperty("placeholder",n)}get label(){return this.getProperty("label")}set label(n){this.setProperty("label",n)}get disabled(){return this.getProperty("disabled")}set disabled(n){this.setProperty("disabled",n)}get required(){return this.getProperty("required")}set required(n){this.setProperty("required",n)}get error(){return this.getProperty("error")}set error(n){this.setProperty("error",n)}get size(){return this.getProperty("size")}set size(n){this.setProperty("size",n)}get flavor(){return this.getProperty("flavor")}set flavor(n){this.setProperty("flavor",n)}get currency(){return this.getProperty("currency")}set currency(n){this.setProperty("currency",n)}get locale(){return j(this,this.getProperty("locale"))}set locale(n){this.setProperty("locale",n)}get precision(){return this.getProperty("precision")}set precision(n){this.setProperty("precision",n)}get debounce(){return this.getProperty("debounce")}set debounce(n){this.setProperty("debounce",n)}get form(){return this.m.form}buildClassList(){const n=[this.size,this.flavor];return this.disabled&&n.push("disabled"),this.required&&n.push("required"),this.error&&n.push("error"),n.join(" ")}dispatchInputEvent(n,t){this.dispatchEvent(new CustomEvent("input",{detail:{value:this.H,formattedValue:this.shouldFormat()?this.getDisplayValue():null,rawValue:n,originalEvent:t},bubbles:!0,composed:!0}))}dispatchChangeEvent(n,t){this.dispatchEvent(new CustomEvent("change",{detail:{value:this.H,formattedValue:this.shouldFormat()?this.getDisplayValue():null,rawValue:n,originalEvent:t},bubbles:!0,composed:!0}))}removeEventListeners(){if(!this.W)return;const n=this.shadowRoot;if(!n)return;const t=n.querySelector("input");t&&(this.Y&&(t.removeEventListener("input",this.Y),this.Y=null),this._&&(t.removeEventListener("change",this._),this._=null),this.U&&(t.removeEventListener("focus",this.U),this.U=null),this.G&&(t.removeEventListener("blur",this.G),this.G=null),this.W=!1)}setupEventListeners(){if(this.W)return;const n=this.shadowRoot,t=n.querySelector("input"),e=n.querySelector(".input-wrapper");t&&e&&(this.Y=n=>{n.stopPropagation(),n.stopImmediatePropagation();const e=n.target.value;this.H=this.parseShadowValue(e),this.m.setFormValue(null!==this.H?this.H+"":null),null!==this.X&&clearTimeout(this.X),this.debounce>0?this.X=window.setTimeout(()=>{this.dispatchInputEvent(t.value,n),this.X=null},this.debounce):this.dispatchInputEvent(e,n)},this._=n=>{n.stopPropagation(),n.stopImmediatePropagation();const e=n.target.value;this.H=this.parseShadowValue(e),this.m.setFormValue(null!==this.H?this.H+"":null),null!==this.K&&clearTimeout(this.K),this.debounce>0?this.K=window.setTimeout(()=>{this.dispatchChangeEvent(t.value,n),this.K=null},this.debounce):this.dispatchChangeEvent(e,n)},this.U=n=>{this.j=!0,e.classList.add("focused"),H(this.type)&&null!==this.H&&(t.value=this.H+""),this.dispatchEvent(new CustomEvent("focus",{detail:{originalEvent:n},bubbles:!0,composed:!0}))},this.G=n=>{const o=n.target.value;null!==this.X&&(clearTimeout(this.X),this.X=null,this.dispatchInputEvent(o,n)),null!==this.K&&(clearTimeout(this.K),this.K=null,this.dispatchChangeEvent(o,n)),this.j=!1,e.classList.remove("focused"),this.shouldFormat()&&(t.value=this.getDisplayValue()),this.dispatchEvent(new CustomEvent("blur",{detail:{originalEvent:n},bubbles:!0,composed:!0}))},t.addEventListener("input",this.Y),t.addEventListener("change",this._),t.addEventListener("focus",this.U),t.addEventListener("blur",this.G),this.W=!0)}render(){const n=this.shadowRoot,t=n.querySelector("input"),e=n.querySelector(".input-wrapper"),o=n.querySelector(".input-label"),i=n.querySelector(".error-message"),r=this.buildClassList(),s=["password","email","tel","url"].includes(this.type)?this.type:"text",a=H(this.type)?"decimal":"email"===this.type?"email":"tel"===this.type?"tel":"url"===this.type?"url":void 0,l=this.getDisplayValue();if(t&&e){if(t.type=s,t.value=l,t.placeholder=this.placeholder,t.name=this.name,a?t.inputMode=a:t.removeAttribute("inputmode"),e.className="input-wrapper "+r,t.disabled=this.disabled,this.disabled?t.setAttribute("disabled",""):t.removeAttribute("disabled"),t.required=this.required,this.required?t.setAttribute("required",""):t.removeAttribute("required"),this.label)if(o)o.innerHTML=`${this.label}${this.required?`<span class="required-icon">${Y}</span>`:""}`,o.style.display="flex";else{const t=document.createElement("label");t.className="input-label",t.innerHTML=`${this.label}${this.required?`<span class="required-icon">${Y}</span>`:""}`;const o=n.querySelector(".input-container");o&&o.insertBefore(t,e)}else o&&(o.style.display="none");if(this.error)if(i)i.textContent=this.error;else{const t=document.createElement("div");t.className="error-message",t.textContent=this.error,n.querySelector(".input-container")?.appendChild(t)}else i&&i.remove()}else{n.innerHTML=`\n <div class="input-container">\n ${this.label?`\n <label class="input-label">\n ${this.label}\n ${this.required?`<span class="required-icon">${Y}</span>`:""}\n </label>\n `:""}\n <div class="input-wrapper ${r}">\n <slot name="start"></slot>\n <input\n type="${s}"\n value="${l}"\n placeholder="${this.placeholder}"\n name="${this.name}"\n ${a?`inputmode="${a}"`:""}\n />\n <slot name="end"></slot>\n </div>\n ${this.error?`\n <div class="error-message">${this.error}</div>\n `:""}\n </div>\n `;const t=n.querySelector("input");t.disabled=this.disabled,t.required=this.required,this.setupEventListeners()}}};_.formAssociated=!0,_.properties={type:{type:"string",visual:!0,default:"text",validate:n=>["text","email","password","number","tel","url","currency","percent","compact"].includes(n),coerce:n=>["text","email","password","number","tel","url","currency","percent","compact"].includes(n)?n:"text"},value:{type:"string",visual:!0,formValue:!0,emitChange:!0,default:""},name:{type:"string",default:""},placeholder:{type:"string",visual:!0,default:""},label:{type:"string",visual:!0,default:""},disabled:{type:"boolean",visual:!0,default:!1},required:{type:"boolean",visual:!0,default:!1},error:{type:"string",visual:!0,default:""},size:{type:"string",visual:!0,default:"md",validate:n=>["xs","sm","md","lg","xl"].includes(n),coerce:n=>["xs","sm","md","lg","xl"].includes(n)?n:"md"},flavor:{type:"string",visual:!0,default:"neutral",validate:n=>["primary","secondary","success","danger","warning","neutral"].includes(n),coerce:n=>["primary","secondary","success","danger","warning","neutral"].includes(n)?n:"neutral"},currency:{type:"string",visual:!0,default:"USD"},locale:{type:"string",visual:!0,default:"en-US"},precision:{type:"number",visual:!0,default:void 0,validate:n=>null==n||"number"==typeof n&&n>=0&&10>=n,coerce:n=>{if(null==n)return;const t=+n;return isNaN(t)?void 0:Math.max(0,Math.min(10,Math.floor(t)))}},debounce:{type:"number",default:0,validate:n=>{const t=+n;return!isNaN(t)&&t>=0&&5e3>=t},coerce:n=>{const t=+n;return isNaN(t)?0:Math.max(0,Math.min(5e3,Math.floor(t)))}}};let U=_;customElements.get("ty-input")||customElements.define("ty-input",U);const G=`\n${F}\n\n/* Override input's :host to be inline (sized to its visual) */\n:host {\n display: inline-flex;\n width: auto;\n vertical-align: middle;\n}\n`,X='<svg fill=\'currentColor\' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">\x3c!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--\x3e<path d="M160 96L480 96C515.3 96 544 124.7 544 160L544 480C544 515.3 515.3 544 480 544L160 544C124.7 544 96 515.3 96 480L96 160C96 124.7 124.7 96 160 96z"/></svg>',K='<svg fill=\'currentColor\' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">\x3c!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--\x3e<path d="M480 96C515.3 96 544 124.7 544 160L544 480C544 515.3 515.3 544 480 544L160 544C124.7 544 96 515.3 96 480L96 160C96 124.7 124.7 96 160 96L480 96zM438 209.7C427.3 201.9 412.3 204.3 404.5 215L285.1 379.2L233 327.1C223.6 317.7 208.4 317.7 199.1 327.1C189.8 336.5 189.7 351.7 199.1 361L271.1 433C276.1 438 283 440.5 289.9 440C296.8 439.5 303.3 435.9 307.4 430.2L443.3 243.2C451.1 232.5 448.7 217.5 438 209.7z"/></svg>',Z=class extends o{constructor(){super(),this.W=!1,this.J=null,this.nn=null,this.U=null,this.G=null,r(this.shadowRoot,{css:G,id:"ty-checkbox"})}onConnect(){}onDisconnect(){this.removeEventListeners()}onPropertiesChanged(n){}getFormValue(){return this.checked?this.value:null}buildClassList(){const n=[this.size,this.flavor];return this.disabled&&n.push("disabled"),this.required&&n.push("required"),n.join(" ")}handleCheckboxClick(n){if(this.disabled)return;const t=!this.checked;this.checked=t,setTimeout(()=>{const e={value:t,checked:t,formValue:t?this.value:null,originalEvent:n};this.dispatchEvent(new CustomEvent("input",{detail:e,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:e,bubbles:!0,composed:!0}))},0)}handleCheckboxKeydown(n){this.disabled||["Space"," ","Enter"].includes(n.key)&&(n.preventDefault(),n.stopPropagation(),this.handleCheckboxClick(n))}removeEventListeners(){if(!this.W)return;const n=this.shadowRoot;if(!n)return;const t=n.querySelector(".checkbox-container");t&&(this.J&&(t.removeEventListener("click",this.J),this.J=null),this.nn&&(t.removeEventListener("keydown",this.nn),this.nn=null),this.U&&(t.removeEventListener("focus",this.U),this.U=null),this.G&&(t.removeEventListener("blur",this.G),this.G=null),this.W=!1)}setupEventListeners(){if(this.W)return;const n=this.shadowRoot.querySelector(".checkbox-container");n&&(this.J=n=>{this.handleCheckboxClick(n)},this.nn=n=>{this.handleCheckboxKeydown(n)},this.U=()=>{n.classList.add("focused")},this.G=()=>{n.classList.remove("focused")},n.addEventListener("click",this.J),n.addEventListener("keydown",this.nn),n.addEventListener("focus",this.U),n.addEventListener("blur",this.G),this.W=!0)}render(){const n=this.shadowRoot;let t=n.querySelector(".checkbox-container");const e=this.buildClassList();if(t){t.className="checkbox-container "+e,t.tabIndex=this.disabled?-1:0,t.setAttribute("aria-checked",this.checked+""),t.setAttribute("aria-disabled",this.disabled+""),t.setAttribute("aria-required",this.required+"");const n=t.querySelector(".checkbox-icon");n&&(n.innerHTML=this.checked?K:X)}else{t=document.createElement("div"),t.className="checkbox-container "+e,t.tabIndex=this.disabled?-1:0,t.setAttribute("role","checkbox"),t.setAttribute("aria-checked",this.checked+""),t.setAttribute("aria-disabled",this.disabled+""),t.setAttribute("aria-required",this.required+"");const o=document.createElement("div");o.className="checkbox-icon",o.innerHTML=this.checked?K:X,t.appendChild(o),n.appendChild(t),this.setupEventListeners()}}get checked(){return this.getProperty("checked")}set checked(n){this.setProperty("checked",n)}get value(){return this.getProperty("value")}set value(n){this.setProperty("value",n)}get name(){return this.getProperty("name")}set name(n){this.setProperty("name",n)}get disabled(){return this.getProperty("disabled")}set disabled(n){this.setProperty("disabled",n)}get required(){return this.getProperty("required")}set required(n){this.setProperty("required",n)}get size(){return this.getProperty("size")}set size(n){this.setProperty("size",n)}get flavor(){return this.getProperty("flavor")}set flavor(n){this.setProperty("flavor",n)}get form(){return this.m.form}};Z.formAssociated=!0,Z.properties={checked:{type:"boolean",visual:!0,formValue:!0,emitChange:!0,default:!1},value:{type:"string",default:"on"},name:{type:"string",default:""},disabled:{type:"boolean",visual:!0,default:!1},required:{type:"boolean",visual:!0,default:!1},size:{type:"string",visual:!0,default:"md",validate:n=>["xs","sm","md","lg","xl"].includes(n),coerce:n=>["xs","sm","md","lg","xl"].includes(n)?n:"md"},flavor:{type:"string",visual:!0,default:"neutral",validate:n=>["primary","secondary","success","danger","warning","neutral"].includes(n),coerce:n=>["primary","secondary","success","danger","warning","neutral"].includes(n)?n:"neutral"}};let J=Z;customElements.get("ty-checkbox")||customElements.define("ty-checkbox",J);const Q=`\n${F}\n\n/* Override input's :host so the switch sizes to its visual */\n:host {\n display: inline-flex;\n width: auto;\n vertical-align: middle;\n}\n\n/* ===== SWITCH CONTAINER (just the visual) ===== */\n.switch-container {\n display: inline-block;\n cursor: pointer;\n user-select: none;\n outline: none;\n vertical-align: middle;\n}\n\n.switch-container.disabled {\n cursor: not-allowed;\n opacity: 0.55;\n}\n\n.switch-container:focus-visible .switch-track,\n.switch-container.focused .switch-track {\n box-shadow: 0 0 0 3px var(--ty-input-shadow-focus);\n}\n\n/* ===== TRACK ===== */\n.switch-track {\n position: relative;\n flex-shrink: 0;\n width: 36px;\n height: 20px;\n border-radius: 999px;\n background: var(--ty-color-neutral-soft, var(--ty-input-border));\n transition: background-color 0.18s ease-in-out;\n box-sizing: border-box;\n}\n\n/* ===== THUMB ===== */\n.switch-thumb {\n position: absolute;\n top: 2px;\n left: 2px;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: white;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n transition: transform 0.18s ease-in-out, background-color 0.18s ease-in-out;\n}\n\n/* ===== CHECKED STATE ===== */\n.switch-container[aria-checked="true"] .switch-track {\n background: var(--ty-color-primary);\n}\n\n.switch-container[aria-checked="true"] .switch-thumb {\n transform: translateX(16px);\n}\n\n/* ===== SIZE VARIANTS ===== */\n.switch-container.xs .switch-track { width: 26px; height: 14px; }\n.switch-container.xs .switch-thumb { width: 10px; height: 10px; }\n.switch-container.xs[aria-checked="true"] .switch-thumb { transform: translateX(12px); }\n\n.switch-container.sm .switch-track { width: 30px; height: 16px; }\n.switch-container.sm .switch-thumb { width: 12px; height: 12px; }\n.switch-container.sm[aria-checked="true"] .switch-thumb { transform: translateX(14px); }\n\n/* md is default — already set above */\n\n.switch-container.lg .switch-track { width: 44px; height: 24px; }\n.switch-container.lg .switch-thumb { width: 20px; height: 20px; }\n.switch-container.lg[aria-checked="true"] .switch-thumb { transform: translateX(20px); }\n\n.switch-container.xl .switch-track { width: 52px; height: 28px; }\n.switch-container.xl .switch-thumb { width: 24px; height: 24px; }\n.switch-container.xl[aria-checked="true"] .switch-thumb { transform: translateX(24px); }\n\n/* ===== FLAVOR VARIANTS (checked-state colors) ===== */\n.switch-container.primary[aria-checked="true"] .switch-track { background: var(--ty-color-primary); }\n.switch-container.secondary[aria-checked="true"] .switch-track { background: var(--ty-color-secondary); }\n.switch-container.success[aria-checked="true"] .switch-track { background: var(--ty-color-success); }\n.switch-container.danger[aria-checked="true"] .switch-track { background: var(--ty-color-danger); }\n.switch-container.warning[aria-checked="true"] .switch-track { background: var(--ty-color-warning); }\n.switch-container.neutral[aria-checked="true"] .switch-track { background: var(--ty-color-neutral); }\n\n`,nn=class extends o{constructor(){super(),this.W=!1,this.J=null,this.nn=null,this.U=null,this.G=null,r(this.shadowRoot,{css:Q,id:"ty-switch"})}onConnect(){}onDisconnect(){this.removeEventListeners()}onPropertiesChanged(n){}getFormValue(){return this.checked?this.value:null}buildClassList(){const n=[this.size,this.flavor];return this.disabled&&n.push("disabled"),this.required&&n.push("required"),n.join(" ")}handleSwitchClick(n){if(this.disabled)return;const t=!this.checked;this.checked=t,setTimeout(()=>{const e={value:t,checked:t,formValue:t?this.value:null,originalEvent:n};this.dispatchEvent(new CustomEvent("input",{detail:e,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:e,bubbles:!0,composed:!0}))},0)}handleSwitchKeydown(n){this.disabled||["Space"," ","Enter"].includes(n.key)&&(n.preventDefault(),n.stopPropagation(),this.handleSwitchClick(n))}removeEventListeners(){if(!this.W)return;const n=this.shadowRoot;if(!n)return;const t=n.querySelector(".switch-container");t&&(this.J&&(t.removeEventListener("click",this.J),this.J=null),this.nn&&(t.removeEventListener("keydown",this.nn),this.nn=null),this.U&&(t.removeEventListener("focus",this.U),this.U=null),this.G&&(t.removeEventListener("blur",this.G),this.G=null),this.W=!1)}setupEventListeners(){if(this.W)return;const n=this.shadowRoot.querySelector(".switch-container");n&&(this.J=n=>this.handleSwitchClick(n),this.nn=n=>this.handleSwitchKeydown(n),this.U=()=>n.classList.add("focused"),this.G=()=>n.classList.remove("focused"),n.addEventListener("click",this.J),n.addEventListener("keydown",this.nn),n.addEventListener("focus",this.U),n.addEventListener("blur",this.G),this.W=!0)}render(){const n=this.shadowRoot;let t=n.querySelector(".switch-container");const e=this.buildClassList();if(t)t.className="switch-container "+e,t.tabIndex=this.disabled?-1:0,t.setAttribute("aria-checked",this.checked?"true":"false"),t.setAttribute("aria-disabled",this.disabled?"true":"false"),t.setAttribute("aria-required",this.required?"true":"false");else{t=document.createElement("div"),t.className="switch-container "+e,t.tabIndex=this.disabled?-1:0,t.setAttribute("role","switch"),t.setAttribute("aria-checked",this.checked?"true":"false"),t.setAttribute("aria-disabled",this.disabled?"true":"false"),t.setAttribute("aria-required",this.required?"true":"false");const o=document.createElement("div");o.className="switch-track";const i=document.createElement("div");i.className="switch-thumb",o.appendChild(i),t.appendChild(o),n.appendChild(t),this.setupEventListeners()}}get checked(){return this.getProperty("checked")}set checked(n){this.setProperty("checked",n)}get value(){return this.getProperty("value")}set value(n){this.setProperty("value",n)}get name(){return this.getProperty("name")}set name(n){this.setProperty("name",n)}get disabled(){return this.getProperty("disabled")}set disabled(n){this.setProperty("disabled",n)}get required(){return this.getProperty("required")}set required(n){this.setProperty("required",n)}get size(){return this.getProperty("size")}set size(n){this.setProperty("size",n)}get flavor(){return this.getProperty("flavor")}set flavor(n){this.setProperty("flavor",n)}get form(){return this.m.form}};nn.formAssociated=!0,nn.properties={checked:{type:"boolean",visual:!0,formValue:!0,emitChange:!0,default:!1},value:{type:"string",default:"on"},name:{type:"string",default:""},disabled:{type:"boolean",visual:!0,default:!1},required:{type:"boolean",visual:!0,default:!1},size:{type:"string",visual:!0,default:"md",validate:n=>["xs","sm","md","lg","xl"].includes(n),coerce:n=>["xs","sm","md","lg","xl"].includes(n)?n:"md"},flavor:{type:"string",visual:!0,default:"primary",validate:n=>["primary","secondary","success","danger","warning","neutral"].includes(n),coerce:n=>["primary","secondary","success","danger","warning","neutral"].includes(n)?n:"primary"}};let tn=nn;customElements.get("ty-switch")||customElements.define("ty-switch",tn);const en=`\n${F}\n\n/* Override input's :host. ty-radio is just the circle (inline);\n ty-radio-group is a form-field block. */\n:host(ty-radio) {\n display: inline-flex;\n width: auto;\n vertical-align: middle;\n}\n\n:host(ty-radio-group) {\n display: block;\n width: 100%;\n}\n\n/* ===== RADIO GROUP ===== */\n.radio-group-container {\n display: flex;\n flex-direction: column;\n gap: 0.4rem;\n font-family: var(--ty-font-sans);\n color: var(--ty-color-text);\n}\n\n.radio-group-label {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n font-weight: var(--ty-font-medium);\n color: var(--ty-color-text);\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.radio-group-list {\n display: flex;\n gap: 0.6rem;\n align-items: flex-start;\n}\n\n.radio-group-list.vertical {\n flex-direction: column;\n align-items: flex-start;\n}\n\n.radio-group-list.horizontal {\n flex-direction: row;\n flex-wrap: wrap;\n align-items: center;\n}\n\n.radio-group-error {\n font-size: var(--ty-font-xs);\n line-height: var(--ty-leading-xs);\n color: var(--ty-color-danger);\n}\n\n.radio-group-container .required-icon {\n width: 0.65em;\n height: 0.65em;\n color: var(--ty-color-danger);\n}\n.radio-group-container .required-icon svg {\n width: 100%;\n height: 100%;\n}\n\n/* ===== RADIO ITEM (just the circle) ===== */\n.radio-container {\n display: inline-block;\n cursor: pointer;\n user-select: none;\n outline: none;\n vertical-align: middle;\n}\n\n.radio-container.disabled {\n cursor: not-allowed;\n opacity: 0.55;\n}\n\n.radio-container:focus-visible .radio-circle,\n.radio-container.focused .radio-circle {\n box-shadow: 0 0 0 3px var(--ty-input-shadow-focus);\n}\n\n.radio-circle {\n position: relative;\n flex-shrink: 0;\n width: 18px;\n height: 18px;\n border-radius: 50%;\n border: 2px solid var(--ty-input-border);\n background: var(--ty-input-bg);\n box-sizing: border-box;\n transition: border-color 0.15s ease-in-out;\n}\n\n.radio-circle::after {\n content: "";\n position: absolute;\n top: 50%;\n left: 50%;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--ty-color-primary);\n transform: translate(-50%, -50%) scale(0);\n transition: transform 0.15s ease-in-out;\n}\n\n.radio-container[aria-checked="true"] .radio-circle {\n border-color: var(--ty-color-primary);\n}\n\n.radio-container[aria-checked="true"] .radio-circle::after {\n transform: translate(-50%, -50%) scale(1);\n}\n\n/* Size variants */\n.radio-container.xs .radio-circle { width: 14px; height: 14px; }\n.radio-container.xs .radio-circle::after { width: 6px; height: 6px; }\n\n.radio-container.sm .radio-circle { width: 16px; height: 16px; }\n.radio-container.sm .radio-circle::after { width: 7px; height: 7px; }\n\n.radio-container.lg .radio-circle { width: 22px; height: 22px; }\n.radio-container.lg .radio-circle::after { width: 10px; height: 10px; }\n\n.radio-container.xl .radio-circle { width: 26px; height: 26px; }\n.radio-container.xl .radio-circle::after { width: 12px; height: 12px; }\n\n/* Flavor variants — color of inner dot + checked border */\n.radio-container.primary[aria-checked="true"] .radio-circle { border-color: var(--ty-color-primary); }\n.radio-container.primary .radio-circle::after { background: var(--ty-color-primary); }\n\n.radio-container.secondary[aria-checked="true"] .radio-circle { border-color: var(--ty-color-secondary); }\n.radio-container.secondary .radio-circle::after { background: var(--ty-color-secondary); }\n\n.radio-container.success[aria-checked="true"] .radio-circle { border-color: var(--ty-color-success); }\n.radio-container.success .radio-circle::after { background: var(--ty-color-success); }\n\n.radio-container.danger[aria-checked="true"] .radio-circle { border-color: var(--ty-color-danger); }\n.radio-container.danger .radio-circle::after { background: var(--ty-color-danger); }\n\n.radio-container.warning[aria-checked="true"] .radio-circle { border-color: var(--ty-color-warning); }\n.radio-container.warning .radio-circle::after { background: var(--ty-color-warning); }\n\n.radio-container.neutral[aria-checked="true"] .radio-circle { border-color: var(--ty-color-neutral); }\n.radio-container.neutral .radio-circle::after { background: var(--ty-color-neutral); }\n`,on='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 6v12"/><path d="M17.196 9 6.804 15"/><path d="m6.804 9 10.392 6"/></svg>',rn=class extends o{constructor(){super(),this.W=!1,this.J=null,this.U=null,this.G=null,r(this.shadowRoot,{css:en,id:"ty-radio"})}onConnect(){}onDisconnect(){this.removeEventListeners()}onPropertiesChanged(n){}buildClassList(){const n=[this.size,this.flavor];return this.disabled&&n.push("disabled"),n.join(" ")}handleClick(n){this.disabled||(n.stopPropagation(),this.dispatchEvent(new CustomEvent("ty-radio-select",{detail:{value:this.value},bubbles:!0,composed:!0})))}removeEventListeners(){if(!this.W)return;const n=this.shadowRoot?.querySelector(".radio-container");n&&(this.J&&(n.removeEventListener("click",this.J),this.J=null),this.U&&(n.removeEventListener("focus",this.U),this.U=null),this.G&&(n.removeEventListener("blur",this.G),this.G=null),this.W=!1)}setupEventListeners(){if(this.W)return;const n=this.shadowRoot.querySelector(".radio-container");n&&(this.J=n=>this.handleClick(n),this.U=()=>n.classList.add("focused"),this.G=()=>n.classList.remove("focused"),n.addEventListener("click",this.J),n.addEventListener("focus",this.U),n.addEventListener("blur",this.G),this.W=!0)}render(){const n=this.shadowRoot;let t=n.querySelector(".radio-container");const e=this.buildClassList();if(t)t.className="radio-container "+e,t.tabIndex=this.disabled?-1:0,t.setAttribute("aria-checked",this.checked+""),t.setAttribute("aria-disabled",this.disabled+"");else{t=document.createElement("div"),t.className="radio-container "+e,t.tabIndex=this.disabled?-1:0,t.setAttribute("role","radio"),t.setAttribute("aria-checked",this.checked+""),t.setAttribute("aria-disabled",this.disabled+"");const o=document.createElement("div");o.className="radio-circle",t.appendChild(o),n.appendChild(t),this.setupEventListeners()}}get value(){return this.getProperty("value")}set value(n){this.setProperty("value",n)}get checked(){return this.getProperty("checked")}set checked(n){this.setProperty("checked",n)}get disabled(){return this.getProperty("disabled")}set disabled(n){this.setProperty("disabled",n)}get size(){return this.getProperty("size")}set size(n){this.setProperty("size",n)}get flavor(){return this.getProperty("flavor")}set flavor(n){this.setProperty("flavor",n)}};rn.properties={value:{type:"string",default:""},checked:{type:"boolean",visual:!0,default:!1},disabled:{type:"boolean",visual:!0,default:!1},size:{type:"string",visual:!0,default:"md"},flavor:{type:"string",visual:!0,default:"primary"}};let sn=rn;customElements.get("ty-radio")||customElements.define("ty-radio",sn);const an=class extends o{constructor(){super(),this.W=!1,this.tn=null,this.nn=null,r(this.shadowRoot,{css:en,id:"ty-radio-group"})}onConnect(){queueMicrotask(()=>this.syncChildren())}onDisconnect(){this.removeEventListeners()}onPropertiesChanged(n){n.some(n=>"value"===n.name||"size"===n.name||"flavor"===n.name||"disabled"===n.name)&&this.syncChildren()}getFormValue(){return this.value||null}getRadios(){return Array.from(this.querySelectorAll("ty-radio"))}syncChildren(){const n=this.getRadios();for(const t of n)t.checked=t.value===this.value,this.disabled&&(t.disabled=!0),t.size=this.size,t.flavor=this.flavor}handleRadioSelect(n){if(this.disabled)return;const t=n.detail,e=t?.value;"string"==typeof e&&e!==this.value&&(this.value=e,this.syncChildren(),setTimeout(()=>{const t={value:e,formValue:e,originalEvent:n};this.dispatchEvent(new CustomEvent("input",{detail:t,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:t,bubbles:!0,composed:!0}))},0))}handleKeydown(n){if(this.disabled)return;const t=this.getRadios().filter(n=>!n.disabled);if(0===t.length)return;const e=document.activeElement,o=t.find(n=>n===e||n.contains(e));let i=-1;if(["ArrowDown","ArrowRight"].includes(n.key))n.preventDefault(),i=o?(t.indexOf(o)+1)%t.length:0;else{if(!["ArrowUp","ArrowLeft"].includes(n.key)){if(["Space"," ","Enter"].includes(n.key)){if(o){n.preventDefault(),this.value=o.value,this.syncChildren();const t={value:o.value,formValue:o.value,originalEvent:n};setTimeout(()=>{this.dispatchEvent(new CustomEvent("change",{detail:t,bubbles:!0,composed:!0}))},0)}return}return}n.preventDefault(),i=o?(t.indexOf(o)-1+t.length)%t.length:t.length-1}const r=t[i];if(r){r.focus(),this.value=r.value,this.syncChildren();const t={value:r.value,formValue:r.value,originalEvent:n};setTimeout(()=>{this.dispatchEvent(new CustomEvent("change",{detail:t,bubbles:!0,composed:!0}))},0)}}removeEventListeners(){this.W&&(this.tn&&(this.removeEventListener("ty-radio-select",this.tn),this.tn=null),this.nn&&(this.removeEventListener("keydown",this.nn),this.nn=null),this.W=!1)}setupEventListeners(){this.W||(this.tn=n=>this.handleRadioSelect(n),this.nn=n=>this.handleKeydown(n),this.addEventListener("ty-radio-select",this.tn),this.addEventListener("keydown",this.nn),this.W=!0)}render(){const n=this.shadowRoot;let t=n.querySelector(".radio-group-container");if(t){let n=t.querySelector(".radio-group-label");if(this.label)if(n||(n=document.createElement("div"),n.className="radio-group-label",t.insertBefore(n,t.firstChild)),n.textContent=this.label,this.required&&!n.querySelector(".required-icon")){const t=document.createElement("span");t.className="required-icon",t.innerHTML=on,n.appendChild(t)}else this.required||n.querySelector(".required-icon")?.remove();else n&&n.remove();const e=t.querySelector(".radio-group-list");e&&(e.className="radio-group-list "+this.orientation);let o=t.querySelector(".radio-group-error");this.error?(o||(o=document.createElement("div"),o.className="radio-group-error",t.appendChild(o)),o.textContent=this.error):o&&o.remove(),t.setAttribute("aria-disabled",this.disabled+"")}else{if(t=document.createElement("div"),t.className="radio-group-container",t.setAttribute("role","radiogroup"),t.setAttribute("aria-disabled",this.disabled+""),this.label){const n=document.createElement("div");if(n.className="radio-group-label",n.textContent=this.label,this.required){const t=document.createElement("span");t.className="required-icon",t.innerHTML=on,n.appendChild(t)}t.appendChild(n)}const e=document.createElement("div");e.className="radio-group-list "+this.orientation;const o=document.createElement("slot");if(e.appendChild(o),t.appendChild(e),this.error){const n=document.createElement("div");n.className="radio-group-error",n.textContent=this.error,t.appendChild(n)}n.appendChild(t),this.setupEventListeners()}this.syncChildren()}get value(){return this.getProperty("value")}set value(n){this.setProperty("value",n)}get name(){return this.getProperty("name")}set name(n){this.setProperty("name",n)}get label(){return this.getProperty("label")}set label(n){this.setProperty("label",n)}get disabled(){return this.getProperty("disabled")}set disabled(n){this.setProperty("disabled",n)}get required(){return this.getProperty("required")}set required(n){this.setProperty("required",n)}get error(){return this.getProperty("error")}set error(n){this.setProperty("error",n)}get orientation(){return this.getProperty("orientation")}set orientation(n){this.setProperty("orientation",n)}get size(){return this.getProperty("size")}set size(n){this.setProperty("size",n)}get flavor(){return this.getProperty("flavor")}set flavor(n){this.setProperty("flavor",n)}get form(){return this.m.form}};an.formAssociated=!0,an.properties={value:{type:"string",visual:!0,formValue:!0,emitChange:!0,default:""},name:{type:"string",default:""},label:{type:"string",visual:!0,default:""},disabled:{type:"boolean",visual:!0,default:!1},required:{type:"boolean",visual:!0,default:!1},error:{type:"string",visual:!0,default:""},orientation:{type:"string",visual:!0,default:"vertical"},size:{type:"string",visual:!0,default:"md"},flavor:{type:"string",visual:!0,default:"primary"}};let ln=an;customElements.get("ty-radio-group")||customElements.define("ty-radio-group",ln);const dn='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>',cn='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>',hn=class extends o{constructor(){super(),this.en=null,this.rn=!1,r(this.shadowRoot,{css:F,id:"ty-input"}),r(this.shadowRoot,{css:"\n/* Copy field value display */\n.copy-field-value {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n user-select: none;\n padding: 0;\n margin: 0;\n background: transparent;\n border: none;\n color: inherit;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n}\n\n/* Multiline variant */\n.copy-field-value.multiline {\n white-space: pre-wrap;\n word-break: break-word;\n max-height: 200px;\n overflow-y: auto;\n}\n\n/* Code format */\n.copy-field-value {\n font-size: 0.8em;\n}\n\n/* Hover state - primary soft background */\n.input-wrapper:not(.disabled):hover {\n background: var(--ty-bg-primary-soft);\n transition: background 0.2s ease;\n}\n\n/* Copy button */\n.copy-button {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n cursor: pointer;\n border: none;\n background: transparent;\n color: var(--ty-text-soft);\n transition: color 0.2s ease, transform 0.2s ease;\n padding: 0;\n margin: 0;\n}\n\n.copy-button:hover:not(.disabled) {\n color: var(--ty-text);\n transform: scale(1.1);\n}\n\n.copy-button.success {\n color: var(--ty-color-success);\n animation: copy-feedback 0.3s ease;\n}\n\n.copy-button.error {\n color: var(--ty-color-danger);\n animation: copy-feedback 0.3s ease;\n}\n\n@keyframes copy-feedback {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.2); }\n}\n\n.copy-button svg {\n width: 18px;\n height: 18px;\n}\n\n.input-wrapper.disabled .copy-button {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.input-wrapper.disabled {\n cursor: not-allowed;\n}\n",id:"ty-copy"})}onConnect(){}onDisconnect(){null!==this.en&&(clearTimeout(this.en),this.en=null)}onPropertiesChanged(n){}buildClassList(){const n=[this.size,this.flavor];return this.disabled&&n.push("disabled"),this.required&&n.push("required"),n.join(" ")}async copyToClipboard(){if(!this.disabled&&this.value){try{await navigator.clipboard.writeText(this.value),this.dispatchEvent(new CustomEvent("copy-success",{detail:{value:this.value},bubbles:!0,composed:!0}))}catch(n){try{const n=document.createElement("textarea");n.value=this.value,n.style.position="fixed",n.style.opacity="0",document.body.appendChild(n),n.select(),document.execCommand("copy"),document.body.removeChild(n),this.dispatchEvent(new CustomEvent("copy-success",{detail:{value:this.value},bubbles:!0,composed:!0}))}catch(t){return this.dispatchEvent(new CustomEvent("copy-error",{detail:{error:t},bubbles:!0,composed:!0})),void this.showCopyError()}}this.showCopySuccess()}}showCopySuccess(){null!==this.en&&clearTimeout(this.en),this.rn=!0;const n=this.shadowRoot.querySelector(".copy-button");n&&(n.classList.add("success"),n.innerHTML=cn),this.en=window.setTimeout(()=>{this.rn=!1;const n=this.shadowRoot.querySelector(".copy-button");n&&(n.classList.remove("success"),n.innerHTML=dn),this.en=null},2e3)}showCopyError(){null!==this.en&&clearTimeout(this.en),this.rn=!1;const n=this.shadowRoot.querySelector(".copy-button");n&&(n.classList.add("error"),n.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>'),this.en=window.setTimeout(()=>{const n=this.shadowRoot.querySelector(".copy-button");n&&(n.classList.remove("error"),n.innerHTML=dn),this.en=null},2e3)}setupEventListeners(){const n=this.shadowRoot,t=n.querySelector(".input-wrapper"),e=n.querySelector(".copy-button");if(t&&!this.disabled){const n=t;n.addEventListener("click",n=>{n.target===e||n.target.closest(".copy-button")||this.copyToClipboard()}),n.style.cursor="pointer"}e&&e.addEventListener("click",()=>{this.copyToClipboard()})}render(){const n=this.shadowRoot,t=this.buildClassList(),e=this.multiline?" multiline":"";n.innerHTML=`\n <div class="input-container">\n ${this.label?`\n <label class="input-label">\n ${this.label}\n ${this.required?'<span class="required-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-asterisk-icon lucide-asterisk"><path d="M12 6v12"/><path d="M17.196 9 6.804 15"/><path d="m6.804 9 10.392 6"/></svg></span>':""}\n </label>\n `:""}\n <div class="input-wrapper ${t}">\n ${"code"===this.format?`<code class="copy-field-value${e}">${this.value||""}</code>`:`<div class="copy-field-value${e}">${this.value||""}</div>`}\n <button class="copy-button${this.rn?" success":""}" type="button" ${this.disabled?"disabled":""}>\n ${this.rn?cn:dn}\n </button>\n </div>\n </div>\n `,this.setupEventListeners()}get value(){return this.getProperty("value")}set value(n){this.setProperty("value",n)}get label(){return this.getProperty("label")}set label(n){this.setProperty("label",n)}get size(){return this.getProperty("size")}set size(n){this.setProperty("size",n)}get flavor(){return this.getProperty("flavor")}set flavor(n){this.setProperty("flavor",n)}get format(){return this.getProperty("format")}set format(n){this.setProperty("format",n)}get multiline(){return this.getProperty("multiline")}set multiline(n){this.setProperty("multiline",n)}get disabled(){return this.getProperty("disabled")}set disabled(n){this.setProperty("disabled",n)}get required(){return this.getProperty("required")}set required(n){this.setProperty("required",n)}};hn.formAssociated=!0,hn.properties={value:{type:"string",visual:!0,formValue:!0,default:""},label:{type:"string",visual:!0,default:""},size:{type:"string",visual:!0,default:"md",validate:n=>["xs","sm","md","lg","xl"].includes(n),coerce:n=>["xs","sm","md","lg","xl"].includes(n)?n:"md"},flavor:{type:"string",visual:!0,default:"neutral",validate:n=>["primary","secondary","success","danger","warning","neutral"].includes(n),coerce:n=>["primary","secondary","success","danger","warning","neutral"].includes(n)?n:"neutral"},format:{type:"string",visual:!0,default:"text",coerce:n=>"code"===n?"code":"text"},multiline:{type:"boolean",visual:!0,default:!1},disabled:{type:"boolean",visual:!0,default:!1},required:{type:"boolean",visual:!0,default:!1}};let pn=hn;function un(n){return 1024>n?n+" B":1048576>n?(n/1024).toFixed(1)+" KB":1073741824>n?(n/1024/1024).toFixed(1)+" MB":(n/1024/1024/1024).toFixed(1)+" GB"}customElements.get("ty-copy")||customElements.define("ty-copy",pn);const gn=class extends o{constructor(){super(),this.sn=[],this.an=!1,this.W=!1,this.ln=null,this.dn=null,this.cn=null,this.hn=null,this.pn=null,this.un=null,this.gn=null,this.bn=null,r(this.shadowRoot,{css:"\n:host {\n display: block;\n font-family: var(--ty-font-sans);\n width: 100%;\n}\n\n.file-upload-container {\n display: flex;\n flex-direction: column;\n width: 100%;\n box-sizing: border-box;\n}\n\n/* ===== LABEL ===== */\n\n.upload-label {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n font-weight: var(--ty-font-medium);\n color: var(--ty-label-color);\n margin-bottom: 6px;\n padding-left: 4px;\n display: flex;\n align-items: center;\n}\n\n.required-icon {\n color: var(--ty-color-danger);\n margin-left: 4px;\n font-size: 0.75rem;\n line-height: 1;\n}\n\n/* ===== DROP ZONE ===== */\n\n.drop-zone {\n border: 2px dashed var(--ty-border);\n border-radius: var(--ty-radius-base);\n padding: 2rem 1.5rem;\n text-align: center;\n cursor: pointer;\n transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;\n outline: none;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n min-height: 140px;\n user-select: none;\n}\n\n.drop-zone:hover:not(.disabled) {\n border-color: var(--ty-input-border-hover);\n background: var(--ty-surface-content);\n}\n\n.drop-zone.focused {\n border-color: var(--ty-input-border-focus);\n box-shadow: 0 0 0 3px var(--ty-input-shadow-focus);\n}\n\n.drop-zone.drag-active {\n border-color: var(--ty-color-primary);\n border-style: solid;\n background: var(--ty-bg-primary-);\n}\n\n.drop-zone.drag-active .upload-icon {\n color: var(--ty-color-primary);\n transform: translateY(-2px);\n}\n\n.drop-zone.has-files {\n min-height: 80px;\n padding: 1.25rem 1.5rem;\n}\n\n.drop-zone.disabled {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n.drop-zone.error {\n border-color: var(--ty-color-danger);\n}\n\n.drop-zone.error:not(.disabled) {\n background: var(--ty-bg-danger-);\n}\n\n/* ===== UPLOAD ICON ===== */\n\n.upload-icon {\n color: var(--ty-text-faint);\n width: 2.5rem;\n height: 2.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: color 0.15s ease, transform 0.15s ease;\n pointer-events: none;\n}\n\n.upload-icon svg {\n width: 100%;\n height: 100%;\n}\n\n/* ===== HINT TEXT ===== */\n\n.upload-hint {\n color: var(--ty-text-soft);\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n pointer-events: none;\n}\n\n.browse-link {\n color: var(--ty-color-primary);\n font-weight: var(--ty-font-medium);\n}\n\n.upload-sub-hint {\n color: var(--ty-text-faint);\n font-size: var(--ty-font-xs);\n line-height: var(--ty-leading-xs);\n pointer-events: none;\n}\n\n/* ===== FILE LIST ===== */\n\n.file-list {\n display: flex;\n flex-direction: column;\n gap: 0.375rem;\n margin-top: 0.5rem;\n}\n\n.file-item {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.5rem 0.75rem;\n border-radius: var(--ty-radius-base);\n background: var(--ty-surface-content);\n border: 1px solid var(--ty-border-soft);\n}\n\n.file-icon {\n color: var(--ty-text-faint);\n flex-shrink: 0;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n}\n\n.file-icon svg {\n width: 100%;\n height: 100%;\n}\n\n.file-name {\n flex: 1;\n font-size: var(--ty-font-sm);\n color: var(--ty-text);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n}\n\n.file-size {\n font-size: var(--ty-font-xs);\n color: var(--ty-text-faint);\n flex-shrink: 0;\n font-variant-numeric: tabular-nums;\n}\n\n.file-remove {\n flex-shrink: 0;\n cursor: pointer;\n color: var(--ty-text-faint);\n width: 1.25rem;\n height: 1.25rem;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n transition: color 0.15s ease, background-color 0.15s ease;\n border: none;\n background: none;\n padding: 0;\n outline: none;\n}\n\n.file-remove:hover {\n color: var(--ty-color-danger);\n background: var(--ty-bg-danger-);\n}\n\n.file-remove:focus-visible {\n box-shadow: 0 0 0 2px var(--ty-color-danger);\n}\n\n.file-remove svg {\n width: 12px;\n height: 12px;\n}\n\n/* ===== ERROR MESSAGE ===== */\n\n.error-message {\n font-size: var(--ty-font-xs);\n line-height: var(--ty-leading-xs);\n color: var(--ty-color-danger);\n margin-top: 4px;\n padding-left: 4px;\n}\n\n/* ===== ACCESSIBILITY ===== */\n\n@media (prefers-reduced-motion: reduce) {\n .drop-zone,\n .upload-icon,\n .file-remove {\n transition: none;\n }\n}\n\n@media (prefers-contrast: high) {\n .drop-zone {\n border-width: 3px;\n }\n}\n",id:"ty-file-upload"})}onConnect(){}onDisconnect(){this.removeEventListeners()}onPropertiesChanged(n){}onFormReset(){this.sn=[],this.updateFormValue(),this.u&&this.render();const n=this.shadowRoot?.querySelector(".file-input");n&&(n.value="")}getFormValue(){if(0===this.sn.length)return null;const n=new FormData,t=this.name||"files";for(const e of this.sn)n.append(t,e);return n}get files(){return[...this.sn]}get multiple(){return this.getProperty("multiple")}set multiple(n){this.setProperty("multiple",n)}get accept(){return this.getProperty("accept")}set accept(n){this.setProperty("accept",n)}get name(){return this.getProperty("name")}set name(n){this.setProperty("name",n)}get disabled(){return this.getProperty("disabled")}set disabled(n){this.setProperty("disabled",n)}get required(){return this.getProperty("required")}set required(n){this.setProperty("required",n)}get label(){return this.getProperty("label")}set label(n){this.setProperty("label",n)}get placeholder(){return this.getProperty("placeholder")}set placeholder(n){this.setProperty("placeholder",n)}get error(){return this.getProperty("error")}set error(n){this.setProperty("error",n)}get form(){return this.m.form}setFiles(n){this.sn=this.multiple?n:n.slice(0,1),this.updateFormValue(),this.render();const t={value:this.sn,files:this.sn,names:this.sn.map(n=>n.name)};setTimeout(()=>{this.dispatchEvent(new CustomEvent("change",{detail:t,bubbles:!0,composed:!0}))},0)}removeFile(n){const t=[...this.sn];t.splice(n,1),this.setFiles(t);const e=this.shadowRoot?.querySelector(".file-input");e&&(e.value="")}setupEventListeners(){if(this.W)return;const n=this.shadowRoot,t=n.querySelector(".drop-zone"),e=n.querySelector(".file-input");this.ln=n=>{this.disabled||n.target.closest(".file-remove")||e.click()},this.dn=n=>{this.disabled||"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),e.click())},this.cn=()=>{t.classList.add("focused")},this.hn=()=>{t.classList.remove("focused")},this.pn=n=>{this.disabled||(n.preventDefault(),n.stopPropagation(),this.an||(this.an=!0,t.classList.add("drag-active")))},this.un=n=>{t.contains(n.relatedTarget)||(this.an=!1,t.classList.remove("drag-active"))},this.gn=n=>{if(this.disabled)return;n.preventDefault(),n.stopPropagation(),this.an=!1,t.classList.remove("drag-active");const e=Array.from(n.dataTransfer?.files??[]);e.length>0&&this.setFiles(e)},this.bn=n=>{const t=n.target;t.files&&t.files.length>0&&this.setFiles(Array.from(t.files))},t.addEventListener("click",this.ln),t.addEventListener("keydown",this.dn),t.addEventListener("focus",this.cn),t.addEventListener("blur",this.hn),t.addEventListener("dragover",this.pn),t.addEventListener("dragleave",this.un),t.addEventListener("drop",this.gn),e.addEventListener("change",this.bn),this.W=!0}removeEventListeners(){if(!this.W)return;const n=this.shadowRoot;if(!n)return;const t=n.querySelector(".drop-zone"),e=n.querySelector(".file-input");t&&e&&(this.ln&&t.removeEventListener("click",this.ln),this.dn&&t.removeEventListener("keydown",this.dn),this.cn&&t.removeEventListener("focus",this.cn),this.hn&&t.removeEventListener("blur",this.hn),this.pn&&t.removeEventListener("dragover",this.pn),this.un&&t.removeEventListener("dragleave",this.un),this.gn&&t.removeEventListener("drop",this.gn),this.bn&&e.removeEventListener("change",this.bn),this.W=!1)}buildDropZoneClasses(){const n=["drop-zone"];return this.an&&n.push("drag-active"),this.sn.length>0&&n.push("has-files"),this.disabled&&n.push("disabled"),this.error&&n.push("error"),n.join(" ")}renderFileList(n){n.innerHTML="";for(let t=0;this.sn.length>t;t++){const e=this.sn[t],o=document.createElement("div");o.className="file-item";const i=document.createElement("span");i.className="file-icon",i.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>';const r=document.createElement("span");r.className="file-name",r.textContent=e.name,r.title=e.name;const s=document.createElement("span");s.className="file-size",s.textContent=un(e.size);const a=document.createElement("button");a.className="file-remove",a.type="button",a.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>',a.setAttribute("aria-label","Remove "+e.name);const l=t;a.addEventListener("click",n=>{n.stopPropagation(),this.removeFile(l)}),o.appendChild(i),o.appendChild(r),o.appendChild(s),o.appendChild(a),n.appendChild(o)}}render(){const n=this.shadowRoot;let t=n.querySelector(".file-upload-container");if(!t){t=document.createElement("div"),t.className="file-upload-container";const e=document.createElement("div");e.className="upload-label",t.appendChild(e);const o=document.createElement("div");o.className="drop-zone",o.setAttribute("role","button");const i=document.createElement("input");i.type="file",i.className="file-input",i.style.display="none",o.appendChild(i);const r=document.createElement("div");r.className="upload-icon",r.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>',o.appendChild(r);const s=document.createElement("div");s.className="upload-hint",o.appendChild(s);const a=document.createElement("div");a.className="upload-sub-hint",o.appendChild(a),t.appendChild(o);const l=document.createElement("div");l.className="file-list",t.appendChild(l);const d=document.createElement("div");d.className="error-message",t.appendChild(d),n.appendChild(t),this.setupEventListeners()}const e=t.querySelector(".upload-label");if(this.label){if(e.style.display="",e.innerHTML="",e.appendChild(document.createTextNode(this.label)),this.required){const n=document.createElement("span");n.className="required-icon",n.textContent="*",n.setAttribute("aria-hidden","true"),e.appendChild(n)}}else e.style.display="none";const o=t.querySelector(".drop-zone");o.className=this.buildDropZoneClasses(),o.tabIndex=this.disabled?-1:0,o.setAttribute("aria-disabled",this.disabled+""),o.setAttribute("aria-label",this.placeholder||"Upload files");const i=t.querySelector(".file-input");i.multiple=this.multiple,i.accept=this.accept,i.disabled=this.disabled,t.querySelector(".upload-icon").style.display=this.sn.length>0?"none":"",t.querySelector(".upload-hint").innerHTML=this.sn.length>0?`<strong>${this.sn.length} file${1!==this.sn.length?"s":""} selected</strong>`:'Drop files here or <span class="browse-link">click to browse</span>';const r=t.querySelector(".upload-sub-hint");this.accept&&0===this.sn.length?(r.textContent="Accepted: "+this.accept,r.style.display=""):r.style.display="none";const s=t.querySelector(".file-list");this.renderFileList(s);const a=t.querySelector(".error-message");a.textContent=this.error,a.style.display=this.error?"":"none"}};gn.formAssociated=!0,gn.properties={multiple:{type:"boolean",visual:!0,default:!1},accept:{type:"string",visual:!0,default:""},name:{type:"string",default:""},disabled:{type:"boolean",visual:!0,default:!1},required:{type:"boolean",visual:!0,default:!1},label:{type:"string",visual:!0,default:""},placeholder:{type:"string",visual:!0,default:"Drop files here or click to browse"},error:{type:"string",visual:!0,default:""}};let bn=gn;function vn(){return"native"!==document.documentElement.getAttribute("data-ty-scrollbar")}customElements.get("ty-file-upload")||customElements.define("ty-file-upload",bn);class mn{constructor(n,t={}){this.trackY=null,this.thumbY=null,this.trackX=null,this.thumbX=null,this.an=!1,this.vn="y",this.mn=0,this.yn=0,this.fn=null,this.wn=null,this.xn=null,this.kn=n,this.zn=!1!==t.vertical,this.Cn=t.horizontal??!1,this.Sn=t.autoHideDelay??1e3,this.En=this.Tn.bind(this),this.Mn=this.Dn.bind(this),this.$n=this.An.bind(this),this.In=this.On.bind(this),this.Ln=this.Nn.bind(this),this.qn=this.Rn.bind(this),this.Pn=this.Vn.bind(this),this.zn&&(this.trackY=this.Bn("y"),this.thumbY=this.Fn("y"),this.trackY.appendChild(this.thumbY)),this.Cn&&(this.trackX=this.Bn("x"),this.thumbX=this.Fn("x"),this.trackX.appendChild(this.thumbX)),this.kn.addEventListener("scroll",this.En,{passive:!0}),this.thumbY&&this.thumbY.addEventListener("pointerdown",this.Mn),this.trackY&&this.trackY.addEventListener("pointerdown",this.In),this.thumbX&&this.thumbX.addEventListener("pointerdown",this.$n),this.trackX&&this.trackX.addEventListener("pointerdown",this.Ln),this.xn=new ResizeObserver(()=>this.update()),this.xn.observe(this.kn),this.update()}Bn(n){const t=document.createElement("div");return t.className="ty-scrollbar-track-"+n,t}Fn(n){const t=document.createElement("div");return t.className="ty-scrollbar-thumb-"+n,t}update(){this.Hn(),this.jn()}scrollToTop(n=!1){this.kn.scrollTo({top:0,behavior:n?"smooth":"auto"})}scrollToBottom(n=!1){this.kn.scrollTo({top:this.kn.scrollHeight,behavior:n?"smooth":"auto"})}scrollToLeft(n=!1){this.kn.scrollTo({left:0,behavior:n?"smooth":"auto"})}scrollToRight(n=!1){this.kn.scrollTo({left:this.kn.scrollWidth,behavior:n?"smooth":"auto"})}destroy(){this.kn.removeEventListener("scroll",this.En),this.thumbY&&this.thumbY.removeEventListener("pointerdown",this.Mn),this.trackY&&this.trackY.removeEventListener("pointerdown",this.In),this.thumbX&&this.thumbX.removeEventListener("pointerdown",this.$n),this.trackX&&this.trackX.removeEventListener("pointerdown",this.Ln),this.xn&&(this.xn.disconnect(),this.xn=null),null!==this.fn&&(cancelAnimationFrame(this.fn),this.fn=null),null!==this.wn&&(clearTimeout(this.wn),this.wn=null)}Tn(){null===this.fn&&(this.fn=requestAnimationFrame(()=>{this.fn=null,this.Wn(),this.Yn()}))}Hn(){if(!this.trackY||!this.thumbY)return;const{scrollHeight:n,clientHeight:t}=this.kn,e=n>t+2;this.trackY.classList.toggle("has-overflow",e),e&&(this.thumbY.style.height=Math.max(t/n*100,0)+"%"),this._n()}jn(){if(!this.trackX||!this.thumbX)return;const{scrollWidth:n,clientWidth:t}=this.kn,e=n>t+2;this.trackX.classList.toggle("has-overflow",e),e&&(this.thumbX.style.width=Math.max(t/n*100,0)+"%"),this.Un()}Wn(){this._n(),this.Un()}_n(){if(!this.trackY||!this.thumbY)return;const{scrollTop:n,scrollHeight:t,clientHeight:e}=this.kn,o=t-e;o>0&&(this.thumbY.style.top=n/o*(this.trackY.clientHeight-this.thumbY.offsetHeight)+"px")}Un(){if(!this.trackX||!this.thumbX)return;const{scrollLeft:n,scrollWidth:t,clientWidth:e}=this.kn,o=t-e;o>0&&(this.thumbX.style.left=n/o*(this.trackX.clientWidth-this.thumbX.offsetWidth)+"px")}Yn(){this.an||(this.trackY?.classList.add("scrolling"),this.trackX?.classList.add("scrolling"),null!==this.wn&&clearTimeout(this.wn),this.wn=setTimeout(()=>{this.trackY?.classList.remove("scrolling"),this.trackX?.classList.remove("scrolling"),this.wn=null},this.Sn))}Dn(n){0===n.button&&(n.preventDefault(),n.stopPropagation(),this.an=!0,this.vn="y",this.mn=n.clientY,this.yn=this.kn.scrollTop,this.thumbY.setPointerCapture(n.pointerId),this.trackY?.classList.add("dragging"),this.thumbY.addEventListener("pointermove",this.qn),this.thumbY.addEventListener("pointerup",this.Pn),this.thumbY.addEventListener("pointercancel",this.Pn))}An(n){0===n.button&&(n.preventDefault(),n.stopPropagation(),this.an=!0,this.vn="x",this.mn=n.clientX,this.yn=this.kn.scrollLeft,this.thumbX.setPointerCapture(n.pointerId),this.trackX?.classList.add("dragging"),this.thumbX.addEventListener("pointermove",this.qn),this.thumbX.addEventListener("pointerup",this.Pn),this.thumbX.addEventListener("pointercancel",this.Pn))}Rn(n){if(this.an)if("y"===this.vn){const t=n.clientY-this.mn,{scrollHeight:e,clientHeight:o}=this.kn,i=this.trackY.clientHeight-this.thumbY.offsetHeight;if(0>=i)return;this.kn.scrollTop=this.yn+t*((e-o)/i)}else{const t=n.clientX-this.mn,{scrollWidth:e,clientWidth:o}=this.kn,i=this.trackX.clientWidth-this.thumbX.offsetWidth;if(0>=i)return;this.kn.scrollLeft=this.yn+t*((e-o)/i)}}Vn(n){const t="y"===this.vn?this.thumbY:this.thumbX,e="y"===this.vn?this.trackY:this.trackX;this.an=!1,t.releasePointerCapture(n.pointerId),e?.classList.remove("dragging"),t.removeEventListener("pointermove",this.qn),t.removeEventListener("pointerup",this.Pn),t.removeEventListener("pointercancel",this.Pn),this.Yn()}On(n){if(n.target===this.thumbY||0!==n.button)return;n.preventDefault();const t=this.trackY.getBoundingClientRect(),e=(n.clientY-t.top)/t.height,{scrollHeight:o,clientHeight:i}=this.kn;this.kn.scrollTo({top:e*(o-i),behavior:"smooth"})}Nn(n){if(n.target===this.thumbX||0!==n.button)return;n.preventDefault();const t=this.trackX.getBoundingClientRect(),e=(n.clientX-t.left)/t.width,{scrollWidth:o,clientWidth:i}=this.kn;this.kn.scrollTo({left:e*(o-i),behavior:"smooth"})}}const yn="\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",fn='<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>',wn=class extends o{constructor(){super(),this.Gn=null,this.Xn=null,this.Kn=null,this.j=!1,this.handleInputEvent=n=>{this.value=n.target.value,this.Gn&&this.Xn&&this.resizeTextarea(this.Gn,this.Xn),this.emitValueEvents(n)},this.handleFocusEvent=()=>{this.j=!0},this.handleBlurEvent=()=>{this.j=!1};const n=this.shadowRoot;r(n,{css:"\n:host {\n display: block;\n font-family: var(--ty-font-sans);\n width: 100%;\n}\n\n.textarea-container {\n display: flex;\n flex-direction: column;\n width: 100%;\n box-sizing: border-box;\n position: relative;\n /* For absolute positioned dummy element */\n}\n\n.textarea-wrapper {\n position: relative;\n width: 100%;\n}\n\n/* Custom scrollbar track positioning within textarea border */\n.textarea-wrapper .ty-scrollbar-track-y {\n top: 2px;\n right: 2px;\n bottom: 2px;\n border-radius: 0 4px 4px 0;\n}\n\n/* ===== LABEL STYLING ===== */\n\n.textarea-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}\n\n/* Required indicator - using SVG icon instead of CSS */\n.required-icon {\n display: inline-flex;\n align-items: center;\n color: var(--ty-color-danger);\n width: 12px;\n height: 12px;\n vertical-align: middle;\n}\n\n/* ===== ERROR MESSAGE STYLING ===== */\n\n.error-message {\n font-size: var(--ty-font-xs);\n line-height: var(--ty-leading-xs);\n letter-spacing: var(--ty-tracking-xs);\n color: var(--ty-color-danger);\n margin-top: 4px;\n padding-left: 12px;\n}\n\n/* Error state for textareas */\ntextarea.error {\n border-color: var(--ty-color-danger);\n background: var(--ty-bg-danger-soft);\n}\n\ntextarea.error:focus {\n border-color: var(--ty-color-danger-mild);\n box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n/* ===== TEXTAREA BASE STYLING ===== */\n\ntextarea {\n /* Base appearance — elegant and minimal like input */\n box-sizing: border-box;\n width: 100%;\n border: 1px solid var(--input-border, var(--ty-input-border));\n border-radius: 6px;\n background: var(--input-bg, var(--ty-input-bg));\n color: var(--input-color, var(--ty-input-color));\n font-family: inherit;\n /* Linear-paired typography */\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 transition: all 0.15s ease-in-out;\n outline: none;\n\n /* Default size (md) - refined spacing */\n min-height: 80px;\n /* Larger than input for multiline */\n padding: 12px 12px;\n /* Slightly larger padding for text areas */\n\n /* Auto-resize specific styles */\n overflow: hidden;\n /* Hide scrollbars since we're auto-resizing */\n resize: none;\n /* Disable manual resize by default */\n\n /* Ensure consistent text wrapping */\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n\n/* Hide native scrollbar for webkit when custom scrollbar is active\n (scrollbar-width: none handles Firefox; this handles Chrome/Safari) */\n:host([data-custom-scroll]) textarea::-webkit-scrollbar {\n display: none;\n}\n\n/* Focus state - elegant blue glow like input */\ntextarea: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 background: var(--input-bg, var(--ty-input-bg));\n}\n\n/* Hover state - subtle feedback */\ntextarea:hover:not(:disabled) {\n border-color: var(--input-border-hover, var(--ty-input-border-hover));\n}\n\n/* Disabled state - refined opacity */\ntextarea:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n background: var(--input-disabled-bg, var(--ty-input-disabled-bg));\n border-color: var(--input-disabled-border, var(--ty-input-disabled-border));\n color: var(--input-disabled-color, var(--ty-input-disabled-color));\n}\n\n/* Placeholder styling - subtle and elegant */\ntextarea::placeholder {\n color: var(--input-placeholder, var(--ty-input-placeholder));\n font-weight: 400;\n}\n\n/* ===== RESIZE CONTROL OPTIONS ===== */\n\n/* Allow manual resizing */\ntextarea.resize-both {\n resize: both;\n}\n\ntextarea.resize-horizontal {\n resize: horizontal;\n}\n\ntextarea.resize-vertical {\n resize: vertical;\n}\n\ntextarea.resize-none {\n resize: none;\n}\n\n/* Auto-resize mode (default) disables manual resize */\ntextarea:not(.resize-both):not(.resize-horizontal):not(.resize-vertical) {\n resize: none;\n}\n\n/* ===== DUMMY ELEMENT FOR AUTO-RESIZE ===== */\n\n.textarea-dummy {\n /* Hidden element that measures text height */\n position: absolute !important;\n top: 0 !important;\n left: 0 !important;\n visibility: hidden !important;\n white-space: pre-wrap !important;\n word-break: break-word !important;\n box-sizing: border-box !important;\n overflow: hidden !important;\n pointer-events: none !important;\n z-index: -1 !important;\n\n /* Ensure it has the same text behavior as textarea */\n word-wrap: break-word !important;\n overflow-wrap: break-word !important;\n}\n\n/* ===== SIZE MODIFIERS ===== */\n\n/* Extra Small */\ntextarea.xs {\n min-height: 64px;\n padding: 8px 10px;\n font-size: var(--ty-font-xs);\n line-height: var(--ty-leading-xs);\n letter-spacing: var(--ty-tracking-xs);\n}\n\n/* Small */\ntextarea.sm {\n min-height: 72px;\n padding: 10px 10px;\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n}\n\n/* Medium (default) */\ntextarea.md {\n min-height: 80px;\n padding: 12px 12px;\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n}\n\n/* Large */\ntextarea.lg {\n min-height: 96px;\n padding: 14px 14px;\n font-size: var(--ty-font-base);\n line-height: var(--ty-leading-base);\n letter-spacing: var(--ty-tracking-base);\n}\n\n/* Extra Large */\ntextarea.xl {\n min-height: 112px;\n padding: 16px 16px;\n font-size: var(--ty-font-lg);\n line-height: var(--ty-leading-lg);\n letter-spacing: var(--ty-tracking-lg);\n}\n\n/* ===== ACCESSIBILITY ENHANCEMENTS ===== */\n\ntextarea:focus-visible {\n outline: none;\n /* We use box-shadow instead */\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: high) {\n textarea {\n border-width: 2px;\n }\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n textarea {\n transition: none;\n }\n\n .textarea-dummy {\n transition: none;\n }\n}\n\n/* ===== CONTAINER-AWARE RESPONSIVE BEHAVIOR ===== */\n\n/* Scale down on smaller containers using container queries */\n@container (max-width: 480px) {\n textarea.lg {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n padding: 12px 12px;\n min-height: 80px;\n }\n\n textarea.xl {\n font-size: var(--ty-font-base);\n line-height: var(--ty-leading-base);\n letter-spacing: var(--ty-tracking-base);\n padding: 14px 14px;\n min-height: 96px;\n }\n}\n\n@container (max-width: 320px) {\n textarea.xl {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n padding: 12px 12px;\n min-height: 80px;\n }\n}\n\n/* Fallback for browsers without container query support */\n@media (max-width: 640px) {\n textarea.lg {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n padding: 12px 12px;\n min-height: 80px;\n }\n\n textarea.xl {\n font-size: var(--ty-font-base);\n line-height: var(--ty-leading-base);\n letter-spacing: var(--ty-tracking-base);\n padding: 14px 14px;\n min-height: 96px;\n }\n}\n\n@media (max-width: 480px) {\n textarea.xl {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n padding: 12px 12px;\n min-height: 80px;\n }\n}\n\n/* ===== ANIMATION AND TRANSITIONS ===== */\n\n/* Smooth height transitions for auto-resize */\ntextarea {\n transition:\n border-color 0.15s ease-in-out,\n box-shadow 0.15s ease-in-out,\n background-color 0.15s ease-in-out,\n height 0.1s ease-out;\n /* Smooth height changes */\n}\n\n/* Disable height transition on focus to avoid jarring effect */\ntextarea:focus {\n transition:\n border-color 0.15s ease-in-out,\n box-shadow 0.15s ease-in-out,\n background-color 0.15s ease-in-out;\n}\n\n/* For users who prefer reduced motion, disable height transitions */\n@media (prefers-reduced-motion: reduce) {\n textarea {\n transition: none;\n }\n}\n",id:"ty-textarea"}),vn()&&r(n,{css:yn,id:"ty-custom-scrollbar"})}onConnect(){}onDisconnect(){if(this.Zn(),this.Gn){const n=this.Gn.cloneNode(!0);this.Gn.parentNode?.replaceChild(n,this.Gn),this.Gn=null}this.Xn=null}onPropertiesChanged(n){}getFormValue(){return this.getProperty("value")||null}get value(){return this.getProperty("value")}set value(n){this.setProperty("value",n)}get name(){return this.getProperty("name")}set name(n){this.setProperty("name",n)}get placeholder(){return this.getProperty("placeholder")}set placeholder(n){this.setProperty("placeholder",n)}get label(){return this.getProperty("label")}set label(n){this.setProperty("label",n)}get disabled(){return this.getProperty("disabled")}set disabled(n){this.setProperty("disabled",n)}get required(){return this.getProperty("required")}set required(n){this.setProperty("required",n)}get error(){return this.getProperty("error")}set error(n){this.setProperty("error",n)}get size(){return this.getProperty("size")}set size(n){this.setProperty("size",n)}get rows(){return this.getProperty("rows")}set rows(n){this.setProperty("rows",n)}get cols(){return this.getProperty("cols")}set cols(n){this.setProperty("cols",n)}get resize(){return this.getProperty("resize")}set resize(n){this.setProperty("resize",n)}get minHeight(){return this.getProperty("minHeight")}set minHeight(n){this.setProperty("minHeight",n)}get maxHeight(){return this.getProperty("maxHeight")}set maxHeight(n){this.setProperty("maxHeight",n)}getFontStyle(n){const t=window.getComputedStyle(n);return{fontFamily:t.fontFamily,fontSize:t.fontSize,fontWeight:t.fontWeight,lineHeight:t.lineHeight,letterSpacing:t.letterSpacing,fontStyle:t.fontStyle}}getSpacingStyle(n){const t=window.getComputedStyle(n);return{padding:t.padding,paddingTop:t.paddingTop,paddingRight:t.paddingRight,paddingBottom:t.paddingBottom,paddingLeft:t.paddingLeft,margin:t.margin,borderWidth:t.borderWidth}}setupDummyElement(n){const t=this.shadowRoot,e=t.querySelector(".textarea-dummy");e&&e.remove();const o=document.createElement("pre"),i=this.getFontStyle(n),r=this.getSpacingStyle(n);o.className="textarea-dummy";const s=o.style;return s.position="absolute",s.top="0",s.left="0",s.visibility="hidden",s.whiteSpace="pre-wrap",s.wordBreak="break-word",s.boxSizing="border-box",s.overflow="hidden",s.pointerEvents="none",Object.entries(i).forEach(([n,t])=>{s[n]=t}),Object.entries(r).forEach(([n,t])=>{s[n]=t}),t.appendChild(o),this.Xn=o,o}resizeTextarea(n,t){if(!n||!t)return;const e=this.value,o=this.placeholder,i=n.clientHeight;t.textContent=""===e&&o?o:e+" ",t.style.width=n.clientWidth+"px";const r=t.scrollHeight,s=this.minHeight?parseInt(this.minHeight.replace("px",""),10):null,a=this.maxHeight?parseInt(this.maxHeight.replace("px",""),10):null;let l=r;null!==s&&(l=Math.max(l,s)),null!==a&&(l=Math.min(l,a)),Math.abs(l-i)>2&&(n.style.height=l+"px",null===a||a>r?(n.style.overflowY="hidden",this.Zn()):(n.style.overflowY="auto",this.Jn(n))),this.Kn?.update()}Jn(n){if(this.Kn||!vn())return;n.style.scrollbarWidth="none",this.setAttribute("data-custom-scroll",""),this.Kn=new mn(n,{vertical:!0,horizontal:!1});const t=this.shadowRoot.querySelector(".textarea-wrapper");t&&this.Kn.trackY&&t.appendChild(this.Kn.trackY)}Zn(){this.Kn&&(this.Kn.trackY?.remove(),this.Kn.destroy(),this.Kn=null,this.removeAttribute("data-custom-scroll"),this.Gn&&(this.Gn.style.scrollbarWidth=""))}emitValueEvents(n){const t=this.value;this.m.setFormValue(t||"");const e={bubbles:!0,composed:!0,detail:{value:t,originalEvent:n}};setTimeout(()=>{this.dispatchEvent(new CustomEvent("input",e)),this.dispatchEvent(new CustomEvent("change",e))},0)}buildClassList(){const n=[this.size];this.disabled&&n.push("disabled"),this.required&&n.push("required"),this.error&&n.push("error"),"none"!==this.resize&&n.push("resize-"+this.resize);const t=this.getAttribute("class");return t&&n.push(t),n.join(" ")}applyHeightConstraints(n){this.minHeight&&(n.style.minHeight=this.minHeight),this.maxHeight&&(n.style.maxHeight=this.maxHeight)}setupTextareaEvents(n){n.addEventListener("input",this.handleInputEvent),n.addEventListener("change",this.handleInputEvent),n.addEventListener("focus",this.handleFocusEvent),n.addEventListener("blur",this.handleBlurEvent)}render(){const n=this.shadowRoot,t=n.querySelector(".textarea-container"),e=n.querySelector("label"),o=n.querySelector("textarea"),i=n.querySelector(".error-message");if(t&&o){if(this.label?e&&(e.innerHTML=this.label+(this.required?` <span class="required-icon">${fn}</span>`:""),e.style.display="block"):e&&(e.style.display="none"),o.value=this.value||"",o.placeholder=this.placeholder||"",o.disabled=this.disabled,o.required=this.required,o.className=this.buildClassList(),this.name?o.setAttribute("name",this.name):o.removeAttribute("name"),this.rows&&o.setAttribute("rows",this.rows),this.cols&&o.setAttribute("cols",this.cols),this.applyHeightConstraints(o),this.error){if(!i){const n=document.createElement("div");n.className="error-message",t.appendChild(n)}const e=n.querySelector(".error-message");e&&(e.textContent=this.error)}else i&&i.remove();const r=this.setupDummyElement(o);setTimeout(()=>this.resizeTextarea(o,r),0),this.Gn=o}else{const t=document.createElement("div");t.className="textarea-container";const e=document.createElement("label");e.className="textarea-label",this.label?(e.innerHTML=this.label+(this.required?` <span class="required-icon">${fn}</span>`:""),e.style.display="block"):e.style.display="none";const o=document.createElement("textarea");o.value=this.value||"",o.placeholder=this.placeholder||"",o.disabled=this.disabled,o.required=this.required,o.className=this.buildClassList(),this.name&&o.setAttribute("name",this.name),o.setAttribute("rows",this.rows||"3"),this.cols&&o.setAttribute("cols",this.cols),this.applyHeightConstraints(o),this.setupTextareaEvents(o);const i=document.createElement("div");if(i.className="textarea-wrapper",i.appendChild(o),t.appendChild(e),t.appendChild(i),this.error){const n=document.createElement("div");n.className="error-message",n.textContent=this.error,t.appendChild(n)}n.appendChild(t);const r=this.setupDummyElement(o);setTimeout(()=>this.resizeTextarea(o,r),0),this.Gn=o}}};wn.formAssociated=!0,wn.properties={value:{type:"string",visual:!0,formValue:!0,emitChange:!0,default:""},name:{type:"string",default:""},placeholder:{type:"string",visual:!0,default:""},label:{type:"string",visual:!0,default:""},disabled:{type:"boolean",visual:!0,default:!1},required:{type:"boolean",visual:!0,default:!1},error:{type:"string",visual:!0,default:""},size:{type:"string",visual:!0,default:"md",validate:n=>["xs","sm","md","lg","xl"].includes(n),coerce:n=>["xs","sm","md","lg","xl"].includes(n)?n:"md"},rows:{type:"string",visual:!0,default:"3",coerce:n=>n+""},cols:{type:"string",visual:!0,default:"",coerce:n=>n?n+"":""},resize:{type:"string",visual:!0,default:"none",validate:n=>["none","both","horizontal","vertical"].includes(n),coerce:n=>["none","both","horizontal","vertical"].includes(n)?n:"none"},minHeight:{type:"string",visual:!0,default:""},maxHeight:{type:"string",visual:!0,default:""}};let xn=wn;customElements.get("ty-textarea")||customElements.define("ty-textarea",xn);const kn={"top-start":{vertical:"top",horizontal:"start"},top:{vertical:"top",horizontal:"center"},"top-end":{vertical:"top",horizontal:"end"},"right-start":{vertical:"center",horizontal:"end",orientation:"vertical"},right:{vertical:"center",horizontal:"end",orientation:"vertical"},"right-end":{vertical:"end",horizontal:"end",orientation:"vertical"},"bottom-start":{vertical:"bottom",horizontal:"start"},bottom:{vertical:"bottom",horizontal:"center"},"bottom-end":{vertical:"bottom",horizontal:"end"},"left-start":{vertical:"center",horizontal:"start",orientation:"vertical"},left:{vertical:"center",horizontal:"start",orientation:"vertical"},"left-end":{vertical:"end",horizontal:"start",orientation:"vertical"}},zn={default:["bottom-start","bottom-end","top-start","top-end","bottom","top","left","right"],tooltip:["top","bottom","left","right","top-start","top-end","bottom-start","bottom-end"]};function Cn(n){const t=n.getBoundingClientRect();return{top:t.top,left:t.left,right:t.right,bottom:t.bottom,width:t.width,height:t.height,centerX:t.left+t.width/2,centerY:t.top+t.height/2}}function Sn(n){const{targetEl:t,floatingEl:e,preferences:o=zn.default,offset:i=8,padding:r=8,containerPadding:s=0}=n,a=Cn(t),l=Cn(e),d=o.map(n=>function(n){const{targetRect:t,floatingRect:e,placement:o,offset:i,padding:r,scrollbarWidth:s,containerPadding:a}=n,l=kn[o],{vertical:d,horizontal:c,orientation:h}=l,p=window.innerWidth,u=window.innerHeight;let g,b;window,window,g="vertical"===h?"start"===c?t.left-e.width-i+a:t.right+i-a:"start"===c?t.left:"center"===c?t.centerX-e.width/2:t.right-e.width,b="vertical"===h?"center"===d?t.centerY-e.height/2:"end"===d?t.bottom-e.height-a:t.top:"top"===d?t.top-e.height-i+a:t.bottom+i-a;const v={top:Math.min(0,b-r),left:Math.min(0,g-r),bottom:Math.min(0,u-(b+e.height+r)),right:Math.min(0,p-(g+e.width+r+s))},m=Object.values(v).reduce((n,t)=>n+Math.abs(t),0);return{x:Math.round(g),y:Math.round(b),placement:o,overflow:v,overflowAmount:m,fits:0===m}}({targetRect:a,floatingRect:l,placement:n,offset:i,padding:r,containerPadding:s,scrollbarWidth:15})),c=d.find(n=>n.fits)||d.reduce((n,t)=>n.overflowAmount>t.overflowAmount?t:n);return 0>c.overflow.right&&(c.x+=c.overflow.right),c}const En={id:"ty-tooltip",css:'\n/* Tooltip host element - display contents to not affect layout */\n:host {\n display: contents;\n}\n\n/* Tooltip container - positioned element */\n#tooltip-container {\n position: fixed;\n top: var(--y, 0px);\n left: var(--x, 0px);\n z-index: var(--ty-z-tooltip, 9999);\n\n /* Hidden by default */\n visibility: hidden;\n opacity: 0;\n transition: opacity 200ms, visibility 200ms;\n\n /* Prevent interaction */\n pointer-events: none;\n user-select: none;\n -webkit-user-select: none;\n \n /* Bold shadow for depth */\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), \n 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n}\n\n/* When open */\n#tooltip-container.open {\n visibility: visible;\n opacity: 1;\n}\n\n/* Base tooltip styling - Dark inverted style (like buttons) */\n#tooltip-container {\n /* Bold, high-contrast styling */\n background: var(--ty-tooltip-bg, #1f2937);\n color: var(--ty-tooltip-color, #ffffff);\n \n /* Comfortable padding */\n padding: var(--ty-tooltip-padding, 8px 12px);\n border-radius: var(--ty-tooltip-radius, 6px);\n \n /* No border - solid color provides contrast */\n border: none;\n \n /* Sizing */\n max-width: var(--ty-tooltip-max-width, 250px);\n \n /* Typography - clear and readable */\n font-size: var(--ty-font-sm, 14px);\n font-weight: var(--ty-font-semibold, 600);\n line-height: 1.5;\n text-align: center;\n}\n\n/* Content slot */\n#tooltip-container ::slotted(*) {\n /* Ensure slotted content inherits styles */\n color: inherit;\n font-size: inherit;\n line-height: inherit;\n}\n\n/* ============================================ */\n/* Flavor Variants - Bold, Button-like Colors */\n/* ============================================ */\n\n/* Primary - Bold blue (like primary button) */\n#tooltip-container[data-flavor="primary"] {\n background: var(--ty-color-primary, #3b82f6);\n color: #ffffff;\n}\n\n/* Success - Bold green */\n#tooltip-container[data-flavor="success"] {\n background: var(--ty-color-success, #10b981);\n color: #ffffff;\n}\n\n/* Danger - Bold red */\n#tooltip-container[data-flavor="danger"] {\n background: var(--ty-color-danger, #ef4444);\n color: #ffffff;\n}\n\n/* Warning - Bold orange/amber */\n#tooltip-container[data-flavor="warning"] {\n background: var(--ty-color-warning, #f59e0b);\n color: #ffffff;\n}\n\n/* Info - Bold cyan/blue */\n#tooltip-container[data-flavor="info"] {\n background: var(--ty-color-info, #06b6d4);\n color: #ffffff;\n}\n\n/* Neutral - Medium gray (default alternative) */\n#tooltip-container[data-flavor="neutral"] {\n background: var(--ty-color-neutral, #6b7280);\n color: #ffffff;\n}\n\n/* Light - For dark backgrounds */\n#tooltip-container[data-flavor="light"] {\n background: var(--ty-surface-elevated, #ffffff);\n color: var(--ty-text-strong, #111827);\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15), \n 0 4px 6px -4px rgba(0, 0, 0, 0.1),\n 0 0 0 1px rgba(0, 0, 0, 0.05);\n}\n\n/* Dark - Inverted style (default) */\n#tooltip-container[data-flavor="dark"] {\n background: var(--ty-tooltip-bg, #1f2937);\n color: #ffffff;\n}\n\n/* Secondary - Purple/indigo */\n#tooltip-container[data-flavor="secondary"] {\n background: var(--ty-color-secondary, #8b5cf6);\n color: #ffffff;\n}\n'},Tn=new WeakMap,Mn=new WeakMap,Dn=new WeakMap,$n=new WeakMap;function An(n){const t=n||"dark";return["dark","light","primary","secondary","success","danger","warning","info","neutral"].includes(t)?t:"dark"}function In(n){let t=Dn.get(n);return t||(t={showTimeout:null,hideTimeout:null},Dn.set(n,t)),t}function On(n,t){return n.hasAttribute(t)}function Ln(n,t,e){const o=n.getAttribute(t);if(null===o)return e;const i=parseInt(o,10);return isNaN(i)?e:i}function Nn(n){return{placement:n.getAttribute("placement")||"top",offset:Ln(n,"offset",8),delay:Ln(n,"delay",600),disabled:On(n,"disabled"),flavor:An(n.getAttribute("flavor"))}}function qn(n){return n.parentElement}function Rn(n,t){switch(n.style.removeProperty("background"),n.style.removeProperty("color"),n.style.removeProperty("border-color"),t){case"primary":n.style.background="var(--ty-bg-primary, #3b82f6)",n.style.color="var(--ty-color-primary-strong, #eff6ff)",n.style.borderColor="var(--ty-border-primary, #60a5fa)";break;case"secondary":n.style.background="var(--ty-bg-secondary, #8b5cf6)",n.style.color="var(--ty-color-secondary-strong, #f5f3ff)",n.style.borderColor="var(--ty-border-secondary, #a78bfa)";break;case"success":n.style.background="var(--ty-bg-success-mild, #10b981)",n.style.color="var(--ty-color-success-strong, #ecfdf5)",n.style.borderColor="var(--ty-border-success, #34d399)";break;case"danger":n.style.background="var(--ty-bg-danger, #ef4444)",n.style.color="var(--ty-color-danger-strong, #fef2f2)",n.style.borderColor="var(--ty-border-danger, #f87171)";break;case"warning":n.style.background="var(--ty-bg-warning, #f59e0b)",n.style.color="var(--ty-color-warning-strong, #fffbeb)",n.style.borderColor="var(--ty-border-warning, #fbbf24)";break;case"info":n.style.background="var(--ty-bg-info, #06b6d4)",n.style.color="var(--ty-text-strong, #f0f9ff)",n.style.borderColor="var(--ty-border-info, #22d3ee)";break;case"light":n.style.background="var(--ty-surface-elevated, #ffffff)",n.style.color="var(--ty-text-strong, #111827)",n.style.borderColor="var(--ty-border, #e5e7eb)";break;case"neutral":n.style.background="var(--ty-bg-neutral, #6b7280)",n.style.color="var(--ty-color-neutral-strong, #f9fafb)",n.style.borderColor="var(--ty-border-neutral, #9ca3af)";break;default:n.style.background="var(--ty-bg-neutral-soft, #4b5563)",n.style.color="var(--ty-color-neutral-strong, #f3f4f6)",n.style.borderColor="var(--ty-border-strong, #6b7280)"}}function Pn(n){const{placement:t,offset:e}=Nn(n),o=qn(n),i=$n.get(n);if(!o||!i)return;const r=Sn({targetEl:o,floatingEl:i,preferences:"top"===t?zn.tooltip:"bottom"===t?["bottom","top","left","right"]:"left"===t?["left","right","top","bottom"]:"right"===t?["right","left","top","bottom"]:zn.tooltip,offset:e});i.style.left=r.x+"px",i.style.top=r.y+"px"}function Vn(n){const t=Tn.get(n);t&&(t(),Tn.delete(n))}function Bn(n){const t=In(n);null!==t.showTimeout&&(clearTimeout(t.showTimeout),t.showTimeout=null),null!==t.hideTimeout&&(clearTimeout(t.hideTimeout),t.hideTimeout=null)}function Fn(n){const t=$n.get(n);if(t)try{t.hidePopover(),n.Qn=!1,Vn(n)}catch(e){}}function Hn(n){const t=In(n),{delay:e}=Nn(n);Bn(n),t.showTimeout=window.setTimeout(()=>function(n){const{disabled:t}=Nn(n);if(t)return;const e=function(n){let t=$n.get(n);if(!t){t=document.createElement("div"),t.id="ty-tooltip-"+Math.random().toString(36).substr(2,9),t.setAttribute("popover","manual"),t.className="ty-tooltip-popover";const{flavor:e}=Nn(n);t.setAttribute("data-flavor",e),t.textContent=n.textContent||"",t.style.cssText="\n position: fixed;\n margin: 0;\n padding: 8px 12px;\n background: var(--ty-tooltip-bg, #1f2937);\n color: #ffffff;\n border: none;\n border-radius: 6px;\n font-size: var(--ty-font-sm, 14px);\n font-weight: var(--ty-font-semibold, 600);\n line-height: 1.5;\n max-width: 250px;\n text-align: center;\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n user-select: none;\n pointer-events: none;\n ",Rn(t,e),document.body.appendChild(t),$n.set(n,t)}return t}(n);try{e.showPopover(),n.Qn=!0,Pn(n),function(n){const t=qn(n),e=$n.get(n);if(!t||!e)return;let o=null;const i=()=>{null!==o&&clearTimeout(o),o=window.setTimeout(()=>{o=null,Pn(n)},10)},r=new ResizeObserver(i);r.observe(t),r.observe(e);let s=null;const a=()=>{null===s&&(s=requestAnimationFrame(()=>{s=null,Pn(n)}))};window.addEventListener("scroll",a,!0),window.addEventListener("resize",i),Tn.set(n,()=>{r.disconnect(),window.removeEventListener("scroll",a,!0),window.removeEventListener("resize",i),null!==o&&clearTimeout(o),null!==s&&cancelAnimationFrame(s)})}(n)}catch(o){}}(n),e)}function jn(n){const t=In(n);Bn(n),t.hideTimeout=window.setTimeout(()=>Fn(n),200)}class TyTooltip extends HTMLElement{constructor(){super(),this.Qn=!1,this.attachShadow({mode:"open"})}static get observedAttributes(){return["placement","offset","delay","disabled","flavor"]}connectedCallback(){this.Qn=!1,r(this.shadowRoot,En),function(n){const t=qn(n);if(!t)return;const e=()=>Hn(n),o=()=>jn(n),i=()=>Hn(n),r=()=>jn(n);t.addEventListener("mouseenter",e),t.addEventListener("mouseleave",o),t.addEventListener("focusin",i),t.addEventListener("focusout",r),Mn.set(n,()=>{t.removeEventListener("mouseenter",e),t.removeEventListener("mouseleave",o),t.removeEventListener("focusin",i),t.removeEventListener("focusout",r)})}(this)}disconnectedCallback(){!function(n){Bn(n),Vn(n);const t=Mn.get(n);t&&(t(),Mn.delete(n));const e=$n.get(n);e&&(e.remove(),$n.delete(n)),Dn.delete(n)}(this)}attributeChangedCallback(n,t,e){if("flavor"===n&&this.Qn){const n=$n.get(this);n&&Rn(n,An(e))}"disabled"===n&&null!==e&&Fn(this)}}customElements.get("ty-tooltip")||customElements.define("ty-tooltip",TyTooltip);const Wn={locked:!1,scrollY:0,activeLocks:new Set};function Yn(){return document.documentElement}function _n(){if(!Wn.locked)return;const n=Yn();window,n.classList.remove("ty-scroll-locked"),n.style.overflow="",n.style.paddingRight="",Wn.locked=!1}function Un(n){Wn.activeLocks.has(n)||(Wn.activeLocks.add(n),1===Wn.activeLocks.size&&function(){if(Wn.locked)return;const n=window.innerWidth-Yn().clientWidth,t=Yn();window,Wn.scrollY=window.scrollY||Yn().scrollTop||0,Wn.locked=!0,t.style.overflow="hidden",n>0&&(t.style.paddingRight=n+"px"),t.classList.add("ty-scroll-locked")}())}function Gn(n){Wn.activeLocks.has(n)&&(Wn.activeLocks.delete(n),0===Wn.activeLocks.size&&_n())}const Xn=new WeakMap,Kn=new WeakMap,Zn=new WeakMap,Jn=new WeakMap,Qn=new WeakMap;function nt(n,t){return n.hasAttribute(t)}function tt(n,t,e){const o=n.getAttribute(t);if(null===o)return e;const i=parseInt(o,10);return isNaN(i)?e:i}function et(n){return{manual:nt(n,"manual"),disableClose:nt(n,"disable-close"),placement:n.getAttribute("placement")||"bottom",offset:tt(n,"offset",8)}}function ot(n){return n.parentElement}function it(n){return n.querySelector(".popup-dialog")}function rt(n){let t=Qn.get(n);return t||(t="popup-"+(n.id||Math.random().toString(36).substr(2,9)),Qn.set(n,t)),t}function st(n,t=!1){const{disableClose:e}=et(n);if(!t&&e)return;const o=n.shadowRoot,i=o?it(o):null;i&&(i.classList.remove("open"),i.classList.remove("preparing-animation"),setTimeout(()=>{i.classList.remove("position-calculated"),i.close()},150),n.dispatchEvent(new CustomEvent("close",{bubbles:!0})))}function at(n){Un(rt(n));const t=n.shadowRoot,e=t?it(t):null;e&&(e.showModal(),requestAnimationFrame(()=>{!function(n){const{placement:t,offset:e}=et(n),o=n.shadowRoot,i=ot(n),r=o?it(o):null;if(!i||!r)return;const s=Sn({targetEl:i,floatingEl:r,preferences:"top"===t?["top","bottom","left","right"]:"bottom"===t?["bottom","top","left","right"]:"left"===t?["left","right","top","bottom"]:"right"===t?["right","left","top","bottom"]:["bottom","top","right","left"],offset:e,padding:8,containerPadding:16});n.style.setProperty("--popup-x",s.x+"px"),n.style.setProperty("--popup-y",s.y+"px"),r.classList.add("position-calculated")}(n),e.classList.add("preparing-animation"),requestAnimationFrame(()=>{e.classList.add("open"),n.dispatchEvent(new CustomEvent("open",{bubbles:!0}))})}))}function lt(n){const t=n.shadowRoot,e=t?it(t):null;e&&(e.classList.contains("open")?st(n):at(n))}function dt(n){const{manual:t}=et(n),e=ot(n);if(!e||t)return;const o=Xn.get(n);o&&e.removeEventListener("pointerdown",o);const i=t=>function(n,t){t.preventDefault(),t.stopPropagation(),lt(n)}(n,t);Xn.set(n,i),e.addEventListener("pointerdown",i)}function ct(n){const t=ot(n),e=Xn.get(n);t&&e&&(t.removeEventListener("pointerdown",e),Xn.delete(n))}function ht(n){const t=n.shadowRoot;if(!t)return;const e=it(t);if(r(t,{css:"\n/* Popup component with dropdown-like behavior and tooltip positioning */\n/* Uses dialog element for top layer rendering like dropdown and date-picker */\n\n.popup-dialog {\n position: fixed;\n top: 0;\n left: 0;\n\n /* Reset dialog defaults */\n margin: 0;\n border: none;\n background: transparent;\n max-width: none;\n max-height: none;\n\n /* Shadow infrastructure - provide space for user shadows */\n padding: var(--popup-padding, 16px);\n\n /* Hidden by default - even when [open] (for positioning phase) */\n visibility: hidden;\n opacity: 0;\n /* NO TRANSFORM here - apply only when animating to avoid measurement errors! */\n\n /* Smooth transitions */\n transition:\n opacity 150ms ease-out,\n visibility 150ms ease-out,\n transform 150ms ease-out;\n\n /* Prevent interactions when hidden */\n pointer-events: none;\n}\n\n/* Apply position variables only when position is calculated (like dropdown) */\n.popup-dialog.position-calculated {\n top: var(--popup-y, 0px);\n left: var(--popup-x, 0px);\n}\n\n/* Apply scale for entrance animation (right before .open) */\n.popup-dialog.preparing-animation {\n transform: scale(0.95);\n}\n\n/* When open - smooth entrance animation */\n.popup-dialog.open {\n visibility: visible;\n opacity: 1;\n transform: scale(1);\n pointer-events: auto;\n}\n\n/* Make dialog backdrop transparent like dropdown/date-picker */\n.popup-dialog::backdrop {\n background: transparent;\n}\n\n/* Inner container - neutral structural container */\n.popup-container {\n /* No default styling - just provides structure */\n /* Users control all visual aspects via slotted content */\n display: contents;\n}\n\n/* Content slot styling */\n#popup-content {\n /* Allow slotted content to define its own styling */\n display: contents;\n}\n\n/* Remove default styling from slotted content - users have full control */\n#popup-content ::slotted(*) {\n /* Remove default styling that conflicts with user styling */\n /* Users now have complete control over popup appearance */\n /* background: unset; */\n /* border: unset; */\n /* box-shadow: unset; */\n\n /* Only maintain essential positioning */\n position: relative;\n\n /* Prevent content from being too wide - still helpful */\n max-width: min(400px, 90vw);\n max-height: min(500px, 80vh);\n overflow: auto;\n}\n",id:"ty-popup"}),!e){const e=document.createElement("dialog"),o=document.createElement("div"),i=document.createElement("slot");e.className="popup-dialog",o.className="popup-container",i.id="popup-content",t.appendChild(e),e.appendChild(o),o.appendChild(i),n.style.setProperty("--popup-x","0px"),n.style.setProperty("--popup-y","0px");const r=t=>function(n,t){t.stopPropagation();const e=n.shadowRoot,o=e?it(e):null;o&&t.target===o&&(t.preventDefault(),st(n))}(n,t);Kn.set(n,r),e.addEventListener("pointerdown",r);const s=t=>function(n,t){if(t.stopPropagation(),"Escape"===t.key){const{disableClose:e}=et(n);e?t.preventDefault():st(n)}}(n,t);Zn.set(n,s),n.addEventListener("keydown",s),e.addEventListener("close",()=>{Gn(rt(n)),e.classList.remove("open"),e.classList.remove("preparing-animation"),n.dispatchEvent(new CustomEvent("close",{bubbles:!0}))})}n.closePopup=()=>st(n,!0),n.openPopup=()=>at(n),n.togglePopup=()=>lt(n);const o=t=>function(n,t){t.stopPropagation(),st(n,!0)}(n,t);Jn.set(n,o),n.addEventListener("ty:close-popup",o),dt(n)}class TyPopup extends HTMLElement{static get observedAttributes(){return["manual","disable-close","placement","offset"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){ht(this)}disconnectedCallback(){!function(n){const t=Qn.get(n);t&&(Gn(t),Qn.delete(n)),ct(n);const e=n.shadowRoot,o=e?it(e):null;if(o){const t=Kn.get(n);t&&(o.removeEventListener("pointerdown",t),Kn.delete(n))}const i=Zn.get(n);i&&(n.removeEventListener("keydown",i),Zn.delete(n));const r=Jn.get(n);r&&(n.removeEventListener("ty:close-popup",r),Jn.delete(n))}(this)}attributeChangedCallback(n,t,e){switch(ht(this),n){case"placement":case"offset":ht(this);break;case"manual":case"disable-close":ct(this),dt(this)}}}customElements.get("ty-popup")||customElements.define("ty-popup",TyPopup);const pt=new WeakMap,ut=new WeakMap,gt=new WeakMap,bt=new WeakMap,vt=new WeakMap,mt=new WeakMap;function yt(n,t){if(!n.hasAttribute(t))return!1;const e=n.getAttribute(t);return null===e||"false"!==e.toLowerCase()}function ft(n){return{open:yt(n,"open"),backdrop:!n.hasAttribute("backdrop")||yt(n,"backdrop"),closeOnOutsideClick:!n.hasAttribute("close-on-outside-click")||yt(n,"close-on-outside-click"),closeOnEscape:!n.hasAttribute("close-on-escape")||yt(n,"close-on-escape"),protected:yt(n,"protected")}}function wt(n){return n.querySelector(".ty-modal-dialog")}function xt(n,t,e){const o=new CustomEvent(t,{detail:e,bubbles:!0,cancelable:!0});n.dispatchEvent(o)}function kt(n){const{protected:t}=ft(n),e=n.shadowRoot,o=e?wt(e):null;if(o&&o.open){if(t&&!confirm("You have unsaved changes. Are you sure you want to close?"))return;n.removeAttribute("open")}}function zt(n){const t=n.shadowRoot;if(!t)return;const e=ft(n),o=function(n){let t=wt(n);if(!t){t=document.createElement("dialog");const e=document.createElement("button"),o=document.createElement("div"),i=document.createElement("slot");t.className="ty-modal-dialog",e.className="close-button",e.type="button",e.setAttribute("aria-label","Close modal"),e.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',o.className="modal-content",o.appendChild(i),t.appendChild(e),t.appendChild(o),n.appendChild(t)}return t}(t),i=function(n){let t=mt.get(n);return t||(t="modal-"+(n.id||Math.random().toString(36).substr(2,9)),mt.set(n,t)),t}(n);r(t,{css:"\n/* Modal Host Styling */\n:host {\n display: contents;\n /* Don't interfere with layout */\n /* CSS variables are now auto-generated via the with-vars? option */\n}\n\n/* ===== CLOSE BUTTON STYLING ===== */\n/* This is part of the modal wrapper functionality, not user content styling */\n\n.close-button {\n position: absolute;\n top: -8px;\n right: -8px;\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 4px;\n border-radius: 4px;\n transition: var(--ty-transition-colors);\n z-index: 1;\n color: #d8d8d8;\n\n /* Remove all default browser styling that could cause outlines/borders */\n outline: none;\n box-shadow: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n\n /* Remove mobile tap highlights and focus rings */\n -webkit-tap-highlight-color: transparent;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.close-button:hover {\n color: white;\n}\n\n/* Explicitly remove focus and active states for all interaction modes */\n.close-button:focus,\n.close-button:focus-visible,\n.close-button:focus-within,\n.close-button:active {\n outline: none !important;\n box-shadow: none !important;\n border: none !important;\n background: transparent !important;\n}\n\n/* Override hover color even in focus/active states */\n.close-button:hover,\n.close-button:focus:hover,\n.close-button:active:hover {\n color: white;\n}\n\n.close-button.hide {\n visibility: hidden;\n}\n\n/* ===== DIALOG ELEMENT - PURE WRAPPER ===== */\n/* Modal dialog - provides only essential modal functionality without styling user content */\n\n.ty-modal-dialog {\n /* Reset default dialog styles */\n padding: 18px;\n border: none;\n margin: 0;\n background: transparent;\n\n /* Modal positioning - centered */\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n\n /* Layer management */\n z-index: 1000;\n overflow: hidden;\n\n /* No sizing - let user content determine size */\n max-width: 85vw;\n max-height: 90vh;\n\n outline: none;\n}\n\n/* ===== BACKDROP STYLING ===== */\n/* Backdrop is part of modal functionality, not user content */\n\n.ty-modal-dialog::backdrop {\n background: var(--ty-modal-backdrop, rgba(0, 0, 0, 0.5));\n backdrop-filter: var(--ty-modal-backdrop-blur, blur(2px));\n animation: ty-modal-backdrop-enter var(--ty-modal-duration, 200ms) ease-out;\n}\n\n/* When backdrop is disabled */\n.ty-modal-dialog:not([data-backdrop])::backdrop {\n background: transparent;\n backdrop-filter: none;\n}\n\n/* ===== MODAL CONTENT CONTAINER ===== */\n/* Minimal container - no styling imposed on user content */\n\n.modal-content {\n color: var(--ty-text);\n}\n\n/* ===== ANIMATION KEYFRAMES ===== */\n\n@keyframes ty-modal-backdrop-enter {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n",id:"ty-modal"}),o.className="ty-modal-dialog",e.backdrop?o.setAttribute("data-backdrop","true"):o.removeAttribute("data-backdrop"),function(n,t,e){const o=pt.get(n);if(o&&(t.removeEventListener("click",o),pt.delete(n)),e){const e=t=>function(n,t){t.stopPropagation();const e=n.shadowRoot,o=e?wt(e):null;o&&t.target===o&&(t.preventDefault(),kt(n))}(n,t);pt.set(n,e),t.addEventListener("click",e)}}(n,o,e.closeOnOutsideClick),function(n,t,e){const o=ut.get(n);if(o&&(t.removeEventListener("keydown",o),ut.delete(n)),e){const e=t=>function(n,t){t.stopPropagation(),"Escape"===t.key&&(t.preventDefault(),kt(n))}(n,t);ut.set(n,e),t.addEventListener("keydown",e)}}(n,o,e.closeOnEscape),function(n,t,e){const o=t.querySelector(".close-button");if(!o)return;o.style.display=e?"":"none";const i=gt.get(n);if(i&&(o.removeEventListener("click",i),gt.delete(n)),e){const t=t=>function(n,t){t.preventDefault(),t.stopPropagation(),kt(n)}(n,t);gt.set(n,t),o.addEventListener("click",t)}}(n,o,e.closeOnOutsideClick),function(n,t){const e=t.querySelector(".modal-content");if(!e)return;const o=bt.get(n),i=vt.get(n);if(o&&(e.removeEventListener("mouseenter",o),bt.delete(n)),i&&(e.removeEventListener("mouseleave",i),vt.delete(n)),window.innerWidth>=768&&0>=navigator.maxTouchPoints){const t=n=>function(n,t){const e=t.currentTarget.closest(".ty-modal-dialog");if(e){const n=e.querySelector(".close-button");n&&n.classList.add("hide")}}(0,n),o=n=>function(n,t){const e=t.currentTarget.closest(".ty-modal-dialog");if(e){const n=e.querySelector(".close-button");n&&n.classList.remove("hide")}}(0,n);bt.set(n,t),vt.set(n,o),e.addEventListener("mouseenter",t),e.addEventListener("mouseleave",o)}}(n,o),e.open?o.open||(Un(i),e.backdrop?o.showModal():o.show(),xt(n,"open",{})):o.open&&(Gn(i),o.close(),xt(n,"close",{reason:"programmatic"})),o.onclose=()=>{Gn(i),n.hasAttribute("open")&&(n.removeAttribute("open"),xt(n,"close",{reason:"native",returnValue:o.returnValue||void 0}))}}class TyModal extends HTMLElement{static get observedAttributes(){return["open","backdrop","close-on-outside-click","close-on-escape","protected"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){zt(this),this.show=()=>{this.setAttribute("open","true")},this.hide=()=>kt(this)}disconnectedCallback(){!function(n){const t=mt.get(n),e=n.shadowRoot,o=e?wt(e):null;if(t&&(Gn(t),mt.delete(n)),!o)return;const i=pt.get(n);i&&(o.removeEventListener("click",i),pt.delete(n));const r=ut.get(n);r&&(o.removeEventListener("keydown",r),ut.delete(n));const s=o.querySelector(".close-button");if(s){const t=gt.get(n);t&&(s.removeEventListener("click",t),gt.delete(n))}const a=o.querySelector(".modal-content");if(a){const t=bt.get(n),e=vt.get(n);t&&(a.removeEventListener("mouseenter",t),bt.delete(n)),e&&(a.removeEventListener("mouseleave",e),vt.delete(n))}}(this)}attributeChangedCallback(n,t,e){zt(this)}}customElements.get("ty-modal")||customElements.define("ty-modal",TyModal);const Ct=`\n/* ==================== SHARED STYLES ==================== */\n/* These apply to BOTH desktop and mobile modes */\n\n:host {\n display: block;\n width: auto;\n}\n\n:host {\n --mobile-border-color: var(--ty-border, #5858587d);\n}\n\n.dropdown-container {\n display: flex;\n flex-direction: column;\n width: 100%;\n box-sizing: border-box;\n}\n\n/* Label styling */\n.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-icon {\n display: inline-flex;\n align-items: center;\n color: #ef4444;\n width: 12px;\n height: 12px;\n vertical-align: middle;\n margin-left: 4px;\n}\n\n.dropdown-wrapper {\n position: relative;\n display: block;\n width: 100%;\n}\n\n/* ==================== DESKTOP MODE STYLES ==================== */\n/* All styles scoped under .dropdown-mode-desktop */\n\n/* Stub (trigger button) */\n.dropdown-mode-desktop .dropdown-stub {\n width: 100%;\n cursor: pointer;\n box-sizing: border-box;\n position: relative;\n display: flex;\n align-items: center;\n background: var(--input-bg, var(--ty-input-bg));\n color: var(--input-color, var(--ty-input-color));\n border: 1px solid var(--input-border, var(--ty-input-border));\n border-radius: var(--ty-radius-md);\n font-family: var(--ty-font-sans);\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n font-weight: var(--ty-font-normal);\n min-height: var(--ty-size-md);\n padding: 0 var(--ty-spacing-3);\n padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n transition: var(--ty-transition-all), opacity 0.2s ease;\n outline: none;\n}\n\n.dropdown-mode-desktop .dropdown-stub:hover {\n border-color: var(--input-border-hover, var(--ty-input-border-hover));\n}\n\n.dropdown-mode-desktop .dropdown-stub[disabled] {\n background-color: var(--input-disabled-bg, var(--ty-input-disabled-bg));\n color: var(--input-disabled-color, var(--ty-input-disabled-color));\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n.dropdown-mode-desktop .dropdown-stub:focus {\n border-color: var(--input-border-hover, var(--ty-input-border-hover));\n}\n\n/* Hide stub when dropdown is open */\n.dropdown-mode-desktop .dropdown-wrapper:has(.dropdown-chevron.open) .dropdown-stub {\n opacity: 0;\n pointer-events: none;\n}\n\n/* Size variants */\n.dropdown-mode-desktop .dropdown-stub.xs {\n min-height: var(--ty-size-xs);\n font-size: var(--ty-font-xs);\n line-height: var(--ty-leading-xs);\n letter-spacing: var(--ty-tracking-xs);\n padding: var(--ty-spacing-1) var(--ty-spacing-2);\n padding-right: calc(var(--ty-spacing-2) + 1rem + var(--ty-spacing-1));\n}\n\n.dropdown-mode-desktop .dropdown-stub.sm {\n min-height: var(--ty-size-sm);\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n padding: var(--ty-spacing-1) var(--ty-spacing-2);\n padding-right: calc(var(--ty-spacing-2) + 1rem + var(--ty-spacing-1));\n}\n\n.dropdown-mode-desktop .dropdown-stub.md {\n min-height: var(--ty-size-md);\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n padding: var(--ty-spacing-2) var(--ty-spacing-3);\n padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n}\n\n.dropdown-mode-desktop .dropdown-stub.lg {\n min-height: var(--ty-size-lg);\n font-size: var(--ty-font-base);\n line-height: var(--ty-leading-base);\n letter-spacing: var(--ty-tracking-base);\n padding: var(--ty-spacing-3) var(--ty-spacing-4);\n padding-right: calc(var(--ty-spacing-4) + 1rem + var(--ty-spacing-3));\n}\n\n.dropdown-mode-desktop .dropdown-stub.xl {\n min-height: var(--ty-size-xl);\n font-size: var(--ty-font-lg);\n line-height: var(--ty-leading-lg);\n letter-spacing: var(--ty-tracking-lg);\n padding: var(--ty-spacing-4) var(--ty-spacing-5);\n padding-right: calc(var(--ty-spacing-5) + 1rem + var(--ty-spacing-4));\n}\n\n/* Clearable adjustments */\n.dropdown-mode-desktop .dropdown-stub.xs.clearable.has-selection {\n padding-right: calc(var(--ty-spacing-2) + 2rem + var(--ty-spacing-2));\n}\n\n.dropdown-mode-desktop .dropdown-stub.sm.clearable.has-selection {\n padding-right: calc(var(--ty-spacing-2) + 2rem + var(--ty-spacing-2));\n}\n\n.dropdown-mode-desktop .dropdown-stub.md.clearable.has-selection {\n padding-right: calc(var(--ty-spacing-3) + 2rem + var(--ty-spacing-3));\n}\n\n.dropdown-mode-desktop .dropdown-stub.lg.clearable.has-selection {\n padding-right: calc(var(--ty-spacing-4) + 2rem + var(--ty-spacing-4));\n}\n\n.dropdown-mode-desktop .dropdown-stub.xl.clearable.has-selection {\n padding-right: calc(var(--ty-spacing-5) + 2rem + var(--ty-spacing-5));\n}\n\n/* Start-slot icon (leading content inside the stub trigger) */\n.dropdown-mode-desktop .dropdown-stub ::slotted([slot="start"]),\n.dropdown-mode-mobile .dropdown-stub ::slotted([slot="start"]) {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin-right: 0.5rem;\n color: var(--ty-color-text-soft);\n}\n\n.dropdown-mode-desktop .dropdown-stub ::slotted(ty-icon[slot="start"]),\n.dropdown-mode-mobile .dropdown-stub ::slotted(ty-icon[slot="start"]) {\n width: 1em;\n height: 1em;\n}\n\n/* Placeholder */\n.dropdown-mode-desktop .dropdown-placeholder {\n color: var(--input-placeholder, var(--ty-input-placeholder));\n font-weight: var(--ty-font-light);\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n font-style: italic;\n pointer-events: none;\n}\n\n.dropdown-mode-desktop .dropdown-stub.has-selection .dropdown-placeholder {\n display: none;\n}\n\n/* Selected content */\n.dropdown-mode-desktop .dropdown-stub slot[name="selected"] {\n display: block;\n}\n\n.dropdown-mode-desktop .dropdown-stub.has-selection slot[name="selected"] {\n width: 100%;\n}\n\n.dropdown-mode-desktop .dropdown-stub slot[name="selected"] * {\n display: block;\n width: 100%;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n color: inherit;\n font: inherit;\n line-height: inherit;\n outline: none;\n appearance: none;\n}\n\n/* Chevron */\n.dropdown-mode-desktop .dropdown-chevron {\n position: absolute;\n top: 50%;\n right: var(--ty-spacing-3);\n transform: translateY(-50%);\n width: 1rem;\n height: 1rem;\n color: var(--input-placeholder, var(--ty-input-placeholder));\n transition: var(--ty-transition-transform);\n pointer-events: none;\n}\n\n.dropdown-mode-desktop .dropdown-chevron.open {\n transform: translateY(-50%) rotate(180deg);\n}\n\n.dropdown-mode-desktop .dropdown-chevron svg {\n width: 100%;\n height: 100%;\n}\n\n/* Clear button */\n.dropdown-mode-desktop .dropdown-clear-btn {\n position: absolute;\n top: 50%;\n right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n transform: translateY(-50%);\n width: 1rem;\n height: 1rem;\n padding: 0;\n border: none;\n background: none;\n color: var(--input-placeholder, var(--ty-input-placeholder));\n cursor: pointer;\n transition: var(--ty-transition-colors);\n display: none;\n}\n\n.dropdown-mode-desktop .dropdown-clear-btn:hover {\n color: var(--ty-color-danger);\n}\n\n.dropdown-mode-desktop .dropdown-clear-btn:active {\n transform: translateY(-50%) scale(0.9);\n}\n\n.dropdown-mode-desktop .dropdown-clear-btn svg {\n width: 100%;\n height: 100%;\n display: block;\n}\n\n/* Dialog */\n.dropdown-mode-desktop .dropdown-dialog {\n position: fixed;\n width: var(--dropdown-width, 200px);\n max-width: 100vw;\n margin: 0;\n padding: 0;\n border: none;\n background: transparent;\n box-sizing: border-box;\n padding: var(--dropdown-padding, 20px);\n opacity: 0;\n transition: opacity 400ms ease;\n transform: translate(var(--dropdown-offset-x, 0px), var(--dropdown-offset-y, 0px));\n top: -1000px;\n left: -1000px;\n}\n\n/* When opened via showModal(), apply flex layout and direction */\n.dropdown-mode-desktop .dropdown-dialog[open] {\n display: flex;\n flex-direction: column;\n}\n\n.dropdown-mode-desktop .dropdown-dialog.position-below {\n left: var(--dropdown-x);\n top: var(--dropdown-y);\n}\n\n.dropdown-mode-desktop .dropdown-dialog.position-above {\n left: var(--dropdown-x);\n bottom: var(--dropdown-y);\n top: auto;\n flex-direction: column-reverse;\n}\n\n.dropdown-mode-desktop .dropdown-dialog.position-above .dropdown-header {\n margin-top: 4px;\n}\n\n.dropdown-mode-desktop .dropdown-dialog.position-below .dropdown-header {\n margin-bottom: 4px;\n}\n\n.dropdown-mode-desktop .dropdown-dialog.position-below .dropdown-options {\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1), var(--ty-shadow-md);\n}\n\n.dropdown-mode-desktop .dropdown-dialog.open {\n display: flex;\n opacity: 1;\n}\n\n.dropdown-mode-desktop .dropdown-dialog.open .dropdown-options {\n opacity: 1;\n transform: translateY(0) scale(1);\n}\n\n.dropdown-mode-desktop .dropdown-dialog::backdrop {\n background: transparent;\n}\n\n/* Dialog header */\n.dropdown-mode-desktop .dropdown-header {\n display: flex;\n align-items: center;\n gap: var(--ty-spacing-2);\n position: relative;\n}\n\n.dropdown-mode-desktop .dropdown-search-input {\n width: 100%;\n min-width: 0;\n box-sizing: border-box;\n background: var(--input-bg, var(--ty-input-bg));\n color: var(--input-color, var(--ty-input-color));\n border: 1px solid var(--input-border, var(--ty-input-border));\n border-radius: var(--ty-radius-md);\n font-family: var(--ty-font-sans);\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n font-weight: var(--ty-font-normal);\n min-height: var(--ty-size-md);\n padding: var(--ty-spacing-2) var(--ty-spacing-3);\n padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n transition: var(--ty-transition-all);\n outline: none;\n}\n\n.dropdown-mode-desktop .dropdown-search-input:focus {\n border-color: var(--input-border-focus, var(--ty-input-border-focus));\n box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n.dropdown-mode-desktop .dropdown-search-input:disabled {\n background-color: var(--input-disabled-bg, var(--ty-input-disabled-bg));\n color: var(--input-disabled-color, var(--ty-input-disabled-color));\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n.dropdown-mode-desktop .dropdown-search-input::placeholder {\n color: var(--input-placeholder, var(--ty-input-placeholder));\n}\n\n/* Search input sizes */\n.dropdown-mode-desktop .dropdown-search-input.xs {\n min-height: var(--ty-size-xs);\n font-size: var(--ty-font-xs);\n line-height: var(--ty-leading-xs);\n letter-spacing: var(--ty-tracking-xs);\n padding: var(--ty-spacing-1) var(--ty-spacing-2);\n padding-right: calc(var(--ty-spacing-2) + 1rem + var(--ty-spacing-1));\n}\n\n.dropdown-mode-desktop .dropdown-search-input.sm {\n min-height: var(--ty-size-sm);\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n padding: var(--ty-spacing-1) var(--ty-spacing-2);\n padding-right: calc(var(--ty-spacing-2) + 1rem + var(--ty-spacing-1));\n}\n\n.dropdown-mode-desktop .dropdown-search-input.md {\n min-height: var(--ty-size-md);\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n padding: var(--ty-spacing-2) var(--ty-spacing-3);\n padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n}\n\n.dropdown-mode-desktop .dropdown-search-input.lg {\n min-height: var(--ty-size-lg);\n font-size: var(--ty-font-base);\n line-height: var(--ty-leading-base);\n letter-spacing: var(--ty-tracking-base);\n padding: var(--ty-spacing-3) var(--ty-spacing-4);\n padding-right: calc(var(--ty-spacing-4) + 1rem + var(--ty-spacing-3));\n}\n\n.dropdown-mode-desktop .dropdown-search-input.xl {\n min-height: var(--ty-size-xl);\n font-size: var(--ty-font-lg);\n line-height: var(--ty-leading-lg);\n letter-spacing: var(--ty-tracking-lg);\n padding: var(--ty-spacing-4) var(--ty-spacing-5);\n padding-right: calc(var(--ty-spacing-5) + 1rem + var(--ty-spacing-4));\n}\n\n.dropdown-mode-desktop .dropdown-search-chevron {\n position: absolute;\n top: 50%;\n right: var(--ty-spacing-3);\n transform: translateY(-50%);\n width: 1rem;\n height: 1rem;\n color: var(--input-placeholder, var(--ty-input-placeholder));\n transition: var(--ty-transition-transform);\n pointer-events: none;\n}\n\n.dropdown-mode-desktop .dropdown-search-chevron.open {\n transform: translateY(-50%) rotate(180deg);\n}\n\n.dropdown-mode-desktop .dropdown-search-chevron svg {\n width: 100%;\n height: 100%;\n}\n\n/* Options container */\n.dropdown-mode-desktop .dropdown-options {\n opacity: 0;\n background: var(--input-bg, var(--ty-input-bg));\n border: 1px solid var(--input-border, var(--ty-input-border));\n border-radius: var(--ty-radius-lg);\n max-height: 16rem;\n width: 100%;\n max-width: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n scroll-behavior: smooth;\n box-sizing: border-box;\n position: relative;\n box-shadow:\n 0 20px 25px -5px rgba(0, 0, 0, 0.1),\n 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n transform: translateY(-20px) scale(0.90);\n transition:\n opacity 100ms cubic-bezier(0.16, 1, 0.3, 1),\n transform 200ms cubic-bezier(0.16, 1, 0.3, 1);\n\n}\n\n/* Hide native scrollbar only when custom scrollbar is active */\n.dropdown-mode-desktop .dropdown-options.ty-custom-scroll {\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n\n.dropdown-mode-desktop .dropdown-options.ty-custom-scroll::-webkit-scrollbar {\n display: none;\n}\n\n/* Options wrapper - positioned container for scrollbar track */\n.dropdown-mode-desktop .dropdown-options-wrapper {\n position: relative;\n}\n\n/* Show custom scrollbar on hover over options */\n.dropdown-mode-desktop .dropdown-options-wrapper:hover .ty-scrollbar-track-y.has-overflow {\n opacity: 1;\n}\n\n/* Option elements */\n.dropdown-mode-desktop .dropdown-options ::slotted(option) {\n padding: var(--ty-spacing-2) var(--ty-spacing-3);\n color: var(--input-color, var(--ty-input-color));\n cursor: pointer;\n transition:\n var(--ty-transition-colors),\n transform 150ms cubic-bezier(0.16, 1, 0.3, 1);\n border: none;\n background: none;\n font-size: inherit;\n font-family: inherit;\n width: 100%;\n text-align: left;\n box-sizing: border-box;\n transform: translateX(0);\n}\n\n.dropdown-mode-desktop .dropdown-options ::slotted(option:hover) {\n background-color: var(--ty-bg-neutral-soft);\n}\n\n.dropdown-mode-desktop .dropdown-options ::slotted(option[highlighted]) {\n background-color: var(--ty-bg-primary-soft);\n color: var(--ty-color-primary-mild);\n}\n\n.dropdown-mode-desktop .dropdown-options ::slotted(option[selected]) {\n background-color: var(--ty-color-primary);\n color: #ffffff;\n}\n\n.dropdown-mode-desktop .dropdown-options ::slotted(option[hidden]),\n.dropdown-mode-desktop .dropdown-options ::slotted(ty-option[hidden]),\n.dropdown-mode-desktop .dropdown-options ::slotted(ty-tag[hidden]) {\n display: none;\n}\n\n/* ==================== MOBILE MODE STYLES ==================== */\n/* All styles scoped under .dropdown-mode-mobile */\n/* Floating modal design (centered card with backdrop) */\n\n/* Stub (trigger button) - same as desktop but scoped */\n.dropdown-mode-mobile .dropdown-stub {\n width: 100%;\n cursor: pointer;\n box-sizing: border-box;\n position: relative;\n display: flex;\n align-items: center;\n background: var(--input-bg, var(--ty-input-bg));\n color: var(--input-color, var(--ty-input-color));\n border: 1px solid var(--input-border, var(--ty-input-border));\n border-radius: var(--ty-radius-md);\n font-family: var(--ty-font-sans);\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n font-weight: var(--ty-font-normal);\n min-height: var(--ty-size-md);\n padding: var(--ty-spacing-2) var(--ty-spacing-3);\n padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n transition: var(--ty-transition-all);\n outline: none;\n}\n\n.dropdown-mode-mobile .dropdown-stub:hover {\n border-color: var(--input-border-hover, var(--ty-input-border-hover));\n}\n\n.dropdown-mode-mobile .dropdown-stub[disabled] {\n background-color: var(--input-disabled-bg, var(--ty-input-disabled-bg));\n color: var(--input-disabled-color, var(--ty-input-disabled-color));\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n/* Size variants */\n.dropdown-mode-mobile .dropdown-stub.xs {\n min-height: var(--ty-size-xs);\n font-size: var(--ty-font-xs);\n line-height: var(--ty-leading-xs);\n letter-spacing: var(--ty-tracking-xs);\n padding: var(--ty-spacing-1) var(--ty-spacing-2);\n padding-right: calc(var(--ty-spacing-2) + 1rem + var(--ty-spacing-1));\n}\n\n.dropdown-mode-mobile .dropdown-stub.sm {\n min-height: var(--ty-size-sm);\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n padding: var(--ty-spacing-1) var(--ty-spacing-2);\n padding-right: calc(var(--ty-spacing-2) + 1rem + var(--ty-spacing-1));\n}\n\n.dropdown-mode-mobile .dropdown-stub.md {\n min-height: var(--ty-size-md);\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n padding: var(--ty-spacing-2) var(--ty-spacing-3);\n padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n}\n\n.dropdown-mode-mobile .dropdown-stub.lg {\n min-height: var(--ty-size-lg);\n font-size: var(--ty-font-base);\n line-height: var(--ty-leading-base);\n letter-spacing: var(--ty-tracking-base);\n padding: var(--ty-spacing-3) var(--ty-spacing-4);\n padding-right: calc(var(--ty-spacing-4) + 1rem + var(--ty-spacing-3));\n}\n\n.dropdown-mode-mobile .dropdown-stub.xl {\n min-height: var(--ty-size-xl);\n font-size: var(--ty-font-lg);\n line-height: var(--ty-leading-lg);\n letter-spacing: var(--ty-tracking-lg);\n padding: var(--ty-spacing-4) var(--ty-spacing-5);\n padding-right: calc(var(--ty-spacing-5) + 1rem + var(--ty-spacing-4));\n}\n\n/* Placeholder */\n.dropdown-mode-mobile .dropdown-placeholder {\n color: var(--input-placeholder, var(--ty-input-placeholder));\n font-weight: var(--ty-font-light);\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n font-style: italic;\n pointer-events: none;\n}\n\n.dropdown-mode-mobile .dropdown-stub.has-selection .dropdown-placeholder {\n display: none;\n}\n\n/* Selected content */\n.dropdown-mode-mobile .dropdown-stub slot[name="selected"] {\n display: block;\n}\n\n.dropdown-mode-mobile .dropdown-stub.has-selection slot[name="selected"] {\n width: 100%;\n}\n\n.dropdown-mode-mobile .dropdown-stub slot[name="selected"] * {\n display: block;\n width: 100%;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n color: inherit;\n font: inherit;\n line-height: inherit;\n outline: none;\n appearance: none;\n}\n\n/* Chevron */\n.dropdown-mode-mobile .dropdown-chevron {\n position: absolute;\n top: 50%;\n right: var(--ty-spacing-3);\n transform: translateY(-50%);\n width: 1rem;\n height: 1rem;\n color: var(--input-placeholder, var(--ty-input-placeholder));\n transition: var(--ty-transition-transform);\n pointer-events: none;\n}\n\n.dropdown-mode-mobile .dropdown-chevron svg {\n width: 100%;\n height: 100%;\n}\n\n/* Mobile dialog - full screen overlay with centered floating card */\n.dropdown-mode-mobile .mobile-dialog {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n width: 100vw;\n height: 100vh;\n max-width: 100vw;\n max-height: 100vh;\n margin: 0;\n padding: 0;\n padding-top: 10vh;\n border: none;\n background: transparent;\n align-items: flex-start;\n justify-content: center;\n opacity: 0;\n transition: opacity 300ms ease;\n}\n\n/* When opened via showModal(), add flex layout */\n.dropdown-mode-mobile .mobile-dialog[open] {\n display: flex;\n}\n\n.dropdown-mode-mobile .mobile-dialog.open {\n opacity: 1;\n}\n\n/* Native dialog backdrop with blur */\n.dropdown-mode-mobile .mobile-dialog::backdrop {\n background: rgba(0, 0, 0, 0.5);\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n}\n\n/* Mobile content container - floating card */\n.dropdown-mode-mobile .mobile-dialog-content {\n position: relative;\n display: flex;\n flex-direction: column;\n width: calc(100% - 32px);\n max-width: 400px;\n min-height: 200px;\n max-height: calc(90vh - 10vh);\n opacity: 0;\n transform: scale(0.95);\n transition:\n opacity 300ms cubic-bezier(0.16, 1, 0.3, 1),\n transform 300ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.dropdown-mode-mobile .mobile-dialog.open .mobile-dialog-content {\n opacity: 1;\n transform: scale(1);\n}\n\n/* Mobile search header - label floats above, search + close below */\n.dropdown-mode-mobile .mobile-search-header {\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n margin-bottom: 16px;\n padding: 0;\n background: transparent;\n position: relative;\n}\n\n.dropdown-mode-mobile .mobile-header-content {\n display: flex;\n align-items: center;\n gap: 12px;\n width: 100%;\n}\n\n/* Header for non-searchable (label + close button) */\n.dropdown-mode-mobile .mobile-header-nosearch {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n margin-bottom: 16px;\n padding: 0;\n background: transparent;\n position: relative;\n min-height: 40px;\n}\n\n.dropdown-mode-mobile .mobile-header-label {\n position: absolute;\n bottom: 100%;\n left: 6px;\n margin-bottom: 4px;\n font-size: var(--ty-font-lg);\n line-height: var(--ty-leading-lg);\n letter-spacing: var(--ty-tracking-lg);\n font-weight: 700;\n color: var(--ty-color-neutral);\n pointer-events: none;\n}\n\n/* Close button - circular with border */\n.dropdown-mode-mobile .mobile-close-button {\n flex-shrink: 0;\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--ty-surface-floating);\n border: 2px solid var(--mobile-border-color);\n border-radius: 50%;\n color: var(--ty-text-strong);\n cursor: pointer;\n transition: var(--ty-transition-all);\n padding: 0;\n}\n\n.dropdown-mode-mobile .mobile-close-button:hover {\n background: var(--ty-bg-neutral);\n border-color: var(--ty-border);\n color: var(--ty-text-strong);\n}\n\n.dropdown-mode-mobile .mobile-close-button:active {\n transform: scale(0.9);\n}\n\n.dropdown-mode-mobile .mobile-close-button svg {\n width: 24px;\n height: 24px;\n}\n\n/* Mobile search input */\n.dropdown-mode-mobile .mobile-search-input {\n flex: 1;\n min-width: 0;\n box-sizing: border-box;\n background: var(--ty-surface-floating);\n color: var(--ty-text);\n border: 1px solid var(--ty-border-soft);\n border-radius: var(--ty-radius-md);\n font-family: var(--ty-font-sans);\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n font-weight: var(--ty-font-normal);\n padding: var(--ty-spacing-2) var(--ty-spacing-3);\n height: 40px;\n transition: var(--ty-transition-all);\n outline: none;\n border: 2px solid;\n border-color: var(--mobile-border-color);\n}\n\n.dropdown-mode-mobile .mobile-search-input::placeholder {\n color: var(--ty-text-faint);\n}\n\n/* Mobile options container - floating card with elevation */\n.dropdown-mode-mobile .mobile-options-container {\n position: relative;\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n background: var(--ty-surface-floating); /* Floating card background */\n border-radius: var(--ty-radius-lg);\n border: 1px solid var(--ty-border-soft);\n box-shadow: \n 0 20px 25px -5px rgba(0, 0, 0, 0.1),\n 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n border: 2px solid;\n border-color: var(--mobile-border-color);\n}\n\n/* Hide scrollbar but keep functionality */\n.dropdown-mode-mobile .mobile-options-container {\n scrollbar-width: none; /* Firefox */\n -ms-overflow-style: none; /* IE/Edge */\n}\n\n.dropdown-mode-mobile .mobile-options-container::-webkit-scrollbar {\n display: none; /* Chrome, Safari, Opera */\n}\n\n/* Mobile option styling - native <option> only */\n.dropdown-mode-mobile .mobile-options-container ::slotted(option) {\n display: block;\n padding: var(--ty-spacing-2) var(--ty-spacing-3);\n margin: 2px 8px;\n color: var(--ty-text);\n cursor: pointer;\n transition: var(--ty-transition-all);\n border: none;\n background: transparent;\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n font-family: inherit;\n width: calc(100% - 16px);\n text-align: left;\n box-sizing: border-box;\n border-radius: var(--ty-radius-sm);\n min-height: 36px;\n}\n\n.dropdown-mode-mobile .mobile-options-container ::slotted(option:active) {\n background-color: var(--ty-bg-neutral-soft);\n}\n\n.dropdown-mode-mobile .mobile-options-container ::slotted(option[highlighted]) {\n background-color: var(--ty-bg-primary-soft);\n color: var(--ty-color-primary-mild);\n}\n\n.dropdown-mode-mobile .mobile-options-container ::slotted(option[selected]) {\n background: var(--ty-bg-primary);\n color: var(--ty-color-primary-strong);\n}\n\n.dropdown-mode-mobile .mobile-options-container ::slotted(option[hidden]),\n.dropdown-mode-mobile .mobile-options-container ::slotted(ty-option[hidden]),\n.dropdown-mode-mobile .mobile-options-container ::slotted(ty-tag[hidden]) {\n display: none;\n}\n\n/* ==================== FLAVOR VARIANTS ==================== */\n/* Apply to both modes */\n\n:host([flavor="primary"]) .dropdown-stub,\n:host([flavor="primary"]) .dropdown-search-input {\n border-color: var(--ty-color-primary);\n}\n\n:host([flavor="primary"]) .dropdown-stub:hover,\n:host([flavor="primary"]) .dropdown-search-input:focus {\n border-color: var(--ty-color-primary-mild);\n box-shadow: 0 0 0 3px var(--ty-color-primary-faint);\n}\n\n:host([flavor="secondary"]) .dropdown-stub,\n:host([flavor="secondary"]) .dropdown-search-input {\n border-color: var(--ty-color-secondary);\n}\n\n:host([flavor="secondary"]) .dropdown-stub:hover,\n:host([flavor="secondary"]) .dropdown-search-input:focus {\n border-color: var(--ty-color-secondary-mild);\n box-shadow: 0 0 0 3px var(--ty-color-secondary-faint);\n}\n\n:host([flavor="success"]) .dropdown-stub,\n:host([flavor="success"]) .dropdown-search-input {\n border-color: var(--ty-color-success);\n}\n\n:host([flavor="success"]) .dropdown-stub:hover,\n:host([flavor="success"]) .dropdown-search-input:focus {\n border-color: var(--ty-color-success-mild);\n box-shadow: 0 0 0 3px var(--ty-color-success-faint);\n}\n\n:host([flavor="danger"]) .dropdown-stub,\n:host([flavor="danger"]) .dropdown-search-input {\n border-color: var(--ty-color-danger);\n}\n\n:host([flavor="danger"]) .dropdown-stub:hover,\n:host([flavor="danger"]) .dropdown-search-input:focus {\n border-color: var(--ty-color-danger-mild);\n box-shadow: 0 0 0 3px var(--ty-color-danger-faint);\n}\n\n:host([flavor="warning"]) .dropdown-stub,\n:host([flavor="warning"]) .dropdown-search-input {\n border-color: var(--ty-color-warning);\n}\n\n:host([flavor="warning"]) .dropdown-stub:hover,\n:host([flavor="warning"]) .dropdown-search-input:focus {\n border-color: var(--ty-color-warning-mild);\n box-shadow: 0 0 0 3px var(--ty-color-warning-faint);\n}\n\n/* ==================== READONLY STATE ==================== */\n\n:host([readonly]) .dropdown-chevron {\n display: none;\n}\n\n:host([readonly]) .dropdown-stub {\n padding-right: var(--ty-spacing-3);\n}\n\n:host([readonly]) .dropdown-stub,\n:host([readonly]) .dropdown-stub slot[name="selected"] {\n cursor: initial;\n}\n\n/* ==================== LOADING STATE ====================\n Spinner overlay shown inside the popup options area while\n the parent (external-search mode) is fetching results.\n Search input stays usable so users can keep refining.\n\n Carries its own surface (background + radius + subtle border)\n so it stays visible even when the host has restyled the popup\n with a transparent or unusual background.\n Override with --ty-loader-bg / --ty-loader-radius / --ty-loader-border\n on the host element.\n*/\n.dropdown-loading {\n display: none;\n align-items: center;\n justify-content: center;\n gap: var(--ty-spacing-2);\n padding: var(--ty-spacing-4) var(--ty-spacing-3);\n color: var(--ty-text-soft);\n font-size: var(--ty-font-sm);\n min-height: 4rem;\n /* Match the .dropdown-options popup look — same background, border, radius, shadow */\n background: var(--ty-loader-bg, var(--input-bg, var(--ty-input-bg)));\n border: 1px solid var(--ty-loader-border, var(--input-border, var(--ty-input-border)));\n border-radius: var(--ty-loader-radius, var(--ty-radius-lg));\n box-shadow: var(--ty-loader-shadow, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04));\n box-sizing: border-box;\n}\n\n.dropdown-options-wrapper.loading .dropdown-loading {\n display: flex;\n}\n\n/* Make the loading slot transparent for layout so default fallback (spinner + text)\n AND user-provided slotted content both act as direct flex children of .dropdown-loading. */\n.dropdown-loading > slot[name="loading"] {\n display: contents;\n}\n\n/* Mobile: full-screen dialog is the surface — drop the card chrome,\n stack vertically, scale up so it feels native to a fullscreen view.\n Slotted content adapts automatically since the slot is display:contents. */\n.dropdown-mode-mobile .dropdown-loading {\n background: transparent;\n border: none;\n box-shadow: none;\n flex: 1;\n flex-direction: column;\n gap: var(--ty-spacing-3);\n padding: var(--ty-spacing-8) var(--ty-spacing-4);\n min-height: 12rem;\n}\n\n.dropdown-mode-mobile .dropdown-loading-spinner {\n width: 2rem;\n height: 2rem;\n}\n\n.dropdown-mode-mobile .dropdown-loading-text {\n font-size: var(--ty-font-base);\n}\n\n.dropdown-options-wrapper.loading .dropdown-options,\n.dropdown-options-wrapper.loading > slot#options-slot {\n display: none;\n}\n\n.dropdown-loading-spinner {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 1.125rem;\n height: 1.125rem;\n flex-shrink: 0;\n animation: ty-dropdown-spin 0.7s linear infinite;\n color: var(--ty-color-primary);\n}\n\n.dropdown-loading-spinner svg {\n width: 100%;\n height: 100%;\n}\n\n.dropdown-loading-text {\n color: var(--ty-text-soft);\n}\n\n@keyframes ty-dropdown-spin {\n to { transform: rotate(360deg); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .dropdown-loading-spinner {\n animation-duration: 1.6s;\n }\n}\n\n/* Custom scrollbar styles */\n${yn}\n`;let St=0;const Et=new WeakMap,Tt='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-asterisk"><path d="M12 6v12"/><path d="M17.196 9 6.804 15"/><path d="m6.804 9 10.392 6"/></svg>',Mt='<svg viewBox="0 0 20 20" fill="currentColor">\n <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />\n</svg>',Dt=class extends o{constructor(){super(),this.N="",this.nt="Select an option...",this.tt="",this.R=!1,this.et=!1,this.ot=!1,this.it=!1,this.rt=!0,this.st=!1,this.lt="md",this.dt={open:!1,search:"",highlightedIndex:-1,filteredOptions:[],currentValue:null,mode:"desktop"},this.ct=null,this.ht=null,this.ut=null,this.gt=null,this.bt=null,this.vt=null,this.yt=null,this.ft=null,this.wt=0,this.xt=null,this.kt=null,this.zt=null,r(this.shadowRoot,{css:Ct,id:"ty-dropdown"})}render(){this.dt.mode=B()?"mobile":"desktop","mobile"===this.dt.mode?this.renderMobile():this.renderDesktop(),this.applyLoadingState()}onConnect(){this.initializeState(),this.zt=new MutationObserver(()=>this.redisplaySelected()),this.zt.observe(this,{childList:!0})}onDisconnect(){const n=this.tyOutsideClickHandler;n&&(document.removeEventListener("click",n),this.tyOutsideClickHandler=null),null!==this.xt&&(clearTimeout(this.xt),this.xt=null),this.Ct(),this.zt&&(this.zt.disconnect(),this.zt=null)}redisplaySelected(){const n=this.dt.currentValue;if(!n)return;const t=this.getOptions().find(t=>this.getOptionData(t).value===n);if(!t||t.hasAttribute("selected"))return;this.clearSelection();const e=t.cloneNode(!0);e.setAttribute("slot","selected"),e.setAttribute("cloned","true"),t.parentNode.appendChild(e),t.setAttribute("selected",""),this.updateSelectionDisplay()}onPropertiesChanged(n){for(const{name:t,newValue:e}of n)switch(t){case"value":this.N=e||"",this.dt.currentValue=e||null,this.syncSelectedOption();break;case"placeholder":this.nt=e||"Select an option...",this.updatePlaceholderInDOM();break;case"label":this.tt=e||"";break;case"disabled":this.R=e;break;case"readonly":this.et=e;break;case"required":this.ot=e;break;case"externalSearch":this.it=e;break;case"clearable":this.rt=e,this.updateClearButton();break;case"size":this.lt=e;break;case"debounce":this.wt=e;break;case"loading":this.st=e,this.applyLoadingState()}}applyLoadingState(){const n=this.shadowRoot;if(!n)return;const t=this.st?l():null;n.querySelectorAll(".dropdown-options-wrapper").forEach(n=>{if(n.classList.toggle("loading",this.st),this.st){n.setAttribute("aria-busy","true");const e=n.querySelector(".dropdown-loading-spinner");e&&t&&(e.innerHTML=t)}else n.removeAttribute("aria-busy")})}getFormValue(){return this.dt.currentValue||null}parseValue(n){return n&&"string"==typeof n&&""!==n.trim()?n.trim():null}initializeState(){this.N&&(this.dt.currentValue=this.parseValue(this.N),requestAnimationFrame(()=>{this.syncSelectedOption()})),this.addEventListener("clear-selection",n=>{n.stopPropagation(),this.clearSelection(),this.dt.currentValue=null,this.updateComponentValue(),this.updateSelectionDisplay(),this.dispatchEvent(new CustomEvent("change",{detail:{value:null,text:"",option:null,originalEvent:n},bubbles:!0,composed:!0})),this.dt.open&&"mobile"===this.dt.mode&&this.closeMobileModal()}),this.render()}updatePlaceholderInDOM(){const n=this.shadowRoot,t=n.querySelector(".dropdown-placeholder");t&&(t.textContent=this.nt);const e=n.querySelector(".dropdown-search-input");e&&(e.placeholder=this.nt);const o=n.querySelector(".mobile-search-input");o&&(o.placeholder=this.nt)}getOptions(){const n=this.shadowRoot.querySelector("slot:not([name])");return n?(n.assignedElements?n.assignedElements():[]).filter(n=>{const t=n.tagName;return"OPTION"===t||"TY-OPTION"===t||"TY-TAG"===t}):[]}getOptionData(n){const t=n.tagName;return"OPTION"===t||"TY-OPTION"===t?{value:n.value||n.textContent||"",text:n.textContent||"",element:n}:"TY-TAG"===t?{value:n.getAttribute("value")||n.textContent||"",text:n.textContent||"",element:n}:{value:n.textContent||"",text:n.textContent||"",element:n}}clearSelection(){const n=this.shadowRoot;this.getOptions().forEach(n=>n.removeAttribute("selected"));const t=n.querySelector('slot[name="selected"]');if(t){const n=t.assignedElements?t.assignedElements():[];Array.from(n).filter(n=>n.hasAttribute("cloned")).forEach(n=>n.remove())}}selectOption(n,t){const e=this.getOptionData(n),o=!e.value||""===e.value.trim();if(this.clearSelection(),o)this.dt.currentValue=null;else{const t=n.cloneNode(!0);t.setAttribute("slot","selected"),t.setAttribute("cloned","true"),n.parentNode.appendChild(t),n.setAttribute("selected",""),this.dt.currentValue=e.value}this.updateComponentValue(),this.updateSelectionDisplay(),this.dispatchChangeEvent(n,t)}syncSelectedOption(){const n=this.getOptions(),t=this.dt.currentValue;if(!t)return void this.clearSelection();const e=n.find(n=>this.getOptionData(n).value===t);e&&this.selectOption(e)}updateComponentValue(){const n=this.dt.currentValue;null!==n?this.setAttribute("value",n):this.removeAttribute("value"),this.N=n||""}updateSelectionDisplay(){const n=this.shadowRoot.querySelector(".dropdown-stub");n&&(this.getOptions().some(n=>n.hasAttribute("selected"))?n.classList.add("has-selection"):n.classList.remove("has-selection"),this.updateClearButton())}updateClearButton(){const n=this.shadowRoot.querySelector(".dropdown-clear-btn");n&&(n.style.display=!this.rt||null===this.dt.currentValue||""===this.dt.currentValue||this.R||this.et||this.dt.open||"mobile"===this.dt.mode?"none":"block")}dispatchChangeEvent(n,t){const e=this.getOptionData(n);this.dispatchEvent(new CustomEvent("change",{detail:{value:this.dt.currentValue,text:e.text,option:n,originalEvent:t||null},bubbles:!0,composed:!0}))}filterOptions(n,t){if(!t||""===t.trim())return n;const e=t.toLowerCase();return n.filter(({text:n})=>n.toLowerCase().includes(e))}updateOptionVisibility(n,t){const e=new Set(n.map(n=>n.value));t.forEach(({value:n,element:t})=>{e.has(n)?t.removeAttribute("hidden"):t.setAttribute("hidden","")})}clearHighlights(n){n.forEach(({element:n})=>{n.removeAttribute("highlighted")})}highlightOption(n,t){if(this.clearHighlights(n),t>=0&&n.length>t){const{element:e}=n[t];e.setAttribute("highlighted",""),e.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"})}}setupDesktopEventListeners(){const n=this.shadowRoot,t=n.querySelector(".dropdown-stub"),e=n.querySelector("#options-slot"),o=n.querySelector(".dropdown-search-input");t&&(this.ht=this.handleDesktopStubClick.bind(this),t.addEventListener("click",this.ht)),e&&(this.gt=this.handleDesktopOptionClick.bind(this),e.addEventListener("click",this.gt)),o&&(this.bt=this.handleSearchInput.bind(this),this.vt=this.blockSearchClick.bind(this),o.addEventListener("input",this.bt),o.addEventListener("click",this.vt));const i=n.querySelector(".dropdown-clear-btn");i&&(this.ft=this.handleDesktopClearClick.bind(this),i.addEventListener("click",this.ft)),this.ut=this.handleDesktopOutsideClick.bind(this),this.yt=this.handleDesktopKeyboard.bind(this),document.addEventListener("click",this.ut),document.addEventListener("keydown",this.yt)}lockDropdownScroll(){const n=`dropdown-${this.id||"anon"}-${function(n){let t=Et.get(n);return void 0===t&&(t=++St,Et.set(n,t)),t}(this)}`;this.ct=n,Un(n)}unlockDropdownScroll(){this.ct&&(Gn(this.ct),this.ct=null)}initializeOptionsState(n=!1){const t=this.getOptions().map(n=>this.getOptionData(n)),e=this.dt.currentValue;if(this.dt.filteredOptions=t,n&&e){const n=t.findIndex(n=>n.value===e);this.dt.highlightedIndex=n,0>n||this.highlightOption(t,n)}else this.dt.highlightedIndex=-1}handleStubClickBase(n,t){n.preventDefault(),n.stopPropagation(),this.R||this.et||t()}handleOptionClickBase(n,t){n.preventDefault(),n.stopPropagation();const e=n.target.closest("option, ty-option, ty-tag");e&&(this.selectOption(e,n),this.updateSelectionDisplay(),t())}handleClearClickBase(n,t){n.preventDefault(),n.stopPropagation(),this.clearSelection(),this.dt.currentValue=null,this.updateComponentValue(),this.updateSelectionDisplay(),this.dispatchEvent(new CustomEvent("change",{detail:{value:null,text:"",option:null,originalEvent:n},bubbles:!0,composed:!0})),t&&t()}calculateDesktopPosition(){const n=this.shadowRoot,t=n.querySelector(".dropdown-stub"),e=n.querySelector(".dropdown-dialog");if(!t||!e)return;const o=t.getBoundingClientRect(),i=window.innerHeight,r=window.innerWidth,s=e.getBoundingClientRect(),a=i-o.bottom>=(s.height||200)+8,l=a?o.top-20:i-o.bottom-20,d=o.width+20+20;this.style.setProperty("--dropdown-x",(o.width>r-o.left?Math.max(8,r-o.width-8):o.left-20)+"px"),this.style.setProperty("--dropdown-y",l+"px"),this.style.setProperty("--dropdown-width",d+"px"),this.style.setProperty("--dropdown-offset-x","0px"),this.style.setProperty("--dropdown-offset-y","0px"),this.style.setProperty("--dropdown-padding","20px"),a?(e.classList.add("position-below"),e.classList.remove("position-above")):(e.classList.add("position-above"),e.classList.remove("position-below")),this.style.setProperty("--dropdown-direction",a?"below":"above")}openDesktopDropdown(){const n=this.shadowRoot,t=n.querySelector(".dropdown-dialog");if(!t)return;this.lockDropdownScroll(),t.showModal(),t.classList.add("open"),this.calculateDesktopPosition(),this.dt.open=!0;const e=n.querySelector(".dropdown-chevron");e&&e.classList.add("open");const o=n.querySelector(".dropdown-search-chevron");o&&o.classList.add("open"),this.initializeOptionsState(!0);const i=n.querySelector(".dropdown-search-input");i&&setTimeout(()=>i.focus(),100),this.St(),this.updateClearButton(),this.fireOpenEvent()}closeDesktopDropdown(){const n=this.shadowRoot,t=n.querySelector(".dropdown-dialog");if(!t)return;this.unlockDropdownScroll(),this.Ct(),t.classList.remove("open"),t.classList.remove("position-above"),t.classList.remove("position-below"),t.close(),this.dt.open=!1,this.dt.highlightedIndex=-1;const e=n.querySelector(".dropdown-chevron");e&&e.classList.remove("open");const o=n.querySelector(".dropdown-search-chevron");o&&o.classList.remove("open"),this.it&&(this.dt.search=""),this.updateClearButton(),this.fireCloseEvent()}handleDesktopOutsideClick(n){if(!this.dt.open)return;const t=n.target,e=this.shadowRoot.querySelector(".dropdown-wrapper");e&&e.contains(t)||this.closeDesktopDropdown()}handleSearchInput(n){const t=n.target.value;if(this.dt.search=t,this.it)this.dispatchSearchEvent(t,n);else{const n=this.getOptions().map(n=>this.getOptionData(n)),e=this.filterOptions(n,t);this.dt.filteredOptions=e,this.dt.highlightedIndex=-1,this.updateOptionVisibility(e,n),this.clearHighlights(n)}}blockSearchClick(n){n.stopPropagation(),n.preventDefault()}dispatchSearchEvent(n,t){null!==this.xt&&(clearTimeout(this.xt),this.xt=null),this.wt>0?this.xt=window.setTimeout(()=>{this.fireSearchEvent(n,t),this.xt=null},this.wt):this.fireSearchEvent(n,t)}fireSearchEvent(n,t){this.dispatchEvent(new CustomEvent("search",{detail:{query:n,originalEvent:t||null},bubbles:!0,composed:!0}))}fireOpenEvent(){this.dispatchEvent(new CustomEvent("open",{detail:{mode:this.dt.mode},bubbles:!0,composed:!0})),this.it&&this.fireSearchEvent("")}fireCloseEvent(){this.dispatchEvent(new CustomEvent("close",{detail:{mode:this.dt.mode},bubbles:!0,composed:!0}))}handleDesktopKeyboard(n){if(!this.dt.open)return;const t=this.shadowRoot.querySelector(".dropdown-search-input");if(n.target!==t&&document.activeElement===t)return;const e=this.dt.filteredOptions,o=e.length,i=this.dt.highlightedIndex;switch(n.key){case"Escape":n.preventDefault(),n.stopPropagation(),this.closeDesktopDropdown();break;case"Enter":n.preventDefault(),n.stopPropagation(),i>=0&&o>i&&(this.selectOption(e[i].element,n),this.updateSelectionDisplay(),this.closeDesktopDropdown());break;case"ArrowUp":let t;n.preventDefault(),n.stopPropagation(),t=0===o?-1:-1===i||0===i?o-1:i-1,this.dt.highlightedIndex=t,this.highlightOption(e,t);break;case"ArrowDown":let r;n.preventDefault(),n.stopPropagation(),r=0===o?-1:-1===i||i===o-1?0:i+1,this.dt.highlightedIndex=r,this.highlightOption(e,r)}}handleDesktopStubClick(n){this.handleStubClickBase(n,()=>this.openDesktopDropdown())}handleDesktopOptionClick(n){this.handleOptionClickBase(n,()=>this.closeDesktopDropdown())}handleDesktopClearClick(n){this.handleClearClickBase(n)}St(){if(!vn())return;const n=this.shadowRoot,t=n.querySelector(".dropdown-options"),e=n.querySelector(".dropdown-options-wrapper");t&&e&&(this.Ct(),t.classList.add("ty-custom-scroll"),this.kt=new mn(t,{vertical:!0}),this.kt.trackY&&e.appendChild(this.kt.trackY))}Ct(){this.kt&&(this.kt.trackY?.remove(),this.kt.destroy(),this.kt=null)}buildStubClasses(){const n=[this.lt];return this.R&&n.push("disabled"),this.rt&&n.push("clearable"),n.join(" ")}renderDesktop(){const n=this.shadowRoot;if(!n.querySelector(".dropdown-container")){const t=this.buildStubClasses();n.innerHTML=`\n <div class="dropdown-container dropdown-mode-desktop">\n ${this.tt?`\n <label class="dropdown-label">\n ${this.tt}\n ${this.ot?`<span class="required-icon">${Tt}</span>`:""}\n </label>\n `:""}\n <div class="dropdown-wrapper">\n <div class="dropdown-stub ${t}"\n ${this.R?"disabled":""}>\n <slot name="start"></slot>\n <slot name="selected"></slot>\n <span class="dropdown-placeholder">${this.nt}</span>\n <button class="dropdown-clear-btn" type="button" aria-label="Clear selection">\n <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2">\n <path d="M6 6L14 14M14 6L6 14" stroke-linecap="round" />\n</svg>\n </button>\n <div class="dropdown-chevron">\n ${Mt}\n </div>\n </div>\n <dialog class="dropdown-dialog">\n <div class="dropdown-header">\n <input \n class="dropdown-search-input ${this.lt}" \n type="text"\n placeholder="${this.nt}"\n ${this.R?"disabled":""}\n />\n <div class="dropdown-search-chevron">\n ${Mt}\n </div>\n </div>\n <div class="dropdown-options-wrapper">\n <div class="dropdown-options">\n <slot id="options-slot"></slot>\n </div>\n <div class="dropdown-loading" aria-hidden="true">\n <slot name="loading">\n <span class="dropdown-loading-spinner"></span>\n <span class="dropdown-loading-text">Searching…</span>\n </slot>\n </div>\n </div>\n </dialog>\n </div>\n </div>\n `,this.setupDesktopEventListeners()}const t=n.querySelector(".dropdown-label"),e=n.querySelector(".dropdown-container"),o=n.querySelector(".dropdown-wrapper");if(this.tt){if(t)t.innerHTML=this.tt+(this.ot?'<span class="required-icon">'+Tt+"</span>":""),t.style.display="flex";else if(e&&o){const n=document.createElement("label");n.className="dropdown-label",n.innerHTML=this.tt+(this.ot?'<span class="required-icon">'+Tt+"</span>":""),e.insertBefore(n,o)}}else t&&(t.style.display="none");this.updateSelectionDisplay()}renderMobile(){const n=this.shadowRoot;if(!n.querySelector(".dropdown-container")){const t=this.buildStubClasses();n.innerHTML=`\n <div class="dropdown-container dropdown-mode-mobile">\n ${this.tt?`\n <label class="dropdown-label">\n ${this.tt}\n ${this.ot?`<span class="required-icon">${Tt}</span>`:""}\n </label>\n `:""}\n <div class="dropdown-wrapper">\n <div class="dropdown-stub ${t}"\n ${this.R?"disabled":""}>\n <slot name="start"></slot>\n <slot name="selected"></slot>\n <span class="dropdown-placeholder">${this.nt}</span>\n <div class="dropdown-chevron">\n ${Mt}\n </div>\n </div>\n <dialog class="mobile-dialog">\n <div class="mobile-dialog-content">\n \n <div class="mobile-search-header">\n ${this.tt?`<span class="mobile-header-label">${this.tt}</span>`:""}\n <div class="mobile-header-content">\n <input\n class="mobile-search-input ${this.lt}"\n type="text"\n placeholder="${this.tt?`Search ${this.tt}...`:"Search..."}"\n ${this.R?"disabled":""}\n />\n <button class="mobile-close-button" type="button" aria-label="Close">\n <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">\n <line x1="18" y1="6" x2="6" y2="18"></line>\n <line x1="6" y1="6" x2="18" y2="18"></line>\n </svg>\n </button>\n </div>\n </div>\n \n <div class="mobile-options-container dropdown-options-wrapper">\n <slot id="options-slot"></slot>\n <div class="dropdown-loading" aria-hidden="true">\n <slot name="loading">\n <span class="dropdown-loading-spinner"></span>\n <span class="dropdown-loading-text">Searching…</span>\n </slot>\n </div>\n </div>\n </div>\n </dialog>\n </div>\n </div>\n `,this.setupMobileEventListeners()}this.updateSelectionDisplay()}setupMobileEventListeners(){const n=this.shadowRoot,t=n.querySelector(".dropdown-stub"),e=n.querySelector("#options-slot"),o=n.querySelector(".mobile-search-input"),i=n.querySelector(".mobile-close-button"),r=n.querySelector(".mobile-dialog");t&&t.addEventListener("click",n=>this.handleMobileStubClick(n)),e&&e.addEventListener("click",n=>this.handleMobileOptionClick(n)),o&&o.addEventListener("input",n=>this.handleSearchInput(n)),i&&i.addEventListener("click",()=>this.closeMobileModal()),e&&e.addEventListener("clear-selection",n=>{n.preventDefault(),n.stopPropagation(),this.handleMobileClearClick(n)}),r&&(r.addEventListener("click",n=>{n.target===r&&this.closeMobileModal()}),r.addEventListener("cancel",n=>{n.preventDefault(),this.closeMobileModal()}))}handleMobileStubClick(n){this.handleStubClickBase(n,()=>this.openMobileModal())}handleMobileOptionClick(n){this.handleOptionClickBase(n,()=>this.closeMobileModal())}handleMobileClearClick(n){this.handleClearClickBase(n,()=>this.closeMobileModal())}openMobileModal(){const n=this.shadowRoot,t=n.querySelector(".mobile-dialog");if(!t)return;this.lockDropdownScroll(),t.showModal(),requestAnimationFrame(()=>{t.classList.add("open")}),this.dt.open=!0,this.initializeOptionsState(!1);const e=n.querySelector(".mobile-search-input");e&&setTimeout(()=>e.focus(),300),this.updateClearButton(),this.fireOpenEvent()}closeMobileModal(){const n=this.shadowRoot,t=n.querySelector(".mobile-dialog");if(!t)return;this.unlockDropdownScroll(),t.classList.remove("open"),t.close(),this.dt.open=!1,this.dt.highlightedIndex=-1,this.dt.search="",this.dt.filteredOptions=[];const e=n.querySelector(".mobile-search-input");e&&(e.value=""),this.it||this.getOptions().map(n=>this.getOptionData(n)).forEach(({element:n})=>n.removeAttribute("hidden")),this.updateClearButton(),this.fireCloseEvent()}get value(){return this.getProperty("value")}set value(n){this.setProperty("value",n)}get name(){return this.getProperty("name")}set name(n){this.setProperty("name",n)}get placeholder(){return this.getProperty("placeholder")}set placeholder(n){this.setProperty("placeholder",n)}get label(){return this.getProperty("label")}set label(n){this.setProperty("label",n)}get disabled(){return this.getProperty("disabled")}set disabled(n){this.setProperty("disabled",n)}get readonly(){return this.getProperty("readonly")}set readonly(n){this.setProperty("readonly",n)}get required(){return this.getProperty("required")}set required(n){this.setProperty("required",n)}get externalSearch(){return this.getProperty("externalSearch")}set externalSearch(n){this.setProperty("externalSearch",n)}get clearable(){return this.getProperty("clearable")}set clearable(n){this.setProperty("clearable",n)}get loading(){return this.getProperty("loading")}set loading(n){this.setProperty("loading",n)}get size(){return this.getProperty("size")}set size(n){this.setProperty("size",n)}get flavor(){return this.getProperty("flavor")}set flavor(n){this.setProperty("flavor",n)}get debounce(){return this.getProperty("debounce")}set debounce(n){this.setProperty("debounce",n)}get form(){return this.m.form}};Dt.properties={value:{type:"string",visual:!0,formValue:!0,emitChange:!0,default:""},name:{type:"string",default:""},placeholder:{type:"string",visual:!0,default:"Select an option..."},label:{type:"string",visual:!0,default:""},disabled:{type:"boolean",visual:!0,default:!1},readonly:{type:"boolean",visual:!0,default:!1},required:{type:"boolean",visual:!0,default:!1},externalSearch:{type:"boolean",visual:!0,default:!1,aliases:{"external-search":!0}},clearable:{type:"boolean",visual:!0,default:!0,aliases:{"not-clearable":!1}},size:{type:"string",visual:!0,default:"md",validate:n=>["xs","sm","md","lg","xl"].includes(n),coerce:n=>["xs","sm","md","lg","xl"].includes(n)?n:"md"},flavor:{type:"string",visual:!0,default:"neutral",validate:n=>["primary","secondary","success","danger","warning","neutral"].includes(n),coerce:n=>["primary","secondary","success","danger","warning","neutral"].includes(n)?n:"neutral"},debounce:{type:"number",default:0,validate:n=>n>=0&&5e3>=n,coerce:n=>{const t=+n;return isNaN(t)?0:Math.max(0,Math.min(5e3,t))}},loading:{type:"boolean",visual:!0,default:!1}};let $t=Dt;customElements.get("ty-dropdown")||customElements.define("ty-dropdown",$t);const At=`\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 - Labels, not buttons ===== */\n\n.dropdown-mode-mobile .section-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 36px;\n flex-shrink: 0;\n padding: 0 16px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.06em;\n color: var(--ty-text-mild);\n background: transparent;\n cursor: default;\n user-select: none;\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: 500;\n color: var(--ty-text-faint);\n margin-left: 0.25rem;\n}\n\n/* ===== SELECTED STRIP - pinned, capped height, collapses when empty ===== */\n\n.dropdown-mode-mobile .mobile-selected-section {\n display: flex;\n flex-direction: column;\n background: var(--ty-input-bg);\n overflow: hidden;\n flex: 0 0 auto;\n max-height: 40%;\n transition: max-height 200ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Empty: collapse to header only */\n.dropdown-mode-mobile .mobile-selected-section[data-empty="true"] {\n max-height: 36px;\n flex: 0 0 36px;\n}\n\n.dropdown-mode-mobile .mobile-selected-section .section-content {\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n overscroll-behavior: contain;\n padding: 0.75rem 1rem;\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n align-content: flex-start;\n /* Soft fade at bottom edge — hints at scrollable overflow */\n -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 12px), transparent);\n mask-image: linear-gradient(to bottom, black calc(100% - 12px), transparent);\n}\n\n/* ===== AVAILABLE LIST - takes remaining space ===== */\n\n.dropdown-mode-mobile .mobile-available-section {\n display: flex;\n flex-direction: column;\n background: var(--ty-input-bg);\n overflow: hidden;\n flex: 1 1 auto;\n min-height: 0;\n}\n\n.dropdown-mode-mobile .mobile-available-section .section-content {\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n overscroll-behavior: contain;\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 Selected strip collapses (no text needed).\n Available shows the empty message only when there are zero tags total. */\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.dropdown-mode-mobile .mobile-available-section[data-empty="true"] .empty-state {\n display: block;\n}\n\n.dropdown-mode-mobile .mobile-selected-section[data-empty="true"] .section-content,\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 /* Fade + scale entry — replays on each (re)insertion when a tag moves\n between selected and available slots */\n animation: ty-multiselect-tag-enter 180ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n@media (hover: hover) {\n .dropdown-mode-mobile .section-content ::slotted(ty-tag:hover) {\n transform: scale(1.02);\n }\n}\n\n.dropdown-mode-mobile .section-content ::slotted(ty-tag:active) {\n transform: scale(0.96);\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@keyframes ty-multiselect-tag-enter {\n from { opacity: 0; transform: scale(0.85); }\n to { opacity: 1; transform: scale(1); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .dropdown-mode-mobile .section-content ::slotted(ty-tag) {\n animation: none;\n }\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-soft);\n font-size: var(--ty-font-sm);\n min-height: 4rem;\n /* Match the .dropdown-options popup look — same background, border, radius, shadow */\n background: var(--ty-loader-bg, var(--input-bg, var(--ty-input-bg)));\n border: 1px solid var(--ty-loader-border, var(--input-border, var(--ty-input-border)));\n border-radius: var(--ty-loader-radius, var(--ty-radius-lg));\n box-shadow: var(--ty-loader-shadow, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04));\n box-sizing: border-box;\n}\n\n.dropdown-options-wrapper.loading .dropdown-loading {\n display: flex;\n}\n\n/* Slot is transparent for layout — fallback (spinner + text) and user-provided\n slotted content both act as direct flex children of .dropdown-loading. */\n.dropdown-loading > slot[name="loading"] {\n display: contents;\n}\n\n/* Mobile: full-screen dialog is the surface — drop the card chrome,\n stack vertically, scale up so it feels native to a fullscreen view.\n Slotted content adapts automatically since the slot is display:contents. */\n.dropdown-mode-mobile .dropdown-loading {\n background: transparent;\n border: none;\n box-shadow: none;\n flex: 1;\n flex-direction: column;\n gap: var(--ty-spacing-3);\n padding: var(--ty-spacing-8) var(--ty-spacing-4);\n min-height: 12rem;\n}\n\n.dropdown-mode-mobile .dropdown-loading-spinner {\n width: 2rem;\n height: 2rem;\n}\n\n.dropdown-mode-mobile .dropdown-loading-text {\n font-size: var(--ty-font-base);\n}\n\n.dropdown-options-wrapper.loading .dropdown-options,\n.dropdown-options-wrapper.loading > slot#options-slot,\n.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-soft);\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${yn}\n`;let It=0;const Ot=new WeakMap;function Lt(n){let t=Ot.get(n);return void 0===t&&(t=++It,Ot.set(n,t)),t}const Nt='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-asterisk"><path d="M12 6v12"/><path d="M17.196 9 6.804 15"/><path d="m6.804 9 10.392 6"/></svg>',qt='<svg viewBox="0 0 20 20" fill="currentColor">\n <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />\n</svg>',Rt=class extends o{constructor(){super(),this.Et="",this.nt="Select options...",this.tt="",this.R=!1,this.et=!1,this.ot=!1,this.it=!1,this.st=!1,this.ct=null,this.lt="md",this.Tt="Selected",this.Mt="Available",this.Dt="No options available",this.dt={open:!1,search:"",highlightedIndex:-1,filteredTags:[],selectedValues:[],mode:"desktop"},this.ht=null,this.$t=null,this.At=null,this.bt=null,this.vt=null,this.yt=null,this.wt=0,this.xt=null,this.kt=null,this.zt=null,r(this.shadowRoot,{css:At,id:"ty-multiselect"})}onConnect(){this.shadowRoot.querySelectorAll("dialog").forEach(n=>{n.open&&n.close()}),this.render(),requestAnimationFrame(()=>{this.initializeState()}),this.zt=new MutationObserver(()=>{this.dt.selectedValues.length>0&&this.syncSelectedTags(this.dt.selectedValues)}),this.zt.observe(this,{childList:!0})}onDisconnect(){this.shadowRoot.querySelectorAll("dialog").forEach(n=>{n.open&&n.close()}),this.yt&&(document.removeEventListener("keydown",this.yt),this.yt=null),null!==this.xt&&(clearTimeout(this.xt),this.xt=null),this.Ct(),this.zt&&(this.zt.disconnect(),this.zt=null)}onPropertiesChanged(n){for(const{name:t,newValue:e}of n)switch(t){case"value":const n=this.parseValue(e);this.dt.selectedValues=n,this.isConnected&&this.shadowRoot&&(this.syncSelectedTags(n),this.updateSelectionDisplay(),this.updateMobileSelectedState());break;case"name":this.Et=e||"";break;case"placeholder":this.nt=e||"Select options...";break;case"label":this.tt=e||"";break;case"disabled":this.R=e;break;case"readonly":this.et=e;break;case"required":this.ot=e;break;case"externalSearch":this.it=e;break;case"size":this.lt=e;break;case"debounce":this.wt=e;break;case"selected-label":this.Tt=e||"Selected";break;case"available-label":this.Mt=e||"Available";break;case"no-options-message":this.Dt=e||"No options available";break;case"loading":this.st=e,this.applyLoadingState()}}applyLoadingState(){const n=this.shadowRoot;if(!n)return;const t=this.st?l():null;n.querySelectorAll(".dropdown-options-wrapper").forEach(n=>{if(n.classList.toggle("loading",this.st),this.st){n.setAttribute("aria-busy","true");const e=n.querySelector(".dropdown-loading-spinner");e&&t&&(e.innerHTML=t)}else n.removeAttribute("aria-busy")})}getFormValue(){const n=this.dt.selectedValues;if(this.Et&&n.length>0){const t=new FormData;return n.forEach(n=>{t.append(this.Et,n)}),t}return null}parseValue(n){return n&&"string"==typeof n&&""!==n.trim()?n.split(",").map(n=>n.trim()).filter(n=>""!==n):[]}initializeState(){const n=this.getProperty("value")||"";if(n){const t=this.parseValue(n);this.dt.selectedValues=t,this.syncSelectedTags(t),this.updateSelectionDisplay(),this.updateMobileSelectedState()}else{const n=this.getTagElements().filter(n=>n.hasAttribute("selected")).map(n=>this.getTagData(n).value);n.length>0&&this.updateComponentValue(n,!1)}}getTagElements(){return Array.from(this.querySelectorAll("ty-tag"))}getTagData(n){return{value:n.value||n.getAttribute("value")||n.textContent||"",text:n.textContent||"",element:n}}selectTag(n){this.getTagData(n),n.setAttribute("selected",""),n.setAttribute("slot","selected"),n.setAttribute("dismissible","true");const t=n.parentNode;t&&(t.removeChild(n),t.appendChild(n))}deselectTag(n){n.removeAttribute("selected"),n.removeAttribute("slot"),n.removeAttribute("dismissible");const t=n.parentNode;t&&(t.removeChild(n),t.appendChild(n))}getSelectedValues(){return this.getTagElements().filter(n=>n.hasAttribute("selected")).map(n=>this.getTagData(n).value).filter(n=>""!==n)}allTagsSelected(){const n=this.getTagElements();return 0!==n.length&&n.filter(n=>n.hasAttribute("selected")).length===n.length}syncSelectedTags(n){const t=new Set(n);this.getTagElements().forEach(n=>{const e=this.getTagData(n).value,o=t.has(e),i=n.hasAttribute("selected");o&&!i?this.selectTag(n):!o&&i&&this.deselectTag(n)})}updateComponentValue(n,t=!1,e="set",o=null){const i=this.getSelectedValues(),r=n.join(",");JSON.stringify(n.sort())!==JSON.stringify(i.sort())&&(this.setProperty("value",r),t&&this.dispatchChangeEvent({values:n,action:e,item:o}))}calculatePosition(){const n=this.shadowRoot,t=n.querySelector(".multiselect-stub"),e=n.querySelector(".dropdown-dialog");if(!t||!e)return;const o=t.getBoundingClientRect(),i=window.innerHeight,r=window.innerWidth,s=e.getBoundingClientRect(),a=i-o.bottom>=(s.height||200)+8,l=a?o.top-20:i-o.bottom-20,d=o.width+20+20;this.style.setProperty("--dropdown-x",(o.width>r-o.left?Math.max(8,r-o.width-8):o.left-20)+"px"),this.style.setProperty("--dropdown-y",l+"px"),this.style.setProperty("--dropdown-width",d+"px"),this.style.setProperty("--dropdown-offset-x","0px"),this.style.setProperty("--dropdown-offset-y","0px"),this.style.setProperty("--dropdown-padding","20px"),a?(e.classList.add("position-below"),e.classList.remove("position-above")):(e.classList.add("position-above"),e.classList.remove("position-below")),this.style.setProperty("--dropdown-direction",a?"below":"above")}St(){if(!vn())return;const n=this.shadowRoot,t=n.querySelector(".dropdown-options"),e=n.querySelector(".dropdown-options-wrapper");t&&e&&(this.Ct(),t.classList.add("ty-custom-scroll"),this.kt=new mn(t,{vertical:!0}),this.kt.trackY&&e.appendChild(this.kt.trackY))}Ct(){this.kt&&(this.kt.trackY?.remove(),this.kt.destroy(),this.kt=null)}openDropdown(){const n=this.shadowRoot,t=n.querySelector(".dropdown-dialog");if(!t)return;const e=`multiselect-${this.id||"anon"}-${Lt(this)}`;this.ct=e,Un(e),t.showModal(),t.classList.add("open"),this.calculatePosition(),this.dt.open=!0;const o=n.querySelector(".dropdown-chevron");o&&o.classList.add("open");const i=n.querySelector(".dropdown-search-chevron");i&&i.classList.add("open");const r=this.getTagElements().map(n=>this.getTagData(n));this.dt.filteredTags=r,this.dt.highlightedIndex=-1,this.updateOptionsVisibility(!0),this.St();const s=n.querySelector(".dropdown-search-input");s&&setTimeout(()=>s.focus(),100),this.fireOpenEvent()}closeDropdown(){const n=this.shadowRoot,t=n.querySelector(".dropdown-dialog");if(!t)return;this.Ct(),t.classList.remove("open"),t.classList.remove("position-above"),t.classList.remove("position-below"),t.close(),this.ct&&(Gn(this.ct),this.ct=null),this.dt.open=!1,this.dt.highlightedIndex=-1;const e=n.querySelector(".dropdown-chevron");e&&e.classList.remove("open");const o=n.querySelector(".dropdown-search-chevron");o&&o.classList.remove("open");const i=""!==this.dt.search;this.dt.search="";const r=n.querySelector(".dropdown-search-input");if(r&&(r.value=""),this.it)i&&(null!==this.xt&&(clearTimeout(this.xt),this.xt=null),this.fireSearchEvent(""));else{const n=this.getTagElements().map(n=>this.getTagData(n));this.dt.filteredTags=n,this.updateTagVisibility(n,n),this.clearHighlights(n)}this.fireCloseEvent()}openMobileModal(){const n=this.shadowRoot,t=n.querySelector(".mobile-dialog");if(!t)return;const e=`multiselect-${this.id||"anon"}-${Lt(this)}`;this.ct=e,Un(e),t.showModal(),t.classList.add("open");const o=n.querySelector("#stub-slot"),i=n.querySelector("#mobile-slot");o.name="selected-blocked",i.name="selected",this.dt.open=!0;const r=this.getTagElements().map(n=>this.getTagData(n));this.dt.filteredTags=r;const s=n.querySelector(".mobile-search-input");s&&setTimeout(()=>s.focus(),100),requestAnimationFrame(()=>{this.updateMobileSelectedState()}),this.fireOpenEvent()}closeMobileModal(){const n=this.shadowRoot,t=n.querySelector(".mobile-dialog");if(!t)return;t.classList.remove("open"),t.close(),this.ct&&(Gn(this.ct),this.ct=null);const e=n.querySelector("#stub-slot"),o=n.querySelector("#mobile-slot");e.name="selected",o.name="selected-blocked",this.dt.open=!1,this.dt.highlightedIndex=-1;const i=""!==this.dt.search;this.dt.search="";const r=n.querySelector(".mobile-search-input");r&&(r.value=""),this.it?i&&(null!==this.xt&&(clearTimeout(this.xt),this.xt=null),this.fireSearchEvent("")):this.getTagElements().forEach(n=>n.removeAttribute("hidden")),this.fireCloseEvent()}handleStubClick(n){n.preventDefault(),n.stopPropagation(),this.R||this.et||this.allTagsSelected()||this.openDropdown()}handleTagClick(n){const t=n.target,e="TY-TAG"===t.tagName?t:t.closest("ty-tag");if(!e||e.hasAttribute("disabled"))return;if(e.hasAttribute("selected"))return;n.preventDefault(),n.stopPropagation();const o=this.getTagData(e).value,i=[...this.getSelectedValues(),o];this.updateComponentValue(i,!0,"add",o),this.allTagsSelected()&&("desktop"===this.dt.mode?this.closeDropdown():this.closeMobileModal())}handleTagDismiss(n){n.preventDefault(),n.stopPropagation();const t=n,e=t.detail?.target;if(!e)return;const o=this.getTagData(e).value,i=this.getSelectedValues().filter(n=>n!==o);this.updateComponentValue(i,!0,"remove",o)}blockSearchClick(n){n.stopPropagation(),n.preventDefault()}handleSearchInput(n){const t=n.target.value;if(this.dt.search=t,this.it)return void this.dispatchSearchEvent(t);const e=this.getTagElements().map(n=>this.getTagData(n)),o=e.filter(n=>!n.element.hasAttribute("selected")),i=this.filterTags(o,t);this.dt.filteredTags=i,this.dt.highlightedIndex=-1,this.updateTagVisibility(i,e),this.updateOptionsVisibility(i.length>0),this.updateMobileSelectedState(),this.clearHighlights(e)}handleKeyboard(n){if(!this.dt.open)return;const t=this.shadowRoot.querySelector(".dropdown-search-input");if(n.target!==t&&document.activeElement===t)return;const e=this.dt.filteredTags,o=e.length,i=this.dt.highlightedIndex;switch(n.key){case"Escape":n.preventDefault(),n.stopPropagation(),this.closeDropdown();break;case"Enter":n.preventDefault(),n.stopPropagation(),i>=0&&o>i&&this.handleTagClick({target:e[i].element});break;case"ArrowUp":let t;n.preventDefault(),n.stopPropagation(),t=0===o?-1:-1===i||0===i?o-1:i-1,this.dt.highlightedIndex=t,this.highlightTag(e,t);break;case"ArrowDown":let r;n.preventDefault(),n.stopPropagation(),r=0===o?-1:-1===i||i===o-1?0:i+1,this.dt.highlightedIndex=r,this.highlightTag(e,r)}}filterTags(n,t){if(!t||""===t.trim())return n;const e=t.toLowerCase();return n.filter(({text:n})=>n.toLowerCase().includes(e))}updateTagVisibility(n,t){const e=new Set(n.map(n=>n.value));t.forEach(({value:n,element:t})=>{e.has(n)?t.removeAttribute("hidden"):t.setAttribute("hidden","")})}updateOptionsVisibility(n){const t=this.shadowRoot.querySelector(".dropdown-options");t&&(t.style.display=n?"":"none")}clearHighlights(n){n.forEach(({element:n})=>{n.removeAttribute("highlighted")})}highlightTag(n,t){if(this.clearHighlights(n),t>=0&&n.length>t){const{element:e}=n[t];e.setAttribute("highlighted",""),e.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"})}}dispatchSearchEvent(n){null!==this.xt&&(clearTimeout(this.xt),this.xt=null),this.wt>0?this.xt=window.setTimeout(()=>{this.fireSearchEvent(n),this.xt=null},this.wt):this.fireSearchEvent(n)}fireSearchEvent(n){this.dispatchEvent(new CustomEvent("search",{detail:{query:n,element:this},bubbles:!0,composed:!0}))}fireOpenEvent(){this.dispatchEvent(new CustomEvent("open",{detail:{mode:this.dt.mode,element:this},bubbles:!0,composed:!0})),this.it&&this.fireSearchEvent("")}fireCloseEvent(){this.dispatchEvent(new CustomEvent("close",{detail:{mode:this.dt.mode,element:this},bubbles:!0,composed:!0}))}dispatchChangeEvent(n){this.dispatchEvent(new CustomEvent("change",{detail:n,bubbles:!0,cancelable:!0}))}render(){this.dt.mode=B()?"mobile":"desktop","mobile"===this.dt.mode?this.renderMobile():this.renderDesktop(),this.applyLoadingState()}setupEventListeners(){const n=this.shadowRoot,t=n.querySelector(".multiselect-stub"),e=n.querySelector("#options-slot"),o=n.querySelector(".dropdown-search-input");t&&(this.ht=this.handleStubClick.bind(this),t.addEventListener("click",this.ht)),e&&(this.$t=this.handleTagClick.bind(this),e.addEventListener("click",this.$t)),o&&(this.bt=this.handleSearchInput.bind(this),this.vt=this.blockSearchClick.bind(this),o.addEventListener("input",this.bt),o.addEventListener("click",this.vt));const i=n.querySelector(".dropdown-dialog");i&&i.addEventListener("click",n=>{n.target===i&&this.closeDropdown()}),this.yt=this.handleKeyboard.bind(this),document.addEventListener("keydown",this.yt),this.At=this.handleTagDismiss.bind(this),this.addEventListener("dismiss",this.At)}buildStubClasses(){const n=[this.lt];return this.R&&n.push("disabled"),n.join(" ")}renderDesktop(){const n=this.shadowRoot;if(!n.querySelector(".multiselect-container")){const t=this.buildStubClasses();n.innerHTML=`\n <div class="multiselect-container dropdown-mode-desktop">\n ${this.tt?`\n <label class="dropdown-label">\n ${this.tt}\n ${this.ot?`<span class="required-icon">${Nt}</span>`:""}\n </label>\n `:""}\n <div class="dropdown-wrapper">\n <div class="dropdown-stub multiselect-stub ${t}"\n ${this.R?"disabled":""}>\n <slot name="start"></slot>\n <div class="multiselect-chips">\n <slot name="selected"></slot>\n </div>\n <span class="dropdown-placeholder">${this.nt}</span>\n <div class="dropdown-chevron">\n ${qt}\n </div>\n </div>\n <dialog class="dropdown-dialog">\n <div class="dropdown-header">\n <input \n class="dropdown-search-input ${this.lt}" \n type="text"\n placeholder="Search..."\n ${this.R?"disabled":""}\n />\n <div class="dropdown-search-chevron">\n ${qt}\n </div>\n </div>\n <div class="dropdown-options-wrapper">\n <div class="dropdown-options">\n <slot id="options-slot"></slot>\n </div>\n <div class="dropdown-loading" aria-hidden="true">\n <slot name="loading">\n <span class="dropdown-loading-spinner"></span>\n <span class="dropdown-loading-text">Searching…</span>\n </slot>\n </div>\n </div>\n </dialog>\n </div>\n </div>\n `,this.setupEventListeners()}this.updateSelectionDisplay()}renderMobile(){const n=this.shadowRoot;if(!n.querySelector(".multiselect-container")){const t=this.buildStubClasses();n.innerHTML=`\n <div class="multiselect-container dropdown-mode-mobile">\n ${this.tt?`\n <label class="dropdown-label">\n ${this.tt}\n ${this.ot?`<span class="required-icon">${Nt}</span>`:""}\n </label>\n `:""}\n <div class="dropdown-wrapper">\n <div class="dropdown-stub multiselect-stub ${t}"\n ${this.R?"disabled":""}>\n <slot name="start"></slot>\n <div class="multiselect-chips">\n <slot id="stub-slot" name="selected"></slot>\n </div>\n <span class="dropdown-placeholder">${this.nt}</span>\n <div class="dropdown-chevron">\n ${qt}\n </div>\n </div>\n\n <dialog class="mobile-dialog">\n <div class="mobile-dialog-content">\n \n \x3c!-- HEADER (matches dropdown.ts) --\x3e\n \n <div class="mobile-search-header">\n ${this.tt?`<span class="mobile-header-label">${this.tt}</span>`:""}\n <div class="mobile-header-content">\n <input\n class="mobile-search-input ${this.lt}"\n type="text"\n placeholder="${this.tt?`Search ${this.tt}...`:"Search..."}"\n ${this.R?"disabled":""}\n />\n <button class="mobile-close-button" type="button" aria-label="Close">\n <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">\n <line x1="18" y1="6" x2="6" y2="18"></line>\n <line x1="6" y1="6" x2="18" y2="18"></line>\n </svg>\n </button>\n </div>\n </div>\n \n \n \x3c!-- BODY: pinned selected strip + filter list --\x3e\n <div class="mobile-body">\n\n \x3c!-- SELECTED STRIP (pinned, collapses when empty) --\x3e\n <div class="mobile-selected-section" data-empty="true">\n <div class="section-header">\n <span class="section-title">${this.Tt} <span class="section-count">(0)</span></span>\n </div>\n <div class="section-content">\n <slot id="mobile-slot" name="selected"></slot>\n </div>\n </div>\n\n \x3c!-- AVAILABLE LIST (always visible, takes remaining space) --\x3e\n <div class="mobile-available-section" data-empty="false">\n <div class="section-header">\n <span class="section-title">${this.Mt}</span>\n </div>\n <div class="section-content dropdown-options-wrapper">\n <slot id="options-slot"></slot>\n <div class="empty-state">${this.Dt}</div>\n <div class="dropdown-loading" aria-hidden="true">\n <slot name="loading">\n <span class="dropdown-loading-spinner"></span>\n <span class="dropdown-loading-text">Searching…</span>\n </slot>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </dialog>\n </div>\n </div>\n `,this.setupMobileEventListeners()}this.updateSelectionDisplay()}setupMobileEventListeners(){const n=this.shadowRoot,t=n.querySelector(".multiselect-stub"),e=n.querySelector("#options-slot"),o=n.querySelector(".mobile-search-input"),i=n.querySelector(".mobile-close-button"),r=n.querySelector(".mobile-dialog");t&&t.addEventListener("click",n=>this.handleMobileStubClick(n)),e&&e.addEventListener("click",n=>this.handleMobileTagClick(n)),o&&o.addEventListener("input",n=>this.handleSearchInput(n)),i&&i.addEventListener("click",()=>this.closeMobileModal()),this.At=this.handleTagDismiss.bind(this),this.addEventListener("dismiss",this.At),r&&(r.addEventListener("click",n=>{n.target===r&&this.closeMobileModal()}),r.addEventListener("cancel",n=>{n.preventDefault(),this.closeMobileModal()}))}handleMobileStubClick(n){n.preventDefault(),n.stopPropagation(),this.R||this.et||this.allTagsSelected()||this.openMobileModal()}handleMobileTagClick(n){this.handleTagClick(n)}updateMobileSelectedState(){if("mobile"!==this.dt.mode)return;const n=this.shadowRoot,t=n.querySelector(".mobile-selected-section"),e=n.querySelector(".mobile-available-section"),o=n.querySelector(".section-count");if(t){const n=this.dt.selectedValues.length;t.setAttribute("data-empty",!(n>0)+""),o&&(o.textContent=`(${n})`)}if(e){const t=this.getTagElements().filter(n=>!n.hasAttribute("selected")&&!n.hasAttribute("hidden")).length;e.setAttribute("data-empty",(0===t)+"");const o=n.querySelector(".mobile-available-section .section-title");o&&(o.textContent=`${this.Mt} (${t})`)}}updateSelectionDisplay(){const n=this.shadowRoot.querySelector(".multiselect-stub");n&&(this.getTagElements().filter(n=>n.hasAttribute("selected")).length>0?n.classList.add("has-selection"):n.classList.remove("has-selection"))}get value(){return this.getSelectedValues().join(",")}set value(n){this.setProperty("value",n)}get name(){return this.getProperty("name")}set name(n){this.setProperty("name",n)}get placeholder(){return this.getProperty("placeholder")}set placeholder(n){this.setProperty("placeholder",n)}get label(){return this.getProperty("label")}set label(n){this.setProperty("label",n)}get disabled(){return this.getProperty("disabled")}set disabled(n){this.setProperty("disabled",n)}get loading(){return this.getProperty("loading")}set loading(n){this.setProperty("loading",n)}get readonly(){return this.getProperty("readonly")}set readonly(n){this.setProperty("readonly",n)}get required(){return this.getProperty("required")}set required(n){this.setProperty("required",n)}get externalSearch(){return this.getProperty("externalSearch")}set externalSearch(n){this.setProperty("externalSearch",n)}get debounce(){return this.getProperty("debounce")}set debounce(n){this.setProperty("debounce","string"==typeof n?parseInt(n,10):n)}get size(){return this.getProperty("size")}set size(n){this.setProperty("size",n)}get flavor(){return this.getProperty("flavor")}set flavor(n){this.setProperty("flavor",n)}get form(){return this.m.form}};Rt.properties={value:{type:"string",visual:!0,formValue:!0,emitChange:!1,default:"",coerce:n=>Array.isArray(n)?n.join(","):null==n?"":n+""},name:{type:"string",default:""},placeholder:{type:"string",visual:!0,default:"Select options..."},label:{type:"string",visual:!0,default:""},disabled:{type:"boolean",visual:!0,default:!1},readonly:{type:"boolean",visual:!0,default:!1},required:{type:"boolean",visual:!0,default:!1},externalSearch:{type:"boolean",visual:!0,default:!1,aliases:{"external-search":!0}},size:{type:"string",visual:!0,default:"md",validate:n=>["sm","md","lg"].includes(n),coerce:n=>["sm","md","lg"].includes(n)?n:"md"},flavor:{type:"string",visual:!0,default:"neutral",validate:n=>["primary","secondary","success","danger","warning","neutral"].includes(n),coerce:n=>["primary","secondary","success","danger","warning","neutral"].includes(n)?n:"neutral"},debounce:{type:"number",default:0,validate:n=>n>=0&&5e3>=n,coerce:n=>{const t=+n;return isNaN(t)?0:Math.max(0,Math.min(5e3,t))}},"selected-label":{type:"string",visual:!0,default:"Selected"},"available-label":{type:"string",visual:!0,default:"Available"},"no-options-message":{type:"string",visual:!0,default:"No options available"},loading:{type:"boolean",visual:!0,default:!1}};let Pt=Rt;customElements.get("ty-multiselect")||customElements.define("ty-multiselect",Pt);const Vt=new WeakMap,Bt=new WeakMap;function Ft(n){return{width:n.getAttribute("width")||"100%",height:n.getAttribute("height")||"400px",active:n.getAttribute("active"),placement:n.getAttribute("placement")||"top"}}function Ht(n){return Array.from(n.querySelectorAll("ty-tab"))}function jt(n){return n.getAttribute("id")}function Wt(n,t){const e=jt(t);return e&&function(n,t){return null!==n.querySelector(`[slot='label-${t}']`)}(n,e)?"slot":"text"}function Yt(n){return n.hasAttribute("disabled")}function _t(n,t){const e=n.findIndex(n=>jt(n)===t);return 0>e?void 0:e}function Ut(n,t){const e=n.getAttribute("active");return e&&void 0!==_t(t,e)?e:t.length>0?jt(t[0]):null}function Gt(n){const t=Vt.get(n);if(!t)return;const e=n.shadowRoot;e&&(t.tabClickHandlers.forEach((n,t)=>{const o=e.querySelector(`[data-tab-id='${t}']`);o&&o.removeEventListener("pointerdown",n)}),t.tabClickHandlers.clear())}function Xt(n,t,e){Gt(n);const o={tabClickHandlers:new Map};e.forEach(e=>{const i=jt(e);if(!i)return;const r=t.querySelector(`[data-tab-id='${i}']`);if(r){const t=t=>function(n,t,e){e.preventDefault(),e.stopPropagation(),function(n,t){n.setAttribute("active",t)}(n,t)}(n,i,t);r.addEventListener("pointerdown",t),o.tabClickHandlers.set(i,t)}}),Vt.set(n,o)}function Kt(n,t){const e=n.shadowRoot;if(!e)return;const o=e.querySelector(".panels-wrapper");o&&(o.style.transform=`translateX(-${t*n.offsetWidth}px)`)}function Zt(n,t,e){Ht(n).forEach(o=>{const i=jt(o);if(!i)return;const r=t.querySelector(`[data-tab-id='${i}']`),s=i===e;if(r){r.setAttribute("aria-selected",s+""),r.setAttribute("tabindex",s?"0":"-1"),r.setAttribute("data-active",s+"");const t=n.querySelector(`[slot='label-${i}']`);t&&t.setAttribute("data-active",s+"")}})}function Jt(n,t){Ht(n).forEach(n=>{const e=jt(n);if(!e)return;const o=e===t;n.setAttribute("data-active",o+""),o?(n.style.pointerEvents="auto",n.style.opacity="1"):(n.style.pointerEvents="none",n.style.opacity="0")})}function Qt(n,t){const e=n.shadowRoot;if(!e)return;const o=e.querySelector(".marker-wrapper");if(!o)return;const i=function(n,t,e){const o=t.querySelector(`[data-tab-id='${e}']`),i=t.querySelector(".tab-buttons");if(!o||!i)return null;const r=o.getBoundingClientRect();return{left:o.offsetLeft,top:o.offsetTop,width:r.width,height:r.height}}(0,e,t);i&&(o.style.left=i.left+"px",o.style.top=i.top+"px",o.style.width=i.width+"px",o.style.height=i.height+"px")}function ne(n){const t=n.shadowRoot;if(!t)return;const{width:e,height:o,placement:i}=Ft(n),s=Ht(n),a=Ut(n,s),l=a?_t(s,a)??0:0,d=t.querySelector(".tabs-container"),c=t.querySelector(".tab-buttons"),h=t.querySelector(".panels-viewport");if(r(t,{css:'\n:host {\n display: block;\n width: var(--tabs-width, 100%);\n height: var(--tabs-height, 400px);\n box-sizing: border-box;\n}\n\n.tabs-container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n position: relative;\n box-sizing: border-box;\n}\n\n/* Bottom placement reverses the order */\n.tabs-container[data-placement="bottom"] {\n flex-direction: column-reverse;\n}\n\n/* ===================================== */\n/* Tab Buttons Container */\n/* Expose as CSS Part for full styling control */\n/* ===================================== */\n\n.tab-buttons {\n display: flex;\n gap: 0;\n flex-shrink: 0;\n position: relative;\n /* For absolute positioned marker */\n \n /* Default minimal styling - customize via ::part(buttons-container) */\n border-bottom: 1px solid var(--ty-border);\n background: transparent;\n}\n\n/* Bottom placement moves border to top */\n.tabs-container[data-placement="bottom"] .tab-buttons {\n border-bottom: none;\n border-top: 1px solid var(--ty-border);\n}\n\n/* ===================================== */\n/* Marker Wrapper */\n/* Expose as CSS Part for custom marker styling */\n/* ===================================== */\n\n.marker-wrapper {\n position: absolute;\n z-index: 0;\n /* Behind buttons */\n pointer-events: none;\n /* Don\'t block clicks */\n transition: left var(--transition-duration, 300ms) var(--transition-easing, ease-in-out),\n width var(--transition-duration, 300ms) var(--transition-easing, ease-in-out),\n height var(--transition-duration, 300ms) var(--transition-easing, ease-in-out),\n top var(--transition-duration, 300ms) var(--transition-easing, ease-in-out);\n}\n\n/* Default marker - simple underline */\n.default-marker {\n position: absolute;\n bottom: 0;\n left: 0;\n height: 2px;\n width: 100%;\n background: var(--ty-color-primary);\n pointer-events: none;\n}\n\n/* Hide default marker when custom marker is slotted */\n.marker-wrapper:has(::slotted([slot="marker"])) .default-marker {\n display: none;\n}\n\n/* User\'s marker element fills the wrapper */\n::slotted([slot="marker"]) {\n display: block;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n}\n\n/* ===================================== */\n/* Tab Buttons */\n/* ===================================== */\n\n.tab-button {\n min-width: 120px;\n padding: 6px 12px;\n border: none;\n background: transparent;\n cursor: pointer;\n font: inherit;\n color: var(--ty-text-soft);\n transition: color 200ms, background-color 200ms;\n white-space: nowrap;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n font-weight: var(--ty-font-bold);\n font-size: var(--ty-font-sm);\n position: relative;\n /* Establish stacking context */\n z-index: 10;\n /* Above marker */\n}\n\n.tab-button[aria-selected=true] {\n color: var(--ty-text-strong);\n}\n\n.tab-button[disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n.tab-button:focus-visible {\n outline: 2px solid var(--ty-color-primary);\n outline-offset: -2px;\n}\n\n/* ===================================== */\n/* Panels Viewport */\n/* Expose as CSS Part for panels container styling */\n/* ===================================== */\n\n.panels-viewport {\n position: relative;\n flex: 1;\n overflow: hidden;\n /* Critical: hides off-screen panels */\n min-height: 0;\n /* Allows flex child to shrink */\n}\n\n/* ===================================== */\n/* Panels Wrapper (slides horizontally) */\n/* ===================================== */\n\n.panels-wrapper {\n display: flex;\n height: 100%;\n transition: transform var(--transition-duration, 300ms) var(--transition-easing, ease-in-out);\n}\n\n/* Respect user\'s motion preferences */\n@media (prefers-reduced-motion: reduce) {\n .panels-wrapper {\n transition-duration: 0ms !important;\n }\n\n .marker-wrapper {\n transition-duration: 0ms !important;\n }\n}\n\n/* ===================================== */\n/* Slotted Tab Panels */\n/* ===================================== */\n\n::slotted(ty-tab) {\n width: var(--tabs-width, 100%);\n height: 100%;\n flex-shrink: 0;\n}\n',id:"ty-tabs"}),n.style.setProperty("--tabs-width",e.includes("%")?"100%":e),n.style.setProperty("--tabs-height",o),n.style.setProperty("--active-index",l+""),d&&c&&h){d.setAttribute("data-placement",i),c.querySelectorAll(".tab-button").forEach(n=>n.remove());const e=function(n,t,e){return t.map(t=>{const o=jt(t);if(!o)return"";const i=Wt(n,t),r="text"===i?t.getAttribute("label")||"Tab":"",s=Yt(t),a=o===e;return`<button\n class="tab-button"\n role="tab"\n data-tab-id="${o}"\n id="tab-${o}"\n aria-controls="panel-${o}"\n aria-selected="${a}"\n tabindex="${a?"0":"-1"}"\n data-active="${a}"\n ${s?'disabled aria-disabled="true"':""}\n >\n ${"slot"===i?`<slot name="label-${o}"></slot>`:r}\n </button>`}).join("")}(n,s,a),o=document.createElement("div");o.innerHTML=e,Array.from(o.children).forEach(n=>{c.appendChild(n)}),Xt(n,t,s),Zt(n,t,a||""),requestAnimationFrame(()=>{const e=t.querySelector(".tab-buttons");e&&n.style.setProperty("--buttons-height",e.offsetHeight+"px"),Kt(n,l),a&&Qt(n,a)}),a&&Jt(n,a)}else{t.innerHTML=`\n <div class="tabs-container" data-placement="${i}">\n ${function(n,t,e){const o=t.map(t=>{const o=jt(t);if(!o)return"";const i=Wt(n,t),r="text"===i?t.getAttribute("label")||"Tab":"",s=Yt(t),a=o===e;return`<button\n class="tab-button"\n role="tab"\n data-tab-id="${o}"\n id="tab-${o}"\n aria-controls="panel-${o}"\n aria-selected="${a}"\n tabindex="${a?"0":"-1"}"\n data-active="${a}"\n ${s?'disabled aria-disabled="true"':""}\n >\n ${"slot"===i?`<slot name="label-${o}"></slot>`:r}\n </button>`}).join("");return`\n <div class="tab-buttons" role="tablist" part="buttons-container">\n <div class="marker-wrapper" part="marker-wrapper">\n ${i=n,null===i.querySelector('[slot="marker"]')?'<div class="default-marker"></div>':""}\n <slot name="marker"></slot>\n </div>\n ${o}\n </div>\n `;var i}(n,s,a)}\n <div class="panels-viewport" part="panels-container">\n <div class="panels-wrapper">\n <slot></slot>\n </div>\n </div>\n </div>\n `,requestAnimationFrame(()=>{const e=t.querySelector(".tab-buttons");e&&n.style.setProperty("--buttons-height",e.offsetHeight+"px"),Kt(n,l),a&&Qt(n,a)}),Xt(n,t,s),Zt(n,t,a||""),function(n){const t=Bt.get(n);t&&t.disconnect();const{width:e}=Ft(n);if(e.includes("%")){const t=new ResizeObserver(t=>{const e=t[0].contentRect.width,o=Ht(n),i=Ut(n,o),r=i?_t(o,i):0;n.style.setProperty("--tabs-width",e+"px"),void 0!==r&&Kt(n,r),i&&Qt(n,i)});t.observe(n),Bt.set(n,t)}}(n),a&&Jt(n,a);const e=t.querySelector('slot[name="marker"]');if(e){const n=()=>{const n=t.querySelector(".default-marker");if(n){const t=e.assignedElements().length>0;n.style.display=t?"none":""}};e.addEventListener("slotchange",n),n()}}}class TyTabs extends HTMLElement{static get observedAttributes(){return["width","height","active","placement"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){ne(this)}disconnectedCallback(){Gt(this),function(n){const t=Bt.get(n);t&&(t.disconnect(),Bt.delete(n))}(this)}attributeChangedCallback(n,t,e){"active"===n?(e&&function(n,t,e){const o=Ht(n),i=n.shadowRoot;if(!i)return;const r=e?_t(o,e):void 0,s=_t(o,t);if(e===t||void 0===s)return;n.style.setProperty("--active-index",s+""),Kt(n,s),Zt(n,i,t),Jt(n,t),Qt(n,t);const a=o[s];a?.resetScroll&&a.resetScroll(),function(n,t,e,o,i){const r=new CustomEvent("ty-tab-change",{detail:{activeId:t,activeIndex:e,previousId:o,previousIndex:i},bubbles:!0,cancelable:!1});n.dispatchEvent(r)}(n,t,s,e,r??null)}(this,e,t),ne(this)):ne(this)}}customElements.get("ty-tabs")||customElements.define("ty-tabs",TyTabs);const te=`\n:host {\n width: var(--tabs-width, 100%);\n height: calc(var(--tabs-height, 400px) - var(--buttons-height, 48px));\n display: block;\n box-sizing: border-box;\n flex-shrink: 0;\n transition: opacity var(--transition-duration, 400ms) var(--transition-easing, ease-in-out);\n}\n\n@media (prefers-reduced-motion: reduce) {\n :host {\n transition-duration: 0ms !important;\n }\n}\n\n.tab-wrapper {\n width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n}\n\n.tab-panel {\n width: 100%;\n height: 100%;\n overflow: auto;\n box-sizing: border-box;\n}\n\n.tab-panel.ty-custom-scroll {\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n\n.tab-panel.ty-custom-scroll::-webkit-scrollbar {\n display: none;\n}\n\n/* Show scrollbar on hover */\n.tab-wrapper:hover .ty-scrollbar-track-y.has-overflow {\n opacity: 1;\n}\n\n${yn}\n`;class TyTab extends HTMLElement{constructor(){super(),this.Kn=null,this.attachShadow({mode:"open"})}static get observedAttributes(){return["id","label","disabled"]}connectedCallback(){this.It()}disconnectedCallback(){this.Zn()}attributeChangedCallback(n,t,e){this.It()}It(){const n=this.shadowRoot;if(!n)return;const t=this.getAttribute("id");n.querySelector(".tab-wrapper")||(r(n,{css:te,id:"ty-tab"}),n.innerHTML=`\n <div class="tab-wrapper"\n role="tabpanel"\n ${t?`id="panel-${t}"`:""}\n ${t?`aria-labelledby="tab-${t}"`:""}\n >\n <div class="tab-panel">\n <slot></slot>\n </div>\n </div>\n `,this.Jn())}Jn(){const n=this.shadowRoot?.querySelector(".tab-panel"),t=this.shadowRoot?.querySelector(".tab-wrapper");n&&t&&vn()&&(n.classList.add("ty-custom-scroll"),this.Kn=new mn(n,{vertical:!0}),this.Kn.trackY&&t.appendChild(this.Kn.trackY))}Zn(){this.Kn&&(this.Kn.trackY?.remove(),this.Kn.destroy(),this.Kn=null)}resetScroll(){this.Kn?.scrollToTop(!1)}}customElements.get("ty-tab")||customElements.define("ty-tab",TyTab);const ee=new WeakMap,oe=new WeakMap;function ie(n){return{width:n.getAttribute("width")||"100%",height:n.getAttribute("height")||"700px",active:n.getAttribute("active"),completed:n.getAttribute("completed")||"",orientation:n.getAttribute("orientation")||"horizontal"}}function re(n){return Array.from(n.querySelectorAll("ty-step"))}function se(n){return n.getAttribute("id")}function ae(n){const t=n.getAttribute("completed")||"";return t.trim()?new Set(t.split(",").map(n=>n.trim()).filter(Boolean)):new Set}function le(n,t){const e=n.findIndex(n=>se(n)===t);return 0>e?void 0:e}function de(n,t){const e=n.getAttribute("active");return e&&void 0!==le(t,e)?e:t.length>0?se(t[0]):null}function ce(n,t){return n.length>1&&t?n.findIndex(n=>se(n)===t)/(n.length-1)*100:0}function he(n){const t=ee.get(n);if(!t)return;const e=n.shadowRoot;e&&(t.stepClickHandlers.forEach((n,t)=>{const o=e.querySelector(`[data-step-id='${t}']`);o&&o.removeEventListener("pointerdown",n)}),t.stepClickHandlers.clear())}function pe(n,t,e){he(n);const o={stepClickHandlers:new Map};e.forEach(e=>{const i=se(e);if(!i)return;const r=t.querySelector(`[data-step-id='${i}']`);if(r){const t=t=>function(n,t,e){e.preventDefault(),e.stopPropagation();const o=re(n),i=o.findIndex(n=>se(n)===t);if(0>i)return;const r=de(n,o),s=r?le(o,r)??null:null,a=new CustomEvent("ty-wizard-step-change",{detail:{activeId:t,activeIndex:i,previousId:r,previousIndex:s,direction:null===s?"none":i>s?"forward":s>i?"backward":"none"},bubbles:!0,cancelable:!1});n.dispatchEvent(a)}(n,i,t);r.addEventListener("pointerdown",t),o.stepClickHandlers.set(i,t)}}),ee.set(n,o)}function ue(n,t){const e=n.shadowRoot;if(!e)return;const o=e.querySelector(".panels-wrapper");o&&(o.style.transform=`translateX(-${t*n.offsetWidth}px)`)}function ge(n){const t=n.shadowRoot;if(!t)return;const e=t.querySelector(".progress-overlay");if(!e)return;const o=re(n),i=de(n,o);ae(n);const r=ce(o,i);e.style.width=r+"%"}function be(n,t,e){const o=re(n),i=ae(n);e&&o.findIndex(n=>se(n)===e),o.forEach(o=>{const r=se(o);if(!r)return;const s=t.querySelector(`[data-step-id='${r}']`),a=t.querySelector(`[data-step-id='${r}'] .step-circle`),l=r===e;if(s&&(s.setAttribute("aria-selected",l+""),s.setAttribute("tabindex",l?"0":"-1"),s.setAttribute("data-active",l+"")),a){const n=me(o,r,e,i);a.setAttribute("data-state",n)}const d=n.querySelector(`[slot='indicator-${r}']`);d&&d.setAttribute("data-active",l+"")})}function ve(n,t){re(n).forEach(n=>{const e=se(n);if(!e)return;const o=e===t;n.setAttribute("data-active",o+""),o?(n.style.pointerEvents="auto",n.style.opacity="1"):(n.style.pointerEvents="none",n.style.opacity="0")})}function me(n,t,e,o){const i=n.getAttribute("status");if(i&&["completed","active","pending","error"].includes(i))return i;const r=t===e;return o.has(t)?"completed":r?"active":"pending"}function ye(n,t,e,o){e&&t.findIndex(n=>se(n)===e);const i=t.map((t,i)=>{const r=se(t);if(!r)return"";const s=t.getAttribute("label")||"Step "+(i+1),a=t.getAttribute("description")||"",l=function(n){return n.hasAttribute("disabled")}(t),d=r===e,c=function(n,t){return null!==n.querySelector(`[slot='indicator-${t}']`)}(n,r),h=me(t,r,e,o);let p="";return p=c?`<slot name="indicator-${r}"></slot>`:"completed"===h?'<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>':"error"===h?'<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>':`<span style="font-size: 12px; font-weight: 700;">${i+1}</span>`,`<button\n class="step-indicator"\n role="tab"\n data-step-id="${r}"\n id="step-${r}"\n aria-controls="panel-${r}"\n aria-selected="${d}"\n tabindex="${d?"0":"-1"}"\n data-active="${d}"\n ${l?'disabled aria-disabled="true"':""}\n >\n <div class="step-circle" data-state="${h}" part="step-circle">\n ${p}\n </div>\n <div class="step-text">\n <span class="step-label">${s}</span>\n ${a?`<span class="step-description">${a}</span>`:""}\n </div>\n </button>`}).join(""),r=ce(t,e);return`\n <div class="step-indicators-wrapper" part="indicators-wrapper">\n <div class="step-indicators" style="--step-count: ${t.length}">\n <div class="progress-line" part="progress-line" role="progressbar" aria-valuenow="${Math.round(r)}" aria-valuemin="0" aria-valuemax="100">\n <div class="progress-overlay" style="width: ${r}%"></div>\n </div>\n ${i}\n </div>\n </div>\n `}function fe(n){const t=n.shadowRoot;if(!t)return;const{width:e,height:o}=ie(n),i=re(n),s=de(n,i),a=s?le(i,s)??0:0,l=ae(n),d=t.querySelector(".wizard-container"),c=t.querySelector(".step-indicators-wrapper"),h=t.querySelector(".panels-viewport");if(r(t,{css:'\n:host {\n display: block;\n width: var(--wizard-width, 100%);\n height: var(--wizard-height, 700px);\n box-sizing: border-box;\n /* Note: --step-circle-size is NOT set here to allow inheritance from light DOM.\n Use fallbacks in var() calls instead. Set on ty-wizard element to customize. */\n}\n\n.wizard-container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n position: relative;\n box-sizing: border-box;\n border-radius: 12px;\n border: 1px solid var(--ty-border);\n background: var(--ty-surface-floating);\n box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n}\n\n/* ===================================== */\n/* Step Indicators Wrapper */\n/* Expose as CSS Part for full styling control */\n/* ===================================== */\n\n.step-indicators-wrapper {\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n position: relative;\n padding: 24px 24px 16px;\n border-bottom: 1px solid var(--ty-border-soft, var(--ty-border));\n background: var(--ty-surface-content);\n}\n\n/* ===================================== */\n/* Progress Line (behind step circles) */\n/* Expose as CSS Part for custom styling */\n/* ===================================== */\n\n.progress-line {\n position: absolute;\n /*\n * With equal-width indicators (flex: 1), each takes 100%/N of the width.\n * Circle centers are at: 50%/N, 150%/N, 250%/N, ... from left.\n * Line spans from first center (50%/N) to last center (100% - 50%/N).\n * Inset = 50% / step-count from each side.\n */\n left: calc(50% / var(--step-count, 4));\n right: calc(50% / var(--step-count, 4));\n /* Vertically center with step circles - uses circle size variable */\n top: calc(var(--step-circle-size, 32px) / 2 - 1px);\n height: 2px;\n background: var(--ty-border);\n z-index: 0;\n pointer-events: none;\n transition: opacity var(--transition-duration, 300ms) var(--transition-easing, ease-in-out);\n}\n\n.progress-overlay {\n position: absolute;\n left: 0;\n top: 0;\n height: 100%;\n background: var(--ty-color-success);\n transition: width var(--transition-duration, 500ms) var(--transition-easing, ease-in-out);\n will-change: width;\n}\n\n/* ===================================== */\n/* Step Indicators Container */\n/* ===================================== */\n\n.step-indicators {\n display: flex;\n align-items: flex-start;\n position: relative;\n /* No padding - let equal-width indicators fill the space */\n}\n\n/* ===================================== */\n/* Individual Step Indicator */\n/* Expose as CSS Part for step styling */\n/* ===================================== */\n\n.step-indicator {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n background: transparent;\n border: none;\n padding: 0;\n font: inherit;\n transition: opacity 200ms;\n /* Equal width for all indicators - makes progress line alignment predictable */\n flex: 1;\n min-width: 0;\n}\n\n.step-indicator[aria-disabled="true"] {\n opacity: 0.4;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n.step-indicator:focus-visible {\n outline: 2px solid var(--ty-color-primary);\n outline-offset: 4px;\n border-radius: 50%;\n}\n\n/* ===================================== */\n/* Step Circle - Smaller, cleaner */\n/* Expose as CSS Part for circle styling */\n/* ===================================== */\n\n.step-circle {\n /* Circle size - set --step-circle-size on ty-wizard element to customize */\n width: var(--step-circle-size, 32px);\n height: var(--step-circle-size, 32px);\n border-radius: 50%;\n border: 2px solid;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n z-index: 10;\n transition: all var(--transition-duration, 300ms) var(--transition-easing, ease-in-out);\n box-sizing: border-box;\n flex-shrink: 0;\n}\n\n/* Completed state - green with success glow */\n.step-circle[data-state="completed"] {\n background: var(--ty-color-success);\n border-color: var(--ty-color-success-600, var(--ty-color-success));\n color: white;\n box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1);\n}\n\n/* Active state - primary with primary glow */\n.step-circle[data-state="active"] {\n background: var(--ty-color-primary);\n border-color: var(--ty-color-primary-600, var(--ty-color-primary));\n color: white;\n box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);\n}\n\n/* Pending state - neutral gray */\n.step-circle[data-state="pending"] {\n background: var(--ty-surface-elevated, #f3f4f6);\n border-color: var(--ty-border, #d1d5db);\n color: var(--ty-text-soft, #6b7280);\n}\n\n/* Error state - red with danger glow */\n.step-circle[data-state="error"] {\n background: var(--ty-color-danger, #ef4444);\n border-color: var(--ty-color-danger-600, #dc2626);\n color: white;\n box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);\n}\n\n/* ===================================== */\n/* Step Text Container */\n/* Wraps label and description */\n/* ===================================== */\n\n.step-text {\n display: flex;\n flex-direction: column;\n gap: 2px;\n align-items: center;\n}\n\n/* ===================================== */\n/* Step Label - Main title */\n/* ===================================== */\n\n.step-label {\n font-size: var(--ty-font-sm, 14px);\n font-weight: var(--ty-font-semibold, 600);\n color: var(--ty-text, inherit);\n transition: color 200ms;\n}\n\n.step-indicator[aria-selected="true"] .step-label {\n color: var(--ty-text-strong, inherit);\n}\n\n.step-indicator[aria-selected="false"] .step-label {\n color: var(--ty-text-soft, inherit);\n}\n\n/* ===================================== */\n/* Step Description - Subtitle */\n/* ===================================== */\n\n.step-description {\n font-size: var(--ty-font-xs, 12px);\n font-weight: var(--ty-font-normal, 400);\n color: var(--ty-text-soft, #9ca3af);\n transition: color 200ms;\n text-align: center;\n max-width: 120px;\n}\n\n.step-indicator[aria-selected="true"] .step-description {\n color: var(--ty-text, inherit);\n}\n\n/* ===================================== */\n/* Custom Indicator Content via Slots */\n/* ===================================== */\n\n::slotted([slot^="indicator-"]) {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n}\n\n/* ===================================== */\n/* Panels Viewport */\n/* Expose as CSS Part for panels container styling */\n/* ===================================== */\n\n.panels-viewport {\n position: relative;\n flex: 1;\n overflow: hidden;\n /* Critical: hides off-screen panels */\n min-height: 0;\n /* Allows flex child to shrink */\n background: var(--ty-surface-elevated);\n}\n\n/* ===================================== */\n/* Panels Wrapper (slides horizontally) */\n/* ===================================== */\n\n.panels-wrapper {\n display: flex;\n height: 100%;\n transition: transform var(--transition-duration, 300ms) var(--transition-easing, ease-in-out);\n will-change: transform;\n}\n\n/* ===================================== */\n/* Slotted Step Panels */\n/* ===================================== */\n\n::slotted(ty-step) {\n width: var(--wizard-width, 100%);\n height: 100%;\n flex-shrink: 0;\n}\n\n/* ===================================== */\n/* Accessibility & Motion Preferences */\n/* ===================================== */\n\n/* Respect user\'s motion preferences */\n@media (prefers-reduced-motion: reduce) {\n .panels-wrapper {\n transition-duration: 0ms !important;\n }\n\n .progress-overlay {\n transition-duration: 0ms !important;\n }\n\n .step-circle {\n transition-duration: 0ms !important;\n }\n\n .progress-line {\n transition-duration: 0ms !important;\n }\n}\n\n/* Screen reader only content */\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n',id:"ty-wizard"}),n.style.setProperty("--wizard-width",e.includes("%")?"100%":e),n.style.setProperty("--wizard-height",o),n.style.setProperty("--active-index",a+""),n.style.setProperty("--step-count",i.length+""),d&&c&&h){c.remove();const e=ye(n,i,s,l),o=document.createElement("div");o.innerHTML=e,d.insertBefore(o.firstElementChild,h),pe(n,t,i),be(n,t,s||""),requestAnimationFrame(()=>{const e=t.querySelector(".step-indicators-wrapper");e&&n.style.setProperty("--indicators-height",e.offsetHeight+"px"),ue(n,a),ge(n)}),s&&ve(n,s)}else t.innerHTML=`\n <div class="wizard-container">\n ${ye(n,i,s,l)}\n <div class="panels-viewport" part="panels-container">\n <div class="panels-wrapper">\n <slot></slot>\n </div>\n </div>\n </div>\n `,requestAnimationFrame(()=>{const e=t.querySelector(".step-indicators-wrapper");e&&n.style.setProperty("--indicators-height",e.offsetHeight+"px"),ue(n,a),ge(n)}),pe(n,t,i),be(n,t,s||""),function(n){const t=oe.get(n);t&&t.disconnect();const{width:e}=ie(n);if(e.includes("%")){const t=new ResizeObserver(t=>{const e=t[0].contentRect.width,o=re(n),i=de(n,o),r=i?le(o,i):0;n.style.setProperty("--wizard-width",e+"px"),void 0!==r&&ue(n,r)});t.observe(n),oe.set(n,t)}}(n),s&&ve(n,s)}class TyWizard extends HTMLElement{static get observedAttributes(){return["width","height","active","completed","orientation"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){fe(this)}disconnectedCallback(){he(this),function(n){const t=oe.get(n);t&&(t.disconnect(),oe.delete(n))}(this)}attributeChangedCallback(n,t,e){"active"===n?(e&&function(n,t){const e=re(n),o=n.shadowRoot;if(!o)return;const i=de(n,e),r=i?le(e,i):void 0,s=le(e,t);if(i===t||void 0===s)return;n.style.setProperty("--active-index",s+""),ue(n,s),be(n,o,t),ge(n),ve(n,t);const a=e[s];a?.resetScroll&&a.resetScroll(),function(n,t,e,o,i){const r=new CustomEvent("ty-wizard-step-change",{detail:{activeId:t,activeIndex:e,previousId:o,previousIndex:i,direction:null===i?"none":e>i?"forward":i>e?"backward":"none"},bubbles:!0,cancelable:!1});n.dispatchEvent(r)}(n,t,s,i,r??null)}(this,e),fe(this)):fe(this)}}customElements.get("ty-wizard")||customElements.define("ty-wizard",TyWizard);const we=`\n:host {\n width: var(--wizard-width, 100%);\n height: calc(var(--wizard-height, 700px) - var(--indicators-height, 120px));\n display: block;\n box-sizing: border-box;\n flex-shrink: 0;\n transition: opacity var(--transition-duration, 400ms) var(--transition-easing, ease-in-out);\n}\n\n@media (prefers-reduced-motion: reduce) {\n :host {\n transition-duration: 0ms !important;\n }\n}\n\n.step-wrapper {\n width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n}\n\n.step-panel {\n width: 100%;\n height: 100%;\n overflow: auto;\n box-sizing: border-box;\n}\n\n.step-panel.ty-custom-scroll {\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n\n.step-panel.ty-custom-scroll::-webkit-scrollbar {\n display: none;\n}\n\n.step-wrapper:hover .ty-scrollbar-track-y.has-overflow {\n opacity: 1;\n}\n\n${yn}\n`;class TyStep extends HTMLElement{constructor(){super(),this.Kn=null,this.attachShadow({mode:"open"})}static get observedAttributes(){return["id","label","description","disabled","status"]}connectedCallback(){this.It()}disconnectedCallback(){this.Zn()}attributeChangedCallback(n,t,e){this.It()}It(){const n=this.shadowRoot;if(!n)return;const t=this.getAttribute("id");n.querySelector(".step-wrapper")||(r(n,{css:we,id:"ty-step"}),n.innerHTML=`\n <div class="step-wrapper"\n role="tabpanel"\n ${t?`id="panel-${t}"`:""}\n ${t?`aria-labelledby="step-${t}"`:""}\n >\n <div class="step-panel">\n <slot></slot>\n </div>\n </div>\n `,this.Jn())}Jn(){const n=this.shadowRoot?.querySelector(".step-panel"),t=this.shadowRoot?.querySelector(".step-wrapper");n&&t&&vn()&&(n.classList.add("ty-custom-scroll"),this.Kn=new mn(n,{vertical:!0}),this.Kn.trackY&&t.appendChild(this.Kn.trackY))}Zn(){this.Kn&&(this.Kn.trackY?.remove(),this.Kn.destroy(),this.Kn=null)}resetScroll(){this.Kn?.scrollToTop(!1)}}function xe(n){if(!Number.isInteger(n)||1>n||n>12)throw new RangeError(`Invalid month: ${n}. Must be an integer between 1 and 12.`)}function ke(n,t,e,o){const i=n.getFullYear(),r=n.getMonth()+1,s=n.getDate(),a=n.getDay(),l=i!==t||r!==e;let d=!1,c=!1;l&&(t>i||i===t&&e>r?d=!0:c=!0);const h=(u=function(){const n=new Date;return new Date(n.getFullYear(),n.getMonth(),n.getDate(),0,0,0,0)}(),(p=n).getFullYear()===u.getFullYear()&&p.getMonth()===u.getMonth()&&p.getDate()===u.getDate());var p,u;const g=o?.year===i&&o?.month===r&&o?.day===s;return{value:Date.UTC(i,r-1,s,0,0,0,0),localValue:n.getTime(),year:i,month:r,dayInMonth:s,weekend:0===a||6===a,otherMonth:l,prevMonth:d,nextMonth:c,today:h,isSelected:g,selectedYear:o?.year,selectedMonth:o?.month,selectedDay:o?.day}}function ze(n,t){const e=new Date(n);return e.setDate(e.getDate()+t),e}function Ce(n){return n instanceof HTMLElement}function Se(n){if(!n||""===n)return null;const t=n+"";return/^\d+(\.\d+)?$/.test(t)?t+"px":t}customElements.get("ty-step")||customElements.define("ty-step",TyStep);class TyCalendarMonth extends HTMLElement{constructor(){super(),this.Ot="en-US",this.lt="md";const n=new Date;this.Lt=n.getFullYear(),this.Nt=n.getMonth()+1,this.attachShadow({mode:"open"})}static get observedAttributes(){return["locale","size"]}connectedCallback(){this.Nt||(this.Nt=(new Date).getMonth()+1),this.Lt||(this.Lt=(new Date).getFullYear()),this.Ot||(this.Ot=this.getAttribute("locale")||"en-US");const n=this.getAttribute("size");!n||"sm"!==n&&"md"!==n&&"lg"!==n||(this.lt=n);const t=this.dayContentFn;t&&!this.qt&&(this.qt=t,delete this.dayContentFn);const e=this.customCSS;e&&!this.Rt&&(this.Rt=e,delete this.customCSS),this.Z=W(this,()=>{this.render()}),this.render()}disconnectedCallback(){this.Z&&(this.Z(),this.Z=void 0)}attributeChangedCallback(n,t,e){"locale"===n?(this.Ot=e||"en-US",this.render()):"size"===n&&("sm"!==e&&"md"!==e&&"lg"!==e||(this.lt=e,this.render()))}get displayYear(){return this.Lt}set displayYear(n){this.Lt!==n&&(this.Lt=n,this.render())}get displayMonth(){return this.Nt}set displayMonth(n){this.Nt!==n&&(this.Nt=n,this.render())}get locale(){return j(this,this.getAttribute("locale"))}set locale(n){this.Ot!==n&&(this.Ot=n,this.render())}get size(){return this.lt}set size(n){this.lt!==n&&(this.lt=n,this.render())}get width(){return this.Pt}set width(n){this.Pt!==n&&(this.Pt=n,this.applyWidthProperties())}get minWidth(){return this.Vt}set minWidth(n){this.Vt!==n&&(this.Vt=n,this.applyWidthProperties())}get maxWidth(){return this.Bt}set maxWidth(n){this.Bt!==n&&(this.Bt=n,this.applyWidthProperties())}get dayContentFn(){return this.qt}set dayContentFn(n){this.qt!==n&&(this.qt=n,this.render())}get customCSS(){return this.Rt}set customCSS(n){this.Rt!==n&&(this.Rt=n,this.applyCustomCSS())}get value(){return this.N}set value(n){const t=n??void 0;this.N!==t&&(this.N=t,this.render())}applyWidthProperties(){const n=Se(this.Pt),t=Se(this.Vt),e=Se(this.Bt);n?this.style.setProperty("--calendar-width",n):this.style.removeProperty("--calendar-width"),t?this.style.setProperty("--calendar-min-width",t):this.style.removeProperty("--calendar-min-width"),e?this.style.setProperty("--calendar-max-width",e):this.style.removeProperty("--calendar-max-width")}applyCustomCSS(){if(!this.Rt||!this.shadowRoot)return;const n=this.shadowRoot.adoptedStyleSheets;n.includes(this.Rt)||(this.shadowRoot.adoptedStyleSheets=[...n,this.Rt])}refresh(){this.render()}dispatchDayClick(n,t){const e={dayContext:n,value:n.value,year:n.year,month:n.month,day:n.dayInMonth,isHoliday:n.holiday,isToday:n.today,isWeekend:n.weekend,isOtherMonth:n.otherMonth};for(const o of["day-click","day-select"]){const n=new CustomEvent(o,{detail:e,bubbles:!0,cancelable:!0});this.dispatchEvent(n)}}renderDayCell(n){const t=document.createElement("div"),e=this.qt?this.qt(n):function(n){return""+n.dayInMonth}(n);if(this.qt&&e&&!Ce(e)&&"string"!=typeof e)throw Error(`Custom dayContentFn must return a DOM element or string, got: ${typeof e}. Use document.createElement() to create DOM elements.`);const o=function(n){const t=["calendar-day"];return n.today&&t.push("today"),n.weekend&&t.push("weekend"),n.otherMonth&&t.push("other-month"),n.isSelected&&t.push("selected"),t}(n);return t.className=o.join(" "),"string"==typeof e?t.textContent=e:Ce(e)&&t.appendChild(e),t.addEventListener("pointerdown",t=>{t.preventDefault(),this.dispatchDayClick(n,t)}),t}render(){const n=this.shadowRoot;if(!n)return;let t;if(r(n,{css:"\n/* ============================================================================\n Theming Tokens\n Override these to retheme the calendar without touching the global palette.\n Defaults chain back to the global --ty-color-* / --ty-bg-* / --ty-border tokens.\n ============================================================================ */\n\n:host {\n /* Accent aliases — override these three for thin retheming */\n --ty-calendar-accent: var(--ty-color-primary);\n --ty-calendar-today-accent: var(--ty-color-secondary);\n --ty-calendar-muted: var(--ty-color-neutral);\n\n /* Header (weekday names) */\n --ty-calendar-header-color: var(--ty-color-neutral-strong);\n\n /* Day cell — base */\n --ty-calendar-day-color: var(--ty-calendar-muted);\n --ty-calendar-day-bg: transparent;\n --ty-calendar-day-border: var(--ty-border);\n --ty-calendar-day-radius: 0.375rem;\n\n /* Day cell — hover */\n --ty-calendar-day-hover-color: var(--ty-color-neutral-strong);\n --ty-calendar-day-hover-bg: var(--ty-bg-neutral-soft);\n --ty-calendar-day-hover-border: var(--ty-border-mild);\n\n /* Today */\n --ty-calendar-today-color: var(--ty-color-secondary-strong);\n --ty-calendar-today-bg: var(--ty-bg-secondary-soft);\n --ty-calendar-today-border: var(--ty-calendar-today-accent);\n\n /* Selected */\n --ty-calendar-selected-color: var(--ty-color-primary-strong);\n --ty-calendar-selected-bg: var(--ty-bg-primary);\n --ty-calendar-selected-border: var(--ty-calendar-accent);\n --ty-calendar-selected-hover-bg: var(--ty-bg-primary-mild);\n --ty-calendar-selected-hover-border: var(--ty-color-primary-mild);\n\n /* Modifier states */\n --ty-calendar-weekend-color: var(--ty-color-danger-soft);\n --ty-calendar-other-month-color: var(--ty-color-neutral-faint);\n --ty-calendar-other-month-opacity: 0.5;\n}\n\n/* ============================================================================\n Base Calendar Container\n ============================================================================ */\n\n.calendar-flex-container {\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n gap: 0;\n padding: 0.75rem;\n border-radius: 0.5rem;\n font-family: system-ui, sans-serif;\n user-select: none;\n width: var(--calendar-width, fit-content);\n min-width: 280px;\n max-width: var(--calendar-max-width, none);\n}\n\n/* ============================================================================\n Rows (Header + 6 Day Rows)\n ============================================================================ */\n\n.calendar-row {\n display: flex;\n flex: 1;\n min-height: 0;\n}\n\n.calendar-header-row {\n flex: 0 0 auto;\n color: var(--ty-calendar-header-color);\n}\n\n.calendar-day-row {\n flex: 1;\n min-height: 2rem;\n margin-bottom: 0.125rem;\n}\n\n/* ============================================================================\n Base Cell Styles\n ============================================================================ */\n\n.calendar-cell {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 0;\n position: relative;\n box-sizing: border-box;\n}\n\n/* ============================================================================\n Header Cells\n ============================================================================ */\n\n.calendar-header-cell {\n text-align: center;\n font-weight: 600;\n text-transform: uppercase;\n padding: 0.25rem;\n letter-spacing: 0.05em;\n}\n\n/* ============================================================================\n Day Cells - Square with Better Visual Hierarchy\n ============================================================================ */\n\n.calendar-day-cell {\n /* Square cells */\n aspect-ratio: 1;\n\n /* Layout */\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n\n /* Spacing */\n margin: 0.125rem;\n\n /* Visual */\n border-radius: var(--ty-calendar-day-radius);\n border: 1px solid var(--ty-calendar-day-border);\n background-color: var(--ty-calendar-day-bg);\n color: var(--ty-calendar-day-color);\n cursor: pointer;\n transition: all 0.15s ease;\n\n /* Typography */\n font-weight: 400;\n}\n\n/* Hover State - Stronger Feedback */\n.calendar-day-cell:hover {\n color: var(--ty-calendar-day-hover-color);\n background-color: var(--ty-calendar-day-hover-bg);\n border-color: var(--ty-calendar-day-hover-border);\n}\n\n/* ============================================================================\n Day States\n ============================================================================ */\n\n/* Today - Strong Visual Indicator */\n.calendar-day-cell.today {\n background-color: var(--ty-calendar-today-bg);\n color: var(--ty-calendar-today-color);\n border-color: var(--ty-calendar-today-border);\n font-weight: 600;\n}\n\n/* Weekend - Subtle Color Shift */\n.calendar-day-cell.weekend {\n color: var(--ty-calendar-weekend-color);\n}\n\n/* Other Month - Muted */\n.calendar-day-cell.other-month {\n color: var(--ty-calendar-other-month-color);\n opacity: var(--ty-calendar-other-month-opacity);\n}\n\n.calendar-day-cell.other-month:hover { \n color: var(--ty-calendar-day-hover-color);\n background-color: var(--ty-calendar-day-hover-bg);\n opacity: 0.7;\n}\n\n/* Selected State (for custom usage) */\n.calendar-day-cell.selected {\n background-color: var(--ty-calendar-selected-bg);\n color: var(--ty-calendar-selected-color);\n border-color: var(--ty-calendar-selected-border);\n font-weight: 600;\n}\n\n.calendar-day-cell.selected:hover {\n background-color: var(--ty-calendar-selected-hover-bg);\n border-color: var(--ty-calendar-selected-hover-border);\n}\n\n.calendar-day-cell.selected.other-month {\n opacity: 0.7;\n}\n\n/* ============================================================================\n Size Variants\n ============================================================================ */\n\n/* Small - Compact (240px min-width) */\n.calendar-size-sm {\n padding: 0.5rem;\n min-width: 240px;\n}\n\n.calendar-size-sm .calendar-header-cell {\n font-size: 0.625rem;\n padding: 0.125rem;\n}\n\n.calendar-size-sm .calendar-day-cell {\n font-size: 0.75rem;\n margin: 0.0625rem;\n}\n\n.calendar-size-sm .calendar-day-row {\n min-height: 1.5rem;\n}\n\n/* Medium - Default (280px min-width) */\n.calendar-size-md {\n padding: 0.75rem;\n min-width: 280px;\n}\n\n.calendar-size-md .calendar-header-cell {\n font-size: 0.6875rem;\n padding: 0.25rem;\n}\n\n.calendar-size-md .calendar-day-cell {\n font-size: 0.8125rem;\n margin: 0.125rem;\n}\n\n.calendar-size-md .calendar-day-row {\n min-height: 2rem;\n}\n\n/* Large - Spacious (360px min-width) */\n.calendar-size-lg {\n padding: 1rem;\n min-width: 360px;\n}\n\n.calendar-size-lg .calendar-header-cell {\n font-size: 0.75rem;\n padding: 0.375rem;\n}\n\n.calendar-size-lg .calendar-day-cell {\n font-size: 0.875rem;\n margin: 0.1875rem;\n}\n\n.calendar-size-lg .calendar-day-row {\n min-height: 2.5rem;\n}\n\n/* ============================================================================\n Backwards Compatibility\n ============================================================================ */\n\n.calendar-day {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n}\n",id:"ty-calendar-month"}),this.applyCustomCSS(),this.applyWidthProperties(),this.N){const n=new Date(this.N);t={year:n.getFullYear(),month:n.getMonth()+1,day:n.getDate()}}const e=function(n,t,e){return function(n){if(!Number.isInteger(n)||1>n||n>9999)throw new RangeError(`Invalid year: ${n}. Must be an integer between 1 and 9999.`)}(n),xe(t),function(n,t,e,o,i){const r=[];for(let s=0;42>s;s++){const t=ze(n,s);r.push(ke(t,e,o,i))}return r}(function(n,t){const e=function(n,t){return new Date(n,t-1,1,0,0,0,0)}(n,t);return function(n){const t=n.getDay(),e=0===t?6:t-1,o=new Date(n);return o.setDate(n.getDate()-e),o.setHours(0,0,0,0),o}(e)}(n,t),0,n,t,e)}(this.Lt,this.Nt,t),o=function(n,t="short"){const e=new Intl.DateTimeFormat(n,{weekday:t}),o=new Date(2024,0,7),i=Array.from({length:7},(n,t)=>{const i=ze(o,t);return e.format(i)}),[r,...s]=i;return[...s,r]}(this.Ot,"short");n.innerHTML="";const i=document.createElement("div");i.className="calendar-flex-container calendar-size-"+this.lt;const s=document.createElement("div");s.className="calendar-row calendar-header-row",o.forEach(n=>{const t=document.createElement("div");t.className="calendar-cell calendar-header-cell",t.textContent=n,s.appendChild(t)}),i.appendChild(s);const a=[];for(let r=0;42>r;r+=7)a.push(e.slice(r,r+7));a.forEach(n=>{const t=document.createElement("div");t.className="calendar-row calendar-day-row",n.forEach(n=>{const e=this.renderDayCell(n);e.className=e.className+" calendar-cell calendar-day-cell",t.appendChild(e)}),i.appendChild(t)}),n.appendChild(i)}}customElements.get("ty-calendar-month")||customElements.define("ty-calendar-month",TyCalendarMonth);const Ee='\n/* ============================================================================\n Size Variants (CSS Custom Properties)\n ============================================================================ */\n\n:host {\n /* Default (md) */\n --nav-btn-size: 2rem;\n --nav-btn-icon-size: 1.25rem;\n --nav-font-size: 1rem;\n --nav-padding: 0.5rem 0.75rem;\n --nav-default-width: 280px;\n\n /* ==========================================================================\n Theming Tokens\n Override these to retheme navigation without touching the global palette.\n ========================================================================== */\n\n /* Accent alias — drives focus outline, mirrors --ty-calendar-accent */\n --ty-calendar-accent: var(--ty-color-primary);\n\n /* Nav button (prev/next chevrons) */\n --ty-calendar-nav-color: var(--ty-color-neutral);\n --ty-calendar-nav-hover-color: var(--ty-color-neutral-strong);\n --ty-calendar-nav-hover-bg: var(--ty-bg-neutral-soft);\n --ty-calendar-nav-active-bg: var(--ty-bg-neutral);\n --ty-calendar-nav-focus-outline: var(--ty-calendar-accent);\n\n /* Title (month/year display) */\n --ty-calendar-nav-title-color: var(--ty-color-neutral-strong);\n}\n\n:host([data-size="sm"]) {\n --nav-btn-size: 1.5rem;\n --nav-btn-icon-size: 1rem;\n --nav-font-size: 0.875rem;\n --nav-padding: 0.375rem 0.5rem;\n --nav-default-width: 240px;\n}\n\n:host([data-size="lg"]) {\n --nav-btn-size: 2.5rem;\n --nav-btn-icon-size: 1.5rem;\n --nav-font-size: 1.125rem;\n --nav-padding: 0.625rem 1rem;\n --nav-default-width: 360px;\n}\n\n/* ============================================================================\n Main Navigation Header\n ============================================================================ */\n\n.calendar-navigation-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--nav-padding);\n font-family: system-ui, sans-serif;\n user-select: none;\n width: var(--nav-width, var(--nav-default-width));\n box-sizing: border-box;\n}\n\n/* ============================================================================\n Navigation Groups (Left, Center, Right)\n ============================================================================ */\n\n.nav-group {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.nav-group-left,\n.nav-group-right {\n flex: 0 0 auto;\n}\n\n.nav-group-center {\n flex: 1;\n justify-content: center;\n}\n\n/* ============================================================================\n Navigation Buttons\n ============================================================================ */\n\n.nav-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--nav-btn-size);\n height: var(--nav-btn-size);\n padding: 0;\n border: none;\n border-radius: 0.375rem;\n background-color: transparent;\n color: var(--ty-calendar-nav-color);\n cursor: pointer;\n transition: all 0.15s ease;\n outline: none;\n}\n\n.nav-btn:hover {\n background-color: var(--ty-calendar-nav-hover-bg);\n color: var(--ty-calendar-nav-hover-color);\n}\n\n.nav-btn:active {\n background-color: var(--ty-calendar-nav-active-bg);\n transform: scale(0.95);\n}\n\n.nav-btn:focus-visible {\n outline: 2px solid var(--ty-calendar-nav-focus-outline);\n outline-offset: 2px;\n}\n\n/* SVG sizing */\n.nav-btn svg {\n width: var(--nav-btn-icon-size);\n height: var(--nav-btn-icon-size);\n display: block;\n}\n\n/* ============================================================================\n Month/Year Display (Center)\n ============================================================================ */\n\n.month-year-display {\n font-size: var(--nav-font-size);\n font-weight: 600;\n color: var(--ty-calendar-nav-title-color);\n text-align: center;\n white-space: nowrap;\n letter-spacing: -0.01em;\n}\n',Te=class extends o{constructor(){super();const n=new Date;this.dt={displayMonth:n.getMonth()+1,displayYear:n.getFullYear()},r(this.shadowRoot,{css:Ee,id:"ty-calendar-navigation"})}onConnect(){this.dt.displayMonth=this.displayMonth,this.dt.displayYear=this.displayYear,this.Z=W(this,()=>{this.render()}),this.render()}onDisconnect(){this.Z&&(this.Z(),this.Z=void 0)}onPropertiesChanged(n){for(const{name:t,newValue:e}of n)switch(t){case"display-month":this.dt.displayMonth=e;break;case"display-year":this.dt.displayYear=e}}get displayMonth(){return this.getProperty("display-month")}set displayMonth(n){this.setProperty("display-month",n)}get displayYear(){return this.getProperty("display-year")}set displayYear(n){this.setProperty("display-year",n)}get locale(){return j(this,this.getProperty("locale"))}set locale(n){this.setProperty("locale",n)}get size(){return this.getProperty("size")}set size(n){this.setProperty("size",n)}get width(){return this.getProperty("width")}set width(n){this.setProperty("width",n)}emitChangeEvent(n,t){const e=new CustomEvent("change",{detail:{month:n,year:t},bubbles:!0,cancelable:!0});this.dispatchEvent(e)}navigateMonth(n){const t=this.dt.displayMonth+n;let e,o;1>t?(e=12,o=this.dt.displayYear-1):t>12?(e=1,o=this.dt.displayYear+1):(e=t,o=this.dt.displayYear),this.emitChangeEvent(e,o)}navigateYear(n){this.emitChangeEvent(this.dt.displayMonth,this.dt.displayYear+n)}createButton(n,t,e,o){const i=document.createElement("button");return i.className=n,i.title=t,i.innerHTML=e,i.addEventListener("click",o),i}render(){const n=this.shadowRoot;if(!n)return;r(n,{css:Ee,id:"ty-calendar-navigation"}),this.setAttribute("data-size",this.size);const t=this.width;t?this.style.setProperty("--nav-width",t):this.style.removeProperty("--nav-width");const e=function(n,t="en-US",e="long"){xe(n);const o=new Date(2024,n-1,1);return new Intl.DateTimeFormat(t,{month:e}).format(o)}(this.dt.displayMonth,this.locale,"long");n.innerHTML="";const o=document.createElement("div");o.className="calendar-navigation-header";const i=document.createElement("div");i.className="nav-group nav-group-left",i.appendChild(this.createButton("nav-btn nav-year-prev","Previous year","<?xml version='1.0' encoding='UTF-8'?>\n<svg width='24' viewBox='0 0 24 24' height='24' enable-background='new 0 0 24 24' xmlns='http://www.w3.org/2000/svg' stroke-width='0' stroke='currentColor' fill='currentColor'>\n<g>\n<rect width='24' height='24' fill='none'/>\n</g>\n<g>\n<g>\n<polygon points='17.59,18 19,16.59 14.42,12 19,7.41 17.59,6 11.59,12'/>\n<polygon points='11,18 12.41,16.59 7.83,12 12.41,7.41 11,6 5,12'/>\n</g>\n</g>\n</svg>",()=>this.navigateYear(-1))),i.appendChild(this.createButton("nav-btn nav-month-prev","Previous month","<?xml version='1.0' encoding='UTF-8'?>\n<svg width='24' viewBox='0 0 24 24' height='24' xmlns='http://www.w3.org/2000/svg' stroke-width='0' stroke='currentColor' fill='currentColor'>\n<path fill='none' d='M0 0h24v24H0V0z'/>\n<path d='M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z'/>\n</svg>",()=>this.navigateMonth(-1)));const s=document.createElement("div");s.className="nav-group nav-group-center";const a=document.createElement("div");a.className="month-year-display",a.textContent=`${e} ${this.dt.displayYear}`,s.appendChild(a);const l=document.createElement("div");l.className="nav-group nav-group-right",l.appendChild(this.createButton("nav-btn nav-month-next","Next month","<?xml version='1.0' encoding='UTF-8'?>\n<svg width='24' viewBox='0 0 24 24' height='24' xmlns='http://www.w3.org/2000/svg' stroke-width='0' stroke='currentColor' fill='currentColor'>\n<path fill='none' d='M0 0h24v24H0V0z'/>\n<path d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z'/>\n</svg>",()=>this.navigateMonth(1))),l.appendChild(this.createButton("nav-btn nav-year-next","Next year","<?xml version='1.0' encoding='UTF-8'?>\n<svg width='24' viewBox='0 0 24 24' height='24' enable-background='new 0 0 24 24' xmlns='http://www.w3.org/2000/svg' stroke-width='0' stroke='currentColor' fill='currentColor'>\n<g>\n<rect width='24' height='24' fill='none'/>\n</g>\n<g>\n<g>\n<polygon points='6.41,6 5,7.41 9.58,12 5,16.59 6.41,18 12.41,12'/>\n<polygon points='13,6 11.59,7.41 16.17,12 11.59,16.59 13,18 19,12'/>\n</g>\n</g>\n</svg>",()=>this.navigateYear(1))),o.appendChild(i),o.appendChild(s),o.appendChild(l),n.appendChild(o)}};Te.properties={"display-month":{type:"number",visual:!0,default:()=>(new Date).getMonth()+1,validate:n=>{const t=+n;return Number.isInteger(t)&&t>=1&&12>=t},coerce:n=>{const t=+n;return isNaN(t)||1>t||t>12?(new Date).getMonth()+1:t}},"display-year":{type:"number",visual:!0,default:()=>(new Date).getFullYear(),validate:n=>{const t=+n;return Number.isInteger(t)&&t>=1&&9999>=t},coerce:n=>{const t=+n;return isNaN(t)||1>t||t>9999?(new Date).getFullYear():t}},locale:{type:"string",visual:!0,default:"en-US"},size:{type:"string",visual:!0,default:"md",validate:n=>["sm","md","lg"].includes(n),coerce:n=>["sm","md","lg"].includes(n)?n:"md"},width:{type:"string",visual:!0,default:""}};let Me=Te;function De(n){return n&&/^\d{4}$/.test(n)?parseInt(n,10):null}function $e(n){if(!n||!/^\d{1,2}$/.test(n))return null;const t=parseInt(n,10);return 1>t||t>12?null:t}function Ae(n,t,e){if(!n||!/^\d{1,2}$/.test(n))return null;const o=parseInt(n,10),i=new Date(t,e,0).getDate();return 1>o||o>i?null:o}function Ie(n,t,e){return`${n}-${(""+t).padStart(2,"0")}-${(""+e).padStart(2,"0")}`}customElements.get("ty-calendar-navigation")||customElements.define("ty-calendar-navigation",Me);const Oe=class extends HTMLElement{constructor(){super(),this.Ot="en-US",this.Ft=!0,this.Ht=!1,this.lt="md";const n=function(){const n=new Date;return{year:n.getFullYear(),month:n.getMonth()+1,day:n.getDate()}}();this.dt={displayYear:n.year,displayMonth:n.month},this.attachShadow({mode:"open"}),"attachInternals"in this&&(this.m=this.attachInternals())}static get observedAttributes(){return["year","month","day","show-navigation","stateless","locale","name","size","width"]}connectedCallback(){this.initializeFromAttributes();const n=this.dayContentFn;n&&!this.qt&&(this.qt=n,delete this.dayContentFn);const t=this.customCSS;t&&!this.Rt&&(this.Rt=t,delete this.customCSS);const e=this.value;if(e&&"string"==typeof e&&e!==this.value){const n=e.match(/^(\d{4})-(\d{2})-(\d{2})$/);if(n){const t=parseInt(n[1],10),e=parseInt(n[2],10),o=parseInt(n[3],10);this.dt.selectedYear=t,this.dt.selectedMonth=e,this.dt.selectedDay=o,this.dt.displayYear=t,this.dt.displayMonth=e,this.Ht||(this.setAttribute("year",""+t),this.setAttribute("month",""+e),this.setAttribute("day",""+o))}delete this.value}this.render(),this.updateFormValue(),this.Z=W(this,()=>{this.render()})}disconnectedCallback(){this.Z&&(this.Z(),this.Z=void 0),this.jt=void 0,this.Wt=void 0}attributeChangedCallback(n,t,e){if(t!==e)switch(n){case"year":case"month":case"day":this.syncStateFromAttributes(),this.syncChildComponents(),this.updateFormValue();break;case"show-navigation":this.Ft="false"!==e,this.render();break;case"stateless":this.Ht=null!==e&&"false"!==e;break;case"locale":this.Ot=e||"en-US",this.syncChildComponents();break;case"size":"sm"!==e&&"md"!==e&&"lg"!==e||(this.lt=e,this.Pt=void 0,this.removeAttribute("width"),this.syncChildComponents());break;case"width":this.Pt=e||void 0,e&&(this.lt="md",this.removeAttribute("size")),this.syncChildComponents();break;case"name":this.updateFormValue()}}get year(){return this.dt.selectedYear}set year(n){void 0!==n?this.Ht?(this.dt.displayYear=n,this.setAttribute("year",""+n)):(this.dt.selectedYear=n,this.dt.displayYear=n,this.setAttribute("year",""+n)):(this.Ht||delete this.dt.selectedYear,this.removeAttribute("year")),this.syncChildComponents(),this.Ht||this.updateFormValue()}get month(){return this.dt.selectedMonth}set month(n){void 0!==n?this.Ht?(this.dt.displayMonth=n,this.setAttribute("month",""+n)):(this.dt.selectedMonth=n,this.dt.displayMonth=n,this.setAttribute("month",""+n)):(this.Ht||delete this.dt.selectedMonth,this.removeAttribute("month")),this.syncChildComponents(),this.Ht||this.updateFormValue()}get day(){return this.dt.selectedDay}set day(n){void 0!==n?(this.dt.selectedDay=n,this.setAttribute("day",""+n)):(delete this.dt.selectedDay,this.removeAttribute("day")),this.syncChildComponents(),this.updateFormValue()}get locale(){return j(this,this.getAttribute("locale"))}set locale(n){this.Ot=n,this.setAttribute("locale",n)}get showNavigation(){return this.Ft}set showNavigation(n){this.Ft=n,this.setAttribute("show-navigation",""+n)}get stateless(){return this.Ht}set stateless(n){this.Ht=n,n?this.setAttribute("stateless",""):this.removeAttribute("stateless")}get size(){return this.lt}set size(n){this.lt!==n&&(this.lt=n,this.Pt=void 0,this.removeAttribute("width"),this.setAttribute("size",n),this.syncChildComponents())}get width(){return this.Pt}set width(n){this.Pt!==n&&(this.Pt=n,n?(this.lt="md",this.removeAttribute("size"),this.setAttribute("width",n)):this.removeAttribute("width"),this.syncChildComponents())}get dayContentFn(){return this.qt}set dayContentFn(n){this.qt=n,this.syncChildComponents()}get customCSS(){return this.Rt}set customCSS(n){this.Rt=n,this.syncChildComponents()}get value(){const{selectedYear:n,selectedMonth:t,selectedDay:e}=this.dt;return n&&t&&e?Ie(n,t,e):""}set value(n){if(n){const t=n.match(/^(\d{4})-(\d{2})-(\d{2})$/);if(t){const n=parseInt(t[1],10),e=parseInt(t[2],10),o=parseInt(t[3],10);this.dt.selectedYear=n,this.dt.selectedMonth=e,this.dt.selectedDay=o,this.dt.displayYear=n,this.dt.displayMonth=e,this.Ht||(this.setAttribute("year",""+n),this.setAttribute("month",""+e),this.setAttribute("day",""+o))}}else delete this.dt.selectedYear,delete this.dt.selectedMonth,delete this.dt.selectedDay,this.Ht||(this.removeAttribute("year"),this.removeAttribute("month"),this.removeAttribute("day"));this.syncChildComponents(),this.Ht||this.updateFormValue()}initializeFromAttributes(){const n=this.getAttribute("year"),t=this.getAttribute("month"),e=this.getAttribute("day"),o=this.getAttribute("locale"),i=this.getAttribute("show-navigation"),r=this.getAttribute("stateless"),s=this.getAttribute("size"),a=this.getAttribute("width"),l=De(n);l&&(this.dt.displayYear=l);const d=$e(t);if(d&&(this.dt.displayMonth=d),l&&d){const n=Ae(e,l,d);n&&(this.dt.selectedYear=l,this.dt.selectedMonth=d,this.dt.selectedDay=n)}o&&(this.Ot=o),i&&(this.Ft="false"!==i),null!==r&&(this.Ht="false"!==r),!s||"sm"!==s&&"md"!==s&&"lg"!==s||(this.lt=s),a&&(this.Pt=a)}syncStateFromAttributes(){const n=this.getAttribute("year"),t=this.getAttribute("month"),e=this.getAttribute("day"),o=De(n),i=$e(t);if(o&&(this.dt.displayYear=o),i&&(this.dt.displayMonth=i),o&&i){const n=Ae(e,o,i);n?(this.dt.selectedYear=o,this.dt.selectedMonth=i,this.dt.selectedDay=n):(delete this.dt.selectedYear,delete this.dt.selectedMonth,delete this.dt.selectedDay)}else delete this.dt.selectedYear,delete this.dt.selectedMonth,delete this.dt.selectedDay}syncChildComponents(){if(this.jt&&(this.jt.displayMonth=this.dt.displayMonth,this.jt.displayYear=this.dt.displayYear,this.jt.locale=this.locale,this.jt.size=this.lt,this.jt.width=this.Pt),this.Wt){this.Wt.displayMonth=this.dt.displayMonth,this.Wt.displayYear=this.dt.displayYear,this.Wt.locale=this.locale,this.Wt.size=this.lt,this.Wt.width=this.Pt,this.qt&&(this.Wt.dayContentFn=this.qt),this.Rt&&(this.Wt.customCSS=this.Rt);const{selectedYear:n,selectedMonth:t,selectedDay:e}=this.dt;this.Wt.value=n&&t&&e?new Date(n,t-1,e).getTime():null}}updateFormValue(){if(this.Ht)return;if(!this.m)return;const n=this.getAttribute("name"),{selectedYear:t,selectedMonth:e,selectedDay:o}=this.dt;if(n&&t&&e&&o){const n=Ie(t,e,o);this.m.setFormValue(n)}else this.m.setFormValue("")}handleNavigationChange(n){n.preventDefault(),n.stopPropagation();const{month:t,year:e}=n.detail;this.dt.displayMonth=t,this.dt.displayYear=e,this.syncChildComponents(),this.dispatchEvent(new CustomEvent("navigate",{detail:{month:t,year:e,action:"navigate",source:"navigation"},bubbles:!0,composed:!0,cancelable:!1}))}handleDayClick(n){n.preventDefault(),n.stopPropagation();const{dayContext:t,year:e,month:o,day:i}=n.detail;this.Ht?this.dispatchEvent(new CustomEvent("day-click",{detail:n.detail,bubbles:!0,composed:!0,cancelable:!0})):(this.dt.selectedYear=e,this.dt.selectedMonth=o,this.dt.selectedDay=i,this.dt.displayYear=e,this.dt.displayMonth=o,this.setAttribute("year",""+e),this.setAttribute("month",""+o),this.setAttribute("day",""+i),this.updateFormValue(),this.syncChildComponents(),this.dispatchEvent(new CustomEvent("change",{detail:{year:e,month:o,day:i,action:"select",source:"day-click",dayContext:t},bubbles:!0,composed:!0,cancelable:!1})))}refresh(){this.syncChildComponents(),this.Wt&&"function"==typeof this.Wt.refresh&&this.Wt.refresh()}createNavigation(){const n=document.createElement("ty-calendar-navigation");return n.displayMonth=this.dt.displayMonth,n.displayYear=this.dt.displayYear,n.locale=this.locale,n.size=this.lt,this.Pt&&(n.width=this.Pt),n.addEventListener("change",n=>this.handleNavigationChange(n)),this.jt=n,n}createMonthDisplay(){const n=document.createElement("ty-calendar-month");n.displayMonth=this.dt.displayMonth,n.displayYear=this.dt.displayYear,n.locale=this.locale,n.size=this.lt,this.Pt&&(n.width=this.Pt);const{selectedYear:t,selectedMonth:e,selectedDay:o}=this.dt;return t&&e&&o&&(n.value=new Date(t,e-1,o).getTime()),this.qt&&(n.dayContentFn=this.qt),this.Rt&&(n.customCSS=this.Rt),n.addEventListener("day-click",n=>this.handleDayClick(n)),this.Wt=n,n}render(){const n=this.shadowRoot;if(!n)return;r(n,{css:"\n/* ============================================================================\n Calendar Container\n ============================================================================ */\n\n.calendar-container {\n display: flex;\n flex-direction: column;\n gap: 0.125rem;\n box-sizing: border-box;\n font-family: system-ui, sans-serif;\n}\n\n/* ============================================================================\n Responsive Adjustments\n ============================================================================ */\n\n@media (max-width: 320px) {\n .calendar-container {\n gap: 0.375rem;\n }\n}\n",id:"ty-calendar"}),n.innerHTML="";const t=document.createElement("div");if(t.className="calendar-container",this.Ft){const n=this.createNavigation();t.appendChild(n)}const e=this.createMonthDisplay();t.appendChild(e),n.appendChild(t)}};Oe.formAssociated=!0;let Le=Oe;customElements.get("ty-calendar")||customElements.define("ty-calendar",Le);const Ne='\n/* Date Picker Component Styles */\n:host {\n display: block;\n width: auto;\n min-width: 200px;\n\n /* ==========================================================================\n Theming Tokens — Date Picker Stub\n Thin shim over --ty-input-*. Override these to retheme just the date-picker\n trigger without affecting other inputs.\n ========================================================================== */\n --ty-date-picker-bg: var(--ty-input-bg);\n --ty-date-picker-color: var(--ty-input-color);\n --ty-date-picker-placeholder: var(--ty-input-placeholder);\n --ty-date-picker-border: var(--ty-input-border);\n --ty-date-picker-border-hover: var(--ty-input-border-hover);\n --ty-date-picker-border-focus: var(--ty-input-border-focus);\n --ty-date-picker-shadow-focus: var(--ty-input-shadow-focus);\n --ty-date-picker-disabled-bg: var(--ty-input-disabled-bg);\n --ty-date-picker-disabled-color: var(--ty-input-disabled-color);\n --ty-date-picker-radius: var(--ty-radius-md);\n\n /* ==========================================================================\n Theming Tokens — Calendar Popup Surface\n Shared with ty-calendar / ty-calendar-month theming.\n ========================================================================== */\n --ty-calendar-surface-bg: var(--ty-surface-floating);\n --ty-calendar-surface-border: var(--ty-input-border);\n --ty-calendar-surface-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.1);\n --ty-calendar-surface-radius: var(--ty-radius-lg);\n\n /* ==========================================================================\n Theming Tokens — Time Section\n ========================================================================== */\n --ty-calendar-time-bg: var(--ty-bg-neutral-faint);\n --ty-calendar-time-border: var(--ty-input-border);\n --ty-calendar-time-label-color: var(--ty-color-neutral);\n --ty-calendar-time-input-color: var(--ty-input-color);\n --ty-calendar-time-placeholder-color: var(--ty-input-placeholder);\n --ty-calendar-time-icon-color: var(--ty-color-neutral-soft);\n}\n\n/* Container structure (reuses dropdown patterns) */\n.dropdown-container {\n display: flex;\n flex-direction: column;\n width: 100%;\n box-sizing: border-box;\n}\n\n.dropdown-label {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n font-weight: var(--ty-font-medium);\n color: var(--ty-label-color);\n margin-bottom: 6px;\n padding-left: 12px;\n display: flex;\n align-items: center;\n}\n\n.required-icon {\n display: inline-flex;\n align-items: center;\n color: #ef4444;\n width: 12px;\n height: 12px;\n vertical-align: middle;\n margin-left: 4px;\n}\n\n.dropdown-wrapper {\n position: relative;\n display: block;\n width: 100%;\n}\n\n/* Start-slot icon (leading content inside the date-picker stub) */\n.date-picker-stub ::slotted([slot="start"]) {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin-right: 0.5rem;\n color: var(--ty-color-text-soft);\n}\n\n.date-picker-stub ::slotted(ty-icon[slot="start"]) {\n width: 1em;\n height: 1em;\n}\n\n/* Date picker stub (styled like dropdown) */\n.date-picker-stub {\n width: 100%;\n cursor: pointer;\n box-sizing: border-box;\n position: relative;\n display: flex;\n align-items: center;\n background: var(--ty-date-picker-bg);\n color: var(--ty-date-picker-color);\n border: 1px solid var(--ty-date-picker-border);\n border-radius: var(--ty-date-picker-radius);\n font-family: var(--ty-font-sans);\n font-size: var(--ty-font-sm);\n font-weight: var(--ty-font-normal);\n line-height: var(--ty-line-height-tight);\n min-height: var(--ty-size-md);\n padding: var(--ty-spacing-2) var(--ty-spacing-3);\n padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n transition: var(--ty-transition-all), opacity 0.2s ease;\n outline: none;\n}\n\n.date-picker-stub:hover:not([disabled]):not(.open) {\n border-color: var(--ty-date-picker-border-hover);\n}\n\n.date-picker-stub[disabled] {\n background-color: var(--ty-date-picker-disabled-bg);\n color: var(--ty-date-picker-disabled-color);\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n.date-picker-stub:focus,\n.date-picker-stub.open {\n border-color: var(--ty-date-picker-border-focus);\n box-shadow: 0 0 0 3px var(--ty-date-picker-shadow-focus);\n}\n\n/* Size variants */\n.date-picker-stub.xs {\n min-height: var(--ty-size-xs);\n font-size: var(--ty-font-xs);\n padding: var(--ty-spacing-1) var(--ty-spacing-2);\n padding-right: calc(var(--ty-spacing-2) + 0.875rem + var(--ty-spacing-1));\n}\n\n.date-picker-stub.sm {\n min-height: var(--ty-size-sm);\n font-size: var(--ty-font-xs);\n padding: var(--ty-spacing-1) var(--ty-spacing-2);\n padding-right: calc(var(--ty-spacing-2) + 0.875rem + var(--ty-spacing-1));\n}\n\n.date-picker-stub.lg {\n min-height: var(--ty-size-lg);\n font-size: var(--ty-font-base);\n padding: var(--ty-spacing-2) var(--ty-spacing-4);\n padding-right: calc(var(--ty-spacing-4) + 1.125rem + var(--ty-spacing-2));\n}\n\n.date-picker-stub.xl {\n min-height: var(--ty-size-xl);\n font-size: var(--ty-font-lg);\n padding: var(--ty-spacing-3) var(--ty-spacing-4);\n padding-right: calc(var(--ty-spacing-4) + 1.25rem + var(--ty-spacing-3));\n}\n\n/* Flavor variants */\n/* Primary - Main brand focus state */\n.date-picker-stub.primary {\n border-color: var(--ty-input-primary-border, var(--ty-color-primary));\n}\n\n.date-picker-stub.primary:hover:not([disabled]) {\n border-color: var(--ty-color-primary-mild);\n}\n\n.date-picker-stub.primary:focus,\n.date-picker-stub.primary.open {\n border-color: var(--ty-color-primary-mild);\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n/* Secondary - Supporting action focus state */\n.date-picker-stub.secondary {\n border-color: var(--ty-input-secondary-border, var(--ty-color-secondary));\n}\n\n.date-picker-stub.secondary:hover:not([disabled]) {\n border-color: var(--ty-color-secondary-mild);\n}\n\n.date-picker-stub.secondary:focus,\n.date-picker-stub.secondary.open {\n border-color: var(--ty-color-secondary-mild);\n box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);\n}\n\n/* Success - Valid/confirmed input state */\n.date-picker-stub.success {\n border-color: var(--ty-input-success-border, var(--ty-color-success));\n}\n\n.date-picker-stub.success:hover:not([disabled]) {\n border-color: var(--ty-color-success-mild);\n}\n\n.date-picker-stub.success:focus,\n.date-picker-stub.success.open {\n border-color: var(--ty-color-success-mild);\n box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);\n}\n\n/* Danger - Error/invalid input state */\n.date-picker-stub.danger {\n border-color: var(--ty-input-danger-border, var(--ty-color-danger));\n}\n\n.date-picker-stub.danger:hover:not([disabled]) {\n border-color: var(--ty-color-danger-mild);\n}\n\n.date-picker-stub.danger:focus,\n.date-picker-stub.danger.open {\n border-color: var(--ty-color-danger-mild);\n box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);\n}\n\n/* Warning - Caution/attention needed input state */\n.date-picker-stub.warning {\n border-color: var(--ty-input-warning-border, var(--ty-color-warning));\n}\n\n.date-picker-stub.warning:hover:not([disabled]) {\n border-color: var(--ty-color-warning-mild);\n}\n\n.date-picker-stub.warning:focus,\n.date-picker-stub.warning.open {\n border-color: var(--ty-color-warning-mild);\n box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);\n}\n\n/* Text content */\n.stub-text {\n flex: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n user-select: none;\n color: inherit;\n pointer-events: none;\n}\n\n.stub-text.placeholder {\n color: var(--ty-date-picker-placeholder);\n}\n\n/* Icons */\n.stub-icons {\n display: flex;\n align-items: center;\n gap: var(--ty-spacing-1);\n position: absolute;\n right: var(--ty-spacing-3);\n top: 50%;\n transform: translateY(-50%);\n height: 1rem;\n pointer-events: none;\n z-index: 2;\n}\n\n.stub-clear {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1rem;\n height: 1rem;\n padding: 0;\n border: none;\n background: none;\n color: var(--ty-color-neutral-soft);\n cursor: pointer;\n border-radius: var(--ty-radius-sm);\n transition: all 0.15s ease;\n pointer-events: auto;\n}\n\n.stub-clear:hover {\n color: var(--ty-color-negative);\n background-color: var(--ty-bg-negative-faint);\n}\n\n.stub-arrow {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1rem;\n height: 1rem;\n color: var(--ty-color-neutral-soft);\n}\n\n.date-picker-stub:hover .stub-arrow {\n color: var(--ty-color-neutral);\n}\n\n.date-picker-stub:focus .stub-arrow,\n.date-picker-stub.open .stub-arrow {\n color: var(--ty-date-picker-border-focus);\n}\n\n/* Calendar dialog (showModal positioning system) */\n.calendar-dialog {\n position: fixed;\n flex-direction: column;\n max-width: 90vw;\n margin: 0;\n padding: 0;\n border: none;\n background: transparent;\n box-sizing: border-box;\n padding: var(--calendar-padding, 8px);\n\n /* Hidden by default */\n opacity: 0;\n transition: opacity 200ms ease;\n\n transform: translate(var(--calendar-offset-x, 0px), var(--calendar-offset-y, 0px));\n top: -1000px;\n left: -1000px;\n}\n\n/* Direction-based positioning with CSS classes */\n.calendar-dialog.position-below {\n left: var(--calendar-x);\n top: var(--calendar-y);\n}\n\n.calendar-dialog.position-above {\n left: var(--calendar-x);\n bottom: var(--calendar-y);\n top: auto;\n flex-direction: column-reverse;\n}\n\n.calendar-dialog.open {\n opacity: 1;\n}\n\n.calendar-dialog::backdrop {\n background: transparent\n}\n\n/* Calendar content container */\n.calendar-content {\n background-color: var(--ty-calendar-surface-bg);\n border: 1px solid var(--ty-calendar-surface-border);\n border-radius: var(--ty-calendar-surface-radius);\n box-shadow: var(--ty-calendar-surface-shadow);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n/* Native date input for mobile */\n/* Native input is invisible — used only to trigger the OS picker */\n.native-date-input {\n position: absolute;\n inset: 0;\n opacity: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n border: none;\n cursor: pointer;\n z-index: 1;\n}\n\n.native-date-input::-webkit-calendar-picker-indicator {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n cursor: pointer;\n}\n\n/* Time input section */\n.time-section {\n display: flex;\n min-height: 2.5rem;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n padding: 0.5rem 1rem;\n border-top: 1px solid var(--ty-calendar-time-border);\n background-color: var(--ty-calendar-time-bg);\n width: 100%;\n box-sizing: border-box;\n position: relative;\n}\n\n.time-label {\n font-size: var(--ty-font-sm);\n font-weight: 500;\n color: var(--ty-calendar-time-label-color);\n flex-shrink: 0;\n}\n\n.time-input {\n width: 3.5rem;\n border: none;\n border-radius: var(--ty-radius-sm);\n background: transparent;\n color: var(--ty-calendar-time-input-color);\n font-family: var(--ty-font-sans);\n font-size: var(--ty-font-sm);\n text-align: center;\n outline: none;\n}\n\n.time-input::placeholder {\n color: var(--ty-calendar-time-placeholder-color);\n}\n\n.time-icon {\n display: flex;\n align-items: center;\n color: var(--ty-calendar-time-icon-color);\n width: 1rem;\n height: 1rem;\n flex-shrink: 0;\n}\n',qe="<svg stroke='currentColor' fill='none' stroke-width='2' viewBox='0 0 24 24' width='16' height='16' xmlns='http://www.w3.org/2000/svg'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'></rect><line x1='16' y1='2' x2='16' y2='6'></line><line x1='8' y1='2' x2='8' y2='6'></line><line x1='3' y1='10' x2='21' y2='10'></line></svg>",Re="<svg stroke='currentColor' fill='none' stroke-width='2' viewBox='0 0 24 24' width='14' height='14' xmlns='http://www.w3.org/2000/svg'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>";function Pe(n,t){if(!n)return null;let e=null;if("string"==typeof n)if(/^\d{4}-\d{2}-\d{2}$/.test(n)){const[t,o,i]=n.split("-");e=new Date(parseInt(t,10),parseInt(o,10)-1,parseInt(i,10),0,0,0,0)}else e=new Date(n);else"number"==typeof n&&(e=new Date(n));return!e||isNaN(e.getTime())?null:{year:e.getFullYear(),month:e.getMonth()+1,day:e.getDate(),hour:t?e.getHours():0,minute:t?e.getMinutes():0}}function Ve(n){const{year:t,month:e,day:o,hour:i,minute:r}=n;return t&&e&&o?new Date(t,e-1,o,i||0,r||0,0,0):null}function Be(n){if(!n.year||!n.month||!n.day)return null;const t=Ve(n);return t?t.toISOString():null}function Fe(n,t){if(!n.year||!n.month||!n.day)return null;const e=(""+n.year).padStart(4,"0"),o=(""+n.month).padStart(2,"0"),i=(""+n.day).padStart(2,"0");return t?`${e}-${o}-${i}T${(""+(n.hour||0)).padStart(2,"0")}:${(""+(n.minute||0)).padStart(2,"0")}`:`${e}-${o}-${i}`}function He(n,t){return`${(""+n).padStart(2,"0")}:${(""+t).padStart(2,"0")}`}function je(n){switch(n){case 0:return 1;case 1:return 3;case 3:return 4;case 4:case 5:return 5;default:return n}}class We{constructor(n,t,e=0,o=0){this.element=n,this.datePickerElement=t;const i=He(e,o);this.state={hour:e,minute:o,caretPosition:0,displayValue:i,rawDigits:(""+e).padStart(2,"0")+(""+o).padStart(2,"0")},this.element.value=i,this.setupEventListeners()}setupEventListeners(){this.element.addEventListener("keydown",n=>this.handleKeyDown(n)),this.element.addEventListener("input",n=>this.handleInput(n)),this.element.addEventListener("click",n=>this.handleClick(n)),this.element.addEventListener("focus",n=>this.handleFocus(n))}handleKeyDown(n){const t=n.key;switch(t){case"ArrowRight":this.handleArrowRight(n);break;case"ArrowLeft":this.handleArrowLeft(n);break;case"Backspace":this.handleBackspace(n);break;case"Delete":this.handleDelete(n);break;case"Home":n.preventDefault(),this.updateState({caretPosition:0});break;case"End":n.preventDefault(),this.updateState({caretPosition:5});break;case"Tab":break;default:/^\d$/.test(t)&&this.handleDigitInput(n,parseInt(t,10))}}handleInput(n){n.preventDefault()}handleClick(n){this.updateState({caretPosition:0})}handleFocus(n){this.updateState({caretPosition:0})}handleArrowRight(n){n.preventDefault();const t=je(this.state.caretPosition);this.updateState({caretPosition:t})}handleArrowLeft(n){n.preventDefault();const t=function(n){switch(n){case 5:return 4;case 4:return 3;case 3:return 1;case 1:case 0:return 0;default:return n}}(this.state.caretPosition);this.updateState({caretPosition:t})}handleDigitInput(n,t){n.preventDefault();const e=this.state.caretPosition;if(![0,1,3,4].includes(e))return;if(!function(n,t,e){switch(t){case 0:return 2>=n;case 1:return 2!==parseInt(e[0],10)||3>=n;case 3:return 5>=n;case 4:return!0;default:return!1}}(t,e,this.state.rawDigits))return;const o=this.replaceDigitAtPosition(e,t);if(!o)return;const i=je(e);this.updateState({...o,caretPosition:i}),this.notifyTimeChange()}handleBackspace(n){n.preventDefault();const t=this.state.caretPosition;if(0===t)return;const e=1===t?0:3===t?1:4===t?3:5===t?4:0,o=this.zeroDigitAtPosition(e);o&&(this.updateState({...o,caretPosition:e}),this.notifyTimeChange())}handleDelete(n){n.preventDefault();const t=this.state.caretPosition;if(![0,1,3,4].includes(t))return;const e=this.zeroDigitAtPosition(t);e&&(this.updateState({...e,caretPosition:t}),this.notifyTimeChange())}replaceDigitAtPosition(n,t){const e=function(n){switch(n){case 0:default:return 0;case 1:return 1;case 3:return 2;case 4:return 3}}(n),o=this.state.rawDigits.split("");o[e]=""+t;const i=o.join(""),r=function(n){if(!n||4!==n.length)return null;const t=n.substring(0,2),e=n.substring(2,4),o=parseInt(t,10),i=parseInt(e,10);return 0>o||o>23||0>i||i>59?null:{hour:o,minute:i}}(i);return r?{rawDigits:i,hour:r.hour,minute:r.minute,displayValue:He(r.hour,r.minute)}:null}zeroDigitAtPosition(n){return this.replaceDigitAtPosition(n,0)}updateState(n){this.state={...this.state,...n},this.element.value=this.state.displayValue;const t=this.state.caretPosition,e=0===t?0:1===t?1:2===t||3===t?3:4===t?4:5===t?5:t;this.element.setSelectionRange(e,e)}notifyTimeChange(){this.datePickerElement.handleTimeInputChange(this.state.hour,this.state.minute)}getTime(){return{hour:this.state.hour,minute:this.state.minute}}setTime(n,t){const e=He(n,t);this.state={...this.state,hour:n,minute:t,displayValue:e,rawDigits:(""+n).padStart(2,"0")+(""+t).padStart(2,"0")},this.element.value=e}}const Ye=class extends o{constructor(){super(),this.dt={withTime:!1,open:!1},this.Yt=0,r(this.shadowRoot,{css:Ne,id:"ty-date-picker"})}onConnect(){this.initializeState(),this.render(),this.Z=W(this,()=>{this.render()})}onDisconnect(){this.Z&&(this.Z(),this.Z=void 0),this.cleanup()}onPropertiesChanged(n){for(const{name:t,newValue:e}of n)switch(t){case"size":case"flavor":case"label":case"placeholder":case"required":case"disabled":case"clearable":case"format":case"locale":break;case"value":{const n=Pe(e,this.dt.withTime);if(null===n){(void 0!==this.dt.year||void 0!==this.dt.month||void 0!==this.dt.day)&&(this.dt={withTime:this.dt.withTime,open:this.dt.open});break}const t={year:this.dt.year,month:this.dt.month,day:this.dt.day,hour:this.dt.hour,minute:this.dt.minute};(n?.year!==t.year||n?.month!==t.month||n?.day!==t.day||n?.hour!==t.hour||n?.minute!==t.minute)&&(this.dt={...this.dt,...n});break}case"with-time":e!==this.dt.withTime&&(this.dt.withTime=e,void 0!==this.dt.year&&void 0!==this.dt.month&&void 0!==this.dt.day&&this.syncFormValue())}}getFormValue(){return Be(this.getComponents())}getComponents(){return{year:this.dt.year,month:this.dt.month,day:this.dt.day,hour:this.dt.hour,minute:this.dt.minute}}hasDate(){return!!(this.dt.year&&this.dt.month&&this.dt.day)}getFormattedValue(n){const t=n||this.getComponents();return t.year&&t.month&&t.day?function(n,t,e,o){if(!n.year||!n.month||!n.day)return null;const i=Ve(n);if(!i)return null;const r={dateStyle:t};return o&&(r.timeStyle="short"),new Intl.DateTimeFormat(e,r).format(i)}(t,this.getProperty("format")||"long",j(this,this.getProperty("locale")),this.dt.withTime):null}initializeState(){const n=this.getProperty("value"),t=this.getProperty("with-time"),e=Pe(n,t);this.dt=null===e?{withTime:t,open:!1}:{...e,withTime:t,open:!1},this.syncFormValue()}updateState(n,t=!1){this.dt={...this.dt,...n},(t||!this.dt.open||!this.dt.withTime)&&this.syncFormValue()}syncFormValue(){const n=this.getFormValue();n!==this.getProperty("value")&&this.setProperty("value",n||null)}handleTimeInputChange(n,t){if(!this.hasDate())return;const e={...this.getComponents(),hour:n,minute:t};this.updateState(e,!0),this.emitChangeEvent(e,"time-change")}emitChangeEvent(n,t){const e=n?Be(n):null,o=n?Fe(n,this.dt.withTime):null,i=n?Ve(n)?.getTime()??null:null,r=n?this.getFormattedValue(n):null,s=new CustomEvent("change",{detail:{value:e,localValue:o,milliseconds:i,formatted:r,source:t},bubbles:!0,cancelable:!0});this.dispatchEvent(s)}get size(){return this.getProperty("size")}set size(n){this.setProperty("size",n)}get flavor(){return this.getProperty("flavor")}set flavor(n){this.setProperty("flavor",n)}get label(){return this.getProperty("label")}set label(n){this.setProperty("label",n)}get placeholder(){return this.getProperty("placeholder")}set placeholder(n){this.setProperty("placeholder",n)}get name(){return this.getProperty("name")}set name(n){this.setProperty("name",n)}get format(){return this.getProperty("format")}set format(n){this.setProperty("format",n)}get locale(){return this.getProperty("locale")}set locale(n){this.setProperty("locale",n)}get required(){return this.getProperty("required")}set required(n){this.setProperty("required",n)}get disabled(){return this.getProperty("disabled")}set disabled(n){this.setProperty("disabled",n)}get clearable(){return this.getProperty("clearable")}set clearable(n){this.setProperty("clearable",n)}get withTime(){return this.getProperty("with-time")}set withTime(n){this.setProperty("with-time",n)}get value(){return this.getProperty("value")||null}set value(n){if(null==n||""===n)this.setProperty("value",null);else{const t=n instanceof Date?n.toISOString():n;this.setProperty("value",t)}}buildStubClasses(){const n=["date-picker-stub"],t=this.getProperty("size")||"md",e=this.getProperty("flavor");return n.push(t),e&&"default"!==e&&n.push(e),this.getProperty("disabled")&&n.push("disabled"),this.getProperty("required")&&n.push("required"),this.dt.open&&n.push("open"),n.join(" ")}renderStub(){const n=document.createElement("div");n.className=this.buildStubClasses();const t=this.getProperty("disabled");t&&n.setAttribute("disabled","true");const e=document.createElement("slot");e.name="start";const o=document.createElement("span");o.className="stub-text";const i=this.getFormattedValue(),r=this.getProperty("placeholder")||"Select date...";o.textContent=i||r,i||o.classList.add("placeholder");const s=document.createElement("div");if(s.className="stub-icons",this.getProperty("clearable")&&i&&!t){const n=document.createElement("button");n.className="stub-clear",n.type="button",n.innerHTML=Re,n.addEventListener("click",n=>this.handleClearClick(n)),s.appendChild(n)}const a=document.createElement("span");return a.className="stub-arrow",a.innerHTML=qe,s.appendChild(a),n.addEventListener("click",n=>this.handleStubClick(n)),n.appendChild(e),n.appendChild(o),n.appendChild(s),n}createTimeInputElement(){const n=document.createElement("input");return n.type="text",n.className="time-input",n.placeholder="HH:mm",n.autocomplete="off",n.maxLength=5,n}renderTimeSection(){const n=document.createElement("div");n.className="time-section";const t=document.createElement("label");t.className="time-label",t.textContent="Time:";const e=this.createTimeInputElement();this._t=new We(e,this,this.dt.hour||0,this.dt.minute||0);const o=document.createElement("span");return o.className="time-icon",o.innerHTML="<svg stroke='currentColor' fill='none' stroke-width='2' viewBox='0 0 24 24' width='16' height='16' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='10'></circle><polyline points='12,6 12,12 16,14'></polyline></svg>",n.appendChild(t),n.appendChild(e),n.appendChild(o),n}renderCalendarDropdown(){const n=document.createElement("dialog");n.className="calendar-dialog";const t=document.createElement("div");t.className="calendar-content";const e=document.createElement("ty-calendar");this.dt.year&&this.dt.month&&this.dt.day&&(e.setAttribute("year",""+this.dt.year),e.setAttribute("month",""+this.dt.month),e.setAttribute("day",""+this.dt.day));const o=j(this,this.getProperty("locale"));return o&&e.setAttribute("locale",o),e.addEventListener("change",n=>this.handleCalendarChange(n)),t.appendChild(e),this.dt.withTime&&t.appendChild(this.renderTimeSection()),n.appendChild(t),n.addEventListener("close",()=>{this.updateState({open:!1})}),n}renderNativeInput(){const n=document.createElement("div");n.className="dropdown-wrapper";const t=document.createElement("div");t.className=this.buildStubClasses();const e=this.getProperty("disabled");e&&t.setAttribute("disabled","true");const o=document.createElement("input");o.className="native-date-input",o.type=this.dt.withTime?"datetime-local":"date",e&&(o.disabled=!0),this.getProperty("required")&&(o.required=!0);const i=Fe(this.getComponents(),this.dt.withTime);i&&(o.value=i);const r=this.getProperty("placeholder")||"Select date...",s=this.getFormattedValue(),a=document.createElement("span");a.className="stub-text"+(s?"":" placeholder"),a.textContent=s||r,o.addEventListener("change",()=>{if(!o.value)return void this.clearValue();const n=Pe(o.value,this.dt.withTime);n&&(this.updateState(n,!0),this.emitChangeEvent(n,"selection"))});const l=document.createElement("slot");l.name="start",t.appendChild(l),t.appendChild(o),t.appendChild(a);const d=document.createElement("div");if(d.className="stub-icons",this.getProperty("clearable")&&i&&!e){const n=document.createElement("button");n.className="stub-clear",n.type="button",n.innerHTML=Re,n.addEventListener("click",n=>this.handleClearClick(n)),d.appendChild(n)}const c=document.createElement("span");return c.className="stub-arrow",c.innerHTML=qe,d.appendChild(c),t.appendChild(d),n.appendChild(t),n}calculateCalendarPosition(){if(!this.shadowRoot)return;if(B())return;const n=this.shadowRoot.querySelector(".date-picker-stub"),t=this.shadowRoot.querySelector(".calendar-dialog");if(!n||!t)return;const e=n.getBoundingClientRect(),o=window.innerHeight,i=window.innerWidth,r=e.top,s=o-e.bottom>=400,a=e.width>i-e.left?Math.max(0,i-e.width-0):e.left-8,l=s?e.bottom:400>r?Math.max(0,Math.min(e.bottom,o-400-0)):o-e.top;this.style.setProperty("--calendar-x",a+"px"),this.style.setProperty("--calendar-y",l+"px"),this.style.setProperty("--calendar-offset-x","0px"),this.style.setProperty("--calendar-offset-y","0px"),s?(t.classList.add("position-below"),t.classList.remove("position-above")):(t.classList.add("position-above"),t.classList.remove("position-below"))}renderContainer(){const n=document.createElement("div");n.className="dropdown-container";const t=this.getProperty("label");if(t){const e=document.createElement("label");e.className="dropdown-label",e.innerHTML=t+(this.getProperty("required")?'<span class="required-icon">*</span>':""),n.appendChild(e)}return n}render(){if(!this.shadowRoot)return;if(r(this.shadowRoot,{css:Ne,id:"ty-date-picker"}),B()){if(this.shadowRoot.querySelector(".native-date-input"))return void this.updateDisplay();this.shadowRoot.innerHTML="";const n=this.renderContainer();return n.appendChild(this.renderNativeInput()),void this.shadowRoot.appendChild(n)}const n=this.shadowRoot.querySelector(".calendar-dialog");if(n&&n.open&&this.dt.open)return this.updateDisplay(),void this.calculateCalendarPosition();this.shadowRoot.innerHTML="";const t=this.renderContainer(),e=document.createElement("div");e.className="dropdown-wrapper",e.appendChild(this.renderStub()),e.appendChild(this.renderCalendarDropdown()),t.appendChild(e),this.shadowRoot.appendChild(t),this.setupEventListeners()}updateDisplay(){if(!this.shadowRoot)return;const n=this.getFormattedValue(),t=this.getProperty("placeholder")||"Select date...",e=this.hasDate(),o=this.getProperty("clearable"),i=this.getProperty("disabled"),r=this.shadowRoot.querySelector(".stub-text");r&&(r.textContent=n||t,r.classList.toggle("placeholder",!n));const s=this.shadowRoot.querySelector(".stub-clear");if(s&&(s.style.display=o&&e&&!i?"":"none"),B()){const n=this.shadowRoot.querySelector(".native-date-input");if(n){const t=Fe(this.getComponents(),this.dt.withTime);n.value=t||""}return}const a=this.shadowRoot.querySelector("ty-calendar");a&&e&&(a.setAttribute("year",""+this.dt.year),a.setAttribute("month",""+this.dt.month),a.setAttribute("day",""+this.dt.day)),this._t&&void 0!==this.dt.hour&&void 0!==this.dt.minute&&this._t.setTime(this.dt.hour,this.dt.minute)}setupEventListeners(){this.Ut&&document.removeEventListener("click",this.Ut),this.Gt&&document.removeEventListener("keydown",this.Gt),this.Ut=n=>this.handleOutsideClick(n),this.Gt=n=>this.handleEscapeKey(n),document.addEventListener("click",this.Ut),document.addEventListener("keydown",this.Gt);const n=this.shadowRoot?.querySelector(".calendar-dialog");n&&(this.Xt=n=>this.handleDialogClick(n),n.addEventListener("click",this.Xt))}handleStubClick(n){n.preventDefault(),!this.getProperty("disabled")&&Date.now()-this.Yt>300&&this.openDropdown()}clearValue(){this.updateState({year:void 0,month:void 0,day:void 0,hour:void 0,minute:void 0},!0),this.value=null,this.emitChangeEvent(null,"clear"),this.render()}handleClearClick(n){n.preventDefault(),n.stopPropagation(),this.clearValue()}handleCalendarChange(n){n.preventDefault(),n.stopPropagation();const t=n.detail.dayContext;if(!t)return;const e={year:t.year,month:t.month,day:t.dayInMonth,hour:this.dt.hour,minute:this.dt.minute};this.updateState(e,!0),this.emitChangeEvent(e,"selection"),this.dt.withTime?requestAnimationFrame(()=>{if(!this.shadowRoot)return;const n=this.shadowRoot.querySelector(".time-input");n&&n.focus()}):this.closeDropdown()}handleDialogClick(n){if(!this.shadowRoot)return;const t=this.shadowRoot.querySelector(".calendar-dialog"),e=this.shadowRoot.querySelector(".calendar-content");n.target===t&&this.dt.open&&e&&!e.contains(n.target)&&(n.preventDefault(),n.stopPropagation(),this.closeDropdown())}handleOutsideClick(n){if(!this.shadowRoot)return;const t=n.target,e=this.shadowRoot.querySelector(".calendar-dialog");this.dt.open&&e&&!this.contains(t)&&!e.contains(t)&&this.closeDropdown()}handleEscapeKey(n){"Escape"===n.key&&this.dt.open&&(n.preventDefault(),this.closeDropdown())}openDropdown(){this.dt.open||B()||(this.updateState({open:!0}),this.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0})),this.render(),requestAnimationFrame(()=>{if(!this.shadowRoot)return;const n=this.shadowRoot.querySelector(".calendar-dialog");if(n){Un("date-picker-"+(this.id||""+this)),n.showModal(),this.calculateCalendarPosition(),n.classList.add("open");const t=this.shadowRoot.activeElement;t&&t.blur()}}))}closeDropdown(){if(!this.dt.open)return;this.Yt=Date.now();const n="date-picker-"+(this.id||""+this);if(this.updateState({open:!1},!0),Gn(n),this.shadowRoot){const n=this.shadowRoot.querySelector(".calendar-dialog");n&&(n.classList.remove("position-above","position-below","open"),n.close())}this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0})),this.render()}cleanup(){if(this.Ut&&document.removeEventListener("click",this.Ut),this.Gt&&document.removeEventListener("keydown",this.Gt),this.Xt&&this.shadowRoot){const n=this.shadowRoot.querySelector(".calendar-dialog");n&&n.removeEventListener("click",this.Xt)}this.dt.open&&Gn("date-picker-"+(this.id||""+this)),this.Ut=void 0,this.Gt=void 0,this.Xt=void 0,this._t=void 0}};Ye.properties={size:{type:"string",visual:!0,default:"md",validate:n=>["xs","sm","md","lg","xl"].includes(n),coerce:n=>["xs","sm","md","lg","xl"].includes(n)?n:"md"},flavor:{type:"string",visual:!0,default:"default"},label:{type:"string",visual:!0,default:""},placeholder:{type:"string",visual:!0,default:"Select date..."},name:{type:"string",visual:!1,default:""},required:{type:"boolean",visual:!0,default:!1},disabled:{type:"boolean",visual:!0,default:!1},clearable:{type:"boolean",visual:!0,default:!0,aliases:{"not-clearable":!1}},format:{type:"string",visual:!0,default:"long",validate:n=>["short","medium","long","full"].includes(n),coerce:n=>["short","medium","long","full"].includes(n)?n:"long"},locale:{type:"string",visual:!0,default:""},value:{type:"string",visual:!0,formValue:!0,emitChange:!1,default:null},"with-time":{type:"boolean",visual:!0,default:!1}},Ye.formAssociated=!0;let _e=Ye;customElements.get("ty-date-picker")||customElements.define("ty-date-picker",_e);const Ue=new Map,Ge=new Map;function Xe(n){return Ue.get(n)}function Ke(n,t){Ge.has(n)||Ge.set(n,new Set),Ge.get(n).add(t);const e=Ue.get(n);return e&&t(e),()=>{Ge.get(n)?.delete(t),0===Ge.get(n)?.size&&Ge.delete(n)}}function Ze(){return Object.fromEntries(Ue)}class TyResizeObserver extends HTMLElement{constructor(){super(),this.xn=null,this.Kt=null;const n=this.attachShadow({mode:"open"});r(n,{css:"\n:host {\n /* Default to block display, user can override */\n display: block;\n /* Ensure the component can participate in layout */\n position: relative;\n}\n\n/* Slot content styling */\n::slotted(*) {\n /* No default styling - preserve natural layout */\n}\n",id:"ty-resize-observer"}),n.innerHTML="<slot></slot>"}static get observedAttributes(){return["id","debounce"]}get debounce(){return parseInt(this.getAttribute("debounce")||"0")}set debounce(n){this.setAttribute("debounce",n+"")}connectedCallback(){this.setupObserver()}disconnectedCallback(){this.cleanup()}setupObserver(){this.xn=new ResizeObserver(n=>{this.debounce>0?(this.Kt&&clearTimeout(this.Kt),this.Kt=window.setTimeout(()=>{this.handleResize(n)},this.debounce)):this.handleResize(n)}),this.xn.observe(this)}handleResize(n){const{width:t,height:e}=n[0].contentRect;this.id&&function(n,t,e){Ue.set(n,{width:t,height:e});const o=Ge.get(n);if(o){const n={width:t,height:e};o.forEach(t=>t(n))}}(this.id,t,e)}cleanup(){var n;this.xn&&(this.xn.disconnect(),this.xn=null),this.Kt&&(clearTimeout(this.Kt),this.Kt=null),this.id&&(Ue.delete(n=this.id),Ge.delete(n))}}customElements.define("ty-resize-observer",TyResizeObserver);const Je=`\n:host {\n display: block;\n position: relative;\n overflow: hidden;\n}\n\n.scroll-wrapper {\n width: 100%;\n height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n/* Allow horizontal scrolling when enabled */\n:host([overflow-x]) .scroll-wrapper {\n overflow-x: auto;\n}\n\n:host([max-height]) .scroll-wrapper {\n max-height: var(--scroll-max-height);\n}\n\n/* ===================================== */\n/* hide-scrollbar: hides native, no custom */\n/* ===================================== */\n\n:host([hide-scrollbar]) .scroll-wrapper {\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n\n:host([hide-scrollbar]) .scroll-wrapper::-webkit-scrollbar {\n display: none;\n}\n\n/* ===================================== */\n/* custom-scrollbar: hides native */\n/* ===================================== */\n\n:host([custom-scrollbar]) .scroll-wrapper {\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n\n:host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar {\n display: none;\n}\n\n/* Show scrollbar tracks on host hover */\n:host([custom-scrollbar]:hover) .ty-scrollbar-track-y.has-overflow,\n:host([custom-scrollbar]:hover) .ty-scrollbar-track-x.has-overflow {\n opacity: 1;\n}\n\n/* Corner gap when both axes are present */\n:host([custom-scrollbar][overflow-x]) .ty-scrollbar-track-y {\n bottom: var(--ty-scrollbar-width, 8px);\n}\n\n:host([custom-scrollbar]) .ty-scrollbar-track-x {\n right: var(--ty-scrollbar-width, 8px);\n}\n\n/* ===================================== */\n/* Shadow Indicators */\n/* ===================================== */\n\n.shadow-overlay {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 2;\n}\n\n.shadow-top,\n.shadow-bottom,\n.shadow-left,\n.shadow-right {\n position: absolute;\n opacity: 0;\n transition: var(--ty-scroll-shadow-transition, opacity 0.2s ease-out);\n pointer-events: none;\n}\n\n.shadow-top {\n top: -40px;\n left: 0;\n right: 0;\n height: 80px;\n background: var(--ty-scroll-shadow-top, radial-gradient(\n ellipse 100% 30% at center,\n rgba(0, 0, 0, 0.1),\n rgba(0, 0, 0, 0),\n transparent\n ));\n clip-path: inset(50% 0 0 0);\n}\n\n.shadow-bottom {\n bottom: -30px;\n left: 0;\n right: 0;\n height: 60px;\n background: var(--ty-scroll-shadow-bottom, radial-gradient(\n ellipse 100% 20% at center,\n rgba(0, 0, 0, 0.15),\n rgba(0, 0, 0, 0),\n transparent\n ));\n clip-path: inset(0 0 50% 0);\n}\n\n.shadow-left {\n left: -30px;\n top: 0;\n bottom: 0;\n width: 60px;\n background: var(--ty-scroll-shadow-left, radial-gradient(\n ellipse 30% 100% at center,\n rgba(0, 0, 0, 0.1),\n rgba(0, 0, 0, 0),\n transparent\n ));\n clip-path: inset(0 0 0 50%);\n}\n\n.shadow-right {\n right: -30px;\n top: 0;\n bottom: 0;\n width: 60px;\n background: var(--ty-scroll-shadow-right, radial-gradient(\n ellipse 30% 100% at center,\n rgba(0, 0, 0, 0.1),\n rgba(0, 0, 0, 0),\n transparent\n ));\n clip-path: inset(0 50% 0 0);\n}\n\n.shadow-left,\n.shadow-right {\n display: none;\n}\n\n:host([overflow-x]) .shadow-left,\n:host([overflow-x]) .shadow-right {\n display: block;\n}\n\n.shadow-top.visible,\n.shadow-bottom.visible,\n.shadow-left.visible,\n.shadow-right.visible {\n opacity: 1;\n}\n\n:host([shadow="false"]) .shadow-overlay {\n display: none;\n}\n\n/* Touch devices - restore native scrollbar */\n@media (pointer: coarse) and (hover: none) {\n :host([custom-scrollbar]) .scroll-wrapper {\n scrollbar-width: thin;\n scrollbar-color: var(--ty-border, rgba(0,0,0,0.2)) transparent;\n }\n :host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar {\n display: block;\n width: 4px;\n height: 4px;\n }\n :host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar-thumb {\n background: var(--ty-border, rgba(0,0,0,0.2));\n border-radius: 2px;\n }\n}\n\n/* Respect reduced motion */\n@media (prefers-reduced-motion: reduce) {\n .shadow-top,\n .shadow-bottom,\n .shadow-left,\n .shadow-right {\n transition-duration: 0ms !important;\n }\n}\n\n/* Shared scrollbar styles */\n${yn}\n`;class TyScrollContainer extends HTMLElement{constructor(){super(),this.Zt=null,this.Jt=null,this.Qt=null,this.ne=null,this.te=null,this.Kn=null,this.xn=null,this.fn=null,this.En=()=>{null===this.fn&&(this.fn=requestAnimationFrame(()=>{this.fn=null,this.ee()}))},this.oe=()=>{this.Kn?.update(),this.ee()};const n=this.attachShadow({mode:"open"});r(n,{css:Je,id:"ty-scroll-container"}),n.innerHTML='\n <div class="scroll-wrapper">\n <slot></slot>\n </div>\n <div class="shadow-overlay">\n <div class="shadow-top"></div>\n <div class="shadow-bottom"></div>\n <div class="shadow-left"></div>\n <div class="shadow-right"></div>\n </div>\n ',this.Zt=n.querySelector(".scroll-wrapper"),this.Jt=n.querySelector(".shadow-top"),this.Qt=n.querySelector(".shadow-bottom"),this.ne=n.querySelector(".shadow-left"),this.te=n.querySelector(".shadow-right")}static get observedAttributes(){return["shadow","max-height","hide-scrollbar","custom-scrollbar","overflow-x"]}get shadow(){return"false"!==this.getAttribute("shadow")}set shadow(n){n?this.removeAttribute("shadow"):this.setAttribute("shadow","false")}get maxHeight(){return this.getAttribute("max-height")}set maxHeight(n){n?this.setAttribute("max-height",n):this.removeAttribute("max-height"),this.ie()}get hideScrollbar(){return this.hasAttribute("hide-scrollbar")}set hideScrollbar(n){n?this.setAttribute("hide-scrollbar",""):this.removeAttribute("hide-scrollbar")}get customScrollbar(){return this.hasAttribute("custom-scrollbar")}set customScrollbar(n){n?this.setAttribute("custom-scrollbar",""):this.removeAttribute("custom-scrollbar")}get overflowX(){return this.hasAttribute("overflow-x")}set overflowX(n){n?this.setAttribute("overflow-x",""):this.removeAttribute("overflow-x")}connectedCallback(){if(this.Zt?.addEventListener("scroll",this.En,{passive:!0}),this.xn=new ResizeObserver(()=>{this.Kn?.update(),this.ee()}),this.Zt){this.xn.observe(this.Zt);const n=this.Zt.querySelector("slot");n&&n.addEventListener("slotchange",this.oe)}this.ie(),this.ee(),this.Jn()}disconnectedCallback(){this.Zt?.removeEventListener("scroll",this.En),this.Zn(),this.xn&&(this.xn.disconnect(),this.xn=null),null!==this.fn&&(cancelAnimationFrame(this.fn),this.fn=null)}attributeChangedCallback(n,t,e){t!==e&&("max-height"===n&&(this.ie(),this.ee(),this.Kn?.update()),"custom-scrollbar"!==n&&"overflow-x"!==n||(this.Zn(),this.Jn(),this.ee()))}Jn(){if(!this.Zt||!this.customScrollbar)return;this.Kn=new mn(this.Zt,{vertical:!0,horizontal:this.overflowX});const n=this.shadowRoot;this.Kn.trackY&&n.appendChild(this.Kn.trackY),this.Kn.trackX&&n.appendChild(this.Kn.trackX)}Zn(){this.Kn&&(this.Kn.trackY?.remove(),this.Kn.trackX?.remove(),this.Kn.destroy(),this.Kn=null)}ie(){if(this.Zt){const n=this.maxHeight;n?(this.Zt.style.setProperty("--scroll-max-height",n),this.Zt.style.maxHeight=n):(this.Zt.style.removeProperty("--scroll-max-height"),this.Zt.style.maxHeight="")}}ee(){if(!this.Zt)return;const{scrollTop:n,scrollLeft:t,scrollHeight:e,scrollWidth:o,clientHeight:i,clientWidth:r}=this.Zt;this.Jt&&this.Jt.classList.toggle("visible",n>2),this.Qt&&this.Qt.classList.toggle("visible",e-2>n+i),this.overflowX&&(this.ne&&this.ne.classList.toggle("visible",t>2),this.te&&this.te.classList.toggle("visible",o-2>t+r))}updateShadows(){this.ee(),this.Kn?.update()}scrollToTop(n=!0){this.Zt?.scrollTo({top:0,behavior:n?"smooth":"auto"})}scrollToBottom(n=!0){this.Zt&&this.Zt.scrollTo({top:this.Zt.scrollHeight,behavior:n?"smooth":"auto"})}scrollToLeft(n=!0){this.Zt?.scrollTo({left:0,behavior:n?"smooth":"auto"})}scrollToRight(n=!0){this.Zt&&this.Zt.scrollTo({left:this.Zt.scrollWidth,behavior:n?"smooth":"auto"})}get scrollElement(){return this.Zt}}customElements.define("ty-scroll-container",TyScrollContainer),"undefined"!=typeof window&&(window.tyVersion=p,window.tyIcons={register:n=>{C(n)},get:n=>S(n),has:n=>E(n),list:()=>A(),cacheInfo:()=>I(),clearCache:()=>T()},window.tyResizeObserver={getSize:n=>Xe(n),onResize:(n,t)=>Ke(n,t),get sizes(){return Ze()}},window.tyLoader={set:n=>a(n),get:()=>l(),reset:()=>d()}),n.IconRegistry=O,n.TyButton=h,n.TyCalendar=Le,n.TyCalendarMonth=TyCalendarMonth,n.TyCalendarNavigation=Me,n.TyCheckbox=J,n.TyCopy=pn,n.TyDatePicker=_e,n.TyDropdown=$t,n.TyFileUpload=bn,n.TyIcon=R,n.TyInput=U,n.TyModal=TyModal,n.TyMultiselect=Pt,n.TyOption=TyOption,n.TyPopup=TyPopup,n.TyRadio=sn,n.TyRadioGroup=ln,n.TyResizeObserver=TyResizeObserver,n.TyScrollContainer=TyScrollContainer,n.TyStep=TyStep,n.TySwitch=tn,n.TyTab=TyTab,n.TyTabs=TyTabs,n.TyTag=V,n.TyTextarea=xn,n.TyTooltip=TyTooltip,n.TyWizard=TyWizard,n.disableScrollLockDebug=function(){window.tyScrollDebug=!1},n.enableScrollLockDebug=function(){window.tyScrollDebug=!0},n.forceUnlockAll=function(){Wn.activeLocks.clear(),_n()},n.getActiveLocks=function(){return new Set(Wn.activeLocks)},n.getAllSizes=Ze,n.getLoaderSvg=l,n.getLockState=function(){return{locked:Wn.locked,scrollY:Wn.scrollY,activeLocks:Array.from(Wn.activeLocks)}},n.getSize=Xe,n.isLocked=function(){return Wn.locked},n.isLockedBy=function(n){return Wn.activeLocks.has(n)},n.lockScroll=Un,n.onResize=Ke,n.resetLoaderSvg=d,n.setLoaderSvg=a,n.unlockScroll=Gn,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});
|