{"version":3,"names":["prestoSkeletonCss","PrestoPlayerSkeletonStyle0","PrestoSkeleton","render","h","key","part","class","skeleton","this","effect"],"sources":["src/components/ui/presto-skeleton/presto-skeleton.scss?tag=presto-player-skeleton&encapsulation=shadow","src/components/ui/presto-skeleton/presto-skeleton.tsx"],"sourcesContent":[":host {\n  position: relative;\n  box-sizing: border-box;\n\n  & *,\n  & *:before,\n  & *:after {\n    box-sizing: inherit;\n  }\n}\n\n/**\n * @prop --border-radius: The skeleton's border radius.\n * @prop --color: The color of the skeleton.\n * @prop --sheen-color: The sheen color when the skeleton is in its loading state.\n */\n:host {\n  --border-radius: var(--presto-player-border-radius-pill);\n  --color: #e5e7eb;\n  --sheen-color: #f3f4f6;\n\n  display: block;\n  position: relative;\n}\n\n.skeleton {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  min-height: 1rem;\n}\n\n.skeleton__indicator {\n  flex: 1 1 auto;\n  background: var(--color);\n  border-radius: var(--border-radius);\n}\n\n.skeleton--sheen .skeleton__indicator {\n  background: linear-gradient(270deg, var(--sheen-color), var(--color), var(--color), var(--sheen-color));\n  background-size: 400% 100%;\n  background-size: 400% 100%;\n  animation: sheen 8s ease-in-out infinite;\n}\n\n.skeleton--pulse .skeleton__indicator {\n  animation: pulse 2s ease-in-out 0.5s infinite;\n}\n\n@keyframes sheen {\n  0% {\n    background-position: 200% 0;\n  }\n  to {\n    background-position: -200% 0;\n  }\n}\n\n@keyframes pulse {\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.4;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'presto-player-skeleton',\n  styleUrl: 'presto-skeleton.scss',\n  shadow: true,\n})\nexport class PrestoSkeleton {\n  @Prop() effect: 'pulse' | 'sheen' | 'none' = 'sheen';\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        class={{\n          'skeleton': true,\n          'skeleton--pulse': this.effect === 'pulse',\n          'skeleton--sheen': this.effect === 'sheen',\n        }}\n        aria-busy=\"true\"\n        aria-live=\"polite\"\n      >\n        <div part=\"indicator\" class=\"skeleton__indicator\"></div>\n      </div>\n    );\n  }\n}\n"],"mappings":"2CAAA,MAAMA,EAAoB,k1BAC1B,MAAAC,EAAeD,E,MCMFE,EAAc,M,qCACoB,O,CAE7C,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CACEC,KAAK,OACLC,MAAO,CACLC,SAAY,KACZ,kBAAmBC,KAAKC,SAAW,QACnC,kBAAmBD,KAAKC,SAAW,SACpC,YACS,OAAM,YACN,UAEVN,EAAA,OAAAC,IAAA,2CAAKC,KAAK,YAAYC,MAAM,wB"}