npm - @mirai/ui - Versions diffs - 1.0.218 → 1.1.0-beta - Mend

@mirai/ui 1.0.218 → 1.1.0-beta

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 (130) hide show

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

@@ -2,25 +2,23 @@
 exports[`component:<Table> inherit:className 1`] = `
 <DocumentFragment>
-  <div
+  <ui_scrollview
     class="scrollview snap vertical notIndicator container mirai"
   >
     <table
       class="table"
     >
       <thead>
-        <tr
-          class="notSelected"
-        >
+        <tr>
           <th>
-            <span
+            <ui_view
               class="view forceRow column"
             >
               User Name
-              <div
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -40,19 +38,19 @@ exports[`component:<Table> inherit:className 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-              </div>
-            </span>
+                </ui_icon>
+              </ui_view>
+            </ui_view>
           </th>
           <th>
-            <span
+            <ui_view
               class="view forceRow column"
             >
               Email
-              <div
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -72,19 +70,19 @@ exports[`component:<Table> inherit:className 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-              </div>
-            </span>
+                </ui_icon>
+              </ui_view>
+            </ui_view>
           </th>
           <th>
-            <span
+            <ui_view
               class="view forceRow column"
             >
               Year
-              <div
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -104,25 +102,25 @@ exports[`component:<Table> inherit:className 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-              </div>
-            </span>
+                </ui_icon>
+              </ui_view>
+            </ui_view>
           </th>
           <th>
-            <span
+            <ui_view
               class="view forceRow column"
             >
-              <span>
-                <div
+              <ui_layer>
+                <ui_primitive
                   class="dispatcher tooltip"
                 >
                   Twitter
-                </div>
-              </span>
-              <div
+                </ui_primitive>
+              </ui_layer>
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -142,19 +140,19 @@ exports[`component:<Table> inherit:className 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-              </div>
-            </span>
+                </ui_icon>
+              </ui_view>
+            </ui_view>
           </th>
           <th>
-            <span
+            <ui_view
               class="view forceRow column"
             >
               Action
-              <div
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -174,295 +172,282 @@ exports[`component:<Table> inherit:className 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-              </div>
-            </span>
+                </ui_icon>
+              </ui_view>
+            </ui_view>
           </th>
         </tr>
       </thead>
       <tbody>
-        <tr
-          class="notSelected"
-        >
+        <tr>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               jose
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               jose@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2012
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
-        <tr
-          class="notSelected"
-        >
+        <tr>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               mario/1
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               mario.1@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2005
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
-        <tr
-          class="notSelected"
-        >
+        <tr>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               carlos
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               carlos@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2012
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
-        <tr
-          class="notSelected"
-        >
+        <tr>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               svet
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               svet@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2021
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               <strong>
                 action
               </strong>
-            </span>
+            </ui_view>
           </td>
         </tr>
-        <tr
-          class="notSelected"
-        >
+        <tr>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               javi
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               hi@soyjavi.com
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2022
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               soyjavi
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
-        <tr
-          class="notSelected"
-        >
+        <tr>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               victor
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               victor@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2021
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
-        <tr
-          class="notSelected"
-        >
+        <tr>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               mario/2
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               mario.2@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2022
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
       </tbody>
     </table>
-  </div>
+  </ui_scrollview>
 </DocumentFragment>
 `;
 exports[`component:<Table> prop:filter 1`] = `
 <DocumentFragment>
-  <div
+  <ui_scrollview
     class="scrollview snap vertical notIndicator container"
   >
-    <div
+    <ui_view
       class="view row wide filters"
     >
-      <div
+      <ui_view
         class="view row item"
       >
-        <span
+        <ui_text
           class="text tiny lighten"
         >
           email
-        </span>
-        <span
+        </ui_text>
+        <ui_text
           class="text bold small"
         >
           @mirai.com
-        </span>
-        <div
+        </ui_text>
+        <ui_pressable
           class="pressable buttonRemove"
+          tabindex="0"
         >
-          <span
+          <ui_icon
             class="icon action"
           >
             <svg
@@ -482,26 +467,27 @@ exports[`component:<Table> prop:filter 1`] = `
                 d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
               />
             </svg>
-          </span>
-        </div>
-      </div>
-      <div
+          </ui_icon>
+        </ui_pressable>
+      </ui_view>
+      <ui_view
         class="view row item"
       >
-        <span
+        <ui_text
           class="text tiny lighten"
         >
           email
-        </span>
-        <span
+        </ui_text>
+        <ui_text
           class="text bold small"
         >
           @soyjavi.com
-        </span>
-        <div
+        </ui_text>
+        <ui_pressable
           class="pressable buttonRemove"
+          tabindex="0"
         >
-          <span
+          <ui_icon
             class="icon action"
           >
             <svg
@@ -521,31 +507,32 @@ exports[`component:<Table> prop:filter 1`] = `
                 d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
               />
             </svg>
-          </span>
-        </div>
-      </div>
-      <div
+          </ui_icon>
+        </ui_pressable>
+      </ui_view>
+      <ui_view
         class="view row item"
       >
-        <span
+        <ui_text
           class="text tiny lighten"
         >
           year
-        </span>
-        <span
+        </ui_text>
+        <ui_text
           class="text bold small"
         >
           2020
-        </span>
-        <span
+        </ui_text>
+        <ui_text
           class="text bold small"
         >
            - 2023
-        </span>
-        <div
+        </ui_text>
+        <ui_pressable
           class="pressable buttonRemove"
+          tabindex="0"
         >
-          <span
+          <ui_icon
             class="icon action"
           >
             <svg
@@ -565,26 +552,24 @@ exports[`component:<Table> prop:filter 1`] = `
                 d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
               />
             </svg>
-          </span>
-        </div>
-      </div>
-    </div>
+          </ui_icon>
+        </ui_pressable>
+      </ui_view>
+    </ui_view>
     <table
       class="table"
     >
       <thead>
-        <tr
-          class="notSelected"
-        >
+        <tr>
           <th>
-            <span
+            <ui_view
               class="view forceRow column"
             >
               User Name
-              <div
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -604,13 +589,14 @@ exports[`component:<Table> prop:filter 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-                <span>
-                  <div
+                </ui_icon>
+                <ui_layer>
+                  <ui_pressable
                     class="pressable"
                     style="position: relative;"
+                    tabindex="0"
                   >
-                    <span
+                    <ui_icon
                       class="icon headline-3 icon disabled"
                     >
                       <svg
@@ -630,21 +616,21 @@ exports[`component:<Table> prop:filter 1`] = `
                           d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"
                         />
                       </svg>
-                    </span>
-                  </div>
-                </span>
-              </div>
-            </span>
+                    </ui_icon>
+                  </ui_pressable>
+                </ui_layer>
+              </ui_view>
+            </ui_view>
           </th>
           <th>
-            <span
+            <ui_view
               class="view forceRow column"
             >
               Email
-              <div
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -664,13 +650,14 @@ exports[`component:<Table> prop:filter 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-                <span>
-                  <div
+                </ui_icon>
+                <ui_layer>
+                  <ui_pressable
                     class="pressable"
                     style="position: relative;"
+                    tabindex="0"
                   >
-                    <span
+                    <ui_icon
                       class="icon headline-3 icon disabled"
                     >
                       <svg
@@ -690,21 +677,21 @@ exports[`component:<Table> prop:filter 1`] = `
                           d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"
                         />
                       </svg>
-                    </span>
-                  </div>
-                </span>
-              </div>
-            </span>
+                    </ui_icon>
+                  </ui_pressable>
+                </ui_layer>
+              </ui_view>
+            </ui_view>
           </th>
           <th>
-            <span
+            <ui_view
               class="view forceRow column"
             >
               Year
-              <div
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -724,13 +711,14 @@ exports[`component:<Table> prop:filter 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-                <span>
-                  <div
+                </ui_icon>
+                <ui_layer>
+                  <ui_pressable
                     class="pressable"
                     style="position: relative;"
+                    tabindex="0"
                   >
-                    <span
+                    <ui_icon
                       class="icon headline-3 icon disabled"
                     >
                       <svg
@@ -750,27 +738,27 @@ exports[`component:<Table> prop:filter 1`] = `
                           d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"
                         />
                       </svg>
-                    </span>
-                  </div>
-                </span>
-              </div>
-            </span>
+                    </ui_icon>
+                  </ui_pressable>
+                </ui_layer>
+              </ui_view>
+            </ui_view>
           </th>
           <th>
-            <span
+            <ui_view
               class="view forceRow column"
             >
-              <span>
-                <div
+              <ui_layer>
+                <ui_primitive
                   class="dispatcher tooltip"
                 >
                   Twitter
-                </div>
-              </span>
-              <div
+                </ui_primitive>
+              </ui_layer>
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -790,13 +778,14 @@ exports[`component:<Table> prop:filter 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-                <span>
-                  <div
+                </ui_icon>
+                <ui_layer>
+                  <ui_pressable
                     class="pressable"
                     style="position: relative;"
+                    tabindex="0"
                   >
-                    <span
+                    <ui_icon
                       class="icon headline-3 icon disabled"
                     >
                       <svg
@@ -816,21 +805,21 @@ exports[`component:<Table> prop:filter 1`] = `
                           d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"
                         />
                       </svg>
-                    </span>
-                  </div>
-                </span>
-              </div>
-            </span>
+                    </ui_icon>
+                  </ui_pressable>
+                </ui_layer>
+              </ui_view>
+            </ui_view>
           </th>
           <th>
-            <span
+            <ui_view
               class="view forceRow column"
             >
               Action
-              <div
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -850,13 +839,14 @@ exports[`component:<Table> prop:filter 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-                <span>
-                  <div
+                </ui_icon>
+                <ui_layer>
+                  <ui_pressable
                     class="pressable"
                     style="position: relative;"
+                    tabindex="0"
                   >
-                    <span
+                    <ui_icon
                       class="icon headline-3 icon disabled"
                     >
                       <svg
@@ -876,188 +866,178 @@ exports[`component:<Table> prop:filter 1`] = `
                           d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"
                         />
                       </svg>
-                    </span>
-                  </div>
-                </span>
-              </div>
-            </span>
+                    </ui_icon>
+                  </ui_pressable>
+                </ui_layer>
+              </ui_view>
+            </ui_view>
           </th>
         </tr>
       </thead>
       <tbody>
-        <tr
-          class="notSelected"
-        >
+        <tr>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               svet
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               svet@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2021
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               <strong>
                 action
               </strong>
-            </span>
+            </ui_view>
           </td>
         </tr>
-        <tr
-          class="notSelected"
-        >
+        <tr>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               javi
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               hi@soyjavi.com
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2022
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               soyjavi
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
-        <tr
-          class="notSelected"
-        >
+        <tr>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               victor
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               victor@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2021
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
-        <tr
-          class="notSelected"
-        >
+        <tr>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               mario/2
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               mario.2@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2022
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
       </tbody>
     </table>
-  </div>
+  </ui_scrollview>
 </DocumentFragment>
 `;
 exports[`component:<Table> prop:inline (false 1`] = `
 <DocumentFragment>
-  <div
+  <ui_scrollview
     class="scrollview snap vertical notIndicator container outlined"
   >
     <table
       class="table"
     >
       <thead>
-        <tr
-          class="notSelected"
-        >
+        <tr>
           <th>
-            <span
+            <ui_view
               class="view forceRow column"
             >
               User Name
-              <div
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -1077,19 +1057,19 @@ exports[`component:<Table> prop:inline (false 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-              </div>
-            </span>
+                </ui_icon>
+              </ui_view>
+            </ui_view>
           </th>
           <th>
-            <span
+            <ui_view
               class="view forceRow column"
             >
               Email
-              <div
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -1109,19 +1089,19 @@ exports[`component:<Table> prop:inline (false 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-              </div>
-            </span>
+                </ui_icon>
+              </ui_view>
+            </ui_view>
           </th>
           <th>
-            <span
+            <ui_view
               class="view forceRow column"
             >
               Year
-              <div
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -1141,25 +1121,25 @@ exports[`component:<Table> prop:inline (false 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-              </div>
-            </span>
+                </ui_icon>
+              </ui_view>
+            </ui_view>
           </th>
           <th>
-            <span
+            <ui_view
               class="view forceRow column"
             >
-              <span>
-                <div
+              <ui_layer>
+                <ui_primitive
                   class="dispatcher tooltip"
                 >
                   Twitter
-                </div>
-              </span>
-              <div
+                </ui_primitive>
+              </ui_layer>
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -1179,19 +1159,19 @@ exports[`component:<Table> prop:inline (false 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-              </div>
-            </span>
+                </ui_icon>
+              </ui_view>
+            </ui_view>
           </th>
           <th>
-            <span
+            <ui_view
               class="view forceRow column"
             >
               Action
-              <div
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -1211,273 +1191,259 @@ exports[`component:<Table> prop:inline (false 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-              </div>
-            </span>
+                </ui_icon>
+              </ui_view>
+            </ui_view>
           </th>
         </tr>
       </thead>
       <tbody>
-        <tr
-          class="notSelected"
-        >
+        <tr>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               jose
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               jose@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2012
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
-        <tr
-          class="notSelected"
-        >
+        <tr>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               mario/1
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               mario.1@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2005
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
-        <tr
-          class="notSelected"
-        >
+        <tr>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               carlos
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               carlos@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2012
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
-        <tr
-          class="notSelected"
-        >
+        <tr>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               svet
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               svet@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2021
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               <strong>
                 action
               </strong>
-            </span>
+            </ui_view>
           </td>
         </tr>
-        <tr
-          class="notSelected"
-        >
+        <tr>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               javi
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               hi@soyjavi.com
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2022
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               soyjavi
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
-        <tr
-          class="notSelected"
-        >
+        <tr>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               victor
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               victor@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2021
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
-        <tr
-          class="notSelected"
-        >
+        <tr>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               mario/2
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               mario.2@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2022
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
       </tbody>
     </table>
-  </div>
+  </ui_scrollview>
 </DocumentFragment>
 `;
 exports[`component:<Table> prop:onScroll 1`] = `
 <DocumentFragment>
-  <div
+  <ui_scrollview
     class="scrollview snap vertical notIndicator container"
     data-testid="onScroll"
   >
@@ -1486,20 +1452,19 @@ exports[`component:<Table> prop:onScroll 1`] = `
     >
       <thead>
         <tr
-          class="notSelected"
           data-testid="onScroll-head"
         >
           <th
             data-testid="onScroll-head-username"
           >
-            <span
+            <ui_view
               class="view forceRow column"
             >
               User Name
-              <div
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -1519,21 +1484,21 @@ exports[`component:<Table> prop:onScroll 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-              </div>
-            </span>
+                </ui_icon>
+              </ui_view>
+            </ui_view>
           </th>
           <th
             data-testid="onScroll-head-email"
           >
-            <span
+            <ui_view
               class="view forceRow column"
             >
               Email
-              <div
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -1553,21 +1518,21 @@ exports[`component:<Table> prop:onScroll 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-              </div>
-            </span>
+                </ui_icon>
+              </ui_view>
+            </ui_view>
           </th>
           <th
             data-testid="onScroll-head-year"
           >
-            <span
+            <ui_view
               class="view forceRow column"
             >
               Year
-              <div
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -1587,27 +1552,27 @@ exports[`component:<Table> prop:onScroll 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-              </div>
-            </span>
+                </ui_icon>
+              </ui_view>
+            </ui_view>
           </th>
           <th
             data-testid="onScroll-head-twitter"
           >
-            <span
+            <ui_view
               class="view forceRow column"
             >
-              <span>
-                <div
+              <ui_layer>
+                <ui_primitive
                   class="dispatcher tooltip"
                 >
                   Twitter
-                </div>
-              </span>
-              <div
+                </ui_primitive>
+              </ui_layer>
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -1627,21 +1592,21 @@ exports[`component:<Table> prop:onScroll 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-              </div>
-            </span>
+                </ui_icon>
+              </ui_view>
+            </ui_view>
           </th>
           <th
             data-testid="onScroll-head-action"
           >
-            <span
+            <ui_view
               class="view forceRow column"
             >
               Action
-              <div
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -1661,350 +1626,343 @@ exports[`component:<Table> prop:onScroll 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-              </div>
-            </span>
+                </ui_icon>
+              </ui_view>
+            </ui_view>
           </th>
         </tr>
       </thead>
       <tbody>
         <tr
-          class="notSelected"
           data-testid="onScroll-0"
         >
           <td
             data-testid="onScroll-0-username"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               jose
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onScroll-0-email"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               jose@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onScroll-0-year"
           >
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2012
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onScroll-0-twitter"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td
             data-testid="onScroll-0-action"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
         <tr
-          class="notSelected"
           data-testid="onScroll-1"
         >
           <td
             data-testid="onScroll-1-username"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               mario/1
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onScroll-1-email"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               mario.1@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onScroll-1-year"
           >
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2005
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onScroll-1-twitter"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td
             data-testid="onScroll-1-action"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
         <tr
-          class="notSelected"
           data-testid="onScroll-2"
         >
           <td
             data-testid="onScroll-2-username"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               carlos
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onScroll-2-email"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               carlos@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onScroll-2-year"
           >
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2012
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onScroll-2-twitter"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td
             data-testid="onScroll-2-action"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
         <tr
-          class="notSelected"
           data-testid="onScroll-3"
         >
           <td
             data-testid="onScroll-3-username"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               svet
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onScroll-3-email"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               svet@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onScroll-3-year"
           >
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2021
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onScroll-3-twitter"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td
             data-testid="onScroll-3-action"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               <strong>
                 action
               </strong>
-            </span>
+            </ui_view>
           </td>
         </tr>
         <tr
-          class="notSelected"
           data-testid="onScroll-4"
         >
           <td
             data-testid="onScroll-4-username"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               javi
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onScroll-4-email"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               hi@soyjavi.com
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onScroll-4-year"
           >
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2022
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onScroll-4-twitter"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               soyjavi
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onScroll-4-action"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
         <tr
-          class="notSelected"
           data-testid="onScroll-5"
         >
           <td
             data-testid="onScroll-5-username"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               victor
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onScroll-5-email"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               victor@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onScroll-5-year"
           >
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2021
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onScroll-5-twitter"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td
             data-testid="onScroll-5-action"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
         <tr
-          class="notSelected"
           data-testid="onScroll-6"
         >
           <td
             data-testid="onScroll-6-username"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               mario/2
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onScroll-6-email"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               mario.2@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onScroll-6-year"
           >
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2022
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onScroll-6-twitter"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td
             data-testid="onScroll-6-action"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
       </tbody>
     </table>
-  </div>
+  </ui_scrollview>
 </DocumentFragment>
 `;
 exports[`component:<Table> prop:onSelect 1`] = `
 <DocumentFragment>
-  <div
+  <ui_scrollview
     class="scrollview snap vertical notIndicator container"
     data-testid="onSelect"
   >
@@ -2013,20 +1971,20 @@ exports[`component:<Table> prop:onSelect 1`] = `
     >
       <thead>
         <tr
-          class="notSelected"
           data-testid="onSelect-head"
         >
           <th
             data-testid="onSelect-head-username"
           >
-            <span
+            <ui_view
               class="view forceRow column selectable"
             >
-              <div
+              <ui_pressable
                 class="pressable inputOption checkbox"
                 data-testid="onSelect-head-checkbox"
+                tabindex="0"
               >
-                <div
+                <ui_checkbox
                   class="checkbox"
                 >
                   <input
@@ -2035,13 +1993,13 @@ exports[`component:<Table> prop:onSelect 1`] = `
                     type="checkbox"
                     value=""
                   />
-                </div>
-              </div>
+                </ui_checkbox>
+              </ui_pressable>
               User Name
-              <div
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -2061,21 +2019,21 @@ exports[`component:<Table> prop:onSelect 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-              </div>
-            </span>
+                </ui_icon>
+              </ui_view>
+            </ui_view>
           </th>
           <th
             data-testid="onSelect-head-email"
           >
-            <span
+            <ui_view
               class="view forceRow column"
             >
               Email
-              <div
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -2095,21 +2053,21 @@ exports[`component:<Table> prop:onSelect 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-              </div>
-            </span>
+                </ui_icon>
+              </ui_view>
+            </ui_view>
           </th>
           <th
             data-testid="onSelect-head-year"
           >
-            <span
+            <ui_view
               class="view forceRow column"
             >
               Year
-              <div
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -2129,27 +2087,27 @@ exports[`component:<Table> prop:onSelect 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-              </div>
-            </span>
+                </ui_icon>
+              </ui_view>
+            </ui_view>
           </th>
           <th
             data-testid="onSelect-head-twitter"
           >
-            <span
+            <ui_view
               class="view forceRow column"
             >
-              <span>
-                <div
+              <ui_layer>
+                <ui_primitive
                   class="dispatcher tooltip"
                 >
                   Twitter
-                </div>
-              </span>
-              <div
+                </ui_primitive>
+              </ui_layer>
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -2169,21 +2127,21 @@ exports[`component:<Table> prop:onSelect 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-              </div>
-            </span>
+                </ui_icon>
+              </ui_view>
+            </ui_view>
           </th>
           <th
             data-testid="onSelect-head-action"
           >
-            <span
+            <ui_view
               class="view forceRow column"
             >
               Action
-              <div
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -2203,28 +2161,28 @@ exports[`component:<Table> prop:onSelect 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-              </div>
-            </span>
+                </ui_icon>
+              </ui_view>
+            </ui_view>
           </th>
         </tr>
       </thead>
       <tbody>
         <tr
-          class="notSelected"
           data-testid="onSelect-0"
         >
           <td
             data-testid="onSelect-0-username"
           >
-            <span
+            <ui_view
               class="view forceRow column selectable"
             >
-              <div
+              <ui_pressable
                 class="pressable inputOption checkbox"
                 data-testid="onSelect-0-checkbox"
+                tabindex="0"
               >
-                <div
+                <ui_checkbox
                   class="checkbox"
                 >
                   <input
@@ -2233,59 +2191,59 @@ exports[`component:<Table> prop:onSelect 1`] = `
                     type="checkbox"
                     value=""
                   />
-                </div>
-              </div>
+                </ui_checkbox>
+              </ui_pressable>
               jose
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onSelect-0-email"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               jose@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onSelect-0-year"
           >
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2012
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onSelect-0-twitter"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td
             data-testid="onSelect-0-action"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
         <tr
-          class="notSelected"
           data-testid="onSelect-1"
         >
           <td
             data-testid="onSelect-1-username"
           >
-            <span
+            <ui_view
               class="view forceRow column selectable"
             >
-              <div
+              <ui_pressable
                 class="pressable inputOption checkbox"
                 data-testid="onSelect-1-checkbox"
+                tabindex="0"
               >
-                <div
+                <ui_checkbox
                   class="checkbox"
                 >
                   <input
@@ -2294,59 +2252,59 @@ exports[`component:<Table> prop:onSelect 1`] = `
                     type="checkbox"
                     value=""
                   />
-                </div>
-              </div>
+                </ui_checkbox>
+              </ui_pressable>
               mario/1
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onSelect-1-email"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               mario.1@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onSelect-1-year"
           >
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2005
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onSelect-1-twitter"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td
             data-testid="onSelect-1-action"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
         <tr
-          class="notSelected"
           data-testid="onSelect-2"
         >
           <td
             data-testid="onSelect-2-username"
           >
-            <span
+            <ui_view
               class="view forceRow column selectable"
             >
-              <div
+              <ui_pressable
                 class="pressable inputOption checkbox"
                 data-testid="onSelect-2-checkbox"
+                tabindex="0"
               >
-                <div
+                <ui_checkbox
                   class="checkbox"
                 >
                   <input
@@ -2355,59 +2313,59 @@ exports[`component:<Table> prop:onSelect 1`] = `
                     type="checkbox"
                     value=""
                   />
-                </div>
-              </div>
+                </ui_checkbox>
+              </ui_pressable>
               carlos
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onSelect-2-email"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               carlos@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onSelect-2-year"
           >
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2012
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onSelect-2-twitter"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td
             data-testid="onSelect-2-action"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
         <tr
-          class="notSelected"
           data-testid="onSelect-3"
         >
           <td
             data-testid="onSelect-3-username"
           >
-            <span
+            <ui_view
               class="view forceRow column selectable"
             >
-              <div
+              <ui_pressable
                 class="pressable inputOption checkbox"
                 data-testid="onSelect-3-checkbox"
+                tabindex="0"
               >
-                <div
+                <ui_checkbox
                   class="checkbox"
                 >
                   <input
@@ -2416,63 +2374,63 @@ exports[`component:<Table> prop:onSelect 1`] = `
                     type="checkbox"
                     value=""
                   />
-                </div>
-              </div>
+                </ui_checkbox>
+              </ui_pressable>
               svet
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onSelect-3-email"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               svet@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onSelect-3-year"
           >
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2021
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onSelect-3-twitter"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td
             data-testid="onSelect-3-action"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               <strong>
                 action
               </strong>
-            </span>
+            </ui_view>
           </td>
         </tr>
         <tr
-          class="notSelected"
           data-testid="onSelect-4"
         >
           <td
             data-testid="onSelect-4-username"
           >
-            <span
+            <ui_view
               class="view forceRow column selectable"
             >
-              <div
+              <ui_pressable
                 class="pressable inputOption checkbox"
                 data-testid="onSelect-4-checkbox"
+                tabindex="0"
               >
-                <div
+                <ui_checkbox
                   class="checkbox"
                 >
                   <input
@@ -2481,61 +2439,61 @@ exports[`component:<Table> prop:onSelect 1`] = `
                     type="checkbox"
                     value=""
                   />
-                </div>
-              </div>
+                </ui_checkbox>
+              </ui_pressable>
               javi
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onSelect-4-email"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               hi@soyjavi.com
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onSelect-4-year"
           >
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2022
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onSelect-4-twitter"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               soyjavi
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onSelect-4-action"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
         <tr
-          class="notSelected"
           data-testid="onSelect-5"
         >
           <td
             data-testid="onSelect-5-username"
           >
-            <span
+            <ui_view
               class="view forceRow column selectable"
             >
-              <div
+              <ui_pressable
                 class="pressable inputOption checkbox"
                 data-testid="onSelect-5-checkbox"
+                tabindex="0"
               >
-                <div
+                <ui_checkbox
                   class="checkbox"
                 >
                   <input
@@ -2544,59 +2502,59 @@ exports[`component:<Table> prop:onSelect 1`] = `
                     type="checkbox"
                     value=""
                   />
-                </div>
-              </div>
+                </ui_checkbox>
+              </ui_pressable>
               victor
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onSelect-5-email"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               victor@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onSelect-5-year"
           >
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2021
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onSelect-5-twitter"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td
             data-testid="onSelect-5-action"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
         <tr
-          class="notSelected"
           data-testid="onSelect-6"
         >
           <td
             data-testid="onSelect-6-username"
           >
-            <span
+            <ui_view
               class="view forceRow column selectable"
             >
-              <div
+              <ui_pressable
                 class="pressable inputOption checkbox"
                 data-testid="onSelect-6-checkbox"
+                tabindex="0"
               >
-                <div
+                <ui_checkbox
                   class="checkbox"
                 >
                   <input
@@ -2605,71 +2563,69 @@ exports[`component:<Table> prop:onSelect 1`] = `
                     type="checkbox"
                     value=""
                   />
-                </div>
-              </div>
+                </ui_checkbox>
+              </ui_pressable>
               mario/2
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onSelect-6-email"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               mario.2@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onSelect-6-year"
           >
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2022
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="onSelect-6-twitter"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td
             data-testid="onSelect-6-action"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
       </tbody>
     </table>
-  </div>
+  </ui_scrollview>
 </DocumentFragment>
 `;
 exports[`component:<Table> prop:search 1`] = `
 <DocumentFragment>
-  <div
+  <ui_scrollview
     class="scrollview snap vertical notIndicator container"
   >
     <table
       class="table"
     >
       <thead>
-        <tr
-          class="notSelected"
-        >
+        <tr>
           <th>
-            <span
+            <ui_view
               class="view forceRow column"
             >
               User Name
-              <div
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -2689,19 +2645,19 @@ exports[`component:<Table> prop:search 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-              </div>
-            </span>
+                </ui_icon>
+              </ui_view>
+            </ui_view>
           </th>
           <th>
-            <span
+            <ui_view
               class="view forceRow column"
             >
               Email
-              <div
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -2721,19 +2677,19 @@ exports[`component:<Table> prop:search 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-              </div>
-            </span>
+                </ui_icon>
+              </ui_view>
+            </ui_view>
           </th>
           <th>
-            <span
+            <ui_view
               class="view forceRow column"
             >
               Year
-              <div
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -2753,25 +2709,25 @@ exports[`component:<Table> prop:search 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-              </div>
-            </span>
+                </ui_icon>
+              </ui_view>
+            </ui_view>
           </th>
           <th>
-            <span
+            <ui_view
               class="view forceRow column"
             >
-              <span>
-                <div
+              <ui_layer>
+                <ui_primitive
                   class="dispatcher tooltip"
                 >
                   Twitter
-                </div>
-              </span>
-              <div
+                </ui_primitive>
+              </ui_layer>
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -2791,19 +2747,19 @@ exports[`component:<Table> prop:search 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-              </div>
-            </span>
+                </ui_icon>
+              </ui_view>
+            </ui_view>
           </th>
           <th>
-            <span
+            <ui_view
               class="view forceRow column"
             >
               Action
-              <div
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -2823,77 +2779,73 @@ exports[`component:<Table> prop:search 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-              </div>
-            </span>
+                </ui_icon>
+              </ui_view>
+            </ui_view>
           </th>
         </tr>
       </thead>
       <tbody>
-        <tr
-          class="notSelected"
-        >
+        <tr>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               javi
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               hi@soyjavi.com
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2022
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               soyjavi
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
       </tbody>
     </table>
-  </div>
+  </ui_scrollview>
 </DocumentFragment>
 `;
 exports[`component:<Table> prop:selected 1`] = `
 <DocumentFragment>
-  <div
+  <ui_scrollview
     class="scrollview snap vertical notIndicator container"
   >
     <table
       class="table"
     >
       <thead>
-        <tr
-          class="notSelected"
-        >
+        <tr>
           <th>
-            <span
+            <ui_view
               class="view forceRow column"
             >
               User Name
-              <div
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -2913,19 +2865,19 @@ exports[`component:<Table> prop:selected 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-              </div>
-            </span>
+                </ui_icon>
+              </ui_view>
+            </ui_view>
           </th>
           <th>
-            <span
+            <ui_view
               class="view forceRow column"
             >
               Email
-              <div
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -2945,19 +2897,19 @@ exports[`component:<Table> prop:selected 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-              </div>
-            </span>
+                </ui_icon>
+              </ui_view>
+            </ui_view>
           </th>
           <th>
-            <span
+            <ui_view
               class="view forceRow column"
             >
               Year
-              <div
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -2977,25 +2929,25 @@ exports[`component:<Table> prop:selected 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-              </div>
-            </span>
+                </ui_icon>
+              </ui_view>
+            </ui_view>
           </th>
           <th>
-            <span
+            <ui_view
               class="view forceRow column"
             >
-              <span>
-                <div
+              <ui_layer>
+                <ui_primitive
                   class="dispatcher tooltip"
                 >
                   Twitter
-                </div>
-              </span>
-              <div
+                </ui_primitive>
+              </ui_layer>
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -3015,19 +2967,19 @@ exports[`component:<Table> prop:selected 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-              </div>
-            </span>
+                </ui_icon>
+              </ui_view>
+            </ui_view>
           </th>
           <th>
-            <span
+            <ui_view
               class="view forceRow column"
             >
               Action
-              <div
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -3047,300 +2999,289 @@ exports[`component:<Table> prop:selected 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-              </div>
-            </span>
+                </ui_icon>
+              </ui_view>
+            </ui_view>
           </th>
         </tr>
       </thead>
       <tbody>
-        <tr
-          class="notSelected"
-        >
+        <tr>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               jose
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               jose@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2012
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
-        <tr
-          class="notSelected"
-        >
+        <tr>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               mario/1
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               mario.1@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2005
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
-        <tr
-          class="notSelected"
-        >
+        <tr>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               carlos
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               carlos@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2012
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
-        <tr
-          class="notSelected"
-        >
+        <tr>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               svet
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               svet@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2021
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               <strong>
                 action
               </strong>
-            </span>
+            </ui_view>
           </td>
         </tr>
         <tr
           class="selected"
         >
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               javi
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               hi@soyjavi.com
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2022
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               soyjavi
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
-        <tr
-          class="notSelected"
-        >
+        <tr>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               victor
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               victor@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2021
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
-        <tr
-          class="notSelected"
-        >
+        <tr>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               mario/2
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               mario.2@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2022
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
       </tbody>
     </table>
-  </div>
+  </ui_scrollview>
 </DocumentFragment>
 `;
 exports[`component:<Table> prop:store 1`] = `
 <DocumentFragment>
-  <div
+  <ui_scrollview
     class="scrollview snap vertical notIndicator container"
   >
-    <div
+    <ui_view
       class="view row wide filters"
     >
-      <div
+      <ui_view
         class="view row item"
       >
-        <span
+        <ui_text
           class="text tiny lighten"
         >
           year
-        </span>
-        <span
+        </ui_text>
+        <ui_text
           class="text bold small"
         >
           2020
-        </span>
-        <span
+        </ui_text>
+        <ui_text
           class="text bold small"
         >
            - 2020
-        </span>
-        <div
+        </ui_text>
+        <ui_pressable
           class="pressable buttonRemove"
+          tabindex="0"
         >
-          <span
+          <ui_icon
             class="icon action"
           >
             <svg
@@ -3360,26 +3301,24 @@ exports[`component:<Table> prop:store 1`] = `
                 d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
               />
             </svg>
-          </span>
-        </div>
-      </div>
-    </div>
+          </ui_icon>
+        </ui_pressable>
+      </ui_view>
+    </ui_view>
     <table
       class="table"
     >
       <thead>
-        <tr
-          class="notSelected"
-        >
+        <tr>
           <th>
-            <span
+            <ui_view
               class="view forceRow column"
             >
               User Name
-              <div
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -3399,13 +3338,14 @@ exports[`component:<Table> prop:store 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-                <span>
-                  <div
+                </ui_icon>
+                <ui_layer>
+                  <ui_pressable
                     class="pressable"
                     style="position: relative;"
+                    tabindex="0"
                   >
-                    <span
+                    <ui_icon
                       class="icon headline-3 icon disabled"
                     >
                       <svg
@@ -3425,21 +3365,21 @@ exports[`component:<Table> prop:store 1`] = `
                           d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"
                         />
                       </svg>
-                    </span>
-                  </div>
-                </span>
-              </div>
-            </span>
+                    </ui_icon>
+                  </ui_pressable>
+                </ui_layer>
+              </ui_view>
+            </ui_view>
           </th>
           <th>
-            <span
+            <ui_view
               class="view forceRow column"
             >
               Email
-              <div
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -3459,13 +3399,14 @@ exports[`component:<Table> prop:store 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-                <span>
-                  <div
+                </ui_icon>
+                <ui_layer>
+                  <ui_pressable
                     class="pressable"
                     style="position: relative;"
+                    tabindex="0"
                   >
-                    <span
+                    <ui_icon
                       class="icon headline-3 icon disabled"
                     >
                       <svg
@@ -3485,21 +3426,21 @@ exports[`component:<Table> prop:store 1`] = `
                           d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"
                         />
                       </svg>
-                    </span>
-                  </div>
-                </span>
-              </div>
-            </span>
+                    </ui_icon>
+                  </ui_pressable>
+                </ui_layer>
+              </ui_view>
+            </ui_view>
           </th>
           <th>
-            <span
+            <ui_view
               class="view forceRow column"
             >
               Year
-              <div
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -3519,13 +3460,14 @@ exports[`component:<Table> prop:store 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-                <span>
-                  <div
+                </ui_icon>
+                <ui_layer>
+                  <ui_pressable
                     class="pressable"
                     style="position: relative;"
+                    tabindex="0"
                   >
-                    <span
+                    <ui_icon
                       class="icon headline-3 icon disabled"
                     >
                       <svg
@@ -3545,27 +3487,27 @@ exports[`component:<Table> prop:store 1`] = `
                           d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"
                         />
                       </svg>
-                    </span>
-                  </div>
-                </span>
-              </div>
-            </span>
+                    </ui_icon>
+                  </ui_pressable>
+                </ui_layer>
+              </ui_view>
+            </ui_view>
           </th>
           <th>
-            <span
+            <ui_view
               class="view forceRow column"
             >
-              <span>
-                <div
+              <ui_layer>
+                <ui_primitive
                   class="dispatcher tooltip"
                 >
                   Twitter
-                </div>
-              </span>
-              <div
+                </ui_primitive>
+              </ui_layer>
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -3585,13 +3527,14 @@ exports[`component:<Table> prop:store 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-                <span>
-                  <div
+                </ui_icon>
+                <ui_layer>
+                  <ui_pressable
                     class="pressable"
                     style="position: relative;"
+                    tabindex="0"
                   >
-                    <span
+                    <ui_icon
                       class="icon headline-3 icon disabled"
                     >
                       <svg
@@ -3611,21 +3554,21 @@ exports[`component:<Table> prop:store 1`] = `
                           d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"
                         />
                       </svg>
-                    </span>
-                  </div>
-                </span>
-              </div>
-            </span>
+                    </ui_icon>
+                  </ui_pressable>
+                </ui_layer>
+              </ui_view>
+            </ui_view>
           </th>
           <th>
-            <span
+            <ui_view
               class="view forceRow column"
             >
               Action
-              <div
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -3645,13 +3588,14 @@ exports[`component:<Table> prop:store 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-                <span>
-                  <div
+                </ui_icon>
+                <ui_layer>
+                  <ui_pressable
                     class="pressable"
                     style="position: relative;"
+                    tabindex="0"
                   >
-                    <span
+                    <ui_icon
                       class="icon headline-3 icon disabled"
                     >
                       <svg
@@ -3671,41 +3615,39 @@ exports[`component:<Table> prop:store 1`] = `
                           d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"
                         />
                       </svg>
-                    </span>
-                  </div>
-                </span>
-              </div>
-            </span>
+                    </ui_icon>
+                  </ui_pressable>
+                </ui_layer>
+              </ui_view>
+            </ui_view>
           </th>
         </tr>
       </thead>
       <tbody />
     </table>
-  </div>
+  </ui_scrollview>
 </DocumentFragment>
 `;
 exports[`component:<Table> renders 1`] = `
 <DocumentFragment>
-  <div
+  <ui_scrollview
     class="scrollview snap vertical notIndicator container"
   >
     <table
       class="table"
     >
       <thead>
-        <tr
-          class="notSelected"
-        >
+        <tr>
           <th>
-            <span
+            <ui_view
               class="view forceRow column"
             >
               User Name
-              <div
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -3725,19 +3667,19 @@ exports[`component:<Table> renders 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-              </div>
-            </span>
+                </ui_icon>
+              </ui_view>
+            </ui_view>
           </th>
           <th>
-            <span
+            <ui_view
               class="view forceRow column"
             >
               Email
-              <div
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -3757,19 +3699,19 @@ exports[`component:<Table> renders 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-              </div>
-            </span>
+                </ui_icon>
+              </ui_view>
+            </ui_view>
           </th>
           <th>
-            <span
+            <ui_view
               class="view forceRow column"
             >
               Year
-              <div
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -3789,25 +3731,25 @@ exports[`component:<Table> renders 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-              </div>
-            </span>
+                </ui_icon>
+              </ui_view>
+            </ui_view>
           </th>
           <th>
-            <span
+            <ui_view
               class="view forceRow column"
             >
-              <span>
-                <div
+              <ui_layer>
+                <ui_primitive
                   class="dispatcher tooltip"
                 >
                   Twitter
-                </div>
-              </span>
-              <div
+                </ui_primitive>
+              </ui_layer>
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -3827,19 +3769,19 @@ exports[`component:<Table> renders 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-              </div>
-            </span>
+                </ui_icon>
+              </ui_view>
+            </ui_view>
           </th>
           <th>
-            <span
+            <ui_view
               class="view forceRow column"
             >
               Action
-              <div
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -3859,273 +3801,259 @@ exports[`component:<Table> renders 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-              </div>
-            </span>
+                </ui_icon>
+              </ui_view>
+            </ui_view>
           </th>
         </tr>
       </thead>
       <tbody>
-        <tr
-          class="notSelected"
-        >
+        <tr>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               jose
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               jose@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2012
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
-        <tr
-          class="notSelected"
-        >
+        <tr>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               mario/1
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               mario.1@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2005
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
-        <tr
-          class="notSelected"
-        >
+        <tr>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               carlos
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               carlos@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2012
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
-        <tr
-          class="notSelected"
-        >
+        <tr>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               svet
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               svet@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2021
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               <strong>
                 action
               </strong>
-            </span>
+            </ui_view>
           </td>
         </tr>
-        <tr
-          class="notSelected"
-        >
+        <tr>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               javi
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               hi@soyjavi.com
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2022
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               soyjavi
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
-        <tr
-          class="notSelected"
-        >
+        <tr>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               victor
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               victor@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2021
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
-        <tr
-          class="notSelected"
-        >
+        <tr>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               mario/2
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               mario.2@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2022
-            </span>
+            </ui_view>
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td>
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
       </tbody>
     </table>
-  </div>
+  </ui_scrollview>
 </DocumentFragment>
 `;
 exports[`component:<Table> testId 1`] = `
 <DocumentFragment>
-  <div
+  <ui_scrollview
     class="scrollview snap vertical notIndicator container"
     data-testid="mirai"
   >
@@ -4134,20 +4062,19 @@ exports[`component:<Table> testId 1`] = `
     >
       <thead>
         <tr
-          class="notSelected"
           data-testid="mirai-head"
         >
           <th
             data-testid="mirai-head-username"
           >
-            <span
+            <ui_view
               class="view forceRow column"
             >
               User Name
-              <div
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -4167,21 +4094,21 @@ exports[`component:<Table> testId 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-              </div>
-            </span>
+                </ui_icon>
+              </ui_view>
+            </ui_view>
           </th>
           <th
             data-testid="mirai-head-email"
           >
-            <span
+            <ui_view
               class="view forceRow column"
             >
               Email
-              <div
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -4201,21 +4128,21 @@ exports[`component:<Table> testId 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-              </div>
-            </span>
+                </ui_icon>
+              </ui_view>
+            </ui_view>
           </th>
           <th
             data-testid="mirai-head-year"
           >
-            <span
+            <ui_view
               class="view forceRow column"
             >
               Year
-              <div
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -4235,27 +4162,27 @@ exports[`component:<Table> testId 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-              </div>
-            </span>
+                </ui_icon>
+              </ui_view>
+            </ui_view>
           </th>
           <th
             data-testid="mirai-head-twitter"
           >
-            <span
+            <ui_view
               class="view forceRow column"
             >
-              <span>
-                <div
+              <ui_layer>
+                <ui_primitive
                   class="dispatcher tooltip"
                 >
                   Twitter
-                </div>
-              </span>
-              <div
+                </ui_primitive>
+              </ui_layer>
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -4275,21 +4202,21 @@ exports[`component:<Table> testId 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-              </div>
-            </span>
+                </ui_icon>
+              </ui_view>
+            </ui_view>
           </th>
           <th
             data-testid="mirai-head-action"
           >
-            <span
+            <ui_view
               class="view forceRow column"
             >
               Action
-              <div
+              <ui_view
                 class="view row icons"
               >
-                <span
+                <ui_icon
                   class="icon headline-3 icon disabled"
                 >
                   <svg
@@ -4309,343 +4236,336 @@ exports[`component:<Table> testId 1`] = `
                       d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                     />
                   </svg>
-                </span>
-              </div>
-            </span>
+                </ui_icon>
+              </ui_view>
+            </ui_view>
           </th>
         </tr>
       </thead>
       <tbody>
         <tr
-          class="notSelected"
           data-testid="mirai-0"
         >
           <td
             data-testid="mirai-0-username"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               jose
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="mirai-0-email"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               jose@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="mirai-0-year"
           >
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2012
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="mirai-0-twitter"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td
             data-testid="mirai-0-action"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
         <tr
-          class="notSelected"
           data-testid="mirai-1"
         >
           <td
             data-testid="mirai-1-username"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               mario/1
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="mirai-1-email"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               mario.1@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="mirai-1-year"
           >
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2005
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="mirai-1-twitter"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td
             data-testid="mirai-1-action"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
         <tr
-          class="notSelected"
           data-testid="mirai-2"
         >
           <td
             data-testid="mirai-2-username"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               carlos
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="mirai-2-email"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               carlos@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="mirai-2-year"
           >
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2012
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="mirai-2-twitter"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td
             data-testid="mirai-2-action"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
         <tr
-          class="notSelected"
           data-testid="mirai-3"
         >
           <td
             data-testid="mirai-3-username"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               svet
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="mirai-3-email"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               svet@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="mirai-3-year"
           >
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2021
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="mirai-3-twitter"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td
             data-testid="mirai-3-action"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               <strong>
                 action
               </strong>
-            </span>
+            </ui_view>
           </td>
         </tr>
         <tr
-          class="notSelected"
           data-testid="mirai-4"
         >
           <td
             data-testid="mirai-4-username"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               javi
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="mirai-4-email"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               hi@soyjavi.com
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="mirai-4-year"
           >
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2022
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="mirai-4-twitter"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               soyjavi
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="mirai-4-action"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
         <tr
-          class="notSelected"
           data-testid="mirai-5"
         >
           <td
             data-testid="mirai-5-username"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               victor
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="mirai-5-email"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               victor@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="mirai-5-year"
           >
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2021
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="mirai-5-twitter"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td
             data-testid="mirai-5-action"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
         <tr
-          class="notSelected"
           data-testid="mirai-6"
         >
           <td
             data-testid="mirai-6-username"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               mario/2
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="mirai-6-email"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             >
               mario.2@mirai.com
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="mirai-6-year"
           >
-            <span
+            <ui_view
               class="view forceRow column number"
             >
               2022
-            </span>
+            </ui_view>
           </td>
           <td
             data-testid="mirai-6-twitter"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
           <td
             data-testid="mirai-6-action"
           >
-            <span
+            <ui_view
               class="view forceRow column text"
             />
           </td>
         </tr>
       </tbody>
     </table>
-  </div>
+  </ui_scrollview>
 </DocumentFragment>
 `;