Fix: minimum click area and minimal html

packages/ui/components/button/src/LionButton.js

@@ -1,5 +1,6 @@
 import { html, LitElement, css } from 'lit';
 import { browserDetection, DisabledWithTabIndexMixin } from '@lion/ui/core.js';
+import { hostMinimumClickArea } from '../../../shared-styles/host-minimum-click-area.js';
 
 const isKeyboardClickEvent = (/** @type {KeyboardEvent} */ e) => e.key === ' ' || e.key === 'Enter';
 const isSpaceKeyboardClickEvent = (/** @type {KeyboardEvent} */ e) => e.key === ' ';
@@ -40,6 +41,7 @@ export class LionButton extends DisabledWithTabIndexMixin(LitElement) {
 
   static get styles() {
     return [
+      hostMinimumClickArea,
       css`
         :host {
           position: relative;
@@ -58,22 +60,6 @@ export class LionButton extends DisabledWithTabIndexMixin(LitElement) {
           -ms-user-select: none;
         }
 
-        :host::before {
-          content: '';
-
-          /* center vertically and horizontally */
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-
-          /* Minimum click area to meet [WCAG Success Criterion 2.5.5 Target Size (Enhanced)](https://www.w3.org/TR/WCAG22/#target-size-enhanced) */
-          min-height: 44px;
-          min-width: 44px;
-          width: 100%;
-          height: 100%;
-        }
-
         .button-content {
           display: flex;
           align-items: center;

packages/ui/components/switch/src/LionSwitchButton.js

@@ -1,5 +1,6 @@
 import { html, css, LitElement } from 'lit';
 import { DisabledWithTabIndexMixin } from '@lion/ui/core.js';
+import { hostMinimumClickArea } from '../../../shared-styles/host-minimum-click-area.js';
 
 export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
   static get properties() {
@@ -17,58 +18,43 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
 
   static get styles() {
     return [
+      hostMinimumClickArea,
       css`
         :host {
-          display: inline-block;
           position: relative;
+          display: inline-block;
           width: 36px;
           height: 16px;
           outline: 0;
+          background: #eee;
+          cursor: pointer;
         }
 
         :host([hidden]) {
           display: none;
         }
 
-        .btn {
-          position: relative;
-          height: 100%;
-          outline: 0;
-        }
-
         :host(:focus:not([disabled])) .switch-button__thumb {
           /* if you extend, please overwrite */
           outline: 2px solid #bde4ff;
         }
 
-        .switch-button__track {
-          background: #eee;
-          width: 100%;
-          height: 100%;
-        }
-
         .switch-button__thumb {
-          background: #ccc;
+          display: block;
           width: 50%;
           height: 100%;
-          position: absolute;
-          top: 0;
+          background: #ccc;
         }
 
         :host([checked]) .switch-button__thumb {
-          right: 0;
+          transform: translateX(100%);
         }
       `,
     ];
   }
 
   render() {
-    return html`
-      <div class="btn">
-        <div class="switch-button__track"></div>
-        <div class="switch-button__thumb"></div>
-      </div>
-    `;
+    return html` <span class="switch-button__thumb"><slot></slot></span> `;
   }
 
   constructor() {

packages/ui/shared-styles/host-minimum-click-area.js

@@ -0,0 +1,19 @@
+import { css } from 'lit';
+
+export const hostMinimumClickArea = css`
+  :host::before {
+    content: '';
+
+    /* center vertically and horizontally */
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    /* Minimum click area to meet [WCAG Success Criterion 2.5.5 Target Size (Enhanced)](https://www.w3.org/TR/WCAG22/#target-size-enhanced) */
+    min-height: 44px;
+    min-width: 44px;
+    width: 100%;
+    height: 100%;
+  }
+`;