@tmorrow/cre8-wc 1.0.25 → 1.0.26

package/lib/components/band/band.js

@@ -1,19 +1,237 @@
-import { css as d, html as h } from "lit";
-import { property as s } from "lit/decorators.js";
-import { Cre8Element as m } from "../cre8-element.js";
-const p = d`@import '../../design-tokens/core/scss/theming/component';
+import { css as h, html as c } from "lit";
+import { property as l } from "lit/decorators.js";
+import { Cre8Element as u } from "../cre8-element.js";
+const m = h`/**
+ * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
+ */
+*,
+::slotted(*),
+*:before,
+*:after {
+  box-sizing: border-box;
+}
 
-// #BAND
+: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
+ */
+/*
+=======
+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;
+    }
+  }
+  @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;
+}
+
+/**
+ * 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
+ */
 /**
  * 1) A container with a background that can house various recipes of Components within
  */
 .cre8-c-band {
   background: var(--cre8-color-bg-subtle);
-  padding: calc(8px * 3) 0;
-
-  @media all and (min-width:$cre8-breakpoint-xl) {
-    padding: calc(8px * 4) 0;
+  padding: 24px 0;
+}
+@media all and (min-width: 1200px) {
+  .cre8-c-band {
+    padding: 32px 0;
   }
 }
 
@@ -32,32 +250,33 @@ const p = d`@import '../../design-tokens/core/scss/theming/component';
 .cre8-c-band--full-height {
   height: 100%;
 }
+  /* sourceMappingURL=band.module.css.map */
 `;
-var u = Object.defineProperty, l = (a, r, c, b) => {
-  for (var e = void 0, n = a.length - 1, i; n >= 0; n--)
-    (i = a[n]) && (e = i(r, c, e) || e);
-  return e && u(r, c, e), e;
+var f = Object.defineProperty, d = (s, r, o, p) => {
+  for (var e = void 0, a = s.length - 1, n; a >= 0; a--)
+    (n = s[a]) && (e = n(r, o, e) || e);
+  return e && f(r, o, e), e;
 };
-const o = class o extends m {
+const i = class i extends u {
   render() {
     const r = this.componentClassNames("cre8-c-band", {
       "cre8-c-band--branded": this.variant === "branded",
       "cre8-c-band--full-height": this.fullHeight === !0
     });
-    return h`
+    return c`
       <div class="${r}">
         <slot></slot>
       </div>
     `;
   }
 };
-o.styles = [p];
-let t = o;
-l([
-  s()
+i.styles = [m];
+let t = i;
+d([
+  l()
 ], t.prototype, "variant");
-l([
-  s({ type: Boolean, reflect: !0 })
+d([
+  l({ type: Boolean, reflect: !0 })
 ], t.prototype, "fullHeight");
 customElements.get("cre8-band") === void 0 && customElements.define("cre8-band", t);
 export {

package/lib/components/band/band.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"band.styles.d.ts","sourceRoot":"","sources":["../../../components/band/band.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBA+BX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"band.styles.d.ts","sourceRoot":"","sources":["../../../components/band/band.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBA0PX,CAAC;AACF,eAAe,MAAM,CAAC"}

package/lib/components/button/button.js

@@ -896,11 +896,11 @@ const d = class d extends h {
     super(...arguments), this.text = "Button", this.variant = "primary", this.type = "button", this.iconRotateDegree = 0, this.iconPosition = void 0, this.size = "md", this.ariaLive = "assertive";
   }
   formSubmit() {
-    const t = this.internals.form;
+    const t = this._internals.form;
     t && t.requestSubmit();
   }
   formReset() {
-    const t = this.internals.form;
+    const t = this._internals.form;
     t && t.reset();
   }
   generateIconBefore() {

package/lib/components/button-group/button-group.js

@@ -1,12 +1,230 @@
-import { css as c, html as p } from "lit";
-import { property as a } from "lit/decorators.js";
-import { Cre8Element as d } from "../cre8-element.js";
-const u = c`@import '../../design-tokens/core/scss/theming/component';
+import { css as l, html as d } from "lit";
+import { property as u } from "lit/decorators.js";
+import { Cre8Element as h } from "../cre8-element.js";
+const p = l`/**
+ * 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
+ */
+/**
+ * Visually hidden from display
+ */
+/*
+=======
+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;
+    }
+  }
+  @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;
+}
+
+/**
+ * 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
+ */
 /*------------------------------------*\
  #BUTTON-GROUP
 \*------------------------------------*/
-
 :host {
   display: inline-flex;
 }
@@ -17,7 +235,7 @@ const u = c`@import '../../design-tokens/core/scss/theming/component';
 .cre8-c-button-group {
   display: flex;
   flex-wrap: wrap;
-  gap: calc(8px * 2);
+  gap: 16px;
 }
 
 /**
@@ -25,38 +243,40 @@ const u = c`@import '../../design-tokens/core/scss/theming/component';
   */
 .cre8-c-button-group--responsive-full-width {
   flex-direction: column;
-    --cre8-button-width: 100%;
-
-  @media all and (min-width:$cre8-breakpoint-md) {
+  --cre8-button-width: 100%;
+}
+@media all and (min-width: 768px) {
+  .cre8-c-button-group--responsive-full-width {
     flex-direction: row;
     --cre8-button-width: auto;
- }
+  }
 }
+  /* sourceMappingURL=button-group.module.css.map */
 `;
-var m = Object.defineProperty, f = (n, e, i, h) => {
-  for (var t = void 0, r = n.length - 1, l; r >= 0; r--)
-    (l = n[r]) && (t = l(e, i, t) || t);
-  return t && m(e, i, t), t;
+var c = Object.defineProperty, f = (o, t, a, m) => {
+  for (var e = void 0, i = o.length - 1, n; i >= 0; i--)
+    (n = o[i]) && (e = n(t, a, e) || e);
+  return e && c(t, a, e), e;
 };
-const s = class s extends d {
+const s = class s extends h {
   render() {
-    const e = this.componentClassNames("cre8-c-button-group", {
+    const t = this.componentClassNames("cre8-c-button-group", {
       "cre8-c-button-group--responsive-full-width": this.orientation === "responsive-full-width"
     });
-    return p`
-      <div class="${e}">
+    return d`
+      <div class="${t}">
         <slot></slot>
       </div>
     `;
   }
 };
-s.styles = [u];
-let o = s;
+s.styles = [p];
+let r = s;
 f([
-  a()
-], o.prototype, "orientation");
-customElements.get("cre8-button-group") === void 0 && customElements.define("cre8-button-group", o);
+  u()
+], r.prototype, "orientation");
+customElements.get("cre8-button-group") === void 0 && customElements.define("cre8-button-group", r);
 export {
-  o as Cre8ButtonGroup,
-  o as default
+  r as Cre8ButtonGroup,
+  r as default
 };

package/lib/components/button-group/button-group.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button-group.styles.d.ts","sourceRoot":"","sources":["../../../components/button-group/button-group.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBA+BX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"button-group.styles.d.ts","sourceRoot":"","sources":["../../../components/button-group/button-group.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBA2PX,CAAC;AACF,eAAe,MAAM,CAAC"}

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

@@ -205,14 +205,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,7 +221,7 @@ const h = class h extends x {
    */
   _handleOnChange(t) {
     const s = t.target;
-    this.value = s.value, this.internals.setFormValue(this.value);
+    this.value = s.value, this._internals.setFormValue(this.value);
     const b = new CustomEvent("change", {
       detail: {
         name: this.name,
@@ -300,7 +300,7 @@ const h = class h extends x {
           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)}
@@ -363,9 +363,6 @@ i([
 i([
   c()
 ], e.prototype, "validationAriaDescribedBy");
-i([
-  c()
-], e.prototype, "name");
 i([
   c({ type: Boolean, reflect: !0 })
 ], e.prototype, "required");