@tmorrow/cre8-wc 1.1.2 → 1.1.3

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

@@ -1,212 +1,281 @@
-import { css as f, html as a, nothing as b } from "lit";
-import { ifDefined as o } from "lit-html/directives/if-defined.js";
-import { property as r, query as u } from "lit/decorators.js";
-import { nanoid as d } from "nanoid";
-import { s as x } from "../../icon-D22g8aWB.js";
-import "../field-note/field-note.js";
-import { Cre8FormElement as k } from "../cre8-form-element.js";
-const y = f`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}: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}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}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}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.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}}:host{display:inline-flex;flex-wrap:wrap}.cre8-c-checkbox-field-item{display:flex;position:relative;align-items:center;margin-bottom:0.5rem;min-height:1.5rem}:host(:last-child) .cre8-c-checkbox-field-item{margin-bottom:0}.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}.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__input{cursor:not-allowed}.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)}.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--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--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)}.cre8-c-checkbox-field-item__input:checked+.cre8-c-checkbox-field-item__custom-checkbox{background-color:var(--cre8-color-bg-brand-strong)}.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--disabled .cre8-c-checkbox-field-item__input:checked+.cre8-c-checkbox-field-item__custom-checkbox{background-color:var(--cre8-color-bg-disabled)}.cre8-c-checkbox-field-item__icon{display:none;color:var(--cre8-color-content-knockout)}.cre8-c-checkbox-field-item--error .cre8-c-checkbox-field-item__icon{color:var(--cre8-color-content-error)}.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__icon{color:var(--cre8-color-content-disabled)}.cre8-c-checkbox-field-item__input:checked+.cre8-c-checkbox-field-item__custom-checkbox .cre8-c-checkbox-field-item__icon{display:flex}.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)}.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 g = Object.defineProperty, i = (h, t, s, m) => {
-  for (var c = void 0, l = h.length - 1, p; l >= 0; l--)
-    (p = h[l]) && (c = p(t, s, c) || c);
-  return c && g(t, s, c), c;
+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;
 };
-const n = class n extends k {
-  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(t) {
-    const s = t.target;
-    this.value = s.value, this._internals.setFormValue(this.value);
-    const m = new CustomEvent("change", {
-      detail: {
-        name: this.name,
-        value: this.value
-      },
-      bubbles: !0,
-      composed: !0
-    });
-    this.dispatchEvent(m);
-  }
-  /**
-   * 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 || d(), (this.fieldNote || this.slotNotEmpty("fieldNote")) && (this.ariaDescribedBy = this.ariaDescribedBy || d()), (this.successNote || this.errorNote) && (this.validationAriaDescribedBy = this.validationAriaDescribedBy || d());
-  }
-  /**
-   * 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 ? a`<cre8-field-note
+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 '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Regular/Check.svg?raw';
+import styles from './checkbox-field-item.styles.js';
+import { Cre8FormElement } from '../cre8-form-element';
+/**
+ * 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.
+ */
+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';
+    }
+    /**
+     * 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 */
+    }
+    /**
+     * access role when check-box-field-item embedded in checkbox-field
+     */
+    getRole() {
+        const checkboxFieldContainer = this.closest('cre8-checkbox-field');
+        if (checkboxFieldContainer) {
+            return 'listitem';
+        }
+        return '';
+    }
+    /**
+     * 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 */
+    }
+    /**
+     * 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);
+    }
+    /**
+     * 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);
+    }
+    /**
+     * 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();
+    }
+    /**
+     * First update lifecycle hook
+     * 1) super.firstUpdated also uses the firstUpdated from the Cre8FormElement
+     */
+    firstUpdated() {
+        this.initializeAria(); /* 1 */
+        return super.firstUpdated();
+    }
+    /**
+     * 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();
+        }
+    }
+    /**
+     * 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 */
+    }
+    /**
+     * 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 ? a` <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 t = 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 a`
-      <div role=${o(this.getRole())} class="${t}">
+      </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=${o(this.required)}
-          aria-invalid=${this.required ? !!this.isError : o(this.isError)}
-          disabled="${o(this.disabled ? this.disabled : void 0)}"
-          aria-describedby="${o(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='${x}' 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") ? a`<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
-            >` : b}
+            >`
+            : nothing}
         ${this.renderSuccessErrorFieldNote()}
     `;
-  }
-};
-n.styles = [y];
-let e = n;
-i([
-  r({ type: String })
-], e.prototype, "label");
-i([
-  r({ type: Boolean, reflect: !0 })
-], e.prototype, "isError");
-i([
-  r()
-], e.prototype, "errorText");
-i([
-  r()
-], e.prototype, "errorNote");
-i([
-  r({ type: Boolean, reflect: !0 })
-], e.prototype, "isSuccess");
-i([
-  r()
-], e.prototype, "successText");
-i([
-  r()
-], e.prototype, "successNote");
-i([
-  r({ type: Boolean, reflect: !0 })
-], e.prototype, "disabled");
-i([
-  r({ type: Boolean, reflect: !0 })
-], e.prototype, "checked");
-i([
-  r()
-], e.prototype, "fieldId");
-i([
-  r()
-], e.prototype, "fieldNote");
-i([
-  r()
-], e.prototype, "ariaDescribedBy");
-i([
-  r()
-], e.prototype, "validationAriaDescribedBy");
-i([
-  r({ type: Boolean, reflect: !0 })
-], e.prototype, "required");
-i([
-  r()
-], e.prototype, "fieldNoteIconName");
-i([
-  u("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

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-field-item.js","sourceRoot":"","sources":["../../../components/checkbox-field-item/checkbox-field-item.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing, } from 'lit';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { property, query } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport '../icon/icon';\nimport '../field-note/field-note';\nimport svgCheck from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Regular/Check.svg?raw';\nimport styles from './checkbox-field-item.styles.js';\nimport { Cre8FormElement } from '../cre8-form-element';\n\n/**\n * Checkbox Field Item is the combination of a checkbox input, label and field note.\n * Checkboxes can turn an option on or off.\n *\n * Checkboxes should be used when the user is allowed to select one, none or multiple options\n * OR to \"opt-in\" (ex. I would like to receive the newsletter by email)\n * or as a required acknowledgement(ex. I've read the Terms and Conditions).\n * If the user can only chose one option from many, use `radio-field-item`.\n *\n * ## How to Use\n *\n * - A checkbox is independent of all other checkboxes in the list,\n *   so checking one box should not uncheck the others in the group.\n * - Place checkbox options one on top of another vertically. Do not display them in a row horizontally.\n * - Avoid disabled and read-only states as much as possible.\n *\n * ## Universal Form Field Rules\n * - Unless indicated with the \"(Optional)\" label, all fields are assumed required.\n *   Minimize the number of optional fields to keep forms as short as possible.\n * - Always include a label written in sentence case.\n * - Avoid using the read-only and disabled states as much as possible.\n */\nexport class Cre8CheckboxFieldItem extends Cre8FormElement {\n    readonly type = 'checkbox';\n\n    static styles = [styles];\n\n    /**\n     * The checkbox label\n     */\n    @property({ type: String })\n    label?: string;\n\n    /**\n     * Changes the component's treatment to represent an error state\n     * @attr {boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n    isError?: boolean;\n\n    /**\n     * Visually hidden text that always signifies that this is an error for screen reader usage\n     * @attr {string}\n     */\n    @property()\n    errorText: string = 'Error';\n\n    /**\n     * The error field note that appears below the default field note\n     */\n    @property()\n    errorNote?: string;\n\n    /**\n     * Changes the component's treatment to represent a success state\n     * @attr {boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n    isSuccess?: boolean;\n\n    /**\n     * Visually hidden text that always signifies that this is successful for screen reader usage\n     */\n    @property()\n    successText: string = 'Success';\n\n    /**\n     * The success field note that appears below the default field note\n     */\n    @property()\n    successNote?: string;\n\n    /**\n     * Disabled State\n     * @attr {boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n    disabled?: boolean;\n\n    /**\n     * Checked State\n     * @attr {boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n    checked?: boolean;\n\n    /**\n     * Checkbox FieldId\n     * @attr {string}\n     */\n    @property()\n    fieldId?: string;\n\n    /**\n     * Checkbox FieldNote\n     */\n    @property()\n    fieldNote?: string;\n\n    /**\n     * Checkbox fieldnote ariaDescribeBy\n     * @attr {string}\n     */\n    @property()\n    ariaDescribedBy?: string;\n\n    /**\n     * Additional aria-describedby connection to id for additional success and error notes to be accessible\n     */\n    @property()\n    validationAriaDescribedBy?: string;\n\n\n\n    /**\n     * Required property\n     * @attr {boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n    required?: boolean;\n\n    /**\n     * Checkbox fieldnote icon name\n     */\n    @property()\n    fieldNoteIconName?: string;\n\n    /**\n     * Get the input element within the shadow root and set it to this.field\n     */\n    @query('input')\n    field!: HTMLInputElement;\n\n    protected override defaultValue: boolean;\n\n    /**\n     * Connected callback lifecycle\n     * 1) Set the fieldID to a random string if not provided so form is always accessible\n     * 2) If a fieldnote is added, set the aria-describedby property to the `ariaDescribedBy` property\n     * or a random string to always make the form field accessible.\n     * 3) Set the form internal data to set that to the default checked state.\n     * 4) Set the default value of the checkbox field item to the checked property\n    */\n\n    connectedCallback() {\n        super.connectedCallback();\n        this.setFormData(); /* 3 */\n        this.defaultValue = this.checked; /* 4 */\n    }\n\n    /**\n     * access role when check-box-field-item embedded in checkbox-field\n     */\n    private getRole() {\n        const checkboxFieldContainer = this.closest('cre8-checkbox-field');\n        if (checkboxFieldContainer) {\n            return 'listitem';\n        }\n        return '';\n    }\n\n    /**\n     * Set form data\n     * 1) If a checked property is provided, set the form value the checkbox value attribute.\n     * Otherwise, don't provide a value for the checkbox data array\n     */\n    private setFormData() {\n        return this.checked ? this._internals.setFormValue(this.value || 'on') : this._internals.setFormValue(null); /* 1 */\n    }\n\n    /**\n     * Handle on checkbox change\n     * 1) On change of the checkbox input, if `checked` is true, then set it to false and vice versa.\n     */\n    private _clickHandler() {\n        this.checked = !this.checked; /* 2 */\n        return this.checked ? this._internals.setFormValue(this.value || 'on') : this._internals.setFormValue(null);\n    }\n\n    /**\n     * Handle On Change\n     * 1. Set the value when the select is changed.\n     * 2. Fire the custom event with the current value.\n     */\n    private _handleOnChange(e: Event) {\n        /* 1 */\n        const target = e.target as HTMLSelectElement;\n        this.value = target.value;\n        this._internals.setFormValue(this.value);\n\n        /* 2 */\n        const customEvent = new CustomEvent('change', {\n            detail: {\n                name: this.name,\n                value: this.value,\n            },\n            bubbles: true,\n            composed: true,\n        });\n        this.dispatchEvent(customEvent);\n    }\n\n    /**\n     * Form reset callback\n     * 1) Set checked property to the default value and then set the input's checked attribute to that default value\n     * 2) Set the input's checked attribute to that default value\n     * 3) Set the element internals form data when the form is reset\n     * 4) Change the new value to the old value on reset\n     */\n    formResetCallback(): void {\n        this.checked = this.defaultValue; /* 1 */\n        this.field.checked = this.defaultValue; /* 2 */\n        this.setFormData();\n        this.requestUpdate();\n    }\n\n    /**\n     * First update lifecycle hook\n     * 1) super.firstUpdated also uses the firstUpdated from the Cre8FormElement\n     */\n    firstUpdated() {\n        this.initializeAria(); /* 1 */\n        return super.firstUpdated();\n    }\n\n    /**\n     * Initialize aria attributes\n     */\n    initializeAria() {\n        this.fieldId = this.fieldId || nanoid();\n        if (this.fieldNote || this.slotNotEmpty('fieldNote')) {\n            this.ariaDescribedBy = this.ariaDescribedBy || nanoid();\n        }\n        if (this.successNote || this.errorNote) {\n            this.validationAriaDescribedBy = this.validationAriaDescribedBy || nanoid();\n        }\n    }\n\n    /**\n     * Aria describedby string based on field notes and error/success notes\n     * 1) If both validationAriaDescribedBy (error/success note) and field note exists,\n     * render both in the input's `aria-describedby` attribute\n     * 2) Otherwise, if only validationAriaDescribedBy exists, then render only that as\n     * the `aria-describedby` attribute (input without field note initially, but then error/success is added).\n     * 3) Otherwise, render only the `ariaDescribedBy` property (field note only)\n     */\n    fieldNoteAria(): string {\n        if (this.validationAriaDescribedBy && this.ariaDescribedBy) {\n            return `${this.ariaDescribedBy} ${this.validationAriaDescribedBy}`; /* 1 */\n        } if (this.validationAriaDescribedBy && !this.ariaDescribedBy) {\n            return this.validationAriaDescribedBy; /* 2 */\n        }\n        return this.ariaDescribedBy; /* 3 */\n    }\n\n    /**\n     * Render the success or error field notes\n     * 1. If there is a successNote, then return the field note with the success message and state.\n     * 2. If there is a errorNote, then return the field note with the error message and state.\n     */\n    renderSuccessErrorFieldNote() {\n        if (this.successNote) {\n            /* 1 */\n            return html`<cre8-field-note\n        ?isSuccess=${this.isSuccess}\n        id=${this.validationAriaDescribedBy}\n        class=\"cre8-c-checkbox-field-item__field-note-success\"\n        iconName=\"success\"\n      >\n        <span class=\"cre8-u-is-vishidden\">${this.successText}</span> ${this.successNote}\n      </cre8-field-note>`;\n        }\n        if (this.errorNote) {\n            /* 2 */\n            return html` <cre8-field-note\n        ?isError=${this.isError}\n        id=${this.validationAriaDescribedBy}\n        class=\"cre8-c-checkbox-field-item__field-note-error\"\n        iconName=\"error-alt\"\n      >\n        <span class=\"cre8-u-is-vishidden\">${this.errorText}</span> ${this.errorNote}\n      </cre8-field-note>`;\n        }\n        return null;\n    }\n\n    render() {\n        const componentClassNames = this.componentClassNames('cre8-c-checkbox-field-item', {\n            'cre8-c-checkbox-field-item--error': this.isError,\n            'cre8-c-checkbox-field-item--success': this.isSuccess,\n            'cre8-c-checkbox-field-item--disabled': this.disabled,\n        });\n\n        return html`\n      <div role=${ifDefined(this.getRole())} class=\"${componentClassNames}\">\n        <input class=\"cre8-c-checkbox-field-item__input\"\n          type=\"checkbox\"\n          @input=${this._clickHandler}\n          id=${this.fieldId}\n          name=${this.name ?? undefined}\n          .value=${this.value}\n          required=${ifDefined(this.required)}\n          aria-invalid=${this.required ? !!this.isError : ifDefined(this.isError)}\n          disabled=\"${ifDefined(this.disabled ? this.disabled : undefined)}\"\n          aria-describedby=\"${ifDefined(this.fieldNoteAria())}\"\n          .checked=\"${this.checked}\"\n          @change=${this._handleOnChange}\n        />\n        <span class=\"cre8-c-checkbox-field-item__custom-checkbox\">\n          <cre8-icon svg='${svgCheck}' class=\"cre8-c-checkbox-field-item__icon\" aria-label=\"checkbox\"\n          aria-hidden=\"${!this.checked}\"></cre8-icon>\n        </span>\n        <label class=\"cre8-c-checkbox-field-item__label\" for=${this.fieldId}>${this.label}</label>\n      </div>\n      ${this.fieldNote || this.slotNotEmpty('fieldNote')\n                ? html`<cre8-field-note id=${this.ariaDescribedBy} class=\"cre8-c-checkbox-field-item__field-note\"\n              ><slot name=\"fieldNote\">${this.fieldNote}</slot></cre8-field-note\n            >`\n                : nothing\n            }\n        ${this.renderSuccessErrorFieldNote()}\n    `;\n    }\n}\n\nif (customElements.get('cre8-checkbox-field-item') === undefined) {\n    customElements.define('cre8-checkbox-field-item', Cre8CheckboxFieldItem);\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-checkbox-field-item': Cre8CheckboxFieldItem;\n    }\n}\n\nexport default Cre8CheckboxFieldItem;\n"]}

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

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css `*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}: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}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}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}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.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}}:host{display:inline-flex;flex-wrap:wrap}.cre8-c-checkbox-field-item{display:flex;position:relative;align-items:center;margin-bottom:0.5rem;min-height:1.5rem}:host(:last-child) .cre8-c-checkbox-field-item{margin-bottom:0}.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}.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__input{cursor:not-allowed}.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)}.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--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--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)}.cre8-c-checkbox-field-item__input:checked+.cre8-c-checkbox-field-item__custom-checkbox{background-color:var(--cre8-color-bg-brand-strong)}.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--disabled .cre8-c-checkbox-field-item__input:checked+.cre8-c-checkbox-field-item__custom-checkbox{background-color:var(--cre8-color-bg-disabled)}.cre8-c-checkbox-field-item__icon{display:none;color:var(--cre8-color-content-knockout)}.cre8-c-checkbox-field-item--error .cre8-c-checkbox-field-item__icon{color:var(--cre8-color-content-error)}.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__icon{color:var(--cre8-color-content-disabled)}.cre8-c-checkbox-field-item__input:checked+.cre8-c-checkbox-field-item__custom-checkbox .cre8-c-checkbox-field-item__icon{display:flex}.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)}.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%}`;
+export default styles;
+//# sourceMappingURL=checkbox-field-item.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-field-item.styles.js","sourceRoot":"","sources":["../../../components/checkbox-field-item/checkbox-field-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,6xLAA6xL,CAAC;AAChzL,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}: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}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}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}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.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}}:host{display:inline-flex;flex-wrap:wrap}.cre8-c-checkbox-field-item{display:flex;position:relative;align-items:center;margin-bottom:0.5rem;min-height:1.5rem}:host(:last-child) .cre8-c-checkbox-field-item{margin-bottom:0}.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}.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__input{cursor:not-allowed}.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)}.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--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--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)}.cre8-c-checkbox-field-item__input:checked+.cre8-c-checkbox-field-item__custom-checkbox{background-color:var(--cre8-color-bg-brand-strong)}.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--disabled .cre8-c-checkbox-field-item__input:checked+.cre8-c-checkbox-field-item__custom-checkbox{background-color:var(--cre8-color-bg-disabled)}.cre8-c-checkbox-field-item__icon{display:none;color:var(--cre8-color-content-knockout)}.cre8-c-checkbox-field-item--error .cre8-c-checkbox-field-item__icon{color:var(--cre8-color-content-error)}.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__icon{color:var(--cre8-color-content-disabled)}.cre8-c-checkbox-field-item__input:checked+.cre8-c-checkbox-field-item__custom-checkbox .cre8-c-checkbox-field-item__icon{display:flex}.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)}.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%}`;\nexport default styles;\n"]}

package/lib/components/contexts/form-internals-context.js

@@ -0,0 +1,9 @@
+import { createContext } from '@lit/context';
+/**
+ * Context for sharing form element internals with descendant components.
+ * This allows nested components to access the parent form element's
+ * ElementInternals for form participation, validation, and ARIA.
+ */
+export const formInternalsContext = createContext(Symbol('cre8-form-internals'));
+export const formStateContext = createContext(Symbol('cre8-form-state'));
+//# sourceMappingURL=form-internals-context.js.map

package/lib/components/contexts/form-internals-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-internals-context.js","sourceRoot":"","sources":["../../../components/contexts/form-internals-context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAU7C;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAC7C,MAAM,CAAC,qBAAqB,CAAC,CAChC,CAAC;AAcF,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CACzC,MAAM,CAAC,iBAAiB,CAAC,CAC5B,CAAC","sourcesContent":["import { createContext } from '@lit/context';\n\n/**\n * Extended ElementInternals interface with form lifecycle callbacks\n */\nexport interface Cre8ElementInternals extends ElementInternals {\n    formResetCallback?: () => void;\n    ariaRole?: string;\n}\n\n/**\n * Context for sharing form element internals with descendant components.\n * This allows nested components to access the parent form element's\n * ElementInternals for form participation, validation, and ARIA.\n */\nexport const formInternalsContext = createContext<Cre8ElementInternals | null>(\n    Symbol('cre8-form-internals')\n);\n\n/**\n * Context for sharing form element state with descendants\n */\nexport interface FormElementState {\n    value: string;\n    disabled: boolean;\n    required: boolean;\n    isError: boolean;\n    isSuccess: boolean;\n    name?: string;\n}\n\nexport const formStateContext = createContext<FormElementState>(\n    Symbol('cre8-form-state')\n);\n"]}