@zanichelli/albe-web-components 5.6.0 → 6.0.0-rc1

package/dist/collection/components/z-carousel/index.js

@@ -1,5 +1,4 @@
-import { h, Host, } from "@stencil/core";
-import { CarouselArrowsPosition, CarouselProgressMode, ButtonVariantEnum, ButtonSizeEnum } from "../../beans";
+import { h } from "@stencil/core";
 /**
  * ZCarousel component.
  * @cssprop --z-carousel-gutter - The gutter between items.
@@ -7,119 +6,14 @@ import { CarouselArrowsPosition, CarouselProgressMode, ButtonVariantEnum, Button
  */
 export class ZCarousel {
   constructor() {
-    /** Shows only one content at a time */
-    this.single = false;
-    /** The height of z-carousel ghost loading, this prop is mandatory when isloading is set to true, as otherwise the component won't show. */
+    /** sets the height of z-carousel ghost loading, this prop is mandatory when isloading is set to true, as otherwise the component won't show. */
     this.ghostLoadingHeight = 100;
-    /** Current item index for single mode. */
-    this.current = 0;
-    /** Flag indicating the items container is scrolling programmatically towards the stored index. */
-    this.scrollingTo = null;
-  }
-  onIndexChange() {
-    this.scrollingTo = this.current;
-    this.items[this.current].scrollIntoView({
-      behavior: "smooth",
-    });
-    this.indexChange.emit({ currentItem: this.current });
-  }
-  onSingleModeChange() {
-    if (this.single && !this.intersectionObserver) {
-      this.setIntersectionObserver();
-    }
-  }
-  componentDidLoad() {
-    this.itemsContainer = this.hostElement.querySelector(".z-carousel-items-container");
-    if (!this.itemsContainer) {
-      return;
-    }
-    this.items = Array.from(this.itemsContainer.querySelectorAll("li"));
-    if (this.single) {
-      this.setIntersectionObserver();
-    }
-  }
-  /**
-   * Set an intersection observer to show the current index to the indicator when scrolling.
-   */
-  setIntersectionObserver() {
-    this.intersectionObserver = new window.IntersectionObserver((entries) => {
-      const entry = entries.find((entry) => entry.isIntersecting);
-      if (!entry) {
-        return;
-      }
-      const entryIndex = this.items.findIndex((item) => item === entry.target);
-      /* skip setting the current item if intersection has been triggered by a programmatic scroll
-      (the scrollIntoView in `onIndexChange`) */
-      if (this.scrollingTo !== null && entryIndex !== this.scrollingTo) {
-        return;
-      }
-      this.current = entryIndex;
-      this.scrollingTo = null;
-    }, {
-      root: this.itemsContainer,
-      threshold: 0.5,
-    });
-    this.items.forEach((element) => this.intersectionObserver.observe(element));
-  }
-  onPrev() {
-    if (this.single) {
-      this.current = Math.max(0, this.current - 1);
-      return;
-    }
-    const scroller = this.itemsContainer;
-    if (!scroller) {
-      return;
-    }
-    scroller.scrollBy({
-      left: -scroller.clientWidth / 2,
-      behavior: "smooth",
-    });
-  }
-  onNext() {
-    if (this.single) {
-      this.current = Math.min(this.current + 1, this.items.length - 1);
-      return;
-    }
-    const scroller = this.itemsContainer;
-    if (!scroller) {
-      return;
-    }
-    scroller.scrollBy({
-      left: scroller.clientWidth / 2,
-      behavior: "smooth",
-    });
-  }
-  /**
-   * Check if footer can be rendered.
-   * @returns {boolean}
-   */
-  canShowFooter() {
-    return (this.arrowsPosition === CarouselArrowsPosition.BOTTOM ||
-      this.progressMode === CarouselProgressMode.DOTS ||
-      this.progressMode === CarouselProgressMode.NUMBERS);
-  }
-  /**
-   * Set current item to passed index.
-   * @param {number} index Index to set
-   * @returns {void}
-   */
-  goTo(index) {
-    if (this.current === index) {
-      return;
-    }
-    this.current = index;
   }
   render() {
     if (this.isLoading) {
-      return h(Host, null, this.label && h("div", { class: "heading-4 z-carousel-title" }, this.label), h("div", { style: { height: `${this.ghostLoadingHeight}px` } }, h("z-ghost-loading", null), h("div", { class: "loading-items-container" }, h("slot", null))));
+      return (h("div", { style: { height: `${this.ghostLoadingHeight}px` } }, h("z-ghost-loading", null), h("div", { style: { display: "none" } }, h("slot", null))));
     }
-    return (h(Host, null, h("div", { class: "z-carousel-container" }, this.label && h("div", { class: "heading-4 z-carousel-title" }, this.label), h("div", { class: "z-carousel-wrapper" }, this.arrowsPosition === CarouselArrowsPosition.OVER && (h("z-button", { size: ButtonSizeEnum.small, "data-direction": "prev", icon: "chevron-left", onClick: this.onPrev.bind(this) })), h("ul", { class: "z-carousel-items-container" }, h("slot", null)), this.arrowsPosition === CarouselArrowsPosition.OVER && (h("z-button", { size: ButtonSizeEnum.small, "data-direction": "next", icon: "chevron-right", onClick: this.onNext.bind(this) })))), this.canShowFooter() && (h("div", { class: "z-carousel-footer" }, this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (h("z-button", { size: ButtonSizeEnum.small, variant: ButtonVariantEnum.tertiary, icon: "arrow-left-filled", onClick: this.onPrev.bind(this) })), this.progressMode === CarouselProgressMode.DOTS &&
-      this.single &&
-      this.items && (h("div", { class: "dots-progress" }, this.items.map((_item, key) => (h("button", { type: "button", class: { current: this.current === key }, onClick: () => this.goTo(key) }, h("z-icon", { name: this.current === key
-        ? "white-circle-filled"
-        : "black-circle-filled" })))))), this.progressMode === CarouselProgressMode.NUMBERS &&
-      this.single &&
-      this.items && (h("div", { class: "numbers-progress" }, h("span", { class: "interactive-3 current" }, this.current + 1), h("span", { class: "interactive-3" }, "di"), h("span", { class: "interactive-3" }, this.items.length))), this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (h("z-button", { size: ButtonSizeEnum.small, variant: ButtonVariantEnum.tertiary, icon: "arrow-right-filled", onClick: this.onNext.bind(this) }))))));
+    return (h("ul", { class: "z-carousel-items-container" }, h("slot", null)));
   }
   static get is() { return "z-carousel"; }
   static get originalStyleUrls() {
@@ -146,90 +40,11 @@ export class ZCarousel {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The z-carousel is on loading state"
+          "text": "sets whether the z-carousel is on loading state"
         },
         "attribute": "is-loading",
         "reflect": false
       },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The z-carousel title, if given."
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "single": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Shows only one content at a time"
-        },
-        "attribute": "single",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "arrowsPosition": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "CarouselArrowsPosition",
-          "resolved": "CarouselArrowsPosition.BOTTOM | CarouselArrowsPosition.OVER",
-          "references": {
-            "CarouselArrowsPosition": {
-              "location": "import",
-              "path": "../../beans"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Arrow buttons position"
-        },
-        "attribute": "arrows-position",
-        "reflect": false
-      },
-      "progressMode": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "CarouselProgressMode",
-          "resolved": "CarouselProgressMode.DOTS | CarouselProgressMode.NUMBERS",
-          "references": {
-            "CarouselProgressMode": {
-              "location": "import",
-              "path": "../../beans"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Progress indicator. Only available for `single` mode"
-        },
-        "attribute": "progress-mode",
-        "reflect": false
-      },
       "ghostLoadingHeight": {
         "type": "number",
         "mutable": false,
@@ -242,7 +57,7 @@ export class ZCarousel {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The height of z-carousel ghost loading, this prop is mandatory when isloading is set to true, as otherwise the component won't show."
+          "text": "sets the height of z-carousel ghost loading, this prop is mandatory when isloading is set to true, as otherwise the component won't show."
         },
         "attribute": "ghost-loading-height",
         "reflect": false,
@@ -250,38 +65,4 @@ export class ZCarousel {
       }
     };
   }
-  static get states() {
-    return {
-      "current": {},
-      "items": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "indexChange",
-        "name": "indexChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted on index change and only in `single` mode."
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "hostElement"; }
-  static get watchers() {
-    return [{
-        "propName": "current",
-        "methodName": "onIndexChange"
-      }, {
-        "propName": "single",
-        "methodName": "onSingleModeChange"
-      }];
-  }
 }

package/dist/collection/components/z-carousel/styles.css

@@ -1,54 +1,19 @@
-z-carousel {
+:host {
   font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
 
   --z-carousel-gutter: 0;
 }
 
-z-carousel[single],
-z-carousel[single='true'] {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-z-carousel[single='true'] .z-carousel-container,
-z-carousel[single] .z-carousel-container {
-  width: fit-content;
-  max-width: 100%;
-}
-
-z-carousel .loading-items-container {
-  display: none;
-}
-
-.z-carousel-container {
-  display: flex;
-  flex-direction: column;
-}
-
-.z-carousel-wrapper {
-  position: relative;
-}
-
-.z-carousel-title {
-  color: var(--gray800);
-  margin-bottom: var(--space-unit);
-}
-
 .z-carousel-items-container {
   display: flex;
-  flex-direction: row;
-  overflow-x: scroll;
-  max-width: 100%;
-  padding-inline-start: 0;
   margin: 0;
   list-style: none;
-  scroll-snap-type: x mandatory;
 
   /* Hide scrollbar for IE, Edge and Firefox */
   -ms-overflow-style: none; /* IE and Edge */
+  overflow-x: scroll;
+  padding-inline-start: 0;
   scrollbar-width: none; /* Firefox */
 }
 
@@ -60,73 +25,3 @@ z-carousel .loading-items-container {
 .z-carousel-items-container > *:not(:last-child) {
   margin-right: var(--z-carousel-gutter);
 }
-
-z-carousel[single='true'] .z-carousel-items-container > *:not(:last-child),
-z-carousel[single] .z-carousel-items-container > *:not(:last-child) {
-  margin-right: 0;
-}
-
-.z-carousel-items-container > li {
-  scroll-snap-align: center;
-}
-
-z-button[data-direction] {
-  --z-icon-width: 32px;
-  --z-icon-height: 32px;
-
-  position: absolute;
-  bottom: calc(50% - calc(var(--space-unit) * 3));
-  cursor: pointer;
-}
-
-z-button[data-direction="next"] {
-  right: 0;
-}
-
-.z-carousel-footer {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  margin-top: var(--space-unit);
-}
-
-.z-carousel-footer .number-progress,
-.z-carousel-footer .dots-progress {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.z-carousel-footer .dots-progress button {
-  display: flex;
-  align-items: center;
-  margin: 0;
-  padding: 0;
-  border: none;
-  background-color: transparent;
-}
-
-.z-carousel-footer .dots-progress button:not(.current) {
-  cursor: pointer;
-}
-
-.z-carousel-footer .numbers-progress {
-  margin: 0 calc(var(--space-unit) / 2);
-}
-
-.z-carousel-footer .numbers-progress > * {
-  margin-right: calc(var(--space-unit) / 2);
-}
-
-.z-carousel-footer .numbers-progress .current {
-  font-weight: var(--font-sb);
-}
-
-.z-carousel-footer .dots-progress button.current z-icon {
-  fill: var(--gray800);
-}
-
-.z-carousel-footer .dots-progress button:not(.current) z-icon {
-  fill: var(--gray200);
-}

package/dist/collection/components/z-contextual-menu/index.js

@@ -1,4 +1,4 @@
-import { h, } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { PopoverPositions } from "../../beans";
 export class ZContextualMenu {
   constructor() {
@@ -9,7 +9,7 @@ export class ZContextualMenu {
     /**
      * [optional] Sets the position of the popover
      */
-    this.popoverPosition = PopoverPositions.bottom_right;
+    this.popoverPosition = PopoverPositions.BOTTOM_RIGHT;
   }
   componentWillRender() {
     if (this.elements) {
@@ -29,12 +29,7 @@ export class ZContextualMenu {
   }
   render() {
     var _a, _b;
-    return [
-      h("button", { ref: (el) => (this.triggerButton = el), "aria-label": ((_a = this.popover) === null || _a === void 0 ? void 0 : _a.open) ? "chiudi menu contestuale" : "apri menu contestuale", onClick: () => this.togglePopover() }, h("z-icon", { name: "contextual-menu", fill: this.color })),
-      h("z-popover", { ref: (el) => (this.popover = el), position: this.popoverPosition }, h("div", { class: "popover-content-container" }, h("z-list", null, h("z-list-group", { "divider-type": "element" }, (_b = this.jsonElements) === null || _b === void 0 ? void 0 : _b.map((element, index) => (h("z-list-element", { clickable: !element.disabled, class: "my-z-list-element", "align-button": "left", "expandable-style": "accordion", color: element.disabled ? `color-disabled03` : this.color, isContextualMenu: true, listElementId: index, onClickItem: (event) => this.clickContextualMenu.emit(event.detail) }, h("div", { class: element.disabled
-          ? "disabled-element-container"
-          : "element-container" }, this.showIcon() && (h("div", { class: "element-icon" }, h("z-icon", { name: element.icon, width: 16, height: 16 }))), h("div", { class: "element-text" }, h("span", null, element.text))))))))))
-    ];
+    return (h(Host, null, h("button", { ref: (el) => (this.triggerButton = el), "aria-label": ((_a = this.popover) === null || _a === void 0 ? void 0 : _a.open) ? "chiudi menu contestuale" : "apri menu contestuale", onClick: () => this.togglePopover() }, h("z-icon", { name: "contextual-menu", fill: this.color })), h("z-popover", { ref: (el) => (this.popover = el), position: this.popoverPosition }, h("div", { class: "popover-content-container" }, h("z-list", null, h("z-list-group", { "divider-type": "element" }, (_b = this.jsonElements) === null || _b === void 0 ? void 0 : _b.map((element, index) => (h("z-list-element", { clickable: !element.disabled, class: "my-z-list-element", "align-button": "left", "expandable-style": "accordion", color: element.disabled ? `color-disabled03` : this.color, isContextualMenu: true, listElementId: index, onClickItem: (event) => this.clickContextualMenu.emit(event.detail) }, h("div", { class: element.disabled ? "disabled-element-container" : "element-container" }, this.showIcon() && (h("div", { class: "element-icon" }, h("z-icon", { name: element.icon, width: 16, height: 16 }))), h("div", { class: "element-text" }, h("span", null, element.text))))))))))));
   }
   static get is() { return "z-contextual-menu"; }
   static get encapsulation() { return "shadow"; }
@@ -90,7 +85,7 @@ export class ZContextualMenu {
         "mutable": false,
         "complexType": {
           "original": "PopoverPositions",
-          "resolved": "PopoverPositions.auto | PopoverPositions.bottom | PopoverPositions.bottom_left | PopoverPositions.bottom_right | PopoverPositions.left | PopoverPositions.left_bottom | PopoverPositions.left_top | PopoverPositions.right | PopoverPositions.right_bottom | PopoverPositions.right_top | PopoverPositions.top | PopoverPositions.top_left | PopoverPositions.top_right",
+          "resolved": "PopoverPositions.AUTO | PopoverPositions.BOTTOM | PopoverPositions.BOTTOM_LEFT | PopoverPositions.BOTTOM_RIGHT | PopoverPositions.LEFT | PopoverPositions.LEFT_BOTTOM | PopoverPositions.LEFT_TOP | PopoverPositions.RIGHT | PopoverPositions.RIGHT_BOTTOM | PopoverPositions.RIGHT_TOP | PopoverPositions.TOP | PopoverPositions.TOP_LEFT | PopoverPositions.TOP_RIGHT",
           "references": {
             "PopoverPositions": {
               "location": "import",
@@ -106,7 +101,7 @@ export class ZContextualMenu {
         },
         "attribute": "popover-position",
         "reflect": true,
-        "defaultValue": "PopoverPositions.bottom_right"
+        "defaultValue": "PopoverPositions.BOTTOM_RIGHT"
       }
     };
   }

package/dist/collection/components/z-contextual-menu/styles.css

@@ -1,8 +1,8 @@
 :host {
   position: relative;
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
   font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
 }
@@ -10,10 +10,10 @@
 button {
   width: 100%;
   height: 100%;
+  padding: 0;
   border: none;
   background: transparent;
   cursor: pointer;
-  padding: 0;
 }
 
 z-popover {
@@ -24,9 +24,9 @@ z-popover {
   position: relative;
   min-width: 112px;
   max-width: 280px;
-  white-space: nowrap;
   background-color: var(--color-surface02);
   box-shadow: var(--shadow-2);
+  white-space: nowrap;
 }
 
 .element-container:hover {
@@ -36,19 +36,19 @@ z-popover {
 
 .element-text {
   overflow: hidden;
-  text-overflow: ellipsis;
   font-size: 14px;
+  text-overflow: ellipsis;
 }
 
 .element-container,
 .disabled-element-container {
   display: flex;
-  align-items: center;
-  gap: var(--space-unit);
-  fill: var(--color-disabled03);
-  padding: calc(var(--space-unit) / 2) var(--space-unit);
   min-height: calc(var(--space-unit) * 4);
   box-sizing: border-box;
+  align-items: center;
+  padding: calc(var(--space-unit) / 2) var(--space-unit);
+  fill: var(--color-disabled03);
+  gap: var(--space-unit);
 }
 
 .element-container {

package/dist/collection/components/z-cover-hero/index.js

@@ -32,8 +32,9 @@ export class ZCoverHero {
   render() {
     return (h(Host, null, this.variant === CoverHeroVariant.STACKED &&
       this.contentPosition === CoverHeroContentPosition.TOP &&
-      this.renderContent(), h("div", { class: "content-hero" }, h("div", { class: "cover" }, h("slot", { name: "cover" })), h("slot", { name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), (this.variant === CoverHeroVariant.STACKED && this.contentPosition ===
-      CoverHeroContentPosition.BOTTOM) && this.renderContent()));
+      this.renderContent(), h("div", { class: "content-hero" }, h("div", { class: "cover" }, h("slot", { name: "cover" })), h("slot", { name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
+      this.contentPosition === CoverHeroContentPosition.BOTTOM &&
+      this.renderContent()));
   }
   static get is() { return "z-cover-hero"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-cover-hero/styles.css

@@ -13,10 +13,10 @@
 
 :host .content-hero {
   position: relative;
-  align-items: baseline;
   width: 100%;
   height: var(--cover-hero-height);
   min-height: calc(var(--space-unit) * 30);
+  align-items: baseline;
   background-color: var(--gray600);
 }
 
@@ -45,20 +45,20 @@
 
 ::slotted(z-info-reveal) {
   position: absolute;
-  bottom: var(--grid-margin);
-  right: var(--grid-margin);
   z-index: 1;
+  right: var(--grid-margin);
+  bottom: var(--grid-margin);
 }
 
 /* Variant overlay */
 :host([variant="overlay"]) .content-hero .cover::after {
-  content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--cover-hero-overlay);
+  content: "";
 }
 
 :host([variant="overlay"]) .content-hero .content-container {

package/dist/collection/components/z-divider/index.js

@@ -3,11 +3,11 @@ import { DividerSize, DividerOrientation } from "../../beans";
 export class ZDivider {
   constructor() {
     /** [optional] Divider size */
-    this.size = DividerSize.small;
+    this.size = DividerSize.SMALL;
     /** [optional] Divider color */
     this.color = "gray200";
     /** [optional] Divider orintation */
-    this.orientation = DividerOrientation.horizontal;
+    this.orientation = DividerOrientation.HORIZONTAL;
   }
   render() {
     return (h(Host, { class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
@@ -31,7 +31,7 @@ export class ZDivider {
         "mutable": false,
         "complexType": {
           "original": "DividerSize",
-          "resolved": "DividerSize.large | DividerSize.medium | DividerSize.small",
+          "resolved": "DividerSize.LARGE | DividerSize.MEDIUM | DividerSize.SMALL",
           "references": {
             "DividerSize": {
               "location": "import",
@@ -47,7 +47,7 @@ export class ZDivider {
         },
         "attribute": "size",
         "reflect": false,
-        "defaultValue": "DividerSize.small"
+        "defaultValue": "DividerSize.SMALL"
       },
       "color": {
         "type": "string",
@@ -72,7 +72,7 @@ export class ZDivider {
         "mutable": false,
         "complexType": {
           "original": "DividerOrientation",
-          "resolved": "DividerOrientation.horizontal | DividerOrientation.vertical",
+          "resolved": "DividerOrientation.HORIZONTAL | DividerOrientation.VERTICAL",
           "references": {
             "DividerOrientation": {
               "location": "import",
@@ -88,7 +88,7 @@ export class ZDivider {
         },
         "attribute": "orientation",
         "reflect": false,
-        "defaultValue": "DividerOrientation.horizontal"
+        "defaultValue": "DividerOrientation.HORIZONTAL"
       }
     };
   }

package/dist/collection/components/z-ghost-loading/index.js

@@ -1,7 +1,7 @@
-import { h, Host } from '@stencil/core';
+import { h, Host } from "@stencil/core";
 export class ZGhostLoading {
   render() {
-    return (h(Host, null));
+    return h(Host, null);
   }
   static get is() { return "z-ghost-loading"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-ghost-loading/styles.css

@@ -1,33 +1,33 @@
 :host {
   display: inline-block;
+  overflow: hidden;
   width: 100%;
   height: 100%;
   background: var(--bg-neutral-100);
-  overflow: hidden;
   border-radius: 4px;
   transform: translate3d(0, 0, 0);
 }
 
 :host::after {
-    content: ' ';
-    display: block;
-    width: 100%;
-    height: 100%;
-    box-shadow: #e8ebee20 0px 0px 1px;
-
-    background-image: linear-gradient(
-        90deg,
-        var(--bg-neutral-100) 0%,
-        var(--bg-neutral-150) 95%,
-        var(--bg-neutral-100) 100%
-    );
-    animation: progress 1.6s ease-in-out infinite;
+  display: block;
+  width: 100%;
+  height: 100%;
+  animation: progress 1.6s ease-in-out infinite;
+  background-image: linear-gradient(
+    90deg,
+    var(--bg-neutral-100) 0%,
+    var(--bg-neutral-150) 95%,
+    var(--bg-neutral-100) 100%
+  );
+  box-shadow: #e8ebee20 0 0 1px;
+  content: " ";
 }
 
 @keyframes progress {
   0% {
     transform: translateX(-100%);
   }
+
   100% {
     transform: translateX(100%);
   }