@tmorrow/cre8-wc 1.0.25 → 1.1.1

package/lib/components/radio-field/radio-field.js

@@ -1,62 +1,26 @@
-import { css as p, html as f } from "lit";
+import { css as f, html as c } from "lit";
 import { ifDefined as l } from "lit-html/directives/if-defined.js";
-import { property as i } from "lit/decorators.js";
+import { property as t } from "lit/decorators.js";
 import { Cre8Element as m } from "../cre8-element.js";
 import "../field-note/field-note.js";
-const y = p`@import '../../design-tokens/core/scss/theming/component';
-
-/*------------------------------------*\
- #RADIO-FIELD
-\*------------------------------------*/
-
-:host {
-  display: flex;
-}
-
-/** 
- * 1) Fieldset used for radio items
- */
-.cre8-c-radio-field {
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-
-/** 
- * Radio field legend
- */
-.cre8-c-radio-field__legend {
-  @include cre8-typography-label-small;
-  margin-bottom: calc(8px * 1);
-}
-
-/** 
- * Radio field list
- * 1) Remove default margin and padding form radio field list
- */
-.cre8-c-radio-field__list {
-  display: flex;
-  flex-direction: column;
-  margin: 0; /* 1 */
-  padding: 0; /* 1 */
-}`;
-var u = Object.defineProperty, t = (c, r, a, g) => {
-  for (var o = void 0, s = c.length - 1, n; s >= 0; s--)
-    (n = c[s]) && (o = n(r, a, o) || o);
-  return o && u(r, a, o), o;
+const h = 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}:host{display:flex}.cre8-c-radio-field{border:none;padding:0;margin:0}.cre8-c-radio-field__legend{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);margin-bottom:0.5rem}.cre8-c-radio-field__list{display:flex;flex-direction:column;margin:0;padding:0}`;
+var y = Object.defineProperty, r = (d, a, n, g) => {
+  for (var i = void 0, s = d.length - 1, p; s >= 0; s--)
+    (p = d[s]) && (i = p(a, n, i) || i);
+  return i && y(a, n, i), i;
 };
-const d = class d extends m {
+const o = class o extends m {
   render() {
-    const r = this.componentClassNames("cre8-c-radio-field", {});
-    return f`
-      <fieldset class="${r}" aria-describedby="${l(this.ariaDescribedBy)}">
+    const a = this.componentClassNames("cre8-c-radio-field", {});
+    return c`
+      <fieldset class="${a}" aria-describedby="${l(this.ariaDescribedBy)}">
         <legend class="cre8-c-radio-field__legend">${this.label}</legend>
         <div class="cre8-c-radio-field__body">
           <ul class="cre8-c-radio-field__list" role="list">
             <slot></slot>
           </ul>
         </div>
-        ${this.fieldNote ? f`<cre8-field-note
+        ${this.fieldNote ? c`<cre8-field-note
           ?inverted=${this.fieldNoteKnockout}
           id=${l(this.ariaDescribedBy)}
           iconName=${l(this.fieldNoteIconName)}
@@ -69,28 +33,28 @@ const d = class d extends m {
     `;
   }
 };
-d.styles = [y];
-let e = d;
-t([
-  i()
+o.styles = [h];
+let e = o;
+r([
+  t()
 ], e.prototype, "fieldNote");
-t([
-  i()
+r([
+  t()
 ], e.prototype, "ariaDescribedBy");
-t([
-  i()
+r([
+  t()
 ], e.prototype, "fieldNoteIconName");
-t([
-  i({ type: Boolean, reflect: !0 })
+r([
+  t({ type: Boolean, reflect: !0 })
 ], e.prototype, "fieldNoteKnockout");
-t([
-  i({ type: Boolean, reflect: !0 })
+r([
+  t({ type: Boolean, reflect: !0 })
 ], e.prototype, "isSuccess");
-t([
-  i({ type: Boolean, reflect: !0 })
+r([
+  t({ type: Boolean, reflect: !0 })
 ], e.prototype, "isError");
-t([
-  i()
+r([
+  t()
 ], e.prototype, "label");
 customElements.get("cre8-radio-field") === void 0 && customElements.define("cre8-radio-field", e);
 export {

package/lib/components/radio-field/radio-field.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-field.styles.d.ts","sourceRoot":"","sources":["../../../components/radio-field/radio-field.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAoCV,CAAC;AACH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"radio-field.styles.d.ts","sourceRoot":"","sources":["../../../components/radio-field/radio-field.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAm0E,CAAC;AACh1E,eAAe,MAAM,CAAC"}

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

@@ -76,10 +76,6 @@ export declare class Cre8RadioFieldItem extends Cre8FormElement {
      * The label attribute is used to assign a value to the label element corresponding to this radio button.
      */
     label?: string;
-    /**
-     * The name attribute is used to assign a value to the name attribute of the input element in the DOM.
-     */
-    name?: string;
     /**
      * Required attribute
      *

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

@@ -1 +1 @@
-{"version":3,"file":"radio-field-item.d.ts","sourceRoot":"","sources":["../../../components/radio-field-item/radio-field-item.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,0BAA0B,CAAC;AAG9B;;;;GAIG;AAEP,qBAAa,kBAAmB,SAAQ,eAAe;IACnD,IAAI,SAAW;IAEf,MAAM,CAAC,MAAM,4BAAY;IAEzB;;;;OAIG;IAEC,eAAe,CAAC,EAAE,MAAM,CAAC;IAE7B;;;;OAIG;IAEC,OAAO,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;;OAKG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IAEC,KAAK,EAAG,gBAAgB,CAAC;IAE7B;;;OAGG;IAEC,OAAO,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IAEC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;;OAKG;IAEC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE/B;;;;OAIG;IAEC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAEhC;;;;OAIG;IAEC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE/B;;;;OAIG;IAEC,OAAO,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;OAIG;IAEC,SAAS,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IAEC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEC,IAAI,CAAC,EAAE,MAAM,CAAC;IAElB;;;;OAIG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,OAAO,CAAC,cAAc,CAAC,CAAU;IAEjC;;;;;OAKG;IACH,iBAAiB;IAQjB;;OAEG;IACI,UAAU;IAIjB;;OAEG;IACH,eAAe,CAAC,eAAe,EAAE,kBAAkB,EAAE;IAMrD;;;;OAIG;IACH,aAAa;IAYb;;;;;OAKG;IACH,iBAAiB,IAAI,IAAI;IAMzB;;OAEG;IACH,OAAO,CAAC,QAAQ;IAQhB;;;;OAIG;IACH,OAAO,CAAC,aAAa;IAUrB;;;;;;;;OAQG;IACH,OAAO,CAAC,cAAc;IAStB;;;;;;;;;;;OAWG;IACH,aAAa,CAAC,CAAC,EAAE,aAAa;IAgC9B,MAAM;CA0CT;AAMD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,uBAAuB,EAAE,kBAAkB,CAAC;KAC/C;CACJ;AAED,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"radio-field-item.d.ts","sourceRoot":"","sources":["../../../components/radio-field-item/radio-field-item.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,0BAA0B,CAAC;AAG9B;;;;GAIG;AAEP,qBAAa,kBAAmB,SAAQ,eAAe;IACnD,IAAI,SAAW;IAEf,MAAM,CAAC,MAAM,4BAAY;IAEzB;;;;OAIG;IAEC,eAAe,CAAC,EAAE,MAAM,CAAC;IAE7B;;;;OAIG;IAEC,OAAO,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;;OAKG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IAEC,KAAK,EAAG,gBAAgB,CAAC;IAE7B;;;OAGG;IAEC,OAAO,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IAEC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;;OAKG;IAEC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE/B;;;;OAIG;IAEC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAEhC;;;;OAIG;IAEC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE/B;;;;OAIG;IAEC,OAAO,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;OAIG;IAEC,SAAS,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IAEC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,OAAO,CAAC,cAAc,CAAC,CAAU;IAEjC;;;;;OAKG;IACH,iBAAiB;IAQjB;;OAEG;IACI,UAAU;IAIjB;;OAEG;IACH,eAAe,CAAC,eAAe,EAAE,kBAAkB,EAAE;IAMrD;;;;OAIG;IACH,aAAa;IAYb;;;;;OAKG;IACH,iBAAiB,IAAI,IAAI;IAMzB;;OAEG;IACH,OAAO,CAAC,QAAQ;IAQhB;;;;OAIG;IACH,OAAO,CAAC,aAAa;IAUrB;;;;;;;;OAQG;IACH,OAAO,CAAC,cAAc;IAStB;;;;;;;;;;;OAWG;IACH,aAAa,CAAC,CAAC,EAAE,aAAa;IAgC9B,MAAM;CA0CT;AAMD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,uBAAuB,EAAE,kBAAkB,CAAC;KAC/C;CACJ;AAED,eAAe,kBAAkB,CAAC"}

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

@@ -1,151 +1,16 @@
-import { css as p, html as u } from "lit";
-import { ifDefined as c } from "lit-html/directives/if-defined.js";
-import { property as o, query as m } from "lit/decorators.js";
-import { nanoid as h } from "nanoid";
+import { css as p, html as m } from "lit";
+import { ifDefined as a } from "lit-html/directives/if-defined.js";
+import { property as d, query as u } from "lit/decorators.js";
+import { nanoid as f } from "nanoid";
 import { Cre8FormElement as b } from "../cre8-form-element.js";
 import "../field-note/field-note.js";
-const y = p`@import '../../design-tokens/core/scss/theming/component.scss';
-/*------------------------------------*\
- #RADIO-FIELD-ITEM
-\*------------------------------------*/
-
-:host {
-  display: inline-flex;
-}
-
-/** 
- * 1) Form field that is compose of a radio input, label, and optional fieldnote.
- */
-.cre8-c-radio-field-item {
-  display: flex;
-  position: relative;
-  align-items: center;
-  margin-bottom: calc(8px * 1);
-  min-height: calc(8px * 3);
-
-  /** 
-  * 1) Form field that is compose of a radio input, label, and optional fieldnote.
-  */
-  :host(:last-child) & {
-    margin-bottom: 0;
-  }
-}
-
-/** 
-* Radio field item input 
-*/
-.cre8-c-radio-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;
-
-  .cre8-c-radio-field-item--disabled & {
-    cursor: not-allowed;
-  }
-}
-
-/** 
-* Radio field item custom radio container
-*/
-.cre8-c-radio-field-item__custom-radio {
-  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-round);
-  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);
-
-  /** 
-  * Radio field item custom radio focus visible  custom outline
-  */
-  .cre8-c-radio-field-item__input:focus-visible + & {
-    @include focus;
-
-    .cre8-c-radio-field-item--error & {
-      @include focusError;
-      border-color: var(--cre8-color-border-error);
-    }
-  }
-
-  /** 
-  * Radio field item custom radio within radio field with error
-  */
-  .cre8-c-radio-field-item--error & {
-    border-color: var(--cre8-color-border-error);
-  }
-
-  /** 
-  * Radio field item custom radio within radio field disabled
-  */
-  .cre8-c-radio-field-item--disabled & {
-    cursor: not-allowed;
-    background-color: var(--cre8-color-bg-disabled);
-    border-color: var(--cre8-color-border-disabled);
-  }
-}
-
-/** 
- * Radio field item inner circle
- */
-.cre8-c-radio-field-item__inner-circle {
-  display: none;
-
-  cursor: pointer;
-  height: calc(8px * 1.5);
-  width: calc(8px * 1.5);
-  background: var(--cre8-color-content-brand);
-  border-radius: var(--cre8-border-radius-round);
-
-  /** 
-  * Radio field item inner circle error
-  */
-  .cre8-c-radio-field-item--error & {
-    background: var(--cre8-color-bg-error-strong);
-  }
-
-  /** 
-  * Radio field item inner circle disabled
-  */
-  .cre8-c-radio-field-item--disabled & {
-    background: var(--cre8-color-content-disabled);
-  }
-
-  /** 
- * Radio field item inner circle will display if the input is checked
- */
-  .cre8-c-radio-field-item__input:checked + .cre8-c-radio-field-item__custom-radio & {
-    display: flex;
-  }
-}
-
-/** 
- * Radio field item input 
- */
-.cre8-c-radio-field-item__label {
-  margin-left: calc(8px * 4);
-  @include cre8-typography-label-small;
-}
-`;
-var _ = Object.defineProperty, t = (n, e, i, d) => {
-  for (var l = void 0, s = n.length - 1, f; s >= 0; s--)
-    (f = n[s]) && (l = f(e, i, l) || l);
-  return l && _(e, i, l), l;
+const y = p`*,::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}:host{display:inline-flex}.cre8-c-radio-field-item{display:flex;position:relative;align-items:center;margin-bottom:0.5rem;min-height:1.5rem}:host(:last-child) .cre8-c-radio-field-item{margin-bottom:0}.cre8-c-radio-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-radio-field-item--disabled .cre8-c-radio-field-item__input{cursor:not-allowed}.cre8-c-radio-field-item__custom-radio{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-round);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-radio-field-item__input:focus-visible+.cre8-c-radio-field-item__custom-radio{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-radio-field-item--error .cre8-c-radio-field-item__input:focus-visible+.cre8-c-radio-field-item__custom-radio{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-error);outline-offset:0.125rem;border-color:var(--cre8-color-border-error)}.cre8-c-radio-field-item--error .cre8-c-radio-field-item__custom-radio{border-color:var(--cre8-color-border-error)}.cre8-c-radio-field-item--disabled .cre8-c-radio-field-item__custom-radio{cursor:not-allowed;background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled)}.cre8-c-radio-field-item__inner-circle{display:none;cursor:pointer;height:0.75rem;width:0.75rem;background:var(--cre8-color-content-brand);border-radius:var(--cre8-border-radius-round)}.cre8-c-radio-field-item--error .cre8-c-radio-field-item__inner-circle{background:var(--cre8-color-bg-error-strong)}.cre8-c-radio-field-item--disabled .cre8-c-radio-field-item__inner-circle{background:var(--cre8-color-content-disabled)}.cre8-c-radio-field-item__input:checked+.cre8-c-radio-field-item__custom-radio .cre8-c-radio-field-item__inner-circle{display:flex}.cre8-c-radio-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)}`;
+var g = Object.defineProperty, t = (n, e, r, o) => {
+  for (var l = void 0, s = n.length - 1, h; s >= 0; s--)
+    (h = n[s]) && (l = h(e, r, l) || l);
+  return l && g(e, r, l), l;
 };
-const a = class a extends b {
+const c = class c extends b {
   constructor() {
     super(...arguments), this.type = "radio";
   }
@@ -156,20 +21,20 @@ const a = class a extends b {
    * 3) If a field note exists, set the aria-describedby attribute to make sure the field note is read out
    */
   connectedCallback() {
-    super.connectedCallback(), this.fieldId = this.fieldId || h(), this.fieldNote && (this.ariaDescribedBy = this.ariaDescribedBy || h());
+    super.connectedCallback(), this.fieldId = this.fieldId || f(), this.fieldNote && (this.ariaDescribedBy = this.ariaDescribedBy || f());
   }
   /**
    * Reset the radio field
    */
   resetField() {
-    this.internals.setFormValue(null);
+    this._internals.setFormValue(null);
   }
   /**
    * Reset the radio field items tab indeces
    */
   resetTabIndeces(e) {
-    e.forEach((i) => {
-      i.shadowRoot.querySelector(".cre8-c-radio-field-item__input").setAttribute("tabindex", "0");
+    e.forEach((r) => {
+      r.shadowRoot.querySelector(".cre8-c-radio-field-item__input").setAttribute("tabindex", "0");
     });
   }
   /**
@@ -178,8 +43,8 @@ const a = class a extends b {
    * 2) Reset the form field to not checked
    */
   removeChecked() {
-    this.parentNode && this.parentNode.querySelectorAll("cre8-radio-field-item").forEach((i) => {
-      i.checked = !1, i.shadowRoot.querySelector(".cre8-c-radio-field-item__input").setAttribute("tabindex", "-1"), i.resetField();
+    this.parentNode && this.parentNode.querySelectorAll("cre8-radio-field-item").forEach((r) => {
+      r.checked = !1, r.shadowRoot.querySelector(".cre8-c-radio-field-item__input").setAttribute("tabindex", "-1"), r.resetField();
     });
   }
   /**
@@ -205,7 +70,7 @@ const a = class a extends b {
   _clickHandler() {
     this.removeChecked(), this.checked = !this.checked;
     const e = this.shadowRoot?.querySelector(".cre8-c-radio-field-item__input");
-    return e && e.setAttribute("tabindex", "0"), this.checked ? this.internals.setFormValue(this.value || "on") : this.internals.setFormValue(null);
+    return e && e.setAttribute("tabindex", "0"), this.checked ? this._internals.setFormValue(this.value || "on") : this._internals.setFormValue(null);
   }
   /**
    * Handle sibling element updates during handleKeyDown function
@@ -216,8 +81,8 @@ const a = class a extends b {
    * 5) Set sibling element `tabindex` to `0`
    * 6) Set sibling element `checked` value
    */
-  _updateSibling(e, i, d) {
-    e.preventDefault(), this.removeChecked(), d.focus(), d.click(), d.setAttribute("tabindex", "0"), i.setAttribute("checked", "");
+  _updateSibling(e, r, o) {
+    e.preventDefault(), this.removeChecked(), o.focus(), o.click(), o.setAttribute("tabindex", "0"), r.setAttribute("checked", "");
   }
   /**
    * Handle keydown
@@ -233,20 +98,20 @@ const a = class a extends b {
    */
   handleKeyDown(e) {
     if (e.code === "ArrowLeft" || e.code === "ArrowUp") {
-      const i = this.previousElementSibling, d = i?.shadowRoot?.querySelector(
+      const r = this.previousElementSibling, o = r?.shadowRoot?.querySelector(
         ".cre8-c-radio-field-item__input:not([disabled])"
       );
-      d && this._updateSibling(e, i, d);
+      o && this._updateSibling(e, r, o);
     } else if (e.code === "ArrowRight" || e.code === "ArrowDown") {
-      const i = this.nextElementSibling, d = i?.shadowRoot?.querySelector(
+      const r = this.nextElementSibling, o = r?.shadowRoot?.querySelector(
         ".cre8-c-radio-field-item__input:not([disabled])"
       );
-      d && this._updateSibling(e, i, d);
+      o && this._updateSibling(e, r, o);
     } else if (e.code === "Tab" && !this.checked) {
-      const i = this.parentNode.querySelectorAll("cre8-radio-field-item");
-      i.forEach((d) => {
-        d.shadowRoot.querySelector(".cre8-c-radio-field-item__input").setAttribute("tabindex", "-1");
-      }), setTimeout(this.resetTabIndeces, 100, i);
+      const r = this.parentNode.querySelectorAll("cre8-radio-field-item");
+      r.forEach((o) => {
+        o.shadowRoot.querySelector(".cre8-c-radio-field-item__input").setAttribute("tabindex", "-1");
+      }), setTimeout(this.resetTabIndeces, 100, r);
     }
   }
   render() {
@@ -254,31 +119,31 @@ const a = class a extends b {
       "cre8-c-radio-field-item--error": this.isError,
       "cre8-c-radio-field-item--success": this.isSuccess,
       "cre8-c-radio-field-item--disabled": this.disabled
-    }), i = this.checked === !0 || this.initialChecked === !0;
-    return u`
-        <div role=${c(this._getRole())} class="${e}" @keydown=${this.handleKeyDown}>
+    }), r = this.checked === !0 || this.initialChecked === !0;
+    return m`
+        <div role=${a(this._getRole())} class="${e}" @keydown=${this.handleKeyDown}>
             <input
             class="cre8-c-radio-field-item__input"
             type="radio"
             @input=${this._clickHandler}
             id=${this.fieldId}
-            aria-describedby="${c(this.ariaDescribedBy)}"
-            required=${c(this.required)}
-            aria-invalid=${this.required ? !!this.isError : c(this.isError)}
+            aria-describedby="${a(this.ariaDescribedBy)}"
+            required=${a(this.required)}
+            aria-invalid=${this.required ? !!this.isError : a(this.isError)}
             name=${this.name}
             .value=${this.value}
-            disabled="${c(this.disabled)}"
-            .checked="${i}"
+            disabled="${a(this.disabled)}"
+            .checked="${r}"
             />
             <span class="cre8-c-radio-field-item__custom-radio">
             <div class="cre8-c-radio-field-item__inner-circle"></div>
             </span>
             <label class="cre8-c-radio-field-item__label" for=${this.fieldId}>${this.label}</label>
     </div>
-        ${this.fieldNote ? u`<cre8-field-note
+        ${this.fieldNote ? m`<cre8-field-note
                 ?inverted=${this.fieldNoteKnockout}
-                id=${c(this.ariaDescribedBy)}
-                iconName=${c(this.fieldNoteIconName)}
+                id=${a(this.ariaDescribedBy)}
+                iconName=${a(this.fieldNoteIconName)}
                 ?isSuccess=${this.isSuccess}
                 ?isError=${this.isError}
             >
@@ -287,52 +152,49 @@ const a = class a extends b {
         `;
   }
 };
-a.styles = [y];
-let r = a;
-t([
-  o()
-], r.prototype, "ariaDescribedBy");
+c.styles = [y];
+let i = c;
 t([
-  o({ type: Boolean, reflect: !0 })
-], r.prototype, "checked");
+  d()
+], i.prototype, "ariaDescribedBy");
 t([
-  o({ type: Boolean, reflect: !0 })
-], r.prototype, "disabled");
+  d({ type: Boolean, reflect: !0 })
+], i.prototype, "checked");
 t([
-  m("input")
-], r.prototype, "field");
+  d({ type: Boolean, reflect: !0 })
+], i.prototype, "disabled");
 t([
-  o()
-], r.prototype, "fieldId");
+  u("input")
+], i.prototype, "field");
 t([
-  o()
-], r.prototype, "fieldNote");
+  d()
+], i.prototype, "fieldId");
 t([
-  o()
-], r.prototype, "fieldNoteIconName");
+  d()
+], i.prototype, "fieldNote");
 t([
-  o({ type: Boolean, reflect: !0 })
-], r.prototype, "fieldNoteKnockout");
+  d()
+], i.prototype, "fieldNoteIconName");
 t([
-  o({ type: Boolean, reflect: !0 })
-], r.prototype, "fieldNoteIsError");
+  d({ type: Boolean, reflect: !0 })
+], i.prototype, "fieldNoteKnockout");
 t([
-  o({ type: Boolean, reflect: !0 })
-], r.prototype, "isError");
+  d({ type: Boolean, reflect: !0 })
+], i.prototype, "fieldNoteIsError");
 t([
-  o({ type: Boolean, reflect: !0 })
-], r.prototype, "isSuccess");
+  d({ type: Boolean, reflect: !0 })
+], i.prototype, "isError");
 t([
-  o()
-], r.prototype, "label");
+  d({ type: Boolean, reflect: !0 })
+], i.prototype, "isSuccess");
 t([
-  o()
-], r.prototype, "name");
+  d()
+], i.prototype, "label");
 t([
-  o({ type: Boolean, reflect: !0 })
-], r.prototype, "required");
-customElements.get("cre8-radio-field-item") === void 0 && customElements.define("cre8-radio-field-item", r);
+  d({ type: Boolean, reflect: !0 })
+], i.prototype, "required");
+customElements.get("cre8-radio-field-item") === void 0 && customElements.define("cre8-radio-field-item", i);
 export {
-  r as Cre8RadioFieldItem,
-  r as default
+  i as Cre8RadioFieldItem,
+  i as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"radio-field-item.styles.d.ts","sourceRoot":"","sources":["../../../components/radio-field-item/radio-field-item.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAuIX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"radio-field-item.styles.d.ts","sourceRoot":"","sources":["../../../components/radio-field-item/radio-field-item.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAA8vI,CAAC;AAC3wI,eAAe,MAAM,CAAC"}