atomicuilibrary 0.0.1 → 0.1.0

package/dist/collection/components/fab-item/fab-item.js

@@ -22,7 +22,7 @@ export class FabItem {
     //   }
     // }
     render() {
-        return (h(Host, { key: '90ef99b98ff4ad2482a4e788bd29266655ccdff7', class: { 'is-disabled': this.disabled, 'is-loading': this.loading } }, this.label && h("div", { key: 'b814405698a29b37bff8f3c1346879b3874451a8', class: "fab-item-label", "aria-hidden": "true" }, this.label), h("ui-button", { key: 'a16effbb8a01f731cf544276a0823aba10b73e70', variant: "primary", shape: "circle", class: "fab-item-trigger", disabled: this.disabled || this.loading, loading: this.loading, onClick: this.handleClick, ariaLabel: this.tooltip || this.label || this.icon, title: this.tooltip, icon: this.icon, iconOnly: true, size: "sm" }, !this.icon && h("slot", { key: 'ca833a5516dc634456bab3f0a8095688dc55e43c', name: "icon" }))));
+        return (h(Host, { key: '7551f6761b90f6ead01bdd37d5f07f6277c867cc', class: { 'is-disabled': this.disabled, 'is-loading': this.loading } }, this.label && h("div", { key: 'fe90271cf5bb4443b54c01b82274c6e60686766a', class: "fab-item-label", "aria-hidden": "true" }, this.label), h("ui-button", { key: 'da7aef396488d1c527dce3ec6559e36b78df0505', variant: "primary", shape: "circle", class: "fab-item-trigger", disabled: this.disabled || this.loading, loading: this.loading, onClick: this.handleClick, ariaLabel: this.tooltip || this.label || this.icon, title: this.tooltip, icon: this.icon, iconOnly: true, size: "sm" }, !this.icon && h("slot", { key: 'a59d4c4a925bcb81ab54d305c7310095a24160a2', name: "icon" }))));
     }
     static get is() { return "ui-fab-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/horizontal-nav/horizontal-nav.js

@@ -143,7 +143,7 @@ export class HorizontalNav {
                     "references": {
                         "HorizontalNavItem": {
                             "location": "local",
-                            "path": "P:/Repository/stenciljs/atomicUILibrary/src/components/horizontal-nav/horizontal-nav.tsx",
+                            "path": "C:/Praveen/Personal-repo/kmn/atomicUILibrary/library/src/components/horizontal-nav/horizontal-nav.tsx",
                             "id": "src/components/horizontal-nav/horizontal-nav.tsx::HorizontalNavItem"
                         }
                     }
@@ -365,7 +365,7 @@ export class HorizontalNav {
                     "references": {
                         "HorizontalNavItem": {
                             "location": "local",
-                            "path": "P:/Repository/stenciljs/atomicUILibrary/src/components/horizontal-nav/horizontal-nav.tsx",
+                            "path": "C:/Praveen/Personal-repo/kmn/atomicUILibrary/library/src/components/horizontal-nav/horizontal-nav.tsx",
                             "id": "src/components/horizontal-nav/horizontal-nav.tsx::HorizontalNavItem"
                         }
                     }

package/dist/collection/components/icon/icon.js

@@ -289,7 +289,7 @@ export class Icon {
         const accessibilityAttrs = this.label
             ? { role: 'img', 'aria-label': this.label }
             : { 'aria-hidden': 'true' };
-        return (h(Host, { key: '5a6bf9c51b3f46ec61428d94b6b230c5ec25527d', style: containerStyle, ...accessibilityAttrs }, h("div", { key: '531c468608680f4d9a5d543f0b1088ffeb75f4dc', class: `icon-container ${this.spin ? 'fa-spin' : ''}` }, (this.loading || this.isFetching)
+        return (h(Host, { key: 'b32e0ca5263061b4fc29bd78648d3f4906095d4b', style: containerStyle, ...accessibilityAttrs }, h("div", { key: 'a483ab48abea1360f97875d6e92c2a37324d34ec', class: `icon-container ${this.spin ? 'fa-spin' : ''}` }, (this.loading || this.isFetching)
             ? h("ui-loader", { size: "0.8em", color: "currentColor", type: "spinner" })
             : this.renderIconContent(lib, parsedSize))));
     }

package/dist/collection/components/input/input.js

@@ -971,7 +971,7 @@ export class Input {
             onKeyDown: this.handleKeydown,
             onKeyUp: this.handleKeyup,
         };
-        return (h(Host, { key: 'e4063f1d2456a41e57309506da2b79f1bbf518bd', class: {
+        return (h(Host, { key: '3a051e8a9e1f0139e4657d60ef8164856307104a', class: {
                 [`variant-${this.variant}`]: true,
                 [`size-${this.size}`]: true,
                 'full-width': this.fullWidth,
@@ -979,13 +979,13 @@ export class Input {
                 [`input-color-${isCustomColor ? 'custom' : this.color}`]: true,
                 'shake-animation': this.shake,
                 'focused': this.isFocused,
-            }, style: hostStyles }, h("div", { key: '7fd5939b576307e8285e5f53c91a7fc969617fa0', class: { ...inputClasses, 'input-ripple': this.rippleEffect } }, this.label && !this.floatingLabel && !isOtp && h("label", { key: '0fa810d3e66f3d224340d93006df75b63f528912', class: "input-label" }, this.label, this.required && '*'), h("div", { key: 'e2c21f6e14645a1fce1e6de5b1500ba41e04b115', class: "input-container", onMouseDown: this.handleMouseDown, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("div", { key: '73c7397d9d57c3effd34b6dab5bac043da68a78f', class: "clipping-layer" }, this.showRipple && h("div", { key: 'dc23482a5f56c51605911625605285451225ca81', class: "liquid-ripple", style: { left: `${this.rippleX}px`, top: `${this.rippleY}px` } }), this.linearLoading && h("div", { key: 'a10a205c11a4dc9468d709148ab713f5a927699b', class: "linear-loading-bar" }), this.backdropSheen && h("div", { key: '1d09a9fd9aa04999bc56186fec1be51f963f0e3d', class: "backdrop-sheen-effect" })), this.renderAutocomplete(), (this.badge || (this.dirtyTracking && this.isDirty)) && (h("span", { key: '8b6b915bbf616387f937e25b73c15cd4f42694c3', class: `input-badge ${!this.badge ? 'dot-mode' : ''}` }, this.badge || '')), this.renderPrefixIcon(), this.floatingLabel && !isOtp && h("label", { key: '36418949fb5a3613f3c56517db0b2ba52e74d1d0', class: "floating-label" }, this.label, this.required && '*'), this.multiline ? (h("textarea", { ...commonProps, style: { resize: this.autoResize ? 'none' : this.resize }, value: this.value })) : isOtp ? (h("div", { class: "otp-container" }, Array.from({ length: this.otpLength }).map((_, i) => (h("div", { class: { 'otp-box': true, 'filled': this.value.length > i, 'active': this.value.length === i && this.isFocused } }, this.value[i] || ''))), h("input", { ...commonProps, style: { opacity: '0', position: 'absolute', inset: '0', caretColor: 'transparent' } }))) : this.type === 'range' ? (h("div", { class: "range-input-wrapper", style: { '--range-progress': `${this.getRangePercentage()}%` } }, h("input", { ...commonProps, type: "range", value: this.rangeValue, min: this.min || 0, max: this.max || 100, step: this.step || 1 }), h("div", { class: "range-manual-adornment" }, h("input", { type: "number", class: "range-manual-input", value: this.rangeValue, min: this.min || 0, max: this.max || 100, step: this.step || 1, onInput: this.handleRangeManualInput })))) : (h("div", { class: "input-field-stack" }, h("input", { ...commonProps, type: inputType, value: isFile ? this.selectedFileNames : this.value }), this.currentGhost && h("span", { class: "ghost-text-overlay", onClick: () => (this.value = this.ghostText) }, this.currentGhost))), isColor && (h("input", { key: '71f29e41543ada3bb27402ec955ce17172866c35', type: "color", style: { opacity: '0', position: 'absolute', inset: '0', pointerEvents: 'none' }, value: this.value || '#000000', onInput: (e) => { this.value = e.target.value; this.inputChange.emit(this.value); }, ref: (el) => (this.colorPickerElement = el) })), isFile && (h("input", { key: 'f11732d7b0a60588b2d3fc74525cecb63c494a0d', type: "file", style: { opacity: '0', position: 'absolute', inset: '0', cursor: 'pointer', zIndex: '1' }, accept: this.accept, multiple: this.multiple, onInput: this.handleInput, ref: (el) => (this.filePickerElement = el) })), this.suffixText && h("span", { key: '5daa65c5274948ca30e12f9d305b5ed36aca27b9', class: { 'suffix-text': true, [`block-color-${this.suffixColor}`]: !!this.suffixColor } }, this.suffixText), (this.statusIndicator !== 'none' || this.isRecording || this._voiceOffLabel) && (h("div", { key: 'f0a15ca443598eccff24608f24e03f6b6c524409', class: `status-indicator status-${this.isRecording ? 'listening' : this._voiceOffLabel ? 'offline' : this.statusIndicator}` }, !this.voiceEnabled && !this.voiceInput && (this.statusIndicator === 'listening' || this.isRecording) && (h("ui-icon", { key: '3debcf72af06dab5cd5ab03f9e81793cde4c0a95', library: "lucide", name: "mic", class: "mic-pulse" })), this.statusIndicator !== 'listening' && !this.isRecording && !this._voiceOffLabel && (h("span", { key: '440b5c5cad18a6b7cd0de8c04dd0f49ae35db124', class: "status-dot" })), h("span", { key: 'bffc20acbaf070199bef467cefa3c25adc328221', class: "status-label" }, this.isRecording
+            }, style: hostStyles }, h("div", { key: 'e3e095ca40775b9c8acebea74563510d1ce53783', class: { ...inputClasses, 'input-ripple': this.rippleEffect } }, this.label && !this.floatingLabel && !isOtp && h("label", { key: '80cf74ffcb51ab88a4b741735f0dd2e605dd6093', class: "input-label" }, this.label, this.required && '*'), h("div", { key: 'ab7fd102b717f98310a33f852941193eff690429', class: "input-container", onMouseDown: this.handleMouseDown, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("div", { key: '33ac5d37c8424e3676f0ff3aa7fcc56022234a7a', class: "clipping-layer" }, this.showRipple && h("div", { key: '04ce9c9370ba75eccc571b6a77fdc9d0d85aa414', class: "liquid-ripple", style: { left: `${this.rippleX}px`, top: `${this.rippleY}px` } }), this.linearLoading && h("div", { key: '57fae93bef66ce2442cff10d8c1047c06534f2f4', class: "linear-loading-bar" }), this.backdropSheen && h("div", { key: '4cc4cda3894e58b5de70ee5769c8dcdab7660394', class: "backdrop-sheen-effect" })), this.renderAutocomplete(), (this.badge || (this.dirtyTracking && this.isDirty)) && (h("span", { key: '0d81a8f25b0a5f8d657334be35fd6265b0a6d517', class: `input-badge ${!this.badge ? 'dot-mode' : ''}` }, this.badge || '')), this.renderPrefixIcon(), this.floatingLabel && !isOtp && h("label", { key: '21b3824bad5426b981cd4c3e24f0d72b11f42800', class: "floating-label" }, this.label, this.required && '*'), this.multiline ? (h("textarea", { ...commonProps, style: { resize: this.autoResize ? 'none' : this.resize }, value: this.value })) : isOtp ? (h("div", { class: "otp-container" }, Array.from({ length: this.otpLength }).map((_, i) => (h("div", { class: { 'otp-box': true, 'filled': this.value.length > i, 'active': this.value.length === i && this.isFocused } }, this.value[i] || ''))), h("input", { ...commonProps, style: { opacity: '0', position: 'absolute', inset: '0', caretColor: 'transparent' } }))) : this.type === 'range' ? (h("div", { class: "range-input-wrapper", style: { '--range-progress': `${this.getRangePercentage()}%` } }, h("input", { ...commonProps, type: "range", value: this.rangeValue, min: this.min || 0, max: this.max || 100, step: this.step || 1 }), h("div", { class: "range-manual-adornment" }, h("input", { type: "number", class: "range-manual-input", value: this.rangeValue, min: this.min || 0, max: this.max || 100, step: this.step || 1, onInput: this.handleRangeManualInput })))) : (h("div", { class: "input-field-stack" }, h("input", { ...commonProps, type: inputType, value: isFile ? this.selectedFileNames : this.value }), this.currentGhost && h("span", { class: "ghost-text-overlay", onClick: () => (this.value = this.ghostText) }, this.currentGhost))), isColor && (h("input", { key: '92a94bf2a1b15d0619402459af2042568d1b41e1', type: "color", style: { opacity: '0', position: 'absolute', inset: '0', pointerEvents: 'none' }, value: this.value || '#000000', onInput: (e) => { this.value = e.target.value; this.inputChange.emit(this.value); }, ref: (el) => (this.colorPickerElement = el) })), isFile && (h("input", { key: 'd03600aa9ed340b7aee6d8cc67f85b5d9bffef11', type: "file", style: { opacity: '0', position: 'absolute', inset: '0', cursor: 'pointer', zIndex: '1' }, accept: this.accept, multiple: this.multiple, onInput: this.handleInput, ref: (el) => (this.filePickerElement = el) })), this.suffixText && h("span", { key: 'e41d89f9aa5e3f776152bb3571dfe791bb190429', class: { 'suffix-text': true, [`block-color-${this.suffixColor}`]: !!this.suffixColor } }, this.suffixText), (this.statusIndicator !== 'none' || this.isRecording || this._voiceOffLabel) && (h("div", { key: '97c5bb06c3cd3c415ae269de07d15e9cae37bc11', class: `status-indicator status-${this.isRecording ? 'listening' : this._voiceOffLabel ? 'offline' : this.statusIndicator}` }, !this.voiceEnabled && !this.voiceInput && (this.statusIndicator === 'listening' || this.isRecording) && (h("ui-icon", { key: '13305b3242980ce30f7ddb011f9c293f65520bff', library: "lucide", name: "mic", class: "mic-pulse" })), this.statusIndicator !== 'listening' && !this.isRecording && !this._voiceOffLabel && (h("span", { key: '287f8784f85a1c8ce18185668ded6be9abdfe521', class: "status-dot" })), h("span", { key: 'dcf8414fd07f22c907d8f0a44e2f291bd8d9e06a', class: "status-label" }, this.isRecording
             ? 'Listening'
             : this._voiceOffLabel
                 ? 'Not listening'
                 : this.statusIndicator !== 'none'
                     ? this.statusIndicator.charAt(0).toUpperCase() + this.statusIndicator.slice(1)
-                    : null), this.statusIndicator === 'typing' && h("span", { key: '19262bd829f945fd203266ea67c248a94a775f71', class: "typing-animation" }, h("span", { key: '769cbdde9e871c0fefa37466f5189bd4b95f04c9' }), h("span", { key: 'ada0306edd6f3f942e0d0258b820f3d425278654' }), h("span", { key: '687a023614358579750b5f493ad2bb8511ef2910' })))), this.renderSuffixContent(), this.renderSteppers(), this.hintTooltip && h("div", { key: '86d50262507a075bd68ea71fabcf4914d6a118e3', class: "hint-tooltip-icon", title: this.hintTooltip }, h("ui-icon", { key: 'e5590e7a20808a41bdfc3719e00b9e5ad2fc4a1d', library: "lucide", name: "help-circle" }))), (validationMessage || this.showCounter || this.minLengthIndicator || this.maxLengthIndicator || (this.type === 'password' && this.value && this.showPasswordStrength)) && (h("div", { key: '9479bdd436afd44ee5b05dfc99bd6ce84379f058', class: "input-footer" }, this.type === 'password' && this.value && this.showPasswordStrength && (h("div", { key: '0ea62a19ed66dc33e98a3aba4a63c62589fb560e', class: "password-strength-meter" }, h("div", { key: '3564a2205d7ade940909e12ef18b3ec71c06b583', class: `strength-bar strength-${this.passwordStrength}` }))), validationMessage && (h("span", { key: '4015b4eb68d7045a4447df795debefa080acd854', class: `helper-text ${this.validationState !== 'none' ? this.validationState + '-text' : ''}` }, this.validationState === 'error' && h("ui-icon", { key: 'bb9a04f2f7b577d9d797e574263fc96800e7184a', library: "lucide", name: "alert-circle", class: "validation-icon" }), this.validationState === 'warning' && h("ui-icon", { key: '2e756012a47e39f76472cd21497c692cb2cb66fa', library: "lucide", name: "alert-triangle", class: "validation-icon" }), this.validationState === 'success' && h("ui-icon", { key: '66d61660c177e1f4fece47bf7433c37045a13506', library: "lucide", name: "check-circle-2", class: "validation-icon" }), this.validationState === 'info' && h("ui-icon", { key: '6e41af71dd9abacd6f58e386297d023294dff819', library: "lucide", name: "info", class: "validation-icon" }), validationMessage)), this.relativeTime && this.type === 'date' && this.value && (h("span", { key: 'ac8f3dae2f0aa149cf6394e7683599a6a3e4505e', class: "relative-time-overlay" }, this.getRelativeTimeString(this.value))), this.showCounter && this.maxLength && h("span", { key: '5226cbf5034a58151a46c687180616246c9039d9', class: "character-counter" }, this.currentLength, "/", this.maxLength), this.renderLengthIndicator())))));
+                    : null), this.statusIndicator === 'typing' && h("span", { key: '97e33fe463f2614ad1d50434113f901295476388', class: "typing-animation" }, h("span", { key: '6a4deee492deb251b6d9166932f9bf39575dc7ae' }), h("span", { key: '7cfec2336ffed51a4a807f59d9acadf242d6eba1' }), h("span", { key: '537aee8e7a731ebe94a9a9d2782211c2ed27ee74' })))), this.renderSuffixContent(), this.renderSteppers(), this.hintTooltip && h("div", { key: '0e823d9672e91e3f3e73fee5f3b3b7ffb852d124', class: "hint-tooltip-icon", title: this.hintTooltip }, h("ui-icon", { key: 'ddbdd7627df9b9e0b5f21549555478957b987acb', library: "lucide", name: "help-circle" }))), (validationMessage || this.showCounter || this.minLengthIndicator || this.maxLengthIndicator || (this.type === 'password' && this.value && this.showPasswordStrength)) && (h("div", { key: 'b744601318eb4bc5591c46b55c7bb6c695b53e0d', class: "input-footer" }, this.type === 'password' && this.value && this.showPasswordStrength && (h("div", { key: '0a53061d23adf47ed76c9f136208fa6d1aea24ba', class: "password-strength-meter" }, h("div", { key: 'bb04a6a647595ac406a19f66d2070709d9d70427', class: `strength-bar strength-${this.passwordStrength}` }))), validationMessage && (h("span", { key: 'b2afa105430243ed422fbba82f3411becb889a65', class: `helper-text ${this.validationState !== 'none' ? this.validationState + '-text' : ''}` }, this.validationState === 'error' && h("ui-icon", { key: 'ada379d68e13611f58892c386133633ca52eb20f', library: "lucide", name: "alert-circle", class: "validation-icon" }), this.validationState === 'warning' && h("ui-icon", { key: '28b17d21ea957ba6e9c7fc556737182c11894d8f', library: "lucide", name: "alert-triangle", class: "validation-icon" }), this.validationState === 'success' && h("ui-icon", { key: '3ea20f412b2a859070585d2cbafade0f692bbbad', library: "lucide", name: "check-circle-2", class: "validation-icon" }), this.validationState === 'info' && h("ui-icon", { key: 'f6cfbfbe60bcf78ea2dcd50b75bda182bc8133a1', library: "lucide", name: "info", class: "validation-icon" }), validationMessage)), this.relativeTime && this.type === 'date' && this.value && (h("span", { key: 'f952bbb2fc1d5833b64e90717b1c0b8c2ed88e69', class: "relative-time-overlay" }, this.getRelativeTimeString(this.value))), this.showCounter && this.maxLength && h("span", { key: '86521b16722af6200a90d99d97b5d41fb601cc88', class: "character-counter" }, this.currentLength, "/", this.maxLength), this.renderLengthIndicator())))));
     }
     static get is() { return "ui-input"; }
     static get encapsulation() { return "shadow"; }
@@ -1754,7 +1754,7 @@ export class Input {
                 "mutable": false,
                 "complexType": {
                     "original": "InputVariant",
-                    "resolved": "\"bordered\" | \"borderless\" | \"color\" | \"danger\" | \"dark\" | \"default\" | \"dots-only\" | \"elevated\" | \"error\" | \"filled\" | \"flat\" | \"ghost\" | \"glass\" | \"gradient\" | \"info\" | \"inverse\" | \"light\" | \"minimal\" | \"neutral\" | \"outlined\" | \"panel\" | \"plain\" | \"primary\" | \"quaternary\" | \"raised\" | \"secondary\" | \"segmented\" | \"soft\" | \"solid\" | \"standard\" | \"success\" | \"surface\" | \"tertiary\" | \"text\" | \"underlined\" | \"warning\"",
+                    "resolved": "\"bordered\" | \"borderless\" | \"color\" | \"danger\" | \"dark\" | \"default\" | \"dots-only\" | \"elevated\" | \"error\" | \"filled\" | \"flat\" | \"ghost\" | \"glass\" | \"gradient\" | \"info\" | \"inverse\" | \"light\" | \"minimal\" | \"neutral\" | \"outlined\" | \"panel\" | \"plain\" | \"primary\" | \"quaternary\" | \"raised\" | \"secondary\" | \"segmented\" | \"soft\" | \"solid\" | \"standard\" | \"status\" | \"success\" | \"surface\" | \"tertiary\" | \"text\" | \"underlined\" | \"warning\"",
                     "references": {
                         "InputVariant": {
                             "location": "import",

package/dist/collection/components/layout-manager/layout-manager.js

@@ -346,7 +346,7 @@ export class LayoutManager {
         document.removeEventListener('mouseup', this.onGlobalMouseUp);
     };
     render() {
-        return (h("div", { key: 'f569e28b4534614afdb516bf769ad888c11b103f', class: "lm-root" }, h("lm-container", { key: 'fd8a5616176a28a3da539012d2e683f5216209fb', node: this.layout.root }), this.dropIndicator && h("div", { key: '27e38072647723cba399914c9f1684dc9ea62de5', class: `lm-drop-indicator ${this.dropIndicator.zone}`, style: this.getIndicatorStyle() }), h("div", { key: 'dfc23cda195b1b5ef6096c2fb76f52a0fd57cd3f', class: "lm-floating" }, this.layout.floating.map(f => (h("lm-floating-window", { "panel-id": f.id }))))));
+        return (h("div", { key: 'a7d960702919a492c0f69534926d1a3eb3be72dd', class: "lm-root" }, h("lm-container", { key: '065dad724b014066c553e9eedc8f43f893d7d573', node: this.layout.root }), this.dropIndicator && h("div", { key: '8ed57f7562cdaf20c5d65f79cc16c638d8450b95', class: `lm-drop-indicator ${this.dropIndicator.zone}`, style: this.getIndicatorStyle() }), h("div", { key: '001e3f78b7e233858cad4ff5035849091dca554e', class: "lm-floating" }, this.layout.floating.map(f => (h("lm-floating-window", { "panel-id": f.id }))))));
     }
     static get is() { return "layout-manager"; }
     static get originalStyleUrls() {

package/dist/collection/components/layout-manager/lm-floating-window/lm-floating-window.js

@@ -4,7 +4,7 @@ export class LmFloatingWindow {
     x = 100;
     y = 100;
     render() {
-        return (h("div", { key: '987212734ff21ee0d02c5ae2f0fe144e901d8206', class: "lm-float", style: { left: `${this.x}px`, top: `${this.y}px` }, "data-panel-id": this.panelId }, h("div", { key: '8b922866c1955c167c6a2e5ea5d30c3c5a6bd57c', class: "lm-float-header" }, "Floating - ", this.panelId), h("div", { key: 'a0e3f8cd66090fc879b10b7ce0d7005ea6e76381', class: "lm-float-body" }, h("slot", { key: '0362df47eeafe69e15151e443b72c62e97ca3300' }))));
+        return (h("div", { key: '127457de3888abc6cc985f0eb63c093c06d71734', class: "lm-float", style: { left: `${this.x}px`, top: `${this.y}px` }, "data-panel-id": this.panelId }, h("div", { key: '1413e834a512629ce51325aeb9a303d74fb9e39d', class: "lm-float-header" }, "Floating - ", this.panelId), h("div", { key: '4fe4b7599ade9297207575f36f3135bab34f012b', class: "lm-float-body" }, h("slot", { key: 'db60539be3bbe32fe8f3bd1900a6f43761be57ff' }))));
     }
     static get is() { return "lm-floating-window"; }
     static get originalStyleUrls() {

package/dist/collection/components/layout-manager/lm-panel/lm-panel.js

@@ -14,7 +14,7 @@ export class LmPanel {
         });
     };
     render() {
-        return (h("div", { key: 'deb12b776f98fd8ebf5fd56807afb71b8df2cd0d', class: "lm-panel", "data-id": this.panel.id }, h("div", { key: '92e40c443c14ee9f0ae3fbe26a11889a56911098', class: "lm-panel-header", onMouseDown: e => this.onHeaderMouseDown(e) }, h("div", { key: '4c10877061aeeabb9f80803c57bdd6e594dd5383', class: "lm-title", style: { display: 'flex', alignItems: 'center' } }, this.panel.icon && h("ui-icon", { key: '23a72b93dda720d0360c67e6e59c90544900dc44', name: this.panel.icon, library: "lucide", style: { width: '16px', height: '16px', marginRight: '8px' } }), this.panel.title), h("div", { key: '86191441afcbac1e185f1d27b0a2cf11192d423b', class: "lm-controls" }, this.panel.closable !== false && (h("ui-button", { key: '4dd85509e733a1b62e7980d2ba7e399fce209ef9', variant: "ghost", class: "lm-close", onClick: () => this.closePanel(), ariaLabel: "Close panel", icon: "x", iconLibrary: "lucide", iconOnly: true, size: "xxs" })))), h("div", { key: '8734d98fd113a5005a71f3adf121842d8b7a0000', class: "lm-panel-body" }, this.panel.content ? (h("div", { innerHTML: sanitizeHTML(this.panel.content) })) : (h("slot", null)))));
+        return (h("div", { key: 'ed9841ccbbf9405cce4768bfc6b95679e3073612', class: "lm-panel", "data-id": this.panel.id }, h("div", { key: 'da601613fad1f4fbbfe710dab28023641fc09e22', class: "lm-panel-header", onMouseDown: e => this.onHeaderMouseDown(e) }, h("div", { key: 'd5770de243fe1b56344cc7eac1747fb27fdac878', class: "lm-title", style: { display: 'flex', alignItems: 'center' } }, this.panel.icon && h("ui-icon", { key: 'ae016e3300eb49f9a57b455caf7507bd97436b41', name: this.panel.icon, library: "lucide", style: { width: '16px', height: '16px', marginRight: '8px' } }), this.panel.title), h("div", { key: '44f63e8f914ff8d2fc49159e6c4aea47a4bf9110', class: "lm-controls" }, this.panel.closable !== false && (h("ui-button", { key: 'ab22aed20eb1f50fca03ccd70e56eb502d150fe7', variant: "ghost", class: "lm-close", onClick: () => this.closePanel(), ariaLabel: "Close panel", icon: "x", iconLibrary: "lucide", iconOnly: true, size: "xxs" })))), h("div", { key: '7f7b24123c8ef2f29e854bde5bf021b8b269860b', class: "lm-panel-body" }, this.panel.content ? (h("div", { innerHTML: sanitizeHTML(this.panel.content) })) : (h("slot", null)))));
     }
     static get is() { return "lm-panel"; }
     static get originalStyleUrls() {

package/dist/collection/components/layout-manager/lm-splitter/lm-splitter.js

@@ -35,7 +35,7 @@ export class LmSplitter {
     };
     direction = 'horizontal'; // Default to horizontal (vertical bar) for row layout
     render() {
-        return h("div", { key: '6cbc72c65f18247f7a445a3c887c774d13551297', class: `lm-splitter ${this.direction}`, onMouseDown: e => this.onDown(e) });
+        return h("div", { key: '10a37bce5b34d39754a42339ece2fd8c1759ffec', class: `lm-splitter ${this.direction}`, onMouseDown: e => this.onDown(e) });
     }
     static get is() { return "lm-splitter"; }
     static get originalStyleUrls() {

package/dist/collection/components/layout-manager/lm-tabs/lm-tabs.js

@@ -21,7 +21,7 @@ export class LmTabs {
         GlobalEventBus.emit('panel:dragstart', { panelId: id, x: e.clientX, y: e.clientY });
     }
     render() {
-        return (h("div", { key: '83f1cde2f6966da615dd0e0b5ab821e0f035ce22', class: `lm-tabs ${this.mode}` }, h("div", { key: '507a672779ab113ca9da4d724c6d59451084daf4', class: "lm-tab-list" }, this.panels.map(p => (h("div", { class: `lm-tab ${p.id === this.activeTabId ? 'active' : ''}`, "data-id": p.id, onClick: () => this.switchTab(p.id), onMouseDown: (e) => this.onTabMouseDown(e, p.id) }, h("span", { class: "lm-tab-title", style: { display: 'flex', alignItems: 'center' } }, p.icon && h("ui-icon", { name: p.icon, library: "lucide", style: { width: '14px', height: '14px', marginRight: '6px' } }), p.title), p.closable !== false && (h("span", { class: "lm-tab-close", onClick: (e) => this.closePanel(e, p.id) }, "\u00D7"))))))));
+        return (h("div", { key: 'febe482fbf5af159c3be293e1964d12eacf44ac2', class: `lm-tabs ${this.mode}` }, h("div", { key: '85a936ec854d5044ce2994b49fff517e5fe877e4', class: "lm-tab-list" }, this.panels.map(p => (h("div", { class: `lm-tab ${p.id === this.activeTabId ? 'active' : ''}`, "data-id": p.id, onClick: () => this.switchTab(p.id), onMouseDown: (e) => this.onTabMouseDown(e, p.id) }, h("span", { class: "lm-tab-title", style: { display: 'flex', alignItems: 'center' } }, p.icon && h("ui-icon", { name: p.icon, library: "lucide", style: { width: '14px', height: '14px', marginRight: '6px' } }), p.title), p.closable !== false && (h("span", { class: "lm-tab-close", onClick: (e) => this.closePanel(e, p.id) }, "\u00D7"))))))));
     }
     static get is() { return "lm-tabs"; }
     static get originalStyleUrls() {

package/dist/collection/components/library/category-section.js

@@ -14,7 +14,7 @@ export class CategorySection {
         this.expanded = !this.expanded;
     };
     render() {
-        return (h(Host, { key: 'e3a09ce08fdb7d41a84a0513c9bd9307d7d0fb2f' }, h("div", { key: '68321cc0d827decbd472217460b97dc7955c818c', class: { 'category': true, 'collapsed': !this.expanded } }, h("ui-button", { key: '4b232b38aa4f84d8526206801aa1c562a051da64', class: "category-header", onButtonClick: this.toggleExpanded, variant: "plain", fullWidth: true, align: "start" }, h("span", { key: 'c4d4449576357c8a85e131fd6e51d550b61bcb0e', class: "category-icon" }, this.categoryIcon), h("h2", { key: 'dd646cf30106d5665fd7cf16a33a1646dd576be5', class: "category-title" }, this.categoryName), h("span", { key: 'e174d5fa4e6eeaf3e6998f583c5a38329e66e176', class: "category-count" }, this.components.length), h("svg", { key: '5e926d6ace89797270d978e2c51aeeb362e57e33', class: { 'chevron': true, 'rotated': !this.expanded }, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("polyline", { key: 'f02857e200d2f5562c19a1fecc3a4584fd52271e', points: "6,9 12,15 18,9" }))), h("div", { key: '3e70d09a10eda7220b63253dca6638220326ea0a', class: "category-content" }, h("div", { key: 'a51ebf47c0fafe095ca8616ee3f661ee4124c805', class: "cards-grid" }, this.components.map(comp => (h("library-card", { key: comp.id, "component-id": comp.id, "card-title": comp.name, description: comp.description, icon: comp.icon, badge: comp.badge, docs: comp.docs, mode: this.mode }))))))));
+        return (h(Host, { key: 'cbf8ccd3007f98bb7e60a16df0bc5e2297ca6169' }, h("div", { key: '26e8b469d968c65d6d3b27c9beebd41877e92ad8', class: { 'category': true, 'collapsed': !this.expanded } }, h("ui-button", { key: '7310a57de6db671d7cfabec3627fdb1bc350723c', class: "category-header", onButtonClick: this.toggleExpanded, variant: "plain", fullWidth: true, align: "start" }, h("span", { key: '5505829b31f4d0bd69c063159b056a8ba3403c2f', class: "category-icon" }, this.categoryIcon), h("h2", { key: 'bfead7dba3a483a23a2971747b31ff0466cb11af', class: "category-title" }, this.categoryName), h("span", { key: 'bb3017b79b6abf090af4589c79ee03738ecfc10f', class: "category-count" }, this.components.length), h("svg", { key: 'bb7785342b89e9e571707abc2b0c0637037eb0b2', class: { 'chevron': true, 'rotated': !this.expanded }, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("polyline", { key: '625fc1dac9dffc486edf86dc3d5862e7e15e0fb1', points: "6,9 12,15 18,9" }))), h("div", { key: '8a4a7c7f42ac74396853b44e57fc7aaa38ddaf7d', class: "category-content" }, h("div", { key: '924bef66650d575f4cbfaf69d06b9e1ed76bcf08', class: "cards-grid" }, this.components.map(comp => (h("library-card", { key: comp.id, "component-id": comp.id, "card-title": comp.name, description: comp.description, icon: comp.icon, badge: comp.badge, docs: comp.docs, mode: this.mode }))))))));
     }
     static get is() { return "category-section"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/library/library-card.js

@@ -47,7 +47,7 @@ export class LibraryCard {
         }
     };
     render() {
-        return (h(Host, { key: '3a3ff13a2954f14c350206fdad4ba6340f653e4e' }, h("div", { key: 'b92cca51b6cc6af60d8476f386482ccfdd475a34', class: "card", onClick: this.handleViewDemo }, h("div", { key: '30a68d761de621658d2fc34a40ea101fbf04141e', class: "card-icon" }, this.icon), h("div", { key: '9ac9cba2c76b9568e2a5f319f0b04cb283a5e682', class: "card-content" }, h("h3", { key: '0b62e3e8b4839a79a4f567dee7ff1da61a8799cf', class: "card-title" }, this.cardTitle, this.badge && h("span", { key: '2254007ce97d9a0cc9cbcf66f8b397e48eaca256', class: "badge" }, this.badge)), h("p", { key: '4d5a519fd7d9759ae9f17783e680002e66a82106', class: "card-description" }, this.description)), h("div", { key: '71b72af77182f87ce4e09ad2f17a3f66618ffc12', class: "card-action" }, this.docs && (h("ui-button", { key: '3b9318ef02116646198e2535f97394ccf634f674', variant: "ghost", size: "md", icon: "file-text", "icon-library": "lucide", title: "View Documentation", onClick: this.handleViewDocs })), h("ui-button", { key: 'de3abccdcdd7e3504e7fc57d3525e0a41b27b731', variant: "filled", color: "primary", size: "md", icon: "play", "icon-library": "lucide", title: "View Demo" })))));
+        return (h(Host, { key: 'e7edb6ead577044fd1f0fa6b7679be3dcfeabe2b' }, h("div", { key: '8ca7a57e9eaa74b7504e55e0babe472e38a0ec43', class: "card", onClick: this.handleViewDemo }, h("div", { key: '3fad5c6b2c77cf04368ed68ad98cd1839580a5c2', class: "card-icon" }, this.icon), h("div", { key: '4400e8559ff068d0eddba7e781498d583da9cb19', class: "card-content" }, h("h3", { key: '59003194f0804f32b304c57c1ea6d72469759264', class: "card-title" }, this.cardTitle, this.badge && h("span", { key: '906582ba015efb8c817b4cfa2171e6174c7342d6', class: "badge" }, this.badge)), h("p", { key: '0accb66ebbb468e22cffeaea5a1670f3c5a61922', class: "card-description" }, this.description)), h("div", { key: 'f62f8e4b3c46fdaa83797603874965ba891eb02a', class: "card-action" }, this.docs && (h("ui-button", { key: 'e8f3c1790fbb58887826012e0ffb79056de2cfaa', variant: "ghost", size: "md", icon: "file-text", "icon-library": "lucide", title: "View Documentation", onClick: this.handleViewDocs })), h("ui-button", { key: '098cb0afc2110dd502003e164478eb9595f212f3', variant: "filled", color: "primary", size: "md", icon: "play", "icon-library": "lucide", title: "View Demo" })))));
     }
     static get is() { return "library-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/library/library.js

@@ -44,7 +44,7 @@ export class Library {
     render() {
         const filteredByCategory = this.getFilteredComponents();
         const totalComponents = componentsData.length;
-        return (h(Host, { key: 'beac989569c0ca806ae655da242ec9904445d39f' }, h("div", { key: '959612c2d98c7daca8a4ac1f35cf3df93ae7b2c7', class: "library-container" }, h("header", { key: '27e8009daad08c4b07d52e64881c29b87e3b9c40', class: "library-header" }, h("div", { key: 'b07dcdd2b87367c4c2d83f00b0a739e3b3713c7a', class: "header-content" }, h("div", { key: 'da37733ca7ee6888845f17acc3636efa8119300c', class: "logo-section" }, h("div", { key: 'f621cc915750bcf3ede6518baa6aceb6ca8d39a5', class: "logo" }, h("span", { key: 'bd201dccfd00236e31789149190244b08d38a005', class: "logo-icon" }, "\uD83C\uDFA8"), h("span", { key: 'eb94d775fce9a5d47127b19eb5d512857cfb0de0', class: "logo-text" }, "App UI")), h("span", { key: '225b246368e5e6fe765387ed2d03fdb3722fe463', class: "version-badge" }, "v0.1.0")), h("div", { key: '961bed93bdb2e56ec60b1dae9a5389c1a75e067f', class: "search-container" }, h("ui-input", { key: 'feda70660a055323076630917b0e7a49afcb0a8a', class: "search-input", placeholder: "Search components...", value: this.searchQuery, onInputChange: (e) => this.searchQuery = e.detail, "prefix-icon": "search", "icon-library": "lucide", clearable: true })), h("div", { key: '592f3d4fe0f19a5bc1a33f8cd6ffc2f98766b13c', class: "header-stats" }, h("span", { key: 'edfe4fe44fc73aa922883f30ee2c50abcd407aa0', class: "stat" }, totalComponents, " components"), h("span", { key: '1271653612b2d1e56327e4eb043ef1848be9e7ae', class: "stat" }, categories.length, " categories")))), h("nav", { key: 'd5e1be2e568e66c317362e85baa4f8b184b2ad05', class: "category-nav" }, h("ui-button", { key: 'a43178b8702bda6441c706d7b27d7d5268b1017e', label: "All", variant: this.selectedCategory === null ? 'filled' : 'ghost', color: "primary", size: "md", onClick: () => this.handleCategoryClick(null), style: { borderRadius: '20px' } }), categories.map(cat => (h("ui-button", { key: cat, label: `${this.getCategoryIcon(cat)} ${cat}`, variant: this.selectedCategory === cat ? 'filled' : 'ghost', color: "primary", size: "md", onClick: () => this.handleCategoryClick(cat), style: { borderRadius: '20px' } })))), h("main", { key: '011117cd9c223602cc8dc11af1f8a058b8b25a5a', class: "library-content" }, Object.keys(filteredByCategory).length === 0 ? (h("div", { class: "no-results" }, h("ui-icon", { name: "search", library: "lucide", size: "2em", class: "no-results-icon" }), h("h3", null, "No components found"), h("p", null, "Try adjusting your search or filter criteria"))) : (Object.entries(filteredByCategory).map(([category, components]) => (h("category-section", { key: category, "category-name": category, "category-icon": this.getCategoryIcon(category), components: components, mode: this.mode }))))), h("footer", { key: 'fd993854e47f108c29bda48371866c5ab43935a5', class: "library-footer" }, h("p", { key: '78fbe5d2283722f32297cc99446e37b8b366d045' }, "Built with \u2764\uFE0F using Stencil.js"), h("div", { key: '0be6641e6a4f57e02a0070311eceeab0fff6136a', class: "footer-links" }, h("a", { key: 'e166e252d8367239b62ab1904cddef9425dcb7c1', href: "#", class: "footer-link" }, "Documentation"), h("a", { key: 'fdcd853536091767eefcdc8d28a231972f573a51', href: "#", class: "footer-link" }, "GitHub"), h("a", { key: 'a8d34f3e11ed0aa47aa82f074530d774f6982635', href: "#", class: "footer-link" }, "Changelog"))))));
+        return (h(Host, { key: '4c1dc7e15800d09ec6aa0133c8701d7da61ab655' }, h("div", { key: 'cae99305a344bafc11d001b4f4c2cb0c1fe0f542', class: "library-container" }, h("header", { key: '62e00d85aad197e14979d3dc1c5402de834c0eb0', class: "library-header" }, h("div", { key: '01a835fb6293e56c2944be028b1f0f9395144308', class: "header-content" }, h("div", { key: '696357260008450eff7bba75b7a49d7a6f2451f5', class: "logo-section" }, h("div", { key: 'ac0f7a864019b9d33c9b4fee9b7c263e29d0aed3', class: "logo" }, h("span", { key: '0daec32b5865d5ae6c81d9812952aef9a1a76fb5', class: "logo-icon" }, "\uD83C\uDFA8"), h("span", { key: '2e4d257808381b4fac4c391d3089cce08798e571', class: "logo-text" }, "App UI")), h("span", { key: '920ed50aabb207dc2ea90d6ef99da8132e986b16', class: "version-badge" }, "v0.1.0")), h("div", { key: 'c29d9d82ea126477b091e8b3a7f97f8ac3b5b369', class: "search-container" }, h("ui-input", { key: '5d38afc08cda8b1501f41585f010e300960fa30d', class: "search-input", placeholder: "Search components...", value: this.searchQuery, onInputChange: (e) => this.searchQuery = e.detail, "prefix-icon": "search", "icon-library": "lucide", clearable: true })), h("div", { key: '93bea43833d4531d146af1b87f9617b190d49a94', class: "header-stats" }, h("span", { key: 'c70cf9beb7e5ac45bb5f1ff81a6f7392e1798d73', class: "stat" }, totalComponents, " components"), h("span", { key: '9f8566888498ef1d8cf4225e879b3d8878b8102a', class: "stat" }, categories.length, " categories")))), h("nav", { key: '28830f9ed321730f42d699296bd7c881c4b1584d', class: "category-nav" }, h("ui-button", { key: '7d96d7165f81812ce2d40ab6527709ce99e006a3', label: "All", variant: this.selectedCategory === null ? 'filled' : 'ghost', color: "primary", size: "md", onClick: () => this.handleCategoryClick(null), style: { borderRadius: '20px' } }), categories.map(cat => (h("ui-button", { key: cat, label: `${this.getCategoryIcon(cat)} ${cat}`, variant: this.selectedCategory === cat ? 'filled' : 'ghost', color: "primary", size: "md", onClick: () => this.handleCategoryClick(cat), style: { borderRadius: '20px' } })))), h("main", { key: 'de56e287dde8103b7002774cfbcd03661ab1dd16', class: "library-content" }, Object.keys(filteredByCategory).length === 0 ? (h("div", { class: "no-results" }, h("ui-icon", { name: "search", library: "lucide", size: "2em", class: "no-results-icon" }), h("h3", null, "No components found"), h("p", null, "Try adjusting your search or filter criteria"))) : (Object.entries(filteredByCategory).map(([category, components]) => (h("category-section", { key: category, "category-name": category, "category-icon": this.getCategoryIcon(category), components: components, mode: this.mode }))))), h("footer", { key: '0054505d4de9a0d3b9bdc09e547e375839231b15', class: "library-footer" }, h("p", { key: '10b12d9827ca1d5d55c7bd0369fd5aeaef059a8f' }, "Built with \u2764\uFE0F using Stencil.js"), h("div", { key: '50cc149a78a8192c27264590f17268082ce5d0d6', class: "footer-links" }, h("a", { key: 'ea18fc69818bddda3a1405716f93d8660d9abef3', href: "#", class: "footer-link" }, "Documentation"), h("a", { key: '3e8d3dda249e3726d92b7b50423144402d297c31', href: "#", class: "footer-link" }, "GitHub"), h("a", { key: 'fa50f729f8d6021cf5ca60036ddc0adda4426b74', href: "#", class: "footer-link" }, "Changelog"))))));
     }
     static get is() { return "ui-library"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/list/list.js

@@ -678,7 +678,7 @@ export class AppList {
             ...(this.maxHeight ? { maxHeight: this.maxHeight, overflowY: 'auto' } : {}),
             ...gridStyle
         };
-        return (h("div", { key: '5684139656aa6922b537ed2c33d040ff00951369', class: containerClasses, onKeyDown: this.handleKeyDown, tabindex: "0" }, this.syncing && h("div", { key: '3d0fa48f4af75ef72778c33a2e7c49b0fcdc951c', class: "list-sync-bar" }), h("div", { key: 'ca2b3d140bde8c70c312694b09605f8c57494de6', class: "list-header-adaptive" }, h("div", { key: '9652209ed505568d154ff0cea69a59946d152d0f', class: "header-main-titles" }, this.label && h("div", { key: '3a2219002b7c43dd851b577354e36da1c1b1bbdf', class: "list-label" }, this.label), this.subheader && h("div", { key: '65fdf444f79400cb22091c8e1ba559476c2e5e60', class: "list-subheader" }, this.subheader)), this.renderViewTabs()), this.renderSearch(), this.filterChips.length > 0 && (h("div", { key: '83a004df672c8b81a61f98bbee307a29738655d7', class: "list-filter-chips" }, this.filterChips.map(chip => (h("ui-button", { variant: chip.active ? "primary" : "ghost", class: { 'filter-chip': true, 'active': chip.active }, label: `${chip.label} ${chip.count !== undefined ? chip.count : ''}`, size: "sm" }))))), this.showSortingHeaders && (h("div", { key: '2a5f4ad0309980db00dc73dc86630998609a4c56', class: "list-sorting-headers" }, this.columns.map(col => (h("div", { class: "sort-header", onClick: () => { const dir = this._sortColumn === col.key && this._sortDir === 'asc' ? 'desc' : 'asc'; this._sortColumn = col.key; this._sortDir = dir; this.columnSort.emit({ key: col.key, direction: dir }); } }, h("span", null, col.label), col.sortable && h("ui-icon", { name: "sort", library: "fontawesome" })))))), this.showBulkHeader && this.multiSelect && (h("div", { key: '23cb44d5f7bee3a990a724146b2df8ca42b5dd96', class: "list-bulk-header" }, h("div", { key: '28dc1ac4b24e6e9689d4265147e88b5282c98919', class: "bulk-select-all" }, h("ui-check-box", { key: '143d57d309f55370752c5f893a8c10cc054fe7f4', checked: this.selectedValues.length === this.items.length && this.items.length > 0, indeterminate: this.selectedValues.length > 0 && this.selectedValues.length < this.items.length, onCheckChange: (e) => {
+        return (h("div", { key: '4f41d5f9b82328c5e5b6b990d2cba0fb85d02aa5', class: containerClasses, onKeyDown: this.handleKeyDown, tabindex: "0" }, this.syncing && h("div", { key: 'b5ccede5c41d256002443a4212650290614978ab', class: "list-sync-bar" }), h("div", { key: 'ed6271a638dd129ac647487306f59be583d87e9e', class: "list-header-adaptive" }, h("div", { key: 'db465ed90ceb6591344a2ce62fb081c11d126309', class: "header-main-titles" }, this.label && h("div", { key: '84064fc69f3df5d1a36094c42c531f794375709a', class: "list-label" }, this.label), this.subheader && h("div", { key: '43b6852ce14d2a109e7d49f0ee4a2023b7b99476', class: "list-subheader" }, this.subheader)), this.renderViewTabs()), this.renderSearch(), this.filterChips.length > 0 && (h("div", { key: '755badc3efa061e5ef7f8be478813eb83df98cdc', class: "list-filter-chips" }, this.filterChips.map(chip => (h("ui-button", { variant: chip.active ? "primary" : "ghost", class: { 'filter-chip': true, 'active': chip.active }, label: `${chip.label} ${chip.count !== undefined ? chip.count : ''}`, size: "sm" }))))), this.showSortingHeaders && (h("div", { key: '978d41292344852cf0ee831127b66cd2ab742664', class: "list-sorting-headers" }, this.columns.map(col => (h("div", { class: "sort-header", onClick: () => { const dir = this._sortColumn === col.key && this._sortDir === 'asc' ? 'desc' : 'asc'; this._sortColumn = col.key; this._sortDir = dir; this.columnSort.emit({ key: col.key, direction: dir }); } }, h("span", null, col.label), col.sortable && h("ui-icon", { name: "sort", library: "fontawesome" })))))), this.showBulkHeader && this.multiSelect && (h("div", { key: '01ebcaf21ee576b05618c5614a3667af24644ec0', class: "list-bulk-header" }, h("div", { key: '4af56532d24827bf7509a5a45a484ce6d59115cd', class: "bulk-select-all" }, h("ui-check-box", { key: '7ae0e47d3dc1341e81b2ae57df4a6c4b5ec97838', checked: this.selectedValues.length === this.items.length && this.items.length > 0, indeterminate: this.selectedValues.length > 0 && this.selectedValues.length < this.items.length, onCheckChange: (e) => {
                 if (e.detail.checked) {
                     this.selectedValues = this.items.map((item, i) => item.value || item.id || i.toString());
                 }
@@ -686,15 +686,15 @@ export class AppList {
                     this.selectedValues = [];
                 }
                 this.listChange.emit({ values: this.selectedValues });
-            } }), h("span", { key: '7a863464bb51a4e0696357cf47df4d673f1435da', class: "bulk-count" }, this.selectedValues.length, " selected")), this.selectedValues.length > 0 && (h("div", { key: 'e4b0914bb4a1270b53d5ce22b78e692a773dd119', class: "bulk-actions" }, this.bulkActions.map(action => (h("ui-button", { variant: "ghost", onClick: () => this.bulkAction.emit({ action: action.action, values: this.selectedValues }), icon: action.icon, iconLibrary: "fontawesome", label: action.label, size: "sm" }))))))), this.floatingFAB && this.selectedValues.length > 0 && (h("div", { key: '80d73a3f7aaf83ed56483b9b1289355c94ee2cd2', class: "list-power-launcher-container" }, h("div", { key: 'b17d2e799be661d020129b7282958cc390a5e1f3', class: { 'launcher-fab': true, 'active': this.isPowerLauncherOpen }, onClick: () => this.isPowerLauncherOpen = !this.isPowerLauncherOpen }, h("ui-icon", { key: '2c480f1a330b88d988027b395cffea9007959875', name: this.isPowerLauncherOpen ? 'times' : 'bolt', library: "fontawesome" })), this.isPowerLauncherOpen && (h("div", { key: '22b2dc111065ea5d027f2036b0aa09c2b8e33c1c', class: "launcher-menu" }, h("div", { key: '96757071c64097399f00003c5b8286109ae073d0', class: "l-item", onClick: () => this.bulkAction.emit({ action: 'rolling-restart', values: this.selectedValues }) }, h("ui-icon", { key: 'dcf809cf37cc3ce674ccbd45c17b4753dc2d0d00', name: "redo" }), " Rolling Restart"), h("div", { key: '638b213324ce1fab5f08bcdc46c3eece46096e01', class: "l-item", onClick: () => this.bulkAction.emit({ action: 'sync-cluster', values: this.selectedValues }) }, h("ui-icon", { key: 'e56da100b1479ddc964b1881ea980a8e95ababa0', name: "sync" }), " Sync Cluster"), h("div", { key: 'e49e35e060cb5b3ac704701ca895bec1ce87f25d', class: "l-item", onClick: () => this.bulkAction.emit({ action: 'patch-security', values: this.selectedValues }) }, h("ui-icon", { key: '809e778533d4a8f81bba9a9cc8ff4eba3873428f', name: "shield-alt" }), " Patch Security"), h("div", { key: 'c0a6cc4d0b9f18c372c2ed915c908eb56ddd5f85', class: "l-item danger", onClick: () => this.bulkAction.emit({ action: 'delete', values: this.selectedValues }) }, h("ui-icon", { key: '3f21dccdecb41a5f55181a1e1aeb9e35bea1c64e', name: "trash" }), " Terminate Selected"))))), this.isPaletteOpen && (h("div", { key: 'c7d9e294022223fa9a651ef38242c0bf6adb954f', class: "list-shortcut-palette", onClick: () => this.isPaletteOpen = false }, h("div", { key: '806386e68869a9b330924aa912639f9e4c23f406', class: "palette-content", onClick: e => e.stopPropagation() }, h("h3", { key: 'b1f9d573f682cb91e5c1e27678b5a23d88d53f0d' }, "\u2328\uFE0F Keyboard Shortcuts"), h("div", { key: '587cb46ffaf1d6b937b6cbf976d488716e99c4e7', class: "shortcut-grid" }, h("div", { key: '99b60b30c17829122d01cab955e68abf2e325404', class: "s-row" }, h("kbd", { key: '528dbdade7ea5e40d0f910485ee6dc97987b3cba' }, "J"), " / ", h("kbd", { key: 'cf48324a3c57e1930f5df7a72d6a39b80398af7b' }, "K"), " ", h("span", { key: '45fdfcb587fe461e116e8377e9a60e4c713f3c5b' }, "Navigate Down / Up")), h("div", { key: 'cee7b640c85a03007caf55f321a6f7cb0a05f7ec', class: "s-row" }, h("kbd", { key: '272dcd26548008a508b07ec840ff14551b727b77' }, "Shift"), " + ", h("kbd", { key: '192fb55ec1a65b52dd048e48d9f1fdeb8e749055' }, "J/K"), " ", h("span", { key: 'a0650dd5e2f346b9928881f0b1afb279a1e447ce' }, "Select Range")), h("div", { key: '978a95dba468ddd239a6564e64676ec49c56f814', class: "s-row" }, h("kbd", { key: 'dd89ce3941b66de4fdfe54fa9b642305ca5a1ec7' }, "X"), " ", h("span", { key: 'e65cbc977404a02c8c97422969bd655066eaa24f' }, "Toggle Selection")), h("div", { key: '2f4948053e0c57cdeda7b8dc95924c208cc2162d', class: "s-row" }, h("kbd", { key: '96236740f75b1bd32ff2cd59d0e0a8f4fbc56790' }, "Enter"), " ", h("span", { key: 'f97d42cd2426d7b8ce733d1d951a208d6a651214' }, "Activate / Open")), h("div", { key: '19fc8715190f1170dbc8fa49dc175c41889c8800', class: "s-row" }, h("kbd", { key: '9e3b21acfd2b90e5ef6092c4c76c7b272123c1d5' }, "Space"), " ", h("span", { key: '1fb4d5e4980463a275206fed93b84d932de58a47' }, "Quick Look Preview")), h("div", { key: 'e6db95f32afcdcc87869a3e2a25a0f4641e2ed06', class: "s-row" }, h("kbd", { key: '96eff77c50f2cb47f0aec426028acd9fa62e9676' }, "["), " / ", h("kbd", { key: '65291ab2f4667e8538b6dad3eef7acf2eca59bb7' }, "]"), " ", h("span", { key: '386e1754ec50d9dc8748cd5f0f79ebc4d07adb37' }, "Jump to Prev / Next Group")), h("div", { key: '4330d1b02cff4b1fea58df8b4edc487a0d8afa40', class: "s-row" }, h("kbd", { key: '5e32e02c048a583b6a514ec53cec46cd72dc609f' }, "?"), " ", h("span", { key: '0505f5dc146e9ccefcf7538a580c2cc9cc0ba83c' }, "Toggle this help")))))), this.isQuickLookOpen && (h("div", { key: '96152ba016ee2466fbc4a768d8ba4858c3942759', class: "list-quick-look-modal", onClick: () => this.isQuickLookOpen = false }, h("div", { key: '6394a176a2202a76e3ea5651013ae2cd966e4721', class: "quick-look-content", onClick: e => e.stopPropagation() }, h("ui-icon", { key: '2d1059432bd8ff8b0881db5c37ca6b7de545a7e2', name: "times", class: "close-look", onClick: () => this.isQuickLookOpen = false }), h("div", { key: '06966b3777cc0975455fdfb1b369101ed719d8bb', class: "look-header" }, h("h2", { key: 'd5d97e1c05289474b724d1057c9ff25e1a2c0dd2' }, this.filteredItems[this.focusedIndex]?.label), h("span", { key: '0b65d7a4c60a924a8e1d1b958f49e4be95eb4dc4' }, this.filteredItems[this.focusedIndex]?.sublabel)), h("div", { key: '4b95dcf39f8356e511cda85795fde30c53cc6afb', class: "look-body" }, h("p", { key: '059ba589a2d86c5d3c311d43732cda2f791c2736' }, "Comprehensive detail for Node ID: ", this.filteredItems[this.focusedIndex]?.value || 'N/A'), h("div", { key: '492b7836c768053dd04571e7789d36f20ecc3316', class: "look-stats" }, h("div", { key: '2dd11a134ec109eccf262fd7cff2603832008411', class: "l-stat" }, "Status: ", h("strong", { key: '97b9d41633eee04ef2ae308e4cfb90e689d13471' }, this.filteredItems[this.focusedIndex]?.status || 'Idle')), h("div", { key: 'cda37caa09ea5be1ca63ea05aa52b05c7ea7c60b', class: "l-stat" }, "Health: ", h("strong", { key: 'af222d5568b451b93b38ddce361c6a8ce4dc62d7' }, this.filteredItems[this.focusedIndex]?.progress || 100, "%"))))))), h("div", { key: '7cda8202307e92b7450fa2947bb2c8e9262cc21e', ref: el => this.listRef = el, class: listClasses, style: listStyle, role: "list", "aria-label": this.ariaLabel, "aria-busy": this.syncing ? 'true' : 'false', part: "list", onScroll: this.handleScroll, onMouseDown: this.handleLassoStart }, this.renderMinimap(), this.focusRingTop >= 0 && (h("div", { key: '2e57833bb56b58deaa11adb1309f7f2cd5db5b88', class: "list-focus-spring-ring", style: {
+            } }), h("span", { key: 'aaa3441cd736d78f9486cc0fd01053b109620615', class: "bulk-count" }, this.selectedValues.length, " selected")), this.selectedValues.length > 0 && (h("div", { key: '3e2c3dc520b207692f61a09afd786e4e4bfbe462', class: "bulk-actions" }, this.bulkActions.map(action => (h("ui-button", { variant: "ghost", onClick: () => this.bulkAction.emit({ action: action.action, values: this.selectedValues }), icon: action.icon, iconLibrary: "fontawesome", label: action.label, size: "sm" }))))))), this.floatingFAB && this.selectedValues.length > 0 && (h("div", { key: 'd79e22941c6125d0447cd2646bcef0cd32410ad3', class: "list-power-launcher-container" }, h("div", { key: '5428fc9a5d581c15b9a42977eae4f08f253c4845', class: { 'launcher-fab': true, 'active': this.isPowerLauncherOpen }, onClick: () => this.isPowerLauncherOpen = !this.isPowerLauncherOpen }, h("ui-icon", { key: '10dd1b7d30e8fb9e9f3c90b65779c888663452a4', name: this.isPowerLauncherOpen ? 'times' : 'bolt', library: "fontawesome" })), this.isPowerLauncherOpen && (h("div", { key: 'b6c35850477fac5716818e449500a39a3cf894ed', class: "launcher-menu" }, h("div", { key: 'db4d1a4e3077bdb5c804b0ca9a75b2aea21bf5a7', class: "l-item", onClick: () => this.bulkAction.emit({ action: 'rolling-restart', values: this.selectedValues }) }, h("ui-icon", { key: '76597b228c9ad53087cacd6dbc11a3e3d4f2b2c1', name: "redo" }), " Rolling Restart"), h("div", { key: '9ba4804ace67bb7503c8713e816b4bc6197270b2', class: "l-item", onClick: () => this.bulkAction.emit({ action: 'sync-cluster', values: this.selectedValues }) }, h("ui-icon", { key: 'b673a8122860064908af7f11dd018b263671fa7e', name: "sync" }), " Sync Cluster"), h("div", { key: 'e01d57b46a14199afa99138d86701fca24d99537', class: "l-item", onClick: () => this.bulkAction.emit({ action: 'patch-security', values: this.selectedValues }) }, h("ui-icon", { key: '0da91a692f0e54baf6db39eee99de7ebc45f793c', name: "shield-alt" }), " Patch Security"), h("div", { key: '34cb252b35171aa5357a78d0a0d608f51de56925', class: "l-item danger", onClick: () => this.bulkAction.emit({ action: 'delete', values: this.selectedValues }) }, h("ui-icon", { key: 'ab94d9a829f7be9a6ec8f907b6c3c7f59c8452e3', name: "trash" }), " Terminate Selected"))))), this.isPaletteOpen && (h("div", { key: '7672cd318acb612ac9585f47fee917d98a3677de', class: "list-shortcut-palette", onClick: () => this.isPaletteOpen = false }, h("div", { key: 'b309a9ebc87081a00c39cbcf1d401780985b948a', class: "palette-content", onClick: e => e.stopPropagation() }, h("h3", { key: '2523a0a5d0f15eed66626b600c165d9c0d53e2d2' }, "\u2328\uFE0F Keyboard Shortcuts"), h("div", { key: 'e5d8fb61bc6a0164f1d59212f35d0f0d6b7efab9', class: "shortcut-grid" }, h("div", { key: '084c0a83d39f91615d2a8452bc3c7efbe0df34ba', class: "s-row" }, h("kbd", { key: 'b3be0998858c61f71c30de13f6e9fd1c7d691eae' }, "J"), " / ", h("kbd", { key: '386cc175f72faddbf616a40bf68ce551ed3e9cf6' }, "K"), " ", h("span", { key: 'deaeb0b4ee946a4d85b142b05b8bebd10b2657f6' }, "Navigate Down / Up")), h("div", { key: 'cd1c0ff59b78ff48927dcb940a85a928bd9a7e9f', class: "s-row" }, h("kbd", { key: '01d28ed64ea5a5c25ae23227a4d0d2d485437486' }, "Shift"), " + ", h("kbd", { key: 'ebfe4726a80f0e3333d5712298ddd089c5098a21' }, "J/K"), " ", h("span", { key: '1bde7e50bb79bed0aae5ee15e1106c1479a5383a' }, "Select Range")), h("div", { key: 'c11efad0545b775bd5b1f0cfc4a085317c3ebfee', class: "s-row" }, h("kbd", { key: '45cf6bc72acb696ad2fbde766fc57d6e3c01c6b4' }, "X"), " ", h("span", { key: 'b86e2314e06fb7d8ff22c71bb231b3e828c96b5a' }, "Toggle Selection")), h("div", { key: '1767c7ba0256d1f6ba117c11f969071be099c73d', class: "s-row" }, h("kbd", { key: '28bf817768a742ffbaa0b87ac5ca78ec965c7e4c' }, "Enter"), " ", h("span", { key: '71640ceb7349f38f285ed64fb81f690f96005e62' }, "Activate / Open")), h("div", { key: 'b49d904e6303444b9b8e1fc7f611aad5e4a469e5', class: "s-row" }, h("kbd", { key: '493d94845640a0b0578f2e99fe07e16ae5ff92ee' }, "Space"), " ", h("span", { key: '14b9767880acf71e36d181b0e0c3ff1ab682f272' }, "Quick Look Preview")), h("div", { key: '782f31daa50b9329794da1845e14d4379700a5a5', class: "s-row" }, h("kbd", { key: 'ebd8dc3dc59cc388caf58d1287c86473ffd76b38' }, "["), " / ", h("kbd", { key: '0347ff672424c8db103e20f5ecf519b0b974d4de' }, "]"), " ", h("span", { key: 'b6f87b61cf822fdf6349bdb92849f0175029e4de' }, "Jump to Prev / Next Group")), h("div", { key: '0cfe752e9649c00712f22b780307084252c138cf', class: "s-row" }, h("kbd", { key: '9de296e60383b0b90d9696311eb5bc5bb64b889d' }, "?"), " ", h("span", { key: '1b33a99b0f72740380c869bfdee4ab656562b028' }, "Toggle this help")))))), this.isQuickLookOpen && (h("div", { key: '00db6f10e7905b7d70882985cc9089a6bbb4cfee', class: "list-quick-look-modal", onClick: () => this.isQuickLookOpen = false }, h("div", { key: '22bab4c4be5a1020ccfa34c7fee8f330d44d8bcd', class: "quick-look-content", onClick: e => e.stopPropagation() }, h("ui-icon", { key: '7c691ac455958af2f12d9ce764095b0aae950f70', name: "times", class: "close-look", onClick: () => this.isQuickLookOpen = false }), h("div", { key: 'c56f0449bfb3280b6dc7141bc14c91874f6ed35f', class: "look-header" }, h("h2", { key: '250cb1ecb5ebc771477659fbdcd83a27aee6145c' }, this.filteredItems[this.focusedIndex]?.label), h("span", { key: '1082b6cd8b3d2c56087e0ac9668e88932085f67d' }, this.filteredItems[this.focusedIndex]?.sublabel)), h("div", { key: '5258151eca6121d08a568a82b60b27c1055eb203', class: "look-body" }, h("p", { key: '496227a18a6a9b8aea97386e14544d6d66c0e3e8' }, "Comprehensive detail for Node ID: ", this.filteredItems[this.focusedIndex]?.value || 'N/A'), h("div", { key: 'ef427801b310f9ff61569c24b79046131f02b425', class: "look-stats" }, h("div", { key: '21f28568f90ba336e43f868b33bad2c9690cf19b', class: "l-stat" }, "Status: ", h("strong", { key: 'b05364c86b63383d5a3b1e2105a57564f36f90e0' }, this.filteredItems[this.focusedIndex]?.status || 'Idle')), h("div", { key: '9535c7091e299aa1a3c1c214cd6097024c8d304b', class: "l-stat" }, "Health: ", h("strong", { key: '0dd13ce8f148f8308a21054a78345ee61df47c36' }, this.filteredItems[this.focusedIndex]?.progress || 100, "%"))))))), h("div", { key: 'b995d870eed468e011dd91edd18b6527c7d1c72e', ref: el => this.listRef = el, class: listClasses, style: listStyle, role: "list", "aria-label": this.ariaLabel, "aria-busy": this.syncing ? 'true' : 'false', part: "list", onScroll: this.handleScroll, onMouseDown: this.handleLassoStart }, this.renderMinimap(), this.focusRingTop >= 0 && (h("div", { key: 'cb4547a1aab482125b7e80e6db56ec6a2ede865c', class: "list-focus-spring-ring", style: {
                 top: `${this.focusRingTop}px`,
                 height: `${this.focusRingHeight}px`
-            } })), this.lassoActive && (h("div", { key: '6a5277b2aeb18a682b5472dc8afb8a17c3ab6d3f', class: "list-lasso-box", style: {
+            } })), this.lassoActive && (h("div", { key: 'ec54df7225b07efc02cd87b5613c3ddb84e967d4', class: "list-lasso-box", style: {
                 left: `${Math.min(this.lassoStart.x, this.lassoEnd.x)}px`,
                 top: `${Math.min(this.lassoStart.y, this.lassoEnd.y)}px`,
                 width: `${Math.abs(this.lassoEnd.x - this.lassoStart.x)}px`,
                 height: `${Math.abs(this.lassoEnd.y - this.lassoStart.y)}px`
-            } })), this.renderContent()), this.renderPagination(), this.renderCommandPalette(), this.renderEKGWaveform(), this.renderConfetti(), this.showConfetti && h("div", { key: '7a0cb9110e1b763f4651e1f6a2687f549dfa9870', class: "a11y-sr-only", "aria-live": "assertive" }, "Industrial Batch Operation Completed Successfully"), this.syncing && h("div", { key: '7b2aa86d2b7913c3313a4b3bcdc04afee3efaba4', class: "a11y-sr-only", "aria-live": "polite" }, "Cluster data is currently synchronizing...")));
+            } })), this.renderContent()), this.renderPagination(), this.renderCommandPalette(), this.renderEKGWaveform(), this.renderConfetti(), this.showConfetti && h("div", { key: '2bf97fc32fb8863cb61df68a7bf152f66f2a5bdd', class: "a11y-sr-only", "aria-live": "assertive" }, "Industrial Batch Operation Completed Successfully"), this.syncing && h("div", { key: '955b2edcc60b8e6eeb1b35a0532956263ea3eb80', class: "a11y-sr-only", "aria-live": "polite" }, "Cluster data is currently synchronizing...")));
     }
     static get is() { return "ui-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/list-item/list-item.css

@@ -818,6 +818,30 @@
   margin-left: auto;
   flex-shrink: 0;
 }
+.list-item-counter.counter-primary {
+  background: var(--color-primary, #10b981);
+  color: var(--text-standard, #ffffff);
+}
+.list-item-counter.counter-secondary {
+  background: var(--text-muted, #6b7280);
+  color: var(--text-standard, #ffffff);
+}
+.list-item-counter.counter-success {
+  background: var(--color-success, #3dcd58);
+  color: var(--text-standard, #ffffff);
+}
+.list-item-counter.counter-danger {
+  background: var(--color-danger, #ef4444);
+  color: var(--text-standard, #ffffff);
+}
+.list-item-counter.counter-warning {
+  background: var(--color-warning, #f59e0b);
+  color: var(--text-standard, #ffffff);
+}
+.list-item-counter.counter-info {
+  background: var(--color-info, #06b6d4);
+  color: var(--text-standard, #ffffff);
+}
 
 .list-item-right {
   display: flex;

package/dist/collection/components/list-item/list-item.js

@@ -31,6 +31,7 @@ export class AppListItem {
     badge = '';
     badgeColor = 'default';
     counter = '';
+    counterColor = 'success';
     /** JSON string or array of tag objects */
     tags = '';
     /** Image URL for a square/landscape thumbnail */
@@ -474,23 +475,26 @@ export class AppListItem {
         const paddingLeft = this.level * 24;
         const parsedTags = this.parseTagsToItems();
         const collaborators = typeof this.avatarGroup === 'string' ? JSON.parse(this.avatarGroup || '[]') : (this.avatarGroup || []);
-        return (h(Host, { key: '58ce4116ce6d57212618035289472a8885198909', onKeyDown: this.handleKeyDown, tabIndex: this.interactive && !this.disabled ? 0 : -1 }, h("div", { key: '2d3d1569f7cadc8e324e75285b08e51865a616d9', class: containerClasses, onClick: this.handleClick, onContextMenu: this.handleContextMenu, onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onMouseDown: () => {
+        return (h(Host, { key: '68703af536d1a333ea4729dde39a4b0a3a1a963a', onKeyDown: this.handleKeyDown, tabIndex: this.interactive && !this.disabled ? 0 : -1 }, h("div", { key: '9e02626ec81c7db9ce167cb5b32aaf4d4878bdde', class: containerClasses, onClick: this.handleClick, onContextMenu: this.handleContextMenu, onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onMouseDown: () => {
                 this.longPressTimer = setTimeout(() => {
                     this.longPress.emit({ value: this.value });
                 }, this.longPressDelay);
             }, onMouseUp: () => clearTimeout(this.longPressTimer), onTouchStart: this.handleTouchStart, onTouchMove: this.handleTouchMove, onTouchEnd: this.handleTouchEnd, tabindex: this.disabled ? -1 : 0, role: "listitem", "aria-label": this.a11yLabel || (this.skeleton ? 'Loading cluster node' : `${this.label}, status: ${this.status}, health: ${this.progress}%`), "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-haspopup": this.contextMenu ? 'menu' : undefined, "aria-expanded": this.contextMenuOpen ? 'true' : 'false', style: {
                 paddingLeft: `${paddingLeft + (this.level > 0 ? 32 : 16)}px`,
                 transform: `translateX(${this.swipeOffset}px)`
-            }, part: "list-item" }, this.priorityPulse && h("div", { key: '077eb5592bd7da1c326619f37da4b42a0dc428b5', class: "list-item-pulse" }), this.presence && this.presence.length > 0 && this.presence.map(p => (h("div", { class: `presence-halo presence-${p.color || 'blue'}`, title: `User ${p.id} active` }))), this.renderGhostLayer(), this.renderPresenceCursors(), this.swipeActions && this.swipeOffset !== 0 && (h("div", { key: 'f59474feb89543f37d4618ec4c422878669cee3a', class: "swipe-actions-container" }, this.swipeOffset > 0 && (h("div", { key: '64c03eb1c0c9633988441ce81c16a0ba024185a4', class: "swipe-action-wrapper left" }, this.leftActions.length > 0 ? (this.leftActions.map(action => (h("div", { class: `swipe-action bg-${action.color}`, onClick: () => this.swipeAction.emit({ value: this.value, side: 'left', action: action.action }) }, h("ui-icon", { name: action.icon, library: "fontawesome" }))))) : (h("div", { class: `swipe-action left bg-${this.leftActionColor}` }, h("ui-icon", { name: this.leftActionIcon, library: "fontawesome" }))))), this.swipeOffset < 0 && (h("div", { key: 'd6670645e03558910d978b74685c6d0d1e76c774', class: "swipe-action-wrapper right" }, this.rightActions.length > 0 ? (this.rightActions.map(action => (h("div", { class: `swipe-action bg-${action.color}`, onClick: () => this.swipeAction.emit({ value: this.value, side: 'right', action: action.action }) }, h("ui-icon", { name: action.icon, library: "fontawesome" }))))) : (h("div", { class: `swipe-action right bg-${this.rightActionColor}` }, h("ui-icon", { name: this.rightActionIcon, library: "fontawesome" }))))))), this.skeleton && h("div", { key: '4c77cacc6165a5f32b3048a3193c08c43fe1b3dd', class: "skeleton-pulse" }), this.showCheckbox && !this.skeleton && (h("div", { key: '74c9ff9a6bec5c8201a1c713e0eb49d99c44dd85', class: "list-item-checkbox" }, h("ui-checkbox", { key: 'bdf7bed4aa503546fab79d1c1ca8f170b7ea4289', checked: this.checked, disabled: this.disabled, readonly: this.readonly, onCheckboxChange: (e) => this.handleCheckboxChange(e), size: "sm" }))), this.collapsible && !this.contextMenu && !this.skeleton && (h("ui-icon", { key: '0d90b7eaec8eada7810b04ce55b94f4e647b6af0', class: "collapse-icon", name: this.expanded ? 'chevron-down' : 'chevron-right', library: "fontawesome" })), this.avatarPosition === 'left' && (h("div", { key: '32e681013eaf3b8dbf239ed093608b0186f56124', class: "list-item-left-media" }, this.userAvatar ? (h("div", { class: "list-item-avatar-container" }, h("ui-avatar", { class: { 'list-item-avatar': true, 'skeleton-circle': this.skeleton }, src: this.userAvatar, size: this.size === 'lg' ? 'md' : 'sm' }), this.status && !this.skeleton && (h("span", { class: `list-item-status status-${this.status} pos-${this.statusPosition}` })))) : this.image ? (h("div", { class: { 'list-item-image': true, 'skeleton-rect': this.skeleton } }, !this.skeleton && h("img", { src: this.image, alt: this.label }))) : this.icon ? (h("ui-icon", { class: "list-item-icon", name: this.icon, library: "fontawesome" })) : this.avatarGroup && this.avatarGroupPosition === 'media' ? (h("div", { class: "list-item-media-avatar-group" }, h("ui-avatar-group", { items: collaborators, size: "xs", spacing: "-12px", limit: 3 }))) : this.skeleton && (h("div", { class: "list-item-media-placeholder skeleton-circle" })))), h("div", { key: '0149ace554979e9a601bd717fab44c8f71a22f75', class: "list-item-content" }, h("div", { key: 'b53dac62842d57fc4cb060bc138903b59ab1e32b', class: "list-item-label-wrapper" }, this.showStar && !this.skeleton && (h("ui-icon", { key: '15d77a692e85eab6ea85bd530068d83d9221ec0b', class: { 'list-item-star-icon': true, 'is-starred': this.starred }, name: this.starred ? 'star' : 'star', library: "fontawesome", onClick: (e) => {
+            }, part: "list-item" }, this.priorityPulse && h("div", { key: '29d6dd764bf04afdcf38425cdcd739585a2903af', class: "list-item-pulse" }), this.presence && this.presence.length > 0 && this.presence.map(p => (h("div", { class: `presence-halo presence-${p.color || 'blue'}`, title: `User ${p.id} active` }))), this.renderGhostLayer(), this.renderPresenceCursors(), this.swipeActions && this.swipeOffset !== 0 && (h("div", { key: 'b9d5129954d5021f5d47104d85557bb1006c2a28', class: "swipe-actions-container" }, this.swipeOffset > 0 && (h("div", { key: 'd94c942653b41cc7c404e5236d142cf392b3026e', class: "swipe-action-wrapper left" }, this.leftActions.length > 0 ? (this.leftActions.map(action => (h("div", { class: `swipe-action bg-${action.color}`, onClick: () => this.swipeAction.emit({ value: this.value, side: 'left', action: action.action }) }, h("ui-icon", { name: action.icon, library: "fontawesome" }))))) : (h("div", { class: `swipe-action left bg-${this.leftActionColor}` }, h("ui-icon", { name: this.leftActionIcon, library: "fontawesome" }))))), this.swipeOffset < 0 && (h("div", { key: 'ff0e3be9faefe1792b5bb5f2dac71639b8fc943b', class: "swipe-action-wrapper right" }, this.rightActions.length > 0 ? (this.rightActions.map(action => (h("div", { class: `swipe-action bg-${action.color}`, onClick: () => this.swipeAction.emit({ value: this.value, side: 'right', action: action.action }) }, h("ui-icon", { name: action.icon, library: "fontawesome" }))))) : (h("div", { class: `swipe-action right bg-${this.rightActionColor}` }, h("ui-icon", { name: this.rightActionIcon, library: "fontawesome" }))))))), this.skeleton && h("div", { key: '509fdfe2043cfa2c1584747a1cdff696e49e6e1c', class: "skeleton-pulse" }), this.showCheckbox && !this.skeleton && (h("div", { key: '3b94d917cda90a81674d30a01e058d7e1627cc15', class: "list-item-checkbox" }, h("ui-checkbox", { key: 'ed51e5443153fd04a454e785539f27c8d5d0d8fa', checked: this.checked, disabled: this.disabled, readonly: this.readonly, onCheckboxChange: (e) => this.handleCheckboxChange(e), size: "sm" }))), this.collapsible && !this.contextMenu && !this.skeleton && (h("ui-icon", { key: '40d4c58284448f55872a0d0a8fa6942bf5bf3d68', class: "collapse-icon", name: this.expanded ? 'chevron-down' : 'chevron-right', library: "fontawesome" })), this.avatarPosition === 'left' && (h("div", { key: '3a6d23758b12c51dc8b3b129a48a5ed4e4b03527', class: "list-item-left-media" }, this.userAvatar ? (h("div", { class: "list-item-avatar-container" }, h("ui-avatar", { class: { 'list-item-avatar': true, 'skeleton-circle': this.skeleton }, src: this.userAvatar, size: this.size === 'lg' ? 'md' : 'sm' }), this.status && !this.skeleton && (h("span", { class: `list-item-status status-${this.status} pos-${this.statusPosition}` })))) : this.image ? (h("div", { class: { 'list-item-image': true, 'skeleton-rect': this.skeleton } }, !this.skeleton && h("img", { src: this.image, alt: this.label }))) : this.icon ? (h("ui-icon", { class: "list-item-icon", name: this.icon, library: "fontawesome" })) : this.avatarGroup && this.avatarGroupPosition === 'media' ? (h("div", { class: "list-item-media-avatar-group" }, h("ui-avatar-group", { items: collaborators, size: "xs", spacing: "-12px", limit: 3 }))) : this.skeleton && (h("div", { class: "list-item-media-placeholder skeleton-circle" })))), h("div", { key: '7324255b937c72d9c0554551283752f5420873ad', class: "list-item-content" }, h("div", { key: '5228f2e36dc8dfd59846145283d92dfaddae02a1', class: "list-item-label-wrapper" }, this.showStar && !this.skeleton && (h("ui-icon", { key: '3be9af3d26463d813b16d72b64d50490c47f743c', class: { 'list-item-star-icon': true, 'is-starred': this.starred }, name: this.starred ? 'star' : 'star', library: "fontawesome", onClick: (e) => {
                 e.stopPropagation();
                 this.starred = !this.starred;
                 this.starToggle.emit({ value: this.value, starred: this.starred });
                 if (navigator.vibrate)
                     navigator.vibrate(20);
-            } })), h("span", { key: '08cc2c0d174b85bd07acee7aa98c0498d18bce4f', class: { 'list-item-label': true, 'skeleton-text': this.skeleton } }, this.skeleton ? '' : this.renderLabel(this.label)), this.badge && !this.skeleton && (h("span", { key: 'f0c536c274a653d4cb8a6ae4e9b0905a938d0073', class: `list-item-badge badge-${this.badgeColor}` }, this.badge))), (this.sublabel || this.skeleton) && (h("div", { key: 'e3f001f937904d3e291834de24a3305d32c5f22d', class: "list-item-subline" }, h("span", { key: 'cab7999b62cc0d3cca31b573043be48be72ad3b2', class: { 'list-item-sublabel': true, 'skeleton-text': this.skeleton } }, this.skeleton ? '' : this.renderLabel(this.sublabel)), this.renderSparkline())), this.progress >= 0 && !this.skeleton && (h("div", { key: '10559a4b748ef1d49bc7748c35d05217294806b0', class: "list-item-progress-container" }, h("div", { key: '36ec119650364308b1d86b0ed0361b675dd3b56a', class: "list-item-progress-bar", style: { width: `${this.progress}%` } }), h("span", { key: 'ae6209cc9da5ddc2c4dad32c000602d3d4ed7977', class: "list-item-progress-text" }, this.progress, "%"))), this.avatarGroup && this.avatarGroupPosition === 'content' && !this.skeleton && (h("div", { key: '91b42175d2203685397be51b38b0a20e978dab85', class: "list-item-collaborators" }, h("ui-avatar-group", { key: '97782481c4725e203cafb230bdf9cff36ab0b4c7', items: collaborators, size: "xs", spacing: "-8px" }))), parsedTags.length > 0 && !this.skeleton && (h("div", { key: 'ce41b5b18a85962e36532117def183ebec3a889e', class: "list-item-tags" }, h("ui-tag-group", { key: '9fefbdcf44f0f72caf6cb956a7ef663723440a51', spacing: "4px" }, parsedTags.map((tag) => (h("ui-tag", { label: typeof tag === 'string' ? tag : tag.label, color: tag.color || 'default', variant: tag.variant || 'light', size: "xs", shape: tag.shape || 'pill', icon: tag.icon }))))))), h("slot", { key: 'f5f37f87becd210aebc7d3b443805447b2f08934' }), this.avatarPosition === 'right' && (h("div", { key: '1a0024c8eb561fc77c10e6ca393556d57e5b82dc', class: "list-item-right-media" }, this.userAvatar ? (h("div", { class: "list-item-avatar-container" }, h("ui-avatar", { class: { 'list-item-avatar': true, 'skeleton-circle': this.skeleton }, src: this.userAvatar, size: this.size === 'lg' ? 'md' : 'sm' }), this.status && !this.skeleton && (h("span", { class: `list-item-status status-${this.status} pos-${this.statusPosition}` })))) : this.image ? (h("div", { class: { 'list-item-image': true, 'skeleton-rect': this.skeleton } }, !this.skeleton && h("img", { src: this.image, alt: this.label }))) : this.icon ? (h("ui-icon", { class: "list-item-icon", name: this.icon, library: "fontawesome" })) : this.avatarGroup && this.avatarGroupPosition === 'media' ? (h("div", { class: "list-item-media-avatar-group" }, h("ui-avatar-group", { items: collaborators, size: "xs", spacing: "-12px", limit: 3 }))) : null)), this.avatarGroup && this.avatarGroupPosition === 'right' && !this.skeleton && (h("div", { key: 'ca2da167a6df02533aaf3e4d15b14af4a77b188c', class: "list-item-right-collaborators" }, h("ui-avatar-group", { key: '93aca83ac5defecf49eba0144ef8eb793cf84d90', items: collaborators, size: "xs", spacing: "-8px" }))), this.counter !== '' && !this.skeleton && (h("span", { key: 'e32d27e4c9f1e9899d9ea327f2aded8f2184de2a', class: "list-item-counter" }, this.counter)), this.locked && !this.skeleton && (h("ui-icon", { key: '7d5bb73fa57391b4f06938ec16a625c86b89cf36', class: "list-item-lock-icon", name: "lock", library: "fontawesome" })), this.showMenu && !this.skeleton && (h("div", { key: '5cac8d9f75433668559299587d62b358a564cdbc', class: "list-item-menu", onClick: (e) => { e.stopPropagation(); this.toggleContextMenu(e); } }, h("ui-icon", { key: '08ca49e61037d1a7f1590c9941213434caf3f993', name: "ellipsis-v", library: "fontawesome" })))), this.contextMenuOpen && (h("div", { key: '44a01fb51995af67c9a61464caab980c8f4ad523', ref: el => this.contextMenuRef = el, class: "list-item-context-menu-container", style: {
+            } })), h("span", { key: 'ce95f56be7c57cb22f18dbe29b563f23370c8ad4', class: { 'list-item-label': true, 'skeleton-text': this.skeleton } }, this.skeleton ? '' : this.renderLabel(this.label)), this.badge && !this.skeleton && (h("span", { key: 'a0f89fcb57de59bf532a08890e4320df97a20a8e', class: `list-item-badge badge-${this.badgeColor}` }, this.badge))), (this.sublabel || this.skeleton) && (h("div", { key: '3f7faa356828db1ae100e842817806c959df0793', class: "list-item-subline" }, h("span", { key: '8a44708f95a0fbc37e1cc423d7ec3ac1335013b3', class: { 'list-item-sublabel': true, 'skeleton-text': this.skeleton } }, this.skeleton ? '' : this.renderLabel(this.sublabel)), this.renderSparkline())), this.progress >= 0 && !this.skeleton && (h("div", { key: '88e4acf63cd5a2c41ed6a415dd6f507248b76932', class: "list-item-progress-container" }, h("div", { key: '47f6768a5fd86b2ab0cdc99c8f8d190722614cc1', class: "list-item-progress-bar", style: { width: `${this.progress}%` } }), h("span", { key: 'cccb5de1b94b9e4d5bc67404fa99cfb9da977ad2', class: "list-item-progress-text" }, this.progress, "%"))), this.avatarGroup && this.avatarGroupPosition === 'content' && !this.skeleton && (h("div", { key: 'af82b569419d754fad9c69e2897edec209021098', class: "list-item-collaborators" }, h("ui-avatar-group", { key: '6c9b9fe703202462dccf061df0b4348dcf6f6cf6', items: collaborators, size: "xs", spacing: "-8px" }))), parsedTags.length > 0 && !this.skeleton && (h("div", { key: '9d976bb0110f663b72bcc6043237ecc73df8b72a', class: "list-item-tags" }, h("ui-tag-group", { key: '96dcf37a09327a14126ccbf6076ab286a607aa02', spacing: "4px" }, parsedTags.map((tag) => (h("ui-tag", { label: typeof tag === 'string' ? tag : tag.label, color: tag.color || 'default', variant: tag.variant || 'light', size: "xs", shape: tag.shape || 'pill', icon: tag.icon }))))))), h("slot", { key: '09bf74616891faad73651171d6fe26c75abe3445' }), this.avatarPosition === 'right' && (h("div", { key: '834d8db05fa7e4f716ec8d7e68666d38de4f6cef', class: "list-item-right-media" }, this.userAvatar ? (h("div", { class: "list-item-avatar-container" }, h("ui-avatar", { class: { 'list-item-avatar': true, 'skeleton-circle': this.skeleton }, src: this.userAvatar, size: this.size === 'lg' ? 'md' : 'sm' }), this.status && !this.skeleton && (h("span", { class: `list-item-status status-${this.status} pos-${this.statusPosition}` })))) : this.image ? (h("div", { class: { 'list-item-image': true, 'skeleton-rect': this.skeleton } }, !this.skeleton && h("img", { src: this.image, alt: this.label }))) : this.icon ? (h("ui-icon", { class: "list-item-icon", name: this.icon, library: "fontawesome" })) : this.avatarGroup && this.avatarGroupPosition === 'media' ? (h("div", { class: "list-item-media-avatar-group" }, h("ui-avatar-group", { items: collaborators, size: "xs", spacing: "-12px", limit: 3 }))) : null)), this.avatarGroup && this.avatarGroupPosition === 'right' && !this.skeleton && (h("div", { key: '551ca783c0367ad8dbc84b24f6314c6887b041e7', class: "list-item-right-collaborators" }, h("ui-avatar-group", { key: 'f40c83478abf51489bedf99286938cd9a47d6dbe', items: collaborators, size: "xs", spacing: "-8px" }))), this.counter !== '' && !this.skeleton && (h("span", { key: '00aa9fe0ac7c99d4bfa0b1c4624d10e6894c57ca', class: {
+                'list-item-counter': true,
+                [`counter-${this.counterColor}`]: this.counterColor !== 'default'
+            }, part: "counter" }, this.counter)), this.locked && !this.skeleton && (h("ui-icon", { key: 'c80b721608132dea939c6b8f93f631b488aefa7f', class: "list-item-lock-icon", name: "lock", library: "fontawesome" })), this.showMenu && !this.skeleton && (h("div", { key: '1b518b506020c79e6627c16934c050a48aabe0d2', class: "list-item-menu", onClick: (e) => { e.stopPropagation(); this.toggleContextMenu(e); } }, h("ui-icon", { key: '01f76b775711b2e742255cbdd2b3dc15b4b2730f', name: "ellipsis-v", library: "fontawesome" })))), this.contextMenuOpen && (h("div", { key: '320e1f36c5d48e6aec081d1504a30519f5a7e05e', ref: el => this.contextMenuRef = el, class: "list-item-context-menu-container", style: {
                 top: `${this.contextMenuY}px`,
                 left: `${this.contextMenuX}px`
-            } }, h("slot", { key: 'b44a9d26b3d06e2528c8133f6080db1eee944dc2', name: "context-menu" }, h("div", { key: '455e867a0acb5fcd97df1e1c63de11ab643101ac', class: "context-menu-default" }, h("div", { key: 'ec25558af4c83b57bf36e7c430e5296de74956e9', class: "context-menu-item", onClick: () => this.closeContextMenu() }, h("ui-icon", { key: '69be015e453751f92d2572c82f83977b170386ef', name: "info-circle", library: "fontawesome" }), h("span", { key: 'cc4a0148cba635cd3b7305827339b8be101b21dc' }, "View Details")), h("div", { key: 'bf42c2745524c05869583e60580777266f5fad0d', class: "context-menu-item", onClick: () => this.closeContextMenu() }, h("ui-icon", { key: 'a40e0515fdf007eb09f0348947f38be95b36de42', name: "edit", library: "fontawesome" }), h("span", { key: '9243b179bbcb3b7f09c31ca72d73b38b166d0bb1' }, "Edit Item")), h("div", { key: '881528fbf3230427a153c535c606d1edabd911ff', class: "context-menu-divider" }), h("div", { key: '18cd2ade135fdc8cbc9805361b889897a8c9d384', class: "context-menu-item danger", onClick: () => this.closeContextMenu() }, h("ui-icon", { key: 'a16b3e59fc28d532abbda7d2228889d0e2475671', name: "trash", library: "fontawesome" }), h("span", { key: '1c7dae8d54e168682d9a1bdb6665951a95df092c' }, "Delete Node")))))), this.expandable && (h("div", { key: 'd6da1edf62a007534109bc82de4028efc4235912', class: { 'list-item-detail-panel': true, 'is-expanded': this.expandedDetail } }, h("slot", { key: '6c163928bcb53c29a47d3c56fbfe0ecbfcd5f8c3', name: "detail" })))));
+            } }, h("slot", { key: '1825b38bd66e89e24ce8cc4178d68503acfb984a', name: "context-menu" }, h("div", { key: '185c97398e040eb1a453357515c3f35613f8b212', class: "context-menu-default" }, h("div", { key: '7c42cfd7239776e53f964db28d929171c67eea90', class: "context-menu-item", onClick: () => this.closeContextMenu() }, h("ui-icon", { key: 'e6c186b90b24b646b6676d9c6a620bef8abd3e36', name: "info-circle", library: "fontawesome" }), h("span", { key: 'bc804dee80b4c031e3ab1ca2a8008a4ac892f1bd' }, "View Details")), h("div", { key: 'edc2215ead4093d378a1aa86145dcf2de45880ac', class: "context-menu-item", onClick: () => this.closeContextMenu() }, h("ui-icon", { key: '1e0c1666d0a81a8bf79836428ec4dd64193779c9', name: "edit", library: "fontawesome" }), h("span", { key: '8805f4641c23e9dd97b1aa7fa1b62cb0be5ac1ee' }, "Edit Item")), h("div", { key: '8c6076bbda9ffe77a6ed2d17d63542e9c945d316', class: "context-menu-divider" }), h("div", { key: 'b75413de809407021aa18bb45b77904a19434013', class: "context-menu-item danger", onClick: () => this.closeContextMenu() }, h("ui-icon", { key: 'bac87420c04683ec95c8a45c292348dfe2c1009c', name: "trash", library: "fontawesome" }), h("span", { key: '181d578e7817cf822e4a8c80b824cbf94d35240f' }, "Delete Node")))))), this.expandable && (h("div", { key: '081ffb4a8b6786ee42ed19d0506ac11b0108661a', class: { 'list-item-detail-panel': true, 'is-expanded': this.expandedDetail } }, h("slot", { key: '120fb4d707d9e39474c31cb3d8d9ed84a8bad003', name: "detail" })))));
     }
     static get is() { return "ui-list-item"; }
     static get encapsulation() { return "shadow"; }
@@ -1114,6 +1118,33 @@ export class AppListItem {
                 "attribute": "counter",
                 "defaultValue": "''"
             },
+            "counterColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StatusColor",
+                    "resolved": "\"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\"",
+                    "references": {
+                        "StatusColor": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::StatusColor",
+                            "referenceLocation": "StatusColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "counter-color",
+                "defaultValue": "'success'"
+            },
             "tags": {
                 "type": "string",
                 "mutable": false,