feat: add a countdown on sl-alert

src/components/alert/alert.component.ts

@@ -50,6 +50,8 @@ export default class SlAlert extends ShoelaceElement {
 
   @query('[part~="base"]') base: HTMLElement;
 
+  @query('.alert__countdown') countdownElement: HTMLElement;
+
   /**
    * Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can
    * use the `show()` and `hide()` methods and this attribute will reflect the alert's open state.
@@ -69,17 +71,37 @@ export default class SlAlert extends ShoelaceElement {
    */
   @property({ type: Number }) duration = Infinity;
 
+  /**
+   * Enables a countdown that indicates the remaining time the alert will be displayed.
+   * Typically used to indicate the remaining time before a whole app refresh.
+   */
+  @property({ type: Boolean, reflect: true }) countdown = false;
+
   firstUpdated() {
     this.base.hidden = !this.open;
   }
 
   private restartAutoHide() {
+    this.handleCountdownChange();
     clearTimeout(this.autoHideTimeout);
     if (this.open && this.duration < Infinity) {
       this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);
     }
   }
 
+  private handleCountdownChange() {
+    if(this.open && this.duration < Infinity && this.countdown) {
+      const { countdownElement } = this;
+      countdownElement.animate([
+        { width: '100%' },
+        { width: '0' }
+      ], {
+        duration: this.duration,
+        easing: 'linear'
+      });
+    }
+  }
+
   private handleCloseClick() {
     this.hide();
   }
@@ -151,6 +173,7 @@ export default class SlAlert extends ShoelaceElement {
    */
   async toast() {
     return new Promise<void>(resolve => {
+      this.handleCountdownChange();
       if (toastStack.parentElement === null) {
         document.body.append(toastStack);
       }
@@ -220,6 +243,11 @@ export default class SlAlert extends ShoelaceElement {
               ></sl-icon-button>
             `
           : ''}
+
+        ${this.countdown ? html`
+          <div class="alert__countdown">
+          </div>
+        `: ''}
       </div>
     `;
   }

src/components/alert/alert.styles.ts

@@ -91,4 +91,31 @@ export default css`
     font-size: var(--sl-font-size-medium);
     padding-inline-end: var(--sl-spacing-medium);
   }
+
+  .alert__countdown {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: calc(var(--sl-panel-border-width) * 3);
+  }
+
+  .alert--primary .alert__countdown {
+    background-color: var(--sl-color-primary-600);
+  }
+
+  .alert--success .alert__countdown {
+    background-color: var(--sl-color-success-600);
+  }
+
+  .alert--neutral .alert__countdown {
+    background-color: var(--sl-color-neutral-600);
+  }
+
+  .alert--warning .alert__countdown {
+    background-color: var(--sl-color-warning-600);
+  }
+
+  .alert--danger .alert__countdown {
+    background-color: var(--sl-color-danger-600);
+  }
 `;