@tmorrow/cre8-wc 1.2.4 → 1.2.6

package/lib/components/checkbox-field-item/checkbox-field-item.js

@@ -1,1078 +1,281 @@
-import { css as u, html as n, nothing as f } from "lit";
-import { ifDefined as a } from "lit-html/directives/if-defined.js";
-import { property as t, query as g } from "lit/decorators.js";
-import { nanoid as l } from "nanoid";
-import "../icon/icon.js";
-import "../field-note/field-note.js";
-import { C as b } from "../../cre8-form-element-BymRdQUC.js";
-const x = u`@charset "UTF-8";
-.cre8-u-content-knockout-brand {
-  color: var(----cre8-color-content-knockout-brand);
-}
-
-.cre8-u-is-hidden {
-  display: none !important;
-  visibility: hidden !important;
-}
-
-.cre8-u-is-vishidden {
-  position: absolute !important;
-  overflow: hidden;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  border: 0;
-  clip: rect(1px, 1px, 1px, 1px);
-}
-
-@media all and (min-width: 23.4375rem) {
-  .cre8-u-hide-sm {
-    display: none !important;
-  }
-}
-@media all and (min-width: 35rem) {
-  .cre8-u-hide-sm-2 {
-    display: none !important;
-  }
-}
-@media all and (min-width: 48rem) {
-  .cre8-u-hide-md {
-    display: none !important;
-  }
-}
-@media all and (min-width: 60rem) {
-  .cre8-u-hide-lg {
-    display: none !important;
-  }
-}
-@media all and (min-width: 75rem) {
-  .cre8-u-hide-xl {
-    display: none !important;
-  }
-}
-@media all and (max-width: 23.4375rem) {
-  .cre8-u-show-sm {
-    display: none !important;
-  }
-}
-@media all and (max-width: 35rem) {
-  .cre8-u-show-sm-2 {
-    display: none !important;
-  }
-}
-@media all and (max-width: 48rem) {
-  .cre8-u-show-md {
-    display: none !important;
-  }
-}
-@media all and (max-width: 60rem) {
-  .cre8-u-show-lg {
-    display: none !important;
-  }
-}
-@media all and (max-width: 75rem) {
-  .cre8-u-show-xl {
-    display: none !important;
-  }
-}
-.cre8-u-margin-none {
-  margin: 0 !important;
-}
-
-.cre8-u-margin-sm {
-  margin: size(1) !important;
-}
-
-.cre8-u-margin-md {
-  margin: size(2) !important;
-}
-
-.cre8-u-margin-lg {
-  margin: size(3) !important;
-}
-
-.cre8-u-margin-xl {
-  margin: size(4) !important;
-}
-
-.cre8-u-margin-xxl {
-  margin: size(8) !important;
-}
-
-.cre8-u-margin-top-none {
-  margin-top: 0 !important;
-}
-
-.cre8-u-margin-top-sm {
-  margin-top: size(1) !important;
-}
-
-.cre8-u-margin-top-md {
-  margin-top: size(2) !important;
-}
-
-.cre8-u-margin-top-lg {
-  margin-top: size(3) !important;
-}
-
-.cre8-u-margin-top-xl {
-  margin-top: size(4) !important;
-}
-
-.cre8-u-margin-top-xxl {
-  margin-top: size(8) !important;
-}
-
-.cre8-u-margin-right-none {
-  margin-right: 0 !important;
-}
-
-.cre8-u-margin-right-sm {
-  margin-right: size(1) !important;
-}
-
-.cre8-u-margin-right-md {
-  margin-right: size(2) !important;
-}
-
-.cre8-u-margin-right-lg {
-  margin-right: size(3) !important;
-}
-
-.cre8-u-margin-right-xl {
-  margin-right: size(4) !important;
-}
-
-.cre8-u-margin-right-xxl {
-  margin-right: size(8) !important;
-}
-
-.cre8-u-margin-bottom-none {
-  margin-bottom: 0 !important;
-}
-
-.cre8-u-margin-bottom-sm {
-  margin-bottom: size(1) !important;
-}
-
-.cre8-u-margin-bottom-md {
-  margin-bottom: size(2) !important;
-}
-
-.cre8-u-margin-bottom-lg {
-  margin-bottom: size(3) !important;
-}
-
-.cre8-u-margin-bottom-xl {
-  margin-bottom: size(4) !important;
-}
-
-.cre8-u-margin-bottom-xxl {
-  margin-bottom: size(8) !important;
-}
-
-.cre8-u-margin-bottom-xl-xxl {
-  margin-bottom: size(4) !important;
-}
-
-@media all and (min-width: 768px) {
-  .cre8-u-margin-bottom-xl-xxl {
-    margin-bottom: size(8) !important;
-  }
-}
-.cre8-u-margin-left-none {
-  margin-left: 0 !important;
-}
-
-.cre8-u-margin-left-sm {
-  margin-left: size(1) !important;
-}
-
-.cre8-u-margin-left-md {
-  margin-left: size(2) !important;
-}
-
-.cre8-u-margin-left-lg {
-  margin-left: size(3) !important;
-}
-
-.cre8-u-margin-left-xl {
-  margin-left: size(4) !important;
-}
-
-.cre8-u-margin-left-xxl {
-  margin-left: size(8) !important;
-}
-
-.cre8-u-padding-none {
-  padding: 0 !important;
-}
-
-.cre8-u-padding-sm {
-  padding: size(1) !important;
-}
-
-.cre8-u-padding-md {
-  padding: size(2) !important;
-}
-
-.cre8-u-padding-lg {
-  padding: size(3) !important;
-}
-
-.cre8-u-padding-xl {
-  padding: size(4) !important;
-}
-
-.cre8-u-padding-xxl {
-  padding: size(8) !important;
-}
-
-.cre8-u-padding-top-none {
-  padding-top: 0 !important;
-}
-
-.cre8-u-padding-top-sm {
-  padding-top: size(1) !important;
-}
-
-.cre8-u-padding-top-md {
-  padding-top: size(2) !important;
-}
-
-.cre8-u-padding-top-lg {
-  padding-top: size(3) !important;
-}
-
-.cre8-u-padding-top-xl {
-  padding-top: size(4) !important;
-}
-
-.cre8-u-padding-top-xxl {
-  padding-top: size(8) !important;
-}
-
-.cre8-u-padding-right-none {
-  padding-right: 0 !important;
-}
-
-.cre8-u-padding-right-sm {
-  padding-right: size(1) !important;
-}
-
-.cre8-u-padding-right-md {
-  padding-right: size(2) !important;
-}
-
-.cre8-u-padding-right-lg {
-  padding-right: size(3) !important;
-}
-
-.cre8-u-padding-right-xl {
-  padding-right: size(4) !important;
-}
-
-.cre8-u-padding-right-xxl {
-  padding-right: size(8) !important;
-}
-
-.cre8-u-padding-bottom-none {
-  padding-bottom: 0 !important;
-}
-
-.cre8-u-padding-bottom-sm {
-  padding-bottom: size(1) !important;
-}
-
-.cre8-u-padding-bottom-md {
-  padding-bottom: size(2) !important;
-}
-
-.cre8-u-padding-bottom-lg {
-  padding-bottom: size(3) !important;
-}
-
-.cre8-u-padding-bottom-xl {
-  padding-bottom: size(4) !important;
-}
-
-.cre8-u-padding-bottom-xxl {
-  padding-bottom: size(8) !important;
-}
-
-.cre8-u-padding-left-none {
-  padding-left: 0 !important;
-}
-
-.cre8-u-padding-left-sm {
-  padding-left: size(1) !important;
-}
-
-.cre8-u-padding-left-md {
-  padding-left: size(2) !important;
-}
-
-.cre8-u-padding-left-lg {
-  padding-left: size(3) !important;
-}
-
-.cre8-u-padding-left-xl {
-  padding-left: size(4) !important;
-}
-
-.cre8-u-padding-left-xxl {
-  padding-left: size(8) !important;
-}
-
-.cre8-u-display-flex {
-  display: flex !important;
-}
-
-.cre8-u-display-block {
-  display: block !important;
-}
-
-body {
-  font-family: var(--cre8-typography-body-default-font-family);
-  font-size: var(--cre8-typography-body-default-font-size);
-  font-weight: var(--cre8-typography-body-default-font-weight);
-  line-height: var(--cre8-typography-body-default-line-height);
-  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);
-  text-decoration: var(--cre8-typography-body-default-text-decoration);
-  text-transform: var(--cre8-typography-body-default-text-transform);
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  margin: 0;
-  color: var(--cre8-color-content-default);
-  background: var(--background-default);
-}
-
-@media all and (min-width: 60rem) {
-  .page-container {
-    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);
-  }
-}
-.band__inner {
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-
-@media all and (min-width: 60rem) {
-  .band__inner {
-    margin-right: 0;
-  }
-}
-img {
-  max-width: 100%;
-  height: auto;
-}
-
-/**
- * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
- */
-*,
-::slotted(*),
-*:before,
-*:after {
-  box-sizing: border-box;
-}
-
-:root {
-  --size-base-unit: 0.5rem;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, nothing, } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { property, query } from 'lit/decorators.js';
+import { nanoid } from 'nanoid';
+import '../icon/icon';
+import '../field-note/field-note';
+import svgCheck from '@tmorrow/cre8-wc/icons/System/Regular/Check.svg?raw';
+import styles from './checkbox-field-item.styles.js';
+import { Cre8FormElement } from '../cre8-form-element';
 /**
- * Visually hidden from display
+ * Checkbox Field Item is the combination of a checkbox input, label and field note.
+ * Checkboxes can turn an option on or off.
+ *
+ * Checkboxes should be used when the user is allowed to select one, none or multiple options
+ * OR to "opt-in" (ex. I would like to receive the newsletter by email)
+ * or as a required acknowledgement(ex. I've read the Terms and Conditions).
+ * If the user can only chose one option from many, use `radio-field-item`.
+ *
+ * ## How to Use
+ *
+ * - A checkbox is independent of all other checkboxes in the list,
+ *   so checking one box should not uncheck the others in the group.
+ * - Place checkbox options one on top of another vertically. Do not display them in a row horizontally.
+ * - Avoid disabled and read-only states as much as possible.
+ *
+ * ## Universal Form Field Rules
+ * - Unless indicated with the "(Optional)" label, all fields are assumed required.
+ *   Minimize the number of optional fields to keep forms as short as possible.
+ * - Always include a label written in sentence case.
+ * - Avoid using the read-only and disabled states as much as possible.
  */
-/*
-=======
-Animations
-=======
-*/
-:host {
-  --cre8-z-index-1: 1;
-  --cre8-z-index-50: 50;
-  --cre8-z-index-100: 100;
-  --cre8-z-index-200: 200;
-  --cre8-z-index-1030: 1030;
-  --cre8-anim-fade-quick: 0.35s;
-  --cre8-anim-ease: ease;
-}
-
-@keyframes fadeIn {
-  100% {
-    opacity: 1;
-  }
-}
-@keyframes slideIn {
-  100% {
-    transform: translateX(0);
-  }
-}
-@keyframes slideInFwd {
-  100% {
-    width: 272px;
-    height: 272px;
-  }
-}
-@keyframes slideOutRight {
-  100% {
-    width: 272px;
-    height: 272px;
-  }
-}
-@keyframes slideUp {
-  100% {
-    transform: translateY(0);
-  }
-}
-@media (width >= 481px) {
-  @keyframes slideInFwd {
-    100% {
-      width: 417px;
-      height: 417px;
+export class Cre8CheckboxFieldItem extends Cre8FormElement {
+    constructor() {
+        super(...arguments);
+        this.type = 'checkbox';
+        /**
+         * Visually hidden text that always signifies that this is an error for screen reader usage
+         * @attr {string}
+         */
+        this.errorText = 'Error';
+        /**
+         * Visually hidden text that always signifies that this is successful for screen reader usage
+         */
+        this.successText = 'Success';
     }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 417px;
-      height: 417px;
+    /**
+     * Connected callback lifecycle
+     * 1) Set the fieldID to a random string if not provided so form is always accessible
+     * 2) If a fieldnote is added, set the aria-describedby property to the `ariaDescribedBy` property
+     * or a random string to always make the form field accessible.
+     * 3) Set the form internal data to set that to the default checked state.
+     * 4) Set the default value of the checkbox field item to the checked property
+    */
+    connectedCallback() {
+        super.connectedCallback();
+        this.setFormData(); /* 3 */
+        this.defaultValue = this.checked; /* 4 */
     }
-  }
-}
-@media (width >= 48rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 330px;
-      height: 330px;
+    /**
+     * access role when check-box-field-item embedded in checkbox-field
+     */
+    getRole() {
+        const checkboxFieldContainer = this.closest('cre8-checkbox-field');
+        if (checkboxFieldContainer) {
+            return 'listitem';
+        }
+        return '';
     }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 330px;
-      height: 330px;
-      transform: translateX(calc(100vw - 45px));
+    /**
+     * Set form data
+     * 1) If a checked property is provided, set the form value the checkbox value attribute.
+     * Otherwise, don't provide a value for the checkbox data array
+     */
+    setFormData() {
+        return this.checked ? this._internals.setFormValue(this.value || 'on') : this._internals.setFormValue(null); /* 1 */
     }
-  }
-}
-@media (width >= 60rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 460px;
-      height: 460px;
+    /**
+     * Handle on checkbox change
+     * 1) On change of the checkbox input, if `checked` is true, then set it to false and vice versa.
+     */
+    _clickHandler() {
+        this.checked = !this.checked; /* 2 */
+        return this.checked ? this._internals.setFormValue(this.value || 'on') : this._internals.setFormValue(null);
     }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 460px;
-      height: 460px;
-      transform: translateX(calc(100vw - 45px));
+    /**
+     * Handle On Change
+     * 1. Set the value when the select is changed.
+     * 2. Fire the custom event with the current value.
+     */
+    _handleOnChange(e) {
+        /* 1 */
+        const target = e.target;
+        this.value = target.value;
+        this._internals.setFormValue(this.value);
+        /* 2 */
+        const customEvent = new CustomEvent('change', {
+            detail: {
+                name: this.name,
+                value: this.value,
+            },
+            bubbles: true,
+            composed: true,
+        });
+        this.dispatchEvent(customEvent);
     }
-  }
-}
-@media (width >= 75rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 592px;
-      height: 591px;
+    /**
+     * Form reset callback
+     * 1) Set checked property to the default value and then set the input's checked attribute to that default value
+     * 2) Set the input's checked attribute to that default value
+     * 3) Set the element internals form data when the form is reset
+     * 4) Change the new value to the old value on reset
+     */
+    formResetCallback() {
+        this.checked = this.defaultValue; /* 1 */
+        this.field.checked = this.defaultValue; /* 2 */
+        this.setFormData();
+        this.requestUpdate();
     }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 45px));
+    /**
+     * First update lifecycle hook
+     * 1) super.firstUpdated also uses the firstUpdated from the Cre8FormElement
+     */
+    firstUpdated() {
+        this.initializeAria(); /* 1 */
+        return super.firstUpdated();
     }
-  }
-}
-@media (width >= 87.5rem) {
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 120px));
+    /**
+     * Initialize aria attributes
+     */
+    initializeAria() {
+        this.fieldId = this.fieldId || nanoid();
+        if (this.fieldNote || this.slotNotEmpty('fieldNote')) {
+            this.ariaDescribedBy = this.ariaDescribedBy || nanoid();
+        }
+        if (this.successNote || this.errorNote) {
+            this.validationAriaDescribedBy = this.validationAriaDescribedBy || nanoid();
+        }
     }
-  }
-}
-@media (width >= 2200px) {
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 592px));
+    /**
+     * Aria describedby string based on field notes and error/success notes
+     * 1) If both validationAriaDescribedBy (error/success note) and field note exists,
+     * render both in the input's `aria-describedby` attribute
+     * 2) Otherwise, if only validationAriaDescribedBy exists, then render only that as
+     * the `aria-describedby` attribute (input without field note initially, but then error/success is added).
+     * 3) Otherwise, render only the `ariaDescribedBy` property (field note only)
+     */
+    fieldNoteAria() {
+        if (this.validationAriaDescribedBy && this.ariaDescribedBy) {
+            return `${this.ariaDescribedBy} ${this.validationAriaDescribedBy}`; /* 1 */
+        }
+        if (this.validationAriaDescribedBy && !this.ariaDescribedBy) {
+            return this.validationAriaDescribedBy; /* 2 */
+        }
+        return this.ariaDescribedBy; /* 3 */
     }
-  }
-}
-span.ripple {
-  position: absolute;
-  border-radius: 50%;
-  transform: scale(0);
-  animation: ripple 600ms linear;
-  background-color: var(--ripple-bg-color);
-}
-
-@keyframes ripple {
-  to {
-    transform: scale(4);
-    opacity: 1;
-  }
-}
-:root {
-  --size-base-unit: 0.5rem;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
-/**
- * Visually hidden from display
- */
-/**
-* #VISIBILITY UTILITIES
-*/
-/* Completely remove from the flow and screen readers. */
-.cre8-u-is-hidden {
-  display: none !important;
-  visibility: hidden !important;
-}
-
-/* Completely remove from the flow but leave available to screen readers. */
-.cre8-u-is-vishidden {
-  position: absolute !important;
-  overflow: hidden;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  border: 0;
-  clip: rect(1px, 1px, 1px, 1px);
-}
-
-/**
- * Hide element at sm breakpoint
- */
-@media all and (min-width: 23.4375rem) {
-  .cre8-u-hide-sm {
-    display: none !important;
-  }
-}
-
-/**
- * Hide element at sm-2 breakpoint
- */
-@media all and (min-width: 35rem) {
-  .cre8-u-hide-sm-2 {
-    display: none !important;
-  }
-}
-
-/**
- * Hide element at md breakpoint
- */
-@media all and (min-width: 48rem) {
-  .cre8-u-hide-md {
-    display: none !important;
-  }
-}
-
-/**
- * Hide element at lg breakpoint
- */
-@media all and (min-width: 60rem) {
-  .cre8-u-hide-lg {
-    display: none !important;
-  }
-}
-
-/**
- * Hide element at xl breakpoint
- */
-@media all and (min-width: 75rem) {
-  .cre8-u-hide-xl {
-    display: none !important;
-  }
-}
-
-/**
- * Show element at sm breakpoint
- */
-@media all and (max-width: 23.4375rem) {
-  .cre8-u-show-sm {
-    display: none !important;
-  }
-}
-
-/**
- * Show element at sm-2 breakpoint
- */
-@media all and (max-width: 35rem) {
-  .cre8-u-show-sm-2 {
-    display: none !important;
-  }
-}
-
-/**
- * Show element at md breakpoint
- */
-@media all and (max-width: 48rem) {
-  .cre8-u-show-md {
-    display: none !important;
-  }
-}
-
-/**
- * Show element at lg breakpoint
- */
-@media all and (max-width: 60rem) {
-  .cre8-u-show-lg {
-    display: none !important;
-  }
-}
-
-/**
- * Show element at xl breakpoint
- */
-@media all and (max-width: 75rem) {
-  .cre8-u-show-xl {
-    display: none !important;
-  }
-}
-
-/*------------------------------------*\\
- #CHECKBOX-FIELD-ITEM
-\\*------------------------------------*/
-:host {
-  display: inline-flex;
-  flex-wrap: wrap;
-}
-
-/** 
- * 1) Form field that is composed of a checkbox input, label, and an optional field note.
- */
-.cre8-c-checkbox-field-item {
-  display: flex;
-  position: relative;
-  align-items: center;
-  margin-bottom: 0.5rem;
-  min-height: 1.5rem;
-  /** 
-  * Checkbox field item within last cre8-checkbox-field-item wrapper in a fieldset
-  * 1) Remove margin bottom on last item
-  */
-}
-:host(:last-child) .cre8-c-checkbox-field-item {
-  margin-bottom: 0;
-  /* 1 */
-}
-
-/** 
- * Checkbox field item input 
- */
-.cre8-c-checkbox-field-item__input {
-  opacity: 0;
-  cursor: pointer;
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 1.5rem;
-  min-width: 1.5rem;
-  margin: 0;
-  z-index: 1;
-  /** 
-  * Checkbox field item input error
-  */
-}
-.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__input {
-  cursor: not-allowed;
-}
-
-/** 
- * Checkbox field item custom checkbox container
- */
-.cre8-c-checkbox-field-item__custom-checkbox {
-  display: flex;
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 1.5rem;
-  width: 1.5rem;
-  cursor: pointer;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--cre8-border-radius-small);
-  border-width: var(--cre8-border-width-default);
-  border-style: var(--cre8-border-style-default);
-  background-color: var(--cre8-color-bg-default);
-  border-color: var(--cre8-color-border-strong);
-  /** 
-  * Checkbox field item custom checkbox focus visible  custom outline
-  */
-}
-.cre8-c-checkbox-field-item__input:focus-visible + .cre8-c-checkbox-field-item__custom-checkbox {
-  outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);
-  outline-offset: 0.125rem;
-}
-.cre8-c-checkbox-field-item--error .cre8-c-checkbox-field-item__input:focus-visible + .cre8-c-checkbox-field-item__custom-checkbox {
-  outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-error);
-  outline-offset: 0.125rem;
-}
-.cre8-c-checkbox-field-item__custom-checkbox {
-  /** 
-  * Checkbox field item custom checkbox within checkbox field with error
-  */
-}
-.cre8-c-checkbox-field-item--error .cre8-c-checkbox-field-item__custom-checkbox {
-  background-color: var(--cre8-color-bg-default);
-  border-color: var(--cre8-color-border-error);
-}
-.cre8-c-checkbox-field-item__custom-checkbox {
-  /** 
-  * Checkbox field item custom checkbox within checkbox field with disabled
-  */
-}
-.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__custom-checkbox {
-  cursor: not-allowed;
-  background-color: var(--cre8-color-bg-disabled);
-  border-color: var(--cre8-color-border-disabled);
-}
-
-/**
-  * Checkbox field item custom checkbox when item is checked
-  */
-.cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox {
-  background-color: var(--cre8-color-bg-brand-strong);
-  /** 
-  * Checkbox field item custom checkbox when item is checked with error
-  */
-}
-.cre8-c-checkbox-field-item--error .cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox {
-  background-color: var(--cre8-color-bg-default);
-}
-.cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox {
-  /** 
-  * Checkbox field item custom checkbox when item is checked with disabled
-  */
-}
-.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox {
-  background-color: var(--cre8-color-bg-disabled);
-}
-
-/** 
- * Checkbox field item checkmark icon
- */
-.cre8-c-checkbox-field-item__icon {
-  display: none;
-  color: var(--cre8-color-content-knockout);
-  /** 
-  * Checkbox field item icon within checkbox field with error
-  */
-}
-.cre8-c-checkbox-field-item--error .cre8-c-checkbox-field-item__icon {
-  color: var(--cre8-color-content-error);
-}
-.cre8-c-checkbox-field-item__icon {
-  /** 
-  * Checkbox field item icon within checkbox field disabled
-  */
-}
-.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__icon {
-  color: var(--cre8-color-content-disabled);
-}
-.cre8-c-checkbox-field-item__icon {
-  /**
-  * Checkbox field item icon will display in the box if the input is checked
-  */
-}
-.cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox .cre8-c-checkbox-field-item__icon {
-  display: flex;
-}
-
-/** 
- * Checkbox field item input 
- */
-.cre8-c-checkbox-field-item__label {
-  margin-left: 2rem;
-  font-family: var(--cre8-typography-label-small-font-family);
-  font-size: var(--cre8-typography-label-small-font-size);
-  font-weight: var(--cre8-typography-label-small-font-weight);
-  line-height: var(--cre8-typography-label-small-line-height);
-  text-decoration: var(--cre8-typography-label-small-text-decoration);
-  text-transform: var(--cre8-typography-label-small-text-transform);
-}
-
-/** 
- * Checkbox field item field notes
- */
-.cre8-c-checkbox-field-item__field-note,
-.cre8-c-checkbox-field-item__field-note-success,
-.cre8-c-checkbox-field-item__field-note-error {
-  flex-basis: 100%;
-}`;
-var k = Object.defineProperty, i = (m, r, c, h) => {
-  for (var o = void 0, d = m.length - 1, p; d >= 0; d--)
-    (p = m[d]) && (o = p(r, c, o) || o);
-  return o && k(r, c, o), o;
-};
-const y = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.8125 3.33285L5.57291 13.5724C5.51347 13.6319 5.44289 13.6791 5.3652 13.7113C5.28751 13.7435 5.20423 13.7601 5.12013 13.7601C5.03603 13.7601 4.95275 13.7435 4.87506 13.7113C4.79737 13.6791 4.72678 13.6319 4.66735 13.5724L0.187547 9.0926C0.0674628 8.97251 0 8.80964 0 8.63982C0 8.46999 0.0674628 8.30712 0.187547 8.18704C0.307632 8.06695 0.470502 7.99949 0.640327 7.99949C0.810153 7.99949 0.973022 8.06695 1.09311 8.18704L5.12013 12.2149L14.9069 2.42729C15.027 2.30721 15.1898 2.23975 15.3597 2.23975C15.5295 2.23975 15.6924 2.30721 15.8125 2.42729C15.9325 2.54738 16 2.71025 16 2.88007C16 3.0499 15.9325 3.21277 15.8125 3.33285Z"/>
-</svg>
-`, s = class s extends b {
-  constructor() {
-    super(...arguments), this.type = "checkbox", this.errorText = "Error", this.successText = "Success";
-  }
-  /**
-   * Connected callback lifecycle
-   * 1) Set the fieldID to a random string if not provided so form is always accessible
-   * 2) If a fieldnote is added, set the aria-describedby property to the `ariaDescribedBy` property
-   * or a random string to always make the form field accessible.
-   * 3) Set the form internal data to set that to the default checked state.
-   * 4) Set the default value of the checkbox field item to the checked property
-  */
-  connectedCallback() {
-    super.connectedCallback(), this.setFormData(), this.defaultValue = this.checked;
-  }
-  /**
-   * access role when check-box-field-item embedded in checkbox-field
-   */
-  getRole() {
-    return this.closest("cre8-checkbox-field") ? "listitem" : "";
-  }
-  /**
-   * Set form data
-   * 1) If a checked property is provided, set the form value the checkbox value attribute.
-   * Otherwise, don't provide a value for the checkbox data array
-   */
-  setFormData() {
-    return this.checked ? this._internals.setFormValue(this.value || "on") : this._internals.setFormValue(null);
-  }
-  /**
-   * Handle on checkbox change
-   * 1) On change of the checkbox input, if `checked` is true, then set it to false and vice versa.
-   */
-  _clickHandler() {
-    return this.checked = !this.checked, this.checked ? this._internals.setFormValue(this.value || "on") : this._internals.setFormValue(null);
-  }
-  /**
-   * Handle On Change
-   * 1. Set the value when the select is changed.
-   * 2. Fire the custom event with the current value.
-   */
-  _handleOnChange(r) {
-    const c = r.target;
-    this.value = c.value, this._internals.setFormValue(this.value);
-    const h = new CustomEvent("change", {
-      detail: {
-        name: this.name,
-        value: this.value
-      },
-      bubbles: !0,
-      composed: !0
-    });
-    this.dispatchEvent(h);
-  }
-  /**
-   * Form reset callback
-   * 1) Set checked property to the default value and then set the input's checked attribute to that default value
-   * 2) Set the input's checked attribute to that default value
-   * 3) Set the element internals form data when the form is reset
-   * 4) Change the new value to the old value on reset
-   */
-  formResetCallback() {
-    this.checked = this.defaultValue, this.field.checked = this.defaultValue, this.setFormData(), this.requestUpdate();
-  }
-  /**
-   * First update lifecycle hook
-   * 1) super.firstUpdated also uses the firstUpdated from the Cre8FormElement
-   */
-  firstUpdated() {
-    return this.initializeAria(), super.firstUpdated();
-  }
-  /**
-   * Initialize aria attributes
-   */
-  initializeAria() {
-    this.fieldId = this.fieldId || l(), (this.fieldNote || this.slotNotEmpty("fieldNote")) && (this.ariaDescribedBy = this.ariaDescribedBy || l()), (this.successNote || this.errorNote) && (this.validationAriaDescribedBy = this.validationAriaDescribedBy || l());
-  }
-  /**
-   * Aria describedby string based on field notes and error/success notes
-   * 1) If both validationAriaDescribedBy (error/success note) and field note exists,
-   * render both in the input's `aria-describedby` attribute
-   * 2) Otherwise, if only validationAriaDescribedBy exists, then render only that as
-   * the `aria-describedby` attribute (input without field note initially, but then error/success is added).
-   * 3) Otherwise, render only the `ariaDescribedBy` property (field note only)
-   */
-  fieldNoteAria() {
-    return this.validationAriaDescribedBy && this.ariaDescribedBy ? `${this.ariaDescribedBy} ${this.validationAriaDescribedBy}` : this.validationAriaDescribedBy && !this.ariaDescribedBy ? this.validationAriaDescribedBy : this.ariaDescribedBy;
-  }
-  /**
-   * Render the success or error field notes
-   * 1. If there is a successNote, then return the field note with the success message and state.
-   * 2. If there is a errorNote, then return the field note with the error message and state.
-   */
-  renderSuccessErrorFieldNote() {
-    return this.successNote ? n`<cre8-field-note
+    /**
+     * Render the success or error field notes
+     * 1. If there is a successNote, then return the field note with the success message and state.
+     * 2. If there is a errorNote, then return the field note with the error message and state.
+     */
+    renderSuccessErrorFieldNote() {
+        if (this.successNote) {
+            /* 1 */
+            return html `<cre8-field-note
         ?isSuccess=${this.isSuccess}
         id=${this.validationAriaDescribedBy}
         class="cre8-c-checkbox-field-item__field-note-success"
         iconName="success"
       >
         <span class="cre8-u-is-vishidden">${this.successText}</span> ${this.successNote}
-      </cre8-field-note>` : this.errorNote ? n` <cre8-field-note
+      </cre8-field-note>`;
+        }
+        if (this.errorNote) {
+            /* 2 */
+            return html ` <cre8-field-note
         ?isError=${this.isError}
         id=${this.validationAriaDescribedBy}
         class="cre8-c-checkbox-field-item__field-note-error"
         iconName="error-alt"
       >
         <span class="cre8-u-is-vishidden">${this.errorText}</span> ${this.errorNote}
-      </cre8-field-note>` : null;
-  }
-  render() {
-    const r = this.componentClassNames("cre8-c-checkbox-field-item", {
-      "cre8-c-checkbox-field-item--error": this.isError,
-      "cre8-c-checkbox-field-item--success": this.isSuccess,
-      "cre8-c-checkbox-field-item--disabled": this.disabled
-    });
-    return n`
-      <div role=${a(this.getRole())} class="${r}">
+      </cre8-field-note>`;
+        }
+        return null;
+    }
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-checkbox-field-item', {
+            'cre8-c-checkbox-field-item--error': this.isError,
+            'cre8-c-checkbox-field-item--success': this.isSuccess,
+            'cre8-c-checkbox-field-item--disabled': this.disabled,
+        });
+        return html `
+      <div role=${ifDefined(this.getRole())} class="${componentClassNames}">
         <input class="cre8-c-checkbox-field-item__input"
           type="checkbox"
           @input=${this._clickHandler}
           id=${this.fieldId}
-          name=${this.name ?? void 0}
+          name=${this.name ?? undefined}
           .value=${this.value}
-          required=${a(this.required)}
-          aria-invalid=${this.required ? !!this.isError : a(this.isError)}
-          disabled="${a(this.disabled ? this.disabled : void 0)}"
-          aria-describedby="${a(this.fieldNoteAria())}"
+          required=${ifDefined(this.required)}
+          aria-invalid=${this.required ? !!this.isError : ifDefined(this.isError)}
+          disabled="${ifDefined(this.disabled ? this.disabled : undefined)}"
+          aria-describedby="${ifDefined(this.fieldNoteAria())}"
           .checked="${this.checked}"
           @change=${this._handleOnChange}
         />
         <span class="cre8-c-checkbox-field-item__custom-checkbox">
-          <cre8-icon svg='${y}' class="cre8-c-checkbox-field-item__icon" aria-label="checkbox"
+          <cre8-icon svg='${svgCheck}' class="cre8-c-checkbox-field-item__icon" aria-label="checkbox"
           aria-hidden="${!this.checked}"></cre8-icon>
         </span>
         <label class="cre8-c-checkbox-field-item__label" for=${this.fieldId}>${this.label}</label>
       </div>
-      ${this.fieldNote || this.slotNotEmpty("fieldNote") ? n`<cre8-field-note id=${this.ariaDescribedBy} class="cre8-c-checkbox-field-item__field-note"
+      ${this.fieldNote || this.slotNotEmpty('fieldNote')
+            ? html `<cre8-field-note id=${this.ariaDescribedBy} class="cre8-c-checkbox-field-item__field-note"
               ><slot name="fieldNote">${this.fieldNote}</slot></cre8-field-note
-            >` : f}
+            >`
+            : nothing}
         ${this.renderSuccessErrorFieldNote()}
     `;
-  }
-};
-s.styles = [x];
-let e = s;
-i([
-  t({ type: String })
-], e.prototype, "label");
-i([
-  t({ type: Boolean, reflect: !0 })
-], e.prototype, "isError");
-i([
-  t()
-], e.prototype, "errorText");
-i([
-  t()
-], e.prototype, "errorNote");
-i([
-  t({ type: Boolean, reflect: !0 })
-], e.prototype, "isSuccess");
-i([
-  t()
-], e.prototype, "successText");
-i([
-  t()
-], e.prototype, "successNote");
-i([
-  t({ type: Boolean, reflect: !0 })
-], e.prototype, "disabled");
-i([
-  t({ type: Boolean, reflect: !0 })
-], e.prototype, "checked");
-i([
-  t()
-], e.prototype, "fieldId");
-i([
-  t()
-], e.prototype, "fieldNote");
-i([
-  t()
-], e.prototype, "ariaDescribedBy");
-i([
-  t()
-], e.prototype, "validationAriaDescribedBy");
-i([
-  t({ type: Boolean, reflect: !0 })
-], e.prototype, "required");
-i([
-  t()
-], e.prototype, "fieldNoteIconName");
-i([
-  g("input")
-], e.prototype, "field");
-customElements.get("cre8-checkbox-field-item") === void 0 && customElements.define("cre8-checkbox-field-item", e);
-export {
-  e as Cre8CheckboxFieldItem,
-  e as default
-};
+    }
+}
+Cre8CheckboxFieldItem.styles = [styles];
+__decorate([
+    property({ type: String })
+], Cre8CheckboxFieldItem.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8CheckboxFieldItem.prototype, "isError", void 0);
+__decorate([
+    property()
+], Cre8CheckboxFieldItem.prototype, "errorText", void 0);
+__decorate([
+    property()
+], Cre8CheckboxFieldItem.prototype, "errorNote", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8CheckboxFieldItem.prototype, "isSuccess", void 0);
+__decorate([
+    property()
+], Cre8CheckboxFieldItem.prototype, "successText", void 0);
+__decorate([
+    property()
+], Cre8CheckboxFieldItem.prototype, "successNote", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8CheckboxFieldItem.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8CheckboxFieldItem.prototype, "checked", void 0);
+__decorate([
+    property()
+], Cre8CheckboxFieldItem.prototype, "fieldId", void 0);
+__decorate([
+    property()
+], Cre8CheckboxFieldItem.prototype, "fieldNote", void 0);
+__decorate([
+    property()
+], Cre8CheckboxFieldItem.prototype, "ariaDescribedBy", void 0);
+__decorate([
+    property()
+], Cre8CheckboxFieldItem.prototype, "validationAriaDescribedBy", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8CheckboxFieldItem.prototype, "required", void 0);
+__decorate([
+    property()
+], Cre8CheckboxFieldItem.prototype, "fieldNoteIconName", void 0);
+__decorate([
+    query('input')
+], Cre8CheckboxFieldItem.prototype, "field", void 0);
+if (customElements.get('cre8-checkbox-field-item') === undefined) {
+    customElements.define('cre8-checkbox-field-item', Cre8CheckboxFieldItem);
+}
+export default Cre8CheckboxFieldItem;
+//# sourceMappingURL=checkbox-field-item.js.map