@carbon/web-components 2.10.0 → 2.11.0-rc.1

package/es/components/toggle/toggle.d.ts

@@ -37,11 +37,11 @@ declare const CDSToggle_base: {
         click(): void;
         hidePopover(): void;
         showPopover(): void;
-        togglePopover(force?: boolean | undefined): boolean;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
-        removeEventListener<K_1 extends keyof HTMLElementEventMap>(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
+        togglePopover(force?: boolean): boolean;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
         readonly attributes: NamedNodeMap;
         readonly classList: DOMTokenList;
         className: string;
@@ -66,10 +66,10 @@ declare const CDSToggle_base: {
         slot: string;
         readonly tagName: string;
         attachShadow(init: ShadowRootInit): ShadowRoot;
-        checkVisibility(options?: CheckVisibilityOptions | undefined): boolean;
-        closest<K_2 extends keyof HTMLElementTagNameMap>(selector: K_2): HTMLElementTagNameMap[K_2] | null;
-        closest<K_3 extends keyof SVGElementTagNameMap>(selector: K_3): SVGElementTagNameMap[K_3] | null;
-        closest<K_4 extends keyof MathMLElementTagNameMap>(selector: K_4): MathMLElementTagNameMap[K_4] | null;
+        checkVisibility(options?: CheckVisibilityOptions): boolean;
+        closest<K extends keyof HTMLElementTagNameMap>(selector: K): HTMLElementTagNameMap[K] | null;
+        closest<K extends keyof SVGElementTagNameMap>(selector: K): SVGElementTagNameMap[K] | null;
+        closest<K extends keyof MathMLElementTagNameMap>(selector: K): MathMLElementTagNameMap[K] | null;
         closest<E extends Element = Element>(selectors: string): E | null;
         computedStyleMap(): StylePropertyMapReadOnly;
         getAttribute(qualifiedName: string): string | null;
@@ -80,10 +80,10 @@ declare const CDSToggle_base: {
         getBoundingClientRect(): DOMRect;
         getClientRects(): DOMRectList;
         getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;
-        getElementsByTagName<K_5 extends keyof HTMLElementTagNameMap>(qualifiedName: K_5): HTMLCollectionOf<HTMLElementTagNameMap[K_5]>;
-        getElementsByTagName<K_6 extends keyof SVGElementTagNameMap>(qualifiedName: K_6): HTMLCollectionOf<SVGElementTagNameMap[K_6]>;
-        getElementsByTagName<K_7 extends keyof MathMLElementTagNameMap>(qualifiedName: K_7): HTMLCollectionOf<MathMLElementTagNameMap[K_7]>;
-        getElementsByTagName<K_8 extends keyof HTMLElementDeprecatedTagNameMap>(qualifiedName: K_8): HTMLCollectionOf<HTMLElementDeprecatedTagNameMap[K_8]>;
+        getElementsByTagName<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
+        getElementsByTagName<K extends keyof SVGElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<SVGElementTagNameMap[K]>;
+        getElementsByTagName<K extends keyof MathMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<MathMLElementTagNameMap[K]>;
+        getElementsByTagName<K extends keyof HTMLElementDeprecatedTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementDeprecatedTagNameMap[K]>;
         getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>;
         getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>;
         getElementsByTagNameNS(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>;
@@ -101,21 +101,22 @@ declare const CDSToggle_base: {
         removeAttribute(qualifiedName: string): void;
         removeAttributeNS(namespace: string | null, localName: string): void;
         removeAttributeNode(attr: Attr): Attr;
-        requestFullscreen(options?: FullscreenOptions | undefined): Promise<void>;
+        requestFullscreen(options?: FullscreenOptions): Promise<void>;
         requestPointerLock(): void;
-        scroll(options?: ScrollToOptions | undefined): void;
+        scroll(options?: ScrollToOptions): void;
         scroll(x: number, y: number): void;
-        scrollBy(options?: ScrollToOptions | undefined): void;
+        scrollBy(options?: ScrollToOptions): void;
         scrollBy(x: number, y: number): void;
-        scrollIntoView(arg?: boolean | ScrollIntoViewOptions | undefined): void;
-        scrollTo(options?: ScrollToOptions | undefined): void;
+        scrollIntoView(arg?: boolean | ScrollIntoViewOptions): void;
+        scrollTo(options?: ScrollToOptions): void;
         scrollTo(x: number, y: number): void;
         setAttribute(qualifiedName: string, value: string): void;
         setAttributeNS(namespace: string | null, qualifiedName: string, value: string): void;
         setAttributeNode(attr: Attr): Attr | null;
         setAttributeNodeNS(attr: Attr): Attr | null;
+        setHTMLUnsafe(html: string): void;
         setPointerCapture(pointerId: number): void;
-        toggleAttribute(qualifiedName: string, force?: boolean | undefined): boolean;
+        toggleAttribute(qualifiedName: string, force?: boolean): boolean;
         webkitMatchesSelector(selectors: string): boolean;
         readonly baseURI: string;
         readonly childNodes: NodeListOf<ChildNode>;
@@ -131,20 +132,20 @@ declare const CDSToggle_base: {
         readonly previousSibling: ChildNode | null;
         textContent: string | null;
         appendChild<T extends Node>(node: T): T;
-        cloneNode(deep?: boolean | undefined): Node;
+        cloneNode(deep?: boolean): Node;
         compareDocumentPosition(other: Node): number;
         contains(other: Node | null): boolean;
-        getRootNode(options?: GetRootNodeOptions | undefined): Node;
+        getRootNode(options?: GetRootNodeOptions): Node;
         hasChildNodes(): boolean;
-        insertBefore<T_1 extends Node>(node: T_1, child: Node | null): T_1;
+        insertBefore<T extends Node>(node: T, child: Node | null): T;
         isDefaultNamespace(namespace: string | null): boolean;
         isEqualNode(otherNode: Node | null): boolean;
         isSameNode(otherNode: Node | null): boolean;
         lookupNamespaceURI(prefix: string | null): string | null;
         lookupPrefix(namespace: string | null): string | null;
         normalize(): void;
-        removeChild<T_2 extends Node>(child: T_2): T_2;
-        replaceChild<T_3 extends Node>(node: Node, child: T_3): T_3;
+        removeChild<T extends Node>(child: T): T;
+        replaceChild<T extends Node>(node: Node, child: T): T;
         readonly ELEMENT_NODE: 1;
         readonly ATTRIBUTE_NODE: 2;
         readonly TEXT_NODE: 3;
@@ -166,6 +167,8 @@ declare const CDSToggle_base: {
         dispatchEvent(event: Event): boolean;
         ariaAtomic: string | null;
         ariaAutoComplete: string | null;
+        ariaBrailleLabel: string | null;
+        ariaBrailleRoleDescription: string | null;
         ariaBusy: string | null;
         ariaChecked: string | null;
         ariaColCount: string | null;
@@ -203,12 +206,12 @@ declare const CDSToggle_base: {
         ariaValueNow: string | null;
         ariaValueText: string | null;
         role: string | null;
-        animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions | undefined): Animation;
-        getAnimations(options?: GetAnimationsOptions | undefined): Animation[];
-        after(...nodes: (string | Node)[]): void;
-        before(...nodes: (string | Node)[]): void;
+        animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions): Animation;
+        getAnimations(options?: GetAnimationsOptions): Animation[];
+        after(...nodes: (Node | string)[]): void;
+        before(...nodes: (Node | string)[]): void;
         remove(): void;
-        replaceWith(...nodes: (string | Node)[]): void;
+        replaceWith(...nodes: (Node | string)[]): void;
         innerHTML: string;
         readonly nextElementSibling: Element | null;
         readonly previousElementSibling: Element | null;
@@ -216,19 +219,19 @@ declare const CDSToggle_base: {
         readonly children: HTMLCollection;
         readonly firstElementChild: Element | null;
         readonly lastElementChild: Element | null;
-        append(...nodes: (string | Node)[]): void;
-        prepend(...nodes: (string | Node)[]): void;
-        querySelector<K_9 extends keyof HTMLElementTagNameMap>(selectors: K_9): HTMLElementTagNameMap[K_9] | null;
-        querySelector<K_10 extends keyof SVGElementTagNameMap>(selectors: K_10): SVGElementTagNameMap[K_10] | null;
-        querySelector<K_11 extends keyof MathMLElementTagNameMap>(selectors: K_11): MathMLElementTagNameMap[K_11] | null;
-        querySelector<K_12 extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K_12): HTMLElementDeprecatedTagNameMap[K_12] | null;
-        querySelector<E_1 extends Element = Element>(selectors: string): E_1 | null;
-        querySelectorAll<K_13 extends keyof HTMLElementTagNameMap>(selectors: K_13): NodeListOf<HTMLElementTagNameMap[K_13]>;
-        querySelectorAll<K_14 extends keyof SVGElementTagNameMap>(selectors: K_14): NodeListOf<SVGElementTagNameMap[K_14]>;
-        querySelectorAll<K_15 extends keyof MathMLElementTagNameMap>(selectors: K_15): NodeListOf<MathMLElementTagNameMap[K_15]>;
-        querySelectorAll<K_16 extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K_16): NodeListOf<HTMLElementDeprecatedTagNameMap[K_16]>;
-        querySelectorAll<E_2 extends Element = Element>(selectors: string): NodeListOf<E_2>;
-        replaceChildren(...nodes: (string | Node)[]): void;
+        append(...nodes: (Node | string)[]): void;
+        prepend(...nodes: (Node | string)[]): void;
+        querySelector<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;
+        querySelector<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] | null;
+        querySelector<K extends keyof MathMLElementTagNameMap>(selectors: K): MathMLElementTagNameMap[K] | null;
+        querySelector<K extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K): HTMLElementDeprecatedTagNameMap[K] | null;
+        querySelector<E extends Element = Element>(selectors: string): E | null;
+        querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
+        querySelectorAll<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
+        querySelectorAll<K extends keyof MathMLElementTagNameMap>(selectors: K): NodeListOf<MathMLElementTagNameMap[K]>;
+        querySelectorAll<K extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K): NodeListOf<HTMLElementDeprecatedTagNameMap[K]>;
+        querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;
+        replaceChildren(...nodes: (Node | string)[]): void;
         readonly assignedSlot: HTMLSlotElement | null;
         readonly attributeStyleMap: StylePropertyMap;
         readonly style: CSSStyleDeclaration;
@@ -299,7 +302,7 @@ declare const CDSToggle_base: {
         onpointerout: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
         onpointerover: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
         onpointerup: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-        onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent<EventTarget>) => any) | null;
+        onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent) => any) | null;
         onratechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onreset: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
@@ -334,20 +337,18 @@ declare const CDSToggle_base: {
         onwheel: ((this: GlobalEventHandlers, ev: WheelEvent) => any) | null;
         autofocus: boolean;
         readonly dataset: DOMStringMap;
-        nonce?: string | undefined;
+        nonce?: string;
         tabIndex: number;
         blur(): void;
-        focus(options?: FocusOptions | undefined): void;
+        focus(options?: FocusOptions): void;
     };
     _hostListeners: {
         [listenerName: string]: {
             [type: string]: {
-                options?: boolean | AddEventListenerOptions | undefined;
+                options?: boolean | AddEventListenerOptions;
             };
         };
-    }; /**
-     * The text for the unchecked state.
-     */
+    };
 } & typeof CDSCheckbox;
 /**
  * Basic toggle.

package/es/components/toggle/toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","names":["classMap","html","property","query","ifDefined","prefix","CDSCheckbox","TOGGLE_SIZE","styles","HostListener","HostListenerMixin","carbonElement","customElement","CDSToggle","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","decorators","key","value","_handleChange","checked","indeterminate","_checkboxNode","disabled","readOnly","eventChange","dispatchEvent","CustomEvent","bubbles","composed","detail","event","_renderCheckmark","size","SMALL","undefined","_t","_","attribute","reflect","type","Boolean","REGULAR","render","labelText","hideLabel","id","name","labelA","labelB","handleChange","inputClasses","toggleClasses","stateText","_t2","static"],"sources":["components/toggle/toggle.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { prefix } from '../../globals/settings';\nimport CDSCheckbox from '../checkbox/checkbox';\nimport { TOGGLE_SIZE } from './defs';\nimport styles from './toggle.scss';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { TOGGLE_SIZE };\n\n/**\n * Basic toggle.\n *\n * @element cds-toggle\n * @slot label-text - The label text.\n * @slot checked-text - The text for the checked state.\n * @slot unchecked-text - The text for the unchecked state.\n * @fires cds-toggle-changed - The custom event fired after this changebox changes its checked state.\n */\n@customElement(`${prefix}-toggle`)\nclass CDSToggle extends HostListenerMixin(CDSCheckbox) {\n  @query('button')\n  protected _checkboxNode!: HTMLInputElement;\n\n  /**\n   * Handles `click` event on the `<button>` in the shadow DOM.\n   */\n  protected _handleChange() {\n    const { checked, indeterminate } = this._checkboxNode;\n    if (this.disabled || this.readOnly) {\n      return;\n    }\n    this.checked = !checked;\n    this.indeterminate = indeterminate;\n    const { eventChange } = this.constructor as typeof CDSCheckbox;\n    this.dispatchEvent(\n      new CustomEvent(eventChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          indeterminate,\n        },\n      })\n    );\n  }\n\n  /**\n   * Handles `keydown` event on the toggle button.\n   */\n  @HostListener('keydown')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  protected _handleKeydown = async (event: KeyboardEvent) => {\n    const { key } = event;\n\n    if (key === ' ') {\n      this._handleChange();\n    }\n  };\n\n  protected _renderCheckmark() {\n    if (this.size !== TOGGLE_SIZE.SMALL) {\n      return undefined;\n    }\n    return html`\n      <svg\n        class=\"${prefix}--toggle__check\"\n        width=\"6px\"\n        height=\"5px\"\n        viewBox=\"0 0 6 5\">\n        <path d=\"M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z\" />\n      </svg>\n    `;\n  }\n\n  /**\n   * The text for the checked state.\n   */\n  @property({ attribute: 'label-a' })\n  labelA = '';\n\n  /**\n   * Hide label text.\n   */\n  @property({ reflect: true, type: Boolean })\n  hideLabel = false;\n\n  /**\n   * Read only boolean.\n   */\n  @property({ reflect: true, attribute: 'read-only', type: Boolean })\n  readOnly = false;\n\n  /**\n   * Toggle size.\n   */\n  @property({ reflect: true })\n  size = TOGGLE_SIZE.REGULAR;\n\n  /**\n   * The text for the unchecked state.\n   */\n  @property({ attribute: 'label-b' })\n  labelB = '';\n\n  render() {\n    const {\n      checked,\n      disabled,\n      labelText,\n      hideLabel,\n      id,\n      name,\n      size,\n      labelA,\n      labelB,\n      value,\n      _handleChange: handleChange,\n    } = this;\n    const inputClasses = classMap({\n      [`${prefix}--toggle__appearance`]: true,\n      [`${prefix}--toggle__appearance--${size}`]: size,\n    });\n    const toggleClasses = classMap({\n      [`${prefix}--toggle__switch`]: true,\n      [`${prefix}--toggle__switch--checked`]: checked,\n    });\n    const stateText = checked ? labelA : labelB;\n    return html`\n      <button\n        class=\"${prefix}--toggle__button\"\n        role=\"switch\"\n        type=\"button\"\n        aria-checked=${checked}\n        aria-lable=${labelText}\n        .checked=\"${checked}\"\n        name=\"${ifDefined(name)}\"\n        value=\"${ifDefined(value)}\"\n        ?disabled=${disabled}\n        id=\"${id}\"></button>\n      <label for=\"${id}\" class=\"${prefix}--toggle__label\">\n        <span class=\"${prefix}--toggle__label-text\">${labelText}</span>\n        <div class=\"${inputClasses}\">\n          <div class=\"${toggleClasses}\" @click=${handleChange}>\n            ${this._renderCheckmark()}\n          </div>\n          <span\n            ?hidden=\"${hideLabel}\"\n            class=\"${prefix}--toggle__text\"\n            aria-hidden=\"true\"\n            >${stateText}</span\n          >\n        </div>\n      </label>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired after this changebox changes its checked state.\n   */\n  static get eventChange() {\n    return `${prefix}-toggle-changed`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSToggle;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"toggle.js","names":["classMap","html","property","query","ifDefined","prefix","CDSCheckbox","TOGGLE_SIZE","styles","HostListener","HostListenerMixin","carbonElement","customElement","CDSToggle","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","decorators","key","value","_handleChange","checked","indeterminate","_checkboxNode","disabled","readOnly","eventChange","dispatchEvent","CustomEvent","bubbles","composed","detail","event","_renderCheckmark","size","SMALL","undefined","_t","_","attribute","reflect","type","Boolean","REGULAR","render","labelText","hideLabel","id","name","labelA","labelB","handleChange","inputClasses","toggleClasses","stateText","_t2","static"],"sources":["components/toggle/toggle.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { prefix } from '../../globals/settings';\nimport CDSCheckbox from '../checkbox/checkbox';\nimport { TOGGLE_SIZE } from './defs';\nimport styles from './toggle.scss';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { TOGGLE_SIZE };\n\n/**\n * Basic toggle.\n *\n * @element cds-toggle\n * @slot label-text - The label text.\n * @slot checked-text - The text for the checked state.\n * @slot unchecked-text - The text for the unchecked state.\n * @fires cds-toggle-changed - The custom event fired after this changebox changes its checked state.\n */\n@customElement(`${prefix}-toggle`)\nclass CDSToggle extends HostListenerMixin(CDSCheckbox) {\n  @query('button')\n  protected _checkboxNode!: HTMLInputElement;\n\n  /**\n   * Handles `click` event on the `<button>` in the shadow DOM.\n   */\n  protected _handleChange() {\n    const { checked, indeterminate } = this._checkboxNode;\n    if (this.disabled || this.readOnly) {\n      return;\n    }\n    this.checked = !checked;\n    this.indeterminate = indeterminate;\n    const { eventChange } = this.constructor as typeof CDSCheckbox;\n    this.dispatchEvent(\n      new CustomEvent(eventChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          indeterminate,\n        },\n      })\n    );\n  }\n\n  /**\n   * Handles `keydown` event on the toggle button.\n   */\n  @HostListener('keydown')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  protected _handleKeydown = async (event: KeyboardEvent) => {\n    const { key } = event;\n\n    if (key === ' ') {\n      this._handleChange();\n    }\n  };\n\n  protected _renderCheckmark() {\n    if (this.size !== TOGGLE_SIZE.SMALL) {\n      return undefined;\n    }\n    return html`\n      <svg\n        class=\"${prefix}--toggle__check\"\n        width=\"6px\"\n        height=\"5px\"\n        viewBox=\"0 0 6 5\">\n        <path d=\"M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z\" />\n      </svg>\n    `;\n  }\n\n  /**\n   * The text for the checked state.\n   */\n  @property({ attribute: 'label-a' })\n  labelA = '';\n\n  /**\n   * Hide label text.\n   */\n  @property({ reflect: true, type: Boolean })\n  hideLabel = false;\n\n  /**\n   * Read only boolean.\n   */\n  @property({ reflect: true, attribute: 'read-only', type: Boolean })\n  readOnly = false;\n\n  /**\n   * Toggle size.\n   */\n  @property({ reflect: true })\n  size = TOGGLE_SIZE.REGULAR;\n\n  /**\n   * The text for the unchecked state.\n   */\n  @property({ attribute: 'label-b' })\n  labelB = '';\n\n  render() {\n    const {\n      checked,\n      disabled,\n      labelText,\n      hideLabel,\n      id,\n      name,\n      size,\n      labelA,\n      labelB,\n      value,\n      _handleChange: handleChange,\n    } = this;\n    const inputClasses = classMap({\n      [`${prefix}--toggle__appearance`]: true,\n      [`${prefix}--toggle__appearance--${size}`]: size,\n    });\n    const toggleClasses = classMap({\n      [`${prefix}--toggle__switch`]: true,\n      [`${prefix}--toggle__switch--checked`]: checked,\n    });\n    const stateText = checked ? labelA : labelB;\n    return html`\n      <button\n        class=\"${prefix}--toggle__button\"\n        role=\"switch\"\n        type=\"button\"\n        aria-checked=${checked}\n        aria-lable=${labelText}\n        .checked=\"${checked}\"\n        name=\"${ifDefined(name)}\"\n        value=\"${ifDefined(value)}\"\n        ?disabled=${disabled}\n        id=\"${id}\"></button>\n      <label for=\"${id}\" class=\"${prefix}--toggle__label\">\n        <span class=\"${prefix}--toggle__label-text\">${labelText}</span>\n        <div class=\"${inputClasses}\">\n          <div class=\"${toggleClasses}\" @click=${handleChange}>\n            ${this._renderCheckmark()}\n          </div>\n          <span\n            ?hidden=\"${hideLabel}\"\n            class=\"${prefix}--toggle__text\"\n            aria-hidden=\"true\"\n            >${stateText}</span\n          >\n        </div>\n      </label>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired after this changebox changes its checked state.\n   */\n  static get eventChange() {\n    return `${prefix}-toggle-changed`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSToggle;\n"],"mappings":"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","ignoreList":[]}