@micromag/viewer 0.3.832 → 0.4.4

package/es/styles.css

@@ -0,0 +1,20 @@
+.container{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}.container .icon{display:block;position:relative}.container .icon,.container .label{-webkit-transition:-webkit-transform .3s var(--mm-ease-out-ramp);transition:-webkit-transform .3s var(--mm-ease-out-ramp);transition:transform .3s var(--mm-ease-out-ramp);transition:transform .3s var(--mm-ease-out-ramp),-webkit-transform .3s var(--mm-ease-out-ramp)}.container.asLink{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:var(--mm-primary);cursor:pointer;display:inline-block;font-family:inherit;font-weight:700;padding:0;position:relative}.container.withIcon{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}.container.withIcon .label{margin-left:.5em;-webkit-transform-origin:0 50%;-ms-transform-origin:0 50%;transform-origin:0 50%}.container.withIcon .right{margin-left:.5em}.container.withIcon.icon-right .label{-webkit-transform-origin:100% 50%;-ms-transform-origin:100% 50%;transform-origin:100% 50%}.container.withIconColumns{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}.container.linkDisabled{opacity:.4;pointer-events:none;-webkit-text-decoration:none;text-decoration:none}.container:focus-visible{-webkit-box-shadow:0 0 2px 0 #fff;box-shadow:0 0 2px 0 #fff;-webkit-box-shadow:0 0 2px 0 var(--micromag-focus-color,#fff);box-shadow:0 0 2px 0 var(--micromag-focus-color,#fff);outline:2px solid #000}
+.container{display:inline-block;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:0;color:inherit;cursor:pointer;font-family:inherit;padding:0;-webkit-transform-origin:0 50%;-ms-transform-origin:0 50%;transform-origin:0 50%}.container .label{opacity:.75}@media (hover:hover){.container:hover .icon{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1);-webkit-transition:opacity .3s var(--mm-ease-in-yo),-webkit-transform .3s var(--mm-ease-in-yo);transition:opacity .3s var(--mm-ease-in-yo),-webkit-transform .3s var(--mm-ease-in-yo);transition:transform .3s var(--mm-ease-in-yo),opacity .3s var(--mm-ease-in-yo);transition:transform .3s var(--mm-ease-in-yo),opacity .3s var(--mm-ease-in-yo),-webkit-transform .3s var(--mm-ease-in-yo)}.container:hover .label{opacity:1;-webkit-transition:opacity .3s var(--mm-ease-in-yo);transition:opacity .3s var(--mm-ease-in-yo)}}.container:focus-visible{-webkit-box-shadow:0 0 0 2px #fff;box-shadow:0 0 0 2px #fff;-webkit-box-shadow:0 0 0 2px var(--micromag-focus-color,#fff);box-shadow:0 0 0 2px var(--micromag-focus-color,#fff)}.container:active .icon,.container:active .label{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);-webkit-transition:-webkit-transform .3s var(--mm-ease-in-kickback);transition:-webkit-transform .3s var(--mm-ease-in-kickback);transition:transform .3s var(--mm-ease-in-kickback);transition:transform .3s var(--mm-ease-in-kickback),-webkit-transform .3s var(--mm-ease-in-kickback)}.label{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.icon svg{display:block;height:auto;width:1rem}
+.container{overflow:hidden;position:relative}.normal{position:relative}.toggled{left:0;position:absolute;top:0;white-space:nowrap}
+.container{color:var(--mm-white)}.heightContainer{overflow:hidden;z-index:2}.backdrop,.heightContainer{height:100%;left:0;position:absolute;top:0;width:100%}.backdrop{-webkit-backdrop-filter:blur(.75rem);backdrop-filter:blur(.75rem);background-color:rgba(28,28,28,.75);z-index:1}
+.container{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;-ms-flex:1 1;flex:1 1;font-family:inherit;padding:0}.container,.container .dot{display:block;position:relative;width:100%}.container .dot{background-color:hsla(0,0%,100%,.45);height:2px;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transition:-webkit-transform .3s var(--mm-ease-in-bump);transition:-webkit-transform .3s var(--mm-ease-in-bump);transition:transform .3s var(--mm-ease-in-bump);transition:transform .3s var(--mm-ease-in-bump),-webkit-transform .3s var(--mm-ease-in-bump)}.container .progress{height:100%;left:0;position:absolute;top:0;-webkit-transform-origin:0 50%;-ms-transform-origin:0 50%;transform-origin:0 50%;width:100%}.container.vertical .dot{height:100%;width:2px}.container:active .dot,.container:focus-visible .dot{-webkit-transform:scaleY(1.5);-ms-transform:scaleY(1.5);transform:scaleY(1.5)}@media (hover:hover){.container:hover .dot{background-color:var(--mm-white)!important;-webkit-transform:scaleY(1.5);-ms-transform:scaleY(1.5);transform:scaleY(1.5)}}
+.container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;position:relative;width:100%;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}.container .dot{margin:0 2px;padding:5px 0 15px}.container .dot:first-child{margin-left:2px}.container .dot:last-child{margin-right:2px}.container.withButtons .dot{padding:10px 0}.container .closeButton{display:inline-block;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;font-family:inherit;padding:0 2px 0 8px}.container .closeButton:focus-visible{outline:3px solid var(--mm-purple);outline-offset:4px}.container .buttons{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding-left:8px;padding-right:2px}.container.vertical{background:transparent}.container.vertical,.container.vertical .items{-ms-flex-direction:column;flex-direction:column}.container.vertical .items{height:100%;width:auto}
+.container{-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}.container,.link{display:-ms-flexbox;display:flex}.link{color:inherit;-webkit-text-decoration:none;text-decoration:none}.text{display:inline-block;font-size:12px;padding:0 10px 0 0;text-align:right}.icon{max-width:140px;width:100%}
+.container{height:0;position:relative;width:100%}.button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0 solid transparent;border-radius:.45rem;bottom:0;color:inherit;cursor:pointer;display:inline-block;display:block;font-family:inherit;height:100%;left:0;padding:0;position:absolute;right:0;top:0;-webkit-transition:border-width .4s var(--mm-ease-in-bump);transition:border-width .4s var(--mm-ease-in-bump);width:100%;z-index:2}.button:focus-visible{-webkit-box-shadow:0 0 1px 1px #fff;box-shadow:0 0 1px 1px #fff;-webkit-box-shadow:0 0 1px 1px var(--micromag-focus-color,#fff);box-shadow:0 0 1px 1px var(--micromag-focus-color,#fff);outline:.15rem solid #fff;outline:.15rem solid var(--micromag-focus-color,#fff)}.isCurrent .button{border-color:#fff;border-color:var(--micromag-focus-color,#fff);border-width:.2rem}@media (hover:hover){.isCurrent .button:hover{border:.25rem solid #fff;border:.25rem solid var(--micromag-focus-color,#fff)}}@media (hover:hover){.button:hover{border:.1rem solid #fff;border:.1rem solid var(--micromag-focus-color,#fff)}}.inner{pointer-events:none;z-index:1}.subScreenBadge{bottom:.25rem;font-size:.9rem;font-weight:700;pointer-events:none;position:absolute;right:.25rem;z-index:2}.subScreenCount{color:var(--mm-gray-800);left:50%;letter-spacing:-.05rem;position:absolute;text-align:center;top:50%;-webkit-transform:translate(-50%,-50%) translate(-.1rem,-.1rem);-ms-transform:translate(-50%,-50%) translate(-.1rem,-.1rem);transform:translate(-50%,-50%) translate(-.1rem,-.1rem);z-index:2}.subScreenIcon{fill:var(--mm-white);height:auto;position:relative;width:1.15rem;z-index:1}.screen{-webkit-animation:intro .5s 50ms 1 forwards var(--mm-ease-in-out-sine);animation:intro .5s 50ms 1 forwards var(--mm-ease-in-out-sine);border-radius:.45rem;opacity:0;overflow:hidden}@-webkit-keyframes pulse{0%{border-width:.1rem}to{border-width:.25rem}}@keyframes pulse{0%{border-width:.1rem}to{border-width:.25rem}}@-webkit-keyframes intro{to{opacity:1}}@keyframes intro{to{opacity:1}}
+.container{background-position:50%;background-repeat:no-repeat;background-size:cover;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-touch-action:none;touch-action:none}.container.disabled .screenButton{pointer-events:none}.content{height:100%;max-height:100%;position:relative;-ms-flex-positive:1;flex-grow:1}.scroll{height:100%;left:0;position:absolute;top:0;width:100%}.scrollee{min-height:100svh;position:relative;width:100%}.buttons{display:-ms-flexbox;display:flex;position:relative;z-index:3;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center}.organisation{height:30px;width:30px;-ms-flex-negative:0;background-color:#fff;background-position:50%;background-repeat:no-repeat;background-size:contain;border-radius:50%;flex-shrink:0;margin-right:10px}.icon{display:block;height:auto;width:1rem}.titleContainer{padding:10px 80px;text-align:center;width:100%}.headerContainer{position:relative;width:100%}.badge{border-color:#fff;color:#fff;margin:0 auto 10px}.badge,.title{display:inline-block}.title{font-family:Helvetica,Arial,sans-serif;font-size:24px;margin:0 auto;max-width:500px;text-align:center}.nav{overflow:hidden;position:relative;-ms-flex-positive:1;flex-grow:1;padding:10px}.item,.items{list-style:none;margin:0;padding:0}.items{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:.75rem!important}.item,.items{position:relative}.item{width:33.333%}.inner{padding:2px}.frame{background-color:var(--mm-gray-800);height:0;width:100%}.frame,.screen{border-radius:.45rem}.screen{-webkit-animation:intro 1s 50ms 1 forwards var(--mm-ease-in-out-sine);animation:intro 1s 50ms 1 forwards var(--mm-ease-in-out-sine);-webkit-box-shadow:0 0 2px var(--mm-black);box-shadow:0 0 2px var(--mm-black);content-visibility:auto;opacity:0}.micromagBrandingSeparator{height:65px;width:100%}.micromagBrandingContainer{bottom:0;padding:10px;position:absolute;width:100%}@-webkit-keyframes intro{to{opacity:1}}@keyframes intro{to{opacity:1}}
+.container{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:start;justify-content:flex-start}.container .title{font-family:Helvetica,Arial,sans-serif!important;font-size:1.1rem!important;font-weight:700;margin-bottom:.25rem}.cover{overflow:hidden;-ms-flex-negative:0;flex-shrink:0;margin-right:.5rem}.info{white-space:normal}.url{font-size:.75rem;margin:.5rem 0}
+.container{background-position:50%;background-repeat:no-repeat;background-size:cover;-ms-touch-action:none;touch-action:none}.container.disabled .button{pointer-events:none}.content{height:100%;max-height:100%;position:relative;-ms-flex-positive:1;flex-grow:1}.scroll{height:100%;left:0;position:absolute;top:0;width:100%}.inner{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:0 auto;max-width:500px;padding:10px;position:relative}.organisation{height:30px;width:30px;-ms-flex-negative:0;background-color:#fff;background-position:50%;background-repeat:no-repeat;background-size:contain;border-radius:50%;flex-shrink:0;margin-right:10px}.icon{display:block;height:auto;width:1rem}.header{background-color:rgba(0,0,0,.15);border-radius:.5rem;margin:.5rem 0;max-width:600px;padding:.5rem}.mode{margin-top:.5rem}.mode label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-size:14px;line-height:1.4;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mode input{animation:bump .5s 1 var(--mm-ease-in-out-sine) alternate-reverse forwards;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:2px solid var(--mm-white);border-radius:4px;height:1rem;margin-right:.5rem;-webkit-transition:-webkit-transform .3s var(--mm-ease-out-ramp);transition:-webkit-transform .3s var(--mm-ease-out-ramp);transition:transform .3s var(--mm-ease-out-ramp);transition:transform .3s var(--mm-ease-out-ramp),-webkit-transform .3s var(--mm-ease-out-ramp);width:1rem}.mode input:active{-webkit-transform:scale(1.3);-ms-transform:scale(1.3);transform:scale(1.3);-webkit-transition:-webkit-transform .3s var(--mm-ease-in-kickback);transition:-webkit-transform .3s var(--mm-ease-in-kickback);transition:transform .3s var(--mm-ease-in-kickback);transition:transform .3s var(--mm-ease-in-kickback),-webkit-transform .3s var(--mm-ease-in-kickback)}.mode input:checked{background-color:var(--mm-white)}.options{margin-bottom:3rem}
+.container{background-color:var(--mm-black);color:var(--mm-white);font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;height:100%;line-height:1.1;overflow:hidden;position:relative;width:100%}.container *,.container :after,.container :before{-webkit-box-sizing:border-box;box-sizing:border-box}.container address,.container blockquote,.container caption,.container dl,.container figure,.container h1,.container h2,.container h3,.container h4,.container h5,.container h6,.container label,.container legend,.container li,.container ol,.container p,.container pre,.container ul{margin:0;padding:0}.container h1,.container h2,.container h3,.container h4,.container h5,.container h6,.container li,.container p{font-weight:inherit}.container .mark,.container mark{color:inherit}.container.landscape .screensFrame{bottom:0;left:50%;margin:auto;top:0;-webkit-transform:translate(-50%);-ms-transform:translate(-50%);transform:translate(-50%)}.container.hideMenu .dots,.container.hideMenu .menuNavContainer,.container.hideMenu .menuTopContainer{opacity:0;pointer-events:none}.container.disableMenu .dots,.container.disableMenu .menuNavContainer,.container.disableMenu .menuTopContainer{pointer-events:none}.content{cursor:-webkit-grab;cursor:grab;height:100%;overflow:hidden;position:absolute;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;z-index:1}.content:active{cursor:-webkit-grabbing;cursor:grabbing}.withoutGestures .content{cursor:inherit}.ariaAnnouncement{height:1px;overflow:hidden;position:absolute;width:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.accessibilityLinks{background:rgba(0,0,0,.75);border-radius:4px;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:10px;left:10px;opacity:0;padding:10px;position:absolute;top:60px;-webkit-transition:opacity .2s var(--mm-ease-in-out-sine);transition:opacity .2s var(--mm-ease-in-out-sine);z-index:2}.accessibilityLinks:focus-visible,.accessibilityLinks:focus-within{opacity:1}.accessibilityLinks .accessibilityButton{color:var(--mm-white);opacity:.75;padding:4px;-webkit-transition:opacity .5s var(--mm-ease-in-out-sine);transition:opacity .5s var(--mm-ease-in-out-sine)}.accessibilityLinks .accessibilityButton:focus,.accessibilityLinks .accessibilityButton:hover{opacity:1}.accessibilityLinks .accessibilityButton.disabled{opacity:.75}.accessibilityLinks .tooltip{font-size:.85rem}.menuNavContainer{contain:content;position:absolute;top:0;-ms-touch-action:none;touch-action:none;-webkit-transition:opacity .5s var(--mm-ease-in-out-sine),background-image .5s var(--mm-ease-in-out-sine);transition:opacity .5s var(--mm-ease-in-out-sine),background-image .5s var(--mm-ease-in-out-sine);width:100%;z-index:4}.fadeMenu .menuNavContainer{opacity:.25}.menuNavContainer.withShadow{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.75)),to(rgba(0,0,0,0)));background-image:linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,0))}.fadeMenu .menuNavContainer.withShadow{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,0)));background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0))}.menuNavContainer.isOpened{opacity:1}.menuNavContainer.isOpened .dots{opacity:0;pointer-events:none}.menuNavContainer.isOpened.withShadow{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.75)),to(rgba(0,0,0,0)));background-image:linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,0))}.menuTopContainer{-webkit-transition:opacity .2s var(--mm-ease-in-out-sine);transition:opacity .2s var(--mm-ease-in-out-sine)}.menuItem,.menuTopContainer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.menuItem{-ms-flex-positive:1;flex-grow:1;font-size:8px;-ms-touch-action:none;touch-action:none}.menuItem:last-child{-ms-flex-pack:end;justify-content:flex-end}.menuButton{font-size:12px;padding:8px 10px}.menuButton:focus-visible{outline:2px solid #fff!important;outline:2px solid var(--micromag-focus-color,#fff)!important;outline-offset:-2px!important}.slidingButton{display:inline-block}.screensMenuButtonToggled{left:auto;right:0}.dots{padding:0 8px;position:relative;top:-5px;-webkit-transition:opacity .3s var(--mm-ease-out-ramp);transition:opacity .3s var(--mm-ease-out-ramp);z-index:3}.hideMenu .dots{pointer-events:none}.menuContainer{z-index:3}.menuContainer,.menuPreview,.menuShare{contain:size layout style paint;height:100%;left:0;position:absolute;top:0;width:100%}.menuPreview,.menuShare{z-index:4}.navButton{border:0;opacity:0;pointer-events:none;position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:opacity .2s var(--mm-ease-in-out-sine);transition:opacity .2s var(--mm-ease-in-out-sine);z-index:3}.navButton.previous{left:1.5em}.navButton.next{right:1.5em}.navButton:focus-visible{opacity:1}@media screen and (min-width:1024px){.navButton{display:block;opacity:1;pointer-events:all;visibility:visible}}.screensFrame{-ms-touch-action:none;touch-action:none;z-index:1}.screenContainer,.screensFrame{height:100%;left:0;position:absolute;top:0;width:100%}.screenContainer{background-color:var(--mm-gray-800);contain:size layout style paint;display:-ms-flexbox;display:flex}.screenContainer:focus-visible{outline:3px solid var(--mm-purple);outline-offset:4px}.screen{display:none;pointer-events:none}.preload .screen{contain-intrinsic-size:auto 100vw auto 100vh;content-visibility:auto;display:block}.visible .screen{content-visibility:visible;display:block}.current .screen{pointer-events:auto}.playbackControls{bottom:0;left:0;pointer-events:none;position:absolute;width:100%;z-index:2}.navigationHint{position:absolute;right:5%;top:70%;z-index:2}.webView{z-index:10}.shareIncentiveContainer{left:10px;pointer-events:none;position:absolute;top:0;width:calc(100% - 20px);z-index:1}.shareIncentive{display:inline-block;opacity:0;pointer-events:auto;-webkit-transform:translateY(-10px);-ms-transform:translateY(-10px);transform:translateY(-10px);-webkit-transition:opacity .3s cubic-bezier(.9,0,.2,1),-webkit-transform .3s cubic-bezier(.9,0,.2,1);transition:opacity .3s cubic-bezier(.9,0,.2,1),-webkit-transform .3s cubic-bezier(.9,0,.2,1);transition:opacity .3s cubic-bezier(.9,0,.2,1),transform .3s cubic-bezier(.9,0,.2,1);transition:opacity .3s cubic-bezier(.9,0,.2,1),transform .3s cubic-bezier(.9,0,.2,1),-webkit-transform .3s cubic-bezier(.9,0,.2,1)}.shareIncentiveVisible .shareIncentive{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);-webkit-transition:opacity .3s cubic-bezier(.25,2,.2,1) .5s,-webkit-transform .3s cubic-bezier(.25,2,.2,1) .5s;transition:opacity .3s cubic-bezier(.25,2,.2,1) .5s,-webkit-transform .3s cubic-bezier(.25,2,.2,1) .5s;transition:opacity .3s cubic-bezier(.25,2,.2,1) .5s,transform .3s cubic-bezier(.25,2,.2,1) .5s;transition:opacity .3s cubic-bezier(.25,2,.2,1) .5s,transform .3s cubic-bezier(.25,2,.2,1) .5s,-webkit-transform .3s cubic-bezier(.25,2,.2,1) .5s}
+.container{height:100%;position:relative;width:100%}.inner{background-color:var(--mm-gray-800);-webkit-transition:opacity .3s var(--mm-ease-in-out-soft-sine);transition:opacity .3s var(--mm-ease-in-out-soft-sine)}.navigationHint{position:absolute;right:10%;top:50%}
+.container{padding:4px 10px}.arrow{height:auto;width:1rem}.next .arrow{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.previous .arrow{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}
+.container.withoutShadow .inner:after{opacity:0}@media screen and (min-width:1024px){.container{display:none}}.inner:after{-webkit-animation-delay:.1s;animation-delay:.1s;-webkit-animation-direction:alternate;animation-direction:alternate;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:shadowFade;animation-name:shadowFade;-webkit-animation-timing-function:var(--mm-ease-in-out-soft-sine);animation-timing-function:var(--mm-ease-in-out-soft-sine);background-image:radial-gradient(rgba(28,28,28,.5),rgba(28,28,28,0) 50%);content:"";height:0;left:50%;padding-bottom:1000%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:1000%;z-index:1}.arrow{-webkit-animation-direction:alternate;animation-direction:alternate;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:panX;animation-name:panX;-webkit-animation-timing-function:var(--mm-ease-in-out-soft-sine);animation-timing-function:var(--mm-ease-in-out-soft-sine);height:auto;position:relative;width:1.5rem;z-index:2}@-webkit-keyframes panX{0%{-webkit-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(-1rem);transform:translateX(-1rem)}}@keyframes panX{0%{-webkit-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(-1rem);transform:translateX(-1rem)}}@-webkit-keyframes shadowFade{0%{-webkit-transform:translate(-50%,-50%) translateY(0) scale(.75);transform:translate(-50%,-50%) translateY(0) scale(.75)}to{-webkit-transform:translate(-50%,-50%) translateX(-1rem) scale(1.25);transform:translate(-50%,-50%) translateX(-1rem) scale(1.25)}}@keyframes shadowFade{0%{-webkit-transform:translate(-50%,-50%) translateY(0) scale(.75);transform:translate(-50%,-50%) translateY(0) scale(.75)}to{-webkit-transform:translate(-50%,-50%) translateX(-1rem) scale(1.25);transform:translate(-50%,-50%) translateX(-1rem) scale(1.25)}}
+.container .circle{-webkit-animation-duration:1.2s;animation-duration:1.2s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-timing-function:linear;animation-timing-function:linear;border:1px solid #fff;border-radius:50%;height:21px;left:0;position:absolute;top:-10px;width:21px;z-index:2}.container .hand{-webkit-animation-direction:alternate;animation-direction:alternate;-webkit-animation-duration:.6s;animation-duration:.6s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:panY;animation-name:panY;-webkit-animation-timing-function:ease;animation-timing-function:ease;height:auto;position:relative;width:30px;z-index:2}.container.withoutShadow .inner:after{opacity:0}@media screen and (min-width:1024px){.container{display:none}}.inner:after{-webkit-animation-delay:.05s;animation-delay:.05s;-webkit-animation-direction:alternate;animation-direction:alternate;-webkit-animation-duration:.6s;animation-duration:.6s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:shadowFade;animation-name:shadowFade;-webkit-animation-timing-function:ease;animation-timing-function:ease;background-image:radial-gradient(rgba(28,28,28,.5),rgba(28,28,28,0) 60%);content:"";height:500%;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:600%;z-index:1}@-webkit-keyframes pulse{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}50%{opacity:.5;-webkit-transform:scale(1.5);transform:scale(1.5)}to{opacity:0;-webkit-transform:scale(2);transform:scale(2)}}@keyframes pulse{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}50%{opacity:.5;-webkit-transform:scale(1.5);transform:scale(1.5)}to{opacity:0;-webkit-transform:scale(2);transform:scale(2)}}@-webkit-keyframes panY{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(10px);transform:translateY(10px)}}@keyframes panY{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(10px);transform:translateY(10px)}}@-webkit-keyframes shadowFade{0%{-webkit-transform:translate(-50%,-50%) translateY(0);transform:translate(-50%,-50%) translateY(0)}to{-webkit-transform:translate(-50%,-50%) translateY(10px);transform:translate(-50%,-50%) translateY(10px)}}@keyframes shadowFade{0%{-webkit-transform:translate(-50%,-50%) translateY(0);transform:translate(-50%,-50%) translateY(0)}to{-webkit-transform:translate(-50%,-50%) translateY(10px);transform:translate(-50%,-50%) translateY(10px)}}
+.inner{position:relative;-ms-flex-positive:1;flex-grow:1}.progressBarContainer{height:.16rem;position:relative}.progressBar{background-color:var(--mm-white);opacity:.5}.progress,.progressBar,.track{height:100%;position:absolute;width:100%}.progress,.track{left:0;top:0}.progress{position:relative;-webkit-transform-origin:left center;-ms-transform-origin:left center;transform-origin:left center}.playHead,.progress{background-color:var(--mm-white)}.playHead{border-radius:50%;height:.75rem;left:0;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%) scale(0);-ms-transform:translate(-50%,-50%) scale(0);transform:translate(-50%,-50%) scale(0);-webkit-transition:-webkit-transform .5s var(--mm-ease-in-bump);transition:-webkit-transform .5s var(--mm-ease-in-bump);transition:transform .5s var(--mm-ease-in-bump);transition:transform .5s var(--mm-ease-in-bump),-webkit-transform .5s var(--mm-ease-in-bump);width:.75rem}@media (hover:hover){.withSeekHead:hover .playHead{-webkit-transform:translate(-50%,-50%) scale(1);-ms-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}}.withSeekHead:focus-within .playHead{-webkit-transform:translate(-50%,-50%) scale(1);-ms-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}.scrubbedTime{background-color:var(--mm-white);border-radius:4px;border-style:solid;border-width:2px;bottom:100%;color:var(--mm-black);font-size:1.1rem;font-weight:700;left:50%;line-height:1;opacity:0;padding:.4rem .5rem .25rem;position:absolute;-webkit-transform:translate(-50%);-ms-transform:translate(-50%);transform:translate(-50%);-webkit-transition:opacity .5s var(--mm-ease-in-bump),-webkit-transform .5s var(--mm-ease-in-bump);transition:opacity .5s var(--mm-ease-in-bump),-webkit-transform .5s var(--mm-ease-in-bump);transition:opacity .5s var(--mm-ease-in-bump),transform .5s var(--mm-ease-in-bump);transition:opacity .5s var(--mm-ease-in-bump),transform .5s var(--mm-ease-in-bump),-webkit-transform .5s var(--mm-ease-in-bump);z-index:2}.showTimestamp .scrubbedTime{opacity:1;-webkit-transform:translate(-50%,-.5rem);-ms-transform:translate(-50%,-.5rem);transform:translate(-50%,-.5rem)}.track{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;background-color:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;height:5rem;left:0;padding:0;position:absolute;right:0;-ms-touch-action:none;touch-action:none;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.withSeekHead .track{display:block}.track:focus-visible{-webkit-box-shadow:0 0 2px 2px #fff;box-shadow:0 0 2px 2px #fff;-webkit-box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff);box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff)}
+.container{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;pointer-events:none}.container,.muteButton,.playPauseButton{position:relative;-ms-flex-align:center;align-items:center}.muteButton,.playPauseButton{display:inline-block;display:-ms-flexbox;display:flex;z-index:2;-ms-flex-pack:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;font-family:inherit;justify-content:center;padding:1rem;pointer-events:auto;-webkit-transition:opacity .5s var(--mm-ease-in-out-sine);transition:opacity .5s var(--mm-ease-in-out-sine)}.icon{color:currentcolor;display:block;height:auto;max-height:1.5rem;position:relative;width:1.5rem;z-index:1}.icon.offset{left:.13rem}.spinner{color:currentcolor;display:block;max-height:2rem;position:relative;width:2rem;z-index:1}.spinner.offset{left:-.5rem}.playPauseButton{opacity:0;pointer-events:none;-webkit-transition:opacity .5s var(--mm-ease-in-out-sine);transition:opacity .5s var(--mm-ease-in-out-sine)}.withPlayPause .playPauseButton,.withSuggestPlay .playPauseButton{opacity:1;pointer-events:auto}.withPlayPause.isCollapsed .playPauseButton{opacity:.25}.playPauseButton.loading{opacity:1}.playPauseButton.hidden{opacity:0}.playPauseButton:focus-visible{-webkit-box-shadow:0 0 2px 2px #fff;box-shadow:0 0 2px 2px #fff;-webkit-box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff);box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff)}.suggest{display:-ms-flexbox;display:flex;left:50%;position:fixed!important;top:50%;z-index:2;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:2px solid;border-radius:50%;color:inherit;cursor:pointer;font-family:inherit;justify-content:center;opacity:1;padding:1rem;pointer-events:auto;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0);-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transition:opacity .5s var(--mm-ease-in-out-sine);transition:opacity .5s var(--mm-ease-in-out-sine)}.suggest.notPlaying svg{margin-left:2px}.suggest.loading{opacity:1}.suggest.hidden{opacity:0}.muteButton{opacity:0;pointer-events:none}.muteButton.isMuted:after{background-color:currentcolor;content:"";height:100%;left:50%;margin-left:-1px;position:absolute;top:0;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);width:2px;z-index:2}.withMute .muteButton{opacity:1;pointer-events:auto}.withSeekBar.withMute.isCollapsed .muteButton{opacity:.25}.withMute.isCollapsed.isMuted .muteButton{opacity:1}.muteButton:focus-visible{-webkit-box-shadow:0 0 2px 2px #fff;box-shadow:0 0 2px 2px #fff;-webkit-box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff);box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff);outline:2px solid #000}.seekBar{bottom:0;left:0;opacity:0;pointer-events:none;position:absolute;-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);-webkit-transition:bottom .2s .2s var(--mm-ease-in-out-sine),padding .2s var(--mm-ease-in-out-sine),-webkit-transform .2s var(--mm-ease-in-out-sine);transition:bottom .2s .2s var(--mm-ease-in-out-sine),padding .2s var(--mm-ease-in-out-sine),-webkit-transform .2s var(--mm-ease-in-out-sine);transition:transform .2s var(--mm-ease-in-out-sine),bottom .2s .2s var(--mm-ease-in-out-sine),padding .2s var(--mm-ease-in-out-sine);transition:transform .2s var(--mm-ease-in-out-sine),bottom .2s .2s var(--mm-ease-in-out-sine),padding .2s var(--mm-ease-in-out-sine),-webkit-transform .2s var(--mm-ease-in-out-sine);width:100%;z-index:1}.withSeekBarOnly .seekBar{bottom:0;opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.withSeekBar.withPlayPause .seekBar{bottom:50%;opacity:1;padding:0 3rem;pointer-events:auto;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%)}.isCollapsed .seekBar,.isCollapsed.withSeekBar .seekBar{bottom:0;padding:0;-webkit-transition:bottom .5s var(--mm-ease-in-out-sine),padding .5s .25s var(--mm-ease-in-out-sine),-webkit-transform .5s var(--mm-ease-in-out-sine);transition:bottom .5s var(--mm-ease-in-out-sine),padding .5s .25s var(--mm-ease-in-out-sine),-webkit-transform .5s var(--mm-ease-in-out-sine);transition:transform .5s var(--mm-ease-in-out-sine),bottom .5s var(--mm-ease-in-out-sine),padding .5s .25s var(--mm-ease-in-out-sine);transition:transform .5s var(--mm-ease-in-out-sine),bottom .5s var(--mm-ease-in-out-sine),padding .5s .25s var(--mm-ease-in-out-sine),-webkit-transform .5s var(--mm-ease-in-out-sine)}.isCollapsed.withSeekBar .seekBar{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.seekBar:focus-visible:focus-within{-webkit-box-shadow:0 0 2px 2px #fff;box-shadow:0 0 2px 2px #fff;-webkit-box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff);box-shadow:0 0 2px 2px var(--micromag-focus-color,#fff)}.withMute .muteButton{position:relative}.withMute .muteButton:before{background-color:transparent;background-image:radial-gradient(circle at bottom right,rgba(28,28,28,.3) 0,rgba(28,28,28,0) 50%);bottom:-10px;content:"";display:block;height:300%;pointer-events:none;position:absolute;right:-10px;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:300%;z-index:-1}.withMute.isCollapsed .muteButton:before{opacity:1}.withMute.withSeekBar .muteButton:before{opacity:0}.withMute.withSeekBar.isCollapsed .muteButton:before{opacity:1}.withMute.withSeekBar.withoutShadow .muteButton:before{opacity:0}.withMute.withoutShadow .muteButton:before{opacity:0}.withPlayPause .playPauseButton{position:relative}.withPlayPause .playPauseButton:before{background-color:transparent;background-image:radial-gradient(circle at bottom left,rgba(28,28,28,.3) 0,rgba(28,28,28,0) 50%);bottom:-10px;content:"";display:block;height:300%;left:-10px;pointer-events:none;position:absolute;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:300%;z-index:-1}.withPlayPause.isCollapsed .playPauseButton:before{opacity:.5}.withPlayPause.withSeekBar .playPauseButton:before{opacity:0}.withPlayPause.withSeekBar.isCollapsed .playPauseButton:before{opacity:.5}.withPlayPause.withSeekBar.withoutShadow .playPauseButton:before{opacity:0}.withPlayPause.withoutShadow .playPauseButton:before{opacity:0}.withSeekBar:after{background-image:-webkit-gradient(linear,left top,left bottom,color-stop(40%,rgba(28,28,28,0)),to(rgba(28,28,28,.4)));background-image:linear-gradient(180deg,rgba(28,28,28,0) 40%,rgba(28,28,28,.4));bottom:0;content:"";display:block;height:150px;left:0;pointer-events:none;position:absolute;-webkit-transition:-webkit-transform .2s ease-in-out;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out,-webkit-transform .2s ease-in-out;width:100%;z-index:-1}.withSeekBar.isCollapsed:after{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%)}.withSeekBar.withoutShadow:after{background-image:none}.withSuggestPlay .muteButton,.withSuggestPlay .playPauseButton,.withSuggestPlay .seekBar{opacity:.25!important}.withSuggestPlay .suggest{opacity:1}
+.container{left:50%;position:absolute;top:0;-webkit-transform:translate(-50%,100%);-ms-transform:translate(-50%,100%);transform:translate(-50%,100%);-webkit-transition:-webkit-transform .5s ease-in-out;transition:-webkit-transform .5s ease-in-out;transition:transform .5s ease-in-out;transition:transform .5s ease-in-out,-webkit-transform .5s ease-in-out}.container,.container .focusLock{height:100%;width:100%}.container.opened{-webkit-transform:translate(-50%);-ms-transform:translate(-50%);transform:translate(-50%)}.container.opened .webView{background-color:var(--mm-gray-800)}
+@import "@micromag/elements/assets/css/styles.css";@import "@micromag/screens/assets/css/styles.css";.sr-only:not(:focus):not(:active){height:1px;overflow:hidden;position:absolute;width:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/viewer",
-    "version": "0.3.832",
+    "version": "0.4.4",
     "private": false,
     "description": "",
     "keywords": [
@@ -35,54 +35,51 @@
     "style": "assets/css/styles.css",
     "exports": {
         ".": {
+            "types": "./es/index.d.ts",
             "import": "./es/index.js"
         },
-        "./scss/styles": "./scss/styles.scss",
-        "./scss/styles.scss": "./scss/styles.scss",
         "./assets/css/styles": "./assets/css/styles.css",
         "./assets/css/styles.css": "./assets/css/styles.css"
     },
     "files": [
         "lib",
         "es",
-        "assets",
-        "scss"
+        "assets"
     ],
     "scripts": {
-        "clean": "rm -rf es && rm -rf lib && rm -rf assets && rm -rf scss",
+        "clean": "rm -rf es && rm -rf lib && rm -rf assets",
         "prepublishOnly": "npm run build",
-        "build": "../../scripts/prepare-package.sh --scss"
+        "build": "../../scripts/prepare-package.sh --types"
     },
     "devDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+        "react": "^19.2.0",
+        "react-dom": "^18.3.0 || ^19.0.0"
     },
     "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+        "react": "^19.2.0",
+        "react-dom": "^18.3.0 || ^19.0.0"
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
         "@folklore/routes": "^0.2.36",
-        "@micromag/core": "^0.3.832",
-        "@micromag/element-badge": "^0.3.832",
-        "@micromag/element-scroll": "^0.3.832",
-        "@micromag/element-share-options": "^0.3.832",
-        "@micromag/element-webview": "^0.3.832",
-        "@micromag/elements": "^0.3.832",
-        "@micromag/intl": "^0.3.832",
-        "@micromag/screens": "^0.3.832",
-        "@react-spring/core": "^9.6.1",
-        "@react-spring/web": "^9.6.1",
+        "@micromag/core": "^0.4.4",
+        "@micromag/element-badge": "^0.4.4",
+        "@micromag/element-scroll": "^0.4.4",
+        "@micromag/element-share-options": "^0.4.4",
+        "@micromag/element-webview": "^0.4.4",
+        "@micromag/elements": "^0.4.4",
+        "@micromag/intl": "^0.4.4",
+        "@micromag/screens": "^0.4.4",
+        "@react-spring/core": "^10.0.3",
+        "@react-spring/web": "^10.0.3",
         "@use-gesture/react": "^10.3.0",
         "classnames": "^2.2.6",
         "detect-pointer-events": "^1.0.2",
-        "lodash": "^4.17.21",
-        "prop-types": "^15.7.2",
+        "lodash": "^4.17.23",
         "query-string": "^9.1.1",
         "react-focus-lock": "^2.11.2",
         "react-helmet": "^6.1.0",
-        "react-intl": "^6.6.4",
+        "react-intl": "^8.1.3",
         "react-share": "^5.1.0",
         "wolfy87-eventemitter": "^5.2.9",
         "wouter": "^3.0.0"
@@ -91,5 +88,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "4969d64e304334cfd47321e624e5914e0694c55f"
+    "gitHead": "04b8519c3a3ddace5a21497e22faa11865d57f6d",
+    "types": "es/index.d.ts"
 }

package/scss/styles.scss

@@ -1 +0,0 @@
-@import '~@micromag/viewer/assets/css/styles.css';