@mirai/core 0.3.356 → 0.3.358

package/build/components/Checkout/__tests__/__snapshots__/Checkout.test.js.snap

@@ -2,28 +2,28 @@
 
 exports[`component:<Checkout> Test A/B variant A 1`] = `
 <DocumentFragment>
-  <ui_view
+  <ui-view
     class="view wide"
   >
-    <ui_view
+    <ui-view
       class="view row wide"
     >
-      <ui_view
+      <ui-view
         class="view row"
       />
-      <ui_view
+      <ui-view
         class="view row"
       >
-        <ui_tooltip
+        <ui-tooltip
           class="container"
         >
-          <ui_view
+          <ui-view
             class="view row dispatcher"
           >
-            <ui_view
+            <ui-view
               class="view row"
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-2"
               >
                 <svg
@@ -43,11 +43,11 @@ exports[`component:<Checkout> Test A/B variant A 1`] = `
                     d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95a15.65 15.65 0 0 0-1.38-3.56A8.03 8.03 0 0 1 18.92 8zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56A7.987 7.987 0 0 1 5.08 16zm2.95-8H5.08a7.987 7.987 0 0 1 4.33-3.56A15.65 15.65 0 0 0 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2s.07-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"
                   />
                 </svg>
-              </ui_icon>
-              <ui_text
+              </ui-icon>
+              <ui-text
                 class="text medium action"
               />
-            </ui_view>
+            </ui-view>
             <select
               class="select"
               name="locale"
@@ -163,129 +163,129 @@ exports[`component:<Checkout> Test A/B variant A 1`] = `
                 Euskara
               </option>
             </select>
-          </ui_view>
-        </ui_tooltip>
-      </ui_view>
-    </ui_view>
-  </ui_view>
-  <ui_view
+          </ui-view>
+        </ui-tooltip>
+      </ui-view>
+    </ui-view>
+  </ui-view>
+  <ui-view
     class="view"
   >
-    <ui_progress
+    <ui-progress
       class="view progress visible"
     >
-      <ui_view
+      <ui-progress-value
         class="view value indeterminate"
       />
-    </ui_progress>
-    <ui_view
+    </ui-progress>
+    <ui-view
       class="view wide"
       style="align-items: start;"
     >
-      <ui_view
+      <ui-view
         class="view row wide"
         style="align-items: start; align-self: center; gap: 1rem; max-width: var(--mirai-ui-breakpoint-content);"
       >
-        <ui_view
+        <ui-view
           class="view"
           style="flex: 1; gap: 1rem;"
         >
-          <ui_view
+          <ui-view
             class="view"
             style="height: 32rem;"
           />
-          <ui_view
+          <ui-view
             class="view"
             style="height: 16rem;"
           />
-          <ui_view
+          <ui-view
             class="view"
             style="height: 16rem;"
           />
-          <ui_view
+          <ui-view
             class="view"
             style="height: 12rem;"
           />
-        </ui_view>
-        <ui_view
+        </ui-view>
+        <ui-view
           class="view"
           style="flex: 1; max-width: calc(var(--mirai-ui-breakpoint-S) - var(--mirai-ui-space-M) * 2); height: 36rem;"
         />
-      </ui_view>
-    </ui_view>
-  </ui_view>
-  <ui_view
+      </ui-view>
+    </ui-view>
+  </ui-view>
+  <ui-view
     class="view row"
   >
-    <ui_view
+    <ui-view
       class="view row"
     >
-      <ui_view
+      <ui-view
         class="view row"
       >
-        <ui_text
+        <ui-text
           class="text light small"
         >
           © 2024
-          <ui_action
+          <ui-action
             class="pressable action small"
             tabindex="0"
           />
           .
-        </ui_text>
-        <ui_text
+        </ui-text>
+        <ui-text
           class="text light small"
         >
           common.label.all
-          <ui_text
+          <ui-text
             style="text-decoration: underline;"
           >
             rights
-          </ui_text>
+          </ui-text>
           reserved
-        </ui_text>
-      </ui_view>
+        </ui-text>
+      </ui-view>
       <a
         class="pressable action small"
         href="https://www.mirai.com/"
         tabindex="0"
       >
         Powered by 
-        <ui_text
+        <ui-text
           class="text bold light paragraph"
         >
           mirai
-        </ui_text>
+        </ui-text>
       </a>
-    </ui_view>
-  </ui_view>
+    </ui-view>
+  </ui-view>
 </DocumentFragment>
 `;
 
 exports[`component:<Checkout> Test A/B variant B 1`] = `
 <DocumentFragment>
-  <ui_view
+  <ui-view
     class="view wide"
   >
-    <ui_view
+    <ui-view
       class="view row wide"
     >
-      <ui_view
+      <ui-view
         class="view row"
       />
-      <ui_view
+      <ui-view
         class="view row"
       >
-        <ui_tooltip
+        <ui-tooltip
           class="container"
         >
-          <ui_view
+          <ui-view
             class="view row dispatcher"
           >
-            <ui_view
+            <ui-view
               class="view row"
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-2"
               >
                 <svg
@@ -305,11 +305,11 @@ exports[`component:<Checkout> Test A/B variant B 1`] = `
                     d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95a15.65 15.65 0 0 0-1.38-3.56A8.03 8.03 0 0 1 18.92 8zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56A7.987 7.987 0 0 1 5.08 16zm2.95-8H5.08a7.987 7.987 0 0 1 4.33-3.56A15.65 15.65 0 0 0 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2s.07-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"
                   />
                 </svg>
-              </ui_icon>
-              <ui_text
+              </ui-icon>
+              <ui-text
                 class="text medium action"
               />
-            </ui_view>
+            </ui-view>
             <select
               class="select"
               name="locale"
@@ -425,129 +425,129 @@ exports[`component:<Checkout> Test A/B variant B 1`] = `
                 Euskara
               </option>
             </select>
-          </ui_view>
-        </ui_tooltip>
-      </ui_view>
-    </ui_view>
-  </ui_view>
-  <ui_view
+          </ui-view>
+        </ui-tooltip>
+      </ui-view>
+    </ui-view>
+  </ui-view>
+  <ui-view
     class="view"
   >
-    <ui_progress
+    <ui-progress
       class="view progress visible"
     >
-      <ui_view
+      <ui-progress-value
         class="view value indeterminate"
       />
-    </ui_progress>
-    <ui_view
+    </ui-progress>
+    <ui-view
       class="view wide"
       style="align-items: start;"
     >
-      <ui_view
+      <ui-view
         class="view row wide"
         style="align-items: start; align-self: center; gap: 1rem; max-width: var(--mirai-ui-breakpoint-content);"
       >
-        <ui_view
+        <ui-view
           class="view"
           style="flex: 1; gap: 1rem;"
         >
-          <ui_view
+          <ui-view
             class="view"
             style="height: 32rem;"
           />
-          <ui_view
+          <ui-view
             class="view"
             style="height: 16rem;"
           />
-          <ui_view
+          <ui-view
             class="view"
             style="height: 16rem;"
           />
-          <ui_view
+          <ui-view
             class="view"
             style="height: 12rem;"
           />
-        </ui_view>
-        <ui_view
+        </ui-view>
+        <ui-view
           class="view"
           style="flex: 1; max-width: calc(var(--mirai-ui-breakpoint-S) - var(--mirai-ui-space-M) * 2); height: 36rem;"
         />
-      </ui_view>
-    </ui_view>
-  </ui_view>
-  <ui_view
+      </ui-view>
+    </ui-view>
+  </ui-view>
+  <ui-view
     class="view row"
   >
-    <ui_view
+    <ui-view
       class="view row"
     >
-      <ui_view
+      <ui-view
         class="view row"
       >
-        <ui_text
+        <ui-text
           class="text light small"
         >
           © 2024
-          <ui_action
+          <ui-action
             class="pressable action small"
             tabindex="0"
           />
           .
-        </ui_text>
-        <ui_text
+        </ui-text>
+        <ui-text
           class="text light small"
         >
           common.label.all
-          <ui_text
+          <ui-text
             style="text-decoration: underline;"
           >
             rights
-          </ui_text>
+          </ui-text>
           reserved
-        </ui_text>
-      </ui_view>
+        </ui-text>
+      </ui-view>
       <a
         class="pressable action small"
         href="https://www.mirai.com/"
         tabindex="0"
       >
         Powered by 
-        <ui_text
+        <ui-text
           class="text bold light paragraph"
         >
           mirai
-        </ui_text>
+        </ui-text>
       </a>
-    </ui_view>
-  </ui_view>
+    </ui-view>
+  </ui-view>
 </DocumentFragment>
 `;
 
 exports[`component:<Checkout> inherit:className 1`] = `
 <DocumentFragment>
-  <ui_view
+  <ui-view
     class="view wide"
   >
-    <ui_view
+    <ui-view
       class="view row wide"
     >
-      <ui_view
+      <ui-view
         class="view row"
       />
-      <ui_view
+      <ui-view
         class="view row"
       >
-        <ui_tooltip
+        <ui-tooltip
           class="container"
         >
-          <ui_view
+          <ui-view
             class="view row dispatcher"
           >
-            <ui_view
+            <ui-view
               class="view row"
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-2"
               >
                 <svg
@@ -567,11 +567,11 @@ exports[`component:<Checkout> inherit:className 1`] = `
                     d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95a15.65 15.65 0 0 0-1.38-3.56A8.03 8.03 0 0 1 18.92 8zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56A7.987 7.987 0 0 1 5.08 16zm2.95-8H5.08a7.987 7.987 0 0 1 4.33-3.56A15.65 15.65 0 0 0 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2s.07-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"
                   />
                 </svg>
-              </ui_icon>
-              <ui_text
+              </ui-icon>
+              <ui-text
                 class="text medium action"
               />
-            </ui_view>
+            </ui-view>
             <select
               class="select"
               name="locale"
@@ -687,129 +687,129 @@ exports[`component:<Checkout> inherit:className 1`] = `
                 Euskara
               </option>
             </select>
-          </ui_view>
-        </ui_tooltip>
-      </ui_view>
-    </ui_view>
-  </ui_view>
-  <ui_view
+          </ui-view>
+        </ui-tooltip>
+      </ui-view>
+    </ui-view>
+  </ui-view>
+  <ui-view
     class="view mirai"
   >
-    <ui_progress
+    <ui-progress
       class="view progress visible"
     >
-      <ui_view
+      <ui-progress-value
         class="view value indeterminate"
       />
-    </ui_progress>
-    <ui_view
+    </ui-progress>
+    <ui-view
       class="view wide"
       style="align-items: start;"
     >
-      <ui_view
+      <ui-view
         class="view row wide"
         style="align-items: start; align-self: center; gap: 1rem; max-width: var(--mirai-ui-breakpoint-content);"
       >
-        <ui_view
+        <ui-view
           class="view"
           style="flex: 1; gap: 1rem;"
         >
-          <ui_view
+          <ui-view
             class="view"
             style="height: 32rem;"
           />
-          <ui_view
+          <ui-view
             class="view"
             style="height: 16rem;"
           />
-          <ui_view
+          <ui-view
             class="view"
             style="height: 16rem;"
           />
-          <ui_view
+          <ui-view
             class="view"
             style="height: 12rem;"
           />
-        </ui_view>
-        <ui_view
+        </ui-view>
+        <ui-view
           class="view"
           style="flex: 1; max-width: calc(var(--mirai-ui-breakpoint-S) - var(--mirai-ui-space-M) * 2); height: 36rem;"
         />
-      </ui_view>
-    </ui_view>
-  </ui_view>
-  <ui_view
+      </ui-view>
+    </ui-view>
+  </ui-view>
+  <ui-view
     class="view row"
   >
-    <ui_view
+    <ui-view
       class="view row"
     >
-      <ui_view
+      <ui-view
         class="view row"
       >
-        <ui_text
+        <ui-text
           class="text light small"
         >
           © 2024
-          <ui_action
+          <ui-action
             class="pressable action small"
             tabindex="0"
           />
           .
-        </ui_text>
-        <ui_text
+        </ui-text>
+        <ui-text
           class="text light small"
         >
           common.label.all
-          <ui_text
+          <ui-text
             style="text-decoration: underline;"
           >
             rights
-          </ui_text>
+          </ui-text>
           reserved
-        </ui_text>
-      </ui_view>
+        </ui-text>
+      </ui-view>
       <a
         class="pressable action small"
         href="https://www.mirai.com/"
         tabindex="0"
       >
         Powered by 
-        <ui_text
+        <ui-text
           class="text bold light paragraph"
         >
           mirai
-        </ui_text>
+        </ui-text>
       </a>
-    </ui_view>
-  </ui_view>
+    </ui-view>
+  </ui-view>
 </DocumentFragment>
 `;
 
 exports[`component:<Checkout> prop:session (false) 1`] = `
 <DocumentFragment>
-  <ui_view
+  <ui-view
     class="view wide"
   >
-    <ui_view
+    <ui-view
       class="view row wide"
     >
-      <ui_view
+      <ui-view
         class="view row"
       />
-      <ui_view
+      <ui-view
         class="view row"
       >
-        <ui_tooltip
+        <ui-tooltip
           class="container"
         >
-          <ui_view
+          <ui-view
             class="view row dispatcher"
           >
-            <ui_view
+            <ui-view
               class="view row"
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-2"
               >
                 <svg
@@ -829,11 +829,11 @@ exports[`component:<Checkout> prop:session (false) 1`] = `
                     d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95a15.65 15.65 0 0 0-1.38-3.56A8.03 8.03 0 0 1 18.92 8zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56A7.987 7.987 0 0 1 5.08 16zm2.95-8H5.08a7.987 7.987 0 0 1 4.33-3.56A15.65 15.65 0 0 0 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2s.07-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"
                   />
                 </svg>
-              </ui_icon>
-              <ui_text
+              </ui-icon>
+              <ui-text
                 class="text medium action"
               />
-            </ui_view>
+            </ui-view>
             <select
               class="select"
               name="locale"
@@ -949,129 +949,129 @@ exports[`component:<Checkout> prop:session (false) 1`] = `
                 Euskara
               </option>
             </select>
-          </ui_view>
-        </ui_tooltip>
-      </ui_view>
-    </ui_view>
-  </ui_view>
-  <ui_view
+          </ui-view>
+        </ui-tooltip>
+      </ui-view>
+    </ui-view>
+  </ui-view>
+  <ui-view
     class="view"
   >
-    <ui_progress
+    <ui-progress
       class="view progress visible"
     >
-      <ui_view
+      <ui-progress-value
         class="view value indeterminate"
       />
-    </ui_progress>
-    <ui_view
+    </ui-progress>
+    <ui-view
       class="view wide"
       style="align-items: start;"
     >
-      <ui_view
+      <ui-view
         class="view row wide"
         style="align-items: start; align-self: center; gap: 1rem; max-width: var(--mirai-ui-breakpoint-content);"
       >
-        <ui_view
+        <ui-view
           class="view"
           style="flex: 1; gap: 1rem;"
         >
-          <ui_view
+          <ui-view
             class="view"
             style="height: 32rem;"
           />
-          <ui_view
+          <ui-view
             class="view"
             style="height: 16rem;"
           />
-          <ui_view
+          <ui-view
             class="view"
             style="height: 16rem;"
           />
-          <ui_view
+          <ui-view
             class="view"
             style="height: 12rem;"
           />
-        </ui_view>
-        <ui_view
+        </ui-view>
+        <ui-view
           class="view"
           style="flex: 1; max-width: calc(var(--mirai-ui-breakpoint-S) - var(--mirai-ui-space-M) * 2); height: 36rem;"
         />
-      </ui_view>
-    </ui_view>
-  </ui_view>
-  <ui_view
+      </ui-view>
+    </ui-view>
+  </ui-view>
+  <ui-view
     class="view row"
   >
-    <ui_view
+    <ui-view
       class="view row"
     >
-      <ui_view
+      <ui-view
         class="view row"
       >
-        <ui_text
+        <ui-text
           class="text light small"
         >
           © 2024
-          <ui_action
+          <ui-action
             class="pressable action small"
             tabindex="0"
           />
           .
-        </ui_text>
-        <ui_text
+        </ui-text>
+        <ui-text
           class="text light small"
         >
           common.label.all
-          <ui_text
+          <ui-text
             style="text-decoration: underline;"
           >
             rights
-          </ui_text>
+          </ui-text>
           reserved
-        </ui_text>
-      </ui_view>
+        </ui-text>
+      </ui-view>
       <a
         class="pressable action small"
         href="https://www.mirai.com/"
         tabindex="0"
       >
         Powered by 
-        <ui_text
+        <ui-text
           class="text bold light paragraph"
         >
           mirai
-        </ui_text>
+        </ui-text>
       </a>
-    </ui_view>
-  </ui_view>
+    </ui-view>
+  </ui-view>
 </DocumentFragment>
 `;
 
 exports[`component:<Checkout> prop:skeleton 1`] = `
 <DocumentFragment>
-  <ui_view
+  <ui-view
     class="view wide"
   >
-    <ui_view
+    <ui-view
       class="view row wide"
     >
-      <ui_view
+      <ui-view
         class="view row"
       />
-      <ui_view
+      <ui-view
         class="view row"
       >
-        <ui_tooltip
+        <ui-tooltip
           class="container"
         >
-          <ui_view
+          <ui-view
             class="view row dispatcher"
           >
-            <ui_view
+            <ui-view
               class="view row"
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-2"
               >
                 <svg
@@ -1091,11 +1091,11 @@ exports[`component:<Checkout> prop:skeleton 1`] = `
                     d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95a15.65 15.65 0 0 0-1.38-3.56A8.03 8.03 0 0 1 18.92 8zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56A7.987 7.987 0 0 1 5.08 16zm2.95-8H5.08a7.987 7.987 0 0 1 4.33-3.56A15.65 15.65 0 0 0 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2s.07-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"
                   />
                 </svg>
-              </ui_icon>
-              <ui_text
+              </ui-icon>
+              <ui-text
                 class="text medium action"
               />
-            </ui_view>
+            </ui-view>
             <select
               class="select"
               name="locale"
@@ -1211,129 +1211,129 @@ exports[`component:<Checkout> prop:skeleton 1`] = `
                 Euskara
               </option>
             </select>
-          </ui_view>
-        </ui_tooltip>
-      </ui_view>
-    </ui_view>
-  </ui_view>
-  <ui_view
+          </ui-view>
+        </ui-tooltip>
+      </ui-view>
+    </ui-view>
+  </ui-view>
+  <ui-view
     class="view"
   >
-    <ui_progress
+    <ui-progress
       class="view progress visible"
     >
-      <ui_view
+      <ui-progress-value
         class="view value indeterminate"
       />
-    </ui_progress>
-    <ui_view
+    </ui-progress>
+    <ui-view
       class="view wide"
       style="align-items: start;"
     >
-      <ui_view
+      <ui-view
         class="view row wide"
         style="align-items: start; align-self: center; gap: 1rem; max-width: var(--mirai-ui-breakpoint-content);"
       >
-        <ui_view
+        <ui-view
           class="view"
           style="flex: 1; gap: 1rem;"
         >
-          <ui_view
+          <ui-view
             class="view"
             style="height: 32rem;"
           />
-          <ui_view
+          <ui-view
             class="view"
             style="height: 16rem;"
           />
-          <ui_view
+          <ui-view
             class="view"
             style="height: 16rem;"
           />
-          <ui_view
+          <ui-view
             class="view"
             style="height: 12rem;"
           />
-        </ui_view>
-        <ui_view
+        </ui-view>
+        <ui-view
           class="view"
           style="flex: 1; max-width: calc(var(--mirai-ui-breakpoint-S) - var(--mirai-ui-space-M) * 2); height: 36rem;"
         />
-      </ui_view>
-    </ui_view>
-  </ui_view>
-  <ui_view
+      </ui-view>
+    </ui-view>
+  </ui-view>
+  <ui-view
     class="view row"
   >
-    <ui_view
+    <ui-view
       class="view row"
     >
-      <ui_view
+      <ui-view
         class="view row"
       >
-        <ui_text
+        <ui-text
           class="text light small"
         >
           © 2024
-          <ui_action
+          <ui-action
             class="pressable action small"
             tabindex="0"
           />
           .
-        </ui_text>
-        <ui_text
+        </ui-text>
+        <ui-text
           class="text light small"
         >
           common.label.all
-          <ui_text
+          <ui-text
             style="text-decoration: underline;"
           >
             rights
-          </ui_text>
+          </ui-text>
           reserved
-        </ui_text>
-      </ui_view>
+        </ui-text>
+      </ui-view>
       <a
         class="pressable action small"
         href="https://www.mirai.com/"
         tabindex="0"
       >
         Powered by 
-        <ui_text
+        <ui-text
           class="text bold light paragraph"
         >
           mirai
-        </ui_text>
+        </ui-text>
       </a>
-    </ui_view>
-  </ui_view>
+    </ui-view>
+  </ui-view>
 </DocumentFragment>
 `;
 
 exports[`component:<Checkout> renders 1`] = `
 <DocumentFragment>
-  <ui_view
+  <ui-view
     class="view wide"
   >
-    <ui_view
+    <ui-view
       class="view row wide"
     >
-      <ui_view
+      <ui-view
         class="view row"
       />
-      <ui_view
+      <ui-view
         class="view row"
       >
-        <ui_tooltip
+        <ui-tooltip
           class="container"
         >
-          <ui_view
+          <ui-view
             class="view row dispatcher"
           >
-            <ui_view
+            <ui-view
               class="view row"
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-2"
               >
                 <svg
@@ -1353,11 +1353,11 @@ exports[`component:<Checkout> renders 1`] = `
                     d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95a15.65 15.65 0 0 0-1.38-3.56A8.03 8.03 0 0 1 18.92 8zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56A7.987 7.987 0 0 1 5.08 16zm2.95-8H5.08a7.987 7.987 0 0 1 4.33-3.56A15.65 15.65 0 0 0 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2s.07-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"
                   />
                 </svg>
-              </ui_icon>
-              <ui_text
+              </ui-icon>
+              <ui-text
                 class="text medium action"
               />
-            </ui_view>
+            </ui-view>
             <select
               class="select"
               name="locale"
@@ -1473,129 +1473,129 @@ exports[`component:<Checkout> renders 1`] = `
                 Euskara
               </option>
             </select>
-          </ui_view>
-        </ui_tooltip>
-      </ui_view>
-    </ui_view>
-  </ui_view>
-  <ui_view
+          </ui-view>
+        </ui-tooltip>
+      </ui-view>
+    </ui-view>
+  </ui-view>
+  <ui-view
     class="view"
   >
-    <ui_progress
+    <ui-progress
       class="view progress visible"
     >
-      <ui_view
+      <ui-progress-value
         class="view value indeterminate"
       />
-    </ui_progress>
-    <ui_view
+    </ui-progress>
+    <ui-view
       class="view wide"
       style="align-items: start;"
     >
-      <ui_view
+      <ui-view
         class="view row wide"
         style="align-items: start; align-self: center; gap: 1rem; max-width: var(--mirai-ui-breakpoint-content);"
       >
-        <ui_view
+        <ui-view
           class="view"
           style="flex: 1; gap: 1rem;"
         >
-          <ui_view
+          <ui-view
             class="view"
             style="height: 32rem;"
           />
-          <ui_view
+          <ui-view
             class="view"
             style="height: 16rem;"
           />
-          <ui_view
+          <ui-view
             class="view"
             style="height: 16rem;"
           />
-          <ui_view
+          <ui-view
             class="view"
             style="height: 12rem;"
           />
-        </ui_view>
-        <ui_view
+        </ui-view>
+        <ui-view
           class="view"
           style="flex: 1; max-width: calc(var(--mirai-ui-breakpoint-S) - var(--mirai-ui-space-M) * 2); height: 36rem;"
         />
-      </ui_view>
-    </ui_view>
-  </ui_view>
-  <ui_view
+      </ui-view>
+    </ui-view>
+  </ui-view>
+  <ui-view
     class="view row"
   >
-    <ui_view
+    <ui-view
       class="view row"
     >
-      <ui_view
+      <ui-view
         class="view row"
       >
-        <ui_text
+        <ui-text
           class="text light small"
         >
           © 2024
-          <ui_action
+          <ui-action
             class="pressable action small"
             tabindex="0"
           />
           .
-        </ui_text>
-        <ui_text
+        </ui-text>
+        <ui-text
           class="text light small"
         >
           common.label.all
-          <ui_text
+          <ui-text
             style="text-decoration: underline;"
           >
             rights
-          </ui_text>
+          </ui-text>
           reserved
-        </ui_text>
-      </ui_view>
+        </ui-text>
+      </ui-view>
       <a
         class="pressable action small"
         href="https://www.mirai.com/"
         tabindex="0"
       >
         Powered by 
-        <ui_text
+        <ui-text
           class="text bold light paragraph"
         >
           mirai
-        </ui_text>
+        </ui-text>
       </a>
-    </ui_view>
-  </ui_view>
+    </ui-view>
+  </ui-view>
 </DocumentFragment>
 `;
 
 exports[`component:<Checkout> testID 1`] = `
 <DocumentFragment>
-  <ui_view
+  <ui-view
     class="view wide"
   >
-    <ui_view
+    <ui-view
       class="view row wide"
     >
-      <ui_view
+      <ui-view
         class="view row"
       />
-      <ui_view
+      <ui-view
         class="view row"
       >
-        <ui_tooltip
+        <ui-tooltip
           class="container"
         >
-          <ui_view
+          <ui-view
             class="view row dispatcher"
           >
-            <ui_view
+            <ui-view
               class="view row"
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-2"
               >
                 <svg
@@ -1615,11 +1615,11 @@ exports[`component:<Checkout> testID 1`] = `
                     d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95a15.65 15.65 0 0 0-1.38-3.56A8.03 8.03 0 0 1 18.92 8zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56A7.987 7.987 0 0 1 5.08 16zm2.95-8H5.08a7.987 7.987 0 0 1 4.33-3.56A15.65 15.65 0 0 0 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2s.07-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"
                   />
                 </svg>
-              </ui_icon>
-              <ui_text
+              </ui-icon>
+              <ui-text
                 class="text medium action"
               />
-            </ui_view>
+            </ui-view>
             <select
               class="select"
               name="locale"
@@ -1735,130 +1735,130 @@ exports[`component:<Checkout> testID 1`] = `
                 Euskara
               </option>
             </select>
-          </ui_view>
-        </ui_tooltip>
-      </ui_view>
-    </ui_view>
-  </ui_view>
-  <ui_view
+          </ui-view>
+        </ui-tooltip>
+      </ui-view>
+    </ui-view>
+  </ui-view>
+  <ui-view
     class="view"
     data-testid="mirai"
   >
-    <ui_progress
+    <ui-progress
       class="view progress visible"
     >
-      <ui_view
+      <ui-progress-value
         class="view value indeterminate"
       />
-    </ui_progress>
-    <ui_view
+    </ui-progress>
+    <ui-view
       class="view wide"
       style="align-items: start;"
     >
-      <ui_view
+      <ui-view
         class="view row wide"
         style="align-items: start; align-self: center; gap: 1rem; max-width: var(--mirai-ui-breakpoint-content);"
       >
-        <ui_view
+        <ui-view
           class="view"
           style="flex: 1; gap: 1rem;"
         >
-          <ui_view
+          <ui-view
             class="view"
             style="height: 32rem;"
           />
-          <ui_view
+          <ui-view
             class="view"
             style="height: 16rem;"
           />
-          <ui_view
+          <ui-view
             class="view"
             style="height: 16rem;"
           />
-          <ui_view
+          <ui-view
             class="view"
             style="height: 12rem;"
           />
-        </ui_view>
-        <ui_view
+        </ui-view>
+        <ui-view
           class="view"
           style="flex: 1; max-width: calc(var(--mirai-ui-breakpoint-S) - var(--mirai-ui-space-M) * 2); height: 36rem;"
         />
-      </ui_view>
-    </ui_view>
-  </ui_view>
-  <ui_view
+      </ui-view>
+    </ui-view>
+  </ui-view>
+  <ui-view
     class="view row"
   >
-    <ui_view
+    <ui-view
       class="view row"
     >
-      <ui_view
+      <ui-view
         class="view row"
       >
-        <ui_text
+        <ui-text
           class="text light small"
         >
           © 2024
-          <ui_action
+          <ui-action
             class="pressable action small"
             tabindex="0"
           />
           .
-        </ui_text>
-        <ui_text
+        </ui-text>
+        <ui-text
           class="text light small"
         >
           common.label.all
-          <ui_text
+          <ui-text
             style="text-decoration: underline;"
           >
             rights
-          </ui_text>
+          </ui-text>
           reserved
-        </ui_text>
-      </ui_view>
+        </ui-text>
+      </ui-view>
       <a
         class="pressable action small"
         href="https://www.mirai.com/"
         tabindex="0"
       >
         Powered by 
-        <ui_text
+        <ui-text
           class="text bold light paragraph"
         >
           mirai
-        </ui_text>
+        </ui-text>
       </a>
-    </ui_view>
-  </ui_view>
+    </ui-view>
+  </ui-view>
 </DocumentFragment>
 `;
 
 exports[`component:<Checkout> with a store 1`] = `
 <DocumentFragment>
-  <ui_view
+  <ui-view
     class="view wide"
   >
-    <ui_view
+    <ui-view
       class="view row wide"
     >
-      <ui_view
+      <ui-view
         class="view row"
       />
-      <ui_view
+      <ui-view
         class="view row"
       >
-        <ui_tooltip
+        <ui-tooltip
           class="container"
         >
-          <ui_view
+          <ui-view
             class="view row dispatcher"
           >
-            <ui_view
+            <ui-view
               class="view row"
             >
-              <ui_icon
+              <ui-icon
                 class="icon headline-2"
               >
                 <svg
@@ -1878,11 +1878,11 @@ exports[`component:<Checkout> with a store 1`] = `
                     d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95a15.65 15.65 0 0 0-1.38-3.56A8.03 8.03 0 0 1 18.92 8zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56A7.987 7.987 0 0 1 5.08 16zm2.95-8H5.08a7.987 7.987 0 0 1 4.33-3.56A15.65 15.65 0 0 0 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2s.07-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"
                   />
                 </svg>
-              </ui_icon>
-              <ui_text
+              </ui-icon>
+              <ui-text
                 class="text medium action"
               />
-            </ui_view>
+            </ui-view>
             <select
               class="select"
               name="locale"
@@ -1998,101 +1998,101 @@ exports[`component:<Checkout> with a store 1`] = `
                 Euskara
               </option>
             </select>
-          </ui_view>
-        </ui_tooltip>
-      </ui_view>
-    </ui_view>
-  </ui_view>
-  <ui_view
+          </ui-view>
+        </ui-tooltip>
+      </ui-view>
+    </ui-view>
+  </ui-view>
+  <ui-view
     class="view"
   >
-    <ui_progress
+    <ui-progress
       class="view progress visible"
     >
-      <ui_view
+      <ui-progress-value
         class="view value indeterminate"
       />
-    </ui_progress>
-    <ui_view
+    </ui-progress>
+    <ui-view
       class="view wide"
       style="align-items: start;"
     >
-      <ui_view
+      <ui-view
         class="view row wide"
         style="align-items: start; align-self: center; gap: 1rem; max-width: var(--mirai-ui-breakpoint-content);"
       >
-        <ui_view
+        <ui-view
           class="view"
           style="flex: 1; gap: 1rem;"
         >
-          <ui_view
+          <ui-view
             class="view"
             style="height: 32rem;"
           />
-          <ui_view
+          <ui-view
             class="view"
             style="height: 16rem;"
           />
-          <ui_view
+          <ui-view
             class="view"
             style="height: 16rem;"
           />
-          <ui_view
+          <ui-view
             class="view"
             style="height: 12rem;"
           />
-        </ui_view>
-        <ui_view
+        </ui-view>
+        <ui-view
           class="view"
           style="flex: 1; max-width: calc(var(--mirai-ui-breakpoint-S) - var(--mirai-ui-space-M) * 2); height: 36rem;"
         />
-      </ui_view>
-    </ui_view>
-  </ui_view>
-  <ui_view
+      </ui-view>
+    </ui-view>
+  </ui-view>
+  <ui-view
     class="view row"
   >
-    <ui_view
+    <ui-view
       class="view row"
     >
-      <ui_view
+      <ui-view
         class="view row"
       >
-        <ui_text
+        <ui-text
           class="text light small"
         >
           © 2024
-          <ui_action
+          <ui-action
             class="pressable action small"
             tabindex="0"
           />
           .
-        </ui_text>
-        <ui_text
+        </ui-text>
+        <ui-text
           class="text light small"
         >
           common.label.all
-          <ui_text
+          <ui-text
             style="text-decoration: underline;"
           >
             rights
-          </ui_text>
+          </ui-text>
           reserved
-        </ui_text>
-      </ui_view>
+        </ui-text>
+      </ui-view>
       <a
         class="pressable action small"
         href="https://www.mirai.com/"
         tabindex="0"
       >
         Powered by 
-        <ui_text
+        <ui-text
           class="text bold light paragraph"
         >
           mirai
-        </ui_text>
+        </ui-text>
       </a>
-    </ui_view>
-  </ui_view>
+    </ui-view>
+  </ui-view>
 </DocumentFragment>
 `;