lightning-base-components 1.18.6-alpha → 1.18.7-alpha

package/src/lightning/primitiveInputToggle/form-element.slds.css

@@ -1,281 +0,0 @@
-
-/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
-  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
-  @supports (--styling-hooks: '') {
-    /* TODO: Swap with utility classes */
-    :host([data-render-mode="shadow"]) fieldset {
-      border: 0;
-      margin: 0;
-      padding: 0;
-    }
-
-    /* FORM ELEMENT: BASE */
-    :host([data-render-mode="shadow"]) .slds-form-element {
-        position: relative;
-        min-width: 0;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__label {
-        overflow-wrap: break-word;
-        word-wrap: break-word;
-        hyphens: auto;
-        display: inline-block;
-        color: var(--sds-g-color-neutral-base-30, #444444);
-        font-size: var(--sds-g-font-scale-neg-3, 0.75rem);
-        padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
-        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
-        margin-block-end: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__label:empty {
-        margin: 0;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__control {
-        clear: left; /* NOTE: Ideally we want left to be inline-start but browser support is not ready for that value. We need to figure out better RTL support */
-        position: relative;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__icon {
-        display: inline-block;
-        position: relative;
-        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
-        vertical-align: top;
-        line-height: var(--sds-g-font-lineheight-1, 1);
-        z-index: 1;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__icon .slds-button_icon {
-        position: relative;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__help,:host([data-render-mode="shadow"]) 
-    .slds-form-element__helper {
-        font-size: var(--sds-g-font-scale-neg-3, 0.75rem);
-        margin-block-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
-        display: block;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element_edit .slds-form-element__static {
-        width: calc(100% - var(--sds-g-sizing-7, 1.5rem));
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element_readonly {
-        flex-basis: 0%;
-        border-bottom: var(--sds-g-sizing-border-1, 1px) solid var(--sds-g-color-neutral-base-90, #e5e5e5);
-        margin-block-end: 0;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element_readonly .slds-form-element__control {
-        padding-block-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
-        padding-block-end: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element_readonly .slds-form-element__label {
-        margin-block-end: 0;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__legend {
-        font-weight: var(--sds-g-font-weight-7, 700);
-        float: left;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__addon {
-        display: inline-block;
-        margin-block-start: 0;
-        margin-block-end: 0;
-        margin-inline-start: var(--sds-g-spacing-2, 0.5rem);
-        margin-inline-end: var(--sds-g-spacing-2, 0.5rem);
-        align-self: center;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__static {
-        overflow-wrap: break-word;
-        word-wrap: break-word;
-        word-break: break-word;
-        display: inline-block;
-        font-size: var(--sds-g-font-scale-neg-1, 0.875rem);
-        font-weight: var(--sds-g-font-weight-4, 400);
-        color: var(--sds-g-color-neutral-base-10, #181818);
-        width: 100%;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__static.slds-text-longform *:last-child {
-        margin-block-end: 0;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__static:empty {
-        min-height: calc(var(--sds-g-sizing-6, 1.25rem) + 1px);
-        vertical-align: bottom;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element__static--edit {
-        width: calc(100% - var(--sds-g-sizing-7, 1.5rem));
-    }
-
-    :host([data-render-mode="shadow"]) .slds-required {
-        color: var(--sds-g-color-error-base-50, #ea001e);
-        margin-block-start: 0;
-        margin-block-end: 0;
-        margin-inline-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
-        margin-inline-end: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
-    }
-
-    :host([data-render-mode="shadow"]) .slds-has-error .slds-form-element__help {
-        color: var(--sds-g-color-error-base-50, #ea001e);
-    }
-
-    :host([data-render-mode="shadow"][invalid]) .slds-form-element__help {
-        color: var(--sds-g-color-error-base-50, #ea001e);
-    }
-
-    /* --------------------------------------- */
-
-    /* FORM ELEMENT: STACKED */
-
-    :host([data-render-mode="shadow"][variant~='label-stacked']) {
-        display: block;
-    }
-
-    /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
-
-    /* :host([variant~='label-stacked']):not(.slds-form-element_readonly) {
-        margin-block-end: var(--sds-g-spacing-2);
-    }
-
-    :host([variant~='label-stacked']):not(.slds-is-editing) {
-        padding: 0 var(--sds-g-spacing-1);
-    } */
-
-    /* :host([variant~='label-stacked']):not([class*="slds-size"]) {
-          width: 100%;
-          flex-basis: 100%;
-    } */
-
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element {
-        padding: 0;
-        margin-block-end: 0;
-    }
-
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
-        border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
-        padding-inline-start: 0;
-    }
-
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
-        width: 100%;
-        flex-basis: 100%;
-        clear: left;
-    }
-
-    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__icon {
-        float: none;
-        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
-    }
-
-    /* --------------------------------------- */
-
-    /* FORM ELEMENT: INLINE */
-
-    :host([data-render-mode="shadow"][variant~='label-inline']) {
-        display: block;
-    }
-
-    /*
-    we have to combine with slds class here to avoid duplication
-    of this rule in child elements who import this stylesheet
-    in lighting-input this slds class is synonymous with the variant
-    */
-
-    :host([data-render-mode="shadow"][variant~='label-inline'].slds-form-element_horizontal) {
-        padding: var(--sds-g-spacing-1, 0.25rem);
-        margin-block-end: var(--sds-g-spacing-2, 0.5rem);
-    }
-
-    /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
-
-    /* :host([variant~='label-inline']):not(.slds-form-element_readonly) {
-        margin-block-end: var(--sds-g-spacing-2);
-    }
-
-    :host([variant~='label-inline']):not([class*="slds-size"]) {
-        width: 100%;
-        flex-basis: 100%;
-    }
-
-    :host([variant~='label-inline']:not(.slds-is-editing)) {
-        padding: var(--sds-g-spacing-1);
-    } */
-
-    :host([data-render-mode="shadow"][variant~='label-inline']).slds-is-edited {
-        padding-block-start: var(--sds-g-sizing-6, 1.25rem)
-    }
-
-    @media (min-width: 48em) {
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__label {
-          float: left;
-          max-width: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Removing icon width for when the help-text icon is present */
-          flex-basis: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Some form element controls are set to display:flex */
-          flex-grow: 1; /* For IE and Safari which didn't auto expand to the available space */
-          margin-block-end: 0;
-          position: relative;
-          z-index: 1;
-        }
-
-        :host([data-render-mode="shadow"][variant~='label-inline']) lightning-helptext {
-          float: left;
-        }
-
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control {
-          margin-inline-start: 33%;
-          clear: none; /* Reset clear: left when switching to horizontal form layout */
-        }
-
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control .slds-form-element__control {
-          padding-inline-start: 0; /* Remove left padding on nested form controls, due to issues related to lightning-form components */
-        }
-
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list__column .slds-form-element__label {
-            width: auto;
-            max-width: 100%;
-            -ms-flex-preferred-size: auto;
-            flex-basis: auto;
-            float: none;
-            position: relative;
-            padding-inline-start: 0;
-            margin-block-end: 0;
-        }
-
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__help {
-          margin-inline-start: 33%;
-        }
-
-        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list {
-            clear: none;
-        }
-    }
-
-    /* --------------------------------------- */
-
-    /* FORM ELEMENT: COMPOUND */
-
-    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element__row {
-      display: flex;
-      margin-bottom: var(--sds-g-spacing-1, 0.25rem);
-      margin-left: calc(var(--sds-g-spacing-1, 0.25rem) * -1);
-      margin-right: calc(var(--sds-g-spacing-1, 0.25rem) * -1);
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element__row .slds-form-element__label {
-      padding-top: 0;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element {
-      padding-left: var(--sds-g-spacing-1, 0.25rem);
-      padding-right: var(--sds-g-spacing-1, 0.25rem);
-    }
-
-    :host([data-render-mode="shadow"]) .slds-form-element_address .slds-form-element__row {
-      align-items: flex-end;
-    }
-}

package/src/lightning/primitiveInputToggle/input-toggle.slds.css

@@ -1,170 +0,0 @@
-
-/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
-Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
-
-
-/* note that we disable the styling hooks pattern due to naming mismatch
-/* between slds "checkbox-toggle" and lbc "input-toggle" */
-
-
-/* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-
-
-@supports (--styling-hooks: '') {
-
-    :host([data-render-mode="shadow"]) [part~='checkbox-toggle'] {
-      width: 100%;
-      display: flex
-    }
-  
-    /* Container for text to show when checkbox is toggle off */
-    :host([data-render-mode="shadow"]) .slds-checkbox_off {
-      display: block;
-    }
-  
-    /* Container for text to show when checkbox is toggle on */
-    :host([data-render-mode="shadow"]) .slds-checkbox_on {
-      display: none;
-    }
-
-    :host([data-render-mode="shadow"]) .slds-checkbox_faux_container {
-        font-size: var(--sds-g-font-scale-neg-4, 0.625rem);
-        color: var(--slds-g-color-neutral-base-30);
-    }
-  
-    :host([data-render-mode="shadow"]) [part~='indicator']{
-      display: block;
-      position: relative;
-      width: var(--sds-g-sizing-10, 3rem);
-      height: var(--sds-g-sizing-7, 1.5rem);
-      border-width: var(--sds-g-sizing-border-1, 1px);
-      border-style: solid;
-      border-color: var(--slds-c-checkbox-toggle-color-border, var(--sds-g-color-neutral-base-70, #aeaeae));
-      padding: var(--sds-g-sizing-1, 0.125rem);
-      background-color: var(--slds-c-checkbox-toggle-color-background, var(--sds-g-color-neutral-base-70, #aeaeae));
-      border-radius: var(--slds-c-checkbox-toggle-radius-border, 15rem);
-      box-shadow: var(--slds-c-checkbox-toggle-shadow);
-      transition: background-color 0.2s cubic-bezier(0.75, 0, 0.08, 1);
-    }
-  
-    :host([data-render-mode="shadow"]) [part~='indicator']:hover,:host([data-render-mode="shadow"]) 
-    [part~='indicator']:focus {
-      --slds-c-checkbox-toggle-color-background: var(--slds-c-checkbox-toggle-color-background-hover, var(--slds-g-color-neutral-base-50, var(--sds-g-color-neutral-base-60, #939393)));
-      --slds-c-checkbox-toggle-color-border: var(--slds-c-checkbox-toggle-color-border-hover);
-
-      cursor: pointer;
-    }
-  
-    :host([data-render-mode="shadow"]) [part~='indicator']::after {
-      content: '';
-      position: absolute;
-      top: 1px;
-      left: 1px;
-      width: var(--sds-g-sizing-6, 1.25rem);
-      height: var(--sds-g-sizing-6, 1.25rem);
-      background-color: var(--slds-c-checkbox-toggle-switch-color-background, var(--sds-g-color-neutral-base-100, #ffffff));
-      border-radius: var(--slds-c-checkbox-toggle-radius-border, 15rem);
-    }
-  
-    :host([data-render-mode="shadow"]) [part~='checkbox'] {
-      height: 1px;
-      width: 1px;
-      border: 0;
-      clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 0%);
-      margin: -1px;
-      overflow: hidden;
-      padding: 0;
-      position: absolute;
-    }
-
-    :host([data-render-mode="shadow"]) [part~='checkbox']:checked:focus + .slds-checkbox_faux_container > [part~='indicator']  {
-        --slds-c-checkbox-toggle-color-background: var(--sds-g-color-brand-base-30, #014486);
-    }
-
-    :host([data-render-mode="shadow"]) [part~='checkbox']:checked + .slds-checkbox_faux_container .slds-checkbox_off {
-        display: none;
-    }
-
-    :host([data-render-mode="shadow"]) [part~='checkbox']:checked + .slds-checkbox_faux_container .slds-checkbox_on {
-        display: block;
-    }
-
-    :host([data-render-mode="shadow"]) [part~='checkbox']:checked + .slds-checkbox_faux_container > [part~='indicator'] {
-        --slds-c-checkbox-toggle-color-border: var(--sds-g-color-brand-base-50, #0176d3);
-        --slds-c-checkbox-toggle-color-background: var(--sds-g-color-brand-base-50, #0176d3);
-    }
-
-    :host([data-render-mode="shadow"]) [part~='checkbox']:checked + .slds-checkbox_faux_container > [part~='indicator']:hover,:host([data-render-mode="shadow"]) 
-    [part~='checkbox']:checked + .slds-checkbox_faux_container > [part~='indicator']:focus {
-        --slds-c-checkbox-toggle-color-background: var(--sds-g-color-brand-base-30, #014486);
-    }
-
-    :host([data-render-mode="shadow"]) [part~='checkbox']:checked + .slds-checkbox_faux_container > [part~='indicator']::before {
-        content: '';
-        position: absolute;
-        top: 1px;
-        right: 1px;
-        width: var(--sds-g-sizing-6, 1.25rem);
-        height: var(--sds-g-sizing-6, 1.25rem);
-        background-color: var(--slds-c-checkbox-toggle-switch-color-background-checked, var(--slds-c-checkbox-toggle-switch-color-background, var(--sds-g-color-neutral-base-100, #ffffff)));
-        border-radius: var(--slds-c-checkbox-toggle-radius-border, 15rem);
-        transition: transform 0.2s cubic-bezier(0.75, 0, 0.08, 1);
-    }
-
-    :host([data-render-mode="shadow"]) [part~='checkbox']:checked + .slds-checkbox_faux_container > [part~='indicator']::after {
-        --slds-c-checkbox-toggle-switch-color-background: transparent;
-        --slds-c-checkbox-toggle-radius-border: 0;
-
-        content: ' ';
-        position: absolute;
-        top: 0.25rem; 
-        left: 0.6rem;
-        height: 0.7rem;
-        width: 0.45rem;
-        border-bottom-width: var(--sds-g-sizing-border-2, 2px);
-        border-bottom-style: solid;
-        border-bottom-color: var(--slds-c-checkbox-toggle-mark-color-foreground, var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff)));
-        border-right-width: var(--sds-g-sizing-border-2, 2px);
-        border-right-style: solid;
-        border-right-color: var(--slds-c-checkbox-toggle-mark-color-foreground, var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff)));
-        transform: rotate(45deg);
-    }
-
-    :host([data-render-mode="shadow"]) [part~='checkbox'][disabled] + .slds-checkbox_faux_container > [part~='indicator'] {
-        background-color: var(--slds-g-color-neutral-base-80, var(--sds-g-color-neutral-base-70, #aeaeae));
-        border-color: var(--slds-g-color-neutral-base-80, var(--sds-g-color-neutral-base-70, #aeaeae));
-        pointer-events: none;
-    }
-
-    :host([data-render-mode="shadow"]) [part~='checkbox'][disabled] + .slds-checkbox_faux_container > [part~='indicator']::after {
-        background-color: var(--slds-g-color-neutral-base-80, var(--sds-g-color-neutral-base-80, #c9c9c9));
-    }
-
-    :host([data-render-mode="shadow"]) [part~='checkbox'][disabled] + .slds-checkbox_faux_container > [part~='indicator']:hover,:host([data-render-mode="shadow"]) 
-    [part~='checkbox'][disabled] + .slds-checkbox_faux_container > [part~='indicator']:focus {
-        background-color: var(--slds-g-color-neutral-base-80, var(--sds-g-color-neutral-base-70, #aeaeae));
-        cursor: default;
-    }
-
-    :host([data-render-mode="shadow"]) [part~='checkbox'][disabled]:checked + .slds-checkbox_faux_container > [part~='indicator']::before {
-        background-color: var(--slds-g-color-neutral-base-90, var(--sds-g-color-neutral-base-80, #c9c9c9));
-    }
-
-    :host([data-render-mode="shadow"]) [part~='checkbox'][disabled]:checked + .slds-checkbox_faux_container > [part~='indicator']::after {
-        background-color: transparent;
-    }
-  
-    /* ASSISTIVE TEXT */
-    :host([data-render-mode="shadow"]) .slds-assistive-text {
-      position: absolute !important;
-      margin: -1px !important;
-      border: 0 !important;
-      padding: 0 !important;
-      width: 1px !important;
-      height: 1px !important;
-      overflow: hidden !important;
-      clip: rect(0 0 0 0) !important;
-      text-transform: none !important;
-      white-space: nowrap !important;
-    }
-  }

package/src/lightning/primitiveInputToggle/primitiveInputToggle.css

@@ -1,3 +0,0 @@
-@import 'lightning/sldsCommon';
-@import './form-element.slds.css';
-@import './input-toggle.slds.css';

package/src/lightning/primitiveInputToggle/primitiveInputToggle.html

@@ -1,34 +0,0 @@
-<template>
-    <div class="slds-form-element__control">
-        <label class="slds-checkbox_toggle slds-grid" for="checkbox-toggle" part="checkbox-toggle">
-            <template if:true={required}>
-                <abbr class="slds-required" title={labelRequired}>*</abbr>
-            </template>
-            <span class={computedLabelClass}>{label}</span>
-            <input
-                type="checkbox"
-                id="checkbox-toggle"
-                part="checkbox"
-                accesskey={accessKey}
-                aria-label={ariaLabel}
-                aria-invalid={ariaInvalid}
-                disabled={disabled}
-                name={name}
-                onblur={handleBlur}
-                onchange={handleChange}
-                onfocus={handleFocus}
-                onclick={handleClick}
-                readonly={readOnly}
-                required={required}
-            >
-            <span id="toggle-description" data-toggle-description  class="slds-checkbox_faux_container" aria-live="assertive">
-                <span class="slds-checkbox_faux" part="indicator"></span>
-                <span class="slds-checkbox_on">{messageToggleActive}</span>
-                <span class="slds-checkbox_off">{messageToggleInactive}</span>
-            </span>
-        </label>
-    </div>
-    <template if:true={_helpMessage}>
-        <div id="help-message" class="slds-form-element__help" data-help-message role="alert" part="help-text">{_helpMessage}</div>
-    </template>
-</template>

package/src/lightning/primitiveInputToggle/primitiveInputToggle.js

@@ -1,164 +0,0 @@
-import { api } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
-import {
-    isNativeComponent,
-    normalizeAriaAttribute,
-    reflectAttribute,
-} from 'lightning/utilsPrivate';
-import { VARIANT } from 'lightning/inputUtils';
-import labelRequired from '@salesforce/label/LightningControl.required';
-
-const i18n = {
-    required: labelRequired,
-};
-
-export default class LightningPrimitiveInputToggle extends LightningShadowBaseClass {
-    _checked;
-    _value = '';
-    _ariaLabel;
-    _cachedInputElement;
-    _helpMessage = '';
-    _messageToggleActive;
-    _messageToggleInactive;
-
-    initialRender = false;
-
-    @api accessKey;
-    @api disabled;
-    @api label;
-    @api variant;
-    @api name;
-    @api readOnly;
-    @api required;
-    @api ariaInvalid;
-
-    /**
-     * Text shown for the active state of a toggle. The default is "Active".
-     * @type {string}
-     */
-    @api messageToggleActive;
-
-    /**
-     * Text shown for the inactive state of a toggle. The default is "Inactive".
-     * @type {string}
-     */
-    @api messageToggleInactive;
-
-    @api
-    get value() {
-        return this._value;
-    }
-    set value(newValue) {
-        // value can only be a string
-        this._value =
-            typeof newValue === 'number' || typeof newValue === 'string'
-                ? String(newValue)
-                : '';
-    }
-
-    @api
-    get checked() {
-        if (this.initialRender) {
-            return this.inputElement.checked;
-        }
-        return this._checked;
-    }
-    set checked(value) {
-        value = Boolean(value);
-        this._checked = value;
-        if (this.initialRender) {
-            this.inputElement.checked = this._checked;
-        }
-    }
-
-    @api
-    get ariaDescribedByElements() {
-        return [
-            this.template.querySelector('[data-help-message]'),
-            this.template.querySelector('data-toggle-description'),
-        ];
-    }
-
-    @api
-    get isNativeShadow() {
-        return this._isNativeShadow;
-    }
-
-    @api
-    get ariaLabel() {
-        return this._ariaLabel;
-    }
-    set ariaLabel(value) {
-        this._ariaLabel = normalizeAriaAttribute(value);
-    }
-
-    @api
-    get inputElement() {
-        // cache the input in order to reduce dom queries
-        if (!this._cachedInputElement) {
-            let inputElement = this.template.querySelector('input');
-            this._cachedInputElement = inputElement;
-        }
-        return this._cachedInputElement;
-    }
-
-    @api
-    get helpMessage() {
-        return this._helpMessage;
-    }
-    set helpMessage(message) {
-        this._helpMessage = message;
-        reflectAttribute(this, 'invalid', Boolean(message));
-    }
-
-    get computedLabelClass() {
-        return this.variant === VARIANT.LABEL_HIDDEN
-            ? 'slds-form-element__label slds-assistive-text'
-            : 'slds-form-element__label';
-    }
-
-    get i18n() {
-        return i18n;
-    }
-
-    handleBlur() {
-        this.dispatchEvent(new CustomEvent('blur'));
-    }
-
-    handleFocus() {
-        this.dispatchEvent(new CustomEvent('focus'));
-    }
-
-    handleChange(event) {
-        this._checked = event.target.checked;
-        const changeEvent = new CustomEvent('change', {
-            detail: {
-                checked: event.target.checked,
-            },
-        });
-        this.dispatchEvent(changeEvent);
-    }
-
-    handleClick() {
-        if (this.template.activeElement === null) {
-            this.template.querySelector("[type='checkbox']").focus();
-        }
-    }
-
-    connectedCallback() {
-        super.connectedCallback();
-        this._isNativeShadow = isNativeComponent(this);
-    }
-
-    renderedCallback() {
-        if (!this.initialRender) {
-            this.inputElement.checked = this.checked;
-            this.inputElement.value = this._value;
-            this.initialRender = true;
-        }
-    }
-
-    disconnectedCallback() {
-        this._cachedInputElement = undefined;
-    }
-}