atomicuilibrary 0.0.1 → 0.1.0

package/dist/components/ui-tabs.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as a,createEvent as i,h as s,transformTag as e}from"@stencil/core/internal/client";import{c as r,g as o}from"./dom.js";import{s as n,d as b}from"./icon.js";import{d as c,a as l}from"./badge.js";import{d}from"./input.js";const p=t(class extends a{constructor(t){super(),!1!==t&&this.__registerHost(),this.tabChange=i(this,"tabChange",7),this.tabClose=i(this,"tabClose",7),this.closeAll=i(this,"closeAll",7),this.tabEdit=i(this,"tabEdit",7),this.tabDelete=i(this,"tabDelete",7),this.tabOpenPanel=i(this,"tabOpenPanel",7),this.tabsReordered=i(this,"tabsReordered",7),this.tabUpdate=i(this,"tabUpdate",7)}get element(){return this}items=[];defaultActive="";animationDuration=300;orientation="horizontal";indicatorPosition="bottom";showCloseAll=!1;showTabList=!1;maxTabWidth=300;maxTitleLength=24;wrapText=!1;position="left";scrollMode="manual";selectionAnimation="slide";iconPosition="left";iconOnly=!1;scrollButtonPlacement="split";variant="line";activeColor="";indicatorStyle="line";indicatorGradient="";size="md";iconLibrary="default";lazy=!1;isDraggable=!1;activeTab="";parsedItems=[];activeMenuTab=null;showScrollButtons=!1;isTabListOpen=!1;tabListPosition=null;tabListSearch="";activeMenuPosition=null;editingTab=null;draggingTabId=null;tabListTrigger;activeMenuTrigger;_mountedTabs=new Set;tabChange;tabClose;closeAll;tabEdit;tabDelete;tabOpenPanel;tabsReordered;tabUpdate;tabsHeaderRef;indicatorRef;resizeObserver;parseItems(t){if("string"==typeof t)try{this.parsedItems=JSON.parse(t)}catch(t){console.error("Invalid JSON for tab items:",t),this.parsedItems=[]}else this.parsedItems=[...t];!this.activeTab&&this.parsedItems.length>0&&(this.activeTab=this.defaultActive||this.parsedItems[0].id),setTimeout((()=>this.updateIndicator()),0)}onDefaultActiveChange(t){t&&this.parsedItems.some((a=>a.id===t))&&(this.activeTab=t,this.updateIndicator())}onActiveTabChange(){this.updateIndicator()}componentWillLoad(){this.parseItems(this.items),this.activeTab=this.defaultActive||(this.parsedItems.length>0?this.parsedItems[0].id:"")}componentDidLoad(){this.checkScrollButtons(),"auto"===this.scrollMode&&this.scrollToActiveTab(),setTimeout((()=>{this.checkScrollButtons()}),100),this.resizeObserver=new ResizeObserver((()=>{this.checkScrollButtons()})),this.element&&this.resizeObserver.observe(this.element),this.tabsHeaderRef&&this.resizeObserver.observe(this.tabsHeaderRef),requestAnimationFrame((()=>this.updateIndicator()))}disconnectedCallback(){this.resizeObserver&&this.resizeObserver.disconnect()}componentDidUpdate(){"auto"===this.scrollMode&&this.scrollToActiveTab(),this.checkScrollButtons(),this.updateIndicator()}handleKeyDown(t){if(!this.element.contains(t.target))return;const a=t.target.closest(".tab-header");if(!a)return;const i=a.getAttribute("data-id");if(i)switch(t.key){case"Enter":case" ":t.preventDefault(),this.selectTab(i);break;case"ArrowRight":"horizontal"===this.orientation&&(t.preventDefault(),this.focusNextTab(i));break;case"ArrowLeft":"horizontal"===this.orientation&&(t.preventDefault(),this.focusPreviousTab(i));break;case"ArrowDown":"vertical"===this.orientation&&(t.preventDefault(),this.focusNextTab(i));break;case"ArrowUp":"vertical"===this.orientation&&(t.preventDefault(),this.focusPreviousTab(i));break;case"Home":t.preventDefault(),this.focusFirstTab();break;case"End":t.preventDefault(),this.focusLastTab()}}handleScroll(){(this.isTabListOpen||this.activeMenuTab)&&this.recalculateDropdownPositions()}recalculateDropdownPositions(){requestAnimationFrame((()=>{if(this.isTabListOpen&&this.tabListTrigger){const t=r(this.tabListTrigger,{menuWidth:300,menuHeight:400,gap:6,placement:"auto",align:"end",padding:10,useTransformedAncestorOffset:!1});this.tabListPosition={x:t.left,y:t.top??0,width:Math.min(340,Math.max(240,2*this.tabListTrigger.getBoundingClientRect().width)),maxHeight:Math.min(420,t.availableHeight)}}if(this.activeMenuTab&&this.activeMenuTrigger){const t=r(this.activeMenuTrigger,{menuWidth:180,menuHeight:200,gap:4,placement:"bottom",align:"end"});this.activeMenuPosition={x:t.left,y:t.top??0}}}))}handleWindowClick(t){const a=t.target;this.activeMenuTab&&(a.closest(".tab-actions")||(this.activeMenuTab=null)),this.isTabListOpen&&(a.closest(".tab-list-wrapper")||(this.isTabListOpen=!1,this.tabListSearch=""))}toggleMenu(t,a){if(a.stopPropagation(),this.activeMenuTab===t)this.activeMenuTab=null,this.activeMenuPosition=null,this.activeMenuTrigger=void 0;else{this.activeMenuTrigger=a.currentTarget;const i=this.activeMenuTrigger.getBoundingClientRect(),s=o(this.element);this.activeMenuTab=t,this.activeMenuPosition={x:i.right-s.x,y:i.bottom-s.y+4}}}toggleTabList(t){if(t.stopPropagation(),this.tabListSearch="",this.isTabListOpen=!this.isTabListOpen,this.isTabListOpen){this.tabListTrigger=t.currentTarget;const a=r(this.tabListTrigger,{menuWidth:300,menuHeight:400,gap:6,placement:"auto",align:"end",padding:10,useTransformedAncestorOffset:!1});this.tabListPosition={x:a.left,y:a.top??0,width:Math.min(340,Math.max(240,2*this.tabListTrigger.getBoundingClientRect().width)),maxHeight:Math.min(420,a.availableHeight)}}else this.tabListPosition=null,this.tabListTrigger=void 0}selectTab(t){const a=this.parsedItems.find((a=>a.id===t));if(a?.disabled)return;const i=this.activeTab;this.activeTab=t,this.tabChange.emit({tabId:i,activeTab:t}),this.isTabListOpen=!1,requestAnimationFrame((()=>{const a=this.element.querySelector(`[data-id="${t}"]`);a&&a.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"})}))}handleCloseTab(t,a){a.stopPropagation();const i=this.parsedItems.findIndex((a=>a.id===t));-1!==i&&(this.activeTab===t&&this.parsedItems.length>1&&(this.activeTab=this.parsedItems[i<this.parsedItems.length-1?i:i-1].id),this.parsedItems=this.parsedItems.filter((a=>a.id!==t)),this.tabClose.emit(t))}focusNextTab(t){const a=this.parsedItems.findIndex((a=>a.id===t));this.focusTab(this.parsedItems[(a+1)%this.parsedItems.length].id)}focusPreviousTab(t){const a=this.parsedItems.findIndex((a=>a.id===t));this.focusTab(this.parsedItems[0===a?this.parsedItems.length-1:a-1].id)}focusFirstTab(){this.parsedItems.length>0&&this.focusTab(this.parsedItems[0].id)}focusLastTab(){this.parsedItems.length>0&&this.focusTab(this.parsedItems[this.parsedItems.length-1].id)}focusTab(t){const a=this.element.querySelector(`[data-id="${t}"]`);a&&a.focus()}handleDragStart=(t,a)=>{this.isDraggable&&(this.draggingTabId=a,t.dataTransfer&&(t.dataTransfer.effectAllowed="move",t.dataTransfer.setData("text/plain",a)))};handleDragOver=t=>{this.isDraggable&&(t.preventDefault(),t.dataTransfer&&(t.dataTransfer.dropEffect="move"))};handleDrop=(t,a)=>{if(!this.isDraggable||!this.draggingTabId||this.draggingTabId===a)return;t.preventDefault();const i=[...this.parsedItems],s=i.findIndex((t=>t.id===this.draggingTabId)),e=i.findIndex((t=>t.id===a));if(-1!==s&&-1!==e){const[t]=i.splice(s,1);i.splice(e,0,t),this.parsedItems=i,this.tabsReordered.emit(this.parsedItems)}this.draggingTabId=null};startEditing(t){this.editingTab=t,setTimeout((()=>{const t=this.element.querySelector(".tab-edit-input");t&&(t.focus(),t.select())}),50)}commitEdit(t,a){a.trim()&&(this.parsedItems=this.parsedItems.map((i=>i.id===t?{...i,title:a}:i)),this.tabUpdate.emit({id:t,title:a})),this.editingTab=null}scrollToActiveTab(){if(!this.tabsHeaderRef||"none"===this.scrollMode)return;const t=this.element.querySelector(".tab-header-active");if(t&&"horizontal"===this.orientation){const a=this.tabsHeaderRef.getBoundingClientRect(),i=t.getBoundingClientRect(),s=this.tabsHeaderRef.scrollLeft;i.left<a.left?this.tabsHeaderRef.scrollLeft=s-(a.left-i.left)-20:i.right>a.right&&(this.tabsHeaderRef.scrollLeft=s+(i.right-a.right)+20)}}checkScrollButtons(){this.showScrollButtons=!(!this.tabsHeaderRef||"none"===this.scrollMode)&&("horizontal"===this.orientation?this.tabsHeaderRef.scrollWidth>this.tabsHeaderRef.clientWidth+2:this.tabsHeaderRef.scrollHeight>this.tabsHeaderRef.clientHeight+2||this.parsedItems.length>8)}scrollTabs(t){if(!this.tabsHeaderRef)return;const a=200;"left"===t?this.tabsHeaderRef.scrollLeft-=a:"right"===t?this.tabsHeaderRef.scrollLeft+=a:"top"===t?this.tabsHeaderRef.scrollTop-=a:"bottom"===t&&(this.tabsHeaderRef.scrollTop+=a),this.updateIndicator()}updateIndicator(){if(!this.indicatorRef||!this.tabsHeaderRef)return;const t=this.element.querySelector(".tab-header-active");if(!t)return void(this.indicatorRef.style.opacity="0");const a=this.tabsHeaderRef.getBoundingClientRect(),i=t.getBoundingClientRect();"horizontal"===this.orientation?(this.indicatorRef.style.transform=`translateX(${i.left-a.left+this.tabsHeaderRef.scrollLeft}px)`,this.indicatorRef.style.width=i.width+"px",this.indicatorRef.style.height=""):(this.indicatorRef.style.transform=`translateY(${i.top-a.top+this.tabsHeaderRef.scrollTop}px)`,this.indicatorRef.style.height=i.height+"px",this.indicatorRef.style.width=""),this.indicatorRef.style.opacity="1"}async selectTabById(t){this.selectTab(t)}async getActiveTab(){return this.activeTab}async destroyComponent(){this.closeAll.emit(),this.parsedItems=[],this.activeTab="",this.element.remove()}handleCloseAll(t){t.stopPropagation(),this.destroyComponent()}renderTab(t){const a=this.activeTab===t.id,i=t.disabled||!1,e=this.activeMenuTab===t.id,r=["tab-header",a&&"tab-header-active",i&&"tab-header-disabled",this.iconOnly&&"tab-header-icon-only","icon-position-"+this.iconPosition,this.wrapText&&"tab-header-wrap"].filter(Boolean).join(" "),o={maxWidth:"full-width"!==this.position?this.maxTabWidth+"px":"none",...t.color&&a?{"--tab-active-color":t.color,"--tab-active-border":t.color}:{}};return s("div",{key:t.id,id:"tab-header-"+t.id,class:r,part:a?"tab tab-active":"tab","data-id":t.id,onClick:()=>this.selectTab(t.id),"aria-selected":a?"true":"false","aria-controls":"tab-content-"+t.id,"aria-label":`Select ${t.title} tab`,"aria-disabled":i?"true":"false",tabindex:i?-1:0,role:"tab",style:o,title:!this.iconOnly&&t.title&&t.title.length>this.maxTitleLength||this.iconOnly?t.title:void 0,draggable:this.isDraggable,onDragStart:a=>this.handleDragStart(a,t.id),onDragOver:this.handleDragOver,onDrop:a=>this.handleDrop(a,t.id),onKeyDown:a=>{"Enter"===a.key||" "===a.key?(a.preventDefault(),this.selectTab(t.id)):"ArrowRight"===a.key||"ArrowDown"===a.key?(a.preventDefault(),this.focusNextTab(t.id)):"ArrowLeft"===a.key||"ArrowUp"===a.key?(a.preventDefault(),this.focusPreviousTab(t.id)):"Home"===a.key?(a.preventDefault(),this.focusFirstTab()):"End"===a.key&&(a.preventDefault(),this.focusLastTab())},onDblClick:()=>this.startEditing(t.id)},s("div",{class:"tab-header-content"},t.icon&&s("span",{class:"tab-icon"},s("ui-icon",{name:t.icon,library:t.iconLibrary||this.iconLibrary,size:"1.2em"})),!this.iconOnly&&(this.editingTab===t.id?s("ui-input",{class:"tab-edit-input",value:t.title,onInputBlur:a=>this.commitEdit(t.id,a.detail.target.value),onInputKeydown:a=>{"Enter"===a.detail.key&&this.commitEdit(t.id,a.detail.target.value),"Escape"===a.detail.key&&(this.editingTab=null),a.detail.stopPropagation()},size:"sm",fullWidth:!0}):s("span",{class:"tab-title"},t.title)),null!=t.badge&&s("span",{class:"tab-badge "+(t.badgeVariant?"badge-"+t.badgeVariant:"")},t.badge),t.actions&&s("div",{class:"tab-actions "+(e?"active":"")},s("ui-button",{variant:"ghost",size:"sm",iconOnly:!0,icon:"more-horizontal",iconLibrary:this.iconLibrary,iconSize:"1.1em",ariaLabel:"Actions for "+t.title,ariaHasPopup:"true",ariaExpanded:e,onClick:a=>this.toggleMenu(t.id,a),class:"tab-menu"}),e&&s("div",{class:"tab-menu-popover",role:"menu",style:{position:"fixed",top:this.activeMenuPosition?.y+"px",left:this.activeMenuPosition?.x+"px",right:"auto",zIndex:"12000"}},s("ui-button",{variant:"ghost",size:"sm",fullWidth:!0,icon:"edit-2",iconLibrary:this.iconLibrary,label:"Edit",class:"tab-menu-item",onClick:a=>{a.stopPropagation(),this.tabEdit.emit(t.id),this.activeMenuTab=null},style:{justifyContent:"flex-start"}}),s("ui-button",{variant:"ghost",size:"sm",fullWidth:!0,icon:"file-text",iconLibrary:this.iconLibrary,label:"Detail",class:"tab-menu-item",onClick:a=>{a.stopPropagation(),this.tabOpenPanel.emit(t.id),this.activeMenuTab=null},style:{justifyContent:"flex-start"}}),s("div",{class:"menu-divider"}),s("ui-button",{variant:"ghost",size:"sm",fullWidth:!0,icon:"trash-2",iconLibrary:this.iconLibrary,label:"Delete",class:"tab-menu-item danger",onClick:a=>{a.stopPropagation(),this.tabDelete.emit(t.id),this.activeMenuTab=null},style:{justifyContent:"flex-start"}}))),t.closable&&s("ui-button",{variant:"ghost",size:"sm",iconOnly:!0,icon:"x",iconLibrary:this.iconLibrary,iconSize:"0.9em",onClick:a=>this.handleCloseTab(t.id,a),ariaLabel:`Close ${t.title} tab`,class:"tab-close"})))}renderContent(t){const a=this.activeTab===t.id;if(this.lazy&&!a&&!t.useSlot&&!this._mountedTabs.has(t.id))return null;a&&this._mountedTabs.add(t.id);const i=["tab-content",a&&"tab-content-active","animation-"+this.selectionAnimation].filter(Boolean).join(" ");return s("div",{key:t.id,class:i,id:"tab-content-"+t.id,"aria-labelledby":"tab-header-"+t.id,role:"tabpanel","aria-hidden":!a,style:{"--animation-duration":this.animationDuration+"ms"}},t.useSlot?s("div",{class:"tab-content-inner"},s("slot",{name:t.slot||t.id})):s("div",{class:"tab-content-inner",innerHTML:n(t.content??"")}))}render(){const t=["tabs-container","tabs-"+this.orientation,"tabs-position-"+this.position,"tabs-variant-"+this.variant,"tabs-size-"+this.size,"none"!==this.scrollMode&&"tabs-scrollable","buttons-"+this.scrollButtonPlacement,"indicator-"+this.indicatorPosition,"indicator-style-"+this.indicatorStyle].filter(Boolean).join(" "),a={};this.activeColor&&(a["--tab-active-color"]=this.activeColor),this.indicatorGradient?a["--tab-indicator-bg"]=this.indicatorGradient:this.activeColor&&(a["--tab-indicator-bg"]=this.activeColor);const i=["tabs-header-wrapper",this.showScrollButtons&&"none"!==this.scrollMode&&"show-scroll-buttons"].filter(Boolean).join(" "),e=this.showScrollButtons&&"none"!==this.scrollMode,r=this.showScrollButtons&&"none"!==this.scrollMode,o="vertical"===this.orientation,n=(t,a)=>s("ui-button",{key:"3c6fc7c093589854f1d872f28c2b4b3d384a569b",variant:"ghost",size:"sm",iconOnly:!0,class:"scroll-button scroll-"+t,onClick:()=>this.scrollTabs(t),ariaLabel:a,icon:"left"===t?"chevron-left":"right"===t?"chevron-right":"top"===t?"chevron-up":"chevron-down",iconLibrary:this.iconLibrary,iconSize:"1.2em"});return s("div",{key:"9414cddcf48432318ef220cb9a78afc9fb9cbbc7",class:t,style:Object.keys(a).length?a:void 0},s("div",{key:"d2e8880304c4003bdd30b90f2058898d7300222a",class:i},e&&("start"===this.scrollButtonPlacement||"split"===this.scrollButtonPlacement)&&(o?n("top","Scroll up"):n("left","Scroll left")),r&&"start"===this.scrollButtonPlacement&&(o?n("bottom","Scroll down"):n("right","Scroll right")),s("div",{key:"96488ce3447e393501fa7932b37241a804ef279a",class:"tabs-header",part:"tabs-header",ref:t=>this.tabsHeaderRef=t,role:"tablist","aria-orientation":this.orientation},this.parsedItems.map((t=>this.renderTab(t))),s("div",{key:"1bd98d7bcadff9975741640c301f109124c1881a",class:"tab-selection-indicator",part:"indicator",ref:t=>this.indicatorRef=t})),e&&"end"===this.scrollButtonPlacement&&(o?n("top","Scroll up"):n("left","Scroll left")),r&&("end"===this.scrollButtonPlacement||"split"===this.scrollButtonPlacement)&&(o?n("bottom","Scroll down"):n("right","Scroll right")),s("div",{key:"21bfeb334606ab5dd1ae16295062dce602ac9eb6",class:"tabs-controls-group",style:{display:"flex",alignItems:"center",marginLeft:"auto",paddingLeft:"8px"}},(this.showTabList||this.showCloseAll)&&s("div",{key:"f020d74400afecbfe455adf44ab017ca272cbefe",class:"tab-list-wrapper"},s("ui-button",{key:"128b8b541c450be82d6815a165e1b8f8cb66cf52",variant:"ghost",size:"sm",iconOnly:!0,icon:"list",iconLibrary:this.iconLibrary,iconSize:"1em",onClick:t=>this.toggleTabList(t),ariaLabel:"List all tabs",ariaHasPopup:"true",ariaExpanded:this.isTabListOpen,title:"List All Tabs",class:"tab-list-button"}),this.isTabListOpen&&s("div",{key:"b55c7b805f2a1da631a5a77bda9807217f3a96fb",class:"tab-list-dropdown",style:{position:"fixed",top:this.tabListPosition?.y+"px",left:this.tabListPosition?.x+"px",width:this.tabListPosition?.width+"px",maxHeight:(this.tabListPosition?.maxHeight??420)+"px",zIndex:"12000"}},s("div",{key:"5032f2519eab9a4332e0686e2ce9ea37aa58f2ad",class:"tab-list-header"},s("span",{key:"907eaf22e72a92147a2937a7530f37c5941d24e8",class:"tab-list-header-title"},"Open Tabs"),s("span",{key:"3508efb55c24109536772a648a7364f7ada8289b",class:"tab-list-header-count"},this.parsedItems.length)),s("div",{key:"eea1f858f13dd780d5ed518079a915df070cb655",class:"tab-list-search",onClick:t=>t.stopPropagation()},s("ui-input",{key:"4bbb2eaa3f2c937fe05991720cc34f70f6241776",class:"tab-list-search-input",placeholder:"Search tabs...",value:this.tabListSearch,prefixIcon:"search",iconLibrary:this.iconLibrary,showClear:!0,size:"sm",fullWidth:!0,onInputChange:t=>{this.tabListSearch=t.detail},onInputClear:()=>{this.tabListSearch=""},"aria-label":"Search tabs",autoFocus:!0})),this.parsedItems.filter((t=>!this.tabListSearch.trim()||t.title?.toLowerCase().includes(this.tabListSearch.toLowerCase()))).map((t=>{const a=this.activeTab===t.id;return s("div",{class:"tab-list-item "+(a?"active":""),onClick:()=>this.selectTab(t.id),role:"option","aria-selected":""+a,title:t.title},t.icon&&s("span",{class:"tab-list-icon"},s("ui-icon",{name:t.icon,library:t.iconLibrary||this.iconLibrary,size:"16px",color:"currentColor"})),s("span",{class:"tab-list-title"},t.title),t.badge&&s("span",{class:"tab-list-badge"},t.badge),a&&s("span",{class:"tab-list-active-check"},s("ui-icon",{name:"check",library:"lucide",size:"14px",color:"currentColor"})))})))),this.showCloseAll&&s("ui-button",{key:"7e98f8695e6d8ab32c8b0c66e7f95b0878fc789e",variant:"ghost",size:"sm",iconOnly:!0,icon:"x",iconLibrary:this.iconLibrary,iconSize:"1em",onClick:t=>this.handleCloseAll(t),ariaLabel:"Close all tabs",title:"Close All",class:"tab-close-all"}))),s("div",{key:"81b7020058c9594a86bd4cd75d908bd42397c2c4",class:"tabs-content"},this.parsedItems.map((t=>this.renderContent(t)))))}static get watchers(){return{items:[{parseItems:0}],defaultActive:[{onDefaultActiveChange:0}],activeTab:[{onActiveTabChange:0}]}}static get style(){return'@charset "UTF-8";.sr-only.sc-ui-tabs{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only.sc-ui-tabs{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.sc-ui-tabs-h{display:block;overflow:visible;position:relative;--tab-pink:var(--color-danger, #ec4899);--tab-pink-light:var(--bg-primary, #fce7f3);--tab-teal:var(--color-primary, #14b8a6);--tab-teal-light:var(--bg-primary, #ccfbf1);--tab-purple:var(--color-primary, #a855f7);--tab-blue:var(--color-primary, #10b981);--tab-dark-bg:var(--bg-primary, #1e293b);--tab-dark-surface:var(--color-primary, #334155);--tab-text-primary:var(--text-primary, #0f172a);--tab-text-secondary:var(--text-secondary, #64748b);--tab-label-color:var(--tab-text-override, var(--label-color, var(--text-primary, #1f2937)));--tab-border:var(--border-subtle, #e2e8f0);--tab-indicator-bg:var(--tab-active-color, var(--tab-pink));--enterprise-easing:cubic-bezier(0.4, 0, 0.2, 1)}.tabs-container.sc-ui-tabs{display:flex;flex-direction:column;font-family:var(--font-family, "\'Inter\', -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif");border-radius:var(--border-radius, 8px);overflow:visible;background:var(--container-bg, transparent);width:100%;position:relative}.tabs-vertical.sc-ui-tabs{flex-direction:row;height:100%}.tabs-vertical.sc-ui-tabs .tabs-header-wrapper.sc-ui-tabs{flex-direction:column;border-bottom:none;border-right:1px solid var(--border-color, var(--tab-border));align-items:stretch;overflow:visible;height:100%;max-height:100%;flex-shrink:0}.tabs-vertical.sc-ui-tabs .tabs-header.sc-ui-tabs{flex-direction:column;overflow-y:auto;overflow-x:visible;min-width:180px;flex:1;max-height:calc(100% - 80px);scrollbar-width:thin}.tabs-vertical.sc-ui-tabs .tabs-header.sc-ui-tabs::-webkit-scrollbar{width:4px}.tabs-vertical.sc-ui-tabs .tabs-header.sc-ui-tabs::-webkit-scrollbar-thumb{background:var(--color-primary, #cbd5e1);border-radius:2px}.tabs-vertical.sc-ui-tabs .tab-header.sc-ui-tabs{width:100%;justify-content:flex-start;text-align:left;flex-shrink:0}.tabs-header-wrapper.sc-ui-tabs{display:flex;align-items:center;position:relative;background-color:var(--header-bg, transparent);border-bottom:1px solid var(--border-color, var(--tab-border));padding:0 4px;overflow:visible;z-index:100}.indicator-top.sc-ui-tabs .tabs-header-wrapper.sc-ui-tabs{border-bottom:none;border-top:1px solid var(--border-color, var(--tab-border))}.tab-header.sc-ui-tabs{border:none;outline:none !important;background:transparent;cursor:pointer;font-family:inherit;position:relative;z-index:10}.tab-header.sc-ui-tabs:focus{outline:none !important;box-shadow:none !important}.tab-header.sc-ui-tabs:focus-visible{outline:2px solid var(--tab-pink);outline-offset:-2px;border-radius:4px}.tabs-variant-line.sc-ui-tabs .tabs-header-wrapper.sc-ui-tabs{background:transparent;border-bottom:1px solid rgba(0, 0, 0, 0.08)}.tabs-variant-line.sc-ui-tabs .tab-header.sc-ui-tabs{border:none;border-bottom:none;margin-bottom:-1px;color:var(--tab-label-color);opacity:0.6;font-weight:500;transition:all 0.25s var(--enterprise-easing);position:relative;outline:none !important;flex-shrink:0;padding:14px 22px;background:transparent;letter-spacing:-0.01em;font-size:14px}.tabs-variant-line.sc-ui-tabs .tab-header.sc-ui-tabs::after{display:none}.tabs-variant-line.sc-ui-tabs .tab-header.sc-ui-tabs:hover:not(.tab-header-active):not(.tab-header-disabled){color:var(--tab-label-color);opacity:0.85;background:rgba(128, 128, 128, 0.05)}.tabs-variant-line.sc-ui-tabs .tab-header-active.sc-ui-tabs{color:var(--tab-active-color, var(--tab-pink));opacity:1;font-weight:600}.tabs-variant-line.sc-ui-tabs .tab-selection-indicator.sc-ui-tabs{background:var(--tab-indicator-bg);border-radius:4px 4px 0 0;opacity:1;transition:all 0.3s var(--enterprise-easing);z-index:10;height:4px;bottom:0;top:auto;box-shadow:0 -2px 10px -1px var(--tab-active-color, var(--tab-pink))}.indicator-top.tabs-variant-line.sc-ui-tabs .tab-selection-indicator.sc-ui-tabs{border-radius:0 0 4px 4px;bottom:auto;top:0;box-shadow:0 2px 10px -1px var(--tab-active-color, var(--tab-pink))}.tabs-vertical.tabs-variant-line.sc-ui-tabs .tab-selection-indicator.sc-ui-tabs{width:4px;height:auto;left:auto;right:0;border-radius:4px 0 0 4px;background:var(--tab-indicator-bg);box-shadow:-2px 0 10px -1px var(--tab-active-color, var(--tab-pink))}.tabs-variant-card.sc-ui-tabs .tabs-header-wrapper.sc-ui-tabs{background:var(--bg-primary, #f8fafc);border-bottom:1px solid var(--border-subtle, #e2e8f0);padding:8px 8px 0 8px;gap:4px}.tabs-variant-card.sc-ui-tabs .tab-header.sc-ui-tabs{border:none;border-radius:10px 10px 0 0;margin-bottom:-1px;padding:12px 20px;background:transparent;color:var(--tab-label-color);opacity:0.6;outline:none !important;flex-shrink:0;transition:all 0.2s ease;font-weight:500}.tabs-variant-card.sc-ui-tabs .tab-header.sc-ui-tabs:hover:not(.tab-header-active){background:rgba(128, 128, 128, 0.05);color:var(--tab-label-color);opacity:0.85}.tabs-variant-card.sc-ui-tabs .tab-header-active.sc-ui-tabs{background:var(--bg-primary, #ffffff);color:var(--tab-active-color, var(--color-primary, #3b82f6));opacity:1;font-weight:600;box-shadow:0 -2px 8px rgba(0, 0, 0, 0.04)}.tabs-variant-pill.sc-ui-tabs .tabs-header-wrapper.sc-ui-tabs{border-bottom:none;gap:10px;padding:12px;background:transparent}.tabs-variant-pill.sc-ui-tabs .tab-header.sc-ui-tabs{border-radius:10px;border:none;padding:12px 24px;transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1);font-weight:500;color:var(--tab-label-color);opacity:0.6;outline:none !important;flex-shrink:0;font-size:14px}.tabs-variant-pill.sc-ui-tabs .tab-header.sc-ui-tabs:hover:not(.tab-header-active){background:rgba(128, 128, 128, 0.07);color:var(--tab-label-color);opacity:0.85}.tabs-variant-pill.sc-ui-tabs .tab-header-active.sc-ui-tabs{background:var(--tab-active-color, var(--color-primary, #14b8a6));color:var(--text-standard, #ffffff);opacity:1;font-weight:600;box-shadow:0 4px 14px rgba(0, 0, 0, 0.15)}.tabs-variant-subtle.sc-ui-tabs .tabs-header-wrapper.sc-ui-tabs{background:transparent;border-bottom:none;gap:6px;padding:10px}.tabs-variant-subtle.sc-ui-tabs .tab-header.sc-ui-tabs{border-radius:8px;border:none;color:var(--tab-label-color);opacity:0.6;padding:12px 18px;transition:all 0.2s ease;outline:none !important;flex-shrink:0;font-weight:500}.tabs-variant-subtle.sc-ui-tabs .tab-header.sc-ui-tabs:hover:not(.tab-header-active){background:rgba(128, 128, 128, 0.06);color:var(--tab-label-color);opacity:0.85}.tabs-variant-subtle.sc-ui-tabs .tab-header-active.sc-ui-tabs{background:color-mix(in srgb, var(--tab-active-color, var(--tab-pink)) 12%, transparent);color:var(--tab-active-color, var(--tab-pink));opacity:1;font-weight:600}.tabs-variant-glass.sc-ui-tabs{background:rgba(255, 255, 255, 0.75);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255, 255, 255, 0.7);box-shadow:0 8px 32px rgba(0, 0, 0, 0.08)}.tabs-variant-glass.sc-ui-tabs .tabs-header-wrapper.sc-ui-tabs{background:rgba(255, 255, 255, 0.5);border-bottom:1px solid rgba(255, 255, 255, 0.4)}.tabs-variant-glass.sc-ui-tabs .tab-header.sc-ui-tabs{color:var(--tab-label-color);opacity:0.65;outline:none !important;flex-shrink:0;font-weight:500;transition:all 0.25s ease;padding:12px 20px;border:none}.tabs-variant-glass.sc-ui-tabs .tab-header.sc-ui-tabs:hover:not(.tab-header-active){background:rgba(128, 128, 128, 0.1);color:var(--tab-label-color);opacity:0.9}.tabs-variant-glass.sc-ui-tabs .tab-header-active.sc-ui-tabs{background:rgba(255, 255, 255, 0.95);color:var(--tab-active-color, var(--color-primary, #3b82f6));opacity:1;font-weight:600;box-shadow:0 4px 12px rgba(0, 0, 0, 0.08)}.tabs-variant-folder.sc-ui-tabs .tabs-header-wrapper.sc-ui-tabs{background:transparent;padding:0 16px;align-items:flex-end;border-bottom:none;gap:0}.tabs-variant-folder.sc-ui-tabs .tab-header.sc-ui-tabs{background:color-mix(in srgb, var(--tab-label-color) 10%, transparent);color:var(--tab-label-color);opacity:0.65;padding:12px 24px;margin-right:4px;border-radius:12px 12px 0 0;border:none;position:relative;transition:all 0.2s ease;font-weight:500;box-shadow:inset 0 -2px 4px rgba(0, 0, 0, 0.05)}.tabs-variant-folder.sc-ui-tabs .tab-header.sc-ui-tabs::before,.tabs-variant-folder.sc-ui-tabs .tab-header.sc-ui-tabs::after{content:"";position:absolute;bottom:0;width:12px;height:12px;background:transparent;pointer-events:none;display:none}.tabs-variant-folder.sc-ui-tabs .tab-header-active.sc-ui-tabs{background:var(--tab-active-color, var(--color-primary, #f59e0b));color:var(--text-standard, #ffffff);opacity:1;z-index:10;box-shadow:0 -4px 12px rgba(0, 0, 0, 0.14)}.tabs-variant-folder.sc-ui-tabs .tab-header-active.sc-ui-tabs::before{display:block;left:-12px;border-bottom-right-radius:12px;box-shadow:6px 0 0 0 var(--tab-active-color, var(--color-warning, #f59e0b))}.tabs-variant-folder.sc-ui-tabs .tab-header-active.sc-ui-tabs::after{display:block;right:-12px;border-bottom-left-radius:12px;box-shadow:-6px 0 0 0 var(--tab-active-color, var(--color-warning, #f59e0b))}.tabs-variant-slanted.sc-ui-tabs .tabs-header-wrapper.sc-ui-tabs{background:var(--bg-secondary, #f1f5f9);padding:10px 10px 0;border-bottom:2px solid var(--border-subtle, #e2e8f0)}.tabs-variant-slanted.sc-ui-tabs .tab-header.sc-ui-tabs{padding:12px 32px;background:color-mix(in srgb, var(--tab-label-color) 8%, transparent);color:var(--tab-label-color);opacity:0.6;margin-right:-12px;font-weight:600;text-transform:uppercase;font-size:12px;letter-spacing:0.05em;clip-path:polygon(15px 0, 100% 0, calc(100% - 15px) 100%, 0 100%);transition:all 0.3s ease}.tabs-variant-slanted.sc-ui-tabs .tab-header.sc-ui-tabs:hover:not(.tab-header-active){background:color-mix(in srgb, var(--tab-label-color) 16%, transparent);color:var(--tab-label-color);opacity:0.85}.tabs-variant-slanted.sc-ui-tabs .tab-header-active.sc-ui-tabs{background:var(--tab-active-color, var(--bg-inverted, #1e293b));color:var(--text-standard, #ffffff);opacity:1;z-index:5;transform:scale(1.05);box-shadow:0 4px 15px rgba(0, 0, 0, 0.2)}.tabs-variant-minimal.sc-ui-tabs .tabs-header-wrapper.sc-ui-tabs{background:transparent;border-bottom:1px solid rgba(255, 255, 255, 0.1)}.tabs-variant-minimal.sc-ui-tabs .tab-header.sc-ui-tabs{padding:16px 24px;color:var(--tab-label-color);opacity:0.55;font-weight:500;transition:color 0.3s ease, opacity 0.25s ease}.tabs-variant-minimal.sc-ui-tabs .tab-header.sc-ui-tabs:hover:not(.tab-header-active){opacity:0.8}.tabs-variant-minimal.sc-ui-tabs .tab-header-active.sc-ui-tabs{color:var(--tab-active-color, var(--tab-label-color));opacity:1}.tabs-variant-minimal.sc-ui-tabs .tab-selection-indicator.sc-ui-tabs{height:3px;bottom:0;top:auto;border-radius:3px 3px 0 0;background:var(--tab-indicator-bg);box-shadow:0 -2px 12px var(--tab-active-color, var(--tab-pink));opacity:1}.indicator-top.tabs-variant-minimal.sc-ui-tabs .tab-selection-indicator.sc-ui-tabs{border-radius:0 0 3px 3px;bottom:auto;top:0;box-shadow:0 2px 12px var(--tab-active-color, var(--tab-pink))}.indicator-style-capsule.sc-ui-tabs .tab-selection-indicator.sc-ui-tabs{height:6px !important;border-radius:6px !important;box-shadow:0 -2px 12px -2px var(--tab-active-color, var(--tab-pink))}.indicator-top.indicator-style-capsule.sc-ui-tabs .tab-selection-indicator.sc-ui-tabs{border-radius:6px !important;box-shadow:0 2px 12px -2px var(--tab-active-color, var(--tab-pink))}.tabs-vertical.indicator-style-capsule.sc-ui-tabs .tab-selection-indicator.sc-ui-tabs{width:6px !important;border-radius:6px !important;box-shadow:-2px 0 12px -2px var(--tab-active-color, var(--tab-pink))}.indicator-style-dot.sc-ui-tabs .tab-selection-indicator.sc-ui-tabs{height:6px !important;transform-origin:bottom center !important}.indicator-style-dot.sc-ui-tabs .tab-selection-indicator.sc-ui-tabs::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:var(--tab-active-color, var(--tab-pink));box-shadow:0 0 8px 2px var(--tab-active-color, var(--tab-pink))}.indicator-style-dot.sc-ui-tabs .tab-selection-indicator.sc-ui-tabs{background:transparent !important;box-shadow:none !important;height:8px !important;border-radius:0 !important}.indicator-top.indicator-style-dot.sc-ui-tabs .tab-selection-indicator.sc-ui-tabs::after{bottom:auto;top:0;transform:translate(-50%, 0)}.indicator-style-glow.sc-ui-tabs .tab-selection-indicator.sc-ui-tabs{height:4px !important;border-radius:4px !important;filter:blur(1px);box-shadow:0 0 8px 3px var(--tab-active-color, var(--tab-pink)), 0 0 20px 6px color-mix(in srgb, var(--tab-active-color, var(--tab-pink)) 50%, transparent) !important}.tabs-vertical.indicator-style-glow.sc-ui-tabs .tab-selection-indicator.sc-ui-tabs{width:4px !important;filter:blur(1px);box-shadow:0 0 8px 3px var(--tab-active-color, var(--tab-pink)), 0 0 20px 6px color-mix(in srgb, var(--tab-active-color, var(--tab-pink)) 50%, transparent) !important}.indicator-style-bold.sc-ui-tabs .tab-selection-indicator.sc-ui-tabs{height:8px !important;border-radius:8px 8px 0 0 !important;box-shadow:0 -3px 14px -2px var(--tab-active-color, var(--tab-pink))}.indicator-top.indicator-style-bold.sc-ui-tabs .tab-selection-indicator.sc-ui-tabs{border-radius:0 0 8px 8px !important;box-shadow:0 3px 14px -2px var(--tab-active-color, var(--tab-pink))}.tabs-vertical.indicator-style-bold.sc-ui-tabs .tab-selection-indicator.sc-ui-tabs{width:8px !important;border-radius:8px 0 0 8px !important;box-shadow:-3px 0 14px -2px var(--tab-active-color, var(--tab-pink))}.indicator-style-none.sc-ui-tabs .tab-selection-indicator.sc-ui-tabs{display:none !important}.tabs-variant-elastic.sc-ui-tabs .tabs-header-wrapper.sc-ui-tabs{background:var(--bg-primary, #ffffff);padding:8px;border-radius:999px;border:1px solid var(--border-subtle, #e2e8f0);box-shadow:0 8px 30px rgba(0, 0, 0, 0.05);display:inline-flex;gap:0;align-self:center}.tabs-variant-elastic.sc-ui-tabs .tab-header.sc-ui-tabs{padding:10px 24px;border-radius:999px;color:var(--tab-label-color);opacity:0.55;font-weight:600;z-index:10;transition:color 0.3s ease;font-size:13px;text-transform:uppercase;letter-spacing:0.05em}.tabs-variant-elastic.sc-ui-tabs .tab-header-active.sc-ui-tabs{color:var(--text-standard, #ffffff);opacity:1}.tabs-variant-elastic.sc-ui-tabs .tab-selection-indicator.sc-ui-tabs{height:calc(100% - 16px) !important;top:8px;border-radius:999px;background:var(--tab-indicator-bg);box-shadow:0 6px 20px rgba(var(--color-primary-rgb, 59, 130, 246), 0.4);z-index:5;transition:transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.3s ease}.tabs-variant-sidebar.tabs-vertical.sc-ui-tabs .tabs-header-wrapper.sc-ui-tabs{background:var(--color-success, #22c55e);border-right:none;padding:24px 12px;width:80px;flex-shrink:0;display:flex;flex-direction:column;gap:32px}.tabs-variant-sidebar.tabs-vertical.sc-ui-tabs .tab-header.sc-ui-tabs{width:48px;height:48px;min-width:48px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(255, 255, 255, 0.2);color:var(--text-standard, #ffffff);padding:0;margin:0 auto;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1)}.tabs-variant-sidebar.tabs-vertical.sc-ui-tabs .tab-header.sc-ui-tabs:hover:not(.tab-header-active){background:rgba(255, 255, 255, 0.3);transform:scale(1.1)}.tabs-variant-sidebar.tabs-vertical.sc-ui-tabs .tab-header-active.sc-ui-tabs{background:var(--bg-primary, #ffffff);color:var(--color-success, #22c55e);transform:scale(1.15);box-shadow:0 8px 25px rgba(0, 0, 0, 0.15)}.tabs-variant-sidebar.tabs-vertical.sc-ui-tabs .tab-icon.sc-ui-tabs{font-size:24px}.tabs-variant-sidebar.tabs-vertical.sc-ui-tabs .tab-title.sc-ui-tabs{display:none}.tab-selection-indicator.sc-ui-tabs{position:absolute;top:0;left:0;pointer-events:none;transition:transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1), height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, box-shadow 0.3s ease;opacity:0;z-index:5}.tab-header.sc-ui-tabs .tab-selection-indicator.sc-ui-tabs{opacity:1 !important}.tabs-variant-enclosed.sc-ui-tabs .tabs-header-wrapper.sc-ui-tabs{background:var(--bg-secondary, #f1f5f9);padding:6px;gap:4px;border-radius:12px;border:1px solid var(--border-subtle, #e2e8f0)}.tabs-variant-enclosed.sc-ui-tabs .tab-header.sc-ui-tabs{background:transparent;border-radius:9px;padding:12px 20px;color:var(--tab-label-color);opacity:0.6;border:none;flex-shrink:0;outline:none !important;font-weight:500;transition:all 0.2s ease}.tabs-variant-enclosed.sc-ui-tabs .tab-header.sc-ui-tabs:hover:not(.tab-header-active){background:rgba(128, 128, 128, 0.08);color:var(--tab-label-color);opacity:0.85}.tabs-variant-enclosed.sc-ui-tabs .tab-header-active.sc-ui-tabs{background:var(--bg-primary, #ffffff);color:var(--tab-active-color, var(--tab-text-primary));opacity:1;font-weight:600;box-shadow:0 2px 6px rgba(0, 0, 0, 0.08)}.tabs-size-xs.sc-ui-tabs .tab-header.sc-ui-tabs{padding:4px 10px;font-size:11px;min-height:28px;gap:4px}.tabs-size-xs.sc-ui-tabs .tab-icon.sc-ui-tabs{font-size:12px}.tabs-size-sm.sc-ui-tabs .tab-header.sc-ui-tabs{padding:6px 12px;font-size:12px;min-height:32px}.tabs-size-md.sc-ui-tabs .tab-header.sc-ui-tabs{padding:10px 18px;font-size:14px;min-height:40px}.tabs-size-lg.sc-ui-tabs .tab-header.sc-ui-tabs{padding:14px 24px;font-size:15px;font-weight:500;min-height:48px}.tabs-size-xl.sc-ui-tabs .tab-header.sc-ui-tabs{padding:18px 32px;font-size:16px;font-weight:500;min-height:56px;letter-spacing:0.01em}.tabs-size-xs.sc-ui-tabs .tab-icon.sc-ui-tabs{font-size:12px}.tabs-size-sm.sc-ui-tabs .tab-icon.sc-ui-tabs{font-size:14px}.tabs-size-md.sc-ui-tabs .tab-icon.sc-ui-tabs{font-size:15px}.tabs-size-lg.sc-ui-tabs .tab-icon.sc-ui-tabs{font-size:18px}.tabs-size-xl.sc-ui-tabs .tab-icon.sc-ui-tabs{font-size:20px}.tabs-size-xs.sc-ui-tabs .tab-badge.sc-ui-tabs{font-size:9px;padding:1px 4px;min-width:14px;height:14px}.tabs-size-sm.sc-ui-tabs .tab-badge.sc-ui-tabs{font-size:10px;padding:1px 5px;min-width:16px;height:16px}.tabs-size-xl.sc-ui-tabs .tab-badge.sc-ui-tabs{font-size:12px;padding:3px 8px;min-width:20px;height:20px}.tabs-vertical.sc-ui-tabs .tabs-header-wrapper.sc-ui-tabs{flex-direction:column;border-bottom:none;border-right:1px solid var(--border-color, var(--tab-border));align-items:stretch;overflow:visible;max-height:100%;height:100%}.tab-title.sc-ui-tabs{flex:1;white-space:nowrap !important;overflow:hidden;text-overflow:ellipsis;max-width:240px}.tabs-header.sc-ui-tabs{display:flex;flex:1;overflow:visible;flex-wrap:nowrap;position:relative}.tabs-scrollable.sc-ui-tabs .tabs-header.sc-ui-tabs{overflow-x:auto;overflow-y:visible;scrollbar-width:none;align-items:flex-end;scroll-behavior:smooth}.tabs-scrollable.sc-ui-tabs .tabs-header.sc-ui-tabs::-webkit-scrollbar{display:none}.scroll-button.sc-ui-tabs{z-index:20;background:var(--bg-primary, #ffffff);border:1px solid var(--border-subtle, #e2e8f0);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;width:34px;height:34px;min-width:34px;transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);color:var(--text-muted, #64748b);margin:0 6px;box-shadow:0 2px 6px rgba(0, 0, 0, 0.08);font-size:20px;font-weight:600}.scroll-button.sc-ui-tabs:hover{background:var(--tab-pink-light);color:var(--tab-pink);border-color:var(--tab-pink);transform:scale(1.08);box-shadow:0 4px 12px rgba(236, 72, 153, 0.25)}.scroll-button.sc-ui-tabs:active{transform:scale(0.95)}.tabs-vertical.sc-ui-tabs .scroll-button.sc-ui-tabs{margin:6px 0;width:100%;min-width:auto;border-radius:6px}.tabs-vertical.sc-ui-tabs .scroll-button.scroll-up.sc-ui-tabs,.tabs-vertical.sc-ui-tabs .scroll-button.scroll-down.sc-ui-tabs{height:32px;width:100%;border-radius:6px;font-size:12px}.tabs-content.sc-ui-tabs{flex:1;position:relative;background-color:var(--content-bg, var(--bg-primary, var(--text-standard, #ffffff)));padding:0;z-index:1}.tab-content.sc-ui-tabs{display:none;padding:28px;animation-fill-mode:both}.tab-content-active.sc-ui-tabs{display:block}.tab-header-content.sc-ui-tabs{display:flex;align-items:center;gap:10px}.tab-icon.sc-ui-tabs{font-size:18px;display:inline-flex;opacity:0.9}.tab-header-active.sc-ui-tabs .tab-icon.sc-ui-tabs{opacity:1}.tab-badge.sc-ui-tabs{background-color:var(--tab-pink);color:var(--text-standard, #ffffff);padding:3px 10px;border-radius:14px;font-size:11px;line-height:1.5;font-weight:600;min-width:22px;text-align:center;transition:all 0.2s ease;box-shadow:0 2px 4px rgba(0, 0, 0, 0.15)}.tab-badge.badge-neutral.sc-ui-tabs{background-color:var(--bg-secondary, #f1f5f9);color:var(--text-muted, #64748b);box-shadow:none}.tab-badge.badge-primary.sc-ui-tabs{background-color:var(--tab-blue);color:var(--text-standard, #ffffff)}.tab-badge.badge-success.sc-ui-tabs{background-color:var(--tab-teal);color:var(--text-standard, #ffffff)}.tab-badge.badge-warning.sc-ui-tabs{background-color:var(--color-warning, #f59e0b);color:var(--text-standard, #ffffff)}.tab-close.sc-ui-tabs{margin-left:8px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:none;background:transparent;cursor:pointer;color:var(--color-primary, #94a3b8);padding:0;transition:all 0.2s ease;font-size:18px;line-height:1}.tab-close.sc-ui-tabs:hover{background:rgba(var(--color-danger-rgb, 239, 68, 68), 0.12);color:var(--color-danger, #ef4444);transform:scale(1.15)}.tab-close-all.sc-ui-tabs{color:var(--color-primary, #94a3b8);background:transparent;border:none;cursor:pointer;padding:10px;border-radius:10px;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center}.tab-close-all.sc-ui-tabs:hover{background:rgba(var(--color-danger-rgb, 239, 68, 68), 0.12);color:var(--color-danger, #ef4444)}.tab-close-all.sc-ui-tabs svg.sc-ui-tabs{width:18px;height:18px}.tab-list-button.sc-ui-tabs{background:transparent;border:none;cursor:pointer;color:var(--text-secondary, var(--text-muted, #64748b));padding:10px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease;margin-right:6px}.tab-list-button.sc-ui-tabs:hover{background:rgba(236, 72, 153, 0.1);color:var(--tab-pink)}.tab-list-dropdown.sc-ui-tabs{position:fixed;background:var(--bg-primary, #ffffff);min-width:240px;max-width:340px;overflow-y:auto;border-radius:14px;box-shadow:0 12px 48px rgba(0, 0, 0, 0.14), 0 4px 16px rgba(0, 0, 0, 0.1);border:1px solid rgba(0, 0, 0, 0.05);z-index:1000;padding:8px;animation:dropdownSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);transform-origin:top right;display:flex;flex-direction:column}.tab-list-header.sc-ui-tabs{display:flex;align-items:center;justify-content:space-between;padding:6px 14px 10px;border-bottom:1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));margin-bottom:4px}.tab-list-header-title.sc-ui-tabs{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted, #94a3b8)}.tab-list-header-count.sc-ui-tabs{font-size:11px;font-weight:600;padding:1px 8px;border-radius:20px;background:var(--bg-secondary, #f1f5f9);color:var(--text-muted, #64748b)}.tab-list-search.sc-ui-tabs{padding:8px 10px 4px}.tab-list-active-check.sc-ui-tabs{display:inline-flex;align-items:center;margin-left:auto;flex-shrink:0;color:var(--tab-pink, var(--color-primary, #ec4899));opacity:0.9}.tab-list-item.sc-ui-tabs{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 14px;background:transparent;border:none;border-radius:10px;cursor:pointer;font-size:14px;color:var(--color-primary, #334155);transition:all 0.2s ease;font-weight:500}.tab-list-item.sc-ui-tabs:hover{background:var(--bg-primary, #f8fafc);color:var(--text-primary, #0f172a);transform:translateX(4px)}.tab-list-item.active.sc-ui-tabs{background:linear-gradient(135deg, rgba(236, 72, 153, 0.12) 0%, rgba(168, 85, 247, 0.12) 100%);color:var(--tab-pink);font-weight:600}.tab-list-icon.sc-ui-tabs{font-size:20px;display:inline-flex;opacity:0.9}.tab-list-item.active.sc-ui-tabs .tab-list-icon.sc-ui-tabs{opacity:1}.tab-list-title.sc-ui-tabs{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tab-list-badge.sc-ui-tabs{background:var(--bg-secondary, #f1f5f9);color:var(--text-muted, #64748b);padding:3px 10px;border-radius:14px;font-size:11px;font-weight:600}.tab-list-item.active.sc-ui-tabs .tab-list-badge.sc-ui-tabs{background:var(--tab-pink);color:var(--text-standard, #ffffff)}.tab-actions.sc-ui-tabs{position:relative;display:flex;align-items:center;z-index:10}.tab-actions.active.sc-ui-tabs{z-index:9998}.tab-menu.sc-ui-tabs{width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:8px;border:none;background:transparent;cursor:pointer;color:var(--text-secondary, #94a3b8);font-weight:bold;line-height:1;padding:0;transition:all 0.2s ease;font-size:16px}.tab-menu.sc-ui-tabs:hover,.tab-actions.active.sc-ui-tabs .tab-menu.sc-ui-tabs{background:rgba(0, 0, 0, 0.06);color:var(--text-primary, #1e293b)}.tab-menu-popover.sc-ui-tabs{position:absolute;top:100%;margin-top:8px;background:var(--bg-primary, #ffffff);min-width:180px;border-radius:12px;box-shadow:0 12px 48px rgba(0, 0, 0, 0.14), 0 4px 16px rgba(0, 0, 0, 0.1);border:1px solid rgba(0, 0, 0, 0.05);z-index:9999;padding:8px;display:flex;flex-direction:column;animation:dropdownSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);transform-origin:top right}.tab-menu-item.sc-ui-tabs{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:8px 12px;background:transparent;border:none;border-radius:9px;cursor:pointer;font-size:14px;color:var(--color-primary, #334155);transition:all 0.2s ease;white-space:nowrap;font-weight:500}.tab-menu-item.sc-ui-tabs:hover{background:var(--bg-secondary, #f1f5f9);color:var(--text-primary, #0f172a)}.tab-menu-item.danger.sc-ui-tabs{color:var(--color-danger, #ef4444)}.tab-menu-item.danger.sc-ui-tabs:hover{background:var(--bg-primary, #fef2f2)}.menu-icon.sc-ui-tabs{font-size:15px;width:18px;display:inline-flex;justify-content:center;opacity:0.9}.menu-divider.sc-ui-tabs{height:1px;background:var(--bg-primary, #e2e8f0);margin:6px 0}@keyframes dropdownSlideIn{from{opacity:0;transform:scale(0.96) translateY(-6px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes slideDown{from{opacity:0;margin-top:-8px}to{opacity:1;margin-top:0}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes scaleIn{from{opacity:0}to{opacity:1}}.animation-slide.tab-content-active.sc-ui-tabs{animation:slideDown 0.35s cubic-bezier(0.4, 0, 0.2, 1)}.animation-fade.tab-content-active.sc-ui-tabs{animation:fadeIn 0.35s ease}.animation-scale.tab-content-active.sc-ui-tabs{animation:scaleIn 0.35s cubic-bezier(0.4, 0, 0.2, 1)}.tab-header-disabled.sc-ui-tabs{opacity:0.4;cursor:not-allowed;pointer-events:none}.tabs-vertical.tabs-variant-pill.sc-ui-tabs .tabs-header-wrapper.sc-ui-tabs{gap:10px;padding:12px;border-right:none}.tabs-vertical.tabs-variant-pill.sc-ui-tabs .tab-header.sc-ui-tabs{width:100%}@media (max-width: 640px){.tab-header.sc-ui-tabs{padding:10px 14px;font-size:13px}.tabs-size-lg.sc-ui-tabs .tab-header.sc-ui-tabs{padding:12px 18px;font-size:14px}}.tab-edit-input.sc-ui-tabs{background:var(--bg-primary, #ffffff);border:1px solid var(--color-primary, #1890ff);border-radius:4px;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;padding:2px 4px;width:100%;max-width:200px;outline:none;box-shadow:0 0 0 2px rgba(24, 144, 255, 0.2)}.tabs-container[aria-orientation=vertical].sc-ui-tabs .tab-edit-input.sc-ui-tabs{max-width:none}'}},[774,"ui-tabs",{items:[1],defaultActive:[1,"default-active"],animationDuration:[2,"animation-duration"],orientation:[1],indicatorPosition:[1,"indicator-position"],showCloseAll:[4,"show-close-all"],showTabList:[4,"show-tab-list"],maxTabWidth:[2,"max-tab-width"],maxTitleLength:[2,"max-title-length"],wrapText:[4,"wrap-text"],position:[1],scrollMode:[1,"scroll-mode"],selectionAnimation:[1,"selection-animation"],iconPosition:[1,"icon-position"],iconOnly:[4,"icon-only"],scrollButtonPlacement:[1,"scroll-button-placement"],variant:[1],activeColor:[1,"active-color"],indicatorStyle:[1,"indicator-style"],indicatorGradient:[1,"indicator-gradient"],size:[1],iconLibrary:[1,"icon-library"],lazy:[4],isDraggable:[4,"is-draggable"],activeTab:[32],parsedItems:[32],activeMenuTab:[32],showScrollButtons:[32],isTabListOpen:[32],tabListPosition:[32],tabListSearch:[32],activeMenuPosition:[32],editingTab:[32],draggingTabId:[32],selectTabById:[64],getActiveTab:[64],destroyComponent:[64]},[[8,"keydown","handleKeyDown"],[11,"scroll","handleScroll"],[9,"resize","handleScroll"],[8,"click","handleWindowClick"]],{items:[{parseItems:0}],defaultActive:[{onDefaultActiveChange:0}],activeTab:[{onActiveTabChange:0}]}]),h=p,u=function(){"undefined"!=typeof customElements&&["ui-tabs","ui-badge","ui-button","ui-icon","ui-input"].forEach((t=>{switch(t){case"ui-tabs":customElements.get(e(t))||customElements.define(e(t),p);break;case"ui-badge":customElements.get(e(t))||l();break;case"ui-button":customElements.get(e(t))||c();break;case"ui-icon":customElements.get(e(t))||b();break;case"ui-input":customElements.get(e(t))||d()}}))};export{h as UiTabs,u as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as a,createEvent as i,h as s,transformTag as e}from"@stencil/core/internal/client";import{c as r,g as o}from"./dom.js";import{s as n,d as b}from"./icon.js";import{d as c,a as l}from"./badge.js";import{d}from"./input.js";import{d as p}from"./loader.js";const h=t(class extends a{constructor(t){super(),!1!==t&&this.__registerHost(),this.tabChange=i(this,"tabChange",7),this.tabClose=i(this,"tabClose",7),this.closeAll=i(this,"closeAll",7),this.tabEdit=i(this,"tabEdit",7),this.tabDelete=i(this,"tabDelete",7),this.tabOpenPanel=i(this,"tabOpenPanel",7),this.tabsReordered=i(this,"tabsReordered",7),this.tabUpdate=i(this,"tabUpdate",7)}get element(){return this}items=[];defaultActive="";animationDuration=300;orientation="horizontal";indicatorPosition="bottom";showCloseAll=!1;showTabList=!1;maxTabWidth=300;maxTitleLength=24;wrapText=!1;position="left";scrollMode="manual";selectionAnimation="slide";iconPosition="left";iconOnly=!1;scrollButtonPlacement="split";variant="line";activeColor="";indicatorStyle="line";indicatorGradient="";size="md";iconLibrary="default";lazy=!1;isDraggable=!1;activeTab="";parsedItems=[];activeMenuTab=null;showScrollButtons=!1;isTabListOpen=!1;tabListPosition=null;tabListSearch="";activeMenuPosition=null;editingTab=null;draggingTabId=null;tabListTrigger;activeMenuTrigger;_mountedTabs=new Set;tabChange;tabClose;closeAll;tabEdit;tabDelete;tabOpenPanel;tabsReordered;tabUpdate;tabsHeaderRef;indicatorRef;resizeObserver;parseItems(t){if("string"==typeof t)try{this.parsedItems=JSON.parse(t)}catch(t){console.error("Invalid JSON for tab items:",t),this.parsedItems=[]}else this.parsedItems=[...t];!this.activeTab&&this.parsedItems.length>0&&(this.activeTab=this.defaultActive||this.parsedItems[0].id),setTimeout((()=>this.updateIndicator()),0)}onDefaultActiveChange(t){t&&this.parsedItems.some((a=>a.id===t))&&(this.activeTab=t,this.updateIndicator())}onActiveTabChange(){this.updateIndicator()}componentWillLoad(){this.parseItems(this.items),this.activeTab=this.defaultActive||(this.parsedItems.length>0?this.parsedItems[0].id:"")}componentDidLoad(){this.checkScrollButtons(),"auto"===this.scrollMode&&this.scrollToActiveTab(),setTimeout((()=>{this.checkScrollButtons()}),100),this.resizeObserver=new ResizeObserver((()=>{this.checkScrollButtons()})),this.element&&this.resizeObserver.observe(this.element),this.tabsHeaderRef&&this.resizeObserver.observe(this.tabsHeaderRef),requestAnimationFrame((()=>this.updateIndicator()))}disconnectedCallback(){this.resizeObserver&&this.resizeObserver.disconnect()}componentDidUpdate(){"auto"===this.scrollMode&&this.scrollToActiveTab(),this.checkScrollButtons(),this.updateIndicator()}handleKeyDown(t){if(!this.element.contains(t.target))return;const a=t.target.closest(".tab-header");if(!a)return;const i=a.getAttribute("data-id");if(i)switch(t.key){case"Enter":case" ":t.preventDefault(),this.selectTab(i);break;case"ArrowRight":"horizontal"===this.orientation&&(t.preventDefault(),this.focusNextTab(i));break;case"ArrowLeft":"horizontal"===this.orientation&&(t.preventDefault(),this.focusPreviousTab(i));break;case"ArrowDown":"vertical"===this.orientation&&(t.preventDefault(),this.focusNextTab(i));break;case"ArrowUp":"vertical"===this.orientation&&(t.preventDefault(),this.focusPreviousTab(i));break;case"Home":t.preventDefault(),this.focusFirstTab();break;case"End":t.preventDefault(),this.focusLastTab()}}handleScroll(){(this.isTabListOpen||this.activeMenuTab)&&this.recalculateDropdownPositions()}recalculateDropdownPositions(){requestAnimationFrame((()=>{if(this.isTabListOpen&&this.tabListTrigger){const t=r(this.tabListTrigger,{menuWidth:300,menuHeight:400,gap:6,placement:"auto",align:"end",padding:10,useTransformedAncestorOffset:!1});this.tabListPosition={x:t.left,y:t.top??0,width:Math.min(340,Math.max(240,2*this.tabListTrigger.getBoundingClientRect().width)),maxHeight:Math.min(420,t.availableHeight)}}if(this.activeMenuTab&&this.activeMenuTrigger){const t=r(this.activeMenuTrigger,{menuWidth:180,menuHeight:200,gap:4,placement:"bottom",align:"end"});this.activeMenuPosition={x:t.left,y:t.top??0}}}))}handleWindowClick(t){const a=t.target;this.activeMenuTab&&(a.closest(".tab-actions")||(this.activeMenuTab=null)),this.isTabListOpen&&(a.closest(".tab-list-wrapper")||(this.isTabListOpen=!1,this.tabListSearch=""))}toggleMenu(t,a){if(a.stopPropagation(),this.activeMenuTab===t)this.activeMenuTab=null,this.activeMenuPosition=null,this.activeMenuTrigger=void 0;else{this.activeMenuTrigger=a.currentTarget;const i=this.activeMenuTrigger.getBoundingClientRect(),s=o(this.element);this.activeMenuTab=t,this.activeMenuPosition={x:i.right-s.x,y:i.bottom-s.y+4}}}toggleTabList(t){if(t.stopPropagation(),this.tabListSearch="",this.isTabListOpen=!this.isTabListOpen,this.isTabListOpen){this.tabListTrigger=t.currentTarget;const a=r(this.tabListTrigger,{menuWidth:300,menuHeight:400,gap:6,placement:"auto",align:"end",padding:10,useTransformedAncestorOffset:!1});this.tabListPosition={x:a.left,y:a.top??0,width:Math.min(340,Math.max(240,2*this.tabListTrigger.getBoundingClientRect().width)),maxHeight:Math.min(420,a.availableHeight)}}else this.tabListPosition=null,this.tabListTrigger=void 0}selectTab(t){const a=this.parsedItems.find((a=>a.id===t));if(a?.disabled)return;const i=this.activeTab;this.activeTab=t,this.tabChange.emit({tabId:i,activeTab:t}),this.isTabListOpen=!1,requestAnimationFrame((()=>{const a=this.element.querySelector(`[data-id="${t}"]`);a&&a.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"})}))}handleCloseTab(t,a){a.stopPropagation();const i=this.parsedItems.findIndex((a=>a.id===t));-1!==i&&(this.activeTab===t&&this.parsedItems.length>1&&(this.activeTab=this.parsedItems[i<this.parsedItems.length-1?i:i-1].id),this.parsedItems=this.parsedItems.filter((a=>a.id!==t)),this.tabClose.emit(t))}focusNextTab(t){const a=this.parsedItems.findIndex((a=>a.id===t));this.focusTab(this.parsedItems[(a+1)%this.parsedItems.length].id)}focusPreviousTab(t){const a=this.parsedItems.findIndex((a=>a.id===t));this.focusTab(this.parsedItems[0===a?this.parsedItems.length-1:a-1].id)}focusFirstTab(){this.parsedItems.length>0&&this.focusTab(this.parsedItems[0].id)}focusLastTab(){this.parsedItems.length>0&&this.focusTab(this.parsedItems[this.parsedItems.length-1].id)}focusTab(t){const a=this.element.querySelector(`[data-id="${t}"]`);a&&a.focus()}handleDragStart=(t,a)=>{this.isDraggable&&(this.draggingTabId=a,t.dataTransfer&&(t.dataTransfer.effectAllowed="move",t.dataTransfer.setData("text/plain",a)))};handleDragOver=t=>{this.isDraggable&&(t.preventDefault(),t.dataTransfer&&(t.dataTransfer.dropEffect="move"))};handleDrop=(t,a)=>{if(!this.isDraggable||!this.draggingTabId||this.draggingTabId===a)return;t.preventDefault();const i=[...this.parsedItems],s=i.findIndex((t=>t.id===this.draggingTabId)),e=i.findIndex((t=>t.id===a));if(-1!==s&&-1!==e){const[t]=i.splice(s,1);i.splice(e,0,t),this.parsedItems=i,this.tabsReordered.emit(this.parsedItems)}this.draggingTabId=null};startEditing(t){this.editingTab=t,setTimeout((()=>{const t=this.element.querySelector(".tab-edit-input");t&&(t.focus(),t.select())}),50)}commitEdit(t,a){a.trim()&&(this.parsedItems=this.parsedItems.map((i=>i.id===t?{...i,title:a}:i)),this.tabUpdate.emit({id:t,title:a})),this.editingTab=null}scrollToActiveTab(){if(!this.tabsHeaderRef||"none"===this.scrollMode)return;const t=this.element.querySelector(".tab-header-active");if(t&&"horizontal"===this.orientation){const a=this.tabsHeaderRef.getBoundingClientRect(),i=t.getBoundingClientRect(),s=this.tabsHeaderRef.scrollLeft;i.left<a.left?this.tabsHeaderRef.scrollLeft=s-(a.left-i.left)-20:i.right>a.right&&(this.tabsHeaderRef.scrollLeft=s+(i.right-a.right)+20)}}checkScrollButtons(){this.showScrollButtons=!(!this.tabsHeaderRef||"none"===this.scrollMode)&&("horizontal"===this.orientation?this.tabsHeaderRef.scrollWidth>this.tabsHeaderRef.clientWidth+2:this.tabsHeaderRef.scrollHeight>this.tabsHeaderRef.clientHeight+2||this.parsedItems.length>8)}scrollTabs(t){if(!this.tabsHeaderRef)return;const a=200;"left"===t?this.tabsHeaderRef.scrollLeft-=a:"right"===t?this.tabsHeaderRef.scrollLeft+=a:"top"===t?this.tabsHeaderRef.scrollTop-=a:"bottom"===t&&(this.tabsHeaderRef.scrollTop+=a),this.updateIndicator()}updateIndicator(){if(!this.indicatorRef||!this.tabsHeaderRef)return;const t=this.element.querySelector(".tab-header-active");if(!t)return void(this.indicatorRef.style.opacity="0");const a=this.tabsHeaderRef.getBoundingClientRect(),i=t.getBoundingClientRect();"horizontal"===this.orientation?(this.indicatorRef.style.transform=`translateX(${i.left-a.left+this.tabsHeaderRef.scrollLeft}px)`,this.indicatorRef.style.width=i.width+"px",this.indicatorRef.style.height=""):(this.indicatorRef.style.transform=`translateY(${i.top-a.top+this.tabsHeaderRef.scrollTop}px)`,this.indicatorRef.style.height=i.height+"px",this.indicatorRef.style.width=""),this.indicatorRef.style.opacity="1"}async selectTabById(t){this.selectTab(t)}async getActiveTab(){return this.activeTab}async destroyComponent(){this.closeAll.emit(),this.parsedItems=[],this.activeTab="",this.element.remove()}handleCloseAll(t){t.stopPropagation(),this.destroyComponent()}renderTab(t){const a=this.activeTab===t.id,i=t.disabled||!1,e=this.activeMenuTab===t.id,r=["tab-header",a&&"tab-header-active",i&&"tab-header-disabled",this.iconOnly&&"tab-header-icon-only","icon-position-"+this.iconPosition,this.wrapText&&"tab-header-wrap"].filter(Boolean).join(" "),o={maxWidth:"full-width"!==this.position?this.maxTabWidth+"px":"none",...t.color&&a?{"--tab-active-color":t.color,"--tab-active-border":t.color}:{}};return s("div",{key:t.id,id:"tab-header-"+t.id,class:r,part:a?"tab tab-active":"tab","data-id":t.id,onClick:()=>this.selectTab(t.id),"aria-selected":a?"true":"false","aria-controls":"tab-content-"+t.id,"aria-label":`Select ${t.title} tab`,"aria-disabled":i?"true":"false",tabindex:i?-1:0,role:"tab",style:o,title:!this.iconOnly&&t.title&&t.title.length>this.maxTitleLength||this.iconOnly?t.title:void 0,draggable:this.isDraggable,onDragStart:a=>this.handleDragStart(a,t.id),onDragOver:this.handleDragOver,onDrop:a=>this.handleDrop(a,t.id),onKeyDown:a=>{"Enter"===a.key||" "===a.key?(a.preventDefault(),this.selectTab(t.id)):"ArrowRight"===a.key||"ArrowDown"===a.key?(a.preventDefault(),this.focusNextTab(t.id)):"ArrowLeft"===a.key||"ArrowUp"===a.key?(a.preventDefault(),this.focusPreviousTab(t.id)):"Home"===a.key?(a.preventDefault(),this.focusFirstTab()):"End"===a.key&&(a.preventDefault(),this.focusLastTab())},onDblClick:()=>this.startEditing(t.id)},s("div",{class:"tab-header-content"},t.icon&&s("span",{class:"tab-icon"},s("ui-icon",{name:t.icon,library:t.iconLibrary||this.iconLibrary,size:"1.2em"})),!this.iconOnly&&(this.editingTab===t.id?s("ui-input",{class:"tab-edit-input",value:t.title,onInputBlur:a=>this.commitEdit(t.id,a.detail.target.value),onInputKeydown:a=>{"Enter"===a.detail.key&&this.commitEdit(t.id,a.detail.target.value),"Escape"===a.detail.key&&(this.editingTab=null),a.detail.stopPropagation()},size:"sm",fullWidth:!0}):s("span",{class:"tab-title"},t.title)),null!=t.badge&&s("span",{class:"tab-badge "+(t.badgeVariant?"badge-"+t.badgeVariant:"")},t.badge),t.actions&&s("div",{class:"tab-actions "+(e?"active":"")},s("ui-button",{variant:"ghost",size:"sm",iconOnly:!0,icon:"more-horizontal",iconLibrary:this.iconLibrary,iconSize:"1.1em",ariaLabel:"Actions for "+t.title,ariaHasPopup:"true",ariaExpanded:e,onClick:a=>this.toggleMenu(t.id,a),class:"tab-menu"}),e&&s("div",{class:"tab-menu-popover",role:"menu",style:{position:"fixed",top:this.activeMenuPosition?.y+"px",left:this.activeMenuPosition?.x+"px",right:"auto",zIndex:"12000"}},s("ui-button",{variant:"ghost",size:"sm",fullWidth:!0,icon:"edit-2",iconLibrary:this.iconLibrary,label:"Edit",class:"tab-menu-item",onClick:a=>{a.stopPropagation(),this.tabEdit.emit(t.id),this.activeMenuTab=null},style:{justifyContent:"flex-start"}}),s("ui-button",{variant:"ghost",size:"sm",fullWidth:!0,icon:"file-text",iconLibrary:this.iconLibrary,label:"Detail",class:"tab-menu-item",onClick:a=>{a.stopPropagation(),this.tabOpenPanel.emit(t.id),this.activeMenuTab=null},style:{justifyContent:"flex-start"}}),s("div",{class:"menu-divider"}),s("ui-button",{variant:"ghost",size:"sm",fullWidth:!0,icon:"trash-2",iconLibrary:this.iconLibrary,label:"Delete",class:"tab-menu-item danger",onClick:a=>{a.stopPropagation(),this.tabDelete.emit(t.id),this.activeMenuTab=null},style:{justifyContent:"flex-start"}}))),t.closable&&s("ui-button",{variant:"ghost",size:"sm",iconOnly:!0,icon:"x",iconLibrary:this.iconLibrary,iconSize:"0.9em",onClick:a=>this.handleCloseTab(t.id,a),ariaLabel:`Close ${t.title} tab`,class:"tab-close"})))}renderContent(t){const a=this.activeTab===t.id;if(this.lazy&&!a&&!t.useSlot&&!this._mountedTabs.has(t.id))return null;a&&this._mountedTabs.add(t.id);const i=["tab-content",a&&"tab-content-active","animation-"+this.selectionAnimation].filter(Boolean).join(" ");return s("div",{key:t.id,class:i,id:"tab-content-"+t.id,"aria-labelledby":"tab-header-"+t.id,role:"tabpanel","aria-hidden":!a,style:{"--animation-duration":this.animationDuration+"ms"}},t.useSlot?s("div",{class:"tab-content-inner"},s("slot",{name:t.slot||t.id})):s("div",{class:"tab-content-inner",innerHTML:n(t.content??"")}))}render(){const t=["tabs-container","tabs-"+this.orientation,"tabs-position-"+this.position,"tabs-variant-"+this.variant,"tabs-size-"+this.size,"none"!==this.scrollMode&&"tabs-scrollable","buttons-"+this.scrollButtonPlacement,"indicator-"+this.indicatorPosition,"indicator-style-"+this.indicatorStyle].filter(Boolean).join(" "),a={};this.activeColor&&(a["--tab-active-color"]=this.activeColor),this.indicatorGradient?a["--tab-indicator-bg"]=this.indicatorGradient:this.activeColor&&(a["--tab-indicator-bg"]=this.activeColor);const i=["tabs-header-wrapper",this.showScrollButtons&&"none"!==this.scrollMode&&"show-scroll-buttons"].filter(Boolean).join(" "),e=this.showScrollButtons&&"none"!==this.scrollMode,r=this.showScrollButtons&&"none"!==this.scrollMode,o="vertical"===this.orientation,n=(t,a)=>s("ui-button",{key:"3c6fc7c093589854f1d872f28c2b4b3d384a569b",variant:"ghost",size:"sm",iconOnly:!0,class:"scroll-button scroll-"+t,onClick:()=>this.scrollTabs(t),ariaLabel:a,icon:"left"===t?"chevron-left":"right"===t?"chevron-right":"top"===t?"chevron-up":"chevron-down",iconLibrary:this.iconLibrary,iconSize:"1.2em"});return s("div",{key:"9414cddcf48432318ef220cb9a78afc9fb9cbbc7",class:t,style:Object.keys(a).length?a:void 0},s("div",{key:"d2e8880304c4003bdd30b90f2058898d7300222a",class:i},e&&("start"===this.scrollButtonPlacement||"split"===this.scrollButtonPlacement)&&(o?n("top","Scroll up"):n("left","Scroll left")),r&&"start"===this.scrollButtonPlacement&&(o?n("bottom","Scroll down"):n("right","Scroll right")),s("div",{key:"96488ce3447e393501fa7932b37241a804ef279a",class:"tabs-header",part:"tabs-header",ref:t=>this.tabsHeaderRef=t,role:"tablist","aria-orientation":this.orientation},this.parsedItems.map((t=>this.renderTab(t))),s("div",{key:"1bd98d7bcadff9975741640c301f109124c1881a",class:"tab-selection-indicator",part:"indicator",ref:t=>this.indicatorRef=t})),e&&"end"===this.scrollButtonPlacement&&(o?n("top","Scroll up"):n("left","Scroll left")),r&&("end"===this.scrollButtonPlacement||"split"===this.scrollButtonPlacement)&&(o?n("bottom","Scroll down"):n("right","Scroll right")),s("div",{key:"21bfeb334606ab5dd1ae16295062dce602ac9eb6",class:"tabs-controls-group",style:{display:"flex",alignItems:"center",marginLeft:"auto",paddingLeft:"8px"}},(this.showTabList||this.showCloseAll)&&s("div",{key:"f020d74400afecbfe455adf44ab017ca272cbefe",class:"tab-list-wrapper"},s("ui-button",{key:"128b8b541c450be82d6815a165e1b8f8cb66cf52",variant:"ghost",size:"sm",iconOnly:!0,icon:"list",iconLibrary:this.iconLibrary,iconSize:"1em",onClick:t=>this.toggleTabList(t),ariaLabel:"List all tabs",ariaHasPopup:"true",ariaExpanded:this.isTabListOpen,title:"List All Tabs",class:"tab-list-button"}),this.isTabListOpen&&s("div",{key:"b55c7b805f2a1da631a5a77bda9807217f3a96fb",class:"tab-list-dropdown",style:{position:"fixed",top:this.tabListPosition?.y+"px",left:this.tabListPosition?.x+"px",width:this.tabListPosition?.width+"px",maxHeight:(this.tabListPosition?.maxHeight??420)+"px",zIndex:"12000"}},s("div",{key:"5032f2519eab9a4332e0686e2ce9ea37aa58f2ad",class:"tab-list-header"},s("span",{key:"907eaf22e72a92147a2937a7530f37c5941d24e8",class:"tab-list-header-title"},"Open Tabs"),s("span",{key:"3508efb55c24109536772a648a7364f7ada8289b",class:"tab-list-header-count"},this.parsedItems.length)),s("div",{key:"eea1f858f13dd780d5ed518079a915df070cb655",class:"tab-list-search",onClick:t=>t.stopPropagation()},s("ui-input",{key:"4bbb2eaa3f2c937fe05991720cc34f70f6241776",class:"tab-list-search-input",placeholder:"Search tabs...",value:this.tabListSearch,prefixIcon:"search",iconLibrary:this.iconLibrary,showClear:!0,size:"sm",fullWidth:!0,onInputChange:t=>{this.tabListSearch=t.detail},onInputClear:()=>{this.tabListSearch=""},"aria-label":"Search tabs",autoFocus:!0})),this.parsedItems.filter((t=>!this.tabListSearch.trim()||t.title?.toLowerCase().includes(this.tabListSearch.toLowerCase()))).map((t=>{const a=this.activeTab===t.id;return s("div",{class:"tab-list-item "+(a?"active":""),onClick:()=>this.selectTab(t.id),role:"option","aria-selected":""+a,title:t.title},t.icon&&s("span",{class:"tab-list-icon"},s("ui-icon",{name:t.icon,library:t.iconLibrary||this.iconLibrary,size:"16px",color:"currentColor"})),s("span",{class:"tab-list-title"},t.title),t.badge&&s("span",{class:"tab-list-badge"},t.badge),a&&s("span",{class:"tab-list-active-check"},s("ui-icon",{name:"check",library:"lucide",size:"14px",color:"currentColor"})))})))),this.showCloseAll&&s("ui-button",{key:"7e98f8695e6d8ab32c8b0c66e7f95b0878fc789e",variant:"ghost",size:"sm",iconOnly:!0,icon:"x",iconLibrary:this.iconLibrary,iconSize:"1em",onClick:t=>this.handleCloseAll(t),ariaLabel:"Close all tabs",title:"Close All",class:"tab-close-all"}))),s("div",{key:"81b7020058c9594a86bd4cd75d908bd42397c2c4",class:"tabs-content"},this.parsedItems.map((t=>this.renderContent(t)))))}static get watchers(){return{items:[{parseItems:0}],defaultActive:[{onDefaultActiveChange:0}],activeTab:[{onActiveTabChange:0}]}}static get style(){return'@charset "UTF-8";.sr-only.sc-ui-tabs{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only.sc-ui-tabs{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.sc-ui-tabs-h{display:block;overflow:visible;position:relative;--tab-pink:var(--color-danger, #ec4899);--tab-pink-light:var(--bg-primary, #fce7f3);--tab-teal:var(--color-primary, #14b8a6);--tab-teal-light:var(--bg-primary, #ccfbf1);--tab-purple:var(--color-primary, #a855f7);--tab-blue:var(--color-primary, #10b981);--tab-dark-bg:var(--bg-primary, #1e293b);--tab-dark-surface:var(--color-primary, #334155);--tab-text-primary:var(--text-primary, #0f172a);--tab-text-secondary:var(--text-secondary, #64748b);--tab-label-color:var(--tab-text-override, var(--label-color, var(--text-primary, #1f2937)));--tab-border:var(--border-subtle, #e2e8f0);--tab-indicator-bg:var(--tab-active-color, var(--tab-pink));--enterprise-easing:cubic-bezier(0.4, 0, 0.2, 1)}.tabs-container.sc-ui-tabs{display:flex;flex-direction:column;font-family:var(--font-family, "\'Inter\', -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif");border-radius:var(--border-radius, 8px);overflow:visible;background:var(--container-bg, transparent);width:100%;position:relative}.tabs-vertical.sc-ui-tabs{flex-direction:row;height:100%}.tabs-vertical.sc-ui-tabs .tabs-header-wrapper.sc-ui-tabs{flex-direction:column;border-bottom:none;border-right:1px solid var(--border-color, var(--tab-border));align-items:stretch;overflow:visible;height:100%;max-height:100%;flex-shrink:0}.tabs-vertical.sc-ui-tabs .tabs-header.sc-ui-tabs{flex-direction:column;overflow-y:auto;overflow-x:visible;min-width:180px;flex:1;max-height:calc(100% - 80px);scrollbar-width:thin}.tabs-vertical.sc-ui-tabs .tabs-header.sc-ui-tabs::-webkit-scrollbar{width:4px}.tabs-vertical.sc-ui-tabs .tabs-header.sc-ui-tabs::-webkit-scrollbar-thumb{background:var(--color-primary, #cbd5e1);border-radius:2px}.tabs-vertical.sc-ui-tabs .tab-header.sc-ui-tabs{width:100%;justify-content:flex-start;text-align:left;flex-shrink:0}.tabs-header-wrapper.sc-ui-tabs{display:flex;align-items:center;position:relative;background-color:var(--header-bg, transparent);border-bottom:1px solid var(--border-color, var(--tab-border));padding:0 4px;overflow:visible;z-index:100}.indicator-top.sc-ui-tabs .tabs-header-wrapper.sc-ui-tabs{border-bottom:none;border-top:1px solid var(--border-color, var(--tab-border))}.tab-header.sc-ui-tabs{border:none;outline:none !important;background:transparent;cursor:pointer;font-family:inherit;position:relative;z-index:10}.tab-header.sc-ui-tabs:focus{outline:none !important;box-shadow:none !important}.tab-header.sc-ui-tabs:focus-visible{outline:2px solid var(--tab-pink);outline-offset:-2px;border-radius:4px}.tabs-variant-line.sc-ui-tabs .tabs-header-wrapper.sc-ui-tabs{background:transparent;border-bottom:1px solid rgba(0, 0, 0, 0.08)}.tabs-variant-line.sc-ui-tabs .tab-header.sc-ui-tabs{border:none;border-bottom:none;margin-bottom:-1px;color:var(--tab-label-color);opacity:0.6;font-weight:500;transition:all 0.25s var(--enterprise-easing);position:relative;outline:none !important;flex-shrink:0;padding:14px 22px;background:transparent;letter-spacing:-0.01em;font-size:14px}.tabs-variant-line.sc-ui-tabs .tab-header.sc-ui-tabs::after{display:none}.tabs-variant-line.sc-ui-tabs .tab-header.sc-ui-tabs:hover:not(.tab-header-active):not(.tab-header-disabled){color:var(--tab-label-color);opacity:0.85;background:rgba(128, 128, 128, 0.05)}.tabs-variant-line.sc-ui-tabs .tab-header-active.sc-ui-tabs{color:var(--tab-active-color, var(--tab-pink));opacity:1;font-weight:600}.tabs-variant-line.sc-ui-tabs .tab-selection-indicator.sc-ui-tabs{background:var(--tab-indicator-bg);border-radius:4px 4px 0 0;opacity:1;transition:all 0.3s var(--enterprise-easing);z-index:10;height:4px;bottom:0;top:auto;box-shadow:0 -2px 10px -1px var(--tab-active-color, var(--tab-pink))}.indicator-top.tabs-variant-line.sc-ui-tabs .tab-selection-indicator.sc-ui-tabs{border-radius:0 0 4px 4px;bottom:auto;top:0;box-shadow:0 2px 10px -1px var(--tab-active-color, var(--tab-pink))}.tabs-vertical.tabs-variant-line.sc-ui-tabs .tab-selection-indicator.sc-ui-tabs{width:4px;height:auto;left:auto;right:0;border-radius:4px 0 0 4px;background:var(--tab-indicator-bg);box-shadow:-2px 0 10px -1px var(--tab-active-color, var(--tab-pink))}.tabs-variant-card.sc-ui-tabs .tabs-header-wrapper.sc-ui-tabs{background:var(--bg-primary, #f8fafc);border-bottom:1px solid var(--border-subtle, #e2e8f0);padding:8px 8px 0 8px;gap:4px}.tabs-variant-card.sc-ui-tabs .tab-header.sc-ui-tabs{border:none;border-radius:10px 10px 0 0;margin-bottom:-1px;padding:12px 20px;background:transparent;color:var(--tab-label-color);opacity:0.6;outline:none !important;flex-shrink:0;transition:all 0.2s ease;font-weight:500}.tabs-variant-card.sc-ui-tabs .tab-header.sc-ui-tabs:hover:not(.tab-header-active){background:rgba(128, 128, 128, 0.05);color:var(--tab-label-color);opacity:0.85}.tabs-variant-card.sc-ui-tabs .tab-header-active.sc-ui-tabs{background:var(--bg-primary, #ffffff);color:var(--tab-active-color, var(--color-primary, #3b82f6));opacity:1;font-weight:600;box-shadow:0 -2px 8px rgba(0, 0, 0, 0.04)}.tabs-variant-pill.sc-ui-tabs .tabs-header-wrapper.sc-ui-tabs{border-bottom:none;gap:10px;padding:12px;background:transparent}.tabs-variant-pill.sc-ui-tabs .tab-header.sc-ui-tabs{border-radius:10px;border:none;padding:12px 24px;transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1);font-weight:500;color:var(--tab-label-color);opacity:0.6;outline:none !important;flex-shrink:0;font-size:14px}.tabs-variant-pill.sc-ui-tabs .tab-header.sc-ui-tabs:hover:not(.tab-header-active){background:rgba(128, 128, 128, 0.07);color:var(--tab-label-color);opacity:0.85}.tabs-variant-pill.sc-ui-tabs .tab-header-active.sc-ui-tabs{background:var(--tab-active-color, var(--color-primary, #14b8a6));color:var(--text-standard, #ffffff);opacity:1;font-weight:600;box-shadow:0 4px 14px rgba(0, 0, 0, 0.15)}.tabs-variant-subtle.sc-ui-tabs .tabs-header-wrapper.sc-ui-tabs{background:transparent;border-bottom:none;gap:6px;padding:10px}.tabs-variant-subtle.sc-ui-tabs .tab-header.sc-ui-tabs{border-radius:8px;border:none;color:var(--tab-label-color);opacity:0.6;padding:12px 18px;transition:all 0.2s ease;outline:none !important;flex-shrink:0;font-weight:500}.tabs-variant-subtle.sc-ui-tabs .tab-header.sc-ui-tabs:hover:not(.tab-header-active){background:rgba(128, 128, 128, 0.06);color:var(--tab-label-color);opacity:0.85}.tabs-variant-subtle.sc-ui-tabs .tab-header-active.sc-ui-tabs{background:color-mix(in srgb, var(--tab-active-color, var(--tab-pink)) 12%, transparent);color:var(--tab-active-color, var(--tab-pink));opacity:1;font-weight:600}.tabs-variant-glass.sc-ui-tabs{background:rgba(255, 255, 255, 0.75);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255, 255, 255, 0.7);box-shadow:0 8px 32px rgba(0, 0, 0, 0.08)}.tabs-variant-glass.sc-ui-tabs .tabs-header-wrapper.sc-ui-tabs{background:rgba(255, 255, 255, 0.5);border-bottom:1px solid rgba(255, 255, 255, 0.4)}.tabs-variant-glass.sc-ui-tabs .tab-header.sc-ui-tabs{color:var(--tab-label-color);opacity:0.65;outline:none !important;flex-shrink:0;font-weight:500;transition:all 0.25s ease;padding:12px 20px;border:none}.tabs-variant-glass.sc-ui-tabs .tab-header.sc-ui-tabs:hover:not(.tab-header-active){background:rgba(128, 128, 128, 0.1);color:var(--tab-label-color);opacity:0.9}.tabs-variant-glass.sc-ui-tabs .tab-header-active.sc-ui-tabs{background:rgba(255, 255, 255, 0.95);color:var(--tab-active-color, var(--color-primary, #3b82f6));opacity:1;font-weight:600;box-shadow:0 4px 12px rgba(0, 0, 0, 0.08)}.tabs-variant-folder.sc-ui-tabs .tabs-header-wrapper.sc-ui-tabs{background:transparent;padding:0 16px;align-items:flex-end;border-bottom:none;gap:0}.tabs-variant-folder.sc-ui-tabs .tab-header.sc-ui-tabs{background:color-mix(in srgb, var(--tab-label-color) 10%, transparent);color:var(--tab-label-color);opacity:0.65;padding:12px 24px;margin-right:4px;border-radius:12px 12px 0 0;border:none;position:relative;transition:all 0.2s ease;font-weight:500;box-shadow:inset 0 -2px 4px rgba(0, 0, 0, 0.05)}.tabs-variant-folder.sc-ui-tabs .tab-header.sc-ui-tabs::before,.tabs-variant-folder.sc-ui-tabs .tab-header.sc-ui-tabs::after{content:"";position:absolute;bottom:0;width:12px;height:12px;background:transparent;pointer-events:none;display:none}.tabs-variant-folder.sc-ui-tabs .tab-header-active.sc-ui-tabs{background:var(--tab-active-color, var(--color-primary, #f59e0b));color:var(--text-standard, #ffffff);opacity:1;z-index:10;box-shadow:0 -4px 12px rgba(0, 0, 0, 0.14)}.tabs-variant-folder.sc-ui-tabs .tab-header-active.sc-ui-tabs::before{display:block;left:-12px;border-bottom-right-radius:12px;box-shadow:6px 0 0 0 var(--tab-active-color, var(--color-warning, #f59e0b))}.tabs-variant-folder.sc-ui-tabs .tab-header-active.sc-ui-tabs::after{display:block;right:-12px;border-bottom-left-radius:12px;box-shadow:-6px 0 0 0 var(--tab-active-color, var(--color-warning, #f59e0b))}.tabs-variant-slanted.sc-ui-tabs .tabs-header-wrapper.sc-ui-tabs{background:var(--bg-secondary, #f1f5f9);padding:10px 10px 0;border-bottom:2px solid var(--border-subtle, #e2e8f0)}.tabs-variant-slanted.sc-ui-tabs .tab-header.sc-ui-tabs{padding:12px 32px;background:color-mix(in srgb, var(--tab-label-color) 8%, transparent);color:var(--tab-label-color);opacity:0.6;margin-right:-12px;font-weight:600;text-transform:uppercase;font-size:12px;letter-spacing:0.05em;clip-path:polygon(15px 0, 100% 0, calc(100% - 15px) 100%, 0 100%);transition:all 0.3s ease}.tabs-variant-slanted.sc-ui-tabs .tab-header.sc-ui-tabs:hover:not(.tab-header-active){background:color-mix(in srgb, var(--tab-label-color) 16%, transparent);color:var(--tab-label-color);opacity:0.85}.tabs-variant-slanted.sc-ui-tabs .tab-header-active.sc-ui-tabs{background:var(--tab-active-color, var(--bg-inverted, #1e293b));color:var(--text-standard, #ffffff);opacity:1;z-index:5;transform:scale(1.05);box-shadow:0 4px 15px rgba(0, 0, 0, 0.2)}.tabs-variant-minimal.sc-ui-tabs .tabs-header-wrapper.sc-ui-tabs{background:transparent;border-bottom:1px solid rgba(255, 255, 255, 0.1)}.tabs-variant-minimal.sc-ui-tabs .tab-header.sc-ui-tabs{padding:16px 24px;color:var(--tab-label-color);opacity:0.55;font-weight:500;transition:color 0.3s ease, opacity 0.25s ease}.tabs-variant-minimal.sc-ui-tabs .tab-header.sc-ui-tabs:hover:not(.tab-header-active){opacity:0.8}.tabs-variant-minimal.sc-ui-tabs .tab-header-active.sc-ui-tabs{color:var(--tab-active-color, var(--tab-label-color));opacity:1}.tabs-variant-minimal.sc-ui-tabs .tab-selection-indicator.sc-ui-tabs{height:3px;bottom:0;top:auto;border-radius:3px 3px 0 0;background:var(--tab-indicator-bg);box-shadow:0 -2px 12px var(--tab-active-color, var(--tab-pink));opacity:1}.indicator-top.tabs-variant-minimal.sc-ui-tabs .tab-selection-indicator.sc-ui-tabs{border-radius:0 0 3px 3px;bottom:auto;top:0;box-shadow:0 2px 12px var(--tab-active-color, var(--tab-pink))}.indicator-style-capsule.sc-ui-tabs .tab-selection-indicator.sc-ui-tabs{height:6px !important;border-radius:6px !important;box-shadow:0 -2px 12px -2px var(--tab-active-color, var(--tab-pink))}.indicator-top.indicator-style-capsule.sc-ui-tabs .tab-selection-indicator.sc-ui-tabs{border-radius:6px !important;box-shadow:0 2px 12px -2px var(--tab-active-color, var(--tab-pink))}.tabs-vertical.indicator-style-capsule.sc-ui-tabs .tab-selection-indicator.sc-ui-tabs{width:6px !important;border-radius:6px !important;box-shadow:-2px 0 12px -2px var(--tab-active-color, var(--tab-pink))}.indicator-style-dot.sc-ui-tabs .tab-selection-indicator.sc-ui-tabs{height:6px !important;transform-origin:bottom center !important}.indicator-style-dot.sc-ui-tabs .tab-selection-indicator.sc-ui-tabs::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:var(--tab-active-color, var(--tab-pink));box-shadow:0 0 8px 2px var(--tab-active-color, var(--tab-pink))}.indicator-style-dot.sc-ui-tabs .tab-selection-indicator.sc-ui-tabs{background:transparent !important;box-shadow:none !important;height:8px !important;border-radius:0 !important}.indicator-top.indicator-style-dot.sc-ui-tabs .tab-selection-indicator.sc-ui-tabs::after{bottom:auto;top:0;transform:translate(-50%, 0)}.indicator-style-glow.sc-ui-tabs .tab-selection-indicator.sc-ui-tabs{height:4px !important;border-radius:4px !important;filter:blur(1px);box-shadow:0 0 8px 3px var(--tab-active-color, var(--tab-pink)), 0 0 20px 6px color-mix(in srgb, var(--tab-active-color, var(--tab-pink)) 50%, transparent) !important}.tabs-vertical.indicator-style-glow.sc-ui-tabs .tab-selection-indicator.sc-ui-tabs{width:4px !important;filter:blur(1px);box-shadow:0 0 8px 3px var(--tab-active-color, var(--tab-pink)), 0 0 20px 6px color-mix(in srgb, var(--tab-active-color, var(--tab-pink)) 50%, transparent) !important}.indicator-style-bold.sc-ui-tabs .tab-selection-indicator.sc-ui-tabs{height:8px !important;border-radius:8px 8px 0 0 !important;box-shadow:0 -3px 14px -2px var(--tab-active-color, var(--tab-pink))}.indicator-top.indicator-style-bold.sc-ui-tabs .tab-selection-indicator.sc-ui-tabs{border-radius:0 0 8px 8px !important;box-shadow:0 3px 14px -2px var(--tab-active-color, var(--tab-pink))}.tabs-vertical.indicator-style-bold.sc-ui-tabs .tab-selection-indicator.sc-ui-tabs{width:8px !important;border-radius:8px 0 0 8px !important;box-shadow:-3px 0 14px -2px var(--tab-active-color, var(--tab-pink))}.indicator-style-none.sc-ui-tabs .tab-selection-indicator.sc-ui-tabs{display:none !important}.tabs-variant-elastic.sc-ui-tabs .tabs-header-wrapper.sc-ui-tabs{background:var(--bg-primary, #ffffff);padding:8px;border-radius:999px;border:1px solid var(--border-subtle, #e2e8f0);box-shadow:0 8px 30px rgba(0, 0, 0, 0.05);display:inline-flex;gap:0;align-self:center}.tabs-variant-elastic.sc-ui-tabs .tab-header.sc-ui-tabs{padding:10px 24px;border-radius:999px;color:var(--tab-label-color);opacity:0.55;font-weight:600;z-index:10;transition:color 0.3s ease;font-size:13px;text-transform:uppercase;letter-spacing:0.05em}.tabs-variant-elastic.sc-ui-tabs .tab-header-active.sc-ui-tabs{color:var(--text-standard, #ffffff);opacity:1}.tabs-variant-elastic.sc-ui-tabs .tab-selection-indicator.sc-ui-tabs{height:calc(100% - 16px) !important;top:8px;border-radius:999px;background:var(--tab-indicator-bg);box-shadow:0 6px 20px rgba(var(--color-primary-rgb, 59, 130, 246), 0.4);z-index:5;transition:transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.3s ease}.tabs-variant-sidebar.tabs-vertical.sc-ui-tabs .tabs-header-wrapper.sc-ui-tabs{background:var(--color-success, #22c55e);border-right:none;padding:24px 12px;width:80px;flex-shrink:0;display:flex;flex-direction:column;gap:32px}.tabs-variant-sidebar.tabs-vertical.sc-ui-tabs .tab-header.sc-ui-tabs{width:48px;height:48px;min-width:48px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(255, 255, 255, 0.2);color:var(--text-standard, #ffffff);padding:0;margin:0 auto;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1)}.tabs-variant-sidebar.tabs-vertical.sc-ui-tabs .tab-header.sc-ui-tabs:hover:not(.tab-header-active){background:rgba(255, 255, 255, 0.3);transform:scale(1.1)}.tabs-variant-sidebar.tabs-vertical.sc-ui-tabs .tab-header-active.sc-ui-tabs{background:var(--bg-primary, #ffffff);color:var(--color-success, #22c55e);transform:scale(1.15);box-shadow:0 8px 25px rgba(0, 0, 0, 0.15)}.tabs-variant-sidebar.tabs-vertical.sc-ui-tabs .tab-icon.sc-ui-tabs{font-size:24px}.tabs-variant-sidebar.tabs-vertical.sc-ui-tabs .tab-title.sc-ui-tabs{display:none}.tab-selection-indicator.sc-ui-tabs{position:absolute;top:0;left:0;pointer-events:none;transition:transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1), height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, box-shadow 0.3s ease;opacity:0;z-index:5}.tab-header.sc-ui-tabs .tab-selection-indicator.sc-ui-tabs{opacity:1 !important}.tabs-variant-enclosed.sc-ui-tabs .tabs-header-wrapper.sc-ui-tabs{background:var(--bg-secondary, #f1f5f9);padding:6px;gap:4px;border-radius:12px;border:1px solid var(--border-subtle, #e2e8f0)}.tabs-variant-enclosed.sc-ui-tabs .tab-header.sc-ui-tabs{background:transparent;border-radius:9px;padding:12px 20px;color:var(--tab-label-color);opacity:0.6;border:none;flex-shrink:0;outline:none !important;font-weight:500;transition:all 0.2s ease}.tabs-variant-enclosed.sc-ui-tabs .tab-header.sc-ui-tabs:hover:not(.tab-header-active){background:rgba(128, 128, 128, 0.08);color:var(--tab-label-color);opacity:0.85}.tabs-variant-enclosed.sc-ui-tabs .tab-header-active.sc-ui-tabs{background:var(--bg-primary, #ffffff);color:var(--tab-active-color, var(--tab-text-primary));opacity:1;font-weight:600;box-shadow:0 2px 6px rgba(0, 0, 0, 0.08)}.tabs-size-xs.sc-ui-tabs .tab-header.sc-ui-tabs{padding:4px 10px;font-size:11px;min-height:28px;gap:4px}.tabs-size-xs.sc-ui-tabs .tab-icon.sc-ui-tabs{font-size:12px}.tabs-size-sm.sc-ui-tabs .tab-header.sc-ui-tabs{padding:6px 12px;font-size:12px;min-height:32px}.tabs-size-md.sc-ui-tabs .tab-header.sc-ui-tabs{padding:10px 18px;font-size:14px;min-height:40px}.tabs-size-lg.sc-ui-tabs .tab-header.sc-ui-tabs{padding:14px 24px;font-size:15px;font-weight:500;min-height:48px}.tabs-size-xl.sc-ui-tabs .tab-header.sc-ui-tabs{padding:18px 32px;font-size:16px;font-weight:500;min-height:56px;letter-spacing:0.01em}.tabs-size-xs.sc-ui-tabs .tab-icon.sc-ui-tabs{font-size:12px}.tabs-size-sm.sc-ui-tabs .tab-icon.sc-ui-tabs{font-size:14px}.tabs-size-md.sc-ui-tabs .tab-icon.sc-ui-tabs{font-size:15px}.tabs-size-lg.sc-ui-tabs .tab-icon.sc-ui-tabs{font-size:18px}.tabs-size-xl.sc-ui-tabs .tab-icon.sc-ui-tabs{font-size:20px}.tabs-size-xs.sc-ui-tabs .tab-badge.sc-ui-tabs{font-size:9px;padding:1px 4px;min-width:14px;height:14px}.tabs-size-sm.sc-ui-tabs .tab-badge.sc-ui-tabs{font-size:10px;padding:1px 5px;min-width:16px;height:16px}.tabs-size-xl.sc-ui-tabs .tab-badge.sc-ui-tabs{font-size:12px;padding:3px 8px;min-width:20px;height:20px}.tabs-vertical.sc-ui-tabs .tabs-header-wrapper.sc-ui-tabs{flex-direction:column;border-bottom:none;border-right:1px solid var(--border-color, var(--tab-border));align-items:stretch;overflow:visible;max-height:100%;height:100%}.tab-title.sc-ui-tabs{flex:1;white-space:nowrap !important;overflow:hidden;text-overflow:ellipsis;max-width:240px}.tabs-header.sc-ui-tabs{display:flex;flex:1;overflow:visible;flex-wrap:nowrap;position:relative}.tabs-scrollable.sc-ui-tabs .tabs-header.sc-ui-tabs{overflow-x:auto;overflow-y:visible;scrollbar-width:none;align-items:flex-end;scroll-behavior:smooth}.tabs-scrollable.sc-ui-tabs .tabs-header.sc-ui-tabs::-webkit-scrollbar{display:none}.scroll-button.sc-ui-tabs{z-index:20;background:var(--bg-primary, #ffffff);border:1px solid var(--border-subtle, #e2e8f0);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;width:34px;height:34px;min-width:34px;transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);color:var(--text-muted, #64748b);margin:0 6px;box-shadow:0 2px 6px rgba(0, 0, 0, 0.08);font-size:20px;font-weight:600}.scroll-button.sc-ui-tabs:hover{background:var(--tab-pink-light);color:var(--tab-pink);border-color:var(--tab-pink);transform:scale(1.08);box-shadow:0 4px 12px rgba(236, 72, 153, 0.25)}.scroll-button.sc-ui-tabs:active{transform:scale(0.95)}.tabs-vertical.sc-ui-tabs .scroll-button.sc-ui-tabs{margin:6px 0;width:100%;min-width:auto;border-radius:6px}.tabs-vertical.sc-ui-tabs .scroll-button.scroll-up.sc-ui-tabs,.tabs-vertical.sc-ui-tabs .scroll-button.scroll-down.sc-ui-tabs{height:32px;width:100%;border-radius:6px;font-size:12px}.tabs-content.sc-ui-tabs{flex:1;position:relative;background-color:var(--content-bg, var(--bg-primary, var(--text-standard, #ffffff)));padding:0;z-index:1}.tab-content.sc-ui-tabs{display:none;padding:28px;animation-fill-mode:both}.tab-content-active.sc-ui-tabs{display:block}.tab-header-content.sc-ui-tabs{display:flex;align-items:center;gap:10px}.tab-icon.sc-ui-tabs{font-size:18px;display:inline-flex;opacity:0.9}.tab-header-active.sc-ui-tabs .tab-icon.sc-ui-tabs{opacity:1}.tab-badge.sc-ui-tabs{background-color:var(--tab-pink);color:var(--text-standard, #ffffff);padding:3px 10px;border-radius:14px;font-size:11px;line-height:1.5;font-weight:600;min-width:22px;text-align:center;transition:all 0.2s ease;box-shadow:0 2px 4px rgba(0, 0, 0, 0.15)}.tab-badge.badge-neutral.sc-ui-tabs{background-color:var(--bg-secondary, #f1f5f9);color:var(--text-muted, #64748b);box-shadow:none}.tab-badge.badge-primary.sc-ui-tabs{background-color:var(--tab-blue);color:var(--text-standard, #ffffff)}.tab-badge.badge-success.sc-ui-tabs{background-color:var(--tab-teal);color:var(--text-standard, #ffffff)}.tab-badge.badge-warning.sc-ui-tabs{background-color:var(--color-warning, #f59e0b);color:var(--text-standard, #ffffff)}.tab-close.sc-ui-tabs{margin-left:8px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:none;background:transparent;cursor:pointer;color:var(--color-primary, #94a3b8);padding:0;transition:all 0.2s ease;font-size:18px;line-height:1}.tab-close.sc-ui-tabs:hover{background:rgba(var(--color-danger-rgb, 239, 68, 68), 0.12);color:var(--color-danger, #ef4444);transform:scale(1.15)}.tab-close-all.sc-ui-tabs{color:var(--color-primary, #94a3b8);background:transparent;border:none;cursor:pointer;padding:10px;border-radius:10px;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center}.tab-close-all.sc-ui-tabs:hover{background:rgba(var(--color-danger-rgb, 239, 68, 68), 0.12);color:var(--color-danger, #ef4444)}.tab-close-all.sc-ui-tabs svg.sc-ui-tabs{width:18px;height:18px}.tab-list-button.sc-ui-tabs{background:transparent;border:none;cursor:pointer;color:var(--text-secondary, var(--text-muted, #64748b));padding:10px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease;margin-right:6px}.tab-list-button.sc-ui-tabs:hover{background:rgba(236, 72, 153, 0.1);color:var(--tab-pink)}.tab-list-dropdown.sc-ui-tabs{position:fixed;background:var(--bg-primary, #ffffff);min-width:240px;max-width:340px;overflow-y:auto;border-radius:14px;box-shadow:0 12px 48px rgba(0, 0, 0, 0.14), 0 4px 16px rgba(0, 0, 0, 0.1);border:1px solid rgba(0, 0, 0, 0.05);z-index:1000;padding:8px;animation:dropdownSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);transform-origin:top right;display:flex;flex-direction:column}.tab-list-header.sc-ui-tabs{display:flex;align-items:center;justify-content:space-between;padding:6px 14px 10px;border-bottom:1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));margin-bottom:4px}.tab-list-header-title.sc-ui-tabs{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted, #94a3b8)}.tab-list-header-count.sc-ui-tabs{font-size:11px;font-weight:600;padding:1px 8px;border-radius:20px;background:var(--bg-secondary, #f1f5f9);color:var(--text-muted, #64748b)}.tab-list-search.sc-ui-tabs{padding:8px 10px 4px}.tab-list-active-check.sc-ui-tabs{display:inline-flex;align-items:center;margin-left:auto;flex-shrink:0;color:var(--tab-pink, var(--color-primary, #ec4899));opacity:0.9}.tab-list-item.sc-ui-tabs{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 14px;background:transparent;border:none;border-radius:10px;cursor:pointer;font-size:14px;color:var(--color-primary, #334155);transition:all 0.2s ease;font-weight:500}.tab-list-item.sc-ui-tabs:hover{background:var(--bg-primary, #f8fafc);color:var(--text-primary, #0f172a);transform:translateX(4px)}.tab-list-item.active.sc-ui-tabs{background:linear-gradient(135deg, rgba(236, 72, 153, 0.12) 0%, rgba(168, 85, 247, 0.12) 100%);color:var(--tab-pink);font-weight:600}.tab-list-icon.sc-ui-tabs{font-size:20px;display:inline-flex;opacity:0.9}.tab-list-item.active.sc-ui-tabs .tab-list-icon.sc-ui-tabs{opacity:1}.tab-list-title.sc-ui-tabs{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tab-list-badge.sc-ui-tabs{background:var(--bg-secondary, #f1f5f9);color:var(--text-muted, #64748b);padding:3px 10px;border-radius:14px;font-size:11px;font-weight:600}.tab-list-item.active.sc-ui-tabs .tab-list-badge.sc-ui-tabs{background:var(--tab-pink);color:var(--text-standard, #ffffff)}.tab-actions.sc-ui-tabs{position:relative;display:flex;align-items:center;z-index:10}.tab-actions.active.sc-ui-tabs{z-index:9998}.tab-menu.sc-ui-tabs{width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:8px;border:none;background:transparent;cursor:pointer;color:var(--text-secondary, #94a3b8);font-weight:bold;line-height:1;padding:0;transition:all 0.2s ease;font-size:16px}.tab-menu.sc-ui-tabs:hover,.tab-actions.active.sc-ui-tabs .tab-menu.sc-ui-tabs{background:rgba(0, 0, 0, 0.06);color:var(--text-primary, #1e293b)}.tab-menu-popover.sc-ui-tabs{position:absolute;top:100%;margin-top:8px;background:var(--bg-primary, #ffffff);min-width:180px;border-radius:12px;box-shadow:0 12px 48px rgba(0, 0, 0, 0.14), 0 4px 16px rgba(0, 0, 0, 0.1);border:1px solid rgba(0, 0, 0, 0.05);z-index:9999;padding:8px;display:flex;flex-direction:column;animation:dropdownSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);transform-origin:top right}.tab-menu-item.sc-ui-tabs{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:8px 12px;background:transparent;border:none;border-radius:9px;cursor:pointer;font-size:14px;color:var(--color-primary, #334155);transition:all 0.2s ease;white-space:nowrap;font-weight:500}.tab-menu-item.sc-ui-tabs:hover{background:var(--bg-secondary, #f1f5f9);color:var(--text-primary, #0f172a)}.tab-menu-item.danger.sc-ui-tabs{color:var(--color-danger, #ef4444)}.tab-menu-item.danger.sc-ui-tabs:hover{background:var(--bg-primary, #fef2f2)}.menu-icon.sc-ui-tabs{font-size:15px;width:18px;display:inline-flex;justify-content:center;opacity:0.9}.menu-divider.sc-ui-tabs{height:1px;background:var(--bg-primary, #e2e8f0);margin:6px 0}@keyframes dropdownSlideIn{from{opacity:0;transform:scale(0.96) translateY(-6px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes slideDown{from{opacity:0;margin-top:-8px}to{opacity:1;margin-top:0}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes scaleIn{from{opacity:0}to{opacity:1}}.animation-slide.tab-content-active.sc-ui-tabs{animation:slideDown 0.35s cubic-bezier(0.4, 0, 0.2, 1)}.animation-fade.tab-content-active.sc-ui-tabs{animation:fadeIn 0.35s ease}.animation-scale.tab-content-active.sc-ui-tabs{animation:scaleIn 0.35s cubic-bezier(0.4, 0, 0.2, 1)}.tab-header-disabled.sc-ui-tabs{opacity:0.4;cursor:not-allowed;pointer-events:none}.tabs-vertical.tabs-variant-pill.sc-ui-tabs .tabs-header-wrapper.sc-ui-tabs{gap:10px;padding:12px;border-right:none}.tabs-vertical.tabs-variant-pill.sc-ui-tabs .tab-header.sc-ui-tabs{width:100%}@media (max-width: 640px){.tab-header.sc-ui-tabs{padding:10px 14px;font-size:13px}.tabs-size-lg.sc-ui-tabs .tab-header.sc-ui-tabs{padding:12px 18px;font-size:14px}}.tab-edit-input.sc-ui-tabs{background:var(--bg-primary, #ffffff);border:1px solid var(--color-primary, #1890ff);border-radius:4px;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;padding:2px 4px;width:100%;max-width:200px;outline:none;box-shadow:0 0 0 2px rgba(24, 144, 255, 0.2)}.tabs-container[aria-orientation=vertical].sc-ui-tabs .tab-edit-input.sc-ui-tabs{max-width:none}'}},[774,"ui-tabs",{items:[1],defaultActive:[1,"default-active"],animationDuration:[2,"animation-duration"],orientation:[1],indicatorPosition:[1,"indicator-position"],showCloseAll:[4,"show-close-all"],showTabList:[4,"show-tab-list"],maxTabWidth:[2,"max-tab-width"],maxTitleLength:[2,"max-title-length"],wrapText:[4,"wrap-text"],position:[1],scrollMode:[1,"scroll-mode"],selectionAnimation:[1,"selection-animation"],iconPosition:[1,"icon-position"],iconOnly:[4,"icon-only"],scrollButtonPlacement:[1,"scroll-button-placement"],variant:[1],activeColor:[1,"active-color"],indicatorStyle:[1,"indicator-style"],indicatorGradient:[1,"indicator-gradient"],size:[1],iconLibrary:[1,"icon-library"],lazy:[4],isDraggable:[4,"is-draggable"],activeTab:[32],parsedItems:[32],activeMenuTab:[32],showScrollButtons:[32],isTabListOpen:[32],tabListPosition:[32],tabListSearch:[32],activeMenuPosition:[32],editingTab:[32],draggingTabId:[32],selectTabById:[64],getActiveTab:[64],destroyComponent:[64]},[[8,"keydown","handleKeyDown"],[11,"scroll","handleScroll"],[9,"resize","handleScroll"],[8,"click","handleWindowClick"]],{items:[{parseItems:0}],defaultActive:[{onDefaultActiveChange:0}],activeTab:[{onActiveTabChange:0}]}]),u=h,x=function(){"undefined"!=typeof customElements&&["ui-tabs","ui-badge","ui-button","ui-icon","ui-input","ui-loader"].forEach((t=>{switch(t){case"ui-tabs":customElements.get(e(t))||customElements.define(e(t),h);break;case"ui-badge":customElements.get(e(t))||l();break;case"ui-button":customElements.get(e(t))||c();break;case"ui-icon":customElements.get(e(t))||b();break;case"ui-input":customElements.get(e(t))||d();break;case"ui-loader":customElements.get(e(t))||p()}}))};export{u as UiTabs,x as defineCustomElement}

package/dist/components/ui-timeline.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as i,createEvent as t,h as n,Host as l,transformTag as m}from"@stencil/core/internal/client";import{s as a,d as r}from"./icon.js";import{d as o,a as d}from"./badge.js";import{d as s}from"./input.js";const c=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.itemVisible=t(this,"itemVisible",7),this.itemClick=t(this,"itemClick",7)}events=[];normalizedEvents=[];flow="linear";mode="vertical";align="left";theme;multiline=!1;columns=4;variant="default";marker="dot";clickable=!1;reverse=!1;pending=!1;searchable=!1;lineColor="#3bf673";lineWidth=2;dotSize=12;dotColor="#3bf673";showLine=!0;showDots=!0;animateOnScroll=!1;compact=!1;wrap=!1;showDates=!0;dateFormat="short";iconPosition="center";activeItemId;visibleItems=new Set;searchQuery="";itemVisible;itemClick;get el(){return this}normalizeEvents(e){if("string"==typeof e)try{this.normalizedEvents=JSON.parse(e)}catch{this.normalizedEvents=[]}else this.normalizedEvents=e||[]}isRtl=!1;isMobile=!1;observer;componentWillLoad(){this.normalizeEvents(this.events)}componentDidLoad(){this.animateOnScroll&&this.setupIntersectionObserver(),this.checkMobile(),this.checkRtl(),window.addEventListener("resize",this.handleResize)}disconnectedCallback(){this.observer&&this.observer.disconnect(),window.removeEventListener("resize",this.handleResize)}handleResize=()=>{this.checkMobile()};checkMobile(){this.isMobile=window.innerWidth<=768}checkRtl(){this.isRtl="rtl"===getComputedStyle(this.el).direction||null!==this.el.closest('[dir="rtl"]')||"rtl"===document.documentElement.dir}setupIntersectionObserver(){void 0!==globalThis.IntersectionObserver&&(this.observer=new IntersectionObserver((e=>{e.forEach((e=>{if(e.isIntersecting){const i=e.target.getAttribute("data-item-id"),t=e.target.getAttribute("data-item-index");if(i||t){this.visibleItems=new Set([...this.visibleItems,i||t]);const e=parseInt(t||"0",10),n=this.normalizedEvents[e];n&&this.itemVisible.emit({item:n,index:e})}}}))}),{threshold:.2}))}getProcessedEvents(){let e=[...this.normalizedEvents];if(this.searchable&&this.searchQuery){const i=this.searchQuery.toLowerCase();e=e.filter((e=>e.label.toLowerCase().includes(i)||e.description&&e.description.toLowerCase().includes(i)||e.opposite&&"string"==typeof e.opposite&&e.opposite.toLowerCase().includes(i)||e.customContent&&e.customContent.toLowerCase().includes(i)))}return this.reverse&&e.reverse(),e}handleSearch=e=>{this.searchQuery=e.detail};handleItemClick=e=>{this.clickable&&this.itemClick.emit(e)};render(){const e=this.getProcessedEvents(),i=this.isMobile&&this.compact?"vertical":this.mode,t=["timeline-container","timeline-"+i,"timeline-align-"+this.align,(this.multiline||this.wrap)&&"timeline-multiline","timeline-variant-"+this.variant,"timeline-marker-"+this.marker,this.clickable&&"timeline-clickable",this.animateOnScroll&&"timeline-animated",this.compact&&"timeline-compact","timeline-icon-"+this.iconPosition].filter(Boolean).join(" "),m={...this.theme,"--timeline-line-color":this.lineColor,"--timeline-line-width":this.lineWidth+"px","--timeline-dot-size":this.dotSize+"px","--timeline-dot-color":this.dotColor},a="horizontal"===i&&(this.multiline||this.wrap)?this.renderMultiline(t,e,m):n("div",{class:t,style:m},e.map(((e,i)=>this.renderEventItem(e,i))),this.pending&&this.renderPendingItem(e.length));return n(l,{key:"895dad278ac5ef9373c0053fe80f39d4c0850ba0"},n("div",{key:"83841752c240e330781abd770ba5079305d18ced",class:"timeline-wrapper"},this.searchable&&n("div",{key:"068ab74adbeb338f0ae91bb6f2d69ae91c426d2d",class:"timeline-search-header"},n("ui-input",{key:"8c1e6d69c5f10e25e6abdab5eedd84a93727729b",type:"text",class:"timeline-search-input",placeholder:"Search events...",onInputChange:this.handleSearch,value:this.searchQuery,size:"sm",fullWidth:!0})),a))}renderMultiline(e,i,t){const l=this.columns>0?this.columns:4,m=[];for(let e=0;e<i.length;e+=l)m.push(i.slice(e,e+l));return n("div",{class:`${e} ${this.wrap?"timeline-snake-container":""}`,style:t},m.map(((e,i)=>n("div",{class:{"timeline-row":!0,"timeline-row-even":i%2==0,"timeline-row-odd":i%2!=0}},e.map(((t,n)=>this.renderEventItem(t,i*this.columns+n,!0,n===e.length-1)))))),this.pending&&this.renderPendingItem(i.length,!0))}renderPendingItem(e,i=!1){const t=this.isRtl?e%2!=0:e%2==0,l="alternate"===this.align?t?"left":"right":this.align,m="alternate"===this.align?t?"top":"bottom":"top"===this.align?"top":"bottom";return n("div",{class:{"timeline-item":!0,"timeline-item-pending":!0,["side-"+l]:"vertical"===this.mode,["side-"+m]:"horizontal"===this.mode,"is-multiline":i}},n("div",{class:"timeline-item-line"}),n("div",{class:"timeline-item-dot"},n("span",{class:"dot-inner"})),n("div",{class:"timeline-item-details"},n("div",{class:"timeline-item-content"},n("div",{class:"timeline-item-title"},"Pending..."))))}renderEventItem(e,i,t=!1,l=!1){const m="alternate"===this.align,r=this.isRtl?i%2!=0:i%2==0,o=m?r?"left":"right":this.align,d=m?r?"top":"bottom":"top"===this.align?"top":"bottom";let s;const c={};e.dotColor&&(c.borderColor=e.dotColor),e.iconBackground&&(c.backgroundColor=e.iconBackground);const p={};e.iconColor&&(p.color=e.iconColor),s=e.image?n("img",{src:e.image,alt:e.label,class:"timeline-item-image",width:"24",height:"24"}):e.icon||"icon"===this.marker?n("span",{class:"timeline-item-icon",style:p},e.icon&&e.icon.includes("<svg")?n("span",{innerHTML:a(e.icon)}):n("ui-icon",{name:e.icon||"default-icon",library:"fontawesome"})):"number"===this.marker?n("span",{class:"timeline-item-number"},i+1):n("span",{class:"dot-inner"});const g=this.visibleItems.has(e.id||""+i);return n("div",{"data-item-id":e.id||""+i,"data-item-index":i,ref:e=>{e&&this.animateOnScroll&&this.observer&&this.observer.observe(e)},class:["timeline-item","timeline-item-"+(e.status||"default"),i%2==0?"timeline-item-even":"timeline-item-odd","side-"+o,"side-"+d,t&&l&&"is-last-in-row",!!e.image&&"has-image",!!e.icon&&"has-icon","number"===this.marker&&!e.image&&!e.icon&&"has-number",this.clickable&&"timeline-item-clickable",("active"===e.status||"pending"===e.status)&&"is-active",this.animateOnScroll&&"timeline-item-animated",(g||!this.animateOnScroll)&&"timeline-item-visible","center"===this.align&&"timeline-balanced-item",!!e.position&&"timeline-item-position-"+e.position].filter(Boolean).join(" "),onClick:()=>this.handleItemClick(e)},n("div",{class:"timeline-side timeline-side-left"},"left"===o&&e.opposite&&n("span",{class:"timeline-opposite-content"},e.opposite)),n("div",{class:"timeline-item-divider"},this.showLine&&n("div",{class:"timeline-item-line",style:{backgroundColor:e.lineColor||this.lineColor}}),n("div",{class:"timeline-item-dot",style:c},s,e.badge&&n("span",{class:"timeline-badge"},e.badge))),n("div",{class:"timeline-item-details timeline-side timeline-side-right"},this.showDates&&(e.date||e.time||e.timestamp)&&n("div",{class:"timeline-item-time"},e.date&&n("span",{class:"timeline-date-text"},e.date," "),e.time&&n("span",{class:"timeline-time-text"},e.time),!e.date&&!e.time&&e.timestamp&&n("span",{class:"timeline-date-text"},e.timestamp)),n("div",{class:"timeline-item-content"},n("div",{class:"timeline-item-title"},e.label),e.description&&n("div",{class:"timeline-item-desc"},e.description),e.customContent&&n("div",{class:"timeline-custom-content",innerHTML:a(e.customContent)}))))}static get watchers(){return{events:[{normalizeEvents:0}]}}static get style(){return'.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block;width:100%}.timeline-container{display:flex;position:relative;font-family:inherit}.timeline-vertical{flex-direction:column;padding:20px 0}.timeline-vertical .timeline-item{display:flex;position:relative;padding-bottom:24px;align-items:center}.timeline-vertical .timeline-item-line{position:absolute;top:0;bottom:0;width:2px;background-color:var(--bg-primary, #e5e7eb)}.timeline-vertical .timeline-item:last-child .timeline-item-line{display:none}.timeline-vertical .timeline-item-dot{position:relative;z-index:10;width:12px;height:12px;background:var(--bg-primary, #ffffff);border:2px solid var(--color-primary, #10b981);border-radius:50%;flex-shrink:0;margin-top:0;}.timeline-vertical .timeline-item-content{flex:1}.timeline-align-left.timeline-vertical .timeline-item-line{left:5px}.timeline-icon-top .timeline-item{align-items:flex-start}.timeline-icon-center .timeline-item{align-items:center}.timeline-icon-bottom .timeline-item{align-items:flex-end}.timeline-align-left.timeline-vertical .timeline-item-dot{left:0;}.timeline-align-left.timeline-vertical .timeline-item-details{padding-left:48px;text-align:left;display:flex;flex-direction:column;align-items:flex-start}.timeline-align-right.timeline-vertical .timeline-item{flex-direction:row-reverse;}.timeline-align-right.timeline-vertical .timeline-item-line{left:auto;right:5px;}.timeline-align-right.timeline-vertical .timeline-item-dot{left:auto;right:0;top:4px}.timeline-align-right.timeline-vertical .timeline-item-details{padding-left:0;padding-right:48px;text-align:right;display:flex;flex-direction:column;align-items:flex-end;width:100%;}.timeline-align-alternate.timeline-vertical .timeline-item{width:100%}.timeline-align-alternate.timeline-vertical .timeline-item-line{left:50%;transform:translateX(-50%)}.timeline-align-alternate.timeline-vertical .timeline-item-dot{left:50%;transform:translateX(-50%);top:4px}.timeline-align-alternate.timeline-vertical .side-left .timeline-item-details{width:50%;padding-right:48px;padding-left:0;text-align:right;box-sizing:border-box;margin-left:0;}.timeline-align-alternate.timeline-vertical .side-right .timeline-item-details{width:50%;margin-left:50%;padding-left:48px;text-align:left;box-sizing:border-box}.timeline-horizontal{flex-direction:row;padding:80px 0;overflow-x:auto;min-height:250px;align-items:center}.timeline-horizontal .timeline-item{flex:1;min-width:200px;display:flex;flex-direction:column;position:relative;align-items:center;justify-content:center;height:100%;margin:auto}.timeline-horizontal .timeline-item-details{position:absolute;width:240px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;text-align:center;padding:12px;}.timeline-horizontal.timeline-multiline{flex-direction:column;flex-wrap:nowrap;gap:0;padding:40px 80px;display:flex;align-items:stretch;overflow:visible;}.timeline-row{display:flex;width:100%;justify-content:center;justify-content:flex-start;position:relative;padding:40px 0;}.timeline-row.timeline-row-odd{flex-direction:row-reverse}.timeline-horizontal.timeline-multiline .timeline-item{flex:1;margin:0;min-width:0}.timeline-horizontal.timeline-multiline .timeline-item-line{display:block;left:50%;right:-50%;top:50%;border-radius:0}.timeline-row.timeline-row-odd .timeline-item-line{left:-50%;right:50%;}.timeline-item.is-last-in-row .timeline-item-line{display:block;left:50%;right:0;width:auto;}.timeline-row-odd .timeline-item.is-last-in-row .timeline-item-line{left:0;right:50%}.timeline-row-even .timeline-item.is-last-in-row::after{content:"";position:absolute;right:-60px;width:60px;top:50%;height:250px;border-right:2px solid var(--border-default, #e5e7eb);border-top:2px solid var(--border-default, #e5e7eb);border-bottom:2px solid var(--border-default, #e5e7eb);border-top-right-radius:60px;border-bottom-right-radius:60px;border-top-left-radius:0;border-bottom-left-radius:0;z-index:0;left:auto;pointer-events:none;top:calc(50% - 1px)}.timeline-row-odd .timeline-item.is-last-in-row::after{content:"";position:absolute;left:-60px;right:auto;width:60px;top:calc(50% - 1px);height:250px;border-left:2px solid var(--border-default, #e5e7eb);border-top:2px solid var(--border-default, #e5e7eb);border-bottom:2px solid var(--border-default, #e5e7eb);border-top-left-radius:60px;border-bottom-left-radius:60px;border-top-right-radius:0;border-bottom-right-radius:0;z-index:0;transform:none;pointer-events:none}.timeline-row:last-child .timeline-item.is-last-in-row::after{display:none}.timeline-row .timeline-item{justify-content:flex-start;}.timeline-row .timeline-item-dot{margin-top:119px;}.timeline-row .timeline-item-line{top:125px;transform:translateY(-50%)}.timeline-row .timeline-item-details{top:125px;}.timeline-horizontal .timeline-item-content,.timeline-horizontal .timeline-item-time{position:static;width:auto;max-width:100%;transform:none;left:auto;text-align:center;padding:2px 0}.timeline-horizontal .timeline-item-line{position:absolute;left:50%;right:-50%;top:50%;transform:translateY(-50%);height:2px;background-color:var(--bg-primary, #e5e7eb)}.timeline-horizontal .timeline-item:last-child .timeline-item-line{display:none}.timeline-horizontal .timeline-item-dot{width:12px;height:12px;background:var(--bg-primary, #ffffff);border:2px solid var(--color-primary, #10b981);border-radius:50%;z-index:10;position:relative}.timeline-horizontal.timeline-align-top .timeline-item-details,.timeline-horizontal .side-top .timeline-item-details{bottom:50%;top:auto;margin-bottom:32px;flex-direction:column-reverse;}.timeline-horizontal.timeline-align-top .timeline-item-details .timeline-item-content,.timeline-horizontal .side-top .timeline-item-details .timeline-item-content{order:1;}.timeline-horizontal.timeline-align-top .timeline-item-details .timeline-item-time,.timeline-horizontal .side-top .timeline-item-details .timeline-item-time{order:2;}.timeline-horizontal.timeline-align-bottom .timeline-item-details,.timeline-horizontal.timeline-align-left .timeline-item-details,.timeline-horizontal .side-bottom .timeline-item-details{top:50%;bottom:auto;margin-top:32px;flex-direction:column;}.timeline-horizontal .timeline-item-details::before{content:"";position:absolute;left:50%;width:2px;background:var(--bg-primary, #e5e7eb);height:32px;transform:translateX(-50%)}.timeline-horizontal.timeline-align-top .timeline-item-details::before,.timeline-horizontal .side-top .timeline-item-details::before{bottom:-32px;}.timeline-horizontal.timeline-align-bottom .timeline-item-details::before,.timeline-horizontal.timeline-align-left .timeline-item-details::before,.timeline-horizontal .side-bottom .timeline-item-details::before{top:-32px;}.timeline-horizontal.timeline-align-alternate .timeline-item{height:100%}.timeline-horizontal.timeline-align-alternate .timeline-item-dot{margin:0}.timeline-item-success .timeline-item-dot{border-color:var(--color-success, #10b981)}.timeline-item-danger .timeline-item-dot{border-color:var(--color-danger, #ef4444)}.timeline-item-warning .timeline-item-dot{border-color:var(--color-warning, #f59e0b)}.timeline-item-active .timeline-item-dot{border-color:var(--color-primary, #10b981);background-color:var(--bg-primary, #eff6ff);box-shadow:0 0 0 4px rgba(var(--color-primary-rgb, 59, 130, 246), 0.1)}.timeline-item-active .timeline-item-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--color-primary, #10b981);animation:timeline-pulse 2s infinite}.timeline-item-active .timeline-item-title{color:var(--color-primary, #10b981)}@keyframes timeline-pulse{0%{transform:scale(1);opacity:0.5}100%{transform:scale(2);opacity:0}}.timeline-item-dot{display:flex;align-items:center;justify-content:center;transition:all 0.2s ease}.timeline-item-icon{font-size:14px;display:inline-flex;align-items:center;justify-content:center;line-height:1;width:100%;height:100%}.timeline-item:has(.timeline-item-icon) .timeline-item-dot{width:24px;height:24px;background:var(--bg-primary, #f8fafc);display:flex !important;align-items:center;justify-content:center}.timeline-vertical .timeline-item:has(.timeline-item-icon) .timeline-item-dot{left:-6px;top:0}.timeline-align-alternate.timeline-vertical .timeline-item:has(.timeline-item-icon) .timeline-item-dot{left:50%;transform:translateX(-50%)}.timeline-align-right.timeline-vertical .timeline-item:has(.timeline-item-icon) .timeline-item-dot{right:-6px;left:auto}.dot-inner{width:4px;height:4px;background:var(--color-primary, #10b981);border-radius:50%}.timeline-item-success .dot-inner{background:var(--color-success, #10b981)}.timeline-item-danger .dot-inner{background:var(--color-danger, #ef4444)}.timeline-item-warning .dot-inner{background:var(--color-warning, #f59e0b)}.timeline-item{transition:opacity 0.2s ease}.timeline-item:hover .timeline-item-dot{transform:scale(1.2)}.timeline-variant-panel .timeline-item-content{background:var(--bg-primary, #ffffff);border:1px solid var(--border-default, #e5e7eb);padding:16px;border-radius:8px;box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);position:relative;transition:transform 0.2s, box-shadow 0.2s}.timeline-variant-panel .timeline-item-content::before{content:"";position:absolute;width:10px;height:10px;background:var(--bg-primary, #ffffff);border-left:1px solid var(--border-default, #e5e7eb);border-bottom:1px solid var(--border-default, #e5e7eb);transform:rotate(45deg);display:none;}.timeline-variant-panel .timeline-item:hover .timeline-item-content{box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);transform:translateY(-2px)}.timeline-item-number{color:var(--color-primary, #10b981);font-size:14px;font-weight:700;line-height:1}.timeline-marker-number .timeline-item-dot,.timeline-item:has(.timeline-item-number) .timeline-item-dot{width:32px;height:32px;background:var(--bg-primary, #ffffff);border:2px solid var(--color-primary, #10b981)}.timeline-item-active .timeline-item-number{color:var(--text-standard, #ffffff)}.timeline-item-active.timeline-marker-number .timeline-item-dot{background:var(--color-primary, #10b981)}.timeline-item-image{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}.timeline-item:has(.timeline-item-image) .timeline-item-dot{width:24px;height:24px;padding:0;overflow:hidden;border-radius:50%;position:relative;border:2px solid var(--color-primary, #10b981);border-color:var(--color-primary, #cbd5e1);box-shadow:none;background:var(--bg-primary, #ffffff)}.timeline-item-active:has(.timeline-item-image) .timeline-item-dot{border-color:var(--color-primary, #10b981);box-shadow:0 0 0 4px rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);}.timeline-vertical .timeline-item:has(.timeline-item-image) .timeline-item-dot{left:-6px}.timeline-align-right.timeline-vertical .timeline-item:has(.timeline-item-image) .timeline-item-dot{right:-6px;left:auto}.timeline-row .timeline-item:has(.timeline-item-image) .timeline-item-dot,.timeline-row .timeline-item:has(.timeline-item-icon) .timeline-item-dot{margin-top:113px}.timeline-item:has(.timeline-item-icon) .timeline-item-dot{width:24px;height:24px;background:var(--bg-primary, #f8fafc)}.timeline-vertical .timeline-item:has(.timeline-item-icon) .timeline-item-dot{left:-6px;top:0}.timeline-align-alternate.timeline-vertical .timeline-item:has(.timeline-item-icon) .timeline-item-dot{left:50%;transform:translateX(-50%)}.timeline-align-right.timeline-vertical .timeline-item:has(.timeline-item-icon) .timeline-item-dot{right:-6px;left:auto}.dot-inner{width:4px;height:4px;background:var(--color-primary, #10b981);border-radius:50%}.timeline-item-success .dot-inner{background:var(--color-success, #10b981)}.timeline-item-danger .dot-inner{background:var(--color-danger, #ef4444)}.timeline-item-warning .dot-inner{background:var(--color-warning, #f59e0b)}.timeline-item{transition:opacity 0.2s ease}.timeline-item:hover .timeline-item-dot{transform:scale(1.2)}.timeline-variant-panel .timeline-item-content{background:var(--bg-primary, #ffffff);border:1px solid var(--border-default, #e5e7eb);padding:16px;border-radius:8px;box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);position:relative;transition:transform 0.2s, box-shadow 0.2s}.timeline-variant-panel .timeline-item-content::before{content:"";position:absolute;width:10px;height:10px;background:var(--bg-primary, #ffffff);border-left:1px solid var(--border-default, #e5e7eb);border-bottom:1px solid var(--border-default, #e5e7eb);transform:rotate(45deg);display:none;}.timeline-variant-panel .timeline-item:hover .timeline-item-content{box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);transform:translateY(-2px)}.timeline-item-number{color:var(--color-primary, #10b981);font-size:14px;font-weight:700;line-height:1}.timeline-marker-number .timeline-item-dot,.timeline-item:has(.timeline-item-number) .timeline-item-dot{width:32px;height:32px;background:var(--bg-primary, #ffffff);border:2px solid var(--color-primary, #10b981)}.timeline-item-active .timeline-item-number{color:var(--text-standard, #ffffff)}.timeline-item-active.timeline-marker-number .timeline-item-dot{background:var(--color-primary, #10b981)}.timeline-item-image{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}.timeline-item:has(.timeline-item-image) .timeline-item-dot{width:24px;height:24px;padding:0;overflow:hidden;border-radius:50%;position:relative;border:2px solid var(--color-primary, #10b981);border-color:var(--color-primary, #cbd5e1);box-shadow:none;background:var(--bg-primary, #ffffff)}.timeline-item-active:has(.timeline-item-image) .timeline-item-dot{border-color:var(--color-primary, #10b981);box-shadow:0 0 0 4px rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);}.timeline-vertical .timeline-item:has(.timeline-item-image) .timeline-item-dot{left:0}.timeline-align-right.timeline-vertical .timeline-item:has(.timeline-item-image) .timeline-item-dot{right:-6px;left:auto}.timeline-row .timeline-item:has(.timeline-item-image) .timeline-item-dot,.timeline-row .timeline-item:has(.timeline-item-icon) .timeline-item-dot{margin-top:113px}.timeline-row .timeline-item:has(.timeline-item-number) .timeline-item-dot{margin-top:117px;}.timeline-item-title{font-weight:600;font-size:14px;color:var(--text-primary, #1f2937);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.timeline-item-time{font-size:12px;color:var(--text-muted, #6b7280);margin-bottom:2px;font-family:monospace;font-weight:500}.timeline-item-content{min-width:0;}.timeline-item-desc{font-size:13px;color:var(--text-secondary, #4b5563);margin-top:4px;line-height:1.5;display:-webkit-box !important;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;cursor:help;transition:all 0.2s;}.timeline-item-title:hover{white-space:normal;overflow:visible;z-index:50;position:relative;background:rgba(255, 255, 255, 0.9);}.timeline-item-desc:hover{-webkit-line-clamp:unset !important;line-clamp:unset !important;overflow:visible;z-index:50;position:relative;background:rgba(255, 255, 255, 0.9)}@media (prefers-color-scheme: dark){.timeline-item-title{color:var(--text-standard, #f3f4f6)}.timeline-item-desc{color:var(--text-muted, #9ca3af)}.timeline-item-line{background-color:var(--text-secondary, #374151)}.timeline-item-dot{background:var(--bg-primary, #1f2937);border-color:var(--color-primary, #10b981);}.timeline-vertical .timeline-item-dot{background:var(--bg-primary, #1f2937)}.timeline-variant-panel .timeline-item-content{background:var(--bg-primary, #1f2937);border-color:var(--border-default, #374151)}.timeline-variant-panel .timeline-item-content::before{background:var(--bg-primary, #1f2937);border-color:var(--border-default, #374151)}.timeline-marker-number .timeline-item-dot,.timeline-item:has(.timeline-item-number) .timeline-item-dot{background:var(--bg-primary, #1f2937);border-color:var(--color-primary, #10b981)}}.timeline-wrapper{display:flex;flex-direction:column;gap:20px}.timeline-search-header{margin-bottom:24px;padding:0 4px}.timeline-search-input{width:100%;padding:10px 16px;border:1px solid var(--border-default, #e5e7eb);border-radius:8px;font-size:14px;outline:none;transition:all 0.2s ease;background:var(--bg-primary, #f9fafb)}.timeline-search-input:focus{border-color:var(--color-primary, #10b981);background:var(--bg-primary, #ffffff);box-shadow:0 0 0 4px rgba(var(--color-primary-rgb, 59, 130, 246), 0.1)}.timeline-item-clickable{cursor:pointer}.timeline-item-clickable:hover{opacity:0.8}.timeline-item-clickable:hover .timeline-item-dot{transform:scale(1.3);box-shadow:0 0 0 6px rgba(var(--color-primary-rgb, 59, 130, 246), 0.15)}.timeline-item-pending .timeline-item-line{border-left:2px dashed var(--color-primary, #cbd5e1);background-color:transparent}.timeline-item-pending .dot-inner{background:var(--color-primary, #cbd5e1);animation:timeline-pulse-inner 1.5s infinite ease-in-out}@keyframes timeline-pulse-inner{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:0.5}}.timeline-item.is-active .timeline-item-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid currentColor;animation:timeline-pulse 2s infinite}.timeline-horizontal .timeline-item-pending .timeline-item-line{border-top:2px dashed var(--color-primary, #cbd5e1);background-color:transparent;height:0}.timeline-horizontal.timeline-align-alternate .timeline-item-pending .timeline-item-line{top:50%}:host{display:block;width:100%;--timeline-line-color:var(--color-primary, #10b981);--timeline-line-width:2px;--timeline-dot-size:12px;--timeline-dot-color:var(--color-primary, #10b981)}.timeline-container{position:relative;padding:20px 0;width:100%}.timeline-vertical{display:flex;flex-direction:column;gap:0}.timeline-vertical .timeline-item{position:relative;display:flex;align-items:center;min-height:80px;padding:0}.timeline-vertical .timeline-item .timeline-dot{position:relative;flex-shrink:0;z-index:2;display:flex;align-items:center;justify-content:center;border-radius:50%;border:3px solid var(--timeline-dot-color);background:var(--bg-primary, #ffffff);transition:all 0.3s ease}.timeline-vertical .timeline-item .timeline-dot i{font-size:calc(var(--timeline-dot-size) * 0.8)}.timeline-vertical .timeline-item .timeline-line{position:absolute;left:calc(var(--timeline-dot-size));top:calc(var(--timeline-dot-size) + 3px);bottom:calc(-1 * var(--timeline-dot-size) - 3px);width:var(--timeline-line-width);background:var(--timeline-line-color);z-index:1}.timeline-vertical .timeline-item .timeline-content{flex:1;padding:0 24px;margin-top:4px}.timeline-vertical.timeline-align-left .timeline-item{flex-direction:row}.timeline-vertical.timeline-align-left .timeline-item .timeline-dot{margin-right:0}.timeline-vertical.timeline-align-left .timeline-item .timeline-line{left:calc(var(--timeline-dot-size));right:auto}.timeline-vertical.timeline-align-left .timeline-item .timeline-content{text-align:left;padding-left:24px;padding-right:0}.timeline-vertical.timeline-align-right .timeline-item{flex-direction:row-reverse}.timeline-vertical.timeline-align-right .timeline-item .timeline-dot{margin-left:0;margin-right:0}.timeline-vertical.timeline-align-right .timeline-item .timeline-line{left:auto;right:calc(var(--timeline-dot-size))}.timeline-vertical.timeline-align-right .timeline-item .timeline-content{text-align:right;padding-right:24px;padding-left:0}.timeline-vertical.timeline-align-center{display:flex;flex-direction:column;align-items:center}.timeline-vertical.timeline-align-center .timeline-item{width:50%;flex-direction:row;justify-content:flex-start}.timeline-vertical.timeline-align-center .timeline-item .timeline-dot{position:absolute;left:-12px;margin-right:0}.timeline-vertical.timeline-align-center .timeline-item .timeline-line{position:absolute;left:-2px;right:auto}.timeline-vertical.timeline-align-center .timeline-item .timeline-content{text-align:left;padding-left:24px;padding-right:0;margin-left:12px}.timeline-vertical.timeline-align-alternate{display:flex;flex-direction:column;align-items:center}.timeline-vertical.timeline-align-alternate .timeline-item{width:50%}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-dot{position:absolute}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-line{position:absolute}.timeline-vertical.timeline-align-alternate .timeline-item.timeline-item-left{flex-direction:row-reverse;align-self:flex-start}.timeline-vertical.timeline-align-alternate .timeline-item.timeline-item-left .timeline-dot{right:-12px;left:auto}.timeline-vertical.timeline-align-alternate .timeline-item.timeline-item-left .timeline-content{text-align:right;padding-right:24px;padding-left:0;margin-right:12px}.timeline-vertical.timeline-align-alternate .timeline-item.timeline-item-left .timeline-line{right:-2px;left:auto}.timeline-vertical.timeline-align-alternate .timeline-item.timeline-item-right{flex-direction:row;align-self:flex-end}.timeline-vertical.timeline-align-alternate .timeline-item.timeline-item-right .timeline-dot{left:-12px;right:auto}.timeline-vertical.timeline-align-alternate .timeline-item.timeline-item-right .timeline-content{text-align:left;padding-left:24px;padding-right:0;margin-left:12px}.timeline-vertical.timeline-align-alternate .timeline-item.timeline-item-right .timeline-line{left:-2px;right:auto}.timeline-horizontal{display:flex;gap:0;overflow-x:auto;padding:40px 0;scrollbar-width:thin;scrollbar-color:var(--timeline-line-color) transparent}.timeline-horizontal::-webkit-scrollbar{height:6px}.timeline-horizontal::-webkit-scrollbar-track{background:transparent}.timeline-horizontal::-webkit-scrollbar-thumb{background-color:var(--timeline-line-color);border-radius:20px}.timeline-horizontal{scroll-snap-type:x mandatory}.timeline-horizontal .timeline-item{position:relative;display:flex;flex-direction:column;align-items:center;min-width:150px;padding:0;flex-shrink:0;scroll-snap-align:center}.timeline-horizontal .timeline-item .timeline-dot{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;border-radius:50%;border:3px solid var(--timeline-dot-color);background:var(--bg-primary, #ffffff);transition:all 0.3s ease}.timeline-horizontal .timeline-item .timeline-dot i{font-size:calc(var(--timeline-dot-size) * 0.8)}.timeline-horizontal .timeline-item .timeline-line{position:absolute;left:calc(var(--timeline-dot-size) * 2);right:calc(-100% + var(--timeline-dot-size) * 2);top:calc(var(--timeline-dot-size));height:var(--timeline-line-width);width:auto;background:var(--timeline-line-color);z-index:1}.timeline-horizontal .timeline-item .timeline-content{padding:16px 12px;max-width:200px}.timeline-horizontal.timeline-align-left .timeline-item,.timeline-horizontal.timeline-align-top .timeline-item{flex-direction:column-reverse}.timeline-horizontal.timeline-align-left .timeline-item .timeline-content,.timeline-horizontal.timeline-align-top .timeline-item .timeline-content{text-align:center}.timeline-horizontal.timeline-align-right .timeline-item .timeline-content,.timeline-horizontal.timeline-align-bottom .timeline-item .timeline-content{text-align:center}.timeline-horizontal.timeline-align-alternate .timeline-item.timeline-item-top{flex-direction:column-reverse}.timeline-horizontal.timeline-align-alternate .timeline-item .timeline-content{text-align:center}.timeline-content{background:var(--bg-primary, #ffffff);border-radius:8px;border:1px solid var(--border-default, #e5e7eb);box-shadow:0 1px 3px rgba(0, 0, 0, 0.1);transition:all 0.3s ease}.timeline-date{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:12px;color:var(--text-secondary);font-weight:500}.timeline-date .timeline-date-text{color:var(--primary-color)}.timeline-date .timeline-time-text{color:var(--text-secondary)}.timeline-image{margin:-1px -1px 12px -1px;border-radius:8px 8px 0 0;overflow:hidden}.timeline-image img{width:100%;height:auto;display:block}.timeline-header{margin-bottom:8px}.timeline-title{margin:0;font-size:16px;font-weight:600;color:var(--text-primary, #111827);line-height:1.4}.timeline-description{margin:0;font-size:14px;color:var(--text-secondary);line-height:1.6}.timeline-custom{margin-top:12px}.timeline-badge{position:absolute;top:-6px;right:-6px;background:var(--color-danger, #ef4444);color:var(--text-standard, #ffffff);font-size:10px;font-weight:600;padding:2px 6px;border-radius:10px;min-width:18px;text-align:center}.timeline-variant-outlined .timeline-content{background:transparent;border:2px solid var(--border-default, #e5e7eb);box-shadow:none}.timeline-variant-filled .timeline-content{background:var(--bg-secondary, #f3f4f6);border:none;box-shadow:none}.timeline-variant-minimal .timeline-content{background:transparent;border:none;box-shadow:none;padding:8px 12px}.timeline-variant-minimal .timeline-dot{border-width:2px !important}.timeline-variant-dots-only .timeline-content{display:none}.timeline-variant-dots-only .timeline-dot{cursor:pointer}.timeline-variant-dots-only .timeline-dot:hover{transform:scale(1.2)}.timeline-compact.timeline-vertical .timeline-item{min-height:50px}.timeline-compact.timeline-vertical .timeline-item .timeline-content{padding:0 16px}.timeline-compact.timeline-horizontal .timeline-item{min-width:100px}.timeline-compact.timeline-horizontal .timeline-item .timeline-content{padding:8px;max-width:150px}.timeline-compact .timeline-content{padding:8px 12px}.timeline-compact .timeline-title{font-size:14px}.timeline-compact .timeline-description{font-size:12px}.timeline-item-clickable{cursor:pointer}.timeline-item-clickable .timeline-content:hover{box-shadow:0 4px 6px rgba(0, 0, 0, 0.15);transform:translateY(-2px);border-color:var(--timeline-dot-color)}.timeline-item-clickable.timeline-item-active .timeline-content{border-color:var(--timeline-dot-color);box-shadow:0 0 0 3px rgba(var(--color-primary-rgb, 59, 130, 246), 0.1)}.timeline-item-clickable.timeline-item-active .timeline-dot{transform:scale(1.2);box-shadow:0 0 0 4px rgba(var(--color-primary-rgb, 59, 130, 246), 0.2)}.timeline-animated .timeline-item{opacity:0;transition:opacity 0.6s ease, transform 0.6s ease}.timeline-animated .timeline-item.timeline-item-visible{opacity:1}.timeline-animated.timeline-vertical .timeline-item{transform:translateX(-30px)}.timeline-animated.timeline-vertical .timeline-item.timeline-item-right{transform:translateX(30px)}.timeline-animated.timeline-vertical .timeline-item.timeline-item-visible{transform:translateX(0)}.timeline-animated.timeline-horizontal .timeline-item{transform:translateY(30px)}.timeline-animated.timeline-horizontal .timeline-item.timeline-item-top{transform:translateY(-30px)}.timeline-animated.timeline-horizontal .timeline-item.timeline-item-visible{transform:translateY(0)}.timeline-icon-top.timeline-vertical .timeline-item{align-items:flex-start}.timeline-icon-top.timeline-vertical .timeline-item .timeline-dot{margin-top:0}.timeline-icon-top.timeline-vertical .timeline-item .timeline-line{top:calc(var(--timeline-dot-size) + 3px)}.timeline-icon-top.timeline-horizontal.timeline-align-top .timeline-item .timeline-dot{align-self:flex-start}.timeline-icon-top.timeline-horizontal.timeline-align-bottom .timeline-item .timeline-dot{align-self:flex-start}.timeline-icon-center.timeline-vertical .timeline-item{align-items:center}.timeline-icon-center.timeline-vertical .timeline-item .timeline-dot{margin-top:0}.timeline-icon-center.timeline-vertical .timeline-item .timeline-line{top:50%;transform:translateY(calc(var(--timeline-dot-size) / 2 + 3px));bottom:calc(-50% - var(--timeline-dot-size) / 2 - 3px)}.timeline-icon-center.timeline-horizontal .timeline-item .timeline-dot{align-self:center}.timeline-icon-bottom.timeline-vertical .timeline-item{align-items:flex-start}.timeline-icon-bottom.timeline-vertical .timeline-item .timeline-dot{margin-top:auto;align-self:flex-end}.timeline-icon-bottom.timeline-vertical .timeline-item .timeline-line{top:auto;bottom:calc(-1 * var(--timeline-dot-size) - 3px);height:calc(100% - var(--timeline-dot-size) - 3px);transform:none}.timeline-icon-bottom.timeline-vertical.timeline-align-center .timeline-item .timeline-line{left:-2px;right:auto}.timeline-icon-bottom.timeline-vertical.timeline-align-alternate .timeline-item-left .timeline-line{right:-2px;left:auto}.timeline-icon-bottom.timeline-vertical.timeline-align-alternate .timeline-item-right .timeline-line{left:-2px;right:auto}.timeline-icon-bottom.timeline-horizontal.timeline-align-top .timeline-item .timeline-dot{align-self:flex-end}.timeline-icon-bottom.timeline-horizontal.timeline-align-bottom .timeline-item .timeline-dot{align-self:flex-end}@media (max-width: 768px){.timeline-horizontal{flex-direction:column;overflow-x:visible}.timeline-horizontal .timeline-item{min-width:100%;flex-direction:row;align-items:flex-start}.timeline-horizontal .timeline-item .timeline-line{left:calc(var(--timeline-dot-size));top:calc(var(--timeline-dot-size) * 2);bottom:calc(-100% + var(--timeline-dot-size) * 2);right:auto;width:var(--timeline-line-width);height:auto}.timeline-horizontal .timeline-item .timeline-content{padding:0 24px;max-width:none;text-align:left !important}.timeline-vertical.timeline-align-alternate,.timeline-vertical.timeline-align-center{padding-left:0}.timeline-vertical.timeline-align-alternate .timeline-item,.timeline-vertical.timeline-align-center .timeline-item{flex-direction:row !important;transform:none !important;padding-right:0 !important}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-content,.timeline-vertical.timeline-align-center .timeline-item .timeline-content{text-align:left !important}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-line,.timeline-vertical.timeline-align-center .timeline-item .timeline-line{left:calc(var(--timeline-dot-size)) !important;right:auto !important}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-balanced-item,.timeline-vertical.timeline-align-center .timeline-item .timeline-balanced-item{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:flex-start;min-height:80px;width:100%;position:relative}}@media (max-width: 768px) and (max-width: 768px){.timeline-vertical.timeline-align-alternate .timeline-item .timeline-balanced-item,.timeline-vertical.timeline-align-center .timeline-item .timeline-balanced-item{display:flex;flex-direction:column;padding-left:30px}}@media (max-width: 768px){.timeline-vertical.timeline-align-alternate .timeline-item .timeline-balanced-item .timeline-side,.timeline-vertical.timeline-align-center .timeline-item .timeline-balanced-item .timeline-side{min-width:0;display:flex;flex-direction:column;justify-content:center}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-balanced-item .timeline-side.timeline-side-left,.timeline-vertical.timeline-align-center .timeline-item .timeline-balanced-item .timeline-side.timeline-side-left{align-items:flex-end;text-align:right}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-balanced-item .timeline-side.timeline-side-right,.timeline-vertical.timeline-align-center .timeline-item .timeline-balanced-item .timeline-side.timeline-side-right{align-items:flex-start;text-align:left}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-balanced-item .timeline-separator,.timeline-vertical.timeline-align-center .timeline-item .timeline-balanced-item .timeline-separator{display:flex;flex-direction:column;align-items:center;position:relative;height:100%;min-width:24px}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-balanced-item .timeline-separator .timeline-line-vertical,.timeline-vertical.timeline-align-center .timeline-item .timeline-balanced-item .timeline-separator .timeline-line-vertical{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:var(--timeline-line-width);background-color:var(--timeline-line-color);z-index:0}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-balanced-item .timeline-separator .timeline-marker,.timeline-vertical.timeline-align-center .timeline-item .timeline-balanced-item .timeline-separator .timeline-marker{position:relative;z-index:1;margin-top:4px}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-balanced-item .timeline-opposite-date,.timeline-vertical.timeline-align-center .timeline-item .timeline-balanced-item .timeline-opposite-date{font-size:0.9rem;color:var(--text-secondary);font-weight:500;padding:6px 16px;border-radius:20px;background:rgba(0, 0, 0, 0.03);margin:10px 0;display:inline-block;transition:all 0.3s ease}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-balanced-item .timeline-opposite-date:hover,.timeline-vertical.timeline-align-center .timeline-item .timeline-balanced-item .timeline-opposite-date:hover{background:rgba(0, 0, 0, 0.06);transform:translateY(-2px)}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-icon-center .timeline-balanced-item,.timeline-vertical.timeline-align-center .timeline-item .timeline-icon-center .timeline-balanced-item{align-items:center}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-icon-center .timeline-balanced-item .timeline-separator .timeline-marker,.timeline-vertical.timeline-align-center .timeline-item .timeline-icon-center .timeline-balanced-item .timeline-separator .timeline-marker{margin-top:0}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-icon-bottom .timeline-balanced-item,.timeline-vertical.timeline-align-center .timeline-item .timeline-icon-bottom .timeline-balanced-item{align-items:flex-end}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-icon-bottom .timeline-balanced-item .timeline-separator .timeline-marker,.timeline-vertical.timeline-align-center .timeline-item .timeline-icon-bottom .timeline-balanced-item .timeline-separator .timeline-marker{margin-top:auto;margin-bottom:4px}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-animated .timeline-balanced-item .timeline-side-left,.timeline-vertical.timeline-align-alternate .timeline-item .timeline-animated .timeline-balanced-item .timeline-side-right,.timeline-vertical.timeline-align-alternate .timeline-item .timeline-animated .timeline-balanced-item .timeline-separator,.timeline-vertical.timeline-align-center .timeline-item .timeline-animated .timeline-balanced-item .timeline-side-left,.timeline-vertical.timeline-align-center .timeline-item .timeline-animated .timeline-balanced-item .timeline-side-right,.timeline-vertical.timeline-align-center .timeline-item .timeline-animated .timeline-balanced-item .timeline-separator{opacity:0;transition:all 0.6s ease}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-animated .timeline-balanced-item .timeline-side-left,.timeline-vertical.timeline-align-center .timeline-item .timeline-animated .timeline-balanced-item .timeline-side-left{transform:translateX(-20px)}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-animated .timeline-balanced-item .timeline-side-right,.timeline-vertical.timeline-align-center .timeline-item .timeline-animated .timeline-balanced-item .timeline-side-right{transform:translateX(20px)}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-animated .timeline-balanced-item .timeline-separator,.timeline-vertical.timeline-align-center .timeline-item .timeline-animated .timeline-balanced-item .timeline-separator{transform:scale(0.5)}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-animated .timeline-balanced-item.timeline-item-visible .timeline-side-left,.timeline-vertical.timeline-align-alternate .timeline-item .timeline-animated .timeline-balanced-item.timeline-item-visible .timeline-side-right,.timeline-vertical.timeline-align-alternate .timeline-item .timeline-animated .timeline-balanced-item.timeline-item-visible .timeline-separator,.timeline-vertical.timeline-align-center .timeline-item .timeline-animated .timeline-balanced-item.timeline-item-visible .timeline-side-left,.timeline-vertical.timeline-align-center .timeline-item .timeline-animated .timeline-balanced-item.timeline-item-visible .timeline-side-right,.timeline-vertical.timeline-align-center .timeline-item .timeline-animated .timeline-balanced-item.timeline-item-visible .timeline-separator{opacity:1;transform:none}}.timeline-snake-container{display:flex;flex-direction:column;gap:40px;width:100%}.timeline-snake-row{display:flex;width:100%;position:relative}.timeline-snake-row.timeline-snake-row-odd{flex-direction:row-reverse}.timeline-snake-row.timeline-snake-row-odd .timeline-item .timeline-snake-turn{right:auto;left:0;border-right:none;border-left:2px solid var(--timeline-line-color);border-radius:0 0 0 16px}.timeline-snake-item{flex:0 0 10%;display:flex;flex-direction:column;align-items:center;position:relative;min-width:0;padding:0 10px}.timeline-snake-item .timeline-content{margin-top:12px;text-align:center;font-size:0.85rem;padding:8px;width:100%}.timeline-snake-item .timeline-dot{z-index:2}.timeline-snake-item .timeline-line-horizontal{position:absolute;top:calc(var(--timeline-dot-size) + 1px);top:calc(var(--timeline-dot-size));left:50%;width:100%;height:var(--timeline-line-width);background-color:var(--timeline-line-color);z-index:1}.timeline-snake-item .timeline-snake-turn{position:absolute;top:calc(var(--timeline-dot-size));right:0;width:50%;height:calc(100% + 40px);border-top:var(--timeline-line-width) solid var(--timeline-line-color);border-right:var(--timeline-line-width) solid var(--timeline-line-color);border-radius:0 50px 50px 0;z-index:1;pointer-events:none;opacity:0.8}.timeline-snake-row.timeline-snake-row-odd .timeline-item .timeline-snake-turn{border-radius:0 0 0 50px}:host-context([dir=rtl]) .timeline-align-left.timeline-vertical .timeline-item-line,:host([dir=rtl]) .timeline-align-left.timeline-vertical .timeline-item-line{left:auto;right:5px}:host-context([dir=rtl]) .timeline-align-left.timeline-vertical .timeline-item-dot,:host([dir=rtl]) .timeline-align-left.timeline-vertical .timeline-item-dot{left:auto;right:0}:host-context([dir=rtl]) .timeline-align-left.timeline-vertical .timeline-item-details,:host([dir=rtl]) .timeline-align-left.timeline-vertical .timeline-item-details{padding-left:0;padding-right:48px;text-align:right;align-items:flex-end}:host-context([dir=rtl]) .timeline-align-right.timeline-vertical .timeline-item,:host([dir=rtl]) .timeline-align-right.timeline-vertical .timeline-item{flex-direction:row}:host-context([dir=rtl]) .timeline-align-right.timeline-vertical .timeline-item-line,:host([dir=rtl]) .timeline-align-right.timeline-vertical .timeline-item-line{right:auto;left:5px}:host-context([dir=rtl]) .timeline-align-right.timeline-vertical .timeline-item-dot,:host([dir=rtl]) .timeline-align-right.timeline-vertical .timeline-item-dot{right:auto;left:0}:host-context([dir=rtl]) .timeline-align-right.timeline-vertical .timeline-item-details,:host([dir=rtl]) .timeline-align-right.timeline-vertical .timeline-item-details{padding-right:0;padding-left:48px;text-align:left;align-items:flex-start}:host-context([dir=rtl]) .timeline-align-alternate.timeline-vertical .side-left .timeline-item-details,:host([dir=rtl]) .timeline-align-alternate.timeline-vertical .side-left .timeline-item-details{padding-right:0;padding-left:48px;text-align:left;align-items:flex-start;margin-left:50%;margin-right:0}:host-context([dir=rtl]) .timeline-align-alternate.timeline-vertical .side-right .timeline-item-details,:host([dir=rtl]) .timeline-align-alternate.timeline-vertical .side-right .timeline-item-details{padding-left:0;padding-right:48px;text-align:right;align-items:flex-end;margin-left:0;margin-right:0;width:50%}:host-context([dir=rtl]) .timeline-align-right.timeline-vertical .timeline-item:has(.timeline-item-icon) .timeline-item-dot,:host([dir=rtl]) .timeline-align-right.timeline-vertical .timeline-item:has(.timeline-item-icon) .timeline-item-dot{right:auto;left:-6px}'}},[513,"ui-timeline",{events:[1],flow:[1],mode:[1],align:[1],theme:[16],multiline:[4],columns:[2],variant:[1],marker:[1],clickable:[4],reverse:[4],pending:[4],searchable:[4],lineColor:[1,"line-color"],lineWidth:[2,"line-width"],dotSize:[2,"dot-size"],dotColor:[1,"dot-color"],showLine:[4,"show-line"],showDots:[4,"show-dots"],animateOnScroll:[4,"animate-on-scroll"],compact:[4],wrap:[4],showDates:[4,"show-dates"],dateFormat:[1,"date-format"],iconPosition:[1,"icon-position"],normalizedEvents:[32],activeItemId:[32],visibleItems:[32],searchQuery:[32],isRtl:[32],isMobile:[32]},void 0,{events:[{normalizeEvents:0}]}]),p=c,g=function(){"undefined"!=typeof customElements&&["ui-timeline","ui-badge","ui-button","ui-icon","ui-input"].forEach((e=>{switch(e){case"ui-timeline":customElements.get(m(e))||customElements.define(m(e),c);break;case"ui-badge":customElements.get(m(e))||d();break;case"ui-button":customElements.get(m(e))||o();break;case"ui-icon":customElements.get(m(e))||r();break;case"ui-input":customElements.get(m(e))||s()}}))};export{p as UiTimeline,g as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as i,createEvent as t,h as n,Host as l,transformTag as m}from"@stencil/core/internal/client";import{s as a,d as r}from"./icon.js";import{d as o,a as d}from"./badge.js";import{d as s}from"./input.js";import{d as c}from"./loader.js";const p=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.itemVisible=t(this,"itemVisible",7),this.itemClick=t(this,"itemClick",7)}events=[];normalizedEvents=[];flow="linear";mode="vertical";align="left";theme;multiline=!1;columns=4;variant="default";marker="dot";clickable=!1;reverse=!1;pending=!1;searchable=!1;lineColor="#3bf673";lineWidth=2;dotSize=12;dotColor="#3bf673";showLine=!0;showDots=!0;animateOnScroll=!1;compact=!1;wrap=!1;showDates=!0;dateFormat="short";iconPosition="center";activeItemId;visibleItems=new Set;searchQuery="";itemVisible;itemClick;get el(){return this}normalizeEvents(e){if("string"==typeof e)try{this.normalizedEvents=JSON.parse(e)}catch{this.normalizedEvents=[]}else this.normalizedEvents=e||[]}isRtl=!1;isMobile=!1;observer;componentWillLoad(){this.normalizeEvents(this.events)}componentDidLoad(){this.animateOnScroll&&this.setupIntersectionObserver(),this.checkMobile(),this.checkRtl(),window.addEventListener("resize",this.handleResize)}disconnectedCallback(){this.observer&&this.observer.disconnect(),window.removeEventListener("resize",this.handleResize)}handleResize=()=>{this.checkMobile()};checkMobile(){this.isMobile=window.innerWidth<=768}checkRtl(){this.isRtl="rtl"===getComputedStyle(this.el).direction||null!==this.el.closest('[dir="rtl"]')||"rtl"===document.documentElement.dir}setupIntersectionObserver(){void 0!==globalThis.IntersectionObserver&&(this.observer=new IntersectionObserver((e=>{e.forEach((e=>{if(e.isIntersecting){const i=e.target.getAttribute("data-item-id"),t=e.target.getAttribute("data-item-index");if(i||t){this.visibleItems=new Set([...this.visibleItems,i||t]);const e=parseInt(t||"0",10),n=this.normalizedEvents[e];n&&this.itemVisible.emit({item:n,index:e})}}}))}),{threshold:.2}))}getProcessedEvents(){let e=[...this.normalizedEvents];if(this.searchable&&this.searchQuery){const i=this.searchQuery.toLowerCase();e=e.filter((e=>e.label.toLowerCase().includes(i)||e.description&&e.description.toLowerCase().includes(i)||e.opposite&&"string"==typeof e.opposite&&e.opposite.toLowerCase().includes(i)||e.customContent&&e.customContent.toLowerCase().includes(i)))}return this.reverse&&e.reverse(),e}handleSearch=e=>{this.searchQuery=e.detail};handleItemClick=e=>{this.clickable&&this.itemClick.emit(e)};render(){const e=this.getProcessedEvents(),i=this.isMobile&&this.compact?"vertical":this.mode,t=["timeline-container","timeline-"+i,"timeline-align-"+this.align,(this.multiline||this.wrap)&&"timeline-multiline","timeline-variant-"+this.variant,"timeline-marker-"+this.marker,this.clickable&&"timeline-clickable",this.animateOnScroll&&"timeline-animated",this.compact&&"timeline-compact","timeline-icon-"+this.iconPosition].filter(Boolean).join(" "),m={...this.theme,"--timeline-line-color":this.lineColor,"--timeline-line-width":this.lineWidth+"px","--timeline-dot-size":this.dotSize+"px","--timeline-dot-color":this.dotColor},a="horizontal"===i&&(this.multiline||this.wrap)?this.renderMultiline(t,e,m):n("div",{class:t,style:m},e.map(((e,i)=>this.renderEventItem(e,i))),this.pending&&this.renderPendingItem(e.length));return n(l,{key:"895dad278ac5ef9373c0053fe80f39d4c0850ba0"},n("div",{key:"83841752c240e330781abd770ba5079305d18ced",class:"timeline-wrapper"},this.searchable&&n("div",{key:"068ab74adbeb338f0ae91bb6f2d69ae91c426d2d",class:"timeline-search-header"},n("ui-input",{key:"8c1e6d69c5f10e25e6abdab5eedd84a93727729b",type:"text",class:"timeline-search-input",placeholder:"Search events...",onInputChange:this.handleSearch,value:this.searchQuery,size:"sm",fullWidth:!0})),a))}renderMultiline(e,i,t){const l=this.columns>0?this.columns:4,m=[];for(let e=0;e<i.length;e+=l)m.push(i.slice(e,e+l));return n("div",{class:`${e} ${this.wrap?"timeline-snake-container":""}`,style:t},m.map(((e,i)=>n("div",{class:{"timeline-row":!0,"timeline-row-even":i%2==0,"timeline-row-odd":i%2!=0}},e.map(((t,n)=>this.renderEventItem(t,i*this.columns+n,!0,n===e.length-1)))))),this.pending&&this.renderPendingItem(i.length,!0))}renderPendingItem(e,i=!1){const t=this.isRtl?e%2!=0:e%2==0,l="alternate"===this.align?t?"left":"right":this.align,m="alternate"===this.align?t?"top":"bottom":"top"===this.align?"top":"bottom";return n("div",{class:{"timeline-item":!0,"timeline-item-pending":!0,["side-"+l]:"vertical"===this.mode,["side-"+m]:"horizontal"===this.mode,"is-multiline":i}},n("div",{class:"timeline-item-line"}),n("div",{class:"timeline-item-dot"},n("span",{class:"dot-inner"})),n("div",{class:"timeline-item-details"},n("div",{class:"timeline-item-content"},n("div",{class:"timeline-item-title"},"Pending..."))))}renderEventItem(e,i,t=!1,l=!1){const m="alternate"===this.align,r=this.isRtl?i%2!=0:i%2==0,o=m?r?"left":"right":this.align,d=m?r?"top":"bottom":"top"===this.align?"top":"bottom";let s;const c={};e.dotColor&&(c.borderColor=e.dotColor),e.iconBackground&&(c.backgroundColor=e.iconBackground);const p={};e.iconColor&&(p.color=e.iconColor),s=e.image?n("img",{src:e.image,alt:e.label,class:"timeline-item-image",width:"24",height:"24"}):e.icon||"icon"===this.marker?n("span",{class:"timeline-item-icon",style:p},e.icon&&e.icon.includes("<svg")?n("span",{innerHTML:a(e.icon)}):n("ui-icon",{name:e.icon||"default-icon",library:"fontawesome"})):"number"===this.marker?n("span",{class:"timeline-item-number"},i+1):n("span",{class:"dot-inner"});const g=this.visibleItems.has(e.id||""+i);return n("div",{"data-item-id":e.id||""+i,"data-item-index":i,ref:e=>{e&&this.animateOnScroll&&this.observer&&this.observer.observe(e)},class:["timeline-item","timeline-item-"+(e.status||"default"),i%2==0?"timeline-item-even":"timeline-item-odd","side-"+o,"side-"+d,t&&l&&"is-last-in-row",!!e.image&&"has-image",!!e.icon&&"has-icon","number"===this.marker&&!e.image&&!e.icon&&"has-number",this.clickable&&"timeline-item-clickable",("active"===e.status||"pending"===e.status)&&"is-active",this.animateOnScroll&&"timeline-item-animated",(g||!this.animateOnScroll)&&"timeline-item-visible","center"===this.align&&"timeline-balanced-item",!!e.position&&"timeline-item-position-"+e.position].filter(Boolean).join(" "),onClick:()=>this.handleItemClick(e)},n("div",{class:"timeline-side timeline-side-left"},"left"===o&&e.opposite&&n("span",{class:"timeline-opposite-content"},e.opposite)),n("div",{class:"timeline-item-divider"},this.showLine&&n("div",{class:"timeline-item-line",style:{backgroundColor:e.lineColor||this.lineColor}}),n("div",{class:"timeline-item-dot",style:c},s,e.badge&&n("span",{class:"timeline-badge"},e.badge))),n("div",{class:"timeline-item-details timeline-side timeline-side-right"},this.showDates&&(e.date||e.time||e.timestamp)&&n("div",{class:"timeline-item-time"},e.date&&n("span",{class:"timeline-date-text"},e.date," "),e.time&&n("span",{class:"timeline-time-text"},e.time),!e.date&&!e.time&&e.timestamp&&n("span",{class:"timeline-date-text"},e.timestamp)),n("div",{class:"timeline-item-content"},n("div",{class:"timeline-item-title"},e.label),e.description&&n("div",{class:"timeline-item-desc"},e.description),e.customContent&&n("div",{class:"timeline-custom-content",innerHTML:a(e.customContent)}))))}static get watchers(){return{events:[{normalizeEvents:0}]}}static get style(){return'.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block;width:100%}.timeline-container{display:flex;position:relative;font-family:inherit}.timeline-vertical{flex-direction:column;padding:20px 0}.timeline-vertical .timeline-item{display:flex;position:relative;padding-bottom:24px;align-items:center}.timeline-vertical .timeline-item-line{position:absolute;top:0;bottom:0;width:2px;background-color:var(--bg-primary, #e5e7eb)}.timeline-vertical .timeline-item:last-child .timeline-item-line{display:none}.timeline-vertical .timeline-item-dot{position:relative;z-index:10;width:12px;height:12px;background:var(--bg-primary, #ffffff);border:2px solid var(--color-primary, #10b981);border-radius:50%;flex-shrink:0;margin-top:0;}.timeline-vertical .timeline-item-content{flex:1}.timeline-align-left.timeline-vertical .timeline-item-line{left:5px}.timeline-icon-top .timeline-item{align-items:flex-start}.timeline-icon-center .timeline-item{align-items:center}.timeline-icon-bottom .timeline-item{align-items:flex-end}.timeline-align-left.timeline-vertical .timeline-item-dot{left:0;}.timeline-align-left.timeline-vertical .timeline-item-details{padding-left:48px;text-align:left;display:flex;flex-direction:column;align-items:flex-start}.timeline-align-right.timeline-vertical .timeline-item{flex-direction:row-reverse;}.timeline-align-right.timeline-vertical .timeline-item-line{left:auto;right:5px;}.timeline-align-right.timeline-vertical .timeline-item-dot{left:auto;right:0;top:4px}.timeline-align-right.timeline-vertical .timeline-item-details{padding-left:0;padding-right:48px;text-align:right;display:flex;flex-direction:column;align-items:flex-end;width:100%;}.timeline-align-alternate.timeline-vertical .timeline-item{width:100%}.timeline-align-alternate.timeline-vertical .timeline-item-line{left:50%;transform:translateX(-50%)}.timeline-align-alternate.timeline-vertical .timeline-item-dot{left:50%;transform:translateX(-50%);top:4px}.timeline-align-alternate.timeline-vertical .side-left .timeline-item-details{width:50%;padding-right:48px;padding-left:0;text-align:right;box-sizing:border-box;margin-left:0;}.timeline-align-alternate.timeline-vertical .side-right .timeline-item-details{width:50%;margin-left:50%;padding-left:48px;text-align:left;box-sizing:border-box}.timeline-horizontal{flex-direction:row;padding:80px 0;overflow-x:auto;min-height:250px;align-items:center}.timeline-horizontal .timeline-item{flex:1;min-width:200px;display:flex;flex-direction:column;position:relative;align-items:center;justify-content:center;height:100%;margin:auto}.timeline-horizontal .timeline-item-details{position:absolute;width:240px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;text-align:center;padding:12px;}.timeline-horizontal.timeline-multiline{flex-direction:column;flex-wrap:nowrap;gap:0;padding:40px 80px;display:flex;align-items:stretch;overflow:visible;}.timeline-row{display:flex;width:100%;justify-content:center;justify-content:flex-start;position:relative;padding:40px 0;}.timeline-row.timeline-row-odd{flex-direction:row-reverse}.timeline-horizontal.timeline-multiline .timeline-item{flex:1;margin:0;min-width:0}.timeline-horizontal.timeline-multiline .timeline-item-line{display:block;left:50%;right:-50%;top:50%;border-radius:0}.timeline-row.timeline-row-odd .timeline-item-line{left:-50%;right:50%;}.timeline-item.is-last-in-row .timeline-item-line{display:block;left:50%;right:0;width:auto;}.timeline-row-odd .timeline-item.is-last-in-row .timeline-item-line{left:0;right:50%}.timeline-row-even .timeline-item.is-last-in-row::after{content:"";position:absolute;right:-60px;width:60px;top:50%;height:250px;border-right:2px solid var(--border-default, #e5e7eb);border-top:2px solid var(--border-default, #e5e7eb);border-bottom:2px solid var(--border-default, #e5e7eb);border-top-right-radius:60px;border-bottom-right-radius:60px;border-top-left-radius:0;border-bottom-left-radius:0;z-index:0;left:auto;pointer-events:none;top:calc(50% - 1px)}.timeline-row-odd .timeline-item.is-last-in-row::after{content:"";position:absolute;left:-60px;right:auto;width:60px;top:calc(50% - 1px);height:250px;border-left:2px solid var(--border-default, #e5e7eb);border-top:2px solid var(--border-default, #e5e7eb);border-bottom:2px solid var(--border-default, #e5e7eb);border-top-left-radius:60px;border-bottom-left-radius:60px;border-top-right-radius:0;border-bottom-right-radius:0;z-index:0;transform:none;pointer-events:none}.timeline-row:last-child .timeline-item.is-last-in-row::after{display:none}.timeline-row .timeline-item{justify-content:flex-start;}.timeline-row .timeline-item-dot{margin-top:119px;}.timeline-row .timeline-item-line{top:125px;transform:translateY(-50%)}.timeline-row .timeline-item-details{top:125px;}.timeline-horizontal .timeline-item-content,.timeline-horizontal .timeline-item-time{position:static;width:auto;max-width:100%;transform:none;left:auto;text-align:center;padding:2px 0}.timeline-horizontal .timeline-item-line{position:absolute;left:50%;right:-50%;top:50%;transform:translateY(-50%);height:2px;background-color:var(--bg-primary, #e5e7eb)}.timeline-horizontal .timeline-item:last-child .timeline-item-line{display:none}.timeline-horizontal .timeline-item-dot{width:12px;height:12px;background:var(--bg-primary, #ffffff);border:2px solid var(--color-primary, #10b981);border-radius:50%;z-index:10;position:relative}.timeline-horizontal.timeline-align-top .timeline-item-details,.timeline-horizontal .side-top .timeline-item-details{bottom:50%;top:auto;margin-bottom:32px;flex-direction:column-reverse;}.timeline-horizontal.timeline-align-top .timeline-item-details .timeline-item-content,.timeline-horizontal .side-top .timeline-item-details .timeline-item-content{order:1;}.timeline-horizontal.timeline-align-top .timeline-item-details .timeline-item-time,.timeline-horizontal .side-top .timeline-item-details .timeline-item-time{order:2;}.timeline-horizontal.timeline-align-bottom .timeline-item-details,.timeline-horizontal.timeline-align-left .timeline-item-details,.timeline-horizontal .side-bottom .timeline-item-details{top:50%;bottom:auto;margin-top:32px;flex-direction:column;}.timeline-horizontal .timeline-item-details::before{content:"";position:absolute;left:50%;width:2px;background:var(--bg-primary, #e5e7eb);height:32px;transform:translateX(-50%)}.timeline-horizontal.timeline-align-top .timeline-item-details::before,.timeline-horizontal .side-top .timeline-item-details::before{bottom:-32px;}.timeline-horizontal.timeline-align-bottom .timeline-item-details::before,.timeline-horizontal.timeline-align-left .timeline-item-details::before,.timeline-horizontal .side-bottom .timeline-item-details::before{top:-32px;}.timeline-horizontal.timeline-align-alternate .timeline-item{height:100%}.timeline-horizontal.timeline-align-alternate .timeline-item-dot{margin:0}.timeline-item-success .timeline-item-dot{border-color:var(--color-success, #10b981)}.timeline-item-danger .timeline-item-dot{border-color:var(--color-danger, #ef4444)}.timeline-item-warning .timeline-item-dot{border-color:var(--color-warning, #f59e0b)}.timeline-item-active .timeline-item-dot{border-color:var(--color-primary, #10b981);background-color:var(--bg-primary, #eff6ff);box-shadow:0 0 0 4px rgba(var(--color-primary-rgb, 59, 130, 246), 0.1)}.timeline-item-active .timeline-item-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--color-primary, #10b981);animation:timeline-pulse 2s infinite}.timeline-item-active .timeline-item-title{color:var(--color-primary, #10b981)}@keyframes timeline-pulse{0%{transform:scale(1);opacity:0.5}100%{transform:scale(2);opacity:0}}.timeline-item-dot{display:flex;align-items:center;justify-content:center;transition:all 0.2s ease}.timeline-item-icon{font-size:14px;display:inline-flex;align-items:center;justify-content:center;line-height:1;width:100%;height:100%}.timeline-item:has(.timeline-item-icon) .timeline-item-dot{width:24px;height:24px;background:var(--bg-primary, #f8fafc);display:flex !important;align-items:center;justify-content:center}.timeline-vertical .timeline-item:has(.timeline-item-icon) .timeline-item-dot{left:-6px;top:0}.timeline-align-alternate.timeline-vertical .timeline-item:has(.timeline-item-icon) .timeline-item-dot{left:50%;transform:translateX(-50%)}.timeline-align-right.timeline-vertical .timeline-item:has(.timeline-item-icon) .timeline-item-dot{right:-6px;left:auto}.dot-inner{width:4px;height:4px;background:var(--color-primary, #10b981);border-radius:50%}.timeline-item-success .dot-inner{background:var(--color-success, #10b981)}.timeline-item-danger .dot-inner{background:var(--color-danger, #ef4444)}.timeline-item-warning .dot-inner{background:var(--color-warning, #f59e0b)}.timeline-item{transition:opacity 0.2s ease}.timeline-item:hover .timeline-item-dot{transform:scale(1.2)}.timeline-variant-panel .timeline-item-content{background:var(--bg-primary, #ffffff);border:1px solid var(--border-default, #e5e7eb);padding:16px;border-radius:8px;box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);position:relative;transition:transform 0.2s, box-shadow 0.2s}.timeline-variant-panel .timeline-item-content::before{content:"";position:absolute;width:10px;height:10px;background:var(--bg-primary, #ffffff);border-left:1px solid var(--border-default, #e5e7eb);border-bottom:1px solid var(--border-default, #e5e7eb);transform:rotate(45deg);display:none;}.timeline-variant-panel .timeline-item:hover .timeline-item-content{box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);transform:translateY(-2px)}.timeline-item-number{color:var(--color-primary, #10b981);font-size:14px;font-weight:700;line-height:1}.timeline-marker-number .timeline-item-dot,.timeline-item:has(.timeline-item-number) .timeline-item-dot{width:32px;height:32px;background:var(--bg-primary, #ffffff);border:2px solid var(--color-primary, #10b981)}.timeline-item-active .timeline-item-number{color:var(--text-standard, #ffffff)}.timeline-item-active.timeline-marker-number .timeline-item-dot{background:var(--color-primary, #10b981)}.timeline-item-image{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}.timeline-item:has(.timeline-item-image) .timeline-item-dot{width:24px;height:24px;padding:0;overflow:hidden;border-radius:50%;position:relative;border:2px solid var(--color-primary, #10b981);border-color:var(--color-primary, #cbd5e1);box-shadow:none;background:var(--bg-primary, #ffffff)}.timeline-item-active:has(.timeline-item-image) .timeline-item-dot{border-color:var(--color-primary, #10b981);box-shadow:0 0 0 4px rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);}.timeline-vertical .timeline-item:has(.timeline-item-image) .timeline-item-dot{left:-6px}.timeline-align-right.timeline-vertical .timeline-item:has(.timeline-item-image) .timeline-item-dot{right:-6px;left:auto}.timeline-row .timeline-item:has(.timeline-item-image) .timeline-item-dot,.timeline-row .timeline-item:has(.timeline-item-icon) .timeline-item-dot{margin-top:113px}.timeline-item:has(.timeline-item-icon) .timeline-item-dot{width:24px;height:24px;background:var(--bg-primary, #f8fafc)}.timeline-vertical .timeline-item:has(.timeline-item-icon) .timeline-item-dot{left:-6px;top:0}.timeline-align-alternate.timeline-vertical .timeline-item:has(.timeline-item-icon) .timeline-item-dot{left:50%;transform:translateX(-50%)}.timeline-align-right.timeline-vertical .timeline-item:has(.timeline-item-icon) .timeline-item-dot{right:-6px;left:auto}.dot-inner{width:4px;height:4px;background:var(--color-primary, #10b981);border-radius:50%}.timeline-item-success .dot-inner{background:var(--color-success, #10b981)}.timeline-item-danger .dot-inner{background:var(--color-danger, #ef4444)}.timeline-item-warning .dot-inner{background:var(--color-warning, #f59e0b)}.timeline-item{transition:opacity 0.2s ease}.timeline-item:hover .timeline-item-dot{transform:scale(1.2)}.timeline-variant-panel .timeline-item-content{background:var(--bg-primary, #ffffff);border:1px solid var(--border-default, #e5e7eb);padding:16px;border-radius:8px;box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);position:relative;transition:transform 0.2s, box-shadow 0.2s}.timeline-variant-panel .timeline-item-content::before{content:"";position:absolute;width:10px;height:10px;background:var(--bg-primary, #ffffff);border-left:1px solid var(--border-default, #e5e7eb);border-bottom:1px solid var(--border-default, #e5e7eb);transform:rotate(45deg);display:none;}.timeline-variant-panel .timeline-item:hover .timeline-item-content{box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);transform:translateY(-2px)}.timeline-item-number{color:var(--color-primary, #10b981);font-size:14px;font-weight:700;line-height:1}.timeline-marker-number .timeline-item-dot,.timeline-item:has(.timeline-item-number) .timeline-item-dot{width:32px;height:32px;background:var(--bg-primary, #ffffff);border:2px solid var(--color-primary, #10b981)}.timeline-item-active .timeline-item-number{color:var(--text-standard, #ffffff)}.timeline-item-active.timeline-marker-number .timeline-item-dot{background:var(--color-primary, #10b981)}.timeline-item-image{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}.timeline-item:has(.timeline-item-image) .timeline-item-dot{width:24px;height:24px;padding:0;overflow:hidden;border-radius:50%;position:relative;border:2px solid var(--color-primary, #10b981);border-color:var(--color-primary, #cbd5e1);box-shadow:none;background:var(--bg-primary, #ffffff)}.timeline-item-active:has(.timeline-item-image) .timeline-item-dot{border-color:var(--color-primary, #10b981);box-shadow:0 0 0 4px rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);}.timeline-vertical .timeline-item:has(.timeline-item-image) .timeline-item-dot{left:0}.timeline-align-right.timeline-vertical .timeline-item:has(.timeline-item-image) .timeline-item-dot{right:-6px;left:auto}.timeline-row .timeline-item:has(.timeline-item-image) .timeline-item-dot,.timeline-row .timeline-item:has(.timeline-item-icon) .timeline-item-dot{margin-top:113px}.timeline-row .timeline-item:has(.timeline-item-number) .timeline-item-dot{margin-top:117px;}.timeline-item-title{font-weight:600;font-size:14px;color:var(--text-primary, #1f2937);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.timeline-item-time{font-size:12px;color:var(--text-muted, #6b7280);margin-bottom:2px;font-family:monospace;font-weight:500}.timeline-item-content{min-width:0;}.timeline-item-desc{font-size:13px;color:var(--text-secondary, #4b5563);margin-top:4px;line-height:1.5;display:-webkit-box !important;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;cursor:help;transition:all 0.2s;}.timeline-item-title:hover{white-space:normal;overflow:visible;z-index:50;position:relative;background:rgba(255, 255, 255, 0.9);}.timeline-item-desc:hover{-webkit-line-clamp:unset !important;line-clamp:unset !important;overflow:visible;z-index:50;position:relative;background:rgba(255, 255, 255, 0.9)}@media (prefers-color-scheme: dark){.timeline-item-title{color:var(--text-standard, #f3f4f6)}.timeline-item-desc{color:var(--text-muted, #9ca3af)}.timeline-item-line{background-color:var(--text-secondary, #374151)}.timeline-item-dot{background:var(--bg-primary, #1f2937);border-color:var(--color-primary, #10b981);}.timeline-vertical .timeline-item-dot{background:var(--bg-primary, #1f2937)}.timeline-variant-panel .timeline-item-content{background:var(--bg-primary, #1f2937);border-color:var(--border-default, #374151)}.timeline-variant-panel .timeline-item-content::before{background:var(--bg-primary, #1f2937);border-color:var(--border-default, #374151)}.timeline-marker-number .timeline-item-dot,.timeline-item:has(.timeline-item-number) .timeline-item-dot{background:var(--bg-primary, #1f2937);border-color:var(--color-primary, #10b981)}}.timeline-wrapper{display:flex;flex-direction:column;gap:20px}.timeline-search-header{margin-bottom:24px;padding:0 4px}.timeline-search-input{width:100%;padding:10px 16px;border:1px solid var(--border-default, #e5e7eb);border-radius:8px;font-size:14px;outline:none;transition:all 0.2s ease;background:var(--bg-primary, #f9fafb)}.timeline-search-input:focus{border-color:var(--color-primary, #10b981);background:var(--bg-primary, #ffffff);box-shadow:0 0 0 4px rgba(var(--color-primary-rgb, 59, 130, 246), 0.1)}.timeline-item-clickable{cursor:pointer}.timeline-item-clickable:hover{opacity:0.8}.timeline-item-clickable:hover .timeline-item-dot{transform:scale(1.3);box-shadow:0 0 0 6px rgba(var(--color-primary-rgb, 59, 130, 246), 0.15)}.timeline-item-pending .timeline-item-line{border-left:2px dashed var(--color-primary, #cbd5e1);background-color:transparent}.timeline-item-pending .dot-inner{background:var(--color-primary, #cbd5e1);animation:timeline-pulse-inner 1.5s infinite ease-in-out}@keyframes timeline-pulse-inner{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:0.5}}.timeline-item.is-active .timeline-item-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid currentColor;animation:timeline-pulse 2s infinite}.timeline-horizontal .timeline-item-pending .timeline-item-line{border-top:2px dashed var(--color-primary, #cbd5e1);background-color:transparent;height:0}.timeline-horizontal.timeline-align-alternate .timeline-item-pending .timeline-item-line{top:50%}:host{display:block;width:100%;--timeline-line-color:var(--color-primary, #10b981);--timeline-line-width:2px;--timeline-dot-size:12px;--timeline-dot-color:var(--color-primary, #10b981)}.timeline-container{position:relative;padding:20px 0;width:100%}.timeline-vertical{display:flex;flex-direction:column;gap:0}.timeline-vertical .timeline-item{position:relative;display:flex;align-items:center;min-height:80px;padding:0}.timeline-vertical .timeline-item .timeline-dot{position:relative;flex-shrink:0;z-index:2;display:flex;align-items:center;justify-content:center;border-radius:50%;border:3px solid var(--timeline-dot-color);background:var(--bg-primary, #ffffff);transition:all 0.3s ease}.timeline-vertical .timeline-item .timeline-dot i{font-size:calc(var(--timeline-dot-size) * 0.8)}.timeline-vertical .timeline-item .timeline-line{position:absolute;left:calc(var(--timeline-dot-size));top:calc(var(--timeline-dot-size) + 3px);bottom:calc(-1 * var(--timeline-dot-size) - 3px);width:var(--timeline-line-width);background:var(--timeline-line-color);z-index:1}.timeline-vertical .timeline-item .timeline-content{flex:1;padding:0 24px;margin-top:4px}.timeline-vertical.timeline-align-left .timeline-item{flex-direction:row}.timeline-vertical.timeline-align-left .timeline-item .timeline-dot{margin-right:0}.timeline-vertical.timeline-align-left .timeline-item .timeline-line{left:calc(var(--timeline-dot-size));right:auto}.timeline-vertical.timeline-align-left .timeline-item .timeline-content{text-align:left;padding-left:24px;padding-right:0}.timeline-vertical.timeline-align-right .timeline-item{flex-direction:row-reverse}.timeline-vertical.timeline-align-right .timeline-item .timeline-dot{margin-left:0;margin-right:0}.timeline-vertical.timeline-align-right .timeline-item .timeline-line{left:auto;right:calc(var(--timeline-dot-size))}.timeline-vertical.timeline-align-right .timeline-item .timeline-content{text-align:right;padding-right:24px;padding-left:0}.timeline-vertical.timeline-align-center{display:flex;flex-direction:column;align-items:center}.timeline-vertical.timeline-align-center .timeline-item{width:50%;flex-direction:row;justify-content:flex-start}.timeline-vertical.timeline-align-center .timeline-item .timeline-dot{position:absolute;left:-12px;margin-right:0}.timeline-vertical.timeline-align-center .timeline-item .timeline-line{position:absolute;left:-2px;right:auto}.timeline-vertical.timeline-align-center .timeline-item .timeline-content{text-align:left;padding-left:24px;padding-right:0;margin-left:12px}.timeline-vertical.timeline-align-alternate{display:flex;flex-direction:column;align-items:center}.timeline-vertical.timeline-align-alternate .timeline-item{width:50%}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-dot{position:absolute}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-line{position:absolute}.timeline-vertical.timeline-align-alternate .timeline-item.timeline-item-left{flex-direction:row-reverse;align-self:flex-start}.timeline-vertical.timeline-align-alternate .timeline-item.timeline-item-left .timeline-dot{right:-12px;left:auto}.timeline-vertical.timeline-align-alternate .timeline-item.timeline-item-left .timeline-content{text-align:right;padding-right:24px;padding-left:0;margin-right:12px}.timeline-vertical.timeline-align-alternate .timeline-item.timeline-item-left .timeline-line{right:-2px;left:auto}.timeline-vertical.timeline-align-alternate .timeline-item.timeline-item-right{flex-direction:row;align-self:flex-end}.timeline-vertical.timeline-align-alternate .timeline-item.timeline-item-right .timeline-dot{left:-12px;right:auto}.timeline-vertical.timeline-align-alternate .timeline-item.timeline-item-right .timeline-content{text-align:left;padding-left:24px;padding-right:0;margin-left:12px}.timeline-vertical.timeline-align-alternate .timeline-item.timeline-item-right .timeline-line{left:-2px;right:auto}.timeline-horizontal{display:flex;gap:0;overflow-x:auto;padding:40px 0;scrollbar-width:thin;scrollbar-color:var(--timeline-line-color) transparent}.timeline-horizontal::-webkit-scrollbar{height:6px}.timeline-horizontal::-webkit-scrollbar-track{background:transparent}.timeline-horizontal::-webkit-scrollbar-thumb{background-color:var(--timeline-line-color);border-radius:20px}.timeline-horizontal{scroll-snap-type:x mandatory}.timeline-horizontal .timeline-item{position:relative;display:flex;flex-direction:column;align-items:center;min-width:150px;padding:0;flex-shrink:0;scroll-snap-align:center}.timeline-horizontal .timeline-item .timeline-dot{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;border-radius:50%;border:3px solid var(--timeline-dot-color);background:var(--bg-primary, #ffffff);transition:all 0.3s ease}.timeline-horizontal .timeline-item .timeline-dot i{font-size:calc(var(--timeline-dot-size) * 0.8)}.timeline-horizontal .timeline-item .timeline-line{position:absolute;left:calc(var(--timeline-dot-size) * 2);right:calc(-100% + var(--timeline-dot-size) * 2);top:calc(var(--timeline-dot-size));height:var(--timeline-line-width);width:auto;background:var(--timeline-line-color);z-index:1}.timeline-horizontal .timeline-item .timeline-content{padding:16px 12px;max-width:200px}.timeline-horizontal.timeline-align-left .timeline-item,.timeline-horizontal.timeline-align-top .timeline-item{flex-direction:column-reverse}.timeline-horizontal.timeline-align-left .timeline-item .timeline-content,.timeline-horizontal.timeline-align-top .timeline-item .timeline-content{text-align:center}.timeline-horizontal.timeline-align-right .timeline-item .timeline-content,.timeline-horizontal.timeline-align-bottom .timeline-item .timeline-content{text-align:center}.timeline-horizontal.timeline-align-alternate .timeline-item.timeline-item-top{flex-direction:column-reverse}.timeline-horizontal.timeline-align-alternate .timeline-item .timeline-content{text-align:center}.timeline-content{background:var(--bg-primary, #ffffff);border-radius:8px;border:1px solid var(--border-default, #e5e7eb);box-shadow:0 1px 3px rgba(0, 0, 0, 0.1);transition:all 0.3s ease}.timeline-date{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:12px;color:var(--text-secondary);font-weight:500}.timeline-date .timeline-date-text{color:var(--primary-color)}.timeline-date .timeline-time-text{color:var(--text-secondary)}.timeline-image{margin:-1px -1px 12px -1px;border-radius:8px 8px 0 0;overflow:hidden}.timeline-image img{width:100%;height:auto;display:block}.timeline-header{margin-bottom:8px}.timeline-title{margin:0;font-size:16px;font-weight:600;color:var(--text-primary, #111827);line-height:1.4}.timeline-description{margin:0;font-size:14px;color:var(--text-secondary);line-height:1.6}.timeline-custom{margin-top:12px}.timeline-badge{position:absolute;top:-6px;right:-6px;background:var(--color-danger, #ef4444);color:var(--text-standard, #ffffff);font-size:10px;font-weight:600;padding:2px 6px;border-radius:10px;min-width:18px;text-align:center}.timeline-variant-outlined .timeline-content{background:transparent;border:2px solid var(--border-default, #e5e7eb);box-shadow:none}.timeline-variant-filled .timeline-content{background:var(--bg-secondary, #f3f4f6);border:none;box-shadow:none}.timeline-variant-minimal .timeline-content{background:transparent;border:none;box-shadow:none;padding:8px 12px}.timeline-variant-minimal .timeline-dot{border-width:2px !important}.timeline-variant-dots-only .timeline-content{display:none}.timeline-variant-dots-only .timeline-dot{cursor:pointer}.timeline-variant-dots-only .timeline-dot:hover{transform:scale(1.2)}.timeline-compact.timeline-vertical .timeline-item{min-height:50px}.timeline-compact.timeline-vertical .timeline-item .timeline-content{padding:0 16px}.timeline-compact.timeline-horizontal .timeline-item{min-width:100px}.timeline-compact.timeline-horizontal .timeline-item .timeline-content{padding:8px;max-width:150px}.timeline-compact .timeline-content{padding:8px 12px}.timeline-compact .timeline-title{font-size:14px}.timeline-compact .timeline-description{font-size:12px}.timeline-item-clickable{cursor:pointer}.timeline-item-clickable .timeline-content:hover{box-shadow:0 4px 6px rgba(0, 0, 0, 0.15);transform:translateY(-2px);border-color:var(--timeline-dot-color)}.timeline-item-clickable.timeline-item-active .timeline-content{border-color:var(--timeline-dot-color);box-shadow:0 0 0 3px rgba(var(--color-primary-rgb, 59, 130, 246), 0.1)}.timeline-item-clickable.timeline-item-active .timeline-dot{transform:scale(1.2);box-shadow:0 0 0 4px rgba(var(--color-primary-rgb, 59, 130, 246), 0.2)}.timeline-animated .timeline-item{opacity:0;transition:opacity 0.6s ease, transform 0.6s ease}.timeline-animated .timeline-item.timeline-item-visible{opacity:1}.timeline-animated.timeline-vertical .timeline-item{transform:translateX(-30px)}.timeline-animated.timeline-vertical .timeline-item.timeline-item-right{transform:translateX(30px)}.timeline-animated.timeline-vertical .timeline-item.timeline-item-visible{transform:translateX(0)}.timeline-animated.timeline-horizontal .timeline-item{transform:translateY(30px)}.timeline-animated.timeline-horizontal .timeline-item.timeline-item-top{transform:translateY(-30px)}.timeline-animated.timeline-horizontal .timeline-item.timeline-item-visible{transform:translateY(0)}.timeline-icon-top.timeline-vertical .timeline-item{align-items:flex-start}.timeline-icon-top.timeline-vertical .timeline-item .timeline-dot{margin-top:0}.timeline-icon-top.timeline-vertical .timeline-item .timeline-line{top:calc(var(--timeline-dot-size) + 3px)}.timeline-icon-top.timeline-horizontal.timeline-align-top .timeline-item .timeline-dot{align-self:flex-start}.timeline-icon-top.timeline-horizontal.timeline-align-bottom .timeline-item .timeline-dot{align-self:flex-start}.timeline-icon-center.timeline-vertical .timeline-item{align-items:center}.timeline-icon-center.timeline-vertical .timeline-item .timeline-dot{margin-top:0}.timeline-icon-center.timeline-vertical .timeline-item .timeline-line{top:50%;transform:translateY(calc(var(--timeline-dot-size) / 2 + 3px));bottom:calc(-50% - var(--timeline-dot-size) / 2 - 3px)}.timeline-icon-center.timeline-horizontal .timeline-item .timeline-dot{align-self:center}.timeline-icon-bottom.timeline-vertical .timeline-item{align-items:flex-start}.timeline-icon-bottom.timeline-vertical .timeline-item .timeline-dot{margin-top:auto;align-self:flex-end}.timeline-icon-bottom.timeline-vertical .timeline-item .timeline-line{top:auto;bottom:calc(-1 * var(--timeline-dot-size) - 3px);height:calc(100% - var(--timeline-dot-size) - 3px);transform:none}.timeline-icon-bottom.timeline-vertical.timeline-align-center .timeline-item .timeline-line{left:-2px;right:auto}.timeline-icon-bottom.timeline-vertical.timeline-align-alternate .timeline-item-left .timeline-line{right:-2px;left:auto}.timeline-icon-bottom.timeline-vertical.timeline-align-alternate .timeline-item-right .timeline-line{left:-2px;right:auto}.timeline-icon-bottom.timeline-horizontal.timeline-align-top .timeline-item .timeline-dot{align-self:flex-end}.timeline-icon-bottom.timeline-horizontal.timeline-align-bottom .timeline-item .timeline-dot{align-self:flex-end}@media (max-width: 768px){.timeline-horizontal{flex-direction:column;overflow-x:visible}.timeline-horizontal .timeline-item{min-width:100%;flex-direction:row;align-items:flex-start}.timeline-horizontal .timeline-item .timeline-line{left:calc(var(--timeline-dot-size));top:calc(var(--timeline-dot-size) * 2);bottom:calc(-100% + var(--timeline-dot-size) * 2);right:auto;width:var(--timeline-line-width);height:auto}.timeline-horizontal .timeline-item .timeline-content{padding:0 24px;max-width:none;text-align:left !important}.timeline-vertical.timeline-align-alternate,.timeline-vertical.timeline-align-center{padding-left:0}.timeline-vertical.timeline-align-alternate .timeline-item,.timeline-vertical.timeline-align-center .timeline-item{flex-direction:row !important;transform:none !important;padding-right:0 !important}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-content,.timeline-vertical.timeline-align-center .timeline-item .timeline-content{text-align:left !important}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-line,.timeline-vertical.timeline-align-center .timeline-item .timeline-line{left:calc(var(--timeline-dot-size)) !important;right:auto !important}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-balanced-item,.timeline-vertical.timeline-align-center .timeline-item .timeline-balanced-item{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:flex-start;min-height:80px;width:100%;position:relative}}@media (max-width: 768px) and (max-width: 768px){.timeline-vertical.timeline-align-alternate .timeline-item .timeline-balanced-item,.timeline-vertical.timeline-align-center .timeline-item .timeline-balanced-item{display:flex;flex-direction:column;padding-left:30px}}@media (max-width: 768px){.timeline-vertical.timeline-align-alternate .timeline-item .timeline-balanced-item .timeline-side,.timeline-vertical.timeline-align-center .timeline-item .timeline-balanced-item .timeline-side{min-width:0;display:flex;flex-direction:column;justify-content:center}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-balanced-item .timeline-side.timeline-side-left,.timeline-vertical.timeline-align-center .timeline-item .timeline-balanced-item .timeline-side.timeline-side-left{align-items:flex-end;text-align:right}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-balanced-item .timeline-side.timeline-side-right,.timeline-vertical.timeline-align-center .timeline-item .timeline-balanced-item .timeline-side.timeline-side-right{align-items:flex-start;text-align:left}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-balanced-item .timeline-separator,.timeline-vertical.timeline-align-center .timeline-item .timeline-balanced-item .timeline-separator{display:flex;flex-direction:column;align-items:center;position:relative;height:100%;min-width:24px}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-balanced-item .timeline-separator .timeline-line-vertical,.timeline-vertical.timeline-align-center .timeline-item .timeline-balanced-item .timeline-separator .timeline-line-vertical{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:var(--timeline-line-width);background-color:var(--timeline-line-color);z-index:0}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-balanced-item .timeline-separator .timeline-marker,.timeline-vertical.timeline-align-center .timeline-item .timeline-balanced-item .timeline-separator .timeline-marker{position:relative;z-index:1;margin-top:4px}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-balanced-item .timeline-opposite-date,.timeline-vertical.timeline-align-center .timeline-item .timeline-balanced-item .timeline-opposite-date{font-size:0.9rem;color:var(--text-secondary);font-weight:500;padding:6px 16px;border-radius:20px;background:rgba(0, 0, 0, 0.03);margin:10px 0;display:inline-block;transition:all 0.3s ease}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-balanced-item .timeline-opposite-date:hover,.timeline-vertical.timeline-align-center .timeline-item .timeline-balanced-item .timeline-opposite-date:hover{background:rgba(0, 0, 0, 0.06);transform:translateY(-2px)}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-icon-center .timeline-balanced-item,.timeline-vertical.timeline-align-center .timeline-item .timeline-icon-center .timeline-balanced-item{align-items:center}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-icon-center .timeline-balanced-item .timeline-separator .timeline-marker,.timeline-vertical.timeline-align-center .timeline-item .timeline-icon-center .timeline-balanced-item .timeline-separator .timeline-marker{margin-top:0}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-icon-bottom .timeline-balanced-item,.timeline-vertical.timeline-align-center .timeline-item .timeline-icon-bottom .timeline-balanced-item{align-items:flex-end}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-icon-bottom .timeline-balanced-item .timeline-separator .timeline-marker,.timeline-vertical.timeline-align-center .timeline-item .timeline-icon-bottom .timeline-balanced-item .timeline-separator .timeline-marker{margin-top:auto;margin-bottom:4px}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-animated .timeline-balanced-item .timeline-side-left,.timeline-vertical.timeline-align-alternate .timeline-item .timeline-animated .timeline-balanced-item .timeline-side-right,.timeline-vertical.timeline-align-alternate .timeline-item .timeline-animated .timeline-balanced-item .timeline-separator,.timeline-vertical.timeline-align-center .timeline-item .timeline-animated .timeline-balanced-item .timeline-side-left,.timeline-vertical.timeline-align-center .timeline-item .timeline-animated .timeline-balanced-item .timeline-side-right,.timeline-vertical.timeline-align-center .timeline-item .timeline-animated .timeline-balanced-item .timeline-separator{opacity:0;transition:all 0.6s ease}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-animated .timeline-balanced-item .timeline-side-left,.timeline-vertical.timeline-align-center .timeline-item .timeline-animated .timeline-balanced-item .timeline-side-left{transform:translateX(-20px)}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-animated .timeline-balanced-item .timeline-side-right,.timeline-vertical.timeline-align-center .timeline-item .timeline-animated .timeline-balanced-item .timeline-side-right{transform:translateX(20px)}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-animated .timeline-balanced-item .timeline-separator,.timeline-vertical.timeline-align-center .timeline-item .timeline-animated .timeline-balanced-item .timeline-separator{transform:scale(0.5)}.timeline-vertical.timeline-align-alternate .timeline-item .timeline-animated .timeline-balanced-item.timeline-item-visible .timeline-side-left,.timeline-vertical.timeline-align-alternate .timeline-item .timeline-animated .timeline-balanced-item.timeline-item-visible .timeline-side-right,.timeline-vertical.timeline-align-alternate .timeline-item .timeline-animated .timeline-balanced-item.timeline-item-visible .timeline-separator,.timeline-vertical.timeline-align-center .timeline-item .timeline-animated .timeline-balanced-item.timeline-item-visible .timeline-side-left,.timeline-vertical.timeline-align-center .timeline-item .timeline-animated .timeline-balanced-item.timeline-item-visible .timeline-side-right,.timeline-vertical.timeline-align-center .timeline-item .timeline-animated .timeline-balanced-item.timeline-item-visible .timeline-separator{opacity:1;transform:none}}.timeline-snake-container{display:flex;flex-direction:column;gap:40px;width:100%}.timeline-snake-row{display:flex;width:100%;position:relative}.timeline-snake-row.timeline-snake-row-odd{flex-direction:row-reverse}.timeline-snake-row.timeline-snake-row-odd .timeline-item .timeline-snake-turn{right:auto;left:0;border-right:none;border-left:2px solid var(--timeline-line-color);border-radius:0 0 0 16px}.timeline-snake-item{flex:0 0 10%;display:flex;flex-direction:column;align-items:center;position:relative;min-width:0;padding:0 10px}.timeline-snake-item .timeline-content{margin-top:12px;text-align:center;font-size:0.85rem;padding:8px;width:100%}.timeline-snake-item .timeline-dot{z-index:2}.timeline-snake-item .timeline-line-horizontal{position:absolute;top:calc(var(--timeline-dot-size) + 1px);top:calc(var(--timeline-dot-size));left:50%;width:100%;height:var(--timeline-line-width);background-color:var(--timeline-line-color);z-index:1}.timeline-snake-item .timeline-snake-turn{position:absolute;top:calc(var(--timeline-dot-size));right:0;width:50%;height:calc(100% + 40px);border-top:var(--timeline-line-width) solid var(--timeline-line-color);border-right:var(--timeline-line-width) solid var(--timeline-line-color);border-radius:0 50px 50px 0;z-index:1;pointer-events:none;opacity:0.8}.timeline-snake-row.timeline-snake-row-odd .timeline-item .timeline-snake-turn{border-radius:0 0 0 50px}:host-context([dir=rtl]) .timeline-align-left.timeline-vertical .timeline-item-line,:host([dir=rtl]) .timeline-align-left.timeline-vertical .timeline-item-line{left:auto;right:5px}:host-context([dir=rtl]) .timeline-align-left.timeline-vertical .timeline-item-dot,:host([dir=rtl]) .timeline-align-left.timeline-vertical .timeline-item-dot{left:auto;right:0}:host-context([dir=rtl]) .timeline-align-left.timeline-vertical .timeline-item-details,:host([dir=rtl]) .timeline-align-left.timeline-vertical .timeline-item-details{padding-left:0;padding-right:48px;text-align:right;align-items:flex-end}:host-context([dir=rtl]) .timeline-align-right.timeline-vertical .timeline-item,:host([dir=rtl]) .timeline-align-right.timeline-vertical .timeline-item{flex-direction:row}:host-context([dir=rtl]) .timeline-align-right.timeline-vertical .timeline-item-line,:host([dir=rtl]) .timeline-align-right.timeline-vertical .timeline-item-line{right:auto;left:5px}:host-context([dir=rtl]) .timeline-align-right.timeline-vertical .timeline-item-dot,:host([dir=rtl]) .timeline-align-right.timeline-vertical .timeline-item-dot{right:auto;left:0}:host-context([dir=rtl]) .timeline-align-right.timeline-vertical .timeline-item-details,:host([dir=rtl]) .timeline-align-right.timeline-vertical .timeline-item-details{padding-right:0;padding-left:48px;text-align:left;align-items:flex-start}:host-context([dir=rtl]) .timeline-align-alternate.timeline-vertical .side-left .timeline-item-details,:host([dir=rtl]) .timeline-align-alternate.timeline-vertical .side-left .timeline-item-details{padding-right:0;padding-left:48px;text-align:left;align-items:flex-start;margin-left:50%;margin-right:0}:host-context([dir=rtl]) .timeline-align-alternate.timeline-vertical .side-right .timeline-item-details,:host([dir=rtl]) .timeline-align-alternate.timeline-vertical .side-right .timeline-item-details{padding-left:0;padding-right:48px;text-align:right;align-items:flex-end;margin-left:0;margin-right:0;width:50%}:host-context([dir=rtl]) .timeline-align-right.timeline-vertical .timeline-item:has(.timeline-item-icon) .timeline-item-dot,:host([dir=rtl]) .timeline-align-right.timeline-vertical .timeline-item:has(.timeline-item-icon) .timeline-item-dot{right:auto;left:-6px}'}},[513,"ui-timeline",{events:[1],flow:[1],mode:[1],align:[1],theme:[16],multiline:[4],columns:[2],variant:[1],marker:[1],clickable:[4],reverse:[4],pending:[4],searchable:[4],lineColor:[1,"line-color"],lineWidth:[2,"line-width"],dotSize:[2,"dot-size"],dotColor:[1,"dot-color"],showLine:[4,"show-line"],showDots:[4,"show-dots"],animateOnScroll:[4,"animate-on-scroll"],compact:[4],wrap:[4],showDates:[4,"show-dates"],dateFormat:[1,"date-format"],iconPosition:[1,"icon-position"],normalizedEvents:[32],activeItemId:[32],visibleItems:[32],searchQuery:[32],isRtl:[32],isMobile:[32]},void 0,{events:[{normalizeEvents:0}]}]),g=p,h=function(){"undefined"!=typeof customElements&&["ui-timeline","ui-badge","ui-button","ui-icon","ui-input","ui-loader"].forEach((e=>{switch(e){case"ui-timeline":customElements.get(m(e))||customElements.define(m(e),p);break;case"ui-badge":customElements.get(m(e))||d();break;case"ui-button":customElements.get(m(e))||o();break;case"ui-icon":customElements.get(m(e))||r();break;case"ui-input":customElements.get(m(e))||s();break;case"ui-loader":customElements.get(m(e))||c()}}))};export{g as UiTimeline,h as defineCustomElement}

package/dist/components/ui-timer.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as i,createEvent as e,h as s,Host as r,transformTag as o}from"@stencil/core/internal/client";import{d as a,a as n}from"./badge.js";import{d as h}from"./icon.js";const l=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.timerTick=e(this,"timerTick",7),this.timerStart=e(this,"timerStart",7),this.timerPause=e(this,"timerPause",7),this.timerComplete=e(this,"timerComplete",7),this.timerAllComplete=e(this,"timerAllComplete",7),this.timerLap=e(this,"timerLap",7),this.timerNext=e(this,"timerNext",7),this.timerPrev=e(this,"timerPrev",7),this.timerGoTo=e(this,"timerGoTo",7)}get el(){return this}steps=[];normalizedSteps=[];isNarrow=!1;flow="linear";mode="countdown";activeStep=0;theme;autoStart=!1;loop=!1;precision="seconds";variant="full";alertThreshold=10;targetDate;persist;progressType="circular";format="default";useShadow=!0;collapse=!1;enableNotifications=!1;enableSound=!1;notificationTitle="Timer Complete";notificationBody="{{label}} phase finished.";duration=0;currentTime=0;isRunning=!1;totalDuration=0;laps=[];isAlerting=!1;activeStepColor;normalizedTheme={};timerInterval;collapseBreakpoint=640;timerTick;timerStart;timerPause;timerComplete;timerAllComplete;timerLap;timerNext;timerPrev;timerGoTo;normalizeSteps(t){if("string"==typeof t)try{this.normalizedSteps=JSON.parse(t)}catch{this.normalizedSteps=[]}else this.normalizedSteps=t||[];this.initStep()}watchDuration(t){0===this.normalizedSteps.length&&(this.totalDuration=t,this.currentTime="milliseconds"===this.precision?1e3*t:t)}normalizeTheme(t){if("string"==typeof t)try{this.normalizedTheme=JSON.parse(t)}catch{this.normalizedTheme={}}else this.normalizedTheme=t||{}}componentWillLoad(){this.normalizeSteps(this.steps),this.normalizeTheme(this.theme),this.loadPersistedState(),this.initTargetDate(),this.initNotifications(),this.updateResponsiveState(),this.duration>0&&0===this.normalizedSteps.length&&(this.totalDuration=this.duration,this.currentTime="milliseconds"===this.precision?1e3*this.duration:this.duration)}handleWindowResize(){this.updateResponsiveState()}updateResponsiveState(){"undefined"!=typeof window&&(this.isNarrow=window.innerWidth<=this.collapseBreakpoint)}initNotifications(){this.enableNotifications&&"Notification"in window&&Notification.requestPermission()}initTargetDate(){if(this.targetDate){const t=new Date(this.targetDate).getTime(),i=Date.now(),e=Math.max(0,Math.floor((t-i)/1e3));this.mode="countdown",this.normalizedSteps=[{label:"Countdown",duration:e}],this.initStep(),this.start()}}loadPersistedState(){if(!this.persist)return;const t=localStorage.getItem("ui-timer-"+this.persist);if(t)try{const i=JSON.parse(t);this.activeStep=i.activeStep,this.currentTime=i.currentTime,i.wasRunning&&this.start()}catch(t){console.warn("Failed to load persisted timer state")}}savePersistedState(){this.persist&&localStorage.setItem("ui-timer-"+this.persist,JSON.stringify({activeStep:this.activeStep,currentTime:this.currentTime,wasRunning:this.isRunning,timestamp:Date.now()}))}componentDidLoad(){this.autoStart&&this.start()}disconnectedCallback(){this.isRunning=!1,this.stopInterval()}initStep(){const t=this.normalizedSteps[this.activeStep],i=t?.duration||0;this.totalDuration=i,this.laps=[],this.isAlerting=!1,this.activeStepColor=t?.color,this.currentTime="stopwatch"===this.mode?0:"milliseconds"===this.precision?1e3*i:i}playSound(t){if(this.enableSound)try{const i=new(window.AudioContext||window.webkitAudioContext),e=i.createOscillator(),s=i.createGain();e.connect(s),s.connect(i.destination),"tick"===t?(e.frequency.setValueAtTime(800,i.currentTime),s.gain.setValueAtTime(.1,i.currentTime),s.gain.exponentialRampToValueAtTime(.01,i.currentTime+.1),e.start(),e.stop(i.currentTime+.1)):(e.type="sine",e.frequency.setValueAtTime(440,i.currentTime),e.frequency.exponentialRampToValueAtTime(880,i.currentTime+.2),s.gain.setValueAtTime(.2,i.currentTime),s.gain.exponentialRampToValueAtTime(.01,i.currentTime+.5),e.start(),e.stop(i.currentTime+.5))}catch(t){console.warn("Audio feedback failed")}}notify(t,i,e){if(this.enableNotifications&&"Notification"in window&&"granted"===Notification.permission){const s=t.replace("{{label}}",e),r=i.replace("{{label}}",e);new Notification(s,{body:r})}}stopInterval(){this.timerInterval&&(clearTimeout(this.timerInterval),this.timerInterval=null)}emitStepEvent(t,i){const e=this.normalizedSteps[i];if(!e)return;const s={index:i,step:e};"next"===t?this.timerNext.emit(s):"prev"===t?this.timerPrev.emit(s):this.timerGoTo.emit(s)}async start(){if(this.isRunning)return;this.isRunning=!0,this.timerStart.emit({stepIndex:this.activeStep});const t="milliseconds"===this.precision?10:1e3,i="milliseconds"===this.precision?10:1;let e=performance.now()+t;const s=()=>{if(!this.isRunning)return;const r=performance.now()-e;if("countdown"===this.mode){if(!(this.currentTime>0))return this.playSound("complete"),void this.handleStepComplete();this.currentTime-=i,this.checkAlert(),this.timerTick.emit({remaining:this.currentTime,stepIndex:this.activeStep,mode:this.mode}),this.savePersistedState(),this.currentTime>0&&this.currentTime<=3&&"seconds"===this.precision&&this.playSound("tick")}else{this.currentTime+=i,this.timerTick.emit({remaining:this.currentTime,stepIndex:this.activeStep,mode:this.mode}),this.savePersistedState();const t="milliseconds"===this.precision?1e3*this.totalDuration:this.totalDuration;if(t>0&&this.currentTime>=t)return void this.handleStepComplete()}e+=t,this.timerInterval=setTimeout(s,Math.max(0,t-r))};this.timerInterval=setTimeout(s,t)}async pause(){this.isRunning=!1,this.timerInterval&&clearTimeout(this.timerInterval),this.timerInterval=null,this.timerPause.emit({stepIndex:this.activeStep})}async reset(){this.pause(),this.initStep()}async next(){this.activeStep>=this.normalizedSteps.length-1||(this.pause(),this.activeStep++,this.initStep(),this.autoStart&&await this.start(),this.emitStepEvent("next",this.activeStep))}async prev(){this.activeStep<=0||(this.pause(),this.activeStep--,this.initStep(),this.autoStart&&await this.start(),this.emitStepEvent("prev",this.activeStep))}async goTo(t){t<0||t>=this.normalizedSteps.length||t===this.activeStep||(this.pause(),this.activeStep=t,this.initStep(),this.autoStart&&await this.start(),this.emitStepEvent("goto",this.activeStep))}async lap(){"stopwatch"===this.mode&&(this.laps=[...this.laps,this.currentTime],this.timerLap.emit({time:this.currentTime,lapIndex:this.laps.length-1}))}handleKeyDown(t){document.activeElement===this.el&&("Space"===t.code?(t.preventDefault(),this.isRunning?this.pause():this.start()):"KeyR"===t.code?this.reset():"KeyL"===t.code?this.lap():"KeyN"===t.code?this.next():"KeyP"===t.code&&this.prev())}checkAlert(){this.isAlerting="countdown"===this.mode&&0!==this.totalDuration&&("milliseconds"===this.precision?this.currentTime/1e3:this.currentTime)/this.totalDuration*100<=this.alertThreshold}handleStepComplete(){this.stopInterval(),this.isRunning=!1,this.timerComplete.emit({stepIndex:this.activeStep}),this.notify(this.notificationTitle,this.notificationBody,this.normalizedSteps[this.activeStep]?.label||"Timer"),this.activeStep<this.normalizedSteps.length-1?(this.activeStep++,this.initStep(),this.start(),this.emitStepEvent("next",this.activeStep)):(this.timerAllComplete.emit(),this.loop&&(this.activeStep=0,this.initStep(),this.start(),this.emitStepEvent("next",this.activeStep)))}calculateOffset(){if(0===this.totalDuration)return"stopwatch"===this.mode?0:283;const t="milliseconds"===this.precision?this.currentTime/1e3:this.currentTime;let i=0;return i="countdown"===this.mode?(this.totalDuration-t)/this.totalDuration:t/this.totalDuration,i=Math.max(0,Math.min(1,i)),283-283*i}formatTime(t){const i="milliseconds"===this.precision;let e=i?Math.floor(t/1e3):t,s=i?Math.floor(t%1e3/10):0;if("human"===this.format){const t=Math.floor(e/60),i=e%60;return t>0?`${t}m ${i}s`:i+"s"}if("simple"===this.format)return""+e;const r=Math.floor(e/86400),o=Math.floor(e%86400/3600),a=Math.floor(e%3600/60),n=e%60;let h="";return h=r>0?`${r}d ${o}:${a<10?"0":""}${a}:${n<10?"0":""}${n}`:o>0?`${o}:${a<10?"0":""}${a}:${n<10?"0":""}${n}`:`${a}:${n<10?"0":""}${n}`,i&&(h+=`.${s<10?"0":""}${s}`),h}render(){return s(r,{key:"1d8f1a154864e347f0458302b6684857981d54d0",class:{"timer-has-shadow":this.useShadow,"timer-no-shadow":!this.useShadow,"timer-collapsed":this.collapse&&this.isNarrow}},"compact"===this.variant||this.collapse&&this.isNarrow?this.renderCompact():this.renderFull())}renderFull(){const t={...this.normalizedTheme,...this.activeStepColor?{"--timer-primary-color":this.activeStepColor}:{}};return s("div",{class:{"timer-container":!0,"timer-alert":this.isAlerting},style:t},s("div",{class:"timer-steps"},this.normalizedSteps.map(((t,i)=>s("div",{class:{"timer-step":!0,"timer-step-active":i===this.activeStep,"timer-step-completed":i<this.activeStep}},s("div",{class:"timer-step-header"},s("span",{class:"timer-step-index"},i+1),s("span",{class:"timer-step-label"},t.label)))))),s("div",{class:"timer-display"},"circular"===this.progressType?s("svg",{class:"timer-progress-svg",viewBox:"0 0 100 100"},s("circle",{class:"timer-progress-bg",cx:"50",cy:"50",r:"45"}),s("circle",{class:"timer-progress-bar",cx:"50",cy:"50",r:"45",style:{"stroke-dashoffset":""+this.calculateOffset()}})):s("div",{class:"timer-progress-linear"},s("div",{class:"timer-progress-linear-bg"}),s("div",{class:"timer-progress-linear-bar",style:{width:100*(1-this.calculateOffset()/283)+"%"}})),s("div",{class:"timer-time-text"},s("slot",{name:"content"},this.formatTime(this.currentTime)))),s("div",{class:"timer-controls"},s("ui-button",{variant:"primary",onClick:()=>this.isRunning?this.pause():this.start(),label:this.isRunning?"Pause":"Start"}),"stopwatch"===this.mode&&s("ui-button",{variant:"secondary",onClick:()=>this.lap(),label:"Lap"}),s("ui-button",{variant:"secondary",onClick:()=>this.reset(),label:"Reset"}),s("ui-button",{variant:"outline",onClick:()=>this.next(),label:"Skip"})),this.laps.length>0&&s("div",{class:"timer-laps"},s("div",{class:"timer-laps-title"},"Laps"),s("div",{class:"timer-laps-list"},this.laps.map(((t,i)=>s("div",{class:"timer-lap-item"},s("span",null,"Lap ",i+1),s("span",{class:"timer-lap-time"},this.formatTime(t))))))))}renderCompact(){return s("div",{class:{"timer-container-compact":!0,"timer-alert":this.isAlerting},style:this.normalizedTheme},s("div",{class:"timer-time-text-compact"},this.formatTime(this.currentTime)),s("div",{class:"timer-controls-compact"},s("ui-button",{variant:"ghost",iconOnly:!0,size:"sm",onClick:()=>this.isRunning?this.pause():this.start(),icon:this.isRunning?"pause":"play",iconLibrary:"lucide",iconSize:"1.2em",ariaLabel:this.isRunning?"Pause":"Start"}),s("ui-button",{variant:"ghost",iconOnly:!0,size:"sm",onClick:()=>this.reset(),icon:"rotate-cw",iconLibrary:"lucide",iconSize:"1.2em",ariaLabel:"Reset"}),"stopwatch"===this.mode&&s("ui-button",{variant:"ghost",iconOnly:!0,size:"sm",onClick:()=>this.lap(),icon:"flag",iconLibrary:"lucide",iconSize:"1.2em",ariaLabel:"Lap"})))}static get watchers(){return{steps:[{normalizeSteps:0}],duration:[{watchDuration:0}],theme:[{normalizeTheme:0}]}}static get style(){return".sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.timer-container{display:flex;flex-direction:column;gap:24px;padding:24px;background:var(--bg-primary, #ffffff);border-radius:12px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.05);font-family:inherit;align-items:center;outline:none}.timer-container:focus{box-shadow:0 0 0 3px rgba(var(--color-success-rgb, 16, 185, 129), 0.5)}:host(.timer-no-shadow) .timer-container,:host(.timer-no-shadow) .timer-container-compact{box-shadow:none}:host(.timer-collapsed) .timer-steps,:host(.timer-collapsed) .timer-laps{display:none}:host(.timer-collapsed) .timer-container{padding:16px;gap:16px;align-items:stretch}:host(.timer-collapsed) .timer-controls{justify-content:center;flex-wrap:wrap}:host(.timer-collapsed) .timer-display{width:160px;height:160px}.timer-steps{display:flex;gap:12px;width:100%;justify-content:center}.timer-step{flex:1;max-width:120px;display:flex;flex-direction:column;gap:8px;opacity:0.5;transition:opacity 0.3s}.timer-step-active{opacity:1}.timer-step-completed{opacity:0.8}.timer-step-header{display:flex;align-items:center;gap:8px}.timer-step-index{width:24px;height:24px;border-radius:50%;background:var(--bg-primary, #e5e7eb);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}.timer-step-active .timer-step-index{background:var(--color-success, #10b981);color:var(--text-standard, #ffffff)}.timer-step-completed .timer-step-index{background:var(--color-success-hover, #059669);color:var(--text-standard, #ffffff)}.timer-step-label{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.timer-display{position:relative;width:200px;height:200px;display:flex;align-items:center;justify-content:center}.timer-progress-svg{width:100%;height:100%;transform:rotate(-90deg)}.timer-progress-bg{fill:none;stroke:var(--text-standard, #f3f4f6);stroke-width:8}.timer-progress-bar{fill:none;stroke:var(--color-success, #10b981);stroke-width:8;stroke-linecap:round;stroke-dasharray:283;transition:stroke-dashoffset 0.3s linear}.timer-time-text{position:absolute;font-size:var(--timer-time-font-size, 42px);font-weight:700;color:var(--color-primary, #064e3b);font-family:monospace;max-width:140px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.2}.timer-controls{display:flex;gap:12px}.timer-btn{padding:10px 24px;border:none;border-radius:8px;background:var(--color-success, #10b981);color:var(--text-standard, #ffffff);font-weight:600;cursor:pointer;transition:background 0.2s}.timer-btn:hover{background:var(--color-success-hover, #059669)}.timer-btn-secondary{background:var(--bg-secondary, #f3f4f6);color:var(--text-secondary, #374151)}.timer-btn-secondary:hover{background:var(--bg-primary, #e5e7eb)}.timer-progress-linear{position:absolute;bottom:0;left:0;width:100%;height:4px;background:var(--bg-secondary, #f3f4f6);overflow:hidden}.timer-progress-linear-bar{height:100%;background:var(--timer-primary-color, var(--color-success, #10b981));transition:width 0.3s linear}.timer-display:has(.timer-progress-linear){height:60px;}@keyframes timer-pulse{0%{transform:scale(1);box-shadow:0 4px 12px rgba(var(--color-danger-rgb, 239, 68, 68), 0.1)}50%{transform:scale(1.02);box-shadow:0 4px 24px rgba(var(--color-danger-rgb, 239, 68, 68), 0.3)}100%{transform:scale(1);box-shadow:0 4px 12px rgba(var(--color-danger-rgb, 239, 68, 68), 0.1)}}.timer-alert{border:2px solid var(--color-danger, #ef4444);animation:timer-pulse 1.5s infinite ease-in-out}.timer-alert .timer-time-text{color:var(--color-danger, #ef4444)}.timer-alert .timer-progress-bar{stroke:var(--color-danger, #ef4444)}.timer-container-compact{display:inline-flex;align-items:center;gap:16px;padding:12px 20px;background:var(--bg-primary, #ffffff);border-radius:9999px;box-shadow:0 2px 8px rgba(0, 0, 0, 0.05);border:1px solid var(--border-default, #e5e7eb)}.timer-time-text-compact{font-size:20px;font-weight:700;font-family:monospace;min-width:80px}.timer-controls-compact{display:flex;gap:8px}.timer-btn-icon{background:transparent;border:none;cursor:pointer;font-size:16px;padding:4px;border-radius:50%;transition:background 0.2s;display:flex;align-items:center;justify-content:center}.timer-btn-icon:hover{background:var(--bg-secondary, #f3f4f6)}.timer-laps{width:100%;margin-top:24px;border-top:1px solid var(--border-subtle, #f3f4f6);padding-top:16px}.timer-laps-title{font-size:14px;font-weight:600;color:var(--text-muted, #6b7280);margin-bottom:12px}.timer-laps-list{max-height:150px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}.timer-lap-item{display:flex;justify-content:space-between;font-size:13px;color:var(--text-secondary, #374151);padding:8px 12px;background:var(--bg-primary, #f9fafb);border-radius:6px}.timer-lap-time{font-family:monospace;font-weight:600}@media (prefers-color-scheme: dark){.timer-container{background:var(--bg-primary, #1f2937);box-shadow:0 4px 12px rgba(0, 0, 0, 0.2)}.timer-container-compact{background:var(--bg-primary, #1f2937);border-color:var(--border-default, #374151)}.timer-time-text{color:var(--text-standard, #ffffff)}.timer-step-index{background:var(--color-primary, #374151);color:var(--text-muted, #9ca3af)}.timer-progress-bg{stroke:var(--text-secondary, var(--border-default, #374151))}.timer-btn-secondary{background:var(--color-primary, #374151);color:var(--text-standard, #ffffff)}.timer-lap-item{background:var(--bg-secondary, #111827);color:var(--text-standard, #ffffff)}.timer-btn-icon:hover{background:var(--color-primary, #374151)}}"}},[769,"ui-timer",{steps:[1],flow:[1],mode:[1],activeStep:[1026,"active-step"],theme:[16],autoStart:[4,"auto-start"],loop:[4],precision:[1],variant:[1],alertThreshold:[2,"alert-threshold"],targetDate:[1,"target-date"],persist:[1],progressType:[1,"progress-type"],format:[1],useShadow:[516,"use-shadow"],collapse:[516],enableNotifications:[4,"enable-notifications"],enableSound:[4,"enable-sound"],notificationTitle:[1,"notification-title"],notificationBody:[1,"notification-body"],duration:[2],normalizedSteps:[32],isNarrow:[32],currentTime:[32],isRunning:[32],totalDuration:[32],laps:[32],isAlerting:[32],activeStepColor:[32],normalizedTheme:[32],start:[64],pause:[64],reset:[64],next:[64],prev:[64],goTo:[64],lap:[64]},[[9,"resize","handleWindowResize"],[8,"keydown","handleKeyDown"]],{steps:[{normalizeSteps:0}],duration:[{watchDuration:0}],theme:[{normalizeTheme:0}]}]),c=l,p=function(){"undefined"!=typeof customElements&&["ui-timer","ui-badge","ui-button","ui-icon"].forEach((t=>{switch(t){case"ui-timer":customElements.get(o(t))||customElements.define(o(t),l);break;case"ui-badge":customElements.get(o(t))||n();break;case"ui-button":customElements.get(o(t))||a();break;case"ui-icon":customElements.get(o(t))||h()}}))};export{c as UiTimer,p as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as i,createEvent as e,h as s,Host as r,transformTag as o}from"@stencil/core/internal/client";import{d as a,a as n}from"./badge.js";import{d as h}from"./icon.js";import{d as l}from"./loader.js";const c=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.timerTick=e(this,"timerTick",7),this.timerStart=e(this,"timerStart",7),this.timerPause=e(this,"timerPause",7),this.timerComplete=e(this,"timerComplete",7),this.timerAllComplete=e(this,"timerAllComplete",7),this.timerLap=e(this,"timerLap",7),this.timerNext=e(this,"timerNext",7),this.timerPrev=e(this,"timerPrev",7),this.timerGoTo=e(this,"timerGoTo",7)}get el(){return this}steps=[];normalizedSteps=[];isNarrow=!1;flow="linear";mode="countdown";activeStep=0;theme;autoStart=!1;loop=!1;precision="seconds";variant="full";alertThreshold=10;targetDate;persist;progressType="circular";format="default";useShadow=!0;collapse=!1;enableNotifications=!1;enableSound=!1;notificationTitle="Timer Complete";notificationBody="{{label}} phase finished.";duration=0;currentTime=0;isRunning=!1;totalDuration=0;laps=[];isAlerting=!1;activeStepColor;normalizedTheme={};timerInterval;collapseBreakpoint=640;timerTick;timerStart;timerPause;timerComplete;timerAllComplete;timerLap;timerNext;timerPrev;timerGoTo;normalizeSteps(t){if("string"==typeof t)try{this.normalizedSteps=JSON.parse(t)}catch{this.normalizedSteps=[]}else this.normalizedSteps=t||[];this.initStep()}watchDuration(t){0===this.normalizedSteps.length&&(this.totalDuration=t,this.currentTime="milliseconds"===this.precision?1e3*t:t)}normalizeTheme(t){if("string"==typeof t)try{this.normalizedTheme=JSON.parse(t)}catch{this.normalizedTheme={}}else this.normalizedTheme=t||{}}componentWillLoad(){this.normalizeSteps(this.steps),this.normalizeTheme(this.theme),this.loadPersistedState(),this.initTargetDate(),this.initNotifications(),this.updateResponsiveState(),this.duration>0&&0===this.normalizedSteps.length&&(this.totalDuration=this.duration,this.currentTime="milliseconds"===this.precision?1e3*this.duration:this.duration)}handleWindowResize(){this.updateResponsiveState()}updateResponsiveState(){"undefined"!=typeof window&&(this.isNarrow=window.innerWidth<=this.collapseBreakpoint)}initNotifications(){this.enableNotifications&&"Notification"in window&&Notification.requestPermission()}initTargetDate(){if(this.targetDate){const t=new Date(this.targetDate).getTime(),i=Date.now(),e=Math.max(0,Math.floor((t-i)/1e3));this.mode="countdown",this.normalizedSteps=[{label:"Countdown",duration:e}],this.initStep(),this.start()}}loadPersistedState(){if(!this.persist)return;const t=localStorage.getItem("ui-timer-"+this.persist);if(t)try{const i=JSON.parse(t);this.activeStep=i.activeStep,this.currentTime=i.currentTime,i.wasRunning&&this.start()}catch(t){console.warn("Failed to load persisted timer state")}}savePersistedState(){this.persist&&localStorage.setItem("ui-timer-"+this.persist,JSON.stringify({activeStep:this.activeStep,currentTime:this.currentTime,wasRunning:this.isRunning,timestamp:Date.now()}))}componentDidLoad(){this.autoStart&&this.start()}disconnectedCallback(){this.isRunning=!1,this.stopInterval()}initStep(){const t=this.normalizedSteps[this.activeStep],i=t?.duration||0;this.totalDuration=i,this.laps=[],this.isAlerting=!1,this.activeStepColor=t?.color,this.currentTime="stopwatch"===this.mode?0:"milliseconds"===this.precision?1e3*i:i}playSound(t){if(this.enableSound)try{const i=new(window.AudioContext||window.webkitAudioContext),e=i.createOscillator(),s=i.createGain();e.connect(s),s.connect(i.destination),"tick"===t?(e.frequency.setValueAtTime(800,i.currentTime),s.gain.setValueAtTime(.1,i.currentTime),s.gain.exponentialRampToValueAtTime(.01,i.currentTime+.1),e.start(),e.stop(i.currentTime+.1)):(e.type="sine",e.frequency.setValueAtTime(440,i.currentTime),e.frequency.exponentialRampToValueAtTime(880,i.currentTime+.2),s.gain.setValueAtTime(.2,i.currentTime),s.gain.exponentialRampToValueAtTime(.01,i.currentTime+.5),e.start(),e.stop(i.currentTime+.5))}catch(t){console.warn("Audio feedback failed")}}notify(t,i,e){if(this.enableNotifications&&"Notification"in window&&"granted"===Notification.permission){const s=t.replace("{{label}}",e),r=i.replace("{{label}}",e);new Notification(s,{body:r})}}stopInterval(){this.timerInterval&&(clearTimeout(this.timerInterval),this.timerInterval=null)}emitStepEvent(t,i){const e=this.normalizedSteps[i];if(!e)return;const s={index:i,step:e};"next"===t?this.timerNext.emit(s):"prev"===t?this.timerPrev.emit(s):this.timerGoTo.emit(s)}async start(){if(this.isRunning)return;this.isRunning=!0,this.timerStart.emit({stepIndex:this.activeStep});const t="milliseconds"===this.precision?10:1e3,i="milliseconds"===this.precision?10:1;let e=performance.now()+t;const s=()=>{if(!this.isRunning)return;const r=performance.now()-e;if("countdown"===this.mode){if(!(this.currentTime>0))return this.playSound("complete"),void this.handleStepComplete();this.currentTime-=i,this.checkAlert(),this.timerTick.emit({remaining:this.currentTime,stepIndex:this.activeStep,mode:this.mode}),this.savePersistedState(),this.currentTime>0&&this.currentTime<=3&&"seconds"===this.precision&&this.playSound("tick")}else{this.currentTime+=i,this.timerTick.emit({remaining:this.currentTime,stepIndex:this.activeStep,mode:this.mode}),this.savePersistedState();const t="milliseconds"===this.precision?1e3*this.totalDuration:this.totalDuration;if(t>0&&this.currentTime>=t)return void this.handleStepComplete()}e+=t,this.timerInterval=setTimeout(s,Math.max(0,t-r))};this.timerInterval=setTimeout(s,t)}async pause(){this.isRunning=!1,this.timerInterval&&clearTimeout(this.timerInterval),this.timerInterval=null,this.timerPause.emit({stepIndex:this.activeStep})}async reset(){this.pause(),this.initStep()}async next(){this.activeStep>=this.normalizedSteps.length-1||(this.pause(),this.activeStep++,this.initStep(),this.autoStart&&await this.start(),this.emitStepEvent("next",this.activeStep))}async prev(){this.activeStep<=0||(this.pause(),this.activeStep--,this.initStep(),this.autoStart&&await this.start(),this.emitStepEvent("prev",this.activeStep))}async goTo(t){t<0||t>=this.normalizedSteps.length||t===this.activeStep||(this.pause(),this.activeStep=t,this.initStep(),this.autoStart&&await this.start(),this.emitStepEvent("goto",this.activeStep))}async lap(){"stopwatch"===this.mode&&(this.laps=[...this.laps,this.currentTime],this.timerLap.emit({time:this.currentTime,lapIndex:this.laps.length-1}))}handleKeyDown(t){document.activeElement===this.el&&("Space"===t.code?(t.preventDefault(),this.isRunning?this.pause():this.start()):"KeyR"===t.code?this.reset():"KeyL"===t.code?this.lap():"KeyN"===t.code?this.next():"KeyP"===t.code&&this.prev())}checkAlert(){this.isAlerting="countdown"===this.mode&&0!==this.totalDuration&&("milliseconds"===this.precision?this.currentTime/1e3:this.currentTime)/this.totalDuration*100<=this.alertThreshold}handleStepComplete(){this.stopInterval(),this.isRunning=!1,this.timerComplete.emit({stepIndex:this.activeStep}),this.notify(this.notificationTitle,this.notificationBody,this.normalizedSteps[this.activeStep]?.label||"Timer"),this.activeStep<this.normalizedSteps.length-1?(this.activeStep++,this.initStep(),this.start(),this.emitStepEvent("next",this.activeStep)):(this.timerAllComplete.emit(),this.loop&&(this.activeStep=0,this.initStep(),this.start(),this.emitStepEvent("next",this.activeStep)))}calculateOffset(){if(0===this.totalDuration)return"stopwatch"===this.mode?0:283;const t="milliseconds"===this.precision?this.currentTime/1e3:this.currentTime;let i=0;return i="countdown"===this.mode?(this.totalDuration-t)/this.totalDuration:t/this.totalDuration,i=Math.max(0,Math.min(1,i)),283-283*i}formatTime(t){const i="milliseconds"===this.precision;let e=i?Math.floor(t/1e3):t,s=i?Math.floor(t%1e3/10):0;if("human"===this.format){const t=Math.floor(e/60),i=e%60;return t>0?`${t}m ${i}s`:i+"s"}if("simple"===this.format)return""+e;const r=Math.floor(e/86400),o=Math.floor(e%86400/3600),a=Math.floor(e%3600/60),n=e%60;let h="";return h=r>0?`${r}d ${o}:${a<10?"0":""}${a}:${n<10?"0":""}${n}`:o>0?`${o}:${a<10?"0":""}${a}:${n<10?"0":""}${n}`:`${a}:${n<10?"0":""}${n}`,i&&(h+=`.${s<10?"0":""}${s}`),h}render(){return s(r,{key:"1d8f1a154864e347f0458302b6684857981d54d0",class:{"timer-has-shadow":this.useShadow,"timer-no-shadow":!this.useShadow,"timer-collapsed":this.collapse&&this.isNarrow}},"compact"===this.variant||this.collapse&&this.isNarrow?this.renderCompact():this.renderFull())}renderFull(){const t={...this.normalizedTheme,...this.activeStepColor?{"--timer-primary-color":this.activeStepColor}:{}};return s("div",{class:{"timer-container":!0,"timer-alert":this.isAlerting},style:t},s("div",{class:"timer-steps"},this.normalizedSteps.map(((t,i)=>s("div",{class:{"timer-step":!0,"timer-step-active":i===this.activeStep,"timer-step-completed":i<this.activeStep}},s("div",{class:"timer-step-header"},s("span",{class:"timer-step-index"},i+1),s("span",{class:"timer-step-label"},t.label)))))),s("div",{class:"timer-display"},"circular"===this.progressType?s("svg",{class:"timer-progress-svg",viewBox:"0 0 100 100"},s("circle",{class:"timer-progress-bg",cx:"50",cy:"50",r:"45"}),s("circle",{class:"timer-progress-bar",cx:"50",cy:"50",r:"45",style:{"stroke-dashoffset":""+this.calculateOffset()}})):s("div",{class:"timer-progress-linear"},s("div",{class:"timer-progress-linear-bg"}),s("div",{class:"timer-progress-linear-bar",style:{width:100*(1-this.calculateOffset()/283)+"%"}})),s("div",{class:"timer-time-text"},s("slot",{name:"content"},this.formatTime(this.currentTime)))),s("div",{class:"timer-controls"},s("ui-button",{variant:"primary",onClick:()=>this.isRunning?this.pause():this.start(),label:this.isRunning?"Pause":"Start"}),"stopwatch"===this.mode&&s("ui-button",{variant:"secondary",onClick:()=>this.lap(),label:"Lap"}),s("ui-button",{variant:"secondary",onClick:()=>this.reset(),label:"Reset"}),s("ui-button",{variant:"outline",onClick:()=>this.next(),label:"Skip"})),this.laps.length>0&&s("div",{class:"timer-laps"},s("div",{class:"timer-laps-title"},"Laps"),s("div",{class:"timer-laps-list"},this.laps.map(((t,i)=>s("div",{class:"timer-lap-item"},s("span",null,"Lap ",i+1),s("span",{class:"timer-lap-time"},this.formatTime(t))))))))}renderCompact(){return s("div",{class:{"timer-container-compact":!0,"timer-alert":this.isAlerting},style:this.normalizedTheme},s("div",{class:"timer-time-text-compact"},this.formatTime(this.currentTime)),s("div",{class:"timer-controls-compact"},s("ui-button",{variant:"ghost",iconOnly:!0,size:"sm",onClick:()=>this.isRunning?this.pause():this.start(),icon:this.isRunning?"pause":"play",iconLibrary:"lucide",iconSize:"1.2em",ariaLabel:this.isRunning?"Pause":"Start"}),s("ui-button",{variant:"ghost",iconOnly:!0,size:"sm",onClick:()=>this.reset(),icon:"rotate-cw",iconLibrary:"lucide",iconSize:"1.2em",ariaLabel:"Reset"}),"stopwatch"===this.mode&&s("ui-button",{variant:"ghost",iconOnly:!0,size:"sm",onClick:()=>this.lap(),icon:"flag",iconLibrary:"lucide",iconSize:"1.2em",ariaLabel:"Lap"})))}static get watchers(){return{steps:[{normalizeSteps:0}],duration:[{watchDuration:0}],theme:[{normalizeTheme:0}]}}static get style(){return".sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.timer-container{display:flex;flex-direction:column;gap:24px;padding:24px;background:var(--bg-primary, #ffffff);border-radius:12px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.05);font-family:inherit;align-items:center;outline:none}.timer-container:focus{box-shadow:0 0 0 3px rgba(var(--color-success-rgb, 16, 185, 129), 0.5)}:host(.timer-no-shadow) .timer-container,:host(.timer-no-shadow) .timer-container-compact{box-shadow:none}:host(.timer-collapsed) .timer-steps,:host(.timer-collapsed) .timer-laps{display:none}:host(.timer-collapsed) .timer-container{padding:16px;gap:16px;align-items:stretch}:host(.timer-collapsed) .timer-controls{justify-content:center;flex-wrap:wrap}:host(.timer-collapsed) .timer-display{width:160px;height:160px}.timer-steps{display:flex;gap:12px;width:100%;justify-content:center}.timer-step{flex:1;max-width:120px;display:flex;flex-direction:column;gap:8px;opacity:0.5;transition:opacity 0.3s}.timer-step-active{opacity:1}.timer-step-completed{opacity:0.8}.timer-step-header{display:flex;align-items:center;gap:8px}.timer-step-index{width:24px;height:24px;border-radius:50%;background:var(--bg-primary, #e5e7eb);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}.timer-step-active .timer-step-index{background:var(--color-success, #10b981);color:var(--text-standard, #ffffff)}.timer-step-completed .timer-step-index{background:var(--color-success-hover, #059669);color:var(--text-standard, #ffffff)}.timer-step-label{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.timer-display{position:relative;width:200px;height:200px;display:flex;align-items:center;justify-content:center}.timer-progress-svg{width:100%;height:100%;transform:rotate(-90deg)}.timer-progress-bg{fill:none;stroke:var(--text-standard, #f3f4f6);stroke-width:8}.timer-progress-bar{fill:none;stroke:var(--color-success, #10b981);stroke-width:8;stroke-linecap:round;stroke-dasharray:283;transition:stroke-dashoffset 0.3s linear}.timer-time-text{position:absolute;font-size:var(--timer-time-font-size, 42px);font-weight:700;color:var(--color-primary, #064e3b);font-family:monospace;max-width:140px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.2}.timer-controls{display:flex;gap:12px}.timer-btn{padding:10px 24px;border:none;border-radius:8px;background:var(--color-success, #10b981);color:var(--text-standard, #ffffff);font-weight:600;cursor:pointer;transition:background 0.2s}.timer-btn:hover{background:var(--color-success-hover, #059669)}.timer-btn-secondary{background:var(--bg-secondary, #f3f4f6);color:var(--text-secondary, #374151)}.timer-btn-secondary:hover{background:var(--bg-primary, #e5e7eb)}.timer-progress-linear{position:absolute;bottom:0;left:0;width:100%;height:4px;background:var(--bg-secondary, #f3f4f6);overflow:hidden}.timer-progress-linear-bar{height:100%;background:var(--timer-primary-color, var(--color-success, #10b981));transition:width 0.3s linear}.timer-display:has(.timer-progress-linear){height:60px;}@keyframes timer-pulse{0%{transform:scale(1);box-shadow:0 4px 12px rgba(var(--color-danger-rgb, 239, 68, 68), 0.1)}50%{transform:scale(1.02);box-shadow:0 4px 24px rgba(var(--color-danger-rgb, 239, 68, 68), 0.3)}100%{transform:scale(1);box-shadow:0 4px 12px rgba(var(--color-danger-rgb, 239, 68, 68), 0.1)}}.timer-alert{border:2px solid var(--color-danger, #ef4444);animation:timer-pulse 1.5s infinite ease-in-out}.timer-alert .timer-time-text{color:var(--color-danger, #ef4444)}.timer-alert .timer-progress-bar{stroke:var(--color-danger, #ef4444)}.timer-container-compact{display:inline-flex;align-items:center;gap:16px;padding:12px 20px;background:var(--bg-primary, #ffffff);border-radius:9999px;box-shadow:0 2px 8px rgba(0, 0, 0, 0.05);border:1px solid var(--border-default, #e5e7eb)}.timer-time-text-compact{font-size:20px;font-weight:700;font-family:monospace;min-width:80px}.timer-controls-compact{display:flex;gap:8px}.timer-btn-icon{background:transparent;border:none;cursor:pointer;font-size:16px;padding:4px;border-radius:50%;transition:background 0.2s;display:flex;align-items:center;justify-content:center}.timer-btn-icon:hover{background:var(--bg-secondary, #f3f4f6)}.timer-laps{width:100%;margin-top:24px;border-top:1px solid var(--border-subtle, #f3f4f6);padding-top:16px}.timer-laps-title{font-size:14px;font-weight:600;color:var(--text-muted, #6b7280);margin-bottom:12px}.timer-laps-list{max-height:150px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}.timer-lap-item{display:flex;justify-content:space-between;font-size:13px;color:var(--text-secondary, #374151);padding:8px 12px;background:var(--bg-primary, #f9fafb);border-radius:6px}.timer-lap-time{font-family:monospace;font-weight:600}@media (prefers-color-scheme: dark){.timer-container{background:var(--bg-primary, #1f2937);box-shadow:0 4px 12px rgba(0, 0, 0, 0.2)}.timer-container-compact{background:var(--bg-primary, #1f2937);border-color:var(--border-default, #374151)}.timer-time-text{color:var(--text-standard, #ffffff)}.timer-step-index{background:var(--color-primary, #374151);color:var(--text-muted, #9ca3af)}.timer-progress-bg{stroke:var(--text-secondary, var(--border-default, #374151))}.timer-btn-secondary{background:var(--color-primary, #374151);color:var(--text-standard, #ffffff)}.timer-lap-item{background:var(--bg-secondary, #111827);color:var(--text-standard, #ffffff)}.timer-btn-icon:hover{background:var(--color-primary, #374151)}}"}},[769,"ui-timer",{steps:[1],flow:[1],mode:[1],activeStep:[1026,"active-step"],theme:[16],autoStart:[4,"auto-start"],loop:[4],precision:[1],variant:[1],alertThreshold:[2,"alert-threshold"],targetDate:[1,"target-date"],persist:[1],progressType:[1,"progress-type"],format:[1],useShadow:[516,"use-shadow"],collapse:[516],enableNotifications:[4,"enable-notifications"],enableSound:[4,"enable-sound"],notificationTitle:[1,"notification-title"],notificationBody:[1,"notification-body"],duration:[2],normalizedSteps:[32],isNarrow:[32],currentTime:[32],isRunning:[32],totalDuration:[32],laps:[32],isAlerting:[32],activeStepColor:[32],normalizedTheme:[32],start:[64],pause:[64],reset:[64],next:[64],prev:[64],goTo:[64],lap:[64]},[[9,"resize","handleWindowResize"],[8,"keydown","handleKeyDown"]],{steps:[{normalizeSteps:0}],duration:[{watchDuration:0}],theme:[{normalizeTheme:0}]}]),p=c,d=function(){"undefined"!=typeof customElements&&["ui-timer","ui-badge","ui-button","ui-icon","ui-loader"].forEach((t=>{switch(t){case"ui-timer":customElements.get(o(t))||customElements.define(o(t),c);break;case"ui-badge":customElements.get(o(t))||n();break;case"ui-button":customElements.get(o(t))||a();break;case"ui-icon":customElements.get(o(t))||h();break;case"ui-loader":customElements.get(o(t))||l()}}))};export{p as UiTimer,d as defineCustomElement}