@studious-creative/yumekit 0.1.0

package/dist/yumekit.min.js

@@ -0,0 +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}({});

package/package.json

@@ -0,0 +1,45 @@
+{
+    "name": "@studious-creative/yumekit",
+    "version": "0.1.0",
+    "description": "Modern Web Component UI Kit",
+    "type": "module",
+    "main": "dist/yumekit.min.js",
+    "module": "dist/index.js",
+    "exports": {
+        ".": {
+            "import": "./dist/index.js",
+            "default": "./dist/yumekit.min.js"
+        },
+        "./components/*": "./dist/components/*",
+        "./styles/*": "./dist/styles/*"
+    },
+    "files": [
+        "dist"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "scripts": {
+        "build": "rollup -c",
+        "prepublishOnly": "npm run build",
+        "test": "npx web-test-runner --config web-test-runner.config.js --coverage"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/Studious-Creative/YumeKit.git"
+    },
+    "license": "MIT",
+    "homepage": "https://www.yumekit.com",
+    "devDependencies": {
+        "@open-wc/testing": "^3.0.0-next.5",
+        "@rollup/plugin-terser": "^0.4.4",
+        "@web/test-runner": "^0.20.0",
+        "@web/test-runner-playwright": "^0.11.0",
+        "eslint": "^10.0.1",
+        "eslint-plugin-prettier": "^5.2.3",
+        "playwright": "^1.51.1",
+        "prettier": "^3.5.3",
+        "rollup": "^4.59.0",
+        "sinon": "^21.0.1"
+    }
+}