@tmorrow/cre8-wc 1.0.25 → 1.1.1

package/lib/components/checkbox-field-item/checkbox-field-item.d.ts

@@ -85,11 +85,6 @@ export declare class Cre8CheckboxFieldItem extends Cre8FormElement {
      * Additional aria-describedby connection to id for additional success and error notes to be accessible
      */
     validationAriaDescribedBy?: string;
-    /**
-     * Checkbox name
-     * @attr {string}
-     */
-    name?: string;
     /**
      * Required property
      * @attr {boolean}

package/lib/components/checkbox-field-item/checkbox-field-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-field-item.d.ts","sourceRoot":"","sources":["../../../components/checkbox-field-item/checkbox-field-item.ts"],"names":[],"mappings":"AAIA,OAAO,cAAc,CAAC;AACtB,OAAO,0BAA0B,CAAC;AAGlC,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAAa,qBAAsB,SAAQ,eAAe;IACtD,QAAQ,CAAC,IAAI,cAAc;IAE3B,MAAM,CAAC,MAAM,4BAAY;IAE3B;;OAEG;IAEC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IAEC,OAAO,CAAC,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IAEC,SAAS,EAAE,MAAM,CAAW;IAEhC;;OAEG;IAEC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IAEC,SAAS,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IAEC,WAAW,EAAE,MAAM,CAAa;IAEpC;;OAEG;IAEC,WAAW,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IAEC,OAAO,CAAC,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IAEC,OAAO,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IAEC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IAEC,eAAe,CAAC,EAAE,MAAM,CAAC;IAE7B;;OAEG;IAEC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IAEvC;;;OAGG;IAEC,IAAI,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IAEC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE/B;;OAEG;IAEC,KAAK,EAAG,gBAAgB,CAAC;IAE7B,UAAmB,YAAY,EAAE,OAAO,CAAC;IAEzC;;;;;;;MAOE;IAEF,iBAAiB;IAMjB;;OAEG;IACH,OAAO,CAAC,OAAO;IAQf;;;;OAIG;IACH,OAAO,CAAC,WAAW;IAInB;;;OAGG;IACH,OAAO,CAAC,aAAa;IAKrB;;;;OAIG;IACH,OAAO,CAAC,eAAe;IAkBvB;;;;;;OAMG;IACH,iBAAiB,IAAI,IAAI;IAOzB;;;OAGG;IACH,YAAY;IAKZ;;OAEG;IACH,cAAc;IAUd;;;;;;;OAOG;IACH,aAAa,IAAI,MAAM;IASvB;;;;OAIG;IACH,2BAA2B;IA0B3B,MAAM;CAsCP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,0BAA0B,EAAE,qBAAqB,CAAC;KACnD;CACF;AAED,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"checkbox-field-item.d.ts","sourceRoot":"","sources":["../../../components/checkbox-field-item/checkbox-field-item.ts"],"names":[],"mappings":"AAIA,OAAO,cAAc,CAAC;AACtB,OAAO,0BAA0B,CAAC;AAGlC,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAAa,qBAAsB,SAAQ,eAAe;IACtD,QAAQ,CAAC,IAAI,cAAc;IAE3B,MAAM,CAAC,MAAM,4BAAY;IAEzB;;OAEG;IAEH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IAEH,SAAS,EAAE,MAAM,CAAW;IAE5B;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IAEH,WAAW,EAAE,MAAM,CAAa;IAEhC;;OAEG;IAEH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IAEH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IAEH,yBAAyB,CAAC,EAAE,MAAM,CAAC;IAInC;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IAEH,KAAK,EAAG,gBAAgB,CAAC;IAEzB,UAAmB,YAAY,EAAE,OAAO,CAAC;IAEzC;;;;;;;MAOE;IAEF,iBAAiB;IAMjB;;OAEG;IACH,OAAO,CAAC,OAAO;IAQf;;;;OAIG;IACH,OAAO,CAAC,WAAW;IAInB;;;OAGG;IACH,OAAO,CAAC,aAAa;IAKrB;;;;OAIG;IACH,OAAO,CAAC,eAAe;IAkBvB;;;;;;OAMG;IACH,iBAAiB,IAAI,IAAI;IAOzB;;;OAGG;IACH,YAAY;IAKZ;;OAEG;IACH,cAAc;IAUd;;;;;;;OAOG;IACH,aAAa,IAAI,MAAM;IASvB;;;;OAIG;IACH,2BAA2B;IA0B3B,MAAM;CAqCT;AAMD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,0BAA0B,EAAE,qBAAqB,CAAC;KACrD;CACJ;AAED,eAAe,qBAAqB,CAAC"}

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

@@ -1,184 +1,17 @@
-import { css as m, html as l, nothing as u } from "lit";
+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 c, query as p } from "lit/decorators.js";
-import { nanoid as a } from "nanoid";
-import { s as k } from "../../icon-DImqxDiW.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 x } from "../cre8-form-element.js";
-const y = m`
-@import '../../design-tokens/core/scss/theming/component.scss';
-@import '../../design-tokens/core/scss/theming/visibility.scss';
-
-/*------------------------------------*\
- #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: calc(8px * 1);
-  min-height: calc(8px * 3);
-
-  /** 
-  * Checkbox field item within last cre8-checkbox-field-item wrapper in a fieldset
-  * 1) Remove margin bottom on last item
-  */
-  :host(:last-child) & {
-    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: calc(8px * 3);
-  min-width: calc(8px * 3);
-  margin: 0;
-  z-index: 1;
-
-  /** 
- * Checkbox field item input error
- */
-  .cre8-c-checkbox-field-item--disabled & {
-    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: calc(8px * 3);
-  width: calc(8px * 3);
-  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 + & {
-    @include focus;
-
-    .cre8-c-checkbox-field-item--error & {
-      @include focusError;
-    }
-  }
-
-  /** 
-  * Checkbox field item custom checkbox within checkbox field with error
-  */
-  .cre8-c-checkbox-field-item--error & {
-    background-color: var(--cre8-color-bg-default);
-    border-color: var(--cre8-color-border-error);
-  }
-
-  /** 
-  * Checkbox field item custom checkbox within checkbox field with disabled
-  */
-  .cre8-c-checkbox-field-item--disabled & {
-    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 & {
-    background-color: var(--cre8-color-bg-default);
-  }
-
-  /** 
-  * Checkbox field item custom checkbox when item is checked with disabled
-  */
-  .cre8-c-checkbox-field-item--disabled & {
-    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 & {
-    color: var(--cre8-color-content-error);
-  }
-
-  /** 
-  * Checkbox field item icon within checkbox field disabled
-  */
-  .cre8-c-checkbox-field-item--disabled & {
-    color: var(--cre8-color-content-disabled);
-  }
-
-  /**
-  * 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 & {
-    display: flex;
-  }
-}
-
-/** 
- * Checkbox field item input 
- */
-.cre8-c-checkbox-field-item__label {
-  margin-left: calc(8px * 4);
-  @include cre8-typography-label-small;
-}
-
-/** 
- * 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 v = Object.defineProperty, i = (n, t, s, b) => {
-  for (var r = void 0, d = n.length - 1, f; d >= 0; d--)
-    (f = n[d]) && (r = f(t, s, r) || r);
-  return r && v(t, s, r), r;
+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;
 };
-const h = class h extends x {
+const n = class n extends k {
   constructor() {
     super(...arguments), this.type = "checkbox", this.errorText = "Error", this.successText = "Success";
   }
@@ -205,14 +38,14 @@ const h = class h extends x {
    * 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);
+    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);
+    return this.checked = !this.checked, this.checked ? this._internals.setFormValue(this.value || "on") : this._internals.setFormValue(null);
   }
   /**
    * Handle On Change
@@ -221,8 +54,8 @@ const h = class h extends x {
    */
   _handleOnChange(t) {
     const s = t.target;
-    this.value = s.value, this.internals.setFormValue(this.value);
-    const b = new CustomEvent("change", {
+    this.value = s.value, this._internals.setFormValue(this.value);
+    const m = new CustomEvent("change", {
       detail: {
         name: this.name,
         value: this.value
@@ -230,7 +63,7 @@ const h = class h extends x {
       bubbles: !0,
       composed: !0
     });
-    this.dispatchEvent(b);
+    this.dispatchEvent(m);
   }
   /**
    * Form reset callback
@@ -253,7 +86,7 @@ const h = class h extends x {
    * Initialize aria attributes
    */
   initializeAria() {
-    this.fieldId = this.fieldId || a(), (this.fieldNote || this.slotNotEmpty("fieldNote")) && (this.ariaDescribedBy = this.ariaDescribedBy || a()), (this.successNote || this.errorNote) && (this.validationAriaDescribedBy = this.validationAriaDescribedBy || a());
+    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
@@ -272,14 +105,14 @@ const h = class h extends x {
    * 2. If there is a errorNote, then return the field note with the error message and state.
    */
   renderSuccessErrorFieldNote() {
-    return this.successNote ? l`<cre8-field-note
+    return this.successNote ? a`<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 ? l` <cre8-field-note
+      </cre8-field-note>` : this.errorNote ? a` <cre8-field-note
         ?isError=${this.isError}
         id=${this.validationAriaDescribedBy}
         class="cre8-c-checkbox-field-item__field-note-error"
@@ -294,13 +127,13 @@ const h = class h extends x {
       "cre8-c-checkbox-field-item--success": this.isSuccess,
       "cre8-c-checkbox-field-item--disabled": this.disabled
     });
-    return l`
+    return a`
       <div role=${o(this.getRole())} class="${t}">
         <input class="cre8-c-checkbox-field-item__input"
           type="checkbox"
           @input=${this._clickHandler}
           id=${this.fieldId}
-          name=${this.name}
+          name=${this.name ?? void 0}
           .value=${this.value}
           required=${o(this.required)}
           aria-invalid=${this.required ? !!this.isError : o(this.isError)}
@@ -310,70 +143,67 @@ const h = class h extends x {
           @change=${this._handleOnChange}
         />
         <span class="cre8-c-checkbox-field-item__custom-checkbox">
-          <cre8-icon svg='${k}' class="cre8-c-checkbox-field-item__icon" aria-label="checkbox"
+          <cre8-icon svg='${x}' 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") ? l`<cre8-field-note id=${this.ariaDescribedBy} class="cre8-c-checkbox-field-item__field-note"
+      ${this.fieldNote || this.slotNotEmpty("fieldNote") ? a`<cre8-field-note id=${this.ariaDescribedBy} class="cre8-c-checkbox-field-item__field-note"
               ><slot name="fieldNote">${this.fieldNote}</slot></cre8-field-note
-            >` : u}
+            >` : b}
         ${this.renderSuccessErrorFieldNote()}
     `;
   }
 };
-h.styles = [y];
-let e = h;
+n.styles = [y];
+let e = n;
 i([
-  c({ type: String })
+  r({ type: String })
 ], e.prototype, "label");
 i([
-  c({ type: Boolean, reflect: !0 })
+  r({ type: Boolean, reflect: !0 })
 ], e.prototype, "isError");
 i([
-  c()
+  r()
 ], e.prototype, "errorText");
 i([
-  c()
+  r()
 ], e.prototype, "errorNote");
 i([
-  c({ type: Boolean, reflect: !0 })
+  r({ type: Boolean, reflect: !0 })
 ], e.prototype, "isSuccess");
 i([
-  c()
+  r()
 ], e.prototype, "successText");
 i([
-  c()
+  r()
 ], e.prototype, "successNote");
 i([
-  c({ type: Boolean, reflect: !0 })
+  r({ type: Boolean, reflect: !0 })
 ], e.prototype, "disabled");
 i([
-  c({ type: Boolean, reflect: !0 })
+  r({ type: Boolean, reflect: !0 })
 ], e.prototype, "checked");
 i([
-  c()
+  r()
 ], e.prototype, "fieldId");
 i([
-  c()
+  r()
 ], e.prototype, "fieldNote");
 i([
-  c()
+  r()
 ], e.prototype, "ariaDescribedBy");
 i([
-  c()
+  r()
 ], e.prototype, "validationAriaDescribedBy");
 i([
-  c()
-], e.prototype, "name");
-i([
-  c({ type: Boolean, reflect: !0 })
+  r({ type: Boolean, reflect: !0 })
 ], e.prototype, "required");
 i([
-  c()
+  r()
 ], e.prototype, "fieldNoteIconName");
 i([
-  p("input")
+  u("input")
 ], e.prototype, "field");
 customElements.get("cre8-checkbox-field-item") === void 0 && customElements.define("cre8-checkbox-field-item", e);
 export {

package/lib/components/checkbox-field-item/checkbox-field-item.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-field-item.styles.d.ts","sourceRoot":"","sources":["../../../components/checkbox-field-item/checkbox-field-item.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAuKV,CAAC;AACH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"checkbox-field-item.styles.d.ts","sourceRoot":"","sources":["../../../components/checkbox-field-item/checkbox-field-item.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAmyL,CAAC;AAChzL,eAAe,MAAM,CAAC"}

package/lib/components/contexts/form-internals-context.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Extended ElementInternals interface with form lifecycle callbacks
+ */
+export interface Cre8ElementInternals extends ElementInternals {
+    formResetCallback?: () => void;
+    ariaRole?: string;
+}
+/**
+ * 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 declare const formInternalsContext: {
+    __context__: Cre8ElementInternals;
+};
+/**
+ * Context for sharing form element state with descendants
+ */
+export interface FormElementState {
+    value: string;
+    disabled: boolean;
+    required: boolean;
+    isError: boolean;
+    isSuccess: boolean;
+    name?: string;
+}
+export declare const formStateContext: {
+    __context__: FormElementState;
+};
+//# sourceMappingURL=form-internals-context.d.ts.map

package/lib/components/contexts/form-internals-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-internals-context.d.ts","sourceRoot":"","sources":["../../../components/contexts/form-internals-context.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB;IAC1D,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;GAIG;AACH,eAAO,MAAM,oBAAoB;;CAEhC,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,gBAAgB;;CAE5B,CAAC"}

package/lib/components/cre8-form-element.d.ts

@@ -1,44 +1,67 @@
 import { Cre8Element } from './cre8-element';
+import { type Cre8ElementInternals, type FormElementState } from './contexts/form-internals-context';
+export { type Cre8ElementInternals, type FormElementState } from './contexts/form-internals-context';
+/**
+ * Base class for form-associated custom elements.
+ * Provides ElementInternals context to descendant components.
+ */
 export declare abstract class Cre8FormElement extends Cre8Element {
     /**
      * @internal
-     *
      * Tells the browser to treat the element like a form field.
      * Ties the element to the HTML form it is in.
-     *
      */
     static formAssociated: boolean;
-    abstract type: string;
     /**
-     * @protected
-     * @internal
-     *
-     * An instance of element internals.
-     * Contains properties and methods that allows the element
-     * to participate fully in the HTML form it's in.
+     * The type of form control (text, checkbox, radio, etc.)
      */
-    internals: ElementInternals;
+    abstract type: string;
     /**
      * @protected
      * @internal
-     *
      * Stores the value for the `value` getter and setter.
      */
-    internalValue: string;
-    protected name?: string;
+    protected internalValue: string;
+    /**
+     * The underlying HTML form field element.
+     * Should be implemented with `@query` in extending classes.
+     */
+    protected field?: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | HTMLButtonElement;
     /**
      * @internal
-     *
-     * Stores the intial value of the field so that it can be reset
+     * Stores the initial value for form reset functionality
      */
     protected defaultValue: string | boolean;
     /**
-     * @internal
-     * The underlying HTML form field.
-     * This should be implemented with `@query`
-     * in the implementing class.
+     * Provides ElementInternals to descendant components via context.
+     * Descendants can consume this to access form participation APIs.
+     */
+    _internals: Cre8ElementInternals;
+    /**
+     * Provides form element state to descendants via context.
+     * Useful for nested components that need to react to form state.
      */
-    abstract field: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | HTMLButtonElement;
+    _formState: FormElementState;
+    /**
+     * The name of the form field
+     */
+    name?: string;
+    /**
+     * Whether the field is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the field is required
+     */
+    required?: boolean;
+    /**
+     * Whether the field is in an error state
+     */
+    isError?: boolean;
+    /**
+     * Whether the field is in a success state
+     */
+    isSuccess?: boolean;
     /**
      * The value of the form field.
      */
@@ -46,17 +69,68 @@ export declare abstract class Cre8FormElement extends Cre8Element {
     /**
      * Sets the value of the form field.
      * 1. Stores the new value so it can be retrieved by the getter.
-     * 2. Sets the current value of the control.
-     * 3. Updates the actual field.
-     * 4. Rerenders the component.
+     * 2. Sets the current value of the control via ElementInternals.
+     * 3. Updates the actual field element.
+     * 4. Updates the form state context.
+     * 5. Triggers a re-render.
      */
     set value(newValue: string);
     /**
-     * update the actual field's value
+     * Updates the form state context for descendant consumption
+     */
+    protected updateFormState(): void;
+    /**
+     * Updates the actual field element's value
      */
     protected updateField(): void;
+    /**
+     * Lifecycle hook called after first render
+     */
     protected firstUpdated(): void;
+    /**
+     * Called when properties change
+     */
+    protected updated(changedProperties: Map<PropertyKey, unknown>): void;
+    /**
+     * Form lifecycle callback - called when the form is reset
+     */
     formResetCallback(): void;
+    /**
+     * Form lifecycle callback - called when the element is disabled via fieldset
+     */
+    formDisabledCallback(disabled: boolean): void;
+    /**
+     * Form lifecycle callback - called when form state is restored
+     */
+    formStateRestoreCallback(state: string | FormData | null, _mode: 'restore' | 'autocomplete'): void;
+    /**
+     * Gets the form associated with this element
+     */
+    get form(): HTMLFormElement | null;
+    /**
+     * Gets the validation message
+     */
+    get validationMessage(): string;
+    /**
+     * Gets the validity state
+     */
+    get validity(): ValidityState | undefined;
+    /**
+     * Gets whether the element will be validated
+     */
+    get willValidate(): boolean;
+    /**
+     * Checks validity and reports to the user
+     */
+    reportValidity(): boolean;
+    /**
+     * Checks validity without reporting
+     */
+    checkValidity(): boolean;
+    /**
+     * Sets a custom validity message
+     */
+    setCustomValidity(message: string): void;
     constructor();
 }
 export default Cre8FormElement;

package/lib/components/cre8-form-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cre8-form-element.d.ts","sourceRoot":"","sources":["../../components/cre8-form-element.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAM7C,8BAAsB,eAAgB,SAAQ,WAAW;IACvD;;;;;;OAMG;IACD,MAAM,CAAC,cAAc,UAAQ;IAE/B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAEtB;;;;;;;OAOG;IACH,SAAS,EAAE,gBAAgB,CAAC;IAG5B;;;;;OAKG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB,SAAS,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IACvB;;;;OAIG;IACH,SAAS,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC;IAEzC;;;;;OAKG;IACH,QAAQ,CAAC,KAAK,EAAE,gBAAgB,GAAG,iBAAiB,GAAG,mBAAmB,GAAG,iBAAiB,CAAC;IAE/F;;OAEG;IACH,IACI,KAAK,IAWW,MAAM,CATzB;IAED;;;;;;OAMG;IACH,IAAI,KAAK,CAAC,QAAQ,EAAE,MAAM,EAYzB;IAED;;OAEG;IACH,SAAS,CAAC,WAAW;IAMrB,SAAS,CAAC,YAAY;IAOtB,iBAAiB;;CASlB;AAED,eAAe,eAAe,CAAC"}
+{"version":3,"file":"cre8-form-element.d.ts","sourceRoot":"","sources":["../../components/cre8-form-element.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAGH,KAAK,oBAAoB,EACzB,KAAK,gBAAgB,EACxB,MAAM,mCAAmC,CAAC;AAE3C,OAAO,EAAE,KAAK,oBAAoB,EAAE,KAAK,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAErG;;;GAGG;AACH,8BAAsB,eAAgB,SAAQ,WAAW;IACrD;;;;OAIG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;OAEG;IACH,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAEtB;;;;OAIG;IACH,SAAS,CAAC,aAAa,EAAE,MAAM,CAAM;IAErC;;;OAGG;IACH,SAAS,CAAC,KAAK,CAAC,EAAE,gBAAgB,GAAG,iBAAiB,GAAG,mBAAmB,GAAG,iBAAiB,CAAC;IAEjG;;;OAGG;IACH,SAAS,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAAM;IAE9C;;;OAGG;IAEH,UAAU,EAAE,oBAAoB,CAAC;IAEjC;;;OAGG;IAEH,UAAU,EAAE,gBAAgB,CAM1B;IAEF;;OAEG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,IACI,KAAK,IAAI,MAAM,CAElB;IAED;;;;;;;OAOG;IACH,IAAI,KAAK,CAAC,QAAQ,EAAE,MAAM,EAYzB;IAED;;OAEG;IACH,SAAS,CAAC,eAAe,IAAI,IAAI;IAWjC;;OAEG;IACH,SAAS,CAAC,WAAW,IAAI,IAAI;IAM7B;;OAEG;IACH,SAAS,CAAC,YAAY,IAAI,IAAI;IAQ9B;;OAEG;IACH,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,IAAI;IAerE;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAKzB;;OAEG;IACH,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAI7C;;OAEG;IACH,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,QAAQ,GAAG,IAAI,EAAE,KAAK,EAAE,SAAS,GAAG,cAAc,GAAG,IAAI;IAMlG;;OAEG;IACH,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAED;;OAEG;IACH,IAAI,iBAAiB,IAAI,MAAM,CAE9B;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,aAAa,GAAG,SAAS,CAExC;IAED;;OAEG;IACH,IAAI,YAAY,IAAI,OAAO,CAE1B;IAED;;OAEG;IACH,cAAc,IAAI,OAAO;IAIzB;;OAEG;IACH,aAAa,IAAI,OAAO;IAIxB;;OAEG;IACH,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;;CAc3C;AAED,eAAe,eAAe,CAAC"}