tyrell-components 1.0.0-TC27 → 1.0.0-TC28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/tyrell.js +1 -1
  2. package/lib/styles/select.d.ts +1 -1
  3. package/lib/styles/select.d.ts.map +1 -1
  4. package/lib/styles/select.js +10 -15
  5. package/lib/styles/select.js.map +1 -1
  6. package/lib/version.d.ts +1 -1
  7. package/lib/version.js +1 -1
  8. 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.u(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)}u(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.p=!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.p=!0;const n=this.M();n.length>0&&this.C(n),this.onConnect(),this.v||(this.render(),this.v=!0)}disconnectedCallback(){this.p=!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.p&&this.render(),this.I(n))}I(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}applyLabelName(n){let t=Array.from(this.m.labels??[]).map(n=>n.textContent?.trim()).filter(Boolean).join(" ");if(!t){const n=this.closest("label");if(n){const e=n.cloneNode(!0);e.querySelectorAll(this.tagName.toLowerCase()).forEach(n=>n.remove()),t=e.textContent?.trim()??""}}t?n.setAttribute("aria-label",t):n.removeAttribute("aria-label")}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 c(){s=null}const d=class extends o{constructor(){super(),this.D=!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-semibold);\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 — flat: one variable per segment. No color math here; all the\n --ty-solid-{flavor}-{hover,active,strong,soft} tokens are DERIVED in\n tyrell-brand.css (OKLCH) or set literally in tyrell.css. Override any\n single token to recolor that one segment. Bare .solid = custom-flavor\n fallback, themable via --ty-button-{bg,bg-hover,color}.\n ============================================================ */\n\nbutton.solid {\n border: none;\n --_ring: var(--ty-color-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.tone-plus { background: var(--ty-button-bg, var(--ty-solid-neutral-strong)); }\nbutton.solid.tone-minus { background: var(--ty-button-bg, var(--ty-solid-neutral-soft)); }\nbutton.solid:hover:not(:disabled) { background: var(--ty-button-bg-hover, var(--ty-solid-neutral-hover)); }\nbutton.solid:active:not(:disabled) { background: var(--ty-solid-neutral-active); }\n\nbutton.solid.primary { --_ring: var(--ty-color-primary); background: var(--ty-button-bg, var(--ty-solid-primary)); color: var(--ty-button-color, var(--ty-solid-primary-fg)); }\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) { background: var(--ty-button-bg-hover, var(--ty-solid-primary-hover)); }\nbutton.solid.primary:active:not(:disabled) { background: var(--ty-solid-primary-active); }\n\nbutton.solid.secondary { --_ring: var(--ty-color-secondary); background: var(--ty-button-bg, var(--ty-solid-secondary)); color: var(--ty-button-color, var(--ty-solid-secondary-fg)); }\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) { background: var(--ty-button-bg-hover, var(--ty-solid-secondary-hover)); }\nbutton.solid.secondary:active:not(:disabled) { background: var(--ty-solid-secondary-active); }\n\nbutton.solid.success { --_ring: var(--ty-color-success); background: var(--ty-button-bg, var(--ty-solid-success)); color: var(--ty-button-color, var(--ty-solid-success-fg)); }\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) { background: var(--ty-button-bg-hover, var(--ty-solid-success-hover)); }\nbutton.solid.success:active:not(:disabled) { background: var(--ty-solid-success-active); }\n\nbutton.solid.danger { --_ring: var(--ty-color-danger); background: var(--ty-button-bg, var(--ty-solid-danger)); color: var(--ty-button-color, var(--ty-solid-danger-fg)); }\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) { background: var(--ty-button-bg-hover, var(--ty-solid-danger-hover)); }\nbutton.solid.danger:active:not(:disabled) { background: var(--ty-solid-danger-active); }\n\nbutton.solid.warning { --_ring: var(--ty-color-warning); background: var(--ty-button-bg, var(--ty-solid-warning)); color: var(--ty-button-color, var(--ty-solid-warning-fg)); }\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) { background: var(--ty-button-bg-hover, var(--ty-solid-warning-hover)); }\nbutton.solid.warning:active:not(:disabled) { background: var(--ty-solid-warning-active); }\n\nbutton.solid.neutral { --_ring: var(--ty-color-neutral); background: var(--ty-button-bg, var(--ty-solid-neutral)); color: var(--ty-button-color, var(--ty-solid-neutral-fg)); }\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) { background: var(--ty-button-bg-hover, var(--ty-solid-neutral-hover)); }\nbutton.solid.neutral:active:not(:disabled) { background: var(--ty-solid-neutral-active); }\n\nbutton.solid:focus-visible {\n box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--_ring);\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.D=!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.D)return void this.initializeButtonStructure();const t=this.buildClasses(),e=n.querySelector("button");e&&(e.disabled=this.disabled,e.className=t,this.applyLoadingState(e))}};d.formAssociated=!0,d.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=d;customElements.get("ty-button")||customElements.define("ty-button",h);const u="1.0.0-TC27",p=new Map,b=new Map,g=new Map;let v=null,y=null;const m="ty-icons-v"+u,f="https://ty-icons.local/",w=new Map;let x=!1;function k(n){const t=new Set;Object.entries(n).forEach(([n,e])=>{p.set(n,e),t.add(n)}),t.size>0&&M(t)}function z(n){return p.get(n)}function C(n){return p.has(n)}async function S(){const n=new Set(p.keys());if(p.clear(),"caches"in window)try{await caches.delete(m),x=!1}catch(t){}M(n)}function E(n,t,e){b.set(n,e),t&&g.set(n,t)}function T(n){b.delete(n),g.delete(n)}function M(n){v||(v=new Set),n.forEach(n=>v.add(n)),null!==y&&clearTimeout(y);const t="undefined"!=typeof requestIdleCallback?requestIdleCallback:n=>setTimeout(n,0);y=t(()=>{const n=v;v=null,y=null,n&&n.size>0&&function(n){b.forEach((t,e)=>{const o=g.get(e);o?n.has(o)&&t(new Set([o])):t(n)})}(n)})}function I(){return Array.from(p.keys())}async function D(){const n={version:u,cacheName:m,available:"caches"in window};if(!n.available)return n;try{const t=await caches.open(m),e=(await t.keys()).filter(n=>n.url.startsWith(f));return{...n,iconCount:e.length}}catch(t){return n}}const A=Object.freeze(Object.defineProperty({__proto__:null,addWatcher:E,clearIcons:S,getCacheInfo:D,getCachedIcon:async function(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!==m);await Promise.all(n.map(n=>caches.delete(n)))}catch(n){}}}();const t=await caches.open(m),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},getIcon:z,getIconNames:I,hasIcon:C,registerIcons:k,removeWatcher:T},Symbol.toStringTag,{value:"Module"}));let $=0;const L='<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>',N=class extends o{constructor(){super(),this.A=null,this.$="",this.L=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.L=document.createElement("slot"),this.L.innerHTML=L,this.$=L,this.shadowRoot.appendChild(this.L)}onConnect(){this.A="ty-icon-"+ ++$,this.name&&E(this.A,this.name,n=>{this.name&&n.has(this.name)&&this.render()}),this.updateClasses()}onDisconnect(){this.A&&(T(this.A),this.A=null)}onPropertiesChanged(n){for(const t of n)if("name"===t.name){this.A&&T(this.A);const n=t.newValue||"";n&&this.isConnected&&(this.A="ty-icon-"+ ++$,E(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(L);const t=z(n);this.renderSvg(t||L)}renderSvg(n){this.$!==n&&this.L&&(this.L.innerHTML=n,this.$=n)}};N.formAssociated=!1,N.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 O=N;customElements.get("ty-icon")||customElements.define("ty-icon",O);const R=class extends o{constructor(){super(),this.N=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);\n --tag-border-color: var(--ty-border-primary);\n}\n:host([flavor="primary+"]) {\n --tag-bg: var(--ty-bg-primary-bold);\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-bold);\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);\n --tag-border-color: var(--ty-border-secondary);\n}\n:host([flavor="secondary+"]) {\n --tag-bg: var(--ty-bg-secondary-bold);\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-bold);\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);\n --tag-border-color: var(--ty-border-success);\n}\n:host([flavor="success+"]) {\n --tag-bg: var(--ty-bg-success-bold);\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-bold);\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);\n --tag-border-color: var(--ty-border-danger);\n}\n:host([flavor="danger+"]) {\n --tag-bg: var(--ty-bg-danger-bold);\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-bold);\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);\n --tag-border-color: var(--ty-border-warning);\n}\n:host([flavor="warning+"]) {\n --tag-bg: var(--ty-bg-warning-bold);\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-bold);\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-bold);\n --tag-bg: var(--ty-bg-neutral-soft);\n --tag-border-color: var(--ty-border-bold);\n}\n\n:host([flavor="neutral+"]) {\n --tag-bg: var(--ty-bg-neutral-bold);\n --tag-color: var(--ty-text-bold);\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);\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.N&&(this.N(),this.N=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.N=()=>{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.p&&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)}};R.formAssociated=!0,R.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 P=R;function q(n=768){return window.matchMedia(`(pointer: coarse) and (max-width: ${n}px)`).matches}customElements.get("ty-tag")||customElements.define("ty-tag",P);const V='\n <svg class="option-check" viewBox="0 0 24 24" fill="none" stroke="currentColor"\n stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">\n <path d="M20 6 9 17l-5-5" />\n </svg>\n';class TyOption extends HTMLElement{constructor(){super(),this.O=void 0,this.R=!1,this.P=!1,this.q=!1,this.V=!1,this.B=null,this.F=q(),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 border-radius: var(--ty-radius-md);\n}\n\n:host([cloned]) .option-content {\n padding: 0px;\n background: transparent;\n}\n\n.option-content:hover {\n background: var(--ty-bg-neutral-soft);\n}\n\n.option-content[highlighted] {\n background: var(--ty-bg-neutral-soft);\n color: var(--ty-text-strong);\n font-weight: var(--ty-font-semibold);\n}\n\n/* Selected: quiet — bolder text color only, no background slab, no weight change */\n.option-content[selected] {\n background: transparent;\n color: var(--ty-text-bold);\n}\n\n/* Lucide check — right-aligned, visible only on selected options */\n.option-check {\n display: none;\n flex-shrink: 0;\n width: 14px;\n height: 14px;\n margin-left: auto;\n color: var(--ty-color-primary);\n}\n\n.option-content[selected] .option-check {\n display: block;\n}\n\n/* Never show the check on the copy cloned into the select's trigger field */\n:host([cloned]) .option-check {\n display: none;\n}\n\n.option-content[selected]:hover {\n background: var(--ty-bg-neutral-soft);\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.O=n.value,delete this.value),this.render()}disconnectedCallback(){this.removeClearButtonListener()}attributeChangedCallback(n,t,e){if(t!==e){switch(n){case"value":this.O=e||void 0;break;case"selected":this.R=null!==e;break;case"disabled":this.P=null!==e;break;case"highlighted":this.q=null!==e;break;case"hidden":this.V=null!==e}this.render()}}getOptionValue(){if(void 0!==this.O)return this.O;const n=this.getAttribute("value");return null!==n?n:this.textContent?.trim()||""}get value(){return this.getOptionValue()}set value(n){this.O!==n&&(this.O=n,void 0!==n?this.setAttribute("value",n):this.removeAttribute("value"),this.render())}get selected(){return this.R}set selected(n){this.R!==n&&(this.R=n,n?this.setAttribute("selected",""):this.removeAttribute("selected"),this.render())}get disabled(){return this.P}set disabled(n){this.P!==n&&(this.P=n,n?this.setAttribute("disabled",""):this.removeAttribute("disabled"),this.render())}get highlighted(){return this.q}set highlighted(n){this.q!==n&&(this.q=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.O}}))},n.addEventListener("click",this.B)}render(){const n=this.shadowRoot;if(this.getOptionValue(),n.querySelector(".option-content")){const t=this.R&&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.R&&this.F){n.innerHTML=`\n <div class="option-content">\n <span class="option-text"><slot></slot></span>\n ${V}\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>${V}</div>`;const t=n.querySelector(".option-content");t&&(this.P?t.setAttribute("disabled",""):t.removeAttribute("disabled"),this.R?t.setAttribute("selected",""):t.removeAttribute("selected"),this.q?t.setAttribute("highlighted",""):t.removeAttribute("highlighted"),this.V?t.setAttribute("hidden",""):t.removeAttribute("hidden"))}}customElements.get("ty-option")||customElements.define("ty-option",TyOption);const B='\n:host {\n display: block;\n font-family: var(--ty-font-sans);\n width: 100%;\n}\n\n:host([size="xl"]) {\n font-size: 20px;\n}\n\n\n:host([size="xs"]) {\n font-size: 12px;\n}\n\n\n:host([size="sm"]) {\n font-size: 14px;\n}\n\n:host([size="lg"]) {\n font-size: 18px;\n}\n\n.input-container {\n display: flex;\n flex-direction: column;\n width: 100%;\n box-sizing: border-box;\n}\n\n/* ===== LABEL STYLING ===== */\n\n.ty-field-label {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n font-weight: var(--ty-font-medium);\n color: var(--ty-label-color);\n margin-bottom: 6px;\n padding-left: 12px;\n display: flex;\n align-items: center;\n}\n\n/* Required indicator - using SVG icon */\n.required-icon {\n display: inline-flex;\n align-items: center;\n color: var(--ty-color-danger);\n width: 12px;\n height: 12px;\n margin-left: 4px;\n vertical-align: middle;\n}\n\n.required-icon svg {\n width: 100%;\n height: 100%;\n}\n\n/* ===== INPUT WRAPPER WITH SLOTS ===== */\n\n.input-wrapper {\n display: flex;\n align-items: center;\n gap: 0.5rem; /* No gap by default */\n width: 100%;\n box-sizing: border-box;\n border: 1px solid var(--input-border, var(--ty-input-border));\n border-radius: var(--ty-radius-base);\n background: var(--input-bg, var(--input-bg, var(--ty-input-bg)));\n transition: all 0.15s ease-in-out;\n \n /* Default size (md) */\n min-height: 40px;\n padding: 0 12px;\n}\n\n/* Wrapper states */\n.input-wrapper:hover:not(.disabled) {\n border-color: var(--input-border-hover, var(--ty-input-border-hover));\n}\n\n.input-wrapper.focused {\n border-color: var(--input-border-focus, var(--ty-input-border-focus));\n box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n.input-wrapper.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n background: var(--input-disabled-bg, var(--ty-input-disabled-bg));\n border-color: var(--input-disabled-border, var(--ty-input-disabled-border));\n}\n\n/* ===== SLOT STYLING ===== */\n\n/* Style slotted content directly (no wrappers needed) */\n::slotted([slot="start"]),\n::slotted([slot="end"]) {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: var(--ty-color-text-soft);\n}\n\n/* Password reveal toggle (rendered for type="password") */\n.password-toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 1.25rem;\n height: 1.25rem;\n padding: 0;\n border: none;\n background: none;\n cursor: pointer;\n color: var(--input-placeholder, var(--ty-input-placeholder));\n transition: color 0.15s ease-in-out;\n}\n.password-toggle:hover {\n color: var(--input-color, var(--ty-input-color));\n}\n.password-toggle:focus-visible {\n outline: 2px solid var(--ty-color-primary);\n outline-offset: 2px;\n border-radius: 2px;\n}\n.password-toggle svg {\n width: 1rem;\n height: 1rem;\n}\n\n/* Icon sizing for slotted icons */\n::slotted(ty-icon) {\n width: 1em;\n height: 1em;\n flex-shrink: 0;\n}\n\n/* ===== ERROR MESSAGE STYLING ===== */\n\n.error-message {\n font-size: var(--ty-font-xs);\n line-height: var(--ty-leading-xs);\n letter-spacing: var(--ty-tracking-xs);\n color: var(--ty-color-danger);\n margin-top: 4px;\n padding-left: 12px;\n}\n\n/* Error state for wrapper */\n.input-wrapper.error {\n border-color: var(--ty-color-danger);\n background: var(--ty-bg-danger-soft);\n}\n\n.input-wrapper.error.focused {\n border-color: var(--ty-color-danger-bold);\n box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n/* ===== INPUT BASE STYLING ===== */\n\ninput {\n /* Reset and base styles — Linear-paired typography */\n flex: 1;\n min-width: 0;\n box-sizing: border-box;\n border: none;\n outline: none;\n background: transparent;\n color: var(--input-color, var(--ty-input-color));\n font-family: inherit;\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n font-weight: var(--ty-font-normal);\n padding: 0;\n margin: 0;\n}\n\n/* Remove number input spinner arrows */\ninput[type="number"]::-webkit-outer-spin-button,\ninput[type="number"]::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\ninput[type="number"] {\n -moz-appearance: textfield;\n}\n\n/* Disabled state */\ninput:disabled {\n cursor: not-allowed;\n color: var(--input-disabled-color, var(--ty-input-disabled-color));\n}\n\n/* Placeholder styling */\ninput::placeholder {\n color: var(--input-placeholder, var(--ty-input-placeholder));\n font-weight: 400;\n}\n\n/* ===== SIZE MODIFIERS ===== */\n\n/* Extra Small */\n.input-wrapper.xs {\n min-height: 32px;\n padding: 0 8px;\n border-radius: var(--ty-input-radius-xs, var(--ty-radius-base));\n}\n\n.input-wrapper.xs input {\n font-size: var(--ty-font-xs);\n line-height: var(--ty-leading-xs);\n letter-spacing: var(--ty-tracking-xs);\n}\n\n/* Small */\n.input-wrapper.sm {\n min-height: 36px;\n padding: 0 10px;\n border-radius: var(--ty-input-radius-sm, var(--ty-radius-base));\n}\n\n.input-wrapper.sm input {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n}\n\n/* Medium (default) */\n.input-wrapper.md {\n min-height: 40px;\n padding: 0 12px;\n border-radius: var(--ty-input-radius-md, var(--ty-radius-base));\n}\n\n.input-wrapper.md input {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n}\n\n/* Large */\n.input-wrapper.lg {\n min-height: 44px;\n padding: 0 14px;\n border-radius: var(--ty-input-radius-lg, var(--ty-radius-base));\n}\n\n.input-wrapper.lg input {\n font-size: var(--ty-font-base);\n line-height: var(--ty-leading-base);\n letter-spacing: var(--ty-tracking-base);\n}\n\n/* Extra Large */\n.input-wrapper.xl {\n min-height: 48px;\n padding: 0 16px;\n border-radius: var(--ty-input-radius-xl, var(--ty-radius-base));\n}\n\n.input-wrapper.xl input {\n font-size: var(--ty-font-lg);\n line-height: var(--ty-leading-lg);\n letter-spacing: var(--ty-tracking-lg);\n}\n\n/* ===== SEMANTIC FLAVOR MODIFIERS ===== */\n\n/* Primary */\n.input-wrapper.primary {\n border-color: var(--ty-input-primary-border, var(--ty-color-primary));\n}\n\n.input-wrapper.primary:hover:not(.disabled) {\n border-color: var(--ty-color-primary-bold);\n}\n\n.input-wrapper.primary.focused {\n border-color: var(--ty-color-primary-bold);\n box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-primary) 15%, transparent);\n}\n\n/* Secondary */\n.input-wrapper.secondary {\n border-color: var(--ty-input-secondary-border, var(--ty-color-secondary));\n}\n\n.input-wrapper.secondary.focused {\n border-color: var(--ty-color-secondary-bold);\n box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-secondary) 15%, transparent);\n}\n\n/* Success */\n.input-wrapper.success {\n border-color: var(--ty-input-success-border);\n}\n\n.input-wrapper.success:hover:not(.disabled) {\n border-color: var(--ty-color-success-bold);\n}\n\n.input-wrapper.success.focused {\n border-color: var(--ty-color-success-bold);\n box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-success) 15%, transparent);\n}\n\n/* Danger */\n.input-wrapper.danger {\n border-color: var(--ty-input-danger-border);\n}\n\n.input-wrapper.danger:hover:not(.disabled) {\n border-color: var(--ty-color-danger-bold);\n}\n\n.input-wrapper.danger.focused {\n border-color: var(--ty-color-danger-bold);\n box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-danger) 15%, transparent);\n}\n\n/* Warning */\n.input-wrapper.warning {\n border-color: var(--ty-input-warning-border);\n}\n\n.input-wrapper.warning:hover:not(.disabled) {\n border-color: var(--ty-color-warning-bold);\n}\n\n.input-wrapper.warning.focused {\n border-color: var(--ty-color-warning-bold);\n box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-warning) 15%, transparent);\n}\n\n/* Neutral (default) */\n.input-wrapper.neutral.focused {\n border-color: var(--input-border-focus, var(--ty-input-border-focus));\n box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n/* ===== ACCESSIBILITY ENHANCEMENTS ===== */\n\ninput:focus-visible {\n outline: none;\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: high) {\n .input-wrapper {\n border-width: 2px;\n }\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n .input-wrapper {\n transition: none;\n }\n}\n\n/* ===== RESPONSIVE BEHAVIOR ===== */\n\n@media (max-width: 640px) {\n .input-wrapper.lg {\n min-height: 40px;\n padding: 0 12px;\n }\n\n .input-wrapper.lg input {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n }\n\n .input-wrapper.xl {\n min-height: 44px;\n padding: 0 14px;\n }\n\n .input-wrapper.xl input {\n font-size: var(--ty-font-base);\n line-height: var(--ty-leading-base);\n letter-spacing: var(--ty-tracking-base);\n }\n}\n\n@media (max-width: 480px) {\n .input-wrapper.xl {\n min-height: 40px;\n padding: 0 12px;\n }\n\n .input-wrapper.xl input {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n }\n}\n';function F(n){return["number","currency","percent","compact"].includes(n)}function H(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 j(n,t){let e=H(n);const o=new MutationObserver(o=>{for(const i of o)if("attributes"===i.type&&"lang"===i.attributeName){const o=H(n);o!==e&&(e=o,t(o))}});return o.observe(document.documentElement,{attributes:!0,attributeFilter:["lang"],subtree:!0}),()=>o.disconnect()}const W='<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>',_='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>',Y=class extends o{constructor(){super(),this.H=null,this.j=!1,this.W=!1,this._=!1,this.Y=null,this.U=null,this.G=null,this.X=null,this.K=null,this.Z=null,r(this.shadowRoot,{css:B,id:"ty-input"})}onConnect(){this.initializeShadowValue(),this.J=j(this,()=>{this.render()})}onDisconnect(){this.removeEventListeners(),this.J&&(this.J(),this.J=void 0),null!==this.K&&(clearTimeout(this.K),this.K=null),null!==this.Z&&(clearTimeout(this.Z),this.Z=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"),this._=!0):this._&&("danger"===this.getProperty("flavor")&&this.setProperty("flavor","neutral"),this._=!1)}}onFormReset(){this.H=null,this.j=!1,null!==this.K&&(clearTimeout(this.K),this.K=null),null!==this.Z&&(clearTimeout(this.Z),this.Z=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(F(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 F(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 H(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.U&&(t.removeEventListener("change",this.U),this.U=null),this.G&&(t.removeEventListener("focus",this.G),this.G=null),this.X&&(t.removeEventListener("blur",this.X),this.X=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),this.updateValidity(),null!==this.K&&clearTimeout(this.K),this.debounce>0?this.K=window.setTimeout(()=>{this.dispatchInputEvent(t.value,n),this.K=null},this.debounce):this.dispatchInputEvent(e,n)},this.U=n=>{n.stopPropagation(),n.stopImmediatePropagation();const e=n.target.value;this.H=this.parseShadowValue(e),this.m.setFormValue(null!==this.H?this.H+"":null),this.updateValidity(),null!==this.Z&&clearTimeout(this.Z),this.debounce>0?this.Z=window.setTimeout(()=>{this.dispatchChangeEvent(t.value,n),this.Z=null},this.debounce):this.dispatchChangeEvent(e,n)},this.G=n=>{this.j=!0,e.classList.add("focused"),F(this.type)&&null!==this.H&&(t.value=this.H+""),this.dispatchEvent(new CustomEvent("focus",{detail:{originalEvent:n},bubbles:!0,composed:!0}))},this.X=n=>{const o=n.target.value;null!==this.K&&(clearTimeout(this.K),this.K=null,this.dispatchInputEvent(o,n)),null!==this.Z&&(clearTimeout(this.Z),this.Z=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.U),t.addEventListener("focus",this.G),t.addEventListener("blur",this.X),this.W=!0)}render(){const n=this.shadowRoot,t=n.querySelector("input"),e=n.querySelector(".input-wrapper"),o=n.querySelector(".ty-field-label"),i=n.querySelector(".error-message"),r=this.buildClassList(),s=["password","email","tel","url"].includes(this.type)?this.type:"text",a=F(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?t.setAttribute("aria-label",this.label):t.removeAttribute("aria-label"),this.label)if(o)o.innerHTML=`${this.label}${this.required?`<span class="required-icon">${W}</span>`:""}`,o.style.display="flex";else{const t=document.createElement("label");t.className="ty-field-label",t.innerHTML=`${this.label}${this.required?`<span class="required-icon">${W}</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="ty-field-label">\n ${this.label}\n ${this.required?`<span class="required-icon">${W}</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 ${"password"===s?`\n <button class="password-toggle" type="button"\n aria-label="Show password" aria-pressed="false">\n ${_}\n </button>`:""}\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.label&&t.setAttribute("aria-label",this.label),this.setupPasswordToggle(),this.setupEventListeners()}this.updateValidity()}setupPasswordToggle(){const n=this.shadowRoot,t=n.querySelector(".password-toggle"),e=n.querySelector("input");t&&e&&(t.addEventListener("mousedown",n=>n.preventDefault()),t.addEventListener("click",()=>{const n="password"===e.type;e.type=n?"text":"password",t.innerHTML=n?'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/></svg>':_,t.setAttribute("aria-label",n?"Hide password":"Show password"),t.setAttribute("aria-pressed",n+"")}))}updateValidity(){const n=this.shadowRoot?.querySelector("input");if(this.disabled)return void this.m.setValidity({});const t=n?n.value:(this.getProperty("value")??"")+"";this.required&&""===t.trim()?this.m.setValidity({valueMissing:!0},"Please fill out this field",n??void 0):this.m.setValidity({})}};Y.formAssociated=!0,Y.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=Y;customElements.get("ty-input")||customElements.define("ty-input",U);const G=class extends o{constructor(){super(),this.W=!1,this.nn=null,this.tn=null,this.G=null,this.X=null,r(this.shadowRoot,{css:'\n:host {\n display: inline-flex;\n width: auto;\n vertical-align: middle;\n}\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 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/* Visible focus ring (keyboard) — .focused is toggled by the component */\n.checkbox-container.focused,\n.checkbox-container:focus-visible {\n box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-primary) 25%, transparent);\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/* ===== SIZES ===== */\n\n.checkbox-container svg {\n width: 16px;\n height: 16px;\n}\n\n.checkbox-container.xs svg {\n width: 12px;\n height: 12px;\n}\n\n.checkbox-container.sm svg {\n width: 14px;\n height: 14px;\n}\n\n.checkbox-container.lg svg {\n width: 20px;\n height: 20px;\n}\n\n.checkbox-container.xl svg {\n width: 24px;\n height: 24px;\n}\n\n/* ===== SEMANTIC FLAVORS ===== */\n\n.checkbox-container.primary {\n color: var(--ty-color-primary-soft);\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.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.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.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/* ===== STATES ===== */\n\n/* Clean tick: no box outline, just the checkmark. Inactive = faint tick. */\n.checkbox-container:not([aria-checked="true"]) {\n opacity: 0.35;\n}\n\n/* Indeterminate (dash) sits between unchecked and checked */\n.checkbox-container[aria-checked="mixed"] {\n opacity: 0.7;\n}\n\n/* Disabled must stay distinguishable from merely-unchecked: grayscale kills\n the flavor color, and disabled-unchecked drops below the unchecked 0.35. */\n.checkbox-container.disabled {\n pointer-events: none;\n cursor: not-allowed;\n opacity: 0.5;\n filter: grayscale(1);\n}\n\n.checkbox-container.disabled:not([aria-checked="true"]) {\n opacity: 0.2;\n}\n\n/* Error state */\n.checkbox-container.error .checkbox-icon {\n color: var(--ty-color-danger);\n}\n\n.checkbox-container.error:focus {\n box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-danger) 15%, transparent);\n}\n',id:"ty-checkbox"})}onConnect(){this.setupEventListeners()}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.indeterminate||!this.checked;this.indeterminate&&(this.indeterminate=!1),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;this.nn&&(this.removeEventListener("click",this.nn),this.nn=null);const n=this.shadowRoot;if(!n)return;const t=n.querySelector(".checkbox-container");t?(this.tn&&(t.removeEventListener("keydown",this.tn),this.tn=null),this.G&&(t.removeEventListener("focus",this.G),this.G=null),this.X&&(t.removeEventListener("blur",this.X),this.X=null),this.W=!1):this.W=!1}setupEventListeners(){if(this.W)return;const n=this.shadowRoot.querySelector(".checkbox-container");n&&(this.nn=n=>{this.handleCheckboxClick(n)},this.tn=n=>{this.handleCheckboxKeydown(n)},this.G=()=>{n.classList.add("focused")},this.X=()=>{n.classList.remove("focused")},this.addEventListener("click",this.nn),n.addEventListener("keydown",this.tn),n.addEventListener("focus",this.G),n.addEventListener("blur",this.X),this.W=!0)}render(){const n=this.shadowRoot;let t=n.querySelector(".checkbox-container");const e=this.buildClassList(),o=this.indeterminate?"mixed":this.checked+"";if(t)t.className="checkbox-container "+e,t.tabIndex=this.disabled?-1:0,t.setAttribute("aria-checked",o),t.setAttribute("aria-disabled",this.disabled+""),t.setAttribute("aria-required",this.required+"");else{t=document.createElement("div"),t.className="checkbox-container "+e,t.tabIndex=this.disabled?-1:0,t.setAttribute("role","checkbox"),t.setAttribute("aria-checked",o),t.setAttribute("aria-disabled",this.disabled+""),t.setAttribute("aria-required",this.required+"");const i=document.createElement("div");i.className="checkbox-icon",t.appendChild(i),n.appendChild(t)}t.querySelector(".checkbox-icon").innerHTML=this.indeterminate?'<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="M96 320C96 302.3 110.3 288 128 288L512 288C529.7 288 544 302.3 544 320C544 337.7 529.7 352 512 352L128 352C110.3 352 96 337.7 96 320z"/></svg>':'<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="M566.6 169.4C579.1 181.9 579.1 202.2 566.6 214.7L278.6 502.7C266.1 515.2 245.8 515.2 233.3 502.7L89.3 358.7C76.8 346.2 76.8 325.9 89.3 313.4C101.8 300.9 122.1 300.9 134.6 313.4L256 434.7L521.4 169.4C533.9 156.9 554.2 156.9 566.6 169.4z"/></svg>',this.setupEventListeners(),this.applyLabelName(t),this.updateValidity()}updateValidity(){const n=this.shadowRoot?.querySelector(".checkbox-container");this.disabled?this.m.setValidity({}):this.required&&!this.checked?this.m.setValidity({valueMissing:!0},"Please check this box",n??void 0):this.m.setValidity({})}get checked(){return this.getProperty("checked")}set checked(n){this.setProperty("checked",n)}get indeterminate(){return this.getProperty("indeterminate")}set indeterminate(n){this.setProperty("indeterminate",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}};G.formAssociated=!0,G.properties={checked:{type:"boolean",visual:!0,formValue:!0,emitChange:!0,default:!1},indeterminate:{type:"boolean",visual:!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 X=G;customElements.get("ty-checkbox")||customElements.define("ty-checkbox",X);const K=`\n${B}\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`,Z=class extends o{constructor(){super(),this.W=!1,this.nn=null,this.tn=null,this.G=null,this.X=null,r(this.shadowRoot,{css:K,id:"ty-switch"})}onConnect(){this.setupEventListeners()}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;this.nn&&(this.removeEventListener("click",this.nn),this.nn=null);const n=this.shadowRoot;if(!n)return;const t=n.querySelector(".switch-container");t?(this.tn&&(t.removeEventListener("keydown",this.tn),this.tn=null),this.G&&(t.removeEventListener("focus",this.G),this.G=null),this.X&&(t.removeEventListener("blur",this.X),this.X=null),this.W=!1):this.W=!1}setupEventListeners(){if(this.W)return;const n=this.shadowRoot.querySelector(".switch-container");n&&(this.nn=n=>this.handleSwitchClick(n),this.tn=n=>this.handleSwitchKeydown(n),this.G=()=>n.classList.add("focused"),this.X=()=>n.classList.remove("focused"),this.addEventListener("click",this.nn),n.addEventListener("keydown",this.tn),n.addEventListener("focus",this.G),n.addEventListener("blur",this.X),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(),this.applyLabelName(t),this.updateValidity()}updateValidity(){const n=this.shadowRoot?.querySelector(".switch-container");this.disabled?this.m.setValidity({}):this.required&&!this.checked?this.m.setValidity({valueMissing:!0},"Please turn this on",n??void 0):this.m.setValidity({})}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:"primary",validate:n=>["primary","secondary","success","danger","warning","neutral"].includes(n),coerce:n=>["primary","secondary","success","danger","warning","neutral"].includes(n)?n:"primary"}};let J=Z;customElements.get("ty-switch")||customElements.define("ty-switch",J);const Q=`\n${B}\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`,nn='<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>',tn=class extends o{constructor(){super(),this.W=!1,this.nn=null,this.G=null,this.X=null,r(this.shadowRoot,{css:Q,id:"ty-radio"})}onConnect(){this.setupEventListeners(),this.dispatchEvent(new CustomEvent("ty-radio-connected",{bubbles:!0}))}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;this.nn&&(this.removeEventListener("click",this.nn),this.nn=null);const n=this.shadowRoot?.querySelector(".radio-container");n?(this.G&&(n.removeEventListener("focus",this.G),this.G=null),this.X&&(n.removeEventListener("blur",this.X),this.X=null),this.W=!1):this.W=!1}setupEventListeners(){if(this.W)return;const n=this.shadowRoot.querySelector(".radio-container");n&&(this.nn=n=>this.handleClick(n),this.G=()=>n.classList.add("focused"),this.X=()=>n.classList.remove("focused"),this.addEventListener("click",this.nn),n.addEventListener("focus",this.G),n.addEventListener("blur",this.X),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(),this.applyLabelName(t)}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)}};tn.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 en=tn;customElements.get("ty-radio")||customElements.define("ty-radio",en);const on=class extends o{constructor(){super(),this.W=!1,this.en=null,this.tn=null,this.rn=null,r(this.shadowRoot,{css:Q,id:"ty-radio-group"})}onConnect(){this.setupEventListeners(),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.en&&(this.removeEventListener("ty-radio-select",this.en),this.en=null),this.tn&&(this.removeEventListener("keydown",this.tn),this.tn=null),this.rn&&(this.removeEventListener("ty-radio-connected",this.rn),this.rn=null),this.W=!1)}setupEventListeners(){this.W||(this.en=n=>this.handleRadioSelect(n),this.tn=n=>this.handleKeydown(n),this.rn=()=>this.syncChildren(),this.addEventListener("ty-radio-select",this.en),this.addEventListener("keydown",this.tn),this.addEventListener("ty-radio-connected",this.rn),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=nn,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=nn,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}};on.formAssociated=!0,on.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 rn=on;customElements.get("ty-radio-group")||customElements.define("ty-radio-group",rn);const sn='<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>',an='<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>',ln=class extends o{constructor(){super(),this.sn=null,this.an=!1,r(this.shadowRoot,{css:B,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/* Keep the copy button pinned to the top-right when content wraps to multiple lines */\n.input-wrapper:has(.copy-field-value.multiline) {\n align-items: flex-start;\n padding-top: 8px;\n padding-bottom: 8px;\n}\n\n/* Horizontal scroll variant - scroll long content instead of clipping with ellipsis */\n.copy-field-value.horizontal-scroll {\n overflow-x: auto;\n overflow-y: hidden;\n text-overflow: clip;\n white-space: nowrap;\n}\n\n/* Multiline + horizontal scroll (e.g. code blocks): preserve lines, scroll both axes */\n.copy-field-value.multiline.horizontal-scroll {\n white-space: pre;\n word-break: normal;\n overflow-y: auto;\n}\n\n/* Hide scrollbars on scrollable value - content still scrolls, chrome stays clean */\n.copy-field-value.multiline,\n.copy-field-value.horizontal-scroll {\n scrollbar-width: none; /* Firefox */\n}\n.copy-field-value.multiline::-webkit-scrollbar,\n.copy-field-value.horizontal-scroll::-webkit-scrollbar {\n display: none; /* Chrome/Safari */\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.sn&&(clearTimeout(this.sn),this.sn=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.sn&&clearTimeout(this.sn),this.an=!0;const n=this.shadowRoot.querySelector(".copy-button");n&&(n.classList.add("success"),n.innerHTML=an),this.sn=window.setTimeout(()=>{this.an=!1;const n=this.shadowRoot.querySelector(".copy-button");n&&(n.classList.remove("success"),n.innerHTML=sn),this.sn=null},2e3)}showCopyError(){null!==this.sn&&clearTimeout(this.sn),this.an=!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.sn=window.setTimeout(()=>{const n=this.shadowRoot.querySelector(".copy-button");n&&(n.classList.remove("error"),n.innerHTML=sn),this.sn=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=["copy-field-value",this.multiline?"multiline":"",this.horizontalScroll?"horizontal-scroll":""].filter(Boolean).join(" ");n.innerHTML=`\n <div class="input-container">\n ${this.label?`\n <label class="ty-field-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="${e}">${this.value||""}</code>`:`<div class="${e}">${this.value||""}</div>`}\n <button class="copy-button${this.an?" success":""}" type="button" ${this.disabled?"disabled":""}>\n ${this.an?an:sn}\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 horizontalScroll(){return this.getProperty("horizontalScroll")}set horizontalScroll(n){this.setProperty("horizontalScroll",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)}};ln.formAssociated=!0,ln.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},horizontalScroll:{type:"boolean",visual:!0,default:!1},disabled:{type:"boolean",visual:!0,default:!1},required:{type:"boolean",visual:!0,default:!1}};let cn=ln;function dn(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",cn),customElements.get("ty-copy-field")||customElements.define("ty-copy-field",class extends cn{});const hn=class extends o{constructor(){super(),this.ln=[],this.cn=!1,this.W=!1,this.dn=null,this.hn=null,this.un=null,this.pn=null,this.bn=null,this.gn=null,this.vn=null,this.yn=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.ln=[],this.updateFormValue(),this.p&&this.render();const n=this.shadowRoot?.querySelector(".file-input");n&&(n.value="")}getFormValue(){if(0===this.ln.length)return null;const n=new FormData,t=this.name||"files";for(const e of this.ln)n.append(t,e);return n}get files(){return[...this.ln]}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.ln=this.multiple?n:n.slice(0,1),this.updateFormValue(),this.render();const t={value:this.ln,files:this.ln,names:this.ln.map(n=>n.name)};setTimeout(()=>{this.dispatchEvent(new CustomEvent("change",{detail:t,bubbles:!0,composed:!0}))},0)}removeFile(n){const t=[...this.ln];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.dn=n=>{this.disabled||n.target.closest(".file-remove")||e.click()},this.hn=n=>{this.disabled||"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),e.click())},this.un=()=>{t.classList.add("focused")},this.pn=()=>{t.classList.remove("focused")},this.bn=n=>{this.disabled||(n.preventDefault(),n.stopPropagation(),this.cn||(this.cn=!0,t.classList.add("drag-active")))},this.gn=n=>{t.contains(n.relatedTarget)||(this.cn=!1,t.classList.remove("drag-active"))},this.vn=n=>{if(this.disabled)return;n.preventDefault(),n.stopPropagation(),this.cn=!1,t.classList.remove("drag-active");const e=Array.from(n.dataTransfer?.files??[]);e.length>0&&this.setFiles(e)},this.yn=n=>{const t=n.target;t.files&&t.files.length>0&&this.setFiles(Array.from(t.files))},t.addEventListener("click",this.dn),t.addEventListener("keydown",this.hn),t.addEventListener("focus",this.un),t.addEventListener("blur",this.pn),t.addEventListener("dragover",this.bn),t.addEventListener("dragleave",this.gn),t.addEventListener("drop",this.vn),e.addEventListener("change",this.yn),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.dn&&t.removeEventListener("click",this.dn),this.hn&&t.removeEventListener("keydown",this.hn),this.un&&t.removeEventListener("focus",this.un),this.pn&&t.removeEventListener("blur",this.pn),this.bn&&t.removeEventListener("dragover",this.bn),this.gn&&t.removeEventListener("dragleave",this.gn),this.vn&&t.removeEventListener("drop",this.vn),this.yn&&e.removeEventListener("change",this.yn),this.W=!1)}buildDropZoneClasses(){const n=["drop-zone"];return this.cn&&n.push("drag-active"),this.ln.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.ln.length>t;t++){const e=this.ln[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=dn(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 c=document.createElement("div");c.className="error-message",t.appendChild(c),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.ln.length>0?"none":"",t.querySelector(".upload-hint").innerHTML=this.ln.length>0?`<strong>${this.ln.length} file${1!==this.ln.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.ln.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"}};hn.formAssociated=!0,hn.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 un=hn;function pn(){return"native"!==document.documentElement.getAttribute("data-ty-scrollbar")}customElements.get("ty-file-upload")||customElements.define("ty-file-upload",un);class bn{constructor(n,t={}){this.trackY=null,this.thumbY=null,this.trackX=null,this.thumbX=null,this.cn=!1,this.mn="y",this.fn=0,this.wn=0,this.xn=null,this.kn=null,this.zn=null,this.Cn=n,this.Sn=!1!==t.vertical,this.En=t.horizontal??!1,this.Tn=t.autoHideDelay??1e3,this.Mn=this.In.bind(this),this.Dn=this.An.bind(this),this.$n=this.Ln.bind(this),this.Nn=this.On.bind(this),this.Rn=this.Pn.bind(this),this.qn=this.Vn.bind(this),this.Bn=this.Fn.bind(this),this.Sn&&(this.trackY=this.Hn("y"),this.thumbY=this.jn("y"),this.trackY.appendChild(this.thumbY)),this.En&&(this.trackX=this.Hn("x"),this.thumbX=this.jn("x"),this.trackX.appendChild(this.thumbX)),this.Cn.addEventListener("scroll",this.Mn,{passive:!0}),this.thumbY&&this.thumbY.addEventListener("pointerdown",this.Dn),this.trackY&&this.trackY.addEventListener("pointerdown",this.Nn),this.thumbX&&this.thumbX.addEventListener("pointerdown",this.$n),this.trackX&&this.trackX.addEventListener("pointerdown",this.Rn),this.zn=new ResizeObserver(()=>this.update()),this.zn.observe(this.Cn),this.update()}Hn(n){const t=document.createElement("div");return t.className="ty-scrollbar-track-"+n,t}jn(n){const t=document.createElement("div");return t.className="ty-scrollbar-thumb-"+n,t}update(){this.Wn(),this._n()}scrollToTop(n=!1){this.Cn.scrollTo({top:0,behavior:n?"smooth":"auto"})}scrollToBottom(n=!1){this.Cn.scrollTo({top:this.Cn.scrollHeight,behavior:n?"smooth":"auto"})}scrollToLeft(n=!1){this.Cn.scrollTo({left:0,behavior:n?"smooth":"auto"})}scrollToRight(n=!1){this.Cn.scrollTo({left:this.Cn.scrollWidth,behavior:n?"smooth":"auto"})}destroy(){this.Cn.removeEventListener("scroll",this.Mn),this.thumbY&&this.thumbY.removeEventListener("pointerdown",this.Dn),this.trackY&&this.trackY.removeEventListener("pointerdown",this.Nn),this.thumbX&&this.thumbX.removeEventListener("pointerdown",this.$n),this.trackX&&this.trackX.removeEventListener("pointerdown",this.Rn),this.zn&&(this.zn.disconnect(),this.zn=null),null!==this.xn&&(cancelAnimationFrame(this.xn),this.xn=null),null!==this.kn&&(clearTimeout(this.kn),this.kn=null)}In(){null===this.xn&&(this.xn=requestAnimationFrame(()=>{this.xn=null,this.Yn(),this.Un()}))}Wn(){if(!this.trackY||!this.thumbY)return;const{scrollHeight:n,clientHeight:t}=this.Cn,e=n>t+2;this.trackY.classList.toggle("has-overflow",e),e&&(this.thumbY.style.height=Math.max(t/n*100,0)+"%"),this.Gn()}_n(){if(!this.trackX||!this.thumbX)return;const{scrollWidth:n,clientWidth:t}=this.Cn,e=n>t+2;this.trackX.classList.toggle("has-overflow",e),e&&(this.thumbX.style.width=Math.max(t/n*100,0)+"%"),this.Xn()}Yn(){this.Gn(),this.Xn()}Gn(){if(!this.trackY||!this.thumbY)return;const{scrollTop:n,scrollHeight:t,clientHeight:e}=this.Cn,o=t-e;o>0&&(this.thumbY.style.top=n/o*(this.trackY.clientHeight-this.thumbY.offsetHeight)+"px")}Xn(){if(!this.trackX||!this.thumbX)return;const{scrollLeft:n,scrollWidth:t,clientWidth:e}=this.Cn,o=t-e;o>0&&(this.thumbX.style.left=n/o*(this.trackX.clientWidth-this.thumbX.offsetWidth)+"px")}Un(){this.cn||(this.trackY?.classList.add("scrolling"),this.trackX?.classList.add("scrolling"),null!==this.kn&&clearTimeout(this.kn),this.kn=setTimeout(()=>{this.trackY?.classList.remove("scrolling"),this.trackX?.classList.remove("scrolling"),this.kn=null},this.Tn))}An(n){0===n.button&&(n.preventDefault(),n.stopPropagation(),this.cn=!0,this.mn="y",this.fn=n.clientY,this.wn=this.Cn.scrollTop,this.thumbY.setPointerCapture(n.pointerId),this.trackY?.classList.add("dragging"),this.thumbY.addEventListener("pointermove",this.qn),this.thumbY.addEventListener("pointerup",this.Bn),this.thumbY.addEventListener("pointercancel",this.Bn))}Ln(n){0===n.button&&(n.preventDefault(),n.stopPropagation(),this.cn=!0,this.mn="x",this.fn=n.clientX,this.wn=this.Cn.scrollLeft,this.thumbX.setPointerCapture(n.pointerId),this.trackX?.classList.add("dragging"),this.thumbX.addEventListener("pointermove",this.qn),this.thumbX.addEventListener("pointerup",this.Bn),this.thumbX.addEventListener("pointercancel",this.Bn))}Vn(n){if(this.cn)if("y"===this.mn){const t=n.clientY-this.fn,{scrollHeight:e,clientHeight:o}=this.Cn,i=this.trackY.clientHeight-this.thumbY.offsetHeight;if(0>=i)return;this.Cn.scrollTop=this.wn+t*((e-o)/i)}else{const t=n.clientX-this.fn,{scrollWidth:e,clientWidth:o}=this.Cn,i=this.trackX.clientWidth-this.thumbX.offsetWidth;if(0>=i)return;this.Cn.scrollLeft=this.wn+t*((e-o)/i)}}Fn(n){const t="y"===this.mn?this.thumbY:this.thumbX,e="y"===this.mn?this.trackY:this.trackX;this.cn=!1,t.releasePointerCapture(n.pointerId),e?.classList.remove("dragging"),t.removeEventListener("pointermove",this.qn),t.removeEventListener("pointerup",this.Bn),t.removeEventListener("pointercancel",this.Bn),this.Un()}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.Cn;this.Cn.scrollTo({top:e*(o-i),behavior:"smooth"})}Pn(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.Cn;this.Cn.scrollTo({left:e*(o-i),behavior:"smooth"})}}const gn="\n/* ===================================== */\n/* Custom Scrollbar - Vertical Track */\n/* ===================================== */\n\n.ty-scrollbar-track-y {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: var(--ty-scrollbar-width, 8px);\n z-index: 3;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.25s ease-out;\n cursor: pointer;\n}\n\n.ty-scrollbar-track-y.has-overflow {\n pointer-events: auto;\n}\n\n.ty-scrollbar-track-y.has-overflow:hover,\n.ty-scrollbar-track-y.has-overflow.scrolling,\n.ty-scrollbar-track-y.dragging {\n opacity: 1;\n}\n\n.ty-scrollbar-track-y::before {\n content: '';\n position: absolute;\n inset: 0;\n background: var(--ty-scrollbar-track, transparent);\n border-radius: var(--ty-scrollbar-radius, 4px);\n opacity: 0;\n transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-y:hover::before,\n.ty-scrollbar-track-y.dragging::before {\n opacity: 1;\n background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-y {\n position: absolute;\n right: 0;\n width: 100%;\n min-height: var(--ty-scrollbar-thumb-min-height, 30px);\n background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n border-radius: var(--ty-scrollbar-radius, 4px);\n transition: background 0.15s ease-out;\n box-sizing: border-box;\n border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-y:hover,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-y:active,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* ===================================== */\n/* Custom Scrollbar - Horizontal Track */\n/* ===================================== */\n\n.ty-scrollbar-track-x {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: var(--ty-scrollbar-width, 8px);\n z-index: 3;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.25s ease-out;\n cursor: pointer;\n}\n\n.ty-scrollbar-track-x.has-overflow {\n pointer-events: auto;\n}\n\n.ty-scrollbar-track-x.has-overflow:hover,\n.ty-scrollbar-track-x.has-overflow.scrolling,\n.ty-scrollbar-track-x.dragging {\n opacity: 1;\n}\n\n.ty-scrollbar-track-x::before {\n content: '';\n position: absolute;\n inset: 0;\n background: var(--ty-scrollbar-track, transparent);\n border-radius: var(--ty-scrollbar-radius, 4px);\n opacity: 0;\n transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-x:hover::before,\n.ty-scrollbar-track-x.dragging::before {\n opacity: 1;\n background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-x {\n position: absolute;\n bottom: 0;\n height: 100%;\n min-width: var(--ty-scrollbar-thumb-min-height, 30px);\n background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n border-radius: var(--ty-scrollbar-radius, 4px);\n transition: background 0.15s ease-out;\n box-sizing: border-box;\n border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-x:hover,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-x:active,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* ===================================== */\n/* Touch devices - hide custom scrollbar */\n/* ===================================== */\n\n@media (pointer: coarse) and (hover: none) {\n .ty-scrollbar-track-y,\n .ty-scrollbar-track-x {\n display: none !important;\n }\n}\n\n/* Respect reduced motion */\n@media (prefers-reduced-motion: reduce) {\n .ty-scrollbar-track-y,\n .ty-scrollbar-track-x,\n .ty-scrollbar-thumb-y,\n .ty-scrollbar-thumb-x {\n transition-duration: 0ms !important;\n }\n}\n",vn='<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>',yn=class extends o{constructor(){super(),this.Kn=null,this.Zn=null,this.Jn=null,this.j=!1,this.handleInputEvent=n=>{this.value=n.target.value,this.Kn&&this.Zn&&this.resizeTextarea(this.Kn,this.Zn),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/* Bordered container — owns the border + active state (composer layout):\n header (top slot) · textarea (borderless) · footer (bottom slot). */\n.textarea-wrapper {\n position: relative;\n width: 100%;\n display: flex;\n flex-direction: column;\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(--ty-input-bg));\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n}\n\n/* Active ring tied to the TEXTAREA specifically (not :focus-within) so tabbing\n to a footer button doesn't make the whole field look focused. */\n.textarea-wrapper:has(textarea: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/* Error + disabled reflected from the inner textarea (both in shadow DOM, so\n :has is reliable here — unlike slotted content). */\n.textarea-wrapper:has(textarea.error) {\n border-color: var(--ty-color-danger);\n background: var(--ty-bg-danger-soft);\n}\n.textarea-wrapper:has(textarea.error):has(textarea:focus) {\n border-color: var(--ty-color-danger-bold);\n}\n.textarea-wrapper:has(textarea:disabled) {\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/* Scroll region wraps just the textarea so the custom scrollbar never overlaps\n the header/footer. */\n.textarea-scroll {\n position: relative;\n flex: 1 1 auto;\n min-height: 0;\n display: flex;\n}\n\n/* Custom scrollbar track positioned to the scroll region (textarea edges) */\n.textarea-scroll .ty-scrollbar-track-y {\n top: 2px;\n right: 2px;\n bottom: 2px;\n border-radius: 0 4px 4px 0;\n}\n\n/* Header / footer slot regions — zero footprint until they have content\n (the component toggles .has-content via slotchange). footer defaults to\n space-between so \"tools … submit\" works; a single wide button fills it. */\n.textarea-header,\n.textarea-footer {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.textarea-footer { justify-content: space-between; }\n.textarea-header.has-content {\n padding: 6px 10px;\n border-bottom: 1px solid var(--ty-textarea-divider, var(--input-border, var(--ty-input-border)));\n}\n.textarea-footer.has-content {\n padding: 6px 10px;\n border-top: 1px solid var(--ty-textarea-divider, var(--input-border, var(--ty-input-border)));\n}\n\n/* ===== LABEL STYLING ===== */\n\n.ty-field-label {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n font-weight: var(--ty-font-medium);\n color: var(--ty-label-color);\n margin-bottom: 6px;\n padding-left: 12px;\n}\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 is reflected on .textarea-wrapper (see above). */\n\n/* ===== TEXTAREA BASE STYLING ===== */\n\ntextarea {\n /* Borderless — the .textarea-wrapper owns the border/background now. */\n box-sizing: border-box;\n width: 100%;\n flex: 1 1 auto;\n border: none;\n background: transparent;\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 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/* Disabled — visual state lives on the wrapper; just the cursor/text here. */\ntextarea:disabled {\n cursor: not-allowed;\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"}),pn()&&r(n,{css:gn,id:"ty-custom-scrollbar"})}onConnect(){}onDisconnect(){if(this.Qn(),this.Kn){const n=this.Kn.cloneNode(!0);this.Kn.parentNode?.replaceChild(n,this.Kn),this.Kn=null}this.Zn=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.Zn=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.Qn()):(n.style.overflowY="auto",this.nt(n))),this.Jn?.update()}nt(n){if(this.Jn||!pn())return;n.style.scrollbarWidth="none",this.setAttribute("data-custom-scroll",""),this.Jn=new bn(n,{vertical:!0,horizontal:!1});const t=this.shadowRoot.querySelector(".textarea-scroll");t&&this.Jn.trackY&&t.appendChild(this.Jn.trackY)}Qn(){this.Jn&&(this.Jn.trackY?.remove(),this.Jn.destroy(),this.Jn=null,this.removeAttribute("data-custom-scroll"),this.Kn&&(this.Kn.style.scrollbarWidth=""))}emitValueEvents(n){const t=this.value;this.m.setFormValue(t||""),this.updateValidity();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">${vn}</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.label?o.setAttribute("aria-label",this.label):o.removeAttribute("aria-label"),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.Kn=o}else{const t=document.createElement("div");t.className="textarea-container";const e=document.createElement("label");e.className="ty-field-label",this.label?(e.innerHTML=this.label+(this.required?` <span class="required-icon">${vn}</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.label&&o.setAttribute("aria-label",this.label),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");i.className="textarea-wrapper";const r=document.createElement("div");r.className="textarea-header";const s=document.createElement("slot");s.setAttribute("name","header"),r.appendChild(s);const a=document.createElement("div");a.className="textarea-scroll",a.appendChild(o);const l=document.createElement("div");l.className="textarea-footer";const c=document.createElement("slot");c.setAttribute("name","footer"),l.appendChild(c),i.appendChild(r),i.appendChild(a),i.appendChild(l);const d=(n,t)=>{const e=()=>t.classList.toggle("has-content",n.assignedNodes({flatten:!0}).length>0);n.addEventListener("slotchange",e),e()};if(d(s,r),d(c,l),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 h=this.setupDummyElement(o);setTimeout(()=>this.resizeTextarea(o,h),0),this.Kn=o}this.updateValidity()}updateValidity(){const n=this.shadowRoot?.querySelector("textarea");this.disabled?this.m.setValidity({}):this.required&&""===(n?n.value:(this.value??"")+"").trim()?this.m.setValidity({valueMissing:!0},"Please fill out this field",n??void 0):this.m.setValidity({})}};yn.formAssociated=!0,yn.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 mn=yn;customElements.get("ty-textarea")||customElements.define("ty-textarea",mn);const fn={"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"}},wn={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 xn(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 kn(n){const{targetEl:t,floatingEl:e,preferences:o=wn.default,offset:i=8,padding:r=8,containerPadding:s=0}=n,a=xn(t),l=xn(e),c=o.map(n=>function(n){const{targetRect:t,floatingRect:e,placement:o,offset:i,padding:r,scrollbarWidth:s,containerPadding:a}=n,l=fn[o],{vertical:c,horizontal:d,orientation:h}=l,u=window.innerWidth,p=window.innerHeight;let b,g;window,window,b="vertical"===h?"start"===d?t.left-e.width-i+a:t.right+i-a:"start"===d?t.left:"center"===d?t.centerX-e.width/2:t.right-e.width,g="vertical"===h?"center"===c?t.centerY-e.height/2:"end"===c?t.bottom-e.height-a:t.top:"top"===c?t.top-e.height-i+a:t.bottom+i-a;const v={top:Math.min(0,g-r),left:Math.min(0,b-r),bottom:Math.min(0,p-(g+e.height+r)),right:Math.min(0,u-(b+e.width+r+s))},y=Object.values(v).reduce((n,t)=>n+Math.abs(t),0);return{x:Math.round(b),y:Math.round(g),placement:o,overflow:v,overflowAmount:y,fits:0===y}}({targetRect:a,floatingRect:l,placement:n,offset:i,padding:r,containerPadding:s,scrollbarWidth:15})),d=c.find(n=>n.fits)||c.reduce((n,t)=>n.overflowAmount>t.overflowAmount?t:n);return 0>d.overflow.right&&(d.x+=d.overflow.right),d}const zn={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. Defaults route through the neutral ramp\n * so the tooltip inverts cleanly: dark in light mode, light in dark mode.\n * Consumers can pin it to a fixed look via --ty-tooltip-bg/-color. */\n background: var(--ty-tooltip-bg, var(--ty-color-neutral-strong));\n color: var(--ty-tooltip-color, var(--ty-color-neutral-faint));\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/* 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-floating, var(--ty-surface-elevated, #ffffff));\n color: var(--ty-color-neutral-strong, #111827);\n box-shadow: var(--ty-shadow-lg,\n 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, var(--ty-color-neutral-strong));\n color: var(--ty-color-neutral-faint);\n}\n\n/* Secondary - Purple/indigo */\n#tooltip-container[data-flavor="secondary"] {\n background: var(--ty-color-secondary, #8b5cf6);\n color: #ffffff;\n}\n'},Cn=new WeakMap,Sn=new WeakMap,En=new WeakMap,Tn=new WeakMap;function Mn(n){const t=n||"dark";return["dark","light","primary","secondary","success","danger","warning","info","neutral"].includes(t)?t:"dark"}function In(n){let t=En.get(n);return t||(t={showTimeout:null,hideTimeout:null},En.set(n,t)),t}function Dn(n,t){return n.hasAttribute(t)}function An(n,t,e){const o=n.getAttribute(t);if(null===o)return e;const i=parseInt(o,10);return isNaN(i)?e:i}function $n(n){return{placement:n.getAttribute("placement")||"top",offset:An(n,"offset",8),delay:An(n,"delay",600),disabled:Dn(n,"disabled"),flavor:Mn(n.getAttribute("flavor"))}}function Ln(n){return n.parentElement}function Nn(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-bold, #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 On(n){const{placement:t,offset:e}=$n(n),o=Ln(n),i=Tn.get(n);if(!o||!i)return;const r=kn({targetEl:o,floatingEl:i,preferences:"top"===t?wn.tooltip:"bottom"===t?["bottom","top","left","right"]:"left"===t?["left","right","top","bottom"]:"right"===t?["right","left","top","bottom"]:wn.tooltip,offset:e});i.style.left=r.x+"px",i.style.top=r.y+"px"}function Rn(n){const t=Cn.get(n);t&&(t(),Cn.delete(n))}function Pn(n){const t=In(n);null!==t.showTimeout&&(clearTimeout(t.showTimeout),t.showTimeout=null),null!==t.hideTimeout&&(clearTimeout(t.hideTimeout),t.hideTimeout=null)}function qn(n){const t=Tn.get(n);if(t)try{t.hidePopover(),n.tt=!1,Rn(n)}catch(e){}}function Vn(n){const t=In(n),{delay:e}=$n(n);Pn(n),t.showTimeout=window.setTimeout(()=>function(n){const{disabled:t}=$n(n);if(t)return;const e=function(n){let t=Tn.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}=$n(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 ",Nn(t,e),document.body.appendChild(t),Tn.set(n,t)}return t}(n);try{e.showPopover(),n.tt=!0,On(n),function(n){const t=Ln(n),e=Tn.get(n);if(!t||!e)return;let o=null;const i=()=>{null!==o&&clearTimeout(o),o=window.setTimeout(()=>{o=null,On(n)},10)},r=new ResizeObserver(i);r.observe(t),r.observe(e);let s=null;const a=()=>{null===s&&(s=requestAnimationFrame(()=>{s=null,On(n)}))};window.addEventListener("scroll",a,!0),window.addEventListener("resize",i),Cn.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 Bn(n){const t=In(n);Pn(n),t.hideTimeout=window.setTimeout(()=>qn(n),200)}class TyTooltip extends HTMLElement{constructor(){super(),this.tt=!1,this.attachShadow({mode:"open"})}static get observedAttributes(){return["placement","offset","delay","disabled","flavor"]}connectedCallback(){this.tt=!1,r(this.shadowRoot,zn),function(n){const t=Ln(n);if(!t)return;const e=()=>Vn(n),o=()=>Bn(n),i=()=>Vn(n),r=()=>Bn(n);t.addEventListener("mouseenter",e),t.addEventListener("mouseleave",o),t.addEventListener("focusin",i),t.addEventListener("focusout",r),Sn.set(n,()=>{t.removeEventListener("mouseenter",e),t.removeEventListener("mouseleave",o),t.removeEventListener("focusin",i),t.removeEventListener("focusout",r)})}(this)}disconnectedCallback(){!function(n){Pn(n),Rn(n);const t=Sn.get(n);t&&(t(),Sn.delete(n));const e=Tn.get(n);e&&(e.remove(),Tn.delete(n)),En.delete(n)}(this)}attributeChangedCallback(n,t,e){if("flavor"===n&&this.tt){const n=Tn.get(this);n&&Nn(n,Mn(e))}"disabled"===n&&null!==e&&qn(this)}}customElements.get("ty-tooltip")||customElements.define("ty-tooltip",TyTooltip);const Fn={locked:!1,scrollY:0,activeLocks:new Set};function Hn(){return document.documentElement}function jn(){if(!Fn.locked)return;const n=Hn();window,n.classList.remove("ty-scroll-locked"),n.style.overflow="",n.style.paddingRight="",Fn.locked=!1}function Wn(n){Fn.activeLocks.has(n)||(Fn.activeLocks.add(n),1===Fn.activeLocks.size&&function(){if(Fn.locked)return;const n=window.innerWidth-Hn().clientWidth,t=Hn();window,Fn.scrollY=window.scrollY||Hn().scrollTop||0,Fn.locked=!0,t.style.overflow="hidden",n>0&&(t.style.paddingRight=n+"px"),t.classList.add("ty-scroll-locked")}())}function _n(n){Fn.activeLocks.has(n)&&(Fn.activeLocks.delete(n),0===Fn.activeLocks.size&&jn())}const Yn=new WeakMap,Un=new WeakMap,Gn=new WeakMap,Xn=new WeakMap,Kn=new WeakMap;function Zn(n,t){return n.hasAttribute(t)}function Jn(n,t,e){const o=n.getAttribute(t);if(null===o)return e;const i=parseInt(o,10);return isNaN(i)?e:i}function Qn(n){return{manual:Zn(n,"manual"),disableClose:Zn(n,"disable-close"),placement:n.getAttribute("placement")||"bottom",offset:Jn(n,"offset",8)}}function nt(n){return n.parentElement}function tt(n){return n.querySelector(".popup-dialog")}function et(n){let t=Kn.get(n);return t||(t="popup-"+(n.id||Math.random().toString(36).substr(2,9)),Kn.set(n,t)),t}function ot(n,t=!1){const{disableClose:e}=Qn(n);if(!t&&e)return;const o=n.shadowRoot,i=o?tt(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 it(n){Wn(et(n));const t=n.shadowRoot,e=t?tt(t):null;e&&(e.showModal(),requestAnimationFrame(()=>{!function(n){const{placement:t,offset:e}=Qn(n),o=n.shadowRoot,i=nt(n),r=o?tt(o):null;if(!i||!r)return;const s=kn({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 rt(n){const t=n.shadowRoot,e=t?tt(t):null;e&&(e.classList.contains("open")?ot(n):it(n))}function st(n){const{manual:t}=Qn(n),e=nt(n);if(!e||t)return;const o=Yn.get(n);o&&e.removeEventListener("pointerdown",o);const i=t=>function(n,t){t.preventDefault(),t.stopPropagation(),rt(n)}(n,t);Yn.set(n,i),e.addEventListener("pointerdown",i)}function at(n){const t=nt(n),e=Yn.get(n);t&&e&&(t.removeEventListener("pointerdown",e),Yn.delete(n))}function lt(n){const t=n.shadowRoot;if(!t)return;const e=tt(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?tt(e):null;o&&t.target===o&&(t.preventDefault(),ot(n))}(n,t);Un.set(n,r),e.addEventListener("pointerdown",r);const s=t=>function(n,t){if(t.stopPropagation(),"Escape"===t.key){const{disableClose:e}=Qn(n);e?t.preventDefault():ot(n)}}(n,t);Gn.set(n,s),n.addEventListener("keydown",s),e.addEventListener("close",()=>{_n(et(n)),e.classList.remove("open"),e.classList.remove("preparing-animation"),n.dispatchEvent(new CustomEvent("close",{bubbles:!0}))})}n.closePopup=()=>ot(n,!0),n.openPopup=()=>it(n),n.togglePopup=()=>rt(n);const o=t=>function(n,t){t.stopPropagation(),ot(n,!0)}(n,t);Xn.set(n,o),n.addEventListener("ty:close-popup",o),st(n)}class TyPopup extends HTMLElement{static get observedAttributes(){return["manual","disable-close","placement","offset"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){lt(this)}disconnectedCallback(){!function(n){const t=Kn.get(n);t&&(_n(t),Kn.delete(n)),at(n);const e=n.shadowRoot,o=e?tt(e):null;if(o){const t=Un.get(n);t&&(o.removeEventListener("pointerdown",t),Un.delete(n))}const i=Gn.get(n);i&&(n.removeEventListener("keydown",i),Gn.delete(n));const r=Xn.get(n);r&&(n.removeEventListener("ty:close-popup",r),Xn.delete(n))}(this)}attributeChangedCallback(n,t,e){switch(lt(this),n){case"placement":case"offset":lt(this);break;case"manual":case"disable-close":at(this),st(this)}}}customElements.get("ty-popup")||customElements.define("ty-popup",TyPopup);const ct=new WeakMap,dt=new WeakMap,ht=new WeakMap,ut=new WeakMap,pt=new WeakMap,bt=new WeakMap;function gt(n,t){if(!n.hasAttribute(t))return!1;const e=n.getAttribute(t);return null===e||"false"!==e.toLowerCase()}function vt(n){return n.querySelector(".ty-modal-dialog")}function yt(n,t,e){const o=new CustomEvent(t,{detail:e,bubbles:!0,cancelable:!0});n.dispatchEvent(o)}function mt(n,t="programmatic",e){const o=n.shadowRoot,i=o?vt(o):null;if(i&&i.open){if(!e?.force){const e=new CustomEvent("beforeclose",{detail:{reason:t},bubbles:!0,composed:!0,cancelable:!0});if(n.dispatchEvent(e),e.defaultPrevented)return}n.removeAttribute("open")}}function ft(n){const t=n.shadowRoot;if(!t)return;const e=function(n){return{open:gt(n,"open"),backdrop:!n.hasAttribute("backdrop")||gt(n,"backdrop"),closeOnOutsideClick:!n.hasAttribute("close-on-outside-click")||gt(n,"close-on-outside-click"),closeOnEscape:!n.hasAttribute("close-on-escape")||gt(n,"close-on-escape")}}(n),o=function(n){let t=vt(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=bt.get(n);return t||(t="modal-"+(n.id||Math.random().toString(36).substr(2,9)),bt.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=ct.get(n);if(o&&(t.removeEventListener("click",o),ct.delete(n)),e){const e=t=>function(n,t){t.stopPropagation();const e=n.shadowRoot,o=e?vt(e):null;o&&t.target===o&&(t.preventDefault(),mt(n,"backdrop"))}(n,t);ct.set(n,e),t.addEventListener("click",e)}}(n,o,e.closeOnOutsideClick),function(n,t,e){const o=dt.get(n);if(o&&(t.removeEventListener("keydown",o),dt.delete(n)),e){const e=t=>function(n,t){t.stopPropagation(),"Escape"===t.key&&(t.preventDefault(),mt(n,"escape"))}(n,t);dt.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=ht.get(n);if(i&&(o.removeEventListener("click",i),ht.delete(n)),e){const t=t=>function(n,t){t.preventDefault(),t.stopPropagation(),mt(n,"close-button")}(n,t);ht.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=ut.get(n),i=pt.get(n);if(o&&(e.removeEventListener("mouseenter",o),ut.delete(n)),i&&(e.removeEventListener("mouseleave",i),pt.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);ut.set(n,t),pt.set(n,o),e.addEventListener("mouseenter",t),e.addEventListener("mouseleave",o)}}(n,o),e.open?o.open||(Wn(i),e.backdrop?o.showModal():o.show(),yt(n,"open",{})):o.open&&(_n(i),o.close(),yt(n,"close",{reason:"programmatic"})),o.onclose=t=>{t.target===o&&(_n(i),n.hasAttribute("open")&&(n.removeAttribute("open"),yt(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"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){ft(this),this.show=()=>{this.setAttribute("open","true")},this.hide=n=>mt(this,"programmatic",n)}disconnectedCallback(){!function(n){const t=bt.get(n),e=n.shadowRoot,o=e?vt(e):null;if(t&&(_n(t),bt.delete(n)),!o)return;const i=ct.get(n);i&&(o.removeEventListener("click",i),ct.delete(n));const r=dt.get(n);r&&(o.removeEventListener("keydown",r),dt.delete(n));const s=o.querySelector(".close-button");if(s){const t=ht.get(n);t&&(s.removeEventListener("click",t),ht.delete(n))}const a=o.querySelector(".modal-content");if(a){const t=ut.get(n),e=pt.get(n);t&&(a.removeEventListener("mouseenter",t),ut.delete(n)),e&&(a.removeEventListener("mouseleave",e),pt.delete(n))}}(this)}attributeChangedCallback(n,t,e){ft(this)}}customElements.get("ty-modal")||customElements.define("ty-modal",TyModal),customElements.get("ty-dialog")||customElements.define("ty-dialog",class extends TyModal{});const wt=`\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.ty-field-label {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n font-weight: var(--ty-font-medium);\n color: var(--ty-label-color);\n margin-bottom: 6px;\n padding-left: 12px;\n display: flex;\n align-items: center;\n}\n\n/* Required indicator - using SVG icon */\n.required-icon {\n display: inline-flex;\n align-items: center;\n color: #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-bold);\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${gn}\n`;let xt=0;const kt=new WeakMap;function zt(n){let t=kt.get(n);return void 0===t&&(t=++xt,kt.set(n,t)),t}const Ct='<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>',St='<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>',Et='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>\n</svg>',Tt=class extends o{constructor(){super(),this.et="",this.ot=!1,this.it=!1,this.rt="Select...",this.st="",this.P=!1,this.lt=!1,this.ct=!1,this.dt=!1,this.ht="auto",this.ut=!1,this.bt=null,this.gt="md",this.vt="Available",this.yt="No options available",this.ft={open:!1,search:"",highlightedIndex:-1,filteredTags:[],selectedValues:[],mode:"desktop"},this.wt=null,this.xt=null,this.kt=null,this.zt=null,this.Ct=null,this.St=0,this.Et=null,this.Tt=null,this.Mt=null,this.It=null;const n=this.shadowRoot;r(n,{css:wt,id:"ty-select-base"}),r(n,{css:'\n/* ===== COMPACT skin: hugs content (field skin = base styles) ===== */\n.multiselect-stub.compact {\n display: inline-flex;\n flex-wrap: nowrap;\n width: auto;\n gap: 0.5rem;\n /* extra right padding = room for the absolutely-positioned chevron */\n padding: 0.5rem 2.25rem 0.5rem 0.875rem;\n}\n\n/* Consumer-provided trigger (slot="trigger"): no chrome at all */\n.multiselect-stub.custom-trigger {\n display: inline-block;\n border: none;\n background: none;\n padding: 0;\n min-height: 0;\n border-radius: 0;\n}\n.multiselect-stub.custom-trigger:hover {\n border: none;\n}\n\n.select-count {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 1.25rem;\n height: 1.25rem;\n padding: 0 0.375rem;\n border-radius: 9999px;\n background: var(--ty-bg-primary-soft);\n color: var(--ty-text-primary);\n font-size: var(--ty-font-xs);\n font-weight: var(--ty-font-semibold);\n font-style: normal;\n}\n.select-count[hidden] {\n display: none;\n}\n/* Selection text (field skin): single line, ellipsis, input colors */\n.multiselect-stub .dropdown-placeholder {\n font-style: normal;\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--input-color, var(--ty-input-color));\n}\n\n/* Empty state: muted placeholder color */\n.multiselect-stub .dropdown-placeholder.placeholder-shown {\n color: var(--input-placeholder, var(--ty-input-placeholder));\n}\n.multiselect-stub .dropdown-placeholder[hidden] {\n display: none;\n}\n\n/* Single-select display clone (slot="selected"): the selected ty-option\n projected into the stub — its own :host([cloned]) styling strips the\n list-row chrome; here it just takes the text\'s flex slot. */\n.multiselect-stub slot[name="selected"] {\n display: none;\n}\n.multiselect-stub.has-clone slot[name="selected"] {\n display: block;\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n}\n.multiselect-stub.compact.has-clone slot[name="selected"] {\n flex: 0 1 auto;\n}\n\n/* start/end slot content (icons etc.) — spacing comes from the stub\'s flex\n gap; muted like ty-input adornments. end sits before the chevron. */\n.multiselect-stub ::slotted([slot="start"]),\n.multiselect-stub ::slotted([slot="end"]) {\n flex-shrink: 0;\n color: var(--ty-text-soft);\n}\n\n/* Compact skin: the text IS the trigger label — no grow, regular text color */\n.multiselect-stub.compact .dropdown-placeholder {\n flex-grow: 0;\n color: var(--ty-text);\n}\n\n/* Trigger stays visible while the popup is open (multiselect hides it) */\n.dropdown-wrapper:has(.dropdown-chevron.open) .multiselect-stub {\n opacity: 1;\n pointer-events: auto;\n}\n\n/* ===== One-panel popup: search header fused with the options list ===== */\n\n/* Single unified shadow around the whole panel (header + list as one silhouette) */\n.dropdown-dialog.open {\n filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.14)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08));\n}\n\n.dropdown-header {\n background: var(--input-bg, var(--ty-input-bg));\n border: 1px solid var(--input-border, var(--ty-input-border));\n border-bottom: 1px solid var(--ty-border-soft);\n border-radius: var(--ty-radius-lg) var(--ty-radius-lg) 0 0;\n padding: 0.25rem 0.5rem;\n}\n.dropdown-dialog.position-below .dropdown-header {\n margin-bottom: 0;\n}\n.dropdown-dialog.position-above .dropdown-header {\n margin-top: 0;\n border-top: 1px solid var(--ty-border-soft);\n border-bottom: 1px solid var(--input-border, var(--ty-input-border));\n border-radius: 0 0 var(--ty-radius-lg) var(--ty-radius-lg);\n}\n\n/* Magnifier adornment at the start of the search row */\n.dropdown-search-icon {\n position: absolute;\n top: 50%;\n left: var(--ty-spacing-3);\n transform: translateY(-50%);\n width: 1rem;\n height: 1rem;\n color: var(--input-placeholder, var(--ty-input-placeholder));\n pointer-events: none;\n}\n.dropdown-search-icon svg {\n width: 100%;\n height: 100%;\n}\n\n/* Mobile header: flex row, icon flows inline before the input */\n.dropdown-mode-mobile .mobile-header-content .dropdown-search-icon {\n position: static;\n transform: none;\n flex-shrink: 0;\n}\n\n/* Search input: plain quiet row inside the panel */\n.dropdown-search-input {\n border: none;\n border-radius: 0;\n background: transparent;\n min-height: 2.25rem;\n padding-top: 10px;\n padding-bottom: 4px;\n padding-right: var(--ty-spacing-2);\n /* room for the magnifier adornment */\n padding-left: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n}\n.dropdown-search-input:focus {\n border: none;\n box-shadow: none;\n}\n/* Trigger already has a chevron - no second one inside the search row */\n.dropdown-search-chevron {\n display: none;\n}\n\n/* With the search row hidden nothing inside is focusable, so the <dialog>\n itself receives focus on open — suppress its UA focus ring */\n.dropdown-dialog:focus,\n.dropdown-dialog:focus-visible {\n outline: none;\n}\n\n/* Search row hidden (\'auto\' below threshold / searchable="false"):\n the options panel owns the whole silhouette */\n.dropdown-header[hidden] {\n display: none;\n}\n.dropdown-header[hidden] ~ .dropdown-options-wrapper .dropdown-options {\n border-top: 1px solid var(--input-border, var(--ty-input-border));\n border-radius: var(--ty-radius-lg);\n}\n.mobile-search-input[hidden],\n.mobile-header-content .dropdown-search-icon[hidden] {\n display: none;\n}\n\n/* Options: vertical list rows fused under the search header.\n No own shadow/animation - the panel appears as one via dialog opacity. */\n.dropdown-options {\n flex-direction: column;\n flex-wrap: nowrap;\n align-items: stretch;\n gap: 0;\n /* Card-style list: rounded rows sit inset from the panel edges */\n padding: var(--ty-spacing-1);\n border-top: none;\n border-radius: 0 0 var(--ty-radius-lg) var(--ty-radius-lg);\n box-shadow: none;\n transform: none;\n transition: none;\n /* ~9-10 visible rows before scrolling (custom scrollbar, native hidden) */\n max-height: 24rem;\n}\n.dropdown-dialog.position-below .dropdown-options {\n box-shadow: none;\n}\n.dropdown-dialog.position-above .dropdown-options {\n border-top: 1px solid var(--input-border, var(--ty-input-border));\n border-bottom: none;\n border-radius: var(--ty-radius-lg) var(--ty-radius-lg) 0 0;\n}\n\n/* Loading panel continues the fused silhouette exactly like .dropdown-options —\n the base layer styles it as a floating card (radius + shadow), which left a\n see-through gap under the search header while loading. */\n.dropdown-loading {\n border-top: none;\n border-radius: 0 0 var(--ty-radius-lg) var(--ty-radius-lg);\n box-shadow: none;\n}\n.dropdown-dialog.position-above .dropdown-loading {\n border-top: 1px solid var(--input-border, var(--ty-input-border));\n border-bottom: none;\n border-radius: var(--ty-radius-lg) var(--ty-radius-lg) 0 0;\n}\n\n/* Selection tick lives inside ty-option (lucide check on [selected]) */\n\n/* Mobile modal: same vertical list */\n.dropdown-mode-mobile .section-content ::slotted(ty-option) {\n display: block;\n width: 100%;\n}\n',id:"ty-select"})}onConnect(){this.shadowRoot.querySelectorAll("dialog").forEach(n=>{n.open&&n.close()}),this.render(),requestAnimationFrame(()=>{this.initializeState()}),this.Mt=new MutationObserver(()=>{this.ft.selectedValues.length>0&&this.syncSelectedTags(this.ft.selectedValues),this.updateSearchVisibility(),this.updateSelectionDisplay()}),this.Mt.observe(this,{childList:!0})}onDisconnect(){this.shadowRoot.querySelectorAll("dialog").forEach(n=>{n.open&&n.close()}),this.Ct&&(document.removeEventListener("keydown",this.Ct),this.Ct=null),null!==this.Et&&(clearTimeout(this.Et),this.Et=null),this.Dt(),this.Mt&&(this.Mt.disconnect(),this.Mt=null)}onPropertiesChanged(n){for(const{name:t,newValue:e}of n)switch(t){case"value":const n=this.parseValue(e);this.ft.selectedValues=n,this.isConnected&&this.shadowRoot&&(this.syncSelectedTags(n),this.updateSelectionDisplay(),this.updateMobileSelectedState());break;case"name":this.et=e||"";break;case"multiple":this.ot=e,!e&&this.ft.selectedValues.length>1&&this.updateComponentValue([this.ft.selectedValues[0]],!1,"set",null);break;case"compact":this.it=e;break;case"placeholder":this.rt=e||"Select...",this.isConnected&&this.shadowRoot&&this.updateSelectionDisplay();break;case"label":this.st=e||"";break;case"disabled":this.P=e;break;case"readonly":this.lt=e;break;case"required":this.ct=e;break;case"externalSearch":this.dt=e;break;case"searchable":this.ht=e,this.isConnected&&this.shadowRoot&&this.updateSearchVisibility();break;case"size":this.gt=e;break;case"debounce":this.St=e;break;case"available-label":this.vt=e||"Available";break;case"no-options-message":this.yt=e||"No options available";break;case"loading":this.ut=e,this.applyLoadingState()}}applyLoadingState(){const n=this.shadowRoot;if(!n)return;const t=this.ut?l():null;n.querySelectorAll(".dropdown-options-wrapper").forEach(n=>{if(n.classList.toggle("loading",this.ut),this.ut){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.ft.selectedValues;if(this.et&&n.length>0){if(!this.ot)return n[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.ft.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-option:not([cloned]), ty-tag:not([cloned])"))}getTagData(n){return{value:n.value||n.getAttribute("value")||n.textContent||"",text:n.getAttribute("label")||n.textContent||"",element:n}}selectTag(n){n.setAttribute("selected","")}deselectTag(n){n.removeAttribute("selected")}getSelectedValues(){return this.getTagElements().filter(n=>n.hasAttribute("selected")).map(n=>this.getTagData(n).value).filter(n=>""!==n)}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({value:this.ot?[...n]:n[0]??null,values:n,items:this.getSelectedItems(n),action:e,item:o}))}getSelectedItems(n){const t=new Map(this.getTagElements().map(n=>[this.getTagData(n).value,n]));return n.map(n=>{const e=t.get(n);return{value:n,label:e?.getAttribute("label")||e?.textContent?.trim()||n,flavor:e?.getAttribute("flavor")??null}})}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=Math.min(s.height||200,440),l=20,c=parseFloat(getComputedStyle(this).getPropertyValue("--ty-select-popup-width")),d=isNaN(c)?Math.max(o.width,320):c,h=i-o.bottom,u=h>=a+8||h>=o.top,p=u?o.bottom+4-l:i-o.top+4-l,b=d+l+l;this.style.setProperty("--dropdown-x",Math.max(-12,Math.min(o.left-l,r-d-l-8))+"px"),this.style.setProperty("--dropdown-y",p+"px"),this.style.setProperty("--dropdown-width",b+"px"),this.style.setProperty("--dropdown-offset-x","0px"),this.style.setProperty("--dropdown-offset-y","0px"),this.style.setProperty("--dropdown-padding","20px"),u?(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",u?"below":"above")}At(){if(!pn())return;const n=this.shadowRoot,t=n.querySelector(".dropdown-options"),e=n.querySelector(".dropdown-options-wrapper");t&&e&&(this.Dt(),t.classList.add("ty-custom-scroll"),this.Tt=new bn(t,{vertical:!0}),this.Tt.trackY&&e.appendChild(this.Tt.trackY))}Dt(){this.Tt&&(this.Tt.trackY?.remove(),this.Tt.destroy(),this.Tt=null)}openDropdown(){const n=this.shadowRoot,t=n.querySelector(".dropdown-dialog");if(!t)return;const e=`multiselect-${this.id||"anon"}-${zt(this)}`;this.bt=e,Wn(e),t.showModal(),t.classList.add("open"),this.calculatePosition(),this.ft.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.ft.filteredTags=r,this.ft.highlightedIndex=-1,this.updateOptionsVisibility(!0),this.At();const s=n.querySelector(".dropdown-search-input");s&&this.shouldShowSearch()&&setTimeout(()=>s.focus(),100),this.fireOpenEvent()}closeDropdown(){const n=this.shadowRoot,t=n.querySelector(".dropdown-dialog");if(!t)return;this.Dt(),t.classList.remove("open"),t.classList.remove("position-above"),t.classList.remove("position-below"),t.close(),this.bt&&(_n(this.bt),this.bt=null),this.ft.open=!1,this.ft.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.ft.search;this.ft.search="";const r=n.querySelector(".dropdown-search-input");if(r&&(r.value=""),this.dt)i&&(null!==this.Et&&(clearTimeout(this.Et),this.Et=null),this.fireSearchEvent(""));else{const n=this.getTagElements().map(n=>this.getTagData(n));this.ft.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"}-${zt(this)}`;this.bt=e,Wn(e),t.showModal(),t.classList.add("open"),this.ft.open=!0;const o=this.getTagElements().map(n=>this.getTagData(n));this.ft.filteredTags=o;const i=n.querySelector(".mobile-search-input");i&&this.shouldShowSearch()&&setTimeout(()=>i.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.bt&&(_n(this.bt),this.bt=null),this.ft.open=!1,this.ft.highlightedIndex=-1;const e=""!==this.ft.search;this.ft.search="";const o=n.querySelector(".mobile-search-input");o&&(o.value=""),this.dt?e&&(null!==this.Et&&(clearTimeout(this.Et),this.Et=null),this.fireSearchEvent("")):this.getTagElements().forEach(n=>n.removeAttribute("hidden")),this.fireCloseEvent()}handleStubClick(n){n.preventDefault(),n.stopPropagation(),this.P||this.lt||this.openDropdown()}handleTagClick(n){const t=n.target.closest("ty-option, ty-tag");if(!t||t.hasAttribute("disabled"))return;n.preventDefault(),n.stopPropagation();const e=this.getTagData(t).value,o=this.getSelectedValues();if(!this.ot)return this.updateComponentValue([e],!0,"set",e),void("mobile"===this.ft.mode?this.closeMobileModal():this.closeDropdown());if(t.hasAttribute("selected")){const n=o.filter(n=>n!==e);this.updateComponentValue(n,!0,"remove",e)}else this.updateComponentValue([...o,e],!0,"add",e)}blockSearchClick(n){n.stopPropagation(),n.preventDefault()}handleSearchInput(n){const t=n.target.value;if(this.ft.search=t,this.dt)return void this.dispatchSearchEvent(t);const e=this.getTagElements().map(n=>this.getTagData(n)),o=this.filterTags(e,t);this.ft.filteredTags=o,this.ft.highlightedIndex=-1,this.updateTagVisibility(o,e),this.updateOptionsVisibility(o.length>0),this.updateMobileSelectedState(),this.clearHighlights(e)}handleKeyboard(n){if(!this.ft.open)return;const t=this.shadowRoot.querySelector(".dropdown-search-input");if(n.target!==t&&document.activeElement===t)return;const e=this.ft.filteredTags,o=e.length,i=this.ft.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.ft.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.ft.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.Et&&(clearTimeout(this.Et),this.Et=null),this.St>0?this.Et=window.setTimeout(()=>{this.fireSearchEvent(n),this.Et=null},this.St):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.ft.mode,element:this},bubbles:!0,composed:!0})),this.dt&&this.fireSearchEvent("")}fireCloseEvent(){this.dispatchEvent(new CustomEvent("close",{detail:{mode:this.ft.mode,element:this},bubbles:!0,composed:!0}))}dispatchChangeEvent(n){this.dispatchEvent(new CustomEvent("change",{detail:n,bubbles:!0,cancelable:!0}))}render(){this.ft.mode=q()?"mobile":"desktop","mobile"===this.ft.mode?this.renderMobile():this.renderDesktop(),this.updateSearchVisibility(),this.applyLoadingState()}setupTriggerSlot(){const n=this.shadowRoot,t=n.querySelector(".multiselect-stub"),e=n.querySelector('slot[name="trigger"]');if(!t||!e)return;const o=()=>t.classList.toggle("custom-trigger",e.assignedElements().length>0);e.addEventListener("slotchange",o),o()}setupEventListeners(){const n=this.shadowRoot,t=n.querySelector(".multiselect-stub"),e=n.querySelector("#options-slot"),o=n.querySelector(".dropdown-search-input");t&&(this.wt=this.handleStubClick.bind(this),t.addEventListener("click",this.wt)),this.setupTriggerSlot(),e&&(this.xt=this.handleTagClick.bind(this),e.addEventListener("click",this.xt)),o&&(this.kt=this.handleSearchInput.bind(this),this.zt=this.blockSearchClick.bind(this),o.addEventListener("input",this.kt),o.addEventListener("click",this.zt));const i=n.querySelector(".dropdown-dialog");i&&i.addEventListener("click",n=>{n.target===i&&this.closeDropdown()}),this.Ct=this.handleKeyboard.bind(this),document.addEventListener("keydown",this.Ct)}buildStubClasses(){const n=[this.gt];return this.P&&n.push("disabled"),this.it&&n.push("compact"),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.st?`\n <label class="ty-field-label">\n ${this.st}\n ${this.ct?`<span class="required-icon">${Ct}</span>`:""}\n </label>\n `:""}\n <div class="dropdown-wrapper">\n <div class="dropdown-stub multiselect-stub ${t}"\n ${this.P?"disabled":""}>\n <slot name="trigger">\n <slot name="start"></slot>\n <slot name="selected"></slot>\n <span class="dropdown-placeholder">${this.rt}</span>\n <span class="select-count" hidden></span>\n <slot name="end"></slot>\n <div class="dropdown-chevron">\n ${St}\n </div>\n </slot>\n </div>\n <dialog class="dropdown-dialog">\n <div class="dropdown-header">\n <div class="dropdown-search-icon" aria-hidden="true">\n ${Et}\n </div>\n <input\n class="dropdown-search-input ${this.gt}"\n type="text"\n placeholder="Search..."\n ${this.P?"disabled":""}\n />\n <div class="dropdown-search-chevron">\n ${St}\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.st?`\n <label class="ty-field-label">\n ${this.st}\n ${this.ct?`<span class="required-icon">${Ct}</span>`:""}\n </label>\n `:""}\n <div class="dropdown-wrapper">\n <div class="dropdown-stub multiselect-stub ${t}"\n ${this.P?"disabled":""}>\n <slot name="trigger">\n <slot name="start"></slot>\n <slot name="selected"></slot>\n <span class="dropdown-placeholder">${this.rt}</span>\n <span class="select-count" hidden></span>\n <slot name="end"></slot>\n <div class="dropdown-chevron">\n ${St}\n </div>\n </slot>\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.st?`<span class="mobile-header-label">${this.st}</span>`:""}\n <div class="mobile-header-content">\n <div class="dropdown-search-icon" aria-hidden="true">\n ${Et}\n </div>\n <input\n class="mobile-search-input ${this.gt}"\n type="text"\n placeholder="${this.st?`Search ${this.st}...`:"Search..."}"\n ${this.P?"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: options list with toggleable selected state --\x3e\n <div class="mobile-body">\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.vt}</span>\n </div>\n <div class="section-content dropdown-options-wrapper">\n <slot id="options-slot"></slot>\n <div class="empty-state">${this.yt}</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)),this.setupTriggerSlot(),e&&e.addEventListener("click",n=>this.handleMobileTagClick(n)),o&&o.addEventListener("input",n=>this.handleSearchInput(n)),i&&i.addEventListener("click",()=>this.closeMobileModal()),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.P||this.lt||this.openMobileModal()}handleMobileTagClick(n){this.handleTagClick(n)}updateMobileSelectedState(){if("mobile"!==this.ft.mode)return;const n=this.shadowRoot,t=n.querySelector(".mobile-available-section");if(t){const e=this.getTagElements().filter(n=>!n.hasAttribute("hidden")).length;t.setAttribute("data-empty",(0===e)+"");const o=n.querySelector(".mobile-available-section .section-title");o&&(o.textContent=`${this.vt} (${e})`)}}shouldShowSearch(){return!!this.dt||"always"===this.ht||"never"!==this.ht&&this.getTagElements().length>7}updateSearchVisibility(){const n=this.shadowRoot;if(!n)return;const t=this.shouldShowSearch(),e=n.querySelector(".dropdown-header");e&&(e.hidden=!t);const o=n.querySelector(".mobile-search-input");o&&(o.hidden=!t);const i=n.querySelector(".mobile-header-content .dropdown-search-icon");i&&(i.hidden=!t)}updateSelectionDisplay(){const n=this.shadowRoot.querySelector(".multiselect-stub");if(!n)return;const t=this.ft.selectedValues,e=t.length;n.classList.toggle("has-selection",e>0),n.classList.toggle("compact",this.it);const o=n.querySelector(".select-count");o&&(o.textContent=e+"",o.hidden=0===e||!this.ot||!this.it);const i=!this.ot&&e>0?t[0]:null;this.syncSelectedClone(i),n.classList.toggle("has-clone",null!==i);const r=n.querySelector(".dropdown-placeholder");r&&(r.hidden=null!==i,e>0&&this.ot&&!this.it?(r.textContent=this.getSelectedItems(t).map(n=>n.label).join(", "),r.classList.remove("placeholder-shown")):(r.textContent=this.rt,r.classList.add("placeholder-shown")))}syncSelectedClone(n){const t=this.querySelector(':scope > [cloned][slot="selected"]');if(t?.getAttribute("value")===n)return void(this.It=t);if(t?.remove(),null===n)return void(this.It=null);const e=this.getTagElements().find(t=>this.getTagData(t).value===n);if(e){const n=e.cloneNode(!0);n.removeAttribute("selected"),n.setAttribute("slot","selected"),n.setAttribute("cloned","true"),this.appendChild(n),this.It=n}else if(this.It?.getAttribute("value")===n){const n=this.It.cloneNode(!0);this.appendChild(n),this.It=n}}deselectValue(n){const t=this.getSelectedValues();t.includes(n)&&this.updateComponentValue(t.filter(t=>t!==n),!0,"remove",n)}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 multiple(){return this.getProperty("multiple")}set multiple(n){this.setProperty("multiple",n)}get compact(){return this.getProperty("compact")}set compact(n){this.setProperty("compact",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 searchable(){return this.getProperty("searchable")}set searchable(n){this.setProperty("searchable",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 form(){return this.m.form}};Tt.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:""},multiple:{type:"boolean",visual:!0,default:!1},compact:{type:"boolean",visual:!0,default:!1},placeholder:{type:"string",visual:!0,default:"Select..."},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}},searchable:{type:"string",visual:!0,default:"auto",coerce:n=>!0===n||""===n||"true"===n?"always":!1===n||"false"===n?"never":"auto"},size:{type:"string",visual:!0,default:"md",validate:n=>["sm","md","lg"].includes(n),coerce:n=>["sm","md","lg"].includes(n)?n:"md"},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))}},"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 Mt=Tt;function It(n,t){return n.replace(/\{([\w-]+)\}/g,(n,e)=>t[e]??n)}customElements.get("ty-select")||customElements.define("ty-select",Mt);class TySelectedTags extends HTMLElement{constructor(){super(...arguments),this.$t=null,this.Lt=()=>this.renderChips(),this.Mt=null,this.Nt=null,this.Ot=null}static get observedAttributes(){return["for"]}connectedCallback(){this.style.display||(this.style.display="contents"),this.bind(),this.renderChips(),this.Mt=new MutationObserver(()=>{this.template()!==this.Ot&&this.renderChips()}),this.Mt.observe(this,{childList:!0})}disconnectedCallback(){this.unbind(),this.Mt?.disconnect(),this.Mt=null}attributeChangedCallback(){this.isConnected&&(this.bind(),this.renderChips())}resolvePicker(){const n=this.getAttribute("for");return(n?document.getElementById(n):this.previousElementSibling)??null}bind(){const n=this.resolvePicker();n!==this.$t&&(this.unbind(),this.$t=n,this.$t?.addEventListener("change",this.Lt),this.$t&&(this.Nt=new MutationObserver(()=>this.renderChips()),this.Nt.observe(this.$t,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["selected"]})))}unbind(){this.$t?.removeEventListener("change",this.Lt),this.Nt?.disconnect(),this.Nt=null,this.$t=null}values(){return(this.$t?.value??"").split(",").map(n=>n.trim()).filter(Boolean)}template(){return this.querySelector(":scope > template")}context(n){const t=this.$t?.querySelector(`[value="${CSS.escape(n)}"]`),e={value:n,label:t?.getAttribute("label")||t?.textContent?.trim()||n,flavor:t?.getAttribute("flavor")??""};if(t)for(const o of Array.from(t.attributes))o.name.startsWith("data-")&&(e[o.name]=o.value);return e}templateSource(n){if(n.content.firstElementChild)return n.content;const t=document.createDocumentFragment();return n.childNodes.forEach(n=>t.appendChild(n.cloneNode(!0))),t}stampTemplate(n,t){const e=this.context(t),o=this.templateSource(n).cloneNode(!0),i=document.createTreeWalker(o,NodeFilter.SHOW_ELEMENT|NodeFilter.SHOW_TEXT);for(let r=i.nextNode();r;r=i.nextNode())if(r.nodeType===Node.TEXT_NODE)r.textContent?.includes("{")&&(r.textContent=It(r.textContent,e));else{const n=r;for(const t of Array.from(n.attributes)){if(!t.value.includes("{"))continue;const o=It(t.value,e);!/^\{[\w-]+\}$/.test(t.value)||""!==o&&o!==t.value?n.setAttribute(t.name,o):n.removeAttribute(t.name)}}for(const r of Array.from(o.children))r.addEventListener("dismiss",n=>{n.stopPropagation(),this.deselect(t)});return o}defaultChip(n){const t=this.context(n),e=document.createElement("ty-tag");return e.setAttribute("value",n),e.setAttribute("dismissible","true"),t.flavor&&e.setAttribute("flavor",t.flavor),e.textContent=t.label,e.addEventListener("dismiss",()=>this.deselect(n)),e}renderChips(){const n=this.template();if(this.Ot=n,!this.$t)return void this.replaceChildren(...n?[n]:[]);const t=document.createDocumentFragment();n&&t.appendChild(n);for(const e of this.values())t.appendChild(n?this.stampTemplate(n,e):this.defaultChip(e));this.replaceChildren(t)}deselect(n){if(!this.$t)return;const t=this.$t;"function"==typeof t.deselectValue?t.deselectValue(n):(t.value=this.values().filter(t=>t!==n).join(","),this.renderChips())}}customElements.get("ty-selected-tags")||customElements.define("ty-selected-tags",TySelectedTags);const Dt=new WeakMap,At=new WeakMap;function $t(n){return{width:n.getAttribute("width")||"100%",height:n.getAttribute("height")||"400px",active:n.getAttribute("active"),placement:n.getAttribute("placement")||"top"}}function Lt(n){return Array.from(n.querySelectorAll("ty-tab"))}function Nt(n){return n.getAttribute("id")}function Ot(n,t){const e=Nt(t);return e&&function(n,t){return null!==n.querySelector(`[slot='label-${t}']`)}(n,e)?"slot":"text"}function Rt(n){return n.hasAttribute("disabled")}function Pt(n,t){const e=n.findIndex(n=>Nt(n)===t);return 0>e?void 0:e}function qt(n,t){const e=n.getAttribute("active");return e&&void 0!==Pt(t,e)?e:t.length>0?Nt(t[0]):null}function Vt(n){const t=Dt.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 Bt(n,t,e){Vt(n);const o={tabClickHandlers:new Map};e.forEach(e=>{const i=Nt(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)}}),Dt.set(n,o)}function Ft(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 Ht(n,t,e){Lt(n).forEach(o=>{const i=Nt(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){Lt(n).forEach(n=>{const e=Nt(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 Wt(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);if(!i)return;const r=!o.style.left||0===o.offsetWidth;r&&(o.style.transition="none"),o.style.left=i.left+"px",o.style.top=i.top+"px",o.style.width=i.width+"px",o.style.height=i.height+"px",r&&(o.style.transition="")}function _t(n){const t=n.shadowRoot;if(!t)return;const{width:e,height:o,placement:i}=$t(n),s=Lt(n),a=qt(n,s),l=a?Pt(s,a)??0:0,c=t.querySelector(".tabs-container"),d=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+""),c&&d&&h){c.setAttribute("data-placement",i),d.querySelectorAll(".tab-button").forEach(n=>n.remove());const e=function(n,t,e){return t.map(t=>{const o=Nt(t);if(!o)return"";const i=Ot(n,t),r="text"===i?t.getAttribute("label")||"Tab":"",s=Rt(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=>{d.appendChild(n)}),Bt(n,t,s),Ht(n,t,a||""),requestAnimationFrame(()=>{const e=t.querySelector(".tab-buttons");e&&n.style.setProperty("--buttons-height",e.offsetHeight+"px"),Ft(n,l),a&&Wt(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=Nt(t);if(!o)return"";const i=Ot(n,t),r="text"===i?t.getAttribute("label")||"Tab":"",s=Rt(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"),Ft(n,l),a&&Wt(n,a)}),Bt(n,t,s),Ht(n,t,a||""),function(n){const t=At.get(n);t&&t.disconnect();const{width:e}=$t(n);if(e.includes("%")){const t=new ResizeObserver(t=>{const e=t[0].contentRect.width,o=Lt(n),i=qt(n,o),r=i?Pt(o,i):0;n.style.setProperty("--tabs-width",e+"px"),void 0!==r&&Ft(n,r),i&&Wt(n,i)});t.observe(n),At.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(){_t(this)}disconnectedCallback(){Vt(this),function(n){const t=At.get(n);t&&(t.disconnect(),At.delete(n))}(this)}attributeChangedCallback(n,t,e){"active"===n?(e&&function(n,t,e){const o=Lt(n),i=n.shadowRoot;if(!i)return;const r=e?Pt(o,e):void 0,s=Pt(o,t);if(e===t||void 0===s)return;n.style.setProperty("--active-index",s+""),Ft(n,s),Ht(n,i,t),jt(n,t),Wt(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),_t(this)):_t(this)}}customElements.get("ty-tabs")||customElements.define("ty-tabs",TyTabs);const Yt=`\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${gn}\n`;class TyTab extends HTMLElement{constructor(){super(),this.Jn=null,this.attachShadow({mode:"open"})}static get observedAttributes(){return["id","label","disabled"]}connectedCallback(){this.Rt()}disconnectedCallback(){this.Qn()}attributeChangedCallback(n,t,e){this.Rt()}Rt(){const n=this.shadowRoot;if(!n)return;const t=this.getAttribute("id");n.querySelector(".tab-wrapper")||(r(n,{css:Yt,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.nt())}nt(){const n=this.shadowRoot?.querySelector(".tab-panel"),t=this.shadowRoot?.querySelector(".tab-wrapper");n&&t&&pn()&&(n.classList.add("ty-custom-scroll"),this.Jn=new bn(n,{vertical:!0}),this.Jn.trackY&&t.appendChild(this.Jn.trackY))}Qn(){this.Jn&&(this.Jn.trackY?.remove(),this.Jn.destroy(),this.Jn=null)}resetScroll(){this.Jn?.scrollToTop(!1)}}customElements.get("ty-tab")||customElements.define("ty-tab",TyTab);const Ut=new WeakMap,Gt=new WeakMap;function Xt(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 Kt(n){return Array.from(n.querySelectorAll("ty-step"))}function Zt(n){return n.getAttribute("id")}function Jt(n){const t=n.getAttribute("completed")||"";return t.trim()?new Set(t.split(",").map(n=>n.trim()).filter(Boolean)):new Set}function Qt(n,t){const e=n.findIndex(n=>Zt(n)===t);return 0>e?void 0:e}function ne(n,t){const e=n.getAttribute("active");return e&&void 0!==Qt(t,e)?e:t.length>0?Zt(t[0]):null}function te(n,t){return n.length>1&&t?n.findIndex(n=>Zt(n)===t)/(n.length-1)*100:0}function ee(n){const t=Ut.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 oe(n,t,e){ee(n);const o={stepClickHandlers:new Map};e.forEach(e=>{const i=Zt(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=Kt(n),i=o.findIndex(n=>Zt(n)===t);if(0>i)return;const r=ne(n,o),s=r?Qt(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)}}),Ut.set(n,o)}function ie(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 re(n){const t=n.shadowRoot;if(!t)return;const e=t.querySelector(".progress-overlay");if(!e)return;const o=Kt(n),i=ne(n,o);Jt(n);const r=te(o,i);e.style.width=r+"%"}function se(n,t,e){const o=Kt(n),i=Jt(n);e&&o.findIndex(n=>Zt(n)===e),o.forEach(o=>{const r=Zt(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=le(o,r,e,i);a.setAttribute("data-state",n)}const c=n.querySelector(`[slot='indicator-${r}']`);c&&c.setAttribute("data-active",l+"")})}function ae(n,t){Kt(n).forEach(n=>{const e=Zt(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 le(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 ce(n,t,e,o){e&&t.findIndex(n=>Zt(n)===e);const i=t.map((t,i)=>{const r=Zt(t);if(!r)return"";const s=t.getAttribute("label")||"Step "+(i+1),a=t.getAttribute("description")||"",l=function(n){return n.hasAttribute("disabled")}(t),c=r===e,d=function(n,t){return null!==n.querySelector(`[slot='indicator-${t}']`)}(n,r),h=le(t,r,e,o);let u="";return u=d?`<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="${c}"\n tabindex="${c?"0":"-1"}"\n data-active="${c}"\n ${l?'disabled aria-disabled="true"':""}\n >\n <div class="step-circle" data-state="${h}" part="step-circle">\n ${u}\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=te(t,e);return`\n <div class="step-indicators-wrapper" part="indicators-wrapper">\n <div class="step-indicators" style="--ty-wizard-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 de(n){const t=n.shadowRoot;if(!t)return;const{width:e,height:o}=Xt(n),i=Kt(n),s=ne(n,i),a=s?Qt(i,s)??0:0,l=Jt(n),c=t.querySelector(".wizard-container"),d=t.querySelector(".step-indicators-wrapper"),h=t.querySelector(".panels-viewport");if(r(t,{css:'\n/* ============================================================================\n Theming Tokens — see file header for the override surface.\n Every default chains back to the brand layer / global scale tokens.\n ============================================================================ */\n\n:host {\n display: block;\n width: var(--ty-wizard-width, 100%); /* set by width attribute — not a public token */\n height: var(--ty-wizard-height, 700px); /* set by height attribute — not a public token */\n box-sizing: border-box;\n\n /* State accents — the primary override surface. One variable retints the\n * matching circle background, border, and glow. */\n --ty-wizard-active-accent: var(--ty-color-primary);\n --ty-wizard-completed-accent: var(--ty-color-success);\n --ty-wizard-error-accent: var(--ty-color-danger);\n --ty-wizard-pending-accent: var(--ty-color-neutral);\n\n /* Container chrome — routes through global scales. Override --ty-radius-lg\n * or --ty-shadow-md app-wide and the wizard follows; override these locally\n * to give the wizard a distinct look. */\n --ty-wizard-bg: var(--ty-surface-floating);\n --ty-wizard-border: var(--ty-border);\n --ty-wizard-radius: var(--ty-radius-lg, 12px);\n --ty-wizard-shadow: var(--ty-shadow-md, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1));\n\n /* Header strip */\n --ty-wizard-header-bg: var(--ty-surface-content);\n --ty-wizard-header-border: var(--ty-border-soft, var(--ty-border));\n --ty-wizard-header-padding: 24px 24px 16px;\n\n /* Progress line */\n --ty-wizard-progress-track: var(--ty-border);\n --ty-wizard-progress-fill: var(--ty-wizard-completed-accent);\n --ty-wizard-progress-height: 2px;\n\n /* Motion — routes through global motion tokens if defined. */\n --ty-wizard-transition-duration: var(--ty-transition-duration, 300ms);\n --ty-wizard-transition-easing: var(--ty-transition-easing, ease-in-out);\n\n /* Circle geometry */\n --ty-wizard-circle-size: 32px;\n --ty-wizard-circle-border-width: 2px;\n\n /* Panels viewport */\n --ty-wizard-panels-bg: var(--ty-surface-elevated);\n\n /* Focus */\n --ty-wizard-focus-outline: var(--ty-wizard-active-accent);\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: var(--ty-wizard-radius);\n border: 1px solid var(--ty-wizard-border);\n background: var(--ty-wizard-bg);\n box-shadow: var(--ty-wizard-shadow);\n overflow: hidden;\n}\n\n/* ===================================== */\n/* Step Indicators Wrapper */\n/* ===================================== */\n\n.step-indicators-wrapper {\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n position: relative;\n padding: var(--ty-wizard-header-padding);\n border-bottom: 1px solid var(--ty-wizard-header-border);\n background: var(--ty-wizard-header-bg);\n}\n\n/* ===================================== */\n/* Progress Line (behind step circles) */\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 sit at 50%/N from the left edge of each indicator.\n * Inset = 50% / step-count from each side keeps the line between circle centres.\n */\n left: calc(50% / var(--ty-wizard-step-count, 4));\n right: calc(50% / var(--ty-wizard-step-count, 4));\n top: calc(var(--ty-wizard-circle-size, 32px) / 2 - 1px);\n height: var(--ty-wizard-progress-height);\n background: var(--ty-wizard-progress-track);\n z-index: 0;\n pointer-events: none;\n transition: opacity var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing);\n}\n\n.progress-overlay {\n position: absolute;\n left: 0;\n top: 0;\n height: 100%;\n background: var(--ty-wizard-progress-fill);\n transition: width var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing);\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}\n\n/* ===================================== */\n/* Individual Step Indicator */\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 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-wizard-focus-outline);\n outline-offset: 4px;\n border-radius: 50%;\n}\n\n/* ===================================== */\n/* Step Circle */\n/* ===================================== */\n\n.step-circle {\n width: var(--ty-wizard-circle-size);\n height: var(--ty-wizard-circle-size);\n border-radius: 50%;\n border: var(--ty-wizard-circle-border-width) solid;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n z-index: 10;\n transition: all var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing);\n box-sizing: border-box;\n flex-shrink: 0;\n}\n\n.step-circle[data-state="completed"] {\n background: var(--ty-wizard-completed-accent);\n border-color: var(--ty-color-success-strong);\n color: var(--ty-solid-success-fg, white);\n box-shadow: 0 0 0 4px color-mix(in oklab, var(--ty-wizard-completed-accent) 12%, transparent);\n}\n\n.step-circle[data-state="active"] {\n background: var(--ty-wizard-active-accent);\n border-color: var(--ty-color-primary-strong);\n color: var(--ty-solid-primary-fg, white);\n box-shadow: 0 0 0 4px color-mix(in oklab, var(--ty-wizard-active-accent) 12%, transparent);\n}\n\n.step-circle[data-state="pending"] {\n background: var(--ty-surface-elevated);\n border-color: var(--ty-border);\n color: var(--ty-color-neutral);\n}\n\n.step-circle[data-state="error"] {\n background: var(--ty-wizard-error-accent);\n border-color: var(--ty-color-danger-strong);\n color: var(--ty-solid-danger-fg, white);\n box-shadow: 0 0 0 4px color-mix(in oklab, var(--ty-wizard-error-accent) 12%, transparent);\n}\n\n/* ===================================== */\n/* Step Text Container */\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 */\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-color-neutral);\n transition: color 200ms;\n}\n\n.step-indicator[aria-selected="true"] .step-label {\n color: var(--ty-color-neutral-strong);\n}\n\n.step-indicator[aria-selected="false"] .step-label {\n color: var(--ty-color-neutral);\n}\n\n/* ===================================== */\n/* Step Description */\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-color-neutral);\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-color-neutral-bold);\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/* ===================================== */\n\n.panels-viewport {\n position: relative;\n flex: 1;\n overflow: hidden;\n min-height: 0;\n background: var(--ty-wizard-panels-bg);\n}\n\n/* ===================================== */\n/* Panels Wrapper (slides horizontally) */\n/* ===================================== */\n\n.panels-wrapper {\n display: flex;\n height: 100%;\n transition: transform var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing);\n will-change: transform;\n}\n\n/* ===================================== */\n/* Slotted Step Panels */\n/* ===================================== */\n\n::slotted(ty-step) {\n width: var(--ty-wizard-width, 100%);\n height: 100%;\n flex-shrink: 0;\n}\n\n/* ===================================== */\n/* Accessibility & Motion Preferences */\n/* ===================================== */\n\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.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("--ty-wizard-width",e.includes("%")?"100%":e),n.style.setProperty("--ty-wizard-height",o),n.style.setProperty("--ty-wizard-active-index",a+""),n.style.setProperty("--ty-wizard-step-count",i.length+""),c&&d&&h){d.remove();const e=ce(n,i,s,l),o=document.createElement("div");o.innerHTML=e,c.insertBefore(o.firstElementChild,h),oe(n,t,i),se(n,t,s||""),requestAnimationFrame(()=>{const e=t.querySelector(".step-indicators-wrapper");e&&n.style.setProperty("--ty-wizard-indicators-height",e.offsetHeight+"px"),ie(n,a),re(n)}),s&&ae(n,s)}else t.innerHTML=`\n <div class="wizard-container">\n ${ce(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("--ty-wizard-indicators-height",e.offsetHeight+"px"),ie(n,a),re(n)}),oe(n,t,i),se(n,t,s||""),function(n){const t=Gt.get(n);t&&t.disconnect();const{width:e}=Xt(n);if(e.includes("%")){const t=new ResizeObserver(t=>{const e=t[0].contentRect.width,o=Kt(n),i=ne(n,o),r=i?Qt(o,i):0;n.style.setProperty("--ty-wizard-width",e+"px"),void 0!==r&&ie(n,r)});t.observe(n),Gt.set(n,t)}}(n),s&&ae(n,s)}class TyWizard extends HTMLElement{static get observedAttributes(){return["width","height","active","completed","orientation"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){de(this)}disconnectedCallback(){ee(this),function(n){const t=Gt.get(n);t&&(t.disconnect(),Gt.delete(n))}(this)}attributeChangedCallback(n,t,e){"active"===n?(e&&function(n,t){const e=Kt(n),o=n.shadowRoot;if(!o)return;const i=ne(n,e),r=i?Qt(e,i):void 0,s=Qt(e,t);if(i===t||void 0===s)return;n.style.setProperty("--ty-wizard-active-index",s+""),ie(n,s),se(n,o,t),re(n),ae(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),de(this)):de(this)}}customElements.get("ty-wizard")||customElements.define("ty-wizard",TyWizard);const he=`\n:host {\n width: var(--ty-wizard-width, 100%);\n height: calc(var(--ty-wizard-height, 700px) - var(--ty-wizard-indicators-height, 120px));\n display: block;\n box-sizing: border-box;\n flex-shrink: 0;\n transition: opacity var(--ty-wizard-transition-duration, 400ms) var(--ty-wizard-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${gn}\n`;class TyStep extends HTMLElement{constructor(){super(),this.Jn=null,this.attachShadow({mode:"open"})}static get observedAttributes(){return["id","label","description","disabled","status"]}connectedCallback(){this.Rt()}disconnectedCallback(){this.Qn()}attributeChangedCallback(n,t,e){this.Rt()}Rt(){const n=this.shadowRoot;if(!n)return;const t=this.getAttribute("id");n.querySelector(".step-wrapper")||(r(n,{css:he,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.nt())}nt(){const n=this.shadowRoot?.querySelector(".step-panel"),t=this.shadowRoot?.querySelector(".step-wrapper");n&&t&&pn()&&(n.classList.add("ty-custom-scroll"),this.Jn=new bn(n,{vertical:!0}),this.Jn.trackY&&t.appendChild(this.Jn.trackY))}Qn(){this.Jn&&(this.Jn.trackY?.remove(),this.Jn.destroy(),this.Jn=null)}resetScroll(){this.Jn?.scrollToTop(!1)}}function ue(n){if(!Number.isInteger(n)||1>n||n>12)throw new RangeError(`Invalid month: ${n}. Must be an integer between 1 and 12.`)}function pe(n,t,e,o){const i=n.getFullYear(),r=n.getMonth()+1,s=n.getDate(),a=n.getDay(),l=i!==t||r!==e;let c=!1,d=!1;l&&(t>i||i===t&&e>r?c=!0:d=!0);const h=(p=function(){const n=new Date;return new Date(n.getFullYear(),n.getMonth(),n.getDate(),0,0,0,0)}(),(u=n).getFullYear()===p.getFullYear()&&u.getMonth()===p.getMonth()&&u.getDate()===p.getDate());var u,p;const b=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:c,nextMonth:d,today:h,isSelected:b,selectedYear:o?.year,selectedMonth:o?.month,selectedDay:o?.day}}function be(n,t){const e=new Date(n);return e.setDate(e.getDate()+t),e}function ge(n){const t=n.match(/^(\d{4})-(\d{2})-(\d{2})$/);if(!t)return null;const e=parseInt(t[1],10),o=parseInt(t[2],10),i=parseInt(t[3],10);if(1>e||e>9999)return null;if(1>o||o>12)return null;if(1>i||i>31)return null;const r=new Date(e,o-1,i);return r.getFullYear()!==e||r.getMonth()!==o-1||r.getDate()!==i?null:{year:e,month:o,day:i}}function ve(n){return n instanceof HTMLElement}function ye(n){if(!n)return null;const t=ge(n);return t?Date.UTC(t.year,t.month-1,t.day):null}function me(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.Pt="en-US",this.gt="md";const n=new Date;this.qt=n.getFullYear(),this.Vt=n.getMonth()+1,this.attachShadow({mode:"open"})}static get observedAttributes(){return["locale","size","min","max"]}connectedCallback(){this.Vt||(this.Vt=(new Date).getMonth()+1),this.qt||(this.qt=(new Date).getFullYear()),this.Pt||(this.Pt=this.getAttribute("locale")||"en-US");const n=this.getAttribute("size");!n||"sm"!==n&&"md"!==n&&"lg"!==n||(this.gt=n);const t=this.dayContentFn;t&&!this.Bt&&(this.Bt=t,delete this.dayContentFn);const e=this.customCSS;e&&!this.Ft&&(this.Ft=e,delete this.customCSS),this.J=j(this,()=>{this.render()}),this.render()}disconnectedCallback(){this.J&&(this.J(),this.J=void 0)}attributeChangedCallback(n,t,e){"locale"===n?(this.Pt=e||"en-US",this.render()):"size"===n?"sm"!==e&&"md"!==e&&"lg"!==e||(this.gt=e,this.render()):"min"!==n&&"max"!==n||(this["min"===n?"Ht":"jt"]=e??void 0,this.render())}get displayYear(){return this.qt}set displayYear(n){this.qt!==n&&(this.qt=n,this.render())}get displayMonth(){return this.Vt}set displayMonth(n){this.Vt!==n&&(this.Vt=n,this.render())}get locale(){return H(this,this.getAttribute("locale"))}set locale(n){this.Pt!==n&&(this.Pt=n,this.render())}get size(){return this.gt}set size(n){this.gt!==n&&(this.gt=n,this.render())}get width(){return this.Wt}set width(n){this.Wt!==n&&(this.Wt=n,this.applyWidthProperties())}get minWidth(){return this._t}set minWidth(n){this._t!==n&&(this._t=n,this.applyWidthProperties())}get maxWidth(){return this.Yt}set maxWidth(n){this.Yt!==n&&(this.Yt=n,this.applyWidthProperties())}get dayContentFn(){return this.Bt}set dayContentFn(n){this.Bt!==n&&(this.Bt=n,this.render())}get customCSS(){return this.Ft}set customCSS(n){this.Ft!==n&&(this.Ft=n,this.applyCustomCSS())}get min(){return this.Ht}set min(n){this.Ht!==n&&(this.Ht=n,this.render())}get max(){return this.jt}set max(n){this.jt!==n&&(this.jt=n,this.render())}get value(){return this.O}set value(n){const t=n??void 0;this.O!==t&&(this.O=t,this.render())}applyWidthProperties(){const n=me(this.Wt),t=me(this._t),e=me(this.Yt);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.Ft||!this.shadowRoot)return;const n=this.shadowRoot.adoptedStyleSheets;n.includes(this.Ft)||(this.shadowRoot.adoptedStyleSheets=[...n,this.Ft])}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,t){const e=document.createElement("div"),o=this.Bt?this.Bt(n):function(n){return""+n.dayInMonth}(n);if(this.Bt&&o&&!ve(o)&&"string"!=typeof o)throw Error(`Custom dayContentFn must return a DOM element or string, got: ${typeof o}. Use document.createElement() to create DOM elements.`);const i=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&&i.push("disabled"),e.className=i.join(" "),"string"==typeof o?e.textContent=o:ve(o)&&e.appendChild(o),t||e.addEventListener("pointerdown",t=>{t.preventDefault(),this.dispatchDayClick(n,t)}),e}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/* Theming tokens are applied as var(--ty-calendar-*, <default>) at point\n of use (not declared on :host) so consumers can override any of them\n from outside the shadow root. The 3 accent aliases — --ty-calendar-accent,\n --ty-calendar-today-accent, --ty-calendar-muted — still cascade into the\n derived defaults, so overriding one retints the related cells. */\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: var(--ty-radius-md);\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, var(--ty-color-neutral-strong));\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, 0.375rem);\n border: 1px solid var(--ty-calendar-day-border, var(--ty-border-faint));\n background-color: var(--ty-calendar-day-bg, transparent);\n color: var(--ty-calendar-day-color, var(--ty-calendar-muted, var(--ty-color-neutral)));\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, var(--ty-color-neutral-strong));\n background-color: var(--ty-calendar-day-hover-bg, var(--ty-bg-neutral-soft));\n border-color: var(--ty-calendar-day-hover-border, var(--ty-border-bold));\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, var(--ty-bg-secondary-soft));\n color: var(--ty-calendar-today-color, var(--ty-color-secondary-strong));\n border-color: var(--ty-calendar-today-border, var(--ty-calendar-today-accent, var(--ty-color-secondary)));\n font-weight: 600;\n}\n\n/* Weekend - Subtle Color Shift */\n.calendar-day-cell.weekend {\n color: var(--ty-calendar-weekend-color, var(--ty-color-danger-soft));\n}\n\n/* Other Month - Muted */\n.calendar-day-cell.other-month {\n color: var(--ty-calendar-other-month-color, var(--ty-color-neutral-faint));\n opacity: var(--ty-calendar-other-month-opacity, 0.5);\n}\n\n.calendar-day-cell.other-month:hover { \n color: var(--ty-calendar-day-hover-color, var(--ty-color-neutral-strong));\n background-color: var(--ty-calendar-day-hover-bg, var(--ty-bg-neutral-soft));\n opacity: 0.7;\n}\n\n/* Disabled - outside min/max bounds */\n.calendar-day-cell.disabled {\n color: var(--ty-calendar-disabled-color, var(--ty-color-neutral-faint));\n opacity: var(--ty-calendar-disabled-opacity, 0.35);\n cursor: default;\n pointer-events: none;\n}\n\n/* Selected State (for custom usage) */\n.calendar-day-cell.selected {\n background-color: var(--ty-calendar-selected-bg, var(--ty-bg-primary));\n color: var(--ty-calendar-selected-color, var(--ty-color-primary-strong));\n border-color: var(--ty-calendar-selected-border, var(--ty-calendar-accent, var(--ty-color-primary)));\n font-weight: 600;\n}\n\n.calendar-day-cell.selected:hover {\n background-color: var(--ty-calendar-selected-hover-bg, var(--ty-bg-primary-bold));\n border-color: var(--ty-calendar-selected-hover-border, var(--ty-color-primary-bold));\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.O){const n=new Date(this.O);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),ue(t),function(n,t,e,o,i){const r=[];for(let s=0;42>s;s++){const t=be(n,s);r.push(pe(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.qt,this.Vt,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=be(o,t);return e.format(i)}),[r,...s]=i;return[...s,r]}(this.Pt,"short");n.innerHTML="";const i=document.createElement("div");i.className="calendar-flex-container calendar-size-"+this.gt;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));const l=ye(this.Ht),c=ye(this.jt);a.forEach(n=>{const t=document.createElement("div");t.className="calendar-row calendar-day-row",n.forEach(n=>{const e=this.renderDayCell(n,null!==l&&l>n.value||null!==c&&n.value>c);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 fe='\n/* ============================================================================\n Size Variants (CSS Custom Properties)\n ============================================================================ */\n\n/* Theming tokens applied as var(--ty-calendar-nav-*, <default>) at point of\n use (NOT on :host) so consumers can override them from outside — this\n component is nested inside ty-calendar\'s shadow, so a :host default would\n block inherited overrides. --ty-calendar-accent still cascades in. */\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: var(--ty-radius-base);\n background-color: transparent;\n color: var(--ty-calendar-nav-color, var(--ty-color-neutral));\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, var(--ty-bg-neutral-soft));\n color: var(--ty-calendar-nav-hover-color, var(--ty-color-neutral-strong));\n}\n\n.nav-btn:active {\n background-color: var(--ty-calendar-nav-active-bg, var(--ty-bg-neutral));\n transform: scale(0.95);\n}\n\n.nav-btn:disabled {\n opacity: 0.35;\n cursor: default;\n pointer-events: none;\n}\n\n.nav-btn:focus-visible {\n outline: 2px solid var(--ty-calendar-nav-focus-outline, var(--ty-calendar-accent, var(--ty-color-primary)));\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, var(--ty-color-neutral-strong));\n text-align: center;\n white-space: nowrap;\n letter-spacing: -0.01em;\n}\n',we=class n extends o{constructor(){super();const n=new Date;this.ft={displayMonth:n.getMonth()+1,displayYear:n.getFullYear()},r(this.shadowRoot,{css:fe,id:"ty-calendar-navigation"})}onConnect(){this.ft.displayMonth=this.displayMonth,this.ft.displayYear=this.displayYear,this.J=j(this,()=>{this.render()}),this.render()}onDisconnect(){this.J&&(this.J(),this.J=void 0)}onPropertiesChanged(n){for(const{name:t,newValue:e}of n)switch(t){case"display-month":this.ft.displayMonth=e;break;case"display-year":this.ft.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 H(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)}get min(){return this.getProperty("min")}set min(n){this.setProperty("min",n??"")}get max(){return this.getProperty("max")}set max(n){this.setProperty("max",n??"")}emitChangeEvent(n,t){const e=new CustomEvent("change",{detail:{month:n,year:t},bubbles:!0,cancelable:!0});this.dispatchEvent(e)}static monthIndex(n,t){return 12*n+(t-1)}boundIndices(){const t=ge(this.min),e=ge(this.max);return{minIdx:t?n.monthIndex(t.year,t.month):null,maxIdx:e?n.monthIndex(e.year,e.month):null}}clampIndex(n){const{minIdx:t,maxIdx:e}=this.boundIndices();return null!==t&&t>n?t:null!==e&&n>e?e:n}navigateBy(t){const e=n.monthIndex(this.ft.displayYear,this.ft.displayMonth),o=this.clampIndex(e+t);o!==e&&this.emitChangeEvent(o%12+1,Math.floor(o/12))}isNavDisabled(t){const e=n.monthIndex(this.ft.displayYear,this.ft.displayMonth);return this.clampIndex(e+t)===e}createButton(n,t,e,o,i=!1){const r=document.createElement("button");return r.className=n,r.title=t,r.innerHTML=e,r.disabled=i,r.addEventListener("click",o),r}render(){const n=this.shadowRoot;if(!n)return;r(n,{css:fe,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"){ue(n);const o=new Date(2024,n-1,1);return new Intl.DateTimeFormat(t,{month:e}).format(o)}(this.ft.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.navigateBy(-12),this.isNavDisabled(-12))),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.navigateBy(-1),this.isNavDisabled(-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.ft.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.navigateBy(1),this.isNavDisabled(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.navigateBy(12),this.isNavDisabled(12))),o.appendChild(i),o.appendChild(s),o.appendChild(l),n.appendChild(o)}};we.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:""},min:{type:"string",visual:!0,default:""},max:{type:"string",visual:!0,default:""}};let xe=we;function ke(n){return n&&/^\d{4}$/.test(n)?parseInt(n,10):null}function ze(n){if(!n||!/^\d{1,2}$/.test(n))return null;const t=parseInt(n,10);return 1>t||t>12?null:t}function Ce(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 Se(n,t,e){return`${n}-${(""+t).padStart(2,"0")}-${(""+e).padStart(2,"0")}`}customElements.get("ty-calendar-navigation")||customElements.define("ty-calendar-navigation",xe);const Ee=class extends HTMLElement{constructor(){super(),this.Pt="en-US",this.Ut=!0,this.Gt=!1,this.gt="md";const n=function(){const n=new Date;return{year:n.getFullYear(),month:n.getMonth()+1,day:n.getDate()}}();this.ft={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","min","max"]}connectedCallback(){this.initializeFromAttributes();const n=this.dayContentFn;n&&!this.Bt&&(this.Bt=n,delete this.dayContentFn);const t=this.customCSS;t&&!this.Ft&&(this.Ft=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.ft.selectedYear=t,this.ft.selectedMonth=e,this.ft.selectedDay=o,this.ft.displayYear=t,this.ft.displayMonth=e,this.Gt||(this.setAttribute("year",""+t),this.setAttribute("month",""+e),this.setAttribute("day",""+o))}delete this.value}this.render(),this.updateFormValue(),this.J=j(this,()=>{this.render()})}disconnectedCallback(){this.J&&(this.J(),this.J=void 0),this.Xt=void 0,this.Kt=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.Ut="false"!==e,this.render();break;case"stateless":this.Gt=null!==e&&"false"!==e;break;case"locale":this.Pt=e||"en-US",this.syncChildComponents();break;case"size":"sm"!==e&&"md"!==e&&"lg"!==e||(this.gt=e,this.Wt=void 0,this.removeAttribute("width"),this.syncChildComponents());break;case"width":this.Wt=e||void 0,e&&(this.gt="md",this.removeAttribute("size")),this.syncChildComponents();break;case"name":this.updateFormValue();break;case"min":case"max":this["min"===n?"Ht":"jt"]=e||void 0,this.syncChildComponents(),this.updateValidity()}}get min(){return this.Ht}set min(n){n?this.setAttribute("min",n):this.removeAttribute("min")}get max(){return this.jt}set max(n){n?this.setAttribute("max",n):this.removeAttribute("max")}get year(){return this.ft.selectedYear}set year(n){void 0!==n?this.Gt?(this.ft.displayYear=n,this.setAttribute("year",""+n)):(this.ft.selectedYear=n,this.ft.displayYear=n,this.setAttribute("year",""+n)):(this.Gt||delete this.ft.selectedYear,this.removeAttribute("year")),this.syncChildComponents(),this.Gt||this.updateFormValue()}get month(){return this.ft.selectedMonth}set month(n){void 0!==n?this.Gt?(this.ft.displayMonth=n,this.setAttribute("month",""+n)):(this.ft.selectedMonth=n,this.ft.displayMonth=n,this.setAttribute("month",""+n)):(this.Gt||delete this.ft.selectedMonth,this.removeAttribute("month")),this.syncChildComponents(),this.Gt||this.updateFormValue()}get day(){return this.ft.selectedDay}set day(n){void 0!==n?(this.ft.selectedDay=n,this.setAttribute("day",""+n)):(delete this.ft.selectedDay,this.removeAttribute("day")),this.syncChildComponents(),this.updateFormValue()}get locale(){return H(this,this.getAttribute("locale"))}set locale(n){this.Pt=n,this.setAttribute("locale",n)}get showNavigation(){return this.Ut}set showNavigation(n){this.Ut=n,this.setAttribute("show-navigation",""+n)}get stateless(){return this.Gt}set stateless(n){this.Gt=n,n?this.setAttribute("stateless",""):this.removeAttribute("stateless")}get size(){return this.gt}set size(n){this.gt!==n&&(this.gt=n,this.Wt=void 0,this.removeAttribute("width"),this.setAttribute("size",n),this.syncChildComponents())}get width(){return this.Wt}set width(n){this.Wt!==n&&(this.Wt=n,n?(this.gt="md",this.removeAttribute("size"),this.setAttribute("width",n)):this.removeAttribute("width"),this.syncChildComponents())}get dayContentFn(){return this.Bt}set dayContentFn(n){this.Bt=n,this.syncChildComponents()}get customCSS(){return this.Ft}set customCSS(n){this.Ft=n,this.syncChildComponents()}get value(){const{selectedYear:n,selectedMonth:t,selectedDay:e}=this.ft;return n&&t&&e?Se(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.ft.selectedYear=n,this.ft.selectedMonth=e,this.ft.selectedDay=o,this.ft.displayYear=n,this.ft.displayMonth=e,this.Gt||(this.setAttribute("year",""+n),this.setAttribute("month",""+e),this.setAttribute("day",""+o))}}else delete this.ft.selectedYear,delete this.ft.selectedMonth,delete this.ft.selectedDay,this.Gt||(this.removeAttribute("year"),this.removeAttribute("month"),this.removeAttribute("day"));this.syncChildComponents(),this.Gt||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");this.Ht=this.getAttribute("min")||void 0,this.jt=this.getAttribute("max")||void 0;const l=ke(n);l&&(this.ft.displayYear=l);const c=ze(t);if(c&&(this.ft.displayMonth=c),l&&c){const n=Ce(e,l,c);n&&(this.ft.selectedYear=l,this.ft.selectedMonth=c,this.ft.selectedDay=n)}o&&(this.Pt=o),i&&(this.Ut="false"!==i),null!==r&&(this.Gt="false"!==r),!s||"sm"!==s&&"md"!==s&&"lg"!==s||(this.gt=s),a&&(this.Wt=a)}syncStateFromAttributes(){const n=this.getAttribute("year"),t=this.getAttribute("month"),e=this.getAttribute("day"),o=ke(n),i=ze(t);if(o&&(this.ft.displayYear=o),i&&(this.ft.displayMonth=i),o&&i){const n=Ce(e,o,i);n?(this.ft.selectedYear=o,this.ft.selectedMonth=i,this.ft.selectedDay=n):(delete this.ft.selectedYear,delete this.ft.selectedMonth,delete this.ft.selectedDay)}else delete this.ft.selectedYear,delete this.ft.selectedMonth,delete this.ft.selectedDay}syncChildComponents(){if(this.Xt&&(this.Xt.displayMonth=this.ft.displayMonth,this.Xt.displayYear=this.ft.displayYear,this.Xt.locale=this.locale,this.Xt.size=this.gt,this.Xt.min=this.Ht??"",this.Xt.max=this.jt??"",this.Xt.width=this.Wt),this.Kt){this.Kt.displayMonth=this.ft.displayMonth,this.Kt.displayYear=this.ft.displayYear,this.Kt.locale=this.locale,this.Kt.size=this.gt,this.Kt.min=this.Ht,this.Kt.max=this.jt,this.Kt.width=this.Wt,this.Bt&&(this.Kt.dayContentFn=this.Bt),this.Ft&&(this.Kt.customCSS=this.Ft);const{selectedYear:n,selectedMonth:t,selectedDay:e}=this.ft;this.Kt.value=n&&t&&e?new Date(n,t-1,e).getTime():null}}updateFormValue(){if(this.Gt)return;if(!this.m)return;const n=this.getAttribute("name"),{selectedYear:t,selectedMonth:e,selectedDay:o}=this.ft;if(n&&t&&e&&o){const n=Se(t,e,o);this.m.setFormValue(n)}else this.m.setFormValue("");this.updateValidity()}updateValidity(){if(!this.m)return;const{selectedYear:n,selectedMonth:t,selectedDay:e}=this.ft;if(n&&t&&e){const o=Date.UTC(n,t-1,e),i=this.Ht?ge(this.Ht):null,r=this.jt?ge(this.jt):null;if(i&&o<Date.UTC(i.year,i.month-1,i.day))return void this.m.setValidity({rangeUnderflow:!0},`Date must be ${this.Ht} or later`);if(r&&o>Date.UTC(r.year,r.month-1,r.day))return void this.m.setValidity({rangeOverflow:!0},`Date must be ${this.jt} or earlier`)}this.m.setValidity({})}handleNavigationChange(n){n.preventDefault(),n.stopPropagation();const{month:t,year:e}=n.detail;this.ft.displayMonth=t,this.ft.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.Gt?this.dispatchEvent(new CustomEvent("day-click",{detail:n.detail,bubbles:!0,composed:!0,cancelable:!0})):(this.ft.selectedYear=e,this.ft.selectedMonth=o,this.ft.selectedDay=i,this.ft.displayYear=e,this.ft.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.Kt&&"function"==typeof this.Kt.refresh&&this.Kt.refresh()}createNavigation(){const n=document.createElement("ty-calendar-navigation");return n.displayMonth=this.ft.displayMonth,n.displayYear=this.ft.displayYear,n.locale=this.locale,n.size=this.gt,n.min=this.Ht??"",n.max=this.jt??"",this.Wt&&(n.width=this.Wt),n.addEventListener("change",n=>this.handleNavigationChange(n)),this.Xt=n,n}createMonthDisplay(){const n=document.createElement("ty-calendar-month");n.displayMonth=this.ft.displayMonth,n.displayYear=this.ft.displayYear,n.locale=this.locale,n.size=this.gt,n.min=this.Ht,n.max=this.jt,this.Wt&&(n.width=this.Wt);const{selectedYear:t,selectedMonth:e,selectedDay:o}=this.ft;return t&&e&&o&&(n.value=new Date(t,e-1,o).getTime()),this.Bt&&(n.dayContentFn=this.Bt),this.Ft&&(n.customCSS=this.Ft),n.addEventListener("day-click",n=>this.handleDayClick(n)),this.Kt=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.Ut){const n=this.createNavigation();t.appendChild(n)}const e=this.createMonthDisplay();t.appendChild(e),n.appendChild(t)}};Ee.formAssociated=!0;let Te=Ee;customElements.get("ty-calendar")||customElements.define("ty-calendar",Te);const Me='\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: var(--ty-shadow-lg, 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.ty-field-label {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n font-weight: var(--ty-font-medium);\n color: var(--ty-label-color);\n margin-bottom: 6px;\n padding-left: 12px;\n display: flex;\n align-items: center;\n}\n\n.required-icon {\n display: inline-flex;\n align-items: center;\n color: #ef4444;\n width: 12px;\n height: 12px;\n vertical-align: middle;\n margin-left: 4px;\n}\n\n.dropdown-wrapper {\n position: relative;\n display: block;\n width: 100%;\n}\n\n/* Start-slot icon (leading content inside the date-picker stub) */\n.date-picker-stub ::slotted([slot="start"]) {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin-right: 0.5rem;\n color: var(--ty-color-text-soft);\n}\n\n.date-picker-stub ::slotted(ty-icon[slot="start"]) {\n width: 1em;\n height: 1em;\n}\n\n/* Date picker stub (styled like dropdown) */\n.date-picker-stub {\n width: 100%;\n cursor: pointer;\n box-sizing: border-box;\n position: relative;\n display: flex;\n align-items: center;\n background: var(--ty-date-picker-bg);\n color: var(--ty-date-picker-color);\n border: 1px solid var(--ty-date-picker-border);\n border-radius: var(--ty-date-picker-radius);\n font-family: var(--ty-font-sans);\n font-size: var(--ty-font-sm);\n font-weight: var(--ty-font-normal);\n line-height: var(--ty-line-height-tight);\n min-height: var(--ty-size-md);\n padding: var(--ty-spacing-2) var(--ty-spacing-3);\n padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n transition: var(--ty-transition-all), opacity 0.2s ease;\n outline: none;\n}\n\n.date-picker-stub:hover:not([disabled]):not(.open) {\n border-color: var(--ty-date-picker-border-hover);\n}\n\n.date-picker-stub[disabled] {\n background-color: var(--ty-date-picker-disabled-bg);\n color: var(--ty-date-picker-disabled-color);\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n.date-picker-stub:focus,\n.date-picker-stub.open {\n border-color: var(--ty-date-picker-border-focus);\n box-shadow: 0 0 0 3px var(--ty-date-picker-shadow-focus);\n}\n\n/* Size variants */\n.date-picker-stub.xs {\n min-height: var(--ty-size-xs);\n font-size: var(--ty-font-xs);\n padding: var(--ty-spacing-1) var(--ty-spacing-2);\n padding-right: calc(var(--ty-spacing-2) + 0.875rem + var(--ty-spacing-1));\n}\n\n.date-picker-stub.sm {\n min-height: var(--ty-size-sm);\n font-size: var(--ty-font-xs);\n padding: var(--ty-spacing-1) var(--ty-spacing-2);\n padding-right: calc(var(--ty-spacing-2) + 0.875rem + var(--ty-spacing-1));\n}\n\n.date-picker-stub.lg {\n min-height: var(--ty-size-lg);\n font-size: var(--ty-font-base);\n padding: var(--ty-spacing-2) var(--ty-spacing-4);\n padding-right: calc(var(--ty-spacing-4) + 1.125rem + var(--ty-spacing-2));\n}\n\n.date-picker-stub.xl {\n min-height: var(--ty-size-xl);\n font-size: var(--ty-font-lg);\n padding: var(--ty-spacing-3) var(--ty-spacing-4);\n padding-right: calc(var(--ty-spacing-4) + 1.25rem + var(--ty-spacing-3));\n}\n\n/* Flavor variants */\n/* Primary - Main brand focus state */\n.date-picker-stub.primary {\n border-color: var(--ty-input-primary-border, var(--ty-color-primary));\n}\n\n.date-picker-stub.primary:hover:not([disabled]) {\n border-color: var(--ty-color-primary-bold);\n}\n\n.date-picker-stub.primary:focus,\n.date-picker-stub.primary.open {\n border-color: var(--ty-color-primary-bold);\n box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-primary) 15%, transparent);\n}\n\n/* Secondary - 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-bold);\n}\n\n.date-picker-stub.secondary:focus,\n.date-picker-stub.secondary.open {\n border-color: var(--ty-color-secondary-bold);\n box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-secondary) 15%, transparent);\n}\n\n/* Success - 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-bold);\n}\n\n.date-picker-stub.success:focus,\n.date-picker-stub.success.open {\n border-color: var(--ty-color-success-bold);\n box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-success) 15%, transparent);\n}\n\n/* Danger - 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-bold);\n}\n\n.date-picker-stub.danger:focus,\n.date-picker-stub.danger.open {\n border-color: var(--ty-color-danger-bold);\n box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-danger) 15%, transparent);\n}\n\n/* Warning - 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-bold);\n}\n\n.date-picker-stub.warning:focus,\n.date-picker-stub.warning.open {\n border-color: var(--ty-color-warning-bold);\n box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-warning) 15%, transparent);\n}\n\n/* 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',Ie="<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>",De="<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 Ae(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 $e(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 Le(n){if(!n.year||!n.month||!n.day)return null;const t=$e(n);return t?t.toISOString():null}function Ne(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 Oe(n,t){return`${(""+n).padStart(2,"0")}:${(""+t).padStart(2,"0")}`}function Re(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 Pe{constructor(n,t,e=0,o=0){this.element=n,this.datePickerElement=t;const i=Oe(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=Re(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=Re(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:Oe(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=Oe(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 qe=class extends o{constructor(){super(),this.ft={withTime:!1,open:!1},this.Zt=0,r(this.shadowRoot,{css:Me,id:"ty-date-picker"})}onConnect(){this.initializeState(),this.render(),this.J=j(this,()=>{this.render()})}onDisconnect(){this.J&&(this.J(),this.J=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=Ae(e,this.ft.withTime);if(null===n){(void 0!==this.ft.year||void 0!==this.ft.month||void 0!==this.ft.day)&&(this.ft={withTime:this.ft.withTime,open:this.ft.open});break}const t={year:this.ft.year,month:this.ft.month,day:this.ft.day,hour:this.ft.hour,minute:this.ft.minute};(n?.year!==t.year||n?.month!==t.month||n?.day!==t.day||n?.hour!==t.hour||n?.minute!==t.minute)&&(this.ft={...this.ft,...n});break}case"with-time":e!==this.ft.withTime&&(this.ft.withTime=e,void 0!==this.ft.year&&void 0!==this.ft.month&&void 0!==this.ft.day&&this.syncFormValue())}}getFormValue(){return Le(this.getComponents())}getComponents(){return{year:this.ft.year,month:this.ft.month,day:this.ft.day,hour:this.ft.hour,minute:this.ft.minute}}hasDate(){return!!(this.ft.year&&this.ft.month&&this.ft.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=$e(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",H(this,this.getProperty("locale")),this.ft.withTime):null}initializeState(){const n=this.getProperty("value"),t=this.getProperty("with-time"),e=Ae(n,t);this.ft=null===e?{withTime:t,open:!1}:{...e,withTime:t,open:!1},this.syncFormValue()}updateState(n,t=!1){this.ft={...this.ft,...n},(t||!this.ft.open||!this.ft.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?Le(n):null,o=n?Ne(n,this.ft.withTime):null,i=n?$e(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 min(){return this.getProperty("min")}set min(n){this.setProperty("min",n??"")}get max(){return this.getProperty("max")}set max(n){this.setProperty("max",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.ft.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=De,n.addEventListener("click",n=>this.handleClearClick(n)),s.appendChild(n)}const a=document.createElement("span");return a.className="stub-arrow",a.innerHTML=Ie,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.Jt=new Pe(e,this,this.ft.hour||0,this.ft.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.ft.year&&this.ft.month&&this.ft.day&&(e.setAttribute("year",""+this.ft.year),e.setAttribute("month",""+this.ft.month),e.setAttribute("day",""+this.ft.day));const o=H(this,this.getProperty("locale"));o&&e.setAttribute("locale",o);const i=this.getProperty("min"),r=this.getProperty("max");return i&&e.setAttribute("min",i),r&&e.setAttribute("max",r),e.addEventListener("change",n=>this.handleCalendarChange(n)),t.appendChild(e),this.ft.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.ft.withTime?"datetime-local":"date",e&&(o.disabled=!0),this.getProperty("required")&&(o.required=!0);const i=this.getProperty("min"),r=this.getProperty("max");i&&(o.min=this.ft.withTime?i+"T00:00":i),r&&(o.max=this.ft.withTime?r+"T23:59":r);const s=Ne(this.getComponents(),this.ft.withTime);s&&(o.value=s);const a=this.getProperty("placeholder")||"Select date...",l=this.getFormattedValue(),c=document.createElement("span");c.className="stub-text"+(l?"":" placeholder"),c.textContent=l||a,o.addEventListener("change",()=>{if(!o.value)return void this.clearValue();const n=Ae(o.value,this.ft.withTime);n&&(this.updateState(n,!0),this.emitChangeEvent(n,"selection"))});const d=document.createElement("slot");d.name="start",t.appendChild(d),t.appendChild(o),t.appendChild(c);const h=document.createElement("div");if(h.className="stub-icons",this.getProperty("clearable")&&s&&!e){const n=document.createElement("button");n.className="stub-clear",n.type="button",n.innerHTML=De,n.addEventListener("click",n=>this.handleClearClick(n)),h.appendChild(n)}const u=document.createElement("span");return u.className="stub-arrow",u.innerHTML=Ie,h.appendChild(u),t.appendChild(h),n.appendChild(t),n}calculateCalendarPosition(){if(!this.shadowRoot)return;if(q())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="ty-field-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:Me,id:"ty-date-picker"}),q()){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.ft.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"),q()){const n=this.shadowRoot.querySelector(".native-date-input");if(n){const t=Ne(this.getComponents(),this.ft.withTime);n.value=t||""}return}const a=this.shadowRoot.querySelector("ty-calendar");a&&e&&(a.setAttribute("year",""+this.ft.year),a.setAttribute("month",""+this.ft.month),a.setAttribute("day",""+this.ft.day)),this.Jt&&void 0!==this.ft.hour&&void 0!==this.ft.minute&&this.Jt.setTime(this.ft.hour,this.ft.minute)}setupEventListeners(){this.Qt&&document.removeEventListener("click",this.Qt),this.ne&&document.removeEventListener("keydown",this.ne),this.Qt=n=>this.handleOutsideClick(n),this.ne=n=>this.handleEscapeKey(n),document.addEventListener("click",this.Qt),document.addEventListener("keydown",this.ne);const n=this.shadowRoot?.querySelector(".calendar-dialog");n&&(this.te=n=>this.handleDialogClick(n),n.addEventListener("click",this.te))}handleStubClick(n){n.preventDefault(),!this.getProperty("disabled")&&Date.now()-this.Zt>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.ft.hour,minute:this.ft.minute};this.updateState(e,!0),this.emitChangeEvent(e,"selection"),this.ft.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.ft.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.ft.open&&e&&!this.contains(t)&&!e.contains(t)&&this.closeDropdown()}handleEscapeKey(n){"Escape"===n.key&&this.ft.open&&(n.preventDefault(),this.closeDropdown())}openDropdown(){this.ft.open||q()||(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){Wn("date-picker-"+(this.id||""+this)),n.showModal(),this.calculateCalendarPosition(),n.classList.add("open");const t=this.shadowRoot.activeElement;t&&t.blur()}}))}closeDropdown(){if(!this.ft.open)return;this.Zt=Date.now();const n="date-picker-"+(this.id||""+this);if(this.updateState({open:!1},!0),_n(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.Qt&&document.removeEventListener("click",this.Qt),this.ne&&document.removeEventListener("keydown",this.ne),this.te&&this.shadowRoot){const n=this.shadowRoot.querySelector(".calendar-dialog");n&&n.removeEventListener("click",this.te)}this.ft.open&&_n("date-picker-"+(this.id||""+this)),this.Qt=void 0,this.ne=void 0,this.te=void 0,this.Jt=void 0}};qe.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:""},min:{type:"string",visual:!0,default:""},max:{type:"string",visual:!0,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}},qe.formAssociated=!0;let Ve=qe;customElements.get("ty-date-picker")||customElements.define("ty-date-picker",Ve);const Be=new Map,Fe=new Map;function He(n){return Be.get(n)}function je(n,t){Fe.has(n)||Fe.set(n,new Set),Fe.get(n).add(t);const e=Be.get(n);return e&&t(e),()=>{Fe.get(n)?.delete(t),0===Fe.get(n)?.size&&Fe.delete(n)}}function We(){return Object.fromEntries(Be)}class TyResizeObserver extends HTMLElement{constructor(){super(),this.zn=null,this.ee=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.zn=new ResizeObserver(n=>{this.debounce>0?(this.ee&&clearTimeout(this.ee),this.ee=window.setTimeout(()=>{this.handleResize(n)},this.debounce)):this.handleResize(n)}),this.zn.observe(this)}handleResize(n){const{width:t,height:e}=n[0].contentRect;this.id&&function(n,t,e){Be.set(n,{width:t,height:e});const o=Fe.get(n);if(o){const n={width:t,height:e};o.forEach(t=>t(n))}}(this.id,t,e)}cleanup(){var n;this.zn&&(this.zn.disconnect(),this.zn=null),this.ee&&(clearTimeout(this.ee),this.ee=null),this.id&&(Be.delete(n=this.id),Fe.delete(n))}}customElements.define("ty-resize-observer",TyResizeObserver);const _e=`\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/* scroll-anchoring: we manage scroll position in JS, so turn off the browser's\n native scroll anchoring to avoid double-compensation. */\n:host([scroll-anchoring]) .scroll-wrapper {\n overflow-anchor: 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 color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),\n transparent,\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 color-mix(in oklab, var(--ty-color-neutral-bold) 18%, transparent),\n transparent,\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 color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),\n transparent,\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 color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),\n transparent,\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, color-mix(in oklab, var(--ty-color-neutral-bold) 25%, transparent)) 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, color-mix(in oklab, var(--ty-color-neutral-bold) 25%, transparent));\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${gn}\n`;class TyScrollContainer extends HTMLElement{constructor(){super(),this.oe=null,this.ie=null,this.re=null,this.se=null,this.ae=null,this.Jn=null,this.zn=null,this.le=null,this.xn=null,this.ce=!1,this.de=!1,this.Mn=()=>{null===this.xn&&(this.xn=requestAnimationFrame(()=>{this.xn=null,this.he()}))},this.ue=()=>{this.Jn?.update(),this.he()};const n=this.attachShadow({mode:"open"});r(n,{css:_e,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.oe=n.querySelector(".scroll-wrapper"),this.ie=n.querySelector(".shadow-top"),this.re=n.querySelector(".shadow-bottom"),this.se=n.querySelector(".shadow-left"),this.ae=n.querySelector(".shadow-right")}static get observedAttributes(){return["shadow","max-height","hide-scrollbar","custom-scrollbar","overflow-x","scroll-anchoring"]}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.pe()}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")}get nearEdgeThreshold(){const n=parseInt(this.getAttribute("near-edge-threshold")||"",10);return Number.isFinite(n)?n:100}set nearEdgeThreshold(n){null==n?this.removeAttribute("near-edge-threshold"):this.setAttribute("near-edge-threshold",n+"")}get scrollAnchoring(){return this.hasAttribute("scroll-anchoring")}set scrollAnchoring(n){n?this.setAttribute("scroll-anchoring",""):this.removeAttribute("scroll-anchoring")}connectedCallback(){if(this.oe?.addEventListener("scroll",this.Mn,{passive:!0}),this.zn=new ResizeObserver(()=>{this.Jn?.update(),this.he()}),this.oe){this.zn.observe(this.oe);const n=this.oe.querySelector("slot");n&&n.addEventListener("slotchange",this.ue)}this.pe(),this.he(),this.nt(),this.be()}disconnectedCallback(){this.oe?.removeEventListener("scroll",this.Mn),this.Qn(),this.ge(),this.zn&&(this.zn.disconnect(),this.zn=null),null!==this.xn&&(cancelAnimationFrame(this.xn),this.xn=null)}attributeChangedCallback(n,t,e){t!==e&&("max-height"===n&&(this.pe(),this.he(),this.Jn?.update()),"custom-scrollbar"!==n&&"overflow-x"!==n||(this.Qn(),this.nt(),this.he()),"scroll-anchoring"===n&&(this.ge(),this.be()))}be(){!this.le&&this.scrollAnchoring&&(this.le=new MutationObserver(n=>{const t=this.oe;if(!t)return;const e=t.getBoundingClientRect().top;let o=0;for(const i of n)i.addedNodes.forEach(n=>{if(n.nodeType!==Node.ELEMENT_NODE)return;const t=n.getBoundingClientRect();t.bottom>e?e>t.top&&(o+=e-t.top):o+=t.height});o>0&&(t.scrollTop+=o,this.Jn?.update())}),this.le.observe(this,{childList:!0}))}ge(){this.le?.disconnect(),this.le=null}nt(){if(this.Jn)return;if(!this.oe||!this.customScrollbar)return;this.Jn=new bn(this.oe,{vertical:!0,horizontal:this.overflowX});const n=this.shadowRoot;this.Jn.trackY&&n.appendChild(this.Jn.trackY),this.Jn.trackX&&n.appendChild(this.Jn.trackX)}Qn(){this.Jn&&(this.Jn.trackY?.remove(),this.Jn.trackX?.remove(),this.Jn.destroy(),this.Jn=null)}pe(){if(this.oe){const n=this.maxHeight;n?(this.oe.style.setProperty("--scroll-max-height",n),this.oe.style.maxHeight=n):(this.oe.style.removeProperty("--scroll-max-height"),this.oe.style.maxHeight="")}}he(){if(!this.oe)return;const{scrollTop:n,scrollLeft:t,scrollHeight:e,scrollWidth:o,clientHeight:i,clientWidth:r}=this.oe;this.ie&&this.ie.classList.toggle("visible",n>2),this.re&&this.re.classList.toggle("visible",e-2>n+i),this.overflowX&&(this.se&&this.se.classList.toggle("visible",t>2),this.ae&&this.ae.classList.toggle("visible",o-2>t+r));const s=e-i;if(s>0){const t=this.nearEdgeThreshold,o=s-n;this.de=this.ve("nearend",o,t,this.de,{distance:o,scrollTop:n,scrollHeight:e,clientHeight:i}),this.ce=this.ve("nearstart",n,t,this.ce,{distance:n,scrollTop:n,scrollHeight:e,clientHeight:i})}else this.ce=!1,this.de=!1}ve(n,t,e,o,i){return e>=t&&(o||this.dispatchEvent(new CustomEvent(n,{detail:i,bubbles:!0,composed:!0})),!0)}updateShadows(){this.he(),this.Jn?.update()}scrollToTop(n=!0){this.oe?.scrollTo({top:0,behavior:n?"smooth":"auto"})}scrollToBottom(n=!0){this.oe&&this.oe.scrollTo({top:this.oe.scrollHeight,behavior:n?"smooth":"auto"})}scrollToLeft(n=!0){this.oe?.scrollTo({left:0,behavior:n?"smooth":"auto"})}scrollToRight(n=!0){this.oe&&this.oe.scrollTo({left:this.oe.scrollWidth,behavior:n?"smooth":"auto"})}scrollToElement(n,t=!0){const e="string"==typeof n?this.querySelector(n):n;e?.scrollIntoView({behavior:t?"smooth":"auto",block:"nearest"})}get scrollElement(){return this.oe}}customElements.define("ty-scroll-container",TyScrollContainer),"undefined"!=typeof window&&(window.tyVersion=u,window.tyIcons={register:n=>{k(n)},get:n=>z(n),has:n=>C(n),list:()=>I(),cacheInfo:()=>D(),clearCache:()=>S()},window.tyResizeObserver={getSize:n=>He(n),onResize:(n,t)=>je(n,t),get sizes(){return We()}},window.tyLoader={set:n=>a(n),get:()=>l(),reset:()=>c()}),n.IconRegistry=A,n.TyButton=h,n.TyCalendar=Te,n.TyCalendarMonth=TyCalendarMonth,n.TyCalendarNavigation=xe,n.TyCheckbox=X,n.TyCopy=cn,n.TyDatePicker=Ve,n.TyFileUpload=un,n.TyIcon=O,n.TyInput=U,n.TyModal=TyModal,n.TyOption=TyOption,n.TyPopup=TyPopup,n.TyRadio=en,n.TyRadioGroup=rn,n.TyResizeObserver=TyResizeObserver,n.TyScrollContainer=TyScrollContainer,n.TySelect=Mt,n.TySelectedTags=TySelectedTags,n.TyStep=TyStep,n.TySwitch=J,n.TyTab=TyTab,n.TyTabs=TyTabs,n.TyTag=P,n.TyTextarea=mn,n.TyTooltip=TyTooltip,n.TyWizard=TyWizard,n.disableScrollLockDebug=function(){window.tyScrollDebug=!1},n.enableScrollLockDebug=function(){window.tyScrollDebug=!0},n.forceUnlockAll=function(){Fn.activeLocks.clear(),jn()},n.getActiveLocks=function(){return new Set(Fn.activeLocks)},n.getAllSizes=We,n.getLoaderSvg=l,n.getLockState=function(){return{locked:Fn.locked,scrollY:Fn.scrollY,activeLocks:Array.from(Fn.activeLocks)}},n.getSize=He,n.isLocked=function(){return Fn.locked},n.isLockedBy=function(n){return Fn.activeLocks.has(n)},n.lockScroll=Wn,n.onResize=je,n.resetLoaderSvg=c,n.setLoaderSvg=a,n.unlockScroll=_n,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.u(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)}u(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.p=!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.p=!0;const n=this.M();n.length>0&&this.C(n),this.onConnect(),this.v||(this.render(),this.v=!0)}disconnectedCallback(){this.p=!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.p&&this.render(),this.I(n))}I(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}applyLabelName(n){let t=Array.from(this.m.labels??[]).map(n=>n.textContent?.trim()).filter(Boolean).join(" ");if(!t){const n=this.closest("label");if(n){const e=n.cloneNode(!0);e.querySelectorAll(this.tagName.toLowerCase()).forEach(n=>n.remove()),t=e.textContent?.trim()??""}}t?n.setAttribute("aria-label",t):n.removeAttribute("aria-label")}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 c(){s=null}const d=class extends o{constructor(){super(),this.D=!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-semibold);\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 — flat: one variable per segment. No color math here; all the\n --ty-solid-{flavor}-{hover,active,strong,soft} tokens are DERIVED in\n tyrell-brand.css (OKLCH) or set literally in tyrell.css. Override any\n single token to recolor that one segment. Bare .solid = custom-flavor\n fallback, themable via --ty-button-{bg,bg-hover,color}.\n ============================================================ */\n\nbutton.solid {\n border: none;\n --_ring: var(--ty-color-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.tone-plus { background: var(--ty-button-bg, var(--ty-solid-neutral-strong)); }\nbutton.solid.tone-minus { background: var(--ty-button-bg, var(--ty-solid-neutral-soft)); }\nbutton.solid:hover:not(:disabled) { background: var(--ty-button-bg-hover, var(--ty-solid-neutral-hover)); }\nbutton.solid:active:not(:disabled) { background: var(--ty-solid-neutral-active); }\n\nbutton.solid.primary { --_ring: var(--ty-color-primary); background: var(--ty-button-bg, var(--ty-solid-primary)); color: var(--ty-button-color, var(--ty-solid-primary-fg)); }\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) { background: var(--ty-button-bg-hover, var(--ty-solid-primary-hover)); }\nbutton.solid.primary:active:not(:disabled) { background: var(--ty-solid-primary-active); }\n\nbutton.solid.secondary { --_ring: var(--ty-color-secondary); background: var(--ty-button-bg, var(--ty-solid-secondary)); color: var(--ty-button-color, var(--ty-solid-secondary-fg)); }\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) { background: var(--ty-button-bg-hover, var(--ty-solid-secondary-hover)); }\nbutton.solid.secondary:active:not(:disabled) { background: var(--ty-solid-secondary-active); }\n\nbutton.solid.success { --_ring: var(--ty-color-success); background: var(--ty-button-bg, var(--ty-solid-success)); color: var(--ty-button-color, var(--ty-solid-success-fg)); }\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) { background: var(--ty-button-bg-hover, var(--ty-solid-success-hover)); }\nbutton.solid.success:active:not(:disabled) { background: var(--ty-solid-success-active); }\n\nbutton.solid.danger { --_ring: var(--ty-color-danger); background: var(--ty-button-bg, var(--ty-solid-danger)); color: var(--ty-button-color, var(--ty-solid-danger-fg)); }\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) { background: var(--ty-button-bg-hover, var(--ty-solid-danger-hover)); }\nbutton.solid.danger:active:not(:disabled) { background: var(--ty-solid-danger-active); }\n\nbutton.solid.warning { --_ring: var(--ty-color-warning); background: var(--ty-button-bg, var(--ty-solid-warning)); color: var(--ty-button-color, var(--ty-solid-warning-fg)); }\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) { background: var(--ty-button-bg-hover, var(--ty-solid-warning-hover)); }\nbutton.solid.warning:active:not(:disabled) { background: var(--ty-solid-warning-active); }\n\nbutton.solid.neutral { --_ring: var(--ty-color-neutral); background: var(--ty-button-bg, var(--ty-solid-neutral)); color: var(--ty-button-color, var(--ty-solid-neutral-fg)); }\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) { background: var(--ty-button-bg-hover, var(--ty-solid-neutral-hover)); }\nbutton.solid.neutral:active:not(:disabled) { background: var(--ty-solid-neutral-active); }\n\nbutton.solid:focus-visible {\n box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--_ring);\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.D=!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.D)return void this.initializeButtonStructure();const t=this.buildClasses(),e=n.querySelector("button");e&&(e.disabled=this.disabled,e.className=t,this.applyLoadingState(e))}};d.formAssociated=!0,d.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=d;customElements.get("ty-button")||customElements.define("ty-button",h);const u="1.0.0-TC28",p=new Map,b=new Map,g=new Map;let v=null,y=null;const m="ty-icons-v"+u,f="https://ty-icons.local/",w=new Map;let x=!1;function k(n){const t=new Set;Object.entries(n).forEach(([n,e])=>{p.set(n,e),t.add(n)}),t.size>0&&M(t)}function z(n){return p.get(n)}function C(n){return p.has(n)}async function S(){const n=new Set(p.keys());if(p.clear(),"caches"in window)try{await caches.delete(m),x=!1}catch(t){}M(n)}function E(n,t,e){b.set(n,e),t&&g.set(n,t)}function T(n){b.delete(n),g.delete(n)}function M(n){v||(v=new Set),n.forEach(n=>v.add(n)),null!==y&&clearTimeout(y);const t="undefined"!=typeof requestIdleCallback?requestIdleCallback:n=>setTimeout(n,0);y=t(()=>{const n=v;v=null,y=null,n&&n.size>0&&function(n){b.forEach((t,e)=>{const o=g.get(e);o?n.has(o)&&t(new Set([o])):t(n)})}(n)})}function I(){return Array.from(p.keys())}async function D(){const n={version:u,cacheName:m,available:"caches"in window};if(!n.available)return n;try{const t=await caches.open(m),e=(await t.keys()).filter(n=>n.url.startsWith(f));return{...n,iconCount:e.length}}catch(t){return n}}const A=Object.freeze(Object.defineProperty({__proto__:null,addWatcher:E,clearIcons:S,getCacheInfo:D,getCachedIcon:async function(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!==m);await Promise.all(n.map(n=>caches.delete(n)))}catch(n){}}}();const t=await caches.open(m),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},getIcon:z,getIconNames:I,hasIcon:C,registerIcons:k,removeWatcher:T},Symbol.toStringTag,{value:"Module"}));let $=0;const L='<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>',N=class extends o{constructor(){super(),this.A=null,this.$="",this.L=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.L=document.createElement("slot"),this.L.innerHTML=L,this.$=L,this.shadowRoot.appendChild(this.L)}onConnect(){this.A="ty-icon-"+ ++$,this.name&&E(this.A,this.name,n=>{this.name&&n.has(this.name)&&this.render()}),this.updateClasses()}onDisconnect(){this.A&&(T(this.A),this.A=null)}onPropertiesChanged(n){for(const t of n)if("name"===t.name){this.A&&T(this.A);const n=t.newValue||"";n&&this.isConnected&&(this.A="ty-icon-"+ ++$,E(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(L);const t=z(n);this.renderSvg(t||L)}renderSvg(n){this.$!==n&&this.L&&(this.L.innerHTML=n,this.$=n)}};N.formAssociated=!1,N.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 O=N;customElements.get("ty-icon")||customElements.define("ty-icon",O);const R=class extends o{constructor(){super(),this.N=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);\n --tag-border-color: var(--ty-border-primary);\n}\n:host([flavor="primary+"]) {\n --tag-bg: var(--ty-bg-primary-bold);\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-bold);\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);\n --tag-border-color: var(--ty-border-secondary);\n}\n:host([flavor="secondary+"]) {\n --tag-bg: var(--ty-bg-secondary-bold);\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-bold);\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);\n --tag-border-color: var(--ty-border-success);\n}\n:host([flavor="success+"]) {\n --tag-bg: var(--ty-bg-success-bold);\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-bold);\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);\n --tag-border-color: var(--ty-border-danger);\n}\n:host([flavor="danger+"]) {\n --tag-bg: var(--ty-bg-danger-bold);\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-bold);\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);\n --tag-border-color: var(--ty-border-warning);\n}\n:host([flavor="warning+"]) {\n --tag-bg: var(--ty-bg-warning-bold);\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-bold);\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-bold);\n --tag-bg: var(--ty-bg-neutral-soft);\n --tag-border-color: var(--ty-border-bold);\n}\n\n:host([flavor="neutral+"]) {\n --tag-bg: var(--ty-bg-neutral-bold);\n --tag-color: var(--ty-text-bold);\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);\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.N&&(this.N(),this.N=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.N=()=>{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.p&&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)}};R.formAssociated=!0,R.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 P=R;function q(n=768){return window.matchMedia(`(pointer: coarse) and (max-width: ${n}px)`).matches}customElements.get("ty-tag")||customElements.define("ty-tag",P);const V='\n <svg class="option-check" viewBox="0 0 24 24" fill="none" stroke="currentColor"\n stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">\n <path d="M20 6 9 17l-5-5" />\n </svg>\n';class TyOption extends HTMLElement{constructor(){super(),this.O=void 0,this.R=!1,this.P=!1,this.q=!1,this.V=!1,this.B=null,this.F=q(),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 border-radius: var(--ty-radius-md);\n}\n\n:host([cloned]) .option-content {\n padding: 0px;\n background: transparent;\n}\n\n.option-content:hover {\n background: var(--ty-bg-neutral-soft);\n}\n\n.option-content[highlighted] {\n background: var(--ty-bg-neutral-soft);\n color: var(--ty-text-strong);\n font-weight: var(--ty-font-semibold);\n}\n\n/* Selected: quiet — bolder text color only, no background slab, no weight change */\n.option-content[selected] {\n background: transparent;\n color: var(--ty-text-bold);\n}\n\n/* Lucide check — right-aligned, visible only on selected options */\n.option-check {\n display: none;\n flex-shrink: 0;\n width: 14px;\n height: 14px;\n margin-left: auto;\n color: var(--ty-color-primary);\n}\n\n.option-content[selected] .option-check {\n display: block;\n}\n\n/* Never show the check on the copy cloned into the select's trigger field */\n:host([cloned]) .option-check {\n display: none;\n}\n\n.option-content[selected]:hover {\n background: var(--ty-bg-neutral-soft);\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.O=n.value,delete this.value),this.render()}disconnectedCallback(){this.removeClearButtonListener()}attributeChangedCallback(n,t,e){if(t!==e){switch(n){case"value":this.O=e||void 0;break;case"selected":this.R=null!==e;break;case"disabled":this.P=null!==e;break;case"highlighted":this.q=null!==e;break;case"hidden":this.V=null!==e}this.render()}}getOptionValue(){if(void 0!==this.O)return this.O;const n=this.getAttribute("value");return null!==n?n:this.textContent?.trim()||""}get value(){return this.getOptionValue()}set value(n){this.O!==n&&(this.O=n,void 0!==n?this.setAttribute("value",n):this.removeAttribute("value"),this.render())}get selected(){return this.R}set selected(n){this.R!==n&&(this.R=n,n?this.setAttribute("selected",""):this.removeAttribute("selected"),this.render())}get disabled(){return this.P}set disabled(n){this.P!==n&&(this.P=n,n?this.setAttribute("disabled",""):this.removeAttribute("disabled"),this.render())}get highlighted(){return this.q}set highlighted(n){this.q!==n&&(this.q=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.O}}))},n.addEventListener("click",this.B)}render(){const n=this.shadowRoot;if(this.getOptionValue(),n.querySelector(".option-content")){const t=this.R&&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.R&&this.F){n.innerHTML=`\n <div class="option-content">\n <span class="option-text"><slot></slot></span>\n ${V}\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>${V}</div>`;const t=n.querySelector(".option-content");t&&(this.P?t.setAttribute("disabled",""):t.removeAttribute("disabled"),this.R?t.setAttribute("selected",""):t.removeAttribute("selected"),this.q?t.setAttribute("highlighted",""):t.removeAttribute("highlighted"),this.V?t.setAttribute("hidden",""):t.removeAttribute("hidden"))}}customElements.get("ty-option")||customElements.define("ty-option",TyOption);const B='\n:host {\n display: block;\n font-family: var(--ty-font-sans);\n width: 100%;\n}\n\n:host([size="xl"]) {\n font-size: 20px;\n}\n\n\n:host([size="xs"]) {\n font-size: 12px;\n}\n\n\n:host([size="sm"]) {\n font-size: 14px;\n}\n\n:host([size="lg"]) {\n font-size: 18px;\n}\n\n.input-container {\n display: flex;\n flex-direction: column;\n width: 100%;\n box-sizing: border-box;\n}\n\n/* ===== LABEL STYLING ===== */\n\n.ty-field-label {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n font-weight: var(--ty-font-medium);\n color: var(--ty-label-color);\n margin-bottom: 6px;\n padding-left: 12px;\n display: flex;\n align-items: center;\n}\n\n/* Required indicator - using SVG icon */\n.required-icon {\n display: inline-flex;\n align-items: center;\n color: var(--ty-color-danger);\n width: 12px;\n height: 12px;\n margin-left: 4px;\n vertical-align: middle;\n}\n\n.required-icon svg {\n width: 100%;\n height: 100%;\n}\n\n/* ===== INPUT WRAPPER WITH SLOTS ===== */\n\n.input-wrapper {\n display: flex;\n align-items: center;\n gap: 0.5rem; /* No gap by default */\n width: 100%;\n box-sizing: border-box;\n border: 1px solid var(--input-border, var(--ty-input-border));\n border-radius: var(--ty-radius-base);\n background: var(--input-bg, var(--input-bg, var(--ty-input-bg)));\n transition: all 0.15s ease-in-out;\n \n /* Default size (md) */\n min-height: 40px;\n padding: 0 12px;\n}\n\n/* Wrapper states */\n.input-wrapper:hover:not(.disabled) {\n border-color: var(--input-border-hover, var(--ty-input-border-hover));\n}\n\n.input-wrapper.focused {\n border-color: var(--input-border-focus, var(--ty-input-border-focus));\n box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n.input-wrapper.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n background: var(--input-disabled-bg, var(--ty-input-disabled-bg));\n border-color: var(--input-disabled-border, var(--ty-input-disabled-border));\n}\n\n/* ===== SLOT STYLING ===== */\n\n/* Style slotted content directly (no wrappers needed) */\n::slotted([slot="start"]),\n::slotted([slot="end"]) {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: var(--ty-color-text-soft);\n}\n\n/* Password reveal toggle (rendered for type="password") */\n.password-toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 1.25rem;\n height: 1.25rem;\n padding: 0;\n border: none;\n background: none;\n cursor: pointer;\n color: var(--input-placeholder, var(--ty-input-placeholder));\n transition: color 0.15s ease-in-out;\n}\n.password-toggle:hover {\n color: var(--input-color, var(--ty-input-color));\n}\n.password-toggle:focus-visible {\n outline: 2px solid var(--ty-color-primary);\n outline-offset: 2px;\n border-radius: 2px;\n}\n.password-toggle svg {\n width: 1rem;\n height: 1rem;\n}\n\n/* Icon sizing for slotted icons */\n::slotted(ty-icon) {\n width: 1em;\n height: 1em;\n flex-shrink: 0;\n}\n\n/* ===== ERROR MESSAGE STYLING ===== */\n\n.error-message {\n font-size: var(--ty-font-xs);\n line-height: var(--ty-leading-xs);\n letter-spacing: var(--ty-tracking-xs);\n color: var(--ty-color-danger);\n margin-top: 4px;\n padding-left: 12px;\n}\n\n/* Error state for wrapper */\n.input-wrapper.error {\n border-color: var(--ty-color-danger);\n background: var(--ty-bg-danger-soft);\n}\n\n.input-wrapper.error.focused {\n border-color: var(--ty-color-danger-bold);\n box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n/* ===== INPUT BASE STYLING ===== */\n\ninput {\n /* Reset and base styles — Linear-paired typography */\n flex: 1;\n min-width: 0;\n box-sizing: border-box;\n border: none;\n outline: none;\n background: transparent;\n color: var(--input-color, var(--ty-input-color));\n font-family: inherit;\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n font-weight: var(--ty-font-normal);\n padding: 0;\n margin: 0;\n}\n\n/* Remove number input spinner arrows */\ninput[type="number"]::-webkit-outer-spin-button,\ninput[type="number"]::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\ninput[type="number"] {\n -moz-appearance: textfield;\n}\n\n/* Disabled state */\ninput:disabled {\n cursor: not-allowed;\n color: var(--input-disabled-color, var(--ty-input-disabled-color));\n}\n\n/* Placeholder styling */\ninput::placeholder {\n color: var(--input-placeholder, var(--ty-input-placeholder));\n font-weight: 400;\n}\n\n/* ===== SIZE MODIFIERS ===== */\n\n/* Extra Small */\n.input-wrapper.xs {\n min-height: 32px;\n padding: 0 8px;\n border-radius: var(--ty-input-radius-xs, var(--ty-radius-base));\n}\n\n.input-wrapper.xs input {\n font-size: var(--ty-font-xs);\n line-height: var(--ty-leading-xs);\n letter-spacing: var(--ty-tracking-xs);\n}\n\n/* Small */\n.input-wrapper.sm {\n min-height: 36px;\n padding: 0 10px;\n border-radius: var(--ty-input-radius-sm, var(--ty-radius-base));\n}\n\n.input-wrapper.sm input {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n}\n\n/* Medium (default) */\n.input-wrapper.md {\n min-height: 40px;\n padding: 0 12px;\n border-radius: var(--ty-input-radius-md, var(--ty-radius-base));\n}\n\n.input-wrapper.md input {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n}\n\n/* Large */\n.input-wrapper.lg {\n min-height: 44px;\n padding: 0 14px;\n border-radius: var(--ty-input-radius-lg, var(--ty-radius-base));\n}\n\n.input-wrapper.lg input {\n font-size: var(--ty-font-base);\n line-height: var(--ty-leading-base);\n letter-spacing: var(--ty-tracking-base);\n}\n\n/* Extra Large */\n.input-wrapper.xl {\n min-height: 48px;\n padding: 0 16px;\n border-radius: var(--ty-input-radius-xl, var(--ty-radius-base));\n}\n\n.input-wrapper.xl input {\n font-size: var(--ty-font-lg);\n line-height: var(--ty-leading-lg);\n letter-spacing: var(--ty-tracking-lg);\n}\n\n/* ===== SEMANTIC FLAVOR MODIFIERS ===== */\n\n/* Primary */\n.input-wrapper.primary {\n border-color: var(--ty-input-primary-border, var(--ty-color-primary));\n}\n\n.input-wrapper.primary:hover:not(.disabled) {\n border-color: var(--ty-color-primary-bold);\n}\n\n.input-wrapper.primary.focused {\n border-color: var(--ty-color-primary-bold);\n box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-primary) 15%, transparent);\n}\n\n/* Secondary */\n.input-wrapper.secondary {\n border-color: var(--ty-input-secondary-border, var(--ty-color-secondary));\n}\n\n.input-wrapper.secondary.focused {\n border-color: var(--ty-color-secondary-bold);\n box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-secondary) 15%, transparent);\n}\n\n/* Success */\n.input-wrapper.success {\n border-color: var(--ty-input-success-border);\n}\n\n.input-wrapper.success:hover:not(.disabled) {\n border-color: var(--ty-color-success-bold);\n}\n\n.input-wrapper.success.focused {\n border-color: var(--ty-color-success-bold);\n box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-success) 15%, transparent);\n}\n\n/* Danger */\n.input-wrapper.danger {\n border-color: var(--ty-input-danger-border);\n}\n\n.input-wrapper.danger:hover:not(.disabled) {\n border-color: var(--ty-color-danger-bold);\n}\n\n.input-wrapper.danger.focused {\n border-color: var(--ty-color-danger-bold);\n box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-danger) 15%, transparent);\n}\n\n/* Warning */\n.input-wrapper.warning {\n border-color: var(--ty-input-warning-border);\n}\n\n.input-wrapper.warning:hover:not(.disabled) {\n border-color: var(--ty-color-warning-bold);\n}\n\n.input-wrapper.warning.focused {\n border-color: var(--ty-color-warning-bold);\n box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-warning) 15%, transparent);\n}\n\n/* Neutral (default) */\n.input-wrapper.neutral.focused {\n border-color: var(--input-border-focus, var(--ty-input-border-focus));\n box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n/* ===== ACCESSIBILITY ENHANCEMENTS ===== */\n\ninput:focus-visible {\n outline: none;\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: high) {\n .input-wrapper {\n border-width: 2px;\n }\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n .input-wrapper {\n transition: none;\n }\n}\n\n/* ===== RESPONSIVE BEHAVIOR ===== */\n\n@media (max-width: 640px) {\n .input-wrapper.lg {\n min-height: 40px;\n padding: 0 12px;\n }\n\n .input-wrapper.lg input {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n }\n\n .input-wrapper.xl {\n min-height: 44px;\n padding: 0 14px;\n }\n\n .input-wrapper.xl input {\n font-size: var(--ty-font-base);\n line-height: var(--ty-leading-base);\n letter-spacing: var(--ty-tracking-base);\n }\n}\n\n@media (max-width: 480px) {\n .input-wrapper.xl {\n min-height: 40px;\n padding: 0 12px;\n }\n\n .input-wrapper.xl input {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n }\n}\n';function F(n){return["number","currency","percent","compact"].includes(n)}function H(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 j(n,t){let e=H(n);const o=new MutationObserver(o=>{for(const i of o)if("attributes"===i.type&&"lang"===i.attributeName){const o=H(n);o!==e&&(e=o,t(o))}});return o.observe(document.documentElement,{attributes:!0,attributeFilter:["lang"],subtree:!0}),()=>o.disconnect()}const W='<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>',_='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>',Y=class extends o{constructor(){super(),this.H=null,this.j=!1,this.W=!1,this._=!1,this.Y=null,this.U=null,this.G=null,this.X=null,this.K=null,this.Z=null,r(this.shadowRoot,{css:B,id:"ty-input"})}onConnect(){this.initializeShadowValue(),this.J=j(this,()=>{this.render()})}onDisconnect(){this.removeEventListeners(),this.J&&(this.J(),this.J=void 0),null!==this.K&&(clearTimeout(this.K),this.K=null),null!==this.Z&&(clearTimeout(this.Z),this.Z=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"),this._=!0):this._&&("danger"===this.getProperty("flavor")&&this.setProperty("flavor","neutral"),this._=!1)}}onFormReset(){this.H=null,this.j=!1,null!==this.K&&(clearTimeout(this.K),this.K=null),null!==this.Z&&(clearTimeout(this.Z),this.Z=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(F(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 F(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 H(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.U&&(t.removeEventListener("change",this.U),this.U=null),this.G&&(t.removeEventListener("focus",this.G),this.G=null),this.X&&(t.removeEventListener("blur",this.X),this.X=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),this.updateValidity(),null!==this.K&&clearTimeout(this.K),this.debounce>0?this.K=window.setTimeout(()=>{this.dispatchInputEvent(t.value,n),this.K=null},this.debounce):this.dispatchInputEvent(e,n)},this.U=n=>{n.stopPropagation(),n.stopImmediatePropagation();const e=n.target.value;this.H=this.parseShadowValue(e),this.m.setFormValue(null!==this.H?this.H+"":null),this.updateValidity(),null!==this.Z&&clearTimeout(this.Z),this.debounce>0?this.Z=window.setTimeout(()=>{this.dispatchChangeEvent(t.value,n),this.Z=null},this.debounce):this.dispatchChangeEvent(e,n)},this.G=n=>{this.j=!0,e.classList.add("focused"),F(this.type)&&null!==this.H&&(t.value=this.H+""),this.dispatchEvent(new CustomEvent("focus",{detail:{originalEvent:n},bubbles:!0,composed:!0}))},this.X=n=>{const o=n.target.value;null!==this.K&&(clearTimeout(this.K),this.K=null,this.dispatchInputEvent(o,n)),null!==this.Z&&(clearTimeout(this.Z),this.Z=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.U),t.addEventListener("focus",this.G),t.addEventListener("blur",this.X),this.W=!0)}render(){const n=this.shadowRoot,t=n.querySelector("input"),e=n.querySelector(".input-wrapper"),o=n.querySelector(".ty-field-label"),i=n.querySelector(".error-message"),r=this.buildClassList(),s=["password","email","tel","url"].includes(this.type)?this.type:"text",a=F(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?t.setAttribute("aria-label",this.label):t.removeAttribute("aria-label"),this.label)if(o)o.innerHTML=`${this.label}${this.required?`<span class="required-icon">${W}</span>`:""}`,o.style.display="flex";else{const t=document.createElement("label");t.className="ty-field-label",t.innerHTML=`${this.label}${this.required?`<span class="required-icon">${W}</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="ty-field-label">\n ${this.label}\n ${this.required?`<span class="required-icon">${W}</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 ${"password"===s?`\n <button class="password-toggle" type="button"\n aria-label="Show password" aria-pressed="false">\n ${_}\n </button>`:""}\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.label&&t.setAttribute("aria-label",this.label),this.setupPasswordToggle(),this.setupEventListeners()}this.updateValidity()}setupPasswordToggle(){const n=this.shadowRoot,t=n.querySelector(".password-toggle"),e=n.querySelector("input");t&&e&&(t.addEventListener("mousedown",n=>n.preventDefault()),t.addEventListener("click",()=>{const n="password"===e.type;e.type=n?"text":"password",t.innerHTML=n?'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/></svg>':_,t.setAttribute("aria-label",n?"Hide password":"Show password"),t.setAttribute("aria-pressed",n+"")}))}updateValidity(){const n=this.shadowRoot?.querySelector("input");if(this.disabled)return void this.m.setValidity({});const t=n?n.value:(this.getProperty("value")??"")+"";this.required&&""===t.trim()?this.m.setValidity({valueMissing:!0},"Please fill out this field",n??void 0):this.m.setValidity({})}};Y.formAssociated=!0,Y.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=Y;customElements.get("ty-input")||customElements.define("ty-input",U);const G=class extends o{constructor(){super(),this.W=!1,this.nn=null,this.tn=null,this.G=null,this.X=null,r(this.shadowRoot,{css:'\n:host {\n display: inline-flex;\n width: auto;\n vertical-align: middle;\n}\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 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/* Visible focus ring (keyboard) — .focused is toggled by the component */\n.checkbox-container.focused,\n.checkbox-container:focus-visible {\n box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-primary) 25%, transparent);\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/* ===== SIZES ===== */\n\n.checkbox-container svg {\n width: 16px;\n height: 16px;\n}\n\n.checkbox-container.xs svg {\n width: 12px;\n height: 12px;\n}\n\n.checkbox-container.sm svg {\n width: 14px;\n height: 14px;\n}\n\n.checkbox-container.lg svg {\n width: 20px;\n height: 20px;\n}\n\n.checkbox-container.xl svg {\n width: 24px;\n height: 24px;\n}\n\n/* ===== SEMANTIC FLAVORS ===== */\n\n.checkbox-container.primary {\n color: var(--ty-color-primary-soft);\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.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.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.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/* ===== STATES ===== */\n\n/* Clean tick: no box outline, just the checkmark. Inactive = faint tick. */\n.checkbox-container:not([aria-checked="true"]) {\n opacity: 0.35;\n}\n\n/* Indeterminate (dash) sits between unchecked and checked */\n.checkbox-container[aria-checked="mixed"] {\n opacity: 0.7;\n}\n\n/* Disabled must stay distinguishable from merely-unchecked: grayscale kills\n the flavor color, and disabled-unchecked drops below the unchecked 0.35. */\n.checkbox-container.disabled {\n pointer-events: none;\n cursor: not-allowed;\n opacity: 0.5;\n filter: grayscale(1);\n}\n\n.checkbox-container.disabled:not([aria-checked="true"]) {\n opacity: 0.2;\n}\n\n/* Error state */\n.checkbox-container.error .checkbox-icon {\n color: var(--ty-color-danger);\n}\n\n.checkbox-container.error:focus {\n box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-danger) 15%, transparent);\n}\n',id:"ty-checkbox"})}onConnect(){this.setupEventListeners()}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.indeterminate||!this.checked;this.indeterminate&&(this.indeterminate=!1),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;this.nn&&(this.removeEventListener("click",this.nn),this.nn=null);const n=this.shadowRoot;if(!n)return;const t=n.querySelector(".checkbox-container");t?(this.tn&&(t.removeEventListener("keydown",this.tn),this.tn=null),this.G&&(t.removeEventListener("focus",this.G),this.G=null),this.X&&(t.removeEventListener("blur",this.X),this.X=null),this.W=!1):this.W=!1}setupEventListeners(){if(this.W)return;const n=this.shadowRoot.querySelector(".checkbox-container");n&&(this.nn=n=>{this.handleCheckboxClick(n)},this.tn=n=>{this.handleCheckboxKeydown(n)},this.G=()=>{n.classList.add("focused")},this.X=()=>{n.classList.remove("focused")},this.addEventListener("click",this.nn),n.addEventListener("keydown",this.tn),n.addEventListener("focus",this.G),n.addEventListener("blur",this.X),this.W=!0)}render(){const n=this.shadowRoot;let t=n.querySelector(".checkbox-container");const e=this.buildClassList(),o=this.indeterminate?"mixed":this.checked+"";if(t)t.className="checkbox-container "+e,t.tabIndex=this.disabled?-1:0,t.setAttribute("aria-checked",o),t.setAttribute("aria-disabled",this.disabled+""),t.setAttribute("aria-required",this.required+"");else{t=document.createElement("div"),t.className="checkbox-container "+e,t.tabIndex=this.disabled?-1:0,t.setAttribute("role","checkbox"),t.setAttribute("aria-checked",o),t.setAttribute("aria-disabled",this.disabled+""),t.setAttribute("aria-required",this.required+"");const i=document.createElement("div");i.className="checkbox-icon",t.appendChild(i),n.appendChild(t)}t.querySelector(".checkbox-icon").innerHTML=this.indeterminate?'<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="M96 320C96 302.3 110.3 288 128 288L512 288C529.7 288 544 302.3 544 320C544 337.7 529.7 352 512 352L128 352C110.3 352 96 337.7 96 320z"/></svg>':'<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="M566.6 169.4C579.1 181.9 579.1 202.2 566.6 214.7L278.6 502.7C266.1 515.2 245.8 515.2 233.3 502.7L89.3 358.7C76.8 346.2 76.8 325.9 89.3 313.4C101.8 300.9 122.1 300.9 134.6 313.4L256 434.7L521.4 169.4C533.9 156.9 554.2 156.9 566.6 169.4z"/></svg>',this.setupEventListeners(),this.applyLabelName(t),this.updateValidity()}updateValidity(){const n=this.shadowRoot?.querySelector(".checkbox-container");this.disabled?this.m.setValidity({}):this.required&&!this.checked?this.m.setValidity({valueMissing:!0},"Please check this box",n??void 0):this.m.setValidity({})}get checked(){return this.getProperty("checked")}set checked(n){this.setProperty("checked",n)}get indeterminate(){return this.getProperty("indeterminate")}set indeterminate(n){this.setProperty("indeterminate",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}};G.formAssociated=!0,G.properties={checked:{type:"boolean",visual:!0,formValue:!0,emitChange:!0,default:!1},indeterminate:{type:"boolean",visual:!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 X=G;customElements.get("ty-checkbox")||customElements.define("ty-checkbox",X);const K=`\n${B}\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`,Z=class extends o{constructor(){super(),this.W=!1,this.nn=null,this.tn=null,this.G=null,this.X=null,r(this.shadowRoot,{css:K,id:"ty-switch"})}onConnect(){this.setupEventListeners()}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;this.nn&&(this.removeEventListener("click",this.nn),this.nn=null);const n=this.shadowRoot;if(!n)return;const t=n.querySelector(".switch-container");t?(this.tn&&(t.removeEventListener("keydown",this.tn),this.tn=null),this.G&&(t.removeEventListener("focus",this.G),this.G=null),this.X&&(t.removeEventListener("blur",this.X),this.X=null),this.W=!1):this.W=!1}setupEventListeners(){if(this.W)return;const n=this.shadowRoot.querySelector(".switch-container");n&&(this.nn=n=>this.handleSwitchClick(n),this.tn=n=>this.handleSwitchKeydown(n),this.G=()=>n.classList.add("focused"),this.X=()=>n.classList.remove("focused"),this.addEventListener("click",this.nn),n.addEventListener("keydown",this.tn),n.addEventListener("focus",this.G),n.addEventListener("blur",this.X),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(),this.applyLabelName(t),this.updateValidity()}updateValidity(){const n=this.shadowRoot?.querySelector(".switch-container");this.disabled?this.m.setValidity({}):this.required&&!this.checked?this.m.setValidity({valueMissing:!0},"Please turn this on",n??void 0):this.m.setValidity({})}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:"primary",validate:n=>["primary","secondary","success","danger","warning","neutral"].includes(n),coerce:n=>["primary","secondary","success","danger","warning","neutral"].includes(n)?n:"primary"}};let J=Z;customElements.get("ty-switch")||customElements.define("ty-switch",J);const Q=`\n${B}\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`,nn='<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>',tn=class extends o{constructor(){super(),this.W=!1,this.nn=null,this.G=null,this.X=null,r(this.shadowRoot,{css:Q,id:"ty-radio"})}onConnect(){this.setupEventListeners(),this.dispatchEvent(new CustomEvent("ty-radio-connected",{bubbles:!0}))}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;this.nn&&(this.removeEventListener("click",this.nn),this.nn=null);const n=this.shadowRoot?.querySelector(".radio-container");n?(this.G&&(n.removeEventListener("focus",this.G),this.G=null),this.X&&(n.removeEventListener("blur",this.X),this.X=null),this.W=!1):this.W=!1}setupEventListeners(){if(this.W)return;const n=this.shadowRoot.querySelector(".radio-container");n&&(this.nn=n=>this.handleClick(n),this.G=()=>n.classList.add("focused"),this.X=()=>n.classList.remove("focused"),this.addEventListener("click",this.nn),n.addEventListener("focus",this.G),n.addEventListener("blur",this.X),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(),this.applyLabelName(t)}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)}};tn.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 en=tn;customElements.get("ty-radio")||customElements.define("ty-radio",en);const on=class extends o{constructor(){super(),this.W=!1,this.en=null,this.tn=null,this.rn=null,r(this.shadowRoot,{css:Q,id:"ty-radio-group"})}onConnect(){this.setupEventListeners(),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.en&&(this.removeEventListener("ty-radio-select",this.en),this.en=null),this.tn&&(this.removeEventListener("keydown",this.tn),this.tn=null),this.rn&&(this.removeEventListener("ty-radio-connected",this.rn),this.rn=null),this.W=!1)}setupEventListeners(){this.W||(this.en=n=>this.handleRadioSelect(n),this.tn=n=>this.handleKeydown(n),this.rn=()=>this.syncChildren(),this.addEventListener("ty-radio-select",this.en),this.addEventListener("keydown",this.tn),this.addEventListener("ty-radio-connected",this.rn),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=nn,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=nn,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}};on.formAssociated=!0,on.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 rn=on;customElements.get("ty-radio-group")||customElements.define("ty-radio-group",rn);const sn='<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>',an='<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>',ln=class extends o{constructor(){super(),this.sn=null,this.an=!1,r(this.shadowRoot,{css:B,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/* Keep the copy button pinned to the top-right when content wraps to multiple lines */\n.input-wrapper:has(.copy-field-value.multiline) {\n align-items: flex-start;\n padding-top: 8px;\n padding-bottom: 8px;\n}\n\n/* Horizontal scroll variant - scroll long content instead of clipping with ellipsis */\n.copy-field-value.horizontal-scroll {\n overflow-x: auto;\n overflow-y: hidden;\n text-overflow: clip;\n white-space: nowrap;\n}\n\n/* Multiline + horizontal scroll (e.g. code blocks): preserve lines, scroll both axes */\n.copy-field-value.multiline.horizontal-scroll {\n white-space: pre;\n word-break: normal;\n overflow-y: auto;\n}\n\n/* Hide scrollbars on scrollable value - content still scrolls, chrome stays clean */\n.copy-field-value.multiline,\n.copy-field-value.horizontal-scroll {\n scrollbar-width: none; /* Firefox */\n}\n.copy-field-value.multiline::-webkit-scrollbar,\n.copy-field-value.horizontal-scroll::-webkit-scrollbar {\n display: none; /* Chrome/Safari */\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.sn&&(clearTimeout(this.sn),this.sn=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.sn&&clearTimeout(this.sn),this.an=!0;const n=this.shadowRoot.querySelector(".copy-button");n&&(n.classList.add("success"),n.innerHTML=an),this.sn=window.setTimeout(()=>{this.an=!1;const n=this.shadowRoot.querySelector(".copy-button");n&&(n.classList.remove("success"),n.innerHTML=sn),this.sn=null},2e3)}showCopyError(){null!==this.sn&&clearTimeout(this.sn),this.an=!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.sn=window.setTimeout(()=>{const n=this.shadowRoot.querySelector(".copy-button");n&&(n.classList.remove("error"),n.innerHTML=sn),this.sn=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=["copy-field-value",this.multiline?"multiline":"",this.horizontalScroll?"horizontal-scroll":""].filter(Boolean).join(" ");n.innerHTML=`\n <div class="input-container">\n ${this.label?`\n <label class="ty-field-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="${e}">${this.value||""}</code>`:`<div class="${e}">${this.value||""}</div>`}\n <button class="copy-button${this.an?" success":""}" type="button" ${this.disabled?"disabled":""}>\n ${this.an?an:sn}\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 horizontalScroll(){return this.getProperty("horizontalScroll")}set horizontalScroll(n){this.setProperty("horizontalScroll",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)}};ln.formAssociated=!0,ln.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},horizontalScroll:{type:"boolean",visual:!0,default:!1},disabled:{type:"boolean",visual:!0,default:!1},required:{type:"boolean",visual:!0,default:!1}};let cn=ln;function dn(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",cn),customElements.get("ty-copy-field")||customElements.define("ty-copy-field",class extends cn{});const hn=class extends o{constructor(){super(),this.ln=[],this.cn=!1,this.W=!1,this.dn=null,this.hn=null,this.un=null,this.pn=null,this.bn=null,this.gn=null,this.vn=null,this.yn=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.ln=[],this.updateFormValue(),this.p&&this.render();const n=this.shadowRoot?.querySelector(".file-input");n&&(n.value="")}getFormValue(){if(0===this.ln.length)return null;const n=new FormData,t=this.name||"files";for(const e of this.ln)n.append(t,e);return n}get files(){return[...this.ln]}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.ln=this.multiple?n:n.slice(0,1),this.updateFormValue(),this.render();const t={value:this.ln,files:this.ln,names:this.ln.map(n=>n.name)};setTimeout(()=>{this.dispatchEvent(new CustomEvent("change",{detail:t,bubbles:!0,composed:!0}))},0)}removeFile(n){const t=[...this.ln];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.dn=n=>{this.disabled||n.target.closest(".file-remove")||e.click()},this.hn=n=>{this.disabled||"Enter"!==n.key&&" "!==n.key||(n.preventDefault(),e.click())},this.un=()=>{t.classList.add("focused")},this.pn=()=>{t.classList.remove("focused")},this.bn=n=>{this.disabled||(n.preventDefault(),n.stopPropagation(),this.cn||(this.cn=!0,t.classList.add("drag-active")))},this.gn=n=>{t.contains(n.relatedTarget)||(this.cn=!1,t.classList.remove("drag-active"))},this.vn=n=>{if(this.disabled)return;n.preventDefault(),n.stopPropagation(),this.cn=!1,t.classList.remove("drag-active");const e=Array.from(n.dataTransfer?.files??[]);e.length>0&&this.setFiles(e)},this.yn=n=>{const t=n.target;t.files&&t.files.length>0&&this.setFiles(Array.from(t.files))},t.addEventListener("click",this.dn),t.addEventListener("keydown",this.hn),t.addEventListener("focus",this.un),t.addEventListener("blur",this.pn),t.addEventListener("dragover",this.bn),t.addEventListener("dragleave",this.gn),t.addEventListener("drop",this.vn),e.addEventListener("change",this.yn),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.dn&&t.removeEventListener("click",this.dn),this.hn&&t.removeEventListener("keydown",this.hn),this.un&&t.removeEventListener("focus",this.un),this.pn&&t.removeEventListener("blur",this.pn),this.bn&&t.removeEventListener("dragover",this.bn),this.gn&&t.removeEventListener("dragleave",this.gn),this.vn&&t.removeEventListener("drop",this.vn),this.yn&&e.removeEventListener("change",this.yn),this.W=!1)}buildDropZoneClasses(){const n=["drop-zone"];return this.cn&&n.push("drag-active"),this.ln.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.ln.length>t;t++){const e=this.ln[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=dn(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 c=document.createElement("div");c.className="error-message",t.appendChild(c),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.ln.length>0?"none":"",t.querySelector(".upload-hint").innerHTML=this.ln.length>0?`<strong>${this.ln.length} file${1!==this.ln.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.ln.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"}};hn.formAssociated=!0,hn.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 un=hn;function pn(){return"native"!==document.documentElement.getAttribute("data-ty-scrollbar")}customElements.get("ty-file-upload")||customElements.define("ty-file-upload",un);class bn{constructor(n,t={}){this.trackY=null,this.thumbY=null,this.trackX=null,this.thumbX=null,this.cn=!1,this.mn="y",this.fn=0,this.wn=0,this.xn=null,this.kn=null,this.zn=null,this.Cn=n,this.Sn=!1!==t.vertical,this.En=t.horizontal??!1,this.Tn=t.autoHideDelay??1e3,this.Mn=this.In.bind(this),this.Dn=this.An.bind(this),this.$n=this.Ln.bind(this),this.Nn=this.On.bind(this),this.Rn=this.Pn.bind(this),this.qn=this.Vn.bind(this),this.Bn=this.Fn.bind(this),this.Sn&&(this.trackY=this.Hn("y"),this.thumbY=this.jn("y"),this.trackY.appendChild(this.thumbY)),this.En&&(this.trackX=this.Hn("x"),this.thumbX=this.jn("x"),this.trackX.appendChild(this.thumbX)),this.Cn.addEventListener("scroll",this.Mn,{passive:!0}),this.thumbY&&this.thumbY.addEventListener("pointerdown",this.Dn),this.trackY&&this.trackY.addEventListener("pointerdown",this.Nn),this.thumbX&&this.thumbX.addEventListener("pointerdown",this.$n),this.trackX&&this.trackX.addEventListener("pointerdown",this.Rn),this.zn=new ResizeObserver(()=>this.update()),this.zn.observe(this.Cn),this.update()}Hn(n){const t=document.createElement("div");return t.className="ty-scrollbar-track-"+n,t}jn(n){const t=document.createElement("div");return t.className="ty-scrollbar-thumb-"+n,t}update(){this.Wn(),this._n()}scrollToTop(n=!1){this.Cn.scrollTo({top:0,behavior:n?"smooth":"auto"})}scrollToBottom(n=!1){this.Cn.scrollTo({top:this.Cn.scrollHeight,behavior:n?"smooth":"auto"})}scrollToLeft(n=!1){this.Cn.scrollTo({left:0,behavior:n?"smooth":"auto"})}scrollToRight(n=!1){this.Cn.scrollTo({left:this.Cn.scrollWidth,behavior:n?"smooth":"auto"})}destroy(){this.Cn.removeEventListener("scroll",this.Mn),this.thumbY&&this.thumbY.removeEventListener("pointerdown",this.Dn),this.trackY&&this.trackY.removeEventListener("pointerdown",this.Nn),this.thumbX&&this.thumbX.removeEventListener("pointerdown",this.$n),this.trackX&&this.trackX.removeEventListener("pointerdown",this.Rn),this.zn&&(this.zn.disconnect(),this.zn=null),null!==this.xn&&(cancelAnimationFrame(this.xn),this.xn=null),null!==this.kn&&(clearTimeout(this.kn),this.kn=null)}In(){null===this.xn&&(this.xn=requestAnimationFrame(()=>{this.xn=null,this.Yn(),this.Un()}))}Wn(){if(!this.trackY||!this.thumbY)return;const{scrollHeight:n,clientHeight:t}=this.Cn,e=n>t+2;this.trackY.classList.toggle("has-overflow",e),e&&(this.thumbY.style.height=Math.max(t/n*100,0)+"%"),this.Gn()}_n(){if(!this.trackX||!this.thumbX)return;const{scrollWidth:n,clientWidth:t}=this.Cn,e=n>t+2;this.trackX.classList.toggle("has-overflow",e),e&&(this.thumbX.style.width=Math.max(t/n*100,0)+"%"),this.Xn()}Yn(){this.Gn(),this.Xn()}Gn(){if(!this.trackY||!this.thumbY)return;const{scrollTop:n,scrollHeight:t,clientHeight:e}=this.Cn,o=t-e;o>0&&(this.thumbY.style.top=n/o*(this.trackY.clientHeight-this.thumbY.offsetHeight)+"px")}Xn(){if(!this.trackX||!this.thumbX)return;const{scrollLeft:n,scrollWidth:t,clientWidth:e}=this.Cn,o=t-e;o>0&&(this.thumbX.style.left=n/o*(this.trackX.clientWidth-this.thumbX.offsetWidth)+"px")}Un(){this.cn||(this.trackY?.classList.add("scrolling"),this.trackX?.classList.add("scrolling"),null!==this.kn&&clearTimeout(this.kn),this.kn=setTimeout(()=>{this.trackY?.classList.remove("scrolling"),this.trackX?.classList.remove("scrolling"),this.kn=null},this.Tn))}An(n){0===n.button&&(n.preventDefault(),n.stopPropagation(),this.cn=!0,this.mn="y",this.fn=n.clientY,this.wn=this.Cn.scrollTop,this.thumbY.setPointerCapture(n.pointerId),this.trackY?.classList.add("dragging"),this.thumbY.addEventListener("pointermove",this.qn),this.thumbY.addEventListener("pointerup",this.Bn),this.thumbY.addEventListener("pointercancel",this.Bn))}Ln(n){0===n.button&&(n.preventDefault(),n.stopPropagation(),this.cn=!0,this.mn="x",this.fn=n.clientX,this.wn=this.Cn.scrollLeft,this.thumbX.setPointerCapture(n.pointerId),this.trackX?.classList.add("dragging"),this.thumbX.addEventListener("pointermove",this.qn),this.thumbX.addEventListener("pointerup",this.Bn),this.thumbX.addEventListener("pointercancel",this.Bn))}Vn(n){if(this.cn)if("y"===this.mn){const t=n.clientY-this.fn,{scrollHeight:e,clientHeight:o}=this.Cn,i=this.trackY.clientHeight-this.thumbY.offsetHeight;if(0>=i)return;this.Cn.scrollTop=this.wn+t*((e-o)/i)}else{const t=n.clientX-this.fn,{scrollWidth:e,clientWidth:o}=this.Cn,i=this.trackX.clientWidth-this.thumbX.offsetWidth;if(0>=i)return;this.Cn.scrollLeft=this.wn+t*((e-o)/i)}}Fn(n){const t="y"===this.mn?this.thumbY:this.thumbX,e="y"===this.mn?this.trackY:this.trackX;this.cn=!1,t.releasePointerCapture(n.pointerId),e?.classList.remove("dragging"),t.removeEventListener("pointermove",this.qn),t.removeEventListener("pointerup",this.Bn),t.removeEventListener("pointercancel",this.Bn),this.Un()}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.Cn;this.Cn.scrollTo({top:e*(o-i),behavior:"smooth"})}Pn(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.Cn;this.Cn.scrollTo({left:e*(o-i),behavior:"smooth"})}}const gn="\n/* ===================================== */\n/* Custom Scrollbar - Vertical Track */\n/* ===================================== */\n\n.ty-scrollbar-track-y {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: var(--ty-scrollbar-width, 8px);\n z-index: 3;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.25s ease-out;\n cursor: pointer;\n}\n\n.ty-scrollbar-track-y.has-overflow {\n pointer-events: auto;\n}\n\n.ty-scrollbar-track-y.has-overflow:hover,\n.ty-scrollbar-track-y.has-overflow.scrolling,\n.ty-scrollbar-track-y.dragging {\n opacity: 1;\n}\n\n.ty-scrollbar-track-y::before {\n content: '';\n position: absolute;\n inset: 0;\n background: var(--ty-scrollbar-track, transparent);\n border-radius: var(--ty-scrollbar-radius, 4px);\n opacity: 0;\n transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-y:hover::before,\n.ty-scrollbar-track-y.dragging::before {\n opacity: 1;\n background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-y {\n position: absolute;\n right: 0;\n width: 100%;\n min-height: var(--ty-scrollbar-thumb-min-height, 30px);\n background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n border-radius: var(--ty-scrollbar-radius, 4px);\n transition: background 0.15s ease-out;\n box-sizing: border-box;\n border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-y:hover,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-y:active,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* ===================================== */\n/* Custom Scrollbar - Horizontal Track */\n/* ===================================== */\n\n.ty-scrollbar-track-x {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: var(--ty-scrollbar-width, 8px);\n z-index: 3;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.25s ease-out;\n cursor: pointer;\n}\n\n.ty-scrollbar-track-x.has-overflow {\n pointer-events: auto;\n}\n\n.ty-scrollbar-track-x.has-overflow:hover,\n.ty-scrollbar-track-x.has-overflow.scrolling,\n.ty-scrollbar-track-x.dragging {\n opacity: 1;\n}\n\n.ty-scrollbar-track-x::before {\n content: '';\n position: absolute;\n inset: 0;\n background: var(--ty-scrollbar-track, transparent);\n border-radius: var(--ty-scrollbar-radius, 4px);\n opacity: 0;\n transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-x:hover::before,\n.ty-scrollbar-track-x.dragging::before {\n opacity: 1;\n background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-x {\n position: absolute;\n bottom: 0;\n height: 100%;\n min-width: var(--ty-scrollbar-thumb-min-height, 30px);\n background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n border-radius: var(--ty-scrollbar-radius, 4px);\n transition: background 0.15s ease-out;\n box-sizing: border-box;\n border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-x:hover,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-x:active,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* ===================================== */\n/* Touch devices - hide custom scrollbar */\n/* ===================================== */\n\n@media (pointer: coarse) and (hover: none) {\n .ty-scrollbar-track-y,\n .ty-scrollbar-track-x {\n display: none !important;\n }\n}\n\n/* Respect reduced motion */\n@media (prefers-reduced-motion: reduce) {\n .ty-scrollbar-track-y,\n .ty-scrollbar-track-x,\n .ty-scrollbar-thumb-y,\n .ty-scrollbar-thumb-x {\n transition-duration: 0ms !important;\n }\n}\n",vn='<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>',yn=class extends o{constructor(){super(),this.Kn=null,this.Zn=null,this.Jn=null,this.j=!1,this.handleInputEvent=n=>{this.value=n.target.value,this.Kn&&this.Zn&&this.resizeTextarea(this.Kn,this.Zn),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/* Bordered container — owns the border + active state (composer layout):\n header (top slot) · textarea (borderless) · footer (bottom slot). */\n.textarea-wrapper {\n position: relative;\n width: 100%;\n display: flex;\n flex-direction: column;\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(--ty-input-bg));\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n}\n\n/* Active ring tied to the TEXTAREA specifically (not :focus-within) so tabbing\n to a footer button doesn't make the whole field look focused. */\n.textarea-wrapper:has(textarea: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/* Error + disabled reflected from the inner textarea (both in shadow DOM, so\n :has is reliable here — unlike slotted content). */\n.textarea-wrapper:has(textarea.error) {\n border-color: var(--ty-color-danger);\n background: var(--ty-bg-danger-soft);\n}\n.textarea-wrapper:has(textarea.error):has(textarea:focus) {\n border-color: var(--ty-color-danger-bold);\n}\n.textarea-wrapper:has(textarea:disabled) {\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/* Scroll region wraps just the textarea so the custom scrollbar never overlaps\n the header/footer. */\n.textarea-scroll {\n position: relative;\n flex: 1 1 auto;\n min-height: 0;\n display: flex;\n}\n\n/* Custom scrollbar track positioned to the scroll region (textarea edges) */\n.textarea-scroll .ty-scrollbar-track-y {\n top: 2px;\n right: 2px;\n bottom: 2px;\n border-radius: 0 4px 4px 0;\n}\n\n/* Header / footer slot regions — zero footprint until they have content\n (the component toggles .has-content via slotchange). footer defaults to\n space-between so \"tools … submit\" works; a single wide button fills it. */\n.textarea-header,\n.textarea-footer {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.textarea-footer { justify-content: space-between; }\n.textarea-header.has-content {\n padding: 6px 10px;\n border-bottom: 1px solid var(--ty-textarea-divider, var(--input-border, var(--ty-input-border)));\n}\n.textarea-footer.has-content {\n padding: 6px 10px;\n border-top: 1px solid var(--ty-textarea-divider, var(--input-border, var(--ty-input-border)));\n}\n\n/* ===== LABEL STYLING ===== */\n\n.ty-field-label {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n font-weight: var(--ty-font-medium);\n color: var(--ty-label-color);\n margin-bottom: 6px;\n padding-left: 12px;\n}\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 is reflected on .textarea-wrapper (see above). */\n\n/* ===== TEXTAREA BASE STYLING ===== */\n\ntextarea {\n /* Borderless — the .textarea-wrapper owns the border/background now. */\n box-sizing: border-box;\n width: 100%;\n flex: 1 1 auto;\n border: none;\n background: transparent;\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 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/* Disabled — visual state lives on the wrapper; just the cursor/text here. */\ntextarea:disabled {\n cursor: not-allowed;\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"}),pn()&&r(n,{css:gn,id:"ty-custom-scrollbar"})}onConnect(){}onDisconnect(){if(this.Qn(),this.Kn){const n=this.Kn.cloneNode(!0);this.Kn.parentNode?.replaceChild(n,this.Kn),this.Kn=null}this.Zn=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.Zn=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.Qn()):(n.style.overflowY="auto",this.nt(n))),this.Jn?.update()}nt(n){if(this.Jn||!pn())return;n.style.scrollbarWidth="none",this.setAttribute("data-custom-scroll",""),this.Jn=new bn(n,{vertical:!0,horizontal:!1});const t=this.shadowRoot.querySelector(".textarea-scroll");t&&this.Jn.trackY&&t.appendChild(this.Jn.trackY)}Qn(){this.Jn&&(this.Jn.trackY?.remove(),this.Jn.destroy(),this.Jn=null,this.removeAttribute("data-custom-scroll"),this.Kn&&(this.Kn.style.scrollbarWidth=""))}emitValueEvents(n){const t=this.value;this.m.setFormValue(t||""),this.updateValidity();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">${vn}</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.label?o.setAttribute("aria-label",this.label):o.removeAttribute("aria-label"),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.Kn=o}else{const t=document.createElement("div");t.className="textarea-container";const e=document.createElement("label");e.className="ty-field-label",this.label?(e.innerHTML=this.label+(this.required?` <span class="required-icon">${vn}</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.label&&o.setAttribute("aria-label",this.label),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");i.className="textarea-wrapper";const r=document.createElement("div");r.className="textarea-header";const s=document.createElement("slot");s.setAttribute("name","header"),r.appendChild(s);const a=document.createElement("div");a.className="textarea-scroll",a.appendChild(o);const l=document.createElement("div");l.className="textarea-footer";const c=document.createElement("slot");c.setAttribute("name","footer"),l.appendChild(c),i.appendChild(r),i.appendChild(a),i.appendChild(l);const d=(n,t)=>{const e=()=>t.classList.toggle("has-content",n.assignedNodes({flatten:!0}).length>0);n.addEventListener("slotchange",e),e()};if(d(s,r),d(c,l),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 h=this.setupDummyElement(o);setTimeout(()=>this.resizeTextarea(o,h),0),this.Kn=o}this.updateValidity()}updateValidity(){const n=this.shadowRoot?.querySelector("textarea");this.disabled?this.m.setValidity({}):this.required&&""===(n?n.value:(this.value??"")+"").trim()?this.m.setValidity({valueMissing:!0},"Please fill out this field",n??void 0):this.m.setValidity({})}};yn.formAssociated=!0,yn.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 mn=yn;customElements.get("ty-textarea")||customElements.define("ty-textarea",mn);const fn={"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"}},wn={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 xn(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 kn(n){const{targetEl:t,floatingEl:e,preferences:o=wn.default,offset:i=8,padding:r=8,containerPadding:s=0}=n,a=xn(t),l=xn(e),c=o.map(n=>function(n){const{targetRect:t,floatingRect:e,placement:o,offset:i,padding:r,scrollbarWidth:s,containerPadding:a}=n,l=fn[o],{vertical:c,horizontal:d,orientation:h}=l,u=window.innerWidth,p=window.innerHeight;let b,g;window,window,b="vertical"===h?"start"===d?t.left-e.width-i+a:t.right+i-a:"start"===d?t.left:"center"===d?t.centerX-e.width/2:t.right-e.width,g="vertical"===h?"center"===c?t.centerY-e.height/2:"end"===c?t.bottom-e.height-a:t.top:"top"===c?t.top-e.height-i+a:t.bottom+i-a;const v={top:Math.min(0,g-r),left:Math.min(0,b-r),bottom:Math.min(0,p-(g+e.height+r)),right:Math.min(0,u-(b+e.width+r+s))},y=Object.values(v).reduce((n,t)=>n+Math.abs(t),0);return{x:Math.round(b),y:Math.round(g),placement:o,overflow:v,overflowAmount:y,fits:0===y}}({targetRect:a,floatingRect:l,placement:n,offset:i,padding:r,containerPadding:s,scrollbarWidth:15})),d=c.find(n=>n.fits)||c.reduce((n,t)=>n.overflowAmount>t.overflowAmount?t:n);return 0>d.overflow.right&&(d.x+=d.overflow.right),d}const zn={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. Defaults route through the neutral ramp\n * so the tooltip inverts cleanly: dark in light mode, light in dark mode.\n * Consumers can pin it to a fixed look via --ty-tooltip-bg/-color. */\n background: var(--ty-tooltip-bg, var(--ty-color-neutral-strong));\n color: var(--ty-tooltip-color, var(--ty-color-neutral-faint));\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/* 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-floating, var(--ty-surface-elevated, #ffffff));\n color: var(--ty-color-neutral-strong, #111827);\n box-shadow: var(--ty-shadow-lg,\n 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, var(--ty-color-neutral-strong));\n color: var(--ty-color-neutral-faint);\n}\n\n/* Secondary - Purple/indigo */\n#tooltip-container[data-flavor="secondary"] {\n background: var(--ty-color-secondary, #8b5cf6);\n color: #ffffff;\n}\n'},Cn=new WeakMap,Sn=new WeakMap,En=new WeakMap,Tn=new WeakMap;function Mn(n){const t=n||"dark";return["dark","light","primary","secondary","success","danger","warning","info","neutral"].includes(t)?t:"dark"}function In(n){let t=En.get(n);return t||(t={showTimeout:null,hideTimeout:null},En.set(n,t)),t}function Dn(n,t){return n.hasAttribute(t)}function An(n,t,e){const o=n.getAttribute(t);if(null===o)return e;const i=parseInt(o,10);return isNaN(i)?e:i}function $n(n){return{placement:n.getAttribute("placement")||"top",offset:An(n,"offset",8),delay:An(n,"delay",600),disabled:Dn(n,"disabled"),flavor:Mn(n.getAttribute("flavor"))}}function Ln(n){return n.parentElement}function Nn(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-bold, #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 On(n){const{placement:t,offset:e}=$n(n),o=Ln(n),i=Tn.get(n);if(!o||!i)return;const r=kn({targetEl:o,floatingEl:i,preferences:"top"===t?wn.tooltip:"bottom"===t?["bottom","top","left","right"]:"left"===t?["left","right","top","bottom"]:"right"===t?["right","left","top","bottom"]:wn.tooltip,offset:e});i.style.left=r.x+"px",i.style.top=r.y+"px"}function Rn(n){const t=Cn.get(n);t&&(t(),Cn.delete(n))}function Pn(n){const t=In(n);null!==t.showTimeout&&(clearTimeout(t.showTimeout),t.showTimeout=null),null!==t.hideTimeout&&(clearTimeout(t.hideTimeout),t.hideTimeout=null)}function qn(n){const t=Tn.get(n);if(t)try{t.hidePopover(),n.tt=!1,Rn(n)}catch(e){}}function Vn(n){const t=In(n),{delay:e}=$n(n);Pn(n),t.showTimeout=window.setTimeout(()=>function(n){const{disabled:t}=$n(n);if(t)return;const e=function(n){let t=Tn.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}=$n(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 ",Nn(t,e),document.body.appendChild(t),Tn.set(n,t)}return t}(n);try{e.showPopover(),n.tt=!0,On(n),function(n){const t=Ln(n),e=Tn.get(n);if(!t||!e)return;let o=null;const i=()=>{null!==o&&clearTimeout(o),o=window.setTimeout(()=>{o=null,On(n)},10)},r=new ResizeObserver(i);r.observe(t),r.observe(e);let s=null;const a=()=>{null===s&&(s=requestAnimationFrame(()=>{s=null,On(n)}))};window.addEventListener("scroll",a,!0),window.addEventListener("resize",i),Cn.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 Bn(n){const t=In(n);Pn(n),t.hideTimeout=window.setTimeout(()=>qn(n),200)}class TyTooltip extends HTMLElement{constructor(){super(),this.tt=!1,this.attachShadow({mode:"open"})}static get observedAttributes(){return["placement","offset","delay","disabled","flavor"]}connectedCallback(){this.tt=!1,r(this.shadowRoot,zn),function(n){const t=Ln(n);if(!t)return;const e=()=>Vn(n),o=()=>Bn(n),i=()=>Vn(n),r=()=>Bn(n);t.addEventListener("mouseenter",e),t.addEventListener("mouseleave",o),t.addEventListener("focusin",i),t.addEventListener("focusout",r),Sn.set(n,()=>{t.removeEventListener("mouseenter",e),t.removeEventListener("mouseleave",o),t.removeEventListener("focusin",i),t.removeEventListener("focusout",r)})}(this)}disconnectedCallback(){!function(n){Pn(n),Rn(n);const t=Sn.get(n);t&&(t(),Sn.delete(n));const e=Tn.get(n);e&&(e.remove(),Tn.delete(n)),En.delete(n)}(this)}attributeChangedCallback(n,t,e){if("flavor"===n&&this.tt){const n=Tn.get(this);n&&Nn(n,Mn(e))}"disabled"===n&&null!==e&&qn(this)}}customElements.get("ty-tooltip")||customElements.define("ty-tooltip",TyTooltip);const Fn={locked:!1,scrollY:0,activeLocks:new Set};function Hn(){return document.documentElement}function jn(){if(!Fn.locked)return;const n=Hn();window,n.classList.remove("ty-scroll-locked"),n.style.overflow="",n.style.paddingRight="",Fn.locked=!1}function Wn(n){Fn.activeLocks.has(n)||(Fn.activeLocks.add(n),1===Fn.activeLocks.size&&function(){if(Fn.locked)return;const n=window.innerWidth-Hn().clientWidth,t=Hn();window,Fn.scrollY=window.scrollY||Hn().scrollTop||0,Fn.locked=!0,t.style.overflow="hidden",n>0&&(t.style.paddingRight=n+"px"),t.classList.add("ty-scroll-locked")}())}function _n(n){Fn.activeLocks.has(n)&&(Fn.activeLocks.delete(n),0===Fn.activeLocks.size&&jn())}const Yn=new WeakMap,Un=new WeakMap,Gn=new WeakMap,Xn=new WeakMap,Kn=new WeakMap;function Zn(n,t){return n.hasAttribute(t)}function Jn(n,t,e){const o=n.getAttribute(t);if(null===o)return e;const i=parseInt(o,10);return isNaN(i)?e:i}function Qn(n){return{manual:Zn(n,"manual"),disableClose:Zn(n,"disable-close"),placement:n.getAttribute("placement")||"bottom",offset:Jn(n,"offset",8)}}function nt(n){return n.parentElement}function tt(n){return n.querySelector(".popup-dialog")}function et(n){let t=Kn.get(n);return t||(t="popup-"+(n.id||Math.random().toString(36).substr(2,9)),Kn.set(n,t)),t}function ot(n,t=!1){const{disableClose:e}=Qn(n);if(!t&&e)return;const o=n.shadowRoot,i=o?tt(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 it(n){Wn(et(n));const t=n.shadowRoot,e=t?tt(t):null;e&&(e.showModal(),requestAnimationFrame(()=>{!function(n){const{placement:t,offset:e}=Qn(n),o=n.shadowRoot,i=nt(n),r=o?tt(o):null;if(!i||!r)return;const s=kn({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 rt(n){const t=n.shadowRoot,e=t?tt(t):null;e&&(e.classList.contains("open")?ot(n):it(n))}function st(n){const{manual:t}=Qn(n),e=nt(n);if(!e||t)return;const o=Yn.get(n);o&&e.removeEventListener("pointerdown",o);const i=t=>function(n,t){t.preventDefault(),t.stopPropagation(),rt(n)}(n,t);Yn.set(n,i),e.addEventListener("pointerdown",i)}function at(n){const t=nt(n),e=Yn.get(n);t&&e&&(t.removeEventListener("pointerdown",e),Yn.delete(n))}function lt(n){const t=n.shadowRoot;if(!t)return;const e=tt(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?tt(e):null;o&&t.target===o&&(t.preventDefault(),ot(n))}(n,t);Un.set(n,r),e.addEventListener("pointerdown",r);const s=t=>function(n,t){if(t.stopPropagation(),"Escape"===t.key){const{disableClose:e}=Qn(n);e?t.preventDefault():ot(n)}}(n,t);Gn.set(n,s),n.addEventListener("keydown",s),e.addEventListener("close",()=>{_n(et(n)),e.classList.remove("open"),e.classList.remove("preparing-animation"),n.dispatchEvent(new CustomEvent("close",{bubbles:!0}))})}n.closePopup=()=>ot(n,!0),n.openPopup=()=>it(n),n.togglePopup=()=>rt(n);const o=t=>function(n,t){t.stopPropagation(),ot(n,!0)}(n,t);Xn.set(n,o),n.addEventListener("ty:close-popup",o),st(n)}class TyPopup extends HTMLElement{static get observedAttributes(){return["manual","disable-close","placement","offset"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){lt(this)}disconnectedCallback(){!function(n){const t=Kn.get(n);t&&(_n(t),Kn.delete(n)),at(n);const e=n.shadowRoot,o=e?tt(e):null;if(o){const t=Un.get(n);t&&(o.removeEventListener("pointerdown",t),Un.delete(n))}const i=Gn.get(n);i&&(n.removeEventListener("keydown",i),Gn.delete(n));const r=Xn.get(n);r&&(n.removeEventListener("ty:close-popup",r),Xn.delete(n))}(this)}attributeChangedCallback(n,t,e){switch(lt(this),n){case"placement":case"offset":lt(this);break;case"manual":case"disable-close":at(this),st(this)}}}customElements.get("ty-popup")||customElements.define("ty-popup",TyPopup);const ct=new WeakMap,dt=new WeakMap,ht=new WeakMap,ut=new WeakMap,pt=new WeakMap,bt=new WeakMap;function gt(n,t){if(!n.hasAttribute(t))return!1;const e=n.getAttribute(t);return null===e||"false"!==e.toLowerCase()}function vt(n){return n.querySelector(".ty-modal-dialog")}function yt(n,t,e){const o=new CustomEvent(t,{detail:e,bubbles:!0,cancelable:!0});n.dispatchEvent(o)}function mt(n,t="programmatic",e){const o=n.shadowRoot,i=o?vt(o):null;if(i&&i.open){if(!e?.force){const e=new CustomEvent("beforeclose",{detail:{reason:t},bubbles:!0,composed:!0,cancelable:!0});if(n.dispatchEvent(e),e.defaultPrevented)return}n.removeAttribute("open")}}function ft(n){const t=n.shadowRoot;if(!t)return;const e=function(n){return{open:gt(n,"open"),backdrop:!n.hasAttribute("backdrop")||gt(n,"backdrop"),closeOnOutsideClick:!n.hasAttribute("close-on-outside-click")||gt(n,"close-on-outside-click"),closeOnEscape:!n.hasAttribute("close-on-escape")||gt(n,"close-on-escape")}}(n),o=function(n){let t=vt(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=bt.get(n);return t||(t="modal-"+(n.id||Math.random().toString(36).substr(2,9)),bt.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=ct.get(n);if(o&&(t.removeEventListener("click",o),ct.delete(n)),e){const e=t=>function(n,t){t.stopPropagation();const e=n.shadowRoot,o=e?vt(e):null;o&&t.target===o&&(t.preventDefault(),mt(n,"backdrop"))}(n,t);ct.set(n,e),t.addEventListener("click",e)}}(n,o,e.closeOnOutsideClick),function(n,t,e){const o=dt.get(n);if(o&&(t.removeEventListener("keydown",o),dt.delete(n)),e){const e=t=>function(n,t){t.stopPropagation(),"Escape"===t.key&&(t.preventDefault(),mt(n,"escape"))}(n,t);dt.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=ht.get(n);if(i&&(o.removeEventListener("click",i),ht.delete(n)),e){const t=t=>function(n,t){t.preventDefault(),t.stopPropagation(),mt(n,"close-button")}(n,t);ht.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=ut.get(n),i=pt.get(n);if(o&&(e.removeEventListener("mouseenter",o),ut.delete(n)),i&&(e.removeEventListener("mouseleave",i),pt.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);ut.set(n,t),pt.set(n,o),e.addEventListener("mouseenter",t),e.addEventListener("mouseleave",o)}}(n,o),e.open?o.open||(Wn(i),e.backdrop?o.showModal():o.show(),yt(n,"open",{})):o.open&&(_n(i),o.close(),yt(n,"close",{reason:"programmatic"})),o.onclose=t=>{t.target===o&&(_n(i),n.hasAttribute("open")&&(n.removeAttribute("open"),yt(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"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){ft(this),this.show=()=>{this.setAttribute("open","true")},this.hide=n=>mt(this,"programmatic",n)}disconnectedCallback(){!function(n){const t=bt.get(n),e=n.shadowRoot,o=e?vt(e):null;if(t&&(_n(t),bt.delete(n)),!o)return;const i=ct.get(n);i&&(o.removeEventListener("click",i),ct.delete(n));const r=dt.get(n);r&&(o.removeEventListener("keydown",r),dt.delete(n));const s=o.querySelector(".close-button");if(s){const t=ht.get(n);t&&(s.removeEventListener("click",t),ht.delete(n))}const a=o.querySelector(".modal-content");if(a){const t=ut.get(n),e=pt.get(n);t&&(a.removeEventListener("mouseenter",t),ut.delete(n)),e&&(a.removeEventListener("mouseleave",e),pt.delete(n))}}(this)}attributeChangedCallback(n,t,e){ft(this)}}customElements.get("ty-modal")||customElements.define("ty-modal",TyModal),customElements.get("ty-dialog")||customElements.define("ty-dialog",class extends TyModal{});const wt=`\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.ty-field-label {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n font-weight: var(--ty-font-medium);\n color: var(--ty-label-color);\n margin-bottom: 6px;\n padding-left: 12px;\n display: flex;\n align-items: center;\n}\n\n/* Required indicator - using SVG icon */\n.required-icon {\n display: inline-flex;\n align-items: center;\n color: #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-bold);\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${gn}\n`;let xt=0;const kt=new WeakMap;function zt(n){let t=kt.get(n);return void 0===t&&(t=++xt,kt.set(n,t)),t}const Ct='<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>',St='<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>',Et='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">\n <circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>\n</svg>',Tt=class extends o{constructor(){super(),this.et="",this.ot=!1,this.it=!1,this.rt="Select...",this.st="",this.P=!1,this.lt=!1,this.ct=!1,this.dt=!1,this.ht="auto",this.ut=!1,this.bt=null,this.gt="md",this.vt="Available",this.yt="No options available",this.ft={open:!1,search:"",highlightedIndex:-1,filteredTags:[],selectedValues:[],mode:"desktop"},this.wt=null,this.xt=null,this.kt=null,this.zt=null,this.Ct=null,this.St=0,this.Et=null,this.Tt=null,this.Mt=null,this.It=null;const n=this.shadowRoot;r(n,{css:wt,id:"ty-select-base"}),r(n,{css:'\n/* ===== COMPACT skin: hugs content (field skin = base styles) ===== */\n.multiselect-stub.compact {\n display: inline-flex;\n flex-wrap: nowrap;\n width: auto;\n gap: 0.5rem;\n /* extra right padding = room for the absolutely-positioned chevron */\n padding: 0.5rem 2.25rem 0.5rem 0.875rem;\n}\n\n/* Consumer-provided trigger (slot="trigger"): no chrome at all */\n.multiselect-stub.custom-trigger {\n display: inline-block;\n border: none;\n background: none;\n padding: 0;\n min-height: 0;\n border-radius: 0;\n}\n.multiselect-stub.custom-trigger:hover {\n border: none;\n}\n\n.select-count {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 1.25rem;\n height: 1.25rem;\n padding: 0 0.375rem;\n border-radius: 9999px;\n background: var(--ty-bg-primary-soft);\n color: var(--ty-text-primary);\n font-size: var(--ty-font-xs);\n font-weight: var(--ty-font-semibold);\n font-style: normal;\n}\n.select-count[hidden] {\n display: none;\n}\n/* Selection text (field skin): single line, ellipsis, input colors */\n.multiselect-stub .dropdown-placeholder {\n font-style: normal;\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--input-color, var(--ty-input-color));\n}\n\n/* Empty state: muted placeholder color */\n.multiselect-stub .dropdown-placeholder.placeholder-shown {\n color: var(--input-placeholder, var(--ty-input-placeholder));\n}\n.multiselect-stub .dropdown-placeholder[hidden] {\n display: none;\n}\n\n/* Single-select display clone (slot="selected"): the selected ty-option\n projected into the stub — its own :host([cloned]) styling strips the\n list-row chrome; here it just takes the text\'s flex slot. */\n.multiselect-stub slot[name="selected"] {\n display: none;\n}\n.multiselect-stub.has-clone slot[name="selected"] {\n display: block;\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n}\n.multiselect-stub.compact.has-clone slot[name="selected"] {\n flex: 0 1 auto;\n}\n\n/* start/end slot content (icons etc.) — spacing comes from the stub\'s flex\n gap; muted like ty-input adornments. end sits before the chevron. */\n.multiselect-stub ::slotted([slot="start"]),\n.multiselect-stub ::slotted([slot="end"]) {\n flex-shrink: 0;\n color: var(--ty-text-soft);\n}\n\n/* Compact skin: the text IS the trigger label — no grow, regular text color */\n.multiselect-stub.compact .dropdown-placeholder {\n flex-grow: 0;\n color: var(--ty-text);\n}\n\n/* Trigger stays visible while the popup is open (multiselect hides it) */\n.dropdown-wrapper:has(.dropdown-chevron.open) .multiselect-stub {\n opacity: 1;\n pointer-events: auto;\n}\n\n/* ===== One-panel popup: search header fused with the options list ===== */\n\n/* Single unified shadow around the whole panel (header + list as one silhouette) */\n.dropdown-dialog.open {\n filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.14)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08));\n}\n\n/* Card-style header: the search input keeps its own bordered-field look\n (base styles) and sits inset in the panel, TagPicker-style — no divider,\n whitespace separates it from the list. */\n.dropdown-header {\n background: var(--input-bg, var(--ty-input-bg));\n border: 1px solid var(--input-border, var(--ty-input-border));\n border-bottom: none;\n border-radius: var(--ty-radius-lg) var(--ty-radius-lg) 0 0;\n padding: var(--ty-spacing-2) var(--ty-spacing-2) var(--ty-spacing-1);\n}\n.dropdown-dialog.position-below .dropdown-header {\n margin-bottom: 0;\n}\n.dropdown-dialog.position-above .dropdown-header {\n margin-top: 0;\n border-top: none;\n border-bottom: 1px solid var(--input-border, var(--ty-input-border));\n border-radius: 0 0 var(--ty-radius-lg) var(--ty-radius-lg);\n padding: var(--ty-spacing-1) var(--ty-spacing-2) var(--ty-spacing-2);\n}\n\n/* Magnifier adornment inside the search field (header padding + field inset) */\n.dropdown-search-icon {\n position: absolute;\n top: 50%;\n left: calc(var(--ty-spacing-2) + var(--ty-spacing-3));\n transform: translateY(-50%);\n width: 1rem;\n height: 1rem;\n color: var(--input-placeholder, var(--ty-input-placeholder));\n pointer-events: none;\n}\n.dropdown-search-icon svg {\n width: 100%;\n height: 100%;\n}\n\n/* Mobile header: flex row, icon flows inline before the input */\n.dropdown-mode-mobile .mobile-header-content .dropdown-search-icon {\n position: static;\n transform: none;\n flex-shrink: 0;\n}\n\n/* Search input: bordered field from base styles; just size + icon room */\n.dropdown-search-input {\n min-height: 2.25rem;\n padding-right: var(--ty-spacing-2);\n /* room for the magnifier adornment */\n padding-left: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n}\n/* Trigger already has a chevron - no second one inside the search row */\n.dropdown-search-chevron {\n display: none;\n}\n\n/* With the search row hidden nothing inside is focusable, so the <dialog>\n itself receives focus on open — suppress its UA focus ring */\n.dropdown-dialog:focus,\n.dropdown-dialog:focus-visible {\n outline: none;\n}\n\n/* Search row hidden (\'auto\' below threshold / searchable="false"):\n the options panel owns the whole silhouette */\n.dropdown-header[hidden] {\n display: none;\n}\n.dropdown-header[hidden] ~ .dropdown-options-wrapper .dropdown-options {\n border-top: 1px solid var(--input-border, var(--ty-input-border));\n border-radius: var(--ty-radius-lg);\n}\n.mobile-search-input[hidden],\n.mobile-header-content .dropdown-search-icon[hidden] {\n display: none;\n}\n\n/* Options: vertical list rows fused under the search header.\n No own shadow/animation - the panel appears as one via dialog opacity. */\n.dropdown-options {\n flex-direction: column;\n flex-wrap: nowrap;\n align-items: stretch;\n gap: 0;\n /* Card-style list: rounded rows sit inset from the panel edges */\n padding: var(--ty-spacing-1);\n border-top: none;\n border-radius: 0 0 var(--ty-radius-lg) var(--ty-radius-lg);\n box-shadow: none;\n transform: none;\n transition: none;\n /* ~9-10 visible rows before scrolling (custom scrollbar, native hidden) */\n max-height: 24rem;\n}\n.dropdown-dialog.position-below .dropdown-options {\n box-shadow: none;\n}\n.dropdown-dialog.position-above .dropdown-options {\n border-top: 1px solid var(--input-border, var(--ty-input-border));\n border-bottom: none;\n border-radius: var(--ty-radius-lg) var(--ty-radius-lg) 0 0;\n}\n\n/* Loading panel continues the fused silhouette exactly like .dropdown-options —\n the base layer styles it as a floating card (radius + shadow), which left a\n see-through gap under the search header while loading. */\n.dropdown-loading {\n border-top: none;\n border-radius: 0 0 var(--ty-radius-lg) var(--ty-radius-lg);\n box-shadow: none;\n}\n.dropdown-dialog.position-above .dropdown-loading {\n border-top: 1px solid var(--input-border, var(--ty-input-border));\n border-bottom: none;\n border-radius: var(--ty-radius-lg) var(--ty-radius-lg) 0 0;\n}\n\n/* Selection tick lives inside ty-option (lucide check on [selected]) */\n\n/* Mobile modal: same vertical list */\n.dropdown-mode-mobile .section-content ::slotted(ty-option) {\n display: block;\n width: 100%;\n}\n',id:"ty-select"})}onConnect(){this.shadowRoot.querySelectorAll("dialog").forEach(n=>{n.open&&n.close()}),this.render(),requestAnimationFrame(()=>{this.initializeState()}),this.Mt=new MutationObserver(()=>{this.ft.selectedValues.length>0&&this.syncSelectedTags(this.ft.selectedValues),this.updateSearchVisibility(),this.updateSelectionDisplay()}),this.Mt.observe(this,{childList:!0})}onDisconnect(){this.shadowRoot.querySelectorAll("dialog").forEach(n=>{n.open&&n.close()}),this.Ct&&(document.removeEventListener("keydown",this.Ct),this.Ct=null),null!==this.Et&&(clearTimeout(this.Et),this.Et=null),this.Dt(),this.Mt&&(this.Mt.disconnect(),this.Mt=null)}onPropertiesChanged(n){for(const{name:t,newValue:e}of n)switch(t){case"value":const n=this.parseValue(e);this.ft.selectedValues=n,this.isConnected&&this.shadowRoot&&(this.syncSelectedTags(n),this.updateSelectionDisplay(),this.updateMobileSelectedState());break;case"name":this.et=e||"";break;case"multiple":this.ot=e,!e&&this.ft.selectedValues.length>1&&this.updateComponentValue([this.ft.selectedValues[0]],!1,"set",null);break;case"compact":this.it=e;break;case"placeholder":this.rt=e||"Select...",this.isConnected&&this.shadowRoot&&this.updateSelectionDisplay();break;case"label":this.st=e||"";break;case"disabled":this.P=e;break;case"readonly":this.lt=e;break;case"required":this.ct=e;break;case"externalSearch":this.dt=e;break;case"searchable":this.ht=e,this.isConnected&&this.shadowRoot&&this.updateSearchVisibility();break;case"size":this.gt=e;break;case"debounce":this.St=e;break;case"available-label":this.vt=e||"Available";break;case"no-options-message":this.yt=e||"No options available";break;case"loading":this.ut=e,this.applyLoadingState()}}applyLoadingState(){const n=this.shadowRoot;if(!n)return;const t=this.ut?l():null;n.querySelectorAll(".dropdown-options-wrapper").forEach(n=>{if(n.classList.toggle("loading",this.ut),this.ut){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.ft.selectedValues;if(this.et&&n.length>0){if(!this.ot)return n[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.ft.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-option:not([cloned]), ty-tag:not([cloned])"))}getTagData(n){return{value:n.value||n.getAttribute("value")||n.textContent||"",text:n.getAttribute("label")||n.textContent||"",element:n}}selectTag(n){n.setAttribute("selected","")}deselectTag(n){n.removeAttribute("selected")}getSelectedValues(){return this.getTagElements().filter(n=>n.hasAttribute("selected")).map(n=>this.getTagData(n).value).filter(n=>""!==n)}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({value:this.ot?[...n]:n[0]??null,values:n,items:this.getSelectedItems(n),action:e,item:o}))}getSelectedItems(n){const t=new Map(this.getTagElements().map(n=>[this.getTagData(n).value,n]));return n.map(n=>{const e=t.get(n);return{value:n,label:e?.getAttribute("label")||e?.textContent?.trim()||n,flavor:e?.getAttribute("flavor")??null}})}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=Math.min(s.height||200,440),l=20,c=parseFloat(getComputedStyle(this).getPropertyValue("--ty-select-popup-width")),d=isNaN(c)?Math.max(o.width,320):c,h=i-o.bottom,u=h>=a+8||h>=o.top,p=u?o.bottom+4-l:i-o.top+4-l,b=d+l+l;this.style.setProperty("--dropdown-x",Math.max(-12,Math.min(o.left-l,r-d-l-8))+"px"),this.style.setProperty("--dropdown-y",p+"px"),this.style.setProperty("--dropdown-width",b+"px"),this.style.setProperty("--dropdown-offset-x","0px"),this.style.setProperty("--dropdown-offset-y","0px"),this.style.setProperty("--dropdown-padding","20px"),u?(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",u?"below":"above")}At(){if(!pn())return;const n=this.shadowRoot,t=n.querySelector(".dropdown-options"),e=n.querySelector(".dropdown-options-wrapper");t&&e&&(this.Dt(),t.classList.add("ty-custom-scroll"),this.Tt=new bn(t,{vertical:!0}),this.Tt.trackY&&e.appendChild(this.Tt.trackY))}Dt(){this.Tt&&(this.Tt.trackY?.remove(),this.Tt.destroy(),this.Tt=null)}openDropdown(){const n=this.shadowRoot,t=n.querySelector(".dropdown-dialog");if(!t)return;const e=`multiselect-${this.id||"anon"}-${zt(this)}`;this.bt=e,Wn(e),t.showModal(),t.classList.add("open"),this.calculatePosition(),this.ft.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.ft.filteredTags=r,this.ft.highlightedIndex=-1,this.updateOptionsVisibility(!0),this.At();const s=n.querySelector(".dropdown-search-input");s&&this.shouldShowSearch()&&setTimeout(()=>s.focus(),100),this.fireOpenEvent()}closeDropdown(){const n=this.shadowRoot,t=n.querySelector(".dropdown-dialog");if(!t)return;this.Dt(),t.classList.remove("open"),t.classList.remove("position-above"),t.classList.remove("position-below"),t.close(),this.bt&&(_n(this.bt),this.bt=null),this.ft.open=!1,this.ft.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.ft.search;this.ft.search="";const r=n.querySelector(".dropdown-search-input");if(r&&(r.value=""),this.dt)i&&(null!==this.Et&&(clearTimeout(this.Et),this.Et=null),this.fireSearchEvent(""));else{const n=this.getTagElements().map(n=>this.getTagData(n));this.ft.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"}-${zt(this)}`;this.bt=e,Wn(e),t.showModal(),t.classList.add("open"),this.ft.open=!0;const o=this.getTagElements().map(n=>this.getTagData(n));this.ft.filteredTags=o;const i=n.querySelector(".mobile-search-input");i&&this.shouldShowSearch()&&setTimeout(()=>i.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.bt&&(_n(this.bt),this.bt=null),this.ft.open=!1,this.ft.highlightedIndex=-1;const e=""!==this.ft.search;this.ft.search="";const o=n.querySelector(".mobile-search-input");o&&(o.value=""),this.dt?e&&(null!==this.Et&&(clearTimeout(this.Et),this.Et=null),this.fireSearchEvent("")):this.getTagElements().forEach(n=>n.removeAttribute("hidden")),this.fireCloseEvent()}handleStubClick(n){n.preventDefault(),n.stopPropagation(),this.P||this.lt||this.openDropdown()}handleTagClick(n){const t=n.target.closest("ty-option, ty-tag");if(!t||t.hasAttribute("disabled"))return;n.preventDefault(),n.stopPropagation();const e=this.getTagData(t).value,o=this.getSelectedValues();if(!this.ot)return this.updateComponentValue([e],!0,"set",e),void("mobile"===this.ft.mode?this.closeMobileModal():this.closeDropdown());if(t.hasAttribute("selected")){const n=o.filter(n=>n!==e);this.updateComponentValue(n,!0,"remove",e)}else this.updateComponentValue([...o,e],!0,"add",e)}blockSearchClick(n){n.stopPropagation(),n.preventDefault()}handleSearchInput(n){const t=n.target.value;if(this.ft.search=t,this.dt)return void this.dispatchSearchEvent(t);const e=this.getTagElements().map(n=>this.getTagData(n)),o=this.filterTags(e,t);this.ft.filteredTags=o,this.ft.highlightedIndex=-1,this.updateTagVisibility(o,e),this.updateOptionsVisibility(o.length>0),this.updateMobileSelectedState(),this.clearHighlights(e)}handleKeyboard(n){if(!this.ft.open)return;const t=this.shadowRoot.querySelector(".dropdown-search-input");if(n.target!==t&&document.activeElement===t)return;const e=this.ft.filteredTags,o=e.length,i=this.ft.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.ft.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.ft.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.Et&&(clearTimeout(this.Et),this.Et=null),this.St>0?this.Et=window.setTimeout(()=>{this.fireSearchEvent(n),this.Et=null},this.St):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.ft.mode,element:this},bubbles:!0,composed:!0})),this.dt&&this.fireSearchEvent("")}fireCloseEvent(){this.dispatchEvent(new CustomEvent("close",{detail:{mode:this.ft.mode,element:this},bubbles:!0,composed:!0}))}dispatchChangeEvent(n){this.dispatchEvent(new CustomEvent("change",{detail:n,bubbles:!0,cancelable:!0}))}render(){this.ft.mode=q()?"mobile":"desktop","mobile"===this.ft.mode?this.renderMobile():this.renderDesktop(),this.updateSearchVisibility(),this.applyLoadingState()}setupTriggerSlot(){const n=this.shadowRoot,t=n.querySelector(".multiselect-stub"),e=n.querySelector('slot[name="trigger"]');if(!t||!e)return;const o=()=>t.classList.toggle("custom-trigger",e.assignedElements().length>0);e.addEventListener("slotchange",o),o()}setupEventListeners(){const n=this.shadowRoot,t=n.querySelector(".multiselect-stub"),e=n.querySelector("#options-slot"),o=n.querySelector(".dropdown-search-input");t&&(this.wt=this.handleStubClick.bind(this),t.addEventListener("click",this.wt)),this.setupTriggerSlot(),e&&(this.xt=this.handleTagClick.bind(this),e.addEventListener("click",this.xt)),o&&(this.kt=this.handleSearchInput.bind(this),this.zt=this.blockSearchClick.bind(this),o.addEventListener("input",this.kt),o.addEventListener("click",this.zt));const i=n.querySelector(".dropdown-dialog");i&&i.addEventListener("click",n=>{n.target===i&&this.closeDropdown()}),this.Ct=this.handleKeyboard.bind(this),document.addEventListener("keydown",this.Ct)}buildStubClasses(){const n=[this.gt];return this.P&&n.push("disabled"),this.it&&n.push("compact"),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.st?`\n <label class="ty-field-label">\n ${this.st}\n ${this.ct?`<span class="required-icon">${Ct}</span>`:""}\n </label>\n `:""}\n <div class="dropdown-wrapper">\n <div class="dropdown-stub multiselect-stub ${t}"\n ${this.P?"disabled":""}>\n <slot name="trigger">\n <slot name="start"></slot>\n <slot name="selected"></slot>\n <span class="dropdown-placeholder">${this.rt}</span>\n <span class="select-count" hidden></span>\n <slot name="end"></slot>\n <div class="dropdown-chevron">\n ${St}\n </div>\n </slot>\n </div>\n <dialog class="dropdown-dialog">\n <div class="dropdown-header">\n <div class="dropdown-search-icon" aria-hidden="true">\n ${Et}\n </div>\n <input\n class="dropdown-search-input ${this.gt}"\n type="text"\n placeholder="Search..."\n ${this.P?"disabled":""}\n />\n <div class="dropdown-search-chevron">\n ${St}\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.st?`\n <label class="ty-field-label">\n ${this.st}\n ${this.ct?`<span class="required-icon">${Ct}</span>`:""}\n </label>\n `:""}\n <div class="dropdown-wrapper">\n <div class="dropdown-stub multiselect-stub ${t}"\n ${this.P?"disabled":""}>\n <slot name="trigger">\n <slot name="start"></slot>\n <slot name="selected"></slot>\n <span class="dropdown-placeholder">${this.rt}</span>\n <span class="select-count" hidden></span>\n <slot name="end"></slot>\n <div class="dropdown-chevron">\n ${St}\n </div>\n </slot>\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.st?`<span class="mobile-header-label">${this.st}</span>`:""}\n <div class="mobile-header-content">\n <div class="dropdown-search-icon" aria-hidden="true">\n ${Et}\n </div>\n <input\n class="mobile-search-input ${this.gt}"\n type="text"\n placeholder="${this.st?`Search ${this.st}...`:"Search..."}"\n ${this.P?"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: options list with toggleable selected state --\x3e\n <div class="mobile-body">\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.vt}</span>\n </div>\n <div class="section-content dropdown-options-wrapper">\n <slot id="options-slot"></slot>\n <div class="empty-state">${this.yt}</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)),this.setupTriggerSlot(),e&&e.addEventListener("click",n=>this.handleMobileTagClick(n)),o&&o.addEventListener("input",n=>this.handleSearchInput(n)),i&&i.addEventListener("click",()=>this.closeMobileModal()),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.P||this.lt||this.openMobileModal()}handleMobileTagClick(n){this.handleTagClick(n)}updateMobileSelectedState(){if("mobile"!==this.ft.mode)return;const n=this.shadowRoot,t=n.querySelector(".mobile-available-section");if(t){const e=this.getTagElements().filter(n=>!n.hasAttribute("hidden")).length;t.setAttribute("data-empty",(0===e)+"");const o=n.querySelector(".mobile-available-section .section-title");o&&(o.textContent=`${this.vt} (${e})`)}}shouldShowSearch(){return!!this.dt||"always"===this.ht||"never"!==this.ht&&this.getTagElements().length>7}updateSearchVisibility(){const n=this.shadowRoot;if(!n)return;const t=this.shouldShowSearch(),e=n.querySelector(".dropdown-header");e&&(e.hidden=!t);const o=n.querySelector(".mobile-search-input");o&&(o.hidden=!t);const i=n.querySelector(".mobile-header-content .dropdown-search-icon");i&&(i.hidden=!t)}updateSelectionDisplay(){const n=this.shadowRoot.querySelector(".multiselect-stub");if(!n)return;const t=this.ft.selectedValues,e=t.length;n.classList.toggle("has-selection",e>0),n.classList.toggle("compact",this.it);const o=n.querySelector(".select-count");o&&(o.textContent=e+"",o.hidden=0===e||!this.ot||!this.it);const i=!this.ot&&e>0?t[0]:null;this.syncSelectedClone(i),n.classList.toggle("has-clone",null!==i);const r=n.querySelector(".dropdown-placeholder");r&&(r.hidden=null!==i,e>0&&this.ot&&!this.it?(r.textContent=this.getSelectedItems(t).map(n=>n.label).join(", "),r.classList.remove("placeholder-shown")):(r.textContent=this.rt,r.classList.add("placeholder-shown")))}syncSelectedClone(n){const t=this.querySelector(':scope > [cloned][slot="selected"]');if(t?.getAttribute("value")===n)return void(this.It=t);if(t?.remove(),null===n)return void(this.It=null);const e=this.getTagElements().find(t=>this.getTagData(t).value===n);if(e){const n=e.cloneNode(!0);n.removeAttribute("selected"),n.setAttribute("slot","selected"),n.setAttribute("cloned","true"),this.appendChild(n),this.It=n}else if(this.It?.getAttribute("value")===n){const n=this.It.cloneNode(!0);this.appendChild(n),this.It=n}}deselectValue(n){const t=this.getSelectedValues();t.includes(n)&&this.updateComponentValue(t.filter(t=>t!==n),!0,"remove",n)}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 multiple(){return this.getProperty("multiple")}set multiple(n){this.setProperty("multiple",n)}get compact(){return this.getProperty("compact")}set compact(n){this.setProperty("compact",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 searchable(){return this.getProperty("searchable")}set searchable(n){this.setProperty("searchable",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 form(){return this.m.form}};Tt.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:""},multiple:{type:"boolean",visual:!0,default:!1},compact:{type:"boolean",visual:!0,default:!1},placeholder:{type:"string",visual:!0,default:"Select..."},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}},searchable:{type:"string",visual:!0,default:"auto",coerce:n=>!0===n||""===n||"true"===n?"always":!1===n||"false"===n?"never":"auto"},size:{type:"string",visual:!0,default:"md",validate:n=>["sm","md","lg"].includes(n),coerce:n=>["sm","md","lg"].includes(n)?n:"md"},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))}},"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 Mt=Tt;function It(n,t){return n.replace(/\{([\w-]+)\}/g,(n,e)=>t[e]??n)}customElements.get("ty-select")||customElements.define("ty-select",Mt);class TySelectedTags extends HTMLElement{constructor(){super(...arguments),this.$t=null,this.Lt=()=>this.renderChips(),this.Mt=null,this.Nt=null,this.Ot=null}static get observedAttributes(){return["for"]}connectedCallback(){this.style.display||(this.style.display="contents"),this.bind(),this.renderChips(),this.Mt=new MutationObserver(()=>{this.template()!==this.Ot&&this.renderChips()}),this.Mt.observe(this,{childList:!0})}disconnectedCallback(){this.unbind(),this.Mt?.disconnect(),this.Mt=null}attributeChangedCallback(){this.isConnected&&(this.bind(),this.renderChips())}resolvePicker(){const n=this.getAttribute("for");return(n?document.getElementById(n):this.previousElementSibling)??null}bind(){const n=this.resolvePicker();n!==this.$t&&(this.unbind(),this.$t=n,this.$t?.addEventListener("change",this.Lt),this.$t&&(this.Nt=new MutationObserver(()=>this.renderChips()),this.Nt.observe(this.$t,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["selected"]})))}unbind(){this.$t?.removeEventListener("change",this.Lt),this.Nt?.disconnect(),this.Nt=null,this.$t=null}values(){return(this.$t?.value??"").split(",").map(n=>n.trim()).filter(Boolean)}template(){return this.querySelector(":scope > template")}context(n){const t=this.$t?.querySelector(`[value="${CSS.escape(n)}"]`),e={value:n,label:t?.getAttribute("label")||t?.textContent?.trim()||n,flavor:t?.getAttribute("flavor")??""};if(t)for(const o of Array.from(t.attributes))o.name.startsWith("data-")&&(e[o.name]=o.value);return e}templateSource(n){if(n.content.firstElementChild)return n.content;const t=document.createDocumentFragment();return n.childNodes.forEach(n=>t.appendChild(n.cloneNode(!0))),t}stampTemplate(n,t){const e=this.context(t),o=this.templateSource(n).cloneNode(!0),i=document.createTreeWalker(o,NodeFilter.SHOW_ELEMENT|NodeFilter.SHOW_TEXT);for(let r=i.nextNode();r;r=i.nextNode())if(r.nodeType===Node.TEXT_NODE)r.textContent?.includes("{")&&(r.textContent=It(r.textContent,e));else{const n=r;for(const t of Array.from(n.attributes)){if(!t.value.includes("{"))continue;const o=It(t.value,e);!/^\{[\w-]+\}$/.test(t.value)||""!==o&&o!==t.value?n.setAttribute(t.name,o):n.removeAttribute(t.name)}}for(const r of Array.from(o.children))r.addEventListener("dismiss",n=>{n.stopPropagation(),this.deselect(t)});return o}defaultChip(n){const t=this.context(n),e=document.createElement("ty-tag");return e.setAttribute("value",n),e.setAttribute("dismissible","true"),t.flavor&&e.setAttribute("flavor",t.flavor),e.textContent=t.label,e.addEventListener("dismiss",()=>this.deselect(n)),e}renderChips(){const n=this.template();if(this.Ot=n,!this.$t)return void this.replaceChildren(...n?[n]:[]);const t=document.createDocumentFragment();n&&t.appendChild(n);for(const e of this.values())t.appendChild(n?this.stampTemplate(n,e):this.defaultChip(e));this.replaceChildren(t)}deselect(n){if(!this.$t)return;const t=this.$t;"function"==typeof t.deselectValue?t.deselectValue(n):(t.value=this.values().filter(t=>t!==n).join(","),this.renderChips())}}customElements.get("ty-selected-tags")||customElements.define("ty-selected-tags",TySelectedTags);const Dt=new WeakMap,At=new WeakMap;function $t(n){return{width:n.getAttribute("width")||"100%",height:n.getAttribute("height")||"400px",active:n.getAttribute("active"),placement:n.getAttribute("placement")||"top"}}function Lt(n){return Array.from(n.querySelectorAll("ty-tab"))}function Nt(n){return n.getAttribute("id")}function Ot(n,t){const e=Nt(t);return e&&function(n,t){return null!==n.querySelector(`[slot='label-${t}']`)}(n,e)?"slot":"text"}function Rt(n){return n.hasAttribute("disabled")}function Pt(n,t){const e=n.findIndex(n=>Nt(n)===t);return 0>e?void 0:e}function qt(n,t){const e=n.getAttribute("active");return e&&void 0!==Pt(t,e)?e:t.length>0?Nt(t[0]):null}function Vt(n){const t=Dt.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 Bt(n,t,e){Vt(n);const o={tabClickHandlers:new Map};e.forEach(e=>{const i=Nt(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)}}),Dt.set(n,o)}function Ft(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 Ht(n,t,e){Lt(n).forEach(o=>{const i=Nt(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){Lt(n).forEach(n=>{const e=Nt(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 Wt(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);if(!i)return;const r=!o.style.left||0===o.offsetWidth;r&&(o.style.transition="none"),o.style.left=i.left+"px",o.style.top=i.top+"px",o.style.width=i.width+"px",o.style.height=i.height+"px",r&&(o.style.transition="")}function _t(n){const t=n.shadowRoot;if(!t)return;const{width:e,height:o,placement:i}=$t(n),s=Lt(n),a=qt(n,s),l=a?Pt(s,a)??0:0,c=t.querySelector(".tabs-container"),d=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+""),c&&d&&h){c.setAttribute("data-placement",i),d.querySelectorAll(".tab-button").forEach(n=>n.remove());const e=function(n,t,e){return t.map(t=>{const o=Nt(t);if(!o)return"";const i=Ot(n,t),r="text"===i?t.getAttribute("label")||"Tab":"",s=Rt(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=>{d.appendChild(n)}),Bt(n,t,s),Ht(n,t,a||""),requestAnimationFrame(()=>{const e=t.querySelector(".tab-buttons");e&&n.style.setProperty("--buttons-height",e.offsetHeight+"px"),Ft(n,l),a&&Wt(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=Nt(t);if(!o)return"";const i=Ot(n,t),r="text"===i?t.getAttribute("label")||"Tab":"",s=Rt(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"),Ft(n,l),a&&Wt(n,a)}),Bt(n,t,s),Ht(n,t,a||""),function(n){const t=At.get(n);t&&t.disconnect();const{width:e}=$t(n);if(e.includes("%")){const t=new ResizeObserver(t=>{const e=t[0].contentRect.width,o=Lt(n),i=qt(n,o),r=i?Pt(o,i):0;n.style.setProperty("--tabs-width",e+"px"),void 0!==r&&Ft(n,r),i&&Wt(n,i)});t.observe(n),At.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(){_t(this)}disconnectedCallback(){Vt(this),function(n){const t=At.get(n);t&&(t.disconnect(),At.delete(n))}(this)}attributeChangedCallback(n,t,e){"active"===n?(e&&function(n,t,e){const o=Lt(n),i=n.shadowRoot;if(!i)return;const r=e?Pt(o,e):void 0,s=Pt(o,t);if(e===t||void 0===s)return;n.style.setProperty("--active-index",s+""),Ft(n,s),Ht(n,i,t),jt(n,t),Wt(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),_t(this)):_t(this)}}customElements.get("ty-tabs")||customElements.define("ty-tabs",TyTabs);const Yt=`\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${gn}\n`;class TyTab extends HTMLElement{constructor(){super(),this.Jn=null,this.attachShadow({mode:"open"})}static get observedAttributes(){return["id","label","disabled"]}connectedCallback(){this.Rt()}disconnectedCallback(){this.Qn()}attributeChangedCallback(n,t,e){this.Rt()}Rt(){const n=this.shadowRoot;if(!n)return;const t=this.getAttribute("id");n.querySelector(".tab-wrapper")||(r(n,{css:Yt,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.nt())}nt(){const n=this.shadowRoot?.querySelector(".tab-panel"),t=this.shadowRoot?.querySelector(".tab-wrapper");n&&t&&pn()&&(n.classList.add("ty-custom-scroll"),this.Jn=new bn(n,{vertical:!0}),this.Jn.trackY&&t.appendChild(this.Jn.trackY))}Qn(){this.Jn&&(this.Jn.trackY?.remove(),this.Jn.destroy(),this.Jn=null)}resetScroll(){this.Jn?.scrollToTop(!1)}}customElements.get("ty-tab")||customElements.define("ty-tab",TyTab);const Ut=new WeakMap,Gt=new WeakMap;function Xt(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 Kt(n){return Array.from(n.querySelectorAll("ty-step"))}function Zt(n){return n.getAttribute("id")}function Jt(n){const t=n.getAttribute("completed")||"";return t.trim()?new Set(t.split(",").map(n=>n.trim()).filter(Boolean)):new Set}function Qt(n,t){const e=n.findIndex(n=>Zt(n)===t);return 0>e?void 0:e}function ne(n,t){const e=n.getAttribute("active");return e&&void 0!==Qt(t,e)?e:t.length>0?Zt(t[0]):null}function te(n,t){return n.length>1&&t?n.findIndex(n=>Zt(n)===t)/(n.length-1)*100:0}function ee(n){const t=Ut.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 oe(n,t,e){ee(n);const o={stepClickHandlers:new Map};e.forEach(e=>{const i=Zt(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=Kt(n),i=o.findIndex(n=>Zt(n)===t);if(0>i)return;const r=ne(n,o),s=r?Qt(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)}}),Ut.set(n,o)}function ie(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 re(n){const t=n.shadowRoot;if(!t)return;const e=t.querySelector(".progress-overlay");if(!e)return;const o=Kt(n),i=ne(n,o);Jt(n);const r=te(o,i);e.style.width=r+"%"}function se(n,t,e){const o=Kt(n),i=Jt(n);e&&o.findIndex(n=>Zt(n)===e),o.forEach(o=>{const r=Zt(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=le(o,r,e,i);a.setAttribute("data-state",n)}const c=n.querySelector(`[slot='indicator-${r}']`);c&&c.setAttribute("data-active",l+"")})}function ae(n,t){Kt(n).forEach(n=>{const e=Zt(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 le(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 ce(n,t,e,o){e&&t.findIndex(n=>Zt(n)===e);const i=t.map((t,i)=>{const r=Zt(t);if(!r)return"";const s=t.getAttribute("label")||"Step "+(i+1),a=t.getAttribute("description")||"",l=function(n){return n.hasAttribute("disabled")}(t),c=r===e,d=function(n,t){return null!==n.querySelector(`[slot='indicator-${t}']`)}(n,r),h=le(t,r,e,o);let u="";return u=d?`<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="${c}"\n tabindex="${c?"0":"-1"}"\n data-active="${c}"\n ${l?'disabled aria-disabled="true"':""}\n >\n <div class="step-circle" data-state="${h}" part="step-circle">\n ${u}\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=te(t,e);return`\n <div class="step-indicators-wrapper" part="indicators-wrapper">\n <div class="step-indicators" style="--ty-wizard-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 de(n){const t=n.shadowRoot;if(!t)return;const{width:e,height:o}=Xt(n),i=Kt(n),s=ne(n,i),a=s?Qt(i,s)??0:0,l=Jt(n),c=t.querySelector(".wizard-container"),d=t.querySelector(".step-indicators-wrapper"),h=t.querySelector(".panels-viewport");if(r(t,{css:'\n/* ============================================================================\n Theming Tokens — see file header for the override surface.\n Every default chains back to the brand layer / global scale tokens.\n ============================================================================ */\n\n:host {\n display: block;\n width: var(--ty-wizard-width, 100%); /* set by width attribute — not a public token */\n height: var(--ty-wizard-height, 700px); /* set by height attribute — not a public token */\n box-sizing: border-box;\n\n /* State accents — the primary override surface. One variable retints the\n * matching circle background, border, and glow. */\n --ty-wizard-active-accent: var(--ty-color-primary);\n --ty-wizard-completed-accent: var(--ty-color-success);\n --ty-wizard-error-accent: var(--ty-color-danger);\n --ty-wizard-pending-accent: var(--ty-color-neutral);\n\n /* Container chrome — routes through global scales. Override --ty-radius-lg\n * or --ty-shadow-md app-wide and the wizard follows; override these locally\n * to give the wizard a distinct look. */\n --ty-wizard-bg: var(--ty-surface-floating);\n --ty-wizard-border: var(--ty-border);\n --ty-wizard-radius: var(--ty-radius-lg, 12px);\n --ty-wizard-shadow: var(--ty-shadow-md, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1));\n\n /* Header strip */\n --ty-wizard-header-bg: var(--ty-surface-content);\n --ty-wizard-header-border: var(--ty-border-soft, var(--ty-border));\n --ty-wizard-header-padding: 24px 24px 16px;\n\n /* Progress line */\n --ty-wizard-progress-track: var(--ty-border);\n --ty-wizard-progress-fill: var(--ty-wizard-completed-accent);\n --ty-wizard-progress-height: 2px;\n\n /* Motion — routes through global motion tokens if defined. */\n --ty-wizard-transition-duration: var(--ty-transition-duration, 300ms);\n --ty-wizard-transition-easing: var(--ty-transition-easing, ease-in-out);\n\n /* Circle geometry */\n --ty-wizard-circle-size: 32px;\n --ty-wizard-circle-border-width: 2px;\n\n /* Panels viewport */\n --ty-wizard-panels-bg: var(--ty-surface-elevated);\n\n /* Focus */\n --ty-wizard-focus-outline: var(--ty-wizard-active-accent);\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: var(--ty-wizard-radius);\n border: 1px solid var(--ty-wizard-border);\n background: var(--ty-wizard-bg);\n box-shadow: var(--ty-wizard-shadow);\n overflow: hidden;\n}\n\n/* ===================================== */\n/* Step Indicators Wrapper */\n/* ===================================== */\n\n.step-indicators-wrapper {\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n position: relative;\n padding: var(--ty-wizard-header-padding);\n border-bottom: 1px solid var(--ty-wizard-header-border);\n background: var(--ty-wizard-header-bg);\n}\n\n/* ===================================== */\n/* Progress Line (behind step circles) */\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 sit at 50%/N from the left edge of each indicator.\n * Inset = 50% / step-count from each side keeps the line between circle centres.\n */\n left: calc(50% / var(--ty-wizard-step-count, 4));\n right: calc(50% / var(--ty-wizard-step-count, 4));\n top: calc(var(--ty-wizard-circle-size, 32px) / 2 - 1px);\n height: var(--ty-wizard-progress-height);\n background: var(--ty-wizard-progress-track);\n z-index: 0;\n pointer-events: none;\n transition: opacity var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing);\n}\n\n.progress-overlay {\n position: absolute;\n left: 0;\n top: 0;\n height: 100%;\n background: var(--ty-wizard-progress-fill);\n transition: width var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing);\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}\n\n/* ===================================== */\n/* Individual Step Indicator */\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 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-wizard-focus-outline);\n outline-offset: 4px;\n border-radius: 50%;\n}\n\n/* ===================================== */\n/* Step Circle */\n/* ===================================== */\n\n.step-circle {\n width: var(--ty-wizard-circle-size);\n height: var(--ty-wizard-circle-size);\n border-radius: 50%;\n border: var(--ty-wizard-circle-border-width) solid;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n z-index: 10;\n transition: all var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing);\n box-sizing: border-box;\n flex-shrink: 0;\n}\n\n.step-circle[data-state="completed"] {\n background: var(--ty-wizard-completed-accent);\n border-color: var(--ty-color-success-strong);\n color: var(--ty-solid-success-fg, white);\n box-shadow: 0 0 0 4px color-mix(in oklab, var(--ty-wizard-completed-accent) 12%, transparent);\n}\n\n.step-circle[data-state="active"] {\n background: var(--ty-wizard-active-accent);\n border-color: var(--ty-color-primary-strong);\n color: var(--ty-solid-primary-fg, white);\n box-shadow: 0 0 0 4px color-mix(in oklab, var(--ty-wizard-active-accent) 12%, transparent);\n}\n\n.step-circle[data-state="pending"] {\n background: var(--ty-surface-elevated);\n border-color: var(--ty-border);\n color: var(--ty-color-neutral);\n}\n\n.step-circle[data-state="error"] {\n background: var(--ty-wizard-error-accent);\n border-color: var(--ty-color-danger-strong);\n color: var(--ty-solid-danger-fg, white);\n box-shadow: 0 0 0 4px color-mix(in oklab, var(--ty-wizard-error-accent) 12%, transparent);\n}\n\n/* ===================================== */\n/* Step Text Container */\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 */\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-color-neutral);\n transition: color 200ms;\n}\n\n.step-indicator[aria-selected="true"] .step-label {\n color: var(--ty-color-neutral-strong);\n}\n\n.step-indicator[aria-selected="false"] .step-label {\n color: var(--ty-color-neutral);\n}\n\n/* ===================================== */\n/* Step Description */\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-color-neutral);\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-color-neutral-bold);\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/* ===================================== */\n\n.panels-viewport {\n position: relative;\n flex: 1;\n overflow: hidden;\n min-height: 0;\n background: var(--ty-wizard-panels-bg);\n}\n\n/* ===================================== */\n/* Panels Wrapper (slides horizontally) */\n/* ===================================== */\n\n.panels-wrapper {\n display: flex;\n height: 100%;\n transition: transform var(--ty-wizard-transition-duration) var(--ty-wizard-transition-easing);\n will-change: transform;\n}\n\n/* ===================================== */\n/* Slotted Step Panels */\n/* ===================================== */\n\n::slotted(ty-step) {\n width: var(--ty-wizard-width, 100%);\n height: 100%;\n flex-shrink: 0;\n}\n\n/* ===================================== */\n/* Accessibility & Motion Preferences */\n/* ===================================== */\n\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.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("--ty-wizard-width",e.includes("%")?"100%":e),n.style.setProperty("--ty-wizard-height",o),n.style.setProperty("--ty-wizard-active-index",a+""),n.style.setProperty("--ty-wizard-step-count",i.length+""),c&&d&&h){d.remove();const e=ce(n,i,s,l),o=document.createElement("div");o.innerHTML=e,c.insertBefore(o.firstElementChild,h),oe(n,t,i),se(n,t,s||""),requestAnimationFrame(()=>{const e=t.querySelector(".step-indicators-wrapper");e&&n.style.setProperty("--ty-wizard-indicators-height",e.offsetHeight+"px"),ie(n,a),re(n)}),s&&ae(n,s)}else t.innerHTML=`\n <div class="wizard-container">\n ${ce(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("--ty-wizard-indicators-height",e.offsetHeight+"px"),ie(n,a),re(n)}),oe(n,t,i),se(n,t,s||""),function(n){const t=Gt.get(n);t&&t.disconnect();const{width:e}=Xt(n);if(e.includes("%")){const t=new ResizeObserver(t=>{const e=t[0].contentRect.width,o=Kt(n),i=ne(n,o),r=i?Qt(o,i):0;n.style.setProperty("--ty-wizard-width",e+"px"),void 0!==r&&ie(n,r)});t.observe(n),Gt.set(n,t)}}(n),s&&ae(n,s)}class TyWizard extends HTMLElement{static get observedAttributes(){return["width","height","active","completed","orientation"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){de(this)}disconnectedCallback(){ee(this),function(n){const t=Gt.get(n);t&&(t.disconnect(),Gt.delete(n))}(this)}attributeChangedCallback(n,t,e){"active"===n?(e&&function(n,t){const e=Kt(n),o=n.shadowRoot;if(!o)return;const i=ne(n,e),r=i?Qt(e,i):void 0,s=Qt(e,t);if(i===t||void 0===s)return;n.style.setProperty("--ty-wizard-active-index",s+""),ie(n,s),se(n,o,t),re(n),ae(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),de(this)):de(this)}}customElements.get("ty-wizard")||customElements.define("ty-wizard",TyWizard);const he=`\n:host {\n width: var(--ty-wizard-width, 100%);\n height: calc(var(--ty-wizard-height, 700px) - var(--ty-wizard-indicators-height, 120px));\n display: block;\n box-sizing: border-box;\n flex-shrink: 0;\n transition: opacity var(--ty-wizard-transition-duration, 400ms) var(--ty-wizard-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${gn}\n`;class TyStep extends HTMLElement{constructor(){super(),this.Jn=null,this.attachShadow({mode:"open"})}static get observedAttributes(){return["id","label","description","disabled","status"]}connectedCallback(){this.Rt()}disconnectedCallback(){this.Qn()}attributeChangedCallback(n,t,e){this.Rt()}Rt(){const n=this.shadowRoot;if(!n)return;const t=this.getAttribute("id");n.querySelector(".step-wrapper")||(r(n,{css:he,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.nt())}nt(){const n=this.shadowRoot?.querySelector(".step-panel"),t=this.shadowRoot?.querySelector(".step-wrapper");n&&t&&pn()&&(n.classList.add("ty-custom-scroll"),this.Jn=new bn(n,{vertical:!0}),this.Jn.trackY&&t.appendChild(this.Jn.trackY))}Qn(){this.Jn&&(this.Jn.trackY?.remove(),this.Jn.destroy(),this.Jn=null)}resetScroll(){this.Jn?.scrollToTop(!1)}}function ue(n){if(!Number.isInteger(n)||1>n||n>12)throw new RangeError(`Invalid month: ${n}. Must be an integer between 1 and 12.`)}function pe(n,t,e,o){const i=n.getFullYear(),r=n.getMonth()+1,s=n.getDate(),a=n.getDay(),l=i!==t||r!==e;let c=!1,d=!1;l&&(t>i||i===t&&e>r?c=!0:d=!0);const h=(p=function(){const n=new Date;return new Date(n.getFullYear(),n.getMonth(),n.getDate(),0,0,0,0)}(),(u=n).getFullYear()===p.getFullYear()&&u.getMonth()===p.getMonth()&&u.getDate()===p.getDate());var u,p;const b=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:c,nextMonth:d,today:h,isSelected:b,selectedYear:o?.year,selectedMonth:o?.month,selectedDay:o?.day}}function be(n,t){const e=new Date(n);return e.setDate(e.getDate()+t),e}function ge(n){const t=n.match(/^(\d{4})-(\d{2})-(\d{2})$/);if(!t)return null;const e=parseInt(t[1],10),o=parseInt(t[2],10),i=parseInt(t[3],10);if(1>e||e>9999)return null;if(1>o||o>12)return null;if(1>i||i>31)return null;const r=new Date(e,o-1,i);return r.getFullYear()!==e||r.getMonth()!==o-1||r.getDate()!==i?null:{year:e,month:o,day:i}}function ve(n){return n instanceof HTMLElement}function ye(n){if(!n)return null;const t=ge(n);return t?Date.UTC(t.year,t.month-1,t.day):null}function me(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.Pt="en-US",this.gt="md";const n=new Date;this.qt=n.getFullYear(),this.Vt=n.getMonth()+1,this.attachShadow({mode:"open"})}static get observedAttributes(){return["locale","size","min","max"]}connectedCallback(){this.Vt||(this.Vt=(new Date).getMonth()+1),this.qt||(this.qt=(new Date).getFullYear()),this.Pt||(this.Pt=this.getAttribute("locale")||"en-US");const n=this.getAttribute("size");!n||"sm"!==n&&"md"!==n&&"lg"!==n||(this.gt=n);const t=this.dayContentFn;t&&!this.Bt&&(this.Bt=t,delete this.dayContentFn);const e=this.customCSS;e&&!this.Ft&&(this.Ft=e,delete this.customCSS),this.J=j(this,()=>{this.render()}),this.render()}disconnectedCallback(){this.J&&(this.J(),this.J=void 0)}attributeChangedCallback(n,t,e){"locale"===n?(this.Pt=e||"en-US",this.render()):"size"===n?"sm"!==e&&"md"!==e&&"lg"!==e||(this.gt=e,this.render()):"min"!==n&&"max"!==n||(this["min"===n?"Ht":"jt"]=e??void 0,this.render())}get displayYear(){return this.qt}set displayYear(n){this.qt!==n&&(this.qt=n,this.render())}get displayMonth(){return this.Vt}set displayMonth(n){this.Vt!==n&&(this.Vt=n,this.render())}get locale(){return H(this,this.getAttribute("locale"))}set locale(n){this.Pt!==n&&(this.Pt=n,this.render())}get size(){return this.gt}set size(n){this.gt!==n&&(this.gt=n,this.render())}get width(){return this.Wt}set width(n){this.Wt!==n&&(this.Wt=n,this.applyWidthProperties())}get minWidth(){return this._t}set minWidth(n){this._t!==n&&(this._t=n,this.applyWidthProperties())}get maxWidth(){return this.Yt}set maxWidth(n){this.Yt!==n&&(this.Yt=n,this.applyWidthProperties())}get dayContentFn(){return this.Bt}set dayContentFn(n){this.Bt!==n&&(this.Bt=n,this.render())}get customCSS(){return this.Ft}set customCSS(n){this.Ft!==n&&(this.Ft=n,this.applyCustomCSS())}get min(){return this.Ht}set min(n){this.Ht!==n&&(this.Ht=n,this.render())}get max(){return this.jt}set max(n){this.jt!==n&&(this.jt=n,this.render())}get value(){return this.O}set value(n){const t=n??void 0;this.O!==t&&(this.O=t,this.render())}applyWidthProperties(){const n=me(this.Wt),t=me(this._t),e=me(this.Yt);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.Ft||!this.shadowRoot)return;const n=this.shadowRoot.adoptedStyleSheets;n.includes(this.Ft)||(this.shadowRoot.adoptedStyleSheets=[...n,this.Ft])}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,t){const e=document.createElement("div"),o=this.Bt?this.Bt(n):function(n){return""+n.dayInMonth}(n);if(this.Bt&&o&&!ve(o)&&"string"!=typeof o)throw Error(`Custom dayContentFn must return a DOM element or string, got: ${typeof o}. Use document.createElement() to create DOM elements.`);const i=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&&i.push("disabled"),e.className=i.join(" "),"string"==typeof o?e.textContent=o:ve(o)&&e.appendChild(o),t||e.addEventListener("pointerdown",t=>{t.preventDefault(),this.dispatchDayClick(n,t)}),e}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/* Theming tokens are applied as var(--ty-calendar-*, <default>) at point\n of use (not declared on :host) so consumers can override any of them\n from outside the shadow root. The 3 accent aliases — --ty-calendar-accent,\n --ty-calendar-today-accent, --ty-calendar-muted — still cascade into the\n derived defaults, so overriding one retints the related cells. */\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: var(--ty-radius-md);\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, var(--ty-color-neutral-strong));\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, 0.375rem);\n border: 1px solid var(--ty-calendar-day-border, var(--ty-border-faint));\n background-color: var(--ty-calendar-day-bg, transparent);\n color: var(--ty-calendar-day-color, var(--ty-calendar-muted, var(--ty-color-neutral)));\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, var(--ty-color-neutral-strong));\n background-color: var(--ty-calendar-day-hover-bg, var(--ty-bg-neutral-soft));\n border-color: var(--ty-calendar-day-hover-border, var(--ty-border-bold));\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, var(--ty-bg-secondary-soft));\n color: var(--ty-calendar-today-color, var(--ty-color-secondary-strong));\n border-color: var(--ty-calendar-today-border, var(--ty-calendar-today-accent, var(--ty-color-secondary)));\n font-weight: 600;\n}\n\n/* Weekend - Subtle Color Shift */\n.calendar-day-cell.weekend {\n color: var(--ty-calendar-weekend-color, var(--ty-color-danger-soft));\n}\n\n/* Other Month - Muted */\n.calendar-day-cell.other-month {\n color: var(--ty-calendar-other-month-color, var(--ty-color-neutral-faint));\n opacity: var(--ty-calendar-other-month-opacity, 0.5);\n}\n\n.calendar-day-cell.other-month:hover { \n color: var(--ty-calendar-day-hover-color, var(--ty-color-neutral-strong));\n background-color: var(--ty-calendar-day-hover-bg, var(--ty-bg-neutral-soft));\n opacity: 0.7;\n}\n\n/* Disabled - outside min/max bounds */\n.calendar-day-cell.disabled {\n color: var(--ty-calendar-disabled-color, var(--ty-color-neutral-faint));\n opacity: var(--ty-calendar-disabled-opacity, 0.35);\n cursor: default;\n pointer-events: none;\n}\n\n/* Selected State (for custom usage) */\n.calendar-day-cell.selected {\n background-color: var(--ty-calendar-selected-bg, var(--ty-bg-primary));\n color: var(--ty-calendar-selected-color, var(--ty-color-primary-strong));\n border-color: var(--ty-calendar-selected-border, var(--ty-calendar-accent, var(--ty-color-primary)));\n font-weight: 600;\n}\n\n.calendar-day-cell.selected:hover {\n background-color: var(--ty-calendar-selected-hover-bg, var(--ty-bg-primary-bold));\n border-color: var(--ty-calendar-selected-hover-border, var(--ty-color-primary-bold));\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.O){const n=new Date(this.O);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),ue(t),function(n,t,e,o,i){const r=[];for(let s=0;42>s;s++){const t=be(n,s);r.push(pe(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.qt,this.Vt,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=be(o,t);return e.format(i)}),[r,...s]=i;return[...s,r]}(this.Pt,"short");n.innerHTML="";const i=document.createElement("div");i.className="calendar-flex-container calendar-size-"+this.gt;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));const l=ye(this.Ht),c=ye(this.jt);a.forEach(n=>{const t=document.createElement("div");t.className="calendar-row calendar-day-row",n.forEach(n=>{const e=this.renderDayCell(n,null!==l&&l>n.value||null!==c&&n.value>c);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 fe='\n/* ============================================================================\n Size Variants (CSS Custom Properties)\n ============================================================================ */\n\n/* Theming tokens applied as var(--ty-calendar-nav-*, <default>) at point of\n use (NOT on :host) so consumers can override them from outside — this\n component is nested inside ty-calendar\'s shadow, so a :host default would\n block inherited overrides. --ty-calendar-accent still cascades in. */\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: var(--ty-radius-base);\n background-color: transparent;\n color: var(--ty-calendar-nav-color, var(--ty-color-neutral));\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, var(--ty-bg-neutral-soft));\n color: var(--ty-calendar-nav-hover-color, var(--ty-color-neutral-strong));\n}\n\n.nav-btn:active {\n background-color: var(--ty-calendar-nav-active-bg, var(--ty-bg-neutral));\n transform: scale(0.95);\n}\n\n.nav-btn:disabled {\n opacity: 0.35;\n cursor: default;\n pointer-events: none;\n}\n\n.nav-btn:focus-visible {\n outline: 2px solid var(--ty-calendar-nav-focus-outline, var(--ty-calendar-accent, var(--ty-color-primary)));\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, var(--ty-color-neutral-strong));\n text-align: center;\n white-space: nowrap;\n letter-spacing: -0.01em;\n}\n',we=class n extends o{constructor(){super();const n=new Date;this.ft={displayMonth:n.getMonth()+1,displayYear:n.getFullYear()},r(this.shadowRoot,{css:fe,id:"ty-calendar-navigation"})}onConnect(){this.ft.displayMonth=this.displayMonth,this.ft.displayYear=this.displayYear,this.J=j(this,()=>{this.render()}),this.render()}onDisconnect(){this.J&&(this.J(),this.J=void 0)}onPropertiesChanged(n){for(const{name:t,newValue:e}of n)switch(t){case"display-month":this.ft.displayMonth=e;break;case"display-year":this.ft.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 H(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)}get min(){return this.getProperty("min")}set min(n){this.setProperty("min",n??"")}get max(){return this.getProperty("max")}set max(n){this.setProperty("max",n??"")}emitChangeEvent(n,t){const e=new CustomEvent("change",{detail:{month:n,year:t},bubbles:!0,cancelable:!0});this.dispatchEvent(e)}static monthIndex(n,t){return 12*n+(t-1)}boundIndices(){const t=ge(this.min),e=ge(this.max);return{minIdx:t?n.monthIndex(t.year,t.month):null,maxIdx:e?n.monthIndex(e.year,e.month):null}}clampIndex(n){const{minIdx:t,maxIdx:e}=this.boundIndices();return null!==t&&t>n?t:null!==e&&n>e?e:n}navigateBy(t){const e=n.monthIndex(this.ft.displayYear,this.ft.displayMonth),o=this.clampIndex(e+t);o!==e&&this.emitChangeEvent(o%12+1,Math.floor(o/12))}isNavDisabled(t){const e=n.monthIndex(this.ft.displayYear,this.ft.displayMonth);return this.clampIndex(e+t)===e}createButton(n,t,e,o,i=!1){const r=document.createElement("button");return r.className=n,r.title=t,r.innerHTML=e,r.disabled=i,r.addEventListener("click",o),r}render(){const n=this.shadowRoot;if(!n)return;r(n,{css:fe,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"){ue(n);const o=new Date(2024,n-1,1);return new Intl.DateTimeFormat(t,{month:e}).format(o)}(this.ft.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.navigateBy(-12),this.isNavDisabled(-12))),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.navigateBy(-1),this.isNavDisabled(-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.ft.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.navigateBy(1),this.isNavDisabled(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.navigateBy(12),this.isNavDisabled(12))),o.appendChild(i),o.appendChild(s),o.appendChild(l),n.appendChild(o)}};we.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:""},min:{type:"string",visual:!0,default:""},max:{type:"string",visual:!0,default:""}};let xe=we;function ke(n){return n&&/^\d{4}$/.test(n)?parseInt(n,10):null}function ze(n){if(!n||!/^\d{1,2}$/.test(n))return null;const t=parseInt(n,10);return 1>t||t>12?null:t}function Ce(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 Se(n,t,e){return`${n}-${(""+t).padStart(2,"0")}-${(""+e).padStart(2,"0")}`}customElements.get("ty-calendar-navigation")||customElements.define("ty-calendar-navigation",xe);const Ee=class extends HTMLElement{constructor(){super(),this.Pt="en-US",this.Ut=!0,this.Gt=!1,this.gt="md";const n=function(){const n=new Date;return{year:n.getFullYear(),month:n.getMonth()+1,day:n.getDate()}}();this.ft={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","min","max"]}connectedCallback(){this.initializeFromAttributes();const n=this.dayContentFn;n&&!this.Bt&&(this.Bt=n,delete this.dayContentFn);const t=this.customCSS;t&&!this.Ft&&(this.Ft=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.ft.selectedYear=t,this.ft.selectedMonth=e,this.ft.selectedDay=o,this.ft.displayYear=t,this.ft.displayMonth=e,this.Gt||(this.setAttribute("year",""+t),this.setAttribute("month",""+e),this.setAttribute("day",""+o))}delete this.value}this.render(),this.updateFormValue(),this.J=j(this,()=>{this.render()})}disconnectedCallback(){this.J&&(this.J(),this.J=void 0),this.Xt=void 0,this.Kt=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.Ut="false"!==e,this.render();break;case"stateless":this.Gt=null!==e&&"false"!==e;break;case"locale":this.Pt=e||"en-US",this.syncChildComponents();break;case"size":"sm"!==e&&"md"!==e&&"lg"!==e||(this.gt=e,this.Wt=void 0,this.removeAttribute("width"),this.syncChildComponents());break;case"width":this.Wt=e||void 0,e&&(this.gt="md",this.removeAttribute("size")),this.syncChildComponents();break;case"name":this.updateFormValue();break;case"min":case"max":this["min"===n?"Ht":"jt"]=e||void 0,this.syncChildComponents(),this.updateValidity()}}get min(){return this.Ht}set min(n){n?this.setAttribute("min",n):this.removeAttribute("min")}get max(){return this.jt}set max(n){n?this.setAttribute("max",n):this.removeAttribute("max")}get year(){return this.ft.selectedYear}set year(n){void 0!==n?this.Gt?(this.ft.displayYear=n,this.setAttribute("year",""+n)):(this.ft.selectedYear=n,this.ft.displayYear=n,this.setAttribute("year",""+n)):(this.Gt||delete this.ft.selectedYear,this.removeAttribute("year")),this.syncChildComponents(),this.Gt||this.updateFormValue()}get month(){return this.ft.selectedMonth}set month(n){void 0!==n?this.Gt?(this.ft.displayMonth=n,this.setAttribute("month",""+n)):(this.ft.selectedMonth=n,this.ft.displayMonth=n,this.setAttribute("month",""+n)):(this.Gt||delete this.ft.selectedMonth,this.removeAttribute("month")),this.syncChildComponents(),this.Gt||this.updateFormValue()}get day(){return this.ft.selectedDay}set day(n){void 0!==n?(this.ft.selectedDay=n,this.setAttribute("day",""+n)):(delete this.ft.selectedDay,this.removeAttribute("day")),this.syncChildComponents(),this.updateFormValue()}get locale(){return H(this,this.getAttribute("locale"))}set locale(n){this.Pt=n,this.setAttribute("locale",n)}get showNavigation(){return this.Ut}set showNavigation(n){this.Ut=n,this.setAttribute("show-navigation",""+n)}get stateless(){return this.Gt}set stateless(n){this.Gt=n,n?this.setAttribute("stateless",""):this.removeAttribute("stateless")}get size(){return this.gt}set size(n){this.gt!==n&&(this.gt=n,this.Wt=void 0,this.removeAttribute("width"),this.setAttribute("size",n),this.syncChildComponents())}get width(){return this.Wt}set width(n){this.Wt!==n&&(this.Wt=n,n?(this.gt="md",this.removeAttribute("size"),this.setAttribute("width",n)):this.removeAttribute("width"),this.syncChildComponents())}get dayContentFn(){return this.Bt}set dayContentFn(n){this.Bt=n,this.syncChildComponents()}get customCSS(){return this.Ft}set customCSS(n){this.Ft=n,this.syncChildComponents()}get value(){const{selectedYear:n,selectedMonth:t,selectedDay:e}=this.ft;return n&&t&&e?Se(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.ft.selectedYear=n,this.ft.selectedMonth=e,this.ft.selectedDay=o,this.ft.displayYear=n,this.ft.displayMonth=e,this.Gt||(this.setAttribute("year",""+n),this.setAttribute("month",""+e),this.setAttribute("day",""+o))}}else delete this.ft.selectedYear,delete this.ft.selectedMonth,delete this.ft.selectedDay,this.Gt||(this.removeAttribute("year"),this.removeAttribute("month"),this.removeAttribute("day"));this.syncChildComponents(),this.Gt||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");this.Ht=this.getAttribute("min")||void 0,this.jt=this.getAttribute("max")||void 0;const l=ke(n);l&&(this.ft.displayYear=l);const c=ze(t);if(c&&(this.ft.displayMonth=c),l&&c){const n=Ce(e,l,c);n&&(this.ft.selectedYear=l,this.ft.selectedMonth=c,this.ft.selectedDay=n)}o&&(this.Pt=o),i&&(this.Ut="false"!==i),null!==r&&(this.Gt="false"!==r),!s||"sm"!==s&&"md"!==s&&"lg"!==s||(this.gt=s),a&&(this.Wt=a)}syncStateFromAttributes(){const n=this.getAttribute("year"),t=this.getAttribute("month"),e=this.getAttribute("day"),o=ke(n),i=ze(t);if(o&&(this.ft.displayYear=o),i&&(this.ft.displayMonth=i),o&&i){const n=Ce(e,o,i);n?(this.ft.selectedYear=o,this.ft.selectedMonth=i,this.ft.selectedDay=n):(delete this.ft.selectedYear,delete this.ft.selectedMonth,delete this.ft.selectedDay)}else delete this.ft.selectedYear,delete this.ft.selectedMonth,delete this.ft.selectedDay}syncChildComponents(){if(this.Xt&&(this.Xt.displayMonth=this.ft.displayMonth,this.Xt.displayYear=this.ft.displayYear,this.Xt.locale=this.locale,this.Xt.size=this.gt,this.Xt.min=this.Ht??"",this.Xt.max=this.jt??"",this.Xt.width=this.Wt),this.Kt){this.Kt.displayMonth=this.ft.displayMonth,this.Kt.displayYear=this.ft.displayYear,this.Kt.locale=this.locale,this.Kt.size=this.gt,this.Kt.min=this.Ht,this.Kt.max=this.jt,this.Kt.width=this.Wt,this.Bt&&(this.Kt.dayContentFn=this.Bt),this.Ft&&(this.Kt.customCSS=this.Ft);const{selectedYear:n,selectedMonth:t,selectedDay:e}=this.ft;this.Kt.value=n&&t&&e?new Date(n,t-1,e).getTime():null}}updateFormValue(){if(this.Gt)return;if(!this.m)return;const n=this.getAttribute("name"),{selectedYear:t,selectedMonth:e,selectedDay:o}=this.ft;if(n&&t&&e&&o){const n=Se(t,e,o);this.m.setFormValue(n)}else this.m.setFormValue("");this.updateValidity()}updateValidity(){if(!this.m)return;const{selectedYear:n,selectedMonth:t,selectedDay:e}=this.ft;if(n&&t&&e){const o=Date.UTC(n,t-1,e),i=this.Ht?ge(this.Ht):null,r=this.jt?ge(this.jt):null;if(i&&o<Date.UTC(i.year,i.month-1,i.day))return void this.m.setValidity({rangeUnderflow:!0},`Date must be ${this.Ht} or later`);if(r&&o>Date.UTC(r.year,r.month-1,r.day))return void this.m.setValidity({rangeOverflow:!0},`Date must be ${this.jt} or earlier`)}this.m.setValidity({})}handleNavigationChange(n){n.preventDefault(),n.stopPropagation();const{month:t,year:e}=n.detail;this.ft.displayMonth=t,this.ft.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.Gt?this.dispatchEvent(new CustomEvent("day-click",{detail:n.detail,bubbles:!0,composed:!0,cancelable:!0})):(this.ft.selectedYear=e,this.ft.selectedMonth=o,this.ft.selectedDay=i,this.ft.displayYear=e,this.ft.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.Kt&&"function"==typeof this.Kt.refresh&&this.Kt.refresh()}createNavigation(){const n=document.createElement("ty-calendar-navigation");return n.displayMonth=this.ft.displayMonth,n.displayYear=this.ft.displayYear,n.locale=this.locale,n.size=this.gt,n.min=this.Ht??"",n.max=this.jt??"",this.Wt&&(n.width=this.Wt),n.addEventListener("change",n=>this.handleNavigationChange(n)),this.Xt=n,n}createMonthDisplay(){const n=document.createElement("ty-calendar-month");n.displayMonth=this.ft.displayMonth,n.displayYear=this.ft.displayYear,n.locale=this.locale,n.size=this.gt,n.min=this.Ht,n.max=this.jt,this.Wt&&(n.width=this.Wt);const{selectedYear:t,selectedMonth:e,selectedDay:o}=this.ft;return t&&e&&o&&(n.value=new Date(t,e-1,o).getTime()),this.Bt&&(n.dayContentFn=this.Bt),this.Ft&&(n.customCSS=this.Ft),n.addEventListener("day-click",n=>this.handleDayClick(n)),this.Kt=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.Ut){const n=this.createNavigation();t.appendChild(n)}const e=this.createMonthDisplay();t.appendChild(e),n.appendChild(t)}};Ee.formAssociated=!0;let Te=Ee;customElements.get("ty-calendar")||customElements.define("ty-calendar",Te);const Me='\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: var(--ty-shadow-lg, 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.ty-field-label {\n font-size: var(--ty-font-sm);\n line-height: var(--ty-leading-sm);\n letter-spacing: var(--ty-tracking-sm);\n font-weight: var(--ty-font-medium);\n color: var(--ty-label-color);\n margin-bottom: 6px;\n padding-left: 12px;\n display: flex;\n align-items: center;\n}\n\n.required-icon {\n display: inline-flex;\n align-items: center;\n color: #ef4444;\n width: 12px;\n height: 12px;\n vertical-align: middle;\n margin-left: 4px;\n}\n\n.dropdown-wrapper {\n position: relative;\n display: block;\n width: 100%;\n}\n\n/* Start-slot icon (leading content inside the date-picker stub) */\n.date-picker-stub ::slotted([slot="start"]) {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin-right: 0.5rem;\n color: var(--ty-color-text-soft);\n}\n\n.date-picker-stub ::slotted(ty-icon[slot="start"]) {\n width: 1em;\n height: 1em;\n}\n\n/* Date picker stub (styled like dropdown) */\n.date-picker-stub {\n width: 100%;\n cursor: pointer;\n box-sizing: border-box;\n position: relative;\n display: flex;\n align-items: center;\n background: var(--ty-date-picker-bg);\n color: var(--ty-date-picker-color);\n border: 1px solid var(--ty-date-picker-border);\n border-radius: var(--ty-date-picker-radius);\n font-family: var(--ty-font-sans);\n font-size: var(--ty-font-sm);\n font-weight: var(--ty-font-normal);\n line-height: var(--ty-line-height-tight);\n min-height: var(--ty-size-md);\n padding: var(--ty-spacing-2) var(--ty-spacing-3);\n padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n transition: var(--ty-transition-all), opacity 0.2s ease;\n outline: none;\n}\n\n.date-picker-stub:hover:not([disabled]):not(.open) {\n border-color: var(--ty-date-picker-border-hover);\n}\n\n.date-picker-stub[disabled] {\n background-color: var(--ty-date-picker-disabled-bg);\n color: var(--ty-date-picker-disabled-color);\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n.date-picker-stub:focus,\n.date-picker-stub.open {\n border-color: var(--ty-date-picker-border-focus);\n box-shadow: 0 0 0 3px var(--ty-date-picker-shadow-focus);\n}\n\n/* Size variants */\n.date-picker-stub.xs {\n min-height: var(--ty-size-xs);\n font-size: var(--ty-font-xs);\n padding: var(--ty-spacing-1) var(--ty-spacing-2);\n padding-right: calc(var(--ty-spacing-2) + 0.875rem + var(--ty-spacing-1));\n}\n\n.date-picker-stub.sm {\n min-height: var(--ty-size-sm);\n font-size: var(--ty-font-xs);\n padding: var(--ty-spacing-1) var(--ty-spacing-2);\n padding-right: calc(var(--ty-spacing-2) + 0.875rem + var(--ty-spacing-1));\n}\n\n.date-picker-stub.lg {\n min-height: var(--ty-size-lg);\n font-size: var(--ty-font-base);\n padding: var(--ty-spacing-2) var(--ty-spacing-4);\n padding-right: calc(var(--ty-spacing-4) + 1.125rem + var(--ty-spacing-2));\n}\n\n.date-picker-stub.xl {\n min-height: var(--ty-size-xl);\n font-size: var(--ty-font-lg);\n padding: var(--ty-spacing-3) var(--ty-spacing-4);\n padding-right: calc(var(--ty-spacing-4) + 1.25rem + var(--ty-spacing-3));\n}\n\n/* Flavor variants */\n/* Primary - Main brand focus state */\n.date-picker-stub.primary {\n border-color: var(--ty-input-primary-border, var(--ty-color-primary));\n}\n\n.date-picker-stub.primary:hover:not([disabled]) {\n border-color: var(--ty-color-primary-bold);\n}\n\n.date-picker-stub.primary:focus,\n.date-picker-stub.primary.open {\n border-color: var(--ty-color-primary-bold);\n box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-primary) 15%, transparent);\n}\n\n/* Secondary - 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-bold);\n}\n\n.date-picker-stub.secondary:focus,\n.date-picker-stub.secondary.open {\n border-color: var(--ty-color-secondary-bold);\n box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-secondary) 15%, transparent);\n}\n\n/* Success - 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-bold);\n}\n\n.date-picker-stub.success:focus,\n.date-picker-stub.success.open {\n border-color: var(--ty-color-success-bold);\n box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-success) 15%, transparent);\n}\n\n/* Danger - 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-bold);\n}\n\n.date-picker-stub.danger:focus,\n.date-picker-stub.danger.open {\n border-color: var(--ty-color-danger-bold);\n box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-danger) 15%, transparent);\n}\n\n/* Warning - 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-bold);\n}\n\n.date-picker-stub.warning:focus,\n.date-picker-stub.warning.open {\n border-color: var(--ty-color-warning-bold);\n box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-warning) 15%, transparent);\n}\n\n/* 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',Ie="<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>",De="<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 Ae(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 $e(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 Le(n){if(!n.year||!n.month||!n.day)return null;const t=$e(n);return t?t.toISOString():null}function Ne(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 Oe(n,t){return`${(""+n).padStart(2,"0")}:${(""+t).padStart(2,"0")}`}function Re(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 Pe{constructor(n,t,e=0,o=0){this.element=n,this.datePickerElement=t;const i=Oe(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=Re(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=Re(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:Oe(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=Oe(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 qe=class extends o{constructor(){super(),this.ft={withTime:!1,open:!1},this.Zt=0,r(this.shadowRoot,{css:Me,id:"ty-date-picker"})}onConnect(){this.initializeState(),this.render(),this.J=j(this,()=>{this.render()})}onDisconnect(){this.J&&(this.J(),this.J=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=Ae(e,this.ft.withTime);if(null===n){(void 0!==this.ft.year||void 0!==this.ft.month||void 0!==this.ft.day)&&(this.ft={withTime:this.ft.withTime,open:this.ft.open});break}const t={year:this.ft.year,month:this.ft.month,day:this.ft.day,hour:this.ft.hour,minute:this.ft.minute};(n?.year!==t.year||n?.month!==t.month||n?.day!==t.day||n?.hour!==t.hour||n?.minute!==t.minute)&&(this.ft={...this.ft,...n});break}case"with-time":e!==this.ft.withTime&&(this.ft.withTime=e,void 0!==this.ft.year&&void 0!==this.ft.month&&void 0!==this.ft.day&&this.syncFormValue())}}getFormValue(){return Le(this.getComponents())}getComponents(){return{year:this.ft.year,month:this.ft.month,day:this.ft.day,hour:this.ft.hour,minute:this.ft.minute}}hasDate(){return!!(this.ft.year&&this.ft.month&&this.ft.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=$e(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",H(this,this.getProperty("locale")),this.ft.withTime):null}initializeState(){const n=this.getProperty("value"),t=this.getProperty("with-time"),e=Ae(n,t);this.ft=null===e?{withTime:t,open:!1}:{...e,withTime:t,open:!1},this.syncFormValue()}updateState(n,t=!1){this.ft={...this.ft,...n},(t||!this.ft.open||!this.ft.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?Le(n):null,o=n?Ne(n,this.ft.withTime):null,i=n?$e(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 min(){return this.getProperty("min")}set min(n){this.setProperty("min",n??"")}get max(){return this.getProperty("max")}set max(n){this.setProperty("max",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.ft.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=De,n.addEventListener("click",n=>this.handleClearClick(n)),s.appendChild(n)}const a=document.createElement("span");return a.className="stub-arrow",a.innerHTML=Ie,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.Jt=new Pe(e,this,this.ft.hour||0,this.ft.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.ft.year&&this.ft.month&&this.ft.day&&(e.setAttribute("year",""+this.ft.year),e.setAttribute("month",""+this.ft.month),e.setAttribute("day",""+this.ft.day));const o=H(this,this.getProperty("locale"));o&&e.setAttribute("locale",o);const i=this.getProperty("min"),r=this.getProperty("max");return i&&e.setAttribute("min",i),r&&e.setAttribute("max",r),e.addEventListener("change",n=>this.handleCalendarChange(n)),t.appendChild(e),this.ft.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.ft.withTime?"datetime-local":"date",e&&(o.disabled=!0),this.getProperty("required")&&(o.required=!0);const i=this.getProperty("min"),r=this.getProperty("max");i&&(o.min=this.ft.withTime?i+"T00:00":i),r&&(o.max=this.ft.withTime?r+"T23:59":r);const s=Ne(this.getComponents(),this.ft.withTime);s&&(o.value=s);const a=this.getProperty("placeholder")||"Select date...",l=this.getFormattedValue(),c=document.createElement("span");c.className="stub-text"+(l?"":" placeholder"),c.textContent=l||a,o.addEventListener("change",()=>{if(!o.value)return void this.clearValue();const n=Ae(o.value,this.ft.withTime);n&&(this.updateState(n,!0),this.emitChangeEvent(n,"selection"))});const d=document.createElement("slot");d.name="start",t.appendChild(d),t.appendChild(o),t.appendChild(c);const h=document.createElement("div");if(h.className="stub-icons",this.getProperty("clearable")&&s&&!e){const n=document.createElement("button");n.className="stub-clear",n.type="button",n.innerHTML=De,n.addEventListener("click",n=>this.handleClearClick(n)),h.appendChild(n)}const u=document.createElement("span");return u.className="stub-arrow",u.innerHTML=Ie,h.appendChild(u),t.appendChild(h),n.appendChild(t),n}calculateCalendarPosition(){if(!this.shadowRoot)return;if(q())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="ty-field-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:Me,id:"ty-date-picker"}),q()){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.ft.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"),q()){const n=this.shadowRoot.querySelector(".native-date-input");if(n){const t=Ne(this.getComponents(),this.ft.withTime);n.value=t||""}return}const a=this.shadowRoot.querySelector("ty-calendar");a&&e&&(a.setAttribute("year",""+this.ft.year),a.setAttribute("month",""+this.ft.month),a.setAttribute("day",""+this.ft.day)),this.Jt&&void 0!==this.ft.hour&&void 0!==this.ft.minute&&this.Jt.setTime(this.ft.hour,this.ft.minute)}setupEventListeners(){this.Qt&&document.removeEventListener("click",this.Qt),this.ne&&document.removeEventListener("keydown",this.ne),this.Qt=n=>this.handleOutsideClick(n),this.ne=n=>this.handleEscapeKey(n),document.addEventListener("click",this.Qt),document.addEventListener("keydown",this.ne);const n=this.shadowRoot?.querySelector(".calendar-dialog");n&&(this.te=n=>this.handleDialogClick(n),n.addEventListener("click",this.te))}handleStubClick(n){n.preventDefault(),!this.getProperty("disabled")&&Date.now()-this.Zt>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.ft.hour,minute:this.ft.minute};this.updateState(e,!0),this.emitChangeEvent(e,"selection"),this.ft.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.ft.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.ft.open&&e&&!this.contains(t)&&!e.contains(t)&&this.closeDropdown()}handleEscapeKey(n){"Escape"===n.key&&this.ft.open&&(n.preventDefault(),this.closeDropdown())}openDropdown(){this.ft.open||q()||(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){Wn("date-picker-"+(this.id||""+this)),n.showModal(),this.calculateCalendarPosition(),n.classList.add("open");const t=this.shadowRoot.activeElement;t&&t.blur()}}))}closeDropdown(){if(!this.ft.open)return;this.Zt=Date.now();const n="date-picker-"+(this.id||""+this);if(this.updateState({open:!1},!0),_n(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.Qt&&document.removeEventListener("click",this.Qt),this.ne&&document.removeEventListener("keydown",this.ne),this.te&&this.shadowRoot){const n=this.shadowRoot.querySelector(".calendar-dialog");n&&n.removeEventListener("click",this.te)}this.ft.open&&_n("date-picker-"+(this.id||""+this)),this.Qt=void 0,this.ne=void 0,this.te=void 0,this.Jt=void 0}};qe.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:""},min:{type:"string",visual:!0,default:""},max:{type:"string",visual:!0,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}},qe.formAssociated=!0;let Ve=qe;customElements.get("ty-date-picker")||customElements.define("ty-date-picker",Ve);const Be=new Map,Fe=new Map;function He(n){return Be.get(n)}function je(n,t){Fe.has(n)||Fe.set(n,new Set),Fe.get(n).add(t);const e=Be.get(n);return e&&t(e),()=>{Fe.get(n)?.delete(t),0===Fe.get(n)?.size&&Fe.delete(n)}}function We(){return Object.fromEntries(Be)}class TyResizeObserver extends HTMLElement{constructor(){super(),this.zn=null,this.ee=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.zn=new ResizeObserver(n=>{this.debounce>0?(this.ee&&clearTimeout(this.ee),this.ee=window.setTimeout(()=>{this.handleResize(n)},this.debounce)):this.handleResize(n)}),this.zn.observe(this)}handleResize(n){const{width:t,height:e}=n[0].contentRect;this.id&&function(n,t,e){Be.set(n,{width:t,height:e});const o=Fe.get(n);if(o){const n={width:t,height:e};o.forEach(t=>t(n))}}(this.id,t,e)}cleanup(){var n;this.zn&&(this.zn.disconnect(),this.zn=null),this.ee&&(clearTimeout(this.ee),this.ee=null),this.id&&(Be.delete(n=this.id),Fe.delete(n))}}customElements.define("ty-resize-observer",TyResizeObserver);const _e=`\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/* scroll-anchoring: we manage scroll position in JS, so turn off the browser's\n native scroll anchoring to avoid double-compensation. */\n:host([scroll-anchoring]) .scroll-wrapper {\n overflow-anchor: 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 color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),\n transparent,\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 color-mix(in oklab, var(--ty-color-neutral-bold) 18%, transparent),\n transparent,\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 color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),\n transparent,\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 color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),\n transparent,\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, color-mix(in oklab, var(--ty-color-neutral-bold) 25%, transparent)) 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, color-mix(in oklab, var(--ty-color-neutral-bold) 25%, transparent));\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${gn}\n`;class TyScrollContainer extends HTMLElement{constructor(){super(),this.oe=null,this.ie=null,this.re=null,this.se=null,this.ae=null,this.Jn=null,this.zn=null,this.le=null,this.xn=null,this.ce=!1,this.de=!1,this.Mn=()=>{null===this.xn&&(this.xn=requestAnimationFrame(()=>{this.xn=null,this.he()}))},this.ue=()=>{this.Jn?.update(),this.he()};const n=this.attachShadow({mode:"open"});r(n,{css:_e,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.oe=n.querySelector(".scroll-wrapper"),this.ie=n.querySelector(".shadow-top"),this.re=n.querySelector(".shadow-bottom"),this.se=n.querySelector(".shadow-left"),this.ae=n.querySelector(".shadow-right")}static get observedAttributes(){return["shadow","max-height","hide-scrollbar","custom-scrollbar","overflow-x","scroll-anchoring"]}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.pe()}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")}get nearEdgeThreshold(){const n=parseInt(this.getAttribute("near-edge-threshold")||"",10);return Number.isFinite(n)?n:100}set nearEdgeThreshold(n){null==n?this.removeAttribute("near-edge-threshold"):this.setAttribute("near-edge-threshold",n+"")}get scrollAnchoring(){return this.hasAttribute("scroll-anchoring")}set scrollAnchoring(n){n?this.setAttribute("scroll-anchoring",""):this.removeAttribute("scroll-anchoring")}connectedCallback(){if(this.oe?.addEventListener("scroll",this.Mn,{passive:!0}),this.zn=new ResizeObserver(()=>{this.Jn?.update(),this.he()}),this.oe){this.zn.observe(this.oe);const n=this.oe.querySelector("slot");n&&n.addEventListener("slotchange",this.ue)}this.pe(),this.he(),this.nt(),this.be()}disconnectedCallback(){this.oe?.removeEventListener("scroll",this.Mn),this.Qn(),this.ge(),this.zn&&(this.zn.disconnect(),this.zn=null),null!==this.xn&&(cancelAnimationFrame(this.xn),this.xn=null)}attributeChangedCallback(n,t,e){t!==e&&("max-height"===n&&(this.pe(),this.he(),this.Jn?.update()),"custom-scrollbar"!==n&&"overflow-x"!==n||(this.Qn(),this.nt(),this.he()),"scroll-anchoring"===n&&(this.ge(),this.be()))}be(){!this.le&&this.scrollAnchoring&&(this.le=new MutationObserver(n=>{const t=this.oe;if(!t)return;const e=t.getBoundingClientRect().top;let o=0;for(const i of n)i.addedNodes.forEach(n=>{if(n.nodeType!==Node.ELEMENT_NODE)return;const t=n.getBoundingClientRect();t.bottom>e?e>t.top&&(o+=e-t.top):o+=t.height});o>0&&(t.scrollTop+=o,this.Jn?.update())}),this.le.observe(this,{childList:!0}))}ge(){this.le?.disconnect(),this.le=null}nt(){if(this.Jn)return;if(!this.oe||!this.customScrollbar)return;this.Jn=new bn(this.oe,{vertical:!0,horizontal:this.overflowX});const n=this.shadowRoot;this.Jn.trackY&&n.appendChild(this.Jn.trackY),this.Jn.trackX&&n.appendChild(this.Jn.trackX)}Qn(){this.Jn&&(this.Jn.trackY?.remove(),this.Jn.trackX?.remove(),this.Jn.destroy(),this.Jn=null)}pe(){if(this.oe){const n=this.maxHeight;n?(this.oe.style.setProperty("--scroll-max-height",n),this.oe.style.maxHeight=n):(this.oe.style.removeProperty("--scroll-max-height"),this.oe.style.maxHeight="")}}he(){if(!this.oe)return;const{scrollTop:n,scrollLeft:t,scrollHeight:e,scrollWidth:o,clientHeight:i,clientWidth:r}=this.oe;this.ie&&this.ie.classList.toggle("visible",n>2),this.re&&this.re.classList.toggle("visible",e-2>n+i),this.overflowX&&(this.se&&this.se.classList.toggle("visible",t>2),this.ae&&this.ae.classList.toggle("visible",o-2>t+r));const s=e-i;if(s>0){const t=this.nearEdgeThreshold,o=s-n;this.de=this.ve("nearend",o,t,this.de,{distance:o,scrollTop:n,scrollHeight:e,clientHeight:i}),this.ce=this.ve("nearstart",n,t,this.ce,{distance:n,scrollTop:n,scrollHeight:e,clientHeight:i})}else this.ce=!1,this.de=!1}ve(n,t,e,o,i){return e>=t&&(o||this.dispatchEvent(new CustomEvent(n,{detail:i,bubbles:!0,composed:!0})),!0)}updateShadows(){this.he(),this.Jn?.update()}scrollToTop(n=!0){this.oe?.scrollTo({top:0,behavior:n?"smooth":"auto"})}scrollToBottom(n=!0){this.oe&&this.oe.scrollTo({top:this.oe.scrollHeight,behavior:n?"smooth":"auto"})}scrollToLeft(n=!0){this.oe?.scrollTo({left:0,behavior:n?"smooth":"auto"})}scrollToRight(n=!0){this.oe&&this.oe.scrollTo({left:this.oe.scrollWidth,behavior:n?"smooth":"auto"})}scrollToElement(n,t=!0){const e="string"==typeof n?this.querySelector(n):n;e?.scrollIntoView({behavior:t?"smooth":"auto",block:"nearest"})}get scrollElement(){return this.oe}}customElements.define("ty-scroll-container",TyScrollContainer),"undefined"!=typeof window&&(window.tyVersion=u,window.tyIcons={register:n=>{k(n)},get:n=>z(n),has:n=>C(n),list:()=>I(),cacheInfo:()=>D(),clearCache:()=>S()},window.tyResizeObserver={getSize:n=>He(n),onResize:(n,t)=>je(n,t),get sizes(){return We()}},window.tyLoader={set:n=>a(n),get:()=>l(),reset:()=>c()}),n.IconRegistry=A,n.TyButton=h,n.TyCalendar=Te,n.TyCalendarMonth=TyCalendarMonth,n.TyCalendarNavigation=xe,n.TyCheckbox=X,n.TyCopy=cn,n.TyDatePicker=Ve,n.TyFileUpload=un,n.TyIcon=O,n.TyInput=U,n.TyModal=TyModal,n.TyOption=TyOption,n.TyPopup=TyPopup,n.TyRadio=en,n.TyRadioGroup=rn,n.TyResizeObserver=TyResizeObserver,n.TyScrollContainer=TyScrollContainer,n.TySelect=Mt,n.TySelectedTags=TySelectedTags,n.TyStep=TyStep,n.TySwitch=J,n.TyTab=TyTab,n.TyTabs=TyTabs,n.TyTag=P,n.TyTextarea=mn,n.TyTooltip=TyTooltip,n.TyWizard=TyWizard,n.disableScrollLockDebug=function(){window.tyScrollDebug=!1},n.enableScrollLockDebug=function(){window.tyScrollDebug=!0},n.forceUnlockAll=function(){Fn.activeLocks.clear(),jn()},n.getActiveLocks=function(){return new Set(Fn.activeLocks)},n.getAllSizes=We,n.getLoaderSvg=l,n.getLockState=function(){return{locked:Fn.locked,scrollY:Fn.scrollY,activeLocks:Array.from(Fn.activeLocks)}},n.getSize=He,n.isLocked=function(){return Fn.locked},n.isLockedBy=function(n){return Fn.activeLocks.has(n)},n.lockScroll=Wn,n.onResize=je,n.resetLoaderSvg=c,n.setLoaderSvg=a,n.unlockScroll=_n,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});