atomicuilibrary 0.0.1

package/dist/components/ui-anchor.js

@@ -0,0 +1 @@
+import{proxyCustomElement as t,HTMLElement as i,createEvent as e,h as o,transformTag as r}from"@stencil/core/internal/client";import{d as a}from"./icon.js";const n=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.anchorClick=e(this,"anchorClick",7),this.anchorItemClick=e(this,"anchorItemClick",7),this.activeItemChange=e(this,"activeItemChange",7),this.navigate=e(this,"navigate",7),this.affixChange=e(this,"affixChange",7),this.progressChange=e(this,"progressChange",7),this.expandChange=e(this,"expandChange",7)}get el(){return this}items=[];links="";mode="vertical";orientation="vertical";position="left";activeItem="";activeLink="";scrollOffset=80;routerNavigate=!1;loadIcons=!0;sticky=!0;scrollContainer="";smoothScroll=!0;showTooltip=!1;showIndicator=!0;observerRootMargin="";useSlot=!1;showNumbers=!1;numberStyle="numeric";size="md";theme="light";activeColor="#18ff3e";alignment="left";updateHash=!1;affix=!1;affixOffset=20;indicator="line";autoGenContainer="";showProgress=!1;arrowNavigation=!0;collapsible=!1;defaultExpanded=!0;derivedItems=[];currentActive="";isAffixed=!1;scrollProgress=0;expandedItems=new Set;indicatorStyle={};_observer=null;_onWindowScroll=null;_onContainerScroll=null;_onHashChange=null;linkElements=new Map;scrollTimeout;anchorClick;anchorItemClick;activeItemChange;navigate;affixChange;progressChange;expandChange;componentWillLoad(){this.autoGenContainer?this.generateLinksFromContainer():this.parseItems(),this.currentActive=this.activeItem||this.activeLink,this.defaultExpanded&&this.expandAll()}itemsChanged(){this.autoGenContainer||this.parseItems()}handleAutoGenContainerChange(){this.generateLinksFromContainer()}parseItems(){const t=this.items;if(t&&t.length>0){if("string"==typeof t)try{this.derivedItems=JSON.parse(t)}catch{this.derivedItems=[]}else this.derivedItems=[...t];return}if(this.links&&this.links.length>0){try{this.derivedItems=JSON.parse(this.links)}catch{this.derivedItems=[]}return}const i=Array.from(this.el.querySelectorAll("ui-anchor-item"));i.length>0&&(this.derivedItems=i.map((t=>({id:t.getAttribute("target")||t.getAttribute("id")||"",label:t.getAttribute("label")||"",icon:t.getAttribute("icon")??void 0,iconLibrary:t.getAttribute("iconLibrary")||t.getAttribute("icon-library"),disabled:t.hasAttribute("disabled"),badge:t.getAttribute("badge")??void 0,tooltip:t.getAttribute("tooltip")??void 0,href:t.getAttribute("href")??void 0,target:t.getAttribute("target")??void 0,rel:t.getAttribute("rel")??void 0}))))}generateLinksFromContainer(){if(!this.autoGenContainer)return;const t=document.querySelector(this.autoGenContainer);if(!t)return;const i=t.querySelectorAll("h1, h2, h3, h4");this.derivedItems=Array.from(i).map(((t,i)=>(t.id||(t.id="auto-anchor-"+i),{id:"link-"+i,label:t.innerText??t.textContent??"",target:t.id??""})))}componentDidLoad(){this.setupScrollSpy(),this.setupAffix(),this.setupProgress(),this.updateHash&&this.setupHashNavigation(),setTimeout((()=>this.updateIndicatorPosition(this.currentActive)),100)}disconnectedCallback(){if(this._observer)try{this._observer.disconnect()}catch(t){}this._onWindowScroll&&window.removeEventListener("scroll",this._onWindowScroll),this._onContainerScroll&&this.scrollContainer&&document.querySelector(this.scrollContainer)?.removeEventListener("scroll",this._onContainerScroll),this._onHashChange&&window.removeEventListener("hashchange",this._onHashChange),this.scrollTimeout&&clearTimeout(this.scrollTimeout)}getParsedItems(){return this.derivedItems}flattenItems(t){return t.reduce(((t,i)=>(t.push(i),i.children&&t.push(...this.flattenItems(i.children)),t)),[])}expandAll(){this.flattenItems(this.getParsedItems()).forEach((t=>{t.children&&t.children.length>0&&this.expandedItems.add(t.id)})),this.expandedItems=new Set(this.expandedItems)}setupAffix(){if(!this.affix)return;const t=()=>{const t=(window.pageYOffset||document.documentElement.scrollTop)>this.affixOffset;t!==this.isAffixed&&(this.isAffixed=t,this.affixChange.emit(this.isAffixed))};window.addEventListener("scroll",t),this._onWindowScroll=t,t()}setupProgress(){if(!this.showProgress)return;const t=()=>{this.scrollTimeout&&clearTimeout(this.scrollTimeout),this.scrollTimeout=setTimeout((()=>{const t=this.scrollContainer?document.querySelector(this.scrollContainer):null;if(t){const i=t.scrollHeight-t.clientHeight;this.scrollProgress=i>0?t.scrollTop/i*100:0}else{const t=window.pageYOffset||document.documentElement.scrollTop,i=document.documentElement.scrollHeight-window.innerHeight;this.scrollProgress=i>0?t/i*100:0}this.progressChange.emit(this.scrollProgress)}),50)};this.scrollContainer?(document.querySelector(this.scrollContainer)?.addEventListener("scroll",t),this._onContainerScroll=t):(window.addEventListener("scroll",t),this._onWindowScroll||(this._onWindowScroll=t)),t()}setupHashNavigation(){this._onHashChange=()=>{const t=window.location.hash.substring(1);t&&this.scrollToSection(t)},window.addEventListener("hashchange",this._onHashChange)}setupScrollSpy(){const t=this.flattenItems(this.getParsedItems());let i=this.scrollContainer?document.querySelector(this.scrollContainer):null;if(!i&&this.scrollContainer){const t=this.el.parentElement?.closest(".examples-split-layout, .viewport-pane");t&&(i=t.querySelector(this.scrollContainer))}const e=new IntersectionObserver((i=>{i.forEach((i=>{if(i.isIntersecting){const e=i.target.getAttribute("id"),o=t.find((t=>t.target===e||t.id===e));e&&o&&this.setActiveState(o.id)}}))}),{root:i,rootMargin:this.observerRootMargin||`-${this.scrollOffset}px 0px -50% 0px`,threshold:0});t.forEach((t=>{const o=t.target||t.id;if(!o)return;let r=document.getElementById(o);!r&&i&&(r=i.querySelector("#"+o)),r&&e.observe(r)})),this._observer=e}setActiveState(t){if(this.currentActive===t)return;this.currentActive=t,this.activeItem=t,this.activeLink=t;const i=this.flattenItems(this.getParsedItems()).find((i=>i.id===t));i&&this.activeItemChange.emit({id:i.id,label:i.label??""}),this.updateIndicatorPosition(t),this.collapsible&&this.ensureVisible(t,this.getParsedItems())}ensureVisible(t,i,e=null){for(const o of i){if(o.id===t)return e&&!this.expandedItems.has(e)&&this.toggleExpand(e,!0),!0;if(o.children&&this.ensureVisible(t,o.children,o.id))return e&&!this.expandedItems.has(e)&&this.toggleExpand(e,!0),!0}return!1}scrollToSection(t){const i=document.getElementById(t)||document.querySelector("#"+t);if(!i)return;let e=this.scrollContainer?document.querySelector(this.scrollContainer):null;if(!e&&this.scrollContainer){const t=this.el.parentElement?.closest(".examples-split-layout, .viewport-pane");t&&(e=t.querySelector(this.scrollContainer))}if(e){const t=e.getBoundingClientRect(),o=i.getBoundingClientRect();e.scrollTo({top:e.scrollTop+(o.top-t.top)-this.scrollOffset,behavior:this.smoothScroll?"smooth":"auto"})}else{const t=i.getBoundingClientRect().top+window.pageYOffset-this.scrollOffset;window.scrollTo({top:t,behavior:this.smoothScroll?"smooth":"auto"})}this.updateHash&&history.pushState(null,"","#"+t)}updateIndicatorPosition(t){this.showIndicator&&t&&requestAnimationFrame((()=>{const i=this.linkElements.get(t);if(!i)return;const e=this.el.shadowRoot?.querySelector(".anchor-list");if(!e)return;const o=e.getBoundingClientRect(),r=i.getBoundingClientRect();this.indicatorStyle="vertical"===(this.orientation||this.mode)?{transform:`translateY(${r.top-o.top}px)`,height:r.height+"px"}:{transform:`translateX(${r.left-o.left}px)`,width:r.width+"px"}}))}handleItemClick=(t,i)=>{if(i.metaKey||i.ctrlKey||i.shiftKey||i.altKey)return this.anchorItemClick.emit({id:t.id,label:t.label??""}),void this.anchorClick.emit({linkId:t.id,targetId:t.target||""});if(t.disabled)return;if(i.preventDefault(),i.stopPropagation(),this.anchorItemClick.emit({id:t.id,label:t.label??""}),this.anchorClick.emit({linkId:t.id,targetId:t.target||""}),this.setActiveState(t.id),t.href&&!t.href.startsWith("#")&&this.routerNavigate)return void this.navigate.emit({href:t.href,target:t.target,rel:t.rel});const e=t.href&&t.href.startsWith("#")?t.href.substring(1):t.target||t.id;this.scrollToSection(e)};toggleExpand(t,i){const e=new Set(this.expandedItems),o=void 0!==i?i:!e.has(t);o?e.add(t):e.delete(t),this.expandedItems=e,this.expandChange.emit({id:t,expanded:o})}handleKeyDown=(t,i,e)=>{if(t.disabled)return;const o=i.key;if("Enter"!==o&&" "!==o){if(this.collapsible&&(t.children?.length??0)>0){if("ArrowRight"===o&&!this.expandedItems.has(t.id))return this.toggleExpand(t.id,!0),void i.preventDefault();if("ArrowLeft"===o&&this.expandedItems.has(t.id))return this.toggleExpand(t.id,!1),void i.preventDefault()}if(this.arrowNavigation&&("ArrowDown"===o||"ArrowUp"===o)){i.preventDefault();const t=(this.el.shadowRoot?.querySelectorAll(".anchor-item")??[])["ArrowDown"===o?e+1:e-1];t?.focus()}}else{i.preventDefault(),this.setActiveState(t.id);const e=t.href&&t.href.startsWith("#")?t.href.substring(1):t.target||t.id;this.scrollToSection(e)}};watchActiveItem(t){if(t&&t!==this.currentActive){this.setActiveState(t);try{this.scrollToSection(t)}catch(t){}}}async setActive(t){t&&(this.setActiveState(t),this.scrollToSection(t))}getNumberPrefix(t,i=0,e=""){const o=t+1;let r;switch(this.numberStyle){case"decimal":r=(""+o).padStart(2,"0");break;case"alpha":r=String.fromCharCode(97+t);break;case"roman":r=["i","ii","iii","iv","v","vi","vii","viii","ix","x"][t]||o+"";break;default:r=o+""}return i>0&&e?`${e.endsWith(".")?e.slice(0,-1):e}.${r}.`:r+"."}renderItem(t,i,e=0,r="",a){const n=t.children&&t.children.length>0,s=this.expandedItems.has(t.id),h=this.showNumbers?this.getNumberPrefix(i,e,r):"",c=a.val++,l=this.currentActive===t.id,d=this.orientation||this.mode,p=n&&this.collapsible&&"vertical"===d?o("span",{class:"anchor-toggle "+(s?"expanded":""),onClick:i=>{i.stopPropagation(),this.toggleExpand(t.id)}},o("ui-icon",{name:"chevron-right",library:"fontawesome",size:"12px"})):null,m=o("div",{style:{display:"contents"}},this.showNumbers&&o("span",{class:"anchor-number"},h),p,t.icon&&o("span",{class:"anchor-icon"},o("ui-icon",{name:t.icon,library:t.iconLibrary||"lucide",size:"1.2em"})),"dot"===this.indicator?o("span",{class:"dot-marker"}):o("span",{class:"anchor-label"},t.label),t.badge&&o("span",{class:"anchor-badge"},t.badge));return o("div",{class:"anchor-item-wrapper"},o("li",{ref:i=>{i&&this.linkElements.set(t.id,i)},class:{"anchor-item":!0,active:l,disabled:!!t.disabled,"has-children":!!n,["level-"+e]:!0,"dot-type":"dot"===this.indicator},"data-id":t.id,title:"dot"===this.indicator?t.tooltip||t.label:this.showTooltip?t.tooltip:void 0,tabindex:t.disabled?-1:0,role:"button","aria-current":l?"true":"false","aria-disabled":t.disabled?"true":"false","aria-expanded":n?s+"":void 0,style:{paddingLeft:"vertical"===d?16+16*e+"px":void 0},onClick:i=>this.handleItemClick(t,i),onKeyDown:i=>this.handleKeyDown(t,i,c)},this.useSlot?o("slot",{name:"item-"+t.id},m):m),n&&s&&o("ul",{class:"anchor-sublist"},t.children.map(((t,i)=>this.renderItem(t,i,e+1,h,a)))))}render(){const t=this.getParsedItems(),i={val:0},e=this.orientation||this.mode,r=this.affix&&this.isAffixed?{position:"fixed",top:this.affixOffset+"px",zIndex:"1000"}:{};return o("nav",{key:"85e96011d2a9daae2ca20941ee3ab496961d1e6b",class:{anchor:!0,["anchor--"+e]:!0,["anchor--"+this.position]:!0,["anchor--"+this.size]:!0,["anchor--"+this.theme]:!0,["anchor--align-"+this.alignment]:!0,["anchor-type-"+this.indicator]:!0,"anchor--sticky":this.sticky,"anchor--affixed":this.affix&&this.isAffixed,"anchor--with-indicator":this.showIndicator,"anchor--with-numbers":this.showNumbers,"show-progress":this.showProgress},style:{"--anchor-active-color":this.activeColor,...r}},this.showProgress&&o("div",{key:"02805460ccef5d7c0ffc52d00de050d91fb1bd78",class:"anchor-progress"},o("div",{key:"dfa97ee018532f56e8d9c078f8980b3e52dd75a9",class:"anchor-progress-bar",style:{width:"horizontal"===e?this.scrollProgress+"%":"100%",height:"vertical"===e?this.scrollProgress+"%":"100%"}})),o("ul",{key:"d1ffe5c5041220ea11909ed67f52062bc5386953",class:"anchor-list",style:{position:"relative"}},t.map(((t,e)=>this.renderItem(t,e,0,"",i))),this.showIndicator&&o("div",{key:"40f921ba4343544049edb8589fce02f1e2e8f64d",class:"anchor-indicator",style:this.indicatorStyle})))}static get watchers(){return{items:[{itemsChanged:0}],links:[{itemsChanged:0}],autoGenContainer:[{handleAutoGenContainerChange:0}],activeItem:[{watchActiveItem:0}],activeLink:[{watchActiveItem: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}.anchor{display:flex;padding:16px;background:var(--bg-primary, #ffffff);border-radius:8px;box-shadow:0 1px 3px rgba(0, 0, 0, 0.1);position:relative;--anchor-active-color:var(--color-primary-hover, #2563eb);transition:all 0.3s ease}.anchor--sm{padding:8px}.anchor--sm .anchor-item{padding:6px 12px;font-size:0.75rem}.anchor--md{padding:16px}.anchor--md .anchor-item{padding:12px 16px;font-size:0.875rem}.anchor--lg{padding:20px}.anchor--lg .anchor-item{padding:16px 20px;font-size:1rem}.anchor--dark{background:var(--bg-primary, #1f2937)}.anchor--dark .anchor-item{color:var(--text-muted, #9ca3af)}.anchor--dark .anchor-item:hover:not(.disabled){background:var(--color-primary, #374151);color:var(--text-standard, #f3f4f6)}.anchor--dark .anchor-item.active{background:var(--color-primary, #1e40af);color:var(--text-standard, #dbeafe)}.anchor--custom{background:var(--anchor-bg, var(--bg-primary, #ffffff))}.anchor--custom .anchor-item{color:var(--anchor-text, var(--text-muted, #6b7280))}.anchor--custom .anchor-item:hover:not(.disabled){background:var(--anchor-hover-bg, var(--bg-secondary, #f3f4f6));color:var(--anchor-hover-text, var(--text-primary, #111827))}.anchor--custom .anchor-item.active{background:var(--anchor-active-bg, #eff6ff);color:var(--anchor-active-color)}.anchor--horizontal.anchor--align-center{justify-content:center}.anchor--horizontal.anchor--align-right{justify-content:flex-end}.anchor--horizontal.anchor--align-left{justify-content:flex-start}.anchor--vertical.anchor--align-center .anchor-item{justify-content:center;text-align:center}.anchor--vertical.anchor--align-right .anchor-item{justify-content:flex-end;text-align:right;flex-direction:row-reverse}.anchor--vertical.anchor--align-right .anchor-indicator{left:auto;right:0;border-radius:2px 0 0 2px}.anchor--affixed{position:fixed !important;animation:slideDown 0.3s ease}@keyframes slideDown{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.anchor-progress{position:absolute;top:0;left:0;right:0;height:3px;background:var(--bg-primary, #e5e7eb);border-radius:8px 8px 0 0;overflow:hidden}.anchor-progress-bar{height:100%;background:var(--anchor-active-color);transition:width 0.1s ease}.anchor--vertical .anchor-progress{top:0;left:0;bottom:0;right:auto;width:3px;height:auto;border-radius:8px 0 0 8px}.anchor--vertical .anchor-progress-bar{width:100%;height:0;transition:height 0.1s ease}.anchor-indicator{position:absolute;background:var(--anchor-active-color);transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);border-radius:2px;pointer-events:none;z-index:2}.anchor--vertical.anchor--with-indicator .anchor-indicator{left:-16px;width:3px;height:24px}.anchor--horizontal.anchor--with-indicator .anchor-indicator{bottom:-16px;height:3px;width:60px}.anchor-type-dot .anchor-indicator{background:var(--anchor-active-color);width:8px;height:8px;border-radius:50%;transition:transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);transform-origin:center;box-shadow:0 0 0 4px rgba(var(--color-primary-rgb, 59, 130, 246), 0.2)}.anchor-type-dot.anchor--vertical .anchor-indicator{left:-13px}.anchor-type-dot.anchor--horizontal .anchor-indicator{bottom:-19px}.anchor--sticky{position:sticky}.anchor--vertical.anchor--left{top:80px;left:0}.anchor--vertical.anchor--right{top:80px;right:0}.anchor--horizontal.anchor--top{top:0;left:0;right:0;z-index:100}.anchor--horizontal.anchor--bottom{bottom:0;left:0;right:0;z-index:100}.anchor-list{list-style:none;margin:0;padding:0;display:flex;gap:8px;width:100%}.anchor--vertical .anchor-list{flex-direction:column}.anchor--horizontal .anchor-list{flex-direction:row;flex-wrap:wrap}.anchor-item{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;border-radius:6px;transition:all 0.2s ease;color:var(--text-muted, #6b7280);font-size:0.875rem;font-weight:500;position:relative;user-select:none;outline:none}.anchor-item:hover:not(.disabled){background:var(--bg-secondary, #f3f4f6);color:var(--text-primary, #111827)}.anchor-item:focus-visible{box-shadow:0 0 0 2px var(--anchor-active-color);outline:2px solid transparent}.anchor-item.active{color:var(--anchor-active-color);font-weight:600}.anchor-item.disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}.anchor-item.dot-type{gap:12px}.dot-marker{width:8px;height:8px;border-radius:50%;background-color:var(--bg-secondary, #d1d5db);transition:all 0.3s ease;flex-shrink:0}.anchor-item.dot-type:hover .dot-marker{background-color:var(--text-muted, #9ca3af)}.anchor--horizontal .anchor-item.dot-type{flex-direction:column;align-items:center}.anchor-number{font-size:0.75rem;font-weight:600;color:inherit;opacity:0.7;min-width:24px}.anchor--with-numbers .anchor-item{gap:8px}.anchor-icon{font-size:1rem;display:flex;align-items:center;justify-content:center}.anchor-label{white-space:nowrap}.anchor--horizontal .anchor-item:not(.dot-type){flex-direction:column;gap:4px;text-align:center;min-width:80px}.anchor-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;background:var(--color-danger, #ef4444);color:var(--text-standard, #ffffff);font-size:0.75rem;font-weight:600;border-radius:10px;line-height:1}.anchor-item.active .anchor-badge{background:var(--anchor-active-color)}.anchor-sublist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}.anchor-toggle{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:0.75rem;color:var(--text-muted, #9ca3af);transition:transform 0.2s ease;margin-right:-4px;border-radius:4px}.anchor-toggle:hover{background:var(--bg-primary, #e5e7eb);color:var(--text-secondary, #4b5563)}.anchor-toggle.expanded{transform:rotate(90deg)}.anchor-item.has-children{font-weight:500}.anchor--vertical .anchor-item{position:relative}.anchor--vertical .anchor-indicator{transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), height 0.3s ease, top 0.3s ease}"}},[769,"ui-anchor",{items:[1],links:[1],mode:[1],orientation:[1],position:[1],activeItem:[1025,"active-item"],activeLink:[1025,"active-link"],scrollOffset:[2,"scroll-offset"],routerNavigate:[4,"router-navigate"],loadIcons:[4,"load-icons"],sticky:[4],scrollContainer:[1,"scroll-container"],smoothScroll:[4,"smooth-scroll"],showTooltip:[4,"show-tooltip"],showIndicator:[4,"show-indicator"],observerRootMargin:[1,"observer-root-margin"],useSlot:[4,"use-slot"],showNumbers:[4,"show-numbers"],numberStyle:[1,"number-style"],size:[1],theme:[1],activeColor:[1,"active-color"],alignment:[1],updateHash:[4,"update-hash"],affix:[4],affixOffset:[2,"affix-offset"],indicator:[1],autoGenContainer:[1,"auto-gen-container"],showProgress:[4,"show-progress"],arrowNavigation:[4,"arrow-navigation"],collapsible:[4],defaultExpanded:[4,"default-expanded"],derivedItems:[32],currentActive:[32],isAffixed:[32],scrollProgress:[32],expandedItems:[32],indicatorStyle:[32],setActive:[64]},void 0,{items:[{itemsChanged:0}],links:[{itemsChanged:0}],autoGenContainer:[{handleAutoGenContainerChange:0}],activeItem:[{watchActiveItem:0}],activeLink:[{watchActiveItem:0}]}]),s=n,h=function(){"undefined"!=typeof customElements&&["ui-anchor","ui-icon"].forEach((t=>{switch(t){case"ui-anchor":customElements.get(r(t))||customElements.define(r(t),n);break;case"ui-icon":customElements.get(r(t))||a()}}))};export{s as UiAnchor,h as defineCustomElement}

package/dist/components/ui-animate-on-scroll.d.ts

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

package/dist/components/ui-animate-on-scroll.js

@@ -0,0 +1 @@
+import{proxyCustomElement as t,HTMLElement as a,createEvent as e,h as o,Host as r,transformTag as i}from"@stencil/core/internal/client";const n=t(class extends a{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.scrollAnimationStart=e(this,"scrollAnimationStart",7),this.scrollAnimationEnd=e(this,"scrollAnimationEnd",7)}get el(){return this}enterClass="fade-in";leaveClass="";threshold=.5;rootMargin="0px";once=!1;duration=1e3;delay=0;easing="ease";anchor="";root="";blurAmount="";perspective="";stagger=0;transformOrigin="center";distance="50px";mirror=!1;respectReducedMotion=!0;scrub=!1;scrollAnimationStart;scrollAnimationEnd;isVisible=!1;hasAnimated=!1;observer;contentEl;rafId;animationTimer;componentDidLoad(){this.setupObserver(),this.scrub&&this.startScrubLoop()}disconnectedCallback(){this.observer&&this.observer.disconnect(),this.rafId&&cancelAnimationFrame(this.rafId),clearTimeout(this.animationTimer)}headerScrubChange(t){t?this.startScrubLoop():(this.rafId&&cancelAnimationFrame(this.rafId),this.contentEl&&this.contentEl.style.removeProperty("--scroll-progress"))}startScrubLoop(){const t=()=>{this.isVisible&&this.contentEl&&this.calculateScrollProgress(),this.rafId=requestAnimationFrame(t)};t()}currentProgress=0;targetProgress=0;calculateScrollProgress(){const t=(this.anchor&&document.querySelector(this.anchor)||this.el).getBoundingClientRect(),a=window.innerHeight;this.targetProgress=Math.max(0,Math.min(1,(a-t.top)/(a+t.height))),this.currentProgress+=.1*(this.targetProgress-this.currentProgress),this.contentEl&&this.contentEl.style.setProperty("--scroll-progress",this.currentProgress.toFixed(4))}setupObserver(){const t={root:this.root?document.querySelector(this.root):null,rootMargin:this.rootMargin,threshold:this.scrub?0:this.threshold};this.observer=new IntersectionObserver((t=>{const a=window.matchMedia("(prefers-reduced-motion: reduce)").matches;if(this.respectReducedMotion&&a)return this.isVisible=!0,void(this.hasAnimated=!0);t.forEach((t=>{if(t.isIntersecting)this.once&&this.hasAnimated||(this.isVisible=!0,this.hasAnimated=!0,this.scrollAnimationStart.emit(),this.contentEl&&(this.stagger>0&&this.contentEl.children.length>0?Array.from(this.contentEl.children).forEach(((t,a)=>{const e=t;e.style.setProperty("--animation-delay",this.delay+a*this.stagger+"ms"),e.style.setProperty("--animation-duration",this.duration+"ms"),e.style.setProperty("--animation-easing",this.easing),this.enterClass.split(" ").filter((t=>t.trim())).forEach((a=>t.classList.add(a))),this.mirror&&this.leaveClass.split(" ").filter((t=>t.trim())).forEach((a=>t.classList.remove(a)))})):(this.enterClass.split(" ").filter((t=>t.trim())).forEach((t=>this.contentEl.classList.add(t))),(this.leaveClass||this.mirror)&&this.leaveClass.split(" ").filter((t=>t.trim())).forEach((t=>this.contentEl.classList.remove(t))))),this.scrub||(this.animationTimer=setTimeout((()=>{this.scrollAnimationEnd.emit()}),this.duration+this.delay+this.stagger*(this.contentEl?this.contentEl.children.length:0)))),this.once&&this.observer.disconnect();else{const a=t.boundingClientRect.top>(window.innerHeight||document.documentElement.clientHeight);if(this.mirror&&a){if(this.isVisible=!1,this.hasAnimated=!1,this.contentEl){const t=this.enterClass.split(" ").filter((t=>t.trim()));t.forEach((t=>this.contentEl.classList.remove(t))),this.stagger>0&&Array.from(this.contentEl.children).forEach((a=>{t.forEach((t=>a.classList.remove(t)))}))}}else!this.once&&this.isVisible&&(this.isVisible=!1,this.contentEl)&&(this.stagger>0&&this.contentEl.children.length>0?Array.from(this.contentEl.children).forEach((t=>{this.leaveClass.split(" ").filter((t=>t.trim())).forEach((a=>t.classList.add(a))),this.enterClass.split(" ").filter((t=>t.trim())).forEach((a=>t.classList.remove(a)))})):this.leaveClass&&(this.leaveClass.split(" ").filter((t=>t.trim())).forEach((t=>this.contentEl.classList.add(t))),this.enterClass.split(" ").filter((t=>t.trim())).forEach((t=>this.contentEl.classList.remove(t)))))}}))}),t);const a=this.anchor?document.querySelector(this.anchor):this.contentEl;a&&this.observer.observe(a)}render(){const t="string"==typeof this.perspective?this.perspective:"1000px",a="string"==typeof this.transformOrigin?this.transformOrigin:"center";return o(r,{key:"47a9d6b0f874f646bf3ba94faf32fbf958ceb177",class:this.scrub?"scrubbing":""},o("div",{key:"4b44f83641692c3bdc3e4dad2ad7c3a25dfe5ac3",class:"animate-container",ref:t=>this.contentEl=t,style:{"--animation-duration":this.duration+"ms","--animation-delay":this.delay+"ms","--animation-easing":"string"==typeof this.easing?this.easing:"ease","--start-blur":("string"==typeof this.blurAmount?this.blurAmount:"0px")||"0px","--perspective":t||"1000px","--distance":"string"==typeof this.distance?this.distance:"50px","--transform-origin":a,perspective:t||"none","transform-origin":a}},o("slot",{key:"49dffe8ae575f94d9f94b9b0c076f88751e149c4"})))}static get watchers(){return{scrub:[{headerScrubChange: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}:host(.scrubbing) .animate-container,:host(.scrubbing) ::slotted(*){animation-play-state:paused !important;animation-delay:calc(var(--scroll-progress, 0) * -1s) !important;animation-duration:1s !important;transition:none !important}.animate-container{animation-duration:var(--animation-duration, 1000ms);animation-delay:var(--animation-delay, 0ms);animation-timing-function:var(--animation-easing, ease);animation-fill-mode:both}.fade-in,::slotted(.fade-in){animation-name:fadeIn}.fade-out,::slotted(.fade-out){animation-name:fadeOut}@keyframes fadeIn{from{opacity:0;filter:blur(var(--start-blur, 0px))}to{opacity:1;filter:blur(0)}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}.slide-in-left,::slotted(.slide-in-left){animation-name:slideInLeft}.slide-in-right,::slotted(.slide-in-right){animation-name:slideInRight}.slide-in-up,::slotted(.slide-in-up){animation-name:slideInUp}.slide-in-down,::slotted(.slide-in-down){animation-name:slideInDown}.slide-out-left,::slotted(.slide-out-left){animation-name:slideOutLeft}.slide-out-right,::slotted(.slide-out-right){animation-name:slideOutRight}.slide-out-up,::slotted(.slide-out-up){animation-name:slideOutUp}.slide-out-down,::slotted(.slide-out-down){animation-name:slideOutDown}@keyframes slideInLeft{from{transform:translate3d(calc(var(--distance, 100%) * -1), 0, 0);opacity:0}to{transform:translate3d(0, 0, 0);opacity:1}}@keyframes slideInRight{from{transform:translate3d(var(--distance, 100%), 0, 0);opacity:0}to{transform:translate3d(0, 0, 0);opacity:1}}@keyframes slideInUp{from{transform:translate3d(0, var(--distance, 100%), 0);opacity:0}to{transform:translate3d(0, 0, 0);opacity:1}}@keyframes slideInDown{from{transform:translate3d(0, calc(var(--distance, 100%) * -1), 0);opacity:0}to{transform:translate3d(0, 0, 0);opacity:1}}@keyframes slideOutLeft{from{transform:translate3d(0, 0, 0);opacity:1}to{transform:translate3d(-100%, 0, 0);opacity:0}}@keyframes slideOutRight{from{transform:translate3d(0, 0, 0);opacity:1}to{transform:translate3d(100%, 0, 0);opacity:0}}@keyframes slideOutUp{from{transform:translate3d(0, 0, 0);opacity:1}to{transform:translate3d(0, -100%, 0);opacity:0}}@keyframes slideOutDown{from{transform:translate3d(0, 0, 0);opacity:1}to{transform:translate3d(0, 100%, 0);opacity:0}}.zoom-in,::slotted(.zoom-in){animation-name:zoomIn}.zoom-out,::slotted(.zoom-out){animation-name:zoomOut}@keyframes zoomIn{from{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}50%{opacity:1}}@keyframes zoomOut{from{opacity:1}50%{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}to{opacity:0}}.flip-in,::slotted(.flip-in){animation-name:flipIn}.flip-out,::slotted(.flip-out){animation-name:flipOut}.flip-in-x,::slotted(.flip-in-x){animation-name:flipInX}.flip-in-y,::slotted(.flip-in-y){animation-name:flipInY}.flip-out-x,::slotted(.flip-out-x){animation-name:flipOutX}.flip-out-y,::slotted(.flip-out-y){animation-name:flipOutY}@keyframes flipIn{from{transform:perspective(var(--perspective, 1000px)) rotate3d(1, 0, 0, 90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(var(--perspective, 1000px)) rotate3d(1, 0, 0, -20deg);animation-timing-function:ease-in}60%{transform:perspective(var(--perspective, 1000px)) rotate3d(1, 0, 0, 10deg);opacity:1}80%{transform:perspective(var(--perspective, 1000px)) rotate3d(1, 0, 0, -5deg)}to{transform:perspective(var(--perspective, 1000px))}}@keyframes flipOut{from{transform:perspective(var(--perspective, 1000px))}30%{transform:perspective(var(--perspective, 1000px)) rotate3d(1, 0, 0, -20deg);opacity:1}to{transform:perspective(var(--perspective, 1000px)) rotate3d(1, 0, 0, 90deg);opacity:0}}@keyframes flipInX{from{transform:perspective(var(--perspective, 1000px)) rotate3d(1, 0, 0, 90deg);opacity:0}to{transform:perspective(var(--perspective, 1000px)) rotate3d(1, 0, 0, 0deg);opacity:1}}@keyframes flipInY{from{transform:perspective(var(--perspective, 1000px)) rotate3d(0, 1, 0, 90deg);opacity:0}to{transform:perspective(var(--perspective, 1000px)) rotate3d(0, 1, 0, 0deg);opacity:1}}@keyframes flipOutX{from{transform:perspective(var(--perspective, 1000px)) rotate3d(1, 0, 0, 0deg);opacity:1}to{transform:perspective(var(--perspective, 1000px)) rotate3d(1, 0, 0, 90deg);opacity:0}}@keyframes flipOutY{from{transform:perspective(var(--perspective, 1000px)) rotate3d(0, 1, 0, 0deg);opacity:1}to{transform:perspective(var(--perspective, 1000px)) rotate3d(0, 1, 0, 90deg);opacity:0}}.bounce-in,::slotted(.bounce-in){animation-name:bounceIn}.bounce-out,::slotted(.bounce-out){animation-name:bounceOut}@keyframes bounceIn{from,20%,40%,60%,80%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}20%{transform:scale3d(1.1, 1.1, 1.1)}40%{transform:scale3d(0.9, 0.9, 0.9)}60%{opacity:1;transform:scale3d(1.03, 1.03, 1.03)}80%{transform:scale3d(0.97, 0.97, 0.97)}to{opacity:1;transform:scale3d(1, 1, 1)}}@keyframes bounceOut{20%{transform:scale3d(0.9, 0.9, 0.9)}50%,55%{opacity:1;transform:scale3d(1.1, 1.1, 1.1)}to{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}}.rotate-in,::slotted(.rotate-in){animation-name:rotateIn}.rotate-out,::slotted(.rotate-out){animation-name:rotateOut}@keyframes rotateIn{from{transform-origin:center;transform:rotate3d(0, 0, 1, -200deg);opacity:0}to{transform-origin:center;transform:translate3d(0, 0, 0);opacity:1}}@keyframes rotateOut{from{transform-origin:center;opacity:1}to{transform-origin:center;transform:rotate3d(0, 0, 1, 200deg);opacity:0}}.shake,::slotted(.shake){animation-name:shake}@keyframes shake{from,to{transform:translate3d(0, 0, 0)}10%,30%,50%,70%,90%{transform:translate3d(-10px, 0, 0)}20%,40%,60%,80%{transform:translate3d(10px, 0, 0)}}.zoom-in-up,::slotted(.zoom-in-up){animation-name:zoomInUp}.zoom-in-down,::slotted(.zoom-in-down){animation-name:zoomInDown}.zoom-in-left,::slotted(.zoom-in-left){animation-name:zoomInLeft}.zoom-in-right,::slotted(.zoom-in-right){animation-name:zoomInRight}@keyframes zoomInUp{from{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}@keyframes zoomInDown{from{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}@keyframes zoomInLeft{from{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}@keyframes zoomInRight{from{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.pulse,::slotted(.pulse){animation-name:pulse}.rubber-band,::slotted(.rubber-band){animation-name:rubberBand}.tada,::slotted(.tada){animation-name:tada}.jello,::slotted(.jello){animation-name:jello}.wobble,::slotted(.wobble){animation-name:wobble}@keyframes pulse{from,to{transform:scale3d(1, 1, 1)}50%{transform:scale3d(1.05, 1.05, 1.05)}}@keyframes rubberBand{from,to{transform:scale3d(1, 1, 1)}30%{transform:scale3d(1.25, 0.75, 1)}40%{transform:scale3d(0.75, 1.25, 1)}50%{transform:scale3d(1.15, 0.85, 1)}65%{transform:scale3d(0.95, 1.05, 1)}75%{transform:scale3d(1.05, 0.95, 1)}}@keyframes tada{from,to{transform:scale3d(1, 1, 1)}10%,20%{transform:scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg)}30%,50%,70%,90%{transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)}40%,60%,80%{transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)}}@keyframes jello{from,11.1%,to{transform:translate3d(0, 0, 0)}22.2%{transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{transform:skewX(6.25deg) skewY(6.25deg)}44.4%{transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{transform:skewX(-0.78125deg) skewY(-0.78125deg)}77.7%{transform:skewX(0.390625deg) skewY(0.390625deg)}88.8%{transform:skewX(-0.1953125deg) skewY(-0.1953125deg)}}@keyframes wobble{from,to{transform:translate3d(0, 0, 0)}15%{transform:translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)}30%{transform:translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)}45%{transform:translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)}60%{transform:translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)}75%{transform:translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)}}.roll-in,::slotted(.roll-in){animation-name:rollIn}.roll-out,::slotted(.roll-out){animation-name:rollOut}.blur-reveal,::slotted(.blur-reveal){animation-name:blurReveal}.back-in-up,::slotted(.back-in-up){animation-name:backInUp}.back-in-down,::slotted(.back-in-down){animation-name:backInDown}.back-in-left,::slotted(.back-in-left){animation-name:backInLeft}.back-in-right,::slotted(.back-in-right){animation-name:backInRight}.back-out-up,::slotted(.back-out-up){animation-name:backOutUp}.back-out-down,::slotted(.back-out-down){animation-name:backOutDown}.back-out-left,::slotted(.back-out-left){animation-name:backOutLeft}.back-out-right,::slotted(.back-out-right){animation-name:backOutRight}@keyframes backInUp{0%{transform:translateY(1200px) scale(0.7);opacity:0.7}80%{transform:translateY(0px) scale(0.7);opacity:0.7}100%{transform:scale(1);opacity:1}}@keyframes backInDown{0%{transform:translateY(-1200px) scale(0.7);opacity:0.7}80%{transform:translateY(0px) scale(0.7);opacity:0.7}100%{transform:scale(1);opacity:1}}@keyframes backInLeft{0%{transform:translateX(-2000px) scale(0.7);opacity:0.7}80%{transform:translateX(0px) scale(0.7);opacity:0.7}100%{transform:scale(1);opacity:1}}@keyframes backInRight{0%{transform:translateX(2000px) scale(0.7);opacity:0.7}80%{transform:translateX(0px) scale(0.7);opacity:0.7}100%{transform:scale(1);opacity:1}}@keyframes backOutUp{0%{transform:scale(1);opacity:1}20%{transform:translateY(0px) scale(0.7);opacity:0.7}100%{transform:translateY(-700px) scale(0.7);opacity:0}}@keyframes backOutDown{0%{transform:scale(1);opacity:1}20%{transform:translateY(0px) scale(0.7);opacity:0.7}100%{transform:translateY(700px) scale(0.7);opacity:0}}@keyframes backOutLeft{0%{transform:scale(1);opacity:1}20%{transform:translateX(0px) scale(0.7);opacity:0.7}100%{transform:translateX(-2000px) scale(0.7);opacity:0}}@keyframes backOutRight{0%{transform:scale(1);opacity:1}20%{transform:translateX(0px) scale(0.7);opacity:0.7}100%{transform:translateX(2000px) scale(0.7);opacity:0}}@keyframes rollIn{from{opacity:0;transform:translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)}to{opacity:1;transform:translate3d(0, 0, 0)}}@keyframes rollOut{from{opacity:1}to{opacity:0;transform:translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)}}@keyframes blurReveal{from{opacity:0;filter:blur(var(--start-blur, 20px));transform:scale(0.9)}to{opacity:1;filter:blur(0);transform:scale(1)}}"}},[769,"ui-animate-on-scroll",{enterClass:[1,"enter-class"],leaveClass:[1,"leave-class"],threshold:[2],rootMargin:[1,"root-margin"],once:[4],duration:[2],delay:[2],easing:[1],anchor:[1],root:[1],blurAmount:[1,"blur-amount"],perspective:[1],stagger:[2],transformOrigin:[1,"transform-origin"],distance:[1],mirror:[4],respectReducedMotion:[4,"respect-reduced-motion"],scrub:[4],isVisible:[32],hasAnimated:[32]},void 0,{scrub:[{headerScrubChange:0}]}]),s=n,m=function(){"undefined"!=typeof customElements&&["ui-animate-on-scroll"].forEach((t=>{"ui-animate-on-scroll"===t&&(customElements.get(i(t))||customElements.define(i(t),n))}))};export{s as UiAnimateOnScroll,m as defineCustomElement}

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

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

package/dist/components/ui-aside-panel.js

@@ -0,0 +1 @@
+import{proxyCustomElement as e,HTMLElement as i,createEvent as a,h as t,Host as s,transformTag as n}from"@stencil/core/internal/client";import{d as o,a as r}from"./badge.js";import{d}from"./context-menu.js";import{d as l}from"./icon.js";const c=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.asideClosed=a(this,"asideClosed",7),this.asideOpened=a(this,"asideOpened",7),this.asideResized=a(this,"asideResized",7),this.asideActionClick=a(this,"asideActionClick",7),this.asideStateChange=a(this,"asideStateChange",7)}open=!1;direction="right";size="320px";mini=!1;miniSize="64px";pinned=!1;variant="default";theme="default";haptic=!1;enableParallax=!1;enableVoiceControl=!1;syncGroup="";maximized=!1;autoMini=!0;toggleShortcut="";showActions=!1;actionItems=[];stackOffset=0;scope="body";closeable=!0;closeOnOverlayClick=!0;showOverlay=!1;closeOnEscape=!0;resizable=!1;resizeHandleColor="";showResizeIndicator=!0;minSize=200;rtl=!1;maxSize=1200;backdropBlur="0";transitionDuration="1s";animationType="slide-in-out";loading=!1;progress=-1;badge="";persistKey;floatingOffset="20px";secondarySize="auto";floatingAlign="stretch";backgroundColor="white";asideClosed;asideOpened;asideResized;asideActionClick;asideStateChange;currentSize;isResizing=!1;isListening=!1;mouseRotation={x:0,y:0};get hostElement(){return this}startPos=0;startSize=0;firstFocusableEl;lastFocusableEl;watchOpenHandler(e){e?(this.playHaptic("open"),this.asideOpened.emit(),this.handleFocusTrap(),this.saveState(),this.broadcastState(),"body"===this.scope&&document.body.classList.add("ui-aside-open")):(this.playHaptic("close"),this.asideClosed.emit(),this.saveState(),this.broadcastState(),"body"===this.scope&&document.body.classList.remove("ui-aside-open")),this.asideStateChange.emit({open:this.open,mini:this.mini})}watchMiniHandler(){this.playHaptic("toggle"),this.asideStateChange.emit({open:this.open,mini:this.mini}),this.saveState()}handleWindowResize(){this.autoMini&&window.innerWidth<1024&&(this.mini=!0)}componentWillLoad(){this.loadState(),this.currentSize||(this.currentSize=parseInt(this.size)),this.autoMini&&window.innerWidth<1024&&(this.mini=!0)}handleRemoteSync(e){this.syncGroup&&e.detail.group===this.syncGroup&&e.detail.sourceId!==this.hostElement.id&&(this.open=e.detail.open,this.mini=e.detail.mini)}broadcastState(){this.syncGroup&&window.dispatchEvent(new CustomEvent("asideRemoteState",{detail:{group:this.syncGroup,sourceId:this.hostElement.id,open:this.open,mini:this.mini}}))}playHaptic(e){if(this.haptic)try{const i=new(window.AudioContext||window.webkitAudioContext),a=i.createOscillator(),t=i.createGain();a.connect(t),t.connect(i.destination);const s=i.currentTime;"open"===e?(a.frequency.setValueAtTime(440,s),a.frequency.exponentialRampToValueAtTime(880,s+.1)):"close"===e?(a.frequency.setValueAtTime(880,s),a.frequency.exponentialRampToValueAtTime(220,s+.15)):(a.frequency.setValueAtTime(660,s),a.frequency.exponentialRampToValueAtTime(440,s+.1)),t.gain.setValueAtTime(.1,s),t.gain.exponentialRampToValueAtTime(.01,s+.15),a.start(),a.stop(s+.15)}catch(e){}}disconnectedCallback(){"body"===this.scope&&document.body.classList.remove("ui-aside-open")}watchSizeHandler(e){e&&(this.currentSize=parseInt(e))}componentDidLoad(){this.open&&this.handleFocusTrap()}loadState(){if(this.persistKey){const e=localStorage.getItem("aside-panel-"+this.persistKey);if(e)try{const{open:i,mini:a,size:t}=JSON.parse(e);this.open=i,this.mini=a,this.currentSize=t}catch(e){console.warn("Failed to load aside-panel state",e)}}}saveState(){this.persistKey&&localStorage.setItem("aside-panel-"+this.persistKey,JSON.stringify({open:this.open,mini:this.mini,size:this.currentSize}))}handleFocusTrap(){this.open&&!this.mini&&setTimeout((()=>{const e=this.hostElement.shadowRoot?.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="0"]');e&&e.length>0&&(this.firstFocusableEl=e[0],this.lastFocusableEl=e[e.length-1],this.firstFocusableEl.focus())}),100)}handleKeyDown(e){if(this.toggleShortcut&&e.ctrlKey&&e.key.toLowerCase()===this.toggleShortcut.toLowerCase())return e.preventDefault(),void this.toggle();if(this.open){if(this.closeOnEscape&&"Escape"===e.key&&!this.pinned&&this.handleClose(),this.resizable&&e.altKey){const i=e.shiftKey?50:10;if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"].includes(e.key)){e.preventDefault();let a=0;"ArrowLeft"===e.key&&(a="left"===this.direction?-i:"right"===this.direction?i:0),"ArrowRight"===e.key&&(a="left"===this.direction?i:"right"===this.direction?-i:0),"ArrowUp"===e.key&&(a="top"===this.direction?-i:"bottom"===this.direction?i:0),"ArrowDown"===e.key&&(a="top"===this.direction?i:"bottom"===this.direction?-i:0),this.currentSize=Math.max(this.minSize,Math.min(this.maxSize,this.currentSize+a)),this.asideResized.emit({size:this.currentSize}),this.saveState(),this.playHaptic("toggle")}}if("Tab"===e.key){const i=this.hostElement.shadowRoot,a=i?i.activeElement:document.activeElement;e.shiftKey?a===this.firstFocusableEl&&(this.lastFocusableEl.focus(),e.preventDefault()):a===this.lastFocusableEl&&(this.firstFocusableEl.focus(),e.preventDefault())}}}async toggleMaximize(){this.maximized=!this.maximized,this.playHaptic("toggle")}async toggle(){this.open=!this.open}async toggleMini(){this.mini=!this.mini}async show(){this.open=!0}async hide(){this.pinned||(this.open=!1)}async initVoice(){if(!this.enableVoiceControl||!("webkitSpeechRecognition"in window))return;const e=new window.webkitSpeechRecognition;e.continuous=!1,e.interimResults=!1,e.lang="en-US",e.onstart=()=>{this.isListening=!0},e.onend=()=>{this.isListening=!1},e.onresult=e=>{const i=e.results[0][0].transcript.toLowerCase();(i.includes("side")||i.includes("panel"))&&((i.includes("open")||i.includes("show"))&&this.show(),(i.includes("close")||i.includes("hide"))&&this.hide(),(i.includes("mini")||i.includes("collapse"))&&(this.mini=!0),i.includes("expand")&&(this.mini=!1))},e.start()}handleResizeStart=e=>{this.resizable&&!this.mini&&(e.preventDefault(),this.isResizing=!0,this.startPos="left"===this.direction||"right"===this.direction?e.clientX:e.clientY,this.startSize=this.currentSize,document.addEventListener("mousemove",this.handleResizeMove),document.addEventListener("mouseup",this.handleResizeEnd))};handleResizeMove=e=>{if(!this.isResizing)return;let i=0,a=0;"left"===this.direction||"right"===this.direction?(a=.9*window.innerWidth,i="left"===this.direction?e.clientX-this.startPos:this.startPos-e.clientX):(a=.9*window.innerHeight,i="top"===this.direction?e.clientY-this.startPos:this.startPos-e.clientY);let t=this.startSize+i;t=Math.max(this.minSize,Math.min(Math.min(this.maxSize,a),t)),this.currentSize=t};handleResizeEnd=()=>{this.isResizing=!1,document.removeEventListener("mousemove",this.handleResizeMove),document.removeEventListener("mouseup",this.handleResizeEnd),this.asideResized.emit({size:this.currentSize}),this.saveState()};handleClose=()=>{this.pinned||(this.open=!1)};handleOverlayClick=()=>{this.closeOnOverlayClick&&!this.pinned&&this.handleClose()};handleParallax=e=>{if(!this.enableParallax||!this.open||this.mini)return;const i=this.hostElement.getBoundingClientRect();this.mouseRotation={x:5*((e.clientY-i.top)/i.height-.5),y:5*-((e.clientX-i.left)/i.width-.5)}};resetParallax=()=>{this.mouseRotation={x:0,y:0}};hostStyle(){const e={},i=this.maximized?"90%":this.mini?this.miniSize:this.currentSize?this.currentSize+"px":this.size,a="floating"===this.variant,t=a?this.floatingOffset:this.stackOffset?this.stackOffset+"px":"0";let s="none";return"left"===this.direction||"right"===this.direction?(e.width=i,e[this.direction]=t,a?"stretch"===this.floatingAlign?(e.top=t,e.bottom=t,e.height=`calc(100vh - 2 * ${t})`):(e.height="auto"===this.secondarySize?"60%":this.secondarySize,"start"===this.floatingAlign?(e.top=t,e.bottom="auto"):"end"===this.floatingAlign?(e.bottom=t,e.top="auto"):(e.top="50%",s="translateY(-50%)")):(e.height="100vh",e.top="0",e.bottom="0")):(e.height=i,e[this.direction]=t,a?"stretch"===this.floatingAlign?(e.left=t,e.right=t,e.width=`calc(100vw - 2 * ${t})`):(e.width="auto"===this.secondarySize?"60%":this.secondarySize,"start"===this.floatingAlign?(e.left=t,e.right="auto"):"end"===this.floatingAlign?(e.right=t,e.left="auto"):(e.left="50%",s="translateX(-50%)")):(e.width="100vw",e.left="0",e.right="0")),!this.enableParallax||this.mini||this.maximized||(s="none"===s?"":s,s+=` perspective(1000px) rotateX(${this.mouseRotation.x}deg) rotateY(${this.mouseRotation.y}deg)`),e["--aside-center-transform"]=s.trim(),e["--aside-transition-duration"]=this.transitionDuration,e["--aside-bg"]=this.backgroundColor||"white",e.backgroundColor="var(--aside-bg, #ffffff)",e}render(){const e="default"!==this.theme?this.theme:this.variant;return t(s,{key:"96228f17ee1f0fab8f11427ee6055f42234418cb",class:{"aside-container":!0,open:this.open,mini:this.mini,maximized:this.maximized,["theme-"+e]:!0,["variant-"+e]:!0,["dir-"+this.direction]:!0,["animation-"+this.animationType]:!0,"is-pinned":this.pinned,rtl:this.rtl},style:this.hostStyle(),role:"complementary","aria-expanded":""+this.open,"aria-hidden":""+!this.open},this.showOverlay&&!this.mini&&t("div",{key:"5dae19f30e04a7fc18cb0fef62a8319f79296160",class:{overlay:!0,visible:this.open},style:{backdropFilter:"0"!==this.backdropBlur?`blur(${this.backdropBlur})`:"none"},onClick:this.handleOverlayClick}),t("div",{key:"688ced9dccc2bfe6ee489e8283146f8863044224",class:{panel:!0,["panel-"+this.direction]:!0,open:this.open,mini:this.mini,resizing:this.isResizing,loading:this.loading,"parallax-active":this.enableParallax},style:this.hostStyle(),onMouseMove:this.handleParallax,onMouseLeave:this.resetParallax},this.loading&&t("div",{key:"e78d13a733dbd6e9b2949634c8b107cab6225d24",class:"loading-overlay"},t("div",{key:"c7db0694fba52bfbc8d6a90440976556a85056c6",class:"spinner"})),this.resizable&&!this.mini&&t("div",{key:"ecc06e0c68c743eff86b12e2bb978369743924d7",class:"resize-handle resize-handle-"+this.direction,style:this.resizeHandleColor?{backgroundColor:this.resizeHandleColor}:{},onMouseDown:this.handleResizeStart},this.showResizeIndicator&&t("div",{key:"28156c16815117726861da00bb93165c174fc1fe",class:"resize-indicator"},t("span",{key:"6b4e06e9ae3935a5a68dfbd2a51b53b1172fdd0f"}),t("span",{key:"82558b01333dff587f0afd3d723a7e592a757ede"}),t("span",{key:"c8e3a7ab11462c951e1477b5abcae131e2019129"}))),t("div",{key:"ab67f36b3f4dd65dffdb6fd4e12bb09d04fa4d59",class:"panel-header-toolbar"},t("div",{key:"627055ac7880157e1ccdb43587832fb151800202",class:"toolbar-left"},this.mini?t("ui-button",{variant:"ghost",size:"sm",icon:"chevron-right",iconLibrary:"lucide",iconSize:"14px",ariaLabel:"Expand",onClick:()=>this.toggleMini()}):t("div",{style:{display:"flex",gap:"4px"}},t("ui-button",{variant:"ghost",size:"sm",icon:"chevron-left",iconLibrary:"lucide",iconSize:"14px",ariaLabel:"Collapse to Mini",onClick:()=>this.toggleMini()}),!this.mini&&t("ui-button",{variant:"ghost",size:"sm",icon:this.maximized?"minimize":"maximize",iconLibrary:"lucide",iconSize:"14px",ariaLabel:this.maximized?"Restore":"Maximize",onClick:()=>this.toggleMaximize()})),this.enableVoiceControl&&t("ui-button",{key:"67bd0e21f1411391f2ee3bfc9d752ce267012401",variant:"ghost",size:"sm",icon:"mic",iconLibrary:"lucide",iconSize:"14px",ariaLabel:"Voice Interaction",class:this.isListening?"active":"",onClick:()=>this.initVoice()})),t("div",{key:"fa9bad7d620cab7d18cf9234f50f985378b472f5",class:"toolbar-right"},this.showActions&&t("ui-button",{key:"7688f94038ec6a27423be56b787873631614cdc2",id:"aside-actions-trigger",variant:"ghost",size:"sm",icon:"ellipsis-vertical",iconLibrary:"lucide",iconSize:"16px",ariaLabel:"More Actions",onClick:()=>this.asideActionClick.emit()}),this.showActions&&t("ui-context-menu",{key:"32daa2cbf1311059c80058a3ad587946f24b8e59",items:this.actionItems,target:"#aside-actions-trigger",openOn:"click",placement:"bottom",onItemSelect:e=>this.asideActionClick.emit(e.detail)}),this.pinned&&t("ui-icon",{key:"a3e70a59b575c0376c151e0c6a1db1553a9dd1e9",name:"pin",library:"lucide",size:"14px",class:"pin-status"}),this.closeable&&!this.pinned&&t("ui-button",{key:"c686337c8755a0375b4c87239bf95d2838f8bd36",variant:"ghost",size:"sm",icon:"x",iconLibrary:"lucide",iconSize:"16px",ariaLabel:"Close panel",onClick:this.handleClose}))),t("div",{key:"b4c1294140c10f94287ba98fa86f16627c61bb5b",class:"panel-header"},t("div",{key:"cd0533b0730d96b11136e68ce6a1e0372885ff4f",class:"header-main"},t("slot",{key:"687c43c34a171ff4351e8a41778da102826ce2f8",name:"header"}),this.badge&&t("span",{key:"830f3cb27cf809029f686bacbd488a6dcbcedad3",class:"header-badge"},this.badge)),this.progress>-1&&t("div",{key:"6c37bd10a8d7bfac71cc7aa619c44b4145400681",class:"header-progress"},t("div",{key:"07fbdc20712c119f1e345fcd070f2eb33f7380e6",class:"progress-bar",style:{width:Math.min(100,Math.max(0,this.progress))+"%"}}))),t("div",{key:"569c75c3b02918bb22d3ffc4322a882267b92bb9",class:"panel-content"},t("slot",{key:"9255c9b298178ae03bae04acd856d8b528ddf808",name:"content"}),t("slot",{key:"0c071717c63c6baabfd5350cad38f57621989c6c"})),!this.mini&&t("div",{key:"d2a629a5864e57d917ca7a5a8256125a8a8ec0a4",class:"panel-footer"},t("slot",{key:"9b79d14c480eefa03ef84e73e5363bca9cd63e6e",name:"footer"}))))}static get watchers(){return{open:[{watchOpenHandler:0}],mini:[{watchMiniHandler:0}],size:[{watchSizeHandler: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}:host{display:contents;--aside-overlay-bg:rgba(0, 0, 0, 0.4);--aside-panel-bg:var(--aside-bg, var(--bg-primary, #ffffff));--aside-panel-shadow:0 10px 40px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.06);--aside-panel-text:var(--text-primary, #0f172a);--aside-close-btn-color:var(--text-muted, #64748b);--aside-close-btn-hover-color:var(--text-primary, #0f172a);--aside-close-btn-hover-bg:var(--bg-secondary, #f1f5f9);--aside-close-btn-focus:var(--color-primary, #10b981);--aside-resize-handle-hover:var(--color-primary, #10b981);--aside-resize-handle-active:var(--color-primary-hover, #2563eb);--aside-panel-padding:32px;--aside-transition-duration:1s;--aside-ease:cubic-bezier(0.65, 0, 0.35, 1);--aside-z-index-overlay:1500;--aside-z-index-panel:1501;--aside-mini-size:64px}.aside-container{display:block}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--aside-overlay-bg);opacity:0;visibility:hidden;transition:opacity var(--aside-transition-duration) var(--aside-ease), visibility var(--aside-transition-duration) var(--aside-ease);transition-delay:var(--aside-transition-duration);z-index:var(--aside-z-index-overlay)}.overlay.visible{opacity:1;visibility:visible;transition-delay:0s}.panel{position:fixed;background-color:var(--aside-panel-bg);color:var(--aside-panel-text);box-shadow:var(--aside-panel-shadow);transition:transform var(--aside-transition-duration) var(--aside-ease), width var(--aside-transition-duration) var(--aside-ease), height var(--aside-transition-duration) var(--aside-ease), opacity var(--aside-transition-duration) var(--aside-ease), visibility var(--aside-transition-duration) var(--aside-ease);z-index:var(--aside-z-index-panel);display:flex;flex-direction:column;overflow:hidden;visibility:hidden;pointer-events:none;transform-style:preserve-3d;--aside-dir-transform:translate(0, 0);transform:var(--aside-center-transform, none) var(--aside-dir-transform)}.panel-left{--aside-dir-transform:translateX(-110%)}.panel-right{--aside-dir-transform:translateX(110%)}.panel-top{--aside-dir-transform:translateY(-110%)}.panel-bottom{--aside-dir-transform:translateY(110%)}.panel.open{visibility:visible;pointer-events:auto;--aside-dir-transform:translate(0, 0)}.panel.maximized{width:90% !important;height:90% !important;border-radius:16px;z-index:1550;box-shadow:0 25px 50px -12px rgba(0, 0, 0, 0.5);margin:1%}.panel.maximized .resize-handle{display:none !important}.panel.resizing{transition:none !important;user-select:none}.parallax-active{transition:transform var(--aside-transition-duration) var(--aside-ease), width var(--aside-transition-duration) var(--aside-ease), height var(--aside-transition-duration) var(--aside-ease), opacity var(--aside-transition-duration) var(--aside-ease)}.panel.mini .panel-header,.panel.mini .panel-footer,.panel.mini .toolbar-right,.panel.mini .close-btn{display:none !important}.panel.mini .panel-content{opacity:0.1;filter:blur(4px);pointer-events:none}.panel-header-toolbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:rgba(0, 0, 0, 0.02);border-bottom:1px solid rgba(0, 0, 0, 0.05)}.panel-header-toolbar .toolbar-left,.panel-header-toolbar .toolbar-right{display:flex;align-items:center;gap:8px}.toolbar-btn{background:transparent;border:none;width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--aside-close-btn-color);transition:all 0.2s ease}.toolbar-btn:hover{background:var(--aside-close-btn-hover-bg);color:var(--aside-close-btn-hover-color)}.voice-btn.active{color:var(--color-danger, #ef4444);animation:voice-breathing 1.5s infinite ease-in-out}.panel-header{padding:24px var(--aside-panel-padding);border-bottom:1px solid var(--border-subtle, #e2e8f0);position:relative}.panel-header .header-main{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.panel-header .header-badge{background:var(--border-subtle, #e2e8f0);color:var(--color-primary, #475569);padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em}.panel-header .header-progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:rgba(0, 0, 0, 0.05)}.panel-header .header-progress .progress-bar{height:100%;background:var(--color-primary, #10b981);transition:width 0.3s ease}.theme-zenith .header-badge{background:rgba(var(--color-success-rgb, 16, 185, 129), 0.2);color:var(--color-success, #10b981)}.theme-zenith .header-progress .progress-bar{background:var(--color-success, #10b981);box-shadow:0 0 5px var(--color-success, #10b981)}.panel-content{flex:1;padding:var(--aside-panel-padding);overflow-y:auto}.panel-footer{padding:20px var(--aside-panel-padding);border-top:1px solid var(--border-subtle, #e2e8f0);background-color:var(--bg-primary, #f8fafc)}.variant-glass .panel,.theme-glass .panel{background:rgba(255, 255, 255, 0.7);backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(255, 255, 255, 0.3)}.variant-glass.panel-left{border-right:1px solid rgba(255, 255, 255, 0.3)}.variant-floating .panel{border-radius:16px;border:1px solid rgba(0, 0, 0, 0.08);box-shadow:0 20px 40px -10px rgba(0, 0, 0, 0.2), 0 10px 15px -5px rgba(0, 0, 0, 0.1)}.variant-floating .panel.panel-right:not(.open){--aside-dir-transform:translateX(calc(100% + 80px))}.variant-floating .panel.panel-left:not(.open){--aside-dir-transform:translateX(calc(-100% - 80px))}.variant-floating .panel.panel-top:not(.open){--aside-dir-transform:translateY(calc(-100% - 80px))}.variant-floating .panel.panel-bottom:not(.open){--aside-dir-transform:translateY(calc(100% + 80px))}.theme-radiant .panel{background:linear-gradient(135deg, var(--bg-primary, #ffffff), var(--bg-primary, #f8fafc));border:2px solid transparent;background-clip:padding-box;box-shadow:0 20px 50px rgba(0, 0, 0, 0.15)}.theme-zenith .panel{background:var(--bg-secondary, #0f172a);color:var(--bg-primary, #ffffff);border-color:var(--bg-primary, var(--border-subtle, #1e293b))}.theme-zenith .panel .panel-header,.theme-zenith .panel .panel-footer{border-color:var(--bg-primary, var(--border-subtle, #1e293b));background:var(--bg-primary, var(--border-subtle, #1e293b))}.resize-handle{position:absolute;background-color:transparent;z-index:1510;transition:background-color 0.2s ease, opacity 0.2s ease;display:flex;align-items:center;justify-content:center}.resize-handle:hover{background-color:var(--aside-resize-handle-hover)}.resize-indicator{display:flex;gap:2px;pointer-events:none;opacity:0.5}.resize-handle:hover .resize-indicator{opacity:1}.resize-handle-left,.resize-handle-right{flex-direction:column}.resize-handle-left .resize-indicator,.resize-handle-right .resize-indicator{flex-direction:column}.resize-indicator span{width:3px;height:3px;background-color:currentColor;border-radius:50%;box-shadow:0 0 2px rgba(0, 0, 0, 0.2)}.resize-handle-left{right:0;top:0;bottom:0;width:6px;cursor:ew-resize}.resize-handle-right{left:0;top:0;bottom:0;width:6px;cursor:ew-resize}.resize-handle-top{bottom:0;left:0;right:0;height:6px;cursor:ns-resize}.resize-handle-bottom{top:0;left:0;right:0;height:6px;cursor:ns-resize}.loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255, 255, 255, 0.7);display:flex;align-items:center;justify-content:center;z-index:1600;backdrop-filter:blur(4px);overflow:hidden}.loading-overlay::after{content:"";position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg, transparent, rgba(var(--color-primary-rgb, 59, 130, 246), 0.1), transparent);animation:aside-shimmer 2s infinite}.spinner{width:48px;height:48px;border:4px solid rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);border-top-color:var(--color-primary, #10b981);border-radius:50%;animation:aside-spin 1s infinite linear}@keyframes aside-spin{to{transform:rotate(360deg)}}@keyframes aside-shimmer{100%{left:200%}}.theme-zenith .panel.open{animation:zenith-heartbeat 4s ease-in-out infinite}@keyframes zenith-heartbeat{0%,100%{box-shadow:0 0 0 0 rgba(var(--color-success-rgb, 16, 185, 129), 0)}50%{box-shadow:0 0 20px 2px rgba(var(--color-success-rgb, 16, 185, 129), 0.2)}}@media (prefers-color-scheme: dark){:host{--aside-panel-bg:var(--bg-primary, #1e293b);--aside-panel-text:var(--bg-secondary, #f1f5f9)}.panel-header,.panel-footer{border-color:var(--color-primary, #334155)}.panel-footer{background:var(--bg-secondary, #0f172a)}.loading-overlay{background:rgba(15, 23, 42, 0.7)}}.aside-container.animation-slide-in-out .panel{opacity:1}.aside-container.animation-fade .panel:not(.open){opacity:0;visibility:hidden;--aside-dir-transform:translate(0, 0) !important}.aside-container.animation-fade .panel.open{opacity:1;visibility:visible}.aside-container.animation-scale .panel:not(.open){opacity:0;visibility:hidden;--aside-dir-transform:scale(0.95)}.aside-container.animation-scale .panel.open{opacity:1;visibility:visible;--aside-dir-transform:scale(1)}.variant-none .panel,.theme-none .panel{background:transparent !important;box-shadow:none !important;border:none !important}'}},[769,"ui-aside-panel",{open:[1540],direction:[1],size:[1],mini:[1540],miniSize:[1,"mini-size"],pinned:[4],variant:[1],theme:[1],haptic:[4],enableParallax:[4,"enable-parallax"],enableVoiceControl:[4,"enable-voice-control"],syncGroup:[1,"sync-group"],maximized:[1540],autoMini:[4,"auto-mini"],toggleShortcut:[1,"toggle-shortcut"],showActions:[4,"show-actions"],actionItems:[1,"action-items"],stackOffset:[2,"stack-offset"],scope:[1],closeable:[4],closeOnOverlayClick:[4,"close-on-overlay-click"],showOverlay:[4,"show-overlay"],closeOnEscape:[4,"close-on-escape"],resizable:[4],resizeHandleColor:[1,"resize-handle-color"],showResizeIndicator:[4,"show-resize-indicator"],minSize:[2,"min-size"],rtl:[4],maxSize:[2,"max-size"],backdropBlur:[1,"backdrop-blur"],transitionDuration:[1,"transition-duration"],animationType:[1,"animation-type"],loading:[4],progress:[2],badge:[1],persistKey:[1,"persist-key"],floatingOffset:[1,"floating-offset"],secondarySize:[1,"secondary-size"],floatingAlign:[1,"floating-align"],backgroundColor:[1,"background-color"],currentSize:[32],isResizing:[32],isListening:[32],mouseRotation:[32],toggleMaximize:[64],toggle:[64],toggleMini:[64],show:[64],hide:[64],initVoice:[64]},[[9,"resize","handleWindowResize"],[8,"asideRemoteState","handleRemoteSync"],[8,"keydown","handleKeyDown"]],{open:[{watchOpenHandler:0}],mini:[{watchMiniHandler:0}],size:[{watchSizeHandler:0}]}]),h=c,p=function(){"undefined"!=typeof customElements&&["ui-aside-panel","ui-badge","ui-button","ui-context-menu","ui-icon"].forEach((e=>{switch(e){case"ui-aside-panel":customElements.get(n(e))||customElements.define(n(e),c);break;case"ui-badge":customElements.get(n(e))||r();break;case"ui-button":customElements.get(n(e))||o();break;case"ui-context-menu":customElements.get(n(e))||d();break;case"ui-icon":customElements.get(n(e))||l()}}))};export{h as UiAsidePanel,p as defineCustomElement}

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

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

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

@@ -0,0 +1 @@
+import{A as a,d as o}from"./avatar-group.js";const r=a,s=o;export{r as UiAvatarGroup,s as defineCustomElement}

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

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

package/dist/components/ui-avatar.js

@@ -0,0 +1 @@
+import{A as a,d as o}from"./avatar.js";const r=a,s=o;export{r as UiAvatar,s as defineCustomElement}

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

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

package/dist/components/ui-badge.js

@@ -0,0 +1 @@
+import{B as a,a as o}from"./badge.js";const s=a,r=o;export{s as UiBadge,r as defineCustomElement}

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

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

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

@@ -0,0 +1 @@
+import{proxyCustomElement as r,HTMLElement as e,h as a,Host as i,transformTag as t}from"@stencil/core/internal/client";import{d as o}from"./icon.js";const n=r(class extends e{constructor(r){super(),!1!==r&&this.__registerHost(),this.__attachShadow()}label;href;icon;iconLibrary="default";active=!1;disabled=!1;badge;size="md";render(){const r={"breadcrumb-item":!0,active:this.active,disabled:this.disabled,["size-"+this.size]:!0},e=a("span",{key:"7247bee3f00e6cc3de54c9860d014243b5d9c4cb",class:"breadcrumb-content"},this.icon&&a("span",{key:"2537f399d8d557033b72f63a9bc190b208ebdf88",class:"breadcrumb-icon"},a("ui-icon",{key:"951ece78e4e9936fd8f459bb041940c9f6632390",name:this.icon,library:this.iconLibrary,size:"1.1em"})),a("span",{key:"9b2cc37dc1ae16e0b4f73ee0b12ecd168c930c49",class:"breadcrumb-label"},a("slot",{key:"d150b1d67baaa1f1ee0a679a4eded9fb2fe70e88"},this.label)),void 0!==this.badge&&a("span",{key:"90d28ba9ab8e41cb81e4956fb4eb2a06fc940145",class:"breadcrumb-badge"},this.badge));return a(i,{key:"867a980816ed6ca77aeedd631e00f284a8cccbf5",class:"breadcrumb-item-wrapper"},!this.href||this.disabled||this.active?a("span",{class:r,"aria-current":this.active?"page":void 0},e):a("a",{href:this.href,class:r,"aria-current":this.active?"page":void 0},e))}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}.breadcrumb{display:flex;align-items:center}.breadcrumb-list{display:flex;align-items:center;flex-wrap:wrap;list-style:none;margin:0;padding:0;gap:4px}.breadcrumb-item-wrapper{display:flex;align-items:center;gap:4px}.breadcrumb-item{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;color:var(--text-muted, #64748b);text-decoration:none;border-radius:6px;transition:all 0.2s ease;font-weight:500;cursor:pointer;background-color:transparent}.breadcrumb-item.size-sm{padding:4px 8px;font-size:12px;gap:4px}.breadcrumb-item.size-md{padding:6px 12px;font-size:14px;gap:6px}.breadcrumb-item.size-lg{padding:8px 16px;font-size:16px;gap:8px}.breadcrumb-item:hover:not(.active):not(.disabled){color:var(--color-primary, #10b981);background-color:var(--bg-primary, #eff6ff)}.breadcrumb-item.active{color:var(--text-primary, #1e293b);font-weight:600;cursor:default;background-color:var(--bg-secondary, #f1f5f9)}.breadcrumb-item.disabled{color:var(--color-primary, #cbd5e1);cursor:not-allowed;opacity:0.6}.breadcrumb-item.home{padding:6px 10px}.breadcrumb-content{display:flex;align-items:center;gap:inherit}.breadcrumb-icon{display:inline-flex;align-items:center;font-size:1em;line-height:1}.breadcrumb-icon svg{width:1em;height:1em;fill:currentColor}.breadcrumb-label{white-space:nowrap}.breadcrumb-separator{display:inline-flex;align-items:center;color:var(--color-primary, #cbd5e1);font-size:0.875em;user-select:none;padding:0 4px}.breadcrumb-separator svg{width:1em;height:1em;fill:currentColor}.breadcrumb-badge{display:inline-flex;align-items:center;justify-content:center;padding:2px 6px;border-radius:999px;font-size:10px;font-weight:700;line-height:1;margin-left:4px}.badge-neutral{background:var(--bg-secondary, #f1f5f9);color:var(--color-primary, #475569)}.badge-primary{background:var(--bg-primary, #dbeafe);color:var(--color-primary, #1e40af)}.badge-success{background:var(--bg-primary, #dcfce7);color:var(--color-success, #166534)}.badge-warning{background:var(--bg-primary, #fef9c3);color:var(--color-danger, #854d0e)}.badge-danger{background:var(--bg-primary, #fee2e2);color:var(--color-danger, #991b1b)}.badge-info{background:var(--bg-primary, #e0f2fe);color:var(--color-primary, #075985)}.ellipsis-wrapper{position:relative}.breadcrumb-ellipsis-btn{display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;padding:4px 8px;color:var(--color-primary, #94a3b8);cursor:pointer;border-radius:4px;transition:all 0.2s}.breadcrumb-ellipsis-btn:hover{background:var(--bg-secondary, #f1f5f9);color:var(--text-muted, #64748b)}.breadcrumb-dropdown{position:absolute;top:100%;left:0;z-index:1000;min-width:160px;background:var(--bg-primary, #ffffff);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);border:1px solid var(--border-subtle, #e2e8f0);margin-top:8px;padding:4px;animation:dropdownIn 0.2s ease-out}@keyframes dropdownIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.dropdown-list{list-style:none;margin:0;padding:0}.dropdown-item a{display:flex;align-items:center;gap:10px;padding:8px 12px;color:var(--color-primary, #475569);text-decoration:none;font-size:13px;font-weight:500;border-radius:6px;transition:background 0.2s}.dropdown-item a:hover{background:var(--bg-secondary, #f1f5f9);color:var(--color-primary, #10b981)}.dropdown-item .item-icon{font-size:14px}.breadcrumb-variant-pills .breadcrumb-item{background:var(--bg-secondary, #f1f5f9);border-radius:999px;margin:0 2px}.breadcrumb-variant-pills .breadcrumb-item:hover{background:var(--bg-primary, #e2e8f0)}.breadcrumb-variant-pills .breadcrumb-item.active{background:var(--color-primary, #10b981);color:var(--text-standard, #ffffff)}.breadcrumb-variant-glass{background:rgba(15, 23, 42, 0.3);backdrop-filter:blur(8px);padding:8px 16px;border-radius:12px;border:1px solid rgba(255, 255, 255, 0.1)}.breadcrumb-variant-glass .breadcrumb-item{color:rgba(255, 255, 255, 0.7)}.breadcrumb-variant-glass .breadcrumb-item:hover{color:var(--text-standard, #ffffff);background:rgba(255, 255, 255, 0.1)}.breadcrumb-variant-glass .breadcrumb-item.active{color:var(--text-standard, #ffffff);background:rgba(255, 255, 255, 0.2)}.breadcrumb-variant-glass .breadcrumb-separator{color:rgba(255, 255, 255, 0.3)}@media (max-width: 640px){.breadcrumb-item.size-md{padding:4px 8px;font-size:12px}.breadcrumb-item.size-lg{padding:6px 12px;font-size:14px}}"}},[769,"ui-breadcrumb-item",{label:[1],href:[1],icon:[1],iconLibrary:[1,"icon-library"],active:[4],disabled:[4],badge:[1],size:[1]}]),d=n,c=function(){"undefined"!=typeof customElements&&["ui-breadcrumb-item","ui-icon"].forEach((r=>{switch(r){case"ui-breadcrumb-item":customElements.get(t(r))||customElements.define(t(r),n);break;case"ui-icon":customElements.get(t(r))||o()}}))};export{d as UiBreadcrumbItem,c as defineCustomElement}

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

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

package/dist/components/ui-breadcrumb.js

@@ -0,0 +1 @@
+import{proxyCustomElement as r,HTMLElement as e,createEvent as a,h as i,Host as t,transformTag as o}from"@stencil/core/internal/client";import{d as s,a as n}from"./badge.js";import{d as c}from"./icon.js";const d=r(class extends e{constructor(r){super(),!1!==r&&this.__registerHost(),this.__attachShadow(),this.breadcrumbClick=a(this,"breadcrumbClick",7)}get el(){return this}isDropdownOpen=!1;items=[];separator="/";separatorIcon;maxItems=0;showHome=!1;homeIcon="🏠";size="md";iconLibrary="default";separatorIconLibrary="default";variant="default";structuredData=!1;baseUrl="";breadcrumbClick;parseItems(){if("string"==typeof this.items)try{return JSON.parse(this.items)}catch(r){return console.error("Failed to parse items JSON:",r),[]}return this.items}handleItemClick=(r,e)=>{r.disabled||r.active?e.preventDefault():this.breadcrumbClick.emit(r)};toggleDropdown=r=>{r.stopPropagation(),this.isDropdownOpen=!this.isDropdownOpen,this.isDropdownOpen?document.addEventListener("click",this.closeDropdown):document.removeEventListener("click",this.closeDropdown)};closeDropdown=()=>{this.isDropdownOpen=!1,document.removeEventListener("click",this.closeDropdown)};disconnectedCallback(){document.removeEventListener("click",this.closeDropdown)}getItems(){const r=this.parseItems();return r.length>0?r:Array.from(this.el.querySelectorAll("ui-breadcrumb-item")).map((r=>({label:r.label||r.textContent,href:r.href,icon:r.icon,iconLibrary:r.iconLibrary,active:r.active,disabled:r.disabled,badge:r.badge})))}renderStructuredData(r){if(!this.structuredData)return null;const e={"@context":"https://schema.org","@type":"BreadcrumbList",itemListElement:r.map(((r,e)=>({"@type":"ListItem",position:e+1,name:r.label,item:r.href?r.href.startsWith("http")?r.href:`${this.baseUrl}${r.href}`:void 0})))};return i("script",{type:"application/ld+json",innerHTML:JSON.stringify(e)})}renderSeparator(r){return i("li",{class:"breadcrumb-separator",key:r,"aria-hidden":"true"},i("slot",{name:"separator"},this.separatorIcon?i("ui-icon",{name:this.separatorIcon,library:this.iconLibrary,size:"1.1em"}):this.separator))}renderItem(r,e){const a={"breadcrumb-item":!0,active:!!r.active,disabled:!!r.disabled,["size-"+this.size]:!0},t=i("span",{class:"breadcrumb-content"},r.icon&&i("span",{class:"breadcrumb-icon"},i("ui-icon",{name:r.icon,library:r.iconLibrary||this.iconLibrary,size:"1.1em"})),i("span",{class:"breadcrumb-label"},r.label),void 0!==r.badge&&i("span",{class:"breadcrumb-badge badge-"+(r.badgeVariant||"neutral")},r.badge)),o=!r.href||r.disabled||r.active?i("span",{class:a,"aria-current":r.active?"page":void 0},t):i("a",{href:r.href,class:a,onClick:e=>this.handleItemClick(r,e),"aria-current":r.active?"page":void 0},t);return i("li",{key:"item-"+e,class:"breadcrumb-item-wrapper"},o)}renderHome(){return i("li",{class:"breadcrumb-item-wrapper"},i("a",{href:"/",class:"breadcrumb-item home size-"+this.size},i("span",{class:"breadcrumb-icon"},i("ui-icon",{name:this.homeIcon,library:this.iconLibrary,size:"1.2em"}))))}render(){const r=this.getItems(),e=[];if(this.showHome&&(e.push(this.renderHome()),r.length>0&&e.push(this.renderSeparator("home-sep"))),this.maxItems>0&&r.length>this.maxItems){const a=Math.max(1,this.maxItems-2),t=r.slice(1,r.length-a);e.push(this.renderItem(r[0],0)),e.push(this.renderSeparator("sep-0")),e.push(i("li",{key:"ellipsis",class:"breadcrumb-item-wrapper ellipsis-wrapper "+(this.isDropdownOpen?"is-open":"")},i("ui-button",{variant:"ghost",onClick:this.toggleDropdown,ariaLabel:"Show hidden breadcrumbs",size:"sm",label:"..."}),this.isDropdownOpen&&i("div",{class:"breadcrumb-dropdown"},i("ul",{class:"dropdown-list"},t.map(((r,e)=>i("li",{key:"collapsed-"+e,class:"dropdown-item"},i("a",{href:r.href||"#",onClick:e=>this.handleItemClick(r,e)},r.icon&&i("span",{class:"item-icon"},i("ui-icon",{name:r.icon,library:r.iconLibrary||this.iconLibrary,size:"1em"})),i("span",{class:"item-label"},r.label))))))))),e.push(this.renderSeparator("sep-ellipsis"));const o=r.slice(-a);o.forEach(((i,t)=>{const s=r.length-a+t;e.push(this.renderItem(i,s)),t<o.length-1&&e.push(this.renderSeparator("sep-"+s))}))}else r.forEach(((a,i)=>{e.push(this.renderItem(a,i)),i<r.length-1&&e.push(this.renderSeparator("sep-"+i))}));const a=["breadcrumb","breadcrumb-"+this.size,"breadcrumb-variant-"+this.variant].join(" ");return i(t,{key:"cc58f67d87e5fa59d510a9eaca3fa6bbb165e790","aria-label":"Breadcrumb"},this.renderStructuredData(r),i("nav",{key:"b88aceaa493445a9cc47f9e72fb40d84f57ceefd",class:a},i("ol",{key:"fecb2561f7b18d68971352a0096e4bb855813306",class:"breadcrumb-list"},e,i("slot",{key:"352d383a94182b58709fd670f75c11f0a4e53b99"}))))}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}.breadcrumb{display:flex;align-items:center}.breadcrumb-list{display:flex;align-items:center;flex-wrap:wrap;list-style:none;margin:0;padding:0;gap:4px}.breadcrumb-item-wrapper{display:flex;align-items:center;gap:4px}.breadcrumb-item{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;color:var(--text-muted, #64748b);text-decoration:none;border-radius:6px;transition:all 0.2s ease;font-weight:500;cursor:pointer;background-color:transparent}.breadcrumb-item.size-sm{padding:4px 8px;font-size:12px;gap:4px}.breadcrumb-item.size-md{padding:6px 12px;font-size:14px;gap:6px}.breadcrumb-item.size-lg{padding:8px 16px;font-size:16px;gap:8px}.breadcrumb-item:hover:not(.active):not(.disabled){color:var(--color-primary, #10b981);background-color:var(--bg-primary, #eff6ff)}.breadcrumb-item.active{color:var(--text-primary, #1e293b);font-weight:600;cursor:default;background-color:var(--bg-secondary, #f1f5f9)}.breadcrumb-item.disabled{color:var(--color-primary, #cbd5e1);cursor:not-allowed;opacity:0.6}.breadcrumb-item.home{padding:6px 10px}.breadcrumb-content{display:flex;align-items:center;gap:inherit}.breadcrumb-icon{display:inline-flex;align-items:center;font-size:1em;line-height:1}.breadcrumb-icon svg{width:1em;height:1em;fill:currentColor}.breadcrumb-label{white-space:nowrap}.breadcrumb-separator{display:inline-flex;align-items:center;color:var(--color-primary, #cbd5e1);font-size:0.875em;user-select:none;padding:0 4px}.breadcrumb-separator svg{width:1em;height:1em;fill:currentColor}.breadcrumb-badge{display:inline-flex;align-items:center;justify-content:center;padding:2px 6px;border-radius:999px;font-size:10px;font-weight:700;line-height:1;margin-left:4px}.badge-neutral{background:var(--bg-secondary, #f1f5f9);color:var(--color-primary, #475569)}.badge-primary{background:var(--bg-primary, #dbeafe);color:var(--color-primary, #1e40af)}.badge-success{background:var(--bg-primary, #dcfce7);color:var(--color-success, #166534)}.badge-warning{background:var(--bg-primary, #fef9c3);color:var(--color-danger, #854d0e)}.badge-danger{background:var(--bg-primary, #fee2e2);color:var(--color-danger, #991b1b)}.badge-info{background:var(--bg-primary, #e0f2fe);color:var(--color-primary, #075985)}.ellipsis-wrapper{position:relative}.breadcrumb-ellipsis-btn{display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;padding:4px 8px;color:var(--color-primary, #94a3b8);cursor:pointer;border-radius:4px;transition:all 0.2s}.breadcrumb-ellipsis-btn:hover{background:var(--bg-secondary, #f1f5f9);color:var(--text-muted, #64748b)}.breadcrumb-dropdown{position:absolute;top:100%;left:0;z-index:1000;min-width:160px;background:var(--bg-primary, #ffffff);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);border:1px solid var(--border-subtle, #e2e8f0);margin-top:8px;padding:4px;animation:dropdownIn 0.2s ease-out}@keyframes dropdownIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.dropdown-list{list-style:none;margin:0;padding:0}.dropdown-item a{display:flex;align-items:center;gap:10px;padding:8px 12px;color:var(--color-primary, #475569);text-decoration:none;font-size:13px;font-weight:500;border-radius:6px;transition:background 0.2s}.dropdown-item a:hover{background:var(--bg-secondary, #f1f5f9);color:var(--color-primary, #10b981)}.dropdown-item .item-icon{font-size:14px}.breadcrumb-variant-pills .breadcrumb-item{background:var(--bg-secondary, #f1f5f9);border-radius:999px;margin:0 2px}.breadcrumb-variant-pills .breadcrumb-item:hover{background:var(--bg-primary, #e2e8f0)}.breadcrumb-variant-pills .breadcrumb-item.active{background:var(--color-primary, #10b981);color:var(--text-standard, #ffffff)}.breadcrumb-variant-glass{background:rgba(15, 23, 42, 0.3);backdrop-filter:blur(8px);padding:8px 16px;border-radius:12px;border:1px solid rgba(255, 255, 255, 0.1)}.breadcrumb-variant-glass .breadcrumb-item{color:rgba(255, 255, 255, 0.7)}.breadcrumb-variant-glass .breadcrumb-item:hover{color:var(--text-standard, #ffffff);background:rgba(255, 255, 255, 0.1)}.breadcrumb-variant-glass .breadcrumb-item.active{color:var(--text-standard, #ffffff);background:rgba(255, 255, 255, 0.2)}.breadcrumb-variant-glass .breadcrumb-separator{color:rgba(255, 255, 255, 0.3)}@media (max-width: 640px){.breadcrumb-item.size-md{padding:4px 8px;font-size:12px}.breadcrumb-item.size-lg{padding:6px 12px;font-size:14px}}"}},[769,"ui-breadcrumb",{items:[1],separator:[1],separatorIcon:[1,"separator-icon"],maxItems:[2,"max-items"],showHome:[4,"show-home"],homeIcon:[1,"home-icon"],size:[1],iconLibrary:[1,"icon-library"],separatorIconLibrary:[1,"separator-icon-library"],variant:[1],structuredData:[4,"structured-data"],baseUrl:[1,"base-url"],isDropdownOpen:[32]}]),b=d,p=function(){"undefined"!=typeof customElements&&["ui-breadcrumb","ui-badge","ui-button","ui-icon"].forEach((r=>{switch(r){case"ui-breadcrumb":customElements.get(o(r))||customElements.define(o(r),d);break;case"ui-badge":customElements.get(o(r))||n();break;case"ui-button":customElements.get(o(r))||s();break;case"ui-icon":customElements.get(o(r))||c()}}))};export{b as UiBreadcrumb,p as defineCustomElement}

package/dist/components/ui-button-toggle-group.d.ts

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

package/dist/components/ui-button-toggle-group.js

@@ -0,0 +1 @@
+import{proxyCustomElement as t,HTMLElement as i,createEvent as o,h as e,transformTag as r}from"@stencil/core/internal/client";import{d as n,a as s}from"./badge.js";import{d as a}from"./icon.js";import{d as l}from"./input.js";const h=t(class extends i{get el(){return this}internals;focusFrameId=null;constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.buttonToggleGroupChange=o(this,"buttonToggleGroupChange",7),this.buttonToggleGroupAction=o(this,"buttonToggleGroupAction",7),this.buttonToggleGroupBatch=o(this,"buttonToggleGroupBatch",7),this.buttonToggleGroupSearch=o(this,"buttonToggleGroupSearch",7),this.buttonToggleGroupExport=o(this,"buttonToggleGroupExport",7),this.buttonToggleGroupImport=o(this,"buttonToggleGroupImport",7),this.buttonToggleGroupAnalytics=o(this,"buttonToggleGroupAnalytics",7),this.internals=this.el.attachInternals()}value="";name="";disabled=!1;readonly=!1;required=!1;invalid=!1;label="";helperText="";errorMessage="";orientation="horizontal";size="md";color="primary";variant="soft";options=[];fullWidth=!1;iconPosition="left";iconLibrary="default";library;iconOnly=!1;mode="segmented";buttonAction;buttonActionLabel="Action";keepButtonLabel=!1;customContent=!1;loading=!1;shape="rounded";multiSelect=!1;batchActions=!1;searchEnabled=!1;exportEnabled=!1;importEnabled=!1;analyticsEnabled=!1;advancedTheme="";reveal="none";revealDelay=0;revealStagger=50;magneticIndicator=!1;rtl=!1;wrap=!1;width="";persistKey="";buttons=[];isDropdownOpen=!1;searchQuery="";selectedValues=[];analytics={};focusIndex=-1;ariaLive="";selectionIndicatorRef;resizeObserver;mutationObserver;buttonToggleGroupChange;buttonToggleGroupAction;buttonToggleGroupBatch;buttonToggleGroupSearch;buttonToggleGroupExport;buttonToggleGroupImport;buttonToggleGroupAnalytics;componentWillLoad(){if(this.normalizeProps(),this.updateOptions(),this.syncButtons(),this.updateOptionsFromChildren(),this.persistKey)try{const t=localStorage.getItem(this.persistKey);null!==t&&(this.value=JSON.parse(t))}catch{}}componentDidLoad(){"dropdown"===this.mode&&document.addEventListener("click",this.handleClickOutside),this.el.addEventListener("keydown",this.handleKeyDown),"undefined"!=typeof ResizeObserver&&(this.resizeObserver=new ResizeObserver((()=>this.updateIndicator())),this.resizeObserver.observe(this.el)),"undefined"!=typeof MutationObserver&&(this.mutationObserver=new MutationObserver((()=>this.updateOptionsFromChildren())),this.mutationObserver.observe(this.el,{childList:!0,subtree:!0,attributes:!0})),setTimeout((()=>this.updateIndicator()),100)}disconnectedCallback(){document.removeEventListener("click",this.handleClickOutside),this.el.removeEventListener("keydown",this.handleKeyDown),null!==this.focusFrameId&&(cancelAnimationFrame(this.focusFrameId),this.focusFrameId=null),this.resizeObserver&&this.resizeObserver.disconnect(),this.mutationObserver&&this.mutationObserver.disconnect()}handleMouseMove=t=>{if(!this.magneticIndicator||!this.selectionIndicatorRef||"dropdown"===this.mode||this.multiSelect)return;const i=Array.from(this.el.shadowRoot?.querySelectorAll("ui-button")??[]).find((t=>t.value===this.value));if(!i)return;const o=i.getBoundingClientRect(),e=o.left+o.width/2,r=o.top+o.height/2;if(Math.hypot(t.clientX-e,t.clientY-r)<150){const o=4;this.selectionIndicatorRef.style.transform=`translate(${i.offsetLeft+(t.clientX-e)/8+o}px, ${i.offsetTop+(t.clientY-r)/8+o}px) scale(1.02)`}else{const t=4;this.selectionIndicatorRef.style.transform=`translate(${i.offsetLeft+t}px, ${i.offsetTop+t}px) scale(1)`}};updateIndicator(){this.selectionIndicatorRef&&"dropdown"!==this.mode&&!this.multiSelect&&requestAnimationFrame((()=>{const t=Array.from(this.el.shadowRoot?.querySelectorAll("ui-button")??[]),i=t.find((t=>t.value===this.value));if(i){const o=i.offsetLeft,e=i.offsetTop,r=i.offsetHeight,n=4;this.selectionIndicatorRef.style.width=i.offsetWidth-2*n+"px",this.selectionIndicatorRef.style.height=r-2*n+"px",this.selectionIndicatorRef.style.transform=`translate(${o+n}px, ${e+n}px)`,this.selectionIndicatorRef.style.opacity="1",t.forEach((t=>{t.style.setProperty("--hide-button-selection","1")}))}else this.selectionIndicatorRef.style.opacity="0",t.forEach((t=>{t.style.setProperty("--hide-button-selection","0")}))}))}handleClickOutside=t=>{this.el.contains(t.target)||(this.isDropdownOpen=!1)};componentDidUpdate(){this.syncButtons(),this.updateIndicator()}watchValue(){this.syncButtons(),this.analyticsEnabled&&this.trackAnalytics("change",this.value),this.ariaLive="Selection changed: "+(Array.isArray(this.value)?this.value.join(", "):this.value),this.internals.setFormValue(Array.isArray(this.value)?this.value.join(","):this.value||"")}handleColorChange(){this.normalizeProps()}handleOptionsChange(){this.updateOptions()}normalizeProps(){try{"string"==typeof this.color&&this.color.startsWith("{")&&(this.color=JSON.parse(this.color)),"string"==typeof this.options&&(this.buttons=JSON.parse(this.options))}catch(t){console.warn("Failed to parse complex button-toggle-group prop",t)}}updateOptions(){if("string"==typeof this.options)try{this.buttons=JSON.parse(this.options)}catch{console.error("Invalid options JSON"),this.buttons=[]}else Array.isArray(this.options)&&this.options.length>0?this.buttons=[...this.options]:this.updateOptionsFromChildren()}updateOptionsFromChildren(){const t=Array.from(this.el.children);if(0===t.length)return;const i=t.filter((t=>"ui-button-toggle"===t.tagName.toLowerCase()||"ui-button"===t.tagName.toLowerCase())).map(((t,i)=>{const o=t;return{value:o.value||t.getAttribute("value")||"opt-"+i,label:o.label||t.getAttribute("label")||t.textContent?.trim(),icon:o.icon||t.getAttribute("icon"),disabled:o.disabled||t.hasAttribute("disabled"),description:o.description||t.getAttribute("description"),descriptionPosition:o.descriptionPosition||t.getAttribute("description-position"),iconLibrary:o.library||o.iconLibrary||t.getAttribute("icon-library")||t.getAttribute("library")}}));JSON.stringify(this.buttons)!==JSON.stringify(i)&&(this.buttons=i)}handleButtonToggleChange(t){const i=t.detail.value;this.multiSelect?(this.selectedValues=this.selectedValues.includes(i)?this.selectedValues.filter((t=>t!==i)):[...this.selectedValues,i],this.value=[...this.selectedValues],this.buttonToggleGroupChange.emit({value:this.value}),this._persistValue(),this.analyticsEnabled&&this.trackAnalytics("multiSelect",this.value),this.ariaLive="Selection changed: "+this.selectedValues.join(", ")):this.value!==i?(this.value=i,this.syncButtons(),this.buttonToggleGroupChange.emit({value:this.value}),this._persistValue(),this.analyticsEnabled&&this.trackAnalytics("change",this.value),this.ariaLive="Selection changed: "+this.value):this.required||(this.value="",this.syncButtons(),this.buttonToggleGroupChange.emit({value:this.value}),this._persistValue(),this.analyticsEnabled&&this.trackAnalytics("deselect",this.value),this.ariaLive="Selection cleared")}handleDropdownToggle=t=>{t.stopPropagation(),this.disabled||this.readonly||(this.isDropdownOpen=!this.isDropdownOpen)};handleButtonAction=t=>{t.stopPropagation(),this.disabled||this.readonly||(this.buttonAction&&this.buttonAction(),this.buttonToggleGroupAction.emit({value:this.value}))};handleOptionSelect=(t,i)=>{i.stopPropagation(),this.disabled||this.readonly||(this.value=t,this.isDropdownOpen=!1,this.syncButtons(),this.buttonToggleGroupChange.emit({value:this.value}),this._persistValue())};_persistValue(){if(this.persistKey)try{localStorage.setItem(this.persistKey,JSON.stringify(this.value))}catch{}}syncButtons(){(this.el.shadowRoot?.querySelectorAll("ui-button")??[]).forEach(this.multiSelect&&Array.isArray(this.value)?t=>{t.selected=this.value.includes(t.value)}:t=>{t.selected=t.value===this.value})}renderLabel(){return this.label?e("div",{class:"button-group-label"},this.label,this.required&&e("span",{class:"required-indicator"},"*"),this.searchEnabled&&e("ui-input",{class:"button-group-search",placeholder:"Search...",value:this.searchQuery,prefixIcon:"search",iconLibrary:this.iconLibrary,showClear:!0,size:"sm",onInputChange:t=>this.handleSearch(t.detail),onInputClear:()=>this.handleSearch(""),"aria-label":"Search toggles"})):null}renderHelperText(){return this.invalid&&this.errorMessage?e("div",{class:"helper-text error"},e("ui-icon",{name:"exclamation-circle",library:"fontawesome",size:"14px"}),this.errorMessage):this.helperText?e("div",{class:"helper-text"},this.helperText):this.ariaLive?e("div",{class:"sr-only","aria-live":"polite"},this.ariaLive):null}getFilteredButtons(){return this.searchEnabled&&this.searchQuery?this.buttons.filter((t=>(t.label||t.value).toLowerCase().includes(this.searchQuery.toLowerCase()))):this.buttons}renderDropdownButton(){const t=this.getFilteredButtons(),i=this.buttons.find((t=>t.value===this.value)),o=this.keepButtonLabel?this.buttonActionLabel:i?.label||this.buttonActionLabel,r=this.keepButtonLabel?null:i?.icon,n={"dropdown-menu":!0,"dropdown-menu-open":this.isDropdownOpen};return e("div",{class:"dropdown-container"},e("div",{class:{"dropdown-button":!0,"dropdown-button-open":this.isDropdownOpen,"dropdown-button-disabled":this.disabled,"dropdown-button-readonly":this.readonly,["dropdown-button-"+this.size]:!0,["dropdown-button-"+this.color]:!0,["dropdown-button-"+this.variant]:!0,["dropdown-button-"+this.shape]:!0}},e("ui-button",{variant:"ghost",class:"dropdown-action-button",onClick:this.handleButtonAction,disabled:this.disabled||this.loading,loading:this.loading,icon:r,iconLibrary:this.iconLibrary,label:o,size:this.size,color:this.color,justify:"center"}),e("ui-button",{variant:"ghost",class:"dropdown-toggle-button",onClick:this.handleDropdownToggle,disabled:this.disabled||this.loading,ariaLabel:this.isDropdownOpen?"Close dropdown":"Open dropdown",icon:this.isDropdownOpen?"chevron-up":"chevron-down",iconLibrary:"lucide",iconOnly:!0,size:this.size,color:this.color})),e("div",{class:n},this.searchEnabled&&e("div",{class:"dropdown-search"},e("input",{type:"text",value:this.searchQuery,onInput:t=>this.searchQuery=t.target.value,placeholder:"Search..."})),this.customContent?e("div",{class:"dropdown-custom-content"},e("slot",{name:"dropdown-content"})):t.map(((t,i)=>{const o=this.value===t.value;return e("div",{class:{"dropdown-option":!0,"dropdown-option-selected":o,"dropdown-option-disabled":t.disabled},onClick:i=>!t.disabled&&this.handleOptionSelect(t.value,i),role:"option","aria-selected":""+o,style:{"--index":""+i}},t.icon&&e("div",{class:"option-icon"},e("ui-icon",{name:t.icon,library:t.iconLibrary||this.iconLibrary,size:"16px"})),t.avatarSrc&&e("div",{class:"option-avatar"},e("img",{src:t.avatarSrc,alt:t.avatarAlt||t.label}),t.status&&e("span",{class:"status-dot status-"+t.status})),e("span",{class:"option-label"},t.label||t.value),o&&e("div",{class:"option-check"},e("ui-icon",{name:"check",library:"lucide",size:"14px"})))}))))}render(){const t={"ui-button-toggle-group":!0,["group-"+this.orientation]:!0,"group-disabled":this.disabled,"group-invalid":this.invalid,"group-full-width":this.fullWidth,"group-rtl":this.rtl,"group-multi-select":this.multiSelect,"group-single-select":!this.multiSelect,"group-dropdown-mode":"dropdown"===this.mode,["group-"+this.color]:!0,["group-variant-"+this.variant]:!0,["group-size-"+this.size]:!0,["group-shape-"+this.shape]:!0,["theme-"+this.advancedTheme]:!!this.advancedTheme,["group-reveal-"+this.reveal]:"none"!==this.reveal},i={"button-list":!0,["button-list-"+this.orientation]:!0},o=this.getFilteredButtons();let r="var(--color-primary, #10b981)",n="var(--color-primary-contrast, #ffffff)";if("string"==typeof this.color)this.color.startsWith("#")||this.color.startsWith("rgb")?(r=this.color,this.color.startsWith("#")&&7===this.color.length&&(n=(299*parseInt(this.color.slice(1,3),16)+587*parseInt(this.color.slice(3,5),16)+114*parseInt(this.color.slice(5,7),16))/1e3>=128?"#1a1a1a":"#ffffff")):(r=`var(--color-${this.color})`,n=`var(--color-${this.color}-contrast, #ffffff)`);else if(this.color&&"object"==typeof this.color){const t=this.color.from||"#10b981";r=`linear-gradient(135deg, ${t}, ${this.color.to||t})`,n="#ffffff"}return e("div",{key:"2a8531e523b28208a24139e5424eaa90be9c7073",class:t,role:this.multiSelect?"group":"radiogroup","aria-label":this.label,tabIndex:0,style:{width:this.width,"--indicator-bg":r,"--indicator-text-color":n},onMouseMove:t=>this.handleMouseMove(t),onMouseLeave:()=>this.updateIndicator()},this.renderLabel(),this.batchActions&&e("div",{key:"e30632897c55499283fe0e6886bd7a3e7f590bad",class:"batch-actions"},e("ui-button",{key:"407de40948622de1cc9e14fcdae9d9ce06d8ec8c",variant:"ghost",onClick:this.selectAll,disabled:this.disabled,label:"Select All",size:"sm"}),e("ui-button",{key:"19699cfd346bb5d7fa4bab0f56f0b8b55333d148",variant:"ghost",onClick:this.clearAll,disabled:this.disabled,label:"Clear All",size:"sm"}),this.exportEnabled&&e("ui-button",{key:"a3e66305b6edca7fc19394bd7413af5f5801fc5f",variant:"ghost",onClick:this.exportSelection,label:"Export",size:"sm"}),this.importEnabled&&e("ui-button",{key:"de9512a60ee5bfdef71b409f17be20f0c1d575a8",variant:"ghost",onClick:this.importSelection,label:"Import",size:"sm"})),"dropdown"===this.mode?this.renderDropdownButton():e("div",{class:i},!this.multiSelect&&e("div",{class:"selection-indicator",ref:t=>this.selectionIndicatorRef=t}),o.map(((t,i)=>e("ui-button",{key:t.value,value:t.value,label:t.label,icon:t.icon,iconPosition:t.icon?this.iconPosition:"none",iconOnly:this.iconOnly,name:this.name,selected:this.multiSelect?this.selectedValues.includes(t.value):this.value===t.value,disabled:this.disabled||t.disabled,readonly:this.readonly,loading:this.loading,size:this.size,variant:this.variant,description:t.description,"description-position":t.descriptionPosition,"full-width":this.fullWidth,reveal:this.reveal,"reveal-delay":this.revealDelay+i*this.revealStagger,tabIndex:this.focusIndex===i?0:-1,"aria-checked":this.multiSelect?this.selectedValues.includes(t.value):this.value===t.value,"aria-label":t.label||t.value,onFocus:()=>this.handleFocus(i),onBlur:this.handleBlur,onClick:i=>{i.stopPropagation(),this.disabled||t.disabled||this.handleButtonToggleChange({detail:{value:t.value}})},shape:this.shape,iconLibrary:t.iconLibrary||this.library||this.iconLibrary})))),this.renderHelperText(),this.analyticsEnabled&&e("div",{key:"cefc7fae744e3cc636c5b014a53fbb3ac07051f2",class:"analytics-info"},e("pre",{key:"00a1e53ab91350e9a5c7cc753e782f64a48e4f99"},JSON.stringify(this.analytics,null,2))))}handleKeyDown=t=>{if(this.disabled||this.readonly)return;const i=this.searchEnabled&&this.searchQuery?this.buttons.filter((t=>(t.label||t.value).toLowerCase().includes(this.searchQuery.toLowerCase()))):this.buttons;if(0!==i.length)if("ArrowRight"===t.key||"ArrowDown"===t.key)this.focusIndex=(this.focusIndex+1)%i.length,this.focusButton(this.focusIndex),t.preventDefault();else if("ArrowLeft"===t.key||"ArrowUp"===t.key)this.focusIndex=(this.focusIndex-1+i.length)%i.length,this.focusButton(this.focusIndex),t.preventDefault();else if(" "===t.key||"Enter"===t.key){const o=i[this.focusIndex];o&&!o.disabled&&this.handleButtonToggleChange({detail:{value:o.value}}),t.preventDefault()}};focusButton(t){const i=this.el.shadowRoot?.querySelectorAll("ui-button")??[];i[t]&&i[t].focus()}scheduleFocusIndexUpdate(t,i=!1){null!==this.focusFrameId&&cancelAnimationFrame(this.focusFrameId),this.focusFrameId=requestAnimationFrame((()=>{if(this.focusFrameId=null,i){const t=this.el.shadowRoot?.activeElement||document.activeElement;if(t&&this.el.contains(t))return}this.focusIndex!==t&&(this.focusIndex=t)}))}handleFocus(t){this.scheduleFocusIndexUpdate(t)}handleBlur=()=>{this.scheduleFocusIndexUpdate(-1,!0)};handleSearch(t){this.searchQuery=t,this.buttonToggleGroupSearch.emit({query:t})}selectAll=()=>{this.multiSelect&&(this.selectedValues=this.buttons.map((t=>t.value)),this.value=[...this.selectedValues],this.buttonToggleGroupBatch.emit({values:this.selectedValues}),this.ariaLive="All selected: "+this.selectedValues.join(", "))};clearAll=()=>{this.multiSelect&&(this.selectedValues=[],this.value=[],this.buttonToggleGroupBatch.emit({values:[]}),this.ariaLive="Selection cleared")};exportSelection=()=>{if(!this.exportEnabled)return;let t;t=this.multiSelect?Array.isArray(this.selectedValues)?this.selectedValues:[]:"string"==typeof this.value?[this.value]:[],this.buttonToggleGroupExport.emit({values:t}),this.ariaLive="Exported: "+t.join(", ")};importSelection=()=>{this.importEnabled&&(this.selectedValues=this.buttons.slice(0,2).map((t=>t.value)),this.value=[...this.selectedValues],this.buttonToggleGroupImport.emit({values:this.selectedValues}),this.ariaLive="Imported: "+this.selectedValues.join(", "))};trackAnalytics(t,i){this.analyticsEnabled&&(this.analytics[t]||(this.analytics[t]=[]),this.analytics[t].push({value:i,timestamp:Date.now()}),this.buttonToggleGroupAnalytics.emit({event:t,value:i}))}static get formAssociated(){return!0}static get watchers(){return{value:[{watchValue:0}],color:[{handleColorChange:0}],options:[{handleOptionsChange: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}.ui-button-toggle-group{display:inline-flex;flex-direction:column;gap:12px;width:max-content;min-width:fit-content;font-family:inherit}.ui-button-toggle-group.group-rtl{direction:rtl}.ui-button-toggle-group.group-wrap .button-list{flex-wrap:wrap}.ui-button-toggle-group{}.ui-button-toggle-group.group-shape-round{--group-radius:12px;--indicator-radius:8px}.ui-button-toggle-group.group-shape-pill{--group-radius:99px;--indicator-radius:99px}.ui-button-toggle-group.group-shape-square{--group-radius:0px;--indicator-radius:0px}.ui-button-toggle-group{}.ui-button-toggle-group.group-variant-chip .button-list{background:transparent;padding:4px;gap:10px;box-shadow:none;flex-wrap:wrap;border:none !important;overflow:visible}.ui-button-toggle-group.group-variant-chip ui-button{transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1)}.ui-button-toggle-group.group-variant-chip ui-button:hover{transform:translateY(-2px)}.ui-button-toggle-group.group-variant-chip ui-button::part(button){background:rgba(255, 255, 255, 0.5) !important;backdrop-filter:blur(8px);border:1px solid rgba(0, 0, 0, 0.05) !important;border-radius:99px !important;color:#64748b !important;font-weight:500 !important;--button-padding:8px 18px;--ui-button-height:auto;min-height:32px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.02) !important}.ui-button-toggle-group.group-variant-chip ui-button:hover::part(button){border-color:rgba(var(--color-primary-rgb, 16, 185, 129), 0.2) !important;background:#ffffff !important;color:var(--color-primary, #10b981) !important;box-shadow:0 4px 12px rgba(0, 0, 0, 0.05) !important}.ui-button-toggle-group.group-variant-chip ui-button[selected]::part(button){background:var(--indicator-bg, var(--color-primary, #10b981)) !important;color:#ffffff !important;opacity:1 !important;border-color:transparent !important;font-weight:700 !important;box-shadow:0 8px 20px rgba(var(--color-primary-rgb, 16, 185, 129), 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;transform:translateY(-1px)}.ui-button-toggle-group.group-variant-chip ui-button[selected]:hover::part(button){filter:brightness(1.1);box-shadow:0 10px 25px rgba(var(--color-primary-rgb, 16, 185, 129), 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important}.button-group-label{font-weight:700;color:var(--label-color, #1e293b);font-size:0.9375rem;margin-bottom:6px;display:flex;align-items:center}.required-indicator{color:var(--color-danger-hover, #dc2626);margin-left:4px}.button-list{display:flex;padding:var(--group-padding, 6px);padding:var(--group-padding, 4px);border-radius:var(--group-radius, 10px);position:relative;background:var(--button-group-bg, #f1f5f9);border:1px solid var(--border-color, #e2e8f0);overflow:hidden;transform:translateZ(0);isolation:isolate;background-clip:padding-box;color:var(--text-color, #64748b);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.03)}.selection-indicator{position:absolute;top:0;left:0;background:var(--indicator-bg, #10b981);opacity:0;pointer-events:none;transition:transform 0.4s cubic-bezier(0.19, 1, 0.22, 1), width 0.3s cubic-bezier(0.19, 1, 0.22, 1), height 0.3s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.2s ease;z-index:1;border-radius:var(--indicator-radius, 99px);box-shadow:0 8px 20px rgba(0, 0, 0, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.3);border:1px solid rgba(255, 255, 255, 0.1);box-sizing:border-box;}.selection-indicator::after{content:"";position:absolute;inset:0;background:rgba(0, 0, 0, 0.05);border-radius:inherit;opacity:0;transition:opacity 0.2s}.button-list:hover .selection-indicator::after{opacity:0.2}.button-list-horizontal{flex-direction:row;align-items:stretch}.button-list-vertical{flex-direction:column;align-items:stretch}.button-list ui-button{flex:none;position:relative;z-index:2;--button-padding:8px 16px;--ui-button-height:auto;min-height:44px}.button-list-vertical ui-button{width:100%}.button-list ui-button[icon-only]{width:44px !important;--button-padding:0 !important;--ui-button-height:44px !important;flex:0 0 44px !important}.button-list-full-width ui-button{flex:1}.button-list ui-button::part(button){background:rgba(var(--ui-input-focus-rgb, 99, 102, 241), 0.02) !important;color:inherit !important;border:none !important;box-shadow:none !important;font-weight:600 !important;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);--button-border-radius:var(--indicator-radius, 8px);opacity:1}.button-list ui-button::part(subtitle){opacity:0.7;color:inherit !important}.button-list ui-button:hover::part(button){opacity:1;background:rgba(var(--ui-input-focus-rgb, 99, 102, 241), 0.05) !important;color:var(--indicator-bg, var(--color-primary-dark, #059669)) !important}.button-list:not(.group-multi-select) ui-button[selected]::part(button){color:var(--indicator-text-color, #ffffff);z-index:5;opacity:1}.ui-button-toggle-group .button-list ui-button[selected]::part(title),.ui-button-toggle-group .button-list ui-button[selected]::part(subtitle),.ui-button-toggle-group .button-list ui-button[selected]::part(icon){color:var(--indicator-text-color, #ffffff);opacity:1}.group-multi-select .button-list ui-button[selected]::part(button){background:var(--indicator-bg, #10b981);color:var(--indicator-text-color, #ffffff);opacity:1;box-shadow:0 4px 12px rgba(var(--color-primary-rgb, 16, 185, 129), 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2);border-radius:var(--indicator-radius, 30px);border:1px solid rgba(255, 255, 255, 0.1);z-index:5;transform:scale(0.96)}.button-list-horizontal:not([style*="--group-padding"]) ui-button:not(:last-child)::after{content:"";position:absolute;right:0;top:25%;height:50%;width:1px;background:linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.08) 20%, rgba(0, 0, 0, 0.08) 80%, transparent);z-index:3;transition:opacity 0.2s ease}.button-list ui-button[selected]::after,.button-list ui-button[selected]+ui-button::after{opacity:0 !important}.helper-text{font-size:0.875rem;color:var(--text-muted, #64748b);margin-top:6px;font-weight:400}.helper-text.error{color:#ef4444}.ui-button-toggle-group[variant=dropdown] .button-list{--group-padding:0;--indicator-radius:4px}.dropdown-container{position:relative;display:inline-flex}.dropdown-button{display:flex;align-items:stretch;background:var(--button-group-bg, #f1f5f9);border:1px solid var(--border-color, #e2e8f0);border-radius:var(--group-radius, 10px);overflow:hidden;transition:all 0.2s ease}.dropdown-button.dropdown-button-open{border-color:var(--color-primary, #10b981);box-shadow:0 0 0 3px rgba(16, 185, 129, 0.1)}.dropdown-action-button{border-radius:0 !important;flex:1;--button-padding:0 16px;--ui-button-height:44px}.dropdown-toggle-button{border-radius:0 !important;width:44px;border-left:1px solid rgba(0, 0, 0, 0.05) !important;--button-padding:0;--ui-button-height:44px}.dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;min-width:100%;width:max-content;background:#ffffff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 10px 25px rgba(0, 0, 0, 0.1);z-index:1000;display:flex;flex-direction:column;padding:6px;opacity:0;visibility:hidden;transform:translateY(10px);transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1)}.dropdown-menu.dropdown-menu-open{opacity:1;visibility:visible;transform:translateY(0)}.dropdown-option{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:6px;cursor:pointer;color:#475569;font-size:0.9375rem;font-weight:500;transition:all 0.15s ease;white-space:nowrap}.dropdown-option:hover{background:#f1f5f9;color:#1e293b}.dropdown-option.dropdown-option-selected{background:rgba(16, 185, 129, 0.1);color:#10b981}.dropdown-option.dropdown-option-disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}.dropdown-option .option-icon{display:flex;align-items:center;justify-content:center;color:inherit;font-size:1.1em}.dropdown-option .option-label{flex:1}.dropdown-option .option-check{color:#10b981;margin-left:auto;display:flex;align-items:center}.dropdown-search{padding:4px 8px 8px;border-bottom:1px solid #f1f5f9;margin-bottom:4px}.dropdown-search input{width:100%;padding:8px 12px;border:1px solid #e2e8f0;border-radius:6px;font-size:0.8125rem;outline:none;transition:all 0.2s}.dropdown-search input:focus{border-color:#10b981;box-shadow:0 0 0 2px rgba(16, 185, 129, 0.1)}'}},[833,"ui-button-toggle-group",{value:[1025],name:[1],disabled:[4],readonly:[4],required:[4],invalid:[4],label:[1],helperText:[1,"helper-text"],errorMessage:[1,"error-message"],orientation:[1],size:[8],color:[1025],variant:[8],options:[1025],fullWidth:[4,"full-width"],iconPosition:[1,"icon-position"],iconLibrary:[1,"icon-library"],library:[1],iconOnly:[4,"icon-only"],mode:[1],buttonAction:[16],buttonActionLabel:[1,"button-action-label"],keepButtonLabel:[4,"keep-button-label"],customContent:[4,"custom-content"],loading:[4],shape:[8],multiSelect:[4,"multi-select"],batchActions:[4,"batch-actions"],searchEnabled:[4,"search-enabled"],exportEnabled:[4,"export-enabled"],importEnabled:[4,"import-enabled"],analyticsEnabled:[4,"analytics-enabled"],advancedTheme:[1,"advanced-theme"],reveal:[1],revealDelay:[2,"reveal-delay"],revealStagger:[2,"reveal-stagger"],magneticIndicator:[4,"magnetic-indicator"],rtl:[4],wrap:[4],width:[1],persistKey:[1,"persist-key"],buttons:[32],isDropdownOpen:[32],searchQuery:[32],selectedValues:[32],analytics:[32],focusIndex:[32],ariaLive:[32]},[[0,"buttonToggleChange","handleButtonToggleChange"]],{value:[{watchValue:0}],color:[{handleColorChange:0}],options:[{handleOptionsChange:0}]}]),p=h,d=function(){"undefined"!=typeof customElements&&["ui-button-toggle-group","ui-badge","ui-button","ui-icon","ui-input"].forEach((t=>{switch(t){case"ui-button-toggle-group":customElements.get(r(t))||customElements.define(r(t),h);break;case"ui-badge":customElements.get(r(t))||s();break;case"ui-button":customElements.get(r(t))||n();break;case"ui-icon":customElements.get(r(t))||a();break;case"ui-input":customElements.get(r(t))||l()}}))};export{p as UiButtonToggleGroup,d as defineCustomElement}

package/dist/components/ui-button-toggle.d.ts

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

package/dist/components/ui-button-toggle.js

@@ -0,0 +1 @@
+import{B as o,d as t}from"./button-toggle.js";const s=o,r=t;export{s as UiButtonToggle,r as defineCustomElement}

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

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

package/dist/components/ui-button.js

@@ -0,0 +1 @@
+import{b as o,d as s}from"./badge.js";const a=o,r=s;export{a as UiButton,r as defineCustomElement}

package/dist/components/ui-callout-banner.d.ts

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

package/dist/components/ui-callout-banner.js

@@ -0,0 +1 @@
+import{proxyCustomElement as t,HTMLElement as a,createEvent as e,h as o,Host as i,transformTag as s}from"@stencil/core/internal/client";import{s as l,d as r}from"./icon.js";import{d as n,a as c}from"./badge.js";const u=t(class extends a{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.calloutDismiss=e(this,"calloutDismiss",7),this.calloutShow=e(this,"calloutShow",7),this.calloutAction=e(this,"calloutAction",7)}ariaRole;testId;focusOnShow=!1;progress;i18n;_id=Math.random().toString(36).slice(2,10);variant="info";heading;message;icon;iconLibrary="lucide";closable=!0;dismissLabel="Dismiss";outlined=!1;compact=!1;banner=!1;autoClose=0;loading=!1;pulse=!1;noIcon=!1;solid=!1;accentBar=!1;pauseOnHover=!1;sticky=!1;truncate=0;size="md";persistKey;marquee=!1;marqueeSpeed=18;visible=!0;closing=!1;paused=!1;expanded=!1;closeReady=!0;slottedHTML="";get el(){return this}calloutDismiss;calloutShow;calloutAction;autoCloseTimer;closeBtnTimer;dismissTimer;remainingTime=0;timerStart=0;handlePersistKeyChange(){this.checkPersistence()}componentWillLoad(){this.checkPersistence()}checkPersistence(){if(this.persistKey&&"undefined"!=typeof window){const t=localStorage.getItem("ui-callout-dismissed-"+this.persistKey);"true"!==t&&"1"!==t||(this.visible=!1)}}connectedCallback(){this.focusOnShow&&setTimeout((()=>{const t=this.hostElement?.shadowRoot?.querySelector(".callout-close");t?t.focus():this.hostElement?.focus()}),100),this.scheduleAutoClose(),this.closableAfter>0&&this.closable?(this.closeReady=!1,this.closeBtnTimer=setTimeout((()=>{this.closeReady=!0}),this.closableAfter)):this.closeReady=!0,this.readSlottedContent()}readSlottedContent(){this.marquee&&setTimeout((()=>{const t=this.el.shadowRoot?.querySelector(".callout-message slot:not([name])");if(t){const a=t.assignedNodes().map((t=>3===t.nodeType?t.textContent:t.outerHTML||t.innerHTML||t.textContent||"")).join("");this.slottedHTML=l(a)}}),50)}disconnectedCallback(){clearTimeout(this.autoCloseTimer),clearTimeout(this.closeBtnTimer),clearTimeout(this.dismissTimer)}enterFrom="top";href;target;closableAfter=0;async update(t){Object.entries(t).forEach((([t,a])=>{t in this&&(this[t]=a)}))}handleActionClick=t=>{t.target&&t.target.closest('[slot="actions"]')&&this.calloutAction.emit()};onAutoCloseChange(){clearTimeout(this.autoCloseTimer),this.scheduleAutoClose()}scheduleAutoClose(t){const a=t??this.autoClose;a>0&&this.visible&&(this.timerStart=Date.now(),this.remainingTime=a,this.autoCloseTimer=setTimeout((()=>this.dismiss()),a))}dismiss(){this.persistKey&&"undefined"!=typeof window&&localStorage.setItem("ui-callout-dismissed-"+this.persistKey,"true"),this.closing=!0,clearTimeout(this.dismissTimer),this.dismissTimer=setTimeout((()=>{this.visible=!1,this.closing=!1,this.calloutDismiss.emit()}),250)}async hide(){this.dismiss()}async show(){this.persistKey&&"undefined"!=typeof window&&localStorage.removeItem("ui-callout-dismissed-"+this.persistKey),this.visible=!0,this.closing=!1,this.calloutShow.emit(),this.scheduleAutoClose()}handleDismiss=()=>{this.dismiss()};handleMouseEnter=()=>{if(this.pauseOnHover&&this.autoClose>0&&this.visible&&!this.closing){clearTimeout(this.autoCloseTimer);const t=Date.now()-this.timerStart;this.remainingTime=Math.max(0,this.remainingTime-t),this.paused=!0}};handleMouseLeave=()=>{this.pauseOnHover&&this.paused&&(this.paused=!1,this.timerStart=Date.now(),this.autoCloseTimer=setTimeout((()=>this.dismiss()),this.remainingTime))};toggleExpand=()=>{this.expanded=!this.expanded};defaultIcon(){return{info:"info",success:"check-circle",warning:"triangle-alert",danger:"circle-x",neutral:"bell"}[this.variant]??"info"}getIcon(){const t=this.icon??this.defaultIcon();return o("ui-icon",{name:t,library:this.iconLibrary,size:"1.25em"})}render(){if(!this.visible)return null;const t={["variant-"+this.variant]:!0,outlined:this.outlined,compact:this.compact,banner:this.banner,closing:this.closing,loading:this.loading,pulse:this.pulse,"no-icon":this.noIcon,solid:this.solid,"accent-bar":this.accentBar,sticky:this.sticky,marquee:this.marquee,paused:this.paused,["size-"+this.size]:!0,["enter-"+this.enterFrom]:!0},a="callout-title-"+this._id,e="callout-msg-"+this._id,s=!!this.href,r=this.autoClose>0?"assertive":"polite",n=this.i18n||{},c=o("div",{class:"callout-inner",role:s?"button":"status","aria-live":r,"aria-labelledby":a,"aria-describedby":e,tabIndex:s&&!this.href?0:void 0,onKeyDown:s&&!this.href?t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.handleActionClick(t))}:void 0,"data-testid":this.testId},!this.noIcon&&o("div",{class:"callout-icon",part:"icon"},this.loading?o("span",{class:"callout-spinner","aria-hidden":"true"}):o("slot",{name:"icon"},this.getIcon())),o("div",{class:"callout-content",part:"content"},o("div",{class:"callout-title",part:"title",id:a},o("slot",{name:"title"},this.heading)),!this.compact&&o("div",{class:{"callout-message":!0,truncated:this.truncate>0&&!this.expanded},part:"message",id:e,style:this.truncate>0?{"--callout-truncate-lines":this.truncate+""}:{}},this.marquee?o("div",{class:"callout-marquee-track",style:{"--marquee-speed":12*this.marqueeSpeed+"s"}},o("div",{class:"callout-marquee-group","aria-hidden":"true"},Array.from({length:12}).map((()=>o("span",{class:"callout-marquee-item",innerHTML:l(this.message||this.slottedHTML)})))),o("div",{class:"callout-marquee-group","aria-hidden":"true"},Array.from({length:12}).map((()=>o("span",{class:"callout-marquee-item",innerHTML:l(this.message||this.slottedHTML)})))),o("div",{style:{display:"none"}},o("slot",null,this.message))):o("slot",null,this.message)),!this.compact&&this.truncate>0&&o("ui-button",{variant:"ghost",class:"callout-show-more",onClick:this.toggleExpand,size:"sm",label:this.expanded?n.showLessLabel||"Show less ↑":n.showMoreLabel||"Show more ↓"}),!this.compact&&o("div",{class:"callout-actions",part:"actions",onClick:this.handleActionClick},o("slot",{name:"actions"}))),this.compact&&o("div",{class:"callout-inline-message",part:"message",id:e},o("slot",null,this.message)),this.closable&&this.closeReady&&o("ui-button",{variant:"ghost",class:"callout-close",onClick:this.handleDismiss,ariaLabel:n.dismissLabel||this.dismissLabel,icon:"x",iconLibrary:"lucide",iconOnly:!0,size:"sm"})),u="number"==typeof this.progress?o("div",{class:"callout-progress-bar",style:{width:this.progress+"%"},"aria-valuenow":this.progress,"aria-valuemin":"0","aria-valuemax":"100",role:"progressbar"}):this.autoClose>0&&this.visible&&!this.closing&&o("div",{class:{"callout-progress":!0,paused:this.paused},part:"progress",style:{animationDuration:this.autoClose+"ms"}});return this.href?o("a",{href:this.href,target:this.target,rel:"_blank"===this.target?"noopener noreferrer":void 0,class:t,part:"callout","aria-busy":this.loading?"true":void 0,"aria-labelledby":a,"aria-describedby":e,"aria-live":r,role:this.ariaRole||("neutral"===this.variant?"status":"alert"),"data-testid":this.testId,tabIndex:this.focusOnShow?0:void 0,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave},c,u):o(i,{class:t,part:"callout","aria-busy":this.loading?"true":void 0,"aria-labelledby":a,"aria-describedby":e,"aria-live":r,role:this.ariaRole||("neutral"===this.variant?"status":"alert"),"data-testid":this.testId,tabIndex:this.focusOnShow?0:void 0,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave},c,u)}static get watchers(){return{persistKey:[{handlePersistKeyChange:0}],autoClose:[{onAutoCloseChange: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}@media (prefers-color-scheme: dark){:host(.variant-info) .callout-inner{--callout-bg:#1e293b;--callout-text:#60a5fa;--callout-border:rgba(59, 130, 246, 0.35);--callout-icon-bg:rgba(59, 130, 246, 0.18);--callout-shadow:rgba(59, 130, 246, 0.13)}:host(.variant-success) .callout-inner{--callout-bg:#052e16;--callout-text:#4ade80;--callout-border:rgba(34,197,94,0.35);--callout-icon-bg:rgba(34,197,94,0.18);--callout-shadow:rgba(34,197,94,0.13)}:host(.variant-warning) .callout-inner{--callout-bg:#78350f;--callout-text:#facc15;--callout-border:rgba(251,191,36,0.35);--callout-icon-bg:rgba(251,191,36,0.18);--callout-shadow:rgba(251,191,36,0.13)}:host(.variant-danger) .callout-inner{--callout-bg:#7f1d1d;--callout-text:#f87171;--callout-border:rgba(239,68,68,0.35);--callout-icon-bg:rgba(239,68,68,0.18);--callout-shadow:rgba(239,68,68,0.13)}:host(.variant-neutral) .callout-inner{--callout-bg:#0f172a;--callout-text:#f1f5f9;--callout-border:rgba(148,163,184,0.25);--callout-icon-bg:rgba(148,163,184,0.13);--callout-shadow:rgba(148,163,184,0.09)}}a[part=callout]{text-decoration:none;color:inherit;display:block;transition:box-shadow 0.15s, filter 0.15s}a[part=callout]:hover,a[part=callout]:focus-visible{filter:brightness(1.04);box-shadow:0 6px 24px var(--callout-shadow, rgba(15, 23, 42, 0.13))}a[part=callout]:active{filter:brightness(0.98)}@keyframes callout-slide-in-top{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}@keyframes callout-slide-out-top{from{opacity:1;transform:translateY(0);max-height:200px}to{opacity:0;transform:translateY(-16px);max-height:0;padding:0;margin:0}}@keyframes callout-slide-in-bottom{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes callout-slide-out-bottom{from{opacity:1;transform:translateY(0);max-height:200px}to{opacity:0;transform:translateY(16px);max-height:0;padding:0;margin:0}}@keyframes callout-slide-in-left{from{opacity:0;transform:translateX(-32px)}to{opacity:1;transform:translateX(0)}}@keyframes callout-slide-out-left{from{opacity:1;transform:translateX(0);max-width:600px}to{opacity:0;transform:translateX(-32px);max-width:0;padding:0;margin:0}}@keyframes callout-slide-in-right{from{opacity:0;transform:translateX(32px)}to{opacity:1;transform:translateX(0)}}@keyframes callout-slide-out-right{from{opacity:1;transform:translateX(0);max-width:600px}to{opacity:0;transform:translateX(32px);max-width:0;padding:0;margin:0}}@keyframes callout-fade-in{from{opacity:0}to{opacity:1}}@keyframes callout-fade-out{from{opacity:1}to{opacity:0}}@keyframes callout-progress{from{transform:scaleX(1)}to{transform:scaleX(0)}}@keyframes callout-spin{to{transform:rotate(360deg)}}@keyframes callout-pulse{0%{box-shadow:0 4px 16px var(--callout-shadow, rgba(15, 23, 42, 0.07)), 0 0 0 0 var(--callout-border)}70%{box-shadow:0 4px 16px var(--callout-shadow, rgba(15, 23, 42, 0.07)), 0 0 0 7px transparent}100%{box-shadow:0 4px 16px var(--callout-shadow, rgba(15, 23, 42, 0.07)), 0 0 0 0 transparent}}:host{display:block;width:100%}:host(.enter-top){animation:callout-slide-in-top 0.25s ease both}:host(.enter-bottom){animation:callout-slide-in-bottom 0.25s ease both}:host(.enter-left){animation:callout-slide-in-left 0.25s ease both}:host(.enter-right){animation:callout-slide-in-right 0.25s ease both}:host(.enter-fade){animation:callout-fade-in 0.25s ease both}:host(.closing.enter-top){animation:callout-slide-out-top 0.25s ease both;pointer-events:none}:host(.closing.enter-bottom){animation:callout-slide-out-bottom 0.25s ease both;pointer-events:none}:host(.closing.enter-left){animation:callout-slide-out-left 0.25s ease both;pointer-events:none}:host(.closing.enter-right){animation:callout-slide-out-right 0.25s ease both;pointer-events:none}:host(.closing.enter-fade){animation:callout-fade-out 0.25s ease both;pointer-events:none}:host(.banner){border-radius:0}.callout-inner{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:14px 18px;border-radius:14px;position:relative;background:var(--callout-bg, #eff6ff);color:var(--callout-text, #1e3a8a);border:1px solid var(--callout-border, transparent);box-shadow:0 4px 16px var(--callout-shadow, rgba(15, 23, 42, 0.07));overflow:hidden}:host(.compact) .callout-inner{padding:8px 14px;gap:10px;border-radius:999px;align-items:center;grid-template-columns:auto auto 1fr auto}:host(.size-sm) .callout-inner{padding:6px 10px;border-radius:8px;gap:7px}:host(.size-sm) .callout-title,:host(.size-sm) .callout-message,:host(.size-sm) .callout-inline-message{font-size:0.78rem}:host(.size-sm) .callout-icon{width:22px;height:22px;font-size:1em}:host(.size-md) .callout-inner{padding:14px 18px;border-radius:14px;gap:12px}:host(.size-md) .callout-title,:host(.size-md) .callout-message,:host(.size-md) .callout-inline-message{font-size:0.95rem}:host(.size-md) .callout-icon{width:38px;height:38px;font-size:1.25em}:host(.size-lg) .callout-inner{padding:22px 28px;border-radius:22px;gap:18px}:host(.size-lg) .callout-title,:host(.size-lg) .callout-message,:host(.size-lg) .callout-inline-message{font-size:1.15rem}:host(.size-lg) .callout-icon{width:54px;height:54px;font-size:1.5em}:host(.compact) .callout-icon{width:28px;height:28px;border-radius:50%}:host(.compact) .callout-title{font-size:0.85rem}.callout-inline-message{font-size:0.85rem;opacity:0.8;flex:1}:host(.banner) .callout-inner{border-radius:0;border-left:none;border-right:none;box-shadow:none}.callout-icon{width:38px;height:38px;border-radius:10px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:var(--callout-icon-bg, rgba(255, 255, 255, 0.5))}.callout-content{display:flex;flex-direction:column;gap:3px;min-width:0}.callout-title{font-weight:600;letter-spacing:-0.01em;font-size:0.95rem;line-height:1.3}.callout-message{font-size:0.875rem;opacity:0.85;line-height:1.5}.callout-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}.callout-close{background:transparent;border:none;padding:5px;flex-shrink:0;border-radius:999px;cursor:pointer;color:inherit;opacity:0.6;transition:opacity 0.15s ease, background 0.15s ease;display:inline-flex;align-items:center;justify-content:center}.callout-close:hover{opacity:1;background:rgba(15, 23, 42, 0.08)}.callout-close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.callout-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:currentColor;opacity:0.3;transform-origin:left center;animation:callout-progress linear both}:host(.outlined) .callout-inner{box-shadow:none;background:transparent;border-color:var(--callout-text, currentColor) !important}:host(.variant-info) .callout-inner{--callout-bg:#eff6ff;--callout-text:#1d4ed8;--callout-border:rgba(59, 130, 246, 0.3);--callout-icon-bg:rgba(59, 130, 246, 0.12);--callout-shadow:rgba(59, 130, 246, 0.08)}:host(.variant-success) .callout-inner{--callout-bg:#f0fdf4;--callout-text:#15803d;--callout-border:rgba(22, 163, 74, 0.3);--callout-icon-bg:rgba(22, 163, 74, 0.12);--callout-shadow:rgba(22, 163, 74, 0.08)}:host(.variant-warning) .callout-inner{--callout-bg:#fffbeb;--callout-text:#b45309;--callout-border:rgba(217, 119, 6, 0.3);--callout-icon-bg:rgba(217, 119, 6, 0.12);--callout-shadow:rgba(217, 119, 6, 0.08)}:host(.variant-danger) .callout-inner{--callout-bg:#fef2f2;--callout-text:#dc2626;--callout-border:rgba(220, 38, 38, 0.3);--callout-icon-bg:rgba(220, 38, 38, 0.12);--callout-shadow:rgba(220, 38, 38, 0.08)}:host(.variant-neutral) .callout-inner{--callout-bg:#f8fafc;--callout-text:#334155;--callout-border:rgba(100, 116, 139, 0.25);--callout-icon-bg:rgba(100, 116, 139, 0.1);--callout-shadow:rgba(15, 23, 42, 0.06)}@media (max-width: 640px){.callout-inner{grid-template-columns:auto 1fr auto;padding:12px 14px}}.callout-spinner{display:inline-block;width:20px;height:20px;border:2.5px solid var(--callout-icon-bg, rgba(255, 255, 255, 0.3));border-top-color:var(--callout-text, currentColor);border-radius:50%;animation:callout-spin 0.7s linear infinite;flex-shrink:0}:host(.no-icon) .callout-inner{grid-template-columns:1fr auto}:host(.compact.no-icon) .callout-inner{grid-template-columns:auto 1fr auto}:host(.pulse) .callout-inner{animation:callout-pulse 1.8s ease-in-out infinite}:host(.solid) .callout-close:hover{background:rgba(255, 255, 255, 0.15)}:host(.solid.variant-info) .callout-inner{--callout-bg:#1d4ed8;--callout-text:#ffffff;--callout-border:transparent;--callout-icon-bg:rgba(255, 255, 255, 0.2);--callout-shadow:rgba(29, 78, 216, 0.3)}:host(.solid.variant-success) .callout-inner{--callout-bg:#15803d;--callout-text:#ffffff;--callout-border:transparent;--callout-icon-bg:rgba(255, 255, 255, 0.2);--callout-shadow:rgba(21, 128, 61, 0.3)}:host(.solid.variant-warning) .callout-inner{--callout-bg:#d97706;--callout-text:#ffffff;--callout-border:transparent;--callout-icon-bg:rgba(255, 255, 255, 0.2);--callout-shadow:rgba(217, 119, 6, 0.3)}:host(.solid.variant-danger) .callout-inner{--callout-bg:#dc2626;--callout-text:#ffffff;--callout-border:transparent;--callout-icon-bg:rgba(255, 255, 255, 0.2);--callout-shadow:rgba(220, 38, 38, 0.3)}:host(.solid.variant-neutral) .callout-inner{--callout-bg:#334155;--callout-text:#ffffff;--callout-border:transparent;--callout-icon-bg:rgba(255, 255, 255, 0.15);--callout-shadow:rgba(51, 65, 85, 0.3)}:host(.accent-bar) .callout-inner{border-left:4px solid var(--callout-text, currentColor);border-radius:0 14px 14px 0;padding-left:14px}:host(.accent-bar.banner) .callout-inner{border-radius:0}:host(.accent-bar.compact) .callout-inner{border-radius:0 999px 999px 0}:host(.sticky){position:sticky;top:0;z-index:200}.callout-progress.paused,:host(.paused) .callout-marquee-content{animation-play-state:paused}.callout-message.truncated{display:-webkit-box;-webkit-line-clamp:var(--callout-truncate-lines, 3);line-clamp:var(--callout-truncate-lines, 3);-webkit-box-orient:vertical;overflow:hidden}.callout-show-more{background:none;border:none;padding:0;margin-top:4px;font-size:0.8rem;font-weight:600;color:var(--callout-text, currentColor);cursor:pointer;opacity:0.75;text-decoration:underline;text-underline-offset:2px;display:inline-block;line-height:1.4}.callout-show-more:hover{opacity:1}.callout-show-more:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:2px}:host(.marquee) .callout-inner{overflow:hidden}.callout-marquee-track{display:flex;width:100%;overflow:hidden;user-select:none;gap:3rem;}.callout-marquee-group{flex-shrink:0;display:flex;align-items:center;justify-content:flex-start;gap:3rem;min-width:100%;animation:callout-scroll var(--marquee-speed, 18s) linear infinite;will-change:transform}.callout-marquee-item{display:flex;align-items:center;white-space:nowrap}@keyframes callout-scroll{from{transform:translateX(0)}to{transform:translateX(calc(-100% - 3rem))}}:host(.paused) .callout-marquee-group{animation-play-state:paused}:host(.marquee) .callout-message{overflow:hidden}'}},[769,"ui-callout-banner",{ariaRole:[1,"aria-role"],testId:[1,"test-id"],focusOnShow:[4,"focus-on-show"],progress:[2],i18n:[16],variant:[1],heading:[1],message:[1],icon:[1],iconLibrary:[1,"icon-library"],closable:[4],dismissLabel:[1,"dismiss-label"],outlined:[4],compact:[4],banner:[4],autoClose:[2,"auto-close"],loading:[4],pulse:[4],noIcon:[4,"no-icon"],solid:[4],accentBar:[4,"accent-bar"],pauseOnHover:[4,"pause-on-hover"],sticky:[4],truncate:[2],size:[1],persistKey:[1,"persist-key"],marquee:[4],marqueeSpeed:[2,"marquee-speed"],enterFrom:[1,"enter-from"],href:[1],target:[1],closableAfter:[2,"closable-after"],visible:[32],closing:[32],paused:[32],expanded:[32],closeReady:[32],slottedHTML:[32],update:[64],hide:[64],show:[64]},void 0,{persistKey:[{handlePersistKeyChange:0}],autoClose:[{onAutoCloseChange:0}]}]),h=u,d=function(){"undefined"!=typeof customElements&&["ui-callout-banner","ui-badge","ui-button","ui-icon"].forEach((t=>{switch(t){case"ui-callout-banner":customElements.get(s(t))||customElements.define(s(t),u);break;case"ui-badge":customElements.get(s(t))||c();break;case"ui-button":customElements.get(s(t))||n();break;case"ui-icon":customElements.get(s(t))||r()}}))};export{h as UiCalloutBanner,d as defineCustomElement}

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

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

package/dist/components/ui-card.js

@@ -0,0 +1 @@
+import{proxyCustomElement as t,HTMLElement as r,createEvent as a,h as e,Host as i,transformTag as o}from"@stencil/core/internal/client";import{s as n,d as s}from"./icon.js";import{d,a as c}from"./badge.js";const l=t(class extends r{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.cardFlip=a(this,"cardFlip",7),this.menuItemClick=a(this,"menuItemClick",7),this.expandToggle=a(this,"expandToggle",7),this.cardToggle=a(this,"cardToggle",7),this.cardClick=a(this,"cardClick",7),this.cardSelect=a(this,"cardSelect",7),this.cardClose=a(this,"cardClose",7),this.menuActionClick=a(this,"menuActionClick",7)}get element(){return this}cardId="";cardTitle="";variant="default";size="default";layout="vertical";color="default";displayMode="default";shape="default";glass=!1;bordered=!0;border="";borderRadius="8px";importance="standard";pattern="default";headStyle={};bodyStyle={};type="default";width="100%";height="auto";aspectRatio="16/9";hoverable=!1;flippable=!1;flipTrigger="click";flipped=!1;collapsible=!1;collapsed=!1;closable=!1;selectable=!1;selected=!1;clickable=!1;href="";target="";tilt=!1;magnetic=!1;cover="";coverAlt="Card cover";extra="";avatar="";avatarIcon="";ribbon="";ribbonPosition="top-right";ribbonColor="";description="";tag="";buttonText="";actions="";showMenu=!1;menuItems="[]";menuActions="";iconLibrary="default";loading=!1;autoScroll=!1;scrollBehavior="smooth";isFlipped=!1;isMenuOpen=!1;isCollapsed=!1;parsedMenuItems=[];magneticTransform="";tiltTransform="";cardFlip;menuItemClick;expandToggle;cardToggle;cardClick;cardSelect;cardClose;menuActionClick;menuRef;handleMenuPropsChange(){this.parseMenuItems()}handleFlippedChange(t){this.isFlipped=t}handleCollapsedChange(t){this.isCollapsed=t}componentWillLoad(){this.parseMenuItems(),this.isFlipped=this.flipped,this.isCollapsed=this.collapsed}handleClickOutside(t){this.isMenuOpen&&this.menuRef&&!this.menuRef.contains(t.target)&&(this.isMenuOpen=!1)}parseMenuItems(){let t=[];if(this.menuItems&&"[]"!==this.menuItems)try{t=JSON.parse(this.menuItems)}catch(t){console.error("Invalid JSON for menu items:",t)}this.menuActions&&this.menuActions.split(",").map((t=>t.trim())).forEach((r=>{r&&t.push({id:r.toLowerCase().replace(/\s+/g,"-"),label:r})})),this.parsedMenuItems=t}toggleFlip=t=>{t&&t.stopPropagation(),this.flippable&&(this.isFlipped=!this.isFlipped,this.flipped=this.isFlipped,this.cardFlip.emit(this.isFlipped))};toggleCollapse=t=>{t&&t.stopPropagation(),this.collapsible&&(this.isCollapsed=!this.isCollapsed,this.collapsed=this.isCollapsed,this.cardToggle.emit(!this.isCollapsed),this.expandToggle.emit({expanded:!this.isCollapsed}),this.autoScroll&&!this.isCollapsed&&setTimeout((()=>{this.element.scrollIntoView({behavior:this.scrollBehavior,block:"nearest"})}),300))};async scrollToCard(){this.element.scrollIntoView({behavior:this.scrollBehavior,block:"nearest"})}toggleMenu=t=>{t.stopPropagation(),this.isMenuOpen=!this.isMenuOpen};handleMenuItemClick=(t,r)=>{r.stopPropagation();const a=this.parsedMenuItems.find((r=>r.id===t));a?.disabled||(this.menuItemClick.emit({itemId:t,cardId:this.cardId}),this.menuActionClick.emit(t),this.isMenuOpen=!1)};handleCardClick=t=>{const r=t.target;if(!(r.closest("button")||r.closest(".menu-dropdown")||r.closest(".card-actions")||r.closest(".card-action-btn"))){if(!this.flippable||"click"!==this.flipTrigger)return this.selectable?(this.selected=!this.selected,void this.cardSelect.emit(this.selected)):void(this.href?"_blank"===this.target?window.open(this.href,"_blank"):window.location.href=this.href:this.clickable&&this.cardClick.emit());this.toggleFlip(t)}};handleMouseEnter=t=>{this.flippable&&"hover"===this.flipTrigger&&(this.isFlipped=!0,this.flipped=!0,this.cardFlip.emit(!0)),this.handleMouseMove(t)};handleMouseLeave=()=>{this.flippable&&"hover"===this.flipTrigger&&(this.isFlipped=!1,this.flipped=!1,this.cardFlip.emit(!1)),this.tiltTransform="",this.magneticTransform=""};handleMouseMove=t=>{if(!this.magnetic&&!this.tilt||this.loading)return;const r=this.element.getBoundingClientRect(),a=t.clientX-(r.left+r.width/2),e=t.clientY-(r.top+r.height/2);if(this.magnetic){const t=20;this.magneticTransform=`translate(${a/t}px, ${e/t}px)`}this.tilt&&(this.tiltTransform=`perspective(1000px) rotateX(${e/(r.height/2)*-15}deg) rotateY(${a/(r.width/2)*15}deg)`)};handleClose=t=>{t.stopPropagation(),this.cardClose.emit()};renderMenu(){return this.showMenu||this.parsedMenuItems.length>0?e("div",{class:"menu-container",ref:t=>this.menuRef=t},e("ui-button",{variant:"ghost",onClick:this.toggleMenu,ariaLabel:"Card menu",icon:"more-vertical",iconLibrary:"lucide",iconOnly:!0,size:"sm"}),this.isMenuOpen&&e("div",{class:"menu-dropdown",role:"menu"},this.parsedMenuItems.map((t=>t.separator?e("div",{class:"menu-separator",role:"separator"}):e("ui-button",{variant:"ghost",onClick:r=>this.handleMenuItemClick(t.id,r),disabled:t.disabled,label:t.label,icon:t.icon,iconLibrary:t.iconLibrary||this.iconLibrary,fullWidth:!0,align:"start",size:"sm"}))))):null}renderSkeleton(){return e("div",{class:"skeleton-wrapper"},e("div",{class:"skeleton-header"},e("div",{class:"skeleton-avatar"}),e("div",{class:"skeleton-title-group"},e("div",{class:"skeleton-text skeleton-title"}),e("div",{class:"skeleton-text skeleton-subtitle"}))),e("div",{class:"skeleton-content"},e("div",{class:"skeleton-text full"}),e("div",{class:"skeleton-text full"}),e("div",{class:"skeleton-text half"})))}renderSelectionIndicator(){return this.selectable?e("div",{class:"selection-indicator "+(this.selected?"selected":"")},this.selected&&e("ui-icon",{name:"check",library:"lucide",size:"1.2em",class:"check-icon"})):null}renderHeader(){return this.cardTitle||this.extra||this.avatar||this.avatarIcon||this.closable||this.collapsible||this.showMenu||this.parsedMenuItems.length>0?e("div",{class:"card-header",style:this.headStyle},e("div",{class:"card-header-main"},(this.avatar||this.avatarIcon)&&e("div",{class:"card-avatar"},this.avatar?e("img",{src:this.avatar,alt:"avatar",class:"card-avatar-img"}):e("ui-icon",{name:this.avatarIcon,library:this.iconLibrary,size:"1.2em"})),e("div",{class:"card-title-group"},this.cardTitle&&e("div",{class:"card-title-text"},this.cardTitle),e("slot",{name:"header"}),e("slot",{name:"title"}))),e("div",{class:"card-actions"},this.extra&&e("div",{class:"card-extra",innerHTML:n(this.extra)}),e("slot",{name:"extra"}),e("slot",{name:"actions"}),this.collapsible&&e("ui-button",{variant:"ghost",onClick:this.toggleCollapse,ariaLabel:this.isCollapsed?"Expand":"Collapse",icon:this.isCollapsed?"chevron-down":"chevron-up",iconLibrary:"lucide",iconOnly:!0,size:"sm"}),this.renderMenu(),this.closable&&e("ui-button",{variant:"ghost",onClick:this.handleClose,ariaLabel:"Close",icon:"x",iconLibrary:"lucide",iconOnly:!0,size:"sm"}))):null}renderCover(){return this.cover||this.element.querySelector('[slot="cover"]')?e("div",{class:"card-cover",style:{aspectRatio:this.aspectRatio}},this.cover&&e("img",{src:this.cover,alt:this.coverAlt}),e("slot",{name:"cover"})):null}renderFooter(){const t=this.actions?this.actions.split(",").map((t=>t.trim())):[];return this.buttonText||t.length>0||this.element.querySelector('[slot="footer"]')?e("div",{class:"card-footer"},this.buttonText&&e("ui-button",{variant:"primary",label:this.buttonText}),t.length>0&&e("ul",{class:"card-quick-actions"},t.map((t=>e("li",null,e("span",{innerHTML:n(t)}))))),e("slot",{name:"footer"})):null}renderFrontCard(){return e("div",{class:{"card-face-content":!0,"card-collapsed":this.isCollapsed,"card-hoverable":this.hoverable,"card-selectable":this.selectable,"card-selected":this.selected,"card-clickable":!(!this.href&&!this.clickable||this.flippable),"card-glass":this.glass,["card-layout-"+this.layout]:!0,["card-importance-"+this.importance]:!0,["card-pattern-"+this.pattern]:!0,["card-type-"+this.type]:!0},style:{borderRadius:this.borderRadius,border:this.selected?"2px solid var(--ui-card-selected-border, #3bf673)":this.bordered?this.border||void 0:"none"}},this.renderCover(),e("div",{class:"card-details-wrapper"},this.renderHeader(),e("slot",{name:"tabs"}),!this.isCollapsed&&[e("div",{class:"card-content",style:this.bodyStyle},e("slot",null),e("slot",{name:"content"}),this.description&&e("div",{class:"card-description"},this.description),this.tag&&e("div",{class:"card-tag"},this.tag)),this.renderFooter(),e("slot",{name:"grid"})]))}renderBackCard(){return this.flippable?e("div",{class:"card-face-content card-back",style:{borderRadius:this.borderRadius,border:this.bordered?this.border||void 0:"none"}},e("div",{class:"card-back-header"},e("ui-button",{variant:"ghost",onClick:this.toggleFlip,ariaLabel:"Flip card back",icon:"arrow-left",iconLibrary:"lucide",iconOnly:!0,size:"sm"})),e("div",{class:"card-content"},e("slot",{name:"back"},e("div",{class:"card-back-default"},e("h3",null,"Back Side"),e("p",null,'Add content to the "back" slot to customize this side.'))),e("slot",{name:"back-content"}))):null}render(){const t=["ui-card","variant-"+("string"==typeof this.variant?this.variant:"default"),"size-"+("string"==typeof this.size?this.size:"md"),this.isFlipped&&"is-flipped",this.loading&&"is-loading",this.flippable&&"is-flippable"].filter(Boolean).join(" ");return e(i,{key:"ef88aac3904761439d1c4d689cd89c4c47569894",class:t,style:{width:"string"==typeof this.width?this.width:void 0,height:"string"==typeof this.height?this.height:void 0},onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave},this.ribbon&&e("div",{key:"a9866c010965c9259e2d566ca909965f63e0dbbb",class:"card-ribbon ribbon-"+this.ribbonPosition,style:this.ribbonColor?{backgroundColor:this.ribbonColor}:{}},e("span",{key:"24ef228a94d1e6ffc61bc7fef52c4f34ca88daf2"},this.ribbon)),this.loading?e("div",{class:"card-loading-container",style:{borderRadius:this.borderRadius}},this.renderSkeleton()):e("div",{class:"card-container",onClick:this.handleCardClick,onMouseMove:this.handleMouseMove,style:{transform:`${this.magneticTransform} ${this.tiltTransform}`,transition:this.magneticTransform||this.tiltTransform?"none":"transform 0.5s cubic-bezier(0.23, 1, 0.32, 1)"}},this.flippable?e("div",{class:"card-flipper"},e("div",{class:"card-face face-front"},this.renderFrontCard(),this.renderSelectionIndicator()),e("div",{class:"card-face face-back"},this.renderBackCard())):[this.renderFrontCard(),this.renderSelectionIndicator()]))}static get watchers(){return{menuItems:[{handleMenuPropsChange:0}],menuActions:[{handleMenuPropsChange:0}],flipped:[{handleFlippedChange:0}],collapsed:[{handleCollapsedChange: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;box-sizing:border-box;--ui-card-selected-border:var(--color-primary, #10b981);--ui-card-primary:var(--color-primary, #10b981);--ui-card-success:var(--color-success, #10b981);--ui-card-warning:var(--color-warning, #f59e0b);--ui-card-danger:var(--color-danger, #ef4444);--ui-card-info:var(--color-info, #06b6d4)}:host *{box-sizing:border-box}.ui-card{font-family:var(--ui-font-family, inherit);position:relative;width:100%;height:100%;transition:transform 0.3s ease, box-shadow 0.3s ease}.card-container{position:relative;width:100%;height:100%;perspective:1000px}.card-flipper{position:relative;width:100%;height:100%;transition:transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);transform-style:preserve-3d}.is-flipped .card-flipper{transform:rotateY(180deg)}.card-face{position:absolute;top:0;left:0;width:100%;height:min-content;min-height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex}.face-back{transform:rotateY(180deg)}.card-face-content{display:flex;flex-direction:column;width:100%;background:var(--ui-card-bg, var(--bg-primary, #ffffff));border-radius:var(--ui-card-radius, 8px);overflow:hidden;transition:all 0.3s ease;border:1px solid var(--ui-card-border-color, var(--border-default, #e5e7eb));box-shadow:0 1px 3px rgba(0, 0, 0, 0.1);position:relative}.card-details-wrapper{display:flex;flex-direction:column;flex:1;width:100%}.variant-elevated .card-face-content{box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)}.variant-outlined .card-face-content{box-shadow:none;border:2px solid var(--ui-card-border-color, var(--border-default, #e5e7eb))}.variant-filled .card-face-content{background-color:var(--bg-primary, #f9fafb);border:none}.variant-primary .card-face-content{border-left:4px solid var(--ui-card-primary)}.variant-primary .card-face-content .card-header{background:linear-gradient(to right, rgba(var(--color-primary-rgb, 59, 130, 246), 0.1), transparent)}.variant-success .card-face-content{border-left:4px solid var(--ui-card-success)}.variant-success .card-face-content .card-header{background:linear-gradient(to right, rgba(var(--color-success-rgb, 16, 185, 129), 0.1), transparent)}.variant-warning .card-face-content{border-left:4px solid var(--ui-card-warning)}.variant-warning .card-face-content .card-header{background:linear-gradient(to right, rgba(var(--color-warning-rgb, 245, 158, 11), 0.1), transparent)}.variant-danger .card-face-content{border-left:4px solid var(--ui-card-danger)}.variant-danger .card-face-content .card-header{background:linear-gradient(to right, rgba(var(--color-danger-rgb, 239, 68, 68), 0.1), transparent)}.variant-info .card-face-content{border-left:4px solid var(--ui-card-info)}.variant-info .card-face-content .card-header{background:linear-gradient(to right, rgba(6, 182, 212, 0.1), transparent)}.card-importance-emphasized .card-face-content{box-shadow:0 10px 30px rgba(0, 0, 0, 0.15);border:none;background:linear-gradient(135deg, var(--bg-secondary, #111827) 0%, var(--color-primary, #374151) 100%);color:var(--text-standard, #ffffff)}.card-importance-emphasized .card-face-content .card-title-text,.card-importance-emphasized .card-face-content .card-content,.card-importance-emphasized .card-face-content .card-extra,.card-importance-emphasized .card-face-content .card-description{color:var(--text-standard, #ffffff)}.card-importance-emphasized .card-face-content .card-header,.card-importance-emphasized .card-face-content .card-footer{border-bottom-color:rgba(255, 255, 255, 0.1);border-top-color:rgba(255, 255, 255, 0.1)}.card-importance-emphasized .card-face-content .card-action-btn{color:rgba(255, 255, 255, 0.7)}.card-importance-emphasized .card-face-content .card-action-btn:hover{background:rgba(255, 255, 255, 0.1);color:var(--text-standard, #ffffff)}.card-pattern-shortcut .card-face-content{text-align:center;padding:32px 24px;align-items:center}.card-pattern-shortcut .card-face-content .card-header{border-bottom:none;padding:0;margin-bottom:16px;flex-direction:column}.card-pattern-shortcut .card-face-content .card-header-main{flex-direction:column;gap:12px}.card-pattern-shortcut .card-face-content .card-title-text{font-size:20px;text-align:center}.card-pattern-shortcut .card-face-content .card-avatar{margin:0 auto 8px;width:64px;height:64px}.card-pattern-shortcut .card-face-content .card-avatar i{font-size:32px}.card-pattern-product .card-cover{background:var(--bg-primary, #f7f7f7)}.card-pattern-product .card-content{padding-top:16px}.card-type-inner{background:var(--bg-primary, #fafafa)}.card-type-inner .card-header{background:transparent;padding:12px 16px;min-height:48px}.card-type-inner .card-content{padding:16px}.card-glass .card-face-content{background:rgba(255, 255, 255, 0.4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255, 255, 255, 0.3);box-shadow:0 8px 32px 0 rgba(31, 38, 135, 0.1)}.card-selectable{cursor:pointer;border:2px solid transparent !important}.card-selectable:hover{border-color:var(--border-subtle, #e6f7ff) !important;box-shadow:0 4px 12px rgba(0, 0, 0, 0.08)}.card-selected .card-face-content{border-color:var(--ui-card-selected-border) !important;box-shadow:0 0 0 2px rgba(var(--color-primary-rgb, 59, 130, 246), 0.1)}.selection-indicator{position:absolute;top:8px;right:8px;width:24px;height:24px;background:var(--ui-card-selected-border);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-standard, #ffffff);opacity:0;transform:scale(0.5);transition:all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);z-index:10}.selection-indicator.selected{opacity:1;transform:scale(1)}.card-ribbon{position:absolute;z-index:20;padding:4px 16px;background:var(--ui-card-primary);color:var(--text-standard, #ffffff);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.2)}.card-ribbon.ribbon-top-right{top:12px;right:-8px;border-radius:4px 0 0 4px}.card-ribbon.ribbon-top-right::after{content:"";position:absolute;right:0;bottom:-8px;border-right:8px solid transparent;border-top:8px solid rgba(0, 0, 0, 0.3)}.card-ribbon.ribbon-top-left{top:12px;left:-8px;border-radius:0 4px 4px 0}.card-ribbon.ribbon-top-left::after{content:"";position:absolute;left:0;bottom:-8px;border-left:8px solid transparent;border-top:8px solid rgba(0, 0, 0, 0.3)}.card-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border-subtle, #f3f4f6);min-height:56px;gap:12px;transition:all 0.3s ease}.card-contain-tabs .card-header{border-bottom:none;padding-bottom:0}.card-header-main{display:flex;align-items:center;gap:12px;flex:1}.card-avatar{width:40px;height:40px;border-radius:50%;background:var(--bg-secondary, #f3f4f6);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}.card-avatar i{font-size:18px;color:var(--text-muted, #9ca3af)}.card-avatar-img{width:100%;height:100%;object-fit:cover}.card-title-text{font-weight:700;font-size:16px;color:var(--text-primary, #111827)}.card-actions{display:flex;align-items:center;gap:4px}.card-extra{font-size:13px;color:var(--text-muted, #6b7280)}.card-action-btn{width:32px;height:32px;padding:0;border:none;background:transparent;border-radius:6px;cursor:pointer;color:var(--text-muted, #6b7280);display:flex;align-items:center;justify-content:center;transition:all 0.2s}.card-action-btn:hover{background:var(--bg-secondary, #f3f4f6);color:var(--text-primary, #111827)}.card-cover{width:100%;overflow:hidden}.card-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.5s ease}.card-hoverable:hover .card-cover img{transform:scale(1.05)}.card-content{padding:20px;flex:1;color:var(--text-secondary, #4b5563);line-height:1.6}.card-description{margin-top:12px;color:var(--text-muted, #6b7280);font-size:14px}.card-tag{display:inline-block;margin-top:12px;padding:2px 10px;background:var(--bg-secondary, #f3f4f6);border-radius:99px;font-size:12px;color:var(--text-secondary, #4b5563);font-weight:500}.card-footer{padding:16px 20px;border-top:1px solid var(--border-subtle, #f3f4f6);display:flex;flex-direction:column;gap:12px}.card-primary-btn{width:100%;padding:10px;background:var(--ui-card-primary);color:var(--text-standard, #ffffff);border:none;border-radius:6px;font-weight:600;cursor:pointer;transition:opacity 0.2s}.card-primary-btn:hover{opacity:0.9}.card-quick-actions{list-style:none;padding:0;margin:16px -20px -16px;display:flex;background:var(--bg-primary, #fafafa);border-top:1px solid var(--border-subtle, #f3f4f6)}.card-quick-actions li{flex:1;padding:12px 16px;text-align:center;color:var(--text-secondary, #4b5563);font-weight:500;cursor:pointer;transition:all 0.2s;border-right:1px solid var(--border-subtle, #f3f4f6)}.card-quick-actions li:last-child{border-right:none}.card-quick-actions li:hover{background:var(--bg-secondary, #f3f4f6);color:var(--ui-card-primary)}.card-layout-horizontal{flex-direction:row !important}.card-layout-horizontal .card-cover{width:35% !important;max-width:300px;height:auto !important;flex-shrink:0}.card-layout-horizontal .card-details-wrapper{flex:1}@media (max-width: 768px){.card-layout-horizontal{flex-direction:column !important}.card-layout-horizontal .card-cover{width:100% !important;max-width:none;aspect-ratio:16/9}}::slotted([slot=grid]){display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:1px;background:var(--bg-secondary, #f3f4f6);border-top:1px solid var(--border-subtle, #f3f4f6)}::slotted([slot=grid]) ui-card{margin:0;--ui-card-radius:0}.menu-container{position:relative}.menu-dropdown{position:absolute;top:100%;right:0;background:var(--bg-primary, #ffffff);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);border:1px solid var(--border-subtle, #f3f4f6);padding:6px;min-width:160px;z-index:100;margin-top:4px;animation:slideDown 0.2s ease}@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.menu-item{width:100%;padding:8px 12px;border:none;background:transparent;display:flex;align-items:center;gap:8px;border-radius:4px;cursor:pointer;font-size:14px;color:var(--text-secondary, #374151)}.menu-item:hover{background:var(--bg-primary, #f9fafb);color:var(--text-primary, #111827)}.menu-item.menu-item-disabled{opacity:0.5;cursor:not-allowed}.menu-separator{height:1px;background:var(--bg-secondary, #f3f4f6);margin:4px -6px}.card-loading-container{background:var(--bg-primary, #ffffff);border:1px solid var(--border-default, #e5e7eb);padding:20px}.skeleton-avatar{background:var(--bg-secondary, #f3f4f6);width:48px;height:48px;border-radius:50%}.skeleton-text{background:var(--bg-secondary, #f3f4f6);height:16px;border-radius:4px;position:relative;overflow:hidden}.skeleton-text::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);animation:loading-shimmer 1.5s infinite}@keyframes loading-shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}.card-hoverable:hover{transform:translateY(-4px);box-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)}.card-clickable{cursor:pointer}:host-context([data-theme=dark]) .card-face-content{background:var(--bg-primary, #1f2937);border-color:var(--border-default, #374151);color:var(--text-standard, #f3f4f6)}:host-context([data-theme=dark]) .card-title-text{color:var(--text-standard, #f9fafb)}:host-context([data-theme=dark]) .card-header{border-bottom-color:var(--border-default, #374151)}:host-context([data-theme=dark]) .card-footer{border-top-color:var(--border-default, #374151)}:host-context([data-theme=dark]) .menu-dropdown{background:var(--bg-primary, #1f2937);border-color:var(--border-default, #374151)}:host-context([data-theme=dark]) .menu-item{color:var(--bg-secondary, #d1d5db)}:host-context([data-theme=dark]) .menu-item:hover{background:var(--color-primary, #374151);color:var(--text-standard, #f9fafb)}:host-context([data-theme=dark]) .skeleton-text,:host-context([data-theme=dark]) .skeleton-avatar{background:var(--color-primary, #374151)}'}},[769,"ui-card",{cardId:[1,"card-id"],cardTitle:[1,"card-title"],variant:[1],size:[1],layout:[1],color:[1],displayMode:[1,"display-mode"],shape:[1],glass:[4],bordered:[4],border:[1],borderRadius:[1,"border-radius"],importance:[1],pattern:[1],headStyle:[16],bodyStyle:[16],type:[1],width:[1],height:[1],aspectRatio:[1,"aspect-ratio"],hoverable:[4],flippable:[4],flipTrigger:[1,"flip-trigger"],flipped:[1028],collapsible:[4],collapsed:[1028],closable:[4],selectable:[4],selected:[1028],clickable:[4],href:[1],target:[1],tilt:[4],magnetic:[4],cover:[1],coverAlt:[1,"cover-alt"],extra:[1],avatar:[1],avatarIcon:[1,"avatar-icon"],ribbon:[1],ribbonPosition:[1,"ribbon-position"],ribbonColor:[1,"ribbon-color"],description:[1],tag:[1],buttonText:[1,"button-text"],actions:[1],showMenu:[4,"show-menu"],menuItems:[1,"menu-items"],menuActions:[1,"menu-actions"],iconLibrary:[1,"icon-library"],loading:[4],autoScroll:[4,"auto-scroll"],scrollBehavior:[1,"scroll-behavior"],isFlipped:[32],isMenuOpen:[32],isCollapsed:[32],parsedMenuItems:[32],magneticTransform:[32],tiltTransform:[32],scrollToCard:[64]},[[8,"click","handleClickOutside"]],{menuItems:[{handleMenuPropsChange:0}],menuActions:[{handleMenuPropsChange:0}],flipped:[{handleFlippedChange:0}],collapsed:[{handleCollapsedChange:0}]}]),p=l,h=function(){"undefined"!=typeof customElements&&["ui-card","ui-badge","ui-button","ui-icon"].forEach((t=>{switch(t){case"ui-card":customElements.get(o(t))||customElements.define(o(t),l);break;case"ui-badge":customElements.get(o(t))||c();break;case"ui-button":customElements.get(o(t))||d();break;case"ui-icon":customElements.get(o(t))||s()}}))};export{p as UiCard,h as defineCustomElement}

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

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