@momentum-design/components 0.141.1 → 0.141.2

package/dist/browser/index.js

@@ -6306,9 +6306,11 @@
       ${this.renderHelperText()}
     `}};vr.styles=[...ee.styles,...eE],h([u({type:String})],vr.prototype,"placeholder",2),h([u({type:String,reflect:!0})],vr.prototype,"placement",2),h([u({type:String,reflect:!0,attribute:"boundary"})],vr.prototype,"boundary",2),h([u({type:String,reflect:!0,attribute:"strategy"})],vr.prototype,"strategy",2),h([u({type:Number,reflect:!0,attribute:"popover-z-index"})],vr.prototype,"popoverZIndex",2),h([u({type:Boolean,reflect:!0,attribute:"disable-flip"})],vr.prototype,"disableFlip",2),h([u({type:String,reflect:!0,attribute:"backdrop-append-to"})],vr.prototype,"backdropAppendTo",2),h([Ht(`[id="${Lc}"]`)],vr.prototype,"visualCombobox",2),h([lt()],vr.prototype,"selectedOption",2),h([lt()],vr.prototype,"displayPopover",2);var Lm=vr;Lm.register(Qy);var EI=Lm;var Mm=class extends Q{connectedCallback(){super.connectedCallback(),this.role=et.LISTBOX}createRenderRoot(){return this}},Om=Mm;var Mc=$.constructTagName("selectlistbox");Om.register(Mc);var TI=Om;Ss.register(Lo);var xI=Ss;var rE=$.constructTagName("skeleton"),iE={BUTTON:"button",CIRCULAR:"circular",RECTANGULAR:"rectangular",ROUNDED:"rounded"},Rm={MOTION:!1,VARIANT:iE.RECTANGULAR};var AI=z`
   :host {
+    --mdc-skeleton-animation-delay: 0s;
     --mdc-skeleton-background-color: var(--mds-color-theme-background-skeleton-normal);
     --mdc-skeleton-height: 100%;
     --mdc-skeleton-width: 100%;
+    position: relative;
     display: block;
     overflow: hidden;
     background-color: var(--mdc-skeleton-background-color);
@@ -6316,32 +6318,38 @@
     width: var(--mdc-skeleton-width);
   }
 
-  :host([motion]) {
+  :host([motion])::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 200%;
+    height: 100%;
+    pointer-events: none;
     background-image: linear-gradient(
       90deg,
       var(--mds-color-theme-background-skeleton-shimmer-0) 0%,
       var(--mds-color-theme-background-skeleton-shimmer-1) 50%,
       var(--mds-color-theme-background-skeleton-shimmer-2) 100%
     );
-    background-repeat: no-repeat;
-    background-size: 200% 100%;
     animation: skeleton-shimmer 2s linear infinite;
+    animation-delay: var(--mdc-skeleton-animation-delay);
   }
 
   @media (prefers-reduced-motion: reduce) {
-    :host([motion]) {
+    :host([motion])::before {
       animation: none;
-      background-position: 50% 0;
+      transform: translateX(-25%);
     }
   }
 
   @keyframes skeleton-shimmer {
     0% {
-      background-position: 200% 0;
+      transform: translateX(-100%);
     }
 
     100% {
-      background-position: -200% 0;
+      transform: translateX(100%);
     }
   }