@king-design/vue 3.8.0-beta.0 → 3.8.0-beta.2

package/components/media/index.spec.js

@@ -6,9 +6,11 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/con
 import { Component } from 'intact-vue-next';
 import { dispatchEvent, getElement, mount, unmount, wait } from '../../test/utils';
 import { Media, MediaGroup } from '.';
+import { setTheme } from '../../styles/theme';
 describe('Media', function () {
   afterEach(function () {
     unmount();
+    setTheme({});
   });
   function expectViewerClosed() {
     var viewer = document.querySelector('.k-media-viewer');
@@ -70,13 +72,14 @@ describe('Media', function () {
           expect(element.querySelector('.k-media-video')).not.to.eql(null);
           expect(element.querySelector('.k-media-audio-loader')).not.to.eql(null);
           expect(element.querySelector('.k-media-audio-card')).not.to.eql(null);
+          expect(getComputedStyle(element.querySelector('.k-media-audio-card')).backgroundColor).to.eql('rgb(243, 245, 246)');
           expect(element.querySelector('.k-media-audio-card-icon').src).to.contain('data:image/svg+xml');
           expect(element.querySelector('.k-media-audio-card-name')).to.eql(null);
           expect(element.querySelectorAll('.k-media-loading').length).to.eql(3);
           expect(element.querySelectorAll('.k-media-loading-indicator').length).to.eql(3);
           expect(element.querySelectorAll('.k-media-loading-spinner').length).to.eql(3);
           expect(element.querySelector('.k-media-status-layer')).to.eql(null);
-        case 14:
+        case 15:
         case "end":
           return _context2.stop();
       }
@@ -125,9 +128,9 @@ describe('Media', function () {
       }
     }, _callee2);
   })));
-  // 无 poster 的视频需等首帧可用后才进入完成态，默认加载态仍展示播放标识。
-  it('should wait for video frame when poster is absent', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
-    var Demo, _mount3, element, media, video;
+  // 图片完成态展示 Icon 组件内置的可见图标。
+  it('should use visible icon for image preview trigger', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var Demo, _mount3, element, trigger, icon;
     return _regeneratorRuntime.wrap(function _callee3$(_context6) {
       while (1) switch (_context6.prev = _context6.next) {
         case 0:
@@ -145,38 +148,22 @@ describe('Media', function () {
             }
             return Demo;
           }(Component);
-          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        className=\"video-media\"\n                        type=\"video\"\n                        src=\"https://example.com/demo.mp4\"\n                    />\n                </div>\n            ";
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        type=\"image\"\n                        status=\"done\"\n                        src=\"https://example.com/cover.png\"\n                    />\n                </div>\n            ";
           _mount3 = mount(Demo), element = _mount3[1];
-          media = element.querySelector('.video-media');
-          video = element.querySelector('video.k-media-video');
-          expect(video.preload).to.eql('auto');
-          expect(media.className).to.contain('k-media-loading');
-          expect(media.className).not.to.contain('k-media-previewable');
-          expect(media.querySelector('.k-media-overlay')).not.to.eql(null);
-          expect(media.querySelector('.k-media-preview-trigger').disabled).to.eql(true);
-          dispatchMediaEvent(video, 'loadedmetadata');
-          _context6.next = 13;
-          return wait();
-        case 13:
-          expect(media.className).to.contain('k-media-loading');
-          expect(media.className).not.to.contain('k-media-previewable');
-          expect(media.querySelector('.k-media-overlay')).not.to.eql(null);
-          expect(media.querySelector('.k-media-preview-trigger').disabled).to.eql(true);
-          dispatchMediaEvent(video, 'loadeddata');
-          _context6.next = 20;
-          return wait();
-        case 20:
-          expect(media.className).to.contain('k-media-done');
-          expect(media.className).to.contain('k-media-previewable');
-          expect(media.querySelector('.k-media-preview-trigger').disabled).to.eql(false);
-        case 23:
+          trigger = element.querySelector('.k-media-preview-trigger');
+          icon = trigger.querySelector('.k-media-preview-icon');
+          expect(trigger).not.to.eql(null);
+          expect(trigger.title).to.eql('查看图片');
+          expect(icon.className).to.contain('k-icon-visible');
+          expect(icon.className).not.to.contain('ion-ios-eye-outline');
+        case 9:
         case "end":
           return _context6.stop();
       }
     }, _callee3);
   })));
-  // 有 poster 的视频在 metadata 可用后即可展示预览。
-  it('should complete video at metadata when poster is present', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+  // 无 poster 的视频需等首帧可用后才进入完成态，loading 时展示静态播放标识和加载蒙层，不展示播放 hover 入口。
+  it('should wait for video frame when poster is absent', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
     var Demo, _mount4, element, media, video;
     return _regeneratorRuntime.wrap(function _callee4$(_context8) {
       while (1) switch (_context8.prev = _context8.next) {
@@ -195,25 +182,49 @@ describe('Media', function () {
             }
             return Demo;
           }(Component);
-          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        className=\"video-media\"\n                        type=\"video\"\n                        src=\"https://example.com/demo.mp4\"\n                        poster=\"https://example.com/poster.png\"\n                    />\n                </div>\n            ";
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        className=\"video-media\"\n                        type=\"video\"\n                        src=\"https://example.com/demo.mp4\"\n                    />\n                </div>\n            ";
           _mount4 = mount(Demo), element = _mount4[1];
           media = element.querySelector('.video-media');
           video = element.querySelector('video.k-media-video');
-          expect(video.preload).to.eql('metadata');
+          expect(video.preload).to.eql('auto');
+          expect(media.className).to.contain('k-media-loading');
+          expect(media.className).not.to.contain('k-media-previewable');
+          expect(media.querySelector('.k-media-placeholder-asset')).not.to.eql(null);
+          expect(getComputedStyle(video).display).to.eql('none');
+          expect(media.querySelector('.k-media-loading-video-icon')).to.eql(null);
+          expect(media.querySelector('.k-media-loading-overlay')).to.eql(null);
+          expect(media.querySelector('.k-media-overlay')).to.eql(null);
+          expect(media.querySelector('.k-media-preview-trigger')).to.eql(null);
           dispatchMediaEvent(video, 'loadedmetadata');
-          _context8.next = 9;
+          _context8.next = 17;
           return wait();
-        case 9:
+        case 17:
+          expect(media.className).to.contain('k-media-loading');
+          expect(media.className).not.to.contain('k-media-previewable');
+          expect(media.querySelector('.k-media-placeholder-asset')).not.to.eql(null);
+          expect(getComputedStyle(video).display).to.eql('none');
+          expect(media.querySelector('.k-media-loading-video-icon')).to.eql(null);
+          expect(media.querySelector('.k-media-loading-overlay')).to.eql(null);
+          expect(media.querySelector('.k-media-overlay')).to.eql(null);
+          expect(media.querySelector('.k-media-preview-trigger')).to.eql(null);
+          dispatchMediaEvent(video, 'loadeddata');
+          _context8.next = 28;
+          return wait();
+        case 28:
           expect(media.className).to.contain('k-media-done');
-          expect(media.querySelector('.k-media-preview-trigger')).not.to.eql(null);
-        case 11:
+          expect(media.className).to.contain('k-media-previewable');
+          expect(getComputedStyle(video).display).not.to.eql('none');
+          expect(media.querySelector('.k-media-placeholder')).to.eql(null);
+          expect(media.querySelector('.k-media-loading-video-icon')).to.eql(null);
+          expect(media.querySelector('.k-media-preview-trigger').disabled).to.eql(false);
+        case 34:
         case "end":
           return _context8.stop();
       }
     }, _callee4);
   })));
-  // 顶层 src/poster 优先于原生 props 中的同名字段。
-  it('should keep media-level src and poster ahead of native props', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+  // 有 poster 的视频在 metadata 可用后即可展示预览。
+  it('should complete video at metadata when poster is present', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
     var Demo, _mount5, element, media, video;
     return _regeneratorRuntime.wrap(function _callee5$(_context10) {
       while (1) switch (_context10.prev = _context10.next) {
@@ -232,29 +243,26 @@ describe('Media', function () {
             }
             return Demo;
           }(Component);
-          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        className=\"video-media\"\n                        type=\"video\"\n                        src=\"https://example.com/demo.mp4\"\n                        videoProps={{\n                            src: 'https://example.com/native.mp4',\n                            poster: 'https://example.com/native-poster.png',\n                            controls: true,\n                            'data-native': 'video',\n                        }}\n                    />\n                </div>\n            ";
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        className=\"video-media\"\n                        type=\"video\"\n                        src=\"https://example.com/demo.mp4\"\n                        poster=\"https://example.com/poster.png\"\n                    />\n                </div>\n            ";
           _mount5 = mount(Demo), element = _mount5[1];
           media = element.querySelector('.video-media');
           video = element.querySelector('video.k-media-video');
-          expect(video.getAttribute('src')).to.eql('https://example.com/demo.mp4');
-          expect(video.getAttribute('poster')).to.eql(null);
-          expect(video.controls).to.eql(true);
-          expect(video.getAttribute('data-native')).to.eql('video');
-          expect(video.preload).to.eql('auto');
+          expect(video.preload).to.eql('metadata');
           dispatchMediaEvent(video, 'loadedmetadata');
-          _context10.next = 13;
+          _context10.next = 9;
           return wait();
-        case 13:
-          expect(media.className).to.contain('k-media-loading');
-        case 14:
+        case 9:
+          expect(media.className).to.contain('k-media-done');
+          expect(media.querySelector('.k-media-preview-trigger')).not.to.eql(null);
+        case 11:
         case "end":
           return _context10.stop();
       }
     }, _callee5);
   })));
-  // src 变化时重建 video，避免热更新保留旧资源状态。
-  it('should remount video when src changes', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
-    var Demo, _mount6, instance, element, media, firstVideo, nextVideo;
+  // 顶层 src/poster 优先于原生 props 中的同名字段。
+  it('should keep media-level src and poster ahead of native props', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+    var Demo, _mount6, element, media, video;
     return _regeneratorRuntime.wrap(function _callee6$(_context12) {
       while (1) switch (_context12.prev = _context12.next) {
         case 0:
@@ -270,39 +278,31 @@ describe('Media', function () {
               _this6.Media = Media;
               return _this6;
             }
-            Demo.defaults = function defaults() {
-              return {
-                src: 'https://example.com/demo.mp4'
-              };
-            };
             return Demo;
           }(Component);
-          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        className=\"video-media\"\n                        type=\"video\"\n                        src={this.get('src')}\n                    />\n                </div>\n            ";
-          _mount6 = mount(Demo), instance = _mount6[0], element = _mount6[1];
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        className=\"video-media\"\n                        type=\"video\"\n                        src=\"https://example.com/demo.mp4\"\n                        videoProps={{\n                            src: 'https://example.com/native.mp4',\n                            poster: 'https://example.com/native-poster.png',\n                            controls: true,\n                            'data-native': 'video',\n                        }}\n                    />\n                </div>\n            ";
+          _mount6 = mount(Demo), element = _mount6[1];
           media = element.querySelector('.video-media');
-          firstVideo = element.querySelector('video.k-media-video');
-          dispatchMediaEvent(firstVideo, 'loadeddata');
-          _context12.next = 8;
-          return wait();
-        case 8:
-          expect(media.className).to.contain('k-media-done');
-          instance.set('src', 'https://example.com/next.mp4');
-          _context12.next = 12;
+          video = element.querySelector('video.k-media-video');
+          expect(video.getAttribute('src')).to.eql('https://example.com/demo.mp4');
+          expect(video.getAttribute('poster')).to.eql(null);
+          expect(video.controls).to.eql(true);
+          expect(video.getAttribute('data-native')).to.eql('video');
+          expect(video.preload).to.eql('auto');
+          dispatchMediaEvent(video, 'loadedmetadata');
+          _context12.next = 13;
           return wait();
-        case 12:
-          nextVideo = element.querySelector('video.k-media-video');
-          expect(nextVideo).not.to.eql(firstVideo);
-          expect(nextVideo.getAttribute('src')).to.eql('https://example.com/next.mp4');
+        case 13:
           expect(media.className).to.contain('k-media-loading');
-        case 16:
+        case 14:
         case "end":
           return _context12.stop();
       }
     }, _callee6);
   })));
-  // poster 变化时重建 video，覆盖有封面和无封面互切。
-  it('should remount video when poster changes', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
-    var Demo, _mount7, instance, element, media, videoWithPoster, videoWithoutPoster, videoWithNextPoster;
+  // src 变化时重建 video，避免热更新保留旧资源状态。
+  it('should remount video when src changes', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
+    var Demo, _mount7, instance, element, media, firstVideo, nextVideo;
     return _regeneratorRuntime.wrap(function _callee7$(_context14) {
       while (1) switch (_context14.prev = _context14.next) {
         case 0:
@@ -320,46 +320,37 @@ describe('Media', function () {
             }
             Demo.defaults = function defaults() {
               return {
-                poster: 'https://example.com/poster.png'
+                src: 'https://example.com/demo.mp4'
               };
             };
             return Demo;
           }(Component);
-          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        className=\"video-media\"\n                        type=\"video\"\n                        src=\"https://example.com/demo.mp4\"\n                        poster={this.get('poster')}\n                    />\n                </div>\n            ";
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        className=\"video-media\"\n                        type=\"video\"\n                        src={this.get('src')}\n                    />\n                </div>\n            ";
           _mount7 = mount(Demo), instance = _mount7[0], element = _mount7[1];
           media = element.querySelector('.video-media');
-          videoWithPoster = element.querySelector('video.k-media-video');
-          dispatchMediaEvent(videoWithPoster, 'loadedmetadata');
+          firstVideo = element.querySelector('video.k-media-video');
+          dispatchMediaEvent(firstVideo, 'loadeddata');
           _context14.next = 8;
           return wait();
         case 8:
           expect(media.className).to.contain('k-media-done');
-          expect(videoWithPoster.getAttribute('poster')).to.eql('https://example.com/poster.png');
-          instance.set('poster', undefined);
-          _context14.next = 13;
-          return wait();
-        case 13:
-          videoWithoutPoster = element.querySelector('video.k-media-video');
-          expect(videoWithoutPoster).not.to.eql(videoWithPoster);
-          expect(videoWithoutPoster.getAttribute('poster')).to.eql(null);
-          expect(media.className).to.contain('k-media-loading');
-          instance.set('poster', 'https://example.com/next-poster.png');
-          _context14.next = 20;
+          instance.set('src', 'https://example.com/next.mp4');
+          _context14.next = 12;
           return wait();
-        case 20:
-          videoWithNextPoster = element.querySelector('video.k-media-video');
-          expect(videoWithNextPoster).not.to.eql(videoWithoutPoster);
-          expect(videoWithNextPoster.getAttribute('poster')).to.eql('https://example.com/next-poster.png');
+        case 12:
+          nextVideo = element.querySelector('video.k-media-video');
+          expect(nextVideo).not.to.eql(firstVideo);
+          expect(nextVideo.getAttribute('src')).to.eql('https://example.com/next.mp4');
           expect(media.className).to.contain('k-media-loading');
-        case 24:
+        case 16:
         case "end":
           return _context14.stop();
       }
     }, _callee7);
   })));
-  // 完成态媒体默认允许展示预览遮罩。
-  it('should render preview overlay for done media', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
-    var Demo, _mount8, element;
+  // poster 变化时重建 video，覆盖有封面和无封面互切。
+  it('should remount video when poster changes', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
+    var Demo, _mount8, instance, element, media, videoWithPoster, videoWithoutPoster, videoWithNextPoster;
     return _regeneratorRuntime.wrap(function _callee8$(_context16) {
       while (1) switch (_context16.prev = _context16.next) {
         case 0:
@@ -375,25 +366,48 @@ describe('Media', function () {
               _this8.Media = Media;
               return _this8;
             }
+            Demo.defaults = function defaults() {
+              return {
+                poster: 'https://example.com/poster.png'
+              };
+            };
             return Demo;
           }(Component);
-          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media className=\"done-image\" type=\"image\" status=\"done\" src=\"https://example.com/cover.png\" />\n                    <Media className=\"done-video\" type=\"video\" status=\"done\" src=\"https://example.com/demo.mp4\" />\n                    <Media className=\"done-audio\" type=\"audio\" status=\"done\" src=\"https://example.com/demo.mp3\" />\n                </div>\n            ";
-          _mount8 = mount(Demo), element = _mount8[1];
-          ['done-image', 'done-video', 'done-audio'].forEach(function (className) {
-            var media = element.querySelector("." + className);
-            expect(media.className).to.contain('k-media-previewable');
-            expect(media.querySelector('.k-media-overlay')).not.to.eql(null);
-            expect(media.querySelector('.k-media-preview-trigger')).not.to.eql(null);
-          });
-        case 4:
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        className=\"video-media\"\n                        type=\"video\"\n                        src=\"https://example.com/demo.mp4\"\n                        poster={this.get('poster')}\n                    />\n                </div>\n            ";
+          _mount8 = mount(Demo), instance = _mount8[0], element = _mount8[1];
+          media = element.querySelector('.video-media');
+          videoWithPoster = element.querySelector('video.k-media-video');
+          dispatchMediaEvent(videoWithPoster, 'loadedmetadata');
+          _context16.next = 8;
+          return wait();
+        case 8:
+          expect(media.className).to.contain('k-media-done');
+          expect(videoWithPoster.getAttribute('poster')).to.eql('https://example.com/poster.png');
+          instance.set('poster', undefined);
+          _context16.next = 13;
+          return wait();
+        case 13:
+          videoWithoutPoster = element.querySelector('video.k-media-video');
+          expect(videoWithoutPoster).not.to.eql(videoWithPoster);
+          expect(videoWithoutPoster.getAttribute('poster')).to.eql(null);
+          expect(media.className).to.contain('k-media-loading');
+          instance.set('poster', 'https://example.com/next-poster.png');
+          _context16.next = 20;
+          return wait();
+        case 20:
+          videoWithNextPoster = element.querySelector('video.k-media-video');
+          expect(videoWithNextPoster).not.to.eql(videoWithoutPoster);
+          expect(videoWithNextPoster.getAttribute('poster')).to.eql('https://example.com/next-poster.png');
+          expect(media.className).to.contain('k-media-loading');
+        case 24:
         case "end":
           return _context16.stop();
       }
     }, _callee8);
   })));
-  // showPreview=false 时完成态也不生成预览入口。
-  it('should hide preview overlay when showPreview is false', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
-    var Demo, _mount9, element, media;
+  // 完成态媒体默认允许展示预览遮罩。
+  it('should render preview overlay for done media', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
+    var Demo, _mount9, element;
     return _regeneratorRuntime.wrap(function _callee9$(_context18) {
       while (1) switch (_context18.prev = _context18.next) {
         case 0:
@@ -411,22 +425,23 @@ describe('Media', function () {
             }
             return Demo;
           }(Component);
-          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        className=\"no-preview\"\n                        type=\"image\"\n                        status=\"done\"\n                        showPreview={false}\n                        src=\"https://example.com/cover.png\"\n                    />\n                </div>\n            ";
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media className=\"done-image\" type=\"image\" status=\"done\" src=\"https://example.com/cover.png\" />\n                    <Media className=\"done-video\" type=\"video\" status=\"done\" src=\"https://example.com/demo.mp4\" />\n                    <Media className=\"done-audio\" type=\"audio\" status=\"done\" src=\"https://example.com/demo.mp3\" />\n                </div>\n            ";
           _mount9 = mount(Demo), element = _mount9[1];
-          media = element.querySelector('.no-preview');
-          expect(media.className).not.to.contain('k-media-previewable');
-          expect(media.querySelector('.k-media-overlay')).to.eql(null);
-          expect(media.querySelector('.k-media-preview-trigger')).to.eql(null);
-        case 7:
+          ['done-image', 'done-video', 'done-audio'].forEach(function (className) {
+            var media = element.querySelector("." + className);
+            expect(media.className).to.contain('k-media-previewable');
+            expect(media.querySelector('.k-media-overlay')).not.to.eql(null);
+            expect(media.querySelector('.k-media-preview-trigger')).not.to.eql(null);
+          });
+        case 4:
         case "end":
           return _context18.stop();
       }
     }, _callee9);
   })));
-  // mask 插槽仅在 default/done 状态生效，loading/error 不展示。
-  it('should render mask slot only in default and done status', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
-    var _element$querySelecto, _element$querySelecto2;
-    var Demo, _mount10, element;
+  // loading 蒙层只覆盖已加载出的真实图片/视频资源；占位图和默认音频 loading 不额外压暗。
+  it('should render loading overlay only for visual media with source', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
+    var Demo, _mount10, element, image, video;
     return _regeneratorRuntime.wrap(function _callee10$(_context20) {
       while (1) switch (_context20.prev = _context20.next) {
         case 0:
@@ -444,25 +459,37 @@ describe('Media', function () {
             }
             return Demo;
           }(Component);
-          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media className=\"mask-default\" type=\"image\">\n                        <b:mask args=\"media\">\n                            <div class=\"mask-slot-default\">{media.status}</div>\n                        </b:mask>\n                    </Media>\n                    <Media className=\"mask-done\" type=\"image\" status=\"done\" src=\"https://example.com/cover.png\">\n                        <b:mask args=\"media\">\n                            <div class=\"mask-slot-done\">{media.status}</div>\n                        </b:mask>\n                    </Media>\n                    <Media className=\"mask-loading\" type=\"image\" status=\"loading\" src=\"https://example.com/cover.png\">\n                        <b:mask args=\"media\">\n                            <div class=\"mask-slot-loading\">{media.status}</div>\n                        </b:mask>\n                    </Media>\n                    <Media className=\"mask-error\" type=\"image\" status=\"error\" src=\"https://example.com/cover.png\">\n                        <b:mask args=\"media\">\n                            <div class=\"mask-slot-error\">{media.status}</div>\n                        </b:mask>\n                    </Media>\n                </div>\n            ";
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media className=\"loading-image\" type=\"image\" status=\"loading\" src=\"https://example.com/cover.png\" />\n                    <Media className=\"loading-video\" type=\"video\" status=\"loading\" src=\"https://example.com/demo.mp4\" />\n                    <Media className=\"placeholder-image\" type=\"image\" status=\"loading\" />\n                    <Media className=\"placeholder-video\" type=\"video\" status=\"loading\" />\n                    <Media className=\"loading-audio\" type=\"audio\" status=\"loading\" src=\"https://example.com/demo.mp3\" />\n                </div>\n            ";
           _mount10 = mount(Demo), element = _mount10[1];
-          expect(element.querySelector('.mask-default').className).to.contain('k-media-custom-mask');
-          expect(element.querySelector('.mask-done').className).to.contain('k-media-custom-mask');
-          expect(element.querySelector('.mask-loading').className).not.to.contain('k-media-custom-mask');
-          expect(element.querySelector('.mask-error').className).not.to.contain('k-media-custom-mask');
-          expect((_element$querySelecto = element.querySelector('.mask-slot-default')) == null ? void 0 : _element$querySelecto.textContent).to.contain('default');
-          expect((_element$querySelecto2 = element.querySelector('.mask-slot-done')) == null ? void 0 : _element$querySelecto2.textContent).to.contain('done');
-          expect(element.querySelector('.mask-slot-loading')).to.eql(null);
-          expect(element.querySelector('.mask-slot-error')).to.eql(null);
-        case 11:
+          image = element.querySelector('.loading-image img.k-media-image');
+          video = element.querySelector('.loading-video video.k-media-video');
+          ['loading-image', 'loading-video', 'placeholder-image', 'placeholder-video', 'loading-audio'].forEach(function (className) {
+            expect(element.querySelector("." + className + " .k-media-loading-overlay")).to.eql(null);
+          });
+          expect(getComputedStyle(image).display).to.eql('none');
+          expect(getComputedStyle(video).display).to.eql('none');
+          dispatchMediaEvent(image, 'load');
+          dispatchMediaEvent(video, 'loadeddata');
+          _context20.next = 12;
+          return wait();
+        case 12:
+          ['loading-image', 'loading-video'].forEach(function (className) {
+            expect(element.querySelector("." + className + " .k-media-loading-overlay")).not.to.eql(null);
+          });
+          expect(element.querySelector('.loading-audio .k-media-loading-overlay')).to.eql(null);
+          expect(element.querySelector('.loading-image .k-media-placeholder')).to.eql(null);
+          expect(element.querySelector('.loading-video .k-media-placeholder')).to.eql(null);
+          expect(getComputedStyle(image).display).not.to.eql('none');
+          expect(getComputedStyle(video).display).not.to.eql('none');
+        case 18:
         case "end":
           return _context20.stop();
       }
     }, _callee10);
   })));
-  // mask 生效时接管预览入口，不再显示默认预览按钮。
-  it('should hide default preview trigger when mask slot is active', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
-    var Demo, _mount11, element, media;
+  // 外部保持 loading 时，资源未加载出先展示占位图；资源加载出后再展示真实媒体。
+  it('should keep placeholder visible until visual source is loaded under loading status', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
+    var Demo, _mount11, element, media, image;
     return _regeneratorRuntime.wrap(function _callee11$(_context22) {
       while (1) switch (_context22.prev = _context22.next) {
         case 0:
@@ -480,25 +507,35 @@ describe('Media', function () {
             }
             return Demo;
           }(Component);
-          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media className=\"mask-preview\" type=\"image\" status=\"done\" src=\"https://example.com/cover.png\">\n                        <b:mask args=\"media\">\n                            <button class=\"mask-action\" type=\"button\">{media.name || 'mask'}</button>\n                        </b:mask>\n                    </Media>\n                </div>\n            ";
+          Demo.template = "\n                const { Media } = this;\n                <Media type=\"image\" status=\"loading\" src=\"https://example.com/loading.png\" />\n            ";
           _mount11 = mount(Demo), element = _mount11[1];
-          media = element.querySelector('.mask-preview');
-          expect(media.querySelector('.mask-action')).not.to.eql(null);
-          expect(media.querySelector('.k-media-preview-trigger')).to.eql(null);
-        case 6:
+          media = element.classList.contains('k-media') ? element : element.querySelector('.k-media');
+          image = element.querySelector('img.k-media-image');
+          expect(media.className).to.contain('k-media-loading');
+          expect(image).not.to.eql(null);
+          expect(getComputedStyle(image).display).to.eql('none');
+          expect(media.querySelector('.k-media-placeholder-asset')).not.to.eql(null);
+          expect(media.querySelector('.k-media-loading-overlay')).to.eql(null);
+          dispatchMediaEvent(image, 'load');
+          _context22.next = 13;
+          return wait();
+        case 13:
+          expect(media.className).to.contain('k-media-loading');
+          expect(getComputedStyle(image).display).not.to.eql('none');
+          expect(media.querySelector('.k-media-placeholder')).to.eql(null);
+          expect(media.querySelector('.k-media-loading-overlay')).not.to.eql(null);
+        case 17:
         case "end":
           return _context22.stop();
       }
     }, _callee11);
   })));
-  // mask 插槽可以通过 preview(event) 主动触发预览。
-  it('should open preview by custom mask preview handler', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12() {
-    var _getElement;
-    var previewCalls, Demo, _mount12, element, maskOpen;
+  // showPreview=false 时完成态也不生成预览入口。
+  it('should hide preview overlay when showPreview is false', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12() {
+    var Demo, _mount12, element, media;
     return _regeneratorRuntime.wrap(function _callee12$(_context24) {
       while (1) switch (_context24.prev = _context24.next) {
         case 0:
-          previewCalls = [];
           Demo = /*#__PURE__*/function (_Component12) {
             _inheritsLoose(Demo, _Component12);
             function Demo() {
@@ -509,42 +546,26 @@ describe('Media', function () {
               }
               _this12 = _Component12.call.apply(_Component12, _concatInstanceProperty(_context23 = [this]).call(_context23, args)) || this;
               _this12.Media = Media;
-              _this12.onPreview = function (media, e) {
-                previewCalls.push({
-                  media: media,
-                  eventType: e.type
-                });
-              };
               return _this12;
             }
             return Demo;
           }(Component);
-          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        className=\"mask-preview-open\"\n                        type=\"image\"\n                        status=\"done\"\n                        name=\"\u5C01\u9762\u56FE\"\n                        src=\"https://example.com/cover.png\"\n                        ev-preview={this.onPreview}\n                    >\n                        <b:mask args=\"media\">\n                            <button\n                                class=\"mask-open\"\n                                type=\"button\"\n                                disabled={!media.canPreview}\n                                ev-click={media.preview}\n                            >open</button>\n                        </b:mask>\n                    </Media>\n                </div>\n            ";
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        className=\"no-preview\"\n                        type=\"image\"\n                        status=\"done\"\n                        showPreview={false}\n                        src=\"https://example.com/cover.png\"\n                    />\n                </div>\n            ";
           _mount12 = mount(Demo), element = _mount12[1];
-          maskOpen = element.querySelector('.mask-open');
-          maskOpen.click();
-          _context24.next = 8;
-          return wait(0);
-        case 8:
-          expect(previewCalls.length).to.eql(1);
-          expect(previewCalls[0].eventType).to.eql('click');
-          expect(previewCalls[0].media).to.include({
-            name: '封面图',
-            resolvedType: 'image',
-            status: 'done',
-            src: 'https://example.com/cover.png'
-          });
-          expect(getElement('.k-media-viewer')).not.to.eql(null);
-          expect((_getElement = getElement('.k-media-viewer-title')) == null ? void 0 : _getElement.textContent).to.contain('封面图');
-        case 13:
+          media = element.querySelector('.no-preview');
+          expect(media.className).not.to.contain('k-media-previewable');
+          expect(media.querySelector('.k-media-overlay')).to.eql(null);
+          expect(media.querySelector('.k-media-preview-trigger')).to.eql(null);
+        case 7:
         case "end":
           return _context24.stop();
       }
     }, _callee12);
   })));
-  // 无 src 且无外部状态时展示默认占位，不进入 loading。
-  it('should render default placeholder when src and status are absent', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee13() {
-    var Demo, _mount13, element, media;
+  // mask 插槽仅在 default/done 状态生效，loading/error 不展示。
+  it('should render mask slot only in default and done status', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee13() {
+    var _element$querySelecto, _element$querySelecto2;
+    var Demo, _mount13, element;
     return _regeneratorRuntime.wrap(function _callee13$(_context26) {
       while (1) switch (_context26.prev = _context26.next) {
         case 0:
@@ -562,26 +583,25 @@ describe('Media', function () {
             }
             return Demo;
           }(Component);
-          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media className=\"empty-media\" />\n                </div>\n            ";
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media className=\"mask-default\" type=\"image\">\n                        <b:mask args=\"media\">\n                            <div class=\"mask-slot-default\">{media.status}</div>\n                        </b:mask>\n                    </Media>\n                    <Media className=\"mask-done\" type=\"image\" status=\"done\" src=\"https://example.com/cover.png\">\n                        <b:mask args=\"media\">\n                            <div class=\"mask-slot-done\">{media.status}</div>\n                        </b:mask>\n                    </Media>\n                    <Media className=\"mask-loading\" type=\"image\" status=\"loading\" src=\"https://example.com/cover.png\">\n                        <b:mask args=\"media\">\n                            <div class=\"mask-slot-loading\">{media.status}</div>\n                        </b:mask>\n                    </Media>\n                    <Media className=\"mask-error\" type=\"image\" status=\"error\" src=\"https://example.com/cover.png\">\n                        <b:mask args=\"media\">\n                            <div class=\"mask-slot-error\">{media.status}</div>\n                        </b:mask>\n                    </Media>\n                </div>\n            ";
           _mount13 = mount(Demo), element = _mount13[1];
-          media = element.querySelector('.empty-media');
-          expect(media.className).to.contain('k-media-image');
-          expect(media.className).to.contain('k-media-default');
-          expect(media.className).not.to.contain('k-media-previewable');
-          expect(media.getAttribute('title')).to.eql('未命名文件');
-          expect(media.querySelector('.k-media-placeholder')).not.to.eql(null);
-          expect(media.querySelector('.k-media-image')).to.eql(null);
-          expect(media.querySelector('.k-media-loading-indicator')).to.eql(null);
-          expect(media.querySelector('.k-media-preview-trigger')).to.eql(null);
-        case 12:
-        case "end":
-          return _context26.stop();
-      }
-    }, _callee13);
+          expect(element.querySelector('.mask-default').className).to.contain('k-media-custom-mask');
+          expect(element.querySelector('.mask-done').className).to.contain('k-media-custom-mask');
+          expect(element.querySelector('.mask-loading').className).not.to.contain('k-media-custom-mask');
+          expect(element.querySelector('.mask-error').className).not.to.contain('k-media-custom-mask');
+          expect((_element$querySelecto = element.querySelector('.mask-slot-default')) == null ? void 0 : _element$querySelecto.textContent).to.contain('default');
+          expect((_element$querySelecto2 = element.querySelector('.mask-slot-done')) == null ? void 0 : _element$querySelecto2.textContent).to.contain('done');
+          expect(element.querySelector('.mask-slot-loading')).to.eql(null);
+          expect(element.querySelector('.mask-slot-error')).to.eql(null);
+        case 11:
+        case "end":
+          return _context26.stop();
+      }
+    }, _callee13);
   })));
-  // 未传 type 时根据 name/src 文件名推断媒体类型。
-  it('should infer media type from name or src', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee14() {
-    var Demo, _mount14, element, image, video, audio;
+  // mask 生效时接管预览入口，不再显示默认预览按钮。
+  it('should hide default preview trigger when mask slot is active', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee14() {
+    var Demo, _mount14, element, media;
     return _regeneratorRuntime.wrap(function _callee14$(_context28) {
       while (1) switch (_context28.prev = _context28.next) {
         case 0:
@@ -599,8 +619,140 @@ describe('Media', function () {
             }
             return Demo;
           }(Component);
-          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media className=\"infer-image\" status=\"done\" src=\"https://example.com/cover.webp?x=1\" />\n                    <Media className=\"infer-video\" name=\"clip.webm\" status=\"done\" src=\"https://example.com/resource\" />\n                    <Media className=\"infer-audio\" status=\"done\" src=\"https://example.com/audio.m4a#hash\" />\n                </div>\n            ";
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media className=\"mask-preview\" type=\"image\" status=\"done\" src=\"https://example.com/cover.png\">\n                        <b:mask args=\"media\">\n                            <button class=\"mask-action\" type=\"button\">{media.name || 'mask'}</button>\n                        </b:mask>\n                    </Media>\n                </div>\n            ";
           _mount14 = mount(Demo), element = _mount14[1];
+          media = element.querySelector('.mask-preview');
+          expect(media.querySelector('.mask-action')).not.to.eql(null);
+          expect(media.querySelector('.k-media-preview-trigger')).to.eql(null);
+        case 6:
+        case "end":
+          return _context28.stop();
+      }
+    }, _callee14);
+  })));
+  // mask 插槽可以通过 preview(event) 主动触发预览。
+  it('should open preview by custom mask preview handler', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee15() {
+    var _getElement;
+    var previewCalls, Demo, _mount15, element, maskOpen;
+    return _regeneratorRuntime.wrap(function _callee15$(_context30) {
+      while (1) switch (_context30.prev = _context30.next) {
+        case 0:
+          previewCalls = [];
+          Demo = /*#__PURE__*/function (_Component15) {
+            _inheritsLoose(Demo, _Component15);
+            function Demo() {
+              var _context29;
+              var _this15;
+              for (var _len15 = arguments.length, args = new Array(_len15), _key15 = 0; _key15 < _len15; _key15++) {
+                args[_key15] = arguments[_key15];
+              }
+              _this15 = _Component15.call.apply(_Component15, _concatInstanceProperty(_context29 = [this]).call(_context29, args)) || this;
+              _this15.Media = Media;
+              _this15.onPreview = function (media, e) {
+                previewCalls.push({
+                  media: media,
+                  eventType: e.type
+                });
+              };
+              return _this15;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        className=\"mask-preview-open\"\n                        type=\"image\"\n                        status=\"done\"\n                        name=\"\u5C01\u9762\u56FE\"\n                        src=\"https://example.com/cover.png\"\n                        ev-preview={this.onPreview}\n                    >\n                        <b:mask args=\"media\">\n                            <button\n                                class=\"mask-open\"\n                                type=\"button\"\n                                disabled={!media.canPreview}\n                                ev-click={media.preview}\n                            >open</button>\n                        </b:mask>\n                    </Media>\n                </div>\n            ";
+          _mount15 = mount(Demo), element = _mount15[1];
+          maskOpen = element.querySelector('.mask-open');
+          maskOpen.click();
+          _context30.next = 8;
+          return wait(0);
+        case 8:
+          expect(previewCalls.length).to.eql(1);
+          expect(previewCalls[0].eventType).to.eql('click');
+          expect(previewCalls[0].media).to.include({
+            name: '封面图',
+            resolvedType: 'image',
+            status: 'done',
+            src: 'https://example.com/cover.png'
+          });
+          expect(getElement('.k-media-viewer')).not.to.eql(null);
+          expect((_getElement = getElement('.k-media-viewer-title')) == null ? void 0 : _getElement.textContent).to.contain('封面图');
+        case 13:
+        case "end":
+          return _context30.stop();
+      }
+    }, _callee15);
+  })));
+  // 无 src 且无外部状态时展示默认占位，不进入 loading；图片/视频使用内置 SVG 占位图。
+  it('should render default placeholder when src and status are absent', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee16() {
+    var Demo, _mount16, element, media, video, imageAsset, videoAsset;
+    return _regeneratorRuntime.wrap(function _callee16$(_context32) {
+      while (1) switch (_context32.prev = _context32.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component16) {
+            _inheritsLoose(Demo, _Component16);
+            function Demo() {
+              var _context31;
+              var _this16;
+              for (var _len16 = arguments.length, args = new Array(_len16), _key16 = 0; _key16 < _len16; _key16++) {
+                args[_key16] = arguments[_key16];
+              }
+              _this16 = _Component16.call.apply(_Component16, _concatInstanceProperty(_context31 = [this]).call(_context31, args)) || this;
+              _this16.Media = Media;
+              return _this16;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media className=\"empty-media\" />\n                    <Media className=\"empty-video\" type=\"video\" />\n                </div>\n            ";
+          _mount16 = mount(Demo), element = _mount16[1];
+          media = element.querySelector('.empty-media');
+          video = element.querySelector('.empty-video');
+          imageAsset = media.querySelector('.k-media-placeholder-asset');
+          videoAsset = video.querySelector('.k-media-placeholder-asset');
+          expect(media.className).to.contain('k-media-image');
+          expect(media.className).to.contain('k-media-default');
+          expect(media.className).not.to.contain('k-media-previewable');
+          expect(media.getAttribute('title')).to.eql('未命名文件');
+          expect(media.querySelector('.k-media-placeholder')).not.to.eql(null);
+          expect(imageAsset).not.to.eql(null);
+          expect(imageAsset.src).to.contain('data:image/svg+xml');
+          expect(imageAsset.src).to.contain('M4.5%207');
+          expect(getComputedStyle(imageAsset).width).to.eql('16px');
+          expect(getComputedStyle(imageAsset).height).to.eql('16px');
+          expect(videoAsset).not.to.eql(null);
+          expect(videoAsset.src).to.contain('data:image/svg+xml');
+          expect(videoAsset.src).to.contain('M1.33282%204.4165');
+          expect(getComputedStyle(videoAsset).width).to.eql('16px');
+          expect(getComputedStyle(videoAsset).height).to.eql('16px');
+          expect(media.querySelector('.k-media-image')).to.eql(null);
+          expect(media.querySelector('.k-media-loading-indicator')).to.eql(null);
+          expect(media.querySelector('.k-media-preview-trigger')).to.eql(null);
+        case 25:
+        case "end":
+          return _context32.stop();
+      }
+    }, _callee16);
+  })));
+  // 未传 type 时根据 name/src 文件名推断媒体类型。
+  it('should infer media type from name or src', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee17() {
+    var Demo, _mount17, element, image, video, audio;
+    return _regeneratorRuntime.wrap(function _callee17$(_context34) {
+      while (1) switch (_context34.prev = _context34.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component17) {
+            _inheritsLoose(Demo, _Component17);
+            function Demo() {
+              var _context33;
+              var _this17;
+              for (var _len17 = arguments.length, args = new Array(_len17), _key17 = 0; _key17 < _len17; _key17++) {
+                args[_key17] = arguments[_key17];
+              }
+              _this17 = _Component17.call.apply(_Component17, _concatInstanceProperty(_context33 = [this]).call(_context33, args)) || this;
+              _this17.Media = Media;
+              return _this17;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media className=\"infer-image\" status=\"done\" src=\"https://example.com/cover.webp?x=1\" />\n                    <Media className=\"infer-video\" name=\"clip.webm\" status=\"done\" src=\"https://example.com/resource\" />\n                    <Media className=\"infer-audio\" status=\"done\" src=\"https://example.com/audio.m4a#hash\" />\n                </div>\n            ";
+          _mount17 = mount(Demo), element = _mount17[1];
           image = element.querySelector('.infer-image');
           video = element.querySelector('.infer-video');
           audio = element.querySelector('.infer-audio');
@@ -612,51 +764,51 @@ describe('Media', function () {
           expect(audio.querySelector('.k-media-audio-card')).not.to.eql(null);
         case 12:
         case "end":
-          return _context28.stop();
+          return _context34.stop();
       }
-    }, _callee14);
+    }, _callee17);
   })));
   // click 和 preview 事件分别返回缩略图信息和预览信息。
-  it('should trigger click and preview events with media payload', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee15() {
+  it('should trigger click and preview events with media payload', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee18() {
     var _getElement2;
-    var clickCalls, previewCalls, Demo, _mount15, element, media, trigger;
-    return _regeneratorRuntime.wrap(function _callee15$(_context30) {
-      while (1) switch (_context30.prev = _context30.next) {
+    var clickCalls, previewCalls, Demo, _mount18, element, media, trigger;
+    return _regeneratorRuntime.wrap(function _callee18$(_context36) {
+      while (1) switch (_context36.prev = _context36.next) {
         case 0:
           clickCalls = [];
           previewCalls = [];
-          Demo = /*#__PURE__*/function (_Component15) {
-            _inheritsLoose(Demo, _Component15);
+          Demo = /*#__PURE__*/function (_Component18) {
+            _inheritsLoose(Demo, _Component18);
             function Demo() {
-              var _context29;
-              var _this15;
-              for (var _len15 = arguments.length, args = new Array(_len15), _key15 = 0; _key15 < _len15; _key15++) {
-                args[_key15] = arguments[_key15];
+              var _context35;
+              var _this18;
+              for (var _len18 = arguments.length, args = new Array(_len18), _key18 = 0; _key18 < _len18; _key18++) {
+                args[_key18] = arguments[_key18];
               }
-              _this15 = _Component15.call.apply(_Component15, _concatInstanceProperty(_context29 = [this]).call(_context29, args)) || this;
-              _this15.Media = Media;
-              _this15.onClick = function (media, e) {
+              _this18 = _Component18.call.apply(_Component18, _concatInstanceProperty(_context35 = [this]).call(_context35, args)) || this;
+              _this18.Media = Media;
+              _this18.onClick = function (media, e) {
                 clickCalls.push({
                   media: media,
                   eventType: e.type
                 });
               };
-              _this15.onPreview = function (media, e) {
+              _this18.onPreview = function (media, e) {
                 previewCalls.push({
                   media: media,
                   eventType: e.type
                 });
               };
-              return _this15;
+              return _this18;
             }
             return Demo;
           }(Component);
           Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        className=\"event-media\"\n                        name=\"\u5C01\u9762\u56FE\"\n                        type=\"image\"\n                        status=\"done\"\n                        src=\"https://example.com/cover.png\"\n                        ev-click={this.onClick}\n                        ev-preview={this.onPreview}\n                    />\n                </div>\n            ";
-          _mount15 = mount(Demo), element = _mount15[1];
+          _mount18 = mount(Demo), element = _mount18[1];
           media = element.querySelector('.event-media');
           trigger = element.querySelector('.k-media-preview-trigger');
           media.click();
-          _context30.next = 10;
+          _context36.next = 10;
           return wait();
         case 10:
           expect(clickCalls.length).to.eql(1);
@@ -670,7 +822,7 @@ describe('Media', function () {
           });
           expect(clickCalls[0].eventType).to.eql('click');
           trigger.click();
-          _context30.next = 16;
+          _context36.next = 16;
           return wait();
         case 16:
           expect(clickCalls.length).to.eql(1);
@@ -687,39 +839,39 @@ describe('Media', function () {
           expect((_getElement2 = getElement('.k-media-viewer-title')) == null ? void 0 : _getElement2.textContent).to.contain('封面图');
         case 21:
         case "end":
-          return _context30.stop();
+          return _context36.stop();
       }
-    }, _callee15);
+    }, _callee18);
   })));
   // imageProps/audioProps 透传原生属性，并移除被组件接管的事件属性。
-  it('should pass native image and audio props without leaking handled events', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee16() {
-    var calls, Demo, _mount16, element, image, audio;
-    return _regeneratorRuntime.wrap(function _callee16$(_context32) {
-      while (1) switch (_context32.prev = _context32.next) {
+  it('should pass native image and audio props without leaking handled events', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee19() {
+    var calls, Demo, _mount19, element, image, audio;
+    return _regeneratorRuntime.wrap(function _callee19$(_context38) {
+      while (1) switch (_context38.prev = _context38.next) {
         case 0:
           calls = [];
-          Demo = /*#__PURE__*/function (_Component16) {
-            _inheritsLoose(Demo, _Component16);
+          Demo = /*#__PURE__*/function (_Component19) {
+            _inheritsLoose(Demo, _Component19);
             function Demo() {
-              var _context31;
-              var _this16;
-              for (var _len16 = arguments.length, args = new Array(_len16), _key16 = 0; _key16 < _len16; _key16++) {
-                args[_key16] = arguments[_key16];
+              var _context37;
+              var _this19;
+              for (var _len19 = arguments.length, args = new Array(_len19), _key19 = 0; _key19 < _len19; _key19++) {
+                args[_key19] = arguments[_key19];
               }
-              _this16 = _Component16.call.apply(_Component16, _concatInstanceProperty(_context31 = [this]).call(_context31, args)) || this;
-              _this16.Media = Media;
-              _this16.onImageError = function () {
+              _this19 = _Component19.call.apply(_Component19, _concatInstanceProperty(_context37 = [this]).call(_context37, args)) || this;
+              _this19.Media = Media;
+              _this19.onImageError = function () {
                 calls.push('image-error');
               };
-              _this16.onAudioLoad = function () {
+              _this19.onAudioLoad = function () {
                 calls.push('audio-load');
               };
-              return _this16;
+              return _this19;
             }
             return Demo;
           }(Component);
           Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        type=\"image\"\n                        src=\"https://example.com/cover.png\"\n                        imageProps={{\n                            onerror: this.onImageError,\n                            'data-native': 'image',\n                        }}\n                    />\n                    <Media\n                        type=\"audio\"\n                        src=\"https://example.com/demo.mp3\"\n                        audioProps={{\n                            onloadedmetadata: this.onAudioLoad,\n                            preload: 'auto',\n                            'data-native': 'audio',\n                        }}\n                    />\n                </div>\n            ";
-          _mount16 = mount(Demo), element = _mount16[1];
+          _mount19 = mount(Demo), element = _mount19[1];
           image = element.querySelector('img.k-media-image');
           audio = element.querySelector('audio.k-media-audio-loader');
           expect(image.getAttribute('data-native')).to.eql('image');
@@ -729,45 +881,45 @@ describe('Media', function () {
           expect(audio.getAttribute('onloadedmetadata')).to.eql(null);
           dispatchMediaEvent(image, 'error');
           dispatchMediaEvent(audio, 'loadedmetadata');
-          _context32.next = 15;
+          _context38.next = 15;
           return wait();
         case 15:
           expect(calls).to.eql(['image-error', 'audio-load']);
         case 16:
         case "end":
-          return _context32.stop();
+          return _context38.stop();
       }
-    }, _callee16);
+    }, _callee19);
   })));
   // 原生媒体事件驱动内部自动状态切换。
-  it('should update automatic status from native media events', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee17() {
-    var calls, Demo, _mount17, element, imageMedia, videoMedia, audioMedia;
-    return _regeneratorRuntime.wrap(function _callee17$(_context34) {
-      while (1) switch (_context34.prev = _context34.next) {
+  it('should update automatic status from native media events', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee20() {
+    var calls, Demo, _mount20, element, imageMedia, videoMedia, audioMedia;
+    return _regeneratorRuntime.wrap(function _callee20$(_context40) {
+      while (1) switch (_context40.prev = _context40.next) {
         case 0:
           calls = [];
-          Demo = /*#__PURE__*/function (_Component17) {
-            _inheritsLoose(Demo, _Component17);
+          Demo = /*#__PURE__*/function (_Component20) {
+            _inheritsLoose(Demo, _Component20);
             function Demo() {
-              var _context33;
-              var _this17;
-              for (var _len17 = arguments.length, args = new Array(_len17), _key17 = 0; _key17 < _len17; _key17++) {
-                args[_key17] = arguments[_key17];
+              var _context39;
+              var _this20;
+              for (var _len20 = arguments.length, args = new Array(_len20), _key20 = 0; _key20 < _len20; _key20++) {
+                args[_key20] = arguments[_key20];
               }
-              _this17 = _Component17.call.apply(_Component17, _concatInstanceProperty(_context33 = [this]).call(_context33, args)) || this;
-              _this17.Media = Media;
-              _this17.onLoad = function (media) {
+              _this20 = _Component20.call.apply(_Component20, _concatInstanceProperty(_context39 = [this]).call(_context39, args)) || this;
+              _this20.Media = Media;
+              _this20.onLoad = function (media) {
                 calls.push("load:" + media.resolvedType);
               };
-              _this17.onLoadError = function (media) {
+              _this20.onLoadError = function (media) {
                 calls.push("error:" + media.resolvedType);
               };
-              return _this17;
+              return _this20;
             }
             return Demo;
           }(Component);
           Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media className=\"image-media\" type=\"image\" src=\"https://example.com/cover.png\" ev-load={this.onLoad} ev-loadError={this.onLoadError} />\n                    <Media className=\"video-media\" type=\"video\" src=\"https://example.com/demo.mp4\" ev-load={this.onLoad} />\n                    <Media className=\"audio-media\" type=\"audio\" src=\"https://example.com/demo.mp3\" ev-load={this.onLoad} />\n                </div>\n            ";
-          _mount17 = mount(Demo), element = _mount17[1];
+          _mount20 = mount(Demo), element = _mount20[1];
           imageMedia = element.querySelector('.image-media');
           videoMedia = element.querySelector('.video-media');
           audioMedia = element.querySelector('.audio-media');
@@ -777,7 +929,7 @@ describe('Media', function () {
           dispatchMediaEvent(element.querySelector('img.k-media-image'), 'load');
           dispatchMediaEvent(element.querySelector('video.k-media-video'), 'loadeddata');
           dispatchMediaEvent(element.querySelector('audio.k-media-audio-loader'), 'loadedmetadata');
-          _context34.next = 15;
+          _context40.next = 15;
           return wait();
         case 15:
           expect(imageMedia.className).to.contain('k-media-done');
@@ -786,7 +938,7 @@ describe('Media', function () {
           expect(element.querySelector('.k-media-loading-indicator')).to.eql(null);
           expect(calls).to.eql(['load:image', 'load:video', 'load:audio']);
           dispatchMediaEvent(element.querySelector('img.k-media-image'), 'error');
-          _context34.next = 23;
+          _context40.next = 23;
           return wait();
         case 23:
           expect(imageMedia.className).to.contain('k-media-error');
@@ -797,39 +949,39 @@ describe('Media', function () {
           expect(calls).to.eql(['load:image', 'load:video', 'load:audio', 'error:image']);
         case 29:
         case "end":
-          return _context34.stop();
+          return _context40.stop();
       }
-    }, _callee17);
+    }, _callee20);
   })));
   // 原生事件先更新内部状态，再调用用户传入的回调。
-  it('should merge native handlers', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee18() {
-    var calls, imageMedia, Demo, _mount18, element;
-    return _regeneratorRuntime.wrap(function _callee18$(_context36) {
-      while (1) switch (_context36.prev = _context36.next) {
+  it('should merge native handlers', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee21() {
+    var calls, imageMedia, Demo, _mount21, element;
+    return _regeneratorRuntime.wrap(function _callee21$(_context42) {
+      while (1) switch (_context42.prev = _context42.next) {
         case 0:
           calls = [];
-          Demo = /*#__PURE__*/function (_Component18) {
-            _inheritsLoose(Demo, _Component18);
+          Demo = /*#__PURE__*/function (_Component21) {
+            _inheritsLoose(Demo, _Component21);
             function Demo() {
-              var _context35;
-              var _this18;
-              for (var _len18 = arguments.length, args = new Array(_len18), _key18 = 0; _key18 < _len18; _key18++) {
-                args[_key18] = arguments[_key18];
+              var _context41;
+              var _this21;
+              for (var _len21 = arguments.length, args = new Array(_len21), _key21 = 0; _key21 < _len21; _key21++) {
+                args[_key21] = arguments[_key21];
               }
-              _this18 = _Component18.call.apply(_Component18, _concatInstanceProperty(_context35 = [this]).call(_context35, args)) || this;
-              _this18.Media = Media;
-              _this18.onImageLoad = function () {
+              _this21 = _Component21.call.apply(_Component21, _concatInstanceProperty(_context41 = [this]).call(_context41, args)) || this;
+              _this21.Media = Media;
+              _this21.onImageLoad = function () {
                 calls.push('load');
               };
-              return _this18;
+              return _this21;
             }
             return Demo;
           }(Component);
           Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        className=\"image-media\"\n                        type=\"image\"\n                        src=\"https://example.com/cover.png\"\n                        imageProps={{\n                            onload: this.onImageLoad,\n                        }}\n                    />\n                </div>\n            ";
-          _mount18 = mount(Demo), element = _mount18[1];
+          _mount21 = mount(Demo), element = _mount21[1];
           imageMedia = element.querySelector('.image-media');
           dispatchMediaEvent(element.querySelector('img.k-media-image'), 'load');
-          _context36.next = 8;
+          _context42.next = 8;
           return wait();
         case 8:
           expect(imageMedia.className).to.contain('k-media-done');
@@ -837,35 +989,35 @@ describe('Media', function () {
           expect(element.querySelector('img.k-media-image').getAttribute('onload')).to.eql(null);
         case 11:
         case "end":
-          return _context36.stop();
+          return _context42.stop();
       }
-    }, _callee18);
+    }, _callee21);
   })));
   // 缓存资源错过事件时，通过原生 ready 状态补齐完成态。
-  it('should sync automatic status from native media state', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee19() {
-    var restores, Demo, _mount19, element;
-    return _regeneratorRuntime.wrap(function _callee19$(_context38) {
-      while (1) switch (_context38.prev = _context38.next) {
+  it('should sync automatic status from native media state', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee22() {
+    var restores, Demo, _mount22, element;
+    return _regeneratorRuntime.wrap(function _callee22$(_context44) {
+      while (1) switch (_context44.prev = _context44.next) {
         case 0:
           restores = [stubNativeGetter(HTMLImageElement.prototype, 'complete', true), stubNativeGetter(HTMLImageElement.prototype, 'naturalWidth', 120), stubNativeGetter(HTMLImageElement.prototype, 'naturalHeight', 80), stubNativeGetter(HTMLMediaElement.prototype, 'readyState', 2)];
-          _context38.prev = 1;
-          Demo = /*#__PURE__*/function (_Component19) {
-            _inheritsLoose(Demo, _Component19);
+          _context44.prev = 1;
+          Demo = /*#__PURE__*/function (_Component22) {
+            _inheritsLoose(Demo, _Component22);
             function Demo() {
-              var _context37;
-              var _this19;
-              for (var _len19 = arguments.length, args = new Array(_len19), _key19 = 0; _key19 < _len19; _key19++) {
-                args[_key19] = arguments[_key19];
+              var _context43;
+              var _this22;
+              for (var _len22 = arguments.length, args = new Array(_len22), _key22 = 0; _key22 < _len22; _key22++) {
+                args[_key22] = arguments[_key22];
               }
-              _this19 = _Component19.call.apply(_Component19, _concatInstanceProperty(_context37 = [this]).call(_context37, args)) || this;
-              _this19.Media = Media;
-              return _this19;
+              _this22 = _Component22.call.apply(_Component22, _concatInstanceProperty(_context43 = [this]).call(_context43, args)) || this;
+              _this22.Media = Media;
+              return _this22;
             }
             return Demo;
           }(Component);
           Demo.template = "\n                    const { Media } = this;\n                    <div>\n                        <Media className=\"image-media\" type=\"image\" src=\"https://example.com/cover.png\" />\n                        <Media className=\"video-media\" type=\"video\" src=\"https://example.com/demo.mp4\" />\n                        <Media className=\"audio-media\" type=\"audio\" src=\"https://example.com/demo.mp3\" />\n                    </div>\n                ";
-          _mount19 = mount(Demo), element = _mount19[1];
-          _context38.next = 7;
+          _mount22 = mount(Demo), element = _mount22[1];
+          _context44.next = 7;
           return wait();
         case 7:
           expect(element.querySelector('.image-media').className).to.contain('k-media-done');
@@ -874,45 +1026,45 @@ describe('Media', function () {
           expect(element.querySelector('.k-media-loading-indicator')).to.eql(null);
           expect(element.querySelectorAll('.k-media-preview-trigger').length).to.eql(3);
         case 12:
-          _context38.prev = 12;
+          _context44.prev = 12;
           restores.forEach(function (restore) {
             return restore();
           });
-          return _context38.finish(12);
+          return _context44.finish(12);
         case 15:
         case "end":
-          return _context38.stop();
+          return _context44.stop();
       }
-    }, _callee19, null, [[1,, 12, 15]]);
+    }, _callee22, null, [[1,, 12, 15]]);
   })));
   // 外部 status 优先级高于内部自动状态。
-  it('should let status prop override internal status', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee20() {
-    var Demo, _mount20, element, loadingMedia, errorMedia, doneMedia;
-    return _regeneratorRuntime.wrap(function _callee20$(_context40) {
-      while (1) switch (_context40.prev = _context40.next) {
+  it('should let status prop override internal status', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee23() {
+    var Demo, _mount23, element, loadingMedia, errorMedia, doneMedia;
+    return _regeneratorRuntime.wrap(function _callee23$(_context46) {
+      while (1) switch (_context46.prev = _context46.next) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component20) {
-            _inheritsLoose(Demo, _Component20);
+          Demo = /*#__PURE__*/function (_Component23) {
+            _inheritsLoose(Demo, _Component23);
             function Demo() {
-              var _context39;
-              var _this20;
-              for (var _len20 = arguments.length, args = new Array(_len20), _key20 = 0; _key20 < _len20; _key20++) {
-                args[_key20] = arguments[_key20];
+              var _context45;
+              var _this23;
+              for (var _len23 = arguments.length, args = new Array(_len23), _key23 = 0; _key23 < _len23; _key23++) {
+                args[_key23] = arguments[_key23];
               }
-              _this20 = _Component20.call.apply(_Component20, _concatInstanceProperty(_context39 = [this]).call(_context39, args)) || this;
-              _this20.Media = Media;
-              return _this20;
+              _this23 = _Component23.call.apply(_Component23, _concatInstanceProperty(_context45 = [this]).call(_context45, args)) || this;
+              _this23.Media = Media;
+              return _this23;
             }
             return Demo;
           }(Component);
           Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media className=\"loading-media\" type=\"image\" status=\"loading\" src=\"https://example.com/loading.png\" />\n                    <Media className=\"error-media\" type=\"video\" status=\"error\" src=\"https://example.com/error.mp4\" />\n                    <Media className=\"done-media\" type=\"audio\" status=\"done\" src=\"https://example.com/done.mp3\" />\n                </div>\n            ";
-          _mount20 = mount(Demo), element = _mount20[1];
+          _mount23 = mount(Demo), element = _mount23[1];
           loadingMedia = element.querySelector('.loading-media');
           errorMedia = element.querySelector('.error-media');
           doneMedia = element.querySelector('.done-media');
           dispatchMediaEvent(loadingMedia.querySelector('img.k-media-image'), 'load');
           dispatchMediaEvent(doneMedia.querySelector('audio.k-media-audio-loader'), 'error');
-          _context40.next = 10;
+          _context46.next = 10;
           return wait();
         case 10:
           expect(loadingMedia.className).to.contain('k-media-loading');
@@ -927,32 +1079,32 @@ describe('Media', function () {
           expect(doneMedia.querySelector('.k-media-preview-trigger').disabled).to.eql(false);
         case 20:
         case "end":
-          return _context40.stop();
+          return _context46.stop();
       }
-    }, _callee20);
+    }, _callee23);
   })));
   // 音频 loading 展示居中的音频图标，并和图片/视频一致展示左上角加载圆圈。
-  it('should render centered audio icon and loading indicator for loading audio card', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee21() {
-    var Demo, _mount21, element, audio, mini, compact, singleWidth, customSize, wide, icon, miniIcon, compactIcon, singleWidthIcon, customSizeIcon, wideIcon;
-    return _regeneratorRuntime.wrap(function _callee21$(_context42) {
-      while (1) switch (_context42.prev = _context42.next) {
+  it('should render centered audio icon and loading indicator for loading audio card', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee24() {
+    var Demo, _mount24, element, audio, mini, compact, singleWidth, customSize, wide, icon, miniIcon, compactIcon, singleWidthIcon, customSizeIcon, wideIcon;
+    return _regeneratorRuntime.wrap(function _callee24$(_context48) {
+      while (1) switch (_context48.prev = _context48.next) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component21) {
-            _inheritsLoose(Demo, _Component21);
+          Demo = /*#__PURE__*/function (_Component24) {
+            _inheritsLoose(Demo, _Component24);
             function Demo() {
-              var _context41;
-              var _this21;
-              for (var _len21 = arguments.length, args = new Array(_len21), _key21 = 0; _key21 < _len21; _key21++) {
-                args[_key21] = arguments[_key21];
+              var _context47;
+              var _this24;
+              for (var _len24 = arguments.length, args = new Array(_len24), _key24 = 0; _key24 < _len24; _key24++) {
+                args[_key24] = arguments[_key24];
               }
-              _this21 = _Component21.call.apply(_Component21, _concatInstanceProperty(_context41 = [this]).call(_context41, args)) || this;
-              _this21.Media = Media;
-              return _this21;
+              _this24 = _Component24.call.apply(_Component24, _concatInstanceProperty(_context47 = [this]).call(_context47, args)) || this;
+              _this24.Media = Media;
+              return _this24;
             }
             return Demo;
           }(Component);
           Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media className=\"audio-loading\" type=\"audio\" status=\"loading\" src=\"https://example.com/loading.mp3\" />\n                    <Media className=\"audio-loading-mini\" type=\"audio\" size=\"mini\" status=\"loading\" src=\"https://example.com/loading.mp3\" />\n                    <Media className=\"audio-loading-compact\" type=\"audio\" width={20} height={28} status=\"loading\" src=\"https://example.com/loading.mp3\" />\n                    <Media className=\"audio-loading-single-width\" type=\"audio\" width={18} status=\"loading\" src=\"https://example.com/loading.mp3\" />\n                    <Media className=\"audio-loading-custom-size\" type=\"audio\" size={22} status=\"loading\" src=\"https://example.com/loading.mp3\" />\n                    <Media className=\"audio-loading-wide\" type=\"audio\" width={36} height={40} status=\"loading\" src=\"https://example.com/loading.mp3\" />\n                </div>\n            ";
-          _mount21 = mount(Demo), element = _mount21[1];
+          _mount24 = mount(Demo), element = _mount24[1];
           audio = element.querySelector('.audio-loading');
           mini = element.querySelector('.audio-loading-mini');
           compact = element.querySelector('.audio-loading-compact');
@@ -983,32 +1135,32 @@ describe('Media', function () {
           expect(getComputedStyle(wideIcon).height).to.eql('32px');
         case 31:
         case "end":
-          return _context42.stop();
+          return _context48.stop();
       }
-    }, _callee21);
+    }, _callee24);
   })));
   // 图片/视频 loading 使用骨架底图和小型加载圆圈。
-  it('should render skeleton loading styles with spinner', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee22() {
-    var Demo, _mount22, element, shell, indicator, spinner, miniIndicator, miniSpinner, shellStyle;
-    return _regeneratorRuntime.wrap(function _callee22$(_context44) {
-      while (1) switch (_context44.prev = _context44.next) {
+  it('should render skeleton loading styles with spinner', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee25() {
+    var Demo, _mount25, element, shell, indicator, spinner, miniIndicator, miniSpinner, shellStyle;
+    return _regeneratorRuntime.wrap(function _callee25$(_context50) {
+      while (1) switch (_context50.prev = _context50.next) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component22) {
-            _inheritsLoose(Demo, _Component22);
+          Demo = /*#__PURE__*/function (_Component25) {
+            _inheritsLoose(Demo, _Component25);
             function Demo() {
-              var _context43;
-              var _this22;
-              for (var _len22 = arguments.length, args = new Array(_len22), _key22 = 0; _key22 < _len22; _key22++) {
-                args[_key22] = arguments[_key22];
+              var _context49;
+              var _this25;
+              for (var _len25 = arguments.length, args = new Array(_len25), _key25 = 0; _key25 < _len25; _key25++) {
+                args[_key25] = arguments[_key25];
               }
-              _this22 = _Component22.call.apply(_Component22, _concatInstanceProperty(_context43 = [this]).call(_context43, args)) || this;
-              _this22.Media = Media;
-              return _this22;
+              _this25 = _Component25.call.apply(_Component25, _concatInstanceProperty(_context49 = [this]).call(_context49, args)) || this;
+              _this25.Media = Media;
+              return _this25;
             }
             return Demo;
           }(Component);
           Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media className=\"loading-media\" type=\"image\" status=\"loading\" src=\"https://example.com/loading.png\" />\n                    <Media className=\"mini-loading-media\" type=\"image\" size=\"mini\" status=\"loading\" src=\"https://example.com/loading.png\" />\n                </div>\n            ";
-          _mount22 = mount(Demo), element = _mount22[1];
+          _mount25 = mount(Demo), element = _mount25[1];
           shell = element.querySelector('.loading-media .k-media-shell');
           indicator = element.querySelector('.loading-media .k-media-loading-indicator');
           spinner = element.querySelector('.loading-media .k-media-loading-spinner');
@@ -1025,33 +1177,70 @@ describe('Media', function () {
           expect(getComputedStyle(miniSpinner).width).to.eql('10px');
         case 17:
         case "end":
-          return _context44.stop();
+          return _context50.stop();
+      }
+    }, _callee25);
+  })));
+  // loading 圆圈颜色跟随主题主色，和 Bubble loading 点一致。
+  it('should use theme primary color for loading spinner', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee26() {
+    var Demo, _mount26, element, spinner, style;
+    return _regeneratorRuntime.wrap(function _callee26$(_context52) {
+      while (1) switch (_context52.prev = _context52.next) {
+        case 0:
+          setTheme({
+            color: {
+              primary: '#7c3aed'
+            }
+          });
+          Demo = /*#__PURE__*/function (_Component26) {
+            _inheritsLoose(Demo, _Component26);
+            function Demo() {
+              var _context51;
+              var _this26;
+              for (var _len26 = arguments.length, args = new Array(_len26), _key26 = 0; _key26 < _len26; _key26++) {
+                args[_key26] = arguments[_key26];
+              }
+              _this26 = _Component26.call.apply(_Component26, _concatInstanceProperty(_context51 = [this]).call(_context51, args)) || this;
+              _this26.Media = Media;
+              return _this26;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media } = this;\n                <Media type=\"image\" status=\"loading\" src=\"https://example.com/loading.png\" />\n            ";
+          _mount26 = mount(Demo), element = _mount26[1];
+          spinner = element.querySelector('.k-media-loading-spinner');
+          style = getComputedStyle(spinner);
+          expect(style.borderTopColor).to.eql('rgb(124, 58, 237)');
+          expect(style.borderRightColor).to.eql('rgba(124, 58, 237, 0.22)');
+        case 8:
+        case "end":
+          return _context52.stop();
       }
-    }, _callee22);
+    }, _callee26);
   })));
   // loading/error 插槽可接管默认状态层展示。
-  it('should render custom loading and error slots', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee23() {
+  it('should render custom loading and error slots', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee27() {
     var _loading$querySelecto, _error$querySelector, _audioLoading$querySe, _audioError$querySele;
-    var Demo, _mount23, element, loading, error, audioLoading, audioError;
-    return _regeneratorRuntime.wrap(function _callee23$(_context46) {
-      while (1) switch (_context46.prev = _context46.next) {
+    var Demo, _mount27, element, loading, error, audioLoading, audioError;
+    return _regeneratorRuntime.wrap(function _callee27$(_context54) {
+      while (1) switch (_context54.prev = _context54.next) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component23) {
-            _inheritsLoose(Demo, _Component23);
+          Demo = /*#__PURE__*/function (_Component27) {
+            _inheritsLoose(Demo, _Component27);
             function Demo() {
-              var _context45;
-              var _this23;
-              for (var _len23 = arguments.length, args = new Array(_len23), _key23 = 0; _key23 < _len23; _key23++) {
-                args[_key23] = arguments[_key23];
+              var _context53;
+              var _this27;
+              for (var _len27 = arguments.length, args = new Array(_len27), _key27 = 0; _key27 < _len27; _key27++) {
+                args[_key27] = arguments[_key27];
               }
-              _this23 = _Component23.call.apply(_Component23, _concatInstanceProperty(_context45 = [this]).call(_context45, args)) || this;
-              _this23.Media = Media;
-              return _this23;
+              _this27 = _Component27.call.apply(_Component27, _concatInstanceProperty(_context53 = [this]).call(_context53, args)) || this;
+              _this27.Media = Media;
+              return _this27;
             }
             return Demo;
           }(Component);
           Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        className=\"custom-loading\"\n                        name=\"\u4E0A\u4F20\u4E2D.png\"\n                        type=\"image\"\n                        status=\"loading\"\n                        src=\"https://example.com/loading.png\"\n                    >\n                        <b:loading args=\"media\">\n                            <div class=\"custom-loading-slot\">\n                                {media.status} / {media.resolvedType} / {media.name}\n                            </div>\n                        </b:loading>\n                    </Media>\n                    <Media\n                        className=\"custom-error\"\n                        name=\"\u52A0\u8F7D\u5931\u8D25.mp4\"\n                        type=\"video\"\n                        status=\"error\"\n                        src=\"https://example.com/error.mp4\"\n                    >\n                        <b:error args=\"media\">\n                            <button class=\"custom-error-slot\" type=\"button\">\n                                {media.status} / {media.resolvedType} / {media.name}\n                            </button>\n                        </b:error>\n                    </Media>\n                    <Media\n                        className=\"custom-audio-loading\"\n                        name=\"\u4E0A\u4F20\u4E2D.mp3\"\n                        type=\"audio\"\n                        status=\"loading\"\n                        src=\"https://example.com/loading.mp3\"\n                    >\n                        <b:loading args=\"media\">\n                            <div class=\"custom-audio-loading-slot\">\n                                {media.status} / {media.resolvedType} / {media.name}\n                            </div>\n                        </b:loading>\n                    </Media>\n                    <Media\n                        className=\"custom-audio-error\"\n                        name=\"\u52A0\u8F7D\u5931\u8D25.mp3\"\n                        type=\"audio\"\n                        status=\"error\"\n                        src=\"https://example.com/error.mp3\"\n                    >\n                        <b:error args=\"media\">\n                            <div class=\"custom-audio-error-slot\">\n                                {media.status} / {media.resolvedType} / {media.name}\n                            </div>\n                        </b:error>\n                    </Media>\n                </div>\n            ";
-          _mount23 = mount(Demo), element = _mount23[1];
+          _mount27 = mount(Demo), element = _mount27[1];
           loading = element.querySelector('.custom-loading');
           error = element.querySelector('.custom-error');
           audioLoading = element.querySelector('.custom-audio-loading');
@@ -1073,32 +1262,32 @@ describe('Media', function () {
           expect(audioError.querySelector('.k-media-audio-card')).to.eql(null);
         case 22:
         case "end":
-          return _context46.stop();
+          return _context54.stop();
       }
-    }, _callee23);
+    }, _callee27);
   })));
   // loading/error/mask 插槽为空时，不接管默认状态和预览入口。
-  it('should ignore empty state and mask slots', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee24() {
-    var Demo, _mount24, element, loading, error, mask;
-    return _regeneratorRuntime.wrap(function _callee24$(_context48) {
-      while (1) switch (_context48.prev = _context48.next) {
+  it('should ignore empty state and mask slots', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee28() {
+    var Demo, _mount28, element, loading, error, mask;
+    return _regeneratorRuntime.wrap(function _callee28$(_context56) {
+      while (1) switch (_context56.prev = _context56.next) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component24) {
-            _inheritsLoose(Demo, _Component24);
+          Demo = /*#__PURE__*/function (_Component28) {
+            _inheritsLoose(Demo, _Component28);
             function Demo() {
-              var _context47;
-              var _this24;
-              for (var _len24 = arguments.length, args = new Array(_len24), _key24 = 0; _key24 < _len24; _key24++) {
-                args[_key24] = arguments[_key24];
+              var _context55;
+              var _this28;
+              for (var _len28 = arguments.length, args = new Array(_len28), _key28 = 0; _key28 < _len28; _key28++) {
+                args[_key28] = arguments[_key28];
               }
-              _this24 = _Component24.call.apply(_Component24, _concatInstanceProperty(_context47 = [this]).call(_context47, args)) || this;
-              _this24.Media = Media;
-              return _this24;
+              _this28 = _Component28.call.apply(_Component28, _concatInstanceProperty(_context55 = [this]).call(_context55, args)) || this;
+              _this28.Media = Media;
+              return _this28;
             }
             return Demo;
           }(Component);
           Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media className=\"empty-loading\" type=\"image\" status=\"loading\" src=\"https://example.com/loading.png\">\n                        <b:loading>\n                            <span v-if={false} class=\"empty-loading-slot\">loading</span>\n                        </b:loading>\n                    </Media>\n                    <Media className=\"empty-error\" type=\"image\" status=\"error\" src=\"https://example.com/error.png\">\n                        <b:error>\n                            <span v-if={false} class=\"empty-error-slot\">error</span>\n                        </b:error>\n                    </Media>\n                    <Media className=\"empty-mask\" type=\"image\" status=\"done\" src=\"https://example.com/cover.png\">\n                        <b:mask>\n                            <button v-if={false} class=\"empty-mask-slot\" type=\"button\">open</button>\n                        </b:mask>\n                    </Media>\n                </div>\n            ";
-          _mount24 = mount(Demo), element = _mount24[1];
+          _mount28 = mount(Demo), element = _mount28[1];
           loading = element.querySelector('.empty-loading');
           error = element.querySelector('.empty-error');
           mask = element.querySelector('.empty-mask');
@@ -1113,32 +1302,32 @@ describe('Media', function () {
           expect(mask.querySelector('.k-media-preview-trigger')).not.to.eql(null);
         case 15:
         case "end":
-          return _context48.stop();
+          return _context56.stop();
       }
-    }, _callee24);
+    }, _callee28);
   })));
   // 图片/视频/音频 error 展示居中的灰色类型图标，不展示默认失败文案。
-  it('should render centered gray media icons for failed media cards', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee25() {
-    var Demo, _mount25, element, image, imageCompact, video, audio, mini, imageIcon, compactIcon, videoIcon, audioIcon, miniIcon;
-    return _regeneratorRuntime.wrap(function _callee25$(_context50) {
-      while (1) switch (_context50.prev = _context50.next) {
+  it('should render centered gray media icons for failed media cards', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee29() {
+    var Demo, _mount29, element, image, imageCompact, video, audio, mini, imageIcon, compactIcon, videoIcon, audioIcon, miniIcon;
+    return _regeneratorRuntime.wrap(function _callee29$(_context58) {
+      while (1) switch (_context58.prev = _context58.next) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component25) {
-            _inheritsLoose(Demo, _Component25);
+          Demo = /*#__PURE__*/function (_Component29) {
+            _inheritsLoose(Demo, _Component29);
             function Demo() {
-              var _context49;
-              var _this25;
-              for (var _len25 = arguments.length, args = new Array(_len25), _key25 = 0; _key25 < _len25; _key25++) {
-                args[_key25] = arguments[_key25];
+              var _context57;
+              var _this29;
+              for (var _len29 = arguments.length, args = new Array(_len29), _key29 = 0; _key29 < _len29; _key29++) {
+                args[_key29] = arguments[_key29];
               }
-              _this25 = _Component25.call.apply(_Component25, _concatInstanceProperty(_context49 = [this]).call(_context49, args)) || this;
-              _this25.Media = Media;
-              return _this25;
+              _this29 = _Component29.call.apply(_Component29, _concatInstanceProperty(_context57 = [this]).call(_context57, args)) || this;
+              _this29.Media = Media;
+              return _this29;
             }
             return Demo;
           }(Component);
           Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media className=\"image-error\" type=\"image\" status=\"error\" src=\"https://example.com/error.png\" />\n                    <Media className=\"image-error-compact\" type=\"image\" width={20} height={28} status=\"error\" src=\"https://example.com/error.png\" />\n                    <Media className=\"video-error\" type=\"video\" status=\"error\" src=\"https://example.com/error.mp4\" />\n                    <Media className=\"audio-error\" type=\"audio\" status=\"error\" src=\"https://example.com/error.mp3\" />\n                    <Media className=\"audio-error-mini\" type=\"audio\" size=\"mini\" status=\"error\" src=\"https://example.com/error.mp3\" />\n                </div>\n            ";
-          _mount25 = mount(Demo), element = _mount25[1];
+          _mount29 = mount(Demo), element = _mount29[1];
           image = element.querySelector('.image-error');
           imageCompact = element.querySelector('.image-error-compact');
           video = element.querySelector('.video-error');
@@ -1166,32 +1355,32 @@ describe('Media', function () {
           expect(element.querySelector('.k-media-status-layer')).to.eql(null);
         case 28:
         case "end":
-          return _context50.stop();
+          return _context58.stop();
       }
-    }, _callee25);
+    }, _callee29);
   })));
   // 名称 Tooltip 默认关闭，显式开启后图片/视频/音频缩略图 hover 时展示最大 160px 的名称。
-  it('should hide media name tooltip by default and allow enabling it', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee26() {
-    var Demo, _mount26, element, imageWithTooltip, videoWithTooltip, audioWithTooltip, withoutTooltip, imageTooltipTrigger, videoTooltipTrigger, audioTooltipTrigger, icon, content, name, videoPreviewTrigger;
-    return _regeneratorRuntime.wrap(function _callee26$(_context52) {
-      while (1) switch (_context52.prev = _context52.next) {
+  it('should hide media name tooltip by default and allow enabling it', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee30() {
+    var Demo, _mount30, element, imageWithTooltip, videoWithTooltip, audioWithTooltip, withoutTooltip, imageTooltipTrigger, videoTooltipTrigger, audioTooltipTrigger, icon, content, name, videoPreviewTrigger;
+    return _regeneratorRuntime.wrap(function _callee30$(_context60) {
+      while (1) switch (_context60.prev = _context60.next) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component26) {
-            _inheritsLoose(Demo, _Component26);
+          Demo = /*#__PURE__*/function (_Component30) {
+            _inheritsLoose(Demo, _Component30);
             function Demo() {
-              var _context51;
-              var _this26;
-              for (var _len26 = arguments.length, args = new Array(_len26), _key26 = 0; _key26 < _len26; _key26++) {
-                args[_key26] = arguments[_key26];
+              var _context59;
+              var _this30;
+              for (var _len30 = arguments.length, args = new Array(_len30), _key30 = 0; _key30 < _len30; _key30++) {
+                args[_key30] = arguments[_key30];
               }
-              _this26 = _Component26.call.apply(_Component26, _concatInstanceProperty(_context51 = [this]).call(_context51, args)) || this;
-              _this26.Media = Media;
-              return _this26;
+              _this30 = _Component30.call.apply(_Component30, _concatInstanceProperty(_context59 = [this]).call(_context59, args)) || this;
+              _this30.Media = Media;
+              return _this30;
             }
             return Demo;
           }(Component);
           Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        className=\"image-with-tooltip\"\n                        name=\"\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u7684\u56FE\u7247\u540D\u79F0.png\"\n                        type=\"image\"\n                        status=\"done\"\n                        src=\"https://example.com/cover.png\"\n                        showNameTooltip={true}\n                        nameTooltipProps={{position: 'bottom'}}\n                    />\n                    <Media\n                        className=\"video-with-tooltip\"\n                        name=\"\u4EA7\u54C1\u9884\u544A.mp4\"\n                        type=\"video\"\n                        status=\"done\"\n                        src=\"https://example.com/demo.mp4\"\n                        showNameTooltip={true}\n                    />\n                    <Media\n                        className=\"audio-with-tooltip\"\n                        name=\"\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u7684\u97F3\u9891\u540D\u79F0.mp3\"\n                        type=\"audio\"\n                        status=\"done\"\n                        src=\"https://example.com/demo.mp3\"\n                        showNameTooltip={true}\n                    />\n                    <Media\n                        className=\"audio-without-tooltip\"\n                        name=\"\u666E\u901A\u97F3\u9891.mp3\"\n                        type=\"audio\"\n                        status=\"done\"\n                        src=\"https://example.com/normal.mp3\"\n                        showNameTooltip={false}\n                    />\n                </div>\n            ";
-          _mount26 = mount(Demo), element = _mount26[1];
+          _mount30 = mount(Demo), element = _mount30[1];
           imageWithTooltip = element.querySelector('.image-with-tooltip');
           videoWithTooltip = element.querySelector('.video-with-tooltip');
           audioWithTooltip = element.querySelector('.audio-with-tooltip');
@@ -1212,7 +1401,7 @@ describe('Media', function () {
           expect(getComputedStyle(icon).width).to.eql('32px');
           expect(getComputedStyle(icon).height).to.eql('32px');
           dispatchEvent(imageTooltipTrigger, 'mouseenter');
-          _context52.next = 25;
+          _context60.next = 25;
           return wait(0);
         case 25:
           content = getElement('.k-tooltip-content');
@@ -1224,23 +1413,23 @@ describe('Media', function () {
           expect(getComputedStyle(name).textOverflow).to.eql('ellipsis');
           expect(content.querySelector('.k-tooltip-arrow').className).to.contain('k-top');
           dispatchEvent(imageTooltipTrigger, 'mouseleave');
-          _context52.next = 36;
+          _context60.next = 36;
           return wait(0);
         case 36:
           videoPreviewTrigger = videoWithTooltip.querySelector('.k-media-video-preview-trigger');
           dispatchEvent(videoPreviewTrigger, 'mouseenter');
-          _context52.next = 40;
+          _context60.next = 40;
           return wait(0);
         case 40:
           content = getElement('.k-tooltip-content');
           expect(content.textContent).to.contain('产品预告.mp4');
           expect(content.className).to.contain('k-light');
           dispatchEvent(videoPreviewTrigger, 'mouseleave');
-          _context52.next = 46;
+          _context60.next = 46;
           return wait(0);
         case 46:
           dispatchEvent(audioTooltipTrigger, 'mouseenter');
-          _context52.next = 49;
+          _context60.next = 49;
           return wait(0);
         case 49:
           content = getElement('.k-tooltip-content');
@@ -1249,32 +1438,32 @@ describe('Media', function () {
           expect(name.style.maxWidth).to.eql('160px');
         case 53:
         case "end":
-          return _context52.stop();
+          return _context60.stop();
       }
-    }, _callee26);
+    }, _callee30);
   })));
   // size 支持预设尺寸和自定义正方形尺寸。
-  it('should support named and custom sizes', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee27() {
-    var Demo, _mount27, element, small, custom;
-    return _regeneratorRuntime.wrap(function _callee27$(_context54) {
-      while (1) switch (_context54.prev = _context54.next) {
+  it('should support named and custom sizes', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee31() {
+    var Demo, _mount31, element, small, custom;
+    return _regeneratorRuntime.wrap(function _callee31$(_context62) {
+      while (1) switch (_context62.prev = _context62.next) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component27) {
-            _inheritsLoose(Demo, _Component27);
+          Demo = /*#__PURE__*/function (_Component31) {
+            _inheritsLoose(Demo, _Component31);
             function Demo() {
-              var _context53;
-              var _this27;
-              for (var _len27 = arguments.length, args = new Array(_len27), _key27 = 0; _key27 < _len27; _key27++) {
-                args[_key27] = arguments[_key27];
+              var _context61;
+              var _this31;
+              for (var _len31 = arguments.length, args = new Array(_len31), _key31 = 0; _key31 < _len31; _key31++) {
+                args[_key31] = arguments[_key31];
               }
-              _this27 = _Component27.call.apply(_Component27, _concatInstanceProperty(_context53 = [this]).call(_context53, args)) || this;
-              _this27.Media = Media;
-              return _this27;
+              _this31 = _Component31.call.apply(_Component31, _concatInstanceProperty(_context61 = [this]).call(_context61, args)) || this;
+              _this31.Media = Media;
+              return _this31;
             }
             return Demo;
           }(Component);
           Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media className=\"small-media\" type=\"image\" size=\"small\" src=\"https://example.com/a.png\" />\n                    <Media className=\"custom-media\" type=\"image\" size={88} src=\"https://example.com/b.png\" />\n                </div>\n            ";
-          _mount27 = mount(Demo), element = _mount27[1];
+          _mount31 = mount(Demo), element = _mount31[1];
           small = element.querySelector('.small-media');
           custom = element.querySelector('.custom-media');
           expect(small.className).to.contain('k-media-small');
@@ -1282,32 +1471,32 @@ describe('Media', function () {
           expect(custom.style.height).to.eql('88px');
         case 8:
         case "end":
-          return _context54.stop();
+          return _context62.stop();
       }
-    }, _callee27);
+    }, _callee31);
   })));
   // width/height 单边传入时镜像另一边，双边传入时各自生效。
-  it('should mirror single width or height and respect explicit dimensions', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee28() {
-    var Demo, _mount28, element, widthOnly, heightOnly, both;
-    return _regeneratorRuntime.wrap(function _callee28$(_context56) {
-      while (1) switch (_context56.prev = _context56.next) {
+  it('should mirror single width or height and respect explicit dimensions', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee32() {
+    var Demo, _mount32, element, widthOnly, heightOnly, both;
+    return _regeneratorRuntime.wrap(function _callee32$(_context64) {
+      while (1) switch (_context64.prev = _context64.next) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component28) {
-            _inheritsLoose(Demo, _Component28);
+          Demo = /*#__PURE__*/function (_Component32) {
+            _inheritsLoose(Demo, _Component32);
             function Demo() {
-              var _context55;
-              var _this28;
-              for (var _len28 = arguments.length, args = new Array(_len28), _key28 = 0; _key28 < _len28; _key28++) {
-                args[_key28] = arguments[_key28];
+              var _context63;
+              var _this32;
+              for (var _len32 = arguments.length, args = new Array(_len32), _key32 = 0; _key32 < _len32; _key32++) {
+                args[_key32] = arguments[_key32];
               }
-              _this28 = _Component28.call.apply(_Component28, _concatInstanceProperty(_context55 = [this]).call(_context55, args)) || this;
-              _this28.Media = Media;
-              return _this28;
+              _this32 = _Component32.call.apply(_Component32, _concatInstanceProperty(_context63 = [this]).call(_context63, args)) || this;
+              _this32.Media = Media;
+              return _this32;
             }
             return Demo;
           }(Component);
           Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media className=\"width-only\" type=\"image\" width={120} src=\"https://example.com/a.png\" />\n                    <Media className=\"height-only\" type=\"image\" height=\"48px\" src=\"https://example.com/b.png\" />\n                    <Media className=\"both-dimensions\" type=\"image\" width={120} height={80} src=\"https://example.com/c.png\" />\n                </div>\n            ";
-          _mount28 = mount(Demo), element = _mount28[1];
+          _mount32 = mount(Demo), element = _mount32[1];
           widthOnly = element.querySelector('.width-only');
           heightOnly = element.querySelector('.height-only');
           both = element.querySelector('.both-dimensions');
@@ -1319,68 +1508,68 @@ describe('Media', function () {
           expect(both.style.height).to.eql('80px');
         case 12:
         case "end":
-          return _context56.stop();
+          return _context64.stop();
       }
-    }, _callee28);
+    }, _callee32);
   })));
   // 根节点透传 class/style/data/aria 等通用属性。
-  it('should pass rest props to root element', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee29() {
-    var Demo, _mount29, element, media;
-    return _regeneratorRuntime.wrap(function _callee29$(_context58) {
-      while (1) switch (_context58.prev = _context58.next) {
+  it('should pass rest props to root element', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee33() {
+    var Demo, _mount33, element, media;
+    return _regeneratorRuntime.wrap(function _callee33$(_context66) {
+      while (1) switch (_context66.prev = _context66.next) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component29) {
-            _inheritsLoose(Demo, _Component29);
+          Demo = /*#__PURE__*/function (_Component33) {
+            _inheritsLoose(Demo, _Component33);
             function Demo() {
-              var _context57;
-              var _this29;
-              for (var _len29 = arguments.length, args = new Array(_len29), _key29 = 0; _key29 < _len29; _key29++) {
-                args[_key29] = arguments[_key29];
+              var _context65;
+              var _this33;
+              for (var _len33 = arguments.length, args = new Array(_len33), _key33 = 0; _key33 < _len33; _key33++) {
+                args[_key33] = arguments[_key33];
               }
-              _this29 = _Component29.call.apply(_Component29, _concatInstanceProperty(_context57 = [this]).call(_context57, args)) || this;
-              _this29.Media = Media;
-              return _this29;
+              _this33 = _Component33.call.apply(_Component33, _concatInstanceProperty(_context65 = [this]).call(_context65, args)) || this;
+              _this33.Media = Media;
+              return _this33;
             }
             return Demo;
           }(Component);
           Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        className=\"rest-media\"\n                        type=\"image\"\n                        status=\"done\"\n                        src=\"https://example.com/cover.png\"\n                        style={{marginTop: '3px'}}\n                        data-id=\"media\"\n                        aria-label=\"\u5A92\u4F53\u7F29\u7565\u56FE\"\n                    />\n                </div>\n            ";
-          _mount29 = mount(Demo), element = _mount29[1];
+          _mount33 = mount(Demo), element = _mount33[1];
           media = element.querySelector('.rest-media');
           expect(media.style.marginTop).to.eql('3px');
           expect(media.getAttribute('data-id')).to.eql('media');
           expect(media.getAttribute('aria-label')).to.eql('媒体缩略图');
         case 7:
         case "end":
-          return _context58.stop();
+          return _context66.stop();
       }
-    }, _callee29);
+    }, _callee33);
   })));
   // 单项预览可打开并通过关闭按钮关闭。
-  it('should open and close standalone preview', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee30() {
+  it('should open and close standalone preview', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee34() {
     var _getElement3;
-    var Demo, _mount30, element, trigger, viewer;
-    return _regeneratorRuntime.wrap(function _callee30$(_context60) {
-      while (1) switch (_context60.prev = _context60.next) {
+    var Demo, _mount34, element, trigger, viewer;
+    return _regeneratorRuntime.wrap(function _callee34$(_context68) {
+      while (1) switch (_context68.prev = _context68.next) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component30) {
-            _inheritsLoose(Demo, _Component30);
+          Demo = /*#__PURE__*/function (_Component34) {
+            _inheritsLoose(Demo, _Component34);
             function Demo() {
-              var _context59;
-              var _this30;
-              for (var _len30 = arguments.length, args = new Array(_len30), _key30 = 0; _key30 < _len30; _key30++) {
-                args[_key30] = arguments[_key30];
+              var _context67;
+              var _this34;
+              for (var _len34 = arguments.length, args = new Array(_len34), _key34 = 0; _key34 < _len34; _key34++) {
+                args[_key34] = arguments[_key34];
               }
-              _this30 = _Component30.call.apply(_Component30, _concatInstanceProperty(_context59 = [this]).call(_context59, args)) || this;
-              _this30.Media = Media;
-              return _this30;
+              _this34 = _Component34.call.apply(_Component34, _concatInstanceProperty(_context67 = [this]).call(_context67, args)) || this;
+              _this34.Media = Media;
+              return _this34;
             }
             return Demo;
           }(Component);
           Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        name=\"\u5C01\u9762\u56FE\"\n                        type=\"image\"\n                        status=\"done\"\n                        src=\"https://example.com/cover.png\"\n                    />\n                </div>\n            ";
-          _mount30 = mount(Demo), element = _mount30[1];
+          _mount34 = mount(Demo), element = _mount34[1];
           trigger = element.querySelector('.k-media-preview-trigger');
           trigger.click();
-          _context60.next = 7;
+          _context68.next = 7;
           return wait();
         case 7:
           viewer = getElement('.k-media-viewer');
@@ -1389,76 +1578,76 @@ describe('Media', function () {
           expect(getComputedStyle(viewer).display).to.eql('flex');
           expect((_getElement3 = getElement('.k-media-viewer-title')) == null ? void 0 : _getElement3.textContent).to.contain('封面图');
           getElement('.k-media-viewer-close').click();
-          _context60.next = 15;
+          _context68.next = 15;
           return wait(400);
         case 15:
           expectViewerClosed();
         case 16:
         case "end":
-          return _context60.stop();
+          return _context68.stop();
       }
-    }, _callee30);
+    }, _callee34);
   })));
   // 单项预览支持挂载到指定 Portal 容器。
-  it('should mount standalone preview into custom container', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee31() {
-    var Demo, _mount31, element, container;
-    return _regeneratorRuntime.wrap(function _callee31$(_context62) {
-      while (1) switch (_context62.prev = _context62.next) {
+  it('should mount standalone preview into custom container', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee35() {
+    var Demo, _mount35, element, container;
+    return _regeneratorRuntime.wrap(function _callee35$(_context70) {
+      while (1) switch (_context70.prev = _context70.next) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component31) {
-            _inheritsLoose(Demo, _Component31);
+          Demo = /*#__PURE__*/function (_Component35) {
+            _inheritsLoose(Demo, _Component35);
             function Demo() {
-              var _context61;
-              var _this31;
-              for (var _len31 = arguments.length, args = new Array(_len31), _key31 = 0; _key31 < _len31; _key31++) {
-                args[_key31] = arguments[_key31];
+              var _context69;
+              var _this35;
+              for (var _len35 = arguments.length, args = new Array(_len35), _key35 = 0; _key35 < _len35; _key35++) {
+                args[_key35] = arguments[_key35];
               }
-              _this31 = _Component31.call.apply(_Component31, _concatInstanceProperty(_context61 = [this]).call(_context61, args)) || this;
-              _this31.Media = Media;
-              return _this31;
+              _this35 = _Component35.call.apply(_Component35, _concatInstanceProperty(_context69 = [this]).call(_context69, args)) || this;
+              _this35.Media = Media;
+              return _this35;
             }
             return Demo;
           }(Component);
           Demo.template = "\n                const { Media } = this;\n                <div>\n                    <div id=\"media-preview-container\"></div>\n                    <Media\n                        type=\"image\"\n                        status=\"done\"\n                        src=\"https://example.com/cover.png\"\n                        container=\"#media-preview-container\"\n                    />\n                </div>\n            ";
-          _mount31 = mount(Demo), element = _mount31[1];
+          _mount35 = mount(Demo), element = _mount35[1];
           element.querySelector('.k-media-preview-trigger').click();
-          _context62.next = 6;
+          _context70.next = 6;
           return wait();
         case 6:
           container = element.querySelector('#media-preview-container');
           expect(container.querySelector('.k-media-viewer')).not.to.eql(null);
         case 8:
         case "end":
-          return _context62.stop();
+          return _context70.stop();
       }
-    }, _callee31);
+    }, _callee35);
   })));
   // 点击真实预览内容不关闭，点击内容空白区或遮罩关闭。
-  it('should close standalone preview on mask click only', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee32() {
-    var Demo, _mount32, element, previewTrigger, stage, content, viewer;
-    return _regeneratorRuntime.wrap(function _callee32$(_context64) {
-      while (1) switch (_context64.prev = _context64.next) {
+  it('should close standalone preview on mask click only', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee36() {
+    var Demo, _mount36, element, previewTrigger, stage, content, viewer;
+    return _regeneratorRuntime.wrap(function _callee36$(_context72) {
+      while (1) switch (_context72.prev = _context72.next) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component32) {
-            _inheritsLoose(Demo, _Component32);
+          Demo = /*#__PURE__*/function (_Component36) {
+            _inheritsLoose(Demo, _Component36);
             function Demo() {
-              var _context63;
-              var _this32;
-              for (var _len32 = arguments.length, args = new Array(_len32), _key32 = 0; _key32 < _len32; _key32++) {
-                args[_key32] = arguments[_key32];
+              var _context71;
+              var _this36;
+              for (var _len36 = arguments.length, args = new Array(_len36), _key36 = 0; _key36 < _len36; _key36++) {
+                args[_key36] = arguments[_key36];
               }
-              _this32 = _Component32.call.apply(_Component32, _concatInstanceProperty(_context63 = [this]).call(_context63, args)) || this;
-              _this32.Media = Media;
-              return _this32;
+              _this36 = _Component36.call.apply(_Component36, _concatInstanceProperty(_context71 = [this]).call(_context71, args)) || this;
+              _this36.Media = Media;
+              return _this36;
             }
             return Demo;
           }(Component);
           Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        type=\"image\"\n                        status=\"done\"\n                        src=\"https://example.com/cover.png\"\n                    />\n                </div>\n            ";
-          _mount32 = mount(Demo), element = _mount32[1];
+          _mount36 = mount(Demo), element = _mount36[1];
           previewTrigger = element.querySelector('.k-media-preview-trigger');
           expect(previewTrigger).to.exist;
           previewTrigger.click();
-          _context64.next = 8;
+          _context72.next = 8;
           return wait(60);
         case 8:
           stage = getElement('.k-media-viewer-stage');
@@ -1466,48 +1655,48 @@ describe('Media', function () {
           content = stage.querySelector('.k-media-viewer-image, .k-media-viewer-video, .k-media-viewer-audio');
           expect(content).to.exist;
           content.click();
-          _context64.next = 15;
+          _context72.next = 15;
           return wait();
         case 15:
           expect(getElement('.k-media-viewer')).not.to.eql(null);
           viewer = getElement('.k-media-viewer');
           expect(viewer).to.exist;
           viewer.click();
-          _context64.next = 21;
+          _context72.next = 21;
           return wait(400);
         case 21:
           expectViewerClosed();
         case 22:
         case "end":
-          return _context64.stop();
+          return _context72.stop();
       }
-    }, _callee32);
+    }, _callee36);
   })));
   // 预览层关闭、上一张、下一张按钮带有无障碍文案。
-  it('should render accessibility labels for viewer buttons', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee33() {
-    var Demo, _mount33, element;
-    return _regeneratorRuntime.wrap(function _callee33$(_context66) {
-      while (1) switch (_context66.prev = _context66.next) {
+  it('should render accessibility labels for viewer buttons', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee37() {
+    var Demo, _mount37, element;
+    return _regeneratorRuntime.wrap(function _callee37$(_context74) {
+      while (1) switch (_context74.prev = _context74.next) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component33) {
-            _inheritsLoose(Demo, _Component33);
+          Demo = /*#__PURE__*/function (_Component37) {
+            _inheritsLoose(Demo, _Component37);
             function Demo() {
-              var _context65;
-              var _this33;
-              for (var _len33 = arguments.length, args = new Array(_len33), _key33 = 0; _key33 < _len33; _key33++) {
-                args[_key33] = arguments[_key33];
+              var _context73;
+              var _this37;
+              for (var _len37 = arguments.length, args = new Array(_len37), _key37 = 0; _key37 < _len37; _key37++) {
+                args[_key37] = arguments[_key37];
               }
-              _this33 = _Component33.call.apply(_Component33, _concatInstanceProperty(_context65 = [this]).call(_context65, args)) || this;
-              _this33.Media = Media;
-              _this33.MediaGroup = MediaGroup;
-              return _this33;
+              _this37 = _Component37.call.apply(_Component37, _concatInstanceProperty(_context73 = [this]).call(_context73, args)) || this;
+              _this37.Media = Media;
+              _this37.MediaGroup = MediaGroup;
+              return _this37;
             }
             return Demo;
           }(Component);
           Demo.template = "\n                const { Media, MediaGroup } = this;\n                <MediaGroup>\n                    <Media name=\"\u7B2C\u4E00\u5F20\" type=\"image\" status=\"done\" src=\"https://example.com/1.png\" />\n                    <Media name=\"\u7B2C\u4E8C\u5F20\" type=\"image\" status=\"done\" src=\"https://example.com/2.png\" />\n                </MediaGroup>\n            ";
-          _mount33 = mount(Demo), element = _mount33[1];
+          _mount37 = mount(Demo), element = _mount37[1];
           element.querySelector('.k-media-preview-trigger').click();
-          _context66.next = 6;
+          _context74.next = 6;
           return wait();
         case 6:
           expect(getViewerButton('.k-media-viewer-close').getAttribute('aria-label')).to.eql('关闭预览');
@@ -1518,75 +1707,75 @@ describe('Media', function () {
           expect(getViewerButton('.k-media-viewer-next').title).to.eql('下一个');
         case 12:
         case "end":
-          return _context66.stop();
+          return _context74.stop();
       }
-    }, _callee33);
+    }, _callee37);
   })));
   // 音频预览复用缩略图中的默认音频封面素材。
-  it('should use the same audio asset in standalone preview', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee34() {
-    var Demo, _mount34, element, trigger, cover;
-    return _regeneratorRuntime.wrap(function _callee34$(_context68) {
-      while (1) switch (_context68.prev = _context68.next) {
+  it('should use the same audio asset in standalone preview', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee38() {
+    var Demo, _mount38, element, trigger, cover;
+    return _regeneratorRuntime.wrap(function _callee38$(_context76) {
+      while (1) switch (_context76.prev = _context76.next) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component34) {
-            _inheritsLoose(Demo, _Component34);
+          Demo = /*#__PURE__*/function (_Component38) {
+            _inheritsLoose(Demo, _Component38);
             function Demo() {
-              var _context67;
-              var _this34;
-              for (var _len34 = arguments.length, args = new Array(_len34), _key34 = 0; _key34 < _len34; _key34++) {
-                args[_key34] = arguments[_key34];
+              var _context75;
+              var _this38;
+              for (var _len38 = arguments.length, args = new Array(_len38), _key38 = 0; _key38 < _len38; _key38++) {
+                args[_key38] = arguments[_key38];
               }
-              _this34 = _Component34.call.apply(_Component34, _concatInstanceProperty(_context67 = [this]).call(_context67, args)) || this;
-              _this34.Media = Media;
-              return _this34;
+              _this38 = _Component38.call.apply(_Component38, _concatInstanceProperty(_context75 = [this]).call(_context75, args)) || this;
+              _this38.Media = Media;
+              return _this38;
             }
             return Demo;
           }(Component);
           Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        name=\"\u64AD\u5BA2\u7247\u6BB5.mp3\"\n                        type=\"audio\"\n                        status=\"done\"\n                        src=\"https://example.com/demo.mp3\"\n                    />\n                </div>\n            ";
-          _mount34 = mount(Demo), element = _mount34[1];
+          _mount38 = mount(Demo), element = _mount38[1];
           trigger = element.querySelector('.k-media-preview-trigger');
           trigger.click();
-          _context68.next = 7;
+          _context76.next = 7;
           return wait();
         case 7:
           cover = getElement('.k-media-viewer-audio-cover-image');
           expect(cover).not.to.eql(null);
           expect(cover.src).to.contain('data:image/svg+xml');
           getElement('.k-media-viewer-close').click();
-          _context68.next = 13;
+          _context76.next = 13;
           return wait(400);
         case 13:
           expectViewerClosed();
         case 14:
         case "end":
-          return _context68.stop();
+          return _context76.stop();
       }
-    }, _callee34);
+    }, _callee38);
   })));
   // MediaGroup 支持前后切换，并在首尾正确禁用按钮。
-  it('should switch preview items in media group and disable boundary buttons', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee35() {
+  it('should switch preview items in media group and disable boundary buttons', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee39() {
     var _getElement4, _getElement5, _getElement6, _getElement7, _getElement8, _getElement9, _getElement10, _getElement11;
-    var Demo, _mount35, element, group, firstMedia, triggers;
-    return _regeneratorRuntime.wrap(function _callee35$(_context70) {
-      while (1) switch (_context70.prev = _context70.next) {
+    var Demo, _mount39, element, group, firstMedia, triggers;
+    return _regeneratorRuntime.wrap(function _callee39$(_context78) {
+      while (1) switch (_context78.prev = _context78.next) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component35) {
-            _inheritsLoose(Demo, _Component35);
+          Demo = /*#__PURE__*/function (_Component39) {
+            _inheritsLoose(Demo, _Component39);
             function Demo() {
-              var _context69;
-              var _this35;
-              for (var _len35 = arguments.length, args = new Array(_len35), _key35 = 0; _key35 < _len35; _key35++) {
-                args[_key35] = arguments[_key35];
+              var _context77;
+              var _this39;
+              for (var _len39 = arguments.length, args = new Array(_len39), _key39 = 0; _key39 < _len39; _key39++) {
+                args[_key39] = arguments[_key39];
               }
-              _this35 = _Component35.call.apply(_Component35, _concatInstanceProperty(_context69 = [this]).call(_context69, args)) || this;
-              _this35.Media = Media;
-              _this35.MediaGroup = MediaGroup;
-              return _this35;
+              _this39 = _Component39.call.apply(_Component39, _concatInstanceProperty(_context77 = [this]).call(_context77, args)) || this;
+              _this39.Media = Media;
+              _this39.MediaGroup = MediaGroup;
+              return _this39;
             }
             return Demo;
           }(Component);
           Demo.template = "\n                const { Media, MediaGroup } = this;\n                <MediaGroup>\n                    <Media name=\"\u7B2C\u4E00\u5F20\" type=\"image\" status=\"done\" src=\"https://example.com/1.png\" />\n                    <Media name=\"\u7B2C\u4E8C\u5F20\" type=\"image\" status=\"done\" src=\"https://example.com/2.png\" />\n                    <Media name=\"\u7B2C\u4E09\u5F20\" type=\"image\" status=\"done\" src=\"https://example.com/3.png\" />\n                </MediaGroup>\n            ";
-          _mount35 = mount(Demo), element = _mount35[1];
+          _mount39 = mount(Demo), element = _mount39[1];
           group = getElement('.k-media-group');
           firstMedia = element.querySelector('.k-media');
           triggers = element.querySelectorAll('.k-media-preview-trigger');
@@ -1594,7 +1783,7 @@ describe('Media', function () {
           expect(getComputedStyle(firstMedia).width).to.eql('64px');
           expect(getComputedStyle(firstMedia).height).to.eql('64px');
           triggers[0].click();
-          _context70.next = 12;
+          _context78.next = 12;
           return wait();
         case 12:
           expect((_getElement4 = getElement('.k-media-viewer-title')) == null ? void 0 : _getElement4.textContent).to.contain('第一张');
@@ -1602,31 +1791,31 @@ describe('Media', function () {
           expect(getViewerButton('.k-media-viewer-prev').disabled).to.eql(true);
           expect(getViewerButton('.k-media-viewer-next').disabled).to.eql(false);
           getViewerButton('.k-media-viewer-prev').click();
-          _context70.next = 19;
+          _context78.next = 19;
           return wait();
         case 19:
           expect((_getElement6 = getElement('.k-media-viewer-title')) == null ? void 0 : _getElement6.textContent).to.contain('第一张');
           getViewerButton('.k-media-viewer-next').click();
-          _context70.next = 23;
+          _context78.next = 23;
           return wait();
         case 23:
           expect((_getElement7 = getElement('.k-media-viewer-title')) == null ? void 0 : _getElement7.textContent).to.contain('第二张');
           expect(getViewerButton('.k-media-viewer-prev').disabled).to.eql(false);
           expect(getViewerButton('.k-media-viewer-next').disabled).to.eql(false);
           getViewerButton('.k-media-viewer-prev').click();
-          _context70.next = 29;
+          _context78.next = 29;
           return wait();
         case 29:
           expect((_getElement8 = getElement('.k-media-viewer-title')) == null ? void 0 : _getElement8.textContent).to.contain('第一张');
           expect(getViewerButton('.k-media-viewer-prev').disabled).to.eql(true);
           getViewerButton('.k-media-viewer-next').click();
-          _context70.next = 34;
+          _context78.next = 34;
           return wait();
         case 34:
           dispatchEvent(document, 'keydown', {
             keyCode: 39
           });
-          _context70.next = 37;
+          _context78.next = 37;
           return wait();
         case 37:
           expect((_getElement9 = getElement('.k-media-viewer-title')) == null ? void 0 : _getElement9.textContent).to.contain('第三张');
@@ -1634,49 +1823,49 @@ describe('Media', function () {
           expect(getViewerButton('.k-media-viewer-prev').disabled).to.eql(false);
           expect(getViewerButton('.k-media-viewer-next').disabled).to.eql(true);
           getViewerButton('.k-media-viewer-next').click();
-          _context70.next = 44;
+          _context78.next = 44;
           return wait();
         case 44:
           expect((_getElement11 = getElement('.k-media-viewer-title')) == null ? void 0 : _getElement11.textContent).to.contain('第三张');
           dispatchEvent(document, 'keydown', {
             keyCode: 27
           });
-          _context70.next = 48;
+          _context78.next = 48;
           return wait(400);
         case 48:
           expectViewerClosed();
         case 49:
         case "end":
-          return _context70.stop();
+          return _context78.stop();
       }
-    }, _callee35);
+    }, _callee39);
   })));
   // MediaGroup 的预览层同样支持挂载到指定 Portal 容器。
-  it('should mount media group preview into custom container', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee36() {
+  it('should mount media group preview into custom container', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee40() {
     var _container$querySelec;
-    var Demo, _mount36, element, container;
-    return _regeneratorRuntime.wrap(function _callee36$(_context72) {
-      while (1) switch (_context72.prev = _context72.next) {
+    var Demo, _mount40, element, container;
+    return _regeneratorRuntime.wrap(function _callee40$(_context80) {
+      while (1) switch (_context80.prev = _context80.next) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component36) {
-            _inheritsLoose(Demo, _Component36);
+          Demo = /*#__PURE__*/function (_Component40) {
+            _inheritsLoose(Demo, _Component40);
             function Demo() {
-              var _context71;
-              var _this36;
-              for (var _len36 = arguments.length, args = new Array(_len36), _key36 = 0; _key36 < _len36; _key36++) {
-                args[_key36] = arguments[_key36];
+              var _context79;
+              var _this40;
+              for (var _len40 = arguments.length, args = new Array(_len40), _key40 = 0; _key40 < _len40; _key40++) {
+                args[_key40] = arguments[_key40];
               }
-              _this36 = _Component36.call.apply(_Component36, _concatInstanceProperty(_context71 = [this]).call(_context71, args)) || this;
-              _this36.Media = Media;
-              _this36.MediaGroup = MediaGroup;
-              return _this36;
+              _this40 = _Component40.call.apply(_Component40, _concatInstanceProperty(_context79 = [this]).call(_context79, args)) || this;
+              _this40.Media = Media;
+              _this40.MediaGroup = MediaGroup;
+              return _this40;
             }
             return Demo;
           }(Component);
           Demo.template = "\n                const { Media, MediaGroup } = this;\n                <div>\n                    <div id=\"media-group-preview-container\"></div>\n                    <MediaGroup container=\"#media-group-preview-container\">\n                        <Media name=\"\u7B2C\u4E00\u5F20\" type=\"image\" status=\"done\" src=\"https://example.com/1.png\" />\n                        <Media name=\"\u7B2C\u4E8C\u5F20\" type=\"image\" status=\"done\" src=\"https://example.com/2.png\" />\n                    </MediaGroup>\n                </div>\n            ";
-          _mount36 = mount(Demo), element = _mount36[1];
+          _mount40 = mount(Demo), element = _mount40[1];
           element.querySelector('.k-media-preview-trigger').click();
-          _context72.next = 6;
+          _context80.next = 6;
           return wait();
         case 6:
           container = element.querySelector('#media-group-preview-container');
@@ -1684,8 +1873,8 @@ describe('Media', function () {
           expect((_container$querySelec = container.querySelector('.k-media-viewer-counter')) == null ? void 0 : _container$querySelec.textContent).to.contain('1 / 2');
         case 9:
         case "end":
-          return _context72.stop();
+          return _context80.stop();
       }
-    }, _callee36);
+    }, _callee40);
   })));
 });