@redvars/peacock 3.8.1 → 3.8.2

package/dist/checkbox.js

@@ -0,0 +1,526 @@
+import { i, _ as __decorate, I as IndividualComponent, a as i$1, w, b } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+import { r } from './state-DkTK9EGF.js';
+import { e } from './query-CHb9Ft_d.js';
+import { e as e$1 } from './class-map-DG7CA1et.js';
+import { s as spread } from './spread-B5cgadZl.js';
+import './base-Cl6v8-BZ.js';
+import './directive-ZPhl09Yt.js';
+
+var css_248z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+:host {
+  display: inline-block;
+  --checkbox-size: 18px;
+  --checkbox-icon-size: 12px;
+  --checkbox-selected-color: var(--color-primary);
+  --checkbox-unselected-color: var(--color-on-surface-variant);
+  --checkbox-checkmark-color: var(--color-on-primary);
+  --checkbox-state-layer-size: 40px;
+  --checkbox-disabled-opacity: 0.38;
+  --checkbox-border-radius: 2px;
+}
+
+.checkbox {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  vertical-align: middle;
+  font-family: var(--typography-body-medium-font-family) !important;
+  font-size: var(--typography-body-medium-font-size) !important;
+  font-weight: var(--typography-body-medium-font-weight) !important;
+  line-height: var(--typography-body-medium-line-height) !important;
+  letter-spacing: var(--typography-body-medium-letter-spacing) !important;
+}
+.checkbox.has-content {
+  gap: 8px;
+}
+.checkbox .input-native {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.checkbox .container {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--checkbox-state-layer-size);
+  height: var(--checkbox-state-layer-size);
+  cursor: inherit;
+  outline: none;
+  flex-shrink: 0;
+}
+.checkbox .ripple {
+  border-radius: 50%;
+  --ripple-pressed-color: var(--color-on-surface);
+}
+.checkbox .outline {
+  position: absolute;
+  width: var(--checkbox-size);
+  height: var(--checkbox-size);
+  border: 2px solid var(--checkbox-unselected-color);
+  border-radius: var(--checkbox-border-radius);
+  box-sizing: border-box;
+  transition: border-color var(--duration-short2) var(--easing-standard);
+}
+.checkbox .background {
+  position: absolute;
+  width: var(--checkbox-size);
+  height: var(--checkbox-size);
+  background: var(--checkbox-selected-color);
+  border-radius: var(--checkbox-border-radius);
+  opacity: 0;
+  transform: scale(0);
+  transition: transform var(--duration-short2) var(--easing-standard), opacity var(--duration-short2) var(--easing-standard);
+}
+.checkbox .icon {
+  position: absolute;
+  width: var(--checkbox-icon-size);
+  height: var(--checkbox-icon-size);
+  fill: none;
+  stroke: var(--checkbox-checkmark-color);
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  opacity: 0;
+  transition: opacity var(--duration-short1) var(--easing-standard);
+}
+.checkbox .icon .checkmark {
+  stroke-dasharray: 14;
+  stroke-dashoffset: 14;
+  transition: stroke-dashoffset var(--duration-short4) var(--easing-emphasized);
+}
+.checkbox .icon .indeterminate {
+  transform-origin: center;
+  opacity: 0;
+  transition: opacity var(--duration-short1) var(--easing-standard);
+}
+.checkbox .label {
+  color: var(--color-on-surface);
+  cursor: inherit;
+}
+.checkbox:hover:not(.disabled):not(.readonly).state-checked .ripple, .checkbox:hover:not(.disabled):not(.readonly).state-indeterminate .ripple {
+  --ripple-pressed-color: var(--checkbox-selected-color);
+}
+.checkbox .focus-ring {
+  --focus-ring-container-shape-start-start: 50%;
+  --focus-ring-container-shape-start-end: 50%;
+  --focus-ring-container-shape-end-start: 50%;
+  --focus-ring-container-shape-end-end: 50%;
+}
+.checkbox.has-focus:not(.active):not(.disabled):not(.readonly).state-checked .ripple, .checkbox.has-focus:not(.active):not(.disabled):not(.readonly).state-indeterminate .ripple {
+  --ripple-pressed-color: var(--checkbox-selected-color);
+}
+.checkbox.active:not(.disabled):not(.readonly).state-checked .ripple, .checkbox.active:not(.disabled):not(.readonly).state-indeterminate .ripple {
+  --ripple-pressed-color: var(--checkbox-selected-color);
+}
+.checkbox.rounded {
+  --checkbox-border-radius: 18px;
+}
+
+.checkbox.state-checked .outline {
+  border-color: transparent;
+}
+.checkbox.state-checked .background {
+  opacity: 1;
+  transform: scale(1);
+}
+.checkbox.state-checked .icon {
+  opacity: 1;
+}
+.checkbox.state-checked .icon .checkmark {
+  stroke-dashoffset: 0;
+}
+
+.checkbox.state-indeterminate .outline {
+  border-color: transparent;
+}
+.checkbox.state-indeterminate .background {
+  opacity: 1;
+  transform: scale(1);
+}
+.checkbox.state-indeterminate .icon {
+  opacity: 1;
+  fill: var(--checkbox-checkmark-color);
+}
+.checkbox.state-indeterminate .icon .indeterminate {
+  opacity: 1;
+}
+
+.checkbox.size-sm {
+  --checkbox-size: 16px;
+  --checkbox-icon-size: 10px;
+  --checkbox-state-layer-size: 36px;
+  font-size: var(--font-size-body-small);
+  line-height: var(--line-height-body-small);
+}
+.checkbox.size-sm .icon {
+  stroke-width: 1.5;
+}
+
+.checkbox.size-md {
+  --checkbox-size: 18px;
+  --checkbox-icon-size: 12px;
+  --checkbox-state-layer-size: 40px;
+}
+.checkbox.size-md .icon {
+  stroke-width: 2;
+}
+
+.checkbox.size-lg {
+  --checkbox-size: 24px;
+  --checkbox-icon-size: 16px;
+  --checkbox-state-layer-size: 48px;
+  font-size: var(--font-size-body-large);
+  line-height: var(--line-height-body-large);
+}
+.checkbox.size-lg .icon {
+  stroke-width: 2.5;
+}
+
+.checkbox.readonly {
+  cursor: default;
+}
+.checkbox.readonly .label {
+  color: var(--color-on-surface);
+}
+.checkbox.readonly .outline {
+  border-color: var(--color-on-surface-variant);
+}
+.checkbox.readonly.state-checked .background, .checkbox.readonly.state-indeterminate .background {
+  background: var(--color-on-surface-variant);
+}
+.checkbox.readonly .state-layer {
+  display: none;
+}
+
+.checkbox.disabled {
+  cursor: not-allowed;
+  opacity: var(--checkbox-disabled-opacity);
+}
+.checkbox.disabled .label {
+  color: var(--color-on-surface);
+}
+.checkbox.disabled .outline {
+  border-color: var(--color-on-surface);
+}
+.checkbox.disabled.state-checked .background, .checkbox.disabled.state-indeterminate .background {
+  background: var(--color-on-surface);
+}
+.checkbox.disabled .state-layer {
+  display: none;
+}`;
+
+/**
+ * @label Checkbox
+ * @tag wc-checkbox
+ * @rawTag checkbox
+ * @summary Captures boolean input with an optional indeterminate mode.
+ * @overview
+ * <p>Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.</p>
+ * <p>checkboxes feature a smooth animation and clear visual states for checked, unchecked, and indeterminate.</p>
+ * @cssprop --checkbox-size: Size of the checkbox container.
+ * @cssprop --checkbox-selected-color: Color of the checkbox when selected.
+ * @cssprop --checkbox-unselected-color: Color of the checkbox border when unselected.
+ * @cssprop --checkbox-checkmark-color: Color of the checkmark icon.
+ * @cssprop --checkbox-state-layer-size: Size of the state layer for touch target.
+ * @fires {CustomEvent} change - Dispatched when the checkbox value changes.
+ * @fires {CustomEvent} blur - Dispatched when the checkbox loses focus.
+ * @fires {CustomEvent} focus - Dispatched when the checkbox receives focus.
+ * @tags input, form
+ *
+ * @example
+ * ```html
+ * <wc-checkbox label="Accept terms"></wc-checkbox>
+ * ```
+ */
+let Checkbox = class Checkbox extends i$1 {
+    constructor() {
+        super(...arguments);
+        /**
+         * The input field name.
+         */
+        this.name = '';
+        /**
+         * The checkbox label.
+         */
+        this.label = '';
+        /**
+         * The input field value (checked state).
+         */
+        this.value = false;
+        /**
+         * If true, displays the checkbox in an indeterminate state.
+         */
+        this.indeterminate = false;
+        /**
+         * If true, the checkbox has rounded corners. Defaults to `false`.
+         */
+        this.rounded = false;
+        /**
+         * The checkbox size.
+         * Possible values are: `"sm"`, `"md"`, `"lg"`. Defaults to `"md"`.
+         */
+        this.size = 'md';
+        /**
+         * If true, required icon is shown. Defaults to `false`.
+         */
+        this.required = false;
+        /**
+         * If true, the checkbox is readonly. Defaults to `false`.
+         */
+        this.readonly = false;
+        /**
+         * If true, the user cannot interact with the checkbox. Defaults to `false`.
+         */
+        this.disabled = false;
+        /**
+         * Configuration object for aria attributes.
+         */
+        this.configAria = {};
+        /** True while the checkbox container has keyboard focus. */
+        this.hasFocus = false;
+        /** True while the user is actively pressing the checkbox (mouse/keyboard). */
+        this.isActive = false;
+        /** True when slotted label content is present. */
+        this.slotHasContent = false;
+        this.windowMouseUp = () => {
+            if (this.isActive) {
+                this.isActive = false;
+            }
+        };
+        this.windowKeyUp = (evt) => {
+            if (this.isActive && evt.key === ' ') {
+                this.isActive = false;
+            }
+        };
+        this.mouseDownHandler = () => {
+            this.isActive = true;
+        };
+        this.keyDownHandler = (evt) => {
+            if (evt.key === ' ') {
+                evt.preventDefault();
+                this.isActive = true;
+                this.clickHandler(evt);
+            }
+        };
+        this.clickHandler = (ev) => {
+            if (!this.disabled && !this.readonly) {
+                this.value = !this.value;
+                this.indeterminate = false;
+                this.dispatchEvent(new CustomEvent('change', {
+                    detail: { value: this.value, originalEvent: ev },
+                    bubbles: true,
+                    composed: true,
+                }));
+                this.containerElement?.focus();
+            }
+        };
+        this.blurHandler = (ev) => {
+            this.hasFocus = false;
+            this.dispatchEvent(new CustomEvent('blur', {
+                detail: ev,
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        this.focusHandler = (ev) => {
+            this.hasFocus = true;
+            this.dispatchEvent(new CustomEvent('focus', {
+                detail: ev,
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        this.handleKeyUp = (evt) => {
+            if (evt.key === 'Enter') {
+                this.clickHandler(evt);
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.handleInitialAttributes();
+        window.addEventListener('mouseup', this.windowMouseUp);
+        window.addEventListener('keyup', this.windowKeyUp);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener('mouseup', this.windowMouseUp);
+        window.removeEventListener('keyup', this.windowKeyUp);
+    }
+    firstUpdated() {
+        this.slotHasContent = this.hasChildNodes();
+    }
+    handleInitialAttributes() {
+        if (this.hasAttribute('tabindex')) {
+            this.tabindex = this.getAttribute('tabindex') || undefined;
+            this.removeAttribute('tabindex');
+        }
+        Array.from(this.attributes).forEach(attr => {
+            if (attr.name.startsWith('aria-')) {
+                this.configAria[attr.name] = attr.value;
+                this.removeAttribute(attr.name);
+            }
+        });
+    }
+    /**
+     * Sets focus on the checkbox.
+     */
+    focus() {
+        this.containerElement?.focus();
+    }
+    /**
+     * Removes focus from the checkbox.
+     */
+    blur() {
+        this.containerElement?.blur();
+    }
+    render() {
+        const cssClasses = {
+            checkbox: true,
+            'state-checked': this.value,
+            'state-indeterminate': !this.value && this.indeterminate,
+            [`size-${this.size}`]: true,
+            'has-focus': this.hasFocus,
+            active: this.isActive,
+            disabled: this.disabled,
+            readonly: this.readonly,
+            required: this.required,
+            rounded: this.rounded,
+            'has-content': this.slotHasContent,
+        };
+        return b `
+      <label class=${e$1(cssClasses)}>
+        <div
+          id="container"
+          class="container"
+          tabindex=${this.tabindex || 0}
+          @keyup=${this.handleKeyUp}
+          @mousedown=${this.mouseDownHandler}
+          @keydown=${this.keyDownHandler}
+          @blur=${this.blurHandler}
+          @focus=${this.focusHandler}
+          role="checkbox"
+          aria-disabled=${this.disabled}
+          aria-required=${this.required}
+          aria-checked=${this.value
+            ? 'true'
+            : this.indeterminate
+                ? 'mixed'
+                : 'false'}
+          ${spread(this.configAria)}
+        >
+          <wc-ripple class="ripple"></wc-ripple>
+          <wc-focus-ring class="focus-ring" for="container"></wc-focus-ring>
+          <div class="outline"></div>
+          <div class="background"></div>
+          <svg class="icon" viewBox="0 0 12 12">
+            ${this.value
+            ? w `
+                  <path
+                    class="checkmark"
+                    d="M2 6L5 9L10 2"
+                  />
+                `
+            : this.indeterminate
+                ? w `<rect
+                    class="indeterminate"
+                    x="2"
+                    y="5"
+                    width="8"
+                    height="2"
+                  />`
+                : ''}
+          </svg>
+        </div>
+
+        <input
+          type="checkbox"
+          class="input-native"
+          name=${this.name}
+          .checked=${this.value}
+          .indeterminate=${this.indeterminate}
+          aria-hidden="true"
+          ?required=${this.required}
+          tabindex="-1"
+          @click=${this.clickHandler}
+        />
+
+        ${this.label
+            ? b `<div class="label">${this.label}</div>`
+            : b `<div class="label slot-container"><slot></slot></div>`}
+      </label>
+    `;
+    }
+};
+Checkbox.styles = [css_248z];
+__decorate([
+    n({ type: String })
+], Checkbox.prototype, "name", void 0);
+__decorate([
+    n({ type: String })
+], Checkbox.prototype, "label", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Checkbox.prototype, "value", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Checkbox.prototype, "indeterminate", void 0);
+__decorate([
+    n({ type: Boolean })
+], Checkbox.prototype, "rounded", void 0);
+__decorate([
+    n({ type: String })
+], Checkbox.prototype, "size", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Checkbox.prototype, "required", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Checkbox.prototype, "readonly", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Checkbox.prototype, "disabled", void 0);
+__decorate([
+    n({ type: Object })
+], Checkbox.prototype, "configAria", void 0);
+__decorate([
+    r()
+], Checkbox.prototype, "hasFocus", void 0);
+__decorate([
+    r()
+], Checkbox.prototype, "isActive", void 0);
+__decorate([
+    r()
+], Checkbox.prototype, "slotHasContent", void 0);
+__decorate([
+    e('.container')
+], Checkbox.prototype, "containerElement", void 0);
+__decorate([
+    e('.input-native')
+], Checkbox.prototype, "nativeElement", void 0);
+Checkbox = __decorate([
+    IndividualComponent
+], Checkbox);
+
+export { Checkbox };
+//# sourceMappingURL=checkbox.js.map

package/dist/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sources":["../../src/checkbox/checkbox.ts"],"sourcesContent":["import { html, LitElement, svg } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { spread } from '@/__internal/directive/spread.js';\nimport styles from './checkbox.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Checkbox\n * @tag wc-checkbox\n * @rawTag checkbox\n * @summary Captures boolean input with an optional indeterminate mode.\n * @overview\n * <p>Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.</p>\n * <p>checkboxes feature a smooth animation and clear visual states for checked, unchecked, and indeterminate.</p>\n * @cssprop --checkbox-size: Size of the checkbox container.\n * @cssprop --checkbox-selected-color: Color of the checkbox when selected.\n * @cssprop --checkbox-unselected-color: Color of the checkbox border when unselected.\n * @cssprop --checkbox-checkmark-color: Color of the checkmark icon.\n * @cssprop --checkbox-state-layer-size: Size of the state layer for touch target.\n * @fires {CustomEvent} change - Dispatched when the checkbox value changes.\n * @fires {CustomEvent} blur - Dispatched when the checkbox loses focus.\n * @fires {CustomEvent} focus - Dispatched when the checkbox receives focus.\n * @tags input, form\n *\n * @example\n * ```html\n * <wc-checkbox label=\"Accept terms\"></wc-checkbox>\n * ```\n */\n@IndividualComponent\nexport class Checkbox extends LitElement {\n  static styles = [styles];\n\n  /**\n   * The input field name.\n   */\n  @property({ type: String })\n  name: string = '';\n\n  /**\n   * The checkbox label.\n   */\n  @property({ type: String })\n  label: string = '';\n\n  /**\n   * The input field value (checked state).\n   */\n  @property({ type: Boolean, reflect: true })\n  value: boolean = false;\n\n  /**\n   * If true, displays the checkbox in an indeterminate state.\n   */\n  @property({ type: Boolean, reflect: true })\n  indeterminate: boolean = false;\n\n  /**\n   * If true, the checkbox has rounded corners. Defaults to `false`.\n   */\n  @property({ type: Boolean })\n  rounded: boolean = false;\n\n  /**\n   * The checkbox size.\n   * Possible values are: `\"sm\"`, `\"md\"`, `\"lg\"`. Defaults to `\"md\"`.\n   */\n  @property({ type: String })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * If true, required icon is shown. Defaults to `false`.\n   */\n  @property({ type: Boolean, reflect: true })\n  required: boolean = false;\n\n  /**\n   * If true, the checkbox is readonly. Defaults to `false`.\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly: boolean = false;\n\n  /**\n   * If true, the user cannot interact with the checkbox. Defaults to `false`.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Configuration object for aria attributes.\n   */\n  @property({ type: Object })\n  configAria: Record<string, string> = {};\n\n  /** True while the checkbox container has keyboard focus. */\n  @state()\n  private hasFocus = false;\n\n  /** True while the user is actively pressing the checkbox (mouse/keyboard). */\n  @state()\n  private isActive = false;\n\n  /** True when slotted label content is present. */\n  @state()\n  private slotHasContent = false;\n\n  @query('.container')\n  private containerElement?: HTMLElement;\n\n  @query('.input-native')\n  private nativeElement?: HTMLInputElement;\n\n  // ── Private fields ────────────────────────────────────────────────────────\n\n  /** Captured `tabindex` attribute value forwarded to the inner container. */\n  private tabindex?: string;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.handleInitialAttributes();\n    window.addEventListener('mouseup', this.windowMouseUp);\n    window.addEventListener('keyup', this.windowKeyUp);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    window.removeEventListener('mouseup', this.windowMouseUp);\n    window.removeEventListener('keyup', this.windowKeyUp);\n  }\n\n  firstUpdated() {\n    this.slotHasContent = this.hasChildNodes();\n  }\n\n  private handleInitialAttributes() {\n    if (this.hasAttribute('tabindex')) {\n      this.tabindex = this.getAttribute('tabindex') || undefined;\n      this.removeAttribute('tabindex');\n    }\n\n    Array.from(this.attributes).forEach(attr => {\n      if (attr.name.startsWith('aria-')) {\n        this.configAria[attr.name] = attr.value;\n        this.removeAttribute(attr.name);\n      }\n    });\n  }\n\n  private windowMouseUp = () => {\n    if (this.isActive) {\n      this.isActive = false;\n    }\n  };\n\n  private windowKeyUp = (evt: KeyboardEvent) => {\n    if (this.isActive && evt.key === ' ') {\n      this.isActive = false;\n    }\n  };\n\n  private mouseDownHandler = () => {\n    this.isActive = true;\n  };\n\n  private keyDownHandler = (evt: KeyboardEvent) => {\n    if (evt.key === ' ') {\n      evt.preventDefault();\n      this.isActive = true;\n      this.clickHandler(evt);\n    }\n  };\n\n  private clickHandler = (ev: MouseEvent | KeyboardEvent) => {\n    if (!this.disabled && !this.readonly) {\n      this.value = !this.value;\n      this.indeterminate = false;\n      this.dispatchEvent(\n        new CustomEvent('change', {\n          detail: { value: this.value, originalEvent: ev },\n          bubbles: true,\n          composed: true,\n        }),\n      );\n      this.containerElement?.focus();\n    }\n  };\n\n  private blurHandler = (ev: FocusEvent) => {\n    this.hasFocus = false;\n    this.dispatchEvent(\n      new CustomEvent('blur', {\n        detail: ev,\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  private focusHandler = (ev: FocusEvent) => {\n    this.hasFocus = true;\n    this.dispatchEvent(\n      new CustomEvent('focus', {\n        detail: ev,\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  private handleKeyUp = (evt: KeyboardEvent) => {\n    if (evt.key === 'Enter') {\n      this.clickHandler(evt);\n    }\n  };\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  focus() {\n    this.containerElement?.focus();\n  }\n\n  /**\n   * Removes focus from the checkbox.\n   */\n  blur() {\n    this.containerElement?.blur();\n  }\n\n  render() {\n    const cssClasses = {\n      checkbox: true,\n      'state-checked': this.value,\n      'state-indeterminate': !this.value && this.indeterminate,\n      [`size-${this.size}`]: true,\n      'has-focus': this.hasFocus,\n      active: this.isActive,\n      disabled: this.disabled,\n      readonly: this.readonly,\n      required: this.required,\n      rounded: this.rounded,\n      'has-content': this.slotHasContent,\n    };\n\n    return html`\n      <label class=${classMap(cssClasses)}>\n        <div\n          id=\"container\"\n          class=\"container\"\n          tabindex=${this.tabindex || 0}\n          @keyup=${this.handleKeyUp}\n          @mousedown=${this.mouseDownHandler}\n          @keydown=${this.keyDownHandler}\n          @blur=${this.blurHandler}\n          @focus=${this.focusHandler}\n          role=\"checkbox\"\n          aria-disabled=${this.disabled}\n          aria-required=${this.required}\n          aria-checked=${this.value\n            ? 'true'\n            : this.indeterminate\n              ? 'mixed'\n              : 'false'}\n          ${spread(this.configAria)}\n        >\n          <wc-ripple class=\"ripple\"></wc-ripple>\n          <wc-focus-ring class=\"focus-ring\" for=\"container\"></wc-focus-ring>\n          <div class=\"outline\"></div>\n          <div class=\"background\"></div>\n          <svg class=\"icon\" viewBox=\"0 0 12 12\">\n            ${this.value\n              ? svg`\n                  <path\n                    class=\"checkmark\"\n                    d=\"M2 6L5 9L10 2\"\n                  />\n                `\n              : this.indeterminate\n                ? svg`<rect\n                    class=\"indeterminate\"\n                    x=\"2\"\n                    y=\"5\"\n                    width=\"8\"\n                    height=\"2\"\n                  />`\n                : ''}\n          </svg>\n        </div>\n\n        <input\n          type=\"checkbox\"\n          class=\"input-native\"\n          name=${this.name}\n          .checked=${this.value}\n          .indeterminate=${this.indeterminate}\n          aria-hidden=\"true\"\n          ?required=${this.required}\n          tabindex=\"-1\"\n          @click=${this.clickHandler}\n        />\n\n        ${this.label\n          ? html`<div class=\"label\">${this.label}</div>`\n          : html`<div class=\"label slot-container\"><slot></slot></div>`}\n      </label>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","svg","styles","property","state","query"],"mappings":"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"}