atomicuilibrary 0.0.1 → 0.1.0

package/dist/collection/components/my-step/my-step.js

@@ -13,7 +13,7 @@ export class MyStep {
         return h("slot", null);
     }
     render() {
-        return h("slot", { key: '6b62a13aaa9111709fb6683ad93320b3970a6454' });
+        return h("slot", { key: '44701e8e4f9dfe6e74f8b9581a80ef6b2c9a5880' });
     }
     static get is() { return "my-step"; }
     static get encapsulation() { return "shadow"; }

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

@@ -203,12 +203,12 @@ export class NavBar {
     connectedCallback() {
     }
     render() {
-        return (h(Host, { key: '0a615eb525f4bc7ac076501ce2350727fa9510fb', collapsed: this.collapsed }, h("nav", { key: 'f89f766c305662a8dbafd34f6e45f241d4975e2e', class: `nav-bar ${this.collapsed ? 'collapsed' : 'expanded'}` }, h("div", { key: '066f83d3bc8df75a31b56aa87a92c33cff9d6cee', class: "nav-header" }, this.logoUrl && (h("img", { key: '40057cb53b7dd751b0a90413894197aa4266f690', src: this.logoUrl, alt: this.logoAlt, class: "nav-logo" })), this.appTitle && (h("span", { key: '4f7a597a93ca681d0532474b0ab45b9ad8953b26', class: "nav-title" }, this.appTitle)), this.showHamburger && (h("button", { key: 'bf2d1388044b5d5228a8ec1e549adf8d2b645abd', class: "nav-hamburger", onClick: this.handleHamburgerClick, "aria-label": this.collapsed ? 'Expand navigation' : 'Collapse navigation' }, this.collapsed ? (h("ui-icon", { name: "menu", library: this.iconLibrary, size: "1.5rem" })) : (h("ui-icon", { name: "x", library: this.iconLibrary, size: "1.5rem" }))))), this.showSearch && !this.collapsed && (h("div", { key: 'c998229e3925b92db73584169ae1f0f21d5dc88c', class: "nav-search" }, h("input", { key: '49f4c5c425460348ef34fb2885bd488f8adb408f', type: "text", class: "nav-search-input", placeholder: this.searchPlaceholder, onInput: this.handleSearchInput }))), h("div", { key: '7d4d939b8c9ca8a58008dc3d651b18b5371bae5b', class: "nav-content" }, this.renderSection(this.topItems, 'nav-section-top')), this.hoveredIcon && (h("div", { key: 'ec91c193a7881e597f6ee9934922751f2f197dad', class: "nav-tooltip visible", style: {
+        return (h(Host, { key: '18e3c8af7dbb483dff73b88a1f355a0e3b6605f9', collapsed: this.collapsed }, h("nav", { key: 'ddf81e32206bfae3fb517a8c3b48444401d8ab28', class: `nav-bar ${this.collapsed ? 'collapsed' : 'expanded'}` }, h("div", { key: 'b4c7aebc1bfbc9ecb60123d6114efdefd07a3b5b', class: "nav-header" }, this.logoUrl && (h("img", { key: 'c7ae8fda61df03e604e275d92368b0fddb6089fa', src: this.logoUrl, alt: this.logoAlt, class: "nav-logo" })), this.appTitle && (h("span", { key: 'be00df3ab559af0244bc5d8aaa2def21a93eb404', class: "nav-title" }, this.appTitle)), this.showHamburger && (h("button", { key: '948f1574a82f4d4e10ae160e6c2e211e8d839c77', class: "nav-hamburger", onClick: this.handleHamburgerClick, "aria-label": this.collapsed ? 'Expand navigation' : 'Collapse navigation' }, this.collapsed ? (h("ui-icon", { name: "menu", library: this.iconLibrary, size: "1.5rem" })) : (h("ui-icon", { name: "x", library: this.iconLibrary, size: "1.5rem" }))))), this.showSearch && !this.collapsed && (h("div", { key: 'f83cfa8d13441a86ea9db30b91364efb8041e865', class: "nav-search" }, h("input", { key: '50a802fc2e85124866ad4d2d19d845cfe60b9ee3', type: "text", class: "nav-search-input", placeholder: this.searchPlaceholder, onInput: this.handleSearchInput }))), h("div", { key: 'ff8a5604ad82dd2ebca182c2d56d62a9abd79bed', class: "nav-content" }, this.renderSection(this.topItems, 'nav-section-top')), this.hoveredIcon && (h("div", { key: '6fe4b41539a4cd1d81c63846c25c26a8d452c9b9', class: "nav-tooltip visible", style: {
                 top: `${this.tooltipPos.top}px`,
                 left: `${this.tooltipPos.left}px`
             } }, [...this.topItems, ...this.bottomItems, ...this.bottomItemsSecondary]
             .flatMap(i => [i, ...(i.children || [])])
-            .find(i => i.id === this.hoveredIcon)?.label)), h("div", { key: 'a5c8a38cf7ecb5feb91a21ccc95ddf333cec0eeb', class: "nav-footer" }, this.renderSection(this.bottomItems, 'nav-section-bottom'), this.renderSection(this.bottomItemsSecondary, 'nav-section-bottom-secondary')))));
+            .find(i => i.id === this.hoveredIcon)?.label)), h("div", { key: '8f6d53da23fbe4fc12151683fc0dca55bf33ab5c', class: "nav-footer" }, this.renderSection(this.bottomItems, 'nav-section-bottom'), this.renderSection(this.bottomItemsSecondary, 'nav-section-bottom-secondary')))));
     }
     renderSection(items, sectionClass) {
         if (!items || items.length === 0)
@@ -257,7 +257,7 @@ export class NavBar {
                     "references": {
                         "NavItem": {
                             "location": "local",
-                            "path": "P:/Repository/stenciljs/atomicUILibrary/src/components/nav-bar/nav-bar.tsx",
+                            "path": "C:/Praveen/Personal-repo/kmn/atomicUILibrary/library/src/components/nav-bar/nav-bar.tsx",
                             "id": "src/components/nav-bar/nav-bar.tsx::NavItem"
                         }
                     }
@@ -281,7 +281,7 @@ export class NavBar {
                     "references": {
                         "NavItem": {
                             "location": "local",
-                            "path": "P:/Repository/stenciljs/atomicUILibrary/src/components/nav-bar/nav-bar.tsx",
+                            "path": "C:/Praveen/Personal-repo/kmn/atomicUILibrary/library/src/components/nav-bar/nav-bar.tsx",
                             "id": "src/components/nav-bar/nav-bar.tsx::NavItem"
                         }
                     }
@@ -305,7 +305,7 @@ export class NavBar {
                     "references": {
                         "NavItem": {
                             "location": "local",
-                            "path": "P:/Repository/stenciljs/atomicUILibrary/src/components/nav-bar/nav-bar.tsx",
+                            "path": "C:/Praveen/Personal-repo/kmn/atomicUILibrary/library/src/components/nav-bar/nav-bar.tsx",
                             "id": "src/components/nav-bar/nav-bar.tsx::NavItem"
                         }
                     }
@@ -528,7 +528,7 @@ export class NavBar {
                     "references": {
                         "NavItem": {
                             "location": "local",
-                            "path": "P:/Repository/stenciljs/atomicUILibrary/src/components/nav-bar/nav-bar.tsx",
+                            "path": "C:/Praveen/Personal-repo/kmn/atomicUILibrary/library/src/components/nav-bar/nav-bar.tsx",
                             "id": "src/components/nav-bar/nav-bar.tsx::NavItem"
                         }
                     }

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

@@ -214,14 +214,14 @@ export class OtpInput {
             'otp-input-invalid': isInvalid,
             'otp-input-skeleton': this.skeleton,
         };
-        return (h("div", { key: '8fe5324ea7e186d84beea09373bf235f93921708', class: containerClasses, dir: this.rtl ? 'rtl' : 'ltr' }, this.label && h("label", { key: 'baa571a85ef85c818b191b46160b42a50b465585', class: "otp-label" }, this.label), h("div", { key: '48cb77b47f529d79d9ffcc84af84307f1ecc8a1a', class: "otp-inputs-container" }, this.otpValues.map((val, index) => {
+        return (h("div", { key: '0a0a9c52b8714d1f057b2957f0ebcc78a8579d5f', class: containerClasses, dir: this.rtl ? 'rtl' : 'ltr' }, this.label && h("label", { key: '46fb358d236e21367170beee13b0fa63c7bb045c', class: "otp-label" }, this.label), h("div", { key: '4c768be697520bbb7b9be1f481efa5aeea85aa5f', class: "otp-inputs-container" }, this.otpValues.map((val, index) => {
             const showDivider = this.groupSize > 0 && (index + 1) % this.groupSize === 0 && index !== this.length - 1;
             return (h(Fragment, null, h("ui-input", { ref: el => (this.inputRefs[index] = el), type: this.secure ? 'password' : 'text', inputMode: this.type === 'number' || this.type === 'numeric' ? 'numeric' : 'text', pattern: this.type === 'number' || this.type === 'numeric' ? '[0-9]*' : undefined, maxLength: 1, class: {
                     'otp-input-field': true,
                     'focused': this.focusedIndex === index,
                     'filled': !!val,
                 }, value: val, placeholder: this.placeholder, disabled: this.disabled || this.skeleton, readonly: this.readonly, onInputChange: e => this.handleInput(e, index), onInputKeydown: e => this.handleKeyDown(e.detail, index), onPasteInternal: e => (index === 0 ? this.handlePaste(e.detail) : e.detail.preventDefault()), onFocusInternal: () => this.handleFocus(index), onInputBlur: this.handleBlur, ariaLabel: `Digit ${index + 1}`, size: this.size, align: "center" }), showDivider && h("div", { class: "otp-divider" })));
-        })), isInvalid && currentErrorText && (h("div", { key: 'eb635e42e20010b8ca86e84ea3f3a7d9c077a5fa', class: "error-text" }, h("ui-icon", { key: '50163f7f1957e40f76d80c4b93548b0cf308b3bf', name: "exclamation-circle", library: "fontawesome" }), currentErrorText)), !isInvalid && this.helperText && h("div", { key: '0665d1b8ed1e46af72017732bcf59fa4b2ad1e14', class: "helper-text" }, this.helperText), h("div", { key: '2d6a7e0c414b396e6a859ebcc5adbd5838cdabf5', class: "otp-resend-container" }, h("ui-button", { key: '8f93b95638c39ce06cd1b5bf55172ca3b4045580', variant: "ghost", size: "sm", onClick: this.handleResend, disabled: this.resendTimer > 0 || this.disabled, label: `${this.resendLabel} ${this.resendTimer > 0 ? `(${this.resendTimer}s)` : ''}` }))));
+        })), isInvalid && currentErrorText && (h("div", { key: 'c5349d5e5e04c6f238e8d2e826684d1a47464385', class: "error-text" }, h("ui-icon", { key: '440b6a35be56cb372799676c24436cb8655fe8e7', name: "exclamation-circle", library: "fontawesome" }), currentErrorText)), !isInvalid && this.helperText && h("div", { key: '9e8357a1bc20e41ae07a2cb14b8f88c1b6c73b9f', class: "helper-text" }, this.helperText), h("div", { key: '11f5ed36239872e672e9626ad8713a603a7a50fe', class: "otp-resend-container" }, h("ui-button", { key: 'bb46ef1c84eafc63a5a8ed507972f7c33646544d', variant: "ghost", size: "sm", onClick: this.handleResend, disabled: this.resendTimer > 0 || this.disabled, label: `${this.resendLabel} ${this.resendTimer > 0 ? `(${this.resendTimer}s)` : ''}` }))));
     }
     static get is() { return "ui-otp-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -233,26 +233,26 @@ export class UIPatternInput {
         const charCount = this.getCharCount();
         const showError = this.isTouched && !this.isValid && this.showValidation;
         const showSuccess = this.isTouched && this.isValid && this.value && this.showValidation;
-        return (h(Host, { key: 'e6cafe1df0d19d9aa631bb08d2396af558b95673', class: {
+        return (h(Host, { key: '9cfd6e56d3dd519cf55cac5e2235f2354a52721c', class: {
                 'pattern-input-host': true,
                 'pattern-input-disabled': this.disabled,
                 'pattern-input-focused': this.isFocused,
                 'pattern-input-error': showError,
                 'pattern-input-success': showSuccess,
-            } }, h("div", { key: '9c5996bb1d80efc3ddedc692f3a2161acddd93f7', class: "pattern-input-wrapper", dir: this.rtl ? 'rtl' : 'ltr' }, this.label && (h("label", { key: 'ea22f82e44ce4631d82fbe3d6a9bbce3a68b848b', class: "pattern-input-label" }, this.label, this.required && h("span", { key: '71ee8e5c5d50ad9e1fe81df81385813cf157b911', class: "pattern-input-required" }, "*"))), h("div", { key: 'a4e05ef18befa44931881b5baa3f91b983017456', class: {
+            } }, h("div", { key: '1671b3507d2aec67260e71b5d5474c0f0c7d651e', class: "pattern-input-wrapper", dir: this.rtl ? 'rtl' : 'ltr' }, this.label && (h("label", { key: '930d777f7a89a971ba40dc70c7d40580efe61553', class: "pattern-input-label" }, this.label, this.required && h("span", { key: 'ec37aa883c2685c3d5f6f8216555e1d7e1ea03fc', class: "pattern-input-required" }, "*"))), h("div", { key: '8072997dc60ce56e0c66aac528ffcc031c7279b8', class: {
                 'pattern-input-container': true,
                 [`pattern-input-${this.size}`]: true,
                 'pattern-input-container-focused': this.isFocused,
                 'pattern-input-container-error': showError,
                 'pattern-input-container-success': showSuccess,
-            } }, h("slot", { key: 'a498a913a37bf11470bad5c9043caa196f2b860f', name: "prefix" }), h("ui-input", { key: 'e8b7202121a6a5a1c27f2e2f26783d11c6fa1013', ref: el => (this.inputElement = el), type: "text", class: "pattern-input-field", value: this.value, placeholder: this.placeholder || this.pattern, disabled: this.disabled, required: this.required, name: this.name, maxLength: this.pattern?.length || this.maxLength, onInputChange: this.handleInput, onInputKeydown: (e) => this.handleKeyPress(e.detail), onPasteInternal: (e) => this.handlePaste(e.detail), onFocusInternal: this.handleFocus, onInputBlur: this.handleBlur, ariaInvalid: showError, ariaRequired: this.required, fullWidth: true, size: this.size }), this.showValidation && (h("span", { key: 'fce03bbf3acc80f7cc48e011725d07a4381a9c1b', class: "pattern-input-status" }, showError && h("ui-icon", { key: 'e2fb5bb51afc46e381ee29c071564d4226826bd6', name: "x-circle", library: "lucide", size: "1.2em", class: "status-icon status-error" }), showSuccess && h("ui-icon", { key: 'ec772884ed89b461b0659acd66bf7d5816200e20', name: "check-circle", library: "lucide", size: "1.2em", class: "status-icon status-success" }))), this.clearable && this.value && !this.disabled && (h("ui-button", { key: 'f461b44289a9f0bd6a6f215288746ef4697efb6d', variant: "ghost", class: "pattern-input-clear", onClick: () => {
+            } }, h("slot", { key: 'd6a57fddf8b72b150ded442c8a396cff618c67e4', name: "prefix" }), h("ui-input", { key: 'e599eb6b3930f523b994e6ca144f11e2679bb578', ref: el => (this.inputElement = el), type: "text", class: "pattern-input-field", value: this.value, placeholder: this.placeholder || this.pattern, disabled: this.disabled, required: this.required, name: this.name, maxLength: this.pattern?.length || this.maxLength, onInputChange: this.handleInput, onInputKeydown: (e) => this.handleKeyPress(e.detail), onPasteInternal: (e) => this.handlePaste(e.detail), onFocusInternal: this.handleFocus, onInputBlur: this.handleBlur, ariaInvalid: showError, ariaRequired: this.required, fullWidth: true, size: this.size }), this.showValidation && (h("span", { key: '70fd6c40881eb546323d3328fa492b079b6af342', class: "pattern-input-status" }, showError && h("ui-icon", { key: '6c7e1aa7143bd48d713e5a6151623a12f1c593d8', name: "x-circle", library: "lucide", size: "1.2em", class: "status-icon status-error" }), showSuccess && h("ui-icon", { key: '1ca858ea0ce27bc2e58b27b30a35d5412bfde6c7', name: "check-circle", library: "lucide", size: "1.2em", class: "status-icon status-success" }))), this.clearable && this.value && !this.disabled && (h("ui-button", { key: '099210c8bcb453b480c84069d4de050b7d0f4ee3', variant: "ghost", class: "pattern-input-clear", onClick: () => {
                 this.value = '';
                 this.patternInputChange.emit({ value: '', formatted: '', isValid: this.required ? false : true });
-            }, ariaLabel: "Clear input", icon: "x", iconLibrary: "lucide", iconOnly: true, size: "sm" })), h("slot", { key: '453ce5f34c6384272b66d88a03e0ad897da4eada', name: "suffix" })), h("div", { key: 'dc815745573df1a2edbaae6971543642e20e74ed', class: "pattern-input-footer" }, h("div", { key: '58e39b130ffb2b694e462dca3909a1b0d8e2ebee', class: "pattern-input-messages" }, this.helperText && !validationMsg && (h("span", { key: 'a0fb4ffbcc587ff0a5bab578e299df3653a2a19d', class: "helper-text" }, this.helperText)), validationMsg && (h("span", { key: '286eff6417e271b6a92423eb2c08a2247b96d6fb', class: {
+            }, ariaLabel: "Clear input", icon: "x", iconLibrary: "lucide", iconOnly: true, size: "sm" })), h("slot", { key: 'e69b12741509f6d5882b15bc8f68adc962f0d83e', name: "suffix" })), h("div", { key: '85a62c89a440665d10cedbb79be5e46ea5415dae', class: "pattern-input-footer" }, h("div", { key: '3c225fb91c2de23a2e142896eb83016cf5572e2e', class: "pattern-input-messages" }, this.helperText && !validationMsg && (h("span", { key: '6ad5311570c86551b4836977b6094028c13317c3', class: "helper-text" }, this.helperText)), validationMsg && (h("span", { key: '91e7c6a38f345345581f6835d141196b4539c0ce', class: {
                 'validation-message': true,
                 'validation-error': showError,
                 'validation-success': showSuccess,
-            } }, validationMsg))), this.showCounter && (h("span", { key: '99d1593a2012cb8c20d86c7de3cc4be8319c3aca', class: "char-counter" }, charCount.current, charCount.max && ` / ${charCount.max}`))))));
+            } }, validationMsg))), this.showCounter && (h("span", { key: 'ad4fd580ebc1fcd9923bc8e58064ee35935a057a', class: "char-counter" }, charCount.current, charCount.max && ` / ${charCount.max}`))))));
     }
     static get is() { return "ui-pattern-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress/progress.css

@@ -44,6 +44,14 @@
   align-items: center;
   gap: 12px;
 }
+.progress-line-wrapper.progress-status-bar--top {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 4px;
+}
+.progress-line-wrapper.progress-status-bar--top .progress-line-trail {
+  flex: none;
+}
 .progress-line-wrapper.progress-orient-vertical {
   flex-direction: column;
   height: 100%;
@@ -228,7 +236,8 @@
   margin-right: 4px;
 }
 
-.progress-success .progress-text i {
+.progress-success .progress-text i,
+.progress-completed .progress-text i {
   color: var(--color-success, #52c41a);
 }
 
@@ -238,11 +247,41 @@
 
 .progress-text-exception i,
 .progress-exception .progress-text i,
-.progress-danger .progress-text i {
+.progress-danger .progress-text i,
+.progress-interrupted .progress-text i {
   color: var(--color-danger, #ff4d4f);
 }
 
-.progress-success .progress-line-bar {
+.progress-text-empty {
+  color: var(--color-neutral, #8c8c8c) !important;
+}
+.progress-text-empty i, .progress-text-empty ui-icon {
+  color: var(--color-neutral, #8c8c8c) !important;
+}
+
+.progress-text-running {
+  color: var(--color-primary, #1890ff) !important;
+}
+.progress-text-running i, .progress-text-running ui-icon {
+  color: var(--color-primary, #1890ff) !important;
+}
+
+.progress-text-success {
+  color: var(--color-success, #52c41a) !important;
+}
+.progress-text-success i, .progress-text-success ui-icon {
+  color: var(--color-success, #52c41a) !important;
+}
+
+.progress-text-exception {
+  color: var(--color-danger, #ff4d4f) !important;
+}
+.progress-text-exception i, .progress-text-exception ui-icon {
+  color: var(--color-danger, #ff4d4f) !important;
+}
+
+.progress-success .progress-line-bar,
+.progress-completed .progress-line-bar {
   background: var(--color-success, #52c41a);
 }
 
@@ -251,11 +290,21 @@
 }
 
 .progress-exception .progress-line-bar,
-.progress-danger .progress-line-bar {
+.progress-danger .progress-line-bar,
+.progress-interrupted .progress-line-bar {
   background: var(--color-danger, #ff4d4f);
 }
 
-.progress-success .progress-circle-path {
+.progress-empty .progress-line-bar {
+  background: var(--color-neutral, #d9d9d9);
+}
+
+.progress-running .progress-line-bar {
+  background: var(--color-primary, #1890ff);
+}
+
+.progress-success .progress-circle-path,
+.progress-completed .progress-circle-path {
   stroke: var(--color-success, #52c41a);
 }
 
@@ -264,10 +313,19 @@
 }
 
 .progress-exception .progress-circle-path,
-.progress-danger .progress-circle-path {
+.progress-danger .progress-circle-path,
+.progress-interrupted .progress-circle-path {
   stroke: var(--color-danger, #ff4d4f);
 }
 
+.progress-empty .progress-circle-path {
+  stroke: var(--color-neutral, #d9d9d9);
+}
+
+.progress-running .progress-circle-path {
+  stroke: var(--color-primary, #1890ff);
+}
+
 .progress-sm.progress-circle .progress-circle-wrapper {
   width: 80px;
   height: 80px;
@@ -331,17 +389,29 @@
 .progress-glow.progress-circle .progress-circle-path, .progress-glow.progress-dashboard .progress-circle-path {
   filter: drop-shadow(0 0 6px currentColor);
 }
-
-.progress-success.progress-glow .progress-line-bar {
-  filter: drop-shadow(0 0 8px var(--color-success, #52c41a));
+.progress-glow.progress-success.progress-line .progress-line-bar, .progress-glow.progress-completed.progress-line .progress-line-bar {
+  filter: drop-shadow(0 0 8px rgba(82, 196, 26, 0.45)) !important;
 }
-
-.progress-exception.progress-glow .progress-line-bar {
-  filter: drop-shadow(0 0 8px var(--color-danger, #ff4d4f));
+.progress-glow.progress-success.progress-circle .progress-circle-path, .progress-glow.progress-success.progress-dashboard .progress-circle-path, .progress-glow.progress-completed.progress-circle .progress-circle-path, .progress-glow.progress-completed.progress-dashboard .progress-circle-path {
+  filter: drop-shadow(0 0 6px rgba(82, 196, 26, 0.45)) !important;
 }
-
-.progress-active.progress-glow .progress-line-bar {
-  filter: drop-shadow(0 0 8px var(--color-primary, #1890ff));
+.progress-glow.progress-exception.progress-line .progress-line-bar, .progress-glow.progress-danger.progress-line .progress-line-bar, .progress-glow.progress-interrupted.progress-line .progress-line-bar {
+  filter: drop-shadow(0 0 8px rgba(255, 77, 79, 0.45)) !important;
+}
+.progress-glow.progress-exception.progress-circle .progress-circle-path, .progress-glow.progress-exception.progress-dashboard .progress-circle-path, .progress-glow.progress-danger.progress-circle .progress-circle-path, .progress-glow.progress-danger.progress-dashboard .progress-circle-path, .progress-glow.progress-interrupted.progress-circle .progress-circle-path, .progress-glow.progress-interrupted.progress-dashboard .progress-circle-path {
+  filter: drop-shadow(0 0 6px rgba(255, 77, 79, 0.45)) !important;
+}
+.progress-glow.progress-warning.progress-line .progress-line-bar {
+  filter: drop-shadow(0 0 8px rgba(250, 173, 20, 0.45)) !important;
+}
+.progress-glow.progress-warning.progress-circle .progress-circle-path, .progress-glow.progress-warning.progress-dashboard .progress-circle-path {
+  filter: drop-shadow(0 0 6px rgba(250, 173, 20, 0.45)) !important;
+}
+.progress-glow.progress-running.progress-line .progress-line-bar, .progress-glow.progress-active.progress-line .progress-line-bar {
+  filter: drop-shadow(0 0 8px rgba(24, 144, 255, 0.45)) !important;
+}
+.progress-glow.progress-running.progress-circle .progress-circle-path, .progress-glow.progress-running.progress-dashboard .progress-circle-path, .progress-glow.progress-active.progress-circle .progress-circle-path, .progress-glow.progress-active.progress-dashboard .progress-circle-path {
+  filter: drop-shadow(0 0 6px rgba(24, 144, 255, 0.45)) !important;
 }
 
 .progress-industrial {
@@ -585,4 +655,69 @@
     background: CanvasText;
     opacity: 0.3;
   }
+}
+.progress-status-header {
+  display: flex;
+  width: 100%;
+  margin-bottom: 4px;
+}
+.progress-status-header--left {
+  justify-content: flex-start;
+}
+.progress-status-header--center {
+  justify-content: center;
+}
+.progress-status-header--right {
+  justify-content: flex-end;
+}
+
+.progress-status-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1;
+  padding: 4px 10px;
+  border-radius: 999px;
+  white-space: nowrap;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
+  backdrop-filter: blur(4px);
+  pointer-events: none;
+  user-select: none;
+}
+.progress-status-chip ui-icon {
+  font-size: 11px;
+}
+.progress-status-chip--not-started {
+  background: rgba(241, 245, 249, 0.93);
+  color: #475569;
+  border: 1px solid #e2e8f0;
+}
+.progress-status-chip--running {
+  background: rgba(239, 246, 255, 0.93);
+  color: #1d4ed8;
+  border: 1px solid #bfdbfe;
+}
+.progress-status-chip--running ui-icon {
+  animation: progress-spin 1s linear infinite;
+}
+.progress-status-chip--interrupted {
+  background: rgba(255, 251, 235, 0.93);
+  color: #b45309;
+  border: 1px solid #fde68a;
+}
+.progress-status-chip--completed {
+  background: rgba(240, 253, 244, 0.93);
+  color: #15803d;
+  border: 1px solid #bbf7d0;
+}
+
+@keyframes progress-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }