@tmorrow/cre8-wc 1.2.4 → 1.2.5

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

@@ -1,920 +1,243 @@
-import { css as h, html as p } from "lit";
-import { ifDefined as d } from "lit-html/directives/if-defined.js";
-import { property as a, query as g } from "lit/decorators.js";
-import { nanoid as u } from "nanoid";
-import { C as f } from "../../cre8-form-element-BymRdQUC.js";
-import "../field-note/field-note.js";
-const b = h`.cre8-u-content-knockout-brand {
-  color: var(----cre8-color-content-knockout-brand);
-}
-
-.cre8-u-is-hidden {
-  display: none !important;
-  visibility: hidden !important;
-}
-
-.cre8-u-is-vishidden {
-  position: absolute !important;
-  overflow: hidden;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  border: 0;
-  clip: rect(1px, 1px, 1px, 1px);
-}
-
-@media all and (min-width: 23.4375rem) {
-  .cre8-u-hide-sm {
-    display: none !important;
-  }
-}
-@media all and (min-width: 35rem) {
-  .cre8-u-hide-sm-2 {
-    display: none !important;
-  }
-}
-@media all and (min-width: 48rem) {
-  .cre8-u-hide-md {
-    display: none !important;
-  }
-}
-@media all and (min-width: 60rem) {
-  .cre8-u-hide-lg {
-    display: none !important;
-  }
-}
-@media all and (min-width: 75rem) {
-  .cre8-u-hide-xl {
-    display: none !important;
-  }
-}
-@media all and (max-width: 23.4375rem) {
-  .cre8-u-show-sm {
-    display: none !important;
-  }
-}
-@media all and (max-width: 35rem) {
-  .cre8-u-show-sm-2 {
-    display: none !important;
-  }
-}
-@media all and (max-width: 48rem) {
-  .cre8-u-show-md {
-    display: none !important;
-  }
-}
-@media all and (max-width: 60rem) {
-  .cre8-u-show-lg {
-    display: none !important;
-  }
-}
-@media all and (max-width: 75rem) {
-  .cre8-u-show-xl {
-    display: none !important;
-  }
-}
-.cre8-u-margin-none {
-  margin: 0 !important;
-}
-
-.cre8-u-margin-sm {
-  margin: size(1) !important;
-}
-
-.cre8-u-margin-md {
-  margin: size(2) !important;
-}
-
-.cre8-u-margin-lg {
-  margin: size(3) !important;
-}
-
-.cre8-u-margin-xl {
-  margin: size(4) !important;
-}
-
-.cre8-u-margin-xxl {
-  margin: size(8) !important;
-}
-
-.cre8-u-margin-top-none {
-  margin-top: 0 !important;
-}
-
-.cre8-u-margin-top-sm {
-  margin-top: size(1) !important;
-}
-
-.cre8-u-margin-top-md {
-  margin-top: size(2) !important;
-}
-
-.cre8-u-margin-top-lg {
-  margin-top: size(3) !important;
-}
-
-.cre8-u-margin-top-xl {
-  margin-top: size(4) !important;
-}
-
-.cre8-u-margin-top-xxl {
-  margin-top: size(8) !important;
-}
-
-.cre8-u-margin-right-none {
-  margin-right: 0 !important;
-}
-
-.cre8-u-margin-right-sm {
-  margin-right: size(1) !important;
-}
-
-.cre8-u-margin-right-md {
-  margin-right: size(2) !important;
-}
-
-.cre8-u-margin-right-lg {
-  margin-right: size(3) !important;
-}
-
-.cre8-u-margin-right-xl {
-  margin-right: size(4) !important;
-}
-
-.cre8-u-margin-right-xxl {
-  margin-right: size(8) !important;
-}
-
-.cre8-u-margin-bottom-none {
-  margin-bottom: 0 !important;
-}
-
-.cre8-u-margin-bottom-sm {
-  margin-bottom: size(1) !important;
-}
-
-.cre8-u-margin-bottom-md {
-  margin-bottom: size(2) !important;
-}
-
-.cre8-u-margin-bottom-lg {
-  margin-bottom: size(3) !important;
-}
-
-.cre8-u-margin-bottom-xl {
-  margin-bottom: size(4) !important;
-}
-
-.cre8-u-margin-bottom-xxl {
-  margin-bottom: size(8) !important;
-}
-
-.cre8-u-margin-bottom-xl-xxl {
-  margin-bottom: size(4) !important;
-}
-
-@media all and (min-width: 768px) {
-  .cre8-u-margin-bottom-xl-xxl {
-    margin-bottom: size(8) !important;
-  }
-}
-.cre8-u-margin-left-none {
-  margin-left: 0 !important;
-}
-
-.cre8-u-margin-left-sm {
-  margin-left: size(1) !important;
-}
-
-.cre8-u-margin-left-md {
-  margin-left: size(2) !important;
-}
-
-.cre8-u-margin-left-lg {
-  margin-left: size(3) !important;
-}
-
-.cre8-u-margin-left-xl {
-  margin-left: size(4) !important;
-}
-
-.cre8-u-margin-left-xxl {
-  margin-left: size(8) !important;
-}
-
-.cre8-u-padding-none {
-  padding: 0 !important;
-}
-
-.cre8-u-padding-sm {
-  padding: size(1) !important;
-}
-
-.cre8-u-padding-md {
-  padding: size(2) !important;
-}
-
-.cre8-u-padding-lg {
-  padding: size(3) !important;
-}
-
-.cre8-u-padding-xl {
-  padding: size(4) !important;
-}
-
-.cre8-u-padding-xxl {
-  padding: size(8) !important;
-}
-
-.cre8-u-padding-top-none {
-  padding-top: 0 !important;
-}
-
-.cre8-u-padding-top-sm {
-  padding-top: size(1) !important;
-}
-
-.cre8-u-padding-top-md {
-  padding-top: size(2) !important;
-}
-
-.cre8-u-padding-top-lg {
-  padding-top: size(3) !important;
-}
-
-.cre8-u-padding-top-xl {
-  padding-top: size(4) !important;
-}
-
-.cre8-u-padding-top-xxl {
-  padding-top: size(8) !important;
-}
-
-.cre8-u-padding-right-none {
-  padding-right: 0 !important;
-}
-
-.cre8-u-padding-right-sm {
-  padding-right: size(1) !important;
-}
-
-.cre8-u-padding-right-md {
-  padding-right: size(2) !important;
-}
-
-.cre8-u-padding-right-lg {
-  padding-right: size(3) !important;
-}
-
-.cre8-u-padding-right-xl {
-  padding-right: size(4) !important;
-}
-
-.cre8-u-padding-right-xxl {
-  padding-right: size(8) !important;
-}
-
-.cre8-u-padding-bottom-none {
-  padding-bottom: 0 !important;
-}
-
-.cre8-u-padding-bottom-sm {
-  padding-bottom: size(1) !important;
-}
-
-.cre8-u-padding-bottom-md {
-  padding-bottom: size(2) !important;
-}
-
-.cre8-u-padding-bottom-lg {
-  padding-bottom: size(3) !important;
-}
-
-.cre8-u-padding-bottom-xl {
-  padding-bottom: size(4) !important;
-}
-
-.cre8-u-padding-bottom-xxl {
-  padding-bottom: size(8) !important;
-}
-
-.cre8-u-padding-left-none {
-  padding-left: 0 !important;
-}
-
-.cre8-u-padding-left-sm {
-  padding-left: size(1) !important;
-}
-
-.cre8-u-padding-left-md {
-  padding-left: size(2) !important;
-}
-
-.cre8-u-padding-left-lg {
-  padding-left: size(3) !important;
-}
-
-.cre8-u-padding-left-xl {
-  padding-left: size(4) !important;
-}
-
-.cre8-u-padding-left-xxl {
-  padding-left: size(8) !important;
-}
-
-.cre8-u-display-flex {
-  display: flex !important;
-}
-
-.cre8-u-display-block {
-  display: block !important;
-}
-
-body {
-  font-family: var(--cre8-typography-body-default-font-family);
-  font-size: var(--cre8-typography-body-default-font-size);
-  font-weight: var(--cre8-typography-body-default-font-weight);
-  line-height: var(--cre8-typography-body-default-line-height);
-  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);
-  text-decoration: var(--cre8-typography-body-default-text-decoration);
-  text-transform: var(--cre8-typography-body-default-text-transform);
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  margin: 0;
-  color: var(--cre8-color-content-default);
-  background: var(--background-default);
-}
-
-@media all and (min-width: 60rem) {
-  .page-container {
-    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);
-  }
-}
-.band__inner {
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-
-@media all and (min-width: 60rem) {
-  .band__inner {
-    margin-right: 0;
-  }
-}
-img {
-  max-width: 100%;
-  height: auto;
-}
-
-/**
- * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
- */
-*,
-::slotted(*),
-*:before,
-*:after {
-  box-sizing: border-box;
-}
-
-:root {
-  --size-base-unit: 0.5rem;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { property, query } from 'lit/decorators.js';
+import { nanoid } from 'nanoid';
+import { Cre8FormElement } from '../cre8-form-element';
+import '../field-note/field-note';
+import styles from './radio-field-item.styles.js';
 /**
- * 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;
+ * A Radio Field Item adds a radio button to a Radio Field. Radio buttons let a user choose only one of several
+ * options. Do not use a single radio button, because once selected, it cannot be de-selected. If the user can only
+ * choose one, none or many options, use Checkbox instead.
+ */
+export class Cre8RadioFieldItem extends Cre8FormElement {
+    constructor() {
+        super(...arguments);
+        this.type = 'radio';
     }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 417px;
-      height: 417px;
+    /**
+     * Connected callback lifecycle
+     * 1) Set the initial checked value to the checked property
+     * 2) Auto-generate the fieldId if a user doesn't provided so that the form field is accessible
+     * 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 || nanoid(); /* 2 */
+        if (this.fieldNote) {
+            this.ariaDescribedBy = this.ariaDescribedBy || nanoid(); /* 3 */
+        }
     }
-  }
-}
-@media (width >= 48rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 330px;
-      height: 330px;
+    /**
+     * Reset the radio field
+     */
+    resetField() {
+        this._internals.setFormValue(null);
     }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 330px;
-      height: 330px;
-      transform: translateX(calc(100vw - 45px));
+    /**
+     * Reset the radio field items tab indeces
+     */
+    resetTabIndeces(radioFieldItems) {
+        radioFieldItems.forEach((element) => {
+            element.shadowRoot.querySelector('.cre8-c-radio-field-item__input').setAttribute('tabindex', '0');
+        });
     }
-  }
-}
-@media (width >= 60rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 460px;
-      height: 460px;
+    /**
+     * Remove checked
+     * 1) Remove checked property from all items and set tabindex to -1
+     * 2) Reset the form field to not checked
+     */
+    removeChecked() {
+        if (this.parentNode) {
+            /* 1 */
+            const radioFieldItems = this.parentNode.querySelectorAll('cre8-radio-field-item');
+            radioFieldItems.forEach((element) => {
+                element.checked = false;
+                element.shadowRoot.querySelector('.cre8-c-radio-field-item__input').setAttribute('tabindex', '-1');
+                element.resetField(); /* 2 */
+            });
+        }
     }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 460px;
-      height: 460px;
-      transform: translateX(calc(100vw - 45px));
+    /**
+     * Reset form callback
+     * 1) Remove the checked state from all radio elements
+     * 2) Set the checked state to the initial checked state
+     * 3) Set the radio field input checked attribute to the initial checked state
+     */
+    formResetCallback() {
+        this.removeChecked();
+        this.checked = this.initialChecked;
+        this.field.checked = this.initialChecked;
     }
-  }
-}
-@media (width >= 75rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 592px;
-      height: 591px;
+    /**
+     * access role when radio-field-item embedded in radio-field
+     */
+    _getRole() {
+        const radioFieldContainer = this.closest('cre8-radio-field');
+        if (radioFieldContainer) {
+            return 'listitem';
+        }
+        return '';
     }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 45px));
+    /**
+     * Toggle active state of primary nav item
+     * 1) Remove isActive state from all sibling elements
+     * 2) Toggle active state of element selected
+     */
+    _clickHandler() {
+        this.removeChecked();
+        this.checked = !this.checked; /* 2 */
+        const radioInput = this.shadowRoot?.querySelector('.cre8-c-radio-field-item__input');
+        if (radioInput) {
+            radioInput.setAttribute('tabindex', '0');
+        }
+        return this.checked ? this._internals.setFormValue(this.value || 'on') : this._internals.setFormValue(null);
     }
-  }
-}
-@media (width >= 87.5rem) {
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 120px));
+    /**
+     * Handle sibling element updates during handleKeyDown function
+     * 1) Prevent default keyboard functionality to disable scroll with up/down keys
+     * 2) Trigger removeChecked
+     * 3) Focus sibling shadowRoot element
+     * 4) Click sibling shadowRoot element
+     * 5) Set sibling element `tabindex` to `0`
+     * 6) Set sibling element `checked` value
+     */
+    _updateSibling(event, sibling, element) {
+        event.preventDefault();
+        this.removeChecked();
+        element.focus();
+        element.click();
+        element.setAttribute('tabindex', '0');
+        sibling.setAttribute('checked', '');
     }
-  }
-}
-@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
- */
-/*------------------------------------*\\
- #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: 0.5rem;
-  min-height: 1.5rem;
-  /** 
-  * 1) Form field that is compose of a radio input, label, and optional fieldnote.
-  */
-}
-:host(:last-child) .cre8-c-radio-field-item {
-  margin-bottom: 0;
-}
-
-/** 
-* Radio field item input 
-*/
-.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;
-}
-
-/** 
-* Radio field item custom radio container
-*/
-.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);
-  /** 
-  * Radio field item custom radio focus visible  custom outline
-  */
-}
-.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__custom-radio {
-  /** 
-  * Radio field item custom radio within radio field with 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__custom-radio {
-  /** 
-  * Radio field item custom radio within radio field disabled
-  */
-}
-.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);
-}
-
-/** 
- * Radio field item inner circle
- */
-.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);
-  /** 
-  * Radio field item inner circle error
-  */
-}
-.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__inner-circle {
-  /** 
-  * Radio field item inner circle disabled
-  */
-}
-.cre8-c-radio-field-item--disabled .cre8-c-radio-field-item__inner-circle {
-  background: var(--cre8-color-content-disabled);
-}
-.cre8-c-radio-field-item__inner-circle {
-  /** 
-  * 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 .cre8-c-radio-field-item__inner-circle {
-  display: flex;
-}
-
-/** 
- * Radio field item input 
- */
-.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 y = Object.defineProperty, r = (c, e, i, o) => {
-  for (var n = void 0, l = c.length - 1, m; l >= 0; l--)
-    (m = c[l]) && (n = m(e, i, n) || n);
-  return n && y(e, i, n), n;
-};
-const s = class s extends f {
-  constructor() {
-    super(...arguments), this.type = "radio";
-  }
-  /**
-   * Connected callback lifecycle
-   * 1) Set the initial checked value to the checked property
-   * 2) Auto-generate the fieldId if a user doesn't provided so that the form field is accessible
-   * 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 || u(), this.fieldNote && (this.ariaDescribedBy = this.ariaDescribedBy || u());
-  }
-  /**
-   * Reset the radio field
-   */
-  resetField() {
-    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");
-    });
-  }
-  /**
-   * Remove checked
-   * 1) Remove checked property from all items and set tabindex to -1
-   * 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();
-    });
-  }
-  /**
-   * Reset form callback
-   * 1) Remove the checked state from all radio elements
-   * 2) Set the checked state to the initial checked state
-   * 3) Set the radio field input checked attribute to the initial checked state
-   */
-  formResetCallback() {
-    this.removeChecked(), this.checked = this.initialChecked, this.field.checked = this.initialChecked;
-  }
-  /**
-   * access role when radio-field-item embedded in radio-field
-   */
-  _getRole() {
-    return this.closest("cre8-radio-field") ? "listitem" : "";
-  }
-  /**
-   * Toggle active state of primary nav item
-   * 1) Remove isActive state from all sibling elements
-   * 2) Toggle active state of element selected
-   */
-  _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);
-  }
-  /**
-   * Handle sibling element updates during handleKeyDown function
-   * 1) Prevent default keyboard functionality to disable scroll with up/down keys
-   * 2) Trigger removeChecked
-   * 3) Focus sibling shadowRoot element
-   * 4) Click sibling shadowRoot element
-   * 5) Set sibling element `tabindex` to `0`
-   * 6) Set sibling element `checked` value
-   */
-  _updateSibling(e, i, o) {
-    e.preventDefault(), this.removeChecked(), o.focus(), o.click(), o.setAttribute("tabindex", "0"), i.setAttribute("checked", "");
-  }
-  /**
-   * Handle keydown
-   * 1) If left or up arrow key is struck and radio field item exists before current item,
-   *    remove checked from all items and add it to the next item
-   * 2) If right or down arrow key is struck and radio field item exists after current item,
-   *    remove checked from all items and add checked to the next item. Focus on this item
-   *    and set tabindex for when focusing out of radio field and back onto checked item.
-   * 3) If the element is in focused, then for event emission the current
-   *    focues element should be clicked to emit event.
-   * 4) If the Tab key is pressed, and none of the items are checked
-   *    then jump away from field set to the next tabbable item
-   */
-  handleKeyDown(e) {
-    if (e.code === "ArrowLeft" || e.code === "ArrowUp") {
-      const i = this.previousElementSibling, o = i?.shadowRoot?.querySelector(
-        ".cre8-c-radio-field-item__input:not([disabled])"
-      );
-      o && this._updateSibling(e, i, o);
-    } else if (e.code === "ArrowRight" || e.code === "ArrowDown") {
-      const i = this.nextElementSibling, o = i?.shadowRoot?.querySelector(
-        ".cre8-c-radio-field-item__input:not([disabled])"
-      );
-      o && this._updateSibling(e, i, o);
-    } else if (e.code === "Tab" && !this.checked) {
-      const i = this.parentNode.querySelectorAll("cre8-radio-field-item");
-      i.forEach((o) => {
-        o.shadowRoot.querySelector(".cre8-c-radio-field-item__input").setAttribute("tabindex", "-1");
-      }), setTimeout(this.resetTabIndeces, 100, i);
+    /**
+     * Handle keydown
+     * 1) If left or up arrow key is struck and radio field item exists before current item,
+     *    remove checked from all items and add it to the next item
+     * 2) If right or down arrow key is struck and radio field item exists after current item,
+     *    remove checked from all items and add checked to the next item. Focus on this item
+     *    and set tabindex for when focusing out of radio field and back onto checked item.
+     * 3) If the element is in focused, then for event emission the current
+     *    focues element should be clicked to emit event.
+     * 4) If the Tab key is pressed, and none of the items are checked
+     *    then jump away from field set to the next tabbable item
+     */
+    handleKeyDown(e) {
+        if (e.code === 'ArrowLeft' || e.code === 'ArrowUp') {
+            /* 1 */
+            const previous = this.previousElementSibling;
+            const previousElement = previous?.shadowRoot?.querySelector('.cre8-c-radio-field-item__input:not([disabled])');
+            if (previousElement) {
+                this._updateSibling(e, previous, previousElement);
+            }
+        }
+        else if (e.code === 'ArrowRight' || e.code === 'ArrowDown') {
+            /* 2 */
+            const next = this.nextElementSibling;
+            const nextElement = next?.shadowRoot?.querySelector('.cre8-c-radio-field-item__input:not([disabled])');
+            if (nextElement) {
+                this._updateSibling(e, next, nextElement);
+            }
+        }
+        else if (e.code === 'Tab' && !this.checked) {
+            const radioFieldItems = this.parentNode.querySelectorAll('cre8-radio-field-item');
+            radioFieldItems.forEach((element) => {
+                element.shadowRoot.querySelector('.cre8-c-radio-field-item__input').setAttribute('tabindex', '-1');
+            });
+            // After making tabbing away from the feildset,
+            // reset the items to be tabbable again so the user can come back to the fieldset
+            setTimeout(this.resetTabIndeces, 100, radioFieldItems);
+        }
     }
-  }
-  render() {
-    const e = this.componentClassNames("cre8-c-radio-field-item", {
-      "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 p`
-        <div role=${d(this._getRole())} class="${e}" @keydown=${this.handleKeyDown}>
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-radio-field-item', {
+            'cre8-c-radio-field-item--error': this.isError,
+            'cre8-c-radio-field-item--success': this.isSuccess,
+            'cre8-c-radio-field-item--disabled': this.disabled,
+        });
+        const isChecked = this.checked === true || this.initialChecked === true;
+        return html `
+        <div role=${ifDefined(this._getRole())} class="${componentClassNames}" @keydown=${this.handleKeyDown}>
             <input
             class="cre8-c-radio-field-item__input"
             type="radio"
             @input=${this._clickHandler}
             id=${this.fieldId}
-            aria-describedby="${d(this.ariaDescribedBy)}"
-            required=${d(this.required)}
-            aria-invalid=${this.required ? !!this.isError : d(this.isError)}
+            aria-describedby="${ifDefined(this.ariaDescribedBy)}"
+            required=${ifDefined(this.required)}
+            aria-invalid=${this.required ? !!this.isError : ifDefined(this.isError)}
             name=${this.name}
             .value=${this.value}
-            disabled="${d(this.disabled)}"
-            .checked="${i}"
+            disabled="${ifDefined(this.disabled)}"
+            .checked="${isChecked}"
             />
             <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 ? p`<cre8-field-note
+        ${this.fieldNote
+            ? html `<cre8-field-note
                 ?inverted=${this.fieldNoteKnockout}
-                id=${d(this.ariaDescribedBy)}
-                iconName=${d(this.fieldNoteIconName)}
+                id=${ifDefined(this.ariaDescribedBy)}
+                iconName=${ifDefined(this.fieldNoteIconName)}
                 ?isSuccess=${this.isSuccess}
                 ?isError=${this.isError}
             >
                 ${this.fieldNote}
-            </cre8-field-note>` : ""}
+            </cre8-field-note>`
+            : ''}
         `;
-  }
-};
-s.styles = [b];
-let t = s;
-r([
-  a()
-], t.prototype, "ariaDescribedBy");
-r([
-  a({ type: Boolean, reflect: !0 })
-], t.prototype, "checked");
-r([
-  a({ type: Boolean, reflect: !0 })
-], t.prototype, "disabled");
-r([
-  g("input")
-], t.prototype, "field");
-r([
-  a()
-], t.prototype, "fieldId");
-r([
-  a()
-], t.prototype, "fieldNote");
-r([
-  a()
-], t.prototype, "fieldNoteIconName");
-r([
-  a({ type: Boolean, reflect: !0 })
-], t.prototype, "fieldNoteKnockout");
-r([
-  a({ type: Boolean, reflect: !0 })
-], t.prototype, "fieldNoteIsError");
-r([
-  a({ type: Boolean, reflect: !0 })
-], t.prototype, "isError");
-r([
-  a({ type: Boolean, reflect: !0 })
-], t.prototype, "isSuccess");
-r([
-  a()
-], t.prototype, "label");
-r([
-  a({ type: Boolean, reflect: !0 })
-], t.prototype, "required");
-customElements.get("cre8-radio-field-item") === void 0 && customElements.define("cre8-radio-field-item", t);
-export {
-  t as Cre8RadioFieldItem,
-  t as default
-};
+    }
+}
+Cre8RadioFieldItem.styles = [styles];
+__decorate([
+    property()
+], Cre8RadioFieldItem.prototype, "ariaDescribedBy", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8RadioFieldItem.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8RadioFieldItem.prototype, "disabled", void 0);
+__decorate([
+    query('input')
+], Cre8RadioFieldItem.prototype, "field", void 0);
+__decorate([
+    property()
+], Cre8RadioFieldItem.prototype, "fieldId", void 0);
+__decorate([
+    property()
+], Cre8RadioFieldItem.prototype, "fieldNote", void 0);
+__decorate([
+    property()
+], Cre8RadioFieldItem.prototype, "fieldNoteIconName", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8RadioFieldItem.prototype, "fieldNoteKnockout", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8RadioFieldItem.prototype, "fieldNoteIsError", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8RadioFieldItem.prototype, "isError", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8RadioFieldItem.prototype, "isSuccess", void 0);
+__decorate([
+    property()
+], Cre8RadioFieldItem.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8RadioFieldItem.prototype, "required", void 0);
+if (customElements.get('cre8-radio-field-item') === undefined) {
+    customElements.define('cre8-radio-field-item', Cre8RadioFieldItem);
+}
+export default Cre8RadioFieldItem;
+//# sourceMappingURL=radio-field-item.js.map