Native <progress> styles

docs/docs/components/progress-bar.md

@@ -2,6 +2,7 @@
 title: Progress Bar
 description: Progress bars are used to show the status of an ongoing operation.
 tags: component
+native: progress
 ---
 
 ```html {.example}

docs/docs/native/progress.md

@@ -0,0 +1,31 @@
+---
+title: Progress Bar
+description: Progress bars are used to show the status of an ongoing operation.
+tags: native
+layout: element
+status: experimental
+component:
+ - progress-bar
+elements:
+  "<progress>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress
+---
+
+
+```html {.example}
+<progress value="40" max="100"></progress>
+```
+
+Indeterminate:
+
+
+```html {.example}
+<progress></progress>
+```
+
+### Custom Height
+
+Use the `height` CSS property to set the progress bar's height.
+
+```html {.example}
+<wa-progress-bar value="50" style="height: 6px;"></wa-progress-bar>
+```

src/components/progress-bar/progress-bar.css

@@ -37,7 +37,8 @@
 :host([indeterminate]) .indicator {
   position: absolute;
   inset-block: 0;
-  animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);
+  inline-size: 50%;
+  animation: wa-progress-indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);
 }
 
 @media (forced-colors: active) {
@@ -52,15 +53,13 @@
   }
 }
 
-@keyframes indeterminate {
+@keyframes wa-progress-indeterminate {
   0% {
     inset-inline-start: -50%;
-    width: 50%;
   }
 
   75%,
   100% {
     inset-inline-start: 100%;
-    width: 50%;
   }
 }

src/styles/applied.css

@@ -10,6 +10,7 @@
 @import url('native/tables.css');
 @import url('native/blockquote.css');
 @import url('native/dialog.css');
+@import url('native/progress.css');
 @import url('native/radio.css');
 @import url('native/select.css');
 @import url('native/slider.css');

src/styles/native/progress.css

@@ -0,0 +1,56 @@
+progress {
+  --indicator-color: var(--wa-color-brand-fill-loud);
+
+  width: 100%;
+  height: 1.25rem;
+  border-radius: var(--wa-border-radius-pill);
+  background-color: var(--wa-color-neutral-fill-normal);
+  color: var(--wa-color-brand-on-loud);
+  overflow: hidden;
+
+  &::-webkit-progress-bar {
+    background: transparent;
+  }
+
+  &[value]::-webkit-progress-value {
+    background-color: var(--indicator-color);
+  }
+
+  &::-moz-progress-bar {
+    background-color: var(--indicator-color);
+  }
+}
+
+/* Indeterminate */
+progress:not([value]) {
+  animation: wa-progress-indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);
+  padding-left: var(--inset-inline-start);
+
+  &::-webkit-progress-bar {
+    background-color: var(--indicator-color); /* Chrome does not render a ::-webkit-progress-value for indeterminates */
+  }
+}
+
+@keyframes wa-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+/* For some reason Chrome fiercely resists animations on this pseudo
+	  so we had to do it with padding on <progress> */
+@keyframes wa-progress-indeterminate {
+  0% {
+    padding-inline-end: 100%;
+  }
+
+  25%,
+  100% {
+    padding-inline-end: 0%;
+  }
+
+  75%,
+  100% {
+    padding-inline-start: 100%;
+  }
+}