@nectary/components 0.38.0 → 0.40.0

package/radio/index.js

@@ -1,133 +1,30 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$slot, _onOptionKeyDown, _onSlotChange, _onOptionChange, _onValueChange, _dispatchChangeEvent, _getFirstOption, _getLastOption, _getNextOption, _getPrevOption, _getEnabledRadioElements, _findSelectedOption, _onChangeReactHandler;
-
-function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
-
-function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
-
-function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
-
-function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
-
 import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;gap:8px;box-sizing:border-box;width:100%}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-radio', (_$slot = new WeakMap(), _onOptionKeyDown = new WeakMap(), _onSlotChange = new WeakMap(), _onOptionChange = new WeakMap(), _onValueChange = new WeakSet(), _dispatchChangeEvent = new WeakSet(), _getFirstOption = new WeakSet(), _getLastOption = new WeakSet(), _getNextOption = new WeakSet(), _getPrevOption = new WeakSet(), _getEnabledRadioElements = new WeakSet(), _findSelectedOption = new WeakSet(), _onChangeReactHandler = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-radio', class extends NectaryElement {
+  #$slot;
+
   constructor() {
     super();
-
-    _classPrivateMethodInitSpec(this, _findSelectedOption);
-
-    _classPrivateMethodInitSpec(this, _getEnabledRadioElements);
-
-    _classPrivateMethodInitSpec(this, _getPrevOption);
-
-    _classPrivateMethodInitSpec(this, _getNextOption);
-
-    _classPrivateMethodInitSpec(this, _getLastOption);
-
-    _classPrivateMethodInitSpec(this, _getFirstOption);
-
-    _classPrivateMethodInitSpec(this, _dispatchChangeEvent);
-
-    _classPrivateMethodInitSpec(this, _onValueChange);
-
-    _classPrivateFieldInitSpec(this, _$slot, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _onOptionKeyDown, {
-      writable: true,
-      value: e => {
-        switch (e.code) {
-          case 'ArrowUp':
-          case 'ArrowLeft':
-            {
-              e.preventDefault();
-
-              const $option = _classPrivateMethodGet(this, _getPrevOption, _getPrevOption2).call(this);
-
-              if ($option !== null) {
-                $option.focus();
-
-                _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, $option.value);
-              }
-
-              break;
-            }
-
-          case 'ArrowDown':
-          case 'ArrowRight':
-            {
-              e.preventDefault();
-
-              const $option = _classPrivateMethodGet(this, _getNextOption, _getNextOption2).call(this);
-
-              if ($option !== null) {
-                $option.focus();
-
-                _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, $option.value);
-              }
-
-              break;
-            }
-        }
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onSlotChange, {
-      writable: true,
-      value: () => {
-        _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, this.value);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onOptionChange, {
-      writable: true,
-      value: e => {
-        e.stopPropagation();
-
-        _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, e.detail);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onChangeReactHandler, {
-      writable: true,
-      value: e => {
-        getReactEventHandler(this, 'on-change')?.(e);
-      }
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$slot, shadowRoot.querySelector('slot'));
+    this.#$slot = shadowRoot.querySelector('slot');
   }
 
   connectedCallback() {
     this.setAttribute('role', 'radiogroup');
-
-    _classPrivateFieldGet(this, _$slot).addEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
-
-    _classPrivateFieldGet(this, _$slot).addEventListener('keydown', _classPrivateFieldGet(this, _onOptionKeyDown));
-
-    _classPrivateFieldGet(this, _$slot).addEventListener('option-change', _classPrivateFieldGet(this, _onOptionChange));
-
-    this.addEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
+    this.#$slot.addEventListener('slotchange', this.#onSlotChange);
+    this.#$slot.addEventListener('keydown', this.#onOptionKeyDown);
+    this.#$slot.addEventListener('option-change', this.#onOptionChange);
+    this.addEventListener('-change', this.#onChangeReactHandler);
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$slot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
-
-    _classPrivateFieldGet(this, _$slot).removeEventListener('keydown', _classPrivateFieldGet(this, _onOptionKeyDown));
-
-    _classPrivateFieldGet(this, _$slot).removeEventListener('option-change', _classPrivateFieldGet(this, _onOptionChange));
-
-    this.removeEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
+    this.#$slot.removeEventListener('slotchange', this.#onSlotChange);
+    this.#$slot.removeEventListener('keydown', this.#onOptionKeyDown);
+    this.#$slot.removeEventListener('option-change', this.#onOptionChange);
+    this.removeEventListener('-change', this.#onChangeReactHandler);
   }
 
   static get observedAttributes() {
@@ -154,84 +51,121 @@ defineCustomElement('sinch-radio', (_$slot = new WeakMap(), _onOptionKeyDown = n
     switch (name) {
       case 'value':
         {
-          _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, newVal ?? '');
-
+          this.#onValueChange(newVal ?? '');
           break;
         }
     }
   }
 
-}));
+  #onOptionKeyDown = e => {
+    switch (e.code) {
+      case 'ArrowUp':
+      case 'ArrowLeft':
+        {
+          e.preventDefault();
+          const $option = this.#getPrevOption();
 
-function _onValueChange2(value) {
-  for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
-    const isChecked = !getBooleanAttribute($option, 'disabled') && value === getAttribute($option, 'value', '');
-    updateBooleanAttribute($option, 'checked', isChecked);
-  }
-}
+          if ($option !== null) {
+            $option.focus();
+            this.#dispatchChangeEvent($option.value);
+          }
 
-function _dispatchChangeEvent2(value) {
-  this.dispatchEvent(new CustomEvent('change', {
-    detail: value,
-    bubbles: true
-  }));
-  this.dispatchEvent(new CustomEvent('-change', {
-    detail: value
-  }));
-}
+          break;
+        }
 
-function _getFirstOption2() {
-  for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
-    if ($option.disabled !== true) {
-      return $option;
-    }
-  }
+      case 'ArrowDown':
+      case 'ArrowRight':
+        {
+          e.preventDefault();
+          const $option = this.#getNextOption();
 
-  return null;
-}
+          if ($option !== null) {
+            $option.focus();
+            this.#dispatchChangeEvent($option.value);
+          }
 
-function _getLastOption2() {
-  for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements().reverse()) {
-    if ($option.disabled !== true) {
-      return $option;
+          break;
+        }
+    }
+  };
+  #onSlotChange = () => {
+    this.#onValueChange(this.value);
+  };
+  #onOptionChange = e => {
+    e.stopPropagation();
+    this.#dispatchChangeEvent(e.detail);
+  };
+
+  #onValueChange(value) {
+    for (const $option of this.#$slot.assignedElements()) {
+      const isChecked = !getBooleanAttribute($option, 'disabled') && value === getAttribute($option, 'value', '');
+      updateBooleanAttribute($option, 'checked', isChecked);
     }
   }
 
-  return null;
-}
+  #dispatchChangeEvent(value) {
+    this.dispatchEvent(new CustomEvent('change', {
+      detail: value,
+      bubbles: true
+    }));
+    this.dispatchEvent(new CustomEvent('-change', {
+      detail: value
+    }));
+  }
 
-function _getNextOption2() {
-  const $options = _classPrivateMethodGet(this, _getEnabledRadioElements, _getEnabledRadioElements2).call(this);
+  #getFirstOption() {
+    for (const $option of this.#$slot.assignedElements()) {
+      if ($option.disabled !== true) {
+        return $option;
+      }
+    }
 
-  const $selectedOption = _classPrivateMethodGet(this, _findSelectedOption, _findSelectedOption2).call(this, $options);
+    return null;
+  }
 
-  const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
+  #getLastOption() {
+    for (const $option of this.#$slot.assignedElements().reverse()) {
+      if ($option.disabled !== true) {
+        return $option;
+      }
+    }
 
-  if (currentIndex < 0) {
-    return _classPrivateMethodGet(this, _getFirstOption, _getFirstOption2).call(this);
+    return null;
   }
 
-  return $options[(currentIndex + 1) % $options.length];
-}
+  #getNextOption() {
+    const $options = this.#getEnabledRadioElements();
+    const $selectedOption = this.#findSelectedOption($options);
+    const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
+
+    if (currentIndex < 0) {
+      return this.#getFirstOption();
+    }
 
-function _getPrevOption2() {
-  const $options = _classPrivateMethodGet(this, _getEnabledRadioElements, _getEnabledRadioElements2).call(this);
+    return $options[(currentIndex + 1) % $options.length];
+  }
 
-  const $selectedOption = _classPrivateMethodGet(this, _findSelectedOption, _findSelectedOption2).call(this, $options);
+  #getPrevOption() {
+    const $options = this.#getEnabledRadioElements();
+    const $selectedOption = this.#findSelectedOption($options);
+    const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
 
-  const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
+    if (currentIndex < 0) {
+      return this.#getLastOption();
+    }
 
-  if (currentIndex < 0) {
-    return _classPrivateMethodGet(this, _getLastOption, _getLastOption2).call(this);
+    return $options[(currentIndex - 1 + $options.length) % $options.length];
   }
 
-  return $options[(currentIndex - 1 + $options.length) % $options.length];
-}
+  #getEnabledRadioElements() {
+    return this.#$slot.assignedElements().filter(el => el.disabled !== true);
+  }
 
-function _getEnabledRadioElements2() {
-  return _classPrivateFieldGet(this, _$slot).assignedElements().filter(el => el.disabled !== true);
-}
+  #findSelectedOption(elements) {
+    return elements.find(el => el.checked) ?? null;
+  }
 
-function _findSelectedOption2(elements) {
-  return elements.find(el => el.checked) ?? null;
-}
+  #onChangeReactHandler = e => {
+    getReactEventHandler(this, 'on-change')?.(e);
+  };
+});

package/radio/types.d.ts

@@ -9,6 +9,7 @@ export declare type TSinchRadioElement = HTMLElement & {
 export declare type TSinchRadioReact = TSinchElementReact<TSinchRadioElement> & {
     value: string;
     'aria-label': string;
+    /** @deprecated */
     onChange?: (event: SyntheticEvent<TSinchRadioElement, CustomEvent<boolean>>) => void;
     'on-change'?: (e: CustomEvent<string>) => void;
 };

package/radio-option/index.js

@@ -1,58 +1,26 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$input, _$label, _onInput;
-
-function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
-
-function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
-
 import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{--sinch-color-radio-outer-circle:var(--sinch-color-transparent);--sinch-color-radio-background:var(--sinch-color-snow-100);--sinch-color-radio-border:var(--sinch-color-stormy-300);--sinch-color-radio-outer-circle-checked:var(--sinch-color-transparent);--sinch-color-radio-border-checked:var(--sinch-color-tropical-500);--sinch-color-radio-outer-circle-hover:var(--sinch-color-snow-500);--sinch-color-radio-border-hover:var(--sinch-color-stormy-300);--sinch-color-radio-outer-circle-hover-checked:var(--sinch-color-tropical-100);--sinch-color-radio-border-hover-checked:var(--sinch-color-tropical-500);--sinch-color-radio-outer-circle-focus:var(--sinch-color-snow-800);--sinch-color-radio-border-focus:var(--sinch-color-stormy-300);--sinch-color-radio-outer-circle-focus-checked:var(--sinch-color-tropical-200);--sinch-color-radio-border-focus-checked:var(--sinch-color-tropical-500);--sinch-color-radio-outer-circle-active:var(--sinch-color-stormy-100);--sinch-color-radio-border-active:var(--sinch-color-stormy-300);--sinch-color-radio-outer-circle-active-checked:var(--sinch-color-tropical-300);--sinch-color-radio-border-active-checked:var(--sinch-color-tropical-500);--sinch-color-radio-outer-circle-disabled:var(--sinch-color-transparent);--sinch-color-radio-border-disabled:var(--sinch-color-stormy-100);--sinch-color-radio-outer-circle-disabled-checked:var(--sinch-color-transparent);--sinch-color-radio-border-disabled-checked:var(--sinch-color-stormy-100);display:block;outline:0}#wrapper{display:flex;height:32px;box-sizing:border-box;width:100%}#input{all:initial;display:block;width:32px;height:32px;cursor:pointer}#input:disabled{cursor:initial}#icon-container{position:relative;width:32px;height:32px}#input::before{content:"";position:absolute;top:0;left:0;width:32px;height:32px;border-radius:50%;pointer-events:none;background-color:var(--sinch-color-radio-outer-circle);transition:background-color .1s linear}#input::after{content:"";position:absolute;top:6px;left:6px;width:20px;height:20px;border-radius:50%;pointer-events:none;background-color:var(--sinch-color-radio-background);border:2px solid var(--sinch-color-radio-border);transition:background-color .1s linear;box-sizing:border-box}#icon-knob{position:absolute;left:11px;top:11px;width:10px;height:10px;border-radius:50%;transition:opacity .1s linear;opacity:0;background-color:var(--sinch-color-radio-border);pointer-events:none}@media (prefers-reduced-motion){#icon-knob,#input::after,#input::before{transition:none}}#label{align-self:center;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:8px;font:var(--sinch-font-body);color:var(--sinch-color-text-default)}:host([disabled]:not([disabled=false])) #label{color:var(--sinch-color-stormy-200)}#input:checked::before{background-color:var(--sinch-color-radio-outer-circle-checked)}#input:checked::after{border-color:var(--sinch-color-radio-border-checked)}#input:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-checked)}#input:focus::before{background-color:var(--sinch-color-radio-outer-circle-focus)}#input:focus::after{border-color:var(--sinch-color-radio-border-focus)}#input:focus~#icon-knob{background-color:var(--sinch-color-radio-border-focus)}#input:hover::before{background-color:var(--sinch-color-radio-outer-circle-hover)}#input:hover::after{border-color:var(--sinch-color-radio-border-hover)}#input:hover~#icon-knob{background-color:var(--sinch-color-radio-border-hover)}#input:active::before{background-color:var(--sinch-color-radio-outer-circle-active)}#input:active::after{border-color:var(--sinch-color-radio-border-active)}#input:active~#icon-knob{background-color:var(--sinch-color-radio-border-active)}#input:disabled::before{background-color:var(--sinch-color-radio-outer-circle-disabled)}#input:disabled::after{border-color:var(--sinch-color-radio-border-disabled)}#input:disabled~#icon-knob{background-color:var(--sinch-color-radio-border-disabled)}#input:focus:checked::before{background-color:var(--sinch-color-radio-outer-circle-focus-checked)}#input:focus:checked::after{border-color:var(--sinch-color-radio-border-focus-checked)}#input:focus:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-focus-checked)}#input:hover:checked::before{background-color:var(--sinch-color-radio-outer-circle-hover-checked)}#input:hover:checked::after{border-color:var(--sinch-color-radio-border-hover-checked)}#input:hover:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-hover-checked)}#input:active:checked::before{background-color:var(--sinch-color-radio-outer-circle-active-checked)}#input:active:checked::after{border-color:var(--sinch-color-radio-border-active-checked)}#input:active:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-active-checked)}#input:disabled:checked::before{background-color:var(--sinch-color-radio-outer-circle-disabled-checked)}#input:disabled:checked::after{border-color:var(--sinch-color-radio-border-disabled-checked)}#input:disabled:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-disabled-checked)}</style><div id="wrapper"><div id="icon-container"><input id="input" type="radio"/><div id="icon-knob"></div></div><label for="input" id="label"></label></div>';
+const templateHTML = '<style>:host{--sinch-color-radio-outer-circle:var(--sinch-color-transparent);--sinch-color-radio-background:var(--sinch-color-snow-100);--sinch-color-radio-border:var(--sinch-color-stormy-300);--sinch-color-radio-outer-circle-checked:var(--sinch-color-transparent);--sinch-color-radio-border-checked:var(--sinch-color-tropical-500);--sinch-color-radio-outer-circle-hover:var(--sinch-color-snow-500);--sinch-color-radio-border-hover:var(--sinch-color-stormy-300);--sinch-color-radio-outer-circle-hover-checked:var(--sinch-color-tropical-100);--sinch-color-radio-border-hover-checked:var(--sinch-color-tropical-500);--sinch-color-radio-outer-circle-focus:var(--sinch-color-snow-700);--sinch-color-radio-border-focus:var(--sinch-color-stormy-300);--sinch-color-radio-outer-circle-focus-checked:var(--sinch-color-tropical-200);--sinch-color-radio-border-focus-checked:var(--sinch-color-tropical-500);--sinch-color-radio-outer-circle-active:var(--sinch-color-stormy-100);--sinch-color-radio-border-active:var(--sinch-color-stormy-300);--sinch-color-radio-outer-circle-active-checked:var(--sinch-color-tropical-300);--sinch-color-radio-border-active-checked:var(--sinch-color-tropical-500);--sinch-color-radio-outer-circle-disabled:var(--sinch-color-transparent);--sinch-color-radio-border-disabled:var(--sinch-color-stormy-100);--sinch-color-radio-outer-circle-disabled-checked:var(--sinch-color-transparent);--sinch-color-radio-border-disabled-checked:var(--sinch-color-stormy-100);display:block;outline:0}#wrapper{display:flex;height:32px;box-sizing:border-box;width:100%}#input{all:initial;display:block;width:32px;height:32px;cursor:pointer}#input:disabled{cursor:initial}#icon-container{position:relative;width:32px;height:32px}#input::before{content:"";position:absolute;top:0;left:0;width:32px;height:32px;border-radius:50%;pointer-events:none;background-color:var(--sinch-color-radio-outer-circle);transition:background-color .1s linear}#input::after{content:"";position:absolute;top:6px;left:6px;width:20px;height:20px;border-radius:50%;pointer-events:none;background-color:var(--sinch-color-radio-background);border:2px solid var(--sinch-color-radio-border);transition:background-color .1s linear;box-sizing:border-box}#icon-knob{position:absolute;left:11px;top:11px;width:10px;height:10px;border-radius:50%;transition:opacity .1s linear;opacity:0;background-color:var(--sinch-color-radio-border);pointer-events:none}@media (prefers-reduced-motion){#icon-knob,#input::after,#input::before{transition:none}}#label{align-self:center;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:8px;font:var(--sinch-font-body);color:var(--sinch-color-text-default)}:host([disabled]:not([disabled=false])) #label{color:var(--sinch-color-stormy-200)}#input:checked::before{background-color:var(--sinch-color-radio-outer-circle-checked)}#input:checked::after{border-color:var(--sinch-color-radio-border-checked)}#input:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-checked)}#input:focus::before{background-color:var(--sinch-color-radio-outer-circle-focus)}#input:focus::after{border-color:var(--sinch-color-radio-border-focus)}#input:focus~#icon-knob{background-color:var(--sinch-color-radio-border-focus)}#input:hover::before{background-color:var(--sinch-color-radio-outer-circle-hover)}#input:hover::after{border-color:var(--sinch-color-radio-border-hover)}#input:hover~#icon-knob{background-color:var(--sinch-color-radio-border-hover)}#input:active::before{background-color:var(--sinch-color-radio-outer-circle-active)}#input:active::after{border-color:var(--sinch-color-radio-border-active)}#input:active~#icon-knob{background-color:var(--sinch-color-radio-border-active)}#input:disabled::before{background-color:var(--sinch-color-radio-outer-circle-disabled)}#input:disabled::after{border-color:var(--sinch-color-radio-border-disabled)}#input:disabled~#icon-knob{background-color:var(--sinch-color-radio-border-disabled)}#input:focus:checked::before{background-color:var(--sinch-color-radio-outer-circle-focus-checked)}#input:focus:checked::after{border-color:var(--sinch-color-radio-border-focus-checked)}#input:focus:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-focus-checked)}#input:hover:checked::before{background-color:var(--sinch-color-radio-outer-circle-hover-checked)}#input:hover:checked::after{border-color:var(--sinch-color-radio-border-hover-checked)}#input:hover:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-hover-checked)}#input:active:checked::before{background-color:var(--sinch-color-radio-outer-circle-active-checked)}#input:active:checked::after{border-color:var(--sinch-color-radio-border-active-checked)}#input:active:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-active-checked)}#input:disabled:checked::before{background-color:var(--sinch-color-radio-outer-circle-disabled-checked)}#input:disabled:checked::after{border-color:var(--sinch-color-radio-border-disabled-checked)}#input:disabled:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-disabled-checked)}</style><div id="wrapper"><div id="icon-container"><input id="input" type="radio"/><div id="icon-knob"></div></div><label for="input" id="label"></label></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-radio-option', (_$input = new WeakMap(), _$label = new WeakMap(), _onInput = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-radio-option', class extends NectaryElement {
+  #$input;
+  #$label;
+
   constructor() {
     super();
-
-    _classPrivateFieldInitSpec(this, _$input, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$label, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _onInput, {
-      writable: true,
-      value: e => {
-        e.stopPropagation();
-        _classPrivateFieldGet(this, _$input).checked = false;
-        this.dispatchEvent(new CustomEvent('option-change', {
-          bubbles: true,
-          detail: this.value
-        }));
-      }
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$input, shadowRoot.querySelector('input'));
-
-    _classPrivateFieldSet(this, _$label, shadowRoot.querySelector('label'));
+    this.#$input = shadowRoot.querySelector('input');
+    this.#$label = shadowRoot.querySelector('label');
   }
 
   connectedCallback() {
     this.setAttribute('role', 'radio');
-
-    _classPrivateFieldGet(this, _$input).addEventListener('input', _classPrivateFieldGet(this, _onInput));
+    this.#$input.addEventListener('input', this.#onInput);
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$input).removeEventListener('input', _classPrivateFieldGet(this, _onInput));
+    this.#$input.removeEventListener('input', this.#onInput);
   }
 
   static get observedAttributes() {
@@ -95,13 +63,13 @@ defineCustomElement('sinch-radio-option', (_$input = new WeakMap(), _$label = ne
     switch (name) {
       case 'text':
         {
-          _classPrivateFieldGet(this, _$label).textContent = newVal;
+          this.#$label.textContent = newVal;
           break;
         }
 
       case 'checked':
         {
-          _classPrivateFieldGet(this, _$input).checked = isAttrTrue(newVal);
+          this.#$input.checked = isAttrTrue(newVal);
           updateAttribute(this, 'aria-checked', isAttrTrue(newVal));
           break;
         }
@@ -109,25 +77,33 @@ defineCustomElement('sinch-radio-option', (_$input = new WeakMap(), _$label = ne
       case 'disabled':
         {
           const isDisabled = isAttrTrue(newVal);
-          _classPrivateFieldGet(this, _$input).disabled = isDisabled;
+          this.#$input.disabled = isDisabled;
           updateBooleanAttribute(this, 'disabled', isDisabled);
           break;
         }
 
       case 'value':
         {
-          _classPrivateFieldGet(this, _$input).value = newVal ?? '';
+          this.#$input.value = newVal ?? '';
           break;
         }
     }
   }
 
   focus() {
-    _classPrivateFieldGet(this, _$input).focus();
+    this.#$input.focus();
   }
 
   blur() {
-    _classPrivateFieldGet(this, _$input).blur();
+    this.#$input.blur();
   }
 
-}));
+  #onInput = e => {
+    e.stopPropagation();
+    this.#$input.checked = false;
+    this.dispatchEvent(new CustomEvent('option-change', {
+      bubbles: true,
+      detail: this.value
+    }));
+  };
+});