npm - @mirai/core - Versions diffs - 0.3.355 → 0.3.357 - Mend

@mirai/core 0.3.355 → 0.3.357

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

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

@@ -2,14 +2,14 @@
 exports[` 1`] = `
 <DocumentFragment>
-  <ui_view
+  <ui-view
     class="view"
     l10n="[object Object]"
   >
-    <ui_notification
+    <ui-notification
       class="view row notification warning outlined small"
     >
-      <ui_icon
+      <ui-icon
         class="icon paragraph"
       >
         <svg
@@ -25,66 +25,66 @@ exports[` 1`] = `
             d="M12 5.99 19.53 19H4.47L12 5.99M12 2 1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
           />
         </svg>
-      </ui_icon>
-      <ui_view
+      </ui-icon>
+      <ui-view
         class="view texts"
       >
-        <ui_text
+        <ui-text
           class="text small"
         >
           finder.notification.warning_occupation
-        </ui_text>
-      </ui_view>
-    </ui_notification>
-    <ui_scrollview
+        </ui-text>
+      </ui-view>
+    </ui-notification>
+    <ui-scrollview
       class="scrollview vertical"
     >
-      <ui_view
+      <ui-view
         class="view wide"
       >
-        <ui_view
+        <ui-view
           class="view row"
         >
-          <ui_text
+          <ui-text
             class="text action"
           >
             finder.label.place
-            <ui_text
+            <ui-text
               style="text-decoration: underline;"
             >
               type
-            </ui_text>
+            </ui-text>
             count.room
-          </ui_text>
-          <ui_action
+          </ui-text>
+          <ui-action
             class="pressable action small"
             tabindex="0"
           >
             finder.action.remove
-          </ui_action>
-        </ui_view>
-        <ui_input_number
+          </ui-action>
+        </ui-view>
+        <ui-input-number
           class="view row inputNumber"
         >
-          <ui_view
+          <ui-view
             class="view texts"
           >
-            <label
+            <ui-label
               class="text paragraph text label"
             >
               common.label.occupation_type_adult
-            </label>
-            <ui_text
+            </ui-label>
+            <ui-text
               class="text small text hint hint"
             >
               common.label.age_from
-            </ui_text>
-          </ui_view>
+            </ui-text>
+          </ui-view>
           <button
             class="pressable disabled button small squared disabled"
             disabled=""
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -104,18 +104,18 @@ exports[` 1`] = `
                   d="M19 13H5v-2h14v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-          <ui_text
+          <ui-text
             class="text paragraph value"
           >
             2
-          </ui_text>
+          </ui-text>
           <button
             class="pressable button small squared secondary"
             tabindex="0"
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -135,37 +135,37 @@ exports[` 1`] = `
                   d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-        </ui_input_number>
-        <ui_input_number
+        </ui-input-number>
+        <ui-input-number
           class="view row inputNumber"
         >
-          <ui_view
+          <ui-view
             class="view texts"
           >
-            <label
+            <ui-label
               class="text paragraph text label"
             >
               common.label.occupation_type_child
-            </label>
-            <ui_text
+            </ui-label>
+            <ui-text
               class="text small text hint hint"
             >
               common.label.age
-              <ui_text
+              <ui-text
                 style="text-decoration: underline;"
               >
                 up
-              </ui_text>
+              </ui-text>
               to
-            </ui_text>
-          </ui_view>
+            </ui-text>
+          </ui-view>
           <button
             class="pressable button small squared secondary"
             tabindex="0"
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -185,18 +185,18 @@ exports[` 1`] = `
                   d="M19 13H5v-2h14v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-          <ui_text
+          <ui-text
             class="text paragraph value"
           >
             2
-          </ui_text>
+          </ui-text>
           <button
             class="pressable disabled button small squared disabled"
             disabled=""
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -216,22 +216,22 @@ exports[` 1`] = `
                   d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-        </ui_input_number>
-        <ui_view
+        </ui-input-number>
+        <ui-view
           class="view"
         >
-          <ui_view
+          <ui-view
             class="view row"
           >
-            <ui_view
+            <ui-input-select
               class="view inputContainer"
             >
-              <ui_view
+              <ui-view
                 class="view row inputBorder"
               >
-                <ui_view
+                <ui-view
                   class="view wide content"
                 >
                   <select
@@ -334,8 +334,8 @@ exports[` 1`] = `
                       17
                     </option>
                   </select>
-                </ui_view>
-                <ui_icon
+                </ui-view>
+                <ui-icon
                   class="icon headline-3 icon expand"
                 >
                   <svg
@@ -356,16 +356,16 @@ exports[` 1`] = `
                       d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
                     />
                   </svg>
-                </ui_icon>
-              </ui_view>
-            </ui_view>
-            <ui_view
+                </ui-icon>
+              </ui-view>
+            </ui-input-select>
+            <ui-input-select
               class="view inputContainer"
             >
-              <ui_view
+              <ui-view
                 class="view row inputBorder"
               >
-                <ui_view
+                <ui-view
                   class="view wide content"
                 >
                   <select
@@ -468,8 +468,8 @@ exports[` 1`] = `
                       17
                     </option>
                   </select>
-                </ui_view>
-                <ui_icon
+                </ui-view>
+                <ui-icon
                   class="icon headline-3 icon expand"
                 >
                   <svg
@@ -490,63 +490,63 @@ exports[` 1`] = `
                       d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
                     />
                   </svg>
-                </ui_icon>
-              </ui_view>
-            </ui_view>
-          </ui_view>
-          <ui_text
+                </ui-icon>
+              </ui-view>
+            </ui-input-select>
+          </ui-view>
+          <ui-text
             class="text light small"
           >
             common.label.age_hint
-          </ui_text>
-        </ui_view>
-      </ui_view>
-      <ui_view
+          </ui-text>
+        </ui-view>
+      </ui-view>
+      <ui-view
         class="view wide"
       >
-        <ui_view
+        <ui-view
           class="view row"
         >
-          <ui_text
+          <ui-text
             class="text action"
           >
             finder.label.place
-            <ui_text
+            <ui-text
               style="text-decoration: underline;"
             >
               type
-            </ui_text>
+            </ui-text>
             count.room
-          </ui_text>
-          <ui_action
+          </ui-text>
+          <ui-action
             class="pressable action small"
             tabindex="0"
           >
             finder.action.remove
-          </ui_action>
-        </ui_view>
-        <ui_input_number
+          </ui-action>
+        </ui-view>
+        <ui-input-number
           class="view row inputNumber"
         >
-          <ui_view
+          <ui-view
             class="view texts"
           >
-            <label
+            <ui-label
               class="text paragraph text label"
             >
               common.label.occupation_type_adult
-            </label>
-            <ui_text
+            </ui-label>
+            <ui-text
               class="text small text hint hint"
             >
               common.label.age_from
-            </ui_text>
-          </ui_view>
+            </ui-text>
+          </ui-view>
           <button
             class="pressable disabled button small squared disabled"
             disabled=""
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -566,18 +566,18 @@ exports[` 1`] = `
                   d="M19 13H5v-2h14v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-          <ui_text
+          <ui-text
             class="text paragraph value"
           >
             2
-          </ui_text>
+          </ui-text>
           <button
             class="pressable button small squared secondary"
             tabindex="0"
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -597,37 +597,37 @@ exports[` 1`] = `
                   d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-        </ui_input_number>
-        <ui_input_number
+        </ui-input-number>
+        <ui-input-number
           class="view row inputNumber"
         >
-          <ui_view
+          <ui-view
             class="view texts"
           >
-            <label
+            <ui-label
               class="text paragraph text label"
             >
               common.label.occupation_type_child
-            </label>
-            <ui_text
+            </ui-label>
+            <ui-text
               class="text small text hint hint"
             >
               common.label.age
-              <ui_text
+              <ui-text
                 style="text-decoration: underline;"
               >
                 up
-              </ui_text>
+              </ui-text>
               to
-            </ui_text>
-          </ui_view>
+            </ui-text>
+          </ui-view>
           <button
             class="pressable disabled button small squared disabled"
             disabled=""
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -647,18 +647,18 @@ exports[` 1`] = `
                   d="M19 13H5v-2h14v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-          <ui_text
+          <ui-text
             class="text paragraph value"
           >
             0
-          </ui_text>
+          </ui-text>
           <button
             class="pressable button small squared secondary"
             tabindex="0"
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -678,12 +678,12 @@ exports[` 1`] = `
                   d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-        </ui_input_number>
-      </ui_view>
-    </ui_scrollview>
-    <ui_view
+        </ui-input-number>
+      </ui-view>
+    </ui-scrollview>
+    <ui-view
       class="view row"
     >
       <button
@@ -692,61 +692,61 @@ exports[` 1`] = `
       >
         finder.action.add_place_type.room
       </button>
-    </ui_view>
-  </ui_view>
+    </ui-view>
+  </ui-view>
 </DocumentFragment>
 `;
 exports[`component:<Occupation> adding a new room 1`] = `
 <DocumentFragment>
-  <ui_view
+  <ui-view
     class="view"
     data-testid="occupation"
     l10n="[object Object]"
   >
-    <ui_scrollview
+    <ui-scrollview
       class="scrollview vertical"
     >
-      <ui_view
+      <ui-view
         class="view wide"
       >
-        <ui_view
+        <ui-view
           class="view row"
         >
-          <ui_text
+          <ui-text
             class="text action"
           >
             finder.label.place
-            <ui_text
+            <ui-text
               style="text-decoration: underline;"
             >
               type
-            </ui_text>
+            </ui-text>
             count.room
-          </ui_text>
-        </ui_view>
-        <ui_input_number
+          </ui-text>
+        </ui-view>
+        <ui-input-number
           class="view row inputNumber"
         >
-          <ui_view
+          <ui-view
             class="view texts"
           >
-            <label
+            <ui-label
               class="text paragraph text label"
             >
               common.label.occupation_type_adult
-            </label>
-            <ui_text
+            </ui-label>
+            <ui-text
               class="text small text hint hint"
             >
               common.label.age_from
-            </ui_text>
-          </ui_view>
+            </ui-text>
+          </ui-view>
           <button
             class="pressable disabled button small squared disabled"
             disabled=""
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -766,18 +766,18 @@ exports[`component:<Occupation> adding a new room 1`] = `
                   d="M19 13H5v-2h14v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-          <ui_text
+          <ui-text
             class="text paragraph value"
           >
             2
-          </ui_text>
+          </ui-text>
           <button
             class="pressable button small squared secondary"
             tabindex="0"
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -797,37 +797,37 @@ exports[`component:<Occupation> adding a new room 1`] = `
                   d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-        </ui_input_number>
-        <ui_input_number
+        </ui-input-number>
+        <ui-input-number
           class="view row inputNumber"
         >
-          <ui_view
+          <ui-view
             class="view texts"
           >
-            <label
+            <ui-label
               class="text paragraph text label"
             >
               common.label.occupation_type_child
-            </label>
-            <ui_text
+            </ui-label>
+            <ui-text
               class="text small text hint hint"
             >
               common.label.age
-              <ui_text
+              <ui-text
                 style="text-decoration: underline;"
               >
                 up
-              </ui_text>
+              </ui-text>
               to
-            </ui_text>
-          </ui_view>
+            </ui-text>
+          </ui-view>
           <button
             class="pressable disabled button small squared disabled"
             disabled=""
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -847,18 +847,18 @@ exports[`component:<Occupation> adding a new room 1`] = `
                   d="M19 13H5v-2h14v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-          <ui_text
+          <ui-text
             class="text paragraph value"
           >
             0
-          </ui_text>
+          </ui-text>
           <button
             class="pressable button small squared secondary"
             tabindex="0"
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -878,12 +878,12 @@ exports[`component:<Occupation> adding a new room 1`] = `
                   d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-        </ui_input_number>
-      </ui_view>
-    </ui_scrollview>
-    <ui_view
+        </ui-input-number>
+      </ui-view>
+    </ui-scrollview>
+    <ui-view
       class="view row"
     >
       <button
@@ -893,60 +893,60 @@ exports[`component:<Occupation> adding a new room 1`] = `
       >
         finder.action.add_place_type.room
       </button>
-    </ui_view>
-  </ui_view>
+    </ui-view>
+  </ui-view>
 </DocumentFragment>
 `;
 exports[`component:<Occupation> inherit:className 1`] = `
 <DocumentFragment>
-  <ui_view
+  <ui-view
     class="view mirai"
     l10n="[object Object]"
   >
-    <ui_scrollview
+    <ui-scrollview
       class="scrollview vertical"
     >
-      <ui_view
+      <ui-view
         class="view wide"
       >
-        <ui_view
+        <ui-view
           class="view row"
         >
-          <ui_text
+          <ui-text
             class="text action"
           >
             finder.label.place
-            <ui_text
+            <ui-text
               style="text-decoration: underline;"
             >
               type
-            </ui_text>
+            </ui-text>
             count.room
-          </ui_text>
-        </ui_view>
-        <ui_input_number
+          </ui-text>
+        </ui-view>
+        <ui-input-number
           class="view row inputNumber"
         >
-          <ui_view
+          <ui-view
             class="view texts"
           >
-            <label
+            <ui-label
               class="text paragraph text label"
             >
               common.label.occupation_type_adult
-            </label>
-            <ui_text
+            </ui-label>
+            <ui-text
               class="text small text hint hint"
             >
               common.label.age_from
-            </ui_text>
-          </ui_view>
+            </ui-text>
+          </ui-view>
           <button
             class="pressable disabled button small squared disabled"
             disabled=""
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -966,18 +966,18 @@ exports[`component:<Occupation> inherit:className 1`] = `
                   d="M19 13H5v-2h14v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-          <ui_text
+          <ui-text
             class="text paragraph value"
           >
             2
-          </ui_text>
+          </ui-text>
           <button
             class="pressable button small squared secondary"
             tabindex="0"
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -997,37 +997,37 @@ exports[`component:<Occupation> inherit:className 1`] = `
                   d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-        </ui_input_number>
-        <ui_input_number
+        </ui-input-number>
+        <ui-input-number
           class="view row inputNumber"
         >
-          <ui_view
+          <ui-view
             class="view texts"
           >
-            <label
+            <ui-label
               class="text paragraph text label"
             >
               common.label.occupation_type_child
-            </label>
-            <ui_text
+            </ui-label>
+            <ui-text
               class="text small text hint hint"
             >
               common.label.age
-              <ui_text
+              <ui-text
                 style="text-decoration: underline;"
               >
                 up
-              </ui_text>
+              </ui-text>
               to
-            </ui_text>
-          </ui_view>
+            </ui-text>
+          </ui-view>
           <button
             class="pressable disabled button small squared disabled"
             disabled=""
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -1047,18 +1047,18 @@ exports[`component:<Occupation> inherit:className 1`] = `
                   d="M19 13H5v-2h14v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-          <ui_text
+          <ui-text
             class="text paragraph value"
           >
             0
-          </ui_text>
+          </ui-text>
           <button
             class="pressable button small squared secondary"
             tabindex="0"
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -1078,12 +1078,12 @@ exports[`component:<Occupation> inherit:className 1`] = `
                   d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-        </ui_input_number>
-      </ui_view>
-    </ui_scrollview>
-    <ui_view
+        </ui-input-number>
+      </ui-view>
+    </ui-scrollview>
+    <ui-view
       class="view row"
     >
       <button
@@ -1092,60 +1092,60 @@ exports[`component:<Occupation> inherit:className 1`] = `
       >
         finder.action.add_place_type.room
       </button>
-    </ui_view>
-  </ui_view>
+    </ui-view>
+  </ui-view>
 </DocumentFragment>
 `;
 exports[`component:<Occupation> prop:dataSource 1`] = `
 <DocumentFragment>
-  <ui_view
+  <ui-view
     class="view"
     l10n="[object Object]"
   >
-    <ui_scrollview
+    <ui-scrollview
       class="scrollview vertical"
     >
-      <ui_view
+      <ui-view
         class="view wide"
       >
-        <ui_view
+        <ui-view
           class="view row"
         >
-          <ui_text
+          <ui-text
             class="text action"
           >
             finder.label.place
-            <ui_text
+            <ui-text
               style="text-decoration: underline;"
             >
               type
-            </ui_text>
+            </ui-text>
             count.room
-          </ui_text>
-        </ui_view>
-        <ui_input_number
+          </ui-text>
+        </ui-view>
+        <ui-input-number
           class="view row inputNumber"
         >
-          <ui_view
+          <ui-view
             class="view texts"
           >
-            <label
+            <ui-label
               class="text paragraph text label"
             >
               common.label.occupation_type_adult
-            </label>
-            <ui_text
+            </ui-label>
+            <ui-text
               class="text small text hint hint"
             >
               common.label.age_from
-            </ui_text>
-          </ui_view>
+            </ui-text>
+          </ui-view>
           <button
             class="pressable disabled button small squared disabled"
             disabled=""
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -1165,18 +1165,18 @@ exports[`component:<Occupation> prop:dataSource 1`] = `
                   d="M19 13H5v-2h14v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-          <ui_text
+          <ui-text
             class="text paragraph value"
           >
             2
-          </ui_text>
+          </ui-text>
           <button
             class="pressable button small squared secondary"
             tabindex="0"
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -1196,37 +1196,37 @@ exports[`component:<Occupation> prop:dataSource 1`] = `
                   d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-        </ui_input_number>
-        <ui_input_number
+        </ui-input-number>
+        <ui-input-number
           class="view row inputNumber"
         >
-          <ui_view
+          <ui-view
             class="view texts"
           >
-            <label
+            <ui-label
               class="text paragraph text label"
             >
               common.label.occupation_type_child
-            </label>
-            <ui_text
+            </ui-label>
+            <ui-text
               class="text small text hint hint"
             >
               common.label.age
-              <ui_text
+              <ui-text
                 style="text-decoration: underline;"
               >
                 up
-              </ui_text>
+              </ui-text>
               to
-            </ui_text>
-          </ui_view>
+            </ui-text>
+          </ui-view>
           <button
             class="pressable disabled button small squared disabled"
             disabled=""
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -1246,18 +1246,18 @@ exports[`component:<Occupation> prop:dataSource 1`] = `
                   d="M19 13H5v-2h14v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-          <ui_text
+          <ui-text
             class="text paragraph value"
           >
             0
-          </ui_text>
+          </ui-text>
           <button
             class="pressable button small squared secondary"
             tabindex="0"
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -1277,12 +1277,12 @@ exports[`component:<Occupation> prop:dataSource 1`] = `
                   d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-        </ui_input_number>
-      </ui_view>
-    </ui_scrollview>
-    <ui_view
+        </ui-input-number>
+      </ui-view>
+    </ui-scrollview>
+    <ui-view
       class="view row"
     >
       <button
@@ -1291,59 +1291,59 @@ exports[`component:<Occupation> prop:dataSource 1`] = `
       >
         finder.action.add_place_type.room
       </button>
-    </ui_view>
-  </ui_view>
+    </ui-view>
+  </ui-view>
 </DocumentFragment>
 `;
 exports[`component:<Occupation> prop:maxRooms 1`] = `
 <DocumentFragment>
-  <ui_view
+  <ui-view
     class="view"
   >
-    <ui_scrollview
+    <ui-scrollview
       class="scrollview vertical"
     >
-      <ui_view
+      <ui-view
         class="view wide"
       >
-        <ui_view
+        <ui-view
           class="view row"
         >
-          <ui_text
+          <ui-text
             class="text action"
           >
             finder.label.place
-            <ui_text
+            <ui-text
               style="text-decoration: underline;"
             >
               type
-            </ui_text>
+            </ui-text>
             count.room
-          </ui_text>
-        </ui_view>
-        <ui_input_number
+          </ui-text>
+        </ui-view>
+        <ui-input-number
           class="view row inputNumber"
         >
-          <ui_view
+          <ui-view
             class="view texts"
           >
-            <label
+            <ui-label
               class="text paragraph text label"
             >
               common.label.occupation_type_adult
-            </label>
-            <ui_text
+            </ui-label>
+            <ui-text
               class="text small text hint hint"
             >
               common.label.age_from
-            </ui_text>
-          </ui_view>
+            </ui-text>
+          </ui-view>
           <button
             class="pressable button small squared secondary"
             tabindex="0"
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -1363,18 +1363,18 @@ exports[`component:<Occupation> prop:maxRooms 1`] = `
                   d="M19 13H5v-2h14v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-          <ui_text
+          <ui-text
             class="text paragraph value"
           >
             2
-          </ui_text>
+          </ui-text>
           <button
             class="pressable button small squared secondary"
             tabindex="0"
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -1394,37 +1394,37 @@ exports[`component:<Occupation> prop:maxRooms 1`] = `
                   d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-        </ui_input_number>
-        <ui_input_number
+        </ui-input-number>
+        <ui-input-number
           class="view row inputNumber"
         >
-          <ui_view
+          <ui-view
             class="view texts"
           >
-            <label
+            <ui-label
               class="text paragraph text label"
             >
               common.label.occupation_type_child
-            </label>
-            <ui_text
+            </ui-label>
+            <ui-text
               class="text small text hint hint"
             >
               common.label.age
-              <ui_text
+              <ui-text
                 style="text-decoration: underline;"
               >
                 up
-              </ui_text>
+              </ui-text>
               to
-            </ui_text>
-          </ui_view>
+            </ui-text>
+          </ui-view>
           <button
             class="pressable disabled button small squared disabled"
             disabled=""
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -1444,18 +1444,18 @@ exports[`component:<Occupation> prop:maxRooms 1`] = `
                   d="M19 13H5v-2h14v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-          <ui_text
+          <ui-text
             class="text paragraph value"
           >
             0
-          </ui_text>
+          </ui-text>
           <button
             class="pressable button small squared secondary"
             tabindex="0"
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -1475,12 +1475,12 @@ exports[`component:<Occupation> prop:maxRooms 1`] = `
                   d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-        </ui_input_number>
-      </ui_view>
-    </ui_scrollview>
-    <ui_view
+        </ui-input-number>
+      </ui-view>
+    </ui-scrollview>
+    <ui-view
       class="view row"
     >
       <button
@@ -1489,59 +1489,59 @@ exports[`component:<Occupation> prop:maxRooms 1`] = `
       >
         finder.action.add_place_type.room
       </button>
-    </ui_view>
-  </ui_view>
+    </ui-view>
+  </ui-view>
 </DocumentFragment>
 `;
 exports[`component:<Occupation> prop:minRooms 1`] = `
 <DocumentFragment>
-  <ui_view
+  <ui-view
     class="view"
   >
-    <ui_scrollview
+    <ui-scrollview
       class="scrollview vertical"
     >
-      <ui_view
+      <ui-view
         class="view wide"
       >
-        <ui_view
+        <ui-view
           class="view row"
         >
-          <ui_text
+          <ui-text
             class="text action"
           >
             finder.label.place
-            <ui_text
+            <ui-text
               style="text-decoration: underline;"
             >
               type
-            </ui_text>
+            </ui-text>
             count.room
-          </ui_text>
-        </ui_view>
-        <ui_input_number
+          </ui-text>
+        </ui-view>
+        <ui-input-number
           class="view row inputNumber"
         >
-          <ui_view
+          <ui-view
             class="view texts"
           >
-            <label
+            <ui-label
               class="text paragraph text label"
             >
               common.label.occupation_type_adult
-            </label>
-            <ui_text
+            </ui-label>
+            <ui-text
               class="text small text hint hint"
             >
               common.label.age_from
-            </ui_text>
-          </ui_view>
+            </ui-text>
+          </ui-view>
           <button
             class="pressable button small squared secondary"
             tabindex="0"
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -1561,18 +1561,18 @@ exports[`component:<Occupation> prop:minRooms 1`] = `
                   d="M19 13H5v-2h14v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-          <ui_text
+          <ui-text
             class="text paragraph value"
           >
             2
-          </ui_text>
+          </ui-text>
           <button
             class="pressable button small squared secondary"
             tabindex="0"
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -1592,37 +1592,37 @@ exports[`component:<Occupation> prop:minRooms 1`] = `
                   d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-        </ui_input_number>
-        <ui_input_number
+        </ui-input-number>
+        <ui-input-number
           class="view row inputNumber"
         >
-          <ui_view
+          <ui-view
             class="view texts"
           >
-            <label
+            <ui-label
               class="text paragraph text label"
             >
               common.label.occupation_type_child
-            </label>
-            <ui_text
+            </ui-label>
+            <ui-text
               class="text small text hint hint"
             >
               common.label.age
-              <ui_text
+              <ui-text
                 style="text-decoration: underline;"
               >
                 up
-              </ui_text>
+              </ui-text>
               to
-            </ui_text>
-          </ui_view>
+            </ui-text>
+          </ui-view>
           <button
             class="pressable disabled button small squared disabled"
             disabled=""
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -1642,18 +1642,18 @@ exports[`component:<Occupation> prop:minRooms 1`] = `
                   d="M19 13H5v-2h14v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-          <ui_text
+          <ui-text
             class="text paragraph value"
           >
             0
-          </ui_text>
+          </ui-text>
           <button
             class="pressable button small squared secondary"
             tabindex="0"
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -1673,50 +1673,50 @@ exports[`component:<Occupation> prop:minRooms 1`] = `
                   d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-        </ui_input_number>
-      </ui_view>
-      <ui_view
+        </ui-input-number>
+      </ui-view>
+      <ui-view
         class="view wide"
       >
-        <ui_view
+        <ui-view
           class="view row"
         >
-          <ui_text
+          <ui-text
             class="text action"
           >
             finder.label.place
-            <ui_text
+            <ui-text
               style="text-decoration: underline;"
             >
               type
-            </ui_text>
+            </ui-text>
             count.room
-          </ui_text>
-        </ui_view>
-        <ui_input_number
+          </ui-text>
+        </ui-view>
+        <ui-input-number
           class="view row inputNumber"
         >
-          <ui_view
+          <ui-view
             class="view texts"
           >
-            <label
+            <ui-label
               class="text paragraph text label"
             >
               common.label.occupation_type_adult
-            </label>
-            <ui_text
+            </ui-label>
+            <ui-text
               class="text small text hint hint"
             >
               common.label.age_from
-            </ui_text>
-          </ui_view>
+            </ui-text>
+          </ui-view>
           <button
             class="pressable button small squared secondary"
             tabindex="0"
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -1736,18 +1736,18 @@ exports[`component:<Occupation> prop:minRooms 1`] = `
                   d="M19 13H5v-2h14v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-          <ui_text
+          <ui-text
             class="text paragraph value"
           >
             2
-          </ui_text>
+          </ui-text>
           <button
             class="pressable button small squared secondary"
             tabindex="0"
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -1767,37 +1767,37 @@ exports[`component:<Occupation> prop:minRooms 1`] = `
                   d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-        </ui_input_number>
-        <ui_input_number
+        </ui-input-number>
+        <ui-input-number
           class="view row inputNumber"
         >
-          <ui_view
+          <ui-view
             class="view texts"
           >
-            <label
+            <ui-label
               class="text paragraph text label"
             >
               common.label.occupation_type_child
-            </label>
-            <ui_text
+            </ui-label>
+            <ui-text
               class="text small text hint hint"
             >
               common.label.age
-              <ui_text
+              <ui-text
                 style="text-decoration: underline;"
               >
                 up
-              </ui_text>
+              </ui-text>
               to
-            </ui_text>
-          </ui_view>
+            </ui-text>
+          </ui-view>
           <button
             class="pressable disabled button small squared disabled"
             disabled=""
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -1817,18 +1817,18 @@ exports[`component:<Occupation> prop:minRooms 1`] = `
                   d="M19 13H5v-2h14v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-          <ui_text
+          <ui-text
             class="text paragraph value"
           >
             0
-          </ui_text>
+          </ui-text>
           <button
             class="pressable button small squared secondary"
             tabindex="0"
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -1848,12 +1848,12 @@ exports[`component:<Occupation> prop:minRooms 1`] = `
                   d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-        </ui_input_number>
-      </ui_view>
-    </ui_scrollview>
-    <ui_view
+        </ui-input-number>
+      </ui-view>
+    </ui-scrollview>
+    <ui-view
       class="view row"
     >
       <button
@@ -1862,59 +1862,59 @@ exports[`component:<Occupation> prop:minRooms 1`] = `
       >
         finder.action.add_place_type.room
       </button>
-    </ui_view>
-  </ui_view>
+    </ui-view>
+  </ui-view>
 </DocumentFragment>
 `;
 exports[`component:<Occupation> prop:text 1`] = `
 <DocumentFragment>
-  <ui_view
+  <ui-view
     class="view"
   >
-    <ui_scrollview
+    <ui-scrollview
       class="scrollview vertical"
     >
-      <ui_view
+      <ui-view
         class="view wide"
       >
-        <ui_view
+        <ui-view
           class="view row"
         >
-          <ui_text
+          <ui-text
             class="text action"
           >
             finder.label.place
-            <ui_text
+            <ui-text
               style="text-decoration: underline;"
             >
               type
-            </ui_text>
+            </ui-text>
             count.room
-          </ui_text>
-        </ui_view>
-        <ui_input_number
+          </ui-text>
+        </ui-view>
+        <ui-input-number
           class="view row inputNumber"
         >
-          <ui_view
+          <ui-view
             class="view texts"
           >
-            <label
+            <ui-label
               class="text paragraph text label"
             >
               common.label.occupation_type_adult
-            </label>
-            <ui_text
+            </ui-label>
+            <ui-text
               class="text small text hint hint"
             >
               common.label.age_from
-            </ui_text>
-          </ui_view>
+            </ui-text>
+          </ui-view>
           <button
             class="pressable button small squared secondary"
             tabindex="0"
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -1934,18 +1934,18 @@ exports[`component:<Occupation> prop:text 1`] = `
                   d="M19 13H5v-2h14v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-          <ui_text
+          <ui-text
             class="text paragraph value"
           >
             2
-          </ui_text>
+          </ui-text>
           <button
             class="pressable button small squared secondary"
             tabindex="0"
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -1965,37 +1965,37 @@ exports[`component:<Occupation> prop:text 1`] = `
                   d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-        </ui_input_number>
-        <ui_input_number
+        </ui-input-number>
+        <ui-input-number
           class="view row inputNumber"
         >
-          <ui_view
+          <ui-view
             class="view texts"
           >
-            <label
+            <ui-label
               class="text paragraph text label"
             >
               common.label.occupation_type_child
-            </label>
-            <ui_text
+            </ui-label>
+            <ui-text
               class="text small text hint hint"
             >
               common.label.age
-              <ui_text
+              <ui-text
                 style="text-decoration: underline;"
               >
                 up
-              </ui_text>
+              </ui-text>
               to
-            </ui_text>
-          </ui_view>
+            </ui-text>
+          </ui-view>
           <button
             class="pressable disabled button small squared disabled"
             disabled=""
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -2015,18 +2015,18 @@ exports[`component:<Occupation> prop:text 1`] = `
                   d="M19 13H5v-2h14v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-          <ui_text
+          <ui-text
             class="text paragraph value"
           >
             0
-          </ui_text>
+          </ui-text>
           <button
             class="pressable button small squared secondary"
             tabindex="0"
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -2046,12 +2046,12 @@ exports[`component:<Occupation> prop:text 1`] = `
                   d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-        </ui_input_number>
-      </ui_view>
-    </ui_scrollview>
-    <ui_view
+        </ui-input-number>
+      </ui-view>
+    </ui-scrollview>
+    <ui-view
       class="view row"
     >
       <button
@@ -2060,21 +2060,21 @@ exports[`component:<Occupation> prop:text 1`] = `
       >
         finder.action.add_place_type.room
       </button>
-    </ui_view>
-  </ui_view>
+    </ui-view>
+  </ui-view>
 </DocumentFragment>
 `;
 exports[`component:<Occupation> prop:value prop:error 1`] = `
 <DocumentFragment>
-  <ui_view
+  <ui-view
     class="view"
     l10n="[object Object]"
   >
-    <ui_notification
+    <ui-notification
       class="view row notification error outlined small"
     >
-      <ui_icon
+      <ui-icon
         class="icon paragraph"
       >
         <svg
@@ -2094,72 +2094,72 @@ exports[`component:<Occupation> prop:value prop:error 1`] = `
             d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
           />
         </svg>
-      </ui_icon>
-      <ui_view
+      </ui-icon>
+      <ui-view
         class="view texts"
       >
-        <ui_text
+        <ui-text
           class="text small"
         >
           common.notification.error
-          <ui_text
+          <ui-text
             style="text-decoration: underline;"
           >
             unfilled
-          </ui_text>
+          </ui-text>
           fields
-        </ui_text>
-      </ui_view>
-    </ui_notification>
-    <ui_scrollview
+        </ui-text>
+      </ui-view>
+    </ui-notification>
+    <ui-scrollview
       class="scrollview vertical"
     >
-      <ui_view
+      <ui-view
         class="view wide"
       >
-        <ui_view
+        <ui-view
           class="view row"
         >
-          <ui_text
+          <ui-text
             class="text action"
           >
             finder.label.place
-            <ui_text
+            <ui-text
               style="text-decoration: underline;"
             >
               type
-            </ui_text>
+            </ui-text>
             count.room
-          </ui_text>
-          <ui_action
+          </ui-text>
+          <ui-action
             class="pressable action small"
             tabindex="0"
           >
             finder.action.remove
-          </ui_action>
-        </ui_view>
-        <ui_input_number
+          </ui-action>
+        </ui-view>
+        <ui-input-number
           class="view row inputNumber"
         >
-          <ui_view
+          <ui-view
             class="view texts"
           >
-            <label
+            <ui-label
               class="text paragraph text label"
             >
               common.label.occupation_type_adult
-            </label>
-            <ui_text
+            </ui-label>
+            <ui-text
               class="text small text hint hint"
             >
               common.label.age_from
-            </ui_text>
-          </ui_view>
+            </ui-text>
+          </ui-view>
           <button
             class="pressable disabled button small squared disabled"
             disabled=""
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -2179,18 +2179,18 @@ exports[`component:<Occupation> prop:value prop:error 1`] = `
                   d="M19 13H5v-2h14v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-          <ui_text
+          <ui-text
             class="text paragraph value"
           >
             2
-          </ui_text>
+          </ui-text>
           <button
             class="pressable button small squared secondary"
             tabindex="0"
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -2210,37 +2210,37 @@ exports[`component:<Occupation> prop:value prop:error 1`] = `
                   d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-        </ui_input_number>
-        <ui_input_number
+        </ui-input-number>
+        <ui-input-number
           class="view row inputNumber"
         >
-          <ui_view
+          <ui-view
             class="view texts"
           >
-            <label
+            <ui-label
               class="text paragraph text label"
             >
               common.label.occupation_type_child
-            </label>
-            <ui_text
+            </ui-label>
+            <ui-text
               class="text small text hint hint"
             >
               common.label.age
-              <ui_text
+              <ui-text
                 style="text-decoration: underline;"
               >
                 up
-              </ui_text>
+              </ui-text>
               to
-            </ui_text>
-          </ui_view>
+            </ui-text>
+          </ui-view>
           <button
             class="pressable button small squared secondary"
             tabindex="0"
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -2260,18 +2260,18 @@ exports[`component:<Occupation> prop:value prop:error 1`] = `
                   d="M19 13H5v-2h14v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-          <ui_text
+          <ui-text
             class="text paragraph value"
           >
             2
-          </ui_text>
+          </ui-text>
           <button
             class="pressable disabled button small squared disabled"
             disabled=""
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -2291,22 +2291,22 @@ exports[`component:<Occupation> prop:value prop:error 1`] = `
                   d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-        </ui_input_number>
-        <ui_view
+        </ui-input-number>
+        <ui-view
           class="view"
         >
-          <ui_view
+          <ui-view
             class="view row"
           >
-            <ui_view
+            <ui-input-select
               class="view inputContainer"
             >
-              <ui_view
+              <ui-view
                 class="view row inputBorder"
               >
-                <ui_view
+                <ui-view
                   class="view wide content"
                 >
                   <select
@@ -2409,8 +2409,8 @@ exports[`component:<Occupation> prop:value prop:error 1`] = `
                       17
                     </option>
                   </select>
-                </ui_view>
-                <ui_icon
+                </ui-view>
+                <ui-icon
                   class="icon headline-3 icon expand"
                 >
                   <svg
@@ -2431,16 +2431,16 @@ exports[`component:<Occupation> prop:value prop:error 1`] = `
                       d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
                     />
                   </svg>
-                </ui_icon>
-              </ui_view>
-            </ui_view>
-            <ui_view
+                </ui-icon>
+              </ui-view>
+            </ui-input-select>
+            <ui-input-select
               class="view inputContainer"
             >
-              <ui_view
+              <ui-view
                 class="view row inputBorder"
               >
-                <ui_view
+                <ui-view
                   class="view wide content"
                 >
                   <select
@@ -2543,8 +2543,8 @@ exports[`component:<Occupation> prop:value prop:error 1`] = `
                       17
                     </option>
                   </select>
-                </ui_view>
-                <ui_icon
+                </ui-view>
+                <ui-icon
                   class="icon headline-3 icon expand"
                 >
                   <svg
@@ -2565,63 +2565,63 @@ exports[`component:<Occupation> prop:value prop:error 1`] = `
                       d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
                     />
                   </svg>
-                </ui_icon>
-              </ui_view>
-            </ui_view>
-          </ui_view>
-          <ui_text
+                </ui-icon>
+              </ui-view>
+            </ui-input-select>
+          </ui-view>
+          <ui-text
             class="text light small"
           >
             common.label.age_hint
-          </ui_text>
-        </ui_view>
-      </ui_view>
-      <ui_view
+          </ui-text>
+        </ui-view>
+      </ui-view>
+      <ui-view
         class="view wide"
       >
-        <ui_view
+        <ui-view
           class="view row"
         >
-          <ui_text
+          <ui-text
             class="text action"
           >
             finder.label.place
-            <ui_text
+            <ui-text
               style="text-decoration: underline;"
             >
               type
-            </ui_text>
+            </ui-text>
             count.room
-          </ui_text>
-          <ui_action
+          </ui-text>
+          <ui-action
             class="pressable action small"
             tabindex="0"
           >
             finder.action.remove
-          </ui_action>
-        </ui_view>
-        <ui_input_number
+          </ui-action>
+        </ui-view>
+        <ui-input-number
           class="view row inputNumber"
         >
-          <ui_view
+          <ui-view
             class="view texts"
           >
-            <label
+            <ui-label
               class="text paragraph text label"
             >
               common.label.occupation_type_adult
-            </label>
-            <ui_text
+            </ui-label>
+            <ui-text
               class="text small text hint hint"
             >
               common.label.age_from
-            </ui_text>
-          </ui_view>
+            </ui-text>
+          </ui-view>
           <button
             class="pressable disabled button small squared disabled"
             disabled=""
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -2641,18 +2641,18 @@ exports[`component:<Occupation> prop:value prop:error 1`] = `
                   d="M19 13H5v-2h14v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-          <ui_text
+          <ui-text
             class="text paragraph value"
           >
             2
-          </ui_text>
+          </ui-text>
           <button
             class="pressable button small squared secondary"
             tabindex="0"
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -2672,37 +2672,37 @@ exports[`component:<Occupation> prop:value prop:error 1`] = `
                   d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-        </ui_input_number>
-        <ui_input_number
+        </ui-input-number>
+        <ui-input-number
           class="view row inputNumber"
         >
-          <ui_view
+          <ui-view
             class="view texts"
           >
-            <label
+            <ui-label
               class="text paragraph text label"
             >
               common.label.occupation_type_child
-            </label>
-            <ui_text
+            </ui-label>
+            <ui-text
               class="text small text hint hint"
             >
               common.label.age
-              <ui_text
+              <ui-text
                 style="text-decoration: underline;"
               >
                 up
-              </ui_text>
+              </ui-text>
               to
-            </ui_text>
-          </ui_view>
+            </ui-text>
+          </ui-view>
           <button
             class="pressable disabled button small squared disabled"
             disabled=""
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -2722,18 +2722,18 @@ exports[`component:<Occupation> prop:value prop:error 1`] = `
                   d="M19 13H5v-2h14v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-          <ui_text
+          <ui-text
             class="text paragraph value"
           >
             0
-          </ui_text>
+          </ui-text>
           <button
             class="pressable button small squared secondary"
             tabindex="0"
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -2753,12 +2753,12 @@ exports[`component:<Occupation> prop:value prop:error 1`] = `
                   d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-        </ui_input_number>
-      </ui_view>
-    </ui_scrollview>
-    <ui_view
+        </ui-input-number>
+      </ui-view>
+    </ui-scrollview>
+    <ui-view
       class="view row"
     >
       <button
@@ -2767,68 +2767,68 @@ exports[`component:<Occupation> prop:value prop:error 1`] = `
       >
         finder.action.add_place_type.room
       </button>
-    </ui_view>
-  </ui_view>
+    </ui-view>
+  </ui-view>
 </DocumentFragment>
 `;
 exports[`component:<Occupation> removing a room 1`] = `
 <DocumentFragment>
-  <ui_view
+  <ui-view
     class="view"
     data-testid="occupation"
     l10n="[object Object]"
   >
-    <ui_scrollview
+    <ui-scrollview
       class="scrollview vertical"
     >
-      <ui_view
+      <ui-view
         class="view wide"
       >
-        <ui_view
+        <ui-view
           class="view row"
         >
-          <ui_text
+          <ui-text
             class="text action"
           >
             finder.label.place
-            <ui_text
+            <ui-text
               style="text-decoration: underline;"
             >
               type
-            </ui_text>
+            </ui-text>
             count.room
-          </ui_text>
-          <ui_action
+          </ui-text>
+          <ui-action
             class="pressable action small"
             data-testid="occupation-remove-room-0"
             tabindex="0"
           >
             finder.action.remove
-          </ui_action>
-        </ui_view>
-        <ui_input_number
+          </ui-action>
+        </ui-view>
+        <ui-input-number
           class="view row inputNumber"
         >
-          <ui_view
+          <ui-view
             class="view texts"
           >
-            <label
+            <ui-label
               class="text paragraph text label"
             >
               common.label.occupation_type_adult
-            </label>
-            <ui_text
+            </ui-label>
+            <ui-text
               class="text small text hint hint"
             >
               common.label.age_from
-            </ui_text>
-          </ui_view>
+            </ui-text>
+          </ui-view>
           <button
             class="pressable disabled button small squared disabled"
             disabled=""
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -2848,18 +2848,18 @@ exports[`component:<Occupation> removing a room 1`] = `
                   d="M19 13H5v-2h14v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-          <ui_text
+          <ui-text
             class="text paragraph value"
           >
             2
-          </ui_text>
+          </ui-text>
           <button
             class="pressable button small squared secondary"
             tabindex="0"
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -2879,37 +2879,37 @@ exports[`component:<Occupation> removing a room 1`] = `
                   d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-        </ui_input_number>
-        <ui_input_number
+        </ui-input-number>
+        <ui-input-number
           class="view row inputNumber"
         >
-          <ui_view
+          <ui-view
             class="view texts"
           >
-            <label
+            <ui-label
               class="text paragraph text label"
             >
               common.label.occupation_type_child
-            </label>
-            <ui_text
+            </ui-label>
+            <ui-text
               class="text small text hint hint"
             >
               common.label.age
-              <ui_text
+              <ui-text
                 style="text-decoration: underline;"
               >
                 up
-              </ui_text>
+              </ui-text>
               to
-            </ui_text>
-          </ui_view>
+            </ui-text>
+          </ui-view>
           <button
             class="pressable button small squared secondary"
             tabindex="0"
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -2929,18 +2929,18 @@ exports[`component:<Occupation> removing a room 1`] = `
                   d="M19 13H5v-2h14v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-          <ui_text
+          <ui-text
             class="text paragraph value"
           >
             2
-          </ui_text>
+          </ui-text>
           <button
             class="pressable disabled button small squared disabled"
             disabled=""
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -2960,22 +2960,22 @@ exports[`component:<Occupation> removing a room 1`] = `
                   d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-        </ui_input_number>
-        <ui_view
+        </ui-input-number>
+        <ui-view
           class="view"
         >
-          <ui_view
+          <ui-view
             class="view row"
           >
-            <ui_view
+            <ui-input-select
               class="view inputContainer"
             >
-              <ui_view
+              <ui-view
                 class="view row inputBorder"
               >
-                <ui_view
+                <ui-view
                   class="view wide content"
                 >
                   <select
@@ -3078,8 +3078,8 @@ exports[`component:<Occupation> removing a room 1`] = `
                       17
                     </option>
                   </select>
-                </ui_view>
-                <ui_icon
+                </ui-view>
+                <ui-icon
                   class="icon headline-3 icon expand"
                 >
                   <svg
@@ -3100,16 +3100,16 @@ exports[`component:<Occupation> removing a room 1`] = `
                       d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
                     />
                   </svg>
-                </ui_icon>
-              </ui_view>
-            </ui_view>
-            <ui_view
+                </ui-icon>
+              </ui-view>
+            </ui-input-select>
+            <ui-input-select
               class="view inputContainer"
             >
-              <ui_view
+              <ui-view
                 class="view row inputBorder"
               >
-                <ui_view
+                <ui-view
                   class="view wide content"
                 >
                   <select
@@ -3212,8 +3212,8 @@ exports[`component:<Occupation> removing a room 1`] = `
                       17
                     </option>
                   </select>
-                </ui_view>
-                <ui_icon
+                </ui-view>
+                <ui-icon
                   class="icon headline-3 icon expand"
                 >
                   <svg
@@ -3234,64 +3234,64 @@ exports[`component:<Occupation> removing a room 1`] = `
                       d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
                     />
                   </svg>
-                </ui_icon>
-              </ui_view>
-            </ui_view>
-          </ui_view>
-          <ui_text
+                </ui-icon>
+              </ui-view>
+            </ui-input-select>
+          </ui-view>
+          <ui-text
             class="text light small"
           >
             common.label.age_hint
-          </ui_text>
-        </ui_view>
-      </ui_view>
-      <ui_view
+          </ui-text>
+        </ui-view>
+      </ui-view>
+      <ui-view
         class="view wide"
       >
-        <ui_view
+        <ui-view
           class="view row"
         >
-          <ui_text
+          <ui-text
             class="text action"
           >
             finder.label.place
-            <ui_text
+            <ui-text
               style="text-decoration: underline;"
             >
               type
-            </ui_text>
+            </ui-text>
             count.room
-          </ui_text>
-          <ui_action
+          </ui-text>
+          <ui-action
             class="pressable action small"
             data-testid="occupation-remove-room-1"
             tabindex="0"
           >
             finder.action.remove
-          </ui_action>
-        </ui_view>
-        <ui_input_number
+          </ui-action>
+        </ui-view>
+        <ui-input-number
           class="view row inputNumber"
         >
-          <ui_view
+          <ui-view
             class="view texts"
           >
-            <label
+            <ui-label
               class="text paragraph text label"
             >
               common.label.occupation_type_adult
-            </label>
-            <ui_text
+            </ui-label>
+            <ui-text
               class="text small text hint hint"
             >
               common.label.age_from
-            </ui_text>
-          </ui_view>
+            </ui-text>
+          </ui-view>
           <button
             class="pressable disabled button small squared disabled"
             disabled=""
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -3311,18 +3311,18 @@ exports[`component:<Occupation> removing a room 1`] = `
                   d="M19 13H5v-2h14v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-          <ui_text
+          <ui-text
             class="text paragraph value"
           >
             2
-          </ui_text>
+          </ui-text>
           <button
             class="pressable button small squared secondary"
             tabindex="0"
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -3342,37 +3342,37 @@ exports[`component:<Occupation> removing a room 1`] = `
                   d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-        </ui_input_number>
-        <ui_input_number
+        </ui-input-number>
+        <ui-input-number
           class="view row inputNumber"
         >
-          <ui_view
+          <ui-view
             class="view texts"
           >
-            <label
+            <ui-label
               class="text paragraph text label"
             >
               common.label.occupation_type_child
-            </label>
-            <ui_text
+            </ui-label>
+            <ui-text
               class="text small text hint hint"
             >
               common.label.age
-              <ui_text
+              <ui-text
                 style="text-decoration: underline;"
               >
                 up
-              </ui_text>
+              </ui-text>
               to
-            </ui_text>
-          </ui_view>
+            </ui-text>
+          </ui-view>
           <button
             class="pressable disabled button small squared disabled"
             disabled=""
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -3392,18 +3392,18 @@ exports[`component:<Occupation> removing a room 1`] = `
                   d="M19 13H5v-2h14v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-          <ui_text
+          <ui-text
             class="text paragraph value"
           >
             0
-          </ui_text>
+          </ui-text>
           <button
             class="pressable button small squared secondary"
             tabindex="0"
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -3423,12 +3423,12 @@ exports[`component:<Occupation> removing a room 1`] = `
                   d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-        </ui_input_number>
-      </ui_view>
-    </ui_scrollview>
-    <ui_view
+        </ui-input-number>
+      </ui-view>
+    </ui-scrollview>
+    <ui-view
       class="view row"
     >
       <button
@@ -3438,60 +3438,60 @@ exports[`component:<Occupation> removing a room 1`] = `
       >
         finder.action.add_place_type.room
       </button>
-    </ui_view>
-  </ui_view>
+    </ui-view>
+  </ui-view>
 </DocumentFragment>
 `;
 exports[`component:<Occupation> renders 1`] = `
 <DocumentFragment>
-  <ui_view
+  <ui-view
     class="view"
     l10n="[object Object]"
   >
-    <ui_scrollview
+    <ui-scrollview
       class="scrollview vertical"
     >
-      <ui_view
+      <ui-view
         class="view wide"
       >
-        <ui_view
+        <ui-view
           class="view row"
         >
-          <ui_text
+          <ui-text
             class="text action"
           >
             finder.label.place
-            <ui_text
+            <ui-text
               style="text-decoration: underline;"
             >
               type
-            </ui_text>
+            </ui-text>
             count.room
-          </ui_text>
-        </ui_view>
-        <ui_input_number
+          </ui-text>
+        </ui-view>
+        <ui-input-number
           class="view row inputNumber"
         >
-          <ui_view
+          <ui-view
             class="view texts"
           >
-            <label
+            <ui-label
               class="text paragraph text label"
             >
               common.label.occupation_type_adult
-            </label>
-            <ui_text
+            </ui-label>
+            <ui-text
               class="text small text hint hint"
             >
               common.label.age_from
-            </ui_text>
-          </ui_view>
+            </ui-text>
+          </ui-view>
           <button
             class="pressable button small squared secondary"
             tabindex="0"
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -3511,18 +3511,18 @@ exports[`component:<Occupation> renders 1`] = `
                   d="M19 13H5v-2h14v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-          <ui_text
+          <ui-text
             class="text paragraph value"
           >
             2
-          </ui_text>
+          </ui-text>
           <button
             class="pressable button small squared secondary"
             tabindex="0"
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -3542,37 +3542,37 @@ exports[`component:<Occupation> renders 1`] = `
                   d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-        </ui_input_number>
-        <ui_input_number
+        </ui-input-number>
+        <ui-input-number
           class="view row inputNumber"
         >
-          <ui_view
+          <ui-view
             class="view texts"
           >
-            <label
+            <ui-label
               class="text paragraph text label"
             >
               common.label.occupation_type_child
-            </label>
-            <ui_text
+            </ui-label>
+            <ui-text
               class="text small text hint hint"
             >
               common.label.age
-              <ui_text
+              <ui-text
                 style="text-decoration: underline;"
               >
                 up
-              </ui_text>
+              </ui-text>
               to
-            </ui_text>
-          </ui_view>
+            </ui-text>
+          </ui-view>
           <button
             class="pressable disabled button small squared disabled"
             disabled=""
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -3592,18 +3592,18 @@ exports[`component:<Occupation> renders 1`] = `
                   d="M19 13H5v-2h14v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-          <ui_text
+          <ui-text
             class="text paragraph value"
           >
             0
-          </ui_text>
+          </ui-text>
           <button
             class="pressable button small squared secondary"
             tabindex="0"
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -3623,12 +3623,12 @@ exports[`component:<Occupation> renders 1`] = `
                   d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-        </ui_input_number>
-      </ui_view>
-    </ui_scrollview>
-    <ui_view
+        </ui-input-number>
+      </ui-view>
+    </ui-scrollview>
+    <ui-view
       class="view row"
     >
       <button
@@ -3637,61 +3637,61 @@ exports[`component:<Occupation> renders 1`] = `
       >
         finder.action.add_place_type.room
       </button>
-    </ui_view>
-  </ui_view>
+    </ui-view>
+  </ui-view>
 </DocumentFragment>
 `;
 exports[`component:<Occupation> testID 1`] = `
 <DocumentFragment>
-  <ui_view
+  <ui-view
     class="view"
     data-testid="mirai"
     l10n="[object Object]"
   >
-    <ui_scrollview
+    <ui-scrollview
       class="scrollview vertical"
     >
-      <ui_view
+      <ui-view
         class="view wide"
       >
-        <ui_view
+        <ui-view
           class="view row"
         >
-          <ui_text
+          <ui-text
             class="text action"
           >
             finder.label.place
-            <ui_text
+            <ui-text
               style="text-decoration: underline;"
             >
               type
-            </ui_text>
+            </ui-text>
             count.room
-          </ui_text>
-        </ui_view>
-        <ui_input_number
+          </ui-text>
+        </ui-view>
+        <ui-input-number
           class="view row inputNumber"
         >
-          <ui_view
+          <ui-view
             class="view texts"
           >
-            <label
+            <ui-label
               class="text paragraph text label"
             >
               common.label.occupation_type_adult
-            </label>
-            <ui_text
+            </ui-label>
+            <ui-text
               class="text small text hint hint"
             >
               common.label.age_from
-            </ui_text>
-          </ui_view>
+            </ui-text>
+          </ui-view>
           <button
             class="pressable disabled button small squared disabled"
             disabled=""
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -3711,18 +3711,18 @@ exports[`component:<Occupation> testID 1`] = `
                   d="M19 13H5v-2h14v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-          <ui_text
+          <ui-text
             class="text paragraph value"
           >
             2
-          </ui_text>
+          </ui-text>
           <button
             class="pressable button small squared secondary"
             tabindex="0"
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -3742,37 +3742,37 @@ exports[`component:<Occupation> testID 1`] = `
                   d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-        </ui_input_number>
-        <ui_input_number
+        </ui-input-number>
+        <ui-input-number
           class="view row inputNumber"
         >
-          <ui_view
+          <ui-view
             class="view texts"
           >
-            <label
+            <ui-label
               class="text paragraph text label"
             >
               common.label.occupation_type_child
-            </label>
-            <ui_text
+            </ui-label>
+            <ui-text
               class="text small text hint hint"
             >
               common.label.age
-              <ui_text
+              <ui-text
                 style="text-decoration: underline;"
               >
                 up
-              </ui_text>
+              </ui-text>
               to
-            </ui_text>
-          </ui_view>
+            </ui-text>
+          </ui-view>
           <button
             class="pressable disabled button small squared disabled"
             disabled=""
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -3792,18 +3792,18 @@ exports[`component:<Occupation> testID 1`] = `
                   d="M19 13H5v-2h14v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-          <ui_text
+          <ui-text
             class="text paragraph value"
           >
             0
-          </ui_text>
+          </ui-text>
           <button
             class="pressable button small squared secondary"
             tabindex="0"
           >
-            <ui_icon
+            <ui-icon
               class="icon headline-3"
             >
               <svg
@@ -3823,12 +3823,12 @@ exports[`component:<Occupation> testID 1`] = `
                   d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                 />
               </svg>
-            </ui_icon>
+            </ui-icon>
           </button>
-        </ui_input_number>
-      </ui_view>
-    </ui_scrollview>
-    <ui_view
+        </ui-input-number>
+      </ui-view>
+    </ui-scrollview>
+    <ui-view
       class="view row"
     >
       <button
@@ -3838,7 +3838,7 @@ exports[`component:<Occupation> testID 1`] = `
       >
         finder.action.add_place_type.room
       </button>
-    </ui_view>
-  </ui_view>
+    </ui-view>
+  </ui-view>
 </DocumentFragment>
 `;