atomicuilibrary 0.0.1

package/dist/components/ui-masonry.js

@@ -0,0 +1 @@
+import{proxyCustomElement as t,HTMLElement as i,createEvent as e,h as s,transformTag as a}from"@stencil/core/internal/client";import{d as o,a as r}from"./badge.js";import{d as n}from"./checkbox.js";import{d as l}from"./icon.js";const h=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.itemClick=e(this,"itemClick",7),this.filterChange=e(this,"filterChange",7),this.sortChange=e(this,"sortChange",7),this.itemSelectionChange=e(this,"itemSelectionChange",7),this.layoutChange=e(this,"layoutChange",7),this.itemsLoaded=e(this,"itemsLoaded",7),this.batchDelete=e(this,"batchDelete",7)}get el(){return this}items=[];columns=3;gap=16;layoutType="masonry";itemMinWidth=200;itemMaxWidth=400;breakpoints='{"640":2,"768":3,"1024":4,"1280":5}';filterBy="";sortBy="";sortOrder="asc";animationDuration=300;enableAnimation=!0;loadingState=!1;emptyMessage="No items to display";showFilters=!1;filterOptions=[];lazyLoad=!1;lazyLoadMargin="200px";infiniteScroll=!1;infiniteScrollDistance=200;selectable=!1;multiSelect=!1;showBatchActions=!1;lightbox=!1;filteredItems=[];currentColumns=3;isResizing=!1;selectedItems=new Set;loadedImages=new Set;visibleItems=12;activeImageIndex=-1;isLightboxOpen=!1;itemClick;filterChange;sortChange;itemSelectionChange;layoutChange;itemsLoaded;batchDelete;resizeObserver;componentWillLoad(){this.updateFilteredItems(),this.calculateColumns()}componentDidLoad(){this.setupResizeObserver(),this.infiniteScroll&&this.setupInfiniteScroll(),this.lazyLoad&&this.setupLazyLoading()}handleWindowKeyDown(t){if(this.isLightboxOpen&&this.lightbox)return"Escape"===t.key&&this.closeLightbox(),"ArrowRight"===t.key&&this.nextImage(t),void("ArrowLeft"===t.key&&this.prevImage(t));(this.selectedItems.size>0||document.activeElement===this.el)&&this.handleKeyDown(t)}handleKeyDown(t){if(this.selectable)return t.ctrlKey&&"a"===t.key?(t.preventDefault(),void this.selectAll()):"Escape"===t.key&&this.selectedItems.size>0?(t.preventDefault(),void this.deselectAll()):"Delete"===t.key&&this.selectedItems.size>0?(t.preventDefault(),void this.deleteSelected()):void 0}disconnectedCallback(){this.resizeObserver&&this.resizeObserver.disconnect(),this.infiniteScrollObserver&&this.infiniteScrollObserver.disconnect(),this.lazyLoadObserver&&this.lazyLoadObserver.disconnect()}infiniteScrollObserver;lazyLoadObserver;setupInfiniteScroll(){void 0!==globalThis.IntersectionObserver&&(this.infiniteScrollObserver=new IntersectionObserver((t=>{t.forEach((t=>{t.isIntersecting&&this.visibleItems<this.filteredItems.length&&(this.visibleItems=Math.min(this.visibleItems+12,this.filteredItems.length),this.itemsLoaded.emit({count:this.visibleItems,total:this.filteredItems.length}))}))}),{rootMargin:this.infiniteScrollDistance+"px"}),setTimeout((()=>{const t=this.el.shadowRoot?.querySelector(".infinite-scroll-sentinel");t&&this.infiniteScrollObserver.observe(t)}),100))}setupLazyLoading(){void 0!==globalThis.IntersectionObserver&&(this.lazyLoadObserver=new IntersectionObserver((t=>{t.forEach((t=>{if(t.isIntersecting){const i=parseInt(t.target.getAttribute("data-index"));this.loadedImages=new Set([...this.loadedImages,i]);const e=t.target,s=e.getAttribute("data-src");s&&!e.src&&(e.src=s),this.lazyLoadObserver.unobserve(t.target)}}))}),{rootMargin:this.lazyLoadMargin}),setTimeout((()=>{const t=this.el.shadowRoot?.querySelectorAll("img[data-src]");t?.forEach((t=>this.lazyLoadObserver.observe(t)))}),100))}toggleSelection(t,i){if(!this.selectable)return;i&&i.stopPropagation();const e=new Set(this.selectedItems);e.has(t)?e.delete(t):(this.multiSelect||e.clear(),e.add(t)),this.selectedItems=e;const s=Array.from(this.selectedItems),a=s.map((t=>this.filteredItems[t]));this.itemSelectionChange.emit({selectedItems:a,indices:s})}selectAll(){if(!this.selectable)return;this.selectedItems=new Set(this.filteredItems.map(((t,i)=>i)));const t=Array.from(this.selectedItems),i=t.map((t=>this.filteredItems[t]));this.itemSelectionChange.emit({selectedItems:i,indices:t})}deselectAll(){this.selectedItems=new Set,this.itemSelectionChange.emit({selectedItems:[],indices:[]})}deleteSelected(){const t=Array.from(this.selectedItems),i=t.map((t=>this.filteredItems[t]));this.batchDelete.emit({items:i,indices:t}),this.selectedItems=new Set,this.itemSelectionChange.emit({selectedItems:[],indices:[]})}watchItemsChange(){this.updateFilteredItems()}watchColumnsChange(){this.calculateColumns()}getParsedItems(){if("string"==typeof this.items)try{return JSON.parse(this.items)}catch{return console.error("Invalid items JSON"),[]}return this.items}getParsedFilterOptions(){if("string"==typeof this.filterOptions)try{return JSON.parse(this.filterOptions)}catch{return[]}return this.filterOptions}getParsedBreakpoints(){try{return JSON.parse(this.breakpoints)}catch{return{640:2,768:3,1024:4,1280:5}}}setupResizeObserver(){this.resizeObserver=new ResizeObserver((()=>{this.isResizing=!0,this.calculateColumns(),setTimeout((()=>{this.isResizing=!1}),100)}));const t=this.el.shadowRoot.querySelector(".masonry-container");t&&this.resizeObserver.observe(t)}calculateColumns(){const t=this.el.shadowRoot?.querySelector(".masonry-container");if(!t)return;const i=t.clientWidth,e=this.getParsedBreakpoints(),s=Object.keys(e).map(Number).sort(((t,i)=>i-t));let a=this.columns;for(const t of s)if(i>=t){a=e[t];break}this.currentColumns=a}updateFilteredItems(){let t=[...this.getParsedItems()];this.filterBy&&(t=t.filter((t=>{const[i,e]=this.filterBy.split(":");return t[i]&&(""+t[i]).toLowerCase().includes(e.toLowerCase())}))),this.sortBy&&t.sort(((t,i)=>{const e=t[this.sortBy],s=i[this.sortBy];if("number"==typeof e&&"number"==typeof s)return"asc"===this.sortOrder?e-s:s-e;const a=(e+"").toLowerCase(),o=(s+"").toLowerCase();return"asc"===this.sortOrder?a.localeCompare(o):o.localeCompare(a)})),this.filteredItems=t}handleItemClick=(t,i)=>{this.itemClick.emit({item:t,index:i})};handleFilterChange=(t,i)=>{this.filterChange.emit({filterBy:t,value:i})};handleSortChange=(t,i)=>{this.sortChange.emit({sortBy:t,order:i})};getColumnItems(t){return"masonry"===this.layoutType?this.filteredItems.filter(((i,e)=>e%this.currentColumns===t)):this.filteredItems}renderFilters(){if(!this.showFilters)return null;const t=this.getParsedFilterOptions();return s("div",{class:"masonry-filters"},s("div",{class:"filter-group"},s("label",null,"Filter:"),s("select",{onChange:i=>{const e=i.target.value;this.handleFilterChange(t[0]?.key||"category",e)}},s("option",{value:""},"All"),t.map((t=>s("option",{value:t.key},t.label))))),s("div",{class:"filter-group"},s("label",null,"Sort:"),s("select",{onChange:t=>this.handleSortChange(t.target.value,this.sortOrder)},s("option",{value:""},"None"),s("option",{value:"title"},"Title"),s("option",{value:"date"},"Date"),s("option",{value:"size"},"Size"))),s("div",{class:"filter-group"},s("ui-button",{variant:"ghost",class:{"sort-button":!0,active:"asc"===this.sortOrder},onClick:()=>this.handleSortChange(this.sortBy,"asc"),icon:"arrow-up",iconLibrary:"fontawesome",iconOnly:!0,size:"sm"}),s("ui-button",{variant:"ghost",class:{"sort-button":!0,active:"desc"===this.sortOrder},onClick:()=>this.handleSortChange(this.sortBy,"desc"),icon:"arrow-down",iconLibrary:"fontawesome",iconOnly:!0,size:"sm"})))}renderMasonryLayout(){const t=this.infiniteScroll?this.filteredItems.slice(0,this.visibleItems):this.filteredItems;return s("div",{class:"masonry-columns",role:"grid","aria-label":"Masonry layout",style:{"column-count":""+this.currentColumns,"column-gap":this.gap+"px"}},t.map(((t,i)=>s("div",{class:{"masonry-item":!0,animate:this.enableAnimation&&!this.isResizing,selected:this.selectedItems.has(i)},style:{"margin-bottom":this.gap+"px","animation-delay":this.enableAnimation?50*i+"ms":"0ms"},onClick:()=>this.handleItemClick(t,i),role:"gridcell","aria-selected":this.selectedItems.has(i)?"true":"false",tabindex:0},this.selectable&&s("div",{class:"selection-checkbox"},s("ui-checkbox",{checked:this.selectedItems.has(i),onCheckboxChange:t=>this.toggleSelection(i,t),ariaLabel:"Select "+(t.title||"item "+(i+1)),size:"sm"})),s("slot",{name:"item-"+i},this.renderDefaultItem(t,i))))),this.infiniteScroll&&this.visibleItems<this.filteredItems.length&&s("div",{class:"infinite-scroll-sentinel"}))}renderGridLayout(){const t=this.infiniteScroll?this.filteredItems.slice(0,this.visibleItems):this.filteredItems;return s("div",{class:"masonry-grid",role:"grid","aria-label":"Grid layout",style:{"grid-template-columns":`repeat(${this.currentColumns}, 1fr)`,gap:this.gap+"px"}},t.map(((t,i)=>s("div",{class:{"masonry-item":!0,animate:this.enableAnimation&&!this.isResizing,selected:this.selectedItems.has(i)},style:{"animation-delay":this.enableAnimation?50*i+"ms":"0ms"},onClick:()=>this.handleItemClick(t,i),role:"gridcell","aria-selected":this.selectedItems.has(i)?"true":"false",tabindex:0},this.selectable&&s("div",{class:"selection-checkbox"},s("ui-checkbox",{checked:this.selectedItems.has(i),onCheckboxChange:t=>this.toggleSelection(i,t),ariaLabel:"Select "+(t.title||"item "+(i+1)),size:"sm"})),s("slot",{name:"item-"+i},this.renderDefaultItem(t,i))))),this.infiniteScroll&&this.visibleItems<this.filteredItems.length&&s("div",{class:"infinite-scroll-sentinel"}))}renderColumnsLayout(){const t=Array.from({length:this.currentColumns},((t,i)=>i)),i=this.infiniteScroll?this.filteredItems.slice(0,this.visibleItems):this.filteredItems;return s("div",{class:"masonry-flex-columns",role:"grid","aria-label":"Column layout",style:{gap:this.gap+"px"}},t.map((t=>s("div",{class:"masonry-column",style:{flex:"1"},role:"row"},this.getColumnItems(t).map(((e,a)=>{const o=t+a*this.currentColumns;return o>=i.length?null:s("div",{class:{"masonry-item":!0,animate:this.enableAnimation&&!this.isResizing,selected:this.selectedItems.has(o)},style:{"margin-bottom":this.gap+"px","animation-delay":this.enableAnimation?50*o+"ms":"0ms"},onClick:()=>this.handleItemClick(e,o),role:"gridcell","aria-selected":this.selectedItems.has(o)?"true":"false",tabindex:0},this.selectable&&s("div",{class:"selection-checkbox"},s("ui-checkbox",{checked:this.selectedItems.has(o),onCheckboxChange:t=>this.toggleSelection(o,t),ariaLabel:"Select "+(e.title||"item "+(o+1)),size:"sm"})),s("slot",{name:"item-"+o},this.renderDefaultItem(e,o)))}))))),this.infiniteScroll&&this.visibleItems<this.filteredItems.length&&s("div",{class:"infinite-scroll-sentinel"}))}openLightbox(t,i){this.lightbox&&(i.stopPropagation(),this.activeImageIndex=t,this.isLightboxOpen=!0,document.body.style.overflow="hidden")}closeLightbox(){this.isLightboxOpen=!1,document.body.style.overflow=""}nextImage(t){t&&t.stopPropagation(),this.activeImageIndex<this.filteredItems.length-1?this.activeImageIndex++:this.activeImageIndex=0}prevImage(t){t&&t.stopPropagation(),this.activeImageIndex>0?this.activeImageIndex--:this.activeImageIndex=this.filteredItems.length-1}renderLightbox(){if(!this.isLightboxOpen||-1===this.activeImageIndex)return null;const t=this.filteredItems[this.activeImageIndex];return t?s("div",{class:"masonry-lightbox",onClick:()=>this.closeLightbox()},s("ui-button",{variant:"ghost",class:"lightbox-close",onClick:()=>this.closeLightbox(),icon:"times",iconLibrary:"fontawesome",iconOnly:!0,size:"lg",ariaLabel:"Close lightbox"}),s("div",{class:"lightbox-content",onClick:t=>t.stopPropagation()},s("ui-button",{variant:"ghost",class:"lightbox-nav prev",onClick:t=>this.prevImage(t),icon:"chevron-left",iconLibrary:"fontawesome",iconOnly:!0,size:"lg",ariaLabel:"Previous image"}),s("div",{class:"lightbox-image-container"},s("img",{src:t.image,alt:t.title,class:"lightbox-image"}),s("div",{class:"lightbox-details"},s("h3",null,t.title),t.description&&s("p",null,t.description))),s("ui-button",{variant:"ghost",class:"lightbox-nav next",onClick:t=>this.nextImage(t),icon:"chevron-right",iconLibrary:"fontawesome",iconOnly:!0,size:"lg",ariaLabel:"Next image"})),s("div",{class:"lightbox-counter"},this.activeImageIndex+1," / ",this.filteredItems.length)):null}renderSkeleton(){const t=Array.from({length:3*this.currentColumns},((t,i)=>i)),i=Array.from({length:this.currentColumns},((t,i)=>i));return s("div",{class:"masonry-flex-columns skeleton-wrapper",style:{gap:this.gap+"px"}},i.map((i=>s("div",{class:"masonry-column",style:{flex:"1"}},t.filter(((t,e)=>e%this.currentColumns===i)).map(((t,i)=>s("div",{class:"masonry-item skeleton-item",style:{"margin-bottom":this.gap+"px",height:200+50*i%200+"px"}},s("div",{class:"skeleton-shimmer"}))))))))}renderDefaultItem(t,i){return s("div",{class:"default-item",style:{"min-width":this.itemMinWidth?this.itemMinWidth+"px":void 0,"max-width":this.itemMaxWidth?this.itemMaxWidth+"px":void 0}},s("div",{class:"image-wrapper"},t.image&&s("img",this.lazyLoad?{"data-src":t.image,"data-index":""+i,alt:t.title||"Item",class:"lazy-image",style:{opacity:this.loadedImages.has(i)?"1":"0.3"}}:{src:t.image,alt:t.title||"Item",loading:"lazy"}),s("div",{class:"item-overlay"},s("div",{class:"overlay-actions"},this.lightbox&&s("ui-button",{variant:"ghost",onClick:t=>this.openLightbox(i,t),ariaLabel:"View Fullscreen",icon:"expand-alt",iconLibrary:"fontawesome",iconOnly:!0,size:"sm"}),s("ui-button",{variant:"ghost",ariaLabel:"Like",icon:"heart",iconLibrary:"fontawesome",iconOnly:!0,size:"sm"}),s("ui-button",{variant:"ghost",ariaLabel:"Info",icon:"info",iconLibrary:"fontawesome",iconOnly:!0,size:"sm"})))),t.title&&s("h3",{class:"item-title"},t.title),t.description&&s("p",{class:"item-description"},t.description),t.tags&&s("div",{class:"item-tags"},t.tags.map((t=>s("span",{class:"tag"},t)))))}renderEmpty(){return s("div",{class:"masonry-empty"},s("ui-icon",{name:"inbox",library:"fontawesome"}),s("p",null,this.emptyMessage))}renderBatchActions(){return this.showBatchActions&&0!==this.selectedItems.size?s("div",{class:"batch-actions-toolbar",role:"toolbar","aria-label":"Batch actions"},s("span",{class:"selection-count"},this.selectedItems.size," selected"),s("div",{class:"action-buttons"},s("ui-button",{variant:"ghost",onClick:()=>this.selectAll(),ariaLabel:"Select all items",icon:"check-square",iconLibrary:"fontawesome",label:"Select All"}),s("ui-button",{variant:"ghost",onClick:()=>this.deselectAll(),ariaLabel:"Clear selection",icon:"times",iconLibrary:"fontawesome",label:"Clear"}),s("ui-button",{variant:"ghost",onClick:()=>this.deleteSelected(),class:"delete-button",ariaLabel:"Delete selected items",icon:"trash",iconLibrary:"fontawesome",label:"Delete"}))):null}render(){return this.loadingState?this.renderSkeleton():0===this.filteredItems.length?this.renderEmpty():s("div",{class:"masonry-wrapper",tabindex:this.selectable?0:-1},this.renderFilters(),this.renderBatchActions(),s("div",{class:{"masonry-container":!0,["masonry-"+this.layoutType]:!0}},"masonry"===this.layoutType&&this.renderMasonryLayout(),"grid"===this.layoutType&&this.renderGridLayout(),"columns"===this.layoutType&&this.renderColumnsLayout()),this.renderLightbox())}static get watchers(){return{items:[{watchItemsChange:0}],filterBy:[{watchItemsChange:0}],sortBy:[{watchItemsChange:0}],sortOrder:[{watchItemsChange:0}],columns:[{watchColumnsChange: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}.masonry-wrapper{width:100%;padding:16px}.masonry-filters{display:flex;gap:16px;align-items:center;margin-bottom:24px;padding:16px;background:var(--bg-primary, #f9fafb);border-radius:8px;flex-wrap:wrap}.masonry-filters .filter-group{display:flex;gap:8px;align-items:center}.masonry-filters .filter-group label{font-weight:600;font-size:0.875rem;color:var(--text-secondary, #374151)}.masonry-filters .filter-group select{padding:8px 12px;border:1px solid var(--border-strong, #d1d5db);border-radius:6px;font-size:0.875rem;background:var(--bg-primary, #ffffff);cursor:pointer;min-width:120px}.masonry-filters .filter-group select:focus{outline:none;border-color:var(--color-primary-hover, #2563eb);box-shadow:0 0 0 3px rgba(var(--color-primary-rgb, 37, 99, 235), 0.1)}.masonry-filters .filter-group .sort-button{padding:8px 12px;border:1px solid var(--border-strong, #d1d5db);border-radius:6px;background:var(--bg-primary, #ffffff);cursor:pointer;transition:all 0.2s ease;color:var(--text-muted, #6b7280)}.masonry-filters .filter-group .sort-button:hover{background:var(--bg-secondary, #f3f4f6);border-color:var(--color-primary, #9ca3af)}.masonry-filters .filter-group .sort-button.active{background:var(--color-success, #3dcd58);color:var(--text-standard, #ffffff);border-color:var(--color-success, #3dcd58)}.masonry-filters .filter-group .sort-button:focus{outline:none;box-shadow:0 0 0 3px rgba(var(--color-primary-rgb, 37, 99, 235), 0.1)}.masonry-container{width:100%}.masonry-columns{column-gap:16px}.masonry-columns .masonry-item{break-inside:avoid;page-break-inside:avoid;display:inline-block;width:100%}.masonry-grid{display:grid;grid-auto-rows:auto;width:100%}.masonry-grid .masonry-item{width:100%}.masonry-flex-columns{display:flex;width:100%}.masonry-flex-columns .masonry-column{display:flex;flex-direction:column}.masonry-item{cursor:pointer;transition:transform 0.2s ease, box-shadow 0.2s ease;background:var(--bg-primary, #ffffff);border-radius:8px;overflow:hidden;box-shadow:0 1px 3px rgba(0, 0, 0, 0.1)}.masonry-item:hover{transform:translateY(-4px);box-shadow:0 4px 12px rgba(0, 0, 0, 0.15)}.masonry-item.animate{animation:fadeInUp 0.3s ease forwards;opacity:0}.default-item img{width:100%;height:auto;display:block;object-fit:cover}.default-item .item-title{margin:12px 16px 8px;font-size:1rem;font-weight:600;color:var(--text-primary, #111827);line-height:1.4}.default-item .item-description{margin:0 16px 12px;font-size:0.875rem;color:var(--text-muted, #6b7280);line-height:1.5}.default-item .item-tags{display:flex;gap:8px;flex-wrap:wrap;margin:0 16px 16px}.default-item .item-tags .tag{padding:4px 8px;background:var(--bg-primary, #eff6ff);color:var(--color-success, #3dcd58);font-size:0.75rem;font-weight:500;border-radius:4px}.masonry-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;color:var(--text-muted, #6b7280)}.masonry-loading .spinner{width:48px;height:48px;border:4px solid var(--border-default, #e5e7eb);border-top-color:var(--color-success, #3dcd58);border-radius:50%;animation:spin 0.8s linear infinite;margin-bottom:16px}.masonry-loading p{font-size:1rem;font-weight:500}.masonry-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;color:var(--text-muted, #9ca3af)}.masonry-empty i{font-size:48px;margin-bottom:16px}.masonry-empty p{font-size:1rem;font-weight:500}@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}.skeleton-item{background:var(--bg-secondary, #f3f4f6);position:relative;overflow:hidden;border-radius:8px}.skeleton-item .skeleton-shimmer{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);animation:shimmer 1.5s infinite;transform:translateX(-100%)}@keyframes shimmer{100%{transform:translateX(100%)}}.masonry-lightbox{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0, 0, 0, 0.9);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;animation:fadeIn 0.3s ease}.masonry-lightbox .lightbox-close{position:absolute;top:20px;right:20px;background:transparent;border:none;color:var(--text-standard, #ffffff);font-size:2rem;cursor:pointer;z-index:10001;transition:transform 0.2s ease}.masonry-lightbox .lightbox-close:hover{transform:scale(1.1)}.masonry-lightbox .lightbox-content{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:40px;box-sizing:border-box;position:relative}.masonry-lightbox .lightbox-nav{background:rgba(255, 255, 255, 0.1);border:none;color:var(--text-standard, #ffffff);font-size:1.5rem;padding:16px;border-radius:50%;cursor:pointer;transition:all 0.2s ease;backdrop-filter:blur(4px)}.masonry-lightbox .lightbox-nav:hover{background:rgba(255, 255, 255, 0.2);transform:scale(1.1)}.masonry-lightbox .lightbox-nav.prev{margin-right:20px}.masonry-lightbox .lightbox-nav.next{margin-left:20px}.masonry-lightbox .lightbox-image-container{position:relative;max-width:80%;max-height:80vh;border-radius:8px;overflow:hidden;box-shadow:0 20px 50px rgba(0, 0, 0, 0.5)}.masonry-lightbox .lightbox-image-container .lightbox-image{display:block;width:100%;height:100%;object-fit:contain;max-height:80vh}.masonry-lightbox .lightbox-image-container .lightbox-details{position:absolute;bottom:0;left:0;width:100%;background:linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);padding:24px;color:var(--text-standard, #ffffff);transform:translateY(100%);transition:transform 0.3s ease;box-sizing:border-box}.masonry-lightbox .lightbox-image-container .lightbox-details h3{margin:0 0 8px;font-size:1.25rem}.masonry-lightbox .lightbox-image-container .lightbox-details p{margin:0;opacity:0.8;font-size:0.9rem}.masonry-lightbox .lightbox-image-container:hover .lightbox-details{transform:translateY(0)}.masonry-lightbox .lightbox-counter{position:absolute;bottom:20px;color:rgba(255, 255, 255, 0.6);font-size:0.9rem;letter-spacing:1px}.default-item{position:relative}.default-item .image-wrapper{position:relative;overflow:hidden}.default-item .image-wrapper .item-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.4);opacity:0;transition:opacity 0.3s ease;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}.default-item .image-wrapper .item-overlay .overlay-actions{display:flex;gap:12px;transform:translateY(20px);transition:transform 0.3s ease}.default-item .image-wrapper .item-overlay .action-btn{width:40px;height:40px;border-radius:50%;background:var(--bg-primary, #ffffff);border:none;color:var(--text-secondary, #333);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease;box-shadow:0 4px 12px rgba(0, 0, 0, 0.2)}.default-item .image-wrapper .item-overlay .action-btn:hover{transform:translateY(-2px);background:var(--color-success, #3dcd58);color:var(--text-standard, #ffffff)}.default-item .image-wrapper:hover .item-overlay{opacity:1}.default-item .image-wrapper:hover .item-overlay .overlay-actions{transform:translateY(0)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}"}},[769,"ui-masonry",{items:[1],columns:[2],gap:[2],layoutType:[1,"layout-type"],itemMinWidth:[2,"item-min-width"],itemMaxWidth:[2,"item-max-width"],breakpoints:[1],filterBy:[1,"filter-by"],sortBy:[1,"sort-by"],sortOrder:[1,"sort-order"],animationDuration:[2,"animation-duration"],enableAnimation:[4,"enable-animation"],loadingState:[4,"loading-state"],emptyMessage:[1,"empty-message"],showFilters:[4,"show-filters"],filterOptions:[1,"filter-options"],lazyLoad:[4,"lazy-load"],lazyLoadMargin:[1,"lazy-load-margin"],infiniteScroll:[4,"infinite-scroll"],infiniteScrollDistance:[2,"infinite-scroll-distance"],selectable:[4],multiSelect:[4,"multi-select"],showBatchActions:[4,"show-batch-actions"],lightbox:[4],filteredItems:[32],currentColumns:[32],isResizing:[32],selectedItems:[32],loadedImages:[32],visibleItems:[32],activeImageIndex:[32],isLightboxOpen:[32]},[[8,"keydown","handleWindowKeyDown"]],{items:[{watchItemsChange:0}],filterBy:[{watchItemsChange:0}],sortBy:[{watchItemsChange:0}],sortOrder:[{watchItemsChange:0}],columns:[{watchColumnsChange:0}]}]),c=h,m=function(){"undefined"!=typeof customElements&&["ui-masonry","ui-badge","ui-button","ui-checkbox","ui-icon"].forEach((t=>{switch(t){case"ui-masonry":customElements.get(a(t))||customElements.define(a(t),h);break;case"ui-badge":customElements.get(a(t))||r();break;case"ui-button":customElements.get(a(t))||o();break;case"ui-checkbox":customElements.get(a(t))||n();break;case"ui-icon":customElements.get(a(t))||l()}}))};export{c as UiMasonry,m as defineCustomElement}

package/dist/components/ui-meter-group.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UiMeterGroup extends Components.UiMeterGroup, HTMLElement {}
+export const UiMeterGroup: {
+    prototype: UiMeterGroup;
+    new (): UiMeterGroup;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ui-meter-group.js

@@ -0,0 +1 @@
+import{proxyCustomElement as e,HTMLElement as t,createEvent as r,h as i,transformTag as o}from"@stencil/core/internal/client";import{d as s}from"./icon.js";const n=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.meterClick=r(this,"meterClick",7)}values=[];orientation="horizontal";size="md";showLabels=!0;iconLibrary="default";showValues=!0;showLegend=!1;shape="line";min=0;max=100;interactive=!1;animated=!0;meterClick;handleValuesChange(){this.normalizeProps()}componentWillLoad(){this.normalizeProps()}normalizeProps(){if("string"==typeof this.values)try{this.values=JSON.parse(this.values)}catch(e){console.warn("Failed to parse meter-group values",e)}}getValues(){return Array.isArray(this.values)?this.values:[]}getPercentage(e){return(e-this.min)/(this.max-this.min)*100}getDefaultColor(e){const t=["#3bf673","#10b981","#f59e0b","#ef4444","#8b5cf6","#ec4899"];return t[e%t.length]}handleSegmentClick(e){this.interactive&&this.meterClick.emit(e)}renderCircleMeter(){const e=this.getValues(),t=e.reduce(((e,t)=>e+t.value),0),r=2*Math.PI*50;let o=0;const s=e.map(((e,i)=>{const s=e.value/t*100,n=s/100*r,a=-o,l="object"==typeof e.color&&null!==e.color,c=l?e.color.from:e.color||this.getDefaultColor(i),h=`meter-grad-${i}-${Math.random().toString(36).substr(2,4)}`,m=e.gradient||l;return o+=n,{...e,color:c,gradientId:h,strokeDasharray:`${n} ${r}`,strokeDashoffset:a,percentage:s.toFixed(1),hasGradient:m}})),n="sm"===this.size?8:"lg"===this.size?16:12;return i("div",{class:"meter-circle-container"},i("svg",{viewBox:"0 0 120 120",class:"meter-circle"},i("circle",{cx:"60",cy:"60",r:50,fill:"none",stroke:"#e5e7eb","stroke-width":n}),i("defs",null,s.map((e=>{const t="object"==typeof e.color&&null!==e.color;if(!e.gradient&&!t)return null;const r=t?e.color.to:"object"==typeof e.gradient?e.gradient.to:e.color+"99";return i("linearGradient",{id:e.gradientId,x1:"0%",y1:"0%",x2:"100%",y2:"0%"},i("stop",{offset:"0%","stop-color":t?e.color.from:"object"==typeof e.gradient?e.gradient.from:e.color}),i("stop",{offset:"100%","stop-color":r}))}))),s.map((e=>i("g",{onClick:()=>this.handleSegmentClick(e),style:{cursor:this.interactive?"pointer":"default"}},i("title",null,`${e.label}: ${e.value}`),i("circle",{cx:"60",cy:"60",r:50,fill:"none",stroke:e.gradient||"object"==typeof e.color&&null!==e.color?`url(#${e.gradientId})`:e.color,"stroke-width":n,"stroke-dasharray":e.strokeDasharray,"stroke-dashoffset":e.strokeDashoffset,"stroke-linecap":"round",transform:"rotate(-90 60 60)",style:{transition:this.animated?"stroke-dasharray 0.5s ease, stroke-dashoffset 0.5s ease":"none"}})))),this.showValues&&i("text",{x:"60",y:"60","text-anchor":"middle","dominant-baseline":"middle",class:"circle-total-value"},t)))}render(){const e=this.getValues(),t=e.reduce(((e,t)=>e+t.value),0);return i("div",{key:"3cf1fdd83af37d9f8f7f82e0caa61f889303aa45",class:["meter-group","meter-"+this.orientation,"meter-"+this.size,"meter-"+this.shape].join(" ")},"circle"===this.shape?this.renderCircleMeter():i("div",{class:"meter-container"},e.map(((e,t)=>{const r=this.getPercentage(e.value),o=e.color||this.getDefaultColor(t);return i("div",{class:"meter-segment",style:{["horizontal"===this.orientation?"width":"height"]:r+"%",background:(()=>{const t="object"==typeof e.color&&null!==e.color;return e.gradient||t?`linear-gradient(${"horizontal"===this.orientation?"to right":"to top"}, ${t?e.color.from:"object"==typeof e.gradient?e.gradient.from:o}, ${t?e.color.to:"object"==typeof e.gradient?e.gradient.to:o+"99"})`:o})(),cursor:this.interactive?"pointer":"default",transition:this.animated?"width 0.5s ease, height 0.5s ease":"none"},title:`${e.label}: ${e.value}`,onClick:()=>this.handleSegmentClick(e)},this.showValues&&i("span",{class:"meter-value"},e.value))}))),(this.showLabels||this.showLegend)&&i("div",{key:"646404cbc3ac39fcf2956d292bd34d5c68162ff6",class:"meter-legend"},e.map(((e,r)=>{const o=e.color||this.getDefaultColor(r),s=(e.value/t*100).toFixed(1);return i("div",{class:"legend-item",onClick:()=>this.handleSegmentClick(e),style:{cursor:this.interactive?"pointer":"default"}},i("span",{class:"legend-color",style:{backgroundColor:"object"==typeof o&&null!==o?o.from:o}}),e.icon&&i("span",{class:"legend-icon",style:{marginRight:"6px"}},i("ui-icon",{name:e.icon,library:e.iconLibrary||this.iconLibrary,size:"1.1em"})),i("span",{class:"legend-label"},e.label),this.showValues&&i("span",{class:"legend-value"},e.value," (",s,"%)"))}))))}static get watchers(){return{values:[{handleValuesChange: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}.meter-group{display:flex;flex-direction:column;gap:12px;font-family:inherit}.meter-container{display:flex;border-radius:8px;overflow:hidden;background-color:var(--bg-primary, #e5e7eb)}.meter-horizontal .meter-container{flex-direction:row;width:100%}.meter-horizontal.meter-sm .meter-container{height:16px}.meter-horizontal.meter-md .meter-container{height:24px}.meter-horizontal.meter-lg .meter-container{height:32px}.meter-vertical{flex-direction:row}.meter-vertical .meter-container{flex-direction:column-reverse;height:200px}.meter-vertical.meter-sm .meter-container{width:16px}.meter-vertical.meter-md .meter-container{width:24px}.meter-vertical.meter-lg .meter-container{width:32px}.meter-segment{display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;position:relative}.meter-segment:hover{filter:brightness(1.1)}.meter-value{color:var(--text-standard, #ffffff);font-size:11px;font-weight:600;text-shadow:0 1px 2px rgba(0, 0, 0, 0.3);white-space:nowrap}.meter-horizontal .meter-segment:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px}.meter-horizontal .meter-segment:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px}.meter-vertical .meter-segment:first-child{border-bottom-left-radius:8px;border-bottom-right-radius:8px}.meter-vertical .meter-segment:last-child{border-top-left-radius:8px;border-top-right-radius:8px}.meter-legend{display:flex;flex-wrap:wrap;gap:12px}.legend-item{display:flex;align-items:center;gap:6px;font-size:13px}.legend-color{width:12px;height:12px;border-radius:2px;flex-shrink:0}.legend-label{color:var(--text-secondary, #374151);font-weight:500}.legend-value{color:var(--text-muted, #6b7280);font-size:12px}.meter-circle-container{display:flex;justify-content:center;align-items:center}.meter-circle{width:100%;max-width:200px;height:auto}.meter-circle.meter-sm{max-width:120px}.meter-circle.meter-lg{max-width:280px}.circle-total-value{font-size:20px;font-weight:600;fill:var(--text-secondary, #374151)}.meter-sm .circle-total-value{font-size:14px}.meter-lg .circle-total-value{font-size:26px}"}},[513,"ui-meter-group",{values:[1025],orientation:[1],size:[1],showLabels:[4,"show-labels"],iconLibrary:[1,"icon-library"],showValues:[4,"show-values"],showLegend:[4,"show-legend"],shape:[1],min:[2],max:[2],interactive:[4],animated:[4]},void 0,{values:[{handleValuesChange:0}]}]),a=n,l=function(){"undefined"!=typeof customElements&&["ui-meter-group","ui-icon"].forEach((e=>{switch(e){case"ui-meter-group":customElements.get(o(e))||customElements.define(o(e),n);break;case"ui-icon":customElements.get(o(e))||s()}}))};export{a as UiMeterGroup,l as defineCustomElement}

package/dist/components/ui-navigation-bar.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UiNavigationBar extends Components.UiNavigationBar, HTMLElement {}
+export const UiNavigationBar: {
+    prototype: UiNavigationBar;
+    new (): UiNavigationBar;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ui-navigation-bar.js

@@ -0,0 +1 @@
+import{proxyCustomElement as t,HTMLElement as e,createEvent as o,h as i,Host as a,transformTag as n}from"@stencil/core/internal/client";import{d as r}from"./avatar.js";import{d as s,a as l}from"./badge.js";import{d as h}from"./context-menu.js";import{d as c}from"./icon.js";import{d}from"./input.js";const p=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.navOpen=o(this,"navOpen",7),this.navClose=o(this,"navClose",7),this.navToggle=o(this,"navToggle",7),this.navItemClick=o(this,"navItemClick",7),this.itemExpand=o(this,"itemExpand",7),this.itemCollapse=o(this,"itemCollapse",7)}get el(){return this}items=[];categories=[];bottomItems=[];secondaryItems=[];bottomItemsSecondary=[];showSearch=!1;mode="collapsed";position="left";collapsible=!0;expandedWidth="280px";collapsedWidth="64px";iconOnly=!0;accordion=!1;activeId;theme="auto";orientation="vertical";density="comfortable";indicatorPosition="start";maxItems=4;companyLogo;companyName;iconLibrary="default";isExpanded=!0;isMobile=!1;expandedItems=new Set;keyword="";effectiveTheme="light";gliderTop=0;gliderHeight=0;gliderLeft=0;gliderWidth=0;gliderOpacity=0;hoveredId=null;hoveredIconId=null;navOpen;navClose;navToggle;navItemClick;itemExpand;itemCollapse;componentWillLoad(){this.checkScreenSize(),this.handleModeChange(),this.expandParents(),this.syncTheme()}componentDidLoad(){this.resizeObserver=new ResizeObserver((()=>{this.checkScreenSize(),this.updateGlider()})),this.resizeObserver.observe(document.body),this.themeObserver=new MutationObserver((()=>this.syncTheme())),this.themeObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["class","data-theme"]}),this.themeObserver.observe(document.body,{attributes:!0,attributeFilter:["class"]}),requestAnimationFrame((()=>this.updateGlider()))}componentDidRender(){requestAnimationFrame((()=>this.updateGlider()))}disconnectedCallback(){this.resizeObserver&&this.resizeObserver.disconnect(),this.themeObserver&&this.themeObserver.disconnect()}handleResize(){"auto"===this.mode&&this.checkScreenSize()}checkScreenSize(){const t=window.innerWidth<768;t!==this.isMobile&&(this.isMobile=t,this.isExpanded=!t)}handleModeChange(){"auto"===this.mode?this.checkScreenSize():this.isExpanded="expanded"===this.mode,this.isMobile=window.innerWidth<768,this.isMobile=window.innerWidth<768}handleScroll(){this.updateGlider()}onThemeChange(){this.syncTheme()}onActiveIdChange(){this.expandParents(),requestAnimationFrame((()=>this.updateGlider()))}onExpandChange(){requestAnimationFrame((()=>this.updateGlider()))}resizeObserver;themeObserver;syncTheme(){if("auto"===this.theme){const t=document.documentElement,e=document.body,o=t.getAttribute("data-theme");this.effectiveTheme=t.classList.contains("green")||e.classList.contains("green")||"green"===o?"green":t.classList.contains("dark")||e.classList.contains("dark")||"dark"===o||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}else this.effectiveTheme=this.theme}updateGlider(){if(!this.el)return;const t=this.hoveredId?"#nav-item-"+this.hoveredId:".nav-item.active, .nav-item.active-ancestor",e=this.el.shadowRoot?.querySelector(t);if(e){const t=this.el.getBoundingClientRect(),o=e.getBoundingClientRect();if("horizontal"===this.orientation){const e=o.left-t.left,i=o.width;this.gliderLeft===e&&this.gliderWidth===i&&1===this.gliderOpacity||(this.gliderLeft=e,this.gliderWidth=i,this.gliderOpacity=1)}else{const e=o.top-t.top,i=o.height;this.gliderTop===e&&this.gliderHeight===i&&1===this.gliderOpacity||(this.gliderTop=e,this.gliderHeight=i,this.gliderOpacity=1)}}else 0!==this.gliderOpacity&&(this.gliderOpacity=0)}expandParents(){if(!this.activeId)return;const t=new Set(this.expandedItems);let e=!1;const o=i=>{for(const a of i)a.children&&a.children.length>0&&this.hasActiveChild(a)&&(t.has(a.id)||(t.add(a.id),e=!0),o(a.children))};o(this.categories||[]),o(this.items||[]),o(this.bottomItems||[]),o(this.secondaryItems||[]),o(this.bottomItemsSecondary||[]),e&&(this.expandedItems=t)}async open(){this.collapsible&&(this.isExpanded=!0,"auto"!==this.mode&&(this.mode="expanded"),this.navOpen.emit())}async close(){this.collapsible&&(this.isExpanded=!1,"auto"!==this.mode&&(this.mode="collapsed"),this.navClose.emit())}async toggle(){this.isExpanded?await this.close():await this.open(),this.navToggle.emit({expanded:this.isExpanded})}async setActive(t){this.activeId=t}handleItemClick(t){if(t.children&&t.children.length>0){if(!this.isExpanded||"horizontal"===this.orientation){let e=t.children[0];for(;e&&e.children&&e.children.length>0;)e=e.children[0];return void(e&&!e.disabled&&(this.activeId=e.id,this.navItemClick.emit(e),this.isMobile&&this.close()))}this.toggleItem(t.id)}else{if(t.disabled)return;this.activeId=t.id,this.navItemClick.emit(t),this.isMobile&&this.close()}}hasActiveChild(t){return!!t.children&&t.children.some((t=>t.id===this.activeId||this.hasActiveChild(t)))}toggleItem(t){const e=new Set(this.expandedItems);e.has(t)?(e.delete(t),this.itemCollapse.emit(t)):(e.add(t),this.itemExpand.emit(t)),this.expandedItems=e}handleKeyDown(t,e){"Enter"===t.key||" "===t.key?(t.preventDefault(),this.handleItemClick(e)):"ArrowDown"===t.key?(t.preventDefault(),this.focusNext(t.target)):"ArrowUp"===t.key?(t.preventDefault(),this.focusPrev(t.target)):"ArrowRight"===t.key?this.expandedItems.has(e.id)||this.toggleItem(e.id):"ArrowLeft"===t.key&&this.expandedItems.has(e.id)&&this.toggleItem(e.id)}focusNext(t){const e=Array.from(this.el.shadowRoot.querySelectorAll(".nav-item")),o=e.indexOf(t);o>-1&&o<e.length-1&&e[o+1].focus()}focusPrev(t){const e=Array.from(this.el.shadowRoot.querySelectorAll(".nav-item")),o=e.indexOf(t);o>0&&e[o-1].focus()}renderToggle(){return!this.collapsible||this.isMobile?null:i("div",{class:"nav-toggle-edge",onClick:()=>this.toggle()},i("svg",{viewBox:"0 0 24 24",width:"14",height:"14",stroke:"currentColor","stroke-width":"2",fill:"none"},i("path",{d:"M15 18l-6-6 6-6"})))}filterItems(t){if(!this.keyword)return t;const e=this.keyword.toLowerCase(),o=t=>t.filter((t=>{const i=t.label.toLowerCase().includes(e),a=t.children&&o(t.children).length>0;return i||a})).map((t=>t.children?{...t,children:o(t.children)}:t));return o(t)}renderNavList(t,e){const o=this.filterItems(t),i=this.maxItems;if(this.keyword||"horizontal"===this.orientation||o.length<=i)return o.map((t=>this.renderItem(t)));const a=i-1,n=o.slice(0,a),r={id:"nav-overflow-"+e,label:"More",icon:"more-horizontal",iconLibrary:"lucide",children:o.slice(a)};return[...n.map((t=>this.renderItem(t))),this.renderItem(r)]}getBlocks(){return{categories:[...this.categories||[],...(this.items||[]).filter((t=>"categories"===t.block))],primary:(this.items||[]).filter((t=>!t.block||"primary"===t.block)),secondary:[...this.secondaryItems||[],...(this.items||[]).filter((t=>"secondary"===t.block))],bottom:[...this.bottomItems||[],...(this.items||[]).filter((t=>"bottom"===t.block))],bottomSecondary:[...this.bottomItemsSecondary||[],...(this.items||[]).filter((t=>"bottomSecondary"===t.block))]}}render(){const t=this.getBlocks(),e=[!this.isExpanded&&"is-collapsed",this.isMobile&&"is-drawer",this.isMobile&&this.isExpanded&&"drawer-open","pos-"+("string"==typeof this.position?this.position:""),"indicator-"+("string"==typeof this.indicatorPosition?this.indicatorPosition:"")].filter(Boolean).join(" ");return i(a,{key:"5d7d3ba7a371bb0b2c7067c9ef6ffadf1cc5cf2c",style:{"--nav-width":"boolean"==typeof this.isExpanded?this.isExpanded?this.expandedWidth:this.isMobile?"0px":this.collapsedWidth:this.collapsedWidth},class:e,theme:null,"data-theme":this.effectiveTheme},i("div",{key:"822e6bca215424cf97ee14360e5474f279898d08",class:"nav-glider",style:{top:"horizontal"===this.orientation?"auto":("number"==typeof this.gliderTop?this.gliderTop:0)+"px",height:"horizontal"===this.orientation?"3px":("number"==typeof this.gliderHeight?this.gliderHeight:0)+"px",left:"horizontal"===this.orientation?("number"==typeof this.gliderLeft?this.gliderLeft:0)+"px":"left"===this.position?"6px":"auto",right:"horizontal"===this.orientation?"auto":"right"===this.position?"6px":"auto",width:"horizontal"===this.orientation?("number"==typeof this.gliderWidth?this.gliderWidth:0)+"px":"4px",bottom:"horizontal"===this.orientation?"0":"auto",opacity:""+("number"==typeof this.gliderOpacity?this.gliderOpacity:0)}}),this.renderToggle(),this.isMobile&&this.isExpanded&&i("div",{key:"e561f5ba73dcded187227d24c05271ffe8cd35be",class:"nav-backdrop",onClick:()=>this.close()}),i("div",{key:"00336a31f7c62f1e4225811a8526316869eacb67",class:"nav-blocks-container"},i("div",{key:"08bb7aa63e515127943aa1858b6246e924752237",class:"nav-header"},i("slot",{key:"5052017567308f9e24e13c273fa6e6f81bdabb54",name:"header"},(this.companyLogo||this.companyName)&&i("div",{key:"3a374287ff56db7e8e48786a9fd82d046eb27a24",class:"nav-company-block",style:{display:"flex",alignItems:"center",gap:"12px",padding:"0 24px",height:"64px"}},this.companyLogo&&i("img",{key:"c51ab5c8072dce6e11738da2df7a2c2d77534989",src:this.companyLogo,alt:this.companyName||"Logo",style:{height:"32px",width:"auto"}}),this.isExpanded&&this.companyName&&i("span",{key:"c37a8d0bc5ea530ac6e4c90d45aed571e401ad65",class:"nav-company-name",style:{fontWeight:"600",fontSize:"16px"}},this.companyName))),i("slot",{key:"b552595e83958add3197c9bd83eda6454d975dad",name:"logo"}),this.isMobile&&i("div",{key:"dfc692bd4d940e34bdd3c1ee0f7bab24e390623a",class:"nav-mobile-close",onClick:()=>this.close()},i("svg",{key:"38bc9e4c9799d01510b8c0a354d4c4be370775c8",viewBox:"0 0 24 24",width:"24",height:"24",stroke:"currentColor",fill:"none"},i("path",{key:"9e5ce385a716770a940247a2e97d5a002928f536",d:"M18 6L6 18M6 6l12 12"})))),this.showSearch&&this.isExpanded&&i("div",{key:"6210ee48a40ec6ac0a1b37c6064be9539041d89a",class:"nav-search-bar"},i("div",{key:"91be6b4b089065dec8601ad39d6f5ee6314c2743",style:{position:"relative",display:"flex",alignItems:"center",background:"var(--nav-item-hover-bg, #f1f5f9)",borderRadius:"6px",padding:"4px 8px"}},i("svg",{key:"eb7de33bd4feea4137a01b38a3c461536d471d0e",viewBox:"0 0 24 24",width:"16",height:"16",fill:"none",stroke:"currentColor","stroke-width":"2",style:{opacity:"0.5",marginRight:"8px"}},i("circle",{key:"e38c3bf011c65f5f6adf7283cfa4362afba456d6",cx:"11",cy:"11",r:"8"}),i("line",{key:"62dbce91bf5b3cce61f4fe711b9d70b9ddb2192f",x1:"21",y1:"21",x2:"16.65",y2:"16.65"})),i("input",{key:"2e3c9743f142fe4fec5e5d232edbfa7a453a5520",type:"text",placeholder:"Search...",value:this.keyword,onInput:t=>this.keyword=t.target.value,style:{background:"transparent",border:"none",outline:"none",width:"100%",fontSize:"14px",color:"inherit"}}))),t.categories.length>0&&i("div",{key:"bbfc7918309d8a05aa89f1cf29564f4a7e0f5657",class:"nav-block-categories",role:"tree"},this.renderNavList(t.categories,"cat")),i("div",{key:"856526bb6ebc4fb642f895e9d3977068562df9db",class:"nav-block-top",role:"tree"},this.renderNavList(t.primary,"top"),i("slot",{key:"f7f37b72d9b37144f7a982028d04dc2a182dd792",name:"menu-item"})," ",0===t.primary.length&&0===t.categories.length&&0===t.secondary.length&&i("slot",{key:"53ca544ecb67734f153b7c327c85100f33c74092",name:"empty-state"},"No Items")),t.secondary.length>0&&i("div",{key:"2d23b401f03faaa7c27aae850e84a5de3751b667",class:"nav-block-secondary",role:"tree"},this.renderNavList(t.secondary,"sec")),t.bottom.length>0&&i("div",{key:"e7f4d57d73f042d7c300f6a960469a8cef50afdd",class:"nav-block-bottom",role:"tree"},t.bottom.map((t=>this.renderItem(t))),i("slot",{key:"4ae38e3116a10f7ab3a244fb0ae3cfc3ad91e7d6",name:"footer"})),t.bottomSecondary.length>0&&i("div",{key:"e79b2b33ccf1e47902376599065562024a45eaff",class:"nav-block-profile",role:"tree"},t.bottomSecondary.map((t=>this.renderItem(t))))))}isBottomItem(t){const e=this.getBlocks();return e.bottom.some((e=>e.id===t))||e.bottomSecondary.some((e=>e.id===t))}renderItem(t,e=0){if("divider"===t.type)return i("div",{class:"nav-divider",style:{height:"1px",background:"var(--ui-input-border, #e2e8f0)",margin:"8px 0"}});if("title"===t.type)return this.isExpanded||"horizontal"===this.orientation?i("div",{class:"nav-title level-"+e,style:{fontSize:"11px",fontWeight:"bold",textTransform:"uppercase",color:"#94a3b8",padding:"12px 16px 4px 16px"}},t.label):null;const o=this.expandedItems.has(t.id),a=this.activeId===t.id||!this.isExpanded&&this.hasActiveChild(t),n=this.isExpanded&&this.hasActiveChild(t),r=t.children&&t.children.length>0,s=16*e+16+"px",l="nav-item-"+t.id,h=t.href&&!r?"a":"div",c=t.href&&!r?{href:t.href}:{},d=["nav-item",a&&"active",n&&"active-ancestor",o&&"expanded","user-profile"===t.id&&"is-user-profile",!t.icon&&"no-icon"].filter(Boolean).join(" ");return i("div",{key:t.id,class:"nav-item-wrapper level-"+e,role:"none"},i(h,{id:l,...c,class:d,style:{paddingLeft:"horizontal"===this.orientation?"0":this.isExpanded?s:"0"},onMouseEnter:()=>{"horizontal"===this.orientation&&(this.hoveredId=t.id,this.updateGlider()),r||this.isExpanded||(this.hoveredIconId=t.id)},onMouseLeave:()=>{"horizontal"===this.orientation&&(this.hoveredId=null,this.updateGlider()),this.hoveredIconId=null},onClick:e=>{e.stopPropagation(),this.handleItemClick(t)},onKeyDown:e=>this.handleKeyDown(e,t),title:!this.isExpanded&&r?t.label:"",tabindex:"0",role:"treeitem","aria-expanded":r?o?"true":"false":null,"aria-selected":a?"true":"false"},(t.icon||t.avatar||"image"===t.type||"icon"===t.type||"avatar"===t.type||t.imageUrl)&&i("span",{class:"nav-icon-container"},t.avatar||"avatar"===t.type?i("ui-avatar",{src:t.avatar||t.imageUrl,shape:"circle",class:"nav-avatar-icon",size:this.isExpanded||"horizontal"===this.orientation?"1.5rem":"2rem",status:t.status}):"image"===t.type||t.imageUrl?i("img",{src:t.imageUrl,alt:t.label,class:"nav-image-icon",style:{width:"24px",height:"24px",borderRadius:"4px",objectFit:"cover"}}):i("span",{class:"nav-icon"},i("ui-icon",{name:t.icon,library:t.iconLibrary||this.iconLibrary,size:"1.25rem"})),t.status&&!t.avatar&&"avatar"!==t.type&&i("span",{class:"nav-status-dot status-"+t.status}),!this.isExpanded&&t.badge&&i("span",{class:"nav-badge-mini"},t.badge),"horizontal"===this.orientation&&("user-profile"===t.id||this.isBottomItem(t.id))&&t.badge&&i("span",{class:"nav-badge-mini"},t.badge)),!r&&!this.isExpanded&&this.hoveredIconId===t.id&&i("div",{class:{"nav-tooltip":!0,visible:!0}},t.label),(this.isExpanded||"horizontal"===this.orientation&&!this.isBottomItem(t.id))&&i("span",{class:"nav-label-container"},i("span",{class:"nav-label"},t.label),t.badge&&i("span",{class:"nav-badge"},t.badge)),r&&(this.isExpanded||"horizontal"===this.orientation)&&i("span",{class:"nav-arrow"},i("svg",{viewBox:"0 0 24 24",width:"16",height:"16",stroke:"currentColor",fill:"none",class:o&&"horizontal"!==this.orientation?"rotate-180":""},i("path",{d:"M6 9l6 6 6-6"})))),(()=>{const e=r?t.children:[];return e&&0!==e.length?this.isExpanded&&"horizontal"!==this.orientation?null:i("ui-context-menu",{target:"#"+l,items:e,selectedId:this.activeId,theme:this.effectiveTheme,openOn:"hover",placement:"horizontal"===this.orientation?"bottom":"left"===this.position?"right":"left",onItemSelect:e=>{e.stopPropagation(),this.handleItemClick(r?e.detail.item:t)}}):null})(),r&&o&&this.isExpanded&&"horizontal"!==this.orientation&&i("div",{class:"nav-children",role:"group"},t.children.map((t=>this.renderItem(t,e+1)))))}static get watchers(){return{mode:[{handleModeChange:0}],theme:[{onThemeChange:0}],activeId:[{onActiveIdChange:0}],isExpanded:[{onExpandChange: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{--nav-bg:#fcfcfc;--nav-color:#000000;--nav-border-color:#d9d9d9;--nav-item-hover-bg:#e6e6e6;--nav-item-active-bg:rgba(0, 138, 22, 0.08);--nav-item-active-color:#008a16;--nav-accent-gradient:linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);--nav-width:280px;--nav-transition:width 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);display:flex;flex-direction:column;height:100%;width:var(--nav-width);background:var(--nav-bg);color:var(--nav-color);border-right:1px solid var(--nav-border-color);transition:var(--nav-transition);box-sizing:border-box;position:relative;z-index:100}:host(.pos-right){border-right:none;border-left:1px solid var(--nav-border-color)}.nav-toggle-edge{position:absolute;top:48px;right:-12px;width:24px;height:24px;background:var(--nav-bg);border:1px solid var(--nav-border-color);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:101;color:var(--nav-color);box-shadow:0 1px 3px rgba(0, 0, 0, 0.1);transition:transform 0.2s, background-color 0.2s}.nav-toggle-edge:hover{background-color:var(--nav-item-hover-bg)}:host(.pos-right) .nav-toggle-edge{right:auto;left:-12px;transform:rotate(180deg)}:host(.is-collapsed) .nav-toggle-edge{transform:rotate(180deg)}:host(.pos-right.is-collapsed) .nav-toggle-edge{transform:rotate(0deg)}:host([data-theme=dark]){--nav-bg:#111827;--nav-color:#94a3b8;--nav-border-color:#1e293b;--nav-item-hover-bg:#1e293b;--nav-item-active-bg:rgba(0, 138, 22, 0.15);--nav-item-active-color:#008a16}:host([data-theme=green]){--nav-bg:#3DCD58;--nav-color:#ffffff;--nav-border-color:rgba(255, 255, 255, 0.2);--nav-item-hover-bg:rgba(255, 255, 255, 0.1);--nav-item-active-bg:rgba(255, 255, 255, 0.2);--nav-item-active-color:#ffffff}:host([orientation=horizontal]){width:100%;height:64px;flex-direction:row;border-right:none;border-bottom:1px solid var(--nav-border-color)}:host([orientation=horizontal]) .nav-blocks-container{display:flex !important;flex-direction:row !important;align-items:center;width:100%;height:100%;overflow:visible;flex-wrap:nowrap !important;justify-content:flex-start !important}:host([orientation=horizontal]) .nav-header{border-bottom:none;border-right:1px solid var(--nav-border-color);flex-shrink:0}:host(.is-collapsed) .nav-block-categories,:host(.is-collapsed) .nav-block-top,:host(.is-collapsed) .nav-block-secondary,:host(.is-collapsed) .nav-block-bottom,:host(.is-collapsed) .nav-block-profile{overflow:visible !important}:host([orientation=horizontal]) .nav-block-bottom{margin-left:auto}:host([orientation=horizontal]) .nav-block-categories,:host([orientation=horizontal]) .nav-block-top,:host([orientation=horizontal]) .nav-block-secondary,:host([orientation=horizontal]) .nav-block-bottom,:host([orientation=horizontal]) .nav-block-profile{display:flex !important;flex-direction:row !important;align-items:center;padding:0;overflow:visible !important;border:none !important;height:100%;flex-shrink:0;flex-grow:0 !important;max-height:none !important;flex-wrap:nowrap !important}:host([orientation=horizontal]) .nav-block-categories,:host([orientation=horizontal]) .nav-block-top,:host([orientation=horizontal]) .nav-block-secondary,:host([orientation=horizontal]) .nav-search-bar{border-right:none !important}:host([orientation=horizontal]) .nav-block-top{flex:none}:host([orientation=horizontal]) .nav-item-wrapper{height:100%;display:flex !important;flex-direction:row !important;align-items:center;flex-shrink:0}:host([orientation=horizontal]) .nav-item{height:100%;padding:0 6px;margin:0 !important;border-radius:0;display:flex;align-items:center;justify-content:center;white-space:nowrap}:host([orientation=horizontal]) .nav-icon{margin-right:4px;}:host([orientation=horizontal]) .nav-glider{left:0;right:auto;bottom:0px !important;top:auto !important;height:3px !important;border-radius:4px 4px 0 0;background-color:var(--nav-item-active-color);transition:left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s}:host([orientation=horizontal]) .nav-toggle-edge{display:none}:host([orientation=horizontal]) .nav-block-bottom .nav-label,:host([orientation=horizontal]) .nav-block-profile .nav-label{display:none;}:host([orientation=horizontal]) .nav-search-bar{padding:0 12px;border-bottom:none;border-right:1px solid var(--nav-border-color);height:100%;display:flex;align-items:center}:host([orientation=horizontal]) .nav-search-bar>div{width:150px}:host(.is-drawer){position:fixed;top:0;left:0;bottom:0;height:100vh;box-shadow:4px 0 16px rgba(0, 0, 0, 0.1);z-index:1000}:host(.is-drawer.pos-right){left:auto;right:0;box-shadow:-4px 0 16px rgba(0, 0, 0, 0.1)}.nav-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0, 0, 0, 0.4);z-index:-1;}:host(.is-drawer){overflow:visible;}.nav-header{flex-shrink:0;min-height:64px;display:flex;align-items:center;padding:0 16px;overflow:hidden;white-space:nowrap;position:relative}.nav-mobile-close{position:absolute;right:16px;top:50%;transform:translateY(-50%);cursor:pointer;padding:4px}.nav-blocks-container{display:flex;flex-direction:column;height:100%;overflow:visible;}.nav-block-categories{flex-shrink:0;max-height:30%;overflow-y:auto;overflow-x:visible;display:flex;flex-direction:column;padding:8px 0;border-bottom:1px solid var(--nav-border-color);scrollbar-width:thin;scrollbar-color:var(--nav-border-color) transparent}.nav-block-top{flex:1;overflow-y:auto;overflow-x:visible;display:flex;flex-direction:column;padding:8px 0;scrollbar-width:thin;scrollbar-color:var(--nav-border-color) transparent}.nav-block-bottom{flex-shrink:0;border-top:1px solid var(--nav-border-color);padding:8px 0;display:flex;flex-direction:column;overflow:visible;min-height:fit-content;max-height:fit-content;}.nav-header{border-bottom:1px solid var(--nav-border-color)}.nav-search-bar{padding:8px 16px;border-bottom:1px solid var(--nav-border-color)}.nav-block-secondary{padding:8px 0;border-top:1px solid var(--nav-border-color);display:flex;flex-direction:column;overflow:visible}.nav-block-profile{flex-shrink:0;padding:8px 0;border-top:1px solid var(--nav-border-color);display:flex;flex-direction:column;overflow:visible;min-height:fit-content;max-height:fit-content;}.nav-block-categories::-webkit-scrollbar,.nav-block-top::-webkit-scrollbar{width:4px}.nav-block-categories::-webkit-scrollbar-thumb,.nav-block-top::-webkit-scrollbar-thumb{background-color:var(--nav-border-color);border-radius:4px}.nav-item-wrapper{display:flex;flex-direction:column;min-width:0;}.nav-item{display:flex;align-items:center;height:40px;cursor:pointer;user-select:none;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);white-space:nowrap;position:relative;overflow:visible;margin:2px 8px;border-radius:8px;outline:none;}a.nav-item{text-decoration:none;color:inherit}.nav-item:focus-visible{outline:2px solid var(--nav-item-active-color);outline-offset:-2px}.nav-item:hover{background-color:var(--nav-item-hover-bg)}.nav-item.active,.nav-item.active-ancestor{background-color:var(--nav-item-active-bg);color:var(--nav-item-active-color);font-weight:500;position:relative}.nav-glider{position:absolute;width:4px;background-color:#008a16;border-radius:4px;transition:top 0.25s cubic-bezier(0.4, 0, 0.2, 1), height 0.2s ease, opacity 0.2s;pointer-events:none;z-index:10;left:6px}:host(.indicator-end) .nav-glider{left:auto;right:6px}.nav-item-wrapper:not(.level-0)>.nav-item{font-size:0.95em;opacity:0.9;height:36px;}.nav-item-wrapper:not(.level-0)>.nav-item.active{background-color:var(--nav-item-active-bg);color:var(--nav-item-active-color);font-weight:600;position:relative}.nav-item-wrapper:not(.level-0)>.nav-item.active::before{content:"";position:absolute;left:2px;top:50%;transform:translateY(-50%);width:4px;height:32px;border-radius:4px;background-color:var(--nav-item-active-color)}.nav-children{position:relative;}.nav-icon-container{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0}.nav-status-dot{position:absolute;top:2px;right:12px;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--nav-bg);z-index:2}:host(.is-collapsed) .nav-status-dot,:host([orientation=horizontal]) .nav-status-dot{right:0px}.nav-status-dot.status-online{background-color:#22c55e}.nav-status-dot.status-offline{background-color:#94a3b8}.nav-status-dot.status-away{background-color:#eab308}.nav-status-dot.status-busy{background-color:#ef4444}.nav-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;margin-right:12px}:host(.is-collapsed) .nav-icon,:host([orientation=horizontal]) .nav-block-bottom .nav-icon,:host([orientation=horizontal]) .nav-block-profile .nav-icon{margin-right:0}.nav-label-container{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.nav-badge{background-color:var(--nav-item-active-color);color:white;font-size:10px;font-weight:700;padding:0 6px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.nav-badge-mini{position:absolute;top:-4px;right:-4px;background-color:#ef4444;color:white;font-size:9px;font-weight:800;min-width:14px;height:14px;padding:0 3px;border-radius:7px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--nav-bg);z-index:3}.nav-item{border-left:3px solid transparent}.nav-item.active .nav-icon{color:currentColor;}.nav-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1)}.nav-item.no-icon .nav-label{font-size:12px;opacity:0.8;padding-left:4px}.nav-item.is-user-profile .nav-icon{background:var(--nav-accent-gradient);border-radius:50%;color:white !important;width:32px;height:32px;min-width:32px;box-shadow:0 4px 10px rgba(59, 130, 246, 0.4);margin-right:12px}.nav-item.is-user-profile .nav-icon ui-icon{width:18px !important;height:18px !important;font-size:18px !important}.nav-item.is-user-profile .nav-label{font-weight:600;color:var(--nav-color)}.nav-arrow{display:flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:8px;transition:transform 0.2s}:host([orientation=horizontal]) .nav-arrow{margin-left:4px}.nav-arrow .rotate-180{transform:rotate(180deg)}.nav-children{display:flex;flex-direction:column;overflow:hidden;animation:slideDown 0.2s ease-out}@keyframes slideDown{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}:host(.is-collapsed:not([orientation=horizontal])) .nav-item{justify-content:center;padding:0 !important;margin:4px 0;width:100%;border-radius:0}:host(.is-collapsed:not([orientation=horizontal])) .nav-icon{margin-right:0}:host(.is-collapsed:not([orientation=horizontal])) .nav-label,:host(.is-collapsed:not([orientation=horizontal])) .nav-arrow{display:none;}.nav-tooltip{position:absolute;background:#1e293b;color:#f8fafc;padding:6px 12px;border-radius:6px;font-size:12px;font-weight:500;white-space:nowrap;box-shadow:0 4px 12px rgba(0, 0, 0, 0.3);border:1px solid rgba(255, 255, 255, 0.1);z-index:2000;pointer-events:none;opacity:0;visibility:hidden;transition:opacity 0.2s, transform 0.2s, visibility 0.2s}.nav-tooltip.visible{opacity:1;visibility:visible}:host(.is-collapsed:not([orientation=horizontal])) .nav-tooltip{left:100%;top:50%;transform:translateY(-50%) translateX(-10px);margin-left:10px}:host(.is-collapsed:not([orientation=horizontal])) .nav-tooltip.visible{transform:translateY(-50%) translateX(0)}:host([orientation=horizontal]) .nav-tooltip{top:100%;left:50%;transform:translateX(-50%) translateY(-10px);margin-top:8px}:host([orientation=horizontal]) .nav-tooltip.visible{transform:translateX(-50%) translateY(0)}:host(:not(.is-collapsed):not([orientation=horizontal])) .nav-tooltip{left:50%;bottom:100%;transform:translateX(-50%) translateY(10px);margin-bottom:8px}:host(:not(.is-collapsed):not([orientation=horizontal])) .nav-tooltip.visible{transform:translateX(-50%) translateY(0)}.nav-tooltip::before{content:"";position:absolute;width:8px;height:8px;background:#1e293b;transform:rotate(45deg);z-index:-1;border:1px solid rgba(255, 255, 255, 0.1)}:host(.is-collapsed:not([orientation=horizontal])) .nav-tooltip::before{left:-4px;top:50%;margin-top:-4px;border-right:none;border-top:none}:host([orientation=horizontal]) .nav-tooltip::before{top:-4px;left:50%;margin-left:-4px;border-right:none;border-bottom:none}:host(:not(.is-collapsed):not([orientation=horizontal])) .nav-tooltip::before{bottom:-4px;left:12px;border-left:none;border-top:none}'}},[769,"ui-navigation-bar",{items:[16],categories:[16],bottomItems:[16],secondaryItems:[16],bottomItemsSecondary:[16],showSearch:[4,"show-search"],mode:[1537],position:[513],collapsible:[4],expandedWidth:[1,"expanded-width"],collapsedWidth:[1,"collapsed-width"],iconOnly:[4,"icon-only"],accordion:[4],activeId:[1025,"active-id"],theme:[513],orientation:[513],density:[513],indicatorPosition:[1,"indicator-position"],maxItems:[2,"max-items"],companyLogo:[1,"company-logo"],companyName:[1,"company-name"],iconLibrary:[1,"icon-library"],isExpanded:[32],isMobile:[32],expandedItems:[32],keyword:[32],effectiveTheme:[32],gliderTop:[32],gliderHeight:[32],gliderLeft:[32],gliderWidth:[32],gliderOpacity:[32],hoveredId:[32],hoveredIconId:[32],open:[64],close:[64],toggle:[64],setActive:[64]},[[9,"resize","handleResize"],[3,"scroll","handleScroll"]],{mode:[{handleModeChange:0}],theme:[{onThemeChange:0}],activeId:[{onActiveIdChange:0}],isExpanded:[{onExpandChange:0}]}]),v=p,b=function(){"undefined"!=typeof customElements&&["ui-navigation-bar","ui-avatar","ui-badge","ui-button","ui-context-menu","ui-icon","ui-input"].forEach((t=>{switch(t){case"ui-navigation-bar":customElements.get(n(t))||customElements.define(n(t),p);break;case"ui-avatar":customElements.get(n(t))||r();break;case"ui-badge":customElements.get(n(t))||l();break;case"ui-button":customElements.get(n(t))||s();break;case"ui-context-menu":customElements.get(n(t))||h();break;case"ui-icon":customElements.get(n(t))||c();break;case"ui-input":customElements.get(n(t))||d()}}))};export{v as UiNavigationBar,b as defineCustomElement}

package/dist/components/ui-navigation-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UiNavigationItem extends Components.UiNavigationItem, HTMLElement {}
+export const UiNavigationItem: {
+    prototype: UiNavigationItem;
+    new (): UiNavigationItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ui-navigation-item.js

@@ -0,0 +1 @@
+import{proxyCustomElement as t,HTMLElement as o,createEvent as i,h as a,transformTag as n}from"@stencil/core/internal/client";import{d as e}from"./icon.js";const r=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.navItemClick=i(this,"navItemClick",7),this.submenuToggle=i(this,"submenuToggle",7),this.popoverStateChange=i(this,"popoverStateChange",7)}item;collapsed=!1;active=!1;activeId="";open=!1;animationDuration=350;indentation=0;forcePopover=!1;orientation="vertical";iconLibrary="default";isHovering=!1;popoverPlacement="bottom";hoverTimeout;navItemClick;submenuToggle;popoverStateChange;handleMouseEnter=t=>{if(this.hoverTimeout&&clearTimeout(this.hoverTimeout),this.isHovering=!0,"horizontal"===this.orientation)this.popoverPlacement="bottom";else{const o=t.currentTarget.getBoundingClientRect(),i=window.innerHeight;this.popoverPlacement=o.top>.6*i?"top":"bottom"}(this.collapsed||this.forcePopover||"top"===this.popoverPlacement)&&this.item.children&&this.item.children.length>0&&this.popoverStateChange.emit(!0)};handleMouseLeave=()=>{this.hoverTimeout=setTimeout((()=>{this.isHovering=!1,this.popoverStateChange.emit(!1)}),50)};hasActiveChild(t=this.item.children){return!!t&&t.some((t=>t.id===this.activeId||t.children&&this.hasActiveChild(t.children)))}handleClick=()=>{const t=this.item.children&&this.item.children.length>0;t&&(this.collapsed||this.forcePopover)||(t?this.submenuToggle.emit(this.item.id):this.navItemClick.emit(this.item))};render(){const t=this.item.children&&this.item.children.length>0,o=this.active||this.item.id===this.activeId,i=this.hasActiveChild(),n=this.forcePopover||"user-profile"===this.item.id;return a("li",{key:"b344aa6c6a2034b11c7bfb861ef51d24fb1ddc21",class:{"nav-item":!0,active:o,"active-parent":i,disabled:this.item.disabled,"has-children":t,open:this.open&&!n,collapsed:this.collapsed,hovering:this.isHovering,"in-popover":this.forcePopover,"is-user-profile":"user-profile"===this.item.id,"placement-top":"top"===this.popoverPlacement,"placement-bottom":"bottom"===this.popoverPlacement},tabindex:this.item.disabled?-1:0,"aria-disabled":this.item.disabled?"true":"false","aria-expanded":this.open&&!n?"true":"false",onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave},a("div",{key:"f511c50817c20785b2ea46afe2df07a7f5508818",class:"item-content",onClick:this.handleClick,onKeyDown:t=>{"Enter"===t.key&&this.handleClick()}},this.item.icon&&a("span",{key:"20bf50d7db7d55522e8bc9c1433bbeaf71639fa5",class:"nav-icon"},a("ui-icon",{key:"b1316aec36a00d9bd44b3a89072fa6a39b282490",name:this.item.icon,library:this.item.iconLibrary||this.iconLibrary,size:"1.25rem"})),(!this.collapsed||this.forcePopover)&&a("span",{key:"c2d027a25fa696b59231c99283761b03f637f603",class:"nav-label"},this.item.label),this.item.badge&&(!this.collapsed||this.forcePopover)&&a("span",{key:"0e89b2789f06b330f445588316008d6d0d2418f6",class:"nav-badge"},this.item.badge),t&&!n&&a("span",{key:"4d124c918ab7092a639d1026ec1ca964511da10c",class:"nav-arrow"},a("ui-icon",{key:"9cc46d50a9a8b76d439def8e56774fc5b9855dfd",name:"chevron-right",library:"lucide",size:"12px"})),t&&n&&a("span",{key:"e47643bc3dcf1a1b5b872d1114730f3c03e5bf80",class:"nav-arrow cascading"},a("ui-icon",{key:"7de0a36cdbc167332010d3191199d6c16d4f66a0",name:"chevron-right",library:"lucide",size:"12px"}))),!t&&this.collapsed&&this.isHovering&&a("div",{key:"b187ecbdadc6d7fb3d1be290ae2f62c5fb9b0458",class:"nav-tooltip"},this.item.label))}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}.nav-item{display:flex;flex-direction:column;cursor:pointer;border-radius:12px;margin-bottom:4px;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);position:relative;user-select:none;width:100%}.item-content{display:flex;align-items:center;gap:16px;height:48px;padding:0 16px;color:var(--nav-text-dim);transition:all 0.3s ease;position:relative;z-index:2;border-radius:10px}:host([orientation=horizontal]){display:flex;align-items:center;height:64px}:host([orientation=horizontal]) .nav-item{margin-bottom:0;height:100%;display:flex;align-items:center}:host([orientation=horizontal]) .item-content{height:100%;padding:0 12px;justify-content:center}.nav-item:hover .item-content{background:var(--nav-hover-bg);color:var(--nav-text)}.nav-item.active .item-content,.nav-item.active-parent .item-content{background:var(--nav-active-bg);color:var(--nav-accent);font-weight:600;box-shadow:inset 0 0 0 1px rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.nav-item.active::before,.nav-item.active-parent::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;background:var(--nav-accent);border-radius:0 4px 4px 0;box-shadow:0 0 10px var(--nav-accent);z-index:3}.nav-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;font-size:20px;transition:transform 0.3s ease}.nav-item:hover .nav-icon{transform:scale(1.1)}.nav-item.active .nav-icon,.nav-item.active-parent .nav-icon{color:var(--nav-accent);transform:scale(1.1)}.nav-item.active .nav-icon svg,.nav-item.active-parent .nav-icon svg{filter:drop-shadow(0 0 5px rgba(var(--color-primary-rgb, 59, 130, 246), 0.4))}.nav-label{font-size:14px;font-weight:500;white-space:nowrap;flex:1;letter-spacing:0.3px;overflow:hidden;text-overflow:ellipsis}.nav-badge{background:var(--nav-accent-gradient);color:var(--text-standard, #ffffff);border-radius:20px;padding:2px 8px;font-size:10px;font-weight:700;text-transform:uppercase;margin-left:auto;box-shadow:0 4px 10px rgba(var(--color-primary-rgb, 59, 130, 246), 0.3)}.nav-arrow{margin-left:auto;font-size:10px;color:var(--nav-text-dim);transition:transform 0.3s ease}.nav-item.open>.item-content .nav-arrow{transform:rotate(90deg)}.nav-submenu{list-style:none;margin:0;padding:0 0 8px 12px;overflow:hidden}.nav-item.collapsed .nav-label,.nav-item.collapsed .nav-badge,.nav-item.collapsed .nav-arrow,.nav-item.collapsed .nav-submenu:not(.floating-popover){display:none}.nav-item.collapsed .item-content{justify-content:center;padding:0;width:100%}:host([indentation="1"]) .nav-item{margin-left:8px;border-radius:8px}:host([indentation="1"]) .item-content{height:38px;font-size:13px}:host([indentation="1"]) .nav-item.active::before{width:2px;top:10px;bottom:10px}@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.nav-item.open .nav-submenu navigation-item{animation:slideDown 0.3s ease forwards}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover{background:var(--bg-primary, #1e293b) !important;z-index:2500 !important;box-shadow:0 10px 40px rgba(0, 0, 0, 0.5) !important;width:220px !important;display:flex !important;flex-direction:column !important;max-height:calc(100vh - 32px) !important;overflow-y:auto !important;overflow-x:hidden !important}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover:not(.placement-top),:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover.placement-bottom{top:0;bottom:auto}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover.placement-top{bottom:0;top:auto}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover.placement-top::before{top:auto !important;bottom:18px !important}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover::-webkit-scrollbar{width:6px}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover::-webkit-scrollbar-track{background:transparent;border-radius:12px}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover::-webkit-scrollbar-thumb{background:rgba(148, 163, 184, 0.5);border-radius:12px;transition:background 0.3s ease}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover::-webkit-scrollbar-thumb:hover{background:rgba(148, 163, 184, 0.8)}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover navigation-item,:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover>navigation-item{display:block !important;width:100% !important;height:auto !important;min-height:40px !important;opacity:1 !important;visibility:visible !important;flex-shrink:0 !important}:host([orientation=vertical]) .nav-item.is-user-profile:hover .nav-submenu.floating-popover,:host([orientation=vertical]) .nav-item.is-user-profile.hovering .nav-submenu.floating-popover,:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover:hover,:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover.is-visible{visibility:visible !important;opacity:1 !important;pointer-events:auto !important;transform:translateX(0) translateY(0) !important}:host([orientation=vertical]) .nav-item.is-user-profile:hover,:host([orientation=vertical]) .nav-item.is-user-profile.hovering{overflow:visible !important;z-index:1001 !important}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu.floating-popover::after{content:"";position:absolute;left:-25px;top:0;width:30px;height:100%;pointer-events:auto;background:transparent;z-index:2001}:host([orientation=vertical]) .nav-item.is-user-profile .nav-submenu:not(.floating-popover){display:none !important}:host(:not([orientation=horizontal])) .nav-submenu.floating-popover.placement-top.is-visible{transform:translateX(0)}:host(:not([orientation=horizontal])) .nav-submenu.floating-popover.placement-top::before{top:auto;bottom:18px}:host(:not([orientation=horizontal])) .nav-submenu.floating-popover.placement-top::after{top:auto;bottom:0;height:100%}.nav-submenu.floating-popover::after{content:"";position:absolute;top:-20px;bottom:-20px;left:-24px;width:24px;background:transparent;z-index:-1}.nav-item:hover,.nav-item.hovering{z-index:1000;overflow:visible !important}.nav-item:not(.collapsed)>.nav-submenu.floating-popover:not(.cascading){left:100%;margin-left:12px;top:0}.nav-item:not(.collapsed)>.nav-submenu.floating-popover:not(.cascading)::before{display:block;}.nav-submenu.floating-popover.cascading{left:100%;margin-left:4px;top:-4px;}.nav-submenu.floating-popover.cascading::before{top:18px;left:-6px}.popover-header{padding:12px 16px;font-size:11px;font-weight:700;color:var(--nav-text-dim);text-transform:uppercase;letter-spacing:0.05em;border-bottom:1px solid rgba(255, 255, 255, 0.05);margin-bottom:4px;user-select:none;pointer-events:none}.nav-tooltip{position:absolute;left:100%;top:50%;transform:translateY(-50%);background:var(--bg-primary, #1e293b);color:var(--text-standard, #f8fafc);padding:8px 14px;border-radius:8px;font-size:13px;font-weight:500;white-space:nowrap;box-shadow:0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);border:1px solid rgba(255, 255, 255, 0.1);z-index:2000;margin-left:8px;pointer-events:none;animation:fadeIn 0.2s ease forwards}.nav-submenu.floating-popover::before,.nav-tooltip::before{content:"";position:absolute;left:-6px;top:18px;width:12px;height:12px;background:var(--bg-primary, #1e293b);transform:rotate(45deg);border-left:1px solid rgba(255, 255, 255, 0.1);border-bottom:1px solid rgba(255, 255, 255, 0.1);z-index:-1}.nav-tooltip::before{top:50%;margin-top:-6px}:host([orientation=horizontal]) .nav-submenu.floating-popover::before{content:"" !important;display:block !important;visibility:visible !important;opacity:1 !important;position:absolute !important;left:50% !important;right:auto !important;top:-6px !important;bottom:auto !important;margin:0 !important;width:12px !important;height:12px !important;background:var(--bg-primary, #1e293b) !important;transform:translateX(-50%) rotate(45deg) !important;border:none !important;border-top:1px solid rgba(255, 255, 255, 0.1) !important;border-right:1px solid rgba(255, 255, 255, 0.1) !important;z-index:-1 !important;pointer-events:none !important}@keyframes fadeIn{from{opacity:0;transform:translateY(-50%) translateX(-5px)}to{opacity:1;transform:translateY(-50%) translateX(0)}}.nav-submenu.floating-popover ::slotted(navigation-item),.nav-submenu.floating-popover navigation-item{margin-left:0 !important}.nav-item.collapsed:hover{overflow:visible}.nav-item.in-popover .item-content{height:40px;padding:0 12px;border-radius:8px}.nav-item.in-popover{margin-left:0 !important;margin-bottom:2px}.nav-item.in-popover.active .item-content{background:var(--nav-active-bg);border:1px solid rgba(var(--color-primary-rgb, 59, 130, 246), 0.2)}.nav-item.in-popover.active .nav-label{color:var(--nav-accent) !important;font-weight:700}.nav-item.in-popover.active::before{top:8px;bottom:8px;width:3px}.nav-arrow.cascading{margin-left:auto;opacity:0.5;transition:transform 0.3s ease}.nav-item.placement-top .nav-arrow.cascading,.nav-submenu.placement-top .nav-arrow.cascading{transform:rotate(-90deg);}.nav-submenu:not(.placement-top) .nav-arrow.cascading{transform:rotate(0deg)}:host([indentation="0"]) .nav-item.in-popover{margin-left:0}.nav-item.is-user-profile .nav-icon{background:var(--nav-accent-gradient);border-radius:50%;color:var(--text-standard, #ffffff) !important;width:32px;height:32px;min-width:32px;box-shadow:0 4px 10px rgba(var(--color-primary-rgb, 59, 130, 246), 0.4)}.nav-item.is-user-profile .nav-icon svg{width:18px;height:18px}.nav-item.is-user-profile .nav-label{font-weight:600;color:var(--nav-text)}:host([orientation=horizontal]){height:100%}:host([orientation=horizontal]) .nav-item{height:100%;flex-direction:row;align-items:center;justify-content:center;margin-bottom:0;border-radius:0;padding:0 4px}:host([orientation=horizontal]) .item-content{height:100%;padding:0 16px;border-radius:0;font-weight:600;transition:all 0.2s ease}:host([orientation=horizontal]) .nav-item:hover .item-content{background:rgba(255, 255, 255, 0.08)}:host([orientation=horizontal]) .nav-item.active::before,:host([orientation=horizontal]) .nav-item.active-parent::before{top:auto;bottom:0;left:0;right:0;width:100%;height:3px;border-radius:4px 4px 0 0}:host([orientation=horizontal]) .nav-item:not(.collapsed)>.nav-submenu.floating-popover:not(.cascading){left:0 !important;top:100% !important;bottom:auto !important;margin-left:0 !important;margin-top:8px !important;transform:translateY(-5px)}:host([orientation=horizontal][indentation="0"]) .nav-arrow{transform:rotate(90deg);}:host([orientation=horizontal][indentation="0"]) .nav-item.open>.item-content .nav-arrow{transform:rotate(-90deg);}:host([orientation=horizontal][indentation="1"]) .nav-arrow.cascading,:host([orientation=horizontal][indentation="2"]) .nav-arrow.cascading{transform:rotate(0deg);}:host([orientation=horizontal]) .nav-submenu.floating-popover::after{top:-12px;left:0;right:0;height:12px;width:100%}:host([orientation=horizontal]) .nav-submenu.floating-popover:not(.cascading)::before,:host([orientation=horizontal]) .nav-submenu.floating-popover.placement-bottom:not(.cascading)::before,:host([orientation=horizontal]) .nav-submenu.floating-popover.placement-top:not(.cascading)::before{content:"" !important;position:absolute !important;left:50% !important;right:auto !important;top:-6px !important;bottom:auto !important;width:12px !important;height:12px !important;transform:translateX(-50%) rotate(45deg) !important;background:var(--bg-primary, #1e293b) !important;border-top:1px solid rgba(255, 255, 255, 0.1) !important;border-right:1px solid rgba(255, 255, 255, 0.1) !important;border-left:none !important;border-bottom:none !important;z-index:-1 !important}:host([orientation=horizontal]) .nav-submenu.floating-popover.cascading::before{content:"" !important;position:absolute !important;left:-6px !important;right:auto !important;top:18px !important;bottom:auto !important;width:12px !important;height:12px !important;transform:rotate(45deg) !important;background:var(--bg-primary, #1e293b) !important;border-top:none !important;border-right:none !important;border-left:1px solid rgba(255, 255, 255, 0.1) !important;border-bottom:1px solid rgba(255, 255, 255, 0.1) !important;z-index:-1 !important}'}},[513,"ui-navigation-item",{item:[16],collapsed:[4],active:[4],activeId:[1,"active-id"],open:[4],animationDuration:[2,"animation-duration"],indentation:[514],forcePopover:[4,"force-popover"],orientation:[1],iconLibrary:[1,"icon-library"],isHovering:[32],popoverPlacement:[32]}]),p=r,s=function(){"undefined"!=typeof customElements&&["ui-navigation-item","ui-icon"].forEach((t=>{switch(t){case"ui-navigation-item":customElements.get(n(t))||customElements.define(n(t),r);break;case"ui-icon":customElements.get(n(t))||e()}}))};export{p as UiNavigationItem,s as defineCustomElement}

package/dist/components/ui-number-input.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UiNumberInput extends Components.UiNumberInput, HTMLElement {}
+export const UiNumberInput: {
+    prototype: UiNumberInput;
+    new (): UiNumberInput;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ui-number-input.js

@@ -0,0 +1 @@
+import{proxyCustomElement as i,HTMLElement as e,createEvent as t,h as r,Host as n,transformTag as s}from"@stencil/core/internal/client";import{d as o,a}from"./badge.js";import{d as h}from"./icon.js";import{d as l}from"./input.js";const d=i(class extends e{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.numberChange=t(this,"numberChange",7),this.numberInput=t(this,"numberInput",7),this.internals=this.attachInternals()}get el(){return this}internals;showTypeIcon=!1;prefixIcon="";name;value=0;min=-1/0;max=1/0;step=1;label="";placeholder="0";disabled=!1;readonly=!1;size="md";variant="default";prefixText="";suffixText="";helperText="";errorText="";precision=-1;showStepper=!1;stepperLayout="sides";scrollWheel=!0;fullWidth=!1;rtl=!1;inputValue="0";isFocused=!1;stepperInterval;numberChange;numberInput;componentWillLoad(){"plain"===this.variant&&(this.showStepper=!1),this.inputValue=this.format(this.value),this.internals.setFormValue(""+this.value)}valueChanged(i){this.inputValue=this.format(i),this.internals.setFormValue(""+i)}format(i){return this.precision>=0?i.toFixed(this.precision):i+""}clamp(i){return Math.min(this.max,Math.max(this.min,i))}increment=()=>{if(this.disabled||this.readonly)return;const i=this.clamp(this.value+this.step);this.value=i,this.numberChange.emit(i)};decrement=()=>{if(this.disabled||this.readonly)return;const i=this.clamp(this.value-this.step);this.value=i,this.numberChange.emit(i)};startStepping=i=>{if(this.disabled||this.readonly)return;const e="inc"===i?this.increment:this.decrement;e(),this.stepperInterval=setInterval(e,100)};stopStepping=()=>{clearInterval(this.stepperInterval)};handleInput=i=>{const e=i.detail;this.inputValue=e;const t=parseFloat(e);isNaN(t)||(this.value=t,this.numberInput.emit(t))};handleBlur=()=>{this.isFocused=!1;const i=parseFloat(this.inputValue);this.value=this.clamp(isNaN(i)?0:i),this.inputValue=this.format(this.value),this.numberChange.emit(this.value)};handleWheel=i=>{this.scrollWheel&&!this.disabled&&this.isFocused&&(i.preventDefault(),i.deltaY<0?this.increment():this.decrement())};handleKeyDown=i=>{"ArrowUp"===i.key&&(i.preventDefault(),this.increment()),"ArrowDown"===i.key&&(i.preventDefault(),this.decrement())};render(){const i=!!this.errorText,e="right"===this.stepperLayout;return r(n,{key:"34a35f828baa751fbaab05db0ea6d7e4eb42281e",class:{"full-width":this.fullWidth}},this.label&&r("label",{key:"756934f01225ddbdd8235fc9081177dedc004531",class:"ni-label"},this.label),r("div",{key:"822ac22167cb75cdcb16274d4a5fa95291875cc9",class:{"ni-wrapper":!0,["ni-"+this.size]:!0,"ni-error":i,"ni-disabled":this.disabled,"ni-focused":this.isFocused,"ni-right":e,"ni-rtl":this.rtl,"ni-plain":"plain"===this.variant},dir:this.rtl?"rtl":"ltr"},this.showStepper&&"sides"===this.stepperLayout&&r("ui-button",{key:"714881b359dfc953c8b6f93fb0295c0ae2f134ea",variant:"ghost",onMouseDown:()=>this.startStepping("dec"),onMouseUp:this.stopStepping,onMouseLeave:this.stopStepping,onTouchStart:()=>this.startStepping("dec"),onTouchEnd:this.stopStepping,onClick:i=>i.preventDefault(),disabled:this.disabled||this.value<=this.min,tabIndex:-1,ariaLabel:"Decrease",icon:"minus",iconLibrary:"lucide",iconOnly:!0,size:"sm"===this.size||"xs"===this.size?"sm":"md"}),this.renderPrefix(),r("ui-input",{key:"b2d56228f500995d4f6fbd78c639e6383c36bd3e",class:"ni-input",type:"number",value:this.inputValue,min:this.min===-1/0?void 0:this.min,max:this.max===1/0?void 0:this.max,step:this.step,disabled:this.disabled,readonly:this.readonly,placeholder:this.placeholder,onInputChange:this.handleInput,onInputBlur:this.handleBlur,onFocusInternal:()=>this.isFocused=!0,onWheel:i=>this.handleWheel(i),onInputKeydown:i=>this.handleKeyDown(i.detail),fullWidth:!0,size:this.size,variant:"plain",showTypeIcon:!1}),this.renderSuffix(),this.showStepper&&e&&r("div",{key:"e400b4eea2656a85a5c5df3487ead9f45367100b",class:"ni-stacker"},r("ui-button",{key:"9cd89756bc4792dccc9657ca39b6d6cff2a9e819",variant:"ghost",onMouseDown:()=>this.startStepping("inc"),onMouseUp:this.stopStepping,onMouseLeave:this.stopStepping,onTouchStart:()=>this.startStepping("inc"),onTouchEnd:this.stopStepping,onClick:i=>i.preventDefault(),disabled:this.disabled||this.value>=this.max,tabIndex:-1,ariaLabel:"Increase",icon:"chevron-up",iconLibrary:"lucide",iconOnly:!0,size:"xxs"}),r("ui-button",{key:"42248f0ccc65d42c903775f8e5fcbd97f76e04e7",variant:"ghost",onMouseDown:()=>this.startStepping("dec"),onMouseUp:this.stopStepping,onMouseLeave:this.stopStepping,onTouchStart:()=>this.startStepping("dec"),onTouchEnd:this.stopStepping,onClick:i=>i.preventDefault(),disabled:this.disabled||this.value<=this.min,tabIndex:-1,ariaLabel:"Decrease",icon:"chevron-down",iconLibrary:"lucide",iconOnly:!0,size:"xxs"})),this.showStepper&&"sides"===this.stepperLayout&&r("ui-button",{key:"dbf5c5d29bf6945baaaa96a46915440088f2509f",variant:"ghost",onMouseDown:()=>this.startStepping("inc"),onMouseUp:this.stopStepping,onMouseLeave:this.stopStepping,onTouchStart:()=>this.startStepping("inc"),onTouchEnd:this.stopStepping,onClick:i=>i.preventDefault(),disabled:this.disabled||this.value>=this.max,tabIndex:-1,ariaLabel:"Increase",icon:"plus",iconLibrary:"lucide",iconOnly:!0,size:"sm"===this.size||"xs"===this.size?"sm":"md"})),(this.helperText||this.errorText)&&r("div",{key:"f4f1e6ff10c5ddbbc4e49c7e2325e103537e9e08",class:{"ni-helper":!0,"ni-helper-error":i}},i?this.errorText:this.helperText))}renderPrefix(){const i=this.prefixText||this.prefixIcon,e=this.showTypeIcon&&!i;return i||e?r("span",{class:"ni-affix ni-prefix"},this.prefixText&&r("span",null,this.prefixText),(this.prefixIcon||e)&&r("ui-icon",{library:"lucide",name:this.prefixIcon||"hash",size:"14px"})):null}renderSuffix(){return this.suffixText?r("span",{class:"ni-affix ni-suffix"},this.suffixText):null}static get formAssociated(){return!0}static get watchers(){return{value:[{valueChanged: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;font-family:inherit}:host.full-width{width:100%}:host.full-width .ni-wrapper{width:100%}.ni-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;opacity:0.65;color:var(--label-color, var(--ui-text-primary, var(--text-primary, #111827)));margin-bottom:8px;transition:color 0.2s ease}.ni-wrapper{display:inline-flex;align-items:center;border:1.5px solid var(--ui-border-default, var(--border-strong, #d1d5db));border-radius:10px;background:var(--ui-bg-var(--bg-primary, #ffffff), var(--bg-primary, #ffffff));transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden;box-shadow:0 1px 2px rgba(0, 0, 0, 0.05)}.ni-wrapper.ni-focused{border-color:var(--ui-color-primary, var(--color-primary, #10b981));box-shadow:0 0 0 4px rgba(var(--color-primary-rgb, 59, 130, 246), 0.12), 0 4px 12px rgba(0, 0, 0, 0.05)}.ni-wrapper.ni-focused .ni-label{color:var(--ui-color-primary, var(--color-primary, #10b981))}.ni-wrapper.ni-error{border-color:var(--ui-color-error, var(--color-danger, #ef4444))}.ni-wrapper.ni-error .ni-label{color:var(--ui-color-error, var(--color-danger, #ef4444))}.ni-wrapper.ni-error.ni-focused{box-shadow:0 0 0 4px rgba(var(--color-danger-rgb, 239, 68, 68), 0.12)}.ni-wrapper.ni-disabled{background:var(--ui-bg-muted, var(--bg-primary, #f9fafb));opacity:0.65;pointer-events:none;cursor:not-allowed}.ni-wrapper.ni-sm{height:32px;font-size:12px;border-radius:6px}.ni-wrapper.ni-md{height:40px;font-size:14px}.ni-wrapper.ni-lg{height:48px;font-size:16px;border-radius:12px}.ni-wrapper.ni-plain{border:none;background:transparent;box-shadow:none;height:auto;overflow:visible}.ni-wrapper.ni-plain.ni-focused{box-shadow:none}.ni-btn{display:flex;align-items:center;justify-content:center;width:36px;height:100%;border:none;background:var(--bg-secondary, #f3f4f6);color:var(--text-secondary, #374151);font-size:18px;font-weight:600;cursor:pointer;transition:background 0.15s, color 0.15s;flex-shrink:0;line-height:1}.ni-btn:hover:not(:disabled){background:var(--bg-primary, #e5e7eb);color:var(--bg-primary, #111)}.ni-btn:active:not(:disabled){background:var(--bg-secondary, #d1d5db)}.ni-btn:disabled{opacity:0.4;cursor:not-allowed}.ni-btn.ni-dec{border-inline-end:1.5px solid var(--border-default, #e5e7eb)}.ni-btn.ni-inc{border-inline-start:1.5px solid var(--border-default, #e5e7eb)}.ni-stacker{display:flex;flex-direction:column;height:100%;border-inline-start:1.5px solid var(--border-default, #e5e7eb)}.ni-stacker .ni-btn{width:28px;height:50%;font-size:9px}.ni-stacker .ni-btn.ni-inc-sm{border-bottom:1px solid var(--border-default, #e5e7eb);border-radius:0}.ni-stacker .ni-btn.ni-dec-sm{border-radius:0}.ni-input{flex:1;min-width:60px;border:none;outline:none;background:transparent;font-size:inherit;color:var(--text-primary, #111827);text-align:center;padding:0 8px;appearance:textfield;-moz-appearance:textfield}.ni-input::-webkit-outer-spin-button,.ni-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.ni-affix{padding:0 8px;color:var(--label-subtitle-color, var(--text-muted, #6b7280));font-size:13px;white-space:nowrap;background:var(--bg-primary, #f9fafb);height:100%;display:flex;align-items:center}.ni-affix.ni-prefix{border-inline-end:1.5px solid var(--border-default, #e5e7eb)}.ni-affix.ni-suffix{border-inline-start:1.5px solid var(--border-default, #e5e7eb)}.ni-helper{font-size:12px;margin-top:5px;color:var(--label-subtitle-color, var(--text-muted, #6b7280))}.ni-helper.ni-helper-error{color:var(--color-danger, #ef4444)}"}},[577,"ui-number-input",{showTypeIcon:[4,"show-type-icon"],prefixIcon:[1,"prefix-icon"],name:[1],value:[1026],min:[2],max:[2],step:[2],label:[1],placeholder:[1],disabled:[4],readonly:[4],size:[1],variant:[1],prefixText:[1,"prefix-text"],suffixText:[1,"suffix-text"],helperText:[1,"helper-text"],errorText:[1,"error-text"],precision:[2],showStepper:[1028,"show-stepper"],stepperLayout:[1,"stepper-layout"],scrollWheel:[4,"scroll-wheel"],fullWidth:[4,"full-width"],rtl:[4],inputValue:[32],isFocused:[32]},void 0,{value:[{valueChanged:0}]}]),p=d,c=function(){"undefined"!=typeof customElements&&["ui-number-input","ui-badge","ui-button","ui-icon","ui-input"].forEach((i=>{switch(i){case"ui-number-input":customElements.get(s(i))||customElements.define(s(i),d);break;case"ui-badge":customElements.get(s(i))||a();break;case"ui-button":customElements.get(s(i))||o();break;case"ui-icon":customElements.get(s(i))||h();break;case"ui-input":customElements.get(s(i))||l()}}))};export{p as UiNumberInput,c as defineCustomElement}

package/dist/components/ui-otp-input.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UiOtpInput extends Components.UiOtpInput, HTMLElement {}
+export const UiOtpInput: {
+    prototype: UiOtpInput;
+    new (): UiOtpInput;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ui-otp-input.js

@@ -0,0 +1 @@
+import{proxyCustomElement as t,HTMLElement as e,createEvent as i,h as r,Fragment as o,transformTag as s}from"@stencil/core/internal/client";import{d as a,a as n}from"./badge.js";import{d as l}from"./icon.js";import{d as p}from"./input.js";const d=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.otpChange=i(this,"otpChange",7),this.otpComplete=i(this,"otpComplete",7),this.otpSubmit=i(this,"otpSubmit",7),this.resendClick=i(this,"resendClick",7)}get el(){return this}length=6;value="";label="";helperText="";errorText="";disabled=!1;readonly=!1;required=!1;type="number";autoFocus=!0;secure=!1;size="md";color="primary";variant="default";invalid=!1;skeleton=!1;autoSubmit=!1;groupSize=0;placeholder="";rtl=!1;resendInterval=60;resendLabel="Resend Code";otpValues=[];focusedIndex=-1;internalInvalid=!1;internalErrorText="";resendTimer=0;resendIntervalId;otpChange;otpComplete;otpSubmit;resendClick;inputRefs=[];componentWillLoad(){if(this.otpValues=Array(this.length).fill(""),this.value){const t=this.value.split("").slice(0,this.length);this.otpValues=[...t,...Array(this.length-t.length).fill("")]}}startResendTimer(){this.resendTimer=this.resendInterval,this.resendIntervalId=setInterval((()=>{this.resendTimer>0?this.resendTimer--:clearInterval(this.resendIntervalId)}),1e3)}handleResend=()=>{this.resendTimer>0||(this.resendClick.emit(),this.startResendTimer())};disconnectedCallback(){this.resendIntervalId&&clearInterval(this.resendIntervalId)}componentDidLoad(){this.autoFocus&&this.inputRefs[0]&&this.inputRefs[0].focus()}handleValueChange(t){if(t===this.otpValues.join(""))return;const e=t.split("").slice(0,this.length);this.otpValues=[...e,...Array(this.length-e.length).fill("")]}handleInput=(t,e)=>{let i=t.detail;if(i.length>1&&(i=i.slice(-1)),("number"===this.type||"numeric"===this.type)&&i&&!/^\d$/.test(i))return void this.showTemporaryError("Only numbers allowed");if("alphanumeric"===this.type&&i&&!/^[a-zA-Z0-9]$/.test(i))return void this.showTemporaryError("Only letters and numbers allowed");this.internalInvalid=!1,this.internalErrorText="",this.otpValues[e]=i,this.otpValues=[...this.otpValues];const r=this.otpValues.join("");this.value=r;const o=r.length===this.length&&!r.includes("");this.otpChange.emit({value:r,complete:o}),o&&(this.otpComplete.emit({value:r}),this.autoSubmit&&this.handleSubmit()),i&&e<this.length-1&&this.inputRefs[e+1]?.focus()};handleSubmit=()=>{this.otpSubmit.emit({value:this.value})};handleKeyDown=(t,e)=>{if("Backspace"===t.key){if(!this.otpValues[e]&&e>0){this.otpValues[e-1]="",this.otpValues=[...this.otpValues],this.inputRefs[e-1]?.focus();const t=this.otpValues.join("");this.value=t,this.otpChange.emit({value:t,complete:!1})}}else"ArrowLeft"===t.key&&e>0?this.rtl?e<this.length-1&&this.inputRefs[e+1]?.focus():this.inputRefs[e-1]?.focus():"ArrowRight"===t.key&&e<this.length-1&&(this.rtl?this.inputRefs[e-1]?.focus():this.inputRefs[e+1]?.focus())};handlePaste=t=>{t.preventDefault();const e=t.clipboardData.getData("text").split("").slice(0,this.length);if(("number"===this.type||"numeric"===this.type)&&!/^\d+$/.test(e.join("")))return void this.showTemporaryError("Only numbers allowed");if("alphanumeric"===this.type&&!/^[a-zA-Z0-9]+$/.test(e.join("")))return void this.showTemporaryError("Only letters and numbers allowed");this.internalInvalid=!1,this.internalErrorText="",this.otpValues=[...e,...Array(this.length-e.length).fill("")];const i=this.otpValues.join("");this.value=i;const r=i.length===this.length;this.otpChange.emit({value:i,complete:r}),r?(this.otpComplete.emit({value:i}),this.inputRefs[this.length-1]?.focus()):this.inputRefs[e.length]?.focus()};errorTimeout;showTemporaryError(t){this.internalInvalid=!0,this.internalErrorText=t,this.errorTimeout&&clearTimeout(this.errorTimeout),this.errorTimeout=setTimeout((()=>{this.internalInvalid=!1,this.internalErrorText=""}),2e3)}handleFocus=t=>{this.focusedIndex!==t&&(this.focusedIndex=t,this.inputRefs[t]?.select())};handleBlur=()=>{this.focusedIndex=-1};clear(){this.otpValues=Array(this.length).fill(""),this.value="",this.otpChange.emit({value:"",complete:!1}),this.inputRefs[0]?.focus()}focus(){this.inputRefs[0]?.focus()}render(){const t=this.invalid||this.internalInvalid,e=this.internalErrorText||this.errorText;return r("div",{key:"8fe5324ea7e186d84beea09373bf235f93921708",class:{"otp-input":!0,["otp-input-"+this.size]:!0,["otp-input-"+this.color]:!0,["otp-input-"+this.variant]:!0,"otp-input-disabled":this.disabled,"otp-input-readonly":this.readonly,"otp-input-invalid":t,"otp-input-skeleton":this.skeleton},dir:this.rtl?"rtl":"ltr"},this.label&&r("label",{key:"baa571a85ef85c818b191b46160b42a50b465585",class:"otp-label"},this.label),r("div",{key:"48cb77b47f529d79d9ffcc84af84307f1ecc8a1a",class:"otp-inputs-container"},this.otpValues.map(((t,e)=>{const i=this.groupSize>0&&(e+1)%this.groupSize==0&&e!==this.length-1;return r(o,null,r("ui-input",{ref:t=>this.inputRefs[e]=t,type:this.secure?"password":"text",inputMode:"number"===this.type||"numeric"===this.type?"numeric":"text",pattern:"number"===this.type||"numeric"===this.type?"[0-9]*":void 0,maxLength:1,class:{"otp-input-field":!0,focused:this.focusedIndex===e,filled:!!t},value:t,placeholder:this.placeholder,disabled:this.disabled||this.skeleton,readonly:this.readonly,onInputChange:t=>this.handleInput(t,e),onInputKeydown:t=>this.handleKeyDown(t.detail,e),onPasteInternal:t=>0===e?this.handlePaste(t.detail):t.detail.preventDefault(),onFocusInternal:()=>this.handleFocus(e),onInputBlur:this.handleBlur,ariaLabel:"Digit "+(e+1),size:this.size,align:"center"}),i&&r("div",{class:"otp-divider"}))}))),t&&e&&r("div",{key:"eb635e42e20010b8ca86e84ea3f3a7d9c077a5fa",class:"error-text"},r("ui-icon",{key:"50163f7f1957e40f76d80c4b93548b0cf308b3bf",name:"exclamation-circle",library:"fontawesome"}),e),!t&&this.helperText&&r("div",{key:"0665d1b8ed1e46af72017732bcf59fa4b2ad1e14",class:"helper-text"},this.helperText),r("div",{key:"2d6a7e0c414b396e6a859ebcc5adbd5838cdabf5",class:"otp-resend-container"},r("ui-button",{key:"8f93b95638c39ce06cd1b5bf55172ca3b4045580",variant:"ghost",size:"sm",onClick:this.handleResend,disabled:this.resendTimer>0||this.disabled,label:`${this.resendLabel} ${this.resendTimer>0?`(${this.resendTimer}s)`:""}`})))}static get watchers(){return{value:[{handleValueChange: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}.otp-input{display:flex;flex-direction:column;gap:12px}.otp-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;opacity:0.65;color:var(--label-color, var(--text-primary, #333));margin-bottom:8px}.otp-inputs-container{display:flex;gap:8px;justify-content:center;align-items:center}.otp-divider{width:12px;height:2px;background:var(--border-color, #e0e0e0);margin-inline-start:4px;margin-inline-end:4px}.otp-input-field{width:48px;height:56px;text-align:center;font-size:24px;font-weight:600;border:2px solid var(--border-color, #e0e0e0);border-radius:8px;background:var(--surface-color, var(--bg-primary, #ffffff));outline:none;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);caret-color:var(--primary-color, var(--color-success, #3dcd58))}.otp-input-field:hover:not(:disabled){border-color:var(--border-hover, #bbb)}.otp-input-field:focus,.otp-input-field.focused{border-color:var(--primary-color, var(--color-success, #3dcd58));box-shadow:0 0 0 3px rgba(var(--color-success-rgb, 61, 205, 88), 0.15);transform:translateY(-2px)}.otp-input-field.filled{border-color:var(--primary-color, var(--color-success, #3dcd58));background:var(--primary-color-light, rgba(var(--color-success-rgb, 61, 205, 88), 0.05))}.otp-input-field:disabled{background:var(--background-secondary, #f5f5f5);cursor:not-allowed;opacity:0.6}.otp-input-sm .otp-input-field{width:40px;height:48px;font-size:20px}.otp-input-lg .otp-input-field{width:56px;height:64px;font-size:28px}.otp-input-secondary .otp-input-field:focus{border-color:var(--color-primary, #6b7280);box-shadow:0 0 0 3px rgba(107, 114, 128, 0.15)}.otp-input-success .otp-input-field:focus{border-color:var(--color-success, #16a34a);box-shadow:0 0 0 3px rgba(22, 163, 74, 0.15)}.otp-input-danger .otp-input-field:focus{border-color:var(--color-danger-hover, #dc2626);box-shadow:0 0 0 3px rgba(var(--color-danger-rgb, 220, 38, 38), 0.15)}.otp-input-warning .otp-input-field:focus{border-color:var(--color-warning, #f59e0b);box-shadow:0 0 0 3px rgba(var(--color-warning-rgb, 245, 158, 11), 0.15)}.otp-input-info .otp-input-field:focus{border-color:var(--color-info-hover, #0891b2);box-shadow:0 0 0 3px rgba(8, 145, 178, 0.15)}.otp-input-underlined .otp-input-field{border:none;border-bottom:2px solid var(--border-color);border-radius:0;background:transparent}.otp-input-underlined .otp-input-field:focus{transform:none;border-bottom-color:var(--primary-color);box-shadow:none}.otp-input-flushed .otp-input-field{border:none;background:var(--background-secondary, var(--bg-secondary, #f3f4f6));border-radius:12px}.otp-input-flushed .otp-input-field:focus{background:var(--surface-color);box-shadow:0 4px 12px rgba(0, 0, 0, 0.05)}.otp-input-separated .otp-input-field{margin-inline-start:4px;margin-inline-end:4px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.05);border-radius:12px}.otp-input-invalid{animation:otp-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both}.otp-input-invalid .otp-input-field{border-color:var(--danger-color, #f44336) !important}.otp-input-invalid .otp-input-field:focus{box-shadow:0 0 0 3px rgba(244, 67, 54, 0.15)}.error-text{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--danger-color, #f44336)}.error-text i{font-size:14px}.helper-text{font-size:12px;color:var(--label-subtitle-color, var(--text-secondary, #666));text-align:center}.otp-input-skeleton{pointer-events:none}.otp-input-skeleton .otp-input-field{background:linear-gradient(90deg, var(--bg-secondary, #f3f4f6) 25%, var(--bg-primary, #e5e7eb) 50%, var(--bg-secondary, #f3f4f6) 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite linear;border-color:transparent}.otp-input-skeleton .otp-label{width:80px;height:14px;background:var(--bg-primary, #e5e7eb);border-radius:4px;margin-bottom:8px}@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}@keyframes otp-shake{10%,90%{transform:translate3d(-1px, 0, 0)}20%,80%{transform:translate3d(2px, 0, 0)}30%,50%,70%{transform:translate3d(-4px, 0, 0)}40%,60%{transform:translate3d(4px, 0, 0)}}@keyframes fillPulse{0%{transform:scale(1)}50%{transform:scale(1.1);box-shadow:0 0 15px rgba(var(--color-success-rgb, 61, 205, 88), 0.3)}100%{transform:scale(1)}}.otp-input-field.filled{animation:fillPulse 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)}"}},[513,"ui-otp-input",{length:[2],value:[1025],label:[1],helperText:[1,"helper-text"],errorText:[1,"error-text"],disabled:[4],readonly:[4],required:[4],type:[1],autoFocus:[4,"auto-focus"],secure:[4],size:[1],color:[1],variant:[1],invalid:[4],skeleton:[4],autoSubmit:[4,"auto-submit"],groupSize:[2,"group-size"],placeholder:[1],rtl:[4],resendInterval:[2,"resend-interval"],resendLabel:[1,"resend-label"],otpValues:[32],focusedIndex:[32],internalInvalid:[32],internalErrorText:[32],resendTimer:[32]},void 0,{value:[{handleValueChange:0}]}]),c=d,h=function(){"undefined"!=typeof customElements&&["ui-otp-input","ui-badge","ui-button","ui-icon","ui-input"].forEach((t=>{switch(t){case"ui-otp-input":customElements.get(s(t))||customElements.define(s(t),d);break;case"ui-badge":customElements.get(s(t))||n();break;case"ui-button":customElements.get(s(t))||a();break;case"ui-icon":customElements.get(s(t))||l();break;case"ui-input":customElements.get(s(t))||p()}}))};export{c as UiOtpInput,h as defineCustomElement}

package/dist/components/ui-pagination.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UiPagination extends Components.UiPagination, HTMLElement {}
+export const UiPagination: {
+    prototype: UiPagination;
+    new (): UiPagination;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ui-pagination.js

@@ -0,0 +1 @@
+import{P as o,d as a}from"./pagination.js";const s=o,t=a;export{s as UiPagination,t as defineCustomElement}

package/dist/components/ui-panel.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UiPanel extends Components.UiPanel, HTMLElement {}
+export const UiPanel: {
+    prototype: UiPanel;
+    new (): UiPanel;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ui-panel.js

@@ -0,0 +1 @@
+import{proxyCustomElement as e,HTMLElement as a,createEvent as t,h as i,transformTag as n}from"@stencil/core/internal/client";import{d as r,a as s}from"./badge.js";import{d as o}from"./icon.js";import{d as l}from"./input.js";const p=e(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.panelClose=t(this,"panelClose",7),this.panelSettings=t(this,"panelSettings",7),this.toggle=t(this,"toggle",7),this.panelMinimize=t(this,"panelMinimize",7),this.panelMaximize=t(this,"panelMaximize",7),this.panelRestore=t(this,"panelRestore",7),this.panelDragStart=t(this,"panelDragStart",7),this.panelDrag=t(this,"panelDrag",7),this.panelDragEnd=t(this,"panelDragEnd",7),this.panelResizeStart=t(this,"panelResizeStart",7),this.panelResize=t(this,"panelResize",7),this.panelResizeEnd=t(this,"panelResizeEnd",7),this.panelSearch=t(this,"panelSearch",7)}get element(){return this}panelId="";width="100%";height="auto";maxWidth="none";maxHeight="none";showClose=!0;showSettings=!0;panelTitle="";panelSubtitle="";variant="elevated";toggleable=!1;collapsed=!1;loading=!1;noPadding=!1;theme="default";animationDuration="300ms";animationType="slide";badge="";badgeVariant="count";icon="";keyboardNav=!0;aura=!1;enableSearch=!1;searchPlaceholder="Search content...";elevation=2;panelClose;panelSettings;toggle;minimizable=!1;maximizable=!1;minimized=!1;maximized=!1;isDraggable=!1;bounds="none";edgeSnapping=!1;snapThreshold=20;snapToGrid=!1;gridSize=20;dragPhysics=!1;resizable=!1;minWidth="200px";minHeight="100px";pinned=!1;persistenceId;overflow="auto";position;x;y;modal=!1;dismissible=!1;glass=!1;backgroundColor="white";panelMinimize;panelMaximize;panelRestore;panelDragStart;panelDrag;panelDragEnd;panelResizeStart;panelResize;panelResizeEnd;panelSearch;previousDimensions={width:"100%",height:"auto"};isDragging=!1;isResizing=!1;currentWidth;currentHeight;isActive=!1;searchQuery="";dragStartX=0;dragStartY=0;dragPosition={x:0,y:0};resizeStartWidth=0;initialRect;lastMouseX=0;dragTilt=0;resizeStartHeight=0;resizeHandle="";componentWillLoad(){this.loadState(),this.currentWidth||(this.currentWidth=this.width),this.currentHeight||(this.currentHeight=this.height)}loadState(){if(this.persistenceId){const e=localStorage.getItem("ui-panel-"+this.persistenceId);if(e)try{const a=JSON.parse(e);this.collapsed=a.collapsed??this.collapsed,this.minimized=a.minimized??this.minimized,this.maximized=a.maximized??this.maximized,this.dragPosition=a.dragPosition??this.dragPosition,this.currentWidth=a.currentWidth??this.currentWidth,this.currentHeight=a.currentHeight??this.currentHeight,this.pinned=a.pinned??this.pinned,this.previousDimensions=a.previousDimensions??this.previousDimensions}catch(e){console.warn("Failed to load panel state",e)}}}saveState(){this.persistenceId&&localStorage.setItem("ui-panel-"+this.persistenceId,JSON.stringify({collapsed:this.collapsed,minimized:this.minimized,maximized:this.maximized,dragPosition:this.dragPosition,currentWidth:this.currentWidth,currentHeight:this.currentHeight,pinned:this.pinned,previousDimensions:this.previousDimensions}))}handleFocus=()=>{this.isActive=!0};handleBlur=()=>{this.isActive=!1};handleKeyDown=e=>{if(this.keyboardNav)if("Escape"===e.key&&this.showClose)this.handleClose(e);else if(" "!==e.key&&"Enter"!==e.key||!this.toggleable){if(this.isDraggable&&e.shiftKey){const a=this.snapToGrid?this.gridSize:20;"ArrowUp"===e.key&&(this.dragPosition={...this.dragPosition,y:this.dragPosition.y-a},e.preventDefault()),"ArrowDown"===e.key&&(this.dragPosition={...this.dragPosition,y:this.dragPosition.y+a},e.preventDefault()),"ArrowLeft"===e.key&&(this.dragPosition={...this.dragPosition,x:this.dragPosition.x-a},e.preventDefault()),"ArrowRight"===e.key&&(this.dragPosition={...this.dragPosition,x:this.dragPosition.x+a},e.preventDefault()),this.saveState(),this.panelDrag.emit({panelId:this.panelId,x:this.dragPosition.x,y:this.dragPosition.y})}}else e.preventDefault(),this.handleToggle()};handleMinimize=e=>{e.stopPropagation(),this.minimized=!this.minimized,this.minimized&&this.maximized&&(this.maximized=!1),this.panelMinimize.emit({panelId:this.panelId}),this.saveState()};handleMaximize=e=>{e.stopPropagation(),this.maximized?(this.maximized=!1,this.currentWidth=this.previousDimensions.width,this.currentHeight=this.previousDimensions.height,this.panelRestore.emit({panelId:this.panelId})):(this.previousDimensions={width:this.currentWidth,height:this.currentHeight},this.maximized=!0,this.minimized=!1,this.panelMaximize.emit({panelId:this.panelId})),this.saveState()};handleDragStart=e=>{this.isDraggable&&!this.maximized&&(this.isDragging=!0,this.dragStartX=e.clientX-this.dragPosition.x,this.dragStartY=e.clientY-this.dragPosition.y,this.initialRect=this.element.getBoundingClientRect(),this.lastMouseX=e.clientX,this.panelDragStart.emit({panelId:this.panelId,x:this.dragPosition.x,y:this.dragPosition.y}),document.addEventListener("mousemove",this.handleDragMove),document.addEventListener("mouseup",this.handleDragEnd))};handleDragMove=e=>{if(!this.isDragging)return;let a=e.clientX-this.dragStartX,t=e.clientY-this.dragStartY;if(this.dragPhysics){const a=e.clientX-this.lastMouseX;this.lastMouseX=e.clientX,this.dragTilt=Math.max(-15,Math.min(15,.4*a))}this.snapToGrid&&this.gridSize>0&&(a=Math.round(a/this.gridSize)*this.gridSize,t=Math.round(t/this.gridSize)*this.gridSize);let i=a,n=t;if("viewport"===this.bounds&&this.initialRect){const e=this.initialRect.left+i,a=this.initialRect.top+n,t=40,r=window.innerWidth,s=window.innerHeight;e+this.initialRect.width<t&&(i=t-this.initialRect.width-this.initialRect.left),e>r-t&&(i=r-t-this.initialRect.left),a<0&&(n=-this.initialRect.top),a>s-t&&(n=s-t-this.initialRect.top)}if(this.edgeSnapping&&this.initialRect){const e=this.initialRect.left+i,a=this.initialRect.top+n,t=window.innerWidth,r=window.innerHeight,s=this.snapThreshold;Math.abs(e)<s&&(i=-this.initialRect.left),Math.abs(a)<s&&(n=-this.initialRect.top),Math.abs(e+this.initialRect.width-t)<s&&(i=t-this.initialRect.width-this.initialRect.left),Math.abs(a+this.initialRect.height-r)<s&&(n=r-this.initialRect.height-this.initialRect.top)}this.dragPosition={x:i,y:n},this.panelDrag.emit({panelId:this.panelId,x:i,y:n})};handleDragEnd=()=>{if(this.isDragging){if(this.isDragging=!1,this.dragPhysics&&(this.dragTilt=0),this.edgeSnapping&&this.initialRect){const e=this.initialRect.left+this.dragPosition.x,a=window.innerWidth;e<=0?(this.maximized=!1,this.currentWidth="50vw",this.currentHeight="100vh",this.dragPosition={x:-this.initialRect.left,y:-this.initialRect.top}):e+this.initialRect.width>=a&&(this.maximized=!1,this.currentWidth="50vw",this.currentHeight="100vh",this.dragPosition={x:a-a/2-this.initialRect.left,y:-this.initialRect.top})}this.panelDragEnd.emit({panelId:this.panelId,x:this.dragPosition.x,y:this.dragPosition.y}),this.saveState(),document.removeEventListener("mousemove",this.handleDragMove),document.removeEventListener("mouseup",this.handleDragEnd)}};handleResizeStart=(e,a)=>{if(!this.resizable)return;e.stopPropagation(),this.isResizing=!0,this.resizeHandle=a,this.dragStartX=e.clientX,this.dragStartY=e.clientY;const t=this.element.getBoundingClientRect();this.resizeStartWidth=t.width,this.resizeStartHeight=t.height,this.panelResizeStart.emit({panelId:this.panelId,width:t.width,height:t.height}),document.addEventListener("mousemove",this.handleResizeMove),document.addEventListener("mouseup",this.handleResizeEnd)};handleResizeMove=e=>{if(!this.isResizing)return;const a=e.clientX-this.dragStartX,t=e.clientY-this.dragStartY;let i=this.resizeStartWidth,n=this.resizeStartHeight,r=0,s=0;this.resizeHandle.includes("e")&&(i+=a),this.resizeHandle.includes("w")&&(i-=a,r=a),this.resizeHandle.includes("s")&&(n+=t),this.resizeHandle.includes("n")&&(n-=t,s=t);const o=parseInt(this.minWidth)||200,l=parseInt(this.minHeight)||100;i<o&&(this.resizeHandle.includes("w")&&(r=this.resizeStartWidth-o),i=o),n<l&&(this.resizeHandle.includes("n")&&(s=this.resizeStartHeight-l),n=l),this.currentWidth=i+"px",this.currentHeight=n+"px",(this.resizeHandle.includes("w")||this.resizeHandle.includes("n"))&&(this.dragPosition={x:this.dragPosition.x+r,y:this.dragPosition.y+s}),this.panelResize.emit({panelId:this.panelId,width:i,height:n})};handleResizeEnd=()=>{if(!this.isResizing)return;this.isResizing=!1;const e=this.element.getBoundingClientRect();this.panelResizeEnd.emit({panelId:this.panelId,width:e.width,height:e.height}),this.saveState(),document.removeEventListener("mousemove",this.handleResizeMove),document.removeEventListener("mouseup",this.handleResizeEnd)};handleClose=e=>{e.stopPropagation(),this.panelClose.emit({panelId:this.panelId})};showActionList=!1;handleSettings=e=>{e.stopPropagation(),this.showActionList=!this.showActionList,this.panelSettings.emit({panelId:this.panelId}),this.showActionList?document.addEventListener("click",this.closeActionList):document.removeEventListener("click",this.closeActionList)};closeActionList=e=>{this.element.shadowRoot?.querySelector(".panel-settings-wrapper")?.contains(e.target)||this.element.contains(e.target)||(this.showActionList=!1,document.removeEventListener("click",this.closeActionList))};handleSearchInput=e=>{this.searchQuery=e.detail,this.panelSearch.emit({query:this.searchQuery})};handleToggle=()=>{this.toggleable&&(this.collapsed=!this.collapsed,this.toggle.emit({collapsed:this.collapsed}),this.saveState())};handlePinToggle=e=>{e.stopPropagation(),this.pinned=!this.pinned,this.saveState()};render(){const e={width:this.maximized?"100vw":this.currentWidth,height:this.collapsed||this.minimized?"auto":this.maximized?"100vh":this.currentHeight,maxWidth:this.maximized?"none":this.maxWidth,maxHeight:this.maximized?"none":this.maxHeight,"--animation-duration":this.animationDuration,transform:this.isDraggable?`translate(${this.dragPosition.x}px, ${this.dragPosition.y}px)`+(this.dragPhysics&&this.isDragging?` rotateY(${this.dragTilt}deg) rotateZ(${.1*this.dragTilt}deg)`:""):"",transition:this.isDragging&&!this.snapToGrid?"transform 0.1s ease-out":"transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.3s ease, height 0.3s ease",position:this.position||this.x||this.y||this.isDraggable||this.maximized?"fixed":"relative",top:this.maximized?"0":this.y?this.y:this.position?"":"auto",left:this.maximized?"0":this.x?this.x:this.position?"":"auto",right:this.position||this.x?"":"auto",bottom:this.position||this.y?"":"auto",zIndex:this.pinned||this.modal?"1000":this.isActive||this.isDraggable?"101":this.isDraggable?"100":"auto",margin:"0","--panel-bg":this.backgroundColor||"white","background-color":"var(--panel-bg, #ffffff)"},a={overflow:this.overflow};return i("div",{key:"843a2cdb343598710c2e3cf1d04994e362a0f33b",class:{"panel-container":!0,"panel-active":this.isActive,["panel-"+this.variant]:!0,["panel-theme-"+this.theme]:!0,["panel-animation-"+this.animationType]:!0,"panel-collapsed":this.collapsed,"panel-minimized":this.minimized,"panel-maximized":this.maximized,"panel-loading":this.loading,"panel-draggable":this.isDraggable,"panel-dragging":this.isDragging,"panel-resizable":this.resizable,"panel-resizing":this.isResizing,"panel-pinned":this.pinned,"panel-modal":this.modal,"panel-glass":this.glass,"panel-aura":this.aura,"panel-with-search":this.enableSearch,["panel-elevation-"+this.elevation]:!0,["panel-position-"+this.position]:!!this.position},style:e,onKeyDown:this.handleKeyDown,onFocus:this.handleFocus,onBlur:this.handleBlur,tabindex:this.keyboardNav?0:-1,role:"region","aria-label":this.panelTitle||"Panel","aria-expanded":!this.collapsed&&!this.minimized},this.modal&&i("div",{key:"96a9377520a2998e820d02159da6bdaba2838dc9",class:"panel-backdrop",onClick:e=>{this.modal&&this.dismissible&&(e.stopPropagation(),this.handleClose(e))}}),i("div",{key:"92adc3528c404b4d4338a4c2960463a48abeb282",class:"panel-header",onClick:this.toggleable?this.handleToggle:void 0,onMouseDown:this.isDraggable?this.handleDragStart:void 0,style:{cursor:this.isDraggable?"move":this.toggleable?"pointer":"default"}},i("div",{key:"b8baae2f2f4c4ae873c0a6f332d87dda76e4e3cd",class:"panel-title-wrapper"},i("div",{key:"cf6ca464d5fefea869a43388126fdef0b3bf71a2",class:"panel-title"},this.icon&&i("span",{key:"a8c6607d8e1d0347440830458b1aaa13fef70966",class:"panel-header-icon-inline"},this.icon),this.panelTitle&&i("h3",{key:"2b99cbe49e2391639e619afa8ab2701def0deee3",class:"panel-title-text"},this.panelTitle),i("slot",{key:"62cdfbaff1db11a4005c8b5ac2b92627edd07ebf",name:"header-icon"}),this.badge&&i("span",{key:"1b90d8c207d75555523ac1bfd74a13cae26b41de",class:"panel-badge panel-badge-"+this.badgeVariant},"dot"===this.badgeVariant?"":this.badge)),this.panelSubtitle&&i("div",{key:"6b56cd614017acc97e28327cfea0d5b4e4a83ef7",class:"panel-subtitle"},this.panelSubtitle),i("slot",{key:"96e631d10bd2d3c35bca1183cc72a0c185fe0d05",name:"header"})),this.enableSearch&&i("div",{key:"1f2533ac720e317df6e0bf170bc16eb1eda5e764",class:"panel-search-container",onClick:e=>e.stopPropagation()},i("div",{key:"77afd05fef848e31b845692fe02d516987a4e963",class:"search-inner"},i("ui-icon",{key:"844401caaf4fcfcb744f806ec9badd3e4d3a6ff2",name:"search",library:"lucide",class:"search-icon",size:"1.2em"}),i("ui-input",{key:"ab85da17a38ac78c81d5bb776aca1f2dcb2f15c4",type:"text",placeholder:this.searchPlaceholder,onInputChange:this.handleSearchInput,value:this.searchQuery,size:"sm",fullWidth:!0}),this.searchQuery&&i("ui-button",{key:"b2c298aba23825796122bf235816c2eb3b36d9a4",variant:"ghost",class:"search-clear",onClick:()=>{this.searchQuery="",this.panelSearch.emit({query:""})},ariaLabel:"Clear search",icon:"x",iconLibrary:"lucide",iconOnly:!0,size:"xxs"}))),i("div",{key:"3c1bbc4de3923fab63d3d213a420ea20b9fc76f2",class:"panel-actions"},i("slot",{key:"4df5712a389b6b8f5a5fb819d7e2ebee0228dd42",name:"header-actions"}),i("ui-button",{key:"9da9f9d850fd944fa71e53ea305f3b9cd079a064",variant:"ghost",class:"panel-pin-btn "+(this.pinned?"active":""),onClick:this.handlePinToggle,ariaLabel:this.pinned?"Unpin":"Pin",icon:"pin",iconLibrary:"lucide",iconOnly:!0,size:"sm",title:this.pinned?"Unpin":"Pin"}),this.minimizable&&!this.maximized&&i("ui-button",{key:"bb57989ff64f7e40cac99c20ab80b7ba3b5571ae",variant:"ghost",onClick:this.handleMinimize,ariaLabel:"Minimize panel",icon:"minus",iconLibrary:"lucide",iconOnly:!0,size:"sm",title:"Minimize"}),this.maximizable&&!this.minimized&&i("ui-button",{key:"a8c74703bf14e4542825bbeb3d439288bf0ae6ca",variant:"ghost",onClick:this.handleMaximize,ariaLabel:this.maximized?"Restore":"Maximize",icon:this.maximized?"copy":"square",iconLibrary:"lucide",iconOnly:!0,size:"sm",title:this.maximized?"Restore":"Maximize"}),this.showSettings&&i("div",{key:"cabe3fd3cbd49f8501f60c63fa308844bd33ab85",class:"panel-settings-wrapper",style:{position:"relative"}},i("ui-button",{key:"84ce872e7528dee72cfa2b574acf999a94b3cf03",variant:"ghost",onClick:this.handleSettings,ariaLabel:"Panel settings",icon:"settings",iconLibrary:"lucide",iconOnly:!0,size:"sm",title:"Settings"}),this.showActionList&&i("div",{key:"4992efa9846d614f721bc06c7744694d0019f201",class:"panel-action-list-popup"},i("slot",{key:"2e13a0eb84b6bc48c02136e730915bd7b35ea432",name:"action-list"}))),this.toggleable&&i("ui-button",{key:"7b74e90b36016a2c2410bf59296d1c8b6ccb48f7",variant:"ghost",class:"panel-action-btn panel-toggle-btn "+(this.collapsed?"collapsed":""),onClick:e=>{e.stopPropagation(),this.handleToggle()},ariaLabel:this.collapsed?"Expand":"Collapse",icon:"chevron-up",iconLibrary:"lucide",iconOnly:!0,size:"sm"}),this.showClose&&i("ui-button",{key:"7a84ee96567a763bbf68cc187807439a3ef70b1b",variant:"ghost",onClick:this.handleClose,ariaLabel:"Close panel",icon:"x",iconLibrary:"lucide",iconOnly:!0,size:"sm",title:"Close"}))),!this.minimized&&i("div",{key:"d15ea87f83ad63ffea4edf8017b23c5795a3b848",class:"panel-body-wrapper"},this.loading&&i("div",{key:"d6e3f9c0c43950d232643a19bfb2907c138e1afd",class:"panel-loading-overlay"},i("div",{key:"08a48431ac6bb39b3c27444b18ea2f5cd29d55c0",class:"panel-spinner"})),i("div",{key:"c81065f34b525c67e082deffc9a41177c7b654d7",class:"panel-content "+(this.noPadding?"no-padding":""),style:a},i("slot",{key:"5aacbe8e43c160570596ac2aff83d00098b438c0",name:"content"}),i("slot",{key:"4caeef2dd57a822dc98c5fb1ec6fca10b3a62796"})),i("div",{key:"14d8117a5004c0522a0108a3879612cec4158344",class:"panel-footer"},i("slot",{key:"ca2f91902d37806ad5f4e4a5eebc67bc9fb5043a",name:"footer"}))),this.resizable&&!this.maximized&&!this.minimized&&i("div",{key:"4b22c21852d6f3cfc46c64d205db8d3276aabbbe",class:"panel-resize-handles"},i("div",{key:"3bcf0a8f5418adbe5e871d872c4355e6aa03f384",class:"resize-handle resize-n",onMouseDown:e=>this.handleResizeStart(e,"n")}),i("div",{key:"377eb4f44c1d2a2991b2cf92dd57ec5eb120b040",class:"resize-handle resize-s",onMouseDown:e=>this.handleResizeStart(e,"s")}),i("div",{key:"0bd73e6d97af791249f6876b013f5a162822477e",class:"resize-handle resize-e",onMouseDown:e=>this.handleResizeStart(e,"e")}),i("div",{key:"6f44b5ad062e97258b2bb29de30587e647bbde44",class:"resize-handle resize-w",onMouseDown:e=>this.handleResizeStart(e,"w")}),i("div",{key:"10dd0e6a1dc7a2c813090176b48b64882d26f694",class:"resize-handle resize-ne",onMouseDown:e=>this.handleResizeStart(e,"ne")}),i("div",{key:"b3bcb6031895a3e13da4466092a238c4dd78b0cd",class:"resize-handle resize-nw",onMouseDown:e=>this.handleResizeStart(e,"nw")}),i("div",{key:"8a194a9b536b1d562a549945fd9de12e28c8c70d",class:"resize-handle resize-se",onMouseDown:e=>this.handleResizeStart(e,"se")}),i("div",{key:"4ad815d53e99dd50929204ea6e7b40e73191a161",class:"resize-handle resize-sw",onMouseDown:e=>this.handleResizeStart(e,"sw")})))}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}.panel-container{display:flex;flex-direction:column;position:relative;background-color:var(--panel-bg, #ffffff);border-radius:var(--panel-border-radius, 8px);overflow:hidden;transition:box-shadow 0.2s ease, border-color 0.2s ease}.panel-elevated{border:1px solid var(--panel-border-color, var(--border-default, #e5e7eb));box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)}.panel-active.panel-elevated{box-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);border-color:var(--color-primary, #10b981)}.panel-outlined{border:1px solid var(--panel-border-color, var(--border-strong, #d1d5db));box-shadow:none}.panel-filled{border:1px solid transparent;background-color:var(--panel-filled-bg, var(--bg-secondary, #f3f4f6));box-shadow:none}.panel-filled .panel-header{background-color:transparent;border-bottom:1px solid rgba(0, 0, 0, 0.05);}.panel-flat{border:none;box-shadow:none;background:transparent}.panel-flat .panel-header{background:transparent;border-bottom:1px solid var(--border-default, #e5e7eb);padding-left:0;padding-right:0}.panel-flat .panel-content{padding-left:0;padding-right:0}.panel-flat .panel-footer{padding-left:0;padding-right:0}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background-color:var(--panel-header-bg, var(--bg-primary, var(--text-standard, #ffffff)));border-bottom:1px solid var(--panel-border-color, var(--border-default, #e5e7eb));min-height:48px;user-select:none}.panel-title-wrapper{flex:1;display:flex;flex-direction:column;gap:2px;margin-right:16px}.panel-title{display:flex;align-items:center;gap:8px}.panel-title-text{margin:0;font-size:16px;font-weight:600;color:var(--panel-text-primary, var(--text-primary, #111827));line-height:1.4}.panel-subtitle{font-size:13px;color:var(--panel-text-secondary, var(--text-muted, #6b7280));line-height:1.4}.panel-actions{display:flex;align-items:center;gap:4px;}.panel-action-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;background:transparent;border-radius:6px;color:var(--panel-action-color, var(--text-muted, #6b7280));cursor:pointer;transition:all 0.2s}.panel-action-btn:hover{background-color:var(--panel-action-hover-bg, var(--bg-secondary, #f3f4f6));color:var(--panel-text-primary, var(--text-primary, #111827))}.panel-action-btn:focus-visible{outline:2px solid var(--color-primary, #10b981);outline-offset:2px}.panel-action-btn .icon{width:18px;height:18px}.panel-action-list-popup{position:absolute;top:100%;right:0;margin-top:8px;background-color:var(--panel-bg, var(--bg-primary, var(--text-standard, #ffffff)));border:1px solid var(--panel-border-color, var(--border-default, #e5e7eb));border-radius:8px;box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);z-index:1001;min-width:150px;overflow:hidden}.panel-toggle-btn{transition:transform 0.3s ease}.panel-toggle-btn.collapsed{transform:rotate(180deg);}.panel-body-wrapper{display:flex;flex-direction:column;flex:1;min-height:0;position:relative;overflow:hidden}.panel-collapsed .panel-body-wrapper{display:none}.panel-content{flex:1;padding:16px;overflow-y:auto;min-height:0;color:var(--panel-text-primary, var(--text-secondary, #374151));font-size:14px;line-height:1.5;}.panel-content::-webkit-scrollbar{width:6px}.panel-content::-webkit-scrollbar-track{background:transparent}.panel-content::-webkit-scrollbar-thumb{background:rgba(0, 0, 0, 0.1);border-radius:10px}.panel-content:hover::-webkit-scrollbar-thumb{background:rgba(0, 0, 0, 0.2)}.panel-content.no-padding{padding:0}.panel-footer{padding:12px 16px;background-color:var(--panel-footer-bg, var(--bg-primary, #f9fafb));border-top:1px solid var(--panel-border-color, var(--border-default, #e5e7eb));display:flex;align-items:center;justify-content:flex-end;gap:8px}.panel-loading-overlay{position:absolute;inset:0;background-color:rgba(255, 255, 255, 0.7);backdrop-filter:blur(2px);z-index:10;display:flex;align-items:center;justify-content:center}.panel-spinner{width:30px;height:30px;border:3px solid var(--border-default, #e5e7eb);border-top-color:var(--color-primary, #10b981);border-radius:50%;animation:spin 0.8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-color-scheme: dark){.panel-container{--panel-bg:var(--bg-primary, #1f2937);--panel-border-color:var(--border-default, #374151);--panel-text-primary:var(--bg-primary, #f3f4f6);--panel-text-secondary:var(--color-primary, #9ca3af);--panel-header-bg:var(--bg-primary, #1f2937)}.panel-filled{background-color:var(--bg-secondary, var(--text-primary, #111827))}.panel-footer{--panel-footer-bg:var(--bg-secondary, #111827)}.panel-action-btn{--panel-action-color:var(--text-muted, #9ca3af);--panel-action-hover-bg:var(--color-primary, #374151)}.panel-loading-overlay{background-color:rgba(31, 41, 55, 0.7)}.panel-spinner{border-color:var(--border-strong, #4b5563);border-top-color:var(--color-primary, #60a5fa)}.panel-theme-primary{--panel-theme-bg:var(--color-primary, #1e3a8a);--panel-theme-text:var(--color-primary, #bfdbfe)}.panel-theme-success{--panel-theme-bg:var(--color-primary, #064e3b);--panel-theme-text:var(--color-success, #a7f3d0)}.panel-theme-warning{--panel-theme-bg:var(--color-danger, #78350f);--panel-theme-text:var(--color-primary, #fde68a)}.panel-theme-danger{--panel-theme-bg:var(--color-danger, #7f1d1d);--panel-theme-text:var(--color-danger, #fecaca)}.panel-theme-info{--panel-theme-bg:var(--color-primary, #164e63);--panel-theme-text:var(--color-primary, #a5f3fc)}}.panel-theme-primary{--panel-theme-color:var(--color-primary, #10b981);--panel-theme-bg:var(--bg-primary, #eff6ff);--panel-theme-border:var(--color-primary, #10b981);--panel-theme-text:var(--color-primary, #1e40af)}.panel-theme-success{--panel-theme-color:var(--color-success, #10b981);--panel-theme-bg:var(--bg-primary, #d1fae5);--panel-theme-border:var(--color-success, #10b981);--panel-theme-text:var(--color-primary, #065f46)}.panel-theme-warning{--panel-theme-color:var(--color-warning, #f59e0b);--panel-theme-bg:var(--bg-primary, #fef3c7);--panel-theme-border:var(--color-warning, #f59e0b);--panel-theme-text:var(--color-danger, #92400e)}.panel-theme-danger{--panel-theme-color:var(--color-danger, #ef4444);--panel-theme-bg:var(--bg-primary, #fee2e2);--panel-theme-border:var(--color-danger, #ef4444);--panel-theme-text:var(--color-danger, #991b1b)}.panel-theme-info{--panel-theme-color:var(--color-info, #06b6d4);--panel-theme-bg:var(--bg-primary, #cffafe);--panel-theme-border:var(--color-info, #06b6d4);--panel-theme-text:var(--color-primary, #155e75)}.panel-theme-primary .panel-header,.panel-theme-success .panel-header,.panel-theme-warning .panel-header,.panel-theme-danger .panel-header,.panel-theme-info .panel-header{background-color:var(--panel-theme-bg);border-bottom-color:var(--panel-theme-border);border-left:4px solid var(--panel-theme-color)}.panel-theme-primary .panel-title-text,.panel-theme-success .panel-title-text,.panel-theme-warning .panel-title-text,.panel-theme-danger .panel-title-text,.panel-theme-info .panel-title-text{color:var(--panel-theme-color)}.panel-theme-primary .panel-content,.panel-theme-success .panel-content,.panel-theme-warning .panel-content,.panel-theme-danger .panel-content,.panel-theme-info .panel-content{color:var(--panel-theme-text)}.panel-theme-primary .panel-subtitle,.panel-theme-success .panel-subtitle,.panel-theme-warning .panel-subtitle,.panel-theme-danger .panel-subtitle,.panel-theme-info .panel-subtitle{color:var(--panel-theme-text);opacity:0.8}.panel-badge{display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;line-height:1;border-radius:10px;margin-left:8px}.panel-badge-dot{width:8px;height:8px;border-radius:50%;background-color:var(--panel-theme-color, var(--color-primary, #10b981))}.panel-badge-count,.panel-badge-text{padding:3px 8px;background-color:var(--panel-theme-color, var(--color-primary, #10b981));color:var(--text-standard, #ffffff);min-width:20px}@keyframes slideIn{from{max-height:0;opacity:0}to{max-height:1000px;opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes scaleIn{from{transform:scale(0.95);opacity:0}to{transform:scale(1);opacity:1}}.panel-animation-slide .panel-body-wrapper{animation:slideIn var(--animation-duration, 300ms) ease-out}.panel-animation-fade .panel-body-wrapper{animation:fadeIn var(--animation-duration, 300ms) ease-out}.panel-animation-scale .panel-body-wrapper{animation:scaleIn var(--animation-duration, 300ms) ease-out}.panel-minimized .panel-body-wrapper{display:none}.panel-minimized{height:auto !important}.panel-maximized{position:fixed !important;top:0 !important;left:0 !important;width:100vw !important;height:100vh !important;max-width:none !important;max-height:none !important;z-index:9999 !important;border-radius:0 !important}.panel-draggable{cursor:move}.panel-dragging{opacity:0.9;box-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);cursor:grabbing !important}.panel-draggable .panel-header{cursor:move}.panel-resizable{position:relative}.panel-resize-handles{position:absolute;inset:0;pointer-events:none}.resize-handle{position:absolute;pointer-events:all;z-index:10}.resize-n,.resize-s{left:0;right:0;height:8px;cursor:ns-resize}.resize-n{top:0}.resize-s{bottom:0}.resize-e,.resize-w{top:0;bottom:0;width:8px;cursor:ew-resize}.resize-e{right:0}.resize-w{left:0}.resize-ne,.resize-nw,.resize-se,.resize-sw{width:12px;height:12px}.resize-ne{top:0;right:0;cursor:nesw-resize}.resize-nw{top:0;left:0;cursor:nwse-resize}.resize-se{bottom:0;right:0;cursor:nwse-resize}.resize-sw{bottom:0;left:0;cursor:nesw-resize}.panel-resizing{user-select:none}.panel-pinned{z-index:1000;box-shadow:0 25px 50px -12px rgba(0, 0, 0, 0.25)}.panel-container:focus-visible{outline:2px solid var(--color-primary, #10b981);outline-offset:2px}.panel-minimize-btn:hover{background-color:var(--bg-primary, #fef3c7);color:var(--color-warning, #f59e0b)}.panel-maximize-btn:hover{background-color:var(--bg-primary, #dbeafe);color:var(--color-primary, #10b981)}@media (max-width: 768px){.panel-draggable{position:relative !important;transform:none !important}.panel-resizable .panel-resize-handles{display:none}}.panel-pin-btn.active{color:var(--color-primary, #10b981);background-color:var(--bg-primary, #dbeafe)}.panel-pin-btn.active svg{fill:currentColor}.panel-resizable::after{content:"";position:absolute;bottom:4px;right:4px;width:12px;height:12px;background-image:radial-gradient(circle, var(--bg-secondary, #d1d5db) 1px, transparent 1px);background-size:4px 4px;opacity:0.6;pointer-events:none}.panel-backdrop{position:fixed;inset:0;background-color:rgba(0, 0, 0, 0.4);backdrop-filter:blur(2px);z-index:999;animation:fadeIn 0.2s ease-out}.panel-modal{box-shadow:0 25px 50px -12px rgba(0, 0, 0, 0.25);z-index:1000}.panel-glass{background-color:rgba(255, 255, 255, 0.7);backdrop-filter:blur(12px);border:1px solid rgba(255, 255, 255, 0.3)}.panel-theme-dark .panel-glass,:host-context(.dark) .panel-glass{background-color:rgba(30, 41, 59, 0.6);border-color:rgba(255, 255, 255, 0.1)}[class*=panel-position-]{position:fixed;z-index:1000;margin:0}.panel-position-center{top:50%;left:50%;translate:-50% -50%}.panel-position-top{top:20px;left:50%;translate:-50% 0}.panel-position-bottom{bottom:20px;left:50%;translate:-50% 0}.panel-position-left{top:50%;left:20px;translate:0 -50%}.panel-position-right{top:50%;right:20px;translate:0 -50%}.panel-position-top-left{top:20px;left:20px}.panel-position-top-right{top:20px;right:20px}.panel-position-bottom-left{bottom:20px;left:20px}.panel-position-bottom-right{bottom:20px;right:20px}.panel-aura{box-shadow:0 0 0 0 var(--panel-theme-color, rgba(var(--color-primary-rgb, 59, 130, 246), 0.4));animation:panelAuraPulse 2s infinite}@keyframes panelAuraPulse{0%{box-shadow:0 0 0 0 var(--panel-theme-color, rgba(var(--color-primary-rgb, 59, 130, 246), 0.4))}70%{box-shadow:0 0 0 15px transparent}100%{box-shadow:0 0 0 0 transparent}}.panel-search-container{flex:1;max-width:300px;margin:0 20px}.search-inner{position:relative;display:flex;align-items:center;background:rgba(0, 0, 0, 0.05);border-radius:6px;padding:4px 8px;border:1px solid rgba(0, 0, 0, 0.05);transition:all 0.2s}.search-inner:focus-within{background:var(--bg-primary, #ffffff);border-color:var(--color-primary, #10b981);box-shadow:0 0 0 3px rgba(var(--color-primary-rgb, 59, 130, 246), 0.1)}.search-icon{width:14px;height:14px;opacity:0.5;margin-right:8px}.search-inner input{border:none;background:transparent;font-size:13px;width:100%;color:inherit;padding:2px 0;outline:none}.search-clear{background:none;border:none;color:var(--color-primary, #9ca3af);cursor:pointer;padding:0 4px;font-size:10px}.panel-elevation-0{box-shadow:none}.panel-elevation-1{box-shadow:0 1px 3px rgba(0, 0, 0, 0.12)}.panel-elevation-2{box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1)}.panel-elevation-3{box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1)}.panel-elevation-4{box-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1)}.panel-elevation-5{box-shadow:0 25px 50px -12px rgba(0, 0, 0, 0.25)}@media (prefers-color-scheme: dark){.panel-content::-webkit-scrollbar-thumb{background:rgba(255, 255, 255, 0.1)}.panel-content:hover::-webkit-scrollbar-thumb{background:rgba(255, 255, 255, 0.2)}}.panel-header-icon-inline{font-size:1.2em;line-height:1}'}},[769,"ui-panel",{panelId:[1,"panel-id"],width:[1],height:[1],maxWidth:[1,"max-width"],maxHeight:[1,"max-height"],showClose:[4,"show-close"],showSettings:[4,"show-settings"],panelTitle:[1,"panel-title"],panelSubtitle:[1,"panel-subtitle"],variant:[1],toggleable:[4],collapsed:[1540],loading:[4],noPadding:[4,"no-padding"],theme:[1],animationDuration:[1,"animation-duration"],animationType:[1,"animation-type"],badge:[8],badgeVariant:[1,"badge-variant"],icon:[1],keyboardNav:[4,"keyboard-nav"],aura:[4],enableSearch:[4,"enable-search"],searchPlaceholder:[1,"search-placeholder"],elevation:[2],minimizable:[4],maximizable:[4],minimized:[1540],maximized:[1540],isDraggable:[4,"is-draggable"],bounds:[1],edgeSnapping:[4,"edge-snapping"],snapThreshold:[2,"snap-threshold"],snapToGrid:[4,"snap-to-grid"],gridSize:[2,"grid-size"],dragPhysics:[4,"drag-physics"],resizable:[4],minWidth:[1,"min-width"],minHeight:[1,"min-height"],pinned:[1540],persistenceId:[1,"persistence-id"],overflow:[1],position:[1],x:[1],y:[1],modal:[4],dismissible:[4],glass:[4],backgroundColor:[1,"background-color"],isDragging:[32],isResizing:[32],currentWidth:[32],currentHeight:[32],isActive:[32],searchQuery:[32],dragPosition:[32],dragTilt:[32],showActionList:[32]}]),h=p,d=function(){"undefined"!=typeof customElements&&["ui-panel","ui-badge","ui-button","ui-icon","ui-input"].forEach((e=>{switch(e){case"ui-panel":customElements.get(n(e))||customElements.define(n(e),p);break;case"ui-badge":customElements.get(n(e))||s();break;case"ui-button":customElements.get(n(e))||r();break;case"ui-icon":customElements.get(n(e))||o();break;case"ui-input":customElements.get(n(e))||l()}}))};export{h as UiPanel,d as defineCustomElement}

package/dist/components/ui-pattern-input.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UiPatternInput extends Components.UiPatternInput, HTMLElement {}
+export const UiPatternInput: {
+    prototype: UiPatternInput;
+    new (): UiPatternInput;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ui-pattern-input.js

@@ -0,0 +1 @@
+import{proxyCustomElement as t,HTMLElement as e,createEvent as a,h as i,Host as r,transformTag as s}from"@stencil/core/internal/client";import{d as n,a as o}from"./badge.js";import{d as p}from"./icon.js";import{d as c}from"./input.js";const l=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.patternInputChange=a(this,"patternInputChange",7),this.patternInput=a(this,"patternInput",7),this.patternInputFocus=a(this,"patternInputFocus",7),this.patternInputBlur=a(this,"patternInputBlur",7),this.patternInputValidate=a(this,"patternInputValidate",7)}inputElement;debounceTimer;value="";pattern;validationRegex;placeholder;label;name;disabled=!1;required=!1;size="md";showValidation=!0;allowedChars;autoFormat=!0;maskChar="#";showCounter=!1;maxLength;inputType="text";helperText;errorMessage;successMessage;rtl=!1;clearable=!1;isValid=!0;isTouched=!1;isFocused=!1;patternInputChange;patternInput;patternInputFocus;patternInputBlur;patternInputValidate;valueChanged(t){this.validateInput(t)}componentDidLoad(){this.value&&this.validateInput(this.value)}getInputTypeRegex(){switch(this.inputType){case"numeric":return/^[0-9]*$/;case"alpha":return/^[a-zA-Z]*$/;case"alphanumeric":return/^[a-zA-Z0-9]*$/;case"custom":return this.allowedChars?RegExp(this.allowedChars):null;default:return null}}isCharAllowed(t,e){const a=this.getInputTypeRegex();return!a||a.test(e+t)}extractRawValue(t){return this.pattern&&this.autoFormat?t.replace(/[^\w\s]/g,"").replace(/\s+/g,""):t}formatValue(t){if(!this.pattern||!this.autoFormat)return t;let e="",a=0;for(let i=0;i<this.pattern.length&&a<t.length;i++){const r=this.pattern[i];r===this.maskChar?(e+=t[a],a++):e+=r}return e}validateInput(t){if(!t&&!this.required)return this.isValid=!0,!0;if(!t&&this.required)return this.isValid=!1,!1;if(this.validationRegex)try{const e=RegExp(this.validationRegex),a=this.extractRawValue(t);this.isValid=e.test(a)}catch(t){console.error("Invalid validation regex:",t),this.isValid=!1}else this.isValid=!0;return this.isValid}handleInput=t=>{const e=this.extractRawValue(t.detail),a=this.autoFormat?this.formatValue(e):e;this.value=a;const i=this.validateInput(a);this.patternInput.emit({value:e,formatted:a}),clearTimeout(this.debounceTimer),this.debounceTimer=setTimeout((()=>{this.patternInputChange.emit({value:e,formatted:a,isValid:i}),this.patternInputValidate.emit({isValid:i,value:e})}),300)};handleKeyPress=t=>{if(this.disabled)return;const e=t.key;if(e.length>1||t.ctrlKey||t.metaKey)return;const a=this.extractRawValue(this.value);this.isCharAllowed(e,a)?this.maxLength&&a.length>=this.maxLength&&t.preventDefault():t.preventDefault()};handlePaste=t=>{if(this.disabled)return;t.preventDefault();const e=t.clipboardData?.getData("text")||"";let a="";for(const t of e)this.isCharAllowed(t,a)&&(a+=t);if(this.maxLength){const t=this.extractRawValue(this.value);a=a.substring(0,this.maxLength-t.length)}const i=this.autoFormat?this.formatValue(a):a;this.value=i,this.inputElement&&(this.inputElement.value=i);const r=this.validateInput(i);this.patternInputChange.emit({value:a,formatted:i,isValid:r})};handleFocus=()=>{this.isFocused=!0,this.patternInputFocus.emit()};handleBlur=()=>{this.isFocused=!1,this.isTouched=!0,this.patternInputBlur.emit()};getValidationMessage(){return this.isTouched&&this.showValidation?!this.isValid&&this.errorMessage?this.errorMessage:this.isValid&&this.value&&this.successMessage?this.successMessage:null:null}getCharCount(){return{current:this.extractRawValue(this.value).length,max:this.maxLength}}render(){const t=this.getValidationMessage(),e=this.getCharCount(),a=this.isTouched&&!this.isValid&&this.showValidation,s=this.isTouched&&this.isValid&&this.value&&this.showValidation;return i(r,{key:"e6cafe1df0d19d9aa631bb08d2396af558b95673",class:{"pattern-input-host":!0,"pattern-input-disabled":this.disabled,"pattern-input-focused":this.isFocused,"pattern-input-error":a,"pattern-input-success":s}},i("div",{key:"9c5996bb1d80efc3ddedc692f3a2161acddd93f7",class:"pattern-input-wrapper",dir:this.rtl?"rtl":"ltr"},this.label&&i("label",{key:"ea22f82e44ce4631d82fbe3d6a9bbce3a68b848b",class:"pattern-input-label"},this.label,this.required&&i("span",{key:"71ee8e5c5d50ad9e1fe81df81385813cf157b911",class:"pattern-input-required"},"*")),i("div",{key:"a4e05ef18befa44931881b5baa3f91b983017456",class:{"pattern-input-container":!0,["pattern-input-"+this.size]:!0,"pattern-input-container-focused":this.isFocused,"pattern-input-container-error":a,"pattern-input-container-success":s}},i("slot",{key:"a498a913a37bf11470bad5c9043caa196f2b860f",name:"prefix"}),i("ui-input",{key:"e8b7202121a6a5a1c27f2e2f26783d11c6fa1013",ref:t=>this.inputElement=t,type:"text",class:"pattern-input-field",value:this.value,placeholder:this.placeholder||this.pattern,disabled:this.disabled,required:this.required,name:this.name,maxLength:this.pattern?.length||this.maxLength,onInputChange:this.handleInput,onInputKeydown:t=>this.handleKeyPress(t.detail),onPasteInternal:t=>this.handlePaste(t.detail),onFocusInternal:this.handleFocus,onInputBlur:this.handleBlur,ariaInvalid:a,ariaRequired:this.required,fullWidth:!0,size:this.size}),this.showValidation&&i("span",{key:"fce03bbf3acc80f7cc48e011725d07a4381a9c1b",class:"pattern-input-status"},a&&i("ui-icon",{key:"e2fb5bb51afc46e381ee29c071564d4226826bd6",name:"x-circle",library:"lucide",size:"1.2em",class:"status-icon status-error"}),s&&i("ui-icon",{key:"ec772884ed89b461b0659acd66bf7d5816200e20",name:"check-circle",library:"lucide",size:"1.2em",class:"status-icon status-success"})),this.clearable&&this.value&&!this.disabled&&i("ui-button",{key:"f461b44289a9f0bd6a6f215288746ef4697efb6d",variant:"ghost",class:"pattern-input-clear",onClick:()=>{this.value="",this.patternInputChange.emit({value:"",formatted:"",isValid:!this.required})},ariaLabel:"Clear input",icon:"x",iconLibrary:"lucide",iconOnly:!0,size:"sm"}),i("slot",{key:"453ce5f34c6384272b66d88a03e0ad897da4eada",name:"suffix"})),i("div",{key:"dc815745573df1a2edbaae6971543642e20e74ed",class:"pattern-input-footer"},i("div",{key:"58e39b130ffb2b694e462dca3909a1b0d8e2ebee",class:"pattern-input-messages"},this.helperText&&!t&&i("span",{key:"a0fb4ffbcc587ff0a5bab578e299df3653a2a19d",class:"helper-text"},this.helperText),t&&i("span",{key:"286eff6417e271b6a92423eb2c08a2247b96d6fb",class:{"validation-message":!0,"validation-error":a,"validation-success":s}},t)),this.showCounter&&i("span",{key:"99d1593a2012cb8c20d86c7de3cc4be8319c3aca",class:"char-counter"},e.current,e.max&&" / "+e.max))))}static get watchers(){return{value:[{valueChanged: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;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}.pattern-input-wrapper{display:flex;flex-direction:column;gap:8px}.pattern-input-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;opacity:0.65;color:var(--label-color, var(--text-secondary, #374151));margin-bottom:8px}.pattern-input-required{color:var(--color-danger, #ef4444);margin-left:4px}.pattern-input-container{position:relative;display:flex;align-items:center;background:var(--bg-primary, #ffffff);border:2px solid var(--border-strong, #d1d5db);border-radius:8px;transition:all 0.2s ease;padding:0 12px}.pattern-input-container:hover:not(.pattern-input-container-error){border-color:var(--color-primary, #9ca3af)}.pattern-input-container-focused{border-color:var(--color-primary-hover, #2563eb);box-shadow:0 0 0 3px rgba(var(--color-primary-rgb, 37, 99, 235), 0.1)}.pattern-input-container-error{border-color:var(--color-danger, #ef4444)}.pattern-input-container-error.pattern-input-container-focused{box-shadow:0 0 0 3px rgba(var(--color-danger-rgb, 239, 68, 68), 0.1)}.pattern-input-container-success{border-color:var(--color-success, #10b981)}.pattern-input-container-success.pattern-input-container-focused{box-shadow:0 0 0 3px rgba(var(--color-success-rgb, 16, 185, 129), 0.1)}.pattern-input-field{flex:1;border:none;outline:none;background:transparent;font-size:14px;color:var(--text-primary, #1f2937);font-family:"Courier New", monospace;letter-spacing:0.5px}.pattern-input-field::placeholder{color:var(--text-muted, #9ca3af);font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;letter-spacing:normal}.pattern-input-field:disabled{cursor:not-allowed;color:var(--text-muted, #9ca3af);background:var(--bg-primary, #f9fafb)}.pattern-input-sm{padding:6px 10px}.pattern-input-sm .pattern-input-field{font-size:13px;padding:2px 0}.pattern-input-md{padding:8px 12px}.pattern-input-md .pattern-input-field{font-size:14px;padding:4px 0}.pattern-input-lg{padding:10px 14px}.pattern-input-lg .pattern-input-field{font-size:16px;padding:6px 0}.pattern-input-status{display:flex;align-items:center;margin-left:8px}.status-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font-size:12px;font-weight:bold}.status-error{background:var(--bg-primary, #fef2f2);color:var(--color-danger, #ef4444)}.status-success{background:var(--bg-primary, #f0fdf4);color:var(--color-success, #10b981)}.pattern-input-footer{display:flex;justify-content:space-between;align-items:flex-start;min-height:20px}.pattern-input-messages{flex:1}.helper-text,.validation-message{display:block;font-size:12px;line-height:1.4}.helper-text{color:var(--text-muted, #6b7280)}.validation-error{color:var(--color-danger, #ef4444);font-weight:500}.validation-success{color:var(--color-success, #10b981);font-weight:500}.char-counter{font-size:12px;color:var(--text-muted, #6b7280);font-weight:500;white-space:nowrap;margin-left:12px}.pattern-input-disabled{opacity:0.6;cursor:not-allowed}.pattern-input-disabled .pattern-input-container{background:var(--bg-primary, #f9fafb);cursor:not-allowed}.pattern-input-field:focus-visible{outline:none}.status-icon{animation:statusFadeIn 0.2s ease}@keyframes statusFadeIn{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}.pattern-input-field[placeholder]{text-overflow:ellipsis}:host(.pattern-input-focused) .pattern-input-field{font-family:"Courier New", monospace}'}},[769,"ui-pattern-input",{value:[1537],pattern:[1],validationRegex:[1,"validation-regex"],placeholder:[1],label:[1],name:[1],disabled:[4],required:[4],size:[1],showValidation:[4,"show-validation"],allowedChars:[1,"allowed-chars"],autoFormat:[4,"auto-format"],maskChar:[1,"mask-char"],showCounter:[4,"show-counter"],maxLength:[2,"max-length"],inputType:[1,"input-type"],helperText:[1,"helper-text"],errorMessage:[1,"error-message"],successMessage:[1,"success-message"],rtl:[4],clearable:[4],isValid:[32],isTouched:[32],isFocused:[32]},void 0,{value:[{valueChanged:0}]}]),u=l,d=function(){"undefined"!=typeof customElements&&["ui-pattern-input","ui-badge","ui-button","ui-icon","ui-input"].forEach((t=>{switch(t){case"ui-pattern-input":customElements.get(s(t))||customElements.define(s(t),l);break;case"ui-badge":customElements.get(s(t))||o();break;case"ui-button":customElements.get(s(t))||n();break;case"ui-icon":customElements.get(s(t))||p();break;case"ui-input":customElements.get(s(t))||c()}}))};export{u as UiPatternInput,d as defineCustomElement}

package/dist/components/ui-popover.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UiPopover extends Components.UiPopover, HTMLElement {}
+export const UiPopover: {
+    prototype: UiPopover;
+    new (): UiPopover;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ui-popover.js

@@ -0,0 +1 @@
+import{proxyCustomElement as o,HTMLElement as e,createEvent as r,h as t,transformTag as i}from"@stencil/core/internal/client";import{s,d as a}from"./icon.js";import{F as p}from"./focus-trap.js";import{a as n,c as h}from"./dom.js";import{d,a as l}from"./badge.js";const c=o(class extends e{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.uiBeforeOpen=r(this,"uiBeforeOpen",7),this.uiOpen=r(this,"uiOpen",7),this.uiBeforeClose=r(this,"uiBeforeClose",7),this.uiClose=r(this,"uiClose",7),this.uiToggle=r(this,"uiToggle",7)}get element(){return this}heading="";target;content="";open=!1;disabled=!1;trigger="click";placement="top";showArrow=!0;width="280px";animation="scale";showCloseButton=!1;backdrop=!1;variant="light";popoverRole="dialog";showDelay=0;hideDelay=200;closeOnScroll=!1;closeOnEsc=!0;maxHeight="none";interactive=!0;loading=!1;skeleton=!1;offset=12;arrowSize=10;closeOnOutsideClick=!0;closeOnBlur=!0;matchTriggerWidth=!1;flip=!0;shift=!0;boundary="viewport";padding=24;fallbackPlacements;autoPlacement=!1;strategy="fixed";zIndex=21e3;uiBeforeOpen;uiOpen;uiBeforeClose;uiClose;uiToggle;currentPlacement="top";popoverStyles={};arrowStyles={};targetElement;popoverContent;arrowElement;hideTimeout;showTimeout;focusTrap;cleanupAutoUpdate;resizeObserver;latestSizeData={width:"",maxWidth:"",maxHeight:""};updateRetries=0;componentWillLoad(){this.currentPlacement=this.placement}componentDidLoad(){this.setupTrigger(),this.popoverContent=this.element.shadowRoot?.querySelector(".popover"),this.arrowElement=this.element.shadowRoot?.querySelector(".popover-arrow"),this.popoverContent&&(this.resizeObserver=new ResizeObserver((()=>{this.open&&this.updatePosition()})),this.resizeObserver.observe(this.popoverContent)),window.addEventListener("keydown",this.handleGlobalKeyDown)}componentDidUpdate(){this.open&&!this.cleanupAutoUpdate&&this.startAutoUpdate()}disconnectedCallback(){this.cleanup(),this.cleanupAutoUpdate&&this.cleanupAutoUpdate(),window.removeEventListener("keydown",this.handleGlobalKeyDown),this.focusTrap&&this.focusTrap.deactivate()}visibilityChanged(o){if(o){if(this.disabled)return void(this.open=!1);this.handleOpen()}else this.handleClose()}handleTriggerConfigChange(){this.cleanup(),this.setupTrigger()}handleOpen(){this.targetElement||this.setupTrigger(),this.popoverContent=this.element.shadowRoot?.querySelector(".popover"),this.arrowElement=this.element.shadowRoot?.querySelector(".popover-arrow"),this.popoverContent&&!this.resizeObserver&&(this.resizeObserver=new ResizeObserver((()=>{this.open&&this.updatePosition()})),this.resizeObserver.observe(this.popoverContent)),requestAnimationFrame((()=>{this.startAutoUpdate(),this.updateAriaAttributes(!0),this.closeOnOutsideClick&&setTimeout((()=>{document.addEventListener("click",this.handleOutsideClick)}),10),(this.backdrop||this.showCloseButton||"click"===this.trigger)&&requestAnimationFrame((()=>{this.initFocusTrap(),this.focusTrap&&this.focusTrap.activate()})),this.uiOpen.emit()}))}handleClose(){this.cleanupAutoUpdate&&(this.cleanupAutoUpdate(),this.cleanupAutoUpdate=void 0),document.removeEventListener("click",this.handleOutsideClick),this.focusTrap&&this.focusTrap.deactivate(),this.updateAriaAttributes(!1),this.uiClose.emit()}updateAriaAttributes(o){this.targetElement&&(this.targetElement.setAttribute("aria-expanded",""+o),this.targetElement.setAttribute("aria-haspopup","menu"===this.popoverRole?"menu":"true"))}initFocusTrap(){this.popoverContent&&(this.focusTrap||(this.focusTrap=new p(this.popoverContent,{initialFocus:this.popoverContent,returnFocus:this.targetElement,escapeDeactivates:!0,clickOutsideDeactivates:!this.backdrop})))}setupTrigger(){if(this.target&&(this.targetElement="string"==typeof this.target?document.querySelector(this.target):this.target),!this.targetElement){const o=this.element.shadowRoot?.querySelector('slot[name="trigger"]'),e=this.element.shadowRoot?.querySelector("slot:not([name])"),r=o=>{const e=o?.assignedElements();return e?.length>0?e[0]:null};this.targetElement=r(o)||r(e)}this.targetElement||(this.targetElement=this.element),this.targetElement&&"manual"!==this.trigger&&(["BUTTON","A","INPUT","SELECT","TEXTAREA"].includes(this.targetElement.tagName)||(this.targetElement.hasAttribute("role")||this.targetElement.setAttribute("role","button"),this.targetElement.hasAttribute("tabindex")||this.targetElement.setAttribute("tabindex","0")),"click"===this.trigger?(this.targetElement.addEventListener("click",this.handleTriggerClick),this.targetElement.addEventListener("keydown",this.handleTargetKeyDown)):"hover"===this.trigger?(this.targetElement.addEventListener("mouseenter",this.handleMouseEnter),this.targetElement.addEventListener("mouseleave",this.handleMouseLeave),this.targetElement.addEventListener("focusin",this.handleFocusIn),this.targetElement.addEventListener("focusout",this.handleFocusOut)):"focus"===this.trigger&&(this.targetElement.addEventListener("focusin",this.handleFocusIn),this.targetElement.addEventListener("focusout",this.handleFocusOut)),this.updateAriaAttributes(this.open))}handleTargetKeyDown=o=>{"Enter"!==o.key&&" "!==o.key||(o.preventDefault(),this.toggle())};cleanup(){this.targetElement&&(this.targetElement.removeEventListener("click",this.handleTriggerClick),this.targetElement.removeEventListener("keydown",this.handleTargetKeyDown),this.targetElement.removeEventListener("mouseenter",this.handleMouseEnter),this.targetElement.removeEventListener("mouseleave",this.handleMouseLeave),this.targetElement.removeEventListener("focusin",this.handleFocusIn),this.targetElement.removeEventListener("focusout",this.handleFocusOut),document.removeEventListener("click",this.handleOutsideClick),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=void 0))}handleTriggerClick=o=>{o.stopPropagation(),"click"===this.trigger&&this.toggle()};handleFocusIn=()=>{this.show()};handleFocusOut=()=>{this.hide()};handleOutsideClick=o=>{this.targetElement?.contains(o.target)||this.popoverContent?.contains(o.target)||this.open&&this.hide()};handleMouseEnter=()=>{this.disabled||(clearTimeout(this.hideTimeout),this.showDelay>0?this.showTimeout=setTimeout((()=>this.show()),this.showDelay):this.show())};handleMouseLeave=()=>{clearTimeout(this.showTimeout),this.hideTimeout=setTimeout((()=>this.hide()),this.hideDelay)};handlePopoverMouseEnter=()=>{"hover"===this.trigger&&this.interactive&&(clearTimeout(this.hideTimeout),clearTimeout(this.showTimeout))};handlePopoverMouseLeave=()=>{"hover"===this.trigger&&this.interactive&&this.handleMouseLeave()};handleGlobalKeyDown=o=>{this.open&&this.closeOnEsc&&"Escape"===o.key&&(o.stopPropagation(),this.hide())};startAutoUpdate(){this.cleanupAutoUpdate&&this.cleanupAutoUpdate(),this.popoverContent=this.element.shadowRoot?.querySelector(".popover"),this.showArrow&&(this.arrowElement=this.element.shadowRoot?.querySelector(".popover-arrow")),this.targetElement&&this.popoverContent&&(this.cleanupAutoUpdate=n(this.targetElement,this.popoverContent,(()=>this.updatePosition()),{animationFrame:!0}))}async updatePosition(){if(this.popoverContent||(this.popoverContent=this.element.shadowRoot?.querySelector(".popover")),this.showArrow&&!this.arrowElement&&(this.arrowElement=this.element.shadowRoot?.querySelector(".popover-arrow")),!this.open||!this.popoverContent||!this.targetElement)return void(this.updateRetries=0);if(0===this.popoverContent.offsetWidth&&this.updateRetries<5)return this.updateRetries++,void requestAnimationFrame((()=>this.updatePosition()));this.updateRetries=0;const{left:o,top:e,placement:r,availableHeight:t,availableWidth:i,arrowX:s,arrowY:a}=h(this.targetElement,{menuWidth:this.popoverContent.offsetWidth,menuHeight:this.popoverContent.offsetHeight,gap:this.offset,placement:this.autoPlacement?"auto":this.placement.split("-")[0],align:this.placement.includes("start")?"start":this.placement.includes("end")?"end":"center",padding:this.padding});this.currentPlacement=r,this.latestSizeData={width:this.width,maxWidth:Math.min(window.innerWidth-2*this.padding,i)+"px",maxHeight:"none"!==this.maxHeight?this.maxHeight:t+"px"};const p=this.latestSizeData;if(this.popoverStyles={position:this.strategy,left:o+"px",top:e+"px",width:this.matchTriggerWidth?this.targetElement.offsetWidth+"px":p.width||this.width,minWidth:"160px",maxWidth:p.maxWidth,maxHeight:p.maxHeight,visibility:"visible",opacity:"1"},this.showArrow&&this.arrowElement){const o=r,e={top:"bottom",right:"left",bottom:"top",left:"right"}[o],t=Math.round(this.arrowSize/2);this.arrowStyles={top:"",right:"",bottom:"",left:"",..."top"===o||"bottom"===o?{left:s+"px",transform:"translateX(-50%) rotate(45deg)"}:{top:a+"px",transform:"translateY(-50%) rotate(45deg)"},[e]:`-${t}px`}}}async reposition(){return this.updatePosition()}async computePlacement(){return this.currentPlacement}async show(){if(!this.disabled){if(this.uiBeforeOpen){const o=this.uiBeforeOpen.emit();if(o&&o.defaultPrevented)return}this.open=!0}}async hide(){if(this.uiBeforeClose){const o=this.uiBeforeClose.emit();if(o&&o.defaultPrevented)return}this.open=!1}async toggle(){this.disabled||(this.open?await this.hide():await this.show(),this.uiToggle&&this.uiToggle.emit({open:this.open}))}getPopoverStyle(){return{"--ui-popover-arrow-size":this.arrowSize+"px",zIndex:this.zIndex?""+this.zIndex:void 0}}render(){const o={popover:!0,"popover-visible":this.open,"popover-loading":this.loading,"popover-skeleton":this.skeleton,["popover-"+this.currentPlacement]:!0,["popover-"+this.variant]:!0,["popover-anim-"+this.animation]:!0},e={...this.getPopoverStyle(),...this.popoverStyles};return t("div",{key:"0f7778a7317e7842be132860b1dc61b611fa247d",class:"popover-wrapper"},t("div",{key:"2df4f3624d7335dbb9149b169778dfe288c4ff57",class:"popover-trigger"},t("slot",{key:"e0058a8f0c58e229df36e2ef47a402e4cf9e81dd",name:"trigger"}),t("slot",{key:"49c41549a41f352f0b94e6ae4dbde48435742ebc"})),this.backdrop&&this.open&&t("div",{key:"51851882bc67bd5a1a88d7a9f8bd44df99e3dee6",class:"popover-backdrop",onClick:()=>this.hide()}),this.open&&t("div",{key:"bd82cf9d153a7b228ac7696e407bb8a0d36ae942",class:o,style:e,onMouseEnter:()=>this.handlePopoverMouseEnter(),onMouseLeave:()=>this.handlePopoverMouseLeave(),role:this.popoverRole,"aria-modal":this.backdrop?"true":"false","aria-label":this.heading||void 0},this.showArrow&&t("div",{key:"545cb01f513e171e3d79a664ea57c5cbee6b5d07",class:"popover-arrow",style:this.arrowStyles}),t("div",{key:"bc8a9f93d49c2d1c201203728e731ef5a2850602",class:"popover-inner"},(this.heading||this.showCloseButton)&&t("div",{key:"9dee577314cc88f1bad7372006e593f34fa1a3fc",class:"popover-header"},this.heading&&t("div",{key:"7b0b3be1e8f6b0949969172eb74702034c661f6a",class:"popover-title"},this.heading),this.showCloseButton&&t("ui-button",{key:"d6dcc9b87b330797f6e29bf711df0504b386f5cb",variant:"ghost",size:"xxs",iconOnly:!0,class:"popover-close",onClick:()=>this.hide(),ariaLabel:"Close",icon:"x",iconLibrary:"lucide",iconSize:"14px"})),t("div",{key:"3639ca2119db19c98ce70fd11afe8ba4451cad2c",class:"popover-body",style:{maxHeight:this.maxHeight,overflowY:"none"!==this.maxHeight?"auto":void 0}},t("slot",{key:"43b5f442af61f83b9342a8a704a625155aabb0d3",name:"content"}),this.content&&t("div",{key:"1bd964f0709f66c335bfaaafe1bbe268554be279",innerHTML:s(this.content)})),t("slot",{key:"da80a35ef26a42ab2830e84ac81cdca2aef348f2",name:"footer"}))))}static get watchers(){return{open:[{visibilityChanged:0}],target:[{handleTriggerConfigChange:0}],trigger:[{handleTriggerConfigChange:0}]}}static get style(){return'@charset "UTF-8";.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}.popover-wrapper{position:relative;display:inline-block}.popover-trigger{display:inline-block;cursor:pointer}.popover-backdrop{position:fixed;inset-block-start:0;inset-inline-start:0;width:100vw;height:100vh;background:rgba(0, 0, 0, 0.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:19999;cursor:default;animation:backdropIn 0.18s ease}@keyframes backdropIn{from{opacity:0}to{opacity:1}}.popover{position:fixed;z-index:21000;background:var(--popover-bg, var(--bg-primary, #ffffff));border:1px solid var(--popover-border, var(--border-default, #e5e7eb));border-radius:var(--popover-radius, 10px);box-shadow:0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08);opacity:0;transition:opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);pointer-events:none;max-width:calc(100vw - 32px);word-wrap:break-word;overflow-wrap:break-word;overflow:visible;}.popover-visible{opacity:1;pointer-events:auto}.popover-inner{overflow:hidden;border-radius:inherit;max-height:inherit;}.popover-header{display:flex;align-items:center;justify-content:space-between;margin:0;padding-block:12px;padding-inline:16px;border-block-end:1px solid var(--popover-border, var(--border-default, #e5e7eb))}.popover-title{font-weight:700;font-size:14px;color:var(--popover-text-primary, var(--text-primary, #1f2937));margin:0;letter-spacing:-0.01em}.popover-close{background:transparent;border:none;color:var(--popover-text-secondary, var(--text-muted, #9ca3af));cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background 0.15s, color 0.15s;margin-inline-start:8px}.popover-close:hover{background:var(--popover-border, var(--border-default, #e5e7eb));color:var(--popover-text-primary, var(--text-primary, #1f2937))}.popover-body{padding-block:12px;padding-inline:16px;font-size:14px;color:var(--popover-text-secondary, var(--text-muted, #6b7280));line-height:1.6;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0, 0, 0, 0.15) transparent}.popover-body::-webkit-scrollbar{width:4px}.popover-body::-webkit-scrollbar-track{background:transparent}.popover-body::-webkit-scrollbar-thumb{background:rgba(0, 0, 0, 0.15);border-radius:2px}::slotted([slot=footer]){display:block;padding-block:10px;padding-inline:16px;border-block-start:1px solid var(--popover-border, var(--border-default, #e5e7eb));background:var(--popover-footer-bg, rgba(0, 0, 0, 0.02))}.popover-dark{--popover-bg:var(--bg-primary, #1f2937);--popover-border:var(--border-default, #374151);--popover-text-primary:var(--bg-primary, #f3f4f6);--popover-text-secondary:var(--bg-secondary, #d1d5db);--popover-footer-bg:rgba(255,255,255,0.04)}.popover-dark .popover-arrow{--popover-bg:var(--bg-primary, #1f2937);--popover-border:var(--border-default, #374151)}.popover-success{--popover-bg:var(--bg-primary, #f0fdf4);--popover-border:var(--color-success, #bbf7d0);--popover-text-primary:var(--color-success, #14532d);--popover-text-secondary:var(--color-success, #166534);--popover-footer-bg:rgba(var(--color-success-rgb, 16, 185, 129), 0.06)}.popover-success .popover-header{border-block-end-color:var(--color-success, #bbf7d0)}.popover-success .popover-title::before{content:"✓  ";color:var(--color-success, #16a34a)}.popover-warning{--popover-bg:var(--bg-primary, #fffbeb);--popover-border:var(--color-primary, #fde68a);--popover-text-primary:var(--color-danger, #78350f);--popover-text-secondary:var(--color-danger, #92400e);--popover-footer-bg:rgba(var(--color-warning-rgb, 245, 158, 11), 0.06)}.popover-warning .popover-header{border-block-end-color:var(--color-primary, #fde68a)}.popover-warning .popover-title::before{content:"⚠  ";color:var(--color-warning-hover, #d97706)}.popover-error{--popover-bg:var(--bg-primary, #fef2f2);--popover-border:var(--color-danger, #fecaca);--popover-text-primary:var(--color-danger, #7f1d1d);--popover-text-secondary:var(--color-danger, #991b1b);--popover-footer-bg:rgba(var(--color-danger-rgb, 239, 68, 68), 0.06)}.popover-error .popover-header{border-block-end-color:var(--color-danger, #fecaca)}.popover-error .popover-title::before{content:"✕  ";color:var(--color-danger-hover, #dc2626)}.popover-info{--popover-bg:var(--bg-primary, #eff6ff);--popover-border:var(--color-primary, #bfdbfe);--popover-text-primary:var(--color-primary, #1e3a8a);--popover-text-secondary:var(--color-primary, #1e40af);--popover-footer-bg:rgba(var(--color-primary-rgb, 59, 130, 246), 0.06)}.popover-info .popover-header{border-block-end-color:var(--color-primary, #bfdbfe)}.popover-info .popover-title::before{content:"ℹ  ";color:var(--color-primary-hover, #2563eb)}.popover-arrow{position:absolute;width:var(--ui-popover-arrow-size, 10px);height:var(--ui-popover-arrow-size, 10px);background:var(--popover-bg, var(--bg-primary, #ffffff));border:1px solid var(--popover-border, var(--border-default, #e5e7eb));transform:rotate(45deg);pointer-events:none;box-sizing:border-box;z-index:1;}.popover-top .popover-arrow,.popover-top-start .popover-arrow,.popover-top-end .popover-arrow{border-top:none;border-left:none;}.popover-bottom .popover-arrow,.popover-bottom-start .popover-arrow,.popover-bottom-end .popover-arrow{border-right:none;border-bottom:none;}.popover-left .popover-arrow,.popover-left-start .popover-arrow,.popover-left-end .popover-arrow{border-left:none;border-bottom:none;}.popover-right .popover-arrow,.popover-right-start .popover-arrow,.popover-right-end .popover-arrow{border-top:none;border-right:none;}.popover-anim-scale{transform:scale(0.92);transform-origin:center top}.popover-anim-scale.popover-bottom,.popover-anim-scale.popover-bottom-start,.popover-anim-scale.popover-bottom-end{transform-origin:center bottom}.popover-anim-scale.popover-left,.popover-anim-scale.popover-left-start,.popover-anim-scale.popover-left-end{transform-origin:right center}.popover-anim-scale.popover-right,.popover-anim-scale.popover-right-start,.popover-anim-scale.popover-right-end{transform-origin:left center}.popover-anim-scale.popover-visible{transform:scale(1)}.popover-anim-slide.popover-top,.popover-anim-slide.popover-top-start,.popover-anim-slide.popover-top-end{transform:translateY(8px)}.popover-anim-slide.popover-bottom,.popover-anim-slide.popover-bottom-start,.popover-anim-slide.popover-bottom-end{transform:translateY(-8px)}.popover-anim-slide.popover-left,.popover-anim-slide.popover-left-start,.popover-anim-slide.popover-left-end{transform:translateX(8px)}.popover-anim-slide.popover-right,.popover-anim-slide.popover-right-start,.popover-anim-slide.popover-right-end{transform:translateX(-8px)}.popover-anim-slide.popover-visible{transform:translate(0, 0)}.popover-skeleton .popover-body{display:flex;flex-direction:column;gap:10px;padding:16px}.popover-skeleton .popover-body::before,.popover-skeleton .popover-body::after{content:"";display:block;height:12px;border-radius:6px;background:linear-gradient(90deg, var(--bg-primary, #e5e7eb) 25%, var(--bg-secondary, #f3f4f6) 50%, var(--bg-primary, #e5e7eb) 75%);background-size:200% 100%;animation:skeletonShimmer 1.4s infinite}.popover-skeleton .popover-body::after{width:65%}@keyframes skeletonShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}@media (prefers-reduced-motion: reduce){.popover{transition:none;transform:none !important;opacity:1 !important;display:none}.popover-visible{display:block}}'}},[769,"ui-popover",{heading:[1],target:[1],content:[1],open:[1028],disabled:[4],trigger:[1],placement:[1],showArrow:[4,"show-arrow"],width:[1],animation:[1],showCloseButton:[4,"show-close-button"],backdrop:[4],variant:[1],popoverRole:[1,"popover-role"],showDelay:[2,"show-delay"],hideDelay:[2,"hide-delay"],closeOnScroll:[4,"close-on-scroll"],closeOnEsc:[4,"close-on-esc"],maxHeight:[1,"max-height"],interactive:[4],loading:[4],skeleton:[4],offset:[2],arrowSize:[2,"arrow-size"],closeOnOutsideClick:[4,"close-on-outside-click"],closeOnBlur:[4,"close-on-blur"],matchTriggerWidth:[4,"match-trigger-width"],flip:[4],shift:[4],boundary:[1],padding:[2],fallbackPlacements:[8,"fallback-placements"],autoPlacement:[4,"auto-placement"],strategy:[1],zIndex:[2,"z-index"],currentPlacement:[32],popoverStyles:[32],arrowStyles:[32],updatePosition:[64],reposition:[64],computePlacement:[64],show:[64],hide:[64],toggle:[64]},void 0,{open:[{visibilityChanged:0}],target:[{handleTriggerConfigChange:0}],trigger:[{handleTriggerConfigChange:0}]}]),v=c,b=function(){"undefined"!=typeof customElements&&["ui-popover","ui-badge","ui-button","ui-icon"].forEach((o=>{switch(o){case"ui-popover":customElements.get(i(o))||customElements.define(i(o),c);break;case"ui-badge":customElements.get(i(o))||l();break;case"ui-button":customElements.get(i(o))||d();break;case"ui-icon":customElements.get(i(o))||a()}}))};export{v as UiPopover,b as defineCustomElement}

package/dist/components/ui-progress.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UiProgress extends Components.UiProgress, HTMLElement {}
+export const UiProgress: {
+    prototype: UiProgress;
+    new (): UiProgress;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;