Refactor optimized html (pattern-lab#1439)

* refactor: let's use a consistent self-enclosing tag format

* refactor: always define a buttons type

compare to e.g. https://dev.to/clairecodes/why-its-important-to-give-your-html-button-a-type-58k9

Author: mfranzke

packages/uikit-workshop/src/html/partials/base-template.html

@@ -130,6 +130,7 @@ <h3 class="pl-c-annotations__item-title">{{ title }}</h3>
           class="pl-c-code-copy-btn pl-js-code-copy-btn"
           size="small"
           data-clipboard-target="#pl-{{ patternPartial }}-{{ id }}-panel code"
+          type="button"
         >
           <span class="pl-c-code-copy-btn__icon-text">Copy</span>
           <svg

packages/uikit-workshop/src/scripts/components/pl-search/pl-search.js

@@ -253,6 +253,7 @@ class Search extends BaseComponent {
             onClick={() => {
               this.clearSearch();
             }}
+            type="button"
           >
             <VisuallyHidden>{clearButtonText}</VisuallyHidden>
             <svg

packages/uikit-workshop/src/scripts/lit-components/pl-button/pl-button.js

@@ -93,6 +93,7 @@ class Button extends Slotify(LitElement) {
                 ? 'pl-c-button--icon-only'
                 : ''}"
               title=${ifDefined(this.title === '' ? undefined : this.title)}
+              type="button"
             >
               ${this.innerTemplate()}
             </button>

packages/uikit-workshop/src/scripts/lit-components/pl-header/pl-header.js

@@ -95,6 +95,7 @@ class Header extends BaseLitComponent {
         <button
           class="pl-c-header__nav-toggle pl-js-nav-trigger"
           @click="${this.toggleNav}"
+          type="button"
         >
           <pl-icon
             name="${this.isActive ? 'close' : 'menu'}"

packages/uikit-workshop/src/scripts/lit-components/pl-viewport-size-list/pl-viewport-size-list.js

@@ -319,6 +319,7 @@ class ViewportSizes extends BaseComponent {
                       <pl-icon name="phone" aria-hidden="true"></pl-icon>
                     `,
                 }}
+                type="button"
               />
             </pl-tooltip>
           </li>
@@ -336,6 +337,7 @@ class ViewportSizes extends BaseComponent {
                       <pl-icon name="tablet" aria-hidden="true"></pl-icon>
                     `,
                 }}
+                type="button"
               />
             </pl-tooltip>
           </li>
@@ -353,6 +355,7 @@ class ViewportSizes extends BaseComponent {
                       <pl-icon name="laptop" aria-hidden="true"></pl-icon>
                     `,
                 }}
+                type="button"
               />
             </pl-tooltip>
           </li>
@@ -370,6 +373,7 @@ class ViewportSizes extends BaseComponent {
                       <pl-icon name="desktop" aria-hidden="true"></pl-icon>
                     `,
                 }}
+                type="button"
               />
             </pl-tooltip>
           </li>
@@ -387,6 +391,7 @@ class ViewportSizes extends BaseComponent {
                       <pl-icon name="random" aria-hidden="true"></pl-icon>
                     `,
                 }}
+                type="button"
               />
             </pl-tooltip>
           </li>
@@ -404,6 +409,7 @@ class ViewportSizes extends BaseComponent {
                       <pl-icon name="disco-ball" aria-hidden="true"></pl-icon>
                     `,
                 }}
+                type="button"
               />
             </pl-tooltip>
           </li>
@@ -421,6 +427,7 @@ class ViewportSizes extends BaseComponent {
                      <pl-icon name="hay" aria-hidden="true"></pl-icon>
                    `,
                 }}
+                type="button"
               />
             </pl-tooltip>
           </li>

packages/uikit-workshop/views-twig/partials/patternSection.twig

@@ -16,7 +16,7 @@
     </div>
 
 
-    <button class="pl-c-pattern__extra-toggle pl-js-pattern-extra-toggle" id="pl-pattern-extra-toggle-{{partial.patternPartial}}" data-patternpartial="{{ partial.patternPartial }}" title="View Pattern Info">
+    <button class="pl-c-pattern__extra-toggle pl-js-pattern-extra-toggle" id="pl-pattern-extra-toggle-{{partial.patternPartial}}" data-patternpartial="{{ partial.patternPartial }}" title="View Pattern Info" type="button">
         <span class="pl-c-pattern__extra-toggle-text pl-c-pattern__extra-toggle-text--expand">Expand</span>
         <span class="pl-c-pattern__extra-toggle-text pl-c-pattern__extra-toggle-text--collapse">Collapse</span>
         <svg viewBox="0 0 16 16" width="20" height="20" class="pl-c-pattern__toggle-icon pl-c-pattern__toggle-icon--expand">

packages/uikit-workshop/views/partials/patternSection.mustache

@@ -15,7 +15,7 @@
 
 		</h3><!--end pl-c-pattern__title-->
 
-		<button class="pl-c-pattern__extra-toggle pl-js-pattern-extra-toggle" id="pl-pattern-extra-toggle-{{ patternPartial }}" data-patternpartial="{{ patternPartial }}" title="View Pattern Info">
+		<button class="pl-c-pattern__extra-toggle pl-js-pattern-extra-toggle" id="pl-pattern-extra-toggle-{{ patternPartial }}" data-patternpartial="{{ patternPartial }}" title="View Pattern Info" type="button">
 			<span class="pl-c-pattern__extra-toggle-text pl-c-pattern__extra-toggle-text--expand">Expand</span>
 			<span class="pl-c-pattern__extra-toggle-text pl-c-pattern__extra-toggle-text--collapse">Collapse</span>
 				<svg viewBox="0 0 16 16" width="20" height="20" class="pl-c-pattern__toggle-icon pl-c-pattern__toggle-icon--expand">