atomicuilibrary 0.0.1 → 0.1.3

package/dist/esm/ui-panel.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-DUsoYu9r.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-Dqu2zaH1.js';
 
 const panelCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.panel-container{display:flex;flex-direction:column;position:relative;background-color:var(--panel-bg, #ffffff);border-radius:var(--panel-border-radius, 8px);overflow:hidden;transition:box-shadow 0.2s ease, border-color 0.2s ease}.panel-elevated{border:1px solid var(--panel-border-color, var(--border-default, #e5e7eb));box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)}.panel-active.panel-elevated{box-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);border-color:var(--color-primary, #10b981)}.panel-outlined{border:1px solid var(--panel-border-color, var(--border-strong, #d1d5db));box-shadow:none}.panel-filled{border:1px solid transparent;background-color:var(--panel-filled-bg, var(--bg-secondary, #f3f4f6));box-shadow:none}.panel-filled .panel-header{background-color:transparent;border-bottom:1px solid rgba(0, 0, 0, 0.05);}.panel-flat{border:none;box-shadow:none;background:transparent}.panel-flat .panel-header{background:transparent;border-bottom:1px solid var(--border-default, #e5e7eb);padding-left:0;padding-right:0}.panel-flat .panel-content{padding-left:0;padding-right:0}.panel-flat .panel-footer{padding-left:0;padding-right:0}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background-color:var(--panel-header-bg, var(--bg-primary, var(--text-standard, #ffffff)));border-bottom:1px solid var(--panel-border-color, var(--border-default, #e5e7eb));min-height:48px;user-select:none}.panel-title-wrapper{flex:1;display:flex;flex-direction:column;gap:2px;margin-right:16px}.panel-title{display:flex;align-items:center;gap:8px}.panel-title-text{margin:0;font-size:16px;font-weight:600;color:var(--panel-text-primary, var(--text-primary, #111827));line-height:1.4}.panel-subtitle{font-size:13px;color:var(--panel-text-secondary, var(--text-muted, #6b7280));line-height:1.4}.panel-actions{display:flex;align-items:center;gap:4px;}.panel-action-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;background:transparent;border-radius:6px;color:var(--panel-action-color, var(--text-muted, #6b7280));cursor:pointer;transition:all 0.2s}.panel-action-btn:hover{background-color:var(--panel-action-hover-bg, var(--bg-secondary, #f3f4f6));color:var(--panel-text-primary, var(--text-primary, #111827))}.panel-action-btn:focus-visible{outline:2px solid var(--color-primary, #10b981);outline-offset:2px}.panel-action-btn .icon{width:18px;height:18px}.panel-action-list-popup{position:absolute;top:100%;right:0;margin-top:8px;background-color:var(--panel-bg, var(--bg-primary, var(--text-standard, #ffffff)));border:1px solid var(--panel-border-color, var(--border-default, #e5e7eb));border-radius:8px;box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);z-index:1001;min-width:150px;overflow:hidden}.panel-toggle-btn{transition:transform 0.3s ease}.panel-toggle-btn.collapsed{transform:rotate(180deg);}.panel-body-wrapper{display:flex;flex-direction:column;flex:1;min-height:0;position:relative;overflow:hidden}.panel-collapsed .panel-body-wrapper{display:none}.panel-content{flex:1;padding:16px;overflow-y:auto;min-height:0;color:var(--panel-text-primary, var(--text-secondary, #374151));font-size:14px;line-height:1.5;}.panel-content::-webkit-scrollbar{width:6px}.panel-content::-webkit-scrollbar-track{background:transparent}.panel-content::-webkit-scrollbar-thumb{background:rgba(0, 0, 0, 0.1);border-radius:10px}.panel-content:hover::-webkit-scrollbar-thumb{background:rgba(0, 0, 0, 0.2)}.panel-content.no-padding{padding:0}.panel-footer{padding:12px 16px;background-color:var(--panel-footer-bg, var(--bg-primary, #f9fafb));border-top:1px solid var(--panel-border-color, var(--border-default, #e5e7eb));display:flex;align-items:center;justify-content:flex-end;gap:8px}.panel-loading-overlay{position:absolute;inset:0;background-color:rgba(255, 255, 255, 0.7);backdrop-filter:blur(2px);z-index:10;display:flex;align-items:center;justify-content:center}.panel-spinner{width:30px;height:30px;border:3px solid var(--border-default, #e5e7eb);border-top-color:var(--color-primary, #10b981);border-radius:50%;animation:spin 0.8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-color-scheme: dark){.panel-container{--panel-bg:var(--bg-primary, #1f2937);--panel-border-color:var(--border-default, #374151);--panel-text-primary:var(--bg-primary, #f3f4f6);--panel-text-secondary:var(--color-primary, #9ca3af);--panel-header-bg:var(--bg-primary, #1f2937)}.panel-filled{background-color:var(--bg-secondary, var(--text-primary, #111827))}.panel-footer{--panel-footer-bg:var(--bg-secondary, #111827)}.panel-action-btn{--panel-action-color:var(--text-muted, #9ca3af);--panel-action-hover-bg:var(--color-primary, #374151)}.panel-loading-overlay{background-color:rgba(31, 41, 55, 0.7)}.panel-spinner{border-color:var(--border-strong, #4b5563);border-top-color:var(--color-primary, #60a5fa)}.panel-theme-primary{--panel-theme-bg:var(--color-primary, #1e3a8a);--panel-theme-text:var(--color-primary, #bfdbfe)}.panel-theme-success{--panel-theme-bg:var(--color-primary, #064e3b);--panel-theme-text:var(--color-success, #a7f3d0)}.panel-theme-warning{--panel-theme-bg:var(--color-danger, #78350f);--panel-theme-text:var(--color-primary, #fde68a)}.panel-theme-danger{--panel-theme-bg:var(--color-danger, #7f1d1d);--panel-theme-text:var(--color-danger, #fecaca)}.panel-theme-info{--panel-theme-bg:var(--color-primary, #164e63);--panel-theme-text:var(--color-primary, #a5f3fc)}}.panel-theme-primary{--panel-theme-color:var(--color-primary, #10b981);--panel-theme-bg:var(--bg-primary, #eff6ff);--panel-theme-border:var(--color-primary, #10b981);--panel-theme-text:var(--color-primary, #1e40af)}.panel-theme-success{--panel-theme-color:var(--color-success, #10b981);--panel-theme-bg:var(--bg-primary, #d1fae5);--panel-theme-border:var(--color-success, #10b981);--panel-theme-text:var(--color-primary, #065f46)}.panel-theme-warning{--panel-theme-color:var(--color-warning, #f59e0b);--panel-theme-bg:var(--bg-primary, #fef3c7);--panel-theme-border:var(--color-warning, #f59e0b);--panel-theme-text:var(--color-danger, #92400e)}.panel-theme-danger{--panel-theme-color:var(--color-danger, #ef4444);--panel-theme-bg:var(--bg-primary, #fee2e2);--panel-theme-border:var(--color-danger, #ef4444);--panel-theme-text:var(--color-danger, #991b1b)}.panel-theme-info{--panel-theme-color:var(--color-info, #06b6d4);--panel-theme-bg:var(--bg-primary, #cffafe);--panel-theme-border:var(--color-info, #06b6d4);--panel-theme-text:var(--color-primary, #155e75)}.panel-theme-primary .panel-header,.panel-theme-success .panel-header,.panel-theme-warning .panel-header,.panel-theme-danger .panel-header,.panel-theme-info .panel-header{background-color:var(--panel-theme-bg);border-bottom-color:var(--panel-theme-border);border-left:4px solid var(--panel-theme-color)}.panel-theme-primary .panel-title-text,.panel-theme-success .panel-title-text,.panel-theme-warning .panel-title-text,.panel-theme-danger .panel-title-text,.panel-theme-info .panel-title-text{color:var(--panel-theme-color)}.panel-theme-primary .panel-content,.panel-theme-success .panel-content,.panel-theme-warning .panel-content,.panel-theme-danger .panel-content,.panel-theme-info .panel-content{color:var(--panel-theme-text)}.panel-theme-primary .panel-subtitle,.panel-theme-success .panel-subtitle,.panel-theme-warning .panel-subtitle,.panel-theme-danger .panel-subtitle,.panel-theme-info .panel-subtitle{color:var(--panel-theme-text);opacity:0.8}.panel-badge{display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;line-height:1;border-radius:10px;margin-left:8px}.panel-badge-dot{width:8px;height:8px;border-radius:50%;background-color:var(--panel-theme-color, var(--color-primary, #10b981))}.panel-badge-count,.panel-badge-text{padding:3px 8px;background-color:var(--panel-theme-color, var(--color-primary, #10b981));color:var(--text-standard, #ffffff);min-width:20px}@keyframes slideIn{from{max-height:0;opacity:0}to{max-height:1000px;opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes scaleIn{from{transform:scale(0.95);opacity:0}to{transform:scale(1);opacity:1}}.panel-animation-slide .panel-body-wrapper{animation:slideIn var(--animation-duration, 300ms) ease-out}.panel-animation-fade .panel-body-wrapper{animation:fadeIn var(--animation-duration, 300ms) ease-out}.panel-animation-scale .panel-body-wrapper{animation:scaleIn var(--animation-duration, 300ms) ease-out}.panel-minimized .panel-body-wrapper{display:none}.panel-minimized{height:auto !important}.panel-maximized{position:fixed !important;top:0 !important;left:0 !important;width:100vw !important;height:100vh !important;max-width:none !important;max-height:none !important;z-index:9999 !important;border-radius:0 !important}.panel-draggable{cursor:move}.panel-dragging{opacity:0.9;box-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);cursor:grabbing !important}.panel-draggable .panel-header{cursor:move}.panel-resizable{position:relative}.panel-resize-handles{position:absolute;inset:0;pointer-events:none}.resize-handle{position:absolute;pointer-events:all;z-index:10}.resize-n,.resize-s{left:0;right:0;height:8px;cursor:ns-resize}.resize-n{top:0}.resize-s{bottom:0}.resize-e,.resize-w{top:0;bottom:0;width:8px;cursor:ew-resize}.resize-e{right:0}.resize-w{left:0}.resize-ne,.resize-nw,.resize-se,.resize-sw{width:12px;height:12px}.resize-ne{top:0;right:0;cursor:nesw-resize}.resize-nw{top:0;left:0;cursor:nwse-resize}.resize-se{bottom:0;right:0;cursor:nwse-resize}.resize-sw{bottom:0;left:0;cursor:nesw-resize}.panel-resizing{user-select:none}.panel-pinned{z-index:1000;box-shadow:0 25px 50px -12px rgba(0, 0, 0, 0.25)}.panel-container:focus-visible{outline:2px solid var(--color-primary, #10b981);outline-offset:2px}.panel-minimize-btn:hover{background-color:var(--bg-primary, #fef3c7);color:var(--color-warning, #f59e0b)}.panel-maximize-btn:hover{background-color:var(--bg-primary, #dbeafe);color:var(--color-primary, #10b981)}@media (max-width: 768px){.panel-draggable{position:relative !important;transform:none !important}.panel-resizable .panel-resize-handles{display:none}}.panel-pin-btn.active{color:var(--color-primary, #10b981);background-color:var(--bg-primary, #dbeafe)}.panel-pin-btn.active svg{fill:currentColor}.panel-resizable::after{content:"";position:absolute;bottom:4px;right:4px;width:12px;height:12px;background-image:radial-gradient(circle, var(--bg-secondary, #d1d5db) 1px, transparent 1px);background-size:4px 4px;opacity:0.6;pointer-events:none}.panel-backdrop{position:fixed;inset:0;background-color:rgba(0, 0, 0, 0.4);backdrop-filter:blur(2px);z-index:999;animation:fadeIn 0.2s ease-out}.panel-modal{box-shadow:0 25px 50px -12px rgba(0, 0, 0, 0.25);z-index:1000}.panel-glass{background-color:rgba(255, 255, 255, 0.7);backdrop-filter:blur(12px);border:1px solid rgba(255, 255, 255, 0.3)}.panel-theme-dark .panel-glass,:host-context(.dark) .panel-glass{background-color:rgba(30, 41, 59, 0.6);border-color:rgba(255, 255, 255, 0.1)}[class*=panel-position-]{position:fixed;z-index:1000;margin:0}.panel-position-center{top:50%;left:50%;translate:-50% -50%}.panel-position-top{top:20px;left:50%;translate:-50% 0}.panel-position-bottom{bottom:20px;left:50%;translate:-50% 0}.panel-position-left{top:50%;left:20px;translate:0 -50%}.panel-position-right{top:50%;right:20px;translate:0 -50%}.panel-position-top-left{top:20px;left:20px}.panel-position-top-right{top:20px;right:20px}.panel-position-bottom-left{bottom:20px;left:20px}.panel-position-bottom-right{bottom:20px;right:20px}.panel-aura{box-shadow:0 0 0 0 var(--panel-theme-color, rgba(var(--color-primary-rgb, 59, 130, 246), 0.4));animation:panelAuraPulse 2s infinite}@keyframes panelAuraPulse{0%{box-shadow:0 0 0 0 var(--panel-theme-color, rgba(var(--color-primary-rgb, 59, 130, 246), 0.4))}70%{box-shadow:0 0 0 15px transparent}100%{box-shadow:0 0 0 0 transparent}}.panel-search-container{flex:1;max-width:300px;margin:0 20px}.search-inner{position:relative;display:flex;align-items:center;background:rgba(0, 0, 0, 0.05);border-radius:6px;padding:4px 8px;border:1px solid rgba(0, 0, 0, 0.05);transition:all 0.2s}.search-inner:focus-within{background:var(--bg-primary, #ffffff);border-color:var(--color-primary, #10b981);box-shadow:0 0 0 3px rgba(var(--color-primary-rgb, 59, 130, 246), 0.1)}.search-icon{width:14px;height:14px;opacity:0.5;margin-right:8px}.search-inner input{border:none;background:transparent;font-size:13px;width:100%;color:inherit;padding:2px 0;outline:none}.search-clear{background:none;border:none;color:var(--color-primary, #9ca3af);cursor:pointer;padding:0 4px;font-size:10px}.panel-elevation-0{box-shadow:none}.panel-elevation-1{box-shadow:0 1px 3px rgba(0, 0, 0, 0.12)}.panel-elevation-2{box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1)}.panel-elevation-3{box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1)}.panel-elevation-4{box-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1)}.panel-elevation-5{box-shadow:0 25px 50px -12px rgba(0, 0, 0, 0.25)}@media (prefers-color-scheme: dark){.panel-content::-webkit-scrollbar-thumb{background:rgba(255, 255, 255, 0.1)}.panel-content:hover::-webkit-scrollbar-thumb{background:rgba(255, 255, 255, 0.2)}}.panel-header-icon-inline{font-size:1.2em;line-height:1}`;
 

package/dist/esm/ui-pattern-input.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-DUsoYu9r.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-Dqu2zaH1.js';
 
-const patternInputCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}.pattern-input-wrapper{display:flex;flex-direction:column;gap:8px}.pattern-input-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;opacity:0.65;color:var(--label-color, var(--text-secondary, #374151));margin-bottom:8px}.pattern-input-required{color:var(--color-danger, #ef4444);margin-left:4px}.pattern-input-container{position:relative;display:flex;align-items:center;background:var(--bg-primary, #ffffff);border:2px solid var(--border-strong, #d1d5db);border-radius:8px;transition:all 0.2s ease;padding:0 12px}.pattern-input-container:hover:not(.pattern-input-container-error){border-color:var(--color-primary, #9ca3af)}.pattern-input-container-focused{border-color:var(--color-primary-hover, #2563eb);box-shadow:0 0 0 3px rgba(var(--color-primary-rgb, 37, 99, 235), 0.1)}.pattern-input-container-error{border-color:var(--color-danger, #ef4444)}.pattern-input-container-error.pattern-input-container-focused{box-shadow:0 0 0 3px rgba(var(--color-danger-rgb, 239, 68, 68), 0.1)}.pattern-input-container-success{border-color:var(--color-success, #10b981)}.pattern-input-container-success.pattern-input-container-focused{box-shadow:0 0 0 3px rgba(var(--color-success-rgb, 16, 185, 129), 0.1)}.pattern-input-field{flex:1;border:none;outline:none;background:transparent;font-size:14px;color:var(--text-primary, #1f2937);font-family:"Courier New", monospace;letter-spacing:0.5px}.pattern-input-field::placeholder{color:var(--text-muted, #9ca3af);font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;letter-spacing:normal}.pattern-input-field:disabled{cursor:not-allowed;color:var(--text-muted, #9ca3af);background:var(--bg-primary, #f9fafb)}.pattern-input-sm{padding:6px 10px}.pattern-input-sm .pattern-input-field{font-size:13px;padding:2px 0}.pattern-input-md{padding:8px 12px}.pattern-input-md .pattern-input-field{font-size:14px;padding:4px 0}.pattern-input-lg{padding:10px 14px}.pattern-input-lg .pattern-input-field{font-size:16px;padding:6px 0}.pattern-input-status{display:flex;align-items:center;margin-left:8px}.status-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font-size:12px;font-weight:bold}.status-error{background:var(--bg-primary, #fef2f2);color:var(--color-danger, #ef4444)}.status-success{background:var(--bg-primary, #f0fdf4);color:var(--color-success, #10b981)}.pattern-input-footer{display:flex;justify-content:space-between;align-items:flex-start;min-height:20px}.pattern-input-messages{flex:1}.helper-text,.validation-message{display:block;font-size:12px;line-height:1.4}.helper-text{color:var(--text-muted, #6b7280)}.validation-error{color:var(--color-danger, #ef4444);font-weight:500}.validation-success{color:var(--color-success, #10b981);font-weight:500}.char-counter{font-size:12px;color:var(--text-muted, #6b7280);font-weight:500;white-space:nowrap;margin-left:12px}.pattern-input-disabled{opacity:0.6;cursor:not-allowed}.pattern-input-disabled .pattern-input-container{background:var(--bg-primary, #f9fafb);cursor:not-allowed}.pattern-input-field:focus-visible{outline:none}.status-icon{animation:statusFadeIn 0.2s ease}@keyframes statusFadeIn{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}.pattern-input-field[placeholder]{text-overflow:ellipsis}:host(.pattern-input-focused) .pattern-input-field{font-family:"Courier New", monospace}`;
+const patternInputCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}.pattern-input-wrapper{display:flex;flex-direction:column;gap:8px}.pattern-input-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;opacity:0.65;color:var(--label-color, var(--text-secondary, #374151));margin-bottom:8px}.pattern-input-required{color:var(--color-danger, #ef4444);margin-left:4px}.pattern-input-container{position:relative;display:flex;align-items:center;background:var(--bg-primary, #ffffff);border-radius:8px;transition:all 0.2s ease;padding:0 12px}.pattern-input-container:hover:not(.pattern-input-container-error){border-color:var(--color-primary, #9ca3af)}.pattern-input-container-focused{border-color:var(--color-primary-hover, #2563eb);box-shadow:0 0 0 3px rgba(var(--color-primary-rgb, 37, 99, 235), 0.1)}.pattern-input-container-error{border-color:var(--color-danger, #ef4444)}.pattern-input-container-error.pattern-input-container-focused{box-shadow:0 0 0 3px rgba(var(--color-danger-rgb, 239, 68, 68), 0.1)}.pattern-input-container-success{border-color:var(--color-success, #10b981)}.pattern-input-container-success.pattern-input-container-focused{box-shadow:0 0 0 3px rgba(var(--color-success-rgb, 16, 185, 129), 0.1)}.pattern-input-field{flex:1;border:none;outline:none;background:transparent;font-size:14px;color:var(--text-primary, #1f2937);font-family:"Courier New", monospace;letter-spacing:0.5px}.pattern-input-field::placeholder{color:var(--text-muted, #9ca3af);font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;letter-spacing:normal}.pattern-input-field:disabled{cursor:not-allowed;color:var(--text-muted, #9ca3af);background:var(--bg-primary, #f9fafb)}.pattern-input-sm{padding:6px 10px}.pattern-input-sm .pattern-input-field{font-size:13px;padding:2px 0}.pattern-input-md{padding:8px 12px}.pattern-input-md .pattern-input-field{font-size:14px;padding:4px 0}.pattern-input-lg{padding:10px 14px}.pattern-input-lg .pattern-input-field{font-size:16px;padding:6px 0}.pattern-input-status{display:flex;align-items:center;margin-left:8px}.status-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font-size:12px;font-weight:bold}.status-error{background:var(--bg-primary, #fef2f2);color:var(--color-danger, #ef4444)}.status-success{background:var(--bg-primary, #f0fdf4);color:var(--color-success, #10b981)}.pattern-input-footer{display:flex;justify-content:space-between;align-items:flex-start;min-height:20px}.pattern-input-messages{flex:1}.helper-text,.validation-message{display:block;font-size:12px;line-height:1.4}.helper-text{color:var(--text-muted, #6b7280)}.validation-error{color:var(--color-danger, #ef4444);font-weight:500}.validation-success{color:var(--color-success, #10b981);font-weight:500}.char-counter{font-size:12px;color:var(--text-muted, #6b7280);font-weight:500;white-space:nowrap;margin-left:12px}.pattern-input-disabled{opacity:0.6;cursor:not-allowed}.pattern-input-disabled .pattern-input-container{background:var(--bg-primary, #f9fafb);cursor:not-allowed}.pattern-input-field:focus-visible{outline:none}.status-icon{animation:statusFadeIn 0.2s ease}@keyframes statusFadeIn{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}.pattern-input-field[placeholder]{text-overflow:ellipsis}:host(.pattern-input-focused) .pattern-input-field{font-family:"Courier New", monospace}`;
 
 const UIPatternInput = class {
     constructor(hostRef) {
@@ -113,15 +113,47 @@ const UIPatternInput = class {
         for (let i = 0; i < this.pattern.length && rawIndex < raw.length; i++) {
             const patternChar = this.pattern[i];
             if (patternChar === this.maskChar) {
+                // Primary mask slot (#) — consume one raw character
+                formatted += raw[rawIndex];
+                rawIndex++;
+            }
+            else if (patternChar === 'A' && this.maskChar !== 'A') {
+                // Secondary mask slot (A) for alphanumeric — consume one raw character
                 formatted += raw[rawIndex];
                 rawIndex++;
             }
             else {
+                // Literal separator — insert as-is without consuming input
                 formatted += patternChar;
             }
         }
         return formatted;
     }
+    /**
+     * Builds a structural completion regex from the pattern.
+     * maskChar (#) → \d  |  A → [A-Za-z0-9]  |  other chars → escaped literals.
+     * Used as the fallback when no validationRegex prop is supplied.
+     */
+    generateFallbackRegex() {
+        if (!this.pattern || !this.autoFormat)
+            return null;
+        let regexStr = '^';
+        for (const char of this.pattern) {
+            if (char === this.maskChar) {
+                regexStr += '\\d';
+            }
+            else if (char === 'A' && this.maskChar !== 'A') {
+                // Conventional secondary mask char for alphanumeric slots
+                regexStr += '[A-Za-z0-9]';
+            }
+            else {
+                // Literal separator — escape regex special characters
+                regexStr += char.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+            }
+        }
+        regexStr += '$';
+        return new RegExp(regexStr);
+    }
     validateInput(value) {
         if (!value && !this.required) {
             this.isValid = true;
@@ -131,20 +163,23 @@ const UIPatternInput = class {
             this.isValid = false;
             return false;
         }
+        let regex = null;
         if (this.validationRegex) {
+            // Custom regex provided — use it for semantic validation
             try {
-                const regex = new RegExp(this.validationRegex);
-                const rawValue = this.extractRawValue(value);
-                this.isValid = regex.test(rawValue);
+                regex = new RegExp(this.validationRegex);
             }
             catch (e) {
                 console.error('Invalid validation regex:', e);
                 this.isValid = false;
+                return false;
             }
         }
         else {
-            this.isValid = true;
+            // No custom regex — fall back to pattern-completion check
+            regex = this.generateFallbackRegex();
         }
+        this.isValid = regex ? regex.test(value) : true;
         return this.isValid;
     }
     handleInput = (event) => {
@@ -244,26 +279,26 @@ const UIPatternInput = class {
         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: 'a18925eb76dddc52e1a0172c878ff1051ed7c01f', 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: 'd0e1971bb1a1d298f5991e368c2f419d0bc7186d', class: "pattern-input-wrapper", dir: this.rtl ? 'rtl' : 'ltr' }, this.label && (h("label", { key: '1297f7081e5f6e70bcb76ecf34774e37eff34000', class: "pattern-input-label" }, this.label, this.required && h("span", { key: 'e7ca7ed1fc824e659f8d73647b52adf7bad25329', class: "pattern-input-required" }, "*"))), h("div", { key: 'd110aa1601cda33f1a626939aa3dcd2a79597d09', 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: '7d7543e141f99b9d7dca424f47439cfe14a2b1d1', name: "prefix" }), h("ui-input", { key: '693bf0fa1782b1488053c3b69a3b05bee906dea2', 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: 'f7a2d45bdec22db724fba2e0af8f4683fd67a853', class: "pattern-input-status" }, showError && h("ui-icon", { key: '8d0639eae5b2f0754fe81e5172495e9aafc2989b', name: "x-circle", library: "lucide", size: "1.2em", class: "status-icon status-error" }), showSuccess && h("ui-icon", { key: '2b1b920a941c74db303fbba9e125036a716de009', name: "check-circle", library: "lucide", size: "1.2em", class: "status-icon status-success" }))), this.clearable && this.value && !this.disabled && (h("ui-button", { key: 'edfded0699f5b20612d5548f5c2987acf8ac1d00', 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: '307ce5045f89a48d0be327e107373f54d5934ea2', name: "suffix" })), h("div", { key: '6e791a83f674dbe235545a48c3ee25eeac1e985a', class: "pattern-input-footer" }, h("div", { key: 'e70f47484112f7fd0c0ce1248fca88ae0b5bbd27', class: "pattern-input-messages" }, this.helperText && !validationMsg && (h("span", { key: '564e18bfd03a8e057efc00bff2eab356b3ae1ab3', class: "helper-text" }, this.helperText)), validationMsg && (h("span", { key: 'c33cb23221b97daced7a1787ea4fe2e3dacb97e0', 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: '1dd7787679337def8caf5cae36f547423feb202d', class: "char-counter" }, charCount.current, charCount.max && ` / ${charCount.max}`))))));
     }
     static get watchers() { return {
         "value": [{

package/dist/esm/ui-progress.entry.js

@@ -1,12 +1,13 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-DUsoYu9r.js';
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-Dqu2zaH1.js';
 
-const progressCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block}:host *{box-sizing:border-box}.progress{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;font-size:14px;height:100%;width:100%;border-radius:inherit;display:flex;flex-direction:column}.progress-line-wrapper{display:flex;align-items:center;gap:12px}.progress-line-wrapper.progress-orient-vertical{flex-direction:column;height:100%;width:100%}.progress-line-wrapper.progress-orient-vertical .progress-text{text-align:center;min-width:unset;font-size:11px;font-weight:700;letter-spacing:0.05em;margin-top:8px;margin-left:0}.progress-line-trail{position:relative;overflow:hidden;transition:all 0.3s ease}.progress-line-trail:hover{opacity:0.9}.progress-line-bar{position:absolute;top:0;left:0;transition:width 0.5s cubic-bezier(0.4, 0, 0.2, 1), height 0.5s cubic-bezier(0.4, 0, 0.2, 1);border-radius:inherit;display:flex;align-items:center;justify-content:center;white-space:nowrap}.progress-text-inside{position:relative;z-index:2;font-weight:700;padding:0 8px;display:flex;align-items:center;justify-content:center}.progress-success-bar{position:absolute;top:0;right:0;border-radius:inherit}.progress-active .progress-line-bar::before{content:"";position:absolute;top:0;left:0;bottom:0;right:0;background:var(--bg-primary, #ffffff);opacity:0;animation:progress-active 2s cubic-bezier(0.23, 1, 0.32, 1) infinite;border-radius:inherit}@keyframes progress-active{0%{opacity:0.1;width:0}20%{opacity:0.5;width:0}100%{opacity:0;width:100%}}.progress-indeterminate.progress-line .progress-line-bar{width:100%}.progress-indeterminate.progress-line .progress-line-bar::after{content:"";position:absolute;top:0;left:0;bottom:0;width:50%;background:linear-gradient(to right, transparent, rgba(255, 255, 255, 0.5), transparent);animation:progress-line-indeterminate 1.5s infinite linear}@keyframes progress-line-indeterminate{0%{left:-100%}100%{left:100%}}.progress-steps-wrapper{display:flex;align-items:center;gap:12px}.progress-steps-container{display:flex;gap:4px;flex:1}.progress-step{border-radius:4px;transition:background 0.3s ease}.progress-circle-wrapper{position:relative;display:inline-block}.progress-indeterminate.progress-circle .progress-circle-wrapper,.progress-indeterminate.progress-dashboard .progress-circle-wrapper{animation:progress-circle-rotate 2s infinite linear}.progress-circle-path{transition:stroke-dashoffset 0.5s cubic-bezier(0.4, 0, 0.2, 1)}@keyframes progress-circle-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.progress-circle-text{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);text-align:center;font-size:24px;font-weight:600;color:rgba(0, 0, 0, 0.85)}.progress-sm .progress-circle-text{font-size:16px}.progress-text{font-size:14px;color:rgba(0, 0, 0, 0.65);white-space:nowrap;min-width:32px;text-align:right;display:inline-flex;align-items:center;justify-content:flex-end;gap:6px}.progress-text ui-icon{font-size:16px;vertical-align:middle}.progress-circle .progress-text{text-align:center}.progress-text i{font-size:16px;vertical-align:middle;margin-right:4px}.progress-success .progress-text i{color:var(--color-success, #52c41a)}.progress-text-warning i{color:var(--color-danger, #faad14)}.progress-text-exception i,.progress-exception .progress-text i,.progress-danger .progress-text i{color:var(--color-danger, #ff4d4f)}.progress-success .progress-line-bar{background:var(--color-success, #52c41a)}.progress-warning .progress-line-bar{background:var(--color-danger, #faad14)}.progress-exception .progress-line-bar,.progress-danger .progress-line-bar{background:var(--color-danger, #ff4d4f)}.progress-success .progress-circle-path{stroke:var(--color-success, #52c41a)}.progress-warning .progress-circle-path{stroke:var(--color-danger, #faad14)}.progress-exception .progress-circle-path,.progress-danger .progress-circle-path{stroke:var(--color-danger, #ff4d4f)}.progress-sm.progress-circle .progress-circle-wrapper{width:80px;height:80px}.progress-default.progress-circle .progress-circle-wrapper{width:120px;height:120px}.progress-liquid{overflow:hidden}.progress-liquid.progress-line-bar::after{content:"";position:absolute;top:0;left:0;width:200%;height:100%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpath fill='var(--bg-primary, #ffffff)' opacity='0.2' d='M0 15 Q25 10 50 15 T100 15 V20 H0 Z'/%3E%3C/svg%3E");background-size:50% 100%;animation:wave-move 2s infinite linear}.progress-liquid.progress-circle-path{filter:url(#liquid-filter);stroke-dasharray:20 2 !important;animation:circular-liquid 2s infinite linear}@keyframes circular-liquid{0%{stroke-dashoffset:0}100%{stroke-dashoffset:44}}@keyframes wave-move{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}.progress-glass .progress-line-trail{background:rgba(255, 255, 255, 0.1) !important;backdrop-filter:blur(8px);border:1px solid rgba(255, 255, 255, 0.2);box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.05)}.progress-glass .progress-circle-wrapper path:first-child{stroke:rgba(255, 255, 255, 0.2) !important;filter:blur(1px)}.progress-glow.progress-line .progress-line-bar{filter:drop-shadow(0 0 8px currentColor)}.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-exception.progress-glow .progress-line-bar{filter:drop-shadow(0 0 8px var(--color-danger, #ff4d4f))}.progress-active.progress-glow .progress-line-bar{filter:drop-shadow(0 0 8px var(--color-primary, #1890ff))}.progress-industrial{mask-size:16px 100%;mask-image:linear-gradient(to right, var(--text-primary, #000) 70%, transparent 70%)}.progress-orient-vertical .progress-industrial{mask-size:100% 16px;mask-image:linear-gradient(to top, var(--text-primary, #000) 70%, transparent 70%)}.progress-industrial{box-shadow:inset 0 1px 2px rgba(255, 255, 255, 0.4), inset 0 -1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);border:1px solid rgba(255, 255, 255, 0.1)}.progress-vibrate{animation:thermal-vibration 0.15s infinite}@keyframes thermal-vibration{0%{transform:translateY(0)}25%{transform:translateY(-1px) translateX(1px)}50%{transform:translateY(1px) translateX(-1px)}75%{transform:translateY(-1px)}100%{transform:translateY(0)}}.progress-peak-marker{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--color-primary, #1890ff);box-shadow:0 0 8px var(--color-primary, #1890ff);transition:left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);z-index:10;pointer-events:none}.progress-peak-marker::after{content:"";position:absolute;top:-4px;left:-3px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid var(--color-primary, #1890ff)}.progress-vitality-pulse{position:absolute;inset:0;background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);width:50%;animation:vitality-wave 3s infinite ease-in-out;pointer-events:none;z-index:5}.progress-orient-vertical .progress-vitality-pulse{width:100%;height:50%;background:linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.2), transparent);animation:vitality-wave-vertical 3s infinite ease-in-out}@keyframes vitality-wave{0%{transform:translateX(-100%) skewX(-20deg)}50%{opacity:0.5}100%{transform:translateX(200%) skewX(-20deg)}}@keyframes vitality-wave-vertical{0%{transform:translateY(100%) skewY(-20deg)}50%{opacity:0.5}100%{transform:translateY(-200%) skewY(-20deg)}}.progress-tick{position:absolute;background:rgba(0, 0, 0, 0.1);pointer-events:none;z-index:1}.progress-orient-horizontal .progress-tick{top:0;bottom:0;width:1px}.progress-orient-vertical .progress-tick{left:0;right:0;height:1px}.milestone-marker{position:absolute;top:50%;transform:translate(-50%, -50%);z-index:15;cursor:help;display:flex;align-items:center;justify-content:center}.progress-orient-vertical .milestone-marker{left:50%;transform:translate(-50%, 50%)}.milestone-marker ui-icon{font-size:14px;color:var(--text-primary, #1a202c);background:var(--bg-primary, #ffffff);border-radius:50%;padding:2px;box-shadow:0 0 6px rgba(0, 0, 0, 0.1)}.milestone-dot{width:8px;height:8px;background:var(--bg-primary, #ffffff);border:2px solid var(--color-primary, #1890ff);border-radius:50%;box-shadow:0 0 4px rgba(0, 0, 0, 0.15)}.multi-progress-container{border-top:1px solid var(--border-subtle, #edf2f7);padding-top:16px;margin-top:20px}.multi-progress-item{transition:all 0.2s ease}.multi-progress-item:hover{transform:translateX(4px)}.multi-progress-bar-wrap{position:relative;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.05)}.multi-progress-label{letter-spacing:0.025em;text-transform:uppercase}.time-estimate{font-size:11px;color:var(--color-primary, #718096);font-weight:600;margin-top:8px;display:block}.pause-button{display:flex;align-items:center;justify-content:center;background:var(--bg-primary, #f7fafc);border:1px solid var(--border-subtle, #e2e8f0);border-radius:50%;width:24px;height:24px;cursor:pointer;color:var(--color-primary, #4a5568);transition:all 0.2s ease;margin-top:8px}.pause-button:hover{background:var(--bg-primary, #edf2f7);color:var(--color-primary, #2d3748);transform:scale(1.1)}.pause-button ui-icon{font-size:10px}.progress-skeleton .progress-line-trail{background:var(--bg-primary, #e2e8f0) !important;position:relative;overflow:hidden}.progress-skeleton .progress-line-trail::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);animation:progress-shimmer 1.5s infinite}.progress-skeleton .progress-line-bar{display:none !important}@keyframes progress-shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}@media (forced-colors: active){.progress-line-trail{border:1px solid CanvasText}.progress-line-bar{background:Highlight}.progress-peak-marker{background:Mark;box-shadow:none}.progress-tick{background:CanvasText;opacity:0.3}}`;
+const progressCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block;--progress-surface:var(--bg-primary, #ffffff);--progress-surface-muted:var(--bg-secondary, #f8fafc);--progress-text:var(--text-primary, #0f172a);--progress-circle-label-color:var(--text-primary, #0f172a);--progress-circle-label-shadow:none;--progress-text-muted:var(--text-secondary, #475569);--progress-border:var(--border-subtle, #e2e8f0);--progress-trail-color:var(--bg-tertiary, #e2e8f0);--progress-status-surface:color-mix(in srgb, var(--progress-surface) 84%, var(--progress-surface-muted) 16%);--progress-chip-shadow:0 1px 6px rgba(0, 0, 0, 0.18);--progress-status-not-started-bg:color-mix(in srgb, var(--progress-surface-muted) 92%, transparent);--progress-status-not-started-text:var(--progress-text-muted);--progress-status-not-started-border:color-mix(in srgb, var(--progress-border) 90%, transparent);--progress-status-running-bg:rgba(var(--color-primary-rgb, 24, 144, 255), 0.12);--progress-status-running-text:var(--color-primary, #1d4ed8);--progress-status-running-border:rgba(var(--color-primary-rgb, 24, 144, 255), 0.24);--progress-status-interrupted-bg:rgba(var(--color-warning-rgb, 245, 158, 11), 0.14);--progress-status-interrupted-text:var(--color-warning, #b45309);--progress-status-interrupted-border:rgba(var(--color-warning-rgb, 245, 158, 11), 0.28);--progress-status-completed-bg:rgba(var(--color-success-rgb, 16, 185, 129), 0.12);--progress-status-completed-text:var(--color-success, #15803d);--progress-status-completed-border:rgba(var(--color-success-rgb, 16, 185, 129), 0.24)}:host *{box-sizing:border-box}.progress{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;font-size:14px;height:100%;width:100%;border-radius:inherit;display:flex;flex-direction:column}.progress-line-wrapper{display:flex;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%;width:100%}.progress-line-wrapper.progress-orient-vertical .progress-text{text-align:center;min-width:unset;font-size:11px;font-weight:700;letter-spacing:0.05em;margin-top:8px;margin-left:0}.progress-line-trail{position:relative;overflow:hidden;transition:all 0.3s ease}.progress-line-trail:hover{opacity:0.9}.progress-line-bar{position:absolute;top:0;left:0;transition:width 0.5s cubic-bezier(0.4, 0, 0.2, 1), height 0.5s cubic-bezier(0.4, 0, 0.2, 1);border-radius:inherit;display:flex;align-items:center;justify-content:center;white-space:nowrap}.progress-text-inside{position:relative;z-index:2;font-weight:700;padding:0 8px;display:flex;align-items:center;justify-content:center}.progress-success-bar{position:absolute;top:0;right:0;border-radius:inherit}.progress-active .progress-line-bar::before{content:"";position:absolute;top:0;left:0;bottom:0;right:0;background:var(--bg-primary, #ffffff);opacity:0;animation:progress-active 2s cubic-bezier(0.23, 1, 0.32, 1) infinite;border-radius:inherit}@keyframes progress-active{0%{opacity:0.1;width:0}20%{opacity:0.5;width:0}100%{opacity:0;width:100%}}.progress-indeterminate.progress-line .progress-line-bar{width:100%}.progress-indeterminate.progress-line .progress-line-bar::after{content:"";position:absolute;top:0;left:0;bottom:0;width:50%;background:linear-gradient(to right, transparent, rgba(255, 255, 255, 0.5), transparent);animation:progress-line-indeterminate 1.5s infinite linear}@keyframes progress-line-indeterminate{0%{left:-100%}100%{left:100%}}.progress-steps-wrapper{display:flex;align-items:center;gap:12px}.progress-steps-container{display:flex;gap:4px;flex:1}.progress-step{border-radius:4px;transition:background 0.3s ease}.progress-circle-wrapper{position:relative;display:inline-block}.progress-indeterminate.progress-circle .progress-circle-wrapper,.progress-indeterminate.progress-dashboard .progress-circle-wrapper{animation:progress-circle-rotate 2s infinite linear}.progress-circle-path{transition:stroke-dashoffset 0.5s cubic-bezier(0.4, 0, 0.2, 1)}@keyframes progress-circle-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.progress-circle-text{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:flex;align-items:center;justify-content:center;width:calc(100% - 16px);max-width:calc(100% - 16px);text-align:center;line-height:1.2;font-size:24px;font-weight:600;color:var(--progress-circle-label-color);text-shadow:var(--progress-circle-label-shadow);pointer-events:none}.progress-circle-text .progress-text,.progress-circle-text .progress-text-success,.progress-circle-text .progress-text-running,.progress-circle-text .progress-text-warning,.progress-circle-text .progress-text-exception,.progress-circle-text .progress-text-empty,.progress-circle-text .progress-text i,.progress-circle-text .progress-text-success i,.progress-circle-text .progress-text-running i,.progress-circle-text .progress-text-warning i,.progress-circle-text .progress-text-exception i,.progress-circle-text .progress-text-empty i,.progress-circle-text .progress-text ui-icon{color:inherit !important}.progress-circle-text .progress-text-success ui-icon,.progress-circle-text .progress-text-running ui-icon,.progress-circle-text .progress-text-warning ui-icon,.progress-circle-text .progress-text-exception ui-icon,.progress-circle-text .progress-text-empty ui-icon{color:inherit !important}.progress-circle-text .progress-text{min-width:0;max-width:100%;justify-content:center;text-align:center;line-height:1.2;overflow-wrap:anywhere}.progress-sm .progress-circle-text{font-size:16px}.progress-text{font-size:14px;color:var(--progress-text-muted);white-space:nowrap;min-width:32px;text-align:right;display:inline-flex;align-items:center;justify-content:flex-end;gap:6px}.progress-text ui-icon{font-size:16px;vertical-align:middle}.progress-circle .progress-text,.progress-dashboard .progress-text{text-align:center;justify-content:center;min-width:0}.progress-text i{font-size:16px;vertical-align:middle;margin-right:4px}.progress-success .progress-text i,.progress-completed .progress-text i{color:var(--color-success, #52c41a)}.progress-text-warning i{color:var(--color-danger, #faad14)}.progress-text-exception i,.progress-exception .progress-text i,.progress-danger .progress-text i,.progress-interrupted .progress-text i{color:var(--color-danger, #ff4d4f)}.progress-text-empty{color:var(--progress-text-muted) !important}.progress-text-empty i,.progress-text-empty ui-icon{color:var(--progress-text-muted) !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)}.progress-warning .progress-line-bar{background:var(--color-danger, #faad14)}.progress-exception .progress-line-bar,.progress-danger .progress-line-bar,.progress-interrupted .progress-line-bar{background:var(--color-danger, #ff4d4f)}.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)}.progress-warning .progress-circle-path{stroke:var(--color-danger, #faad14)}.progress-exception .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}.progress-default.progress-circle .progress-circle-wrapper{width:120px;height:120px}.progress-liquid{overflow:hidden}.progress-liquid.progress-line-bar::after{content:"";position:absolute;top:0;left:0;width:200%;height:100%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpath fill='var(--bg-primary, #ffffff)' opacity='0.2' d='M0 15 Q25 10 50 15 T100 15 V20 H0 Z'/%3E%3C/svg%3E");background-size:50% 100%;animation:wave-move 2s infinite linear}.progress-liquid.progress-circle-path{filter:url(#liquid-filter);stroke-dasharray:20 2 !important;animation:circular-liquid 2s infinite linear}@keyframes circular-liquid{0%{stroke-dashoffset:0}100%{stroke-dashoffset:44}}@keyframes wave-move{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}.progress-glass .progress-line-trail{background:rgba(128, 128, 128, 0.15) !important;backdrop-filter:blur(8px);border:1px solid rgba(128, 128, 128, 0.2);box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.05)}.progress-glass .progress-circle-wrapper path:first-child{stroke:rgba(128, 128, 128, 0.2) !important;filter:blur(1px)}.progress-glow.progress-line .progress-line-bar{filter:drop-shadow(0 0 8px currentColor)}.progress-glow.progress-circle .progress-circle-path,.progress-glow.progress-dashboard .progress-circle-path{filter:drop-shadow(0 0 6px currentColor)}.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-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-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 .progress-line-trail{mask-image:repeating-linear-gradient(to right, var(--text-primary, #000) 0, var(--text-primary, #000) 11px, transparent 11px, transparent 16px)}.progress-orient-vertical .progress-industrial .progress-line-trail{mask-image:repeating-linear-gradient(to top, var(--text-primary, #000) 0, var(--text-primary, #000) 11px, transparent 11px, transparent 16px)}.progress-industrial .progress-line-trail{box-shadow:inset 0 1px 2px rgba(255, 255, 255, 0.4), inset 0 -1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);border:1px solid rgba(255, 255, 255, 0.1)}.progress-vibrate{animation:thermal-vibration 0.15s infinite}@keyframes thermal-vibration{0%{transform:translateY(0)}25%{transform:translateY(-1px) translateX(1px)}50%{transform:translateY(1px) translateX(-1px)}75%{transform:translateY(-1px)}100%{transform:translateY(0)}}.progress-peak-marker{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--color-primary, #1890ff);box-shadow:0 0 8px var(--color-primary, #1890ff);transition:left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);z-index:10;pointer-events:none}.progress-peak-marker::after{content:"";position:absolute;top:-4px;left:-3px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid var(--color-primary, #1890ff)}.progress-vitality-pulse{position:absolute;inset:0;background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);width:50%;animation:vitality-wave 3s infinite ease-in-out;pointer-events:none;z-index:5}.progress-orient-vertical .progress-vitality-pulse{width:100%;height:50%;background:linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.2), transparent);animation:vitality-wave-vertical 3s infinite ease-in-out}@keyframes vitality-wave{0%{transform:translateX(-100%) skewX(-20deg)}50%{opacity:0.5}100%{transform:translateX(200%) skewX(-20deg)}}@keyframes vitality-wave-vertical{0%{transform:translateY(100%) skewY(-20deg)}50%{opacity:0.5}100%{transform:translateY(-200%) skewY(-20deg)}}.progress-tick{position:absolute;background:rgba(0, 0, 0, 0.1);pointer-events:none;z-index:1}.progress-orient-horizontal .progress-tick{top:0;bottom:0;width:1px}.progress-orient-vertical .progress-tick{left:0;right:0;height:1px}.milestone-marker{position:absolute;top:50%;transform:translate(-50%, -50%);z-index:15;cursor:help;display:flex;align-items:center;justify-content:center}.progress-orient-vertical .milestone-marker{left:50%;transform:translate(-50%, 50%)}.milestone-marker ui-icon{font-size:14px;color:var(--text-primary, #1a202c);background:var(--bg-primary, #ffffff);border-radius:50%;padding:2px;box-shadow:0 0 6px rgba(0, 0, 0, 0.1)}.milestone-dot{width:8px;height:8px;background:var(--bg-primary, #ffffff);border:2px solid var(--color-primary, #1890ff);border-radius:50%;box-shadow:0 0 4px rgba(0, 0, 0, 0.15)}.multi-progress-container{border-top:1px solid var(--border-subtle, #edf2f7);padding-top:16px;margin-top:20px}.multi-progress-item{transition:all 0.2s ease}.multi-progress-item:hover{transform:translateX(4px)}.multi-progress-bar-wrap{position:relative;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.05)}.multi-progress-label{letter-spacing:0.025em;text-transform:uppercase;color:var(--progress-text-muted)}.time-estimate{font-size:11px;color:var(--color-primary, #718096);font-weight:600;margin-top:8px;display:block}.pause-button{display:flex;align-items:center;justify-content:center;background:var(--bg-primary, #f7fafc);border:1px solid var(--border-subtle, #e2e8f0);border-radius:50%;width:24px;height:24px;cursor:pointer;color:var(--color-primary, #4a5568);transition:all 0.2s ease;margin-top:8px}.pause-button:hover{background:var(--bg-primary, #edf2f7);color:var(--color-primary, #2d3748);transform:scale(1.1)}.pause-button ui-icon{font-size:10px}.progress-skeleton .progress-line-trail{background:var(--bg-primary, #e2e8f0) !important;position:relative;overflow:hidden}.progress-skeleton .progress-line-trail::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);animation:progress-shimmer 1.5s infinite}.progress-skeleton .progress-line-bar{display:none !important}@keyframes progress-shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}@media (forced-colors: active){.progress-line-trail{border:1px solid CanvasText}.progress-line-bar{background:Highlight}.progress-peak-marker{background:Mark;box-shadow:none}.progress-tick{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:var(--progress-chip-shadow);backdrop-filter:blur(4px);pointer-events:none;user-select:none}.progress-status-chip ui-icon{font-size:11px}.progress-status-chip--not-started{background:var(--progress-status-not-started-bg);color:var(--progress-status-not-started-text);border:1px solid var(--progress-status-not-started-border)}.progress-status-chip--running{background:var(--progress-status-running-bg);color:var(--progress-status-running-text);border:1px solid var(--progress-status-running-border)}.progress-status-chip--running ui-icon{animation:progress-spin 1s linear infinite}.progress-status-chip--interrupted{background:var(--progress-status-interrupted-bg);color:var(--progress-status-interrupted-text);border:1px solid var(--progress-status-interrupted-border)}.progress-status-chip--completed{background:var(--progress-status-completed-bg);color:var(--progress-status-completed-text);border:1px solid var(--progress-status-completed-border)}@keyframes progress-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}:host-context(.dark),:host-context(.dark-theme),:host-context([data-theme=dark]),:host(.dark-theme),:host(.dark),:host([data-theme=dark]){--progress-circle-label-color:var(--text-primary, #f8fafc);--progress-circle-label-shadow:0 1px 2px rgba(15, 23, 42, 0.45)}:host-context(.dark) .progress-circle-text,:host-context(.dark-theme) .progress-circle-text,:host-context([data-theme=dark]) .progress-circle-text,:host(.dark-theme) .progress-circle-text,:host(.dark) .progress-circle-text,:host([data-theme=dark]) .progress-circle-text{color:var(--text-primary, #f8fafc)}:host-context(.dark) .progress-text,:host-context(.dark-theme) .progress-text,:host-context([data-theme=dark]) .progress-text,:host(.dark-theme) .progress-text,:host(.dark) .progress-text,:host([data-theme=dark]) .progress-text{color:var(--text-secondary, #cbd5e1)}:host-context(.dark) .multi-progress-label,:host-context(.dark-theme) .multi-progress-label,:host-context([data-theme=dark]) .multi-progress-label,:host(.dark-theme) .multi-progress-label,:host(.dark) .multi-progress-label,:host([data-theme=dark]) .multi-progress-label{color:var(--text-secondary, #cbd5e1)}:host-context(.dark) .progress-text-empty,:host-context(.dark) .progress-text-empty i,:host-context(.dark) .progress-text-empty ui-icon,:host-context(.dark-theme) .progress-text-empty,:host-context(.dark-theme) .progress-text-empty i,:host-context(.dark-theme) .progress-text-empty ui-icon,:host-context([data-theme=dark]) .progress-text-empty,:host-context([data-theme=dark]) .progress-text-empty i,:host-context([data-theme=dark]) .progress-text-empty ui-icon,:host(.dark-theme) .progress-text-empty,:host(.dark-theme) .progress-text-empty i,:host(.dark-theme) .progress-text-empty ui-icon,:host(.dark) .progress-text-empty,:host(.dark) .progress-text-empty i,:host(.dark) .progress-text-empty ui-icon,:host([data-theme=dark]) .progress-text-empty,:host([data-theme=dark]) .progress-text-empty i,:host([data-theme=dark]) .progress-text-empty ui-icon{color:var(--text-secondary, #94a3b8) !important}:host-context(.dark) .time-estimate,:host-context(.dark-theme) .time-estimate,:host-context([data-theme=dark]) .time-estimate,:host(.dark-theme) .time-estimate,:host(.dark) .time-estimate,:host([data-theme=dark]) .time-estimate{color:var(--text-secondary, #94a3b8)}:host-context(.dark) .progress-line-trail,:host-context(.dark-theme) .progress-line-trail,:host-context([data-theme=dark]) .progress-line-trail,:host(.dark-theme) .progress-line-trail,:host(.dark) .progress-line-trail,:host([data-theme=dark]) .progress-line-trail{background:var(--bg-tertiary, #334155)}:host-context(.dark) .multi-progress-bar-wrap,:host-context(.dark-theme) .multi-progress-bar-wrap,:host-context([data-theme=dark]) .multi-progress-bar-wrap,:host(.dark-theme) .multi-progress-bar-wrap,:host(.dark) .multi-progress-bar-wrap,:host([data-theme=dark]) .multi-progress-bar-wrap{background:var(--bg-tertiary, #334155) !important}`;
 
 const Progress = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.progressChange = createEvent(this, "progressChange");
     }
+    themeObserver;
     /**
      * Type of progress
      */
@@ -31,7 +32,7 @@ const Progress = class {
     /**
      * Color of unfilled part
      */
-    trailColor = '#f0f0f0';
+    trailColor = '';
     /**
      * Enable automatic gradient based on status or strokeColor
      */
@@ -156,6 +157,30 @@ const Progress = class {
      * Enable glassmorphism effect for the trail
      */
     glass = false;
+    /**
+     * Status-bar variant: shows a lifecycle label (Not Started / Running / Interrupted / Completed)
+     * above the progress bar derived automatically from percent + status.
+     */
+    statusBar = false;
+    /**
+     * Alignment of the status badge inside the status bar header.
+     * 'left' (default) — badge left, percent right.
+     * 'center' — badge and percent centered together.
+     * 'right' — badge right, percent left.
+     */
+    statusBarAlign = 'left';
+    /**
+     * Position of the status chip/badge in status-bar mode.
+     * 'inside' (default) — inside the progress bar trail (requires minimum height of 32px).
+     * 'top' — above the progress bar (allows smaller progress bar heights).
+     */
+    statusBarPosition = 'inside';
+    /**
+     * Custom text labels for each status-bar state.
+     * Pass any subset to override — unset keys keep their defaults.
+     * e.g. { notStarted: 'Pending', running: 'In Progress', interrupted: 'Paused', completed: 'Done' }
+     */
+    statusLabels = {};
     /**
      * Enable dynamic glow effect based on status
      */
@@ -178,6 +203,7 @@ const Progress = class {
     ticks = 0;
     animatedPercent = 0;
     isDragging = false;
+    isDarkTheme = false;
     gradientId = `ui-progress-gradient-${Math.random().toString(36).substr(2, 9)}`;
     get el() { return getElement(this); }
     /**
@@ -188,6 +214,13 @@ const Progress = class {
         this.animatedPercent = this.percent;
         this.currentStatus = this.status;
         this.normalizeProps();
+        this.syncThemeMode();
+    }
+    componentDidLoad() {
+        this.setupThemeObserver();
+    }
+    disconnectedCallback() {
+        this.themeObserver?.disconnect();
     }
     normalizeProps() {
         try {
@@ -203,11 +236,40 @@ const Progress = class {
             if (typeof this.multiProgress === 'string') {
                 this.multiProgress = JSON.parse(this.multiProgress);
             }
+            if (typeof this.statusLabels === 'string')
+                this.statusLabels = JSON.parse(this.statusLabels);
         }
         catch (e) {
             console.warn('Failed to parse complex progress prop', e);
         }
     }
+    setupThemeObserver() {
+        if (typeof MutationObserver === 'undefined')
+            return;
+        this.themeObserver?.disconnect();
+        this.themeObserver = new MutationObserver(() => {
+            this.syncThemeMode();
+        });
+        const observerConfig = {
+            attributes: true,
+            attributeFilter: ['class', 'data-theme'],
+        };
+        this.themeObserver.observe(document.documentElement, observerConfig);
+        if (document.body) {
+            this.themeObserver.observe(document.body, observerConfig);
+        }
+        if (this.el.parentElement) {
+            this.themeObserver.observe(this.el.parentElement, observerConfig);
+        }
+    }
+    syncThemeMode() {
+        const host = this.el;
+        const darkThemeSelector = '[data-theme="dark"], .dark, .dark-theme';
+        const closestDarkAncestor = host?.closest(darkThemeSelector);
+        const htmlIsDark = document.documentElement.matches(darkThemeSelector);
+        const bodyIsDark = !!document.body && document.body.matches(darkThemeSelector);
+        this.isDarkTheme = !!closestDarkAncestor || htmlIsDark || bodyIsDark;
+    }
     handlePercentChange(newPercent) {
         if (newPercent > this.peakMarker) {
             this.peakMarker = newPercent;
@@ -218,6 +280,9 @@ const Progress = class {
     handleStrokeColorChange() {
         this.normalizeProps();
     }
+    handleStatusChange(newStatus) {
+        this.currentStatus = newStatus;
+    }
     applyThresholds(val) {
         if (!this.thresholds.length)
             return;
@@ -301,16 +366,54 @@ const Progress = class {
         }
         return nodes;
     }
+    getStatusInfo() {
+        const lbl = this.statusLabels || {};
+        if (this.currentStatus === 'interrupted') {
+            return { label: lbl.interrupted ?? 'Interrupted', cssClass: 'interrupted', iconName: 'ban' };
+        }
+        if (this.animatedPercent >= 100 || this.currentStatus === 'completed') {
+            return { label: lbl.completed ?? 'Completed', cssClass: 'completed', iconName: 'check-circle' };
+        }
+        if (this.animatedPercent <= 0) {
+            return { label: lbl.notStarted ?? 'Not Started', cssClass: 'not-started', iconName: 'circle' };
+        }
+        return { label: lbl.running ?? 'Running', cssClass: 'running', iconName: 'loader' };
+    }
+    renderStatusBarChip(isOnTop = false) {
+        const { label, cssClass, iconName } = this.getStatusInfo();
+        const pct = Number(this.animatedPercent.toFixed(this.decimalPrecision));
+        let style = {};
+        if (!isOnTop) {
+            style = { position: 'absolute', top: '50%', transform: 'translateY(-50%)', zIndex: '2' };
+            if (this.statusBarAlign === 'right') {
+                style.right = '8px';
+            }
+            else if (this.statusBarAlign === 'center') {
+                style.left = '50%';
+                style.transform = 'translate(-50%, -50%)';
+            }
+            else {
+                style.left = '8px';
+            }
+        }
+        return (h("div", { class: `progress-status-chip progress-status-chip--${cssClass}`, style: style }, h("ui-icon", { name: iconName, library: "lucide" }), h("span", null, label), h("span", { "aria-hidden": "true", style: { opacity: '0.45', margin: '0 1px' } }, "\u00B7"), h("span", null, pct, "%")));
+    }
     getStrokeColor() {
-        if (this.currentStatus === 'success') {
+        if (this.currentStatus === 'success' || this.currentStatus === 'completed') {
             return '#52c41a';
         }
-        if (this.currentStatus === 'exception' || this.currentStatus === 'danger') {
+        if (this.currentStatus === 'exception' || this.currentStatus === 'danger' || this.currentStatus === 'interrupted') {
             return '#ff4d4f';
         }
         if (this.currentStatus === 'warning') {
             return '#faad14';
         }
+        if (this.currentStatus === 'empty') {
+            return '#d9d9d9';
+        }
+        if (this.currentStatus === 'running') {
+            return '#1890ff';
+        }
         const hasGradient = this.gradient || (typeof this.strokeColor === 'object' && this.strokeColor !== null);
         if (hasGradient) {
             return `url(#${this.gradientId})`;
@@ -320,8 +423,18 @@ const Progress = class {
         }
         return '#1890ff';
     }
+    getTrailColor() {
+        if (typeof this.trailColor === 'string' && this.trailColor.trim().length > 0) {
+            return this.trailColor;
+        }
+        if (this.statusBar) {
+            return 'var(--progress-status-surface, var(--progress-trail-color, var(--bg-secondary, #f1f5f9)))';
+        }
+        return 'var(--progress-trail-color, var(--bg-tertiary, #e2e8f0))';
+    }
     renderLineProgress() {
         const strokeColor = this.getStrokeColor();
+        const trailColor = this.getTrailColor();
         const roundedPercent = Number(this.animatedPercent.toFixed(this.decimalPrecision));
         let backgroundStyle = strokeColor;
         const isGradientProp = typeof this.strokeColor === 'object' && this.strokeColor !== null;
@@ -342,27 +455,34 @@ const Progress = class {
             }
             backgroundStyle = `linear-gradient(${direction}, ${fromColor}, ${toColor})`;
         }
+        const showStatusOnTop = this.statusBar && this.statusBarPosition === 'top';
+        // When status-bar chip is active and inside, ensure the trail is at least 32px tall so the chip fits
+        const effectiveStrokeWidth = (this.statusBar && this.statusBarPosition === 'inside' && this.orientation !== 'vertical')
+            ? Math.max(this.strokeWidth, 32) : this.strokeWidth;
         const progressStyle = {
             [this.orientation === 'vertical' ? 'height' : 'width']: this.indeterminate ? '100%' : `${Math.min(this.animatedPercent, 100)}%`,
             [this.orientation === 'vertical' ? 'width' : 'height']: '100%',
-            borderRadius: this.strokeLinecap === 'round' ? `${this.strokeWidth}px` : '0',
+            borderRadius: this.strokeLinecap === 'round' ? `${effectiveStrokeWidth}px` : '0',
             background: backgroundStyle,
+            color: strokeColor,
             ...(this.orientation === 'vertical' ? { position: 'absolute', bottom: '0', left: '0' } : {})
         };
         const trailStyle = {
-            [this.orientation === 'vertical' ? 'width' : 'height']: `${this.strokeWidth}px`,
+            [this.orientation === 'vertical' ? 'width' : 'height']: `${effectiveStrokeWidth}px`,
             [this.orientation === 'vertical' ? 'height' : 'width']: this.orientation === 'vertical'
                 ? (typeof this.height === 'number' ? `${this.height}px` : this.height)
                 : (typeof this.width === 'number' ? `${this.width}px` : this.width),
-            borderRadius: this.strokeLinecap === 'round' ? `${this.strokeWidth}px` : '0',
-            background: this.trailColor,
+            borderRadius: this.strokeLinecap === 'round' ? `${effectiveStrokeWidth}px` : '0',
+            background: trailColor,
             cursor: this.interactive ? 'pointer' : 'default',
-            flex: '1'
+            flex: showStatusOnTop ? 'none' : '1'
         };
         return (h("div", { class: {
                 'progress-line-wrapper': true,
+                'progress-status-bar': this.statusBar,
+                'progress-status-bar--top': showStatusOnTop,
                 [`progress-orient-${this.orientation}`]: true
-            } }, this.labelPosition === 'top' && this.showInfo && this.renderProgressInfo(), h("div", { class: "progress-line-trail", style: trailStyle, onMouseDown: this.handleInteraction, onTouchStart: this.handleInteraction }, this.vitality && h("div", { class: "progress-vitality-pulse" }), this.renderTicks(), this.showBuffer && this.buffer > 0 && (h("div", { class: "progress-buffer-bar", style: {
+            } }, showStatusOnTop && (h("div", { class: `progress-status-header progress-status-header--${this.statusBarAlign}` }, this.renderStatusBarChip(true))), !this.statusBar && this.labelPosition === 'top' && this.showInfo && this.renderProgressInfo(), h("div", { class: "progress-line-trail", style: trailStyle, onMouseDown: this.handleInteraction, onTouchStart: this.handleInteraction }, this.statusBar && this.statusBarPosition === 'inside' && this.renderStatusBarChip(false), this.vitality && h("div", { class: "progress-vitality-pulse" }), this.renderTicks(), this.showBuffer && this.buffer > 0 && (h("div", { class: "progress-buffer-bar", style: {
                 [this.orientation === 'vertical' ? 'height' : 'width']: `${Math.min(this.buffer, 100)}%`,
                 [this.orientation === 'vertical' ? 'width' : 'height']: `${this.strokeWidth}px`,
                 background: `${strokeColor}33`,
@@ -378,15 +498,16 @@ const Progress = class {
                 [this.orientation === 'vertical' ? 'height' : 'width']: `${((this.success.percent ?? 0) / this.animatedPercent) * 100}%`,
                 background: this.success.strokeColor || '#52c41a',
                 ...(this.orientation === 'vertical' ? { position: 'absolute', bottom: '0', left: '0' } : {})
-            } }))), this.peakMarker > 0 && (h("div", { class: "progress-peak-marker", style: { [this.orientation === 'vertical' ? 'bottom' : 'left']: `${this.peakMarker}%` }, title: `Session Peak: ${this.peakMarker}%` })), this.milestones.map(milestone => (h("div", { class: "milestone-marker", style: { [this.orientation === 'vertical' ? 'bottom' : 'left']: `${milestone.percent}%` }, title: milestone.label }, milestone.icon ? h("ui-icon", { name: milestone.icon.replace(/^fa[sb]? fa-/, ''), library: "fontawesome" }) : h("div", { class: "milestone-dot" }))))), this.multiProgress.length > 0 && this.renderMultiProgress(), this.labelPosition !== 'top' && this.showInfo && this.renderProgressInfo(), this.showTimeEstimate && this.estimatedTime > 0 && this.renderTimeEstimate(), this.showPauseButton && this.renderPauseButton()));
+            } }))), this.peakMarker > 0 && (h("div", { class: "progress-peak-marker", style: { [this.orientation === 'vertical' ? 'bottom' : 'left']: `${this.peakMarker}%` }, title: `Session Peak: ${this.peakMarker}%` })), this.milestones.map(milestone => (h("div", { class: "milestone-marker", style: { [this.orientation === 'vertical' ? 'bottom' : 'left']: `${milestone.percent}%` }, title: milestone.label }, milestone.icon ? h("ui-icon", { name: milestone.icon.replace(/^fa[sb]? fa-/, ''), library: "fontawesome" }) : h("div", { class: "milestone-dot" }))))), this.multiProgress.length > 0 && this.renderMultiProgress(), !this.statusBar && this.labelPosition !== 'top' && this.showInfo && this.renderProgressInfo(), this.showTimeEstimate && this.estimatedTime > 0 && this.renderTimeEstimate(), this.showPauseButton && this.renderPauseButton()));
     }
     renderMultiProgress() {
-        return (h("div", { class: "multi-progress-container", style: { display: 'flex', flexDirection: 'column', gap: '8px', marginTop: '12px' } }, this.multiProgress.map((prog) => (h("div", { class: "multi-progress-item", style: { display: 'flex', alignItems: 'center', gap: '12px' } }, h("div", { class: "multi-progress-bar-wrap", style: { flex: '1', height: `${this.strokeWidth}px`, background: this.trailColor, borderRadius: '4px', overflow: 'hidden' } }, h("div", { class: "multi-progress-bar", style: {
+        const trailColor = this.getTrailColor();
+        return (h("div", { class: "multi-progress-container", style: { display: 'flex', flexDirection: 'column', gap: '8px', marginTop: '12px' } }, this.multiProgress.map((prog) => (h("div", { class: "multi-progress-item", style: { display: 'flex', alignItems: 'center', gap: '12px' } }, h("div", { class: "multi-progress-bar-wrap", style: { flex: '1', height: `${this.strokeWidth}px`, background: trailColor, borderRadius: '4px', overflow: 'hidden' } }, h("div", { class: "multi-progress-bar", style: {
                 width: `${prog.percent}%`,
                 background: prog.color || this.getStrokeColor(),
                 height: '100%',
                 transition: 'width 0.5s ease'
-            } })), prog.label && h("span", { class: "multi-progress-label", style: { fontSize: '11px', fontWeight: '700', color: '#64748b' } }, prog.label))))));
+            } })), prog.label && h("span", { class: "multi-progress-label", style: { fontSize: '11px', fontWeight: '700' } }, prog.label))))));
     }
     renderTimeEstimate() {
         const minutes = Math.floor(this.estimatedTime / 60);
@@ -440,11 +561,21 @@ const Progress = class {
         const isGradientProp = typeof this.strokeColor === 'object' && this.strokeColor !== null;
         const gradientObj2 = isGradientProp ? this.strokeColor : null;
         const hasGradient = this.gradient || isGradientProp;
-        return (h("div", { class: "progress-circle-wrapper", style: { width: `${size}px`, height: `${size}px` } }, h("svg", { width: size, height: size }, hasGradient && (h("defs", null, h("linearGradient", { id: this.gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%" }, h("stop", { offset: "0%", "stop-color": gradientObj2 ? (gradientObj2.from || strokeColor) : strokeColor }), h("stop", { offset: "100%", "stop-color": gradientObj2 ? (gradientObj2.to || '#52c41a') : (this.status === 'normal' ? '#69c0ff' : strokeColor) })))), h("path", { d: pathString, stroke: this.trailColor, "stroke-width": strokeWidth, fill: "none", "stroke-linecap": this.strokeLinecap }), h("path", { d: pathString, stroke: strokeColor, "stroke-width": strokeWidth, fill: "none", "stroke-linecap": this.strokeLinecap, "stroke-dasharray": circumference, "stroke-dashoffset": offset, class: {
+        const circleLabelColor = this.isDarkTheme ? '#ffffff' : '#000000';
+        const circleLabelShadow = this.isDarkTheme ? '0 1px 2px rgba(15, 23, 42, 0.55)' : 'none';
+        return (h("div", { class: "progress-circle-wrapper", style: {
+                width: `${size}px`,
+                height: `${size}px`,
+                '--progress-circle-label-color': circleLabelColor,
+                '--progress-circle-label-shadow': circleLabelShadow,
+            } }, h("svg", { width: size, height: size }, hasGradient && (h("defs", null, h("linearGradient", { id: this.gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%" }, h("stop", { offset: "0%", "stop-color": gradientObj2 ? (gradientObj2.from || strokeColor) : strokeColor }), h("stop", { offset: "100%", "stop-color": gradientObj2 ? (gradientObj2.to || '#52c41a') : (this.status === 'normal' ? '#69c0ff' : strokeColor) })))), h("path", { d: pathString, stroke: this.trailColor, "stroke-width": strokeWidth, fill: "none", "stroke-linecap": this.strokeLinecap }), h("path", { d: pathString, stroke: strokeColor, "stroke-width": strokeWidth, fill: "none", "stroke-linecap": this.strokeLinecap, "stroke-dasharray": circumference, "stroke-dashoffset": offset, style: { color: strokeColor }, class: {
                 'progress-circle-path': true,
                 'progress-indeterminate': this.indeterminate,
                 'progress-liquid': this.liquid
-            } })), this.showInfo && (h("div", { class: "progress-circle-text" }, iconEl, this.renderProgressInfo()))));
+            } })), this.showInfo && (h("div", { class: "progress-circle-text", style: {
+                color: circleLabelColor,
+                textShadow: circleLabelShadow,
+            } }, iconEl, this.renderProgressInfo()))));
     }
     getCirclePath(cx, cy, radius, gapDegree, rotation) {
         const gapRad = (gapDegree * Math.PI) / 180;
@@ -464,28 +595,35 @@ const Progress = class {
         const text = this.dataLabels || this.format(roundedPercent);
         const infoStyle = this.percentageColor ? { color: this.percentageColor } : {};
         const iconEl = this.icon ? h("ui-icon", { name: this.icon, library: this.iconLibrary, style: { marginRight: '6px' } }) : null;
-        if (this.status === 'success') {
-            return (h("span", { class: "progress-text", style: infoStyle }, iconEl || h("ui-icon", { name: "check-circle", library: "fontawesome" }), this.labelPosition !== 'inside' && text));
+        if (this.currentStatus === 'success' || this.currentStatus === 'completed') {
+            return (h("span", { class: "progress-text progress-text-success", style: infoStyle }, iconEl || h("ui-icon", { name: "check-circle", library: "fontawesome" }), this.labelPosition !== 'inside' && (this.dataLabels || (this.currentStatus === 'completed' ? 'Completed' : text))));
         }
-        if (this.status === 'exception' || this.status === 'danger') {
-            return (h("span", { class: "progress-text progress-text-exception", style: infoStyle }, iconEl || h("ui-icon", { name: "exclamation-triangle", library: "fontawesome" }), this.labelPosition !== 'inside' && text));
+        if (this.currentStatus === 'exception' || this.currentStatus === 'danger' || this.currentStatus === 'interrupted') {
+            return (h("span", { class: "progress-text progress-text-exception", style: infoStyle }, iconEl || h("ui-icon", { name: "exclamation-triangle", library: "fontawesome" }), this.labelPosition !== 'inside' && (this.dataLabels || (this.currentStatus === 'interrupted' ? 'Interrupted' : text))));
         }
-        if (this.status === 'warning') {
+        if (this.currentStatus === 'warning') {
             return (h("span", { class: "progress-text progress-text-warning", style: infoStyle }, iconEl || h("ui-icon", { name: "exclamation-circle", library: "fontawesome" }), text));
         }
+        if (this.currentStatus === 'empty') {
+            return (h("span", { class: "progress-text progress-text-empty", style: infoStyle }, iconEl || h("ui-icon", { name: "circle", library: "fontawesome", style: { opacity: 0.4 } }), this.labelPosition !== 'inside' && (this.dataLabels || 'Empty')));
+        }
+        if (this.currentStatus === 'running') {
+            return (h("span", { class: "progress-text progress-text-running", style: infoStyle }, iconEl || h("ui-icon", { name: "sync", library: "fontawesome", class: "fa-spin", style: { color: '#1890ff' } }), this.labelPosition !== 'inside' && (this.dataLabels || `Running (${text})`)));
+        }
         return (h("span", { class: "progress-text", style: infoStyle }, iconEl, text));
     }
     render() {
         const progressClass = {
             'progress': true,
             [`progress-${this.type}`]: true,
-            'progress-active': this.status === 'active' || this.indeterminate,
+            'progress-active': this.status === 'active' || this.currentStatus === 'running' || this.indeterminate,
             [`progress-${this.size}`]: this.type !== 'line',
             'progress-indeterminate': this.indeterminate,
             'progress-liquid': this.liquid,
             'progress-glass': this.glass,
             'progress-glow': this.glow,
             'progress-skeleton': this.skeleton,
+            [`progress-${this.currentStatus}`]: true,
         };
         let content;
         if (this.steps > 0 && this.type === 'line') {
@@ -498,7 +636,7 @@ const Progress = class {
             content = this.renderCircleProgress();
         }
         const roundedPercent = Number(this.animatedPercent.toFixed(this.decimalPrecision));
-        return (h(Host, { key: '0f584282c7c54dc1e352dcd047f9393219ea05d7', role: "progressbar", "aria-valuenow": roundedPercent, "aria-valuemin": "0", "aria-valuemax": "100", "aria-label": this.dataLabels || `Progress: ${this.percent}%`, style: this.orientation === 'vertical' ? { height: typeof this.height === 'number' ? `${this.height}px` : this.height } : {} }, h("div", { key: '7a81c6056d073cf9cdd90abf2e7748772f0f322d', class: progressClass }, content, (this.liquid || this.type === 'industrial') && (h("svg", { key: '1bee402a754d87ab25395c92acde5edd76da64a2', style: { position: 'absolute', width: '0', height: '0' } }, h("filter", { key: 'bebea12167e23049848d62e1fd182958dc249f2b', id: "liquid-filter" }, h("feGaussianBlur", { key: 'a31af8c228fc7a4a9391b46f12a3e5a5a08ed6eb', in: "SourceGraphic", stdDeviation: "10", result: "blur" }), h("feColorMatrix", { key: 'b4dddec3e0f1dfd172a3281e8c67897a89436387', in: "blur", mode: "matrix", values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7", result: "goo" }), h("feBlend", { key: 'f5c08e7d756af6ae228c47115dffd9a4e32142c7', in: "SourceGraphic", in2: "goo" })))))));
+        return (h(Host, { key: '707d27a2cea5d03dcadd12448e1cb618f32e956b', role: "progressbar", "aria-valuenow": roundedPercent, "aria-valuemin": "0", "aria-valuemax": "100", "aria-label": this.dataLabels || `Progress: ${this.percent}%`, style: this.orientation === 'vertical' ? { height: typeof this.height === 'number' ? `${this.height}px` : this.height } : {} }, h("div", { key: 'cc1721fbe6b18ae128cae17afd926c3fee09da83', class: progressClass }, content, (this.liquid || this.type === 'industrial') && (h("svg", { key: 'f6ef9f72eebaa4ca34ac9fc3692ec0655aabb1a9', style: { position: 'absolute', width: '0', height: '0' } }, h("filter", { key: 'a452fc5c65e180b97ddd07bde94280123c28fa49', id: "liquid-filter" }, h("feGaussianBlur", { key: 'ed16a5c601664b2fa99bba8d08efb4360cad5fa6', in: "SourceGraphic", stdDeviation: "10", result: "blur" }), h("feColorMatrix", { key: 'd9f249633f95de8be325c85ffd09c7d35d39e3e6', in: "blur", mode: "matrix", values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7", result: "goo" }), h("feBlend", { key: 'fd21fbfc70afae8e47a8a04c407d52203504be43', in: "SourceGraphic", in2: "goo" })))))));
     }
     static get watchers() { return {
         "percent": [{
@@ -506,6 +644,9 @@ const Progress = class {
             }],
         "strokeColor": [{
                 "handleStrokeColorChange": 0
+            }],
+        "status": [{
+                "handleStatusChange": 0
             }]
     }; }
 };