atomicuilibrary 0.0.1 → 0.1.3

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

@@ -24,6 +24,28 @@
 
 :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;
@@ -44,6 +66,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%;
@@ -192,10 +222,48 @@
   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: rgba(0, 0, 0, 0.85);
+  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 {
@@ -204,7 +272,7 @@
 
 .progress-text {
   font-size: 14px;
-  color: rgba(0, 0, 0, 0.65);
+  color: var(--progress-text-muted);
   white-space: nowrap;
   min-width: 32px;
   text-align: right;
@@ -218,8 +286,11 @@
   vertical-align: middle;
 }
 
-.progress-circle .progress-text {
+.progress-circle .progress-text,
+.progress-dashboard .progress-text {
   text-align: center;
+  justify-content: center;
+  min-width: 0;
 }
 
 .progress-text i {
@@ -228,7 +299,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 +310,45 @@
 
 .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(--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);
 }
 
@@ -251,11 +357,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 +380,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;
@@ -315,13 +440,13 @@
   }
 }
 .progress-glass .progress-line-trail {
-  background: rgba(255, 255, 255, 0.1) !important;
+  background: rgba(128, 128, 128, 0.15) !important;
   backdrop-filter: blur(8px);
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  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(255, 255, 255, 0.2) !important;
+  stroke: rgba(128, 128, 128, 0.2) !important;
   filter: blur(1px);
 }
 
@@ -331,28 +456,38 @@
 .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 {
-  mask-size: 16px 100%;
-  mask-image: linear-gradient(to right, var(--text-primary, #000) 70%, transparent 70%);
+.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 {
-  mask-size: 100% 16px;
-  mask-image: linear-gradient(to top, var(--text-primary, #000) 70%, transparent 70%);
+.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-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);
 }
@@ -510,6 +645,7 @@
 .multi-progress-label {
   letter-spacing: 0.025em;
   text-transform: uppercase;
+  color: var(--progress-text-muted);
 }
 
 .time-estimate {
@@ -585,4 +721,147 @@
     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);
+  }
+}
+/* Dark Mode Overrides */
+: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;
 }