@ardium-ui/ui 5.0.0-alpha.75 → 5.0.0-alpha.77

package/prebuilt-themes/default/progress-bar.css

@@ -1,239 +1,254 @@
-.ard-progress-bar {
-  width: 100%;
-  margin: 0.5rem 0;
-  overflow: hidden;
-}
-.ard-progress-bar.ard-color-none {
-  --ard-cmpcl--bg: var(--ard-bg);
-  --ard-cmpcl--bg-colored: var(--ard-bg-alt);
-  --ard-cmpcl--bg-colored-light: var(--ard-detail-light);
-  --ard-cmpcl--bg-header: var(--ard-bg-filled);
-  --ard-cmpcl--bg-colored-verylight: var(--ard-bg-darker);
-  --ard-cmpcl--on-bg: var(--ard-text);
-  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
-  --ard-cmpcl--on-bg-colored-light: var(--ard-text);
-  --ard-cmpcl--border: var(--ard-text);
-  --ard-cmpcl--border-light: var(--ard-text2);
-  --ard-cmpcl--content: var(--ard-text);
-  --ard-cmpcl--content-light: var(--ard-text-alt);
-  --ard-cmpcl--overlay-rgb: var(--ard-overlay-rgb);
-  --ard-cmpcl--overlay: var(--ard-overlay);
-  --ard-cmpcl--overlay-colored: var(--ard-overlay);
-  --ard-cmpcl--overlay-colored-light: var(--ard-text-alt);
-}
-.ard-progress-bar.ard-color-primary {
-  --ard-cmpcl--bg: rgb(var(--ard-primary-500));
-  --ard-cmpcl--bg-colored: rgb(var(--ard-primary-500));
-  --ard-cmpcl--bg-colored-light: rgb(var(--ard-primary-100));
-  --ard-cmpcl--bg-header: rgb(var(--ard-primary-100));
-  --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-primary-50));
-  --ard-cmpcl--on-bg: var(--ard-text-alt);
-  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
-  --ard-cmpcl--on-bg-colored-light: var(--ard-text);
-  --ard-cmpcl--border: rgb(var(--ard-primary-300));
-  --ard-cmpcl--border-light: rgb(var(--ard-primary-100));
-  --ard-cmpcl--content: rgb(var(--ard-primary-700));
-  --ard-cmpcl--content-light: rgb(var(--ard-primary-300));
-  --ard-cmpcl--overlay-rgb: var(--ard-primary-500);
-  --ard-cmpcl--overlay: var(--ard-overlay);
-  --ard-cmpcl--overlay-colored: rgb(var(--ard-primary-700));
-  --ard-cmpcl--overlay-colored-light: rgb(var(--ard-primary-100));
-}
-.ard-progress-bar.ard-color-secondary {
-  --ard-cmpcl--bg: rgb(var(--ard-secondary-500));
-  --ard-cmpcl--bg-colored: rgb(var(--ard-secondary-500));
-  --ard-cmpcl--bg-colored-light: rgb(var(--ard-secondary-50));
-  --ard-cmpcl--bg-header: rgb(var(--ard-secondary-50));
-  --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-secondary-50));
-  --ard-cmpcl--on-bg: var(--ard-text-alt);
-  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
-  --ard-cmpcl--on-bg-colored-light: var(--ard-text);
-  --ard-cmpcl--border: rgb(var(--ard-secondary-300));
-  --ard-cmpcl--border-light: rgb(var(--ard-secondary-100));
-  --ard-cmpcl--content: rgb(var(--ard-secondary-700));
-  --ard-cmpcl--content-light: rgb(var(--ard-secondary-300));
-  --ard-cmpcl--overlay-rgb: var(--ard-secondary-500);
-  --ard-cmpcl--overlay: var(--ard-overlay);
-  --ard-cmpcl--overlay-colored: rgb(var(--ard-secondary-700));
-  --ard-cmpcl--overlay-colored-light: rgb(var(--ard-secondary-100));
-}
-.ard-progress-bar.ard-color-warn {
-  --ard-cmpcl--bg: rgb(var(--ard-warn-500));
-  --ard-cmpcl--bg-colored: rgb(var(--ard-warn-500));
-  --ard-cmpcl--bg-colored-light: rgb(var(--ard-warn-50));
-  --ard-cmpcl--bg-header: rgb(var(--ard-warn-50));
-  --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-warn-50));
-  --ard-cmpcl--on-bg: var(--ard-text-alt);
-  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
-  --ard-cmpcl--on-bg-colored-light: var(--ard-text);
-  --ard-cmpcl--border: rgb(var(--ard-warn-300));
-  --ard-cmpcl--border-light: rgb(var(--ard-warn-100));
-  --ard-cmpcl--content: rgb(var(--ard-warn-700));
-  --ard-cmpcl--content-light: rgb(var(--ard-warn-100));
-  --ard-cmpcl--overlay-rgb: var(--ard-warn-500);
-  --ard-cmpcl--overlay: var(--ard-overlay);
-  --ard-cmpcl--overlay-colored: rgb(var(--ard-warn-700));
-  --ard-cmpcl--overlay-colored-light: rgb(var(--ard-warn-100));
-}
-.ard-progress-bar.ard-color-danger {
-  --ard-cmpcl--bg: rgb(var(--ard-danger-700));
-  --ard-cmpcl--bg-colored: rgb(var(--ard-danger-700));
-  --ard-cmpcl--bg-colored-light: rgb(var(--ard-danger-100));
-  --ard-cmpcl--bg-header: rgb(var(--ard-danger-100));
-  --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-danger-50));
-  --ard-cmpcl--on-bg: var(--ard-text-alt);
-  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
-  --ard-cmpcl--on-bg-colored-light: var(--ard-text);
-  --ard-cmpcl--border: rgb(var(--ard-danger-300));
-  --ard-cmpcl--border-light: rgb(var(--ard-danger-100));
-  --ard-cmpcl--content: rgb(var(--ard-danger-900));
-  --ard-cmpcl--content-light: rgb(var(--ard-danger-500));
-  --ard-cmpcl--overlay-rgb: var(--ard-danger-700);
-  --ard-cmpcl--overlay: var(--ard-overlay);
-  --ard-cmpcl--overlay-colored: rgb(var(--ard-danger-700));
-  --ard-cmpcl--overlay-colored-light: rgb(var(--ard-danger-300));
-}
-.ard-progress-bar.ard-color-success {
-  --ard-cmpcl--bg: rgb(var(--ard-success-700));
-  --ard-cmpcl--bg-colored: rgb(var(--ard-success-700));
-  --ard-cmpcl--bg-colored-light: rgb(var(--ard-success-50));
-  --ard-cmpcl--bg-header: rgb(var(--ard-success-50));
-  --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-success-50));
-  --ard-cmpcl--on-bg: var(--ard-text-alt);
-  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
-  --ard-cmpcl--on-bg-colored-light: var(--ard-text);
-  --ard-cmpcl--border: rgb(var(--ard-success-300));
-  --ard-cmpcl--border-light: rgb(var(--ard-success-100));
-  --ard-cmpcl--content: rgb(var(--ard-success-900));
-  --ard-cmpcl--content-light: rgb(var(--ard-success-300));
-  --ard-cmpcl--overlay-rgb: var(--ard-success-700);
-  --ard-cmpcl--overlay: var(--ard-overlay);
-  --ard-cmpcl--overlay-colored: rgb(var(--ard-success-700));
-  --ard-cmpcl--overlay-colored-light: rgb(var(--ard-success-300));
-}
-.ard-progress-bar.ard-color-info {
-  --ard-cmpcl--bg: rgb(var(--ard-info-500));
-  --ard-cmpcl--bg-colored: rgb(var(--ard-info-500));
-  --ard-cmpcl--bg-colored-light: rgb(var(--ard-info-50));
-  --ard-cmpcl--bg-header: rgb(var(--ard-info-50));
-  --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-info-50));
-  --ard-cmpcl--on-bg: var(--ard-text-alt);
-  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
-  --ard-cmpcl--on-bg-colored-light: var(--ard-text);
-  --ard-cmpcl--border: rgb(var(--ard-info-300));
-  --ard-cmpcl--border-light: rgb(var(--ard-info-100));
-  --ard-cmpcl--content: rgb(var(--ard-info-700));
-  --ard-cmpcl--content-light: rgb(var(--ard-info-300));
-  --ard-cmpcl--overlay-rgb: var(--ard-info-500);
-  --ard-cmpcl--overlay: var(--ard-overlay);
-  --ard-cmpcl--overlay-colored: rgb(var(--ard-info-700));
-  --ard-cmpcl--overlay-colored-light: rgb(var(--ard-info-100));
-}
-.ard-progress-bar.ard-color-currentColor {
-  --ard-cmpcl--bg: var(--ard-bg);
-  --ard-cmpcl--bg-colored: currentColor;
-  --ard-cmpcl--on-bg: currentColor;
-  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
-  --ard-cmpcl--border: currentColor;
-  --ard-cmpcl--border-light: currentColor;
-  --ard-cmpcl--content: currentColor;
-  --ard-cmpcl--content-light: currentColor;
-  --ard-cmpcl--overlay-rgb: var(--ard-overlay-rgb);
-  --ard-cmpcl--overlay: var(--ard-overlay);
-  --ard-cmpcl--overlay-colored: currentColor;
-  --ard-cmpcl--overlay-colored-light: currentColor;
-}
-.ard-progress-bar .ard-progress-bar__background,
-.ard-progress-bar .ard-progress-bar__overlay {
-  position: absolute;
-  background-color: var(--ard-cmpcl--bg-colored);
-  top: 0;
-  bottom: 0;
-  left: 0;
-}
-.ard-progress-bar .ard-progress-bar__background {
-  background-color: var(--ard-cmpcl--bg-colored-light);
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  opacity: 30%;
-}
-.ard-progress-bar .ard-progress-bar__overlay {
-  width: var(--ard-_progress-bar-main, 0);
-}
-.ard-progress-bar.ard-variant-sharp {
-  border-radius: 0;
-}
-.ard-progress-bar.ard-variant-pill {
-  border-radius: 9999px;
-}
-.ard-progress-bar.ard-progress-bar__size-default {
-  height: 0.25rem;
-}
-.ard-progress-bar.ard-progress-bar__size-auto:not(.ard-progress-bar__mode-buffer) {
-  height: 100%;
-}
-.ard-progress-bar.ard-progress-bar__mode-determinate .ard-progress-bar__overlay, .ard-progress-bar.ard-progress-bar__mode-buffer .ard-progress-bar__overlay {
-  transition: width 0.1s cubic-bezier(0.4, 0, 0.2, 1);
-}
-.ard-progress-bar.ard-progress-bar__mode-indeterminate .ard-progress-bar__overlay, .ard-progress-bar.ard-progress-bar__mode-query .ard-progress-bar__overlay {
-  position: unset;
-}
-.ard-progress-bar.ard-progress-bar__mode-indeterminate .ard-progress-bar__overlay::before, .ard-progress-bar.ard-progress-bar__mode-indeterminate .ard-progress-bar__overlay::after, .ard-progress-bar.ard-progress-bar__mode-query .ard-progress-bar__overlay::before, .ard-progress-bar.ard-progress-bar__mode-query .ard-progress-bar__overlay::after {
-  content: "";
-  position: absolute;
-  background-color: inherit;
-  top: 0;
-  left: 0;
-  bottom: 0;
-}
-.ard-progress-bar.ard-progress-bar__mode-indeterminate .ard-progress-bar__overlay::before, .ard-progress-bar.ard-progress-bar__mode-query .ard-progress-bar__overlay::before {
-  animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-}
-.ard-progress-bar.ard-progress-bar__mode-indeterminate .ard-progress-bar__overlay::after, .ard-progress-bar.ard-progress-bar__mode-query .ard-progress-bar__overlay::after {
-  animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
-  animation-delay: 1.15s;
-}
-.ard-progress-bar.ard-progress-bar__mode-query {
-  transform: rotate(180deg);
-}
-.ard-progress-bar.ard-progress-bar__mode-buffer .ard-progress-bar__background {
-  background: none !important;
-  left: var(--ard-_progress-bar-buffer, 100%);
-  overflow: hidden;
-}
-.ard-progress-bar.ard-progress-bar__mode-buffer .ard-progress-bar__background::after {
-  content: "";
-  position: absolute;
-  right: -0.5rem;
-  top: 0;
-  bottom: 0;
-  width: 9999px;
-  animation: buffer 0.4s linear infinite;
-  border-bottom: 0.25rem dotted var(--ard-cmpcl--bg-colored);
-}
-.ard-progress-bar.ard-progress-bar__mode-buffer .ard-progress-bar__overlay-buffer {
-  background: var(--ard-cmpcl--bg-colored-light);
-  position: absolute;
-  left: 0;
-  width: var(--ard-_progress-bar-buffer, 0);
-  top: 0;
-  bottom: 0;
-  transition: width 0.1s cubic-bezier(0.4, 0, 0.2, 1);
-}
-.ard-progress-bar.ard-progress-bar__size-default > .ard-progress-bar__value, .ard-progress-bar.ard-progress-bar__hide-value > .ard-progress-bar__value, .ard-progress-bar.ard-progress-bar__mode-buffer > .ard-progress-bar__value {
-  display: none;
-}
-.ard-progress-bar.ard-color-currentColor .ard-progress-bar__background {
-  opacity: 22.5%;
-  background: var(--ard-cmpcl--bg-colored);
-}
-.ard-progress-bar.ard-color-currentColor .ard-progress-bar__overlay-buffer {
-  opacity: 30%;
-  background: var(--ard-cmpcl--bg-colored);
+@layer ard-theme {
+  :root {
+    --ard-progress-bar-width: 100%;
+    --ard-progress-bar-height: 0.25rem;
+    --ard-progress-bar-margin: 0.5rem 0;
+    --ard-progress-bar-background-opacity: 30%;
+    --ard-progress-bar-buffer-opacity: 100%;
+    --ard-progress-bar-transition-duration: 0.1s;
+    --ard-progress-bar-indeterminate-animation-duration: 2.1s;
+    --ard-progress-bar-buffer-animation-distance: 0.5rem;
+    --ard-progress-bar-buffer-animation-duration: 0.4s;
+    --ard-progress-bar-currentColor-background-opacity: 22.5%;
+    --ard-progress-bar-currentColor-overlay-buffer-opacity: 30%;
+  }
+  .ard-progress-bar {
+    width: var(--ard-progress-bar-width, 100%);
+    margin: var(--ard-progress-bar-margin, 0.5rem 0);
+    overflow: hidden;
+  }
+  .ard-progress-bar.ard-color-none {
+    --ard-cmpcl--bg: var(--ard-bg);
+    --ard-cmpcl--bg-colored: var(--ard-bg-alt);
+    --ard-cmpcl--bg-colored-light: var(--ard-detail-light);
+    --ard-cmpcl--bg-header: var(--ard-bg-filled);
+    --ard-cmpcl--bg-colored-verylight: var(--ard-bg-darker);
+    --ard-cmpcl--on-bg: var(--ard-text);
+    --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored-light: var(--ard-text);
+    --ard-cmpcl--border: var(--ard-text);
+    --ard-cmpcl--border-light: var(--ard-text2);
+    --ard-cmpcl--content: var(--ard-text);
+    --ard-cmpcl--content-light: var(--ard-text-alt);
+    --ard-cmpcl--overlay-rgb: var(--ard-overlay-rgb);
+    --ard-cmpcl--overlay: var(--ard-overlay);
+    --ard-cmpcl--overlay-colored: var(--ard-overlay);
+    --ard-cmpcl--overlay-colored-light: var(--ard-text-alt);
+  }
+  .ard-progress-bar.ard-color-primary {
+    --ard-cmpcl--bg: rgb(var(--ard-primary-500));
+    --ard-cmpcl--bg-colored: rgb(var(--ard-primary-500));
+    --ard-cmpcl--bg-colored-light: rgb(var(--ard-primary-100));
+    --ard-cmpcl--bg-header: rgb(var(--ard-primary-100));
+    --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-primary-50));
+    --ard-cmpcl--on-bg: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored-light: var(--ard-text);
+    --ard-cmpcl--border: rgb(var(--ard-primary-300));
+    --ard-cmpcl--border-light: rgb(var(--ard-primary-100));
+    --ard-cmpcl--content: rgb(var(--ard-primary-700));
+    --ard-cmpcl--content-light: rgb(var(--ard-primary-300));
+    --ard-cmpcl--overlay-rgb: var(--ard-primary-500);
+    --ard-cmpcl--overlay: var(--ard-overlay);
+    --ard-cmpcl--overlay-colored: rgb(var(--ard-primary-700));
+    --ard-cmpcl--overlay-colored-light: rgb(var(--ard-primary-100));
+  }
+  .ard-progress-bar.ard-color-secondary {
+    --ard-cmpcl--bg: rgb(var(--ard-secondary-500));
+    --ard-cmpcl--bg-colored: rgb(var(--ard-secondary-500));
+    --ard-cmpcl--bg-colored-light: rgb(var(--ard-secondary-50));
+    --ard-cmpcl--bg-header: rgb(var(--ard-secondary-50));
+    --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-secondary-50));
+    --ard-cmpcl--on-bg: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored-light: var(--ard-text);
+    --ard-cmpcl--border: rgb(var(--ard-secondary-300));
+    --ard-cmpcl--border-light: rgb(var(--ard-secondary-100));
+    --ard-cmpcl--content: rgb(var(--ard-secondary-700));
+    --ard-cmpcl--content-light: rgb(var(--ard-secondary-300));
+    --ard-cmpcl--overlay-rgb: var(--ard-secondary-500);
+    --ard-cmpcl--overlay: var(--ard-overlay);
+    --ard-cmpcl--overlay-colored: rgb(var(--ard-secondary-700));
+    --ard-cmpcl--overlay-colored-light: rgb(var(--ard-secondary-100));
+  }
+  .ard-progress-bar.ard-color-warn {
+    --ard-cmpcl--bg: rgb(var(--ard-warn-500));
+    --ard-cmpcl--bg-colored: rgb(var(--ard-warn-500));
+    --ard-cmpcl--bg-colored-light: rgb(var(--ard-warn-50));
+    --ard-cmpcl--bg-header: rgb(var(--ard-warn-50));
+    --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-warn-50));
+    --ard-cmpcl--on-bg: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored-light: var(--ard-text);
+    --ard-cmpcl--border: rgb(var(--ard-warn-300));
+    --ard-cmpcl--border-light: rgb(var(--ard-warn-100));
+    --ard-cmpcl--content: rgb(var(--ard-warn-700));
+    --ard-cmpcl--content-light: rgb(var(--ard-warn-100));
+    --ard-cmpcl--overlay-rgb: var(--ard-warn-500);
+    --ard-cmpcl--overlay: var(--ard-overlay);
+    --ard-cmpcl--overlay-colored: rgb(var(--ard-warn-700));
+    --ard-cmpcl--overlay-colored-light: rgb(var(--ard-warn-100));
+  }
+  .ard-progress-bar.ard-color-danger {
+    --ard-cmpcl--bg: rgb(var(--ard-danger-700));
+    --ard-cmpcl--bg-colored: rgb(var(--ard-danger-700));
+    --ard-cmpcl--bg-colored-light: rgb(var(--ard-danger-100));
+    --ard-cmpcl--bg-header: rgb(var(--ard-danger-100));
+    --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-danger-50));
+    --ard-cmpcl--on-bg: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored-light: var(--ard-text);
+    --ard-cmpcl--border: rgb(var(--ard-danger-300));
+    --ard-cmpcl--border-light: rgb(var(--ard-danger-100));
+    --ard-cmpcl--content: rgb(var(--ard-danger-900));
+    --ard-cmpcl--content-light: rgb(var(--ard-danger-500));
+    --ard-cmpcl--overlay-rgb: var(--ard-danger-700);
+    --ard-cmpcl--overlay: var(--ard-overlay);
+    --ard-cmpcl--overlay-colored: rgb(var(--ard-danger-700));
+    --ard-cmpcl--overlay-colored-light: rgb(var(--ard-danger-300));
+  }
+  .ard-progress-bar.ard-color-success {
+    --ard-cmpcl--bg: rgb(var(--ard-success-700));
+    --ard-cmpcl--bg-colored: rgb(var(--ard-success-700));
+    --ard-cmpcl--bg-colored-light: rgb(var(--ard-success-50));
+    --ard-cmpcl--bg-header: rgb(var(--ard-success-50));
+    --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-success-50));
+    --ard-cmpcl--on-bg: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored-light: var(--ard-text);
+    --ard-cmpcl--border: rgb(var(--ard-success-300));
+    --ard-cmpcl--border-light: rgb(var(--ard-success-100));
+    --ard-cmpcl--content: rgb(var(--ard-success-900));
+    --ard-cmpcl--content-light: rgb(var(--ard-success-300));
+    --ard-cmpcl--overlay-rgb: var(--ard-success-700);
+    --ard-cmpcl--overlay: var(--ard-overlay);
+    --ard-cmpcl--overlay-colored: rgb(var(--ard-success-700));
+    --ard-cmpcl--overlay-colored-light: rgb(var(--ard-success-300));
+  }
+  .ard-progress-bar.ard-color-info {
+    --ard-cmpcl--bg: rgb(var(--ard-info-500));
+    --ard-cmpcl--bg-colored: rgb(var(--ard-info-500));
+    --ard-cmpcl--bg-colored-light: rgb(var(--ard-info-50));
+    --ard-cmpcl--bg-header: rgb(var(--ard-info-50));
+    --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-info-50));
+    --ard-cmpcl--on-bg: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+    --ard-cmpcl--on-bg-colored-light: var(--ard-text);
+    --ard-cmpcl--border: rgb(var(--ard-info-300));
+    --ard-cmpcl--border-light: rgb(var(--ard-info-100));
+    --ard-cmpcl--content: rgb(var(--ard-info-700));
+    --ard-cmpcl--content-light: rgb(var(--ard-info-300));
+    --ard-cmpcl--overlay-rgb: var(--ard-info-500);
+    --ard-cmpcl--overlay: var(--ard-overlay);
+    --ard-cmpcl--overlay-colored: rgb(var(--ard-info-700));
+    --ard-cmpcl--overlay-colored-light: rgb(var(--ard-info-100));
+  }
+  .ard-progress-bar.ard-color-currentColor {
+    --ard-cmpcl--bg: var(--ard-bg);
+    --ard-cmpcl--bg-colored: currentColor;
+    --ard-cmpcl--on-bg: currentColor;
+    --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+    --ard-cmpcl--border: currentColor;
+    --ard-cmpcl--border-light: currentColor;
+    --ard-cmpcl--content: currentColor;
+    --ard-cmpcl--content-light: currentColor;
+    --ard-cmpcl--overlay-rgb: var(--ard-overlay-rgb);
+    --ard-cmpcl--overlay: var(--ard-overlay);
+    --ard-cmpcl--overlay-colored: currentColor;
+    --ard-cmpcl--overlay-colored-light: currentColor;
+  }
+  .ard-progress-bar .ard-progress-bar__background,
+  .ard-progress-bar .ard-progress-bar__overlay {
+    position: absolute;
+    background-color: var(--ard-progress-bar-foreground-color, var(--ard-cmpcl--bg-colored));
+    top: 0;
+    bottom: 0;
+    left: 0;
+  }
+  .ard-progress-bar .ard-progress-bar__background {
+    background-color: var(--ard-progress-bar-background-color, var(--ard-cmpcl--bg-colored-light));
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    opacity: var(--ard-progress-bar-background-opacity, 30%);
+  }
+  .ard-progress-bar .ard-progress-bar__overlay {
+    width: var(--ard-_progress-bar-main, 0);
+  }
+  .ard-progress-bar.ard-variant-sharp {
+    border-radius: 0;
+  }
+  .ard-progress-bar.ard-variant-pill {
+    border-radius: 9999px;
+  }
+  .ard-progress-bar.ard-progress-bar__size-default {
+    height: var(--ard-progress-bar-height, 0.25rem);
+  }
+  .ard-progress-bar.ard-progress-bar__size-auto:not(.ard-progress-bar__mode-buffer) {
+    height: 100%;
+  }
+  .ard-progress-bar.ard-progress-bar__mode-determinate .ard-progress-bar__overlay, .ard-progress-bar.ard-progress-bar__mode-buffer .ard-progress-bar__overlay {
+    transition: width var(--ard-progress-bar-transition-duration, 0.1s) cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  .ard-progress-bar.ard-progress-bar__mode-indeterminate .ard-progress-bar__overlay, .ard-progress-bar.ard-progress-bar__mode-query .ard-progress-bar__overlay {
+    position: unset;
+  }
+  .ard-progress-bar.ard-progress-bar__mode-indeterminate .ard-progress-bar__overlay::before, .ard-progress-bar.ard-progress-bar__mode-indeterminate .ard-progress-bar__overlay::after, .ard-progress-bar.ard-progress-bar__mode-query .ard-progress-bar__overlay::before, .ard-progress-bar.ard-progress-bar__mode-query .ard-progress-bar__overlay::after {
+    content: "";
+    position: absolute;
+    background-color: inherit;
+    top: 0;
+    left: 0;
+    bottom: 0;
+  }
+  .ard-progress-bar.ard-progress-bar__mode-indeterminate .ard-progress-bar__overlay::before, .ard-progress-bar.ard-progress-bar__mode-query .ard-progress-bar__overlay::before {
+    animation: indeterminate var(--ard-progress-bar-indeterminate-animation-duration, 2.1s) cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+  }
+  .ard-progress-bar.ard-progress-bar__mode-indeterminate .ard-progress-bar__overlay::after, .ard-progress-bar.ard-progress-bar__mode-query .ard-progress-bar__overlay::after {
+    animation: indeterminate-short var(--ard-progress-bar-indeterminate-animation-duration, 2.1s) cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+    animation-delay: calc(var(--ard-progress-bar-indeterminate-animation-duration, 2.1s) * 0.55);
+  }
+  .ard-progress-bar.ard-progress-bar__mode-query {
+    transform: rotate(180deg);
+  }
+  .ard-progress-bar.ard-progress-bar__mode-buffer .ard-progress-bar__background {
+    background: none !important;
+    left: var(--ard-_progress-bar-buffer, 100%);
+    overflow: hidden;
+  }
+  .ard-progress-bar.ard-progress-bar__mode-buffer .ard-progress-bar__background::after {
+    content: "";
+    position: absolute;
+    right: calc(var(--ard-progress-bar-buffer-animation-distance, 0.5rem) * -1);
+    top: 0;
+    bottom: 0;
+    width: 9999px;
+    animation: buffer var(--ard-progress-bar-buffer-animation-duration, 0.4s) linear infinite;
+    border-bottom: var(--ard-progress-bar-height, 0.25rem) dotted var(--ard-cmpcl--bg-colored);
+  }
+  .ard-progress-bar.ard-progress-bar__mode-buffer .ard-progress-bar__overlay-buffer {
+    background: var(--ard-progress-bar-buffer-color, var(--ard-cmpcl--bg-colored-light));
+    opacity: var(--ard-progress-bar-buffer-opacity, 100%);
+    position: absolute;
+    left: 0;
+    width: var(--ard-_progress-bar-buffer, 0);
+    top: 0;
+    bottom: 0;
+    transition: width var(--ard-progress-bar-transition-duration, 0.1s) cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  .ard-progress-bar.ard-progress-bar__size-default > .ard-progress-bar__value, .ard-progress-bar.ard-progress-bar__hide-value > .ard-progress-bar__value, .ard-progress-bar.ard-progress-bar__mode-buffer > .ard-progress-bar__value {
+    display: none;
+  }
+  .ard-progress-bar.ard-color-currentColor .ard-progress-bar__background {
+    opacity: var(--ard-progress-bar-currentColor-background-opacity, 22.5%);
+    background: var(--ard-cmpcl--bg-colored);
+  }
+  .ard-progress-bar.ard-color-currentColor .ard-progress-bar__overlay-buffer {
+    opacity: var(--ard-progress-bar-currentColor-overlay-buffer-opacity, 30%);
+    background: var(--ard-cmpcl--bg-colored);
+  }
 }
-
 @keyframes indeterminate {
   0% {
     left: -35%;

package/prebuilt-themes/default/progress-bar.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/progress-bar.scss","../../../../projects/ui/src/themes/default/_coloring.scss"],"names":[],"mappings":"AAGA;EAEE;EACA;EACA;;ACJA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADpIF;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAIF;EACE;;AAEF;EACE;;AAIF;EACE;;AAEF;EACE;;AAMA;EACE;;AAKF;EACE;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAIN;EACE;;AAGA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAQF;EACE;;AAMF;EACE;EACA;;AAEF;EACE;EACA;;;AAKN;EACE;IACE;IACA;;EAEF;IACE;IACA;;EAEF;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;EAEF;IACE;IACA;;;AAIJ;EACE;IACE;;EAEF;IACE","file":"progress-bar.css"}
+{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/progress-bar.scss","../../../../projects/ui/src/themes/default/_coloring.scss"],"names":[],"mappings":"AAGA;EAGE;IACE;IACA;IACA;IAIA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGF;IAEE;IACA;IACA;;ECxBF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EDhHA;AAAA;IAEE;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;;EAIF;IACE;;EAEF;IACE;;EAIF;IACE;;EAEF;IACE;;EAMA;IACE;;EAKF;IACE;;EAEA;IAEE;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;;EAGF;IACE;IAEA;;EAIN;IACE;;EAGA;IACE;IACA;IACA;;EAEA;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGJ;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAQF;IACE;;EAMF;IACE;IACA;;EAEF;IACE;IACA;;;AAMR;EACE;IACE;IACA;;EAEF;IACE;IACA;;EAEF;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;EAEF;IACE;IACA;;;AAIJ;EACE;IACE;;EAEF;IACE","file":"progress-bar.css"}