@api-client/ui 0.2.10 → 0.2.12

package/build/src/md/checkbox/internals/Checkbox.styles.js

@@ -6,29 +6,44 @@ export default css `
     outline: none;
     -webkit-tap-highlight-color: transparent;
 
+    position: relative;
+
     --md-ripple-hover-state-layer-color: var(--md-sys-color-on-surface);
     --md-ripple-focus-state-layer-color: var(--md-sys-color-on-surface);
     --md-ripple-pressed-state-layer-color: var(--md-sys-color-primary);
+
+    --_container-border-color: var(--md-sys-color-on-surface);
+    --_container-border-width: 2px;
+    --_container-background-color: transparent;
+    --_container-opacity: 1;
+
+    --_check-mark-color: currentColor;
+
+    --_checkbox-width: 18px;
+    --_checkbox-height: 18px;
+    --_state-width: 40px;
+    --_state-height: 40px;
   }
 
   .surface {
     position: relative;
-    min-width: 40px;
-    height: 40px;
+    min-width: var(--_state-width);
+    height: var(--_state-height);
     display: flex;
     align-items: center;
   }
 
   .container {
     border-radius: 2px;
-    border: 2px var(--md-sys-color-on-surface) solid;
-    background-color: transparent;
+    border: var(--_container-border-width) var(--_container-border-color) solid;
+    background-color: var(--_container-background-color);
+    opacity: var(--_container-opacity);
 
     position: absolute;
     inset: 11px 0px 0px 11px;
 
-    width: 18px;
-    height: 18px;
+    width: var(--_checkbox-width);
+    height: var(--_checkbox-height);
 
     box-sizing: border-box;
 
@@ -39,22 +54,23 @@ export default css `
   }
 
   .icon {
-    width: 18px;
-    height: 18px;
+    width: var(--_checkbox-width);
+    height: var(--_checkbox-height);
     position: absolute;
     inset: 11px 0 0 11px;
   }
 
   .icon > svg {
-    width: 18px !important;
-    height: 18px !important;
+    width: var(--_checkbox-width) !important;
+    height: var(--_checkbox-height) !important;
+    fill: var(--_check-mark-color);
   }
 
   .state {
     position: absolute;
     inset: 0;
-    width: 40px;
-    height: 40px;
+    width: var(--_state-width);
+    height: var(--_state-height);
     border-radius: var(--md-sys-shape-corner-full);
   }
 
@@ -63,223 +79,46 @@ export default css `
     z-index: 3;
   }
 
-  :host([checked]) .container,
-  :host([indeterminate]) .container {
-    border-width: 0px;
-    background-color: var(--md-sys-color-primary);
-  }
-
-  :host([checked]) .icon > svg,
-  :host([indeterminate]) .icon > svg {
-    fill: var(--md-sys-color-on-primary);
-  }
-
-  /* Invalid state */
-
-  :host([invalid]) .container {
-    border-color: var(--md-sys-color-error);
-  }
-
-  :host([checked][invalid]) .container,
-  :host([indeterminate][invalid]) .container {
-    border-color: transparent;
-    background-color: var(--md-sys-color-error);
-  }
-
-  :host([checked][invalid]) .icon > svg,
-  :host([indeterminate][invalid]) .icon > svg {
-    fill: var(--md-sys-color-on-error);
-  }
-
-  /* Disabled state */
-
-  :host([disabled]) {
-    pointer-events: none;
-  }
-
-  :host([disabled]) .container {
-    border-color: var(--md-sys-color-on-surface);
-    border-width: 2px;
-    opacity: 38%;
+  :host([checked]) {
+    --md-ripple-hover-state-layer-color: var(--md-sys-color-primary);
+    --md-ripple-focus-state-layer-color: var(--md-sys-color-primary);
+    --md-ripple-pressed-state-layer-color: var(--md-sys-color-on-surface);
   }
 
-  :host([checked][disabled]) .container,
-  :host([indeterminate][disabled]) .container {
-    background-color: var(--md-sys-color-on-surface);
-    border-width: 0;
-    opacity: 38%;
+  :host([checked]),
+  :host([indeterminate]) {
+    --_container-border-width: 0px;
+    --_container-background-color: var(--md-sys-color-primary);
+    --_check-mark-color: var(--md-sys-color-on-primary);
   }
 
-  :host([checked][disabled]) .icon > svg,
-  :host([indeterminate][disabled]) .icon > svg {
-    fill: var(--md-sys-color-surface);
-  }
-
-  /* Hover state */
-
-  /* :host(:hover) .state {
-  background-color: var(--md-sys-color-on-surface);
-  opacity: var(--md-sys-state-hover-state-layer-opacity);
-} */
-
-  /* :host([checked]:hover) .state,
-:host([indeterminate]:hover) .state {
-  background-color: var(--md-sys-color-primary);
-  opacity: var(--md-sys-state-hover-state-layer-opacity);
-} */
-
-  :host(:hover) .container {
-    border-color: var(--md-sys-color-on-surface);
-    border-width: 2px;
-  }
-
-  :host([checked]:hover) .container,
-  :host([indeterminate]:hover) .container {
-    background-color: var(--md-sys-color-primary);
-    border-width: 0px;
-  }
-
-  :host(:hover) .icon > svg {
-    fill: var(--md-sys-color-on-primary);
-  }
-
-  :host([invalid]:hover) {
+  :host([invalid]) {
     --md-ripple-hover-state-layer-color: var(--md-sys-color-error);
     --md-ripple-focus-state-layer-color: var(--md-sys-color-error);
     --md-ripple-pressed-state-layer-color: var(--md-sys-color-error);
+    --_container-border-color: var(--md-sys-color-error);
   }
 
-  /* :host([invalid]:hover) .state {
-  background-color: var(--md-sys-color-error);
-  opacity: var(--md-sys-state-hover-state-layer-opacity);
-} */
-
-  :host([invalid]:hover) .container {
-    border-color: var(--md-sys-color-error);
-    border-width: 2px;
+  :host([checked][invalid]),
+  :host([indeterminate][invalid]) {
+    --_check-mark-color: var(--md-sys-color-on-error);
+    --_container-border-color: transparent;
+    --_container-background-color: var(--md-sys-color-error);
   }
 
-  :host([checked][invalid]:hover) .container,
-  :host([indeterminate][invalid]:hover) .container {
-    background-color: var(--md-sys-color-error);
-    border-width: 0px;
-  }
-
-  :host([checked][invalid]:hover) .icon > svg,
-  :host([indeterminate][invalid]:hover) .icon > svg {
-    fill: var(--md-sys-color-on-error);
-  }
-
-  /* Focus state */
-
-  /* :host(:focus) .state {
-  background-color: var(--md-sys-color-primary);
-  opacity: var(--md-sys-state-focus-state-layer-opacity);
-}
-
-:host([checked]:focus) .state,
-:host([indeterminate]:focus) .state {
-  background-color: var(--md-sys-color-on-surface);
-  opacity: var(--md-sys-state-focus-state-layer-opacity);
-} */
-
-  :host(:focus) .container {
-    border-color: var(--md-sys-color-on-surface);
-    border-width: 2px;
-  }
-
-  :host([checked]:focus) .container,
-  :host([indeterminate]:focus) .container {
-    background-color: var(--md-sys-color-primary);
-    border-width: 0px;
-  }
-
-  :host(:focus) .icon > svg {
-    fill: var(--md-sys-color-on-primary);
-  }
-
-  /* :host([invalid]:focus) .state {
-  background-color: var(--md-sys-color-error);
-  opacity: var(--md-sys-state-focus-state-layer-opacity);
-} */
-
-  :host([invalid]:focus) .container {
-    border-color: var(--md-sys-color-error);
-    border-width: 2px;
-  }
-
-  :host([checked][invalid]:focus) .container,
-  :host([indeterminate][invalid]:focus) .container {
-    background-color: var(--md-sys-color-error);
-    border-width: 0px;
-  }
-
-  :host([checked][invalid]:focus) .icon > svg,
-  :host([indeterminate][invalid]:focus) .icon > svg {
-    fill: var(--md-sys-color-on-error);
-  }
-
-  /* Pressed state */
-
-  /* :host(:active) .state,
-:host .pressed .state {
-  background-color: var(--md-sys-color-primary);
-  opacity: var(--md-sys-state-pressed-state-layer-opacity);
-}
-
-:host([checked]:active) .state,
-:host([checked]) .pressed .state,
-:host([indeterminate]:active) .state,
-:host([indeterminate]) .pressed .state {
-  background-color: var(--md-sys-color-on-surface);
-  opacity: var(--md-sys-state-pressed-state-layer-opacity);
-} */
-
-  :host(:active) .container,
-  :host .pressed .container {
-    border-color: var(--md-sys-color-on-surface);
-    border-width: 2px;
-  }
-
-  :host([checked]:active) .container,
-  :host([checked]) .pressed .container,
-  :host([indeterminate]:active) .container,
-  :host([indeterminate]) .pressed .container {
-    background-color: var(--md-sys-color-primary);
-    border-width: 0px;
-  }
-
-  :host([checked]:active) .icon > svg,
-  :host([checked]) .pressed .icon > svg,
-  :host([indeterminate]:active) .icon > svg,
-  :host([indeterminate]) .pressed .icon > svg {
-    fill: var(--md-sys-color-on-primary);
-  }
-
-  /* :host([invalid]:active) .state,
-:host([invalid]) .pressed .state {
-  background-color: var(--md-sys-color-error);
-  opacity: var(--md-sys-state-pressed-state-layer-opacity);
-} */
-
-  :host([invalid]:active) .container,
-  :host([invalid]) .pressed .container {
-    border-color: var(--md-sys-color-error);
-    border-width: 2px;
-  }
-
-  :host([checked][invalid]:active) .container,
-  :host([checked][invalid]) .pressed .container,
-  :host([indeterminate][invalid]:active) .container :host([indeterminate][invalid]) .pressed .container {
-    background-color: var(--md-sys-color-error);
-    border-width: 0px;
+  :host([disabled]) {
+    pointer-events: none;
+    --_check-mark-color: var(--md-sys-color-surface);
+    --_container-border-color: var(--md-sys-color-on-surface);
+    --_container-border-width: 2px;
+    --_container-opacity: 38%;
   }
 
-  :host([checked][invalid]:active) .icon > svg,
-  :host([checked][invalid]) .pressed .icon > svg,
-  :host([indeterminate][invalid]:active) .icon > svg,
-  :host([indeterminate][invalid]) .pressed .icon > svg {
-    fill: var(--md-sys-color-on-error);
+  :host([checked][disabled]),
+  :host([indeterminate][disabled]) {
+    --_container-background-color: var(--md-sys-color-on-surface);
+    --_container-border-width: 0;
+    --_container-opacity: 38%;
   }
 `;
 //# sourceMappingURL=Checkbox.styles.js.map

package/build/src/md/checkbox/internals/Checkbox.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.styles.js","sourceRoot":"","sources":["../../../../../src/md/checkbox/internals/Checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0RjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: inline-block;\n    vertical-align: middle;\n    outline: none;\n    -webkit-tap-highlight-color: transparent;\n\n    --md-ripple-hover-state-layer-color: var(--md-sys-color-on-surface);\n    --md-ripple-focus-state-layer-color: var(--md-sys-color-on-surface);\n    --md-ripple-pressed-state-layer-color: var(--md-sys-color-primary);\n  }\n\n  .surface {\n    position: relative;\n    min-width: 40px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n  }\n\n  .container {\n    border-radius: 2px;\n    border: 2px var(--md-sys-color-on-surface) solid;\n    background-color: transparent;\n\n    position: absolute;\n    inset: 11px 0px 0px 11px;\n\n    width: 18px;\n    height: 18px;\n\n    box-sizing: border-box;\n\n    transition:\n      cubic-bezier(0.4, 0, 0.2, 1) border-radius 0.23s,\n      cubic-bezier(0.4, 0, 0.2, 1) border-color 0.23s,\n      cubic-bezier(0.4, 0, 0.2, 1) background-color 0.13s;\n  }\n\n  .icon {\n    width: 18px;\n    height: 18px;\n    position: absolute;\n    inset: 11px 0 0 11px;\n  }\n\n  .icon > svg {\n    width: 18px !important;\n    height: 18px !important;\n  }\n\n  .state {\n    position: absolute;\n    inset: 0;\n    width: 40px;\n    height: 40px;\n    border-radius: var(--md-sys-shape-corner-full);\n  }\n\n  .ripple {\n    border-radius: var(--md-sys-shape-corner-full);\n    z-index: 3;\n  }\n\n  :host([checked]) .container,\n  :host([indeterminate]) .container {\n    border-width: 0px;\n    background-color: var(--md-sys-color-primary);\n  }\n\n  :host([checked]) .icon > svg,\n  :host([indeterminate]) .icon > svg {\n    fill: var(--md-sys-color-on-primary);\n  }\n\n  /* Invalid state */\n\n  :host([invalid]) .container {\n    border-color: var(--md-sys-color-error);\n  }\n\n  :host([checked][invalid]) .container,\n  :host([indeterminate][invalid]) .container {\n    border-color: transparent;\n    background-color: var(--md-sys-color-error);\n  }\n\n  :host([checked][invalid]) .icon > svg,\n  :host([indeterminate][invalid]) .icon > svg {\n    fill: var(--md-sys-color-on-error);\n  }\n\n  /* Disabled state */\n\n  :host([disabled]) {\n    pointer-events: none;\n  }\n\n  :host([disabled]) .container {\n    border-color: var(--md-sys-color-on-surface);\n    border-width: 2px;\n    opacity: 38%;\n  }\n\n  :host([checked][disabled]) .container,\n  :host([indeterminate][disabled]) .container {\n    background-color: var(--md-sys-color-on-surface);\n    border-width: 0;\n    opacity: 38%;\n  }\n\n  :host([checked][disabled]) .icon > svg,\n  :host([indeterminate][disabled]) .icon > svg {\n    fill: var(--md-sys-color-surface);\n  }\n\n  /* Hover state */\n\n  /* :host(:hover) .state {\n  background-color: var(--md-sys-color-on-surface);\n  opacity: var(--md-sys-state-hover-state-layer-opacity);\n} */\n\n  /* :host([checked]:hover) .state,\n:host([indeterminate]:hover) .state {\n  background-color: var(--md-sys-color-primary);\n  opacity: var(--md-sys-state-hover-state-layer-opacity);\n} */\n\n  :host(:hover) .container {\n    border-color: var(--md-sys-color-on-surface);\n    border-width: 2px;\n  }\n\n  :host([checked]:hover) .container,\n  :host([indeterminate]:hover) .container {\n    background-color: var(--md-sys-color-primary);\n    border-width: 0px;\n  }\n\n  :host(:hover) .icon > svg {\n    fill: var(--md-sys-color-on-primary);\n  }\n\n  :host([invalid]:hover) {\n    --md-ripple-hover-state-layer-color: var(--md-sys-color-error);\n    --md-ripple-focus-state-layer-color: var(--md-sys-color-error);\n    --md-ripple-pressed-state-layer-color: var(--md-sys-color-error);\n  }\n\n  /* :host([invalid]:hover) .state {\n  background-color: var(--md-sys-color-error);\n  opacity: var(--md-sys-state-hover-state-layer-opacity);\n} */\n\n  :host([invalid]:hover) .container {\n    border-color: var(--md-sys-color-error);\n    border-width: 2px;\n  }\n\n  :host([checked][invalid]:hover) .container,\n  :host([indeterminate][invalid]:hover) .container {\n    background-color: var(--md-sys-color-error);\n    border-width: 0px;\n  }\n\n  :host([checked][invalid]:hover) .icon > svg,\n  :host([indeterminate][invalid]:hover) .icon > svg {\n    fill: var(--md-sys-color-on-error);\n  }\n\n  /* Focus state */\n\n  /* :host(:focus) .state {\n  background-color: var(--md-sys-color-primary);\n  opacity: var(--md-sys-state-focus-state-layer-opacity);\n}\n\n:host([checked]:focus) .state,\n:host([indeterminate]:focus) .state {\n  background-color: var(--md-sys-color-on-surface);\n  opacity: var(--md-sys-state-focus-state-layer-opacity);\n} */\n\n  :host(:focus) .container {\n    border-color: var(--md-sys-color-on-surface);\n    border-width: 2px;\n  }\n\n  :host([checked]:focus) .container,\n  :host([indeterminate]:focus) .container {\n    background-color: var(--md-sys-color-primary);\n    border-width: 0px;\n  }\n\n  :host(:focus) .icon > svg {\n    fill: var(--md-sys-color-on-primary);\n  }\n\n  /* :host([invalid]:focus) .state {\n  background-color: var(--md-sys-color-error);\n  opacity: var(--md-sys-state-focus-state-layer-opacity);\n} */\n\n  :host([invalid]:focus) .container {\n    border-color: var(--md-sys-color-error);\n    border-width: 2px;\n  }\n\n  :host([checked][invalid]:focus) .container,\n  :host([indeterminate][invalid]:focus) .container {\n    background-color: var(--md-sys-color-error);\n    border-width: 0px;\n  }\n\n  :host([checked][invalid]:focus) .icon > svg,\n  :host([indeterminate][invalid]:focus) .icon > svg {\n    fill: var(--md-sys-color-on-error);\n  }\n\n  /* Pressed state */\n\n  /* :host(:active) .state,\n:host .pressed .state {\n  background-color: var(--md-sys-color-primary);\n  opacity: var(--md-sys-state-pressed-state-layer-opacity);\n}\n\n:host([checked]:active) .state,\n:host([checked]) .pressed .state,\n:host([indeterminate]:active) .state,\n:host([indeterminate]) .pressed .state {\n  background-color: var(--md-sys-color-on-surface);\n  opacity: var(--md-sys-state-pressed-state-layer-opacity);\n} */\n\n  :host(:active) .container,\n  :host .pressed .container {\n    border-color: var(--md-sys-color-on-surface);\n    border-width: 2px;\n  }\n\n  :host([checked]:active) .container,\n  :host([checked]) .pressed .container,\n  :host([indeterminate]:active) .container,\n  :host([indeterminate]) .pressed .container {\n    background-color: var(--md-sys-color-primary);\n    border-width: 0px;\n  }\n\n  :host([checked]:active) .icon > svg,\n  :host([checked]) .pressed .icon > svg,\n  :host([indeterminate]:active) .icon > svg,\n  :host([indeterminate]) .pressed .icon > svg {\n    fill: var(--md-sys-color-on-primary);\n  }\n\n  /* :host([invalid]:active) .state,\n:host([invalid]) .pressed .state {\n  background-color: var(--md-sys-color-error);\n  opacity: var(--md-sys-state-pressed-state-layer-opacity);\n} */\n\n  :host([invalid]:active) .container,\n  :host([invalid]) .pressed .container {\n    border-color: var(--md-sys-color-error);\n    border-width: 2px;\n  }\n\n  :host([checked][invalid]:active) .container,\n  :host([checked][invalid]) .pressed .container,\n  :host([indeterminate][invalid]:active) .container :host([indeterminate][invalid]) .pressed .container {\n    background-color: var(--md-sys-color-error);\n    border-width: 0px;\n  }\n\n  :host([checked][invalid]:active) .icon > svg,\n  :host([checked][invalid]) .pressed .icon > svg,\n  :host([indeterminate][invalid]:active) .icon > svg,\n  :host([indeterminate][invalid]) .pressed .icon > svg {\n    fill: var(--md-sys-color-on-error);\n  }\n`\n"]}
+{"version":3,"file":"Checkbox.styles.js","sourceRoot":"","sources":["../../../../../src/md/checkbox/internals/Checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyHjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: inline-block;\n    vertical-align: middle;\n    outline: none;\n    -webkit-tap-highlight-color: transparent;\n\n    position: relative;\n\n    --md-ripple-hover-state-layer-color: var(--md-sys-color-on-surface);\n    --md-ripple-focus-state-layer-color: var(--md-sys-color-on-surface);\n    --md-ripple-pressed-state-layer-color: var(--md-sys-color-primary);\n\n    --_container-border-color: var(--md-sys-color-on-surface);\n    --_container-border-width: 2px;\n    --_container-background-color: transparent;\n    --_container-opacity: 1;\n\n    --_check-mark-color: currentColor;\n\n    --_checkbox-width: 18px;\n    --_checkbox-height: 18px;\n    --_state-width: 40px;\n    --_state-height: 40px;\n  }\n\n  .surface {\n    position: relative;\n    min-width: var(--_state-width);\n    height: var(--_state-height);\n    display: flex;\n    align-items: center;\n  }\n\n  .container {\n    border-radius: 2px;\n    border: var(--_container-border-width) var(--_container-border-color) solid;\n    background-color: var(--_container-background-color);\n    opacity: var(--_container-opacity);\n\n    position: absolute;\n    inset: 11px 0px 0px 11px;\n\n    width: var(--_checkbox-width);\n    height: var(--_checkbox-height);\n\n    box-sizing: border-box;\n\n    transition:\n      cubic-bezier(0.4, 0, 0.2, 1) border-radius 0.23s,\n      cubic-bezier(0.4, 0, 0.2, 1) border-color 0.23s,\n      cubic-bezier(0.4, 0, 0.2, 1) background-color 0.13s;\n  }\n\n  .icon {\n    width: var(--_checkbox-width);\n    height: var(--_checkbox-height);\n    position: absolute;\n    inset: 11px 0 0 11px;\n  }\n\n  .icon > svg {\n    width: var(--_checkbox-width) !important;\n    height: var(--_checkbox-height) !important;\n    fill: var(--_check-mark-color);\n  }\n\n  .state {\n    position: absolute;\n    inset: 0;\n    width: var(--_state-width);\n    height: var(--_state-height);\n    border-radius: var(--md-sys-shape-corner-full);\n  }\n\n  .ripple {\n    border-radius: var(--md-sys-shape-corner-full);\n    z-index: 3;\n  }\n\n  :host([checked]) {\n    --md-ripple-hover-state-layer-color: var(--md-sys-color-primary);\n    --md-ripple-focus-state-layer-color: var(--md-sys-color-primary);\n    --md-ripple-pressed-state-layer-color: var(--md-sys-color-on-surface);\n  }\n\n  :host([checked]),\n  :host([indeterminate]) {\n    --_container-border-width: 0px;\n    --_container-background-color: var(--md-sys-color-primary);\n    --_check-mark-color: var(--md-sys-color-on-primary);\n  }\n\n  :host([invalid]) {\n    --md-ripple-hover-state-layer-color: var(--md-sys-color-error);\n    --md-ripple-focus-state-layer-color: var(--md-sys-color-error);\n    --md-ripple-pressed-state-layer-color: var(--md-sys-color-error);\n    --_container-border-color: var(--md-sys-color-error);\n  }\n\n  :host([checked][invalid]),\n  :host([indeterminate][invalid]) {\n    --_check-mark-color: var(--md-sys-color-on-error);\n    --_container-border-color: transparent;\n    --_container-background-color: var(--md-sys-color-error);\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    --_check-mark-color: var(--md-sys-color-surface);\n    --_container-border-color: var(--md-sys-color-on-surface);\n    --_container-border-width: 2px;\n    --_container-opacity: 38%;\n  }\n\n  :host([checked][disabled]),\n  :host([indeterminate][disabled]) {\n    --_container-background-color: var(--md-sys-color-on-surface);\n    --_container-border-width: 0;\n    --_container-opacity: 38%;\n  }\n`\n"]}

package/build/src/md/checkbox/internals/CheckboxElement.d.ts

@@ -1,17 +1,20 @@
 import { SVGTemplateResult, TemplateResult, nothing } from 'lit';
 import CheckedElement from './CheckedElement.js';
-import UiRipple from '../../ripple/internals/ripple.js';
+import type UiRipple from '../../ripple/internals/ripple.js';
+import type { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js';
 import '../../ripple/ui-ripple.js';
+import '@material/web/focus/md-focus-ring.js';
 export default class CheckboxElement extends CheckedElement {
     protected get _icon(): SVGTemplateResult | typeof nothing;
-    protected accessor ripple: Promise<UiRipple | null>;
-    protected accessor showRipple: boolean;
-    protected readonly getRipple: () => Promise<UiRipple | null>;
-    protected handleFocus(): Promise<void>;
-    protected handleBlur(): Promise<void>;
+    protected accessor ripple: UiRipple | null;
+    protected pressRipple(options: BeginPressConfig): void;
+    protected endRipple(): void;
+    beginPress(options: BeginPressConfig): void;
+    endPress(config: EndPressConfig): void;
     handleKeyDown(e: KeyboardEvent): Promise<void>;
     handleKeyUp(e: KeyboardEvent): Promise<void>;
+    handlePointerEnter(e: PointerEvent): void;
+    handlePointerLeave(e: PointerEvent): void;
     protected render(): TemplateResult;
-    protected renderRipple: () => TemplateResult;
 }
 //# sourceMappingURL=CheckboxElement.d.ts.map

package/build/src/md/checkbox/internals/CheckboxElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxElement.d.ts","sourceRoot":"","sources":["../../../../../src/md/checkbox/internals/CheckboxElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,iBAAiB,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AAItE,OAAO,cAAc,MAAM,qBAAqB,CAAA;AAGhD,OAAO,QAAQ,MAAM,kCAAkC,CAAA;AACvD,OAAO,2BAA2B,CAAA;AAElC,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,cAAc;IACzD,SAAS,KAAK,KAAK,IAAI,iBAAiB,GAAG,OAAO,OAAO,CASxD;IAEwB,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAG,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAA;IAEpE,SAAS,CAAC,QAAQ,CAAC,UAAU,UAAQ;IAE9C,SAAS,CAAC,QAAQ,CAAC,SAAS,QAAO,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC,CAG1D;cAEwB,WAAW,IAAI,OAAO,CAAC,IAAI,CAAC;cAK5B,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IAKrC,aAAa,CAAC,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC;IAQ9C,WAAW,CAAC,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC;cAQxC,MAAM,IAAI,cAAc;IAgB3C,SAAS,CAAC,YAAY,QAAO,cAAc,CAG1C;CACF"}
+{"version":3,"file":"CheckboxElement.d.ts","sourceRoot":"","sources":["../../../../../src/md/checkbox/internals/CheckboxElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,iBAAiB,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AAGtE,OAAO,cAAc,MAAM,qBAAqB,CAAA;AAEhD,OAAO,KAAK,QAAQ,MAAM,kCAAkC,CAAA;AAC5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAA;AAEhG,OAAO,2BAA2B,CAAA;AAClC,OAAO,sCAAsC,CAAA;AAE7C,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,cAAc;IACzD,SAAS,KAAK,KAAK,IAAI,iBAAiB,GAAG,OAAO,OAAO,CASxD;IAEmB,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAG,QAAQ,GAAG,IAAI,CAAA;IAE/D,SAAS,CAAC,WAAW,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAOtD,SAAS,CAAC,SAAS,IAAI,IAAI;IAIlB,UAAU,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAK3C,QAAQ,CAAC,MAAM,EAAE,cAAc,GAAG,IAAI;IAKhC,aAAa,CAAC,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC;IAO9C,WAAW,CAAC,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC;IAOlD,kBAAkB,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;IAOzC,kBAAkB,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;cAO/B,MAAM,IAAI,cAAc;CAgB5C"}

package/build/src/md/checkbox/internals/CheckboxElement.js

@@ -1,27 +1,21 @@
 import { __esDecorate, __runInitializers } from "tslib";
 import { html, nothing } from 'lit';
-import { queryAsync, state } from 'lit/decorators.js';
+import { query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { when } from 'lit/directives/when.js';
 import CheckedElement from './CheckedElement.js';
 import { check, checkIndeterminate } from '../../icons/Icons.js';
-import { ripple } from '../../effects/rippleDirective.js';
 import '../../ripple/ui-ripple.js';
+import '@material/web/focus/md-focus-ring.js';
 let CheckboxElement = (() => {
     let _classSuper = CheckedElement;
     let _ripple_decorators;
     let _ripple_initializers = [];
     let _ripple_extraInitializers = [];
-    let _showRipple_decorators;
-    let _showRipple_initializers = [];
-    let _showRipple_extraInitializers = [];
     return class CheckboxElement extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _ripple_decorators = [queryAsync('ui-ripple')];
-            _showRipple_decorators = [state()];
+            _ripple_decorators = [query('ui-ripple')];
             __esDecorate(this, null, _ripple_decorators, { kind: "accessor", name: "ripple", static: false, private: false, access: { has: obj => "ripple" in obj, get: obj => obj.ripple, set: (obj, value) => { obj.ripple = value; } }, metadata: _metadata }, _ripple_initializers, _ripple_extraInitializers);
-            __esDecorate(this, null, _showRipple_decorators, { kind: "accessor", name: "showRipple", static: false, private: false, access: { has: obj => "showRipple" in obj, get: obj => obj.showRipple, set: (obj, value) => { obj.showRipple = value; } }, metadata: _metadata }, _showRipple_initializers, _showRipple_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         get _icon() {
@@ -37,33 +31,45 @@ let CheckboxElement = (() => {
         #ripple_accessor_storage = __runInitializers(this, _ripple_initializers, void 0);
         get ripple() { return this.#ripple_accessor_storage; }
         set ripple(value) { this.#ripple_accessor_storage = value; }
-        #showRipple_accessor_storage = (__runInitializers(this, _ripple_extraInitializers), __runInitializers(this, _showRipple_initializers, false));
-        get showRipple() { return this.#showRipple_accessor_storage; }
-        set showRipple(value) { this.#showRipple_accessor_storage = value; }
-        getRipple = (__runInitializers(this, _showRipple_extraInitializers), () => {
-            this.showRipple = true;
-            return this.ripple;
-        });
-        async handleFocus() {
-            const _ripple = await this.getRipple();
-            _ripple?.beginFocus();
+        pressRipple(options) {
+            const element = this.ripple;
+            if (element && !element.isPressed) {
+                element.beginPress(options.positionEvent);
+            }
+        }
+        endRipple() {
+            this.ripple?.endPress();
         }
-        async handleBlur() {
-            const _ripple = await this.getRipple();
-            _ripple?.endFocus();
+        beginPress(options) {
+            super.beginPress(options);
+            this.pressRipple(options);
+        }
+        endPress(config) {
+            super.endPress(config);
+            this.endRipple();
         }
         async handleKeyDown(e) {
             super.handleKeyDown(e);
             if (['Space'].includes(e.code)) {
-                const _ripple = await this.getRipple();
-                _ripple?.beginPress();
+                this.ripple?.beginPress();
             }
         }
         async handleKeyUp(e) {
             super.handleKeyUp(e);
             if (['Space'].includes(e.code)) {
-                const _ripple = await this.getRipple();
-                _ripple?.endPress();
+                this.ripple?.endPress();
+            }
+        }
+        handlePointerEnter(e) {
+            super.handlePointerEnter(e);
+            if (this.ripple) {
+                this.ripple.beginHover(e);
+            }
+        }
+        handlePointerLeave(e) {
+            super.handlePointerLeave(e);
+            if (this.ripple) {
+                this.ripple.endHover();
             }
         }
         render() {
@@ -73,18 +79,19 @@ let CheckboxElement = (() => {
                 pressed,
             });
             return html `
-      <div class="${containerClasses}" ${ripple(this.getRipple)}>
+      <md-focus-ring part="focus-ring" .control="${this}"></md-focus-ring>
+      <div class="${containerClasses}">
         <div class="container"></div>
         <div class="state"></div>
-        ${when(this.showRipple, this.renderRipple)}
+        <ui-ripple class="ripple" unbounded ?disabled="${this.disabled}"></ui-ripple>
         <div class="icon">${this._icon}</div>
       </div>
     `;
         }
-        renderRipple = () => {
-            const { disabled } = this;
-            return html `<ui-ripple class="ripple" unbounded ?disabled="${disabled}"></ui-ripple>`;
-        };
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _ripple_extraInitializers);
+        }
     };
 })();
 export default CheckboxElement;

package/build/src/md/checkbox/internals/CheckboxElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxElement.js","sourceRoot":"","sources":["../../../../../src/md/checkbox/internals/CheckboxElement.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, SVGTemplateResult, TemplateResult, nothing } from 'lit'\nimport { queryAsync, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { when } from 'lit/directives/when.js'\nimport CheckedElement from './CheckedElement.js'\nimport { check, checkIndeterminate } from '../../icons/Icons.js'\nimport { ripple } from '../../effects/rippleDirective.js'\nimport UiRipple from '../../ripple/internals/ripple.js'\nimport '../../ripple/ui-ripple.js'\n\nexport default class CheckboxElement extends CheckedElement {\n  protected get _icon(): SVGTemplateResult | typeof nothing {\n    const { indeterminate, checked } = this\n    if (indeterminate) {\n      return checkIndeterminate\n    }\n    if (checked) {\n      return check\n    }\n    return nothing\n  }\n\n  @queryAsync('ui-ripple') protected accessor ripple!: Promise<UiRipple | null>\n\n  @state() protected accessor showRipple = false\n\n  protected readonly getRipple = (): Promise<UiRipple | null> => {\n    this.showRipple = true\n    return this.ripple\n  }\n\n  protected override async handleFocus(): Promise<void> {\n    const _ripple = await this.getRipple()\n    _ripple?.beginFocus()\n  }\n\n  protected override async handleBlur(): Promise<void> {\n    const _ripple = await this.getRipple()\n    _ripple?.endFocus()\n  }\n\n  override async handleKeyDown(e: KeyboardEvent): Promise<void> {\n    super.handleKeyDown(e)\n    if (['Space'].includes(e.code)) {\n      const _ripple = await this.getRipple()\n      _ripple?.beginPress()\n    }\n  }\n\n  override async handleKeyUp(e: KeyboardEvent): Promise<void> {\n    super.handleKeyUp(e)\n    if (['Space'].includes(e.code)) {\n      const _ripple = await this.getRipple()\n      _ripple?.endPress()\n    }\n  }\n\n  protected override render(): TemplateResult {\n    const { pressed = false } = this\n    const containerClasses = classMap({\n      surface: true,\n      pressed,\n    })\n    return html`\n      <div class=\"${containerClasses}\" ${ripple(this.getRipple)}>\n        <div class=\"container\"></div>\n        <div class=\"state\"></div>\n        ${when(this.showRipple, this.renderRipple)}\n        <div class=\"icon\">${this._icon}</div>\n      </div>\n    `\n  }\n\n  protected renderRipple = (): TemplateResult => {\n    const { disabled } = this\n    return html`<ui-ripple class=\"ripple\" unbounded ?disabled=\"${disabled}\"></ui-ripple>`\n  }\n}\n"]}
+{"version":3,"file":"CheckboxElement.js","sourceRoot":"","sources":["../../../../../src/md/checkbox/internals/CheckboxElement.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, SVGTemplateResult, TemplateResult, nothing } from 'lit'\nimport { query } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport CheckedElement from './CheckedElement.js'\nimport { check, checkIndeterminate } from '../../icons/Icons.js'\nimport type UiRipple from '../../ripple/internals/ripple.js'\nimport type { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js'\n\nimport '../../ripple/ui-ripple.js'\nimport '@material/web/focus/md-focus-ring.js'\n\nexport default class CheckboxElement extends CheckedElement {\n  protected get _icon(): SVGTemplateResult | typeof nothing {\n    const { indeterminate, checked } = this\n    if (indeterminate) {\n      return checkIndeterminate\n    }\n    if (checked) {\n      return check\n    }\n    return nothing\n  }\n\n  @query('ui-ripple') protected accessor ripple!: UiRipple | null\n\n  protected pressRipple(options: BeginPressConfig): void {\n    const element = this.ripple\n    if (element && !element.isPressed) {\n      element.beginPress(options.positionEvent as PointerEvent)\n    }\n  }\n\n  protected endRipple(): void {\n    this.ripple?.endPress()\n  }\n\n  override beginPress(options: BeginPressConfig): void {\n    super.beginPress(options)\n    this.pressRipple(options)\n  }\n\n  override endPress(config: EndPressConfig): void {\n    super.endPress(config)\n    this.endRipple()\n  }\n\n  override async handleKeyDown(e: KeyboardEvent): Promise<void> {\n    super.handleKeyDown(e)\n    if (['Space'].includes(e.code)) {\n      this.ripple?.beginPress()\n    }\n  }\n\n  override async handleKeyUp(e: KeyboardEvent): Promise<void> {\n    super.handleKeyUp(e)\n    if (['Space'].includes(e.code)) {\n      this.ripple?.endPress()\n    }\n  }\n\n  override handlePointerEnter(e: PointerEvent): void {\n    super.handlePointerEnter(e)\n    if (this.ripple) {\n      this.ripple.beginHover(e)\n    }\n  }\n\n  override handlePointerLeave(e: PointerEvent): void {\n    super.handlePointerLeave(e)\n    if (this.ripple) {\n      this.ripple.endHover()\n    }\n  }\n\n  protected override render(): TemplateResult {\n    const { pressed = false } = this\n    const containerClasses = classMap({\n      surface: true,\n      pressed,\n    })\n    return html`\n      <md-focus-ring part=\"focus-ring\" .control=\"${this as HTMLElement}\"></md-focus-ring>\n      <div class=\"${containerClasses}\">\n        <div class=\"container\"></div>\n        <div class=\"state\"></div>\n        <ui-ripple class=\"ripple\" unbounded ?disabled=\"${this.disabled}\"></ui-ripple>\n        <div class=\"icon\">${this._icon}</div>\n      </div>\n    `\n  }\n}\n"]}

package/build/src/md/checkbox/internals/CheckedElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckedElement.d.ts","sourceRoot":"","sources":["../../../../../src/md/checkbox/internals/CheckedElement.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAA;AAEzE,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAEpC;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,SAAS;;IAGnD,MAAM,CAAC,QAAQ,CAAC,cAAc,QAAO;IAIrC,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAED,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED;;;OAGG;IACH,IACI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAK1B;IAED;;;OAGG;IACyB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAA;IAE7D;;;;;OAKG;IACyB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAA;IAE9D;;;;;;;OAOG;IACyC,QAAQ,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,CAAA;IAEjF;;;;;;;OAOG;IACyC,QAAQ,CAAC,aAAa,EAAE,OAAO,GAAG,SAAS,CAAA;IAEvF;;;OAGG;IACyC,QAAQ,CAAC,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAA;IAElF;;;;;OAKG;IACyC,QAAQ,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,CAAA;IAEjF,SAAS,CAAC,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAkD;;IAuBpF,iBAAiB,IAAI,IAAI;cAWf,OAAO,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAoB1D;;;OAGG;IACH,iBAAiB,IAAI,IAAI;IAKzB;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI;IAOzC,WAAW,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAKhC,QAAQ,CAAC,MAAM,EAAE,cAAc,GAAG,IAAI;IAW/C,SAAS,CAAC,WAAW,IAAI,IAAI;IAI7B,SAAS,CAAC,UAAU,IAAI,IAAI;IAI5B,SAAS,CAAC,WAAW,CAAC,KAAK,UAAQ,GAAG,IAAI;IAQ1C,SAAS,CAAC,gBAAgB,IAAI,IAAI;IAoBzB,YAAY,IAAI,IAAI;IAM7B,SAAS,CAAC,eAAe,IAAI,IAAI;IAOjC,MAAM,IAAI,IAAI;IAWd,SAAS,CAAC,kBAAkB,IAAI,IAAI;IAKpC;;;OAGG;IACH,aAAa,IAAI,OAAO;IAKxB;;;;OAIG;IACH,cAAc,IAAI,OAAO;CAI1B"}
+{"version":3,"file":"CheckedElement.d.ts","sourceRoot":"","sources":["../../../../../src/md/checkbox/internals/CheckedElement.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAA;AAEzE,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAEpC;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,SAAS;;IAGnD,MAAM,CAAC,QAAQ,CAAC,cAAc,QAAO;IAIrC,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAED,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED;;;OAGG;IACH,IACI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAK1B;IAED;;;OAGG;IACyB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAA;IAE7D;;;;;OAKG;IACyB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAA;IAE9D;;;;;;;OAOG;IACyC,QAAQ,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,CAAA;IAEjF;;;;;;;OAOG;IACyC,QAAQ,CAAC,aAAa,EAAE,OAAO,GAAG,SAAS,CAAA;IAEvF;;;OAGG;IACyC,QAAQ,CAAC,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAA;IAElF;;;;;OAKG;IACyC,QAAQ,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,CAAA;IAEjF,SAAS,CAAC,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAkD;;IAwBpF,iBAAiB,IAAI,IAAI;cAWf,OAAO,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAoB1D;;;OAGG;IACH,iBAAiB,IAAI,IAAI;IAKzB;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI;IAOzC,WAAW,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAKhC,QAAQ,CAAC,MAAM,EAAE,cAAc,GAAG,IAAI;IAW/C,SAAS,CAAC,WAAW,IAAI,IAAI;IAI7B,SAAS,CAAC,UAAU,IAAI,IAAI;IAI5B,SAAS,CAAC,WAAW,CAAC,KAAK,UAAQ,GAAG,IAAI;IAQ1C,SAAS,CAAC,gBAAgB,IAAI,IAAI;IAoBzB,YAAY,IAAI,IAAI;IAM7B,SAAS,CAAC,eAAe,IAAI,IAAI;IAOjC,MAAM,IAAI,IAAI;IAWd,SAAS,CAAC,kBAAkB,IAAI,IAAI;IAKpC;;;OAGG;IACH,aAAa,IAAI,OAAO;IAKxB;;;;OAIG;IACH,cAAc,IAAI,OAAO;CAI1B"}

package/build/src/md/checkbox/internals/CheckedElement.js

@@ -133,6 +133,7 @@ let CheckedElement = (() => {
             this.addEventListener('pointerdown', this.handlePointerDown.bind(this));
             this.addEventListener('pointerup', this.handlePointerUp.bind(this));
             this.addEventListener('pointercancel', this.handlePointerCancel.bind(this));
+            this.addEventListener('pointerenter', this.handlePointerEnter.bind(this));
             this.addEventListener('pointerleave', this.handlePointerLeave.bind(this));
             this.addEventListener('contextmenu', this.handleContextMenu.bind(this));
             this.addEventListener('keydown', this.handleKeyDown.bind(this));