@studious-creative/yumekit 0.1.2 → 0.1.4

package/dist/yumekit.min.js

@@ -1 +1 @@
-var YumeKit=function(t){"use strict";class e extends HTMLElement{static get observedAttributes(){return["left-icon","right-icon","color","size","style-type","type","disabled","name","value","autofocus","form","formaction","formenctype","formmethod","formnovalidate","formtarget","aria-label","aria-pressed","aria-hidden"]}constructor(){super(),this.attachShadow({mode:"open"}),this.init()}connectedCallback(){this.hasAttribute("size")||this.setAttribute("size","medium"),this.init()}attributeChangedCallback(t,n,o){n!==o&&e.observedAttributes.includes(t)&&(null===o?this.button.removeAttribute(t):this.button.setAttribute(t,o)),this.init(),["color","size","style-type","disabled"].includes(t)&&this.updateStyles()}get value(){return this.hasAttribute("multiple")?Array.from(this.selectedValues).join(","):this.selectedValues.size?Array.from(this.selectedValues)[0]:""}set value(t){this.hasAttribute("multiple")?"string"==typeof t?this.selectedValues=new Set(t.split(",").map(t=>t.trim())):Array.isArray(t)&&(this.selectedValues=new Set(t)):this.selectedValues="string"==typeof t?new Set([t.trim()]):new Set,this.setAttribute("value",t)}setOptions(t){this.setAttribute("options",JSON.stringify(t))}handleClick(){const t={},e=this.getAttribute("data-event");!this.hasAttribute("disabled")&&e&&(Array.from(this.attributes).filter(t=>t.name.startsWith("data-detail-")).forEach(e=>{const n=e.name.replace("data-detail-","");t[n]=e.value}),this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0})))}init(){this.applyStyles(),this.render(),this.proxyNativeOnClick(),this.addEventListeners()}proxyNativeOnClick(){try{Object.defineProperty(this,"onclick",{get:()=>this.button.onclick,set:t=>{this.button.onclick=t},configurable:!0,enumerable:!0})}catch(t){console.warn("Could not redefine onclick:",t)}}updateButtonAttributes(){e.observedAttributes.forEach(t=>{this.hasAttribute(t)?this.button.setAttribute(t,this.getAttribute(t)):this.button.removeAttribute(t)})}manageSlotVisibility(t,e){const n=t?this.shadowRoot.querySelector(`slot[name="${t}"]`):this.shadowRoot.querySelector("slot:not([name])"),o=this.shadowRoot.querySelector(e),i=()=>{const t=n.assignedNodes({flatten:!0}).some(t=>!(t.nodeType===Node.TEXT_NODE&&""===t.textContent.trim()));o.style.display=t?"inline-flex":"none"};i(),n.addEventListener("slotchange",i)}render(){this.button||(this.button=document.createElement("button"),this.button.classList.add("button"),this.button.setAttribute("role","button"),this.button.setAttribute("tabindex","0"),this.button.setAttribute("part","button"),this.shadowRoot.appendChild(this.button)),this.updateButtonAttributes(),this.hasAttribute("disabled")?(this.button.setAttribute("disabled",""),this.button.setAttribute("aria-disabled","true")):(this.button.removeAttribute("disabled"),this.button.setAttribute("aria-disabled","false")),this.button.innerHTML='\n          <span class="icon left-icon" part="left-icon"><slot name="left-icon"></slot></span>\n          <span class="label" part="label"><slot></slot></span>\n          <span class="icon right-icon" part="right-icon"><slot name="right-icon"></slot></span>\n      ',this.manageSlotVisibility("left-icon",".left-icon"),this.manageSlotVisibility("right-icon",".right-icon"),this.manageSlotVisibility("",".label")}applyStyles(){const t=document.createElement("style");t.textContent='\n        :host {\n          display: inline-block;\n        }\n\n        @font-face {\n            font-family: "Lexend";\n            font-display: swap;\n        }\n\n        .button {\n            box-sizing: border-box;\n            display: inline-flex;\n            min-height: var(--button-min-height, var(--sizing-medium, 40px));\n            min-width: var(--button-min-width, var(--sizing-medium, 40px));\n            padding: var(--button-padding, var(--component-button-padding-medium));\n            gap: var(--button-gap, var(--component-button-padding-medium));\n            justify-content: center;\n            align-items: center;\n            position: relative;\n            overflow: hidden;\n            border-radius: var(--component-button-border-radius-outer, 4px);\n            border: var(--component-button-border-width, 1px) solid var(--border-color, var(--base-content--, #1D1D1D));\n            background: var(--background-color, #F1F6FA);\n            transition: background-color 0.1s, color 0.1s, border-color 0.1s;\n            cursor: pointer;\n            color: var(--text-color);\n            font-family: var(--font-family-body, Lexend, sans-serif);\n            font-size: var(--font-size-button, 1em);\n            line-height: 1;\n        }\n\n        .button:disabled {\n            opacity: 0.5;\n            cursor: not-allowed;\n        }\n\n        .button:hover:not(:disabled),\n        .button:hover:not(:disabled) .button-content {\n            background: var(--hover-background-color);\n            color: var(--hover-text-color);\n            border-color: var(--hover-border-color);\n        }\n        .button:focus:not(:disabled),\n        .button:focus:not(:disabled) .button-content {\n            background: var(--focus-background-color);\n            color: var(--focus-text-color);\n            border-color: var(--focus-border-color);\n        }\n        .button:active:not(:disabled),\n        .button:active:not(:disabled) .button-content {\n            background: var(--active-background-color);\n            color: var(--active-text-color);\n            border-color: var(--active-border-color);\n        }\n        .icon {\n            display: flex;\n            min-width: 16px;\n            min-height: 1em;\n            justify-content: center;\n            align-items: center;\n        }\n        .label {\n            line-height: inherit;\n            min-height: 1em;\n            align-items: center;\n        }\n      ',this.shadowRoot.appendChild(t)}addEventListeners(){this.button.addEventListener("focus",()=>{this.dispatchEvent(new CustomEvent("focus",{bubbles:!0,composed:!0}))}),this.button.addEventListener("blur",()=>{this.dispatchEvent(new CustomEvent("blur",{bubbles:!0,composed:!0}))}),this.button.addEventListener("keydown",t=>{this.dispatchEvent(new CustomEvent("keydown",{detail:{key:t.key,code:t.code},bubbles:!0,composed:!0}))}),this.button.addEventListener("keyup",t=>{this.dispatchEvent(new CustomEvent("keyup",{detail:{key:t.key,code:t.code},bubbles:!0,composed:!0}))}),this.button.addEventListener("click",t=>{if(this.handleClick(),"submit"===this.getAttribute("type")){const e=this.closest("form");e&&(t.preventDefault(),e.requestSubmit())}})}updateStyles(){const t=this.getAttribute("color")||"base",e=this.getAttribute("size")||"medium",n=this.getAttribute("style-type")||"outlined",o={primary:["--primary-content--","--primary-content-hover","--primary-content-active","--primary-background-component","--primary-background-hover","--primary-background-active"],secondary:["--secondary-content--","--secondary-content-hover","--secondary-content-active","--secondary-background-component","--secondary-background-hover","--secondary-background-active"],base:["--base-content--","--base-content-lighter","--base-content-lightest","--base-background-component","--base-background-hover","--base-background-active"],success:["--success-content--","--success-content-hover","--success-content-active","--success-background-component","--success-background-hover","--success-background-active"],error:["--error-content--","--error-content-hover","--error-content-active","--error-background-component","--error-background-hover","--error-background-active"],warning:["--warning-content--","--warning-content-hover","--warning-content-active","--warning-background-component","--warning-background-hover","--warning-background-active"],help:["--help-content--","--help-content-hover","--help-content-active","--help-background-component","--help-background-hover","--help-background-active"]},i={small:["--component-button-padding-small","--component-button-padding-small"],medium:["--component-button-padding-medium","--component-button-padding-medium"],large:["--component-button-padding-large","--component-button-padding-large"]},r={outlined:{"--background-color":`var(${o[t][3]}, rgba(241,246,250,1))`,"--border-color":`var(${o[t][0]}, rgba(29,29,29,1))`,"--text-color":`var(${o[t][0]}, rgba(29,29,29,1))`},filled:{"--background-color":`var(${o[t][0]}, rgba(29,29,29,1))`,"--border-color":`var(${o[t][0]}, rgba(29,29,29,1))`,"--text-color":`var(${o[t][3]}, rgba(241,246,250,1))`},flat:{"--background-color":`var(${o[t][3]},rgba(241,246,250,1))`,"--border-color":`var(${o[t][3]},rgba(241,246,250,1))`,"--text-color":`var(${o[t][0]},rgba(29,29,29,1))`}},s=r[n]||r.outlined;if(Object.entries(s).forEach(([t,e])=>{this.button.style.setProperty(t,e)}),"filled"===n)this.button.style.setProperty("--hover-background-color",`var(${o[t][1]}, rgba(215,219,222,1))`),this.button.style.setProperty("--hover-text-color",`var(${o[t][3]}, rgba(241,246,250,1))`),this.button.style.setProperty("--hover-border-color",`var(${o[t][1]}, rgba(215,219,222,1))`),this.button.style.setProperty("--focus-background-color",`var(${o[t][2]}, rgba(188,192,195,1))`),this.button.style.setProperty("--focus-text-color",`var(${o[t][3]}, rgba(241,246,250,1))`),this.button.style.setProperty("--focus-border-color",`var(${o[t][2]}, rgba(188,192,195,1))`),this.button.style.setProperty("--active-background-color",`var(${o[t][0]}, rgba(29,29,29,1))`),this.button.style.setProperty("--active-text-color",`var(${o[t][3]}, rgba(241,246,250,1))`),this.button.style.setProperty("--active-border-color",`var(${o[t][0]}, rgba(29,29,29,1))`);else{const e=`var(${o[t][0]}, rgba(29,29,29,1))`;this.button.style.setProperty("--hover-background-color",`var(${o[t][4]}, rgba(215,219,222,1))`),this.button.style.setProperty("--hover-text-color",`var(${o[t][0]}, rgba(29,29,29,1))`),this.button.style.setProperty("--focus-background-color",`var(${o[t][5]}, rgba(188,192,195,1))`),this.button.style.setProperty("--focus-text-color",`var(${o[t][0]}, rgba(29,29,29,1))`),this.button.style.setProperty("--active-background-color",`var(${o[t][0]}, rgba(29,29,29,1))`),this.button.style.setProperty("--active-text-color",`var(${o[t][3]}, rgba(241,246,250,1))`),"outlined"===n?(this.button.style.setProperty("--hover-border-color",e),this.button.style.setProperty("--focus-border-color",e),this.button.style.setProperty("--active-border-color",e)):(this.button.style.setProperty("--hover-border-color",`var(${o[t][4]}, rgba(215,219,222,1))`),this.button.style.setProperty("--focus-border-color",`var(${o[t][5]}, rgba(188,192,195,1))`),this.button.style.setProperty("--active-border-color",`var(${o[t][0]}, rgba(29,29,29,1))`))}const[a,l]=i[e]||i.medium;this.button.style.setProperty("--button-padding",`var(${l}, var(--component-button-padding-medium))`),this.button.style.setProperty("--button-gap",`var(${a}, var(--component-button-padding-medium))`);const d={small:"var(--sizing-small, 32px)",medium:"var(--sizing-medium, 40px)",large:"var(--sizing-large, 56px)"};this.button.style.setProperty("--button-min-height",d[e]||"40px"),this.button.style.setProperty("--button-min-width",d[e]||"40px")}}customElements.get("y-button")||customElements.define("y-button",e);class n extends HTMLElement{static get observedAttributes(){return["items","anchor","visible","direction","size"]}constructor(){super(),this.attachShadow({mode:"open"}),this._onAnchorClick=this._onAnchorClick.bind(this),this._onDocumentClick=this._onDocumentClick.bind(this),this._onScrollOrResize=this._onScrollOrResize.bind(this)}connectedCallback(){this.hasAttribute("items")||(this.items=[]),this._setupAnchor(),this.render(),document.addEventListener("click",this._onDocumentClick),window.addEventListener("scroll",this._onScrollOrResize,!0),window.addEventListener("resize",this._onScrollOrResize),this.style.position="fixed",this.style.zIndex="1000",this.style.display="none"}disconnectedCallback(){this._teardownAnchor(),document.removeEventListener("click",this._onDocumentClick),window.removeEventListener("scroll",this._onScrollOrResize,!0),window.removeEventListener("resize",this._onScrollOrResize)}attributeChangedCallback(t,e,n){e!==n&&("items"!==t&&"size"!==t||this.render(),"anchor"===t&&(this._teardownAnchor(),this._setupAnchor()),"visible"===t&&this._updatePosition(),"direction"===t&&this._updatePosition())}get items(){try{return JSON.parse(this.getAttribute("items"))||[]}catch{return[]}}set items(t){this.setAttribute("items",JSON.stringify(t))}get anchor(){return this.getAttribute("anchor")}set anchor(t){this.setAttribute("anchor",t)}get visible(){return this.hasAttribute("visible")}set visible(t){t?this.setAttribute("visible",""):this.removeAttribute("visible")}get direction(){return this.getAttribute("direction")||"down"}set direction(t){this.setAttribute("direction",t)}get size(){const t=this.getAttribute("size");return["small","medium","large"].includes(t)?t:"medium"}set size(t){["small","medium","large"].includes(t)?this.setAttribute("size",t):this.setAttribute("size","medium")}_createMenuList(t){const e=document.createElement("ul");return t.forEach(t=>{const n=document.createElement("li");n.className="menuitem",n.setAttribute("role","menuitem"),n.tabIndex=0;const o=document.createElement("span");if(o.className="item-content",t["icon-template"]){const e=this._findTemplate(t["icon-template"]);e&&o.appendChild(e.content.cloneNode(!0))}if(t.template){const e=this._findTemplate(t.template);e?o.appendChild(e.content.cloneNode(!0)):o.textContent=t.text}else o.textContent=t.text;if(n.appendChild(o),t.url&&n.addEventListener("click",()=>{window.location.href=t.url}),t.children?.length){const e=document.createElement("span");e.className="submenu-indicator",e.textContent="▶",n.appendChild(e);const o=this._createMenuList(t.children);o.classList.add("submenu"),o.setAttribute("role","menu"),n.appendChild(o)}e.appendChild(n)}),e}_findTemplate(t){return this.querySelector(`template[slot="${t}"]`)}_onAnchorClick(t){t.stopPropagation(),this.visible=!this.visible}_onDocumentClick(t){const e=t.composedPath();this._anchorEl&&e.includes(this._anchorEl)||e.includes(this)||(this.visible=!1)}_onScrollOrResize(){this.visible&&this._updatePosition()}_setupAnchor(){const t=this.anchor;if(t){const e=this.getRootNode(),n=e?.getElementById?e.getElementById(t):document.getElementById(t);n&&(this._anchorEl=n,this._anchorEl.addEventListener("click",this._onAnchorClick))}}_teardownAnchor(){this._anchorEl&&(this._anchorEl.removeEventListener("click",this._onAnchorClick),this._anchorEl=null)}_updatePosition(){if(!this.visible||!this._anchorEl)return void(this.style.display="none");const t=this._anchorEl.getBoundingClientRect(),e=this.getBoundingClientRect(),n=window.innerWidth,o=window.innerHeight;let i,r;"right"===this.direction?(i=t.top,r=t.right,r+e.width>n&&(r=t.left-e.width),i+e.height>o&&(i=o-e.height-10)):(i=t.bottom,r=t.left,i+e.height>o&&(i=t.top-e.height),r+e.width>n&&(r=n-e.width-10)),i=Math.max(10,Math.min(i,o-e.height-10)),r=Math.max(10,Math.min(r,n-e.width-10)),this.style.top=`${i}px`,this.style.left=`${r}px`,this.style.display="block"}render(){this.shadowRoot.innerHTML="";const t=`var(--component-button-padding-${this.size}, 0.5rem)`,e=document.createElement("style");e.textContent=`\n            ul.menu,\n            ul.submenu {\n                list-style: none;\n                margin: 0;\n                padding: 0;\n                background: var(--component-menu-background, #fff);\n                border: var(--component-menu-border-width, 1px) solid var(--component-menu-border-color, #ccc);\n                border-radius: var(--component-menu-border-radius, 4px);\n                box-shadow: var(--component-menu-shadow, 0 2px 8px rgba(0, 0, 0, 0.15));\n                min-width: 150px;\n                max-height: 300px;\n                overflow-y: auto;\n            }\n\n            li.menuitem {\n                cursor: pointer;\n                padding: ${t};\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n                white-space: nowrap;\n                color: var(--component-menu-color, #000);\n                font-size: var(--font-size-button, 1em);\n            }\n\n            li.menuitem:hover {\n                background: var(--component-menu-hover-background, #eee);\n            }\n\n            ul.submenu {\n                position: absolute;\n                top: 0;\n                left: 100%;\n                display: none;\n                z-index: 1001;\n            }\n\n            li.menuitem:hover > ul.submenu {\n                display: block;\n            }\n\n            .submenu-indicator {\n                font-size: 0.75em;\n                margin-left: 0.5rem;\n                opacity: 0.6;\n            }\n\n            .item-content {\n                flex: 1;\n            }\n        `,this.shadowRoot.appendChild(e);const n=this._createMenuList(this.items);n.classList.add("menu"),n.setAttribute("role","menu"),this.shadowRoot.appendChild(n)}}customElements.get("y-menu")||customElements.define("y-menu",n);const o='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20" aria-hidden="true"><path d="M5 7 L10 12 L15 7" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" /></svg>';class i extends HTMLElement{static get observedAttributes(){return["orientation","collapsed","items","size","menu-direction","sticky"]}constructor(){super(),this.attachShadow({mode:"open"}),this._onCollapseClick=this._onCollapseClick.bind(this),this._idCounter=0}connectedCallback(){this.render()}disconnectedCallback(){}attributeChangedCallback(t,e,n){e!==n&&this.render()}get orientation(){return this.getAttribute("orientation")||"vertical"}set orientation(t){this.setAttribute("orientation",t)}get collapsed(){return this.hasAttribute("collapsed")}set collapsed(t){t?this.setAttribute("collapsed",""):this.removeAttribute("collapsed")}get items(){try{return JSON.parse(this.getAttribute("items"))||[]}catch{return[]}}set items(t){this.setAttribute("items",JSON.stringify(t))}get size(){return this.getAttribute("size")||"medium"}set size(t){this.setAttribute("size",t)}get menuDirection(){return this.getAttribute("menu-direction")||""}set menuDirection(t){t?this.setAttribute("menu-direction",t):this.removeAttribute("menu-direction")}get sticky(){const t=this.getAttribute("sticky");return!!["start","end"].includes(t)&&t}set sticky(t){"start"===t||"end"===t?this.setAttribute("sticky",t):this.removeAttribute("sticky")}toggle(){this.collapsed=!this.collapsed}_onCollapseClick(){this.toggle()}_uid(t){return`${t}-${this._idCounter++}`}_isItemActive(t){if(t.selected)return!0;if(t.href){const e=window.location,n=e.pathname+e.search+e.hash;return t.href===n||t.href===e.href}return!1}render(){const t="vertical"===this.orientation,e=this.collapsed&&t,n=this.size,o=this.menuDirection||(t?"right":"down"),i={small:{padding:"var(--spacing-x-small, 4px)",collapsedWidth:"40px",bodyGap:"2px",buttonSize:"small"},medium:{padding:"var(--spacing-small, 6px)",collapsedWidth:"52px",bodyGap:"3px",buttonSize:"medium"},large:{padding:"var(--spacing-medium, 8px)",collapsedWidth:"64px",bodyGap:"4px",buttonSize:"large"}},r=i[n]||i.medium;this.shadowRoot.innerHTML="",this._idCounter=0;const s=document.createElement("style");s.textContent='\n            :host {\n                display: block;\n                font-family: var(--font-family-body, sans-serif);\n                color: var(--component-appbar-color, #fff);\n            }\n\n            :host([sticky]) {\n                position: sticky;\n                z-index: 100;\n            }\n            :host([orientation="vertical"][sticky="start"]),\n            :host(:not([orientation])[sticky="start"]) {\n                left: 0;\n                top: 0;\n                height: 100%;\n            }\n            :host([orientation="vertical"][sticky="end"]),\n            :host(:not([orientation])[sticky="end"]) {\n                right: 0;\n                top: 0;\n                height: 100%;\n            }\n            :host([orientation="horizontal"][sticky="start"]) {\n                top: 0;\n                left: 0;\n                width: 100%;\n            }\n            :host([orientation="horizontal"][sticky="end"]) {\n                bottom: 0;\n                left: 0;\n                width: 100%;\n            }\n\n            :host([sticky]) .appbar {\n                border-radius: 0;\n                border: none;\n            }\n            :host([orientation="vertical"][sticky="start"]) .appbar,\n            :host(:not([orientation])[sticky="start"]) .appbar {\n                border-right: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);\n            }\n            :host([orientation="vertical"][sticky="end"]) .appbar,\n            :host(:not([orientation])[sticky="end"]) .appbar {\n                border-left: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);\n            }\n            :host([orientation="horizontal"][sticky="start"]) .appbar {\n                border-bottom: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);\n            }\n            :host([orientation="horizontal"][sticky="end"]) .appbar {\n                border-top: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);\n            }\n\n            .appbar {\n                display: flex;\n                background: var(--component-appbar-background, #111);\n                border: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);\n                border-radius: var(--component-appbar-border-radius, var(--component-sidebar-border-radius, 4px));\n                overflow: visible;\n                padding: var(--_appbar-padding);\n                box-sizing: border-box;\n            }\n\n            .appbar.vertical {\n                flex-direction: column;\n                width: var(--component-appbar-width, 240px);\n                height: 100%;\n                transition: width 0.2s ease;\n            }\n            .appbar.vertical.collapsed {\n                width: var(--_appbar-collapsed-width);\n            }\n\n            .appbar.horizontal {\n                flex-direction: row;\n                width: 100%;\n                height: auto;\n                align-items: center;\n            }\n\n            .appbar-header,\n            .appbar-body,\n            .appbar-footer {\n                flex-shrink: 0;\n            }\n\n            .appbar-body {\n                flex: 1;\n                overflow-y: auto;\n                overflow-x: hidden;\n                display: flex;\n                gap: var(--_appbar-body-gap);\n            }\n\n            .appbar.vertical .appbar-body {\n                flex-direction: column;\n            }\n            .appbar.horizontal .appbar-body {\n                flex-direction: row;\n                overflow-y: hidden;\n                overflow-x: auto;\n                align-items: center;\n            }\n\n            .appbar.vertical .appbar-header {\n                border-bottom: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);\n                padding-bottom: var(--_appbar-padding);\n                margin-bottom: var(--_appbar-padding);\n            }\n            .appbar.vertical .appbar-footer {\n                border-top: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);\n                padding-top: var(--_appbar-padding);\n                margin-top: var(--_appbar-padding);\n            }\n\n            .appbar.horizontal .appbar-header {\n                border-right: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);\n                padding-right: var(--_appbar-padding);\n                margin-right: var(--_appbar-padding);\n            }\n            .appbar.horizontal .appbar-footer {\n                border-left: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);\n                padding-left: var(--_appbar-padding);\n                margin-left: var(--_appbar-padding);\n            }\n\n            .header-content {\n                display: flex;\n                align-items: center;\n                gap: var(--spacing-small, 8px);\n                overflow: hidden;\n            }\n            .appbar.horizontal .header-content,\n            .appbar.vertical .header-content {\n                flex-direction: row;\n            }\n            .logo-wrapper {\n                width: var(--_icon-col-width);\n                display: flex;\n                justify-content: center;\n                align-items: center;\n                flex-shrink: 0;\n            }\n\n            .header-title {\n                font-weight: bold;\n                white-space: nowrap;\n                overflow: hidden;\n                text-overflow: ellipsis;\n                font-size: var(--font-size-label, 0.9em);\n            }\n            .appbar.vertical.collapsed .header-title {\n                display: none;\n            }\n\n            .nav-item {\n                display: flex;\n                align-items: center;\n                position: relative;\n            }\n            .appbar.vertical .nav-item {\n                width: 100%;\n            }\n            .appbar.vertical .nav-item y-button {\n                display: block;\n                width: 100%;\n            }\n            .appbar.vertical .nav-item y-button::part(button),\n            .appbar.vertical .appbar-footer y-button::part(button) {\n                width: 100%;\n                justify-content: flex-start;\n                padding-left: 0;\n                padding-right: 0;\n            }\n\n            /* Fixed-width icon column — matches collapsed inner width so icons stay centred across states */\n            .appbar.vertical .nav-item y-button::part(left-icon),\n            .appbar.vertical .appbar-footer y-button::part(left-icon) {\n                width: var(--_icon-col-width);\n                display: flex;\n                justify-content: center;\n                flex-shrink: 0;\n            }\n\n            .appbar.vertical .nav-item y-button::part(right-icon) {\n                margin-left: auto;\n            }\n\n            .appbar.vertical.collapsed .nav-item y-button::part(button),\n            .appbar.vertical.collapsed .appbar-footer y-button::part(button) {\n                min-width: 0;\n            }\n            .appbar.vertical.collapsed .nav-item y-button::part(label),\n            .appbar.vertical.collapsed .appbar-footer y-button::part(label) {\n                display: none;\n            }\n            .appbar.vertical.collapsed .nav-item y-button::part(right-icon),\n            .appbar.vertical.collapsed .appbar-footer y-button::part(right-icon) {\n                display: none;\n            }\n\n            .appbar-footer {\n                display: flex;\n                flex-direction: column;\n                gap: 2px;\n            }\n            .appbar.horizontal .appbar-footer {\n                flex-direction: row;\n                align-items: center;\n            }\n            .appbar.vertical .appbar-footer y-button {\n                display: block;\n                width: 100%;\n            }\n\n            .appbar.vertical.collapsed .appbar-header,\n            .appbar.vertical.collapsed .appbar-body,\n            .appbar.vertical.collapsed .appbar-footer {\n                align-items: center;\n            }\n\n            ::slotted(*) {\n                display: block;\n            }\n        ',this.shadowRoot.appendChild(s),document.querySelectorAll('link[rel="stylesheet"]').forEach(t=>{this.shadowRoot.appendChild(t.cloneNode(!0))});const a=document.createElement("div");a.className="appbar "+(t?"vertical":"horizontal"),e&&a.classList.add("collapsed"),a.setAttribute("role","navigation"),a.style.setProperty("--_appbar-padding",r.padding),a.style.setProperty("--_appbar-collapsed-width",r.collapsedWidth),a.style.setProperty("--_appbar-body-gap",r.bodyGap),a.style.setProperty("--_icon-col-width",`calc(${r.collapsedWidth} - 2 * var(--_appbar-padding) - 2 * var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)))`);const l=document.createElement("div");l.className="appbar-header";const d=document.createElement("div");d.className="header-content";const c=document.createElement("div");c.className="logo-wrapper";const h=document.createElement("slot");h.name="logo",c.appendChild(h),d.appendChild(c);const p=document.createElement("div");p.className="header-title";const u=document.createElement("slot");u.name="title",p.appendChild(u),d.appendChild(p),l.appendChild(d),a.appendChild(l);const b=document.createElement("div");b.className="appbar-body";this.items.forEach(n=>{const i=n.children?.length>0,s=document.createElement("div");s.className="nav-item";const a=document.createElement("y-button"),l=this._uid("appbar-btn");a.id=l;const d=this._isItemActive(n);if(a.setAttribute("color",d?"primary":"base"),a.setAttribute("style-type","flat"),a.setAttribute("size",r.buttonSize),n.icon){const t=document.createElement("span");t.slot="left-icon",t.innerHTML=n.icon,a.appendChild(t)}if(n.text&&!e){const t=document.createTextNode(n.text);a.appendChild(t)}if(i&&!e){const e=document.createElement("span");e.slot="right-icon",e.innerHTML=t?'<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"><polyline points="9 18 15 12 9 6"/></svg>':'<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"><polyline points="6 9 12 15 18 9"/></svg>',a.appendChild(e)}if(n.href&&!i&&a.addEventListener("click",()=>{window.location.href=n.href}),s.appendChild(a),i){const t=document.createElement("y-menu");t.setAttribute("anchor",l),t.setAttribute("direction",o),t.setAttribute("size",r.buttonSize),t.items=n.children,s.appendChild(t)}b.appendChild(s)}),a.appendChild(b);const m=document.createElement("div");m.className="appbar-footer";const v=document.createElement("slot");if(v.name="footer",m.appendChild(v),t){const t=document.createElement("y-button");t.setAttribute("color","base"),t.setAttribute("style-type","flat"),t.setAttribute("size",r.buttonSize),t.setAttribute("aria-label",e?"Expand sidebar":"Collapse sidebar"),t.className="collapse-btn";const n=document.createElement("span");if(n.slot="left-icon",n.innerHTML=e?'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="13 17 18 12 13 7"/><polyline points="6 17 11 12 6 7"/></svg>':'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="11 17 6 12 11 7"/><polyline points="18 17 13 12 18 7"/></svg>',t.appendChild(n),!e){const e=document.createTextNode("Collapse");t.appendChild(e)}t.addEventListener("click",this._onCollapseClick),m.appendChild(t)}a.appendChild(m),this.shadowRoot.appendChild(a)}}customElements.get("y-appbar")||customElements.define("y-appbar",i);class r extends HTMLElement{static get observedAttributes(){return["src","alt","size","shape"]}constructor(){super(),this.attachShadow({mode:"open"}),this.render()}attributeChangedCallback(t,e,n){e!==n&&this.render()}render(){const t=this.getAttribute("src"),e=this.getAttribute("alt")||"AN",n=`var(--component-avatar-border-radius-${this.getAttribute("shape")||"circle"}, 9999px)`;let o;switch(this.getAttribute("size")||"medium"){case"small":o="var(--component-avatar-size-small, 27px)";break;case"large":o="var(--component-avatar-size-large, 51px)";break;default:o="var(--component-avatar-size-medium, 35px)"}const i=new CSSStyleSheet;let r="";if(r=t?`\n          :host {\n            display: inline-block;\n            height: ${o};\n            min-width: ${o};\n          }\n          img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            border-radius: ${n};\n          }\n        `:`\n          :host {\n            display: inline-block;\n            width: ${o};\n            height: ${o};\n            min-width: ${o};\n            font-family: var(--font-family-header, "Lexend"), sans-serif;\n            text-transform: uppercase;\n          }\n          .avatar {\n            width: 100%;\n            height: 100%;\n            border-radius: ${n};\n            background-color: var(--primary-content--, rgba(4, 134, 209, 1));\n            color: var(--primary-background-component, rgba(245, 250, 250, 1));\n            display: flex;\n            align-items: center;\n            justify-content: center;\n          }\n          .avatar h5 {\n            margin: 0;\n            font-size: calc(${o} * 0.5);\n          }\n        `,i.replaceSync(r),this.shadowRoot.adoptedStyleSheets=[i],t)this.shadowRoot.innerHTML=`<img src="${t}" alt="${e}" part="avatar" />`;else{const t=e.trim().split(/\s+/),n=t.length>=2?t[0].charAt(0)+t[1].charAt(0):e.substring(0,2);this.shadowRoot.innerHTML=`<div class="avatar" part="avatar"><h5>${n}</h5></div>`}}}customElements.get("y-avatar")||customElements.define("y-avatar",r);class s extends HTMLElement{static get observedAttributes(){return["value","position","alignment","color","size"]}constructor(){super(),this.attachShadow({mode:"open"}),this.render()}connectedCallback(){this.render()}attributeChangedCallback(t,e,n){e!==n&&this.render()}get alignment(){return this.getAttribute("alignment")||"right"}get color(){return this.getAttribute("color")||"primary"}get position(){return this.getAttribute("position")||"top"}get size(){return this.getAttribute("size")||"small"}get value(){return this.getAttribute("value")||""}getBadgeColor(t){return{primary:"var(--primary-content--)",secondary:"var(--secondary-content--)",base:"var(--base-content--)",success:"var(--success-content--)",warning:"var(--warning-content--)",error:"var(--error-content--)",help:"var(--help-content--)"}[t]||t}getBadgePosition(t,e){const n="var(--spacing-small, 6px)";return`${"top"===t?`top: calc(${n} * -1);`:`bottom: calc(${n} * -1);`} ${"right"===e?`right: calc(${n} * -1);`:`left: calc(${n} * -1);`}`}getSizeAttributes(t){const e={small:{fontSize:"var(--font-size-small, 0.8em)",padding:"var(--component-badge-padding-small)",minSize:"var(--component-badge-size-small)"},medium:{fontSize:"var(--font-size-label, 0.83em)",padding:"var(--component-badge-padding-medium)",minSize:"var(--component-badge-size-medium)"},large:{fontSize:"var(--font-size-paragraph, 1em)",padding:"var(--component-badge-padding-large)",minSize:"var(--component-badge-size-large)"}};return e[t]||e.small}hasTargetContent(){return Array.from(this.childNodes).some(t=>t.nodeType===Node.ELEMENT_NODE||t.nodeType===Node.TEXT_NODE&&""!==t.textContent.trim())}render(){const t=this.getBadgeColor(this.color),{fontSize:e,padding:n,minSize:o}=this.getSizeAttributes(this.size),i=this.getBadgePosition(this.position,this.alignment),r=this.hasTargetContent();this.shadowRoot.innerHTML=`\n            <style>\n                :host {\n                    position: ${r?"relative":"static"};\n                    display: inline-flex;\n                    align-items: center;\n                }\n                .badge {\n                    position: ${r?"absolute":"static"};\n                    ${r?i:""}\n                    background: ${t};\n                    color: var(--base-background-component, #fff);\n                    font-size: ${e};\n                    font-weight: bold;\n                    padding: ${n};\n                    border-radius: var(--component-badge-border-radius-circle, 9999px);\n                    display: flex;\n                    align-items: center;\n                    justify-content: center;\n                    font-family: var(--font-family-body, sans-serif);\n                    min-width: ${o};\n                    height: ${o};\n                    z-index: 20;\n                }\n                ::slotted(*) {\n                    position: relative;\n                    display: inline-block;\n                }\n            </style>\n            ${r?"<slot></slot>":""}\n            <div class="badge" part="badge">${this.value}</div>\n        `}}function a(t,e){const n=t.match(/var\(\s*(--[^,)]+)/);if(!n)return t;return getComputedStyle(e).getPropertyValue(n[1]).trim()||t}function l(t){const e=function(t){const e=t.match(/^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i);if(e){let t=e[1];return t.length<=4&&(t=t.split("").map(t=>t+t).join("")),{r:parseInt(t.slice(0,2),16),g:parseInt(t.slice(2,4),16),b:parseInt(t.slice(4,6),16)}}const n=t.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);return n?{r:parseInt(n[1],10),g:parseInt(n[2],10),b:parseInt(n[3],10)}:null}(t);return e&&function({r:t,g:e,b:n}){const[o,i,r]=[t,e,n].map(t=>(t/=255)<=.03928?t/12.92:Math.pow((t+.055)/1.055,2.4));return.2126*o+.7152*i+.0722*r}(e)>.179?"var(--neutral-black, #000000)":"var(--neutral-white, #ffffff)"}customElements.get("y-badge")||customElements.define("y-badge",s);class d extends HTMLElement{static get observedAttributes(){return["color","raised"]}constructor(){super(),this.attachShadow({mode:"open"}),this.render()}connectedCallback(){this.updateColorStyles(),this.updateElevationStyles()}attributeChangedCallback(t,e,n){e!==n&&("color"===t&&this.updateColorStyles(),"raised"===t&&this.updateElevationStyles(),this.render())}updateColorStyles(){const t={primary:["--base-content--","--primary-background-component","--primary-background-border","--primary-background-active"],secondary:["--base-content--","--secondary-background-component","--secondary-background-border","--secondary-background-active"],base:["--base-content--","--base-background-component","--base-background-border","--base-background-active"],success:["--base-content--","--success-background-component","--success-background-border","--success-background-active"],error:["--base-content--","--error-background-component","--error-background-border","--error-background-active"],warning:["--base-content--","--warning-background-component","--warning-background-border","--warning-background-active"]},e=t[this.getAttribute("color")||"base"]||t.base;this.style.setProperty("--card-content-color",`var(${e[0]})`),this.style.setProperty("--card-border-color",`var(${e[2]})`),this.style.setProperty("--card-background",`var(${e[1]})`),this.style.setProperty("--card-section-background",`var(${e[2]})`)}updateElevationStyles(){this.hasAttribute("raised")?(this.style.setProperty("--card-border-width","0"),this.style.setProperty("--card-box-shadow","var(--base-shadow)")):(this.style.setProperty("--card-border-width","var(--component-card-border-width)"),this.style.setProperty("--card-box-shadow","none"))}render(){const t=new CSSStyleSheet;t.replaceSync("\n            :host {\n                display: block;\n                box-sizing: border-box;\n                background: var(--card-background, var(--base-background-component));\n                border: var(--card-border-width, var(--component-card-border-width)) solid var(--card-border-color, var(--base-background-border));\n                border-radius: var(--component-card-border-radius-outer);\n                font-family: var(--font-family-body);\n                color: var(--card-content-color, var(--base-content--));\n                box-shadow: var(--card-box-shadow, none);\n            }\n\n            .header {\n                padding: var(--component-card-padding-outer);\n                border-bottom: var(--component-card-inner-border-width) solid var(--card-border-color, var(--base-background-border));\n            }\n\n            .body {\n                padding: var(--component-card-padding-outer);\n            }\n\n            .footer {\n                padding: var(--component-card-padding-inner) var(--component-card-padding-outer);\n                border-top: var(--component-card-inner-border-width) solid var(--card-border-color, var(--base-background-border));\n            }\n\n            ::slotted(*) {\n                margin: 0;\n            }\n        "),this.shadowRoot.adoptedStyleSheets=[t],this.shadowRoot.innerHTML='\n            <div class="header" part="header">\n                <slot name="header"></slot>\n            </div>\n            <div class="body" part="body">\n                <slot></slot>\n            </div>\n            <div class="footer" part="footer">\n                <slot name="footer"></slot>\n            </div>\n        ',function(t,e={}){Object.entries(e).forEach(([e,n])=>{const o=t.querySelector("slot"+(e?`[name="${e}"]`:":not([name])")),i=t.querySelector(n);if(o&&i){const t=o.assignedNodes({flatten:!0}).filter(t=>!(t.nodeType===Node.TEXT_NODE&&""===t.textContent.trim()));i.style.display=t.length>0?"":"none"}})}(this.shadowRoot,{header:".header",footer:".footer"})}}customElements.get("y-card")||customElements.define("y-card",d);class c extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return["checked","disabled","indeterminate","label-position","name","value"]}constructor(){super(),this._internals=this.attachInternals(),this.attachShadow({mode:"open"}),this.render()}connectedCallback(){this.hasAttribute("label-position")||this.setAttribute("label-position","right"),this._internals.setFormValue(this.checked?this.value:null)}attributeChangedCallback(t){"checked"!==t&&"value"!==t||this._internals.setFormValue(this.checked?this.value:null),"indeterminate"===t&&this.updateIcon(),"label-position"===t&&this.render(),this.updateState()}get checked(){return this.hasAttribute("checked")}set checked(t){t?this.setAttribute("checked",""):this.removeAttribute("checked")}get disabled(){return this.hasAttribute("disabled")}set disabled(t){t?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get indeterminate(){return this.hasAttribute("indeterminate")}set indeterminate(t){t?this.setAttribute("indeterminate",""):this.removeAttribute("indeterminate")}get value(){return this.getAttribute("value")||"on"}set value(t){this.setAttribute("value",t)}get name(){return this.getAttribute("name")}toggle(){this.disabled||(this.indeterminate?(this.indeterminate=!1,this.checked=!0):this.checked=!this.checked,this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})))}updateIcon(){const t=this.shadowRoot.querySelector(".icon");t&&(this.indeterminate?t.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="4" y="11" width="16" height="2" rx="1" ry="1" fill="currentColor"/></svg>':this.checked?t.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polyline points="5 13 10 17 19 6" fill="none" stroke="currentColor" stroke-width="2"/></svg>':t.innerHTML="")}updateState(){this.shadowRoot.querySelector(".checkbox").setAttribute("aria-checked",this.indeterminate?"mixed":this.checked?"true":"false"),this.updateIcon()}render(){const t=this.getAttribute("label-position")||"right",e=this.disabled,n=new CSSStyleSheet;n.replaceSync(`\n            :host {\n                display: inline-flex;\n                align-items: center;\n                line-height: 1;\n                vertical-align: middle;\n                font-family: var(--font-family-body);\n                cursor: ${e?"not-allowed":"pointer"};\n                opacity: ${e?"0.6":"1"};\n            }\n\n            .wrapper {\n                display: inline-flex;\n                align-items: center;\n                gap: var(--spacing-x-small, 6px);\n                line-height: 1;\n                flex-direction: ${"top"===t?"column":"bottom"===t?"column-reverse":"left"===t?"row-reverse":"row"};\n            }\n\n            .checkbox {\n                width: var(--component-checkbox-size, 20px);\n                height: var(--component-checkbox-size, 20px);\n                border: var(--component-inputs-border-width, 2px) solid var(--component-checkbox-border-color);\n                border-radius: var(--component-inputs-border-radius-outer, 4px);\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                background: var(--component-checkbox-background);\n                box-sizing: border-box;\n                transition: border-color 0.2s ease;\n                line-height: 0;\n            }\n\n            .checkbox:hover {\n                border-color: var(--component-checkbox-accent);\n            }\n\n            .checkbox svg {\n                width: var(--component-checkbox-icon-size, 16px);\n                height: var(--component-checkbox-icon-size, 16px);\n                stroke: var(--component-checkbox-accent);\n                display: block;\n            }\n\n            .label {\n                display: inline-flex;\n                align-items: center;\n                font-size: 0.9em;\n                line-height: 1;\n                color: var(--component-checkbox-color);\n            }\n\n            .icon {\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                width: 100%;\n                height: 100%;\n                line-height: 0;\n            }\n\n        `),this.shadowRoot.adoptedStyleSheets=[n],this.shadowRoot.innerHTML='\n            <div class="wrapper">\n                <div class="checkbox" role="checkbox" tabindex="0">\n                    <span class="icon"></span>\n                </div>\n                <label part="label">\n                    <slot></slot>\n                </label>\n            </div>\n        ',this.shadowRoot.querySelector(".checkbox").addEventListener("click",()=>this.toggle()),this.shadowRoot.querySelector(".checkbox").addEventListener("keydown",t=>{" "!==t.key&&"Enter"!==t.key||(t.preventDefault(),this.toggle())}),this.updateState()}}customElements.get("y-checkbox")||customElements.define("y-checkbox",c);class h extends HTMLElement{static get observedAttributes(){return["visible","anchor","closable"]}constructor(){super(),this.attachShadow({mode:"open"}),this.onKeyDown=this.onKeyDown.bind(this),this.onAnchorClick=this.onAnchorClick.bind(this)}connectedCallback(){this.render(),this.setupAnchor(),this.visible&&this.show()}attributeChangedCallback(t,e,n){e!==n&&("visible"===t&&(this.visible?this.show():this.hide()),"anchor"===t&&this.setupAnchor(),"closable"===t&&this.render())}get visible(){return this.hasAttribute("visible")}set visible(t){t?this.setAttribute("visible",""):this.removeAttribute("visible")}get anchor(){return this.getAttribute("anchor")}set anchor(t){this.setAttribute("anchor",t)}get closable(){return this.hasAttribute("closable")}set closable(t){t?this.setAttribute("closable",""):this.removeAttribute("closable")}show(){this.shadowRoot.querySelector(".dialog")||this.render(),document.addEventListener("keydown",this.onKeyDown);const t=this.shadowRoot.querySelector(".dialog");t&&"function"==typeof t.focus&&t.focus()}hide(){document.removeEventListener("keydown",this.onKeyDown)}setupAnchor(){if(this._anchorEl&&this._anchorEl.removeEventListener("click",this.onAnchorClick),this.anchor){const t=document.getElementById(this.anchor);t&&(this._anchorEl=t,this._anchorEl.addEventListener("click",this.onAnchorClick))}}onAnchorClick(){this.visible=!this.visible}onKeyDown(t){"Escape"===t.key&&this.visible&&(this.visible=!1)}render(){const t=document.createElement("style");t.textContent="\n            :host {\n                position: fixed;\n                top: 0; left: 0; right: 0; bottom: 0;\n                display: none;\n                align-items: center;\n                justify-content: center;\n                background: rgba(0,0,0,0.5);\n                z-index: 1000;\n            }\n            :host([visible]) { display: flex; }\n            .dialog {\n                background: var(--component-dialog-background);\n                border: var(--component-dialog-border-width, 1px) solid var(--component-dialog-border-color);\n                border-radius: var(--component-dialog-border-radius-outer, 4px);\n                max-width: 90%;\n                max-height: 90%;\n                display: flex;\n                flex-direction: column;\n                box-shadow: var(--component-dialog-shadow, 0 2px 10px rgba(0,0,0,0.3));\n            }\n            .header {\n                padding: var(--component-dialog-padding, var(--spacing-medium));\n                font-weight: bold;\n                border-bottom: var(--component-dialog-inner-border-width, 1px) solid var(--component-dialog-border-color);\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n                gap: var(--spacing-small, 8px);\n            }\n            .header-content {\n                flex: 1;\n            }\n            .close-btn {\n                background: none;\n                border: none;\n                cursor: pointer;\n                padding: var(--spacing-x-small, 4px);\n                color: var(--component-dialog-color, #000);\n                font-size: 1.25em;\n                line-height: 1;\n                border-radius: var(--component-button-border-radius-outer, 4px);\n                display: flex;\n                align-items: center;\n                justify-content: center;\n            }\n            .close-btn:hover {\n                background: var(--component-dialog-hover-background, #eee);\n            }\n            .close-btn:focus-visible {\n                outline: 2px solid var(--component-dialog-accent);\n                outline-offset: -1px;\n            }\n            .body {\n                padding: var(--component-dialog-padding, var(--spacing-medium));\n                overflow: auto;\n                flex: 1;\n            }\n            .footer {\n                padding: var(--component-dialog-padding, var(--spacing-medium));\n                border-top: var(--component-dialog-inner-border-width, 1px) solid var(--component-dialog-border-color);\n                text-align: right;\n            }\n\n            ::slotted(*) {\n                margin: 0;\n            }\n        ",this.shadowRoot.innerHTML="",this.shadowRoot.appendChild(t);const e=document.createElement("div");e.className="dialog",e.setAttribute("role","dialog"),e.setAttribute("aria-modal","true"),e.setAttribute("tabindex","-1");const n=document.createElement("div");n.className="header";const o=document.createElement("div");if(o.className="header-content",o.innerHTML='<slot name="header"></slot>',n.appendChild(o),this.closable){const t=document.createElement("button");t.className="close-btn",t.setAttribute("aria-label","Close"),t.innerHTML="&#10005;",t.addEventListener("click",()=>{this.visible=!1}),n.appendChild(t)}const i=document.createElement("div");i.className="body",i.innerHTML='<slot name="body"></slot>';const r=document.createElement("div");r.className="footer",r.innerHTML='<slot name="footer"></slot>',e.appendChild(n),e.appendChild(i),e.appendChild(r),this.shadowRoot.appendChild(e)}}customElements.get("y-dialog")||customElements.define("y-dialog",h);class p extends HTMLElement{static get observedAttributes(){return["visible","anchor","position","resizable"]}constructor(){super(),this.attachShadow({mode:"open"}),this._onAnchorClick=this._onAnchorClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onResizePointerDown=this._onResizePointerDown.bind(this),this._onResizePointerMove=this._onResizePointerMove.bind(this),this._onResizePointerUp=this._onResizePointerUp.bind(this)}connectedCallback(){this.render(),this._setupAnchor(),this.visible&&this._show()}disconnectedCallback(){this._teardownAnchor(),document.removeEventListener("keydown",this._onKeyDown),this._cleanupResize()}attributeChangedCallback(t,e,n){e!==n&&("visible"===t&&(this.visible?this._show():this._hide()),"anchor"===t&&(this._teardownAnchor(),this._setupAnchor()),"position"===t&&this._applyPosition(),"resizable"===t&&this._applyResizable())}get visible(){return this.hasAttribute("visible")}set visible(t){t?this.setAttribute("visible",""):this.removeAttribute("visible")}get anchor(){return this.getAttribute("anchor")}set anchor(t){this.setAttribute("anchor",t)}get position(){return this.getAttribute("position")||"left"}set position(t){this.setAttribute("position",t)}get resizable(){return this.hasAttribute("resizable")}set resizable(t){t?this.setAttribute("resizable",""):this.removeAttribute("resizable")}_setupAnchor(){const t=this.anchor;if(t){const e=document.getElementById(t);e&&(this._anchorEl=e,this._anchorEl.addEventListener("click",this._onAnchorClick))}}_teardownAnchor(){this._anchorEl&&(this._anchorEl.removeEventListener("click",this._onAnchorClick),this._anchorEl=null)}_onAnchorClick(){this.visible=!this.visible}_show(){this.style.display="block",this.offsetHeight;const t=this.shadowRoot.querySelector(".overlay"),e=this.shadowRoot.querySelector(".drawer-panel");t&&t.classList.add("open"),e&&(e.classList.add("open"),e.focus()),document.addEventListener("keydown",this._onKeyDown)}_hide(){const t=this.shadowRoot.querySelector(".overlay"),e=this.shadowRoot.querySelector(".drawer-panel");t&&t.classList.remove("open"),e&&e.classList.remove("open"),document.removeEventListener("keydown",this._onKeyDown);const n=this._getTransitionDuration(e);n>0?(clearTimeout(this._hideTimer),this._hideTimer=setTimeout(()=>{this.visible||(this.style.display="none")},n)):this.style.display="none"}_getTransitionDuration(t){if(!t)return 0;const e=getComputedStyle(t).transitionDuration||"0s",n=parseFloat(e);return isNaN(n)?0:1e3*n}_onKeyDown(t){"Escape"===t.key&&this.visible&&(this.visible=!1)}_onOverlayClick(){this.visible=!1}_applyPosition(){const t=this.shadowRoot.querySelector(".drawer-panel");t&&t.setAttribute("data-position",this.position)}_applyResizable(){const t=this.shadowRoot.querySelector(".resize-handle");t&&(t.style.display=this.resizable?"flex":"none")}_isHorizontal(){return"left"===this.position||"right"===this.position}_onResizePointerDown(t){t.preventDefault(),this._resizing=!0,this._startPointer=this._isHorizontal()?t.clientX:t.clientY;const e=this.shadowRoot.querySelector(".drawer-panel");this._startSize=this._isHorizontal()?e.offsetWidth:e.offsetHeight,e.style.transition="none",document.addEventListener("pointermove",this._onResizePointerMove),document.addEventListener("pointerup",this._onResizePointerUp)}_onResizePointerMove(t){if(!this._resizing)return;const e=this.shadowRoot.querySelector(".drawer-panel"),n=(this._isHorizontal()?t.clientX:t.clientY)-this._startPointer;let o;o="left"===this.position?this._startSize+n:"right"===this.position?this._startSize-n:"top"===this.position?this._startSize+n:this._startSize-n;o=Math.max(100,o),this._isHorizontal()?e.style.width=`${o}px`:e.style.height=`${o}px`}_onResizePointerUp(){this._resizing=!1;const t=this.shadowRoot.querySelector(".drawer-panel");t&&(t.style.transition=""),document.removeEventListener("pointermove",this._onResizePointerMove),document.removeEventListener("pointerup",this._onResizePointerUp)}_cleanupResize(){document.removeEventListener("pointermove",this._onResizePointerMove),document.removeEventListener("pointerup",this._onResizePointerUp)}_gripSVG(){return`<svg xmlns="http://www.w3.org/2000/svg" width="${(t=this._isHorizontal())?4:20}" height="${t?20:4}" viewBox="0 0 ${t?4:20} ${t?20:4}" fill="currentColor">\n            ${t?'<circle cx="2" cy="4"  r="1.5"/>\n                   <circle cx="2" cy="10" r="1.5"/>\n                   <circle cx="2" cy="16" r="1.5"/>':'<circle cx="4"  cy="2" r="1.5"/>\n                   <circle cx="10" cy="2" r="1.5"/>\n                   <circle cx="16" cy="2" r="1.5"/>'}\n        </svg>`;var t}render(){this.shadowRoot.innerHTML="";const t=document.createElement("style");t.textContent='\n            :host {\n                position: fixed;\n                top: 0; left: 0; right: 0; bottom: 0;\n                display: none;\n                z-index: 1000;\n            }\n            :host([visible]) {\n                display: block;\n            }\n\n            .overlay {\n                position: absolute;\n                top: 0; left: 0; right: 0; bottom: 0;\n                background: rgba(0, 0, 0, 0);\n                transition: background var(--drawer-transition-duration, 0.3s) ease;\n            }\n            .overlay.open {\n                background: rgba(0, 0, 0, 0.4);\n            }\n\n            .drawer-panel {\n                position: absolute;\n                background: var(--component-drawer-background, #fff);\n                color: var(--component-drawer-color, #000);\n                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);\n                overflow: hidden;\n                outline: none;\n                display: flex;\n                flex-direction: column;\n                border: none;\n                border-radius: var(--component-drawer-border-radius, 0);\n                transition: transform var(--drawer-transition-duration, 0.3s) ease;\n            }\n\n            .drawer-panel[data-position="left"],\n            .drawer-panel[data-position="right"] {\n                top: 0;\n                bottom: 0;\n                width: var(--drawer-width, 300px);\n                flex-direction: row;\n            }\n            .drawer-panel[data-position="left"] {\n                left: 0;\n                transform: translateX(-100%);\n                border-right: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #ccc);\n            }\n            .drawer-panel[data-position="right"] {\n                right: 0;\n                transform: translateX(100%);\n                border-left: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #ccc);\n            }\n\n            .drawer-panel[data-position="top"],\n            .drawer-panel[data-position="bottom"] {\n                left: 0;\n                right: 0;\n                height: var(--drawer-height, 300px);\n            }\n            .drawer-panel[data-position="top"] {\n                top: 0;\n                transform: translateY(-100%);\n                border-bottom: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #ccc);\n            }\n            .drawer-panel[data-position="bottom"] {\n                bottom: 0;\n                transform: translateY(100%);\n                border-top: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #ccc);\n            }\n\n            .drawer-panel.open { transform: translate(0, 0); }\n\n            .drawer-header {\n                padding: var(--component-drawer-padding, 1rem);\n                font-weight: bold;\n            }\n            .drawer-body {\n                padding: var(--component-drawer-padding, 1rem);\n                flex: 1;\n                overflow: auto;\n            }\n            .drawer-footer {\n                padding: var(--component-drawer-padding, 1rem);\n            }\n\n            /* Wrapper so header/body/footer stack vertically inside a row layout */\n            .drawer-content {\n                display: flex;\n                flex-direction: column;\n                flex: 1;\n                min-width: 0;\n                min-height: 0;\n                overflow: hidden;\n            }\n\n            ::slotted(*) {\n                margin: 0;\n            }\n\n            .resize-handle {\n                display: none;              /* hidden until resizable attr */\n                flex-shrink: 0;\n                align-items: center;\n                justify-content: center;\n                color: var(--component-drawer-color, #999);\n                opacity: 0.6;\n                touch-action: none;         /* needed for pointer events */\n                user-select: none;\n                transition: opacity 0.15s, background 0.15s;\n            }\n            .resize-handle:hover,\n            .resize-handle:active {\n                opacity: 1;\n                background: var(--component-drawer-hover-background, rgba(128,128,128,0.15));\n            }\n\n            .drawer-panel[data-position="left"] > .resize-handle,\n            .drawer-panel[data-position="right"] > .resize-handle {\n                width: var(--component-drawer-handle-width, 6px);\n                padding: var(--component-drawer-handle-padding, 4px);\n                cursor: ew-resize;\n            }\n            .drawer-panel[data-position="left"] > .resize-handle {\n                order: 99;\n            }\n            .drawer-panel[data-position="right"] > .resize-handle {\n                order: -1;\n            }\n\n            .drawer-panel[data-position="top"] > .resize-handle,\n            .drawer-panel[data-position="bottom"] > .resize-handle {\n                height: var(--component-drawer-handle-width, 6px);\n                padding: var(--component-drawer-handle-padding, 4px);\n                cursor: ns-resize;\n            }\n            .drawer-panel[data-position="top"] > .resize-handle {\n                order: 99;\n            }\n            .drawer-panel[data-position="bottom"] > .resize-handle {\n                order: -1;\n            }\n        ',this.shadowRoot.appendChild(t);const e=document.createElement("div");e.className="overlay",e.addEventListener("click",()=>this._onOverlayClick()),this.shadowRoot.appendChild(e);const n=document.createElement("div");n.className="drawer-panel",n.setAttribute("role","dialog"),n.setAttribute("aria-modal","true"),n.setAttribute("tabindex","-1"),n.setAttribute("data-position",this.position);const o=document.createElement("div");o.className="resize-handle",o.innerHTML=this._gripSVG(),o.style.display=this.resizable?"flex":"none",o.addEventListener("pointerdown",this._onResizePointerDown),n.appendChild(o);const i=document.createElement("div");i.className="drawer-content";const r=document.createElement("div");r.className="drawer-header",r.innerHTML='<slot name="header"></slot>';const s=document.createElement("div");s.className="drawer-body",s.innerHTML='<slot name="body"></slot>';const a=document.createElement("div");a.className="drawer-footer",a.innerHTML='<slot name="footer"></slot>',i.appendChild(r),i.appendChild(s),i.appendChild(a),n.appendChild(i),this.shadowRoot.appendChild(n),this.visible&&requestAnimationFrame(()=>{e.classList.add("open"),n.classList.add("open")})}}customElements.get("y-drawer")||customElements.define("y-drawer",p);class u extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return["type","size","value","label-position","disabled","invalid","name"]}constructor(){super(),this._internals=this.attachInternals(),this.attachShadow({mode:"open"}),this.render()}connectedCallback(){this.hasAttribute("size")||this.setAttribute("size","medium"),this.hasAttribute("label-position")||this.setAttribute("label-position","top"),this._internals.setFormValue(this.value)}attributeChangedCallback(t,e,n){if(e!==n)return"value"===t?(this.input&&(this.input.value=n),void(this._internals&&this._internals.setFormValue(n,this.getAttribute("name")))):void("name"!==t?"invalid"!==t?this.render():this.updateValidationState():this._internals.setFormValue(this.value,n))}get value(){return this.input?.value||""}set value(t){this.input?this.input.value=t:this.setAttribute("value",t),this._internals.setFormValue(t,this.getAttribute("name"))}checkValidity(){return this.input?.checkValidity?.()??!0}updateValidationState(){const t=this.hasAttribute("invalid"),e=this.input&&!this.checkValidity(),n=t||e;this.inputContainer?.classList.toggle("is-invalid",n),this.labelWrapper?.classList.toggle("is-invalid",n)}render(){const t=this.getAttribute("type")||"text",e=this.getAttribute("size")||"medium",n=this.getAttribute("value")||"",o=this.getAttribute("label-position")||"top",i=this.hasAttribute("disabled"),r="top"===o,s={small:"--component-inputs-padding-small",medium:"--component-inputs-padding-medium",large:"--component-inputs-padding-large"}[e],a=new CSSStyleSheet;a.replaceSync(`\n            :host {\n                display: block;\n                font-family: var(--font-family-body);\n                color: var(--component-input-color);\n                opacity: ${i?"0.75":"1"};\n                pointer-events: ${i?"none":"auto"};\n            }\n\n            .input-wrapper {\n                position: relative;\n                display: flex;\n                flex-direction: column;\n                gap: var(--spacing-2x-small, 4px);\n            }\n\n            .input-container {\n                display: flex;\n                align-items: center;\n                gap: var(--spacing-x-small);\n                background: ${i?"var(--component-input-background-disabled)":"var(--component-input-background)"};\n                border: var(--component-inputs-border-width) solid var(--component-input-border-color);\n                border-radius: var(--component-inputs-border-radius-outer);\n                padding: var(${s});\n                box-sizing: border-box;\n                transition: border-color 0.2s ease-in-out;\n            }\n\n            .input-container.is-invalid {\n                border-color: var(--component-input-error-border-color);\n                background: var(--component-input-error-background);\n            }\n\n            .input-container.is-invalid input {\n                color: var(--component-input-error-color);\n            }\n\n            .input-container.is-invalid:hover {\n                border-color: var(--component-input-error-color);\n            }\n\n            .input-container.is-invalid:focus-within {\n                border-color: var(--component-input-error-color);\n            }\n\n            .input-container.is-invalid:focus-within input {\n                color: var(--component-input-color);\n            }\n\n            input {\n                all: unset;\n                flex: 1;\n                font-family: inherit;\n                font-size: 1em;\n                color: inherit;\n                min-width: 0;\n                min-height: 20px;\n            }\n\n            .input-container:hover {\n                border-color: var(--component-input-color);\n                transition: border-color 0.2s ease-in-out;\n            }\n\n            .input-container:focus-within {\n                border-color: var(--component-input-accent);\n            }\n\n            .label-wrapper.is-invalid ::slotted([slot="label"]) {\n                color: var(--component-input-error-color);\n            }\n\n            ::slotted([slot="label"]) {\n                font-weight: 500;\n                font-size: 0.875em;\n                color: var(--component-input-label-color);\n            }\n\n            ::slotted([slot="left-icon"]),\n            ::slotted([slot="right-icon"]) {\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                color: var(--component-input-icon-color);\n            }\n        `),this.shadowRoot.adoptedStyleSheets=[a],this.shadowRoot.innerHTML=`\n            <div class="input-wrapper">\n                ${r?'<div class="label-wrapper"><slot name="label"></slot></div>':""}\n                <div class="input-container">\n                    <slot name="left-icon"></slot>\n                    <input part="input" type="${t}" value="${n}" ${i?"disabled":""} />\n                    <slot name="right-icon"></slot>\n                </div>\n                ${r?"":'<div class="label-wrapper"><slot name="label"></slot></div>'}\n            </div>\n        `,this.input=this.shadowRoot.querySelector("input"),this.inputContainer=this.shadowRoot.querySelector(".input-container"),this.labelWrapper=this.shadowRoot.querySelector(".label-wrapper"),i||(this.input.addEventListener("input",t=>{this.setAttribute("value",t.target.value),this.dispatchEvent(new CustomEvent("input",{detail:{value:t.target.value},bubbles:!0,composed:!0})),this.updateValidationState()}),this.updateValidationState())}}customElements.get("y-input")||customElements.define("y-input",u);class b extends HTMLElement{static get observedAttributes(){return["selected","expanded","href","history"]}constructor(){super(),this.attachShadow({mode:"open"}),this._expanded=!1,this._checkRouteMatchBound=this.checkRouteMatch.bind(this),this.render()}connectedCallback(){this.addHeaderListeners(),this.checkForChildren(),this.updateChildState(),this.updateSelectedState(),this.updateExpandedState(),this.hasAttribute("href")&&(this.checkRouteMatch(),window.addEventListener("popstate",this._checkRouteMatchBound))}disconnectedCallback(){this.hasAttribute("href")&&window.removeEventListener("popstate",this._checkRouteMatchBound)}attributeChangedCallback(t,e,n){e!==n&&("selected"===t&&this.updateSelectedState(),"expanded"===t&&this.updateExpandedState(),"href"===t&&this.checkRouteMatch())}get selected(){return this.hasAttribute("selected")}set selected(t){t?this.setAttribute("selected",""):this.removeAttribute("selected")}get expanded(){return this.hasAttribute("expanded")}set expanded(t){t?this.setAttribute("expanded",""):this.removeAttribute("expanded")}toggle(){if(this.hasChildren()){if(this._expanded)this.collapse();else{const t=this.closest("y-panelbar");if(t&&t.hasAttribute("exclusive")){t.querySelectorAll("y-panel").forEach(t=>{t!==this&&t.expanded&&t.collapse()})}this.expand()}this.dispatchEvent(new CustomEvent("toggle",{detail:{expanded:this._expanded},bubbles:!0,composed:!0}))}}expand(){this.hasChildren()&&(this.expanded=!0,this._expanded=!0,this.updateExpandedState(),this.dispatchEvent(new CustomEvent("expand",{detail:{expanded:!0},bubbles:!0,composed:!0})))}collapse(){this.expanded=!1,this._expanded=!1,this.updateExpandedState(),this.dispatchEvent(new CustomEvent("collapse",{detail:{expanded:!1},bubbles:!0,composed:!0}))}updateSelectedState(){this.classList.toggle("selected",this.selected)}updateChildState(){const t=this.parentElement?.closest("y-panel"),e=Boolean(t&&t!==this);this.setAttribute("data-is-child",e?"true":"false")}checkRouteMatch(){const t=this.getAttribute("href");t&&window.location.pathname===t?this.selected=!0:this.selected=!1}addHeaderListeners(){const t=this.shadowRoot.querySelector(".header");if(!t)return;t.addEventListener("click",()=>{if(this.hasAttribute("href")){const t=this.getAttribute("href");return void("false"!==this.getAttribute("history")?(history.pushState({},"",t),window.dispatchEvent(new PopStateEvent("popstate",{state:{}}))):window.location.href=t)}this.hasChildren()?this.toggle():this.dispatchEvent(new CustomEvent("select",{detail:{selected:!0},bubbles:!0,composed:!0}))}),t.addEventListener("keydown",e=>{" "!==e.key&&"Enter"!==e.key||(e.preventDefault(),t.click())});const e=this.shadowRoot.querySelector('slot[name="children"]');e&&e.addEventListener("slotchange",()=>this.checkForChildren())}hasChildren(){const t=this.shadowRoot.querySelector('slot[name="children"]');if(!t)return!1;return t.assignedNodes({flatten:!0}).some(t=>t.nodeType!==Node.TEXT_NODE||""!==t.textContent.trim())}checkForChildren(){const t=this.hasChildren();this.setAttribute("data-has-children",t?"true":"false"),!t&&this.expanded&&(this.expanded=!1)}updateExpandedState(){const t=this.hasChildren(),e=this.shadowRoot.querySelector(".header"),n=this.expanded&&t;this._expanded=n,e&&e.setAttribute("aria-expanded",String(n))}render(){const t=new CSSStyleSheet;t.replaceSync('\n            :host {\n                display: block;\n                box-sizing: border-box;\n                background: var(--component-panel-background);\n                color: var(--component-panel-color);\n                font-family: var(--font-family-body);\n                overflow: hidden;\n            }\n\n            :host([expanded]) {\n                background: var(--component-panel-expanded-background);\n            }\n\n            :host([selected]) {\n                color: var(--component-panel-accent);\n            }\n\n            :host([data-is-child="true"]) {\n                box-shadow: inset var(--component-panelbar-border-width, 2px) 0 0 0 var(--component-panel-active-border);\n            }\n\n            :host([data-is-child="true"][selected]) {\n                box-shadow: inset var(--component-panelbar-border-width, 2px) 0 0 0 var(--component-panel-accent);\n            }\n\n            :host([selected]) .header:hover {\n                background: var(--component-panel-accent-hover-background);\n            }\n\n            :host([data-is-child="true"]) .header {\n                padding-left: calc(var(--component-panelbar-padding, 4px) * 2);\n            }\n\n            .header {\n                display: flex;\n                align-items: center;\n                gap: var(--spacing-medium, 8px);\n                padding: var(--component-panelbar-padding, 4px);\n                cursor: pointer;\n                transition: background 0.2s ease;\n                user-select: none;\n            }\n\n            .header:hover {\n                background: var(--component-panel-hover-background);\n            }\n\n            :host([data-has-children="false"]) .header {\n                cursor: default;\n            }\n\n            .header ::slotted([slot="icon"]) {\n                margin-right: 6px;\n            }\n\n            .header ::slotted([slot="label"]) {\n                flex-grow: 1;\n                cursor: inherit;\n                font-size: 1rem;\n                line-height: 1.2;\n            }\n\n            .arrow {\n                display: inline-flex;\n                align-items: center;\n                justify-content: center;\n                width: 20px;\n                height: 20px;\n                transition: transform 0.2s ease;\n            }\n\n            :host([expanded]) .arrow {\n                transform: rotate(180deg);\n            }\n\n            .children {\n                display: none;\n                padding: 0;\n                width: 100%;\n                box-sizing: border-box;\n            }\n\n            .children ::slotted(y-panel) {\n                width: 100%;\n                box-sizing: border-box;\n            }\n\n            :host([expanded]) .children {\n                display: block;\n            }\n\n            :host([data-has-children="false"]) .arrow {\n                visibility: hidden;\n            }\n        '),this.shadowRoot.adoptedStyleSheets=[t],this.shadowRoot.innerHTML=`\n            <div class="header" part="header" role="button" tabindex="0" aria-expanded="false">\n                <slot name="icon"></slot>\n                <slot name="label"><slot></slot></slot>\n                <span class="arrow" id="arrow" part="arrow">\n                    ${o}\n                </span>\n            </div>\n            <div class="children" id="childrenContainer" part="children">\n                <slot name="children"></slot>\n            </div>\n        `}}customElements.get("y-panel")||customElements.define("y-panel",b);class m extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.render()}render(){const t=new CSSStyleSheet;t.replaceSync("\n            :host {\n                display: block;\n            }\n        "),this.shadowRoot.adoptedStyleSheets=[t],this.shadowRoot.innerHTML="\n            <slot></slot>\n        "}}customElements.get("y-panelbar")||customElements.define("y-panelbar",m);class v extends HTMLElement{static get observedAttributes(){return["value","min","max","step","size","color","label-display","label-format","indeterminate","disabled"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.hasAttribute("size")||this.setAttribute("size","medium"),this.hasAttribute("min")||this.setAttribute("min","0"),this.hasAttribute("max")||this.setAttribute("max","100"),this.render()}attributeChangedCallback(t,e,n){e!==n&&this.render()}get value(){const t=parseFloat(this.getAttribute("value"));return Number.isNaN(t)?null:t}set value(t){null==t?this.removeAttribute("value"):this.setAttribute("value",String(t))}get min(){return parseFloat(this.getAttribute("min"))||0}set min(t){this.setAttribute("min",String(t))}get max(){return parseFloat(this.getAttribute("max"))||100}set max(t){this.setAttribute("max",String(t))}get step(){const t=parseFloat(this.getAttribute("step"));return Number.isNaN(t)||t<=0?null:t}set step(t){null==t?this.removeAttribute("step"):this.setAttribute("step",String(t))}get size(){return this.getAttribute("size")||"medium"}set size(t){this.setAttribute("size",t)}get color(){return this.getAttribute("color")||"primary"}set color(t){this.setAttribute("color",t)}get labelDisplay(){return"false"!==this.getAttribute("label-display")}set labelDisplay(t){this.setAttribute("label-display",t?"true":"false")}get labelFormat(){return this.getAttribute("label-format")||"percent"}set labelFormat(t){this.setAttribute("label-format",t)}get indeterminate(){return this.hasAttribute("indeterminate")}set indeterminate(t){t?this.setAttribute("indeterminate",""):this.removeAttribute("indeterminate")}get disabled(){return this.hasAttribute("disabled")}set disabled(t){t?this.setAttribute("disabled",""):this.removeAttribute("disabled")}increment(){if(null===this.value)return;const t=this.step||1;this.value=Math.min(this.value+t,this.max)}decrement(){if(null===this.value)return;const t=this.step||1;this.value=Math.max(this.value-t,this.min)}get percentage(){if(null===this.value)return 0;const t=this.max-this.min;if(t<=0)return 0;let e=(this.value-this.min)/t*100;if(this.step){const n=this.step/t*100;e=Math.round(e/n)*n}return Math.max(0,Math.min(100,e))}getBarColor(t){return{primary:"var(--primary-content--)",secondary:"var(--secondary-content--)",base:"var(--base-content--)",success:"var(--success-content--)",warning:"var(--warning-content--)",error:"var(--error-content--)",help:"var(--help-content--)"}[t]||t}getSizeVar(t){const e={small:"var(--component-progress-size-small)",medium:"var(--component-progress-size-medium)",large:"var(--component-progress-size-large)"};return e[t]||e.medium}getLabel(){if(this.indeterminate)return"";if(null===this.value)return"";switch(this.labelFormat){case"value":return`${this.value} / ${this.max}`;case"fraction":return`${this.value-this.min} / ${this.max-this.min}`;default:return`${Math.round(this.percentage)}%`}}render(){const t=this.indeterminate,e=this.percentage,n=this.getBarColor(this.color),o=this.getSizeVar(this.size),i=this.disabled,r=this.labelDisplay&&!t,s=this.getLabel(),a=null!==this.value?this.value:void 0;this.shadowRoot.innerHTML=`\n            <style>\n                :host {\n                    display: block;\n                    font-family: var(--font-family-body);\n                    color: var(--base-content--);\n                    opacity: ${i?"0.5":"1"};\n                    pointer-events: ${i?"none":"auto"};\n                }\n\n                .progress-wrapper {\n                    display: flex;\n                    flex-direction: column;\n                    gap: var(--spacing-2x-small, 4px);\n                }\n\n                .progress-header {\n                    display: flex;\n                    align-items: center;\n                    justify-content: space-between;\n                    font-size: var(--font-size-label, 0.83em);\n                }\n\n                .label {\n                    color: var(--base-content--);\n                }\n\n                .track {\n                    position: relative;\n                    width: 100%;\n                    height: ${o};\n                    background: var(--base-background-component);\n                    border: var(--component-progress-border-width) solid var(--base-background-border);\n                    border-radius: var(--component-progress-border-radius-outer);\n                    overflow: hidden;\n                    box-sizing: border-box;\n                    padding: var(--component-progress-padding);\n                }\n\n                .bar {\n                    position: relative;\n                    height: 100%;\n                    background: ${n};\n                    border-radius: var(--component-progress-border-radius-inner);\n                    width: ${t?"30%":`${e}%`};\n                    transition: ${t?"none":"width 0.3s ease"};\n                    overflow: hidden;\n                    ${t?"animation: indeterminate 1.5s ease-in-out infinite;":""}\n                }\n\n                .value-label {\n                    position: absolute;\n                    top: 0;\n                    left: 0;\n                    right: 0;\n                    bottom: 0;\n                    display: flex;\n                    align-items: center;\n                    justify-content: center;\n                    font-size: var(--font-size-small, 0.75em);\n                    font-variant-numeric: tabular-nums;\n                    white-space: nowrap;\n                    pointer-events: none;\n                    font-weight: 600;\n                }\n\n                .value-label--track {\n                    color: ${n};\n                }\n\n                .value-label--bar {\n                    color: var(--base-background-component);\n                    width: calc(100% / (${e||1} / 100));\n                }\n\n                @keyframes indeterminate {\n                    0% {\n                        transform: translateX(0%);\n                    }\n                    50% {\n                        transform: translateX(233%);\n                    }\n                    100% {\n                        transform: translateX(0%);\n                    }\n                }\n            </style>\n\n            <div class="progress-wrapper">\n                <div class="progress-header">\n                    <span class="label"><slot></slot></span>\n                </div>\n                <div\n                    class="track"\n                    part="track"\n                    role="progressbar"\n                    aria-valuenow="${void 0!==a?a:""}"\n                    aria-valuemin="${this.min}"\n                    aria-valuemax="${this.max}"\n                    ${t?'aria-busy="true"':""}\n                >\n                    ${r?`<span class="value-label value-label--track" part="value-label">${s}</span>`:""}\n                    <div class="bar" part="bar">${r?`<span class="value-label value-label--bar">${s}</span>`:""}</div>\n                </div>\n            </div>\n        `}}customElements.get("y-progress")||customElements.define("y-progress",v);class g extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return["options","name","value","disabled"]}constructor(){super(),this._internals=this.attachInternals(),this.attachShadow({mode:"open"}),this._value=""}connectedCallback(){this.render()}attributeChangedCallback(t,e,n){e!==n&&("value"===t?(this._value=n,this._internals.setFormValue(n,this.name),this.updateChecked()):["options","name","disabled"].includes(t)&&this.render())}get value(){return this._value}set value(t){this._value=t,this.setAttribute("value",t),this._internals.setFormValue(t,this.name),this.updateChecked()}get name(){return this.getAttribute("name")||""}get options(){try{return JSON.parse(this.getAttribute("options")||"[]")}catch{return[]}}set options(t){this.setAttribute("options",JSON.stringify(t))}updateChecked(){this.shadowRoot.querySelectorAll("input[type=radio]").forEach((t,e)=>{const n=t.value===this.value;t.checked=n,t.setAttribute("aria-checked",n),t.setAttribute("tabindex",n?"0":"-1")})}handleKey(t,e,n){const o=n.length;let i=e;if("ArrowDown"===t.key||"ArrowRight"===t.key)t.preventDefault(),i=(e+1)%o;else{if("ArrowUp"!==t.key&&"ArrowLeft"!==t.key)return" "===t.key||"Enter"===t.key?(t.preventDefault(),this.value=n[e].value,void this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0}))):void 0;t.preventDefault(),i=(e-1+o)%o}n[i].focus()}render(){const t=this.name,e=this.hasAttribute("disabled"),n=this.value,o=this.options;this.shadowRoot.innerHTML=`\n            <style>\n            :host {\n                display: block;\n                font-family: var(--font-family-body);\n            }\n            fieldset {\n                border: none;\n                padding: 0;\n                margin: 0;\n                display: flex;\n                flex-direction: column;\n                gap: var(--spacing-x-small, 8px);\n            }\n            label {\n                display: flex;\n                align-items: center;\n                gap: 0.5em;\n                cursor: pointer;\n            }\n            input[type="radio"] {\n                appearance: none;\n                width: var(--component-radio-size, 16px);\n                height: var(--component-radio-size, 16px);\n                border: var(--component-inputs-border-width, 2px) solid var(--component-radio-color);\n                border-radius: 50%;\n                position: relative;\n                outline: none;\n                cursor: pointer;\n            }\n            input[type="radio"]:checked::after {\n                content: '';\n                position: absolute;\n                top: 50%;\n                left: 50%;\n                width: var(--component-radio-dot-size, 8px);\n                height: var(--component-radio-dot-size, 8px);\n                background: var(--component-radio-color);\n                border-radius: 50%;\n                transform: translate(-50%, -50%);\n            }\n            input[type="radio"]:focus-visible {\n                outline: 2px solid var(--component-radio-accent);\n                outline-offset: 2px;\n            }\n            input[disabled] {\n                opacity: 0.5;\n                cursor: not-allowed;\n            }\n        </style>\n            <fieldset role="radiogroup">\n                ${o.map((o,i)=>`\n                    <label>\n                        <input\n                            type="radio"\n                            name="${t}"\n                            value="${o.value}"\n                            ${e?"disabled":""}\n                            ${n===o.value?"checked":""}\n                            tabindex="${n?n===o.value?"0":"-1":0===i?"0":"-1"}"\n                            role="radio"\n                            aria-checked="${n===o.value}"\n                        />\n                        ${o.label}\n                    </label>\n                `).join("")}\n            </fieldset>\n        `,this.shadowRoot.querySelectorAll("input[type=radio]").forEach((t,e,n)=>{t.addEventListener("keydown",t=>this.handleKey(t,e,n)),t.addEventListener("click",t=>{this.value=t.target.value,this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0}))})})}}customElements.get("y-radio")||customElements.define("y-radio",g);class y extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return["label-position","disabled","invalid","required","value","name","placeholder","options","display-mode"]}constructor(){super(),this._internals=this.attachInternals(),this.attachShadow({mode:"open"}),this.selectedValues=new Set,this.render()}connectedCallback(){this.hasAttribute("label-position")||this.setAttribute("label-position","top"),this.updateValidation(),this._internals.setFormValue(this.value)}attributeChangedCallback(t,e,n){e!==n&&("value"===t&&(this.updateDisplay(),this._internals.setFormValue(n,this.getAttribute("name")),this.updateSelectedStyles()),["label-position","disabled","invalid","required","placeholder","options"].includes(t)&&this.render(),"name"===t&&this._internals.setFormValue(this.value,n))}get value(){return this.hasAttribute("multiple")?Array.from(this.selectedValues).join(","):this._value||""}set value(t){this.hasAttribute("multiple")?"string"==typeof t?this.selectedValues=new Set(t.split(",").map(t=>t.trim())):Array.isArray(t)&&(this.selectedValues=new Set(t)):this._value=t,this.setAttribute("value",t),this._internals.setFormValue(this.value,this.getAttribute("name")),this.updateDisplay(),this.updateSelectedStyles()}getOptions(){try{return JSON.parse(this.getAttribute("options")||"[]")}catch(t){return[]}}getDisplayText(){const t=this.getOptions(),e=this.hasAttribute("multiple"),n="tag"===this.getAttribute("display-mode");if(e&&n)return"";if(e){const e=t.filter(t=>this.selectedValues.has(t.value)).length;return e>0?`${e} Selected`:this.getAttribute("placeholder")||"Select..."}{const e=t.find(t=>t.value===this.value);return e?.label||this.getAttribute("placeholder")||"Select..."}}toggleDropdown(){this.dropdown.classList.contains("open")?this.closeDropdown():(this.dropdown.classList.add("open"),this.selectContainer.classList.add("open"),this._positionDropdown(),this._onScrollOrResize=this._positionDropdown.bind(this),window.addEventListener("scroll",this._onScrollOrResize,!0),window.addEventListener("resize",this._onScrollOrResize))}closeDropdown(){this.dropdown.classList.remove("open"),this.selectContainer.classList.remove("open"),this._onScrollOrResize&&(window.removeEventListener("scroll",this._onScrollOrResize,!0),window.removeEventListener("resize",this._onScrollOrResize))}_positionDropdown(){const t=this.selectContainer.getBoundingClientRect();this.dropdown.style.left=`${t.left}px`,this.dropdown.style.width=`${t.width}px`;const e=window.innerHeight-t.bottom-4;e>=200||e>=t.top?(this.dropdown.style.top=`${t.bottom+4}px`,this.dropdown.style.bottom="auto"):(this.dropdown.style.bottom=window.innerHeight-t.top+4+"px",this.dropdown.style.top="auto")}queryRefs(){this.selectContainer=this.shadowRoot.querySelector(".select-container"),this.dropdown=this.shadowRoot.querySelector(".dropdown"),this.labelWrapper=this.shadowRoot.querySelector(".label-wrapper"),this.displayElement=this.shadowRoot.querySelector(".value-display")}attachEventListeners(){this.selectContainer.addEventListener("click",()=>this.toggleDropdown()),this.dropdown.querySelectorAll(".dropdown-item").forEach(t=>{t.addEventListener("click",()=>{const e=t.getAttribute("data-value"),n=this.hasAttribute("required");if(this.hasAttribute("multiple"))this.selectedValues.has(e)?(!n||this.selectedValues.size>1)&&this.selectedValues.delete(e):this.selectedValues.add(e),this.setAttribute("value",Array.from(this.selectedValues).join(","));else{const t=e===this.value;this.value=t&&!n?"":e}this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0})),this.updateValidation(),this.closeDropdown()})})}renderTags(){const t=this.hasAttribute("multiple"),e="tag"===this.getAttribute("display-mode");if(!t||!e||!this.displayElement)return;const n=this.getOptions();this.displayElement.innerHTML="";n.filter(t=>this.selectedValues.has(t.value)).forEach(t=>{const e=document.createElement("y-tag");e.setAttribute("removable",""),e.setAttribute("color","primary"),e.setAttribute("style-type","filled"),e.textContent=t.label,e.dataset.value=t.value,e.addEventListener("remove",()=>{this.selectedValues.delete(t.value),this.setAttribute("value",Array.from(this.selectedValues).join(",")),this.renderTags(),this.updateSelectedStyles(),this.updateValidation(),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0}))}),this.displayElement.appendChild(e)})}updateDisplay(){"tag"===this.getAttribute("display-mode")?this.renderTags():this.displayElement&&(this.displayElement.textContent=this.getDisplayText())}updateSelectedStyles(){const t=this.hasAttribute("multiple")?this.selectedValues:new Set([this.value]);this.dropdown?.querySelectorAll(".dropdown-item").forEach(e=>{const n=e.getAttribute("data-value");e.classList.toggle("selected",t.has(n))})}updateValidation(){const t=this.hasAttribute("required"),e=this.hasAttribute("multiple")?this.selectedValues.size>0:this.value&&""!==this.value;t&&!e?this.setAttribute("invalid",""):this.removeAttribute("invalid")}updateValidationState(){const t=this.hasAttribute("invalid");this.selectContainer?.classList.toggle("is-invalid",t),this.labelWrapper?.classList.toggle("is-invalid",t)}render(){this.applyStyles(),this.shadowRoot.innerHTML=this.generateTemplate(),this.queryRefs(),this.attachEventListeners(),this.updateValidationState()}applyStyles(){const t=this.hasAttribute("disabled"),e=new CSSStyleSheet;e.replaceSync(`\n            :host {\n                display: block;\n                font-family: var(--font-family-body);\n                color: var(--component-select-color);\n                opacity: ${t?"0.75":"1"};\n                pointer-events: ${t?"none":"auto"};\n            }\n\n            .select-wrapper {\n                display: flex;\n                flex-direction: column;\n                gap: var(--spacing-2x-small, 4px);\n                position: relative;\n            }\n\n            .select-container {\n                display: flex;\n                align-items: center;\n                gap: var(--spacing-x-small);\n                background: var(--component-select-background);\n                border: var(--component-inputs-border-width) solid var(--component-select-border-color);\n                border-radius: var(--component-inputs-border-radius-outer);\n                padding: var(--component-inputs-padding-medium);\n                box-sizing: border-box;\n                transition: border-color 0.2s ease-in-out;\n                cursor: pointer;\n            }\n\n            .select-container:hover {\n                border-color: var(--component-select-color);\n            }\n\n            .select-container:focus-within {\n                border-color: var(--component-select-accent);\n            }\n\n            .select-container.is-invalid {\n                border-color: var(--component-select-error-border-color);\n                background: var(--component-select-error-background);\n            }\n\n            .select-container.is-invalid:hover {\n                border-color: var(--component-select-error-color);\n            }\n\n            .select-container.is-invalid:focus-within {\n                border-color: var(--component-select-error-color);\n            }\n\n            .label-wrapper.is-invalid ::slotted([slot="label"]) {\n                color: var(--component-select-error-color);\n            }\n\n            ::slotted([slot="label"]) {\n                font-weight: 500;\n                font-size: 0.875em;\n                color: var(--component-select-label-color);\n            }\n\n            .dropdown {\n                position: fixed;\n                z-index: 9999;\n                background: var(--component-select-background);\n                border: var(--component-inputs-border-width) solid var(--component-select-border-color);\n                border-radius: var(--component-inputs-border-radius-outer);\n                box-shadow: var(--component-select-shadow, 0 2px 8px rgba(0,0,0,0.1));\n                max-height: 200px;\n                overflow-y: auto;\n                display: none;\n            }\n\n            .dropdown.open {\n                display: block;\n            }\n\n            .dropdown-item {\n                padding: var(--spacing-small, 6px);\n                cursor: pointer;\n            }\n\n            .dropdown-item:hover {\n                background: var(--component-select-hover-background);\n            }\n\n            .dropdown-item.selected {\n                background: var(--component-select-accent);\n                color: var(--component-select-accent-contrast);\n            }\n\n            .value-display {\n                flex: 1;\n                font-size: 1em;\n                color: inherit;\n                display: flex;\n                gap: var(--spacing-x-small);\n            }\n\n            .label-wrapper {\n                display: block;\n            }\n\n            .chevron-icon {\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                margin-left: auto;\n                transition: transform 0.2s ease;\n            }\n\n            .chevron-icon svg {\n                transition: transform 0.2s ease;\n                transform-origin: center;\n            }\n\n            .select-container.open .chevron-icon svg {\n                transform: scaleY(-1);\n            }\n        `),this.shadowRoot.adoptedStyleSheets=[e]}generateTemplate(){const t="top"===(this.getAttribute("label-position")||"top"),e=this.hasAttribute("invalid"),n=this.hasAttribute("multiple")?this.selectedValues:new Set([this.value]);return`\n            <div class="select-wrapper">\n                ${t?'<div class="label-wrapper"><slot name="label"></slot></div>':""}\n                <div class="select-container ${e?"is-invalid":""}" tabindex="0">\n                    <div class="value-display">${this.getDisplayText()}</div>\n                    <div class="chevron-icon" part="chevron-icon">\n                        ${o}\n                    </div>\n                </div>\n                ${t?"":'<div class="label-wrapper"><slot name="label"></slot></div>'}\n                <div class="dropdown" part="dropdown">\n                    ${this.getOptions().map(t=>`\n                        <div class="dropdown-item ${n.has(t.value)?"selected":""}" data-value="${t.value}">\n                            ${t.label}\n                        </div>\n                    `).join("")}\n                </div>\n            </div>\n        `}}customElements.get("y-select")||customElements.define("y-select",y);class f extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return["value","min","max","step","size","color","disabled","name","orientation"]}constructor(){super(),this._internals=this.attachInternals(),this.attachShadow({mode:"open"}),this._dragging=!1}connectedCallback(){this.hasAttribute("size")||this.setAttribute("size","medium"),this.hasAttribute("min")||this.setAttribute("min","0"),this.hasAttribute("max")||this.setAttribute("max","100"),this.hasAttribute("value")||this.setAttribute("value","50"),this._internals.setFormValue(this.value),this.render(),this._bindEvents()}attributeChangedCallback(t,e,n){e!==n&&("value"!==t&&"name"!==t||this._internals.setFormValue(this.value,this.getAttribute("name")),"value"===t&&this.shadowRoot.querySelector(".slider-track")?this._updateVisuals():(this.render(),this._bindEvents()))}get value(){const t=parseFloat(this.getAttribute("value"));return Number.isNaN(t)?0:t}set value(t){const e=Math.max(this.min,Math.min(this.max,Number(t))),n=this._snapToStep(e);this.setAttribute("value",String(n))}get min(){return parseFloat(this.getAttribute("min"))||0}set min(t){this.setAttribute("min",String(t))}get max(){return parseFloat(this.getAttribute("max"))||100}set max(t){this.setAttribute("max",String(t))}get step(){const t=parseFloat(this.getAttribute("step"));return Number.isNaN(t)||t<=0?null:t}set step(t){null==t?this.removeAttribute("step"):this.setAttribute("step",String(t))}get size(){return this.getAttribute("size")||"medium"}set size(t){this.setAttribute("size",t)}get color(){return this.getAttribute("color")||"primary"}set color(t){this.setAttribute("color",t)}get disabled(){return this.hasAttribute("disabled")}set disabled(t){t?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get orientation(){return this.getAttribute("orientation")||"horizontal"}set orientation(t){this.setAttribute("orientation",t)}get percentage(){const t=this.max-this.min;if(t<=0)return 0;const e=(this.value-this.min)/t*100;return Math.max(0,Math.min(100,e))}_snapToStep(t){if(!this.step)return t;const e=Math.round((t-this.min)/this.step);return Math.max(this.min,Math.min(this.max,this.min+e*this.step))}getTrackColor(t){return{primary:"var(--primary-background-hover)",secondary:"var(--secondary-background-hover)",base:"var(--base-background-active)",success:"var(--success-background-hover)",warning:"var(--warning-background-hover)",error:"var(--error-background-hover)",help:"var(--help-background-hover)"}[t]||t}getThumbColor(t){return{primary:"var(--primary-content--)",secondary:"var(--secondary-content--)",base:"var(--base-content--)",success:"var(--success-content--)",warning:"var(--warning-content--)",error:"var(--error-content--)",help:"var(--help-content--)"}[t]||t}getSizeVars(t){const e={small:{trackHeight:"var(--sizing-small, 27px)"},medium:{trackHeight:"var(--sizing-medium, 35px)"},large:{trackHeight:"var(--sizing-large, 51px)"}};return e[t]||e.medium}_bindEvents(){const t=this.shadowRoot.querySelector(".slider-track"),e=this.shadowRoot.querySelector(".thumb");if(!t||!e)return;const n=t=>{this.disabled||(t.preventDefault(),this._dragging=!0,this._updateFromPointer(t),document.addEventListener("pointermove",o),document.addEventListener("pointerup",i))},o=t=>{this._dragging&&this._updateFromPointer(t)},i=()=>{this._dragging=!1,document.removeEventListener("pointermove",o),document.removeEventListener("pointerup",i),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))};t.addEventListener("pointerdown",n),e.addEventListener("pointerdown",n),t.addEventListener("keydown",t=>{if(this.disabled)return;const e=this.step||1;let n=!0;switch(t.key){case"ArrowRight":case"ArrowUp":this.value=this.value+e;break;case"ArrowLeft":case"ArrowDown":this.value=this.value-e;break;case"Home":this.value=this.min;break;case"End":this.value=this.max;break;default:n=!1}n&&(t.preventDefault(),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})))})}_updateFromPointer(t){const e=this.shadowRoot.querySelector(".slider-track"),n=(this.shadowRoot.querySelector(".slider-inner")||e).getBoundingClientRect(),o=Math.max(0,Math.min(1,(t.clientX-n.left)/n.width)),i=this.min+o*(this.max-this.min);this.value=i,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}_updateVisuals(){const t=this.percentage,e=this.shadowRoot.querySelector(".fill"),n=this.shadowRoot.querySelector(".thumb"),o=this.shadowRoot.querySelector(".slider-track");e&&(e.style.width=`${t}%`),n&&(n.style.left=`${t}%`),o&&o.setAttribute("aria-valuenow",String(this.value))}render(){const t=this.percentage,e=this.getTrackColor(this.color),n=this.getThumbColor(this.color),{trackHeight:o}=this.getSizeVars(this.size),i=this.disabled;this.shadowRoot.innerHTML=`\n            <style>\n                :host {\n                    display: inline-block;\n                    width: var(--component-slider-width, 129px);\n                    font-family: var(--font-family-body);\n                    color: var(--base-content--);\n                    opacity: ${i?"0.5":"1"};\n                    pointer-events: ${i?"none":"auto"};\n                }\n\n                .slider-wrapper {\n                    display: flex;\n                    flex-direction: column;\n                    gap: var(--spacing-2x-small, 4px);\n                }\n\n                .slider-track {\n                    position: relative;\n                    width: 100%;\n                    height: ${o};\n                    background: var(--base-background-component);\n                    border: var(--component-slider-border-width) solid var(--base-background-border);\n                    border-radius: var(--component-slider-border-radius-outer);\n                    box-sizing: border-box;\n                    padding: var(--component-slider-padding);\n                    cursor: pointer;\n                    outline: none;\n                }\n\n                .slider-track:focus-visible {\n                    border-color: ${n};\n                }\n\n                .slider-inner {\n                    position: relative;\n                    width: 100%;\n                    height: 100%;\n                    overflow: hidden;\n                }\n\n                .fill {\n                    position: absolute;\n                    top: 0;\n                    left: 0;\n                    height: 100%;\n                    background: ${e};\n                    border-radius: var(--component-slider-border-radius-inner) 0 0 var(--component-slider-border-radius-inner);\n                    width: ${t}%;\n                    pointer-events: none;\n                }\n\n                .thumb {\n                    position: absolute;\n                    top: 0;\n                    left: ${t}%;\n                    transform: translateX(-50%);\n                    width: 8px;\n                    height: 100%;\n                    background: ${n};\n                    border-radius: var(--component-slider-thumb-border-radius);\n                    cursor: grab;\n                    z-index: 1;\n                    touch-action: none;\n                }\n\n                .thumb:active {\n                    cursor: grabbing;\n                }\n            </style>\n\n            <div class="slider-wrapper">\n                <div\n                    class="slider-track"\n                    part="track"\n                    role="slider"\n                    tabindex="${i?"-1":"0"}"\n                    aria-valuenow="${this.value}"\n                    aria-valuemin="${this.min}"\n                    aria-valuemax="${this.max}"\n                    ${this.step?`aria-valuestep="${this.step}"`:""}\n                    aria-orientation="${this.orientation}"\n                    ${i?'aria-disabled="true"':""}\n                >\n                    <div class="slider-inner">\n                        <div class="fill" part="fill"></div>\n                        <div class="thumb" part="thumb"></div>\n                    </div>\n                </div>\n            </div>\n        `}}customElements.get("y-slider")||customElements.define("y-slider",f);class w extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return["checked","disabled","animate","toggle-label","label-display","label-position","size","value"]}constructor(){super(),this._internals=this.attachInternals(),this.attachShadow({mode:"open"})}connectedCallback(){this.hasAttribute("size")||this.setAttribute("size","medium"),this.hasAttribute("label-display")||this.setAttribute("label-display","true"),this.hasAttribute("label-position")||this.setAttribute("label-position","top"),this.hasAttribute("animate")||this.setAttribute("animate","true"),this.render(),this.mirrorToggleLabels();const t=this.shadowRoot.querySelector(".switch");t.addEventListener("click",()=>this.toggle()),t.addEventListener("keydown",t=>{" "!==t.key&&"Enter"!==t.key||(t.preventDefault(),this.toggle())})}attributeChangedCallback(t,e,n){e!==n&&this.update()}get checked(){return this.hasAttribute("checked")}set checked(t){t?this.setAttribute("checked",""):this.removeAttribute("checked"),this.update()}get value(){return this.getAttribute("value")||"on"}set value(t){this.setAttribute("value",t),this.update()}toggle(){this.hasAttribute("disabled")||(this.checked=!this.checked,this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})))}labelTag(t){const e=this.getAttribute("label-position");return"top"===t&&("top"===e||"left"===e)||"bottom"===t&&("bottom"===e||"right"===e)?'<label><slot name="label"></slot></label>':""}mirrorToggleLabels(){requestAnimationFrame(()=>{const t=this.shadowRoot?.querySelector(".toggle");if(!t)return;t.innerHTML="";const e=this.querySelector('[slot="off-label"]'),n=this.querySelector('[slot="on-label"]'),o=document.createTextNode("Off"),i=document.createTextNode("On"),r=e?.cloneNode(!0)||o,s=n?.cloneNode(!0)||i,a=document.createElement("span");a.className="off",a.appendChild(r);const l=document.createElement("span");l.className="on",l.appendChild(s),t.appendChild(a),t.appendChild(l)})}update(){this.updateSizeStyles(),this.updateTogglePosition(),this.updateToggleLabelDisplay(),this.updateLabelDisplay(),this.updateDirection(),this.updateAria(),this.updateFormValue(),this.mirrorToggleLabels()}updateSizeStyles(){const t=this.getAttribute("size")||"medium";this.style.setProperty("--switch-height",{small:"24px",medium:"32px",large:"40px"}[t]),this.style.setProperty("--switch-width-fixed",{small:"44px",medium:"56px",large:"72px"}[t]),this.style.setProperty("--toggle-size","calc(var(--switch-height) - (var(--switch-padding) * 2) - (var(--component-switch-border-width, 0px) * 2))"),this.style.setProperty("--switch-font-size",{small:"var(--font-size-small)",medium:"var(--font-size-label)",large:"var(--font-size-h4)"}[t])}updateTogglePosition(){const t=this.checked,e=this.hasAttribute("toggle-label")&&"false"!==this.getAttribute("toggle-label");this.style.setProperty("--toggle-x",t?e?"100%":"calc(var(--switch-width) - var(--toggle-size) - (var(--switch-padding) * 2) - (var(--component-switch-border-width, 0px) * 2))":"0"),this.style.setProperty("--toggle-bg",t?"var(--primary-content--)":"var(--base-content-light)"),this.style.setProperty("--toggle-transition","false"===this.getAttribute("animate")?"none":"transform 0.25s ease, background 0.25s ease")}updateLabelDisplay(){const t="false"!==this.getAttribute("label-display"),e=this.hasAttribute("toggle-label")&&"false"!==this.getAttribute("toggle-label");this.style.setProperty("--show-labels",t&&e?"flex":"none")}updateToggleLabelDisplay(){const t=this.hasAttribute("toggle-label")&&"false"!==this.getAttribute("toggle-label");this.style.setProperty("--show-toggle-label",t?"inline-flex":"none"),this.style.setProperty("--switch-width",t?"max-content":"var(--switch-width-fixed)"),this.style.setProperty("--toggle-width",t?"auto":"var(--toggle-size)"),this.style.setProperty("--toggle-padding",t?"0 var(--spacing-small)":"0"),this.style.setProperty("--toggle-radius",t?"var(--component-switch-border-radius)":"9999px")}updateDirection(){const t=this.getAttribute("label-position");this.style.setProperty("--switch-dir",{top:"column",bottom:"column-reverse",left:"row-reverse",right:"row"}[t]||"column")}updateAria(){const t=this.shadowRoot?.querySelector(".switch");t&&(t.setAttribute("aria-checked",this.checked),t.setAttribute("aria-disabled",this.disabled?"true":"false"))}updateFormValue(){this._internals.setFormValue(this.checked?this.value:"")}render(){this.shadowRoot.innerHTML=`\n            <style>\n                :host {\n                    display: inline-flex;\n                    flex-direction: var(--switch-dir, column);\n                    align-items: center;\n                    gap: var(--spacing-x-small);\n                    font-family: var(--font-family-body);\n                    --switch-padding: var(--component-switch-padding, 2px);\n                    --show-labels: flex;\n                    --show-toggle-label: none;\n                    --switch-width: max-content;\n                    --toggle-width: auto;\n                    --toggle-padding: 0 var(--spacing-small);\n                    --toggle-radius: var(--component-switch-border-radius);\n                }\n\n                .label {\n                    font-size: var(--font-size-label);\n                    color: var(--base-content--);\n                }\n\n                .switch {\n                    position: relative;\n                    display: inline-flex;\n                    align-items: center;\n                    background: var(--base-background-component);\n                    border: var(--component-switch-border-width) solid var(--base-background-border);\n                    border-radius: var(--component-switch-border-radius);\n                    cursor: pointer;\n                    height: var(--switch-height);\n                    font-size: var(--switch-font-size);\n                    box-sizing: border-box;\n                    padding: var(--switch-padding);\n                    width: var(--switch-width, max-content);\n                }\n\n                .track {\n                    display: flex;\n                    align-items: center;\n                    height: 100%;\n                    position: relative;\n                    z-index: 0;\n                }\n\n                .label-content {\n                    flex: 0 0 auto;\n                    align-items: center;\n                    justify-content: center;\n                    padding: 0 var(--spacing-small);\n                    white-space: nowrap;\n                    position: relative;\n                    z-index: 0;\n                    color: var(--base-content-light);\n                    display: var(--show-labels, flex);\n                }\n\n                .toggle {\n                    position: absolute;\n                    top: var(--switch-padding);\n                    bottom: var(--switch-padding);\n                    left: var(--switch-padding);\n                    height: calc(100% - (var(--switch-padding) + var(--switch-padding)));\n                    width: var(--toggle-width, auto);\n                    background: var(--toggle-bg, var(--base-content-light));\n                    color: var(--base-background-component);\n                    border-radius: var(--toggle-radius, var(--component-switch-border-radius));\n                    display: flex;\n                    align-items: center;\n                    justify-content: center;\n                    padding: var(--toggle-padding, 0 var(--spacing-small));\n                    font-weight: 500;\n                    z-index: 1;\n                    white-space: nowrap;\n                    transform: translateX(var(--toggle-x, 0));\n                    transition: var(--toggle-transition, transform 0.25s ease, background 0.25s ease);\n                }\n\n                .toggle .on,\n                .toggle .off {\n                    display: none;\n                }\n\n                :host([checked]) .toggle .on {\n                    display: var(--show-toggle-label, none);\n                }\n\n                :host(:not([checked])) .toggle .off {\n                    display: var(--show-toggle-label, none);\n                }\n\n\n                :host([animate="false"]) .toggle {\n                    transition: none !important;\n                }\n            </style>\n\n            ${this.labelTag("top")}\n\n            <div class="switch" part="switch" tabindex="0" role="switch" aria-checked="${this.checked}" aria-disabled="${this.disabled}">\n                <div class="track">\n                    <div class="label-content"><slot name="off-label">Off</slot></div>\n                    <div class="label-content"><slot name="on-label">On</slot></div>\n                </div>\n                <div class="toggle" part="toggle">\n                    <span class="off"></span>\n                    <span class="on"></span>\n                </div>\n            </div>\n\n            ${this.labelTag("bottom")}\n        `,this.update()}}customElements.get("y-switch")||customElements.define("y-switch",w);class x extends HTMLElement{static get observedAttributes(){return["columns","data","striped","size"]}constructor(){super(),this.attachShadow({mode:"open"}),this._sortField=null,this._sortDir="none",this._parsedData=[],this._parsedColumns=[]}connectedCallback(){this._parseAttributes(),this.render()}attributeChangedCallback(t,e,n){e!==n&&(this._parseAttributes(),this.render())}get columns(){return this.getAttribute("columns")}set columns(t){this.setAttribute("columns","string"==typeof t?t:JSON.stringify(t))}get data(){return this.getAttribute("data")}set data(t){this.setAttribute("data","string"==typeof t?t:JSON.stringify(t))}get striped(){return this.hasAttribute("striped")}set striped(t){t?this.setAttribute("striped",""):this.removeAttribute("striped")}get size(){return this.getAttribute("size")||"medium"}set size(t){this.setAttribute("size",t)}_parseAttributes(){try{this._parsedColumns=JSON.parse(this.columns||"[]")}catch{this._parsedColumns=[]}try{this._parsedData=JSON.parse(this.data||"[]")}catch{this._parsedData=[]}}_onHeaderClick(t){this._sortField===t?(this._sortDir="asc"===this._sortDir?"desc":"desc"===this._sortDir?"none":"asc","none"===this._sortDir&&(this._sortField=null)):(this._sortField=t,this._sortDir="asc"),this.dispatchEvent(new CustomEvent("sort",{detail:{field:this._sortField,direction:this._sortDir},bubbles:!0,composed:!0})),this.render()}_getSortedData(){const t=[...this._parsedData];if(!this._sortField||"none"===this._sortDir)return t;const e="asc"===this._sortDir?1:-1,n=this._sortField;return t.sort((t,o)=>{const i=t[n],r=o[n];return null==i&&null==r?0:null==i?1:null==r?-1:"number"==typeof i&&"number"==typeof r?(i-r)*e:String(i).localeCompare(String(r))*e})}_sortIcon(t){const e=this._sortField===t?this._sortDir:"none";return function(t,e){return`<svg class="sort-icon" xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16" aria-hidden="true">\n            <path d="M6 1 L11 7 L1 7 Z" fill="${t}"/>\n            <path d="M6 15 L11 9 L1 9 Z" fill="${e}"/>\n        </svg>`}("asc"===e?"var(--component-table-color, #333)":"var(--component-table-color-light, #bbb)","desc"===e?"var(--component-table-color, #333)":"var(--component-table-color-light, #bbb)")}render(){const t=this._parsedColumns,e=this._getSortedData(),n=this.size,o=this.striped,i=`var(--component-table-padding-${n}, 8px)`;this.shadowRoot.innerHTML="";const r=document.createElement("style");r.textContent=`\n            :host {\n                display: block;\n                font-family: var(--font-family-body, sans-serif);\n                color: var(--component-table-color, #000);\n            }\n\n            .table-wrapper {\n                overflow-x: auto;\n            }\n\n            table {\n                width: 100%;\n                border-collapse: collapse;\n                table-layout: auto;\n            }\n\n            thead th {\n                position: relative;\n                padding: ${i};\n                text-align: left;\n                font-weight: 500;\n                font-size: var(--font-size-paragraph, 1em);\n                white-space: nowrap;\n                background: transparent;\n                border-bottom: var(--component-table-border-width-header, 2px) solid var(--component-table-border-color, #ccc);\n                user-select: none;\n            }\n\n            thead th.sortable {\n                cursor: pointer;\n            }\n\n            thead th.sortable:hover {\n                background: var(--component-table-hover-background, #f5f5f5);\n            }\n\n            .th-content {\n                display: inline-flex;\n                align-items: center;\n                gap: 6px;\n            }\n\n            .sort-icon {\n                flex-shrink: 0;\n                vertical-align: middle;\n            }\n\n            tbody td {\n                padding: ${i};\n                font-size: var(--font-size-paragraph, 1em);\n                border-bottom: var(--component-table-border-width, 2px) solid var(--component-table-border-color, #ccc);\n            }\n\n            tbody tr:last-child td {\n                border-bottom: none;\n            }\n\n            tbody td.row-header {\n                font-weight: 500;\n            }\n\n            ${o?"tbody tr:nth-child(even) {\n                    background: var(--component-table-hover-background, #f9f9f9);\n                }":""}\n\n            tbody tr:hover {\n                background: var(--component-table-active-background, #eee);\n            }\n        `,this.shadowRoot.appendChild(r);const s=document.createElement("div");s.className="table-wrapper";const a=document.createElement("table");a.setAttribute("role","grid");const l=document.createElement("thead"),d=document.createElement("tr");t.forEach(t=>{const e=document.createElement("th");e.setAttribute("scope","col");const n=!1!==t.sortable;n&&(e.classList.add("sortable"),e.setAttribute("aria-sort",this._sortField===t.field?"asc"===this._sortDir?"ascending":"desc"===this._sortDir?"descending":"none":"none"),e.addEventListener("click",()=>this._onHeaderClick(t.field)));const o=document.createElement("span");if(o.className="th-content",o.textContent=t.header||t.field,n){const e=document.createElement("span");e.innerHTML=this._sortIcon(t.field),o.appendChild(e)}e.appendChild(o),d.appendChild(e)}),l.appendChild(d),a.appendChild(l);const c=document.createElement("tbody");e.forEach(e=>{const n=document.createElement("tr");t.forEach((t,o)=>{const i=document.createElement("td");(t.rowHeader||0===o)&&i.classList.add("row-header"),i.textContent=e[t.field]??"",n.appendChild(i)}),c.appendChild(n)}),a.appendChild(c),s.appendChild(a),this.shadowRoot.appendChild(s)}}customElements.get("y-table")||customElements.define("y-table",x);class k extends HTMLElement{static get observedAttributes(){return["removable","color","style-type","shape"]}constructor(){super(),this.attachShadow({mode:"open"}),this.render()}connectedCallback(){this.render()}attributeChangedCallback(t,e,n){e!==n&&this.render()}render(){const t=this.hasAttribute("removable"),e=this.getAttribute("color")||"base",n=this.getAttribute("style-type")||"filled",o=this.getAttribute("shape")||"square",i=document.createElement("style");i.textContent=this.getStyle(e,n,o),this.shadowRoot.innerHTML="",this.shadowRoot.appendChild(i),this.shadowRoot.innerHTML+=`\n            <span class="tag">\n                <slot></slot>\n                ${t?'\n                    <button class="remove" aria-label="Remove tag">\n                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"><line x1="6" y1="6" x2="14" y2="14" /><line x1="14" y1="6" x2="6" y2="14" /></svg>\n                    </button>\n                ':""}\n            </span>\n        `,t&&this.shadowRoot.querySelector(".remove").addEventListener("click",t=>{t.stopPropagation(),this.dispatchEvent(new CustomEvent("remove",{bubbles:!0,composed:!0}))})}getStyle(t,e,n){const o={primary:["--primary-content--","--primary-content-hover","--primary-background-component"],secondary:["--secondary-content--","--secondary-content-hover","--secondary-background-component"],base:["--base-content--","--base-content-lighter","--base-background-component"],success:["--success-content--","--success-content-hover","--success-background-component"],error:["--error-content--","--error-content-hover","--error-background-component"],warning:["--warning-content--","--warning-content-hover","--warning-background-component"],help:["--help-content--","--help-content-hover","--help-background-component"]},[i,r,s]=o[t]||o.base,a={filled:`\n                .tag {\n                    background: var(${i});\n                    color: var(${s});\n                }\n                .remove {\n                    color: var(${s});\n                }\n            `,outlined:`\n                .tag {\n                    border: 1px solid var(${i});\n                    background: transparent;\n                    color: var(${i});\n                }\n                .remove {\n                    color: var(${i});\n                }\n            `,flat:`\n                .tag {\n                    background: transparent;\n                    color: var(${i});\n                }\n                .remove {\n                    color: var(${i});\n                }\n            `};return`\n            :host {\n                display: inline-block;\n                font-family: var(--font-family-body, sans-serif);\n                font-size: var(--font-size-label, 0.83em);\n            }\n            .tag {\n                display: inline-flex;\n                align-items: center;\n                gap: var(--spacing-2x-small);\n                padding: 0 var(--component-tag-padding-medium, var(--spacing-x-small));\n                border: 1px solid transparent;\n                transition: background-color 0.2s, color 0.2s;\n                border-radius: ${"round"===n?"var(--component-tag-border-radius-circle)":"var(--component-tag-border-radius-square)"};\n            }\n            .remove {\n                all: unset;\n                cursor: pointer;\n                display: flex;\n                align-items: center;\n            }\n            .remove svg {\n                pointer-events: none;\n            }\n        `+(a[e]||a.filled)}}customElements.get("y-tag")||customElements.define("y-tag",k);class A extends HTMLElement{static get observedAttributes(){return["options","size","position"]}constructor(){super(),this.attachShadow({mode:"open"}),this._activeTab=""}connectedCallback(){this.hasAttribute("size")||this.setAttribute("size","medium"),this.hasAttribute("position")||this.setAttribute("position","top"),this.render()}attributeChangedCallback(t,e,n){"options"!==t&&"size"!==t&&"position"!==t||e===n||this.render()}get options(){try{return JSON.parse(this.getAttribute("options")||"[]")}catch{return[]}}set options(t){this.setAttribute("options",JSON.stringify(t)),this.render()}get size(){const t=this.getAttribute("size");return["small","medium","large"].includes(t)?t:"medium"}set size(t){["small","medium","large"].includes(t)?this.setAttribute("size",t):this.setAttribute("size","medium")}get position(){const t=this.getAttribute("position");return["top","bottom","left","right"].includes(t)?t:"top"}set position(t){["top","bottom","left","right"].includes(t)?this.setAttribute("position",t):this.setAttribute("position","top")}activateTab(t){const e=this.options.find(e=>e.id===t);e&&!e.disabled&&this._activeTab!==t&&(this._activeTab=t,this.render())}_setupEvents(){const t=Array.from(this.shadowRoot.querySelectorAll("button"));t.forEach(e=>{e.disabled||(e.addEventListener("click",()=>this.activateTab(e.dataset.id)),e.addEventListener("keydown",e=>{this._handleTabKeydown(e,t)}))})}_handleTabKeydown(t,e){const n=e.indexOf(t.currentTarget);"ArrowRight"===t.key?(t.preventDefault(),this._findSiblingButton(e,n,1)?.focus()):"ArrowLeft"===t.key?(t.preventDefault(),this._findSiblingButton(e,n,-1)?.focus()):"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.activateTab(t.currentTarget.dataset.id))}_findSiblingButton(t,e,n){for(let o=1;o<=t.length;o++){const i=t[(e+o*n+t.length)%t.length];if(!i.disabled)return i}return null}_resolveActiveTab(t){const e=!this._activeTab||t.find(t=>t.id===this._activeTab)?.disabled;t.length&&e&&(this._activeTab=t.find(t=>!t.disabled)?.id||"")}_getStyles(){return`\n            :host {\n                display: flex;\n                font-family: var(--component-tabs-font-family, var(--font-family-body));\n            }\n            :host([position="top"]) { flex-direction: column; }\n            :host([position="bottom"]) { flex-direction: column-reverse; }\n            :host([position="left"]) { flex-direction: row; }\n            :host([position="right"]) { flex-direction: row-reverse; }\n\n            .tablist {\n                display: flex;\n                gap: 0;\n                position: relative;\n                z-index: 1;\n            }\n            :host([position="top"])    .tablist { margin-bottom: -1px; margin-top: 0; }\n            :host([position="bottom"]) .tablist { margin-top: -1px; margin-bottom: 0; }\n            :host([position="left"])   .tablist { flex-direction: column; margin-right: -1px; margin-left: 0; }\n            :host([position="right"])  .tablist { flex-direction: column; margin-left: -1px; margin-right: 0; }\n\n            :host([position="top"])    .tablist button { border-bottom: none; }\n            :host([position="bottom"]) .tablist button { border-top: none; }\n            :host([position="left"])   .tablist button { border-right: none; }\n            :host([position="right"])  .tablist button { border-left: none; }\n\n            button {\n                background: var(--component-tabs-border-color);\n                color: var(--component-tabs-color);\n                border: var(--component-tab-border-width) solid var(--component-tabs-border-color);\n                margin: 0;\n                padding: ${`var(--component-tab-padding-${this.size})`};\n                cursor: pointer;\n                font-size: var(--font-size-label);\n                display: inline-flex;\n                align-items: center;\n                gap: ${`var(--component-tab-gap-${this.size})`};\n                transition: background 0.2s ease;\n                outline: none;\n                font-family: inherit;\n            }\n            :host([position="top"])    .tablist button:first-child { border-top-left-radius: var(--component-tab-border-radius-outer); }\n            :host([position="top"])    .tablist button:last-child  { border-top-right-radius: var(--component-tab-border-radius-outer); }\n            :host([position="bottom"]) .tablist button:first-child { border-bottom-left-radius: var(--component-tab-border-radius-outer); }\n            :host([position="bottom"]) .tablist button:last-child  { border-bottom-right-radius: var(--component-tab-border-radius-outer); }\n            :host([position="left"])   .tablist button:first-child   { border-top-left-radius: var(--component-tab-border-radius-outer); }\n            :host([position="left"])   .tablist button:last-child    { border-bottom-left-radius: var(--component-tab-border-radius-outer); }\n            :host([position="right"])  .tablist button:first-child  { border-top-right-radius: var(--component-tab-border-radius-outer); }\n            :host([position="right"])  .tablist button:last-child   { border-bottom-right-radius: var(--component-tab-border-radius-outer); }\n\n            button[aria-selected="true"] {\n                background: var(--component-tabs-background);\n            }\n            button:focus-visible {\n                outline: 2px solid var(--component-tabs-accent);\n                outline-offset: -1px;\n            }\n            button[disabled] {\n                opacity: 0.5;\n                cursor: not-allowed;\n            }\n            .icon-slot {\n                display: inline-flex;\n                align-items: center;\n                margin: 0 4px;\n            }\n            .tabpanel {\n                position: relative;\n                z-index: 0;\n                border: var(--component-tab-border-width) solid var(--component-tabs-border-color);\n                border-radius: var(--component-tab-border-radius-outer);\n                padding: var(--spacing-large);\n                background: var(--component-tabs-background);\n            }\n            :host([position="top"])    .tabpanel { border-top-left-radius: 0; }\n            :host([position="bottom"]) .tabpanel { border-bottom-left-radius: 0; }\n            :host([position="left"])   .tabpanel { border-top-left-radius: 0; }\n            :host([position="right"])  .tabpanel { border-top-right-radius: 0; }\n            :host([position="top"])    .tabpanel { margin-top: -1px; }\n            :host([position="bottom"]) .tabpanel { margin-bottom: -1px; }\n            :host([position="left"])   .tabpanel { margin-left: -1px; }\n            :host([position="right"])  .tabpanel { margin-right: -1px; }\n        `}_createTabButton(t){const e=t.id===this._activeTab,n=!!t.disabled,o=document.createElement("button");if(o.id=`tab-${t.id}`,o.setAttribute("role","tab"),o.setAttribute("aria-selected",e),o.setAttribute("aria-controls",`panel-${t.id}`),o.setAttribute("aria-disabled",n),n&&(o.disabled=!0),o.tabIndex=e&&!n?0:-1,o.dataset.id=t.id,this.querySelector(`[slot="left-icon-${t.id}"]`)){const e=document.createElement("slot");e.name=`left-icon-${t.id}`,e.className="icon-slot",o.appendChild(e)}const i=document.createElement("span");if(i.textContent=t.label,o.appendChild(i),this.querySelector(`[slot="right-icon-${t.id}"]`)){const e=document.createElement("slot");e.name=`right-icon-${t.id}`,e.className="icon-slot",o.appendChild(e)}return o}_createPanel(t){const e=document.createElement("div");e.className="tabpanel",e.id=`panel-${this._activeTab}`,e.setAttribute("role","tabpanel"),e.setAttribute("aria-labelledby",`tab-${this._activeTab}`);const n=document.createElement("slot");return n.name=t,e.appendChild(n),e}render(){const t=this.options;this._resolveActiveTab(t);const e=t.find(t=>t.id===this._activeTab);this.shadowRoot.innerHTML="";const n=document.createElement("style");n.textContent=this._getStyles(),this.shadowRoot.appendChild(n);const o=document.createElement("div");o.className="tablist",o.setAttribute("role","tablist"),t.forEach(t=>o.appendChild(this._createTabButton(t))),this.shadowRoot.appendChild(o),this.shadowRoot.appendChild(this._createPanel(e?.slot||"")),this._setupEvents()}}customElements.get("y-tabs")||customElements.define("y-tabs",A);class E extends HTMLElement{static get observedAttributes(){return["position","duration","max"]}constructor(){super(),this.attachShadow({mode:"open"}),this._queue=[]}connectedCallback(){this.render()}attributeChangedCallback(t,e,n){e!==n&&this.render()}get position(){return this.getAttribute("position")||"bottom-right"}set position(t){this.setAttribute("position",t)}get duration(){return parseInt(this.getAttribute("duration")??"4000",10)}set duration(t){this.setAttribute("duration",String(t))}get max(){return parseInt(this.getAttribute("max")??"5",10)}set max(t){this.setAttribute("max",String(t))}show(t={}){const{message:e="",color:n="base",duration:o=this.duration,dismissible:i=!0,icon:r=null}=t,s=this.shadowRoot.querySelector(".toast-container");if(!s)return null;const d=s.querySelectorAll(".toast");d.length>=this.max&&this._removeToast(d[0]);const c=document.createElement("div");c.className=`toast color-${n}`,c.setAttribute("role","alert"),c.setAttribute("aria-live","assertive");const h=this._getColorBg(n),p=l(a(h,this));if(c.style.backgroundColor=h,c.style.color=p,r){const t=document.createElement("i");t.className=`toast-icon ${r}`,c.appendChild(t)}const u=document.createElement("span");if(u.className="toast-message",u.textContent=e,c.appendChild(u),i){const t=document.createElement("button");t.className="toast-close",t.setAttribute("aria-label","Dismiss"),t.innerHTML="&#215;",t.addEventListener("click",()=>this._removeToast(c)),c.appendChild(t)}return s.appendChild(c),requestAnimationFrame(()=>{c.classList.add("visible")}),o>0&&(c._timeout=setTimeout(()=>this._removeToast(c),o)),this.dispatchEvent(new CustomEvent("y-toast-show",{detail:{message:e,color:n},bubbles:!0})),c}clear(){const t=this.shadowRoot.querySelector(".toast-container");t&&t.querySelectorAll(".toast").forEach(t=>this._removeToast(t))}_removeToast(t){t&&!t._removing&&(t._removing=!0,clearTimeout(t._timeout),t.classList.remove("visible"),t.classList.add("exit"),t.addEventListener("transitionend",()=>{t.remove(),this.dispatchEvent(new CustomEvent("y-toast-dismiss",{bubbles:!0}))},{once:!0}),setTimeout(()=>{t.parentNode&&t.remove()},350))}_getPositionStyles(){const t="position: fixed; z-index: 10000; display: flex; flex-direction: column; gap: var(--spacing-small, 6px); pointer-events: none; max-width: 420px; min-width: 280px;",e="var(--component-toast-offset, var(--spacing-x-large, 16px))",n={"top-right":`${t} top: ${e}; right: ${e}; align-items: flex-end;`,"top-left":`${t} top: ${e}; left: ${e}; align-items: flex-start;`,"top-center":`${t} top: ${e}; left: 50%; transform: translateX(-50%); align-items: center;`,"bottom-right":`${t} bottom: ${e}; right: ${e}; align-items: flex-end;`,"bottom-left":`${t} bottom: ${e}; left: ${e}; align-items: flex-start;`,"bottom-center":`${t} bottom: ${e}; left: 50%; transform: translateX(-50%); align-items: center;`};return n[this.position]||n["bottom-right"]}_getColorBg(t){const e={base:"var(--base-content--, #fff)",primary:"var(--primary-content--, #0070f3)",secondary:"var(--secondary-content--, #6c757d)",success:"var(--success-content--, #28a745)",warning:"var(--warning-content--, #ffc107)",error:"var(--error-content--, #dc3545)",help:"var(--help-content--, #6f42c1)"};return e[t]||e.base}render(){this.shadowRoot.innerHTML=`\n            <style>\n                :host {\n                    font-family: var(--font-family-body, sans-serif);\n                }\n\n                .toast-container {\n                    ${this._getPositionStyles()}\n                }\n\n                .toast {\n                    pointer-events: auto;\n                    display: flex;\n                    align-items: center;\n                    gap: var(--spacing-medium, 8px);\n                    padding: var(--component-toast-padding, var(--spacing-medium, 8px));\n                    border-radius: var(--component-toast-border-radius, var(--radii-small, 4px));\n                    font-size: var(--font-size-paragraph, 1em);\n                    line-height: 1.4;\n                    opacity: 0;\n                    transform: translateY(8px);\n                    transition: opacity 0.25s ease, transform 0.25s ease;\n                    box-shadow: var(--base-shadow, 0 2px 6px rgba(0,0,0,0.15));\n                }\n\n                .toast.visible {\n                    opacity: 1;\n                    transform: translateY(0);\n                }\n\n                .toast.exit {\n                    opacity: 0;\n                    transform: translateY(-8px);\n                }\n\n                .toast-icon {\n                    flex-shrink: 0;\n                    font-size: 1.1em;\n                }\n\n                .toast-message {\n                    flex: 1;\n                }\n\n                .toast-close {\n                    flex-shrink: 0;\n                    align-self: flex-start;\n                    background: none;\n                    border: none;\n                    color: inherit;\n                    font-size: 1.2em;\n                    cursor: pointer;\n                    padding: 0 0 0 var(--spacing-small, 6px);\n                    opacity: 0.7;\n                    line-height: 1;\n                }\n                .toast-close:hover {\n                    opacity: 1;\n                }\n            </style>\n            <div class="toast-container"></div>\n        `}}customElements.get("y-toast")||customElements.define("y-toast",E);class _ extends HTMLElement{static get observedAttributes(){return["text","position","delay","color"]}constructor(){super(),this.attachShadow({mode:"open"}),this._showTimeout=null,this._hideTimeout=null,this._visible=!1,this._onMouseEnter=this._onMouseEnter.bind(this),this._onMouseLeave=this._onMouseLeave.bind(this),this._onFocusIn=this._onFocusIn.bind(this),this._onFocusOut=this._onFocusOut.bind(this),this._onKeyDown=this._onKeyDown.bind(this)}connectedCallback(){this.render(),this.addEventListener("mouseenter",this._onMouseEnter),this.addEventListener("mouseleave",this._onMouseLeave),this.addEventListener("focusin",this._onFocusIn),this.addEventListener("focusout",this._onFocusOut),document.addEventListener("keydown",this._onKeyDown)}disconnectedCallback(){this.removeEventListener("mouseenter",this._onMouseEnter),this.removeEventListener("mouseleave",this._onMouseLeave),this.removeEventListener("focusin",this._onFocusIn),this.removeEventListener("focusout",this._onFocusOut),document.removeEventListener("keydown",this._onKeyDown),clearTimeout(this._showTimeout),clearTimeout(this._hideTimeout)}attributeChangedCallback(t,e,n){e!==n&&this.render()}get text(){return this.getAttribute("text")||""}set text(t){this.setAttribute("text",t)}get position(){return this.getAttribute("position")||"top"}set position(t){this.setAttribute("position",t)}get delay(){return parseInt(this.getAttribute("delay")??"200",10)}set delay(t){this.setAttribute("delay",String(t))}get color(){return this.getAttribute("color")||"base"}set color(t){this.setAttribute("color",t)}show(){clearTimeout(this._hideTimeout),this._showTimeout=setTimeout(()=>{this._visible=!0;const t=this.shadowRoot.querySelector(".tooltip");if(t){const e=a(this._getBg(),this);t.style.color=l(e),t.classList.add("visible")}},this.delay)}hide(){clearTimeout(this._showTimeout),this._visible=!1;const t=this.shadowRoot.querySelector(".tooltip");t&&t.classList.remove("visible")}_onMouseEnter(){this.show()}_onMouseLeave(){this.hide()}_onFocusIn(){this.show()}_onFocusOut(){this.hide()}_onKeyDown(t){"Escape"===t.key&&this._visible&&this.hide()}_getBg(){const t={base:"var(--base-content--, #555)",primary:"var(--primary-content--, #0070f3)",secondary:"var(--secondary-content--, #6c757d)",success:"var(--success-content--, #28a745)",warning:"var(--warning-content--, #ffc107)",error:"var(--error-content--, #dc3545)",help:"var(--help-content--, #6f42c1)"};return t[this.color]||t.base}render(){const t=this.position,e=this._getBg(),n=l(a(e,this));this.shadowRoot.innerHTML=`\n            <style>\n                :host {\n                    display: inline-block;\n                    position: relative;\n                    font-family: var(--font-family-body, sans-serif);\n                }\n\n                .trigger {\n                    display: inline-block;\n                }\n\n                .tooltip {\n                    position: absolute;\n                    z-index: 9999;\n                    white-space: nowrap;\n                    pointer-events: none;\n                    opacity: 0;\n                    transform: scale(0.95);\n                    transition: opacity 0.15s ease, transform 0.15s ease;\n                    padding: var(--component-tooltip-padding, var(--spacing-x-small, 4px)) var(--component-tooltip-padding-h, var(--spacing-medium, 8px));\n                    border-radius: var(--component-tooltip-border-radius, var(--radii-small, 4px));\n                    font-size: var(--font-size-small, 0.8em);\n                    background: ${e};\n                    color: ${n};\n                    line-height: 1.4;\n                }\n\n                .tooltip.visible {\n                    opacity: 1;\n                    transform: scale(1);\n                }\n\n                .tooltip::after {\n                    content: "";\n                    position: absolute;\n                    border: 5px solid transparent;\n                }\n\n                .tooltip.top {\n                    bottom: 100%;\n                    left: 50%;\n                    transform: translateX(-50%) scale(0.95);\n                    margin-bottom: 6px;\n                }\n                .tooltip.top.visible {\n                    transform: translateX(-50%) scale(1);\n                }\n                .tooltip.top::after {\n                    top: 100%;\n                    left: 50%;\n                    transform: translateX(-50%);\n                    border-top-color: ${e};\n                }\n\n                .tooltip.bottom {\n                    top: 100%;\n                    left: 50%;\n                    transform: translateX(-50%) scale(0.95);\n                    margin-top: 6px;\n                }\n                .tooltip.bottom.visible {\n                    transform: translateX(-50%) scale(1);\n                }\n                .tooltip.bottom::after {\n                    bottom: 100%;\n                    left: 50%;\n                    transform: translateX(-50%);\n                    border-bottom-color: ${e};\n                }\n\n                .tooltip.left {\n                    right: 100%;\n                    top: 50%;\n                    transform: translateY(-50%) scale(0.95);\n                    margin-right: 6px;\n                }\n                .tooltip.left.visible {\n                    transform: translateY(-50%) scale(1);\n                }\n                .tooltip.left::after {\n                    left: 100%;\n                    top: 50%;\n                    transform: translateY(-50%);\n                    border-left-color: ${e};\n                }\n\n                .tooltip.right {\n                    left: 100%;\n                    top: 50%;\n                    transform: translateY(-50%) scale(0.95);\n                    margin-left: 6px;\n                }\n                .tooltip.right.visible {\n                    transform: translateY(-50%) scale(1);\n                }\n                .tooltip.right::after {\n                    right: 100%;\n                    top: 50%;\n                    transform: translateY(-50%);\n                    border-right-color: ${e};\n                }\n            </style>\n            <slot class="trigger"></slot>\n            <div class="tooltip ${t}" role="tooltip">${this.text}</div>\n        `}}customElements.get("y-tooltip")||customElements.define("y-tooltip",_);class C extends HTMLElement{static defaultVariablesLoaded=!1;static defaultVariablesCSS="";static get observedAttributes(){return["theme-path"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.loadDefaultVariables().then(()=>{const t=this.getAttribute("theme-path");this.loadTheme(t)})}attributeChangedCallback(t,e,n){"theme-path"===t&&e!==n&&this.loadTheme(n)}async loadDefaultVariables(){if(!C.defaultVariablesLoaded)try{const t=new URL("styles/variables.css",document.baseURI),e=await fetch(t.href);C.defaultVariablesCSS=await e.text(),C.defaultVariablesLoaded=!0}catch(t){console.error("Failed to load default variables from styles/variables.css:",t)}return Promise.resolve()}async loadTheme(t){let e="";if(t)try{const n=new URL(t,document.baseURI),o=await fetch(n.href);e=await o.text()}catch(e){console.error(`Failed to load theme from ${t}:`,e)}const n=`\n        <style>\n          ${C.defaultVariablesCSS}\n        </style>\n        ${e?`<style>${e}</style>`:""}\n      `;this.shadowRoot.innerHTML=`${n}<slot></slot>`,this.applyVariablesToHost(C.defaultVariablesCSS+e)}applyVariablesToHost(t){const e=/--([\w-]+):\s*([^;]+);/g;let n;for(;null!==(n=e.exec(t));)this.style.setProperty(`--${n[1]}`,n[2].trim())}}return customElements.get("y-theme")||customElements.define("y-theme",C),t.YumeAppbar=i,t.YumeAvatar=r,t.YumeBadge=s,t.YumeButton=e,t.YumeCard=d,t.YumeCheckbox=c,t.YumeInput=u,t.YumePanel=b,t.YumePanelBar=m,t.YumeProgress=v,t.YumeRadio=g,t.YumeSelect=y,t.YumeSlider=f,t.YumeTable=x,t.YumeTabs=A,t.YumeTag=k,t.YumeTheme=C,t.YumeToast=E,t.YumeTooltip=_,t}({});
+var YumeKit=function(e){"use strict";var t="/* Colors */\n:root {\n    --neutral--: #7f8286ff;\n    --neutral-white: #ffffffff;\n    --neutral-black: #000000ff;\n    --neutral-light-0: #f7f7faff;\n    --neutral-light-1: #f0f0f2ff;\n    --neutral-light-2: #dfe0e3ff;\n    --neutral-light-3: #cacbcfff;\n    --neutral-light-4: #bbbdc0ff;\n    --neutral-light-5: #acaeb2ff;\n    --neutral-light-6: #9d9fa3ff;\n    --neutral-light-7: #8e9195ff;\n    --neutral-dark-0: #0c0c0dff;\n    --neutral-dark-1: #151617ff;\n    --neutral-dark-2: #292a2bff;\n    --neutral-dark-3: #37383aff;\n    --neutral-dark-4: #46474aff;\n    --neutral-dark-5: #545659ff;\n    --neutral-dark-6: #626568ff;\n    --neutral-dark-7: #717377ff;\n    --neutral-black-translucent: #0000001f;\n    --neutral-white-translucent: #1111111f;\n    --red--: #b80421ff;\n    --red-light-0: #f2e6e8ff;\n    --red-light-1: #ebcacfff;\n    --red-light-2: #e4aeb6ff;\n    --red-light-3: #dc919dff;\n    --red-light-4: #d57585ff;\n    --red-light-5: #ce596cff;\n    --red-light-6: #c73d53ff;\n    --red-light-7: #bf203aff;\n    --red-dark-0: #0d0103ff;\n    --red-dark-1: #220107ff;\n    --red-dark-2: #38020bff;\n    --red-dark-3: #4d020eff;\n    --red-dark-4: #630312ff;\n    --red-dark-5: #780316ff;\n    --red-dark-6: #8d031aff;\n    --red-dark-7: #a3041dff;\n    --red-translucent: #b804211f;\n    --orange--: #d13704ff;\n    --orange-light-0: #f2e9e6ff;\n    --orange-light-1: #eed3caff;\n    --orange-light-2: #eabdaeff;\n    --orange-light-3: #e6a691ff;\n    --orange-light-4: #e29075ff;\n    --orange-light-5: #dd7a59ff;\n    --orange-light-6: #d9643dff;\n    --orange-light-7: #d54d20ff;\n    --orange-dark-0: #0d0300ff;\n    --orange-dark-1: #260a01ff;\n    --orange-dark-2: #3e1001ff;\n    --orange-dark-3: #571702ff;\n    --orange-dark-4: #6f1d02ff;\n    --orange-dark-5: #882403ff;\n    --orange-dark-6: #a02a03ff;\n    --orange-dark-7: #b93104ff;\n    --orange-translucent: #d137041f;\n    --amber--: #d16004ff;\n    --amber-light-0: #f2ece6ff;\n    --amber-light-1: #eedbcaff;\n    --amber-light-2: #eac9aeff;\n    --amber-light-3: #e6b891ff;\n    --amber-light-4: #e2a675ff;\n    --amber-light-5: #dd9559ff;\n    --amber-light-6: #d9833dff;\n    --amber-light-7: #d57220ff;\n    --amber-dark-0: #0d0c0cff;\n    --amber-dark-1: #26170bff;\n    --amber-dark-2: #3e210aff;\n    --amber-dark-3: #572c09ff;\n    --amber-dark-4: #6f3608ff;\n    --amber-dark-5: #884107ff;\n    --amber-dark-6: #a04b06ff;\n    --amber-dark-7: #b95605ff;\n    --amber-translucent: #d160041f;\n    --yellow--: #d17f04ff;\n    --yellow-light-0: #f2eadfff;\n    --yellow-light-1: #eeddc4ff;\n    --yellow-light-2: #eacfa8ff;\n    --yellow-light-3: #e6c28dff;\n    --yellow-light-4: #e2b572ff;\n    --yellow-light-5: #dda756ff;\n    --yellow-light-6: #d99a3bff;\n    --yellow-light-7: #d58c1fff;\n    --yellow-dark-0: #0d0c0cff;\n    --yellow-dark-1: #261a0bff;\n    --yellow-dark-2: #3e290aff;\n    --yellow-dark-3: #573709ff;\n    --yellow-dark-4: #6f4608ff;\n    --yellow-dark-5: #885407ff;\n    --yellow-dark-6: #a06206ff;\n    --yellow-dark-7: #b97105ff;\n    --yellow-translucent: #d17f041f;\n    --lime--: #cad104ff;\n    --lime-light-0: #f2f2dfff;\n    --lime-light-1: #edeec4ff;\n    --lime-light-2: #e8eaa8ff;\n    --lime-light-3: #e3e68dff;\n    --lime-light-4: #dee272ff;\n    --lime-light-5: #d9dd56ff;\n    --lime-light-6: #d4d93bff;\n    --lime-light-7: #cfd51fff;\n    --lime-dark-0: #0d0d0cff;\n    --lime-dark-1: #25260bff;\n    --lime-dark-2: #3c3e0aff;\n    --lime-dark-3: #545709ff;\n    --lime-dark-4: #6c6f08ff;\n    --lime-dark-5: #838807ff;\n    --lime-dark-6: #9ba006ff;\n    --lime-dark-7: #b2b905ff;\n    --lime-translucent: #cad1041f;\n    --green--: #2dba73ff;\n    --green-light-0: #e6f2ecff;\n    --green-light-1: #cfebddff;\n    --green-light-2: #b8e4ceff;\n    --green-light-3: #a1ddbfff;\n    --green-light-4: #8ad6b0ff;\n    --green-light-5: #72cfa0ff;\n    --green-light-6: #5bc891ff;\n    --green-light-7: #44c182ff;\n    --green-dark-0: #030d08ff;\n    --green-dark-1: #082315ff;\n    --green-dark-2: #0e3823ff;\n    --green-dark-3: #134e30ff;\n    --green-dark-4: #18643eff;\n    --green-dark-5: #1d794bff;\n    --green-dark-6: #238f58ff;\n    --green-dark-7: #28a466ff;\n    --green-translucent: #2dba731f;\n    --teal--: #04b8b8ff;\n    --teal-light-0: #f2fffeff;\n    --teal-light-1: #d4f6f5ff;\n    --teal-light-2: #b7ededff;\n    --teal-light-3: #99e4e4ff;\n    --teal-light-4: #7bdcdbff;\n    --teal-light-5: #5dd3d2ff;\n    --teal-light-6: #40cacaff;\n    --teal-light-7: #22c1c1ff;\n    --teal-dark-0: #0c0d0dff;\n    --teal-dark-1: #0b2624ff;\n    --teal-dark-2: #0a3e3cff;\n    --teal-dark-3: #095753ff;\n    --teal-dark-4: #086f6aff;\n    --teal-dark-5: #078881ff;\n    --teal-dark-6: #06a099ff;\n    --teal-dark-7: #05b9b0ff;\n    --teal-translucent: #04b8b81f;\n    --blue--: #0576ffff;\n    --blue-light-0: #ebf5ffff;\n    --blue-light-1: #cee5ffff;\n    --blue-light-2: #b2d5ffff;\n    --blue-light-3: #95c5ffff;\n    --blue-light-4: #78b6ffff;\n    --blue-light-5: #5ba6ffff;\n    --blue-light-6: #3f96ffff;\n    --blue-light-7: #2286ffff;\n    --blue-dark-0: #0c0c0dff;\n    --blue-dark-1: #0b192bff;\n    --blue-dark-2: #0a274aff;\n    --blue-dark-3: #093468ff;\n    --blue-dark-4: #094186ff;\n    --blue-dark-5: #084ea4ff;\n    --blue-dark-6: #075cc3ff;\n    --blue-dark-7: #0669e1ff;\n    --blue-translucent: #0576ff1f;\n    --indigo--: #5405ffff;\n    --indigo-light-0: #f6f2ffff;\n    --indigo-light-1: #e2d4ffff;\n    --indigo-light-2: #ceb7ffff;\n    --indigo-light-3: #b999ffff;\n    --indigo-light-4: #a57cffff;\n    --indigo-light-5: #915effff;\n    --indigo-light-6: #7d40ffff;\n    --indigo-light-7: #6823ffff;\n    --indigo-dark-0: #0d0c0cff;\n    --indigo-dark-1: #160b2aff;\n    --indigo-dark-2: #1f0a49ff;\n    --indigo-dark-3: #280967ff;\n    --indigo-dark-4: #310986ff;\n    --indigo-dark-5: #3908a4ff;\n    --indigo-dark-6: #4207c2ff;\n    --indigo-dark-7: #4b06e1ff;\n    --indigo-translucent: #5405ff1f;\n    --purple--: #8a05ffff;\n    --purple-light-0: #f9f2ffff;\n    --purple-light-1: #ebd4ffff;\n    --purple-light-2: #ddb7ffff;\n    --purple-light-3: #cf99ffff;\n    --purple-light-4: #c27cffff;\n    --purple-light-5: #b45effff;\n    --purple-light-6: #a640ffff;\n    --purple-light-7: #9823ffff;\n    --purple-dark-0: #0c0c0dff;\n    --purple-dark-1: #1c0b2bff;\n    --purple-dark-2: #2c0a4aff;\n    --purple-dark-3: #3b0968ff;\n    --purple-dark-4: #4b0986ff;\n    --purple-dark-5: #5b08a4ff;\n    --purple-dark-6: #6b07c3ff;\n    --purple-dark-7: #7a06e1ff;\n    --purple-translucent: #8a05ff1f;\n    --pink--: #ff05a8ff;\n    --pink-light-0: #f9f2ffff;\n    --pink-light-1: #fad4f4ff;\n    --pink-light-2: #fbb7e9ff;\n    --pink-light-3: #fb99deff;\n    --pink-light-4: #fc7cd4ff;\n    --pink-light-5: #fd5ec9ff;\n    --pink-light-6: #fe40beff;\n    --pink-light-7: #fe23b3ff;\n    --pink-dark-0: #0c0c0dff;\n    --pink-dark-1: #2a0b20ff;\n    --pink-dark-2: #490a34ff;\n    --pink-dark-3: #670947ff;\n    --pink-dark-4: #86095bff;\n    --pink-dark-5: #a4086eff;\n    --pink-dark-6: #c20781ff;\n    --pink-dark-7: #e10695ff;\n    --pink-translucent: #ff05a81f;\n    --brown--: #ab642eff;\n    --brown-light-0: #f2dfdfff;\n    --brown-light-1: #e9d0c9ff;\n    --brown-light-2: #e0c0b3ff;\n    --brown-light-3: #d7b19dff;\n    --brown-light-4: #cfa287ff;\n    --brown-light-5: #c69270ff;\n    --brown-light-6: #bd835aff;\n    --brown-light-7: #b47344ff;\n    --brown-dark-0: #0d0c0cff;\n    --brown-dark-1: #211710ff;\n    --brown-dark-2: #352215ff;\n    --brown-dark-3: #482d19ff;\n    --brown-dark-4: #5c381dff;\n    --brown-dark-5: #704321ff;\n    --brown-dark-6: #844e26ff;\n    --brown-dark-7: #97592aff;\n    --brown-translucent: #ab642e1f;\n}\n\n/* Numerics */\n:root {\n    --border-none: 0px;\n    --border-x-thin: 1px;\n    --border-thin: 2px;\n    --border-medium: 4px;\n    --border-thick: 8px;\n    --border-x-thick: 10px;\n    --spacing-none: 0px;\n    --spacing-4x-small: 1px;\n    --spacing-2x-small: 2px;\n    --spacing-x-small: 4px;\n    --spacing-small: 6px;\n    --spacing-medium: 8px;\n    --spacing-large: 12px;\n    --spacing-x-large: 16px;\n    --spacing-2x-large: 24px;\n    --spacing-4x-large: 32px;\n    --font-size-display-1: 6em;\n    --font-size-display-2: 5.5em;\n    --font-size-display-3: 4.5em;\n    --font-size-display-4: 3.5em;\n    --font-size-h1: 2em;\n    --font-size-h2: 1.5em;\n    --font-size-h3: 1.17em;\n    --font-size-h4: 1em;\n    --font-size-h5: 0.83em;\n    --font-size-paragraph: 1em;\n    --font-size-small: 0.8em;\n    --font-size-label: 0.83em;\n    --font-size-button: 1em;\n    --font-size-quote: 1.17em;\n    --radii-none: 0px;\n    --radii-x-small: 0.125em;\n    --radii-small: 0.25em;\n    --radii-medium: 0.375em;\n    --radii-large: 0.5px;\n    --radii-x-large: 1em;\n    --radii-full: 9999px;\n    --sizing-2x-small: 16px;\n    --sizing-x-small: 19px;\n    --sizing-small: 32px;\n    --sizing-medium: 40px;\n    --sizing-large: 56px;\n}\n\n/* Components */\n\n:root {\n    --component-appbar-collapsed-width: 48px;\n    --component-appbar-padding: var(--spacing-medium);\n    --component-appbar-width: 240px;\n    --component-avatar-border-radius-circle: var(--radii-full);\n    --component-avatar-border-radius-square: var(--radii-small);\n    --component-avatar-size-large: var(--sizing-large);\n    --component-avatar-size-medium: var(--sizing-medium);\n    --component-avatar-size-small: var(--sizing-small);\n    --component-badge-border-radius-circle: var(--radii-full);\n    --component-badge-border-radius-square: var(--radii-small);\n    --component-badge-padding-large: var(--spacing-small);\n    --component-badge-padding-medium: var(--spacing-x-small);\n    --component-badge-padding-small: var(--spacing-2x-small);\n    --component-badge-size-large: var(--sizing-medium);\n    --component-badge-size-medium: var(--sizing-small);\n    --component-badge-size-small: var(--sizing-2x-small);\n    --component-button-border-radius-inner: var(--radii-x-small);\n    --component-button-border-radius-outer: var(--radii-small);\n    --component-button-border-width: var(--border-thin);\n    --component-button-border-width-2: var(--border-x-thin);\n    --component-button-border-width-2: var(--border-x-thin);\n    --component-button-padding-large: var(--spacing-x-large);\n    --component-button-padding-medium: var(--spacing-medium);\n    --component-button-padding-small: var(--spacing-x-small);\n    --component-card-border-radius-inner: var(--radii-small);\n    --component-card-border-radius-outer: var(--radii-medium);\n    --component-card-border-width: var(--border-x-thin);\n    --component-card-inner-border-width: var(--border-x-thin);\n    --component-card-padding-inner: var(--spacing-medium);\n    --component-card-padding-outer: var(--spacing-x-large);\n    --component-checkbox-icon-size: var(--sizing-2x-small);\n    --component-checkbox-size: var(--sizing-x-small);\n    --component-dialog-border-radius-inner: var(--radii-x-small);\n    --component-dialog-border-radius-outer: var(--radii-small);\n    --component-dialog-border-width: var(--border-x-thin);\n    --component-dialog-inner-border-width: var(--border-x-thin);\n    --component-dialog-padding: var(--spacing-medium);\n    --component-drawer-border-radius: var(--radii-small);\n    --component-drawer-border-width: var(--border-x-thin);\n    --component-drawer-handle-padding: var(--spacing-x-small);\n    --component-drawer-handle-width: var(--spacing-x-small);\n    --component-drawer-padding: var(--spacing-medium);\n    --component-inputs-border-radius-inner: var(--radii-x-small);\n    --component-inputs-border-radius-outer: var(--radii-small);\n    --component-inputs-border-width: var(--border-thin);\n    --component-inputs-padding-large: var(--spacing-x-large);\n    --component-inputs-padding-medium: var(--spacing-medium);\n    --component-inputs-padding-small: var(--spacing-x-small);\n    --component-menu-border-radius: var(--radii-x-small);\n    --component-menu-border-width: var(--border-x-thin);\n    --component-menu-padding-horizontal: var(--spacing-small);\n    --component-menu-padding-vertical: var(--spacing-x-small);\n    --component-panelbar-border-radius: var(--radii-x-small);\n    --component-panelbar-border-width: var(--border-x-thin);\n    --component-panelbar-border-width: var(--border-x-thin);\n    --component-panelbar-padding: var(--spacing-medium);\n    --component-progress-border-radius-inner: var(--radii-small);\n    --component-progress-border-radius-outer: calc(var(--radii-small) + 4px);\n    --component-progress-border-width: var(--border-x-thin);\n    --component-progress-padding: var(--spacing-x-small);\n    --component-progress-size-large: var(--sizing-large);\n    --component-progress-size-medium: var(--sizing-medium);\n    --component-progress-size-small: var(--sizing-small);\n    --component-radio-dot-offset: var(--spacing-2x-small);\n    --component-radio-dot-size: var(--spacing-medium);\n    --component-radio-size: var(--sizing-2x-small);\n    --component-sidebar-border-radius: var(--radii-small);\n    --component-sidebar-border-width: var(--border-x-thin);\n    --component-slider-border-radius-inner: var(--radii-small);\n    --component-slider-border-radius-outer: calc(var(--radii-small) + 4px);\n    --component-slider-border-width: var(--border-x-thin);\n    --component-slider-padding: var(--spacing-x-small);\n    --component-slider-thumb-border-radius: var(--radii-x-small);\n    --component-switch-border-radius: var(--radii-full);\n    --component-switch-border-width: var(--border-x-thin);\n    --component-switch-padding: var(--spacing-2x-small);\n    --component-tab-border-radius-inner: var(--radii-x-small);\n    --component-tab-border-radius-outer: var(--radii-small);\n    --component-tab-border-width: var(--border-x-thin);\n    --component-tab-gap-large: var(--spacing-large);\n    --component-tab-gap-medium: var(--spacing-small);\n    --component-tab-gap-small: var(--spacing-2x-small);\n    --component-tab-padding-large: var(--spacing-2x-large);\n    --component-tab-padding-medium: var(--spacing-large);\n    --component-tab-padding-small: var(--spacing-small);\n    --component-table-border-radius: var(--radii-small);\n    --component-table-border-width: var(--border-x-thin);\n    --component-table-border-width-header: var(--border-thin);\n    --component-table-padding-large: var(--spacing-large);\n    --component-table-padding-medium: var(--spacing-medium);\n    --component-table-padding-small: var(--spacing-small);\n    --component-tag-border-radius-circle: var(--radii-full);\n    --component-tag-border-radius-square: var(--radii-small);\n    --component-tag-padding-large: var(--spacing-small);\n    --component-tag-padding-medium: var(--spacing-x-small);\n    --component-tag-padding-small: var(--spacing-2x-small);\n    --component-tag-size-large: var(--sizing-large);\n    --component-tag-size-medium: var(--sizing-medium);\n    --component-tag-size-small: var(--sizing-small);\n    --component-toast-border-radius: var(--radii-small);\n    --component-toast-offset: var(--spacing-x-large);\n    --component-toast-padding: var(--spacing-medium);\n    --component-toast-padding-h: var(--spacing-x-large);\n    --component-tooltip-border-radius: var(--radii-small);\n    --component-tooltip-padding: var(--spacing-x-small);\n    --component-tooltip-padding-h: var(--spacing-medium);\n}\n";class n extends HTMLElement{static get observedAttributes(){return["left-icon","right-icon","color","size","style-type","type","disabled","name","value","autofocus","form","formaction","formenctype","formmethod","formnovalidate","formtarget","aria-label","aria-pressed","aria-hidden"]}constructor(){super(),this.attachShadow({mode:"open"}),this.init()}connectedCallback(){this.hasAttribute("size")||this.setAttribute("size","medium"),this.init()}attributeChangedCallback(e,t,r){t!==r&&n.observedAttributes.includes(e)&&(null===r?this.button.removeAttribute(e):this.button.setAttribute(e,r)),this.init(),["color","size","style-type","disabled"].includes(e)&&this.updateStyles()}get value(){return this.hasAttribute("multiple")?Array.from(this.selectedValues).join(","):this.selectedValues.size?Array.from(this.selectedValues)[0]:""}set value(e){this.hasAttribute("multiple")?"string"==typeof e?this.selectedValues=new Set(e.split(",").map(e=>e.trim())):Array.isArray(e)&&(this.selectedValues=new Set(e)):this.selectedValues="string"==typeof e?new Set([e.trim()]):new Set,this.setAttribute("value",e)}setOptions(e){this.setAttribute("options",JSON.stringify(e))}handleClick(){const e={},t=this.getAttribute("data-event");!this.hasAttribute("disabled")&&t&&(Array.from(this.attributes).filter(e=>e.name.startsWith("data-detail-")).forEach(t=>{const n=t.name.replace("data-detail-","");e[n]=t.value}),this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0})))}init(){this.applyStyles(),this.render(),this.proxyNativeOnClick(),this.addEventListeners()}proxyNativeOnClick(){try{Object.defineProperty(this,"onclick",{get:()=>this.button.onclick,set:e=>{this.button.onclick=e},configurable:!0,enumerable:!0})}catch(e){console.warn("Could not redefine onclick:",e)}}updateButtonAttributes(){n.observedAttributes.forEach(e=>{this.hasAttribute(e)?this.button.setAttribute(e,this.getAttribute(e)):this.button.removeAttribute(e)})}manageSlotVisibility(e,t){const n=e?this.shadowRoot.querySelector(`slot[name="${e}"]`):this.shadowRoot.querySelector("slot:not([name])"),r=this.shadowRoot.querySelector(t),o=()=>{const e=n.assignedNodes({flatten:!0}).some(e=>!(e.nodeType===Node.TEXT_NODE&&""===e.textContent.trim()));r.style.display=e?"inline-flex":"none"};o(),n.addEventListener("slotchange",o)}render(){this.button||(this.button=document.createElement("button"),this.button.classList.add("button"),this.button.setAttribute("role","button"),this.button.setAttribute("tabindex","0"),this.button.setAttribute("part","button"),this.shadowRoot.appendChild(this.button)),this.updateButtonAttributes(),this.hasAttribute("disabled")?(this.button.setAttribute("disabled",""),this.button.setAttribute("aria-disabled","true")):(this.button.removeAttribute("disabled"),this.button.setAttribute("aria-disabled","false")),this.button.innerHTML='\n          <span class="icon left-icon" part="left-icon"><slot name="left-icon"></slot></span>\n          <span class="label" part="label"><slot></slot></span>\n          <span class="icon right-icon" part="right-icon"><slot name="right-icon"></slot></span>\n      ',this.manageSlotVisibility("left-icon",".left-icon"),this.manageSlotVisibility("right-icon",".right-icon"),this.manageSlotVisibility("",".label")}applyStyles(){const e=document.createElement("style");e.textContent='\n        :host {\n          display: inline-block;\n        }\n\n        @font-face {\n            font-family: "Lexend";\n            font-display: swap;\n        }\n\n        .button {\n            box-sizing: border-box;\n            display: inline-flex;\n            min-height: var(--button-min-height, var(--sizing-medium, 40px));\n            min-width: var(--button-min-width, var(--sizing-medium, 40px));\n            padding: var(--button-padding, var(--component-button-padding-medium));\n            gap: var(--button-gap, var(--component-button-padding-medium));\n            justify-content: center;\n            align-items: center;\n            position: relative;\n            overflow: hidden;\n            border-radius: var(--component-button-border-radius-outer, 4px);\n            border: var(--component-button-border-width, 1px) solid var(--border-color, var(--base-content--, #1D1D1D));\n            background: var(--background-color, #F1F6FA);\n            transition: background-color 0.1s, color 0.1s, border-color 0.1s;\n            cursor: pointer;\n            color: var(--text-color);\n            font-family: var(--font-family-body, Lexend, sans-serif);\n            font-size: var(--font-size-button, 1em);\n            line-height: 1;\n        }\n\n        .button:disabled {\n            opacity: 0.5;\n            cursor: not-allowed;\n        }\n\n        .button:hover:not(:disabled),\n        .button:hover:not(:disabled) .button-content {\n            background: var(--hover-background-color);\n            color: var(--hover-text-color);\n            border-color: var(--hover-border-color);\n        }\n        .button:focus:not(:disabled),\n        .button:focus:not(:disabled) .button-content {\n            background: var(--focus-background-color);\n            color: var(--focus-text-color);\n            border-color: var(--focus-border-color);\n        }\n        .button:active:not(:disabled),\n        .button:active:not(:disabled) .button-content {\n            background: var(--active-background-color);\n            color: var(--active-text-color);\n            border-color: var(--active-border-color);\n        }\n        .icon {\n            display: flex;\n            min-width: 16px;\n            min-height: 1em;\n            justify-content: center;\n            align-items: center;\n        }\n        .label {\n            line-height: inherit;\n            min-height: 1em;\n            align-items: center;\n        }\n      ',this.shadowRoot.appendChild(e)}addEventListeners(){this.button.addEventListener("focus",()=>{this.dispatchEvent(new CustomEvent("focus",{bubbles:!0,composed:!0}))}),this.button.addEventListener("blur",()=>{this.dispatchEvent(new CustomEvent("blur",{bubbles:!0,composed:!0}))}),this.button.addEventListener("keydown",e=>{this.dispatchEvent(new CustomEvent("keydown",{detail:{key:e.key,code:e.code},bubbles:!0,composed:!0}))}),this.button.addEventListener("keyup",e=>{this.dispatchEvent(new CustomEvent("keyup",{detail:{key:e.key,code:e.code},bubbles:!0,composed:!0}))}),this.button.addEventListener("click",e=>{if(this.handleClick(),"submit"===this.getAttribute("type")){const t=this.closest("form");t&&(e.preventDefault(),t.requestSubmit())}})}updateStyles(){const e=this.getAttribute("color")||"base",t=this.getAttribute("size")||"medium",n=this.getAttribute("style-type")||"outlined",r={primary:["--primary-content--","--primary-content-hover","--primary-content-active","--primary-background-component","--primary-background-hover","--primary-background-active"],secondary:["--secondary-content--","--secondary-content-hover","--secondary-content-active","--secondary-background-component","--secondary-background-hover","--secondary-background-active"],base:["--base-content--","--base-content-lighter","--base-content-lightest","--base-background-component","--base-background-hover","--base-background-active"],success:["--success-content--","--success-content-hover","--success-content-active","--success-background-component","--success-background-hover","--success-background-active"],error:["--error-content--","--error-content-hover","--error-content-active","--error-background-component","--error-background-hover","--error-background-active"],warning:["--warning-content--","--warning-content-hover","--warning-content-active","--warning-background-component","--warning-background-hover","--warning-background-active"],help:["--help-content--","--help-content-hover","--help-content-active","--help-background-component","--help-background-hover","--help-background-active"]},o={small:["--component-button-padding-small","--component-button-padding-small"],medium:["--component-button-padding-medium","--component-button-padding-medium"],large:["--component-button-padding-large","--component-button-padding-large"]},a={outlined:{"--background-color":`var(${r[e][3]}, rgba(241,246,250,1))`,"--border-color":`var(${r[e][0]}, rgba(29,29,29,1))`,"--text-color":`var(${r[e][0]}, rgba(29,29,29,1))`},filled:{"--background-color":`var(${r[e][0]}, rgba(29,29,29,1))`,"--border-color":`var(${r[e][0]}, rgba(29,29,29,1))`,"--text-color":`var(${r[e][3]}, rgba(241,246,250,1))`},flat:{"--background-color":`var(${r[e][3]},rgba(241,246,250,1))`,"--border-color":`var(${r[e][3]},rgba(241,246,250,1))`,"--text-color":`var(${r[e][0]},rgba(29,29,29,1))`}},i=a[n]||a.outlined;if(Object.entries(i).forEach(([e,t])=>{this.button.style.setProperty(e,t)}),"filled"===n)this.button.style.setProperty("--hover-background-color",`var(${r[e][1]}, rgba(215,219,222,1))`),this.button.style.setProperty("--hover-text-color",`var(${r[e][3]}, rgba(241,246,250,1))`),this.button.style.setProperty("--hover-border-color",`var(${r[e][1]}, rgba(215,219,222,1))`),this.button.style.setProperty("--focus-background-color",`var(${r[e][2]}, rgba(188,192,195,1))`),this.button.style.setProperty("--focus-text-color",`var(${r[e][3]}, rgba(241,246,250,1))`),this.button.style.setProperty("--focus-border-color",`var(${r[e][2]}, rgba(188,192,195,1))`),this.button.style.setProperty("--active-background-color",`var(${r[e][0]}, rgba(29,29,29,1))`),this.button.style.setProperty("--active-text-color",`var(${r[e][3]}, rgba(241,246,250,1))`),this.button.style.setProperty("--active-border-color",`var(${r[e][0]}, rgba(29,29,29,1))`);else{const t=`var(${r[e][0]}, rgba(29,29,29,1))`;this.button.style.setProperty("--hover-background-color",`var(${r[e][4]}, rgba(215,219,222,1))`),this.button.style.setProperty("--hover-text-color",`var(${r[e][0]}, rgba(29,29,29,1))`),this.button.style.setProperty("--focus-background-color",`var(${r[e][5]}, rgba(188,192,195,1))`),this.button.style.setProperty("--focus-text-color",`var(${r[e][0]}, rgba(29,29,29,1))`),this.button.style.setProperty("--active-background-color",`var(${r[e][0]}, rgba(29,29,29,1))`),this.button.style.setProperty("--active-text-color",`var(${r[e][3]}, rgba(241,246,250,1))`),"outlined"===n?(this.button.style.setProperty("--hover-border-color",t),this.button.style.setProperty("--focus-border-color",t),this.button.style.setProperty("--active-border-color",t)):(this.button.style.setProperty("--hover-border-color",`var(${r[e][4]}, rgba(215,219,222,1))`),this.button.style.setProperty("--focus-border-color",`var(${r[e][5]}, rgba(188,192,195,1))`),this.button.style.setProperty("--active-border-color",`var(${r[e][0]}, rgba(29,29,29,1))`))}const[s,l]=o[t]||o.medium;this.button.style.setProperty("--button-padding",`var(${l}, var(--component-button-padding-medium))`),this.button.style.setProperty("--button-gap",`var(${s}, var(--component-button-padding-medium))`);const c={small:"var(--sizing-small, 32px)",medium:"var(--sizing-medium, 40px)",large:"var(--sizing-large, 56px)"};this.button.style.setProperty("--button-min-height",c[t]||"40px"),this.button.style.setProperty("--button-min-width",c[t]||"40px")}}customElements.get("y-button")||customElements.define("y-button",n);class r extends HTMLElement{static get observedAttributes(){return["items","anchor","visible","direction","size"]}constructor(){super(),this.attachShadow({mode:"open"}),this._onAnchorClick=this._onAnchorClick.bind(this),this._onDocumentClick=this._onDocumentClick.bind(this),this._onScrollOrResize=this._onScrollOrResize.bind(this)}connectedCallback(){this.hasAttribute("items")||(this.items=[]),this._setupAnchor(),this.render(),document.addEventListener("click",this._onDocumentClick),window.addEventListener("scroll",this._onScrollOrResize,!0),window.addEventListener("resize",this._onScrollOrResize),this.style.position="fixed",this.style.zIndex="1000",this.style.display="none"}disconnectedCallback(){this._teardownAnchor(),document.removeEventListener("click",this._onDocumentClick),window.removeEventListener("scroll",this._onScrollOrResize,!0),window.removeEventListener("resize",this._onScrollOrResize)}attributeChangedCallback(e,t,n){t!==n&&("items"!==e&&"size"!==e||this.render(),"anchor"===e&&(this._teardownAnchor(),this._setupAnchor()),"visible"===e&&this._updatePosition(),"direction"===e&&this._updatePosition())}get items(){try{return JSON.parse(this.getAttribute("items"))||[]}catch{return[]}}set items(e){this.setAttribute("items",JSON.stringify(e))}get anchor(){return this.getAttribute("anchor")}set anchor(e){this.setAttribute("anchor",e)}get visible(){return this.hasAttribute("visible")}set visible(e){e?this.setAttribute("visible",""):this.removeAttribute("visible")}get direction(){return this.getAttribute("direction")||"down"}set direction(e){this.setAttribute("direction",e)}get size(){const e=this.getAttribute("size");return["small","medium","large"].includes(e)?e:"medium"}set size(e){["small","medium","large"].includes(e)?this.setAttribute("size",e):this.setAttribute("size","medium")}_createMenuList(e){const t=document.createElement("ul");return e.forEach(e=>{const n=document.createElement("li");n.className="menuitem",n.setAttribute("role","menuitem"),n.tabIndex=0;const r=document.createElement("span");if(r.className="item-content",e["icon-template"]){const t=this._findTemplate(e["icon-template"]);t&&r.appendChild(t.content.cloneNode(!0))}if(e.template){const t=this._findTemplate(e.template);t?r.appendChild(t.content.cloneNode(!0)):r.textContent=e.text}else r.textContent=e.text;if(n.appendChild(r),e.url&&n.addEventListener("click",()=>{window.location.href=e.url}),e.children?.length){const t=document.createElement("span");t.className="submenu-indicator",t.textContent="▶",n.appendChild(t);const r=this._createMenuList(e.children);r.classList.add("submenu"),r.setAttribute("role","menu"),n.appendChild(r)}t.appendChild(n)}),t}_findTemplate(e){return this.querySelector(`template[slot="${e}"]`)}_onAnchorClick(e){e.stopPropagation(),this.visible=!this.visible}_onDocumentClick(e){const t=e.composedPath();this._anchorEl&&t.includes(this._anchorEl)||t.includes(this)||(this.visible=!1)}_onScrollOrResize(){this.visible&&this._updatePosition()}_setupAnchor(){const e=this.anchor;if(e){const t=this.getRootNode(),n=t?.getElementById?t.getElementById(e):document.getElementById(e);n&&(this._anchorEl=n,this._anchorEl.addEventListener("click",this._onAnchorClick))}}_teardownAnchor(){this._anchorEl&&(this._anchorEl.removeEventListener("click",this._onAnchorClick),this._anchorEl=null)}_updatePosition(){if(!this.visible||!this._anchorEl)return void(this.style.display="none");const e=this._anchorEl.getBoundingClientRect(),t=this.getBoundingClientRect(),n=window.innerWidth,r=window.innerHeight;let o,a;"right"===this.direction?(o=e.top,a=e.right,a+t.width>n&&(a=e.left-t.width),o+t.height>r&&(o=r-t.height-10)):(o=e.bottom,a=e.left,o+t.height>r&&(o=e.top-t.height),a+t.width>n&&(a=n-t.width-10)),o=Math.max(10,Math.min(o,r-t.height-10)),a=Math.max(10,Math.min(a,n-t.width-10)),this.style.top=`${o}px`,this.style.left=`${a}px`,this.style.display="block"}render(){this.shadowRoot.innerHTML="";const e=`var(--component-button-padding-${this.size}, 0.5rem)`,t=document.createElement("style");t.textContent=`\n            ul.menu,\n            ul.submenu {\n                list-style: none;\n                margin: 0;\n                padding: 0;\n                background: var(--component-menu-background, #fff);\n                border: var(--component-menu-border-width, 1px) solid var(--component-menu-border-color, #ccc);\n                border-radius: var(--component-menu-border-radius, 4px);\n                box-shadow: var(--component-menu-shadow, 0 2px 8px rgba(0, 0, 0, 0.15));\n                min-width: 150px;\n                max-height: 300px;\n                overflow-y: auto;\n            }\n\n            li.menuitem {\n                cursor: pointer;\n                padding: ${e};\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n                white-space: nowrap;\n                color: var(--component-menu-color, #000);\n                font-size: var(--font-size-button, 1em);\n            }\n\n            li.menuitem:hover {\n                background: var(--component-menu-hover-background, #eee);\n            }\n\n            ul.submenu {\n                position: absolute;\n                top: 0;\n                left: 100%;\n                display: none;\n                z-index: 1001;\n            }\n\n            li.menuitem:hover > ul.submenu {\n                display: block;\n            }\n\n            .submenu-indicator {\n                font-size: 0.75em;\n                margin-left: 0.5rem;\n                opacity: 0.6;\n            }\n\n            .item-content {\n                flex: 1;\n            }\n        `,this.shadowRoot.appendChild(t);const n=this._createMenuList(this.items);n.classList.add("menu"),n.setAttribute("role","menu"),this.shadowRoot.appendChild(n)}}customElements.get("y-menu")||customElements.define("y-menu",r);const o='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20" aria-hidden="true"><path d="M5 7 L10 12 L15 7" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" /></svg>';class a extends HTMLElement{static get observedAttributes(){return["orientation","collapsed","items","size","menu-direction","sticky"]}constructor(){super(),this.attachShadow({mode:"open"}),this._onCollapseClick=this._onCollapseClick.bind(this),this._idCounter=0}connectedCallback(){this.render()}disconnectedCallback(){}attributeChangedCallback(e,t,n){t!==n&&this.render()}get orientation(){return this.getAttribute("orientation")||"vertical"}set orientation(e){this.setAttribute("orientation",e)}get collapsed(){return this.hasAttribute("collapsed")}set collapsed(e){e?this.setAttribute("collapsed",""):this.removeAttribute("collapsed")}get items(){try{return JSON.parse(this.getAttribute("items"))||[]}catch{return[]}}set items(e){this.setAttribute("items",JSON.stringify(e))}get size(){return this.getAttribute("size")||"medium"}set size(e){this.setAttribute("size",e)}get menuDirection(){return this.getAttribute("menu-direction")||""}set menuDirection(e){e?this.setAttribute("menu-direction",e):this.removeAttribute("menu-direction")}get sticky(){const e=this.getAttribute("sticky");return!!["start","end"].includes(e)&&e}set sticky(e){"start"===e||"end"===e?this.setAttribute("sticky",e):this.removeAttribute("sticky")}toggle(){this.collapsed=!this.collapsed}_onCollapseClick(){this.toggle()}_uid(e){return`${e}-${this._idCounter++}`}_isItemActive(e){if(e.selected)return!0;if(e.href){const t=window.location,n=t.pathname+t.search+t.hash;return e.href===n||e.href===t.href}return!1}render(){const e="vertical"===this.orientation,t=this.collapsed&&e,n=this.size,r=this.menuDirection||(e?"right":"down"),o={small:{padding:"var(--spacing-x-small, 4px)",collapsedWidth:"40px",bodyGap:"2px",buttonSize:"small"},medium:{padding:"var(--spacing-small, 6px)",collapsedWidth:"52px",bodyGap:"3px",buttonSize:"medium"},large:{padding:"var(--spacing-medium, 8px)",collapsedWidth:"64px",bodyGap:"4px",buttonSize:"large"}},a=o[n]||o.medium;this.shadowRoot.innerHTML="",this._idCounter=0;const i=document.createElement("style");i.textContent='\n            :host {\n                display: block;\n                font-family: var(--font-family-body, sans-serif);\n                color: var(--component-appbar-color, #fff);\n            }\n\n            :host([sticky]) {\n                position: sticky;\n                z-index: 100;\n            }\n            :host([orientation="vertical"][sticky="start"]),\n            :host(:not([orientation])[sticky="start"]) {\n                left: 0;\n                top: 0;\n                height: 100%;\n            }\n            :host([orientation="vertical"][sticky="end"]),\n            :host(:not([orientation])[sticky="end"]) {\n                right: 0;\n                top: 0;\n                height: 100%;\n            }\n            :host([orientation="horizontal"][sticky="start"]) {\n                top: 0;\n                left: 0;\n                width: 100%;\n            }\n            :host([orientation="horizontal"][sticky="end"]) {\n                bottom: 0;\n                left: 0;\n                width: 100%;\n            }\n\n            :host([sticky]) .appbar {\n                border-radius: 0;\n                border: none;\n            }\n            :host([orientation="vertical"][sticky="start"]) .appbar,\n            :host(:not([orientation])[sticky="start"]) .appbar {\n                border-right: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);\n            }\n            :host([orientation="vertical"][sticky="end"]) .appbar,\n            :host(:not([orientation])[sticky="end"]) .appbar {\n                border-left: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);\n            }\n            :host([orientation="horizontal"][sticky="start"]) .appbar {\n                border-bottom: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);\n            }\n            :host([orientation="horizontal"][sticky="end"]) .appbar {\n                border-top: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);\n            }\n\n            .appbar {\n                display: flex;\n                background: var(--component-appbar-background, #111);\n                border: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);\n                border-radius: var(--component-appbar-border-radius, var(--component-sidebar-border-radius, 4px));\n                overflow: visible;\n                padding: var(--_appbar-padding);\n                box-sizing: border-box;\n            }\n\n            .appbar.vertical {\n                flex-direction: column;\n                width: var(--component-appbar-width, 240px);\n                height: 100%;\n                transition: width 0.2s ease;\n            }\n            .appbar.vertical.collapsed {\n                width: var(--_appbar-collapsed-width);\n            }\n\n            .appbar.horizontal {\n                flex-direction: row;\n                width: 100%;\n                height: auto;\n                align-items: center;\n            }\n\n            .appbar-header,\n            .appbar-body,\n            .appbar-footer {\n                flex-shrink: 0;\n            }\n\n            .appbar-body {\n                flex: 1;\n                overflow-y: auto;\n                overflow-x: hidden;\n                display: flex;\n                gap: var(--_appbar-body-gap);\n            }\n\n            .appbar.vertical .appbar-body {\n                flex-direction: column;\n            }\n            .appbar.horizontal .appbar-body {\n                flex-direction: row;\n                overflow-y: hidden;\n                overflow-x: auto;\n                align-items: center;\n            }\n\n            .appbar.vertical .appbar-header {\n                border-bottom: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);\n                padding-bottom: var(--_appbar-padding);\n                margin-bottom: var(--_appbar-padding);\n            }\n            .appbar.vertical .appbar-footer {\n                border-top: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);\n                padding-top: var(--_appbar-padding);\n                margin-top: var(--_appbar-padding);\n            }\n\n            .appbar.horizontal .appbar-header {\n                border-right: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);\n                padding-right: var(--_appbar-padding);\n                margin-right: var(--_appbar-padding);\n            }\n            .appbar.horizontal .appbar-footer {\n                border-left: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #333);\n                padding-left: var(--_appbar-padding);\n                margin-left: var(--_appbar-padding);\n            }\n\n            .header-content {\n                display: flex;\n                align-items: center;\n                gap: var(--spacing-small, 8px);\n                overflow: hidden;\n            }\n            .appbar.horizontal .header-content,\n            .appbar.vertical .header-content {\n                flex-direction: row;\n            }\n            .logo-wrapper {\n                width: var(--_icon-col-width);\n                display: flex;\n                justify-content: center;\n                align-items: center;\n                flex-shrink: 0;\n            }\n\n            .header-title {\n                font-weight: bold;\n                white-space: nowrap;\n                overflow: hidden;\n                text-overflow: ellipsis;\n                font-size: var(--font-size-label, 0.9em);\n            }\n            .appbar.vertical.collapsed .header-title {\n                display: none;\n            }\n\n            .nav-item {\n                display: flex;\n                align-items: center;\n                position: relative;\n            }\n            .appbar.vertical .nav-item {\n                width: 100%;\n            }\n            .appbar.vertical .nav-item y-button {\n                display: block;\n                width: 100%;\n            }\n            .appbar.vertical .nav-item y-button::part(button),\n            .appbar.vertical .appbar-footer y-button::part(button) {\n                width: 100%;\n                justify-content: flex-start;\n                padding-left: 0;\n                padding-right: 0;\n            }\n\n            /* Fixed-width icon column — matches collapsed inner width so icons stay centred across states */\n            .appbar.vertical .nav-item y-button::part(left-icon),\n            .appbar.vertical .appbar-footer y-button::part(left-icon) {\n                width: var(--_icon-col-width);\n                display: flex;\n                justify-content: center;\n                flex-shrink: 0;\n            }\n\n            .appbar.vertical .nav-item y-button::part(right-icon) {\n                margin-left: auto;\n            }\n\n            .appbar.vertical.collapsed .nav-item y-button::part(button),\n            .appbar.vertical.collapsed .appbar-footer y-button::part(button) {\n                min-width: 0;\n            }\n            .appbar.vertical.collapsed .nav-item y-button::part(label),\n            .appbar.vertical.collapsed .appbar-footer y-button::part(label) {\n                display: none;\n            }\n            .appbar.vertical.collapsed .nav-item y-button::part(right-icon),\n            .appbar.vertical.collapsed .appbar-footer y-button::part(right-icon) {\n                display: none;\n            }\n\n            .appbar-footer {\n                display: flex;\n                flex-direction: column;\n                gap: 2px;\n            }\n            .appbar.horizontal .appbar-footer {\n                flex-direction: row;\n                align-items: center;\n            }\n            .appbar.vertical .appbar-footer y-button {\n                display: block;\n                width: 100%;\n            }\n\n            .appbar.vertical.collapsed .appbar-header,\n            .appbar.vertical.collapsed .appbar-body,\n            .appbar.vertical.collapsed .appbar-footer {\n                align-items: center;\n            }\n\n            ::slotted(*) {\n                display: block;\n            }\n        ',this.shadowRoot.appendChild(i),document.querySelectorAll('link[rel="stylesheet"]').forEach(e=>{this.shadowRoot.appendChild(e.cloneNode(!0))});const s=document.createElement("div");s.className="appbar "+(e?"vertical":"horizontal"),t&&s.classList.add("collapsed"),s.setAttribute("role","navigation"),s.style.setProperty("--_appbar-padding",a.padding),s.style.setProperty("--_appbar-collapsed-width",a.collapsedWidth),s.style.setProperty("--_appbar-body-gap",a.bodyGap),s.style.setProperty("--_icon-col-width",`calc(${a.collapsedWidth} - 2 * var(--_appbar-padding) - 2 * var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)))`);const l=document.createElement("div");l.className="appbar-header";const c=document.createElement("div");c.className="header-content";const d=document.createElement("div");d.className="logo-wrapper";const p=document.createElement("slot");p.name="logo",d.appendChild(p),c.appendChild(d);const h=document.createElement("div");h.className="header-title";const b=document.createElement("slot");b.name="title",h.appendChild(b),c.appendChild(h),l.appendChild(c),s.appendChild(l);const u=document.createElement("div");u.className="appbar-body";this.items.forEach(n=>{const o=n.children?.length>0,i=document.createElement("div");i.className="nav-item";const s=document.createElement("y-button"),l=this._uid("appbar-btn");s.id=l;const c=this._isItemActive(n);if(s.setAttribute("color",c?"primary":"base"),s.setAttribute("style-type","flat"),s.setAttribute("size",a.buttonSize),n.icon){const e=document.createElement("span");e.slot="left-icon",e.innerHTML=n.icon,s.appendChild(e)}if(n.text&&!t){const e=document.createTextNode(n.text);s.appendChild(e)}if(o&&!t){const t=document.createElement("span");t.slot="right-icon",t.innerHTML=e?'<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"><polyline points="9 18 15 12 9 6"/></svg>':'<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"><polyline points="6 9 12 15 18 9"/></svg>',s.appendChild(t)}if(n.href&&!o&&s.addEventListener("click",()=>{window.location.href=n.href}),i.appendChild(s),o){const e=document.createElement("y-menu");e.setAttribute("anchor",l),e.setAttribute("direction",r),e.setAttribute("size",a.buttonSize),e.items=n.children,i.appendChild(e)}u.appendChild(i)}),s.appendChild(u);const m=document.createElement("div");m.className="appbar-footer";const g=document.createElement("slot");if(g.name="footer",m.appendChild(g),e){const e=document.createElement("y-button");e.setAttribute("color","base"),e.setAttribute("style-type","flat"),e.setAttribute("size",a.buttonSize),e.setAttribute("aria-label",t?"Expand sidebar":"Collapse sidebar"),e.className="collapse-btn";const n=document.createElement("span");if(n.slot="left-icon",n.innerHTML=t?'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="13 17 18 12 13 7"/><polyline points="6 17 11 12 6 7"/></svg>':'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="11 17 6 12 11 7"/><polyline points="18 17 13 12 18 7"/></svg>',e.appendChild(n),!t){const t=document.createTextNode("Collapse");e.appendChild(t)}e.addEventListener("click",this._onCollapseClick),m.appendChild(e)}s.appendChild(m),this.shadowRoot.appendChild(s)}}customElements.get("y-appbar")||customElements.define("y-appbar",a);class i extends HTMLElement{static get observedAttributes(){return["src","alt","size","shape"]}constructor(){super(),this.attachShadow({mode:"open"}),this.render()}attributeChangedCallback(e,t,n){t!==n&&this.render()}render(){const e=this.getAttribute("src"),t=this.getAttribute("alt")||"AN",n=`var(--component-avatar-border-radius-${this.getAttribute("shape")||"circle"}, 9999px)`;let r;switch(this.getAttribute("size")||"medium"){case"small":r="var(--component-avatar-size-small, 27px)";break;case"large":r="var(--component-avatar-size-large, 51px)";break;default:r="var(--component-avatar-size-medium, 35px)"}const o=new CSSStyleSheet;let a="";if(a=e?`\n          :host {\n            display: inline-block;\n            height: ${r};\n            min-width: ${r};\n          }\n          img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            border-radius: ${n};\n          }\n        `:`\n          :host {\n            display: inline-block;\n            width: ${r};\n            height: ${r};\n            min-width: ${r};\n            font-family: var(--font-family-header, "Lexend"), sans-serif;\n            text-transform: uppercase;\n          }\n          .avatar {\n            width: 100%;\n            height: 100%;\n            border-radius: ${n};\n            background-color: var(--primary-content--, rgba(4, 134, 209, 1));\n            color: var(--primary-background-component, rgba(245, 250, 250, 1));\n            display: flex;\n            align-items: center;\n            justify-content: center;\n          }\n          .avatar h5 {\n            margin: 0;\n            font-size: calc(${r} * 0.5);\n          }\n        `,o.replaceSync(a),this.shadowRoot.adoptedStyleSheets=[o],e)this.shadowRoot.innerHTML=`<img src="${e}" alt="${t}" part="avatar" />`;else{const e=t.trim().split(/\s+/),n=e.length>=2?e[0].charAt(0)+e[1].charAt(0):t.substring(0,2);this.shadowRoot.innerHTML=`<div class="avatar" part="avatar"><h5>${n}</h5></div>`}}}customElements.get("y-avatar")||customElements.define("y-avatar",i);class s extends HTMLElement{static get observedAttributes(){return["value","position","alignment","color","size"]}constructor(){super(),this.attachShadow({mode:"open"}),this.render()}connectedCallback(){this.render()}attributeChangedCallback(e,t,n){t!==n&&this.render()}get alignment(){return this.getAttribute("alignment")||"right"}get color(){return this.getAttribute("color")||"primary"}get position(){return this.getAttribute("position")||"top"}get size(){return this.getAttribute("size")||"small"}get value(){return this.getAttribute("value")||""}getBadgeColor(e){return{primary:"var(--primary-content--)",secondary:"var(--secondary-content--)",base:"var(--base-content--)",success:"var(--success-content--)",warning:"var(--warning-content--)",error:"var(--error-content--)",help:"var(--help-content--)"}[e]||e}getBadgePosition(e,t){const n="var(--spacing-small, 6px)";return`${"top"===e?`top: calc(${n} * -1);`:`bottom: calc(${n} * -1);`} ${"right"===t?`right: calc(${n} * -1);`:`left: calc(${n} * -1);`}`}getSizeAttributes(e){const t={small:{fontSize:"var(--font-size-small, 0.8em)",padding:"var(--component-badge-padding-small)",minSize:"var(--component-badge-size-small)"},medium:{fontSize:"var(--font-size-label, 0.83em)",padding:"var(--component-badge-padding-medium)",minSize:"var(--component-badge-size-medium)"},large:{fontSize:"var(--font-size-paragraph, 1em)",padding:"var(--component-badge-padding-large)",minSize:"var(--component-badge-size-large)"}};return t[e]||t.small}hasTargetContent(){return Array.from(this.childNodes).some(e=>e.nodeType===Node.ELEMENT_NODE||e.nodeType===Node.TEXT_NODE&&""!==e.textContent.trim())}render(){const e=this.getBadgeColor(this.color),{fontSize:t,padding:n,minSize:r}=this.getSizeAttributes(this.size),o=this.getBadgePosition(this.position,this.alignment),a=this.hasTargetContent();this.shadowRoot.innerHTML=`\n            <style>\n                :host {\n                    position: ${a?"relative":"static"};\n                    display: inline-flex;\n                    align-items: center;\n                }\n                .badge {\n                    position: ${a?"absolute":"static"};\n                    ${a?o:""}\n                    background: ${e};\n                    color: var(--base-background-component, #fff);\n                    font-size: ${t};\n                    font-weight: bold;\n                    padding: ${n};\n                    border-radius: var(--component-badge-border-radius-circle, 9999px);\n                    display: flex;\n                    align-items: center;\n                    justify-content: center;\n                    font-family: var(--font-family-body, sans-serif);\n                    min-width: ${r};\n                    height: ${r};\n                    z-index: 20;\n                }\n                ::slotted(*) {\n                    position: relative;\n                    display: inline-block;\n                }\n            </style>\n            ${a?"<slot></slot>":""}\n            <div class="badge" part="badge">${this.value}</div>\n        `}}function l(e,t){const n=e.match(/var\(\s*(--[^,)]+)/);if(!n)return e;return getComputedStyle(t).getPropertyValue(n[1]).trim()||e}function c(e){const t=function(e){const t=e.match(/^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i);if(t){let e=t[1];return e.length<=4&&(e=e.split("").map(e=>e+e).join("")),{r:parseInt(e.slice(0,2),16),g:parseInt(e.slice(2,4),16),b:parseInt(e.slice(4,6),16)}}const n=e.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);return n?{r:parseInt(n[1],10),g:parseInt(n[2],10),b:parseInt(n[3],10)}:null}(e);return t&&function({r:e,g:t,b:n}){const[r,o,a]=[e,t,n].map(e=>(e/=255)<=.03928?e/12.92:Math.pow((e+.055)/1.055,2.4));return.2126*r+.7152*o+.0722*a}(t)>.179?"var(--neutral-black, #000000)":"var(--neutral-white, #ffffff)"}customElements.get("y-badge")||customElements.define("y-badge",s);class d extends HTMLElement{static get observedAttributes(){return["color","raised"]}constructor(){super(),this.attachShadow({mode:"open"}),this.render()}connectedCallback(){this.updateColorStyles(),this.updateElevationStyles()}attributeChangedCallback(e,t,n){t!==n&&("color"===e&&this.updateColorStyles(),"raised"===e&&this.updateElevationStyles(),this.render())}updateColorStyles(){const e={primary:["--base-content--","--primary-background-component","--primary-background-border","--primary-background-active"],secondary:["--base-content--","--secondary-background-component","--secondary-background-border","--secondary-background-active"],base:["--base-content--","--base-background-component","--base-background-border","--base-background-active"],success:["--base-content--","--success-background-component","--success-background-border","--success-background-active"],error:["--base-content--","--error-background-component","--error-background-border","--error-background-active"],warning:["--base-content--","--warning-background-component","--warning-background-border","--warning-background-active"]},t=e[this.getAttribute("color")||"base"]||e.base;this.style.setProperty("--card-content-color",`var(${t[0]})`),this.style.setProperty("--card-border-color",`var(${t[2]})`),this.style.setProperty("--card-background",`var(${t[1]})`),this.style.setProperty("--card-section-background",`var(${t[2]})`)}updateElevationStyles(){this.hasAttribute("raised")?(this.style.setProperty("--card-border-width","0"),this.style.setProperty("--card-box-shadow","var(--base-shadow)")):(this.style.setProperty("--card-border-width","var(--component-card-border-width)"),this.style.setProperty("--card-box-shadow","none"))}render(){const e=new CSSStyleSheet;e.replaceSync("\n            :host {\n                display: block;\n                box-sizing: border-box;\n                background: var(--card-background, var(--base-background-component));\n                border: var(--card-border-width, var(--component-card-border-width)) solid var(--card-border-color, var(--base-background-border));\n                border-radius: var(--component-card-border-radius-outer);\n                font-family: var(--font-family-body);\n                color: var(--card-content-color, var(--base-content--));\n                box-shadow: var(--card-box-shadow, none);\n            }\n\n            .header {\n                padding: var(--component-card-padding-outer);\n                border-bottom: var(--component-card-inner-border-width) solid var(--card-border-color, var(--base-background-border));\n            }\n\n            .body {\n                padding: var(--component-card-padding-outer);\n            }\n\n            .footer {\n                padding: var(--component-card-padding-inner) var(--component-card-padding-outer);\n                border-top: var(--component-card-inner-border-width) solid var(--card-border-color, var(--base-background-border));\n            }\n\n            ::slotted(*) {\n                margin: 0;\n            }\n        "),this.shadowRoot.adoptedStyleSheets=[e],this.shadowRoot.innerHTML='\n            <div class="header" part="header">\n                <slot name="header"></slot>\n            </div>\n            <div class="body" part="body">\n                <slot></slot>\n            </div>\n            <div class="footer" part="footer">\n                <slot name="footer"></slot>\n            </div>\n        ',function(e,t={}){Object.entries(t).forEach(([t,n])=>{const r=e.querySelector("slot"+(t?`[name="${t}"]`:":not([name])")),o=e.querySelector(n);if(r&&o){const e=r.assignedNodes({flatten:!0}).filter(e=>!(e.nodeType===Node.TEXT_NODE&&""===e.textContent.trim()));o.style.display=e.length>0?"":"none"}})}(this.shadowRoot,{header:".header",footer:".footer"})}}customElements.get("y-card")||customElements.define("y-card",d);class p extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return["checked","disabled","indeterminate","label-position","name","value"]}constructor(){super(),this._internals=this.attachInternals(),this.attachShadow({mode:"open"}),this.render()}connectedCallback(){this.hasAttribute("label-position")||this.setAttribute("label-position","right"),this._internals.setFormValue(this.checked?this.value:null)}attributeChangedCallback(e){"checked"!==e&&"value"!==e||this._internals.setFormValue(this.checked?this.value:null),"indeterminate"===e&&this.updateIcon(),"label-position"===e&&this.render(),this.updateState()}get checked(){return this.hasAttribute("checked")}set checked(e){e?this.setAttribute("checked",""):this.removeAttribute("checked")}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get indeterminate(){return this.hasAttribute("indeterminate")}set indeterminate(e){e?this.setAttribute("indeterminate",""):this.removeAttribute("indeterminate")}get value(){return this.getAttribute("value")||"on"}set value(e){this.setAttribute("value",e)}get name(){return this.getAttribute("name")}toggle(){this.disabled||(this.indeterminate?(this.indeterminate=!1,this.checked=!0):this.checked=!this.checked,this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})))}updateIcon(){const e=this.shadowRoot.querySelector(".icon");e&&(this.indeterminate?e.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="4" y="11" width="16" height="2" rx="1" ry="1" fill="currentColor"/></svg>':this.checked?e.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polyline points="5 13 10 17 19 6" fill="none" stroke="currentColor" stroke-width="2"/></svg>':e.innerHTML="")}updateState(){this.shadowRoot.querySelector(".checkbox").setAttribute("aria-checked",this.indeterminate?"mixed":this.checked?"true":"false"),this.updateIcon()}render(){const e=this.getAttribute("label-position")||"right",t=this.disabled,n=new CSSStyleSheet;n.replaceSync(`\n            :host {\n                display: inline-flex;\n                align-items: center;\n                line-height: 1;\n                vertical-align: middle;\n                font-family: var(--font-family-body);\n                cursor: ${t?"not-allowed":"pointer"};\n                opacity: ${t?"0.6":"1"};\n            }\n\n            .wrapper {\n                display: inline-flex;\n                align-items: center;\n                gap: var(--spacing-x-small, 6px);\n                line-height: 1;\n                flex-direction: ${"top"===e?"column":"bottom"===e?"column-reverse":"left"===e?"row-reverse":"row"};\n            }\n\n            .checkbox {\n                width: var(--component-checkbox-size, 20px);\n                height: var(--component-checkbox-size, 20px);\n                border: var(--component-inputs-border-width, 2px) solid var(--component-checkbox-border-color);\n                border-radius: var(--component-inputs-border-radius-outer, 4px);\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                background: var(--component-checkbox-background);\n                box-sizing: border-box;\n                transition: border-color 0.2s ease;\n                line-height: 0;\n            }\n\n            .checkbox:hover {\n                border-color: var(--component-checkbox-accent);\n            }\n\n            .checkbox svg {\n                width: var(--component-checkbox-icon-size, 16px);\n                height: var(--component-checkbox-icon-size, 16px);\n                stroke: var(--component-checkbox-accent);\n                display: block;\n            }\n\n            .label {\n                display: inline-flex;\n                align-items: center;\n                font-size: 0.9em;\n                line-height: 1;\n                color: var(--component-checkbox-color);\n            }\n\n            .icon {\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                width: 100%;\n                height: 100%;\n                line-height: 0;\n            }\n\n        `),this.shadowRoot.adoptedStyleSheets=[n],this.shadowRoot.innerHTML='\n            <div class="wrapper">\n                <div class="checkbox" role="checkbox" tabindex="0">\n                    <span class="icon"></span>\n                </div>\n                <label part="label">\n                    <slot></slot>\n                </label>\n            </div>\n        ',this.shadowRoot.querySelector(".checkbox").addEventListener("click",()=>this.toggle()),this.shadowRoot.querySelector(".checkbox").addEventListener("keydown",e=>{" "!==e.key&&"Enter"!==e.key||(e.preventDefault(),this.toggle())}),this.updateState()}}customElements.get("y-checkbox")||customElements.define("y-checkbox",p);class h extends HTMLElement{static get observedAttributes(){return["visible","anchor","closable"]}constructor(){super(),this.attachShadow({mode:"open"}),this.onKeyDown=this.onKeyDown.bind(this),this.onAnchorClick=this.onAnchorClick.bind(this)}connectedCallback(){this.render(),this.setupAnchor(),this.visible&&this.show()}attributeChangedCallback(e,t,n){t!==n&&("visible"===e&&(this.visible?this.show():this.hide()),"anchor"===e&&this.setupAnchor(),"closable"===e&&this.render())}get visible(){return this.hasAttribute("visible")}set visible(e){e?this.setAttribute("visible",""):this.removeAttribute("visible")}get anchor(){return this.getAttribute("anchor")}set anchor(e){this.setAttribute("anchor",e)}get closable(){return this.hasAttribute("closable")}set closable(e){e?this.setAttribute("closable",""):this.removeAttribute("closable")}show(){this.shadowRoot.querySelector(".dialog")||this.render(),document.addEventListener("keydown",this.onKeyDown);const e=this.shadowRoot.querySelector(".dialog");e&&"function"==typeof e.focus&&e.focus()}hide(){document.removeEventListener("keydown",this.onKeyDown)}setupAnchor(){if(this._anchorEl&&this._anchorEl.removeEventListener("click",this.onAnchorClick),this.anchor){const e=document.getElementById(this.anchor);e&&(this._anchorEl=e,this._anchorEl.addEventListener("click",this.onAnchorClick))}}onAnchorClick(){this.visible=!this.visible}onKeyDown(e){"Escape"===e.key&&this.visible&&(this.visible=!1)}render(){const e=document.createElement("style");e.textContent="\n            :host {\n                position: fixed;\n                top: 0; left: 0; right: 0; bottom: 0;\n                display: none;\n                align-items: center;\n                justify-content: center;\n                background: rgba(0,0,0,0.5);\n                z-index: 1000;\n            }\n            :host([visible]) { display: flex; }\n            .dialog {\n                background: var(--component-dialog-background);\n                border: var(--component-dialog-border-width, 1px) solid var(--component-dialog-border-color);\n                border-radius: var(--component-dialog-border-radius-outer, 4px);\n                max-width: 90%;\n                max-height: 90%;\n                display: flex;\n                flex-direction: column;\n                box-shadow: var(--component-dialog-shadow, 0 2px 10px rgba(0,0,0,0.3));\n            }\n            .header {\n                padding: var(--component-dialog-padding, var(--spacing-medium));\n                font-weight: bold;\n                border-bottom: var(--component-dialog-inner-border-width, 1px) solid var(--component-dialog-border-color);\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n                gap: var(--spacing-small, 8px);\n            }\n            .header-content {\n                flex: 1;\n            }\n            .close-btn {\n                background: none;\n                border: none;\n                cursor: pointer;\n                padding: var(--spacing-x-small, 4px);\n                color: var(--component-dialog-color, #000);\n                font-size: 1.25em;\n                line-height: 1;\n                border-radius: var(--component-button-border-radius-outer, 4px);\n                display: flex;\n                align-items: center;\n                justify-content: center;\n            }\n            .close-btn:hover {\n                background: var(--component-dialog-hover-background, #eee);\n            }\n            .close-btn:focus-visible {\n                outline: 2px solid var(--component-dialog-accent);\n                outline-offset: -1px;\n            }\n            .body {\n                padding: var(--component-dialog-padding, var(--spacing-medium));\n                overflow: auto;\n                flex: 1;\n            }\n            .footer {\n                padding: var(--component-dialog-padding, var(--spacing-medium));\n                border-top: var(--component-dialog-inner-border-width, 1px) solid var(--component-dialog-border-color);\n                text-align: right;\n            }\n\n            ::slotted(*) {\n                margin: 0;\n            }\n        ",this.shadowRoot.innerHTML="",this.shadowRoot.appendChild(e);const t=document.createElement("div");t.className="dialog",t.setAttribute("role","dialog"),t.setAttribute("aria-modal","true"),t.setAttribute("tabindex","-1");const n=document.createElement("div");n.className="header";const r=document.createElement("div");if(r.className="header-content",r.innerHTML='<slot name="header"></slot>',n.appendChild(r),this.closable){const e=document.createElement("button");e.className="close-btn",e.setAttribute("aria-label","Close"),e.innerHTML="&#10005;",e.addEventListener("click",()=>{this.visible=!1}),n.appendChild(e)}const o=document.createElement("div");o.className="body",o.innerHTML='<slot name="body"></slot>';const a=document.createElement("div");a.className="footer",a.innerHTML='<slot name="footer"></slot>',t.appendChild(n),t.appendChild(o),t.appendChild(a),this.shadowRoot.appendChild(t)}}customElements.get("y-dialog")||customElements.define("y-dialog",h);class b extends HTMLElement{static get observedAttributes(){return["visible","anchor","position","resizable"]}constructor(){super(),this.attachShadow({mode:"open"}),this._onAnchorClick=this._onAnchorClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onResizePointerDown=this._onResizePointerDown.bind(this),this._onResizePointerMove=this._onResizePointerMove.bind(this),this._onResizePointerUp=this._onResizePointerUp.bind(this)}connectedCallback(){this.render(),this._setupAnchor(),this.visible&&this._show()}disconnectedCallback(){this._teardownAnchor(),document.removeEventListener("keydown",this._onKeyDown),this._cleanupResize()}attributeChangedCallback(e,t,n){t!==n&&("visible"===e&&(this.visible?this._show():this._hide()),"anchor"===e&&(this._teardownAnchor(),this._setupAnchor()),"position"===e&&this._applyPosition(),"resizable"===e&&this._applyResizable())}get visible(){return this.hasAttribute("visible")}set visible(e){e?this.setAttribute("visible",""):this.removeAttribute("visible")}get anchor(){return this.getAttribute("anchor")}set anchor(e){this.setAttribute("anchor",e)}get position(){return this.getAttribute("position")||"left"}set position(e){this.setAttribute("position",e)}get resizable(){return this.hasAttribute("resizable")}set resizable(e){e?this.setAttribute("resizable",""):this.removeAttribute("resizable")}_setupAnchor(){const e=this.anchor;if(e){const t=document.getElementById(e);t&&(this._anchorEl=t,this._anchorEl.addEventListener("click",this._onAnchorClick))}}_teardownAnchor(){this._anchorEl&&(this._anchorEl.removeEventListener("click",this._onAnchorClick),this._anchorEl=null)}_onAnchorClick(){this.visible=!this.visible}_show(){this.style.display="block",this.offsetHeight;const e=this.shadowRoot.querySelector(".overlay"),t=this.shadowRoot.querySelector(".drawer-panel");e&&e.classList.add("open"),t&&(t.classList.add("open"),t.focus()),document.addEventListener("keydown",this._onKeyDown)}_hide(){const e=this.shadowRoot.querySelector(".overlay"),t=this.shadowRoot.querySelector(".drawer-panel");e&&e.classList.remove("open"),t&&t.classList.remove("open"),document.removeEventListener("keydown",this._onKeyDown);const n=this._getTransitionDuration(t);n>0?(clearTimeout(this._hideTimer),this._hideTimer=setTimeout(()=>{this.visible||(this.style.display="none")},n)):this.style.display="none"}_getTransitionDuration(e){if(!e)return 0;const t=getComputedStyle(e).transitionDuration||"0s",n=parseFloat(t);return isNaN(n)?0:1e3*n}_onKeyDown(e){"Escape"===e.key&&this.visible&&(this.visible=!1)}_onOverlayClick(){this.visible=!1}_applyPosition(){const e=this.shadowRoot.querySelector(".drawer-panel");e&&e.setAttribute("data-position",this.position)}_applyResizable(){const e=this.shadowRoot.querySelector(".resize-handle");e&&(e.style.display=this.resizable?"flex":"none")}_isHorizontal(){return"left"===this.position||"right"===this.position}_onResizePointerDown(e){e.preventDefault(),this._resizing=!0,this._startPointer=this._isHorizontal()?e.clientX:e.clientY;const t=this.shadowRoot.querySelector(".drawer-panel");this._startSize=this._isHorizontal()?t.offsetWidth:t.offsetHeight,t.style.transition="none",document.addEventListener("pointermove",this._onResizePointerMove),document.addEventListener("pointerup",this._onResizePointerUp)}_onResizePointerMove(e){if(!this._resizing)return;const t=this.shadowRoot.querySelector(".drawer-panel"),n=(this._isHorizontal()?e.clientX:e.clientY)-this._startPointer;let r;r="left"===this.position?this._startSize+n:"right"===this.position?this._startSize-n:"top"===this.position?this._startSize+n:this._startSize-n;r=Math.max(100,r),this._isHorizontal()?t.style.width=`${r}px`:t.style.height=`${r}px`}_onResizePointerUp(){this._resizing=!1;const e=this.shadowRoot.querySelector(".drawer-panel");e&&(e.style.transition=""),document.removeEventListener("pointermove",this._onResizePointerMove),document.removeEventListener("pointerup",this._onResizePointerUp)}_cleanupResize(){document.removeEventListener("pointermove",this._onResizePointerMove),document.removeEventListener("pointerup",this._onResizePointerUp)}_gripSVG(){return`<svg xmlns="http://www.w3.org/2000/svg" width="${(e=this._isHorizontal())?4:20}" height="${e?20:4}" viewBox="0 0 ${e?4:20} ${e?20:4}" fill="currentColor">\n            ${e?'<circle cx="2" cy="4"  r="1.5"/>\n                   <circle cx="2" cy="10" r="1.5"/>\n                   <circle cx="2" cy="16" r="1.5"/>':'<circle cx="4"  cy="2" r="1.5"/>\n                   <circle cx="10" cy="2" r="1.5"/>\n                   <circle cx="16" cy="2" r="1.5"/>'}\n        </svg>`;var e}render(){this.shadowRoot.innerHTML="";const e=document.createElement("style");e.textContent='\n            :host {\n                position: fixed;\n                top: 0; left: 0; right: 0; bottom: 0;\n                display: none;\n                z-index: 1000;\n            }\n            :host([visible]) {\n                display: block;\n            }\n\n            .overlay {\n                position: absolute;\n                top: 0; left: 0; right: 0; bottom: 0;\n                background: rgba(0, 0, 0, 0);\n                transition: background var(--drawer-transition-duration, 0.3s) ease;\n            }\n            .overlay.open {\n                background: rgba(0, 0, 0, 0.4);\n            }\n\n            .drawer-panel {\n                position: absolute;\n                background: var(--component-drawer-background, #fff);\n                color: var(--component-drawer-color, #000);\n                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);\n                overflow: hidden;\n                outline: none;\n                display: flex;\n                flex-direction: column;\n                border: none;\n                border-radius: var(--component-drawer-border-radius, 0);\n                transition: transform var(--drawer-transition-duration, 0.3s) ease;\n            }\n\n            .drawer-panel[data-position="left"],\n            .drawer-panel[data-position="right"] {\n                top: 0;\n                bottom: 0;\n                width: var(--drawer-width, 300px);\n                flex-direction: row;\n            }\n            .drawer-panel[data-position="left"] {\n                left: 0;\n                transform: translateX(-100%);\n                border-right: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #ccc);\n            }\n            .drawer-panel[data-position="right"] {\n                right: 0;\n                transform: translateX(100%);\n                border-left: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #ccc);\n            }\n\n            .drawer-panel[data-position="top"],\n            .drawer-panel[data-position="bottom"] {\n                left: 0;\n                right: 0;\n                height: var(--drawer-height, 300px);\n            }\n            .drawer-panel[data-position="top"] {\n                top: 0;\n                transform: translateY(-100%);\n                border-bottom: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #ccc);\n            }\n            .drawer-panel[data-position="bottom"] {\n                bottom: 0;\n                transform: translateY(100%);\n                border-top: var(--component-drawer-border-width, 2px) solid var(--component-drawer-border-color, #ccc);\n            }\n\n            .drawer-panel.open { transform: translate(0, 0); }\n\n            .drawer-header {\n                padding: var(--component-drawer-padding, 1rem);\n                font-weight: bold;\n            }\n            .drawer-body {\n                padding: var(--component-drawer-padding, 1rem);\n                flex: 1;\n                overflow: auto;\n            }\n            .drawer-footer {\n                padding: var(--component-drawer-padding, 1rem);\n            }\n\n            /* Wrapper so header/body/footer stack vertically inside a row layout */\n            .drawer-content {\n                display: flex;\n                flex-direction: column;\n                flex: 1;\n                min-width: 0;\n                min-height: 0;\n                overflow: hidden;\n            }\n\n            ::slotted(*) {\n                margin: 0;\n            }\n\n            .resize-handle {\n                display: none;              /* hidden until resizable attr */\n                flex-shrink: 0;\n                align-items: center;\n                justify-content: center;\n                color: var(--component-drawer-color, #999);\n                opacity: 0.6;\n                touch-action: none;         /* needed for pointer events */\n                user-select: none;\n                transition: opacity 0.15s, background 0.15s;\n            }\n            .resize-handle:hover,\n            .resize-handle:active {\n                opacity: 1;\n                background: var(--component-drawer-hover-background, rgba(128,128,128,0.15));\n            }\n\n            .drawer-panel[data-position="left"] > .resize-handle,\n            .drawer-panel[data-position="right"] > .resize-handle {\n                width: var(--component-drawer-handle-width, 6px);\n                padding: var(--component-drawer-handle-padding, 4px);\n                cursor: ew-resize;\n            }\n            .drawer-panel[data-position="left"] > .resize-handle {\n                order: 99;\n            }\n            .drawer-panel[data-position="right"] > .resize-handle {\n                order: -1;\n            }\n\n            .drawer-panel[data-position="top"] > .resize-handle,\n            .drawer-panel[data-position="bottom"] > .resize-handle {\n                height: var(--component-drawer-handle-width, 6px);\n                padding: var(--component-drawer-handle-padding, 4px);\n                cursor: ns-resize;\n            }\n            .drawer-panel[data-position="top"] > .resize-handle {\n                order: 99;\n            }\n            .drawer-panel[data-position="bottom"] > .resize-handle {\n                order: -1;\n            }\n        ',this.shadowRoot.appendChild(e);const t=document.createElement("div");t.className="overlay",t.addEventListener("click",()=>this._onOverlayClick()),this.shadowRoot.appendChild(t);const n=document.createElement("div");n.className="drawer-panel",n.setAttribute("role","dialog"),n.setAttribute("aria-modal","true"),n.setAttribute("tabindex","-1"),n.setAttribute("data-position",this.position);const r=document.createElement("div");r.className="resize-handle",r.innerHTML=this._gripSVG(),r.style.display=this.resizable?"flex":"none",r.addEventListener("pointerdown",this._onResizePointerDown),n.appendChild(r);const o=document.createElement("div");o.className="drawer-content";const a=document.createElement("div");a.className="drawer-header",a.innerHTML='<slot name="header"></slot>';const i=document.createElement("div");i.className="drawer-body",i.innerHTML='<slot name="body"></slot>';const s=document.createElement("div");s.className="drawer-footer",s.innerHTML='<slot name="footer"></slot>',o.appendChild(a),o.appendChild(i),o.appendChild(s),n.appendChild(o),this.shadowRoot.appendChild(n),this.visible&&requestAnimationFrame(()=>{t.classList.add("open"),n.classList.add("open")})}}customElements.get("y-drawer")||customElements.define("y-drawer",b);class u extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return["type","size","value","label-position","disabled","invalid","name"]}constructor(){super(),this._internals=this.attachInternals(),this.attachShadow({mode:"open"}),this.render()}connectedCallback(){this.hasAttribute("size")||this.setAttribute("size","medium"),this.hasAttribute("label-position")||this.setAttribute("label-position","top"),this._internals.setFormValue(this.value)}attributeChangedCallback(e,t,n){if(t!==n)return"value"===e?(this.input&&(this.input.value=n),void(this._internals&&this._internals.setFormValue(n,this.getAttribute("name")))):void("name"!==e?"invalid"!==e?this.render():this.updateValidationState():this._internals.setFormValue(this.value,n))}get value(){return this.input?.value||""}set value(e){this.input?this.input.value=e:this.setAttribute("value",e),this._internals.setFormValue(e,this.getAttribute("name"))}checkValidity(){return this.input?.checkValidity?.()??!0}updateValidationState(){const e=this.hasAttribute("invalid"),t=this.input&&!this.checkValidity(),n=e||t;this.inputContainer?.classList.toggle("is-invalid",n),this.labelWrapper?.classList.toggle("is-invalid",n)}render(){const e=this.getAttribute("type")||"text",t=this.getAttribute("size")||"medium",n=this.getAttribute("value")||"",r=this.getAttribute("label-position")||"top",o=this.hasAttribute("disabled"),a="top"===r,i={small:"--component-inputs-padding-small",medium:"--component-inputs-padding-medium",large:"--component-inputs-padding-large"}[t],s=new CSSStyleSheet;s.replaceSync(`\n            :host {\n                display: block;\n                font-family: var(--font-family-body);\n                color: var(--component-input-color);\n                opacity: ${o?"0.75":"1"};\n                pointer-events: ${o?"none":"auto"};\n            }\n\n            .input-wrapper {\n                position: relative;\n                display: flex;\n                flex-direction: column;\n                gap: var(--spacing-2x-small, 4px);\n            }\n\n            .input-container {\n                display: flex;\n                align-items: center;\n                gap: var(--spacing-x-small);\n                background: ${o?"var(--component-input-background-disabled)":"var(--component-input-background)"};\n                border: var(--component-inputs-border-width) solid var(--component-input-border-color);\n                border-radius: var(--component-inputs-border-radius-outer);\n                padding: var(${i});\n                box-sizing: border-box;\n                transition: border-color 0.2s ease-in-out;\n            }\n\n            .input-container.is-invalid {\n                border-color: var(--component-input-error-border-color);\n                background: var(--component-input-error-background);\n            }\n\n            .input-container.is-invalid input {\n                color: var(--component-input-error-color);\n            }\n\n            .input-container.is-invalid:hover {\n                border-color: var(--component-input-error-color);\n            }\n\n            .input-container.is-invalid:focus-within {\n                border-color: var(--component-input-error-color);\n            }\n\n            .input-container.is-invalid:focus-within input {\n                color: var(--component-input-color);\n            }\n\n            input {\n                all: unset;\n                flex: 1;\n                font-family: inherit;\n                font-size: 1em;\n                color: inherit;\n                min-width: 0;\n                min-height: 20px;\n            }\n\n            .input-container:hover {\n                border-color: var(--component-input-color);\n                transition: border-color 0.2s ease-in-out;\n            }\n\n            .input-container:focus-within {\n                border-color: var(--component-input-accent);\n            }\n\n            .label-wrapper.is-invalid ::slotted([slot="label"]) {\n                color: var(--component-input-error-color);\n            }\n\n            ::slotted([slot="label"]) {\n                font-weight: 500;\n                font-size: 0.875em;\n                color: var(--component-input-label-color);\n            }\n\n            ::slotted([slot="left-icon"]),\n            ::slotted([slot="right-icon"]) {\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                color: var(--component-input-icon-color);\n            }\n        `),this.shadowRoot.adoptedStyleSheets=[s],this.shadowRoot.innerHTML=`\n            <div class="input-wrapper">\n                ${a?'<div class="label-wrapper"><slot name="label"></slot></div>':""}\n                <div class="input-container">\n                    <slot name="left-icon"></slot>\n                    <input part="input" type="${e}" value="${n}" ${o?"disabled":""} />\n                    <slot name="right-icon"></slot>\n                </div>\n                ${a?"":'<div class="label-wrapper"><slot name="label"></slot></div>'}\n            </div>\n        `,this.input=this.shadowRoot.querySelector("input"),this.inputContainer=this.shadowRoot.querySelector(".input-container"),this.labelWrapper=this.shadowRoot.querySelector(".label-wrapper"),o||(this.input.addEventListener("input",e=>{this.setAttribute("value",e.target.value),this.dispatchEvent(new CustomEvent("input",{detail:{value:e.target.value},bubbles:!0,composed:!0})),this.updateValidationState()}),this.updateValidationState())}}customElements.get("y-input")||customElements.define("y-input",u);class m extends HTMLElement{static get observedAttributes(){return["selected","expanded","href","history"]}constructor(){super(),this.attachShadow({mode:"open"}),this._expanded=!1,this._checkRouteMatchBound=this.checkRouteMatch.bind(this),this.render()}connectedCallback(){this.addHeaderListeners(),this.checkForChildren(),this.updateChildState(),this.updateSelectedState(),this.updateExpandedState(),this.hasAttribute("href")&&(this.checkRouteMatch(),window.addEventListener("popstate",this._checkRouteMatchBound))}disconnectedCallback(){this.hasAttribute("href")&&window.removeEventListener("popstate",this._checkRouteMatchBound)}attributeChangedCallback(e,t,n){t!==n&&("selected"===e&&this.updateSelectedState(),"expanded"===e&&this.updateExpandedState(),"href"===e&&this.checkRouteMatch())}get selected(){return this.hasAttribute("selected")}set selected(e){e?this.setAttribute("selected",""):this.removeAttribute("selected")}get expanded(){return this.hasAttribute("expanded")}set expanded(e){e?this.setAttribute("expanded",""):this.removeAttribute("expanded")}toggle(){if(this.hasChildren()){if(this._expanded)this.collapse();else{const e=this.closest("y-panelbar");if(e&&e.hasAttribute("exclusive")){e.querySelectorAll("y-panel").forEach(e=>{e!==this&&e.expanded&&e.collapse()})}this.expand()}this.dispatchEvent(new CustomEvent("toggle",{detail:{expanded:this._expanded},bubbles:!0,composed:!0}))}}expand(){this.hasChildren()&&(this.expanded=!0,this._expanded=!0,this.updateExpandedState(),this.dispatchEvent(new CustomEvent("expand",{detail:{expanded:!0},bubbles:!0,composed:!0})))}collapse(){this.expanded=!1,this._expanded=!1,this.updateExpandedState(),this.dispatchEvent(new CustomEvent("collapse",{detail:{expanded:!1},bubbles:!0,composed:!0}))}updateSelectedState(){this.classList.toggle("selected",this.selected)}updateChildState(){const e=this.parentElement?.closest("y-panel"),t=Boolean(e&&e!==this);this.setAttribute("data-is-child",t?"true":"false")}checkRouteMatch(){const e=this.getAttribute("href");e&&window.location.pathname===e?this.selected=!0:this.selected=!1}addHeaderListeners(){const e=this.shadowRoot.querySelector(".header");if(!e)return;e.addEventListener("click",()=>{if(this.hasAttribute("href")){const e=this.getAttribute("href");return void("false"!==this.getAttribute("history")?(history.pushState({},"",e),window.dispatchEvent(new PopStateEvent("popstate",{state:{}}))):window.location.href=e)}this.hasChildren()?this.toggle():this.dispatchEvent(new CustomEvent("select",{detail:{selected:!0},bubbles:!0,composed:!0}))}),e.addEventListener("keydown",t=>{" "!==t.key&&"Enter"!==t.key||(t.preventDefault(),e.click())});const t=this.shadowRoot.querySelector('slot[name="children"]');t&&t.addEventListener("slotchange",()=>this.checkForChildren())}hasChildren(){const e=this.shadowRoot.querySelector('slot[name="children"]');if(!e)return!1;return e.assignedNodes({flatten:!0}).some(e=>e.nodeType!==Node.TEXT_NODE||""!==e.textContent.trim())}checkForChildren(){const e=this.hasChildren();this.setAttribute("data-has-children",e?"true":"false"),!e&&this.expanded&&(this.expanded=!1)}updateExpandedState(){const e=this.hasChildren(),t=this.shadowRoot.querySelector(".header"),n=this.expanded&&e;this._expanded=n,t&&t.setAttribute("aria-expanded",String(n))}render(){const e=new CSSStyleSheet;e.replaceSync('\n            :host {\n                display: block;\n                box-sizing: border-box;\n                background: var(--component-panel-background);\n                color: var(--component-panel-color);\n                font-family: var(--font-family-body);\n                overflow: hidden;\n            }\n\n            :host([expanded]) {\n                background: var(--component-panel-expanded-background);\n            }\n\n            :host([selected]) {\n                color: var(--component-panel-accent);\n            }\n\n            :host([data-is-child="true"]) {\n                box-shadow: inset var(--component-panelbar-border-width, 2px) 0 0 0 var(--component-panel-active-border);\n            }\n\n            :host([data-is-child="true"][selected]) {\n                box-shadow: inset var(--component-panelbar-border-width, 2px) 0 0 0 var(--component-panel-accent);\n            }\n\n            :host([selected]) .header:hover {\n                background: var(--component-panel-accent-hover-background);\n            }\n\n            :host([data-is-child="true"]) .header {\n                padding-left: calc(var(--component-panelbar-padding, 4px) * 2);\n            }\n\n            .header {\n                display: flex;\n                align-items: center;\n                gap: var(--spacing-medium, 8px);\n                padding: var(--component-panelbar-padding, 4px);\n                cursor: pointer;\n                transition: background 0.2s ease;\n                user-select: none;\n            }\n\n            .header:hover {\n                background: var(--component-panel-hover-background);\n            }\n\n            :host([data-has-children="false"]) .header {\n                cursor: default;\n            }\n\n            .header ::slotted([slot="icon"]) {\n                margin-right: 6px;\n            }\n\n            .header ::slotted([slot="label"]) {\n                flex-grow: 1;\n                cursor: inherit;\n                font-size: 1rem;\n                line-height: 1.2;\n            }\n\n            .arrow {\n                display: inline-flex;\n                align-items: center;\n                justify-content: center;\n                width: 20px;\n                height: 20px;\n                transition: transform 0.2s ease;\n            }\n\n            :host([expanded]) .arrow {\n                transform: rotate(180deg);\n            }\n\n            .children {\n                display: none;\n                padding: 0;\n                width: 100%;\n                box-sizing: border-box;\n            }\n\n            .children ::slotted(y-panel) {\n                width: 100%;\n                box-sizing: border-box;\n            }\n\n            :host([expanded]) .children {\n                display: block;\n            }\n\n            :host([data-has-children="false"]) .arrow {\n                visibility: hidden;\n            }\n        '),this.shadowRoot.adoptedStyleSheets=[e],this.shadowRoot.innerHTML=`\n            <div class="header" part="header" role="button" tabindex="0" aria-expanded="false">\n                <slot name="icon"></slot>\n                <slot name="label"><slot></slot></slot>\n                <span class="arrow" id="arrow" part="arrow">\n                    ${o}\n                </span>\n            </div>\n            <div class="children" id="childrenContainer" part="children">\n                <slot name="children"></slot>\n            </div>\n        `}}customElements.get("y-panel")||customElements.define("y-panel",m);class g extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.render()}render(){const e=new CSSStyleSheet;e.replaceSync("\n            :host {\n                display: block;\n            }\n        "),this.shadowRoot.adoptedStyleSheets=[e],this.shadowRoot.innerHTML="\n            <slot></slot>\n        "}}customElements.get("y-panelbar")||customElements.define("y-panelbar",g);class v extends HTMLElement{static get observedAttributes(){return["value","min","max","step","size","color","label-display","label-format","indeterminate","disabled"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.hasAttribute("size")||this.setAttribute("size","medium"),this.hasAttribute("min")||this.setAttribute("min","0"),this.hasAttribute("max")||this.setAttribute("max","100"),this.render()}attributeChangedCallback(e,t,n){t!==n&&this.render()}get value(){const e=parseFloat(this.getAttribute("value"));return Number.isNaN(e)?null:e}set value(e){null==e?this.removeAttribute("value"):this.setAttribute("value",String(e))}get min(){return parseFloat(this.getAttribute("min"))||0}set min(e){this.setAttribute("min",String(e))}get max(){return parseFloat(this.getAttribute("max"))||100}set max(e){this.setAttribute("max",String(e))}get step(){const e=parseFloat(this.getAttribute("step"));return Number.isNaN(e)||e<=0?null:e}set step(e){null==e?this.removeAttribute("step"):this.setAttribute("step",String(e))}get size(){return this.getAttribute("size")||"medium"}set size(e){this.setAttribute("size",e)}get color(){return this.getAttribute("color")||"primary"}set color(e){this.setAttribute("color",e)}get labelDisplay(){return"false"!==this.getAttribute("label-display")}set labelDisplay(e){this.setAttribute("label-display",e?"true":"false")}get labelFormat(){return this.getAttribute("label-format")||"percent"}set labelFormat(e){this.setAttribute("label-format",e)}get indeterminate(){return this.hasAttribute("indeterminate")}set indeterminate(e){e?this.setAttribute("indeterminate",""):this.removeAttribute("indeterminate")}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}increment(){if(null===this.value)return;const e=this.step||1;this.value=Math.min(this.value+e,this.max)}decrement(){if(null===this.value)return;const e=this.step||1;this.value=Math.max(this.value-e,this.min)}get percentage(){if(null===this.value)return 0;const e=this.max-this.min;if(e<=0)return 0;let t=(this.value-this.min)/e*100;if(this.step){const n=this.step/e*100;t=Math.round(t/n)*n}return Math.max(0,Math.min(100,t))}getBarColor(e){return{primary:"var(--primary-content--)",secondary:"var(--secondary-content--)",base:"var(--base-content--)",success:"var(--success-content--)",warning:"var(--warning-content--)",error:"var(--error-content--)",help:"var(--help-content--)"}[e]||e}getSizeVar(e){const t={small:"var(--component-progress-size-small)",medium:"var(--component-progress-size-medium)",large:"var(--component-progress-size-large)"};return t[e]||t.medium}getLabel(){if(this.indeterminate)return"";if(null===this.value)return"";switch(this.labelFormat){case"value":return`${this.value} / ${this.max}`;case"fraction":return`${this.value-this.min} / ${this.max-this.min}`;default:return`${Math.round(this.percentage)}%`}}render(){const e=this.indeterminate,t=this.percentage,n=this.getBarColor(this.color),r=this.getSizeVar(this.size),o=this.disabled,a=this.labelDisplay&&!e,i=this.getLabel(),s=null!==this.value?this.value:void 0;this.shadowRoot.innerHTML=`\n            <style>\n                :host {\n                    display: block;\n                    font-family: var(--font-family-body);\n                    color: var(--base-content--);\n                    opacity: ${o?"0.5":"1"};\n                    pointer-events: ${o?"none":"auto"};\n                }\n\n                .progress-wrapper {\n                    display: flex;\n                    flex-direction: column;\n                    gap: var(--spacing-2x-small, 4px);\n                }\n\n                .progress-header {\n                    display: flex;\n                    align-items: center;\n                    justify-content: space-between;\n                    font-size: var(--font-size-label, 0.83em);\n                }\n\n                .label {\n                    color: var(--base-content--);\n                }\n\n                .track {\n                    position: relative;\n                    width: 100%;\n                    height: ${r};\n                    background: var(--base-background-component);\n                    border: var(--component-progress-border-width) solid var(--base-background-border);\n                    border-radius: var(--component-progress-border-radius-outer);\n                    overflow: hidden;\n                    box-sizing: border-box;\n                    padding: var(--component-progress-padding);\n                }\n\n                .bar {\n                    position: relative;\n                    height: 100%;\n                    background: ${n};\n                    border-radius: var(--component-progress-border-radius-inner);\n                    width: ${e?"30%":`${t}%`};\n                    transition: ${e?"none":"width 0.3s ease"};\n                    overflow: hidden;\n                    ${e?"animation: indeterminate 1.5s ease-in-out infinite;":""}\n                }\n\n                .value-label {\n                    position: absolute;\n                    top: 0;\n                    left: 0;\n                    right: 0;\n                    bottom: 0;\n                    display: flex;\n                    align-items: center;\n                    justify-content: center;\n                    font-size: var(--font-size-small, 0.75em);\n                    font-variant-numeric: tabular-nums;\n                    white-space: nowrap;\n                    pointer-events: none;\n                    font-weight: 600;\n                }\n\n                .value-label--track {\n                    color: ${n};\n                }\n\n                .value-label--bar {\n                    color: var(--base-background-component);\n                    width: calc(100% / (${t||1} / 100));\n                }\n\n                @keyframes indeterminate {\n                    0% {\n                        transform: translateX(0%);\n                    }\n                    50% {\n                        transform: translateX(233%);\n                    }\n                    100% {\n                        transform: translateX(0%);\n                    }\n                }\n            </style>\n\n            <div class="progress-wrapper">\n                <div class="progress-header">\n                    <span class="label"><slot></slot></span>\n                </div>\n                <div\n                    class="track"\n                    part="track"\n                    role="progressbar"\n                    aria-valuenow="${void 0!==s?s:""}"\n                    aria-valuemin="${this.min}"\n                    aria-valuemax="${this.max}"\n                    ${e?'aria-busy="true"':""}\n                >\n                    ${a?`<span class="value-label value-label--track" part="value-label">${i}</span>`:""}\n                    <div class="bar" part="bar">${a?`<span class="value-label value-label--bar">${i}</span>`:""}</div>\n                </div>\n            </div>\n        `}}customElements.get("y-progress")||customElements.define("y-progress",v);class f extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return["options","name","value","disabled"]}constructor(){super(),this._internals=this.attachInternals(),this.attachShadow({mode:"open"}),this._value=""}connectedCallback(){this.render()}attributeChangedCallback(e,t,n){t!==n&&("value"===e?(this._value=n,this._internals.setFormValue(n,this.name),this.updateChecked()):["options","name","disabled"].includes(e)&&this.render())}get value(){return this._value}set value(e){this._value=e,this.setAttribute("value",e),this._internals.setFormValue(e,this.name),this.updateChecked()}get name(){return this.getAttribute("name")||""}get options(){try{return JSON.parse(this.getAttribute("options")||"[]")}catch{return[]}}set options(e){this.setAttribute("options",JSON.stringify(e))}updateChecked(){this.shadowRoot.querySelectorAll("input[type=radio]").forEach((e,t)=>{const n=e.value===this.value;e.checked=n,e.setAttribute("aria-checked",n),e.setAttribute("tabindex",n?"0":"-1")})}handleKey(e,t,n){const r=n.length;let o=t;if("ArrowDown"===e.key||"ArrowRight"===e.key)e.preventDefault(),o=(t+1)%r;else{if("ArrowUp"!==e.key&&"ArrowLeft"!==e.key)return" "===e.key||"Enter"===e.key?(e.preventDefault(),this.value=n[t].value,void this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0}))):void 0;e.preventDefault(),o=(t-1+r)%r}n[o].focus()}render(){const e=this.name,t=this.hasAttribute("disabled"),n=this.value,r=this.options;this.shadowRoot.innerHTML=`\n            <style>\n            :host {\n                display: block;\n                font-family: var(--font-family-body);\n            }\n            fieldset {\n                border: none;\n                padding: 0;\n                margin: 0;\n                display: flex;\n                flex-direction: column;\n                gap: var(--spacing-x-small, 8px);\n            }\n            label {\n                display: flex;\n                align-items: center;\n                gap: 0.5em;\n                cursor: pointer;\n            }\n            input[type="radio"] {\n                appearance: none;\n                width: var(--component-radio-size, 16px);\n                height: var(--component-radio-size, 16px);\n                border: var(--component-inputs-border-width, 2px) solid var(--component-radio-color);\n                border-radius: 50%;\n                position: relative;\n                outline: none;\n                cursor: pointer;\n            }\n            input[type="radio"]:checked::after {\n                content: '';\n                position: absolute;\n                top: 50%;\n                left: 50%;\n                width: var(--component-radio-dot-size, 8px);\n                height: var(--component-radio-dot-size, 8px);\n                background: var(--component-radio-color);\n                border-radius: 50%;\n                transform: translate(-50%, -50%);\n            }\n            input[type="radio"]:focus-visible {\n                outline: 2px solid var(--component-radio-accent);\n                outline-offset: 2px;\n            }\n            input[disabled] {\n                opacity: 0.5;\n                cursor: not-allowed;\n            }\n        </style>\n            <fieldset role="radiogroup">\n                ${r.map((r,o)=>`\n                    <label>\n                        <input\n                            type="radio"\n                            name="${e}"\n                            value="${r.value}"\n                            ${t?"disabled":""}\n                            ${n===r.value?"checked":""}\n                            tabindex="${n?n===r.value?"0":"-1":0===o?"0":"-1"}"\n                            role="radio"\n                            aria-checked="${n===r.value}"\n                        />\n                        ${r.label}\n                    </label>\n                `).join("")}\n            </fieldset>\n        `,this.shadowRoot.querySelectorAll("input[type=radio]").forEach((e,t,n)=>{e.addEventListener("keydown",e=>this.handleKey(e,t,n)),e.addEventListener("click",e=>{this.value=e.target.value,this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0}))})})}}customElements.get("y-radio")||customElements.define("y-radio",f);class k extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return["label-position","disabled","invalid","required","value","name","placeholder","options","display-mode"]}constructor(){super(),this._internals=this.attachInternals(),this.attachShadow({mode:"open"}),this.selectedValues=new Set,this.render()}connectedCallback(){this.hasAttribute("label-position")||this.setAttribute("label-position","top"),this.updateValidation(),this._internals.setFormValue(this.value)}attributeChangedCallback(e,t,n){t!==n&&("value"===e&&(this.updateDisplay(),this._internals.setFormValue(n,this.getAttribute("name")),this.updateSelectedStyles()),["label-position","disabled","invalid","required","placeholder","options"].includes(e)&&this.render(),"name"===e&&this._internals.setFormValue(this.value,n))}get value(){return this.hasAttribute("multiple")?Array.from(this.selectedValues).join(","):this._value||""}set value(e){this.hasAttribute("multiple")?"string"==typeof e?this.selectedValues=new Set(e.split(",").map(e=>e.trim())):Array.isArray(e)&&(this.selectedValues=new Set(e)):this._value=e,this.setAttribute("value",e),this._internals.setFormValue(this.value,this.getAttribute("name")),this.updateDisplay(),this.updateSelectedStyles()}getOptions(){try{return JSON.parse(this.getAttribute("options")||"[]")}catch(e){return[]}}getDisplayText(){const e=this.getOptions(),t=this.hasAttribute("multiple"),n="tag"===this.getAttribute("display-mode");if(t&&n)return"";if(t){const t=e.filter(e=>this.selectedValues.has(e.value)).length;return t>0?`${t} Selected`:this.getAttribute("placeholder")||"Select..."}{const t=e.find(e=>e.value===this.value);return t?.label||this.getAttribute("placeholder")||"Select..."}}toggleDropdown(){this.dropdown.classList.contains("open")?this.closeDropdown():(this.dropdown.classList.add("open"),this.selectContainer.classList.add("open"),this._positionDropdown(),this._onScrollOrResize=this._positionDropdown.bind(this),window.addEventListener("scroll",this._onScrollOrResize,!0),window.addEventListener("resize",this._onScrollOrResize))}closeDropdown(){this.dropdown.classList.remove("open"),this.selectContainer.classList.remove("open"),this._onScrollOrResize&&(window.removeEventListener("scroll",this._onScrollOrResize,!0),window.removeEventListener("resize",this._onScrollOrResize))}_positionDropdown(){const e=this.selectContainer.getBoundingClientRect();this.dropdown.style.left=`${e.left}px`,this.dropdown.style.width=`${e.width}px`;const t=window.innerHeight-e.bottom-4;t>=200||t>=e.top?(this.dropdown.style.top=`${e.bottom+4}px`,this.dropdown.style.bottom="auto"):(this.dropdown.style.bottom=window.innerHeight-e.top+4+"px",this.dropdown.style.top="auto")}queryRefs(){this.selectContainer=this.shadowRoot.querySelector(".select-container"),this.dropdown=this.shadowRoot.querySelector(".dropdown"),this.labelWrapper=this.shadowRoot.querySelector(".label-wrapper"),this.displayElement=this.shadowRoot.querySelector(".value-display")}attachEventListeners(){this.selectContainer.addEventListener("click",()=>this.toggleDropdown()),this.dropdown.querySelectorAll(".dropdown-item").forEach(e=>{e.addEventListener("click",()=>{const t=e.getAttribute("data-value"),n=this.hasAttribute("required");if(this.hasAttribute("multiple"))this.selectedValues.has(t)?(!n||this.selectedValues.size>1)&&this.selectedValues.delete(t):this.selectedValues.add(t),this.setAttribute("value",Array.from(this.selectedValues).join(","));else{const e=t===this.value;this.value=e&&!n?"":t}this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0})),this.updateValidation(),this.closeDropdown()})})}renderTags(){const e=this.hasAttribute("multiple"),t="tag"===this.getAttribute("display-mode");if(!e||!t||!this.displayElement)return;const n=this.getOptions();this.displayElement.innerHTML="";n.filter(e=>this.selectedValues.has(e.value)).forEach(e=>{const t=document.createElement("y-tag");t.setAttribute("removable",""),t.setAttribute("color","primary"),t.setAttribute("style-type","filled"),t.textContent=e.label,t.dataset.value=e.value,t.addEventListener("remove",()=>{this.selectedValues.delete(e.value),this.setAttribute("value",Array.from(this.selectedValues).join(",")),this.renderTags(),this.updateSelectedStyles(),this.updateValidation(),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0}))}),this.displayElement.appendChild(t)})}updateDisplay(){"tag"===this.getAttribute("display-mode")?this.renderTags():this.displayElement&&(this.displayElement.textContent=this.getDisplayText())}updateSelectedStyles(){const e=this.hasAttribute("multiple")?this.selectedValues:new Set([this.value]);this.dropdown?.querySelectorAll(".dropdown-item").forEach(t=>{const n=t.getAttribute("data-value");t.classList.toggle("selected",e.has(n))})}updateValidation(){const e=this.hasAttribute("required"),t=this.hasAttribute("multiple")?this.selectedValues.size>0:this.value&&""!==this.value;e&&!t?this.setAttribute("invalid",""):this.removeAttribute("invalid")}updateValidationState(){const e=this.hasAttribute("invalid");this.selectContainer?.classList.toggle("is-invalid",e),this.labelWrapper?.classList.toggle("is-invalid",e)}render(){this.applyStyles(),this.shadowRoot.innerHTML=this.generateTemplate(),this.queryRefs(),this.attachEventListeners(),this.updateValidationState()}applyStyles(){const e=this.hasAttribute("disabled"),t=new CSSStyleSheet;t.replaceSync(`\n            :host {\n                display: block;\n                font-family: var(--font-family-body);\n                color: var(--component-select-color);\n                opacity: ${e?"0.75":"1"};\n                pointer-events: ${e?"none":"auto"};\n            }\n\n            .select-wrapper {\n                display: flex;\n                flex-direction: column;\n                gap: var(--spacing-2x-small, 4px);\n                position: relative;\n            }\n\n            .select-container {\n                display: flex;\n                align-items: center;\n                gap: var(--spacing-x-small);\n                background: var(--component-select-background);\n                border: var(--component-inputs-border-width) solid var(--component-select-border-color);\n                border-radius: var(--component-inputs-border-radius-outer);\n                padding: var(--component-inputs-padding-medium);\n                box-sizing: border-box;\n                transition: border-color 0.2s ease-in-out;\n                cursor: pointer;\n            }\n\n            .select-container:hover {\n                border-color: var(--component-select-color);\n            }\n\n            .select-container:focus-within {\n                border-color: var(--component-select-accent);\n            }\n\n            .select-container.is-invalid {\n                border-color: var(--component-select-error-border-color);\n                background: var(--component-select-error-background);\n            }\n\n            .select-container.is-invalid:hover {\n                border-color: var(--component-select-error-color);\n            }\n\n            .select-container.is-invalid:focus-within {\n                border-color: var(--component-select-error-color);\n            }\n\n            .label-wrapper.is-invalid ::slotted([slot="label"]) {\n                color: var(--component-select-error-color);\n            }\n\n            ::slotted([slot="label"]) {\n                font-weight: 500;\n                font-size: 0.875em;\n                color: var(--component-select-label-color);\n            }\n\n            .dropdown {\n                position: fixed;\n                z-index: 9999;\n                background: var(--component-select-background);\n                border: var(--component-inputs-border-width) solid var(--component-select-border-color);\n                border-radius: var(--component-inputs-border-radius-outer);\n                box-shadow: var(--component-select-shadow, 0 2px 8px rgba(0,0,0,0.1));\n                max-height: 200px;\n                overflow-y: auto;\n                display: none;\n            }\n\n            .dropdown.open {\n                display: block;\n            }\n\n            .dropdown-item {\n                padding: var(--spacing-small, 6px);\n                cursor: pointer;\n            }\n\n            .dropdown-item:hover {\n                background: var(--component-select-hover-background);\n            }\n\n            .dropdown-item.selected {\n                background: var(--component-select-accent);\n                color: var(--component-select-accent-contrast);\n            }\n\n            .value-display {\n                flex: 1;\n                font-size: 1em;\n                color: inherit;\n                display: flex;\n                gap: var(--spacing-x-small);\n            }\n\n            .label-wrapper {\n                display: block;\n            }\n\n            .chevron-icon {\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                margin-left: auto;\n                transition: transform 0.2s ease;\n            }\n\n            .chevron-icon svg {\n                transition: transform 0.2s ease;\n                transform-origin: center;\n            }\n\n            .select-container.open .chevron-icon svg {\n                transform: scaleY(-1);\n            }\n        `),this.shadowRoot.adoptedStyleSheets=[t]}generateTemplate(){const e="top"===(this.getAttribute("label-position")||"top"),t=this.hasAttribute("invalid"),n=this.hasAttribute("multiple")?this.selectedValues:new Set([this.value]);return`\n            <div class="select-wrapper">\n                ${e?'<div class="label-wrapper"><slot name="label"></slot></div>':""}\n                <div class="select-container ${t?"is-invalid":""}" tabindex="0">\n                    <div class="value-display">${this.getDisplayText()}</div>\n                    <div class="chevron-icon" part="chevron-icon">\n                        ${o}\n                    </div>\n                </div>\n                ${e?"":'<div class="label-wrapper"><slot name="label"></slot></div>'}\n                <div class="dropdown" part="dropdown">\n                    ${this.getOptions().map(e=>`\n                        <div class="dropdown-item ${n.has(e.value)?"selected":""}" data-value="${e.value}">\n                            ${e.label}\n                        </div>\n                    `).join("")}\n                </div>\n            </div>\n        `}}customElements.get("y-select")||customElements.define("y-select",k);class y extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return["value","min","max","step","size","color","disabled","name","orientation"]}constructor(){super(),this._internals=this.attachInternals(),this.attachShadow({mode:"open"}),this._dragging=!1}connectedCallback(){this.hasAttribute("size")||this.setAttribute("size","medium"),this.hasAttribute("min")||this.setAttribute("min","0"),this.hasAttribute("max")||this.setAttribute("max","100"),this.hasAttribute("value")||this.setAttribute("value","50"),this._internals.setFormValue(this.value),this.render(),this._bindEvents()}attributeChangedCallback(e,t,n){t!==n&&("value"!==e&&"name"!==e||this._internals.setFormValue(this.value,this.getAttribute("name")),"value"===e&&this.shadowRoot.querySelector(".slider-track")?this._updateVisuals():(this.render(),this._bindEvents()))}get value(){const e=parseFloat(this.getAttribute("value"));return Number.isNaN(e)?0:e}set value(e){const t=Math.max(this.min,Math.min(this.max,Number(e))),n=this._snapToStep(t);this.setAttribute("value",String(n))}get min(){return parseFloat(this.getAttribute("min"))||0}set min(e){this.setAttribute("min",String(e))}get max(){return parseFloat(this.getAttribute("max"))||100}set max(e){this.setAttribute("max",String(e))}get step(){const e=parseFloat(this.getAttribute("step"));return Number.isNaN(e)||e<=0?null:e}set step(e){null==e?this.removeAttribute("step"):this.setAttribute("step",String(e))}get size(){return this.getAttribute("size")||"medium"}set size(e){this.setAttribute("size",e)}get color(){return this.getAttribute("color")||"primary"}set color(e){this.setAttribute("color",e)}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get orientation(){return this.getAttribute("orientation")||"horizontal"}set orientation(e){this.setAttribute("orientation",e)}get percentage(){const e=this.max-this.min;if(e<=0)return 0;const t=(this.value-this.min)/e*100;return Math.max(0,Math.min(100,t))}_snapToStep(e){if(!this.step)return e;const t=Math.round((e-this.min)/this.step);return Math.max(this.min,Math.min(this.max,this.min+t*this.step))}getTrackColor(e){return{primary:"var(--primary-background-hover)",secondary:"var(--secondary-background-hover)",base:"var(--base-background-active)",success:"var(--success-background-hover)",warning:"var(--warning-background-hover)",error:"var(--error-background-hover)",help:"var(--help-background-hover)"}[e]||e}getThumbColor(e){return{primary:"var(--primary-content--)",secondary:"var(--secondary-content--)",base:"var(--base-content--)",success:"var(--success-content--)",warning:"var(--warning-content--)",error:"var(--error-content--)",help:"var(--help-content--)"}[e]||e}getSizeVars(e){const t={small:{trackHeight:"var(--sizing-small, 27px)"},medium:{trackHeight:"var(--sizing-medium, 35px)"},large:{trackHeight:"var(--sizing-large, 51px)"}};return t[e]||t.medium}_bindEvents(){const e=this.shadowRoot.querySelector(".slider-track"),t=this.shadowRoot.querySelector(".thumb");if(!e||!t)return;const n=e=>{this.disabled||(e.preventDefault(),this._dragging=!0,this._updateFromPointer(e),document.addEventListener("pointermove",r),document.addEventListener("pointerup",o))},r=e=>{this._dragging&&this._updateFromPointer(e)},o=()=>{this._dragging=!1,document.removeEventListener("pointermove",r),document.removeEventListener("pointerup",o),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))};e.addEventListener("pointerdown",n),t.addEventListener("pointerdown",n),e.addEventListener("keydown",e=>{if(this.disabled)return;const t=this.step||1;let n=!0;switch(e.key){case"ArrowRight":case"ArrowUp":this.value=this.value+t;break;case"ArrowLeft":case"ArrowDown":this.value=this.value-t;break;case"Home":this.value=this.min;break;case"End":this.value=this.max;break;default:n=!1}n&&(e.preventDefault(),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})))})}_updateFromPointer(e){const t=this.shadowRoot.querySelector(".slider-track"),n=(this.shadowRoot.querySelector(".slider-inner")||t).getBoundingClientRect(),r=Math.max(0,Math.min(1,(e.clientX-n.left)/n.width)),o=this.min+r*(this.max-this.min);this.value=o,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}_updateVisuals(){const e=this.percentage,t=this.shadowRoot.querySelector(".fill"),n=this.shadowRoot.querySelector(".thumb"),r=this.shadowRoot.querySelector(".slider-track");t&&(t.style.width=`${e}%`),n&&(n.style.left=`${e}%`),r&&r.setAttribute("aria-valuenow",String(this.value))}render(){const e=this.percentage,t=this.getTrackColor(this.color),n=this.getThumbColor(this.color),{trackHeight:r}=this.getSizeVars(this.size),o=this.disabled;this.shadowRoot.innerHTML=`\n            <style>\n                :host {\n                    display: inline-block;\n                    width: var(--component-slider-width, 129px);\n                    font-family: var(--font-family-body);\n                    color: var(--base-content--);\n                    opacity: ${o?"0.5":"1"};\n                    pointer-events: ${o?"none":"auto"};\n                }\n\n                .slider-wrapper {\n                    display: flex;\n                    flex-direction: column;\n                    gap: var(--spacing-2x-small, 4px);\n                }\n\n                .slider-track {\n                    position: relative;\n                    width: 100%;\n                    height: ${r};\n                    background: var(--base-background-component);\n                    border: var(--component-slider-border-width) solid var(--base-background-border);\n                    border-radius: var(--component-slider-border-radius-outer);\n                    box-sizing: border-box;\n                    padding: var(--component-slider-padding);\n                    cursor: pointer;\n                    outline: none;\n                }\n\n                .slider-track:focus-visible {\n                    border-color: ${n};\n                }\n\n                .slider-inner {\n                    position: relative;\n                    width: 100%;\n                    height: 100%;\n                    overflow: hidden;\n                }\n\n                .fill {\n                    position: absolute;\n                    top: 0;\n                    left: 0;\n                    height: 100%;\n                    background: ${t};\n                    border-radius: var(--component-slider-border-radius-inner) 0 0 var(--component-slider-border-radius-inner);\n                    width: ${e}%;\n                    pointer-events: none;\n                }\n\n                .thumb {\n                    position: absolute;\n                    top: 0;\n                    left: ${e}%;\n                    transform: translateX(-50%);\n                    width: 8px;\n                    height: 100%;\n                    background: ${n};\n                    border-radius: var(--component-slider-thumb-border-radius);\n                    cursor: grab;\n                    z-index: 1;\n                    touch-action: none;\n                }\n\n                .thumb:active {\n                    cursor: grabbing;\n                }\n            </style>\n\n            <div class="slider-wrapper">\n                <div\n                    class="slider-track"\n                    part="track"\n                    role="slider"\n                    tabindex="${o?"-1":"0"}"\n                    aria-valuenow="${this.value}"\n                    aria-valuemin="${this.min}"\n                    aria-valuemax="${this.max}"\n                    ${this.step?`aria-valuestep="${this.step}"`:""}\n                    aria-orientation="${this.orientation}"\n                    ${o?'aria-disabled="true"':""}\n                >\n                    <div class="slider-inner">\n                        <div class="fill" part="fill"></div>\n                        <div class="thumb" part="thumb"></div>\n                    </div>\n                </div>\n            </div>\n        `}}customElements.get("y-slider")||customElements.define("y-slider",y);class w extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return["checked","disabled","animate","toggle-label","label-display","label-position","size","value"]}constructor(){super(),this._internals=this.attachInternals(),this.attachShadow({mode:"open"})}connectedCallback(){this.hasAttribute("size")||this.setAttribute("size","medium"),this.hasAttribute("label-display")||this.setAttribute("label-display","true"),this.hasAttribute("label-position")||this.setAttribute("label-position","top"),this.hasAttribute("animate")||this.setAttribute("animate","true"),this.render(),this.mirrorToggleLabels();const e=this.shadowRoot.querySelector(".switch");e.addEventListener("click",()=>this.toggle()),e.addEventListener("keydown",e=>{" "!==e.key&&"Enter"!==e.key||(e.preventDefault(),this.toggle())})}attributeChangedCallback(e,t,n){t!==n&&this.update()}get checked(){return this.hasAttribute("checked")}set checked(e){e?this.setAttribute("checked",""):this.removeAttribute("checked"),this.update()}get value(){return this.getAttribute("value")||"on"}set value(e){this.setAttribute("value",e),this.update()}toggle(){this.hasAttribute("disabled")||(this.checked=!this.checked,this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})))}labelTag(e){const t=this.getAttribute("label-position");return"top"===e&&("top"===t||"left"===t)||"bottom"===e&&("bottom"===t||"right"===t)?'<label><slot name="label"></slot></label>':""}mirrorToggleLabels(){requestAnimationFrame(()=>{const e=this.shadowRoot?.querySelector(".toggle");if(!e)return;e.innerHTML="";const t=this.querySelector('[slot="off-label"]'),n=this.querySelector('[slot="on-label"]'),r=document.createTextNode("Off"),o=document.createTextNode("On"),a=t?.cloneNode(!0)||r,i=n?.cloneNode(!0)||o,s=document.createElement("span");s.className="off",s.appendChild(a);const l=document.createElement("span");l.className="on",l.appendChild(i),e.appendChild(s),e.appendChild(l)})}update(){this.updateSizeStyles(),this.updateTogglePosition(),this.updateToggleLabelDisplay(),this.updateLabelDisplay(),this.updateDirection(),this.updateAria(),this.updateFormValue(),this.mirrorToggleLabels()}updateSizeStyles(){const e=this.getAttribute("size")||"medium";this.style.setProperty("--switch-height",{small:"24px",medium:"32px",large:"40px"}[e]),this.style.setProperty("--switch-width-fixed",{small:"44px",medium:"56px",large:"72px"}[e]),this.style.setProperty("--toggle-size","calc(var(--switch-height) - (var(--switch-padding) * 2) - (var(--component-switch-border-width, 0px) * 2))"),this.style.setProperty("--switch-font-size",{small:"var(--font-size-small)",medium:"var(--font-size-label)",large:"var(--font-size-h4)"}[e])}updateTogglePosition(){const e=this.checked,t=this.hasAttribute("toggle-label")&&"false"!==this.getAttribute("toggle-label");this.style.setProperty("--toggle-x",e?t?"100%":"calc(var(--switch-width) - var(--toggle-size) - (var(--switch-padding) * 2) - (var(--component-switch-border-width, 0px) * 2))":"0"),this.style.setProperty("--toggle-bg",e?"var(--primary-content--)":"var(--base-content-light)"),this.style.setProperty("--toggle-transition","false"===this.getAttribute("animate")?"none":"transform 0.25s ease, background 0.25s ease")}updateLabelDisplay(){const e="false"!==this.getAttribute("label-display"),t=this.hasAttribute("toggle-label")&&"false"!==this.getAttribute("toggle-label");this.style.setProperty("--show-labels",e&&t?"flex":"none")}updateToggleLabelDisplay(){const e=this.hasAttribute("toggle-label")&&"false"!==this.getAttribute("toggle-label");this.style.setProperty("--show-toggle-label",e?"inline-flex":"none"),this.style.setProperty("--switch-width",e?"max-content":"var(--switch-width-fixed)"),this.style.setProperty("--toggle-width",e?"auto":"var(--toggle-size)"),this.style.setProperty("--toggle-padding",e?"0 var(--spacing-small)":"0"),this.style.setProperty("--toggle-radius",e?"var(--component-switch-border-radius)":"9999px")}updateDirection(){const e=this.getAttribute("label-position");this.style.setProperty("--switch-dir",{top:"column",bottom:"column-reverse",left:"row-reverse",right:"row"}[e]||"column")}updateAria(){const e=this.shadowRoot?.querySelector(".switch");e&&(e.setAttribute("aria-checked",this.checked),e.setAttribute("aria-disabled",this.disabled?"true":"false"))}updateFormValue(){this._internals.setFormValue(this.checked?this.value:"")}render(){this.shadowRoot.innerHTML=`\n            <style>\n                :host {\n                    display: inline-flex;\n                    flex-direction: var(--switch-dir, column);\n                    align-items: center;\n                    gap: var(--spacing-x-small);\n                    font-family: var(--font-family-body);\n                    --switch-padding: var(--component-switch-padding, 2px);\n                    --show-labels: flex;\n                    --show-toggle-label: none;\n                    --switch-width: max-content;\n                    --toggle-width: auto;\n                    --toggle-padding: 0 var(--spacing-small);\n                    --toggle-radius: var(--component-switch-border-radius);\n                }\n\n                .label {\n                    font-size: var(--font-size-label);\n                    color: var(--base-content--);\n                }\n\n                .switch {\n                    position: relative;\n                    display: inline-flex;\n                    align-items: center;\n                    background: var(--base-background-component);\n                    border: var(--component-switch-border-width) solid var(--base-background-border);\n                    border-radius: var(--component-switch-border-radius);\n                    cursor: pointer;\n                    height: var(--switch-height);\n                    font-size: var(--switch-font-size);\n                    box-sizing: border-box;\n                    padding: var(--switch-padding);\n                    width: var(--switch-width, max-content);\n                }\n\n                .track {\n                    display: flex;\n                    align-items: center;\n                    height: 100%;\n                    position: relative;\n                    z-index: 0;\n                }\n\n                .label-content {\n                    flex: 0 0 auto;\n                    align-items: center;\n                    justify-content: center;\n                    padding: 0 var(--spacing-small);\n                    white-space: nowrap;\n                    position: relative;\n                    z-index: 0;\n                    color: var(--base-content-light);\n                    display: var(--show-labels, flex);\n                }\n\n                .toggle {\n                    position: absolute;\n                    top: var(--switch-padding);\n                    bottom: var(--switch-padding);\n                    left: var(--switch-padding);\n                    height: calc(100% - (var(--switch-padding) + var(--switch-padding)));\n                    width: var(--toggle-width, auto);\n                    background: var(--toggle-bg, var(--base-content-light));\n                    color: var(--base-background-component);\n                    border-radius: var(--toggle-radius, var(--component-switch-border-radius));\n                    display: flex;\n                    align-items: center;\n                    justify-content: center;\n                    padding: var(--toggle-padding, 0 var(--spacing-small));\n                    font-weight: 500;\n                    z-index: 1;\n                    white-space: nowrap;\n                    transform: translateX(var(--toggle-x, 0));\n                    transition: var(--toggle-transition, transform 0.25s ease, background 0.25s ease);\n                }\n\n                .toggle .on,\n                .toggle .off {\n                    display: none;\n                }\n\n                :host([checked]) .toggle .on {\n                    display: var(--show-toggle-label, none);\n                }\n\n                :host(:not([checked])) .toggle .off {\n                    display: var(--show-toggle-label, none);\n                }\n\n\n                :host([animate="false"]) .toggle {\n                    transition: none !important;\n                }\n            </style>\n\n            ${this.labelTag("top")}\n\n            <div class="switch" part="switch" tabindex="0" role="switch" aria-checked="${this.checked}" aria-disabled="${this.disabled}">\n                <div class="track">\n                    <div class="label-content"><slot name="off-label">Off</slot></div>\n                    <div class="label-content"><slot name="on-label">On</slot></div>\n                </div>\n                <div class="toggle" part="toggle">\n                    <span class="off"></span>\n                    <span class="on"></span>\n                </div>\n            </div>\n\n            ${this.labelTag("bottom")}\n        `,this.update()}}customElements.get("y-switch")||customElements.define("y-switch",w);class x extends HTMLElement{static get observedAttributes(){return["columns","data","striped","size"]}constructor(){super(),this.attachShadow({mode:"open"}),this._sortField=null,this._sortDir="none",this._parsedData=[],this._parsedColumns=[]}connectedCallback(){this._parseAttributes(),this.render()}attributeChangedCallback(e,t,n){t!==n&&(this._parseAttributes(),this.render())}get columns(){return this.getAttribute("columns")}set columns(e){this.setAttribute("columns","string"==typeof e?e:JSON.stringify(e))}get data(){return this.getAttribute("data")}set data(e){this.setAttribute("data","string"==typeof e?e:JSON.stringify(e))}get striped(){return this.hasAttribute("striped")}set striped(e){e?this.setAttribute("striped",""):this.removeAttribute("striped")}get size(){return this.getAttribute("size")||"medium"}set size(e){this.setAttribute("size",e)}_parseAttributes(){try{this._parsedColumns=JSON.parse(this.columns||"[]")}catch{this._parsedColumns=[]}try{this._parsedData=JSON.parse(this.data||"[]")}catch{this._parsedData=[]}}_onHeaderClick(e){this._sortField===e?(this._sortDir="asc"===this._sortDir?"desc":"desc"===this._sortDir?"none":"asc","none"===this._sortDir&&(this._sortField=null)):(this._sortField=e,this._sortDir="asc"),this.dispatchEvent(new CustomEvent("sort",{detail:{field:this._sortField,direction:this._sortDir},bubbles:!0,composed:!0})),this.render()}_getSortedData(){const e=[...this._parsedData];if(!this._sortField||"none"===this._sortDir)return e;const t="asc"===this._sortDir?1:-1,n=this._sortField;return e.sort((e,r)=>{const o=e[n],a=r[n];return null==o&&null==a?0:null==o?1:null==a?-1:"number"==typeof o&&"number"==typeof a?(o-a)*t:String(o).localeCompare(String(a))*t})}_sortIcon(e){const t=this._sortField===e?this._sortDir:"none";return function(e,t){return`<svg class="sort-icon" xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16" aria-hidden="true">\n            <path d="M6 1 L11 7 L1 7 Z" fill="${e}"/>\n            <path d="M6 15 L11 9 L1 9 Z" fill="${t}"/>\n        </svg>`}("asc"===t?"var(--component-table-color, #333)":"var(--component-table-color-light, #bbb)","desc"===t?"var(--component-table-color, #333)":"var(--component-table-color-light, #bbb)")}render(){const e=this._parsedColumns,t=this._getSortedData(),n=this.size,r=this.striped,o=`var(--component-table-padding-${n}, 8px)`;this.shadowRoot.innerHTML="";const a=document.createElement("style");a.textContent=`\n            :host {\n                display: block;\n                font-family: var(--font-family-body, sans-serif);\n                color: var(--component-table-color, #000);\n            }\n\n            .table-wrapper {\n                overflow-x: auto;\n            }\n\n            table {\n                width: 100%;\n                border-collapse: collapse;\n                table-layout: auto;\n            }\n\n            thead th {\n                position: relative;\n                padding: ${o};\n                text-align: left;\n                font-weight: 500;\n                font-size: var(--font-size-paragraph, 1em);\n                white-space: nowrap;\n                background: transparent;\n                border-bottom: var(--component-table-border-width-header, 2px) solid var(--component-table-border-color, #ccc);\n                user-select: none;\n            }\n\n            thead th.sortable {\n                cursor: pointer;\n            }\n\n            thead th.sortable:hover {\n                background: var(--component-table-hover-background, #f5f5f5);\n            }\n\n            .th-content {\n                display: inline-flex;\n                align-items: center;\n                gap: 6px;\n            }\n\n            .sort-icon {\n                flex-shrink: 0;\n                vertical-align: middle;\n            }\n\n            tbody td {\n                padding: ${o};\n                font-size: var(--font-size-paragraph, 1em);\n                border-bottom: var(--component-table-border-width, 2px) solid var(--component-table-border-color, #ccc);\n            }\n\n            tbody tr:last-child td {\n                border-bottom: none;\n            }\n\n            tbody td.row-header {\n                font-weight: 500;\n            }\n\n            ${r?"tbody tr:nth-child(even) {\n                    background: var(--component-table-hover-background, #f9f9f9);\n                }":""}\n\n            tbody tr:hover {\n                background: var(--component-table-active-background, #eee);\n            }\n        `,this.shadowRoot.appendChild(a);const i=document.createElement("div");i.className="table-wrapper";const s=document.createElement("table");s.setAttribute("role","grid");const l=document.createElement("thead"),c=document.createElement("tr");e.forEach(e=>{const t=document.createElement("th");t.setAttribute("scope","col");const n=!1!==e.sortable;n&&(t.classList.add("sortable"),t.setAttribute("aria-sort",this._sortField===e.field?"asc"===this._sortDir?"ascending":"desc"===this._sortDir?"descending":"none":"none"),t.addEventListener("click",()=>this._onHeaderClick(e.field)));const r=document.createElement("span");if(r.className="th-content",r.textContent=e.header||e.field,n){const t=document.createElement("span");t.innerHTML=this._sortIcon(e.field),r.appendChild(t)}t.appendChild(r),c.appendChild(t)}),l.appendChild(c),s.appendChild(l);const d=document.createElement("tbody");t.forEach(t=>{const n=document.createElement("tr");e.forEach((e,r)=>{const o=document.createElement("td");(e.rowHeader||0===r)&&o.classList.add("row-header"),o.textContent=t[e.field]??"",n.appendChild(o)}),d.appendChild(n)}),s.appendChild(d),i.appendChild(s),this.shadowRoot.appendChild(i)}}customElements.get("y-table")||customElements.define("y-table",x);class A extends HTMLElement{static get observedAttributes(){return["removable","color","style-type","shape"]}constructor(){super(),this.attachShadow({mode:"open"}),this.render()}connectedCallback(){this.render()}attributeChangedCallback(e,t,n){t!==n&&this.render()}render(){const e=this.hasAttribute("removable"),t=this.getAttribute("color")||"base",n=this.getAttribute("style-type")||"filled",r=this.getAttribute("shape")||"square",o=document.createElement("style");o.textContent=this.getStyle(t,n,r),this.shadowRoot.innerHTML="",this.shadowRoot.appendChild(o),this.shadowRoot.innerHTML+=`\n            <span class="tag">\n                <slot></slot>\n                ${e?'\n                    <button class="remove" aria-label="Remove tag">\n                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"><line x1="6" y1="6" x2="14" y2="14" /><line x1="14" y1="6" x2="6" y2="14" /></svg>\n                    </button>\n                ':""}\n            </span>\n        `,e&&this.shadowRoot.querySelector(".remove").addEventListener("click",e=>{e.stopPropagation(),this.dispatchEvent(new CustomEvent("remove",{bubbles:!0,composed:!0}))})}getStyle(e,t,n){const r={primary:["--primary-content--","--primary-content-hover","--primary-background-component"],secondary:["--secondary-content--","--secondary-content-hover","--secondary-background-component"],base:["--base-content--","--base-content-lighter","--base-background-component"],success:["--success-content--","--success-content-hover","--success-background-component"],error:["--error-content--","--error-content-hover","--error-background-component"],warning:["--warning-content--","--warning-content-hover","--warning-background-component"],help:["--help-content--","--help-content-hover","--help-background-component"]},[o,a,i]=r[e]||r.base,s={filled:`\n                .tag {\n                    background: var(${o});\n                    color: var(${i});\n                }\n                .remove {\n                    color: var(${i});\n                }\n            `,outlined:`\n                .tag {\n                    border: 1px solid var(${o});\n                    background: transparent;\n                    color: var(${o});\n                }\n                .remove {\n                    color: var(${o});\n                }\n            `,flat:`\n                .tag {\n                    background: transparent;\n                    color: var(${o});\n                }\n                .remove {\n                    color: var(${o});\n                }\n            `};return`\n            :host {\n                display: inline-block;\n                font-family: var(--font-family-body, sans-serif);\n                font-size: var(--font-size-label, 0.83em);\n            }\n            .tag {\n                display: inline-flex;\n                align-items: center;\n                gap: var(--spacing-2x-small);\n                padding: 0 var(--component-tag-padding-medium, var(--spacing-x-small));\n                border: 1px solid transparent;\n                transition: background-color 0.2s, color 0.2s;\n                border-radius: ${"round"===n?"var(--component-tag-border-radius-circle)":"var(--component-tag-border-radius-square)"};\n            }\n            .remove {\n                all: unset;\n                cursor: pointer;\n                display: flex;\n                align-items: center;\n            }\n            .remove svg {\n                pointer-events: none;\n            }\n        `+(s[t]||s.filled)}}customElements.get("y-tag")||customElements.define("y-tag",A);class E extends HTMLElement{static get observedAttributes(){return["options","size","position"]}constructor(){super(),this.attachShadow({mode:"open"}),this._activeTab=""}connectedCallback(){this.hasAttribute("size")||this.setAttribute("size","medium"),this.hasAttribute("position")||this.setAttribute("position","top"),this.render()}attributeChangedCallback(e,t,n){"options"!==e&&"size"!==e&&"position"!==e||t===n||this.render()}get options(){try{return JSON.parse(this.getAttribute("options")||"[]")}catch{return[]}}set options(e){this.setAttribute("options",JSON.stringify(e)),this.render()}get size(){const e=this.getAttribute("size");return["small","medium","large"].includes(e)?e:"medium"}set size(e){["small","medium","large"].includes(e)?this.setAttribute("size",e):this.setAttribute("size","medium")}get position(){const e=this.getAttribute("position");return["top","bottom","left","right"].includes(e)?e:"top"}set position(e){["top","bottom","left","right"].includes(e)?this.setAttribute("position",e):this.setAttribute("position","top")}activateTab(e){const t=this.options.find(t=>t.id===e);t&&!t.disabled&&this._activeTab!==e&&(this._activeTab=e,this.render())}_setupEvents(){const e=Array.from(this.shadowRoot.querySelectorAll("button"));e.forEach(t=>{t.disabled||(t.addEventListener("click",()=>this.activateTab(t.dataset.id)),t.addEventListener("keydown",t=>{this._handleTabKeydown(t,e)}))})}_handleTabKeydown(e,t){const n=t.indexOf(e.currentTarget);"ArrowRight"===e.key?(e.preventDefault(),this._findSiblingButton(t,n,1)?.focus()):"ArrowLeft"===e.key?(e.preventDefault(),this._findSiblingButton(t,n,-1)?.focus()):"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.activateTab(e.currentTarget.dataset.id))}_findSiblingButton(e,t,n){for(let r=1;r<=e.length;r++){const o=e[(t+r*n+e.length)%e.length];if(!o.disabled)return o}return null}_resolveActiveTab(e){const t=!this._activeTab||e.find(e=>e.id===this._activeTab)?.disabled;e.length&&t&&(this._activeTab=e.find(e=>!e.disabled)?.id||"")}_getStyles(){return`\n            :host {\n                display: flex;\n                font-family: var(--component-tabs-font-family, var(--font-family-body));\n            }\n            :host([position="top"]) { flex-direction: column; }\n            :host([position="bottom"]) { flex-direction: column-reverse; }\n            :host([position="left"]) { flex-direction: row; }\n            :host([position="right"]) { flex-direction: row-reverse; }\n\n            .tablist {\n                display: flex;\n                gap: 0;\n                position: relative;\n                z-index: 1;\n            }\n            :host([position="top"])    .tablist { margin-bottom: -1px; margin-top: 0; }\n            :host([position="bottom"]) .tablist { margin-top: -1px; margin-bottom: 0; }\n            :host([position="left"])   .tablist { flex-direction: column; margin-right: -1px; margin-left: 0; }\n            :host([position="right"])  .tablist { flex-direction: column; margin-left: -1px; margin-right: 0; }\n\n            :host([position="top"])    .tablist button { border-bottom: none; }\n            :host([position="bottom"]) .tablist button { border-top: none; }\n            :host([position="left"])   .tablist button { border-right: none; }\n            :host([position="right"])  .tablist button { border-left: none; }\n\n            button {\n                background: var(--component-tabs-border-color);\n                color: var(--component-tabs-color);\n                border: var(--component-tab-border-width) solid var(--component-tabs-border-color);\n                margin: 0;\n                padding: ${`var(--component-tab-padding-${this.size})`};\n                cursor: pointer;\n                font-size: var(--font-size-label);\n                display: inline-flex;\n                align-items: center;\n                gap: ${`var(--component-tab-gap-${this.size})`};\n                transition: background 0.2s ease;\n                outline: none;\n                font-family: inherit;\n            }\n            :host([position="top"])    .tablist button:first-child { border-top-left-radius: var(--component-tab-border-radius-outer); }\n            :host([position="top"])    .tablist button:last-child  { border-top-right-radius: var(--component-tab-border-radius-outer); }\n            :host([position="bottom"]) .tablist button:first-child { border-bottom-left-radius: var(--component-tab-border-radius-outer); }\n            :host([position="bottom"]) .tablist button:last-child  { border-bottom-right-radius: var(--component-tab-border-radius-outer); }\n            :host([position="left"])   .tablist button:first-child   { border-top-left-radius: var(--component-tab-border-radius-outer); }\n            :host([position="left"])   .tablist button:last-child    { border-bottom-left-radius: var(--component-tab-border-radius-outer); }\n            :host([position="right"])  .tablist button:first-child  { border-top-right-radius: var(--component-tab-border-radius-outer); }\n            :host([position="right"])  .tablist button:last-child   { border-bottom-right-radius: var(--component-tab-border-radius-outer); }\n\n            button[aria-selected="true"] {\n                background: var(--component-tabs-background);\n            }\n            button:focus-visible {\n                outline: 2px solid var(--component-tabs-accent);\n                outline-offset: -1px;\n            }\n            button[disabled] {\n                opacity: 0.5;\n                cursor: not-allowed;\n            }\n            .icon-slot {\n                display: inline-flex;\n                align-items: center;\n                margin: 0 4px;\n            }\n            .tabpanel {\n                position: relative;\n                z-index: 0;\n                border: var(--component-tab-border-width) solid var(--component-tabs-border-color);\n                border-radius: var(--component-tab-border-radius-outer);\n                padding: var(--spacing-large);\n                background: var(--component-tabs-background);\n            }\n            :host([position="top"])    .tabpanel { border-top-left-radius: 0; }\n            :host([position="bottom"]) .tabpanel { border-bottom-left-radius: 0; }\n            :host([position="left"])   .tabpanel { border-top-left-radius: 0; }\n            :host([position="right"])  .tabpanel { border-top-right-radius: 0; }\n            :host([position="top"])    .tabpanel { margin-top: -1px; }\n            :host([position="bottom"]) .tabpanel { margin-bottom: -1px; }\n            :host([position="left"])   .tabpanel { margin-left: -1px; }\n            :host([position="right"])  .tabpanel { margin-right: -1px; }\n        `}_createTabButton(e){const t=e.id===this._activeTab,n=!!e.disabled,r=document.createElement("button");if(r.id=`tab-${e.id}`,r.setAttribute("role","tab"),r.setAttribute("aria-selected",t),r.setAttribute("aria-controls",`panel-${e.id}`),r.setAttribute("aria-disabled",n),n&&(r.disabled=!0),r.tabIndex=t&&!n?0:-1,r.dataset.id=e.id,this.querySelector(`[slot="left-icon-${e.id}"]`)){const t=document.createElement("slot");t.name=`left-icon-${e.id}`,t.className="icon-slot",r.appendChild(t)}const o=document.createElement("span");if(o.textContent=e.label,r.appendChild(o),this.querySelector(`[slot="right-icon-${e.id}"]`)){const t=document.createElement("slot");t.name=`right-icon-${e.id}`,t.className="icon-slot",r.appendChild(t)}return r}_createPanel(e){const t=document.createElement("div");t.className="tabpanel",t.id=`panel-${this._activeTab}`,t.setAttribute("role","tabpanel"),t.setAttribute("aria-labelledby",`tab-${this._activeTab}`);const n=document.createElement("slot");return n.name=e,t.appendChild(n),t}render(){const e=this.options;this._resolveActiveTab(e);const t=e.find(e=>e.id===this._activeTab);this.shadowRoot.innerHTML="";const n=document.createElement("style");n.textContent=this._getStyles(),this.shadowRoot.appendChild(n);const r=document.createElement("div");r.className="tablist",r.setAttribute("role","tablist"),e.forEach(e=>r.appendChild(this._createTabButton(e))),this.shadowRoot.appendChild(r),this.shadowRoot.appendChild(this._createPanel(t?.slot||"")),this._setupEvents()}}customElements.get("y-tabs")||customElements.define("y-tabs",E);class z extends HTMLElement{static get observedAttributes(){return["position","duration","max"]}constructor(){super(),this.attachShadow({mode:"open"}),this._queue=[]}connectedCallback(){this.render()}attributeChangedCallback(e,t,n){t!==n&&this.render()}get position(){return this.getAttribute("position")||"bottom-right"}set position(e){this.setAttribute("position",e)}get duration(){return parseInt(this.getAttribute("duration")??"4000",10)}set duration(e){this.setAttribute("duration",String(e))}get max(){return parseInt(this.getAttribute("max")??"5",10)}set max(e){this.setAttribute("max",String(e))}show(e={}){const{message:t="",color:n="base",duration:r=this.duration,dismissible:o=!0,icon:a=null}=e,i=this.shadowRoot.querySelector(".toast-container");if(!i)return null;const s=i.querySelectorAll(".toast");s.length>=this.max&&this._removeToast(s[0]);const d=document.createElement("div");d.className=`toast color-${n}`,d.setAttribute("role","alert"),d.setAttribute("aria-live","assertive");const p=this._getColorBg(n),h=c(l(p,this));if(d.style.backgroundColor=p,d.style.color=h,a){const e=document.createElement("i");e.className=`toast-icon ${a}`,d.appendChild(e)}const b=document.createElement("span");if(b.className="toast-message",b.textContent=t,d.appendChild(b),o){const e=document.createElement("button");e.className="toast-close",e.setAttribute("aria-label","Dismiss"),e.innerHTML="&#215;",e.addEventListener("click",()=>this._removeToast(d)),d.appendChild(e)}return i.appendChild(d),requestAnimationFrame(()=>{d.classList.add("visible")}),r>0&&(d._timeout=setTimeout(()=>this._removeToast(d),r)),this.dispatchEvent(new CustomEvent("y-toast-show",{detail:{message:t,color:n},bubbles:!0})),d}clear(){const e=this.shadowRoot.querySelector(".toast-container");e&&e.querySelectorAll(".toast").forEach(e=>this._removeToast(e))}_removeToast(e){e&&!e._removing&&(e._removing=!0,clearTimeout(e._timeout),e.classList.remove("visible"),e.classList.add("exit"),e.addEventListener("transitionend",()=>{e.remove(),this.dispatchEvent(new CustomEvent("y-toast-dismiss",{bubbles:!0}))},{once:!0}),setTimeout(()=>{e.parentNode&&e.remove()},350))}_getPositionStyles(){const e="position: fixed; z-index: 10000; display: flex; flex-direction: column; gap: var(--spacing-small, 6px); pointer-events: none; max-width: 420px; min-width: 280px;",t="var(--component-toast-offset, var(--spacing-x-large, 16px))",n={"top-right":`${e} top: ${t}; right: ${t}; align-items: flex-end;`,"top-left":`${e} top: ${t}; left: ${t}; align-items: flex-start;`,"top-center":`${e} top: ${t}; left: 50%; transform: translateX(-50%); align-items: center;`,"bottom-right":`${e} bottom: ${t}; right: ${t}; align-items: flex-end;`,"bottom-left":`${e} bottom: ${t}; left: ${t}; align-items: flex-start;`,"bottom-center":`${e} bottom: ${t}; left: 50%; transform: translateX(-50%); align-items: center;`};return n[this.position]||n["bottom-right"]}_getColorBg(e){const t={base:"var(--base-content--, #fff)",primary:"var(--primary-content--, #0070f3)",secondary:"var(--secondary-content--, #6c757d)",success:"var(--success-content--, #28a745)",warning:"var(--warning-content--, #ffc107)",error:"var(--error-content--, #dc3545)",help:"var(--help-content--, #6f42c1)"};return t[e]||t.base}render(){this.shadowRoot.innerHTML=`\n            <style>\n                :host {\n                    font-family: var(--font-family-body, sans-serif);\n                }\n\n                .toast-container {\n                    ${this._getPositionStyles()}\n                }\n\n                .toast {\n                    pointer-events: auto;\n                    display: flex;\n                    align-items: center;\n                    gap: var(--spacing-medium, 8px);\n                    padding: var(--component-toast-padding, var(--spacing-medium, 8px));\n                    border-radius: var(--component-toast-border-radius, var(--radii-small, 4px));\n                    font-size: var(--font-size-paragraph, 1em);\n                    line-height: 1.4;\n                    opacity: 0;\n                    transform: translateY(8px);\n                    transition: opacity 0.25s ease, transform 0.25s ease;\n                    box-shadow: var(--base-shadow, 0 2px 6px rgba(0,0,0,0.15));\n                }\n\n                .toast.visible {\n                    opacity: 1;\n                    transform: translateY(0);\n                }\n\n                .toast.exit {\n                    opacity: 0;\n                    transform: translateY(-8px);\n                }\n\n                .toast-icon {\n                    flex-shrink: 0;\n                    font-size: 1.1em;\n                }\n\n                .toast-message {\n                    flex: 1;\n                }\n\n                .toast-close {\n                    flex-shrink: 0;\n                    align-self: flex-start;\n                    background: none;\n                    border: none;\n                    color: inherit;\n                    font-size: 1.2em;\n                    cursor: pointer;\n                    padding: 0 0 0 var(--spacing-small, 6px);\n                    opacity: 0.7;\n                    line-height: 1;\n                }\n                .toast-close:hover {\n                    opacity: 1;\n                }\n            </style>\n            <div class="toast-container"></div>\n        `}}customElements.get("y-toast")||customElements.define("y-toast",z);class _ extends HTMLElement{static get observedAttributes(){return["text","position","delay","color"]}constructor(){super(),this.attachShadow({mode:"open"}),this._showTimeout=null,this._hideTimeout=null,this._visible=!1,this._onMouseEnter=this._onMouseEnter.bind(this),this._onMouseLeave=this._onMouseLeave.bind(this),this._onFocusIn=this._onFocusIn.bind(this),this._onFocusOut=this._onFocusOut.bind(this),this._onKeyDown=this._onKeyDown.bind(this)}connectedCallback(){this.render(),this.addEventListener("mouseenter",this._onMouseEnter),this.addEventListener("mouseleave",this._onMouseLeave),this.addEventListener("focusin",this._onFocusIn),this.addEventListener("focusout",this._onFocusOut),document.addEventListener("keydown",this._onKeyDown)}disconnectedCallback(){this.removeEventListener("mouseenter",this._onMouseEnter),this.removeEventListener("mouseleave",this._onMouseLeave),this.removeEventListener("focusin",this._onFocusIn),this.removeEventListener("focusout",this._onFocusOut),document.removeEventListener("keydown",this._onKeyDown),clearTimeout(this._showTimeout),clearTimeout(this._hideTimeout)}attributeChangedCallback(e,t,n){t!==n&&this.render()}get text(){return this.getAttribute("text")||""}set text(e){this.setAttribute("text",e)}get position(){return this.getAttribute("position")||"top"}set position(e){this.setAttribute("position",e)}get delay(){return parseInt(this.getAttribute("delay")??"200",10)}set delay(e){this.setAttribute("delay",String(e))}get color(){return this.getAttribute("color")||"base"}set color(e){this.setAttribute("color",e)}show(){clearTimeout(this._hideTimeout),this._showTimeout=setTimeout(()=>{this._visible=!0;const e=this.shadowRoot.querySelector(".tooltip");if(e){const t=l(this._getBg(),this);e.style.color=c(t),e.classList.add("visible")}},this.delay)}hide(){clearTimeout(this._showTimeout),this._visible=!1;const e=this.shadowRoot.querySelector(".tooltip");e&&e.classList.remove("visible")}_onMouseEnter(){this.show()}_onMouseLeave(){this.hide()}_onFocusIn(){this.show()}_onFocusOut(){this.hide()}_onKeyDown(e){"Escape"===e.key&&this._visible&&this.hide()}_getBg(){const e={base:"var(--base-content--, #555)",primary:"var(--primary-content--, #0070f3)",secondary:"var(--secondary-content--, #6c757d)",success:"var(--success-content--, #28a745)",warning:"var(--warning-content--, #ffc107)",error:"var(--error-content--, #dc3545)",help:"var(--help-content--, #6f42c1)"};return e[this.color]||e.base}render(){const e=this.position,t=this._getBg(),n=c(l(t,this));this.shadowRoot.innerHTML=`\n            <style>\n                :host {\n                    display: inline-block;\n                    position: relative;\n                    font-family: var(--font-family-body, sans-serif);\n                }\n\n                .trigger {\n                    display: inline-block;\n                }\n\n                .tooltip {\n                    position: absolute;\n                    z-index: 9999;\n                    white-space: nowrap;\n                    pointer-events: none;\n                    opacity: 0;\n                    transform: scale(0.95);\n                    transition: opacity 0.15s ease, transform 0.15s ease;\n                    padding: var(--component-tooltip-padding, var(--spacing-x-small, 4px)) var(--component-tooltip-padding-h, var(--spacing-medium, 8px));\n                    border-radius: var(--component-tooltip-border-radius, var(--radii-small, 4px));\n                    font-size: var(--font-size-small, 0.8em);\n                    background: ${t};\n                    color: ${n};\n                    line-height: 1.4;\n                }\n\n                .tooltip.visible {\n                    opacity: 1;\n                    transform: scale(1);\n                }\n\n                .tooltip::after {\n                    content: "";\n                    position: absolute;\n                    border: 5px solid transparent;\n                }\n\n                .tooltip.top {\n                    bottom: 100%;\n                    left: 50%;\n                    transform: translateX(-50%) scale(0.95);\n                    margin-bottom: 6px;\n                }\n                .tooltip.top.visible {\n                    transform: translateX(-50%) scale(1);\n                }\n                .tooltip.top::after {\n                    top: 100%;\n                    left: 50%;\n                    transform: translateX(-50%);\n                    border-top-color: ${t};\n                }\n\n                .tooltip.bottom {\n                    top: 100%;\n                    left: 50%;\n                    transform: translateX(-50%) scale(0.95);\n                    margin-top: 6px;\n                }\n                .tooltip.bottom.visible {\n                    transform: translateX(-50%) scale(1);\n                }\n                .tooltip.bottom::after {\n                    bottom: 100%;\n                    left: 50%;\n                    transform: translateX(-50%);\n                    border-bottom-color: ${t};\n                }\n\n                .tooltip.left {\n                    right: 100%;\n                    top: 50%;\n                    transform: translateY(-50%) scale(0.95);\n                    margin-right: 6px;\n                }\n                .tooltip.left.visible {\n                    transform: translateY(-50%) scale(1);\n                }\n                .tooltip.left::after {\n                    left: 100%;\n                    top: 50%;\n                    transform: translateY(-50%);\n                    border-left-color: ${t};\n                }\n\n                .tooltip.right {\n                    left: 100%;\n                    top: 50%;\n                    transform: translateY(-50%) scale(0.95);\n                    margin-left: 6px;\n                }\n                .tooltip.right.visible {\n                    transform: translateY(-50%) scale(1);\n                }\n                .tooltip.right::after {\n                    right: 100%;\n                    top: 50%;\n                    transform: translateY(-50%);\n                    border-right-color: ${t};\n                }\n            </style>\n            <slot class="trigger"></slot>\n            <div class="tooltip ${e}" role="tooltip">${this.text}</div>\n        `}}customElements.get("y-tooltip")||customElements.define("y-tooltip",_);const C={"blue-light":'/* Themes - Blue Light */\n:root {\n    --base-background-app: var(--neutral-light-1);\n    --base-background-component: var(--neutral-light-0);\n    --base-background-hover: var(--neutral-light-2);\n    --base-background-border: var(--neutral-light-3);\n    --base-background-active: var(--neutral-light-4);\n    --base-content--: var(--neutral-dark-0);\n    --base-content-light: var(--neutral-dark-1);\n    --base-content-lighter: var(--neutral-dark-3);\n    --base-content-lightest: var(--neutral-dark-5);\n    --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n    --primary-background-app: var(--blue-light-1);\n    --primary-background-component: var(--blue-light-0);\n    --primary-background-hover: var(--blue-light-2);\n    --primary-background-active: var(--blue-light-3);\n    --primary-background-border: var(--blue-light-4);\n    --primary-content--: var(--blue--);\n    --primary-content-hover: var(--blue-dark-7);\n    --primary-content-active: var(--blue-dark-6);\n    --secondary-background-app: var(--teal-light-1);\n    --secondary-background-component: var(--teal-light-0);\n    --secondary-background-hover: var(--teal-light-2);\n    --secondary-background-border: var(--teal-light-3);\n    --secondary-background-active: var(--teal-light-4);\n    --secondary-content--: var(--teal--);\n    --secondary-content-hover: var(--teal-dark-7);\n    --secondary-content-active: var(--teal-dark-6);\n    --success-background-app: var(--green-light-1);\n    --success-background-component: var(--green-light-0);\n    --success-background-hover: var(--green-light-2);\n    --success-background-border: var(--green-light-3);\n    --success-background-active: var(--green-light-4);\n    --success-content--: var(--green--);\n    --success-content-hover: var(--green-dark-7);\n    --success-content-active: var(--green-dark-6);\n    --warning-background-app: var(--yellow-light-1);\n    --warning-background-component: var(--yellow-light-0);\n    --warning-background-hover: var(--yellow-light-2);\n    --warning-background-border: var(--yellow-light-3);\n    --warning-background-active: var(--yellow-light-4);\n    --warning-content--: var(--yellow--);\n    --warning-content-hover: var(--yellow-dark-7);\n    --warning-content-active: var(--yellow-dark-6);\n    --error-background-app: var(--red-light-1);\n    --error-background-component: var(--red-light-0);\n    --error-background-hover: var(--red-light-2);\n    --error-background-border: var(--red-light-3);\n    --error-background-active: var(--red-light-4);\n    --error-content--: var(--red--);\n    --error-content-hover: var(--red-dark-7);\n    --error-content-active: var(--red-dark-6);\n    --help-background-app: var(--indigo-light-1);\n    --help-background-component: var(--indigo-light-0);\n    --help-background-hover: var(--indigo-light-2);\n    --help-background-active: var(--indigo-light-3);\n    --help-background-border: var(--indigo-light-4);\n    --help-content--: var(--indigo--);\n    --help-content-hover: var(--indigo-dark-7);\n    --help-content-active: var(--indigo-dark-6);\n    --component-appbar-background: var(--base-background-component);\n    --component-appbar-color: var(--base-content--);\n    --component-appbar-border-color: var(--base-background-border);\n    --component-checkbox-background: var(--base-background-component);\n    --component-checkbox-color: var(--base-content--);\n    --component-checkbox-border-color: var(--base-content--);\n    --component-checkbox-accent: var(--primary-content--);\n    --component-dialog-background: var(--base-background-component);\n    --component-dialog-color: var(--base-content--);\n    --component-dialog-border-color: var(--base-background-border);\n    --component-dialog-hover-background: var(--base-background-hover);\n    --component-dialog-accent: var(--primary-content--);\n    --component-drawer-background: var(--base-background-component);\n    --component-drawer-color: var(--base-content--);\n    --component-drawer-border-color: var(--base-background-border);\n    --component-drawer-hover-background: var(--base-background-hover);\n    --component-input-background: var(--base-background-app);\n    --component-input-background-disabled: var(--base-background-component);\n    --component-input-color: var(--base-content--);\n    --component-input-border-color: var(--base-background-border);\n    --component-input-accent: var(--primary-content--);\n    --component-input-label-color: var(--base-content-light);\n    --component-input-icon-color: var(--base-content-lighter);\n    --component-input-error-color: var(--error-content--);\n    --component-input-error-background: var(--error-background-component);\n    --component-input-error-border-color: var(--error-background-border);\n    --component-menu-background: var(--base-background-component);\n    --component-menu-color: var(--base-content--);\n    --component-menu-border-color: var(--base-background-border);\n    --component-menu-hover-background: var(--base-background-hover);\n    --component-menu-shadow: var(--base-shadow);\n    --component-panel-background: var(--base-background-component);\n    --component-panel-color: var(--base-content--);\n    --component-panel-expanded-background: var(--base-background-app);\n    --component-panel-accent: var(--primary-content--);\n    --component-panel-active-border: var(--base-background-active);\n    --component-panel-accent-hover-background: var(--primary-background-active);\n    --component-panel-hover-background: var(--base-background-hover);\n    --component-radio-color: var(--base-content--);\n    --component-radio-accent: var(--primary-content--);\n    --component-select-background: var(--base-background-app);\n    --component-select-color: var(--base-content--);\n    --component-select-border-color: var(--base-background-border);\n    --component-select-accent: var(--primary-content--);\n    --component-select-accent-contrast: var(--base-background-component);\n    --component-select-label-color: var(--base-content-light);\n    --component-select-hover-background: var(--base-background-hover);\n    --component-select-shadow: var(--base-shadow);\n    --component-select-error-color: var(--error-content--);\n    --component-select-error-background: var(--error-background-component);\n    --component-select-error-border-color: var(--error-background-border);\n    --component-table-color: var(--base-content--);\n    --component-table-border-color: var(--base-background-border);\n    --component-table-hover-background: var(--base-background-hover);\n    --component-table-active-background: var(--base-background-active);\n    --component-table-color-light: var(--base-content-lightest);\n    --component-tabs-background: var(--base-background-component);\n    --component-tabs-color: var(--base-content--);\n    --component-tabs-border-color: var(--base-background-border);\n    --component-tabs-accent: var(--primary-content--);\n    --font-family-header: "Lexend", sans-serif;\n    --font-family-body: "Lexend", sans-serif;\n}\n',"blue-dark":'/* Themes - Blue Dark */\n:root {\n    --base-background-app: var(--neutral-dark-1);\n    --base-background-component: var(--neutral-dark-0);\n    --base-background-hover: var(--neutral-dark-2);\n    --base-background-border: var(--neutral-dark-3);\n    --base-background-active: var(--neutral-dark-4);\n    --base-content--: var(--neutral-light-0);\n    --base-content-light: var(--neutral-light-1);\n    --base-content-lighter: var(--neutral-light-3);\n    --base-content-lightest: var(--neutral-light-5);\n    --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n    --primary-background-app: var(--blue-dark-1);\n    --primary-background-component: var(--blue-dark-0);\n    --primary-background-hover: var(--blue-dark-2);\n    --primary-background-active: var(--blue-dark-3);\n    --primary-background-border: var(--blue-dark-4);\n    --primary-content--: var(--blue--);\n    --primary-content-hover: var(--blue-light-7);\n    --primary-content-active: var(--blue-light-6);\n    --secondary-background-app: var(--teal-dark-1);\n    --secondary-background-component: var(--teal-dark-0);\n    --secondary-background-hover: var(--teal-dark-2);\n    --secondary-background-border: var(--teal-dark-3);\n    --secondary-background-active: var(--teal-dark-4);\n    --secondary-content--: var(--teal--);\n    --secondary-content-hover: var(--teal-light-7);\n    --secondary-content-active: var(--teal-light-6);\n    --success-background-app: var(--green-dark-1);\n    --success-background-component: var(--green-dark-0);\n    --success-background-hover: var(--green-dark-2);\n    --success-background-border: var(--green-dark-3);\n    --success-background-active: var(--green-dark-4);\n    --success-content--: var(--green--);\n    --success-content-hover: var(--green-light-7);\n    --success-content-active: var(--green-light-6);\n    --warning-background-app: var(--yellow-dark-1);\n    --warning-background-component: var(--yellow-dark-0);\n    --warning-background-hover: var(--yellow-dark-2);\n    --warning-background-border: var(--yellow-dark-3);\n    --warning-background-active: var(--yellow-dark-4);\n    --warning-content--: var(--yellow--);\n    --warning-content-hover: var(--yellow-light-7);\n    --warning-content-active: var(--yellow-light-6);\n    --error-background-app: var(--red-dark-1);\n    --error-background-component: var(--red-dark-0);\n    --error-background-hover: var(--red-dark-2);\n    --error-background-border: var(--red-dark-3);\n    --error-background-active: var(--red-dark-4);\n    --error-content--: var(--red--);\n    --error-content-hover: var(--red-light-7);\n    --error-content-active: var(--red-light-6);\n    --help-background-app: var(--indigo-dark-1);\n    --help-background-component: var(--indigo-light-0);\n    --help-background-hover: var(--indigo-dark-2);\n    --help-background-active: var(--indigo-dark-3);\n    --help-background-border: var(--indigo-dark-4);\n    --help-content--: var(--indigo--);\n    --help-content-hover: var(--indigo-light-7);\n    --help-content-active: var(--indigo-light-6);\n    --component-appbar-background: var(--base-background-component);\n    --component-appbar-color: var(--base-content--);\n    --component-appbar-border-color: var(--base-background-border);\n    --component-checkbox-background: var(--base-background-component);\n    --component-checkbox-color: var(--base-content--);\n    --component-checkbox-border-color: var(--base-content--);\n    --component-checkbox-accent: var(--primary-content--);\n    --component-dialog-background: var(--base-background-component);\n    --component-dialog-color: var(--base-content--);\n    --component-dialog-border-color: var(--base-background-border);\n    --component-dialog-hover-background: var(--base-background-hover);\n    --component-dialog-accent: var(--primary-content--);\n    --component-drawer-background: var(--base-background-component);\n    --component-drawer-color: var(--base-content--);\n    --component-drawer-border-color: var(--base-background-border);\n    --component-drawer-hover-background: var(--base-background-hover);\n    --component-input-background: var(--base-background-app);\n    --component-input-background-disabled: var(--base-background-component);\n    --component-input-color: var(--base-content--);\n    --component-input-border-color: var(--base-background-border);\n    --component-input-accent: var(--primary-content--);\n    --component-input-label-color: var(--base-content-light);\n    --component-input-icon-color: var(--base-content-lighter);\n    --component-input-error-color: var(--error-content--);\n    --component-input-error-background: var(--error-background-component);\n    --component-input-error-border-color: var(--error-background-border);\n    --component-menu-background: var(--base-background-component);\n    --component-menu-color: var(--base-content--);\n    --component-menu-border-color: var(--base-background-border);\n    --component-menu-hover-background: var(--base-background-hover);\n    --component-menu-shadow: var(--base-shadow);\n    --component-panel-background: var(--base-background-component);\n    --component-panel-color: var(--base-content--);\n    --component-panel-expanded-background: var(--base-background-app);\n    --component-panel-accent: var(--primary-content--);\n    --component-panel-active-border: var(--base-background-active);\n    --component-panel-accent-hover-background: var(--primary-background-active);\n    --component-panel-hover-background: var(--base-background-hover);\n    --component-radio-color: var(--base-content--);\n    --component-radio-accent: var(--primary-content--);\n    --component-select-background: var(--base-background-app);\n    --component-select-color: var(--base-content--);\n    --component-select-border-color: var(--base-background-border);\n    --component-select-accent: var(--primary-content--);\n    --component-select-accent-contrast: var(--base-background-component);\n    --component-select-label-color: var(--base-content-light);\n    --component-select-hover-background: var(--base-background-hover);\n    --component-select-shadow: var(--base-shadow);\n    --component-select-error-color: var(--error-content--);\n    --component-select-error-background: var(--error-background-component);\n    --component-select-error-border-color: var(--error-background-border);\n    --component-table-color: var(--base-content--);\n    --component-table-border-color: var(--base-background-border);\n    --component-table-hover-background: var(--base-background-hover);\n    --component-table-active-background: var(--base-background-active);\n    --component-table-color-light: var(--base-content-lightest);\n    --component-tabs-background: var(--base-background-component);\n    --component-tabs-color: var(--base-content--);\n    --component-tabs-border-color: var(--base-background-border);\n    --component-tabs-accent: var(--primary-content--);\n    --font-family-header: "Lexend", sans-serif;\n    --font-family-body: "Lexend", sans-serif;\n}\n',"orange-light":'/* Themes - Orange Light */\n:root {\n    --base-background-app: var(--neutral-light-1);\n    --base-background-component: var(--neutral-light-0);\n    --base-background-hover: var(--neutral-light-2);\n    --base-background-border: var(--neutral-light-3);\n    --base-background-active: var(--neutral-light-4);\n    --base-content--: var(--neutral-dark-0);\n    --base-content-light: var(--neutral-dark-1);\n    --base-content-lighter: var(--neutral-dark-3);\n    --base-content-lightest: var(--neutral-dark-5);\n    --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n    --primary-background-app: var(--orange-light-1);\n    --primary-background-component: var(--orange-light-0);\n    --primary-background-hover: var(--orange-light-2);\n    --primary-background-active: var(--orange-light-3);\n    --primary-background-border: var(--orange-light-4);\n    --primary-content--: var(--orange--);\n    --primary-content-hover: var(--orange-dark-7);\n    --primary-content-active: var(--orange-dark-6);\n    --secondary-background-app: var(--amber-light-1);\n    --secondary-background-component: var(--amber-light-0);\n    --secondary-background-hover: var(--amber-light-2);\n    --secondary-background-border: var(--amber-light-3);\n    --secondary-background-active: var(--amber-light-4);\n    --secondary-content--: var(--amber--);\n    --secondary-content-hover: var(--amber-dark-7);\n    --secondary-content-active: var(--amber-dark-6);\n    --success-background-app: var(--green-light-1);\n    --success-background-component: var(--green-light-0);\n    --success-background-hover: var(--green-light-2);\n    --success-background-border: var(--green-light-3);\n    --success-background-active: var(--green-light-4);\n    --success-content--: var(--green--);\n    --success-content-hover: var(--green-dark-7);\n    --success-content-active: var(--green-dark-6);\n    --warning-background-app: var(--yellow-light-1);\n    --warning-background-component: var(--yellow-light-0);\n    --warning-background-hover: var(--yellow-light-2);\n    --warning-background-border: var(--yellow-light-3);\n    --warning-background-active: var(--yellow-light-4);\n    --warning-content--: var(--yellow--);\n    --warning-content-hover: var(--yellow-dark-7);\n    --warning-content-active: var(--yellow-dark-6);\n    --error-background-app: var(--red-light-1);\n    --error-background-component: var(--red-light-0);\n    --error-background-hover: var(--red-light-2);\n    --error-background-border: var(--red-light-3);\n    --error-background-active: var(--red-light-4);\n    --error-content--: var(--red--);\n    --error-content-hover: var(--red-dark-7);\n    --error-content-active: var(--red-dark-6);\n    --help-background-app: var(--indigo-light-1);\n    --help-background-component: var(--indigo-light-0);\n    --help-background-hover: var(--indigo-light-2);\n    --help-background-active: var(--indigo-light-3);\n    --help-background-border: var(--indigo-light-4);\n    --help-content--: var(--indigo--);\n    --help-content-hover: var(--indigo-dark-7);\n    --help-content-active: var(--indigo-dark-6);\n    --component-appbar-background: var(--base-background-component);\n    --component-appbar-color: var(--base-content--);\n    --component-appbar-border-color: var(--base-background-border);\n    --component-checkbox-background: var(--base-background-component);\n    --component-checkbox-color: var(--base-content--);\n    --component-checkbox-border-color: var(--base-content--);\n    --component-checkbox-accent: var(--primary-content--);\n    --component-dialog-background: var(--base-background-component);\n    --component-dialog-color: var(--base-content--);\n    --component-dialog-border-color: var(--base-background-border);\n    --component-dialog-hover-background: var(--base-background-hover);\n    --component-dialog-accent: var(--primary-content--);\n    --component-drawer-background: var(--base-background-component);\n    --component-drawer-color: var(--base-content--);\n    --component-drawer-border-color: var(--base-background-border);\n    --component-drawer-hover-background: var(--base-background-hover);\n    --component-input-background: var(--base-background-app);\n    --component-input-background-disabled: var(--base-background-component);\n    --component-input-color: var(--base-content--);\n    --component-input-border-color: var(--base-background-border);\n    --component-input-accent: var(--primary-content--);\n    --component-input-label-color: var(--base-content-light);\n    --component-input-icon-color: var(--base-content-lighter);\n    --component-input-error-color: var(--error-content--);\n    --component-input-error-background: var(--error-background-component);\n    --component-input-error-border-color: var(--error-background-border);\n    --component-menu-background: var(--base-background-component);\n    --component-menu-color: var(--base-content--);\n    --component-menu-border-color: var(--base-background-border);\n    --component-menu-hover-background: var(--base-background-hover);\n    --component-menu-shadow: var(--base-shadow);\n    --component-panel-background: var(--base-background-component);\n    --component-panel-color: var(--base-content--);\n    --component-panel-expanded-background: var(--base-background-app);\n    --component-panel-accent: var(--primary-content--);\n    --component-panel-active-border: var(--base-background-active);\n    --component-panel-accent-hover-background: var(--primary-background-active);\n    --component-panel-hover-background: var(--base-background-hover);\n    --component-radio-color: var(--base-content--);\n    --component-radio-accent: var(--primary-content--);\n    --component-select-background: var(--base-background-app);\n    --component-select-color: var(--base-content--);\n    --component-select-border-color: var(--base-background-border);\n    --component-select-accent: var(--primary-content--);\n    --component-select-accent-contrast: var(--base-background-component);\n    --component-select-label-color: var(--base-content-light);\n    --component-select-hover-background: var(--base-background-hover);\n    --component-select-shadow: var(--base-shadow);\n    --component-select-error-color: var(--error-content--);\n    --component-select-error-background: var(--error-background-component);\n    --component-select-error-border-color: var(--error-background-border);\n    --component-table-color: var(--base-content--);\n    --component-table-border-color: var(--base-background-border);\n    --component-table-hover-background: var(--base-background-hover);\n    --component-table-active-background: var(--base-background-active);\n    --component-table-color-light: var(--base-content-lightest);\n    --component-tabs-background: var(--base-background-component);\n    --component-tabs-color: var(--base-content--);\n    --component-tabs-border-color: var(--base-background-border);\n    --component-tabs-accent: var(--primary-content--);\n    --font-family-header: "Lexend", sans-serif;\n    --font-family-body: "Lexend", sans-serif;\n}\n',"orange-dark":'/* Themes - Orange Dark */\n:root {\n    --base-background-app: var(--neutral-dark-1);\n    --base-background-component: var(--neutral-dark-0);\n    --base-background-hover: var(--neutral-dark-2);\n    --base-background-border: var(--neutral-dark-3);\n    --base-background-active: var(--neutral-dark-4);\n    --base-content--: var(--neutral-light-0);\n    --base-content-light: var(--neutral-light-1);\n    --base-content-lighter: var(--neutral-light-3);\n    --base-content-lightest: var(--neutral-light-5);\n    --base-shadow: 0 2px 6px var(--neutral-black-translucent);\n    --primary-background-app: var(--orange-dark-1);\n    --primary-background-component: var(--orange-dark-0);\n    --primary-background-hover: var(--orange-dark-2);\n    --primary-background-active: var(--orange-dark-3);\n    --primary-background-border: var(--orange-dark-4);\n    --primary-content--: var(--orange--);\n    --primary-content-hover: var(--orange-light-7);\n    --primary-content-active: var(--orange-light-6);\n    --secondary-background-app: var(--amber-dark-1);\n    --secondary-background-component: var(--amber-light-0);\n    --secondary-background-hover: var(--amber-dark-2);\n    --secondary-background-border: var(--amber-dark-3);\n    --secondary-background-active: var(--amber-dark-4);\n    --secondary-content--: var(--amber--);\n    --secondary-content-hover: var(--amber-light-7);\n    --secondary-content-active: var(--amber-light-6);\n    --success-background-app: var(--green-dark-1);\n    --success-background-component: var(--green-dark-0);\n    --success-background-hover: var(--green-dark-2);\n    --success-background-border: var(--green-dark-3);\n    --success-background-active: var(--green-dark-4);\n    --success-content--: var(--green--);\n    --success-content-hover: var(--green-light-7);\n    --success-content-active: var(--green-light-6);\n    --warning-background-app: var(--yellow-dark-1);\n    --warning-background-component: var(--yellow-dark-0);\n    --warning-background-hover: var(--yellow-dark-2);\n    --warning-background-border: var(--yellow-dark-3);\n    --warning-background-active: var(--yellow-dark-4);\n    --warning-content--: var(--yellow--);\n    --warning-content-hover: var(--yellow-light-7);\n    --warning-content-active: var(--yellow-light-6);\n    --error-background-app: var(--red-dark-1);\n    --error-background-component: var(--red-dark-0);\n    --error-background-hover: var(--red-dark-2);\n    --error-background-border: var(--red-dark-3);\n    --error-background-active: var(--red-dark-4);\n    --error-content--: var(--red--);\n    --error-content-hover: var(--red-light-7);\n    --error-content-active: var(--red-light-6);\n    --help-background-app: var(--indigo-dark-1);\n    --help-background-component: var(--indigo-light-0);\n    --help-background-hover: var(--indigo-dark-2);\n    --help-background-active: var(--indigo-dark-3);\n    --help-background-border: var(--indigo-dark-4);\n    --help-content--: var(--indigo--);\n    --help-content-hover: var(--indigo-light-7);\n    --help-content-active: var(--indigo-light-6);\n    --component-appbar-background: var(--base-background-component);\n    --component-appbar-color: var(--base-content--);\n    --component-appbar-border-color: var(--base-background-border);\n    --component-checkbox-background: var(--base-background-component);\n    --component-checkbox-color: var(--base-content--);\n    --component-checkbox-border-color: var(--base-content--);\n    --component-checkbox-accent: var(--primary-content--);\n    --component-dialog-background: var(--base-background-component);\n    --component-dialog-color: var(--base-content--);\n    --component-dialog-border-color: var(--base-background-border);\n    --component-dialog-hover-background: var(--base-background-hover);\n    --component-dialog-accent: var(--primary-content--);\n    --component-drawer-background: var(--base-background-component);\n    --component-drawer-color: var(--base-content--);\n    --component-drawer-border-color: var(--base-background-border);\n    --component-drawer-hover-background: var(--base-background-hover);\n    --component-input-background: var(--base-background-app);\n    --component-input-background-disabled: var(--base-background-component);\n    --component-input-color: var(--base-content--);\n    --component-input-border-color: var(--base-background-border);\n    --component-input-accent: var(--primary-content--);\n    --component-input-label-color: var(--base-content-light);\n    --component-input-icon-color: var(--base-content-lighter);\n    --component-input-error-color: var(--error-content--);\n    --component-input-error-background: var(--error-background-component);\n    --component-input-error-border-color: var(--error-background-border);\n    --component-menu-background: var(--base-background-component);\n    --component-menu-color: var(--base-content--);\n    --component-menu-border-color: var(--base-background-border);\n    --component-menu-hover-background: var(--base-background-hover);\n    --component-menu-shadow: var(--base-shadow);\n    --component-panel-background: var(--base-background-component);\n    --component-panel-color: var(--base-content--);\n    --component-panel-expanded-background: var(--base-background-app);\n    --component-panel-accent: var(--primary-content--);\n    --component-panel-active-border: var(--base-background-active);\n    --component-panel-accent-hover-background: var(--primary-background-active);\n    --component-panel-hover-background: var(--base-background-hover);\n    --component-radio-color: var(--base-content--);\n    --component-radio-accent: var(--primary-content--);\n    --component-select-background: var(--base-background-app);\n    --component-select-color: var(--base-content--);\n    --component-select-border-color: var(--base-background-border);\n    --component-select-accent: var(--primary-content--);\n    --component-select-accent-contrast: var(--base-background-component);\n    --component-select-label-color: var(--base-content-light);\n    --component-select-hover-background: var(--base-background-hover);\n    --component-select-shadow: var(--base-shadow);\n    --component-select-error-color: var(--error-content--);\n    --component-select-error-background: var(--error-background-component);\n    --component-select-error-border-color: var(--error-background-border);\n    --component-table-color: var(--base-content--);\n    --component-table-border-color: var(--base-background-border);\n    --component-table-hover-background: var(--base-background-hover);\n    --component-table-active-background: var(--base-background-active);\n    --component-table-color-light: var(--base-content-lightest);\n    --component-tabs-background: var(--base-background-component);\n    --component-tabs-color: var(--base-content--);\n    --component-tabs-border-color: var(--base-background-border);\n    --component-tabs-accent: var(--primary-content--);\n    --font-family-header: "Lexend", sans-serif;\n    --font-family-body: "Lexend", sans-serif;\n}\n'};class S extends HTMLElement{static get observedAttributes(){return["theme","mode","theme-path"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this._applyTheme()}attributeChangedCallback(e,t,n){t!==n&&this._applyTheme()}async _applyTheme(){const e=this.getAttribute("theme-path");let n;if(e)try{const t=new URL(e,document.baseURI),r=await fetch(t.href);n=await r.text()}catch(t){console.error(`Failed to load theme from ${e}:`,t),n=""}else{const e=this.getAttribute("theme")||"blue",t=this.getAttribute("mode")||"light";n=C[`${e}-${t}`]||""}this.shadowRoot.innerHTML=`\n            <style>${t}</style>\n            ${n?`<style>${n}</style>`:""}\n            <slot></slot>\n        `,this.applyVariablesToHost(t+n)}applyVariablesToHost(e){const t=/--([\w-]+):\s*([^;]+);/g;let n;for(;null!==(n=t.exec(e));)this.style.setProperty(`--${n[1]}`,n[2].trim())}}if(customElements.get("y-theme")||customElements.define("y-theme",S),"undefined"!=typeof document&&!document.querySelector("[data-yumekit-vars]")){const e=document.createElement("style");e.setAttribute("data-yumekit-vars",""),e.textContent=t,document.head.appendChild(e)}return e.YumeAppbar=a,e.YumeAvatar=i,e.YumeBadge=s,e.YumeButton=n,e.YumeCard=d,e.YumeCheckbox=p,e.YumeInput=u,e.YumePanel=m,e.YumePanelBar=g,e.YumeProgress=v,e.YumeRadio=f,e.YumeSelect=k,e.YumeSlider=y,e.YumeTable=x,e.YumeTabs=E,e.YumeTag=A,e.YumeTheme=S,e.YumeToast=z,e.YumeTooltip=_,e}({});