npm - @mirai/ui - Versions diffs - 1.1.0-d → 1.1.1 - Mend

@mirai/ui 1.1.0-d → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (186) hide show

package/build/components/Slider/__tests__/__snapshots__/Slider.test.js.snap CHANGED Viewed

@@ -2,16 +2,15 @@
 exports[`component:<Slider> inherit:className 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view container mirai"
     style="width: 360px;"
   >
-    <ui_pressable
-      class="pressable button hide back"
-      tabindex="0"
+    <div
+      class="pressable button hide first"
     >
-      <ui_icon
-        class="icon h3"
+      <span
+        class="icon headline-3"
       >
         <svg
           fill="currentColor"
@@ -30,67 +29,66 @@ exports[`component:<Slider> inherit:className 1`] = `
             d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
           />
         </svg>
-      </ui_icon>
-    </ui_pressable>
-    <ui_scrollview
+      </span>
+    </div>
+    <div
       class="scrollview snap horizontal notIndicator scrollView"
       style="width: 360px;"
     >
-      <ui_view
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
           style="background-image: url(https://picsum.photos/seed/@soyjavi/1024/768); height: 230px; width: 360px;"
         />
-      </ui_view>
-      <ui_view
+      </div>
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
           style="background-image: url(https://picsum.photos/seed/@jose/1024/768); height: 230px; width: 360px;"
         />
-      </ui_view>
-      <ui_view
+      </div>
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
           style="background-image: url(https://picsum.photos/seed/@mario1/1024/768); height: 230px; width: 360px;"
         />
-      </ui_view>
-      <ui_view
+      </div>
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
-          style="height: 230px; width: 360px;"
+          style="background-image: url(https://picsum.photos/seed/@victor/1024/768); height: 230px; width: 360px;"
         />
-      </ui_view>
-      <ui_view
+      </div>
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
-          style="height: 230px; width: 360px;"
+          style="background-image: url(https://picsum.photos/seed/@svet/1024/768); height: 230px; width: 360px;"
         />
-      </ui_view>
-      <ui_view
+      </div>
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
-          style="height: 230px; width: 360px;"
+          style="background-image: url(https://picsum.photos/seed/@mario2/1024/768); height: 230px; width: 360px;"
         />
-      </ui_view>
-    </ui_scrollview>
-    <ui_pressable
-      class="pressable button hide forward"
-      tabindex="0"
+      </div>
+    </div>
+    <div
+      class="pressable button hide second"
     >
-      <ui_icon
-        class="icon h3"
+      <span
+        class="icon headline-3"
       >
         <svg
           fill="currentColor"
@@ -106,27 +104,26 @@ exports[`component:<Slider> inherit:className 1`] = `
             fill="none"
           />
           <path
-            d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"
+            d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"
           />
         </svg>
-      </ui_icon>
-    </ui_pressable>
-  </ui_view>
+      </span>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 exports[`component:<Slider> prop:auto 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view container"
     style="width: 360px;"
   >
-    <ui_pressable
-      class="pressable button hide back"
-      tabindex="0"
+    <div
+      class="pressable button hide first"
     >
-      <ui_icon
-        class="icon h3"
+      <span
+        class="icon headline-3"
       >
         <svg
           fill="currentColor"
@@ -145,67 +142,66 @@ exports[`component:<Slider> prop:auto 1`] = `
             d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
           />
         </svg>
-      </ui_icon>
-    </ui_pressable>
-    <ui_scrollview
+      </span>
+    </div>
+    <div
       class="scrollview snap horizontal notIndicator scrollView"
       style="width: 360px;"
     >
-      <ui_view
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
           style="background-image: url(https://picsum.photos/seed/@soyjavi/1024/768); height: 230px; width: 360px;"
         />
-      </ui_view>
-      <ui_view
+      </div>
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
           style="background-image: url(https://picsum.photos/seed/@jose/1024/768); height: 230px; width: 360px;"
         />
-      </ui_view>
-      <ui_view
+      </div>
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
           style="background-image: url(https://picsum.photos/seed/@mario1/1024/768); height: 230px; width: 360px;"
         />
-      </ui_view>
-      <ui_view
+      </div>
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
-          style="height: 230px; width: 360px;"
+          style="background-image: url(https://picsum.photos/seed/@victor/1024/768); height: 230px; width: 360px;"
         />
-      </ui_view>
-      <ui_view
+      </div>
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
-          style="height: 230px; width: 360px;"
+          style="background-image: url(https://picsum.photos/seed/@svet/1024/768); height: 230px; width: 360px;"
         />
-      </ui_view>
-      <ui_view
+      </div>
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
-          style="height: 230px; width: 360px;"
+          style="background-image: url(https://picsum.photos/seed/@mario2/1024/768); height: 230px; width: 360px;"
         />
-      </ui_view>
-    </ui_scrollview>
-    <ui_pressable
-      class="pressable button hide forward"
-      tabindex="0"
+      </div>
+    </div>
+    <div
+      class="pressable button hide second"
     >
-      <ui_icon
-        class="icon h3"
+      <span
+        class="icon headline-3"
       >
         <svg
           fill="currentColor"
@@ -221,27 +217,139 @@ exports[`component:<Slider> prop:auto 1`] = `
             fill="none"
           />
           <path
-            d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"
+            d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"
           />
         </svg>
-      </ui_icon>
-    </ui_pressable>
-  </ui_view>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+exports[`component:<Slider> prop:behavior 1`] = `
+<DocumentFragment>
+  <div
+    class="view container"
+    style="width: 360px;"
+  >
+    <div
+      class="pressable button hide first"
+    >
+      <span
+        class="icon headline-3"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          stroke="currentColor"
+          stroke-width="0"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M0 0h24v24H0V0z"
+            fill="none"
+          />
+          <path
+            d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+          />
+        </svg>
+      </span>
+    </div>
+    <div
+      class="scrollview snap horizontal notIndicator scrollView"
+      style="width: 360px;"
+    >
+      <div
+        class="view item"
+      >
+        <div
+          class="view image"
+          style="background-image: url(https://picsum.photos/seed/@soyjavi/1024/768); height: 230px; width: 360px;"
+        />
+      </div>
+      <div
+        class="view item"
+      >
+        <div
+          class="view image"
+          style="background-image: url(https://picsum.photos/seed/@jose/1024/768); height: 230px; width: 360px;"
+        />
+      </div>
+      <div
+        class="view item"
+      >
+        <div
+          class="view image"
+          style="background-image: url(https://picsum.photos/seed/@mario1/1024/768); height: 230px; width: 360px;"
+        />
+      </div>
+      <div
+        class="view item"
+      >
+        <div
+          class="view image"
+          style="background-image: url(https://picsum.photos/seed/@victor/1024/768); height: 230px; width: 360px;"
+        />
+      </div>
+      <div
+        class="view item"
+      >
+        <div
+          class="view image"
+          style="background-image: url(https://picsum.photos/seed/@svet/1024/768); height: 230px; width: 360px;"
+        />
+      </div>
+      <div
+        class="view item"
+      >
+        <div
+          class="view image"
+          style="background-image: url(https://picsum.photos/seed/@mario2/1024/768); height: 230px; width: 360px;"
+        />
+      </div>
+    </div>
+    <div
+      class="pressable button hide second"
+    >
+      <span
+        class="icon headline-3"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          stroke="currentColor"
+          stroke-width="0"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M0 0h24v24H0V0z"
+            fill="none"
+          />
+          <path
+            d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"
+          />
+        </svg>
+      </span>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 exports[`component:<Slider> prop:captions 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view container"
     style="width: 360px;"
   >
-    <ui_pressable
-      class="pressable button hide back"
-      tabindex="0"
+    <div
+      class="pressable button hide first"
     >
-      <ui_icon
-        class="icon h3"
+      <span
+        class="icon headline-3"
       >
         <svg
           fill="currentColor"
@@ -260,112 +368,111 @@ exports[`component:<Slider> prop:captions 1`] = `
             d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
           />
         </svg>
-      </ui_icon>
-    </ui_pressable>
-    <ui_scrollview
+      </span>
+    </div>
+    <div
       class="scrollview snap horizontal notIndicator scrollView"
       style="width: 360px;"
     >
-      <ui_view
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
           style="background-image: url(https://picsum.photos/seed/@soyjavi/1024/768); height: 230px; width: 360px;"
         />
-        <ui_view
+        <div
           class="view caption"
         >
-          <ui_text
-            class="text bold small text"
+          <span
+            class="text bold small overlay text"
           >
             javi
-          </ui_text>
-        </ui_view>
-      </ui_view>
-      <ui_view
+          </span>
+        </div>
+      </div>
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
           style="background-image: url(https://picsum.photos/seed/@jose/1024/768); height: 230px; width: 360px;"
         />
-        <ui_view
+        <div
           class="view caption"
         >
-          <ui_text
-            class="text bold small text"
+          <span
+            class="text bold small overlay text"
           >
             jose
-          </ui_text>
-        </ui_view>
-      </ui_view>
-      <ui_view
+          </span>
+        </div>
+      </div>
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
           style="background-image: url(https://picsum.photos/seed/@mario1/1024/768); height: 230px; width: 360px;"
         />
-      </ui_view>
-      <ui_view
+      </div>
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
-          style="height: 230px; width: 360px;"
+          style="background-image: url(https://picsum.photos/seed/@victor/1024/768); height: 230px; width: 360px;"
         />
-        <ui_view
+        <div
           class="view caption"
         >
-          <ui_text
-            class="text bold small text"
+          <span
+            class="text bold small overlay text"
           >
             victor
-          </ui_text>
-        </ui_view>
-      </ui_view>
-      <ui_view
+          </span>
+        </div>
+      </div>
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
-          style="height: 230px; width: 360px;"
+          style="background-image: url(https://picsum.photos/seed/@svet/1024/768); height: 230px; width: 360px;"
         />
-        <ui_view
+        <div
           class="view caption"
         >
-          <ui_text
-            class="text bold small text"
+          <span
+            class="text bold small overlay text"
           >
             svet
-          </ui_text>
-        </ui_view>
-      </ui_view>
-      <ui_view
+          </span>
+        </div>
+      </div>
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
-          style="height: 230px; width: 360px;"
+          style="background-image: url(https://picsum.photos/seed/@mario2/1024/768); height: 230px; width: 360px;"
         />
-        <ui_view
+        <div
           class="view caption"
         >
-          <ui_text
-            class="text bold small text"
+          <span
+            class="text bold small overlay text"
           >
             mario2
-          </ui_text>
-        </ui_view>
-      </ui_view>
-    </ui_scrollview>
-    <ui_pressable
-      class="pressable button hide forward"
-      tabindex="0"
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="pressable button hide second"
     >
-      <ui_icon
-        class="icon h3"
+      <span
+        class="icon headline-3"
       >
         <svg
           fill="currentColor"
@@ -381,124 +488,260 @@ exports[`component:<Slider> prop:captions 1`] = `
             fill="none"
           />
           <path
-            d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"
+            d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"
           />
         </svg>
-      </ui_icon>
-    </ui_pressable>
-  </ui_view>
+      </span>
+    </div>
+  </div>
 </DocumentFragment>
 `;
-exports[`component:<Slider> prop:fullScreen 1`] = `
+exports[`component:<Slider> prop:index 1`] = `
 <DocumentFragment>
-  <ui_view
-    class="view container fullScreen"
-    style="width: 1024px;"
+  <div
+    class="view container"
+    style="width: 360px;"
   >
-    <ui_scrollview
+    <div
+      class="pressable button hide first"
+    >
+      <span
+        class="icon headline-3"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          stroke="currentColor"
+          stroke-width="0"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M0 0h24v24H0V0z"
+            fill="none"
+          />
+          <path
+            d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+          />
+        </svg>
+      </span>
+    </div>
+    <div
       class="scrollview snap horizontal notIndicator scrollView"
-      style="width: 870.4px;"
+      style="width: 360px;"
     >
-      <ui_view
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
-          style="background-image: url(https://picsum.photos/seed/@soyjavi/1024/768); height: 691.2px; width: 870.4px;"
+          style="background-image: url(https://picsum.photos/seed/@soyjavi/1024/768); height: 230px; width: 360px;"
         />
-      </ui_view>
-      <ui_view
+      </div>
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
-          style="background-image: url(https://picsum.photos/seed/@jose/1024/768); height: 691.2px; width: 870.4px;"
+          style="background-image: url(https://picsum.photos/seed/@jose/1024/768); height: 230px; width: 360px;"
         />
-      </ui_view>
-      <ui_view
+      </div>
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
-          style="background-image: url(https://picsum.photos/seed/@mario1/1024/768); height: 691.2px; width: 870.4px;"
+          style="background-image: url(https://picsum.photos/seed/@mario1/1024/768); height: 230px; width: 360px;"
         />
-      </ui_view>
-      <ui_view
+      </div>
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
-          style="background-image: url(https://picsum.photos/seed/@victor/1024/768); height: 691.2px; width: 870.4px;"
+          style="background-image: url(https://picsum.photos/seed/@victor/1024/768); height: 230px; width: 360px;"
         />
-      </ui_view>
-      <ui_view
+      </div>
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
-          style="background-image: url(https://picsum.photos/seed/@svet/1024/768); height: 691.2px; width: 870.4px;"
+          style="background-image: url(https://picsum.photos/seed/@svet/1024/768); height: 230px; width: 360px;"
         />
-      </ui_view>
-      <ui_view
+      </div>
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
-          style="background-image: url(https://picsum.photos/seed/@mario2/1024/768); height: 691.2px; width: 870.4px;"
+          style="background-image: url(https://picsum.photos/seed/@mario2/1024/768); height: 230px; width: 360px;"
         />
-      </ui_view>
-    </ui_scrollview>
-    <ui_scrollview
-      class="scrollview snap horizontal notIndicator thumbnails"
+      </div>
+    </div>
+    <div
+      class="pressable button hide second"
     >
-      <ui_pressable
-        class="pressable thumbnail active"
-        style="background-image: url(https://picsum.photos/seed/@soyjavi/1024/768);"
-        tabindex="0"
-      />
-      <ui_pressable
-        class="pressable thumbnail"
-        style="background-image: url(https://picsum.photos/seed/@jose/1024/768);"
-        tabindex="0"
-      />
-      <ui_pressable
-        class="pressable thumbnail"
-        style="background-image: url(https://picsum.photos/seed/@mario1/1024/768);"
-        tabindex="0"
-      />
-      <ui_pressable
-        class="pressable thumbnail"
-        style="background-image: url(https://picsum.photos/seed/@victor/1024/768);"
-        tabindex="0"
-      />
-      <ui_pressable
-        class="pressable thumbnail"
-        style="background-image: url(https://picsum.photos/seed/@svet/1024/768);"
-        tabindex="0"
-      />
-      <ui_pressable
-        class="pressable thumbnail"
-        style="background-image: url(https://picsum.photos/seed/@mario2/1024/768);"
-        tabindex="0"
+      <span
+        class="icon headline-3"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          stroke="currentColor"
+          stroke-width="0"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M0 0h24v24H0V0z"
+            fill="none"
+          />
+          <path
+            d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"
+          />
+        </svg>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+exports[`component:<Slider> prop:indicator 1`] = `
+<DocumentFragment>
+  <div
+    class="view container"
+    style="width: 360px;"
+  >
+    <div
+      class="pressable button hide first"
+    >
+      <span
+        class="icon headline-3"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          stroke="currentColor"
+          stroke-width="0"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M0 0h24v24H0V0z"
+            fill="none"
+          />
+          <path
+            d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+          />
+        </svg>
+      </span>
+    </div>
+    <div
+      class="scrollview snap horizontal notIndicator scrollView"
+      style="width: 360px;"
+    >
+      <div
+        class="view item"
+      >
+        <div
+          class="view image"
+          style="background-image: url(https://picsum.photos/seed/@soyjavi/1024/768); height: 230px; width: 360px;"
+        />
+      </div>
+      <div
+        class="view item"
+      >
+        <div
+          class="view image"
+          style="background-image: url(https://picsum.photos/seed/@jose/1024/768); height: 230px; width: 360px;"
+        />
+      </div>
+      <div
+        class="view item"
+      >
+        <div
+          class="view image"
+          style="background-image: url(https://picsum.photos/seed/@mario1/1024/768); height: 230px; width: 360px;"
+        />
+      </div>
+      <div
+        class="view item"
+      >
+        <div
+          class="view image"
+          style="background-image: url(https://picsum.photos/seed/@victor/1024/768); height: 230px; width: 360px;"
+        />
+      </div>
+      <div
+        class="view item"
+      >
+        <div
+          class="view image"
+          style="background-image: url(https://picsum.photos/seed/@svet/1024/768); height: 230px; width: 360px;"
+        />
+      </div>
+      <div
+        class="view item"
+      >
+        <div
+          class="view image"
+          style="background-image: url(https://picsum.photos/seed/@mario2/1024/768); height: 230px; width: 360px;"
+        />
+      </div>
+    </div>
+    <div
+      class="pressable button hide second"
+    >
+      <span
+        class="icon headline-3"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          stroke="currentColor"
+          stroke-width="0"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M0 0h24v24H0V0z"
+            fill="none"
+          />
+          <path
+            d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"
+          />
+        </svg>
+      </span>
+    </div>
+    <div
+      class="view progress progress"
+    >
+      <div
+        class="view value"
+        style="width: 0%;"
       />
-    </ui_scrollview>
-  </ui_view>
+    </div>
+  </div>
 </DocumentFragment>
 `;
-exports[`component:<Slider> prop:index 1`] = `
+exports[`component:<Slider> prop:onCounter 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view container"
     style="width: 360px;"
   >
-    <ui_pressable
-      class="pressable button hide back"
-      tabindex="0"
+    <div
+      class="pressable button hide first"
     >
-      <ui_icon
-        class="icon h3"
+      <span
+        class="icon headline-3"
       >
         <svg
           fill="currentColor"
@@ -517,67 +760,66 @@ exports[`component:<Slider> prop:index 1`] = `
             d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
           />
         </svg>
-      </ui_icon>
-    </ui_pressable>
-    <ui_scrollview
+      </span>
+    </div>
+    <div
       class="scrollview snap horizontal notIndicator scrollView"
       style="width: 360px;"
     >
-      <ui_view
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
-          style="height: 230px; width: 360px;"
+          style="background-image: url(https://picsum.photos/seed/@soyjavi/1024/768); height: 230px; width: 360px;"
         />
-      </ui_view>
-      <ui_view
+      </div>
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
-          style="height: 230px; width: 360px;"
+          style="background-image: url(https://picsum.photos/seed/@jose/1024/768); height: 230px; width: 360px;"
         />
-      </ui_view>
-      <ui_view
+      </div>
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
           style="background-image: url(https://picsum.photos/seed/@mario1/1024/768); height: 230px; width: 360px;"
         />
-      </ui_view>
-      <ui_view
+      </div>
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
           style="background-image: url(https://picsum.photos/seed/@victor/1024/768); height: 230px; width: 360px;"
         />
-      </ui_view>
-      <ui_view
+      </div>
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
           style="background-image: url(https://picsum.photos/seed/@svet/1024/768); height: 230px; width: 360px;"
         />
-      </ui_view>
-      <ui_view
+      </div>
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
           style="background-image: url(https://picsum.photos/seed/@mario2/1024/768); height: 230px; width: 360px;"
         />
-      </ui_view>
-    </ui_scrollview>
-    <ui_pressable
-      class="pressable button hide forward"
-      tabindex="0"
+      </div>
+    </div>
+    <div
+      class="pressable button hide second"
     >
-      <ui_icon
-        class="icon h3"
+      <span
+        class="icon headline-3"
       >
         <svg
           fill="currentColor"
@@ -593,27 +835,56 @@ exports[`component:<Slider> prop:index 1`] = `
             fill="none"
           />
           <path
-            d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"
+            d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"
           />
         </svg>
-      </ui_icon>
-    </ui_pressable>
-  </ui_view>
+      </span>
+    </div>
+    <div
+      class="pressable overlay counter"
+    >
+      <span
+        class="icon action"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          stroke="currentColor"
+          stroke-width="0"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M0 0h24v24H0V0z"
+            fill="none"
+          />
+          <path
+            d="M20 4v12H8V4h12m0-2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8.5 9.67 1.69 2.26 2.48-3.1L19 15H9zM2 6v14c0 1.1.9 2 2 2h14v-2H4V6H2z"
+          />
+        </svg>
+      </span>
+      <span
+        class="text bold small"
+      >
+        6
+      </span>
+    </div>
+  </div>
 </DocumentFragment>
 `;
-exports[`component:<Slider> renders 1`] = `
+exports[`component:<Slider> prop:replay (false) 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view container"
     style="width: 360px;"
   >
-    <ui_pressable
-      class="pressable button hide back"
-      tabindex="0"
+    <div
+      class="pressable button hide first"
     >
-      <ui_icon
-        class="icon h3"
+      <span
+        class="icon headline-3"
       >
         <svg
           fill="currentColor"
@@ -632,67 +903,179 @@ exports[`component:<Slider> renders 1`] = `
             d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
           />
         </svg>
-      </ui_icon>
-    </ui_pressable>
-    <ui_scrollview
+      </span>
+    </div>
+    <div
       class="scrollview snap horizontal notIndicator scrollView"
       style="width: 360px;"
     >
-      <ui_view
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
           style="background-image: url(https://picsum.photos/seed/@soyjavi/1024/768); height: 230px; width: 360px;"
         />
-      </ui_view>
-      <ui_view
+      </div>
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
           style="background-image: url(https://picsum.photos/seed/@jose/1024/768); height: 230px; width: 360px;"
         />
-      </ui_view>
-      <ui_view
+      </div>
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
           style="background-image: url(https://picsum.photos/seed/@mario1/1024/768); height: 230px; width: 360px;"
         />
-      </ui_view>
-      <ui_view
+      </div>
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
           style="height: 230px; width: 360px;"
         />
-      </ui_view>
-      <ui_view
+      </div>
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
           style="height: 230px; width: 360px;"
         />
-      </ui_view>
-      <ui_view
+      </div>
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
           style="height: 230px; width: 360px;"
         />
-      </ui_view>
-    </ui_scrollview>
-    <ui_pressable
-      class="pressable button hide forward"
-      tabindex="0"
+      </div>
+    </div>
+    <div
+      class="pressable button hide second"
+    >
+      <span
+        class="icon headline-3"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          stroke="currentColor"
+          stroke-width="0"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M0 0h24v24H0V0z"
+            fill="none"
+          />
+          <path
+            d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"
+          />
+        </svg>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+exports[`component:<Slider> renders 1`] = `
+<DocumentFragment>
+  <div
+    class="view container"
+    style="width: 360px;"
+  >
+    <div
+      class="pressable button hide first"
+    >
+      <span
+        class="icon headline-3"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          stroke="currentColor"
+          stroke-width="0"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M0 0h24v24H0V0z"
+            fill="none"
+          />
+          <path
+            d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+          />
+        </svg>
+      </span>
+    </div>
+    <div
+      class="scrollview snap horizontal notIndicator scrollView"
+      style="width: 360px;"
+    >
+      <div
+        class="view item"
+      >
+        <div
+          class="view image"
+          style="background-image: url(https://picsum.photos/seed/@soyjavi/1024/768); height: 230px; width: 360px;"
+        />
+      </div>
+      <div
+        class="view item"
+      >
+        <div
+          class="view image"
+          style="background-image: url(https://picsum.photos/seed/@jose/1024/768); height: 230px; width: 360px;"
+        />
+      </div>
+      <div
+        class="view item"
+      >
+        <div
+          class="view image"
+          style="background-image: url(https://picsum.photos/seed/@mario1/1024/768); height: 230px; width: 360px;"
+        />
+      </div>
+      <div
+        class="view item"
+      >
+        <div
+          class="view image"
+          style="background-image: url(https://picsum.photos/seed/@victor/1024/768); height: 230px; width: 360px;"
+        />
+      </div>
+      <div
+        class="view item"
+      >
+        <div
+          class="view image"
+          style="background-image: url(https://picsum.photos/seed/@svet/1024/768); height: 230px; width: 360px;"
+        />
+      </div>
+      <div
+        class="view item"
+      >
+        <div
+          class="view image"
+          style="background-image: url(https://picsum.photos/seed/@mario2/1024/768); height: 230px; width: 360px;"
+        />
+      </div>
+    </div>
+    <div
+      class="pressable button hide second"
     >
-      <ui_icon
-        class="icon h3"
+      <span
+        class="icon headline-3"
       >
         <svg
           fill="currentColor"
@@ -708,28 +1091,27 @@ exports[`component:<Slider> renders 1`] = `
             fill="none"
           />
           <path
-            d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"
+            d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"
           />
         </svg>
-      </ui_icon>
-    </ui_pressable>
-  </ui_view>
+      </span>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 exports[`component:<Slider> testId 1`] = `
 <DocumentFragment>
-  <ui_view
+  <div
     class="view container"
     data-testid="mirai"
     style="width: 360px;"
   >
-    <ui_pressable
-      class="pressable button hide back"
-      tabindex="0"
+    <div
+      class="pressable button hide first"
     >
-      <ui_icon
-        class="icon h3"
+      <span
+        class="icon headline-3"
       >
         <svg
           fill="currentColor"
@@ -748,67 +1130,66 @@ exports[`component:<Slider> testId 1`] = `
             d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
           />
         </svg>
-      </ui_icon>
-    </ui_pressable>
-    <ui_scrollview
+      </span>
+    </div>
+    <div
       class="scrollview snap horizontal notIndicator scrollView"
       style="width: 360px;"
     >
-      <ui_view
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
           style="background-image: url(https://picsum.photos/seed/@soyjavi/1024/768); height: 230px; width: 360px;"
         />
-      </ui_view>
-      <ui_view
+      </div>
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
           style="background-image: url(https://picsum.photos/seed/@jose/1024/768); height: 230px; width: 360px;"
         />
-      </ui_view>
-      <ui_view
+      </div>
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
           style="background-image: url(https://picsum.photos/seed/@mario1/1024/768); height: 230px; width: 360px;"
         />
-      </ui_view>
-      <ui_view
+      </div>
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
-          style="height: 230px; width: 360px;"
+          style="background-image: url(https://picsum.photos/seed/@victor/1024/768); height: 230px; width: 360px;"
         />
-      </ui_view>
-      <ui_view
+      </div>
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
-          style="height: 230px; width: 360px;"
+          style="background-image: url(https://picsum.photos/seed/@svet/1024/768); height: 230px; width: 360px;"
         />
-      </ui_view>
-      <ui_view
+      </div>
+      <div
         class="view item"
       >
-        <ui_view
+        <div
           class="view image"
-          style="height: 230px; width: 360px;"
+          style="background-image: url(https://picsum.photos/seed/@mario2/1024/768); height: 230px; width: 360px;"
         />
-      </ui_view>
-    </ui_scrollview>
-    <ui_pressable
-      class="pressable button hide forward"
-      tabindex="0"
+      </div>
+    </div>
+    <div
+      class="pressable button hide second"
     >
-      <ui_icon
-        class="icon h3"
+      <span
+        class="icon headline-3"
       >
         <svg
           fill="currentColor"
@@ -824,11 +1205,11 @@ exports[`component:<Slider> testId 1`] = `
             fill="none"
           />
           <path
-            d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"
+            d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"
           />
         </svg>
-      </ui_icon>
-    </ui_pressable>
-  </ui_view>
+      </span>
+    </div>
+  </div>
 </DocumentFragment>
 `;