diff --git a/packages/angular/package-lock.json b/packages/angular/package-lock.json
index e0b5efb..1caa0d7 100644
--- a/packages/angular/package-lock.json
+++ b/packages/angular/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@anywhere-ui/angular",
-  "version": "0.2.0+4",
+  "version": "0.2.0+7",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/packages/angular/package.json b/packages/angular/package.json
index 4ba0b77..39b3691 100644
--- a/packages/angular/package.json
+++ b/packages/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@anywhere-ui/angular",
-  "version": "0.2.0+7",
+  "version": "0.2.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -42,5 +42,5 @@
     "tslint": "~6.1.0",
     "typescript": "~4.4.4"
   },
-  "buildnum": "7"
+  "buildnum": "8"
 }
\ No newline at end of file
diff --git a/packages/angular/projects/anywhere-ui/src/lib/anywhere-ui.module.ts b/packages/angular/projects/anywhere-ui/src/lib/anywhere-ui.module.ts
index 4fc75ea..202663b 100644
--- a/packages/angular/projects/anywhere-ui/src/lib/anywhere-ui.module.ts
+++ b/packages/angular/projects/anywhere-ui/src/lib/anywhere-ui.module.ts
@@ -1,9 +1,18 @@
-import { NgModule } from '@angular/core';
-import { defineCustomElements } from '@anywhere-ui/core/loader';
+import { CommonModule, DOCUMENT } from '@angular/common';
+import {
+  ModuleWithProviders,
+  APP_INITIALIZER,
+  NgModule,
+  NgZone,
+  InjectionToken,
+} from '@angular/core';
+import { AnywhereUIConfig } from '@anywhere-ui/core';
+import { appInitialize } from './app-initialize';
+import { ConfigToken } from './providers/config';
 
 import { BooleanValueAccessor } from './directives/boolean-value-accessor';
 // import { NumericValueAccessor } from './directives/number-value-accessor';
-// import { RadioValueAccessor } from './directives/radio-value-accessor';
+import { RadioValueAccessor } from './directives/radio-value-accessor';
 import { SelectValueAccessor } from './directives/select-value-accessor';
 import { TextValueAccessor } from './directives/text-value-accessor';
 
@@ -20,9 +29,11 @@ import {
   AnyBadgeOverlay,
   AnyRippleEffect,
   AnyInputSwitch,
+  AnyRadioButton,
+  AnyRadioGroup,
 } from './directives/proxies';
 
-defineCustomElements(window);
+// defineCustomElements(window);
 
 const DECLARATIONS = [
   // proxies
@@ -38,11 +49,13 @@ const DECLARATIONS = [
   AnyBadgeOverlay,
   AnyRippleEffect,
   AnyInputSwitch,
+  AnyRadioButton,
+  AnyRadioGroup,
 
   // Value Accessors
   BooleanValueAccessor,
   // NumericValueAccessor,
-  // RadioValueAccessor,
+  RadioValueAccessor,
   SelectValueAccessor,
   TextValueAccessor,
 ];
@@ -50,6 +63,30 @@ const DECLARATIONS = [
 @NgModule({
   declarations: DECLARATIONS,
   exports: DECLARATIONS,
-  imports: [],
+  imports: [CommonModule],
 })
-export class AnywhereUiModule {}
+export class AnywhereUiModule {
+  static forRoot(
+    config?: AnywhereUIConfig
+  ): ModuleWithProviders<AnywhereUiModule> {
+    return {
+      ngModule: AnywhereUiModule,
+      providers: [
+        {
+          provide: ConfigToken,
+          useValue: config,
+        },
+        // {
+        //   provide: ConfigToken,
+        //   useValue: config,
+        // },
+        {
+          provide: APP_INITIALIZER,
+          useFactory: appInitialize,
+          multi: true,
+          deps: [ConfigToken, DOCUMENT, NgZone],
+        },
+      ],
+    };
+  }
+}
diff --git a/packages/angular/projects/anywhere-ui/src/lib/app-initialize.ts b/packages/angular/projects/anywhere-ui/src/lib/app-initialize.ts
new file mode 100644
index 0000000..dc9a83e
--- /dev/null
+++ b/packages/angular/projects/anywhere-ui/src/lib/app-initialize.ts
@@ -0,0 +1,40 @@
+import { NgZone } from '@angular/core';
+import { setupConfig } from '@anywhere-ui/core';
+import { applyPolyfills, defineCustomElements } from '@anywhere-ui/core/loader';
+
+import { Config } from './providers/config';
+// import { IonicWindow } from './types/interfaces';
+import { raf } from './util/util';
+
+export const appInitialize = (config: Config, doc: Document, zone: NgZone) => {
+  return (): any => {
+    // const win: IonicWindow | undefined = doc.defaultView as any;
+    const win = window;
+    if (win && typeof (window as any) !== 'undefined') {
+      setupConfig({
+        ...config,
+        _zoneGate: (h: any) => zone.run(h),
+      });
+
+      const aelFn =
+        '__zone_symbol__addEventListener' in (doc.body as any)
+          ? '__zone_symbol__addEventListener'
+          : 'addEventListener';
+
+      return applyPolyfills().then(() => {
+        return defineCustomElements(win, {
+          //   exclude: ['ion-tabs', 'ion-tab'],
+          syncQueue: true,
+          raf,
+          jmp: (h: any) => zone.runOutsideAngular(h),
+          ael(elm, eventName, cb, opts) {
+            (elm as any)[aelFn](eventName, cb, opts);
+          },
+          rel(elm, eventName, cb, opts) {
+            elm.removeEventListener(eventName, cb, opts);
+          },
+        });
+      });
+    }
+  };
+};
diff --git a/packages/angular/projects/anywhere-ui/src/lib/directives/angular-component-lib/utils.ts b/packages/angular/projects/anywhere-ui/src/lib/directives/angular-component-lib/utils.ts
index e0c6297..d6cf7bd 100644
--- a/packages/angular/projects/anywhere-ui/src/lib/directives/angular-component-lib/utils.ts
+++ b/packages/angular/projects/anywhere-ui/src/lib/directives/angular-component-lib/utils.ts
@@ -43,11 +43,13 @@ export const defineCustomElement = (tagName: string, customElement: any) => {
 }
 
 // tslint:disable-next-line: only-arrow-functions
-export function ProxyCmp(opts: { tagName: string, customElement?: any, inputs?: any; methods?: any }) {
+export function ProxyCmp(opts: { defineCustomElementFn?: () => void, inputs?: any; methods?: any }) {
   const decorator = function (cls: any) {
-    const { tagName, customElement, inputs, methods } = opts;
+    const { defineCustomElementFn, inputs, methods } = opts;
 
-    defineCustomElement(tagName, customElement);
+    if (defineCustomElementFn !== undefined) {
+      defineCustomElementFn();
+    }
 
     if (inputs) {
       proxyInputs(cls, inputs);
diff --git a/packages/angular/projects/anywhere-ui/src/lib/directives/proxies.ts b/packages/angular/projects/anywhere-ui/src/lib/directives/proxies.ts
index c09bbe3..678011c 100644
--- a/packages/angular/projects/anywhere-ui/src/lib/directives/proxies.ts
+++ b/packages/angular/projects/anywhere-ui/src/lib/directives/proxies.ts
@@ -11,8 +11,7 @@ import { Components } from '@anywhere-ui/core';
 export declare interface AnyBadge extends Components.AnyBadge {}
 
 @ProxyCmp({
-  tagName: 'any-badge',
-  customElement: undefined,
+  defineCustomElementFn: undefined,
   inputs: ['anyStyle', 'severity', 'size', 'styleClass', 'value']
 })
 @Component({
@@ -33,8 +32,7 @@ export class AnyBadge {
 export declare interface AnyBadgeOverlay extends Components.AnyBadgeOverlay {}
 
 @ProxyCmp({
-  tagName: 'any-badge-overlay',
-  customElement: undefined,
+  defineCustomElementFn: undefined,
   inputs: ['styleClass']
 })
 @Component({
@@ -69,8 +67,7 @@ export declare interface AnyButton extends Components.AnyButton {
 }
 
 @ProxyCmp({
-  tagName: 'any-button',
-  customElement: undefined,
+  defineCustomElementFn: undefined,
   inputs: ['anyStyle', 'badge', 'badgeClass', 'disabled', 'icon', 'iconHeight', 'iconPos', 'iconWidth', 'label', 'loading', 'loadingIcon', 'loadingIconStyleClass', 'styleClass', 'type']
 })
 @Component({
@@ -106,16 +103,15 @@ export declare interface AnyCheckbox extends Components.AnyCheckbox {
 }
 
 @ProxyCmp({
-  tagName: 'any-checkbox',
-  customElement: undefined,
-  inputs: ['anyStyle', 'binary', 'checkboxIcon', 'checked', 'disabled', 'inputId', 'label', 'labelStyleClass', 'name', 'readonly', 'styleClass', 'value'],
+  defineCustomElementFn: undefined,
+  inputs: ['anyStyle', 'anyTabIndex', 'binary', 'checkboxIcon', 'checked', 'disabled', 'inputId', 'label', 'labelStyleClass', 'name', 'readonly', 'styleClass', 'value'],
   methods: ['inputFocus']
 })
 @Component({
   selector: 'any-checkbox',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['anyStyle', 'binary', 'checkboxIcon', 'checked', 'disabled', 'inputId', 'label', 'labelStyleClass', 'name', 'readonly', 'styleClass', 'value']
+  inputs: ['anyStyle', 'anyTabIndex', 'binary', 'checkboxIcon', 'checked', 'disabled', 'inputId', 'label', 'labelStyleClass', 'name', 'readonly', 'styleClass', 'value']
 })
 export class AnyCheckbox {
   protected el: HTMLElement;
@@ -164,8 +160,7 @@ export declare interface AnyDropdown extends Components.AnyDropdown {
 }
 
 @ProxyCmp({
-  tagName: 'any-dropdown',
-  customElement: undefined,
+  defineCustomElementFn: undefined,
   inputs: ['anyStyle', 'anyTabIndex', 'autoZIndex', 'baseZIndex', 'clearIcon', 'disabled', 'dropdownIcon', 'hideAnimation', 'inputId', 'name', 'optionLabel', 'optionValue', 'options', 'panelScrollHeight', 'placeholder', 'readonly', 'showAnimation', 'showClear', 'value', 'virtualScroll']
 })
 @Component({
@@ -201,8 +196,7 @@ export declare interface AnyInputSwitch extends Components.AnyInputSwitch {
 }
 
 @ProxyCmp({
-  tagName: 'any-input-switch',
-  customElement: undefined,
+  defineCustomElementFn: undefined,
   inputs: ['anyStyle', 'anyTabIndex', 'ariaLabeledBy', 'checked', 'disabled', 'falseValue', 'inputId', 'name', 'readonly', 'styleClass', 'trueValue']
 })
 @Component({
@@ -230,8 +224,7 @@ export declare interface AnyInputText extends Components.AnyInputText {
 }
 
 @ProxyCmp({
-  tagName: 'any-input-text',
-  customElement: undefined,
+  defineCustomElementFn: undefined,
   inputs: ['disabled', 'floatLabel', 'inputId', 'inputWrapperClass', 'label', 'leftIconClass', 'name', 'placeholder', 'readonly', 'rightIconClass', 'value'],
   methods: ['getInputRef']
 })
@@ -260,8 +253,7 @@ export declare interface AnyListbox extends Components.AnyListbox {
 }
 
 @ProxyCmp({
-  tagName: 'any-listbox',
-  customElement: undefined,
+  defineCustomElementFn: undefined,
   inputs: ['anyStyle', 'disabled', 'inputId', 'listStyle', 'name', 'optionLabel', 'optionValue', 'options', 'readonly', 'scrollerHeight', 'value', 'virtualScroll']
 })
 @Component({
@@ -280,11 +272,75 @@ export class AnyListbox {
 }
 
 
+export declare interface AnyRadioButton extends Components.AnyRadioButton {
+  /**
+   * Callback to invoke on radio button select. 
+   */
+  aOnSelect: EventEmitter<CustomEvent<any>>;
+  /**
+   * Callback to invoke when the radio button receives focus. 
+   */
+  aOnFocus: EventEmitter<CustomEvent<any>>;
+  /**
+   * Callback to invoke when the radio button loses focus. 
+   */
+  aOnBlur: EventEmitter<CustomEvent<any>>;
+
+}
+
+@ProxyCmp({
+  defineCustomElementFn: undefined,
+  inputs: ['anyStyle', 'anyTabIndex', 'disabled', 'inputId', 'label', 'labelStyleClass', 'name', 'styleClass', 'value'],
+  methods: ['setFocus']
+})
+@Component({
+  selector: 'any-radio-button',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  inputs: ['anyStyle', 'anyTabIndex', 'disabled', 'inputId', 'label', 'labelStyleClass', 'name', 'styleClass', 'value']
+})
+export class AnyRadioButton {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['aOnSelect', 'aOnFocus', 'aOnBlur']);
+  }
+}
+
+import type { RadioGroupChangeEventDetail as IRadioGroupRadioGroupChangeEventDetail } from '@anywhere-ui/core';
+export declare interface AnyRadioGroup extends Components.AnyRadioGroup {
+  /**
+   * Emitted when the value has changed. 
+   */
+  valueChange: EventEmitter<CustomEvent<IRadioGroupRadioGroupChangeEventDetail>>;
+
+}
+
+@ProxyCmp({
+  defineCustomElementFn: undefined,
+  inputs: ['allowEmptySelection', 'name', 'value']
+})
+@Component({
+  selector: 'any-radio-group',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  inputs: ['allowEmptySelection', 'name', 'value']
+})
+export class AnyRadioGroup {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['valueChange']);
+  }
+}
+
+
 export declare interface AnyRippleEffect extends Components.AnyRippleEffect {}
 
 @ProxyCmp({
-  tagName: 'any-ripple-effect',
-  customElement: undefined,
+  defineCustomElementFn: undefined,
   inputs: ['type']
 })
 @Component({
@@ -305,8 +361,7 @@ export class AnyRippleEffect {
 export declare interface AnyTabPanel extends Components.AnyTabPanel {}
 
 @ProxyCmp({
-  tagName: 'any-tab-panel',
-  customElement: undefined,
+  defineCustomElementFn: undefined,
   inputs: ['disabled', 'header', 'selected']
 })
 @Component({
@@ -327,8 +382,7 @@ export class AnyTabPanel {
 export declare interface AnyTabView extends Components.AnyTabView {}
 
 @ProxyCmp({
-  tagName: 'any-tab-view',
-  customElement: undefined,
+  defineCustomElementFn: undefined,
   inputs: ['activeIndex', 'anyStyle', 'styleClass']
 })
 @Component({
@@ -371,8 +425,7 @@ export declare interface AnyVirtualScroller extends Components.AnyVirtualScrolle
 }
 
 @ProxyCmp({
-  tagName: 'any-virtual-scroller',
-  customElement: undefined,
+  defineCustomElementFn: undefined,
   inputs: ['anyStyle', 'contentElemClass', 'contentElemTag', 'delay', 'itemElemClass', 'itemSize', 'itemTag', 'items', 'lazy', 'noDataText', 'rowsPerPage', 'scrollElemClass', 'scrollerHeight', 'styleClass']
 })
 @Component({
diff --git a/packages/angular/projects/anywhere-ui/src/lib/directives/radio-value-accessor.ts b/packages/angular/projects/anywhere-ui/src/lib/directives/radio-value-accessor.ts
new file mode 100644
index 0000000..dec8cd3
--- /dev/null
+++ b/packages/angular/projects/anywhere-ui/src/lib/directives/radio-value-accessor.ts
@@ -0,0 +1,24 @@
+import { Directive, ElementRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+import { ValueAccessor } from './value-accessor';
+
+@Directive({
+  /* tslint:disable-next-line:directive-selector */
+  selector: 'any-radio-button',
+  host: {
+    '(aOnSelect)': 'handleChangeEvent($event.target.checked)'
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: RadioValueAccessor,
+      multi: true
+    }
+  ]
+})
+export class RadioValueAccessor extends ValueAccessor {
+  constructor(el: ElementRef) {
+    super(el);
+  }
+}
diff --git a/packages/angular/projects/anywhere-ui/src/lib/directives/select-value-accessor.ts b/packages/angular/projects/anywhere-ui/src/lib/directives/select-value-accessor.ts
index 59eeaf0..448e65d 100644
--- a/packages/angular/projects/anywhere-ui/src/lib/directives/select-value-accessor.ts
+++ b/packages/angular/projects/anywhere-ui/src/lib/directives/select-value-accessor.ts
@@ -5,7 +5,7 @@ import { ValueAccessor } from './value-accessor';
 
 @Directive({
   /* tslint:disable-next-line:directive-selector */
-  selector: 'any-dropdown, any-listbox, any-virtual-scroller',
+  selector: 'any-dropdown, any-listbox, any-virtual-scroller, any-radio-group',
   host: {
     '(valueChange)': 'handleChangeEvent($event.target.value)'
   },
diff --git a/packages/angular/projects/anywhere-ui/src/lib/directives/text-value-accessor.ts b/packages/angular/projects/anywhere-ui/src/lib/directives/text-value-accessor.ts
index 2d5ff24..14acee3 100644
--- a/packages/angular/projects/anywhere-ui/src/lib/directives/text-value-accessor.ts
+++ b/packages/angular/projects/anywhere-ui/src/lib/directives/text-value-accessor.ts
@@ -5,7 +5,7 @@ import { ValueAccessor } from './value-accessor';
 
 @Directive({
   /* tslint:disable-next-line:directive-selector */
-  selector: 'any-input-text[type=text]',
+  selector: 'any-input-text:not([type=number])',
   host: {
     '(valueChange)': 'handleChangeEvent($event.target.value)'
   },
diff --git a/packages/angular/projects/anywhere-ui/src/lib/providers/config.ts b/packages/angular/projects/anywhere-ui/src/lib/providers/config.ts
new file mode 100644
index 0000000..5138ce9
--- /dev/null
+++ b/packages/angular/projects/anywhere-ui/src/lib/providers/config.ts
@@ -0,0 +1,45 @@
+import { Injectable, InjectionToken } from '@angular/core';
+import { Config as CoreConfig, AnywhereUIConfig } from '@anywhere-ui/core';
+
+// import { IonicWindow } from '../types/interfaces';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class Config {
+  get(key: keyof AnywhereUIConfig, fallback?: any): any {
+    const c = getConfig();
+    if (c) {
+      return c.get(key, fallback);
+    }
+    return null;
+  }
+
+  getBoolean(key: keyof AnywhereUIConfig, fallback?: boolean): boolean {
+    const c = getConfig();
+    if (c) {
+      return c.getBoolean(key, fallback);
+    }
+    return false;
+  }
+
+  getNumber(key: keyof AnywhereUIConfig, fallback?: number): number {
+    const c = getConfig();
+    if (c) {
+      return c.getNumber(key, fallback);
+    }
+    return 0;
+  }
+}
+
+export const ConfigToken = new InjectionToken<any>('USERCONFIG');
+
+const getConfig = (): CoreConfig | null => {
+  if (typeof (window as any) !== 'undefined') {
+    const AnywhereUI = (window as any).AnywhereUI;
+    if (AnywhereUI?.config) {
+      return AnywhereUI.config;
+    }
+  }
+  return null;
+};
diff --git a/packages/angular/projects/anywhere-ui/src/lib/util/util.ts b/packages/angular/projects/anywhere-ui/src/lib/util/util.ts
new file mode 100644
index 0000000..6f8b29c
--- /dev/null
+++ b/packages/angular/projects/anywhere-ui/src/lib/util/util.ts
@@ -0,0 +1,12 @@
+declare const __zone_symbol__requestAnimationFrame: any;
+declare const requestAnimationFrame: any;
+
+export const raf = (h: any): any => {
+  if (typeof __zone_symbol__requestAnimationFrame === 'function') {
+    return __zone_symbol__requestAnimationFrame(h);
+  }
+  if (typeof requestAnimationFrame === 'function') {
+    return requestAnimationFrame(h);
+  }
+  return setTimeout(h);
+};
diff --git a/packages/angular/projects/anywhere-ui/src/public-api.ts b/packages/angular/projects/anywhere-ui/src/public-api.ts
index 8a7a142..ce2af83 100644
--- a/packages/angular/projects/anywhere-ui/src/public-api.ts
+++ b/packages/angular/projects/anywhere-ui/src/public-api.ts
@@ -6,3 +6,4 @@ export * from './lib/directives/proxies';
 export * from './lib/directives/boolean-value-accessor';
 export * from './lib/directives/text-value-accessor';
 export * from './lib/directives/select-value-accessor';
+export * from './lib/directives/radio-value-accessor';
diff --git a/packages/core/package-lock.json b/packages/core/package-lock.json
index 850c1f8..672a59b 100644
--- a/packages/core/package-lock.json
+++ b/packages/core/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@anywhere-ui/core",
-  "version": "0.2.0+5",
+  "version": "0.2.0+7",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -450,12 +450,12 @@
       }
     },
     "@iconify/iconify": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@iconify/iconify/-/iconify-2.1.0.tgz",
-      "integrity": "sha512-YXKrDVXIGUeFIRqr6QC/l6MRj9kDOlES4sWx/ty8SXUk0pCZnBwsj0/to9Q3g79TAyh2wG3/yzrkf6fHKichwA==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@iconify/iconify/-/iconify-2.1.2.tgz",
+      "integrity": "sha512-QcUzFeEWkE/mW+BVtEGmcWATClcCOIJFiYUD/PiCWuTcdEA297o8D4oN6Ra44WrNOHu1wqNW4J0ioaDIiqaFOQ==",
       "dev": true,
       "requires": {
-        "cross-fetch": "^3.1.4"
+        "cross-fetch": "^3.1.5"
       }
     },
     "@istanbuljs/load-nyc-config": {
@@ -687,21 +687,21 @@
       }
     },
     "@stencil/angular-output-target": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.3.0.tgz",
-      "integrity": "sha512-b3+VN9cmQScZqFdK2dlwYTZxwA74Suqf/7Ff05ywUKIAGjic+ZUhJJrdSmsT8bnZGY5hj7OG2CwOB/XeZDlrpg==",
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.4.0.tgz",
+      "integrity": "sha512-zauaj0za46IWoPgv2IanDp3tiljwDRDNk4jB7WII6KeL66dkk7ffeqYZ0CgySTU5W2FjnKR6JEKbAnwUxjGIsA==",
       "dev": true
     },
     "@stencil/core": {
-      "version": "2.10.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.10.0.tgz",
-      "integrity": "sha512-15rWMTPQ/sp0lSV82HVCXkIya3QLN+uBl7pqK4JnTrp4HiLrzLmNbWjbvgCs55gw0lULbCIGbRIEsFz+Pe/Q+A==",
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.13.0.tgz",
+      "integrity": "sha512-EEKHOHgYpg3/iFUKMXTZJjUayRul7sXDwNw0OGgkEOe4t7JWiibDkzUHuruvpbqEydX+z1+ez5K2bMMY76c2wA==",
       "dev": true
     },
     "@stencil/react-output-target": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.1.0.tgz",
-      "integrity": "sha512-NWeN2S43dwWDIousfojzGXIMkJJhfcdS1JxpwgE7IOqy4tZ+nqlDLPhM6tXvZ3eq4rJm8bkF+3/WbPJNR9xR7Q==",
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.2.1.tgz",
+      "integrity": "sha512-A6ut+ua3s9UPVXHmAco8g6phvRsr8Db1wM6Mws2bdSAawzc1n49afS+FbTMUMcjqKAGShMp5lsM0/QA0jx5SdQ==",
       "dev": true
     },
     "@stencil/sass": {
@@ -711,9 +711,9 @@
       "dev": true
     },
     "@stencil/vue-output-target": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.5.1.tgz",
-      "integrity": "sha512-E9HeuUf4DjHO8VFd+faR6T+/JwLtU/2kIA000YTTv0ARPUXuxr/3+U3YMBRPCVFPC5n2jsFxU3E9rTmVH1MGyg==",
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.6.0.tgz",
+      "integrity": "sha512-UxI0RTgz3AfhOePbgK3CNcX7uLVxDrdkpSCJoIyr8EjSrW5HkfraZ/ukIzuPDJDDxtYRRevY7It+qOhfn0B6aA==",
       "dev": true
     },
     "@tootallnate/once": {
@@ -809,9 +809,9 @@
       }
     },
     "@types/lodash": {
-      "version": "4.14.177",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.177.tgz",
-      "integrity": "sha512-0fDwydE2clKe9MNfvXHBHF9WEahRuj+msTuQqOmAApNORFvhMYZKNGGJdCzuhheVjMps/ti0Ak/iJPACMaevvw==",
+      "version": "4.14.178",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.178.tgz",
+      "integrity": "sha512-0d5Wd09ItQWH1qFbEyQ7oTQ3GZrMfth5JkbN3EvTKLXcHLRDSXeLnlvlOn0wvxVIwK5o2M8JzP/OWz7T3NRsbw==",
       "dev": true
     },
     "@types/node": {
@@ -1271,7 +1271,8 @@
     "camelcase": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "dev": true
     },
     "caniuse-lite": {
       "version": "1.0.30001248",
@@ -1421,6 +1422,7 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
       "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "dev": true,
       "requires": {
         "string-width": "^4.2.0",
         "strip-ansi": "^6.0.0",
@@ -1584,12 +1586,45 @@
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
     },
     "cross-fetch": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.4.tgz",
-      "integrity": "sha512-1eAtFWdIubi6T4XPy6ei9iUFoKpUkIF971QLN8lIvvvwueI65+Nw5haMNKUwfJxabqlIIDODJKGrQ66gxC0PbQ==",
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz",
+      "integrity": "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==",
       "dev": true,
       "requires": {
-        "node-fetch": "2.6.1"
+        "node-fetch": "2.6.7"
+      },
+      "dependencies": {
+        "node-fetch": {
+          "version": "2.6.7",
+          "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
+          "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
+          "dev": true,
+          "requires": {
+            "whatwg-url": "^5.0.0"
+          }
+        },
+        "tr46": {
+          "version": "0.0.3",
+          "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+          "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=",
+          "dev": true
+        },
+        "webidl-conversions": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+          "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=",
+          "dev": true
+        },
+        "whatwg-url": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+          "integrity": "sha1-lmRU6HZUYuN2RNNib2dCzotwll0=",
+          "dev": true,
+          "requires": {
+            "tr46": "~0.0.3",
+            "webidl-conversions": "^3.0.0"
+          }
+        }
       }
     },
     "cross-spawn": {
@@ -1675,7 +1710,8 @@
     "decamelize": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
-      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
+      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
+      "dev": true
     },
     "decimal.js": {
       "version": "10.2.1",
@@ -1801,7 +1837,8 @@
     "emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true
     },
     "enabled": {
       "version": "2.0.0",
@@ -2161,6 +2198,7 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
       "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dev": true,
       "requires": {
         "locate-path": "^5.0.0",
         "path-exists": "^4.0.0"
@@ -2250,7 +2288,8 @@
     "get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
-      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true
     },
     "get-package-type": {
       "version": "0.1.0",
@@ -2720,7 +2759,8 @@
     "is-fullwidth-code-point": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true
     },
     "is-generator-fn": {
       "version": "2.1.0",
@@ -3450,6 +3490,7 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
       "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dev": true,
       "requires": {
         "p-locate": "^4.1.0"
       }
@@ -3998,6 +4039,7 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
       "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dev": true,
       "requires": {
         "p-try": "^2.0.0"
       }
@@ -4006,6 +4048,7 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
       "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dev": true,
       "requires": {
         "p-limit": "^2.2.0"
       }
@@ -4013,7 +4056,8 @@
     "p-try": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "dev": true
     },
     "parse-json": {
       "version": "5.2.0",
@@ -4048,7 +4092,8 @@
     "path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true
     },
     "path-is-absolute": {
       "version": "1.0.1",
@@ -4122,9 +4167,9 @@
       }
     },
     "prismjs": {
-      "version": "1.25.0",
-      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.25.0.tgz",
-      "integrity": "sha512-WCjJHl1KEWbnkQom1+SzftbtXMKQoezOCYs5rECqMN+jP+apI7ftoflyqigqzopSO3hMhTEb0mFClA8lkolgEg==",
+      "version": "1.26.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.26.0.tgz",
+      "integrity": "sha512-HUoH9C5Z3jKkl3UunCyiD5jwk0+Hz0fIgQ2nbwU2Oo/ceuTAQAg+pPVnfdt2TJWRVLcxKh9iuoYDUSc8clb5UQ==",
       "dev": true
     },
     "process-nextick-args": {
@@ -4306,6 +4351,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/replace/-/replace-1.2.1.tgz",
       "integrity": "sha512-KZCBe/tPanwBlbjSMQby4l+zjSiFi3CLEP/6VLClnRYgJ46DZ5u9tmA6ceWeFS8coaUnU4ZdGNb/puUGMHNSRg==",
+      "dev": true,
       "requires": {
         "chalk": "2.4.2",
         "minimatch": "3.0.4",
@@ -4316,6 +4362,7 @@
           "version": "3.2.1",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
           "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
           "requires": {
             "color-convert": "^1.9.0"
           }
@@ -4324,6 +4371,7 @@
           "version": "2.4.2",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
           "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
           "requires": {
             "ansi-styles": "^3.2.1",
             "escape-string-regexp": "^1.0.5",
@@ -4334,6 +4382,7 @@
           "version": "1.9.3",
           "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
           "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+          "dev": true,
           "requires": {
             "color-name": "1.1.3"
           }
@@ -4341,22 +4390,26 @@
         "color-name": {
           "version": "1.1.3",
           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
+          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+          "dev": true
         },
         "escape-string-regexp": {
           "version": "1.0.5",
           "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
+          "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+          "dev": true
         },
         "has-flag": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
         },
         "supports-color": {
           "version": "5.5.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
           "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
           "requires": {
             "has-flag": "^3.0.0"
           }
@@ -4372,12 +4425,14 @@
     "require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
-      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I="
+      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
+      "dev": true
     },
     "require-main-filename": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
-      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "dev": true
     },
     "resolve": {
       "version": "1.20.0",
@@ -4746,7 +4801,8 @@
     "set-blocking": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
+      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
+      "dev": true
     },
     "set-value": {
       "version": "2.0.1",
@@ -5194,6 +5250,7 @@
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
       "integrity": "sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==",
+      "dev": true,
       "requires": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -5219,6 +5276,7 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
       "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+      "dev": true,
       "requires": {
         "ansi-regex": "^5.0.0"
       }
@@ -5697,7 +5755,8 @@
     "which-module": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
-      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho="
+      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
+      "dev": true
     },
     "winston": {
       "version": "3.3.3",
@@ -5758,6 +5817,7 @@
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
       "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "dev": true,
       "requires": {
         "ansi-styles": "^4.0.0",
         "string-width": "^4.1.0",
@@ -5814,7 +5874,8 @@
     "y18n": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
-      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "dev": true
     },
     "yallist": {
       "version": "4.0.0",
@@ -5826,6 +5887,7 @@
       "version": "15.4.1",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
       "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "dev": true,
       "requires": {
         "cliui": "^6.0.0",
         "decamelize": "^1.2.0",
@@ -5844,6 +5906,7 @@
       "version": "18.1.3",
       "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
       "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "dev": true,
       "requires": {
         "camelcase": "^5.0.0",
         "decamelize": "^1.2.0"
diff --git a/packages/core/package.json b/packages/core/package.json
index 2b10ba3..68f12ac 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@anywhere-ui/core",
-  "version": "0.2.0+7",
+  "version": "0.2.0",
   "description": "AnywhereUI",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -33,14 +33,14 @@
     "deploy-site-to-master": "bash scripts/deploy-site-to-master.sh"
   },
   "devDependencies": {
-    "@iconify/iconify": "^2.1.0",
-    "@stencil/angular-output-target": "0.3.0",
-    "@stencil/core": "^2.10.0",
-    "@stencil/react-output-target": "^0.1.0",
+    "@iconify/iconify": "^2.1.2",
+    "@stencil/angular-output-target": "0.4.0",
+    "@stencil/core": "^2.13.0",
+    "@stencil/react-output-target": "^0.2.1",
     "@stencil/sass": "^1.5.2",
-    "@stencil/vue-output-target": "^0.5.1",
+    "@stencil/vue-output-target": "^0.6.0",
     "@types/clusterize.js": "^0.18.1",
-    "@types/lodash": "^4.14.177",
+    "@types/lodash": "^4.14.178",
     "@types/puppeteer": "^5.4.4",
     "clusterize.js": "^0.18.1",
     "clusterize.js-paging": "^1.0.3",
@@ -50,7 +50,7 @@
     "jest": "26.6.3",
     "jest-cli": "26.6.3",
     "lodash": "^4.17.21",
-    "prismjs": "^1.25.0",
+    "prismjs": "^1.26.0",
     "puppeteer": "^9.0.0",
     "rebase": "^0.3.0",
     "replace": "^1.2.1",
@@ -62,5 +62,5 @@
     "build": "^0.1.4",
     "run": "^1.4.0"
   },
-  "buildnum": "7"
+  "buildnum": "8"
 }
\ No newline at end of file
diff --git a/packages/core/src/app/App.js b/packages/core/src/app/App.js
index c1de849..0abe664 100644
--- a/packages/core/src/app/App.js
+++ b/packages/core/src/app/App.js
@@ -9,6 +9,7 @@ import TabView from "./views/TabView/TabView.js";
 import Button from "./views/Button/Button.js";
 import Badge from "./views/Badge/Badge.js";
 import RippleEffect from "./views/RippleEffect/RippleEffect.js";
+import RadioButton from "./views/RadioButton/RadioButton.js";
 
 const pathToRegex = (path) =>
   new RegExp("^" + path.replace(/\//g, "\\/").replace(/:\w+/g, "(.+)") + "$");
@@ -102,6 +103,10 @@ const router = () => {
       path: "/ripple-effect",
       view: RippleEffect,
     },
+    {
+      path: "/radio-button",
+      view: RadioButton,
+    },
   ];
 
   // Test each route for potential match
@@ -149,6 +154,8 @@ const router = () => {
 window.addEventListener("popstate", router);
 
 document.addEventListener("DOMContentLoaded", () => {
+  // window.AnywhereUI.config.set('rippleEffect', false);
+
   document.body.addEventListener("click", (e) => {
     if (e.target.matches("[data-link]")) {
       e.preventDefault();
diff --git a/packages/core/src/app/css/app.css b/packages/core/src/app/css/app.css
index e50b57f..921c195 100644
--- a/packages/core/src/app/css/app.css
+++ b/packages/core/src/app/css/app.css
@@ -512,6 +512,12 @@ code[class*=language] {
   user-select: none;
 }
 
+.any-field-radiobutton {
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+}
+
 .any-link {
   font-size: 1rem;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
diff --git a/packages/core/src/app/css/app.css.map b/packages/core/src/app/css/app.css.map
index 47d25a8..9a15003 100644
--- a/packages/core/src/app/css/app.css.map
+++ b/packages/core/src/app/css/app.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/_core.scss","../scss/_content.scss","../scss/_sidebar.scss","../scss/_topbar.scss","../scss/_footer.scss","../scss/_demo.scss","../scss/_responsive.scss","../scss/_virtual-scroller.scss","../scss/_button.scss","../scss/_ripple.scss"],"names":[],"mappings":"AAAA;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;;AAEA;EACI;;;AAIR;AAAA;AAAA;AAAA;AAAA;AAAA;EAMI;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;;;AAIR;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;IACI;;EAGJ;IACI;;EAGJ;IACI;;;AAMJ;EAEI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAII;EAEI;;AAGJ;EAEI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EAEI;;;AAMhB;AAAA;EAEI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;;;ACjKJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;AAEA;EAEI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAIQ;EACI;EACA;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;;AAKZ;EACI;EACA;;AAEA;EACI;;AAIA;EACI;EACA;;AAEA;EACI;;AAMhB;EACI;;AAIR;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;EAEA;;AAEA;EACI;;AAIR;EACI;EACA;;AAIR;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAIA;EACI;EACA;;AAEA;EACI;EACA;EACA;;AAOJ;EACI;EACA;EACA;;;ACzIxB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;EACA;EACA;EACA;AACA;EACA;AACA;AACA;EACA;EACA;;AAEA;EACI;EACA;;AAIJ;EACI;;AAEA;EACI;;AAQhB;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;;;AAQpB;AAAA;EAEI;EACA;;;ACvGJ;EACI;AACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEI;;AAGJ;EACI;EACA;EACA;EACA;;;AClFpB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACVJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;;AAIR;AAAA;EAEI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;AAAA;EAEI;;;AAGJ;EACI;;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAYI;EACA;;;AAGJ;EACI;IACI;;EAGJ;IACI;;;AAIR;EACI;IACI;;EAGJ;IACI;;;AC1IR;EAEQ;IACI;;EAEA;IACI;;;EAKZ;IACI;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAIA;IACI;;EAIR;IACI;IACA;;EAGJ;IACI;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;;EAGJ;IACI;;;EAMhB;IACI;IACA;;EAEA;IACI;;;EAIR;IACI;;EAGI;IACI;;EAEA;IACI;IACA;;EAKZ;IACI;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;;;EAKZ;IACI;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;EAKJ;IACI;;EAGJ;IACI;;EAGJ;IACI;;EAGJ;IACI;;;EAKJ;IACI;IACA;;EAGJ;IACI;;;EAIR;IACI;;;EAGJ;IACI;IACA;;;AAIR;EAKoB;IACI;;;EAUR;IACI;;EAEA;IACI;IACA;IACA;IACA;IACA;;;ACnLxB;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAIA;EACI;EACA;EACA;EACA;;AAKA;AAAA;EAEI;EACA;EACA;EACA;;AAKJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;;AAMhB;EACI;IACI;;;EAGJ;IACI;;;EAGJ;AAAA;IAEI;;;AChFR;EACI;;;AAGJ;EACI;EACA;;AAGI;EACI;EACA;;AAEA;EACI;EACA;;AAIR;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;;AAMZ;EAEQ;IACI;;;EAKJ;IACI;;EAEA;IACI;IACA;;EAEA;IACI;;EAMZ;IACI;IACA;;EAGJ;IACI;;EAGI;IACI;;EAGJ;IACI;;EAGJ;IACI;IACA;IACA;IACA;;EAGJ;IACI;IACA;IACA;IACA;;;ACzFhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAIA;EACI;;AAKJ;EACI;;AAKJ;EACI;;AAIR;EACI","file":"app.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/_core.scss","../scss/_content.scss","../scss/_sidebar.scss","../scss/_topbar.scss","../scss/_footer.scss","../scss/_demo.scss","../scss/_responsive.scss","../scss/_virtual-scroller.scss","../scss/_button.scss","../scss/_ripple.scss"],"names":[],"mappings":"AAAA;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;;AAEA;EACI;;;AAIR;AAAA;AAAA;AAAA;AAAA;AAAA;EAMI;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;;;AAIR;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;IACI;;EAGJ;IACI;;EAGJ;IACI;;;AAMJ;EAEI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAII;EAEI;;AAGJ;EAEI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EAEI;;;AAMhB;AAAA;EAEI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;;;ACjKJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;AAEA;EAEI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAIQ;EACI;EACA;;AAIR;EACI;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;;AAKZ;EACI;EACA;;AAEA;EACI;;AAIA;EACI;EACA;;AAEA;EACI;;AAMhB;EACI;;AAIR;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;EAEA;;AAEA;EACI;;AAIR;EACI;EACA;;AAIR;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAIA;EACI;EACA;;AAEA;EACI;EACA;EACA;;AAOJ;EACI;EACA;EACA;;;ACzIxB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;EACA;EACA;EACA;AACA;EACA;AACA;AACA;EACA;EACA;;AAEA;EACI;EACA;;AAIJ;EACI;;AAEA;EACI;;AAQhB;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;;;AAQpB;AAAA;EAEI;EACA;;;ACvGJ;EACI;AACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEI;;AAGJ;EACI;EACA;EACA;EACA;;;AClFpB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACVJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;;AAIR;AAAA;EAEI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;AAAA;EAEI;;;AAGJ;EACI;;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAYI;EACA;;;AAGJ;EACI;IACI;;EAGJ;IACI;;;AAIR;EACI;IACI;;EAGJ;IACI;;;AChJR;EAEQ;IACI;;EAEA;IACI;;;EAKZ;IACI;IACA;IACA;IACA;IACA;;EAEA;IACI;;EAIA;IACI;;EAIR;IACI;IACA;;EAGJ;IACI;IACA;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;;EAGJ;IACI;;;EAMhB;IACI;IACA;;EAEA;IACI;;;EAIR;IACI;;EAGI;IACI;;EAEA;IACI;IACA;;EAKZ;IACI;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;IACA;IACA;;;EAKZ;IACI;;EAEA;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;EAKJ;IACI;;EAGJ;IACI;;EAGJ;IACI;;EAGJ;IACI;;;EAKJ;IACI;IACA;;EAGJ;IACI;;;EAIR;IACI;;;EAGJ;IACI;IACA;;;AAIR;EAKoB;IACI;;;EAUR;IACI;;EAEA;IACI;IACA;IACA;IACA;IACA;;;ACnLxB;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAIA;EACI;EACA;EACA;EACA;;AAKA;AAAA;EAEI;EACA;EACA;EACA;;AAKJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;;AAMhB;EACI;IACI;;;EAGJ;IACI;;;EAGJ;AAAA;IAEI;;;AChFR;EACI;;;AAGJ;EACI;EACA;;AAGI;EACI;EACA;;AAEA;EACI;EACA;;AAIR;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;;AAMZ;EAEQ;IACI;;;EAKJ;IACI;;EAEA;IACI;IACA;;EAEA;IACI;;EAMZ;IACI;IACA;;EAGJ;IACI;;EAGI;IACI;;EAGJ;IACI;;EAGJ;IACI;IACA;IACA;IACA;;EAGJ;IACI;IACA;IACA;IACA;;;ACzFhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAIA;EACI;;AAKJ;EACI;;AAKJ;EACI;;AAIR;EACI","file":"app.css"}
\ No newline at end of file
diff --git a/packages/core/src/app/scss/_demo.scss b/packages/core/src/app/scss/_demo.scss
index 1fef53c..dc5e90d 100644
--- a/packages/core/src/app/scss/_demo.scss
+++ b/packages/core/src/app/scss/_demo.scss
@@ -81,6 +81,12 @@
     user-select: none;
 }
 
+.any-field-radiobutton {
+    margin-bottom: 1rem;
+    display: flex;
+    align-items: center;
+}
+
 .any-link {
     font-size: 1rem;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
diff --git a/packages/core/src/app/views/RadioButton/RadioButton.html b/packages/core/src/app/views/RadioButton/RadioButton.html
new file mode 100644
index 0000000..9e98f61
--- /dev/null
+++ b/packages/core/src/app/views/RadioButton/RadioButton.html
@@ -0,0 +1,45 @@
+<div class="content-section introduction">
+  <div class="feature-intro">
+    <h1>RadioButton</h1>
+    <p>RadioButton is an extension to standard radio button element with theming.</p>
+  </div>
+  <app-demoactions>
+    <div class="app-demoactions any-d-flex any-ai-end any-jc-end any-mt-3">
+      <any-button id="view_on_github" icon="fa-brands:github"
+        style-class="any-button-rounded any-button-text any-button-lg any-button-plain"></any-button>
+    </div>
+  </app-demoactions>
+</div>
+<div class="content-section">
+  <div class="full-card">
+    <h5>Basic</h5>
+    <any-radio-group name="city">
+      <div class="any-field-radiobutton">
+        <any-radio-button id="rb1" value="Chicago" label="Chicago"></any-radio-button>
+      </div>
+      <div class="any-field-radiobutton">
+        <any-radio-button id="rb2" value="Los Angeles" label="Los Angeles"></any-radio-button>
+      </div>
+      <div class="any-field-radiobutton">
+        <any-radio-button id="rb3" value="New York" label="New York"></any-radio-button>
+      </div>
+      <div class="any-field-radiobutton">
+        <any-radio-button id="rb4" value="San Francisco" label="San Francisco"></any-radio-button>
+      </div>
+    </any-radio-group>
+    <h5>Preselection, Value Binding and Disabled Option</h5>
+    <any-radio-group value="losangeles" name="dynamicGroup">
+      <div class="any-field-radiobutton">
+        <any-radio-button id="rb5" value="chicago" disabled="true" label="Chicago"></any-radio-button>
+      </div>
+      <div class="any-field-radiobutton">
+        <any-radio-button id="rb6" value="losangeles" label="Los Angeles"></any-radio-button>
+      </div>
+      <div class="any-field-radiobutton">
+        <any-radio-button id="rb7" value="newyork" label="New York"></any-radio-button>
+      </div>
+      <div class="any-field-radiobutton">
+        <any-radio-button id="rb8" value="sanfrancisco" label=" San Francisco"></any-radio-button>
+      </div>
+    </any-radio-group>
+  </div>
diff --git a/packages/core/src/app/views/RadioButton/RadioButton.js b/packages/core/src/app/views/RadioButton/RadioButton.js
new file mode 100644
index 0000000..1b03a99
--- /dev/null
+++ b/packages/core/src/app/views/RadioButton/RadioButton.js
@@ -0,0 +1,22 @@
+import AbstractView from "../AbstractView.js";
+
+export default class extends AbstractView {
+  constructor(params) {
+    super(params);
+    this.setTitle("RadioButton");
+  }
+
+  executeScript() {
+    this.viewOnGithubBtn = document.querySelector("#view_on_github");
+    this.viewOnGithubBtn.addEventListener("aOnClick", (event) => {
+      window.open('https://github.com/adaleks/anywhere-ui/tree/main/packages/core/src/components/radio-button', '_blank');
+    });
+  }
+
+  async getHtml() {
+    return fetch('app/views/RadioButton/RadioButton.html')
+      .then(data => {
+        return data.text();
+      });
+  }
+}
diff --git a/packages/core/src/assets/favicon/android-icon-144x144.png b/packages/core/src/assets/favicon/android-icon-144x144.png
index 583b787..6f2498a 100644
Binary files a/packages/core/src/assets/favicon/android-icon-144x144.png and b/packages/core/src/assets/favicon/android-icon-144x144.png differ
diff --git a/packages/core/src/assets/favicon/android-icon-192x192.png b/packages/core/src/assets/favicon/android-icon-192x192.png
index c943e99..9cc31f0 100644
Binary files a/packages/core/src/assets/favicon/android-icon-192x192.png and b/packages/core/src/assets/favicon/android-icon-192x192.png differ
diff --git a/packages/core/src/assets/favicon/android-icon-36x36.png b/packages/core/src/assets/favicon/android-icon-36x36.png
index af662e0..6b482c9 100644
Binary files a/packages/core/src/assets/favicon/android-icon-36x36.png and b/packages/core/src/assets/favicon/android-icon-36x36.png differ
diff --git a/packages/core/src/assets/favicon/android-icon-48x48.png b/packages/core/src/assets/favicon/android-icon-48x48.png
index c473169..7cb1047 100644
Binary files a/packages/core/src/assets/favicon/android-icon-48x48.png and b/packages/core/src/assets/favicon/android-icon-48x48.png differ
diff --git a/packages/core/src/assets/favicon/android-icon-72x72.png b/packages/core/src/assets/favicon/android-icon-72x72.png
index e09b8e4..4ba93a7 100644
Binary files a/packages/core/src/assets/favicon/android-icon-72x72.png and b/packages/core/src/assets/favicon/android-icon-72x72.png differ
diff --git a/packages/core/src/assets/favicon/android-icon-96x96.png b/packages/core/src/assets/favicon/android-icon-96x96.png
index 3c529a8..48d5581 100644
Binary files a/packages/core/src/assets/favicon/android-icon-96x96.png and b/packages/core/src/assets/favicon/android-icon-96x96.png differ
diff --git a/packages/core/src/assets/favicon/apple-icon-114x114.png b/packages/core/src/assets/favicon/apple-icon-114x114.png
index c06996a..4d21025 100644
Binary files a/packages/core/src/assets/favicon/apple-icon-114x114.png and b/packages/core/src/assets/favicon/apple-icon-114x114.png differ
diff --git a/packages/core/src/assets/favicon/apple-icon-120x120.png b/packages/core/src/assets/favicon/apple-icon-120x120.png
index 6fddc3b..15d89d0 100644
Binary files a/packages/core/src/assets/favicon/apple-icon-120x120.png and b/packages/core/src/assets/favicon/apple-icon-120x120.png differ
diff --git a/packages/core/src/assets/favicon/apple-icon-144x144.png b/packages/core/src/assets/favicon/apple-icon-144x144.png
index 583b787..6f2498a 100644
Binary files a/packages/core/src/assets/favicon/apple-icon-144x144.png and b/packages/core/src/assets/favicon/apple-icon-144x144.png differ
diff --git a/packages/core/src/assets/favicon/apple-icon-152x152.png b/packages/core/src/assets/favicon/apple-icon-152x152.png
index fc30a33..3c92162 100644
Binary files a/packages/core/src/assets/favicon/apple-icon-152x152.png and b/packages/core/src/assets/favicon/apple-icon-152x152.png differ
diff --git a/packages/core/src/assets/favicon/apple-icon-180x180.png b/packages/core/src/assets/favicon/apple-icon-180x180.png
index 3681409..116353d 100644
Binary files a/packages/core/src/assets/favicon/apple-icon-180x180.png and b/packages/core/src/assets/favicon/apple-icon-180x180.png differ
diff --git a/packages/core/src/assets/favicon/apple-icon-57x57.png b/packages/core/src/assets/favicon/apple-icon-57x57.png
index 71823fa..1c54448 100644
Binary files a/packages/core/src/assets/favicon/apple-icon-57x57.png and b/packages/core/src/assets/favicon/apple-icon-57x57.png differ
diff --git a/packages/core/src/assets/favicon/apple-icon-60x60.png b/packages/core/src/assets/favicon/apple-icon-60x60.png
index 43a8f69..9666d1d 100644
Binary files a/packages/core/src/assets/favicon/apple-icon-60x60.png and b/packages/core/src/assets/favicon/apple-icon-60x60.png differ
diff --git a/packages/core/src/assets/favicon/apple-icon-72x72.png b/packages/core/src/assets/favicon/apple-icon-72x72.png
index e09b8e4..4ba93a7 100644
Binary files a/packages/core/src/assets/favicon/apple-icon-72x72.png and b/packages/core/src/assets/favicon/apple-icon-72x72.png differ
diff --git a/packages/core/src/assets/favicon/apple-icon-76x76.png b/packages/core/src/assets/favicon/apple-icon-76x76.png
index 83c00ce..88dd961 100644
Binary files a/packages/core/src/assets/favicon/apple-icon-76x76.png and b/packages/core/src/assets/favicon/apple-icon-76x76.png differ
diff --git a/packages/core/src/assets/favicon/apple-icon-precomposed.png b/packages/core/src/assets/favicon/apple-icon-precomposed.png
index f9324d4..f47cea9 100644
Binary files a/packages/core/src/assets/favicon/apple-icon-precomposed.png and b/packages/core/src/assets/favicon/apple-icon-precomposed.png differ
diff --git a/packages/core/src/assets/favicon/apple-icon.png b/packages/core/src/assets/favicon/apple-icon.png
index f9324d4..f47cea9 100644
Binary files a/packages/core/src/assets/favicon/apple-icon.png and b/packages/core/src/assets/favicon/apple-icon.png differ
diff --git a/packages/core/src/assets/favicon/favicon-16x16.png b/packages/core/src/assets/favicon/favicon-16x16.png
index 3061dbf..6bdf74e 100644
Binary files a/packages/core/src/assets/favicon/favicon-16x16.png and b/packages/core/src/assets/favicon/favicon-16x16.png differ
diff --git a/packages/core/src/assets/favicon/favicon-32x32.png b/packages/core/src/assets/favicon/favicon-32x32.png
index a13b10a..9c3ea17 100644
Binary files a/packages/core/src/assets/favicon/favicon-32x32.png and b/packages/core/src/assets/favicon/favicon-32x32.png differ
diff --git a/packages/core/src/assets/favicon/favicon-96x96.png b/packages/core/src/assets/favicon/favicon-96x96.png
index 3c529a8..48d5581 100644
Binary files a/packages/core/src/assets/favicon/favicon-96x96.png and b/packages/core/src/assets/favicon/favicon-96x96.png differ
diff --git a/packages/core/src/assets/favicon/favicon.ico b/packages/core/src/assets/favicon/favicon.ico
index cc088e9..a98ce0e 100644
Binary files a/packages/core/src/assets/favicon/favicon.ico and b/packages/core/src/assets/favicon/favicon.ico differ
diff --git a/packages/core/src/assets/favicon/ms-icon-144x144.png b/packages/core/src/assets/favicon/ms-icon-144x144.png
index 583b787..6f2498a 100644
Binary files a/packages/core/src/assets/favicon/ms-icon-144x144.png and b/packages/core/src/assets/favicon/ms-icon-144x144.png differ
diff --git a/packages/core/src/assets/favicon/ms-icon-150x150.png b/packages/core/src/assets/favicon/ms-icon-150x150.png
index 1fc865b..5f99b6f 100644
Binary files a/packages/core/src/assets/favicon/ms-icon-150x150.png and b/packages/core/src/assets/favicon/ms-icon-150x150.png differ
diff --git a/packages/core/src/assets/favicon/ms-icon-310x310.png b/packages/core/src/assets/favicon/ms-icon-310x310.png
index 9aede79..731214c 100644
Binary files a/packages/core/src/assets/favicon/ms-icon-310x310.png and b/packages/core/src/assets/favicon/ms-icon-310x310.png differ
diff --git a/packages/core/src/assets/favicon/ms-icon-70x70.png b/packages/core/src/assets/favicon/ms-icon-70x70.png
index ceacad9..656f45b 100644
Binary files a/packages/core/src/assets/favicon/ms-icon-70x70.png and b/packages/core/src/assets/favicon/ms-icon-70x70.png differ
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
index f98450b..600df73 100644
--- a/packages/core/src/components.d.ts
+++ b/packages/core/src/components.d.ts
@@ -5,7 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { SelectChangeEventDetail } from "./interfaces";
+import { RadioGroupChangeEventDetail, SelectChangeEventDetail } from "./interfaces";
 export namespace Components {
     interface AnyBadge {
         /**
@@ -98,6 +98,10 @@ export namespace Components {
           * Inline style of the component.
          */
         "anyStyle": any;
+        /**
+          * Index of the element in tabbing order
+         */
+        "anyTabIndex"?: number;
         /**
           * Allows to select a boolean value instead of multiple values.
          */
@@ -369,6 +373,62 @@ export namespace Components {
          */
         "virtualScroll": boolean;
     }
+    interface AnyRadioButton {
+        /**
+          * Inline style of the component.
+         */
+        "anyStyle": any;
+        /**
+          * Index of the element in tabbing order
+         */
+        "anyTabIndex"?: number;
+        /**
+          * When present, it specifies that the element should be disabled.
+         */
+        "disabled": boolean;
+        /**
+          * Identifier of the focus input to match a label defined for the component.
+         */
+        "inputId": string;
+        /**
+          * Label of the radiobutton.
+         */
+        "label": string;
+        /**
+          * Style class of the label.
+         */
+        "labelStyleClass": string;
+        /**
+          * The name of the control, which is submitted with the form data.
+         */
+        "name": string;
+        /**
+          * Applies focus.
+         */
+        "setFocus": (ev: any) => Promise<void>;
+        /**
+          * Style class of the component.
+         */
+        "styleClass": any;
+        /**
+          * the value of the radio.
+         */
+        "value"?: any | null;
+    }
+    interface AnyRadioGroup {
+        /**
+          * If `true`, the radios can be deselected.
+         */
+        "allowEmptySelection": boolean;
+        /**
+          * The name of the control, which is submitted with the form data.
+         */
+        "name": string;
+        /**
+          * the value of the radio group.
+         */
+        "value"?: any | null;
+    }
     interface AnyRippleEffect {
         /**
           * Sets the type of ripple-effect:
@@ -511,6 +571,18 @@ declare global {
         prototype: HTMLAnyListboxElement;
         new (): HTMLAnyListboxElement;
     };
+    interface HTMLAnyRadioButtonElement extends Components.AnyRadioButton, HTMLStencilElement {
+    }
+    var HTMLAnyRadioButtonElement: {
+        prototype: HTMLAnyRadioButtonElement;
+        new (): HTMLAnyRadioButtonElement;
+    };
+    interface HTMLAnyRadioGroupElement extends Components.AnyRadioGroup, HTMLStencilElement {
+    }
+    var HTMLAnyRadioGroupElement: {
+        prototype: HTMLAnyRadioGroupElement;
+        new (): HTMLAnyRadioGroupElement;
+    };
     interface HTMLAnyRippleEffectElement extends Components.AnyRippleEffect, HTMLStencilElement {
     }
     var HTMLAnyRippleEffectElement: {
@@ -544,6 +616,8 @@ declare global {
         "any-input-switch": HTMLAnyInputSwitchElement;
         "any-input-text": HTMLAnyInputTextElement;
         "any-listbox": HTMLAnyListboxElement;
+        "any-radio-button": HTMLAnyRadioButtonElement;
+        "any-radio-group": HTMLAnyRadioGroupElement;
         "any-ripple-effect": HTMLAnyRippleEffectElement;
         "any-tab-panel": HTMLAnyTabPanelElement;
         "any-tab-view": HTMLAnyTabViewElement;
@@ -654,6 +728,10 @@ declare namespace LocalJSX {
           * Inline style of the component.
          */
         "anyStyle"?: any;
+        /**
+          * Index of the element in tabbing order
+         */
+        "anyTabIndex"?: number;
         /**
           * Allows to select a boolean value instead of multiple values.
          */
@@ -987,6 +1065,74 @@ declare namespace LocalJSX {
          */
         "virtualScroll"?: boolean;
     }
+    interface AnyRadioButton {
+        /**
+          * Inline style of the component.
+         */
+        "anyStyle"?: any;
+        /**
+          * Index of the element in tabbing order
+         */
+        "anyTabIndex"?: number;
+        /**
+          * When present, it specifies that the element should be disabled.
+         */
+        "disabled"?: boolean;
+        /**
+          * Identifier of the focus input to match a label defined for the component.
+         */
+        "inputId"?: string;
+        /**
+          * Label of the radiobutton.
+         */
+        "label"?: string;
+        /**
+          * Style class of the label.
+         */
+        "labelStyleClass"?: string;
+        /**
+          * The name of the control, which is submitted with the form data.
+         */
+        "name"?: string;
+        /**
+          * Callback to invoke when the radio button loses focus.
+         */
+        "onAOnBlur"?: (event: CustomEvent<any>) => void;
+        /**
+          * Callback to invoke when the radio button receives focus.
+         */
+        "onAOnFocus"?: (event: CustomEvent<any>) => void;
+        /**
+          * Callback to invoke on radio button select.
+         */
+        "onAOnSelect"?: (event: CustomEvent<any>) => void;
+        /**
+          * Style class of the component.
+         */
+        "styleClass"?: any;
+        /**
+          * the value of the radio.
+         */
+        "value"?: any | null;
+    }
+    interface AnyRadioGroup {
+        /**
+          * If `true`, the radios can be deselected.
+         */
+        "allowEmptySelection"?: boolean;
+        /**
+          * The name of the control, which is submitted with the form data.
+         */
+        "name"?: string;
+        /**
+          * Emitted when the value has changed.
+         */
+        "onValueChange"?: (event: CustomEvent<RadioGroupChangeEventDetail>) => void;
+        /**
+          * the value of the radio group.
+         */
+        "value"?: any | null;
+    }
     interface AnyRippleEffect {
         /**
           * Sets the type of ripple-effect:
@@ -1108,6 +1254,8 @@ declare namespace LocalJSX {
         "any-input-switch": AnyInputSwitch;
         "any-input-text": AnyInputText;
         "any-listbox": AnyListbox;
+        "any-radio-button": AnyRadioButton;
+        "any-radio-group": AnyRadioGroup;
         "any-ripple-effect": AnyRippleEffect;
         "any-tab-panel": AnyTabPanel;
         "any-tab-view": AnyTabView;
@@ -1126,6 +1274,8 @@ declare module "@stencil/core" {
             "any-input-switch": LocalJSX.AnyInputSwitch & JSXBase.HTMLAttributes<HTMLAnyInputSwitchElement>;
             "any-input-text": LocalJSX.AnyInputText & JSXBase.HTMLAttributes<HTMLAnyInputTextElement>;
             "any-listbox": LocalJSX.AnyListbox & JSXBase.HTMLAttributes<HTMLAnyListboxElement>;
+            "any-radio-button": LocalJSX.AnyRadioButton & JSXBase.HTMLAttributes<HTMLAnyRadioButtonElement>;
+            "any-radio-group": LocalJSX.AnyRadioGroup & JSXBase.HTMLAttributes<HTMLAnyRadioGroupElement>;
             "any-ripple-effect": LocalJSX.AnyRippleEffect & JSXBase.HTMLAttributes<HTMLAnyRippleEffectElement>;
             "any-tab-panel": LocalJSX.AnyTabPanel & JSXBase.HTMLAttributes<HTMLAnyTabPanelElement>;
             "any-tab-view": LocalJSX.AnyTabView & JSXBase.HTMLAttributes<HTMLAnyTabViewElement>;
diff --git a/packages/core/src/components/checkbox/checkbox.tsx b/packages/core/src/components/checkbox/checkbox.tsx
index df10ad8..becd2ce 100644
--- a/packages/core/src/components/checkbox/checkbox.tsx
+++ b/packages/core/src/components/checkbox/checkbox.tsx
@@ -47,6 +47,11 @@ export class AnyCheckbox {
    */
   @Prop() name: string = this.inputId;
 
+  /**
+   * Index of the element in tabbing order
+   */
+  @Prop() anyTabIndex?: number = 0;
+
   /**
    * The value of the checkbox does not mean if it's checked or not, use the `checked`
    * property for that.
@@ -186,6 +191,7 @@ export class AnyCheckbox {
           <div
             class={
               "any-checkbox any-component" +
+              (this.styleClass ? " " + this.styleClass : "") +
               (checked ? " any-checkbox-checked" : "") +
               (this.focused ? " any-checkbox-focused" : "") +
               (disabled ? " any-checkbox-disabled" : "")
@@ -200,6 +206,7 @@ export class AnyCheckbox {
                 checked={checked}
                 value={this.value}
                 aria-checked={`${checked}`}
+                tabindex={this.anyTabIndex}
                 onFocus={() => {
                   this.onFocus();
                 }}
diff --git a/packages/core/src/components/checkbox/readme.md b/packages/core/src/components/checkbox/readme.md
index 8851898..99a1fa6 100644
--- a/packages/core/src/components/checkbox/readme.md
+++ b/packages/core/src/components/checkbox/readme.md
@@ -10,6 +10,7 @@
 | Property          | Attribute           | Description                                                                                                                                                                                                                                                  | Type      | Default                     |
 | ----------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------- | --------------------------- |
 | `anyStyle`        | `any-style`         | Inline style of the component.                                                                                                                                                                                                                               | `any`     | `null`                      |
+| `anyTabIndex`     | `any-tab-index`     | Index of the element in tabbing order                                                                                                                                                                                                                        | `number`  | `0`                         |
 | `binary`          | `binary`            | Allows to select a boolean value instead of multiple values.                                                                                                                                                                                                 | `boolean` | `false`                     |
 | `checkboxIcon`    | `checkbox-icon`     | Icon class of the checkbox icon.                                                                                                                                                                                                                             | `string`  | `"fa-solid:check"`          |
 | `checked`         | `checked`           | If `true`, the checkbox is selected.                                                                                                                                                                                                                         | `boolean` | `false`                     |
diff --git a/packages/core/src/components/radio-button/radio-button.scss b/packages/core/src/components/radio-button/radio-button.scss
new file mode 100644
index 0000000..00b49d3
--- /dev/null
+++ b/packages/core/src/components/radio-button/radio-button.scss
@@ -0,0 +1,91 @@
+@import "../../themes/anywhere.globals.scss";
+
+:host {
+  display: block;
+
+  .any-radiobutton {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+    vertical-align: bottom;
+    position: relative;
+  }
+
+  .any-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .any-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+
+  .any-radiobutton-box.any-highlight .any-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+
+  p-radiobutton {
+    display: inline-flex;
+    vertical-align: bottom;
+    align-items: center;
+  }
+
+  .any-radiobutton-label {
+    line-height: 1;
+  }
+
+  .any-radiobutton {
+    width: var(--radiobuttonWidth);
+    height: var(--radiobuttonHeight);
+  }
+
+  .any-radiobutton .any-radiobutton-box {
+    border: var(--radiobuttonBorder);
+    background: var(--inputBgColor);
+    width: var(--radiobuttonWidth);
+    height: var(--radiobuttonHeight);
+    color: var(--textColor);
+    border-radius: 50%;
+    transition: var(--formElementTransition);
+  }
+
+  .any-radiobutton
+    .any-radiobutton-box:not(.any-disabled):not(.any-highlight):hover {
+    border-color: var(--primaryColor);
+  }
+
+  .any-radiobutton .any-radiobutton-box:not(.any-disabled).any-focus {
+    outline: var(--focusOutline);
+    outline-offset: var(--focusOutlineOffset);
+    box-shadow: var(--focusShadow);
+    border-color: var(--primaryColor);
+  }
+
+  .any-radiobutton .any-radiobutton-box .any-radiobutton-icon {
+    width: var(--radiobuttonIconSize);
+    height: var(--radiobuttonIconSize);
+    transition-duration: var(--transitionDuration);
+    background-color: var(--inputBgColor);
+  }
+
+  .any-radiobutton .any-radiobutton-box.any-highlight {
+    border-color: var(--primaryColor);
+    background: var(--primaryColor);
+  }
+
+  .any-radiobutton .any-radiobutton-box.any-highlight:not(.any-disabled):hover {
+    border-color: var(--radiobuttonActiveHoverBorderColor);
+    background: var(--radiobuttonActiveHoverBg);
+    color: var(--radiobuttonIconActiveHoverColor);
+  }
+
+  .any-radiobutton-label {
+    margin-left: 0.5rem;
+  }
+}
diff --git a/packages/core/src/components/radio-button/radio-button.tsx b/packages/core/src/components/radio-button/radio-button.tsx
new file mode 100644
index 0000000..3cdc8c3
--- /dev/null
+++ b/packages/core/src/components/radio-button/radio-button.tsx
@@ -0,0 +1,246 @@
+import {
+  Component,
+  Host,
+  h,
+  Prop,
+  Element,
+  State,
+  EventEmitter,
+  Event,
+  Method,
+} from "@stencil/core";
+
+import {
+  addEventListener,
+  // getAriaLabel,
+  removeEventListener,
+} from "../../utils/helpers";
+
+@Component({
+  tag: "any-radio-button",
+  styleUrl: "radio-button.scss",
+  shadow: true,
+})
+export class RadioButton {
+  @Element() private element: HTMLElement;
+
+  private radiobutton: HTMLElement | null = null;
+  private nativeInput!: HTMLInputElement;
+  private radioGroup: HTMLAnyRadioGroupElement | null = null;
+
+  /**
+   * If `true`, the radio is focused.
+   */
+  @State() focused: boolean = false;
+
+  /**
+   * If `true`, the radio is selected.
+   */
+  @State() checked: boolean = false;
+
+  /**
+   * the value of the radio.
+   */
+  @Prop() value?: any | null;
+
+  /**
+   * Identifier of the focus input to match a label defined for the component.
+   */
+  @Prop() inputId: string = `any-rb-${radiobuttonIds++}`;
+
+  /**
+   * Label of the radiobutton.
+   */
+  @Prop() label: string = null;
+
+  /**
+   * Inline style of the component.
+   */
+  @Prop() anyStyle: any = null;
+
+  /**
+   * Style class of the component.
+   */
+  @Prop() styleClass: any = null;
+
+  /**
+   * Style class of the label.
+   */
+  @Prop() labelStyleClass: string = null;
+
+  /**
+   * When present, it specifies that the element should be disabled.
+   */
+  @Prop() disabled: boolean = false;
+
+  /**
+   * The name of the control, which is submitted with the form data.
+   */
+  @Prop() name: string = this.inputId;
+
+  /**
+   * Index of the element in tabbing order
+   */
+  @Prop() anyTabIndex?: number = 0;
+
+  /**
+   * Callback to invoke on radio button select.
+   */
+  @Event() aOnSelect?: EventEmitter;
+
+  /**
+   * Callback to invoke when the radio button receives focus.
+   */
+  @Event() aOnFocus?: EventEmitter;
+
+  /**
+   * Callback to invoke when the radio button loses focus.
+   */
+  @Event() aOnBlur?: EventEmitter;
+
+  /**
+   * Applies focus.
+   */
+  @Method()
+  async setFocus(ev: any) {
+    ev.stopPropagation();
+    ev.preventDefault();
+
+    this.radiobutton.focus();
+  }
+
+  connectedCallback() {
+    if (this.value === undefined) {
+      this.value = this.inputId;
+    }
+    const radioGroup = (this.radioGroup =
+      this.element.closest("any-radio-group"));
+    if (radioGroup) {
+      this.updateState();
+      addEventListener(radioGroup, "valueChange", this.updateState);
+    }
+  }
+
+  disconnectedCallback() {
+    const radioGroup = this.radioGroup;
+    if (radioGroup) {
+      removeEventListener(radioGroup, "valueChange", this.updateState);
+      this.radioGroup = null;
+    }
+  }
+
+  private updateState = () => {
+    if (this.radioGroup) {
+      console.log("UPDATE STATE", this.radioGroup.value, this.value);
+      this.checked = this.radioGroup.value === this.value;
+    }
+  };
+
+  componentWillLoad() {}
+
+  componentDidLoad() {
+    this.radiobutton = this.element.shadowRoot.querySelector(
+      "input[type='radio']"
+    ) as HTMLElement;
+  }
+
+  onClick(event, focus: boolean) {
+    event.preventDefault();
+
+    if (this.disabled) {
+      return;
+    }
+
+    this.checked = this.nativeInput.checked;
+    console.log("NATIVE", this.nativeInput);
+
+    this.aOnSelect.emit(event);
+
+    if (focus) {
+      this.radiobutton.focus();
+    }
+  }
+
+  onFocus(e) {
+    this.focused = true;
+    this.aOnFocus.emit(e);
+  }
+
+  onBlur(e) {
+    this.focused = false;
+    this.aOnBlur.emit(e);
+  }
+
+  render() {
+    const { checked, focused, disabled } = this;
+
+    return (
+      <Host>
+        <div class="any-element any-element-flex">
+          <div
+            style={this.anyStyle}
+            class={
+              "any-radiobutton any-component " +
+              (this.styleClass ? " " + this.styleClass : "") +
+              (checked ? " any-radiobutton-checked" : "") +
+              (focused ? " any-radiobutton-focused" : "") +
+              (disabled ? " any-radiobutton-disabled" : "")
+            }
+            role="radio"
+          >
+            <div class="any-hidden-accessible">
+              <input
+                type="radio"
+                id={this.inputId}
+                name={this.name}
+                checked={checked}
+                disabled={disabled}
+                value={this.value}
+                aria-checked={`${checked}`}
+                tabindex={this.anyTabIndex}
+                onFocus={(e) => {
+                  this.onFocus(e);
+                }}
+                onBlur={(e) => {
+                  this.onBlur(e);
+                }}
+                ref={(nativeEl) =>
+                  (this.nativeInput = nativeEl as HTMLInputElement)
+                }
+              />
+            </div>
+            <div
+              class={
+                "any-radiobutton-box " +
+                (checked ? " any-highlight" : "") +
+                (focused ? " any-focus" : "") +
+                (disabled ? " any-disabled" : "")
+              }
+              onClick={(e) => {
+                this.onClick(e, true);
+              }}
+            >
+              <span class="any-radiobutton-icon"></span>
+            </div>
+          </div>
+          <label
+            class={
+              "any-radiobutton-label" +
+              (this.labelStyleClass ? " " + this.labelStyleClass : "") +
+              (checked ? " any-radiobutton-label-active" : "") +
+              (focused ? " any-radiobutton-label-focus" : "") +
+              (disabled ? " any-disabled" : "")
+            }
+            onClick={(e) => {
+              this.onClick(e, true);
+            }}
+          >
+            {this.label}
+          </label>
+        </div>
+      </Host>
+    );
+  }
+}
+
+let radiobuttonIds = 0;
diff --git a/packages/core/src/components/radio-button/readme.md b/packages/core/src/components/radio-button/readme.md
new file mode 100644
index 0000000..d9d4f28
--- /dev/null
+++ b/packages/core/src/components/radio-button/readme.md
@@ -0,0 +1,47 @@
+# any-radio-button
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property          | Attribute           | Description                                                               | Type      | Default                        |
+| ----------------- | ------------------- | ------------------------------------------------------------------------- | --------- | ------------------------------ |
+| `anyStyle`        | `any-style`         | Inline style of the component.                                            | `any`     | `null`                         |
+| `anyTabIndex`     | `any-tab-index`     | Index of the element in tabbing order                                     | `number`  | `0`                            |
+| `disabled`        | `disabled`          | When present, it specifies that the element should be disabled.           | `boolean` | `false`                        |
+| `inputId`         | `input-id`          | Identifier of the focus input to match a label defined for the component. | `string`  | ``any-rb-${radiobuttonIds++}`` |
+| `label`           | `label`             | Label of the radiobutton.                                                 | `string`  | `null`                         |
+| `labelStyleClass` | `label-style-class` | Style class of the label.                                                 | `string`  | `null`                         |
+| `name`            | `name`              | The name of the control, which is submitted with the form data.           | `string`  | `this.inputId`                 |
+| `styleClass`      | `style-class`       | Style class of the component.                                             | `any`     | `null`                         |
+| `value`           | `value`             | the value of the radio.                                                   | `any`     | `undefined`                    |
+
+
+## Events
+
+| Event       | Description                                              | Type               |
+| ----------- | -------------------------------------------------------- | ------------------ |
+| `aOnBlur`   | Callback to invoke when the radio button loses focus.    | `CustomEvent<any>` |
+| `aOnFocus`  | Callback to invoke when the radio button receives focus. | `CustomEvent<any>` |
+| `aOnSelect` | Callback to invoke on radio button select.               | `CustomEvent<any>` |
+
+
+## Methods
+
+### `setFocus(ev: any) => Promise<void>`
+
+Applies focus.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+
+----------------------------------------------
+
+*Built with love by **AdaleksTech!***
diff --git a/packages/core/src/components/radio-button/test/radio-button.e2e.ts b/packages/core/src/components/radio-button/test/radio-button.e2e.ts
new file mode 100644
index 0000000..eeb970c
--- /dev/null
+++ b/packages/core/src/components/radio-button/test/radio-button.e2e.ts
@@ -0,0 +1,11 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('any-radio-button', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<any-radio-button></any-radio-button>');
+
+    const element = await page.find('any-radio-button');
+    expect(element).toHaveClass('hydrated');
+  });
+});
diff --git a/packages/core/src/components/radio-button/test/radio-button.spec.tsx b/packages/core/src/components/radio-button/test/radio-button.spec.tsx
new file mode 100644
index 0000000..e7f616b
--- /dev/null
+++ b/packages/core/src/components/radio-button/test/radio-button.spec.tsx
@@ -0,0 +1,18 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { RadioButton } from '../radio-button';
+
+describe('any-radio-button', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [RadioButton],
+      html: `<any-radio-button></any-radio-button>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <any-radio-button>
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+      </any-radio-button>
+    `);
+  });
+});
diff --git a/packages/core/src/components/radio-group/radio-group-inteface.ts b/packages/core/src/components/radio-group/radio-group-inteface.ts
new file mode 100644
index 0000000..cf7309b
--- /dev/null
+++ b/packages/core/src/components/radio-group/radio-group-inteface.ts
@@ -0,0 +1,8 @@
+export interface RadioGroupChangeEventDetail<T = any> {
+  value: T;
+}
+
+export interface RadioGroupCustomEvent<T = any> extends CustomEvent {
+  detail: RadioGroupChangeEventDetail<T>;
+  target: HTMLAnyRadioGroupElement;
+}
diff --git a/packages/core/src/components/radio-group/radio-group.scss b/packages/core/src/components/radio-group/radio-group.scss
new file mode 100644
index 0000000..5d4e87f
--- /dev/null
+++ b/packages/core/src/components/radio-group/radio-group.scss
@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}
diff --git a/packages/core/src/components/radio-group/radio-group.tsx b/packages/core/src/components/radio-group/radio-group.tsx
new file mode 100644
index 0000000..be028a1
--- /dev/null
+++ b/packages/core/src/components/radio-group/radio-group.tsx
@@ -0,0 +1,119 @@
+import {
+  Component,
+  ComponentInterface,
+  Element,
+  Event,
+  EventEmitter,
+  Host,
+  /*Listen,*/
+  Prop,
+  Watch,
+  h,
+} from "@stencil/core";
+
+import { RadioGroupChangeEventDetail } from "../../interfaces";
+// import { renderHiddenInput } from "../../utils/helpers";
+
+@Component({
+  tag: "any-radio-group",
+  styleUrl: "radio-group.scss",
+  // shadow: true,
+})
+export class RadioGroup implements ComponentInterface {
+  private inputId = `any-rg-${radioGroupIds++}`;
+  private labelId = `${this.inputId}-lbl`;
+  private label?: HTMLElement | null;
+
+  @Element() element!: HTMLElement;
+
+  /**
+   * If `true`, the radios can be deselected.
+   */
+  @Prop() allowEmptySelection = false;
+
+  /**
+   * The name of the control, which is submitted with the form data.
+   */
+  @Prop() name: string = this.inputId;
+
+  /**
+   * the value of the radio group.
+   */
+  @Prop({ mutable: true }) value?: any | null;
+
+  @Watch("value")
+  valueChanged(value: any | undefined) {
+    this.setRadioTabindex(value);
+
+    this.valueChange.emit({ value });
+  }
+
+  /**
+   * Emitted when the value has changed.
+   */
+  @Event() valueChange!: EventEmitter<RadioGroupChangeEventDetail>;
+
+  componentDidLoad() {
+    this.setRadioTabindex(this.value);
+  }
+
+  private setRadioTabindex = (value: any | undefined) => {
+    const radios = this.getRadios();
+
+    // Get the first radio that is not disabled and the checked one
+    const first = radios.find((radio) => !radio.disabled);
+    const checked = radios.find(
+      (radio) => radio.value === value && !radio.disabled
+    );
+
+    if (!first && !checked) {
+      return;
+    }
+
+    // If an enabled checked radio exists, set it to be the focusable radio
+    // otherwise we default to focus the first radio
+    // const focusable = checked || first;
+
+    // for (const radio of radios) {
+    //   const tabindex = radio === focusable ? 0 : -1;
+    //   radio.setButtonTabindex(tabindex);
+    // }
+  };
+
+  private getRadios(): HTMLAnyRadioButtonElement[] {
+    return Array.from(this.element.querySelectorAll("any-radio-button"));
+  }
+
+  private onClick = (ev: Event) => {
+    ev.preventDefault();
+
+    const selectedRadio =
+      ev.target && (ev.target as HTMLElement).closest("any-radio-button");
+
+    if (selectedRadio) {
+      const currentValue = this.value;
+      const newValue = selectedRadio.value;
+      if (newValue !== currentValue && !selectedRadio.disabled) {
+        this.value = newValue;
+      } else if (this.allowEmptySelection) {
+        this.value = undefined;
+      }
+      selectedRadio.setFocus(ev);
+    }
+  };
+
+  render() {
+    const { name, labelId, label } = this;
+
+    return (
+      <Host
+        role="radiogroup"
+        aria-labelledby={label ? labelId : null}
+        onClick={this.onClick}
+        name={name}
+      ></Host>
+    );
+  }
+}
+
+let radioGroupIds = 0;
diff --git a/packages/core/src/components/radio-group/readme.md b/packages/core/src/components/radio-group/readme.md
new file mode 100644
index 0000000..f1509b4
--- /dev/null
+++ b/packages/core/src/components/radio-group/readme.md
@@ -0,0 +1,26 @@
+# any-radio-group
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property              | Attribute               | Description                                                     | Type      | Default        |
+| --------------------- | ----------------------- | --------------------------------------------------------------- | --------- | -------------- |
+| `allowEmptySelection` | `allow-empty-selection` | If `true`, the radios can be deselected.                        | `boolean` | `false`        |
+| `name`                | `name`                  | The name of the control, which is submitted with the form data. | `string`  | `this.inputId` |
+| `value`               | `value`                 | the value of the radio group.                                   | `any`     | `undefined`    |
+
+
+## Events
+
+| Event         | Description                         | Type                                            |
+| ------------- | ----------------------------------- | ----------------------------------------------- |
+| `valueChange` | Emitted when the value has changed. | `CustomEvent<RadioGroupChangeEventDetail<any>>` |
+
+
+----------------------------------------------
+
+*Built with love by **AdaleksTech!***
diff --git a/packages/core/src/components/radio-group/test/radio-group.e2e.ts b/packages/core/src/components/radio-group/test/radio-group.e2e.ts
new file mode 100644
index 0000000..fa9f227
--- /dev/null
+++ b/packages/core/src/components/radio-group/test/radio-group.e2e.ts
@@ -0,0 +1,11 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('any-radio-group', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<any-radio-group></any-radio-group>');
+
+    const element = await page.find('any-radio-group');
+    expect(element).toHaveClass('hydrated');
+  });
+});
diff --git a/packages/core/src/components/radio-group/test/radio-group.spec.tsx b/packages/core/src/components/radio-group/test/radio-group.spec.tsx
new file mode 100644
index 0000000..20e9d71
--- /dev/null
+++ b/packages/core/src/components/radio-group/test/radio-group.spec.tsx
@@ -0,0 +1,18 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { RadioGroup } from '../radio-group';
+
+describe('any-radio-group', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [RadioGroup],
+      html: `<any-radio-group></any-radio-group>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <any-radio-group>
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+      </any-radio-group>
+    `);
+  });
+});
diff --git a/packages/core/src/components/ripple-effect/ripple-effect.tsx b/packages/core/src/components/ripple-effect/ripple-effect.tsx
index 19fa23a..46ad775 100644
--- a/packages/core/src/components/ripple-effect/ripple-effect.tsx
+++ b/packages/core/src/components/ripple-effect/ripple-effect.tsx
@@ -1,5 +1,6 @@
 import { Component, Host, h, Element, Prop } from "@stencil/core";
 import { DomHandler } from "../../utils/dom";
+import { config } from "../../global/config";
 
 @Component({
   tag: "any-ripple-effect",
@@ -11,6 +12,8 @@ export class RippleEffect {
 
   private mouseDownListener: any;
 
+  private useRippleEffect: boolean = true;
+
   @Element() element: HTMLElement;
 
   /**
@@ -18,13 +21,19 @@ export class RippleEffect {
    */
   @Prop() type: "bounded" | "unbounded" = "bounded";
 
+  connectedCallback() {
+    this.useRippleEffect = config.getBoolean("rippleEffect", true);
+  }
+
   componentDidLoad() {
-    this.create();
-    this.mouseDownListener = this.onMouseDown.bind(this);
-    this.element.parentNode.addEventListener(
-      "mousedown",
-      this.mouseDownListener
-    );
+    if (this.useRippleEffect) {
+      this.create();
+      this.mouseDownListener = this.onMouseDown.bind(this);
+      this.element.parentNode.addEventListener(
+        "mousedown",
+        this.mouseDownListener
+      );
+    }
   }
 
   onMouseDown(event: MouseEvent) {
diff --git a/packages/core/src/global/anywhere-global.ts b/packages/core/src/global/anywhere-global.ts
index e69de29..286a041 100644
--- a/packages/core/src/global/anywhere-global.ts
+++ b/packages/core/src/global/anywhere-global.ts
@@ -0,0 +1,48 @@
+import { /*getMode, setMode,*/ setPlatformHelpers } from "@stencil/core";
+
+import { AnywhereUIConfig /*, Mode, setupConfig*/ } from "../interfaces";
+// import { isPlatform, setupPlatforms } from "../utils/platform";
+
+import { config, saveConfig, configFromSession, configFromURL } from "./config";
+
+declare const Context: any;
+
+export const initialize = (userConfig: AnywhereUIConfig = {}) => {
+  if (typeof (window as any) === "undefined") {
+    return;
+  }
+
+  //   const doc = window.document;
+  const win = window;
+  Context.config = config;
+  const AnywhereUI = ((win as any).AnywhereUI = (win as any).AnywhereUI || {});
+
+  const platformHelpers: any = {};
+  if (userConfig._ael) {
+    platformHelpers.ael = userConfig._ael;
+  }
+  if (userConfig._rel) {
+    platformHelpers.rel = userConfig._rel;
+  }
+  if (userConfig._ce) {
+    platformHelpers.ce = userConfig._ce;
+  }
+  setPlatformHelpers(platformHelpers);
+
+  const configObj = {
+    ...configFromSession(win),
+    persistConfig: false,
+    ...AnywhereUI.config,
+    ...configFromURL(win),
+    ...userConfig,
+  };
+
+  config.reset(configObj);
+  if (config.getBoolean("persistConfig")) {
+    saveConfig(win, configObj);
+  }
+
+  AnywhereUI.config = config;
+};
+
+export default initialize;
diff --git a/packages/core/src/global/config.ts b/packages/core/src/global/config.ts
new file mode 100644
index 0000000..02ffe73
--- /dev/null
+++ b/packages/core/src/global/config.ts
@@ -0,0 +1,78 @@
+import { AnywhereUIConfig } from "../interfaces";
+
+export class Config {
+  private m = new Map<keyof AnywhereUIConfig, any>();
+
+  reset(configObj: AnywhereUIConfig) {
+    this.m = new Map<keyof AnywhereUIConfig, any>(
+      Object.entries(configObj) as any
+    );
+  }
+
+  get(key: keyof AnywhereUIConfig, fallback?: any): any {
+    const value = this.m.get(key);
+    return value !== undefined ? value : fallback;
+  }
+
+  getBoolean(key: keyof AnywhereUIConfig, fallback = false): boolean {
+    const val = this.m.get(key);
+    if (val === undefined) {
+      return fallback;
+    }
+    if (typeof val === "string") {
+      return val === "true";
+    }
+    return !!val;
+  }
+
+  getNumber(key: keyof AnywhereUIConfig, fallback?: number): number {
+    const val = parseFloat(this.m.get(key));
+    return isNaN(val) ? (fallback !== undefined ? fallback : NaN) : val;
+  }
+
+  set(key: keyof AnywhereUIConfig, value: any) {
+    this.m.set(key, value);
+  }
+}
+export const config = /*@__PURE__*/ new Config();
+
+export const configFromSession = (win: Window): any => {
+  try {
+    const configStr = win.sessionStorage.getItem(ANYWHERE_UI_SESSION_KEY);
+    return configStr !== null ? JSON.parse(configStr) : {};
+  } catch (e) {
+    return {};
+  }
+};
+
+export const saveConfig = (win: Window, c: any) => {
+  try {
+    win.sessionStorage.setItem(ANYWHERE_UI_SESSION_KEY, JSON.stringify(c));
+  } catch (e) {
+    return;
+  }
+};
+
+export const configFromURL = (win: Window) => {
+  const configObj: any = {};
+  win.location.search
+    .slice(1)
+    .split("&")
+    .map((entry) => entry.split("="))
+    .map(([key, value]) => [decodeURIComponent(key), decodeURIComponent(value)])
+    .filter(([key]) => startsWith(key, ANYWHERE_UI_PREFIX))
+    .map(([key, value]) => [key.slice(ANYWHERE_UI_PREFIX.length), value])
+    .forEach(([key, value]) => {
+      configObj[key] = value;
+    });
+
+  return configObj;
+};
+
+const startsWith = (input: string, search: string): boolean => {
+  return input.substr(0, search.length) === search;
+};
+
+const ANYWHERE_UI_PREFIX = "anywhere-ui:";
+
+const ANYWHERE_UI_SESSION_KEY = "anywhere-ui-persist-config";
diff --git a/packages/core/src/index.html b/packages/core/src/index.html
index a5be22c..c9da5f1 100644
--- a/packages/core/src/index.html
+++ b/packages/core/src/index.html
@@ -70,6 +70,7 @@
           <a href="/#/input-switch" class="nav__link" data-link>InputSwitch</a>
           <a href="/#/input-text" class="nav__link" data-link>InputText</a>
           <a href="/#/listbox" class="nav__link" data-link>Listbox</a>
+          <a href="/#/radio-button" class="nav__link" data-link>RadioButton</a>
         </div>
         <div class="menu-category">Button</div>
         <div class="menu-items">
@@ -100,7 +101,7 @@
       <script type="module" src="/app/App.js"></script>
     </div>
     <div class="layout-footer">
-      <div class="layout-footer-left">AnywhereUI v<span id="any-ui-version">0.2.0+7</span> by <b>AdaleksTech</b></div>
+      <div class="layout-footer-left">AnywhereUI v<span id="any-ui-version">0.2.0</span> by <b>AdaleksTech</b></div>
       <div class="layout-footer-right">
         <a href="https://github.com/adaleks/anywhere-ui">
           <span class="iconify" data-icon="fa-brands:github" data-width="21" data-height="21"></span>
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 0309449..af2b11f 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -1,2 +1,3 @@
-export * from "./components";
+export { initialize } from "./global/anywhere-global";
+export { AnywhereUIConfig, /*getMode,*/ setupConfig } from "./utils/config";
 export * from "./interfaces";
diff --git a/packages/core/src/interfaces.d.ts b/packages/core/src/interfaces.d.ts
index 16c085b..8aa9927 100644
--- a/packages/core/src/interfaces.d.ts
+++ b/packages/core/src/interfaces.d.ts
@@ -1 +1,7 @@
+export * from "./components";
+export * from "./index";
+
 export * from "./components/listbox/listbox-interface";
+export * from "./components/radio-group/radio-group-inteface";
+
+export * from "./global/config";
diff --git a/packages/core/src/themes/anywhere.global.scss b/packages/core/src/themes/anywhere.global.scss
index cb10fa2..c2176ab 100644
--- a/packages/core/src/themes/anywhere.global.scss
+++ b/packages/core/src/themes/anywhere.global.scss
@@ -8,75 +8,91 @@
 @import "./anywhere.theme.bootstrap4-dark-purple.scss";
 
 .any-ripple-disabled {
-    any-button::part(any-ink) {
-        display: none !important;
-    }
+  any-button::part(any-ink) {
+    display: none !important;
+  }
 
-    any-tab-view::part(any-ink) {
-        display: none !important;
-    }
+  any-tab-view::part(any-ink) {
+    display: none !important;
+  }
 
-    any-listbox::part(any-ink) {
-        display: none !important;
-    }
+  any-listbox::part(any-ink) {
+    display: none !important;
+  }
 
-    any-dropdown::part(any-ink) {
-        display: none !important;
-    }
+  any-dropdown::part(any-ink) {
+    display: none !important;
+  }
 
-    ::part(any-ink) {
-        display: none !important;
-    }
+  ::part(any-ink) {
+    display: none !important;
+  }
 }
 
 .any-input-filled {
-    .any-inputtext {
-        background-color: var(--inputFilledBg) !important;
-    }
+  .any-inputtext {
+    background-color: var(--inputFilledBg) !important;
+  }
 
-    .any-inputtext:enabled:hover {
-        background-color: var(--inputFilledHoverBg) !important;
-    }
+  .any-inputtext:enabled:hover {
+    background-color: var(--inputFilledHoverBg) !important;
+  }
 
-    .any-inputtext:enabled:focus {
-        background-color: var(--inputFilledFocusBg) !important;
+  .any-inputtext:enabled:focus {
+    background-color: var(--inputFilledFocusBg) !important;
+  }
+
+  any-checkbox {
+    &::part(any-checkbox-box) {
+      background-color: var(--inputFilledBg) !important;
     }
 
-    any-checkbox {
-        &::part(any-checkbox-box) {
-            background-color: var(--inputFilledBg) !important;
-        }
+    &::part(any-checkbox-box-highlight) {
+      background: var(--checkboxActiveBg) !important;
+    }
 
-        &::part(any-checkbox-box-highlight) {
-            background: var(--checkboxActiveBg) !important;
+    &:not(.any-checkbox-disabled) {
+      &::part(any-checkbox-box) {
+        &:hover {
+          background-color: var(--inputFilledBg) !important;
         }
+      }
 
-        &:not(.any-checkbox-disabled) {
-            &::part(any-checkbox-box) {
-                &:hover {
-                    background-color: var(--inputFilledBg) !important;
-                }
-            }
-
-            &::part(any-checkbox-box-highlight) {
-                &:hover {
-                    background: var(--checkboxActiveBg) !important;
-                }
-            }
+      &::part(any-checkbox-box-highlight) {
+        &:hover {
+          background: var(--checkboxActiveBg) !important;
         }
+      }
     }
+  }
 
-    any-dropdown {
-        &::part(any-dropdown) {
-            background: var(--inputFilledBg);
+  any-dropdown {
+    &::part(any-dropdown) {
+      background: var(--inputFilledBg);
 
-            &:hover {
-                background: var(--inputFilledHoverBg);
-            }
-        }
+      &:hover {
+        background: var(--inputFilledHoverBg);
+      }
+    }
 
-        &::part(any-dropdown-focused) {
-            background-color: var(--inputFilledFocusBg);
-        }
+    &::part(any-dropdown-focused) {
+      background-color: var(--inputFilledFocusBg);
     }
-}
\ No newline at end of file
+  }
+}
+
+// .any-input-filled .any-radiobutton .any-radiobutton-box {
+//     background-color: #f8f9fa;
+// }
+
+// .any-input-filled .any-radiobutton .any-radiobutton-box:not(.any-disabled):hover {
+//     background-color: #f8f9fa;
+// }
+
+// .any-input-filled .any-radiobutton .any-radiobutton-box.any-highlight {
+//     background: #2196F3;
+// }
+
+// .any-input-filled .any-radiobutton .any-radiobutton-box.any-highlight:not(.any-disabled):hover {
+//     background: #0b7ad1;
+// }
diff --git a/packages/core/src/themes/anywhere.theme.bootstrap4-dark-blue.scss b/packages/core/src/themes/anywhere.theme.bootstrap4-dark-blue.scss
index ceef46b..ab29797 100644
--- a/packages/core/src/themes/anywhere.theme.bootstrap4-dark-blue.scss
+++ b/packages/core/src/themes/anywhere.theme.bootstrap4-dark-blue.scss
@@ -1,283 +1,287 @@
 :root[theme="bootstrap4-dark-blue"],
 :root[data-theme="bootstrap4-dark-blue"] {
-    --surface-a: #2a323d;
-    --surface-b: #20262e;
-    --surface-c: rgba(255, 255, 255, 0.04);
-    --surface-d: #3f4b5b;
-    --surface-e: #2a323d;
-    --surface-f: #2a323d;
-    --text-color: rgba(255, 255, 255, 0.87);
-    --text-color-secondary: rgba(255, 255, 255, 0.6);
-    --primary-color: #8dd0ff;
-    --primary-color-text: #151515;
-    --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
-    --surface-0: #20262e;
-    --surface-50: #363c43;
-    --surface-100: #4d5158;
-    --surface-200: #63676d;
-    --surface-300: #797d82;
-    --surface-400: #909397;
-    --surface-500: #a6a8ab;
-    --surface-600: #bcbec0;
-    --surface-700: #d2d4d5;
-    --surface-800: #e9e9ea;
-    --surface-900: #ffffff;
-    --gray-50: #e9e9ea;
-    --gray-100: #d2d4d5;
-    --gray-200: #bcbec0;
-    --gray-300: #a6a8ab;
-    --gray-400: #909397;
-    --gray-500: #797d82;
-    --gray-600: #63676d;
-    --gray-700: #4d5158;
-    --gray-800: #363c43;
-    --gray-900: #20262e;
-    --content-padding: 1.25rem;
-    --inline-spacing: 0.5rem;
-    --border-radius: 4px;
-    --surface-ground: #20262e;
-    --surface-section: #20262e;
-    --surface-card: #2a323d;
-    --surface-overlay: #2a323d;
-    --surface-border: #3f4b5b;
-    --surface-hover: rgba(255, 255, 255, .04);
-    --maskbg: rgba(0, 0, 0, 0.4);
-    --focus-ring: 0 0 0 1px #e3f3fe;
-    --cog-icon: url('https://api.iconify.design/fa-solid/cog.svg?color=%23151515&height=26');
-    --times-icon: url('https://api.iconify.design/fa-solid/times.svg?color=%23151515&height=20');
+  --surface-a: #2a323d;
+  --surface-b: #20262e;
+  --surface-c: rgba(255, 255, 255, 0.04);
+  --surface-d: #3f4b5b;
+  --surface-e: #2a323d;
+  --surface-f: #2a323d;
+  --text-color: rgba(255, 255, 255, 0.87);
+  --text-color-secondary: rgba(255, 255, 255, 0.6);
+  --primary-color: #8dd0ff;
+  --primary-color-text: #151515;
+  --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica,
+    Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --surface-0: #20262e;
+  --surface-50: #363c43;
+  --surface-100: #4d5158;
+  --surface-200: #63676d;
+  --surface-300: #797d82;
+  --surface-400: #909397;
+  --surface-500: #a6a8ab;
+  --surface-600: #bcbec0;
+  --surface-700: #d2d4d5;
+  --surface-800: #e9e9ea;
+  --surface-900: #ffffff;
+  --gray-50: #e9e9ea;
+  --gray-100: #d2d4d5;
+  --gray-200: #bcbec0;
+  --gray-300: #a6a8ab;
+  --gray-400: #909397;
+  --gray-500: #797d82;
+  --gray-600: #63676d;
+  --gray-700: #4d5158;
+  --gray-800: #363c43;
+  --gray-900: #20262e;
+  --content-padding: 1.25rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 4px;
+  --surface-ground: #20262e;
+  --surface-section: #20262e;
+  --surface-card: #2a323d;
+  --surface-overlay: #2a323d;
+  --surface-border: #3f4b5b;
+  --surface-hover: rgba(255, 255, 255, 0.04);
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --focus-ring: 0 0 0 1px #e3f3fe;
+  --cog-icon: url("https://api.iconify.design/fa-solid/cog.svg?color=%23151515&height=26");
+  --times-icon: url("https://api.iconify.design/fa-solid/times.svg?color=%23151515&height=20");
 }
 
 :root[theme="bootstrap4-dark-blue"],
 :root[data-theme="bootstrap4-dark-blue"] {
-    --blue-50: #f3f8ff;
-    --blue-100: #c5dcff;
-    --blue-200: #97c1fe;
-    --blue-300: #69a5fe;
-    --blue-400: #3b8afd;
-    --blue-500: #0d6efd;
-    --blue-600: #0b5ed7;
-    --blue-700: #094db1;
-    --blue-800: #073d8b;
-    --blue-900: #052c65;
-    --green-50: #f4f9f6;
-    --green-100: #c8e2d6;
-    --green-200: #9ccbb5;
-    --green-300: #70b595;
-    --green-400: #459e74;
-    --green-500: #198754;
-    --green-600: #157347;
-    --green-700: #125f3b;
-    --green-800: #0e4a2e;
-    --green-900: #0a3622;
-    --yellow-50: #fffcf3;
-    --yellow-100: #fff0c3;
-    --yellow-200: #ffe494;
-    --yellow-300: #ffd965;
-    --yellow-400: #ffcd36;
-    --yellow-500: #ffc107;
-    --yellow-600: #d9a406;
-    --yellow-700: #b38705;
-    --yellow-800: #8c6a04;
-    --yellow-900: #664d03;
-    --cyan-50: #f3fcfe;
-    --cyan-100: #c5f2fb;
-    --cyan-200: #97e8f9;
-    --cyan-300: #69def6;
-    --cyan-400: #3bd4f3;
-    --cyan-500: #0dcaf0;
-    --cyan-600: #0baccc;
-    --cyan-700: #098da8;
-    --cyan-800: #076f84;
-    --cyan-900: #055160;
-    --pink-50: #fdf5f9;
-    --pink-100: #f5cee1;
-    --pink-200: #eda7ca;
-    --pink-300: #e681b3;
-    --pink-400: #de5a9b;
-    --pink-500: #d63384;
-    --pink-600: #b62b70;
-    --pink-700: #96245c;
-    --pink-800: #761c49;
-    --pink-900: #561435;
-    --indigo-50: #f7f3fe;
-    --indigo-100: #dac6fc;
-    --indigo-200: #bd98f9;
-    --indigo-300: #a06bf7;
-    --indigo-400: #833df4;
-    --indigo-500: #6610f2;
-    --indigo-600: #570ece;
-    --indigo-700: #470ba9;
-    --indigo-800: #380985;
-    --indigo-900: #290661;
-    --teal-50: #f4fcfa;
-    --teal-100: #c9f2e6;
-    --teal-200: #9fe8d2;
-    --teal-300: #75debf;
-    --teal-400: #4ad3ab;
-    --teal-500: #20c997;
-    --teal-600: #1bab80;
-    --teal-700: #168d6a;
-    --teal-800: #126f53;
-    --teal-900: #0d503c;
-    --orange-50: #fff9f3;
-    --orange-100: #ffe0c7;
-    --orange-200: #fec89a;
-    --orange-300: #feaf6d;
-    --orange-400: #fd9741;
-    --orange-500: #fd7e14;
-    --orange-600: #d76b11;
-    --orange-700: #b1580e;
-    --orange-800: #8b450b;
-    --orange-900: #653208;
-    --bluegray-50: #f8f9fb;
-    --bluegray-100: #e0e4ea;
-    --bluegray-200: #c7ced9;
-    --bluegray-300: #aeb9c8;
-    --bluegray-400: #95a3b8;
-    --bluegray-500: #7c8ea7;
-    --bluegray-600: #69798e;
-    --bluegray-700: #576375;
-    --bluegray-800: #444e5c;
-    --bluegray-900: #323943;
-    --purple-50: #f8f6fc;
-    --purple-100: #dcd2f0;
-    --purple-200: #c1aee4;
-    --purple-300: #a68ad9;
-    --purple-400: #8a66cd;
-    --purple-500: #6f42c1;
-    --purple-600: #5e38a4;
-    --purple-700: #4e2e87;
-    --purple-800: #3d246a;
-    --purple-900: #2c1a4d;
+  --blue-50: #f3f8ff;
+  --blue-100: #c5dcff;
+  --blue-200: #97c1fe;
+  --blue-300: #69a5fe;
+  --blue-400: #3b8afd;
+  --blue-500: #0d6efd;
+  --blue-600: #0b5ed7;
+  --blue-700: #094db1;
+  --blue-800: #073d8b;
+  --blue-900: #052c65;
+  --green-50: #f4f9f6;
+  --green-100: #c8e2d6;
+  --green-200: #9ccbb5;
+  --green-300: #70b595;
+  --green-400: #459e74;
+  --green-500: #198754;
+  --green-600: #157347;
+  --green-700: #125f3b;
+  --green-800: #0e4a2e;
+  --green-900: #0a3622;
+  --yellow-50: #fffcf3;
+  --yellow-100: #fff0c3;
+  --yellow-200: #ffe494;
+  --yellow-300: #ffd965;
+  --yellow-400: #ffcd36;
+  --yellow-500: #ffc107;
+  --yellow-600: #d9a406;
+  --yellow-700: #b38705;
+  --yellow-800: #8c6a04;
+  --yellow-900: #664d03;
+  --cyan-50: #f3fcfe;
+  --cyan-100: #c5f2fb;
+  --cyan-200: #97e8f9;
+  --cyan-300: #69def6;
+  --cyan-400: #3bd4f3;
+  --cyan-500: #0dcaf0;
+  --cyan-600: #0baccc;
+  --cyan-700: #098da8;
+  --cyan-800: #076f84;
+  --cyan-900: #055160;
+  --pink-50: #fdf5f9;
+  --pink-100: #f5cee1;
+  --pink-200: #eda7ca;
+  --pink-300: #e681b3;
+  --pink-400: #de5a9b;
+  --pink-500: #d63384;
+  --pink-600: #b62b70;
+  --pink-700: #96245c;
+  --pink-800: #761c49;
+  --pink-900: #561435;
+  --indigo-50: #f7f3fe;
+  --indigo-100: #dac6fc;
+  --indigo-200: #bd98f9;
+  --indigo-300: #a06bf7;
+  --indigo-400: #833df4;
+  --indigo-500: #6610f2;
+  --indigo-600: #570ece;
+  --indigo-700: #470ba9;
+  --indigo-800: #380985;
+  --indigo-900: #290661;
+  --teal-50: #f4fcfa;
+  --teal-100: #c9f2e6;
+  --teal-200: #9fe8d2;
+  --teal-300: #75debf;
+  --teal-400: #4ad3ab;
+  --teal-500: #20c997;
+  --teal-600: #1bab80;
+  --teal-700: #168d6a;
+  --teal-800: #126f53;
+  --teal-900: #0d503c;
+  --orange-50: #fff9f3;
+  --orange-100: #ffe0c7;
+  --orange-200: #fec89a;
+  --orange-300: #feaf6d;
+  --orange-400: #fd9741;
+  --orange-500: #fd7e14;
+  --orange-600: #d76b11;
+  --orange-700: #b1580e;
+  --orange-800: #8b450b;
+  --orange-900: #653208;
+  --bluegray-50: #f8f9fb;
+  --bluegray-100: #e0e4ea;
+  --bluegray-200: #c7ced9;
+  --bluegray-300: #aeb9c8;
+  --bluegray-400: #95a3b8;
+  --bluegray-500: #7c8ea7;
+  --bluegray-600: #69798e;
+  --bluegray-700: #576375;
+  --bluegray-800: #444e5c;
+  --bluegray-900: #323943;
+  --purple-50: #f8f6fc;
+  --purple-100: #dcd2f0;
+  --purple-200: #c1aee4;
+  --purple-300: #a68ad9;
+  --purple-400: #8a66cd;
+  --purple-500: #6f42c1;
+  --purple-600: #5e38a4;
+  --purple-700: #4e2e87;
+  --purple-800: #3d246a;
+  --purple-900: #2c1a4d;
 }
 
-
 :root[theme="bootstrap4-dark-blue"],
 :root[data-theme="bootstrap4-dark-blue"] {
-    --primaryColor: #8dd0ff;
-    --primaryColorRGBValue: 141, 208, 255;
-    --primaryDarkColor: #56bdff;
-    --primaryDarkColorRGBValue: 86, 189, 255;
-    --primaryDarkerColor: #1dadff;
-    --primaryDarkerColorRGBValue: 29, 173, 255;
-    --primaryTextColor: #151515;
-
-    --primary-color-h: 205;
-    --primary-color-s: 100%;
-    --primary-color-l: 78%;
+  --primaryColor: #8dd0ff;
+  --primaryColorRGBValue: 141, 208, 255;
+  --primaryDarkColor: #56bdff;
+  --primaryDarkColorRGBValue: 86, 189, 255;
+  --primaryDarkerColor: #1dadff;
+  --primaryDarkerColorRGBValue: 29, 173, 255;
+  --primaryTextColor: #151515;
 
-    --textColor: rgba(255, 255, 255, 0.87);
-    --textSecondaryColor: rgba(255, 255, 255, 0.6);
+  --primary-color-h: 205;
+  --primary-color-s: 100%;
+  --primary-color-l: 78%;
 
-    --borderRadius: 4px;
-    --focusOutlineColor: hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) + 10%));
-    --focusShadow: 0 0 0 1px var(--focusOutlineColor);
+  --textColor: rgba(255, 255, 255, 0.87);
+  --textSecondaryColor: rgba(255, 255, 255, 0.6);
 
-    --buttonPadding: .5rem .75rem;
+  --borderRadius: 4px;
+  --focusOutlineColor: hsl(
+    var(--primary-color-h),
+    var(--primary-color-s),
+    calc(var(--primary-color-l) + 10%)
+  );
+  --focusShadow: 0 0 0 1px var(--focusOutlineColor);
 
-    --inputBgColor: #20262e;
-    --inputBorder: 1px solid #3f4b5b;
-    --inputHoverBorderColor: #3f4b5b;
-    --inputPadding: .5rem .75rem;
-    --inputPlaceholderTextColor: rgba(255, 255, 255, 0.6);
+  --buttonPadding: 0.5rem 0.75rem;
 
-    --inputListItemPadding: .5rem 1.5rem;
-    --inputListBg: #2a323d;
-    --inputListItemHoverBgColor: rgba(255, 255, 255, 0.04);
-    --inputListItemHoverTextColor: rgba(255, 255, 255, 0.87);
-    // --inputOverlayBg: #2a323d;
+  --inputBgColor: #20262e;
+  --inputBorder: 1px solid #3f4b5b;
+  --inputHoverBorderColor: #3f4b5b;
+  --inputPadding: 0.5rem 0.75rem;
+  --inputPlaceholderTextColor: rgba(255, 255, 255, 0.6);
 
-    --inputSwitchBorderRadius: 4px;
-    --inputSwitchHandleBorderRadius: 4px;
-    --inputSwitchSliderOffBg: #3f4b5b;
-    --inputSwitchSliderOffHoverBg: #3f4b5b;
-    --inputSwitchHandleOffBg: rgba(255, 255, 255, 0.6);
-    --inputSwitchHandleOffHoverBg: rgba(255, 255, 255, 0.6);
-    --inputSwitchHandleOnBg: var(--primaryTextColor);
+  --inputListItemPadding: 0.5rem 1.5rem;
+  --inputListBg: #2a323d;
+  --inputListItemHoverBgColor: rgba(255, 255, 255, 0.04);
+  --inputListItemHoverTextColor: rgba(255, 255, 255, 0.87);
+  // --inputOverlayBg: #2a323d;
 
-    --panelHeaderPadding: .75rem 1rem;
-    --panelContentBg: #2a323d;
+  --inputSwitchBorderRadius: 4px;
+  --inputSwitchHandleBorderRadius: 4px;
+  --inputSwitchSliderOffBg: #3f4b5b;
+  --inputSwitchSliderOffHoverBg: #3f4b5b;
+  --inputSwitchHandleOffBg: rgba(255, 255, 255, 0.6);
+  --inputSwitchHandleOffHoverBg: rgba(255, 255, 255, 0.6);
+  --inputSwitchHandleOnBg: var(--primaryTextColor);
 
-    --checkboxBorder: 1px solid #3f4b5b;
+  --panelHeaderPadding: 0.75rem 1rem;
+  --panelContentBg: #2a323d;
 
-    --tabviewNavBg: transparent;
-    --tabviewNavBorder: 1px solid #3f4b5b;
-    --tabviewNavBorderWidth: 0 0 1px 0;
-    --tabviewHeaderBg: #2a323d;
-    --tabviewHeaderBorder: solid;
-    --tabviewHeaderBorderColor: transparent transparent #3f4b5b transparent;
-    --tabviewHeaderBorderWidth: 1px 1px 2px 1px;
-    --tabviewHeaderHoverBg: #2a323d;
-    --tabviewHeaderTextHoverColor: var(--textColor);
-    --tabviewHeaderHoverBorderColor: #3f4b5b #3f4b5b #3f4b5b #3f4b5b;
-    --tabviewHeaderActiveBorderColor: #3f4b5b #3f4b5b #2a323d #3f4b5b;
-    --tabviewHeaderActiveBg: #2a323d;
-    --tabviewHeaderTextActiveColor: var(--textSecondaryColor);
+  --checkboxBorder: 1px solid #3f4b5b;
 
+  --tabviewNavBg: transparent;
+  --tabviewNavBorder: 1px solid #3f4b5b;
+  --tabviewNavBorderWidth: 0 0 1px 0;
+  --tabviewHeaderBg: #2a323d;
+  --tabviewHeaderBorder: solid;
+  --tabviewHeaderBorderColor: transparent transparent #3f4b5b transparent;
+  --tabviewHeaderBorderWidth: 1px 1px 2px 1px;
+  --tabviewHeaderHoverBg: #2a323d;
+  --tabviewHeaderTextHoverColor: var(--textColor);
+  --tabviewHeaderHoverBorderColor: #3f4b5b #3f4b5b #3f4b5b #3f4b5b;
+  --tabviewHeaderActiveBorderColor: #3f4b5b #3f4b5b #2a323d #3f4b5b;
+  --tabviewHeaderActiveBg: #2a323d;
+  --tabviewHeaderTextActiveColor: var(--textSecondaryColor);
 
+  --plainButtonTextColor: rgba(255, 255, 255, 0.6);
+  --plainButtonHoverBgColor: rgba(255, 255, 255, 0.04);
+  --plainButtonActiveBgColor: rgba(255, 255, 255, 0.04);
+  --linkButtonFocusShadow: 0 0 0 1px var(--focusOutlineColor);
+  --secondaryButtonBg: #6c757d;
+  --secondaryButtonTextColor: #ffffff;
+  --secondaryButtonBorder: 1px solid #6c757d;
+  --secondaryButtonHoverBg: #59626a;
+  --secondaryButtonTextHoverColor: #ffffff;
+  --secondaryButtonHoverBorderColor: #59626a;
+  --secondaryButtonActiveBg: #4f5860;
+  --secondaryButtonTextActiveColor: #ffffff;
+  --secondaryButtonActiveBorderColor: #4f5860;
+  --secondaryButtonFocusShadow: 0 0 0 1px hsl(208, 7%, calc(46% + 30%));
+  --successButtonBg: #9fdaa8;
+  --successButtonTextColor: var(--primaryTextColor);
+  --successButtonBorder: 1px solid #78cc86;
+  --successButtonHoverBg: #78cc86;
+  --successButtonTextHoverColor: var(--primaryTextColor);
+  --successButtonHoverBorderColor: #5ac06c;
+  --successButtonActiveBg: #5ac06c;
+  --successButtonTextActiveColor: var(--primaryTextColor);
+  --successButtonActiveBorderColor: #3cb553;
+  --successButtonFocusShadow: 0 0 0 1px hsl(129, 43%, calc(74% + 10%));
+  --infoButtonBg: #7fd8e6;
+  --infoButtonTextColor: var(--primaryTextColor);
+  --infoButtonBorder: 1px solid #4cc8db;
+  --infoButtonHoverBg: #4cc8db;
+  --infoButtonTextHoverColor: var(--primaryTextColor);
+  --infoButtonHoverBorderColor: #1c9588;
+  --infoButtonActiveBg: #26bdd3;
+  --infoButtonTextActiveColor: var(--primaryTextColor);
+  --infoButtonActiveBorderColor: #00b2cc;
+  --infoButtonFocusShadow: 0 0 0 1px hsl(188, 67%, calc(60% + 10%));
+  --warningButtonBg: #ffe082;
+  --warningButtonTextColor: var(--primaryTextColor);
+  --warningButtonBorder: 1px solid #ffd54f;
+  --warningButtonHoverBg: #ffd54f;
+  --warningButtonTextHoverColor: var(--primaryTextColor);
+  --warningButtonHoverBorderColor: #ffca28;
+  --warningButtonActiveBg: #ffca28;
+  --warningButtonTextActiveColor: var(--primaryTextColor);
+  --warningButtonActiveBorderColor: #ffc107;
+  --warningButtonFocusShadow: 0 0 0 1px hsl(45, 100%, calc(65% + 10%));
+  --helpButtonBg: #b7a2e0;
+  --helpButtonTextColor: var(--primaryTextColor);
+  --helpButtonBorder: 1px solid #9a7cd4;
+  --helpButtonHoverBg: #9a7cd4;
+  --helpButtonTextHoverColor: var(--primaryTextColor);
+  --helpButtonHoverBorderColor: #845fca;
+  --helpButtonActiveBg: #845fca;
+  --helpButtonTextActiveColor: var(--primaryTextColor);
+  --helpButtonActiveBorderColor: #6d43c0;
+  --helpButtonFocusShadow: 0 0 0 1px hsl(260, 56%, calc(66% + 10%));
+  --dangerButtonBg: #f19ea6;
+  --dangerButtonTextColor: var(--primaryTextColor);
+  --dangerButtonBorder: 1px solid #e97984;
+  --dangerButtonHoverBg: #e97984;
+  --dangerButtonTextHoverColor: var(--primaryTextColor);
+  --dangerButtonHoverBorderColor: #f75965;
+  --dangerButtonActiveBg: #f75965;
+  --dangerButtonTextActiveColor: var(--primaryTextColor);
+  --dangerButtonActiveBorderColor: #fd464e;
+  --dangerButtonFocusShadow: 0 0 0 1px hsl(354, 75%, calc(68% + 10%));
 
-    --plainButtonTextColor: rgba(255, 255, 255, 0.6);
-    --plainButtonHoverBgColor: rgba(255, 255, 255, 0.04);
-    --plainButtonActiveBgColor: rgba(255, 255, 255, 0.04);
-    --linkButtonFocusShadow: 0 0 0 1px var(--focusOutlineColor);
-    --secondaryButtonBg: #6c757d;
-    --secondaryButtonTextColor: #ffffff;
-    --secondaryButtonBorder: 1px solid #6c757d;
-    --secondaryButtonHoverBg: #59626A;
-    --secondaryButtonTextHoverColor: #ffffff;
-    --secondaryButtonHoverBorderColor: #59626A;
-    --secondaryButtonActiveBg: #4F5860;
-    --secondaryButtonTextActiveColor: #ffffff;
-    --secondaryButtonActiveBorderColor: #4F5860;
-    --secondaryButtonFocusShadow: 0 0 0 1px hsl(208, 7%, calc(46% + 30%));
-    --successButtonBg: #9fdaa8;
-    --successButtonTextColor: var(--primaryTextColor);
-    --successButtonBorder: 1px solid #78cc86;
-    --successButtonHoverBg: #78cc86;
-    --successButtonTextHoverColor: var(--primaryTextColor);
-    --successButtonHoverBorderColor: #5ac06c;
-    --successButtonActiveBg: #5ac06c;
-    --successButtonTextActiveColor: var(--primaryTextColor);
-    --successButtonActiveBorderColor: #3cb553;
-    --successButtonFocusShadow: 0 0 0 1px hsl(129, 43%, calc(74% + 10%));
-    --infoButtonBg: #7fd8e6;
-    --infoButtonTextColor: var(--primaryTextColor);
-    --infoButtonBorder: 1px solid #4cc8db;
-    --infoButtonHoverBg: #4cc8db;
-    --infoButtonTextHoverColor: var(--primaryTextColor);
-    --infoButtonHoverBorderColor: #1C9588;
-    --infoButtonActiveBg: #26bdd3;
-    --infoButtonTextActiveColor: var(--primaryTextColor);
-    --infoButtonActiveBorderColor: #00b2cc;
-    --infoButtonFocusShadow: 0 0 0 1px hsl(188, 67%, calc(60% + 10%));
-    --warningButtonBg: #ffe082;
-    --warningButtonTextColor: var(--primaryTextColor);
-    --warningButtonBorder: 1px solid #ffd54f;
-    --warningButtonHoverBg: #ffd54f;
-    --warningButtonTextHoverColor: var(--primaryTextColor);
-    --warningButtonHoverBorderColor: #ffca28;
-    --warningButtonActiveBg: #ffca28;
-    --warningButtonTextActiveColor: var(--primaryTextColor);
-    --warningButtonActiveBorderColor: #ffc107;
-    --warningButtonFocusShadow: 0 0 0 1px hsl(45, 100%, calc(65% + 10%));
-    --helpButtonBg: #b7a2e0;
-    --helpButtonTextColor: var(--primaryTextColor);
-    --helpButtonBorder: 1px solid #9a7cd4;
-    --helpButtonHoverBg: #9a7cd4;
-    --helpButtonTextHoverColor: var(--primaryTextColor);
-    --helpButtonHoverBorderColor: #845fca;
-    --helpButtonActiveBg: #845fca;
-    --helpButtonTextActiveColor: var(--primaryTextColor);
-    --helpButtonActiveBorderColor: #6d43c0;
-    --helpButtonFocusShadow: 0 0 0 1px hsl(260, 56%, calc(66% + 10%));
-    --dangerButtonBg: #f19ea6;
-    --dangerButtonTextColor: var(--primaryTextColor);
-    --dangerButtonBorder: 1px solid #e97984;
-    --dangerButtonHoverBg: #e97984;
-    --dangerButtonTextHoverColor: var(--primaryTextColor);
-    --dangerButtonHoverBorderColor: #f75965;
-    --dangerButtonActiveBg: #f75965;
-    --dangerButtonTextActiveColor: var(--primaryTextColor);
-    --dangerButtonActiveBorderColor: #fd464e;
-    --dangerButtonFocusShadow: 0 0 0 1px hsl(354, 75%, calc(68% + 10%));
-}
\ No newline at end of file
+  --radiobuttonBorder: 2px solid #3f4b5b;
+}
diff --git a/packages/core/src/themes/anywhere.theme.bootstrap4-dark-purple.scss b/packages/core/src/themes/anywhere.theme.bootstrap4-dark-purple.scss
index b2d3b34..aa27503 100644
--- a/packages/core/src/themes/anywhere.theme.bootstrap4-dark-purple.scss
+++ b/packages/core/src/themes/anywhere.theme.bootstrap4-dark-purple.scss
@@ -1,283 +1,287 @@
 :root[theme="bootstrap4-dark-purple"],
 :root[data-theme="bootstrap4-dark-purple"] {
-    --surface-a: #2a323d;
-    --surface-b: #20262e;
-    --surface-c: rgba(255, 255, 255, 0.04);
-    --surface-d: #3f4b5b;
-    --surface-e: #2a323d;
-    --surface-f: #2a323d;
-    --text-color: rgba(255, 255, 255, 0.87);
-    --text-color-secondary: rgba(255, 255, 255, 0.6);
-    --primary-color: var(--primaryColor);
-    --primary-color-text: var(--primaryTextColor);
-    --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
-    --surface-0: #20262e;
-    --surface-50: #363c43;
-    --surface-100: #4d5158;
-    --surface-200: #63676d;
-    --surface-300: #797d82;
-    --surface-400: #909397;
-    --surface-500: #a6a8ab;
-    --surface-600: #bcbec0;
-    --surface-700: #d2d4d5;
-    --surface-800: #e9e9ea;
-    --surface-900: #ffffff;
-    --gray-50: #e9e9ea;
-    --gray-100: #d2d4d5;
-    --gray-200: #bcbec0;
-    --gray-300: #a6a8ab;
-    --gray-400: #909397;
-    --gray-500: #797d82;
-    --gray-600: #63676d;
-    --gray-700: #4d5158;
-    --gray-800: #363c43;
-    --gray-900: #20262e;
-    --content-padding: 1.25rem;
-    --inline-spacing: 0.5rem;
-    --border-radius: 4px;
-    --surface-ground: #20262e;
-    --surface-section: #20262e;
-    --surface-card: #2a323d;
-    --surface-overlay: #2a323d;
-    --surface-border: #3f4b5b;
-    --surface-hover: rgba(255, 255, 255, .04);
-    --maskbg: rgba(0, 0, 0, 0.4);
-    --focus-ring: 0 0 0 1px #e3f3fe;
-    --cog-icon: url('https://api.iconify.design/fa-solid/cog.svg?color=%23151515&height=26');
-    --times-icon: url('https://api.iconify.design/fa-solid/times.svg?color=%23151515&height=20');
+  --surface-a: #2a323d;
+  --surface-b: #20262e;
+  --surface-c: rgba(255, 255, 255, 0.04);
+  --surface-d: #3f4b5b;
+  --surface-e: #2a323d;
+  --surface-f: #2a323d;
+  --text-color: rgba(255, 255, 255, 0.87);
+  --text-color-secondary: rgba(255, 255, 255, 0.6);
+  --primary-color: var(--primaryColor);
+  --primary-color-text: var(--primaryTextColor);
+  --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica,
+    Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --surface-0: #20262e;
+  --surface-50: #363c43;
+  --surface-100: #4d5158;
+  --surface-200: #63676d;
+  --surface-300: #797d82;
+  --surface-400: #909397;
+  --surface-500: #a6a8ab;
+  --surface-600: #bcbec0;
+  --surface-700: #d2d4d5;
+  --surface-800: #e9e9ea;
+  --surface-900: #ffffff;
+  --gray-50: #e9e9ea;
+  --gray-100: #d2d4d5;
+  --gray-200: #bcbec0;
+  --gray-300: #a6a8ab;
+  --gray-400: #909397;
+  --gray-500: #797d82;
+  --gray-600: #63676d;
+  --gray-700: #4d5158;
+  --gray-800: #363c43;
+  --gray-900: #20262e;
+  --content-padding: 1.25rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 4px;
+  --surface-ground: #20262e;
+  --surface-section: #20262e;
+  --surface-card: #2a323d;
+  --surface-overlay: #2a323d;
+  --surface-border: #3f4b5b;
+  --surface-hover: rgba(255, 255, 255, 0.04);
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --focus-ring: 0 0 0 1px #e3f3fe;
+  --cog-icon: url("https://api.iconify.design/fa-solid/cog.svg?color=%23151515&height=26");
+  --times-icon: url("https://api.iconify.design/fa-solid/times.svg?color=%23151515&height=20");
 }
 
 :root[theme="bootstrap4-dark-purple"],
 :root[data-theme="bootstrap4-dark-purple"] {
-    --blue-50: #f3f8ff;
-    --blue-100: #c5dcff;
-    --blue-200: #97c1fe;
-    --blue-300: #69a5fe;
-    --blue-400: #3b8afd;
-    --blue-500: #0d6efd;
-    --blue-600: #0b5ed7;
-    --blue-700: #094db1;
-    --blue-800: #073d8b;
-    --blue-900: #052c65;
-    --green-50: #f4f9f6;
-    --green-100: #c8e2d6;
-    --green-200: #9ccbb5;
-    --green-300: #70b595;
-    --green-400: #459e74;
-    --green-500: #198754;
-    --green-600: #157347;
-    --green-700: #125f3b;
-    --green-800: #0e4a2e;
-    --green-900: #0a3622;
-    --yellow-50: #fffcf3;
-    --yellow-100: #fff0c3;
-    --yellow-200: #ffe494;
-    --yellow-300: #ffd965;
-    --yellow-400: #ffcd36;
-    --yellow-500: #ffc107;
-    --yellow-600: #d9a406;
-    --yellow-700: #b38705;
-    --yellow-800: #8c6a04;
-    --yellow-900: #664d03;
-    --cyan-50: #f3fcfe;
-    --cyan-100: #c5f2fb;
-    --cyan-200: #97e8f9;
-    --cyan-300: #69def6;
-    --cyan-400: #3bd4f3;
-    --cyan-500: #0dcaf0;
-    --cyan-600: #0baccc;
-    --cyan-700: #098da8;
-    --cyan-800: #076f84;
-    --cyan-900: #055160;
-    --pink-50: #fdf5f9;
-    --pink-100: #f5cee1;
-    --pink-200: #eda7ca;
-    --pink-300: #e681b3;
-    --pink-400: #de5a9b;
-    --pink-500: #d63384;
-    --pink-600: #b62b70;
-    --pink-700: #96245c;
-    --pink-800: #761c49;
-    --pink-900: #561435;
-    --indigo-50: #f7f3fe;
-    --indigo-100: #dac6fc;
-    --indigo-200: #bd98f9;
-    --indigo-300: #a06bf7;
-    --indigo-400: #833df4;
-    --indigo-500: #6610f2;
-    --indigo-600: #570ece;
-    --indigo-700: #470ba9;
-    --indigo-800: #380985;
-    --indigo-900: #290661;
-    --teal-50: #f4fcfa;
-    --teal-100: #c9f2e6;
-    --teal-200: #9fe8d2;
-    --teal-300: #75debf;
-    --teal-400: #4ad3ab;
-    --teal-500: #20c997;
-    --teal-600: #1bab80;
-    --teal-700: #168d6a;
-    --teal-800: #126f53;
-    --teal-900: #0d503c;
-    --orange-50: #fff9f3;
-    --orange-100: #ffe0c7;
-    --orange-200: #fec89a;
-    --orange-300: #feaf6d;
-    --orange-400: #fd9741;
-    --orange-500: #fd7e14;
-    --orange-600: #d76b11;
-    --orange-700: #b1580e;
-    --orange-800: #8b450b;
-    --orange-900: #653208;
-    --bluegray-50: #f8f9fb;
-    --bluegray-100: #e0e4ea;
-    --bluegray-200: #c7ced9;
-    --bluegray-300: #aeb9c8;
-    --bluegray-400: #95a3b8;
-    --bluegray-500: #7c8ea7;
-    --bluegray-600: #69798e;
-    --bluegray-700: #576375;
-    --bluegray-800: #444e5c;
-    --bluegray-900: #323943;
-    --purple-50: #f8f6fc;
-    --purple-100: #dcd2f0;
-    --purple-200: #c1aee4;
-    --purple-300: #a68ad9;
-    --purple-400: #8a66cd;
-    --purple-500: #6f42c1;
-    --purple-600: #5e38a4;
-    --purple-700: #4e2e87;
-    --purple-800: #3d246a;
-    --purple-900: #2c1a4d;
+  --blue-50: #f3f8ff;
+  --blue-100: #c5dcff;
+  --blue-200: #97c1fe;
+  --blue-300: #69a5fe;
+  --blue-400: #3b8afd;
+  --blue-500: #0d6efd;
+  --blue-600: #0b5ed7;
+  --blue-700: #094db1;
+  --blue-800: #073d8b;
+  --blue-900: #052c65;
+  --green-50: #f4f9f6;
+  --green-100: #c8e2d6;
+  --green-200: #9ccbb5;
+  --green-300: #70b595;
+  --green-400: #459e74;
+  --green-500: #198754;
+  --green-600: #157347;
+  --green-700: #125f3b;
+  --green-800: #0e4a2e;
+  --green-900: #0a3622;
+  --yellow-50: #fffcf3;
+  --yellow-100: #fff0c3;
+  --yellow-200: #ffe494;
+  --yellow-300: #ffd965;
+  --yellow-400: #ffcd36;
+  --yellow-500: #ffc107;
+  --yellow-600: #d9a406;
+  --yellow-700: #b38705;
+  --yellow-800: #8c6a04;
+  --yellow-900: #664d03;
+  --cyan-50: #f3fcfe;
+  --cyan-100: #c5f2fb;
+  --cyan-200: #97e8f9;
+  --cyan-300: #69def6;
+  --cyan-400: #3bd4f3;
+  --cyan-500: #0dcaf0;
+  --cyan-600: #0baccc;
+  --cyan-700: #098da8;
+  --cyan-800: #076f84;
+  --cyan-900: #055160;
+  --pink-50: #fdf5f9;
+  --pink-100: #f5cee1;
+  --pink-200: #eda7ca;
+  --pink-300: #e681b3;
+  --pink-400: #de5a9b;
+  --pink-500: #d63384;
+  --pink-600: #b62b70;
+  --pink-700: #96245c;
+  --pink-800: #761c49;
+  --pink-900: #561435;
+  --indigo-50: #f7f3fe;
+  --indigo-100: #dac6fc;
+  --indigo-200: #bd98f9;
+  --indigo-300: #a06bf7;
+  --indigo-400: #833df4;
+  --indigo-500: #6610f2;
+  --indigo-600: #570ece;
+  --indigo-700: #470ba9;
+  --indigo-800: #380985;
+  --indigo-900: #290661;
+  --teal-50: #f4fcfa;
+  --teal-100: #c9f2e6;
+  --teal-200: #9fe8d2;
+  --teal-300: #75debf;
+  --teal-400: #4ad3ab;
+  --teal-500: #20c997;
+  --teal-600: #1bab80;
+  --teal-700: #168d6a;
+  --teal-800: #126f53;
+  --teal-900: #0d503c;
+  --orange-50: #fff9f3;
+  --orange-100: #ffe0c7;
+  --orange-200: #fec89a;
+  --orange-300: #feaf6d;
+  --orange-400: #fd9741;
+  --orange-500: #fd7e14;
+  --orange-600: #d76b11;
+  --orange-700: #b1580e;
+  --orange-800: #8b450b;
+  --orange-900: #653208;
+  --bluegray-50: #f8f9fb;
+  --bluegray-100: #e0e4ea;
+  --bluegray-200: #c7ced9;
+  --bluegray-300: #aeb9c8;
+  --bluegray-400: #95a3b8;
+  --bluegray-500: #7c8ea7;
+  --bluegray-600: #69798e;
+  --bluegray-700: #576375;
+  --bluegray-800: #444e5c;
+  --bluegray-900: #323943;
+  --purple-50: #f8f6fc;
+  --purple-100: #dcd2f0;
+  --purple-200: #c1aee4;
+  --purple-300: #a68ad9;
+  --purple-400: #8a66cd;
+  --purple-500: #6f42c1;
+  --purple-600: #5e38a4;
+  --purple-700: #4e2e87;
+  --purple-800: #3d246a;
+  --purple-900: #2c1a4d;
 }
 
-
 :root[theme="bootstrap4-dark-purple"],
 :root[data-theme="bootstrap4-dark-purple"] {
-    --primaryColor: #c298d8;
-    --primaryColorRGBValue: 194, 152, 216;
-    --primaryDarkColor: #aa70c7;
-    --primaryDarkColorRGBValue: 170, 112, 199;
-    --primaryDarkerColor: #9954bb;
-    --primaryDarkerColorRGBValue: 153, 84, 187;
-    --primaryTextColor: #151515;
-
-    --primary-color-h: 279;
-    --primary-color-s: 45%;
-    --primary-color-l: 72%;
+  --primaryColor: #c298d8;
+  --primaryColorRGBValue: 194, 152, 216;
+  --primaryDarkColor: #aa70c7;
+  --primaryDarkColorRGBValue: 170, 112, 199;
+  --primaryDarkerColor: #9954bb;
+  --primaryDarkerColorRGBValue: 153, 84, 187;
+  --primaryTextColor: #151515;
 
-    --textColor: rgba(255, 255, 255, 0.87);
-    --textSecondaryColor: rgba(255, 255, 255, 0.6);
+  --primary-color-h: 279;
+  --primary-color-s: 45%;
+  --primary-color-l: 72%;
 
-    --borderRadius: 4px;
-    --focusOutlineColor: hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) + 10%));
-    --focusShadow: 0 0 0 1px var(--focusOutlineColor);
+  --textColor: rgba(255, 255, 255, 0.87);
+  --textSecondaryColor: rgba(255, 255, 255, 0.6);
 
-    --buttonPadding: .5rem .75rem;
+  --borderRadius: 4px;
+  --focusOutlineColor: hsl(
+    var(--primary-color-h),
+    var(--primary-color-s),
+    calc(var(--primary-color-l) + 10%)
+  );
+  --focusShadow: 0 0 0 1px var(--focusOutlineColor);
 
-    --inputBgColor: #20262e;
-    --inputBorder: 1px solid #3f4b5b;
-    --inputHoverBorderColor: #3f4b5b;
-    --inputPadding: .5rem .75rem;
-    --inputPlaceholderTextColor: rgba(255, 255, 255, 0.6);
+  --buttonPadding: 0.5rem 0.75rem;
 
-    --inputListItemPadding: .5rem 1.5rem;
-    --inputListBg: #2a323d;
-    --inputListItemHoverBgColor: rgba(255, 255, 255, 0.04);
-    --inputListItemHoverTextColor: rgba(255, 255, 255, 0.87);
-    // --inputOverlayBg: #2a323d;
+  --inputBgColor: #20262e;
+  --inputBorder: 1px solid #3f4b5b;
+  --inputHoverBorderColor: #3f4b5b;
+  --inputPadding: 0.5rem 0.75rem;
+  --inputPlaceholderTextColor: rgba(255, 255, 255, 0.6);
 
-    --inputSwitchBorderRadius: 4px;
-    --inputSwitchHandleBorderRadius: 4px;
-    --inputSwitchSliderOffBg: #3f4b5b;
-    --inputSwitchSliderOffHoverBg: #3f4b5b;
-    --inputSwitchHandleOffBg: rgba(255, 255, 255, 0.6);
-    --inputSwitchHandleOffHoverBg: rgba(255, 255, 255, 0.6);
-    --inputSwitchHandleOnBg: var(--primaryTextColor);
+  --inputListItemPadding: 0.5rem 1.5rem;
+  --inputListBg: #2a323d;
+  --inputListItemHoverBgColor: rgba(255, 255, 255, 0.04);
+  --inputListItemHoverTextColor: rgba(255, 255, 255, 0.87);
+  // --inputOverlayBg: #2a323d;
 
-    --panelHeaderPadding: .75rem 1rem;
-    --panelContentBg: #2a323d;
+  --inputSwitchBorderRadius: 4px;
+  --inputSwitchHandleBorderRadius: 4px;
+  --inputSwitchSliderOffBg: #3f4b5b;
+  --inputSwitchSliderOffHoverBg: #3f4b5b;
+  --inputSwitchHandleOffBg: rgba(255, 255, 255, 0.6);
+  --inputSwitchHandleOffHoverBg: rgba(255, 255, 255, 0.6);
+  --inputSwitchHandleOnBg: var(--primaryTextColor);
 
-    --checkboxBorder: 1px solid #3f4b5b;
+  --panelHeaderPadding: 0.75rem 1rem;
+  --panelContentBg: #2a323d;
 
-    --tabviewNavBg: transparent;
-    --tabviewNavBorder: 1px solid #3f4b5b;
-    --tabviewNavBorderWidth: 0 0 1px 0;
-    --tabviewHeaderBg: #2a323d;
-    --tabviewHeaderBorder: solid;
-    --tabviewHeaderBorderColor: transparent transparent #3f4b5b transparent;
-    --tabviewHeaderBorderWidth: 1px 1px 2px 1px;
-    --tabviewHeaderHoverBg: #2a323d;
-    --tabviewHeaderTextHoverColor: var(--textColor);
-    --tabviewHeaderHoverBorderColor: #3f4b5b #3f4b5b #3f4b5b #3f4b5b;
-    --tabviewHeaderActiveBorderColor: #3f4b5b #3f4b5b #2a323d #3f4b5b;
-    --tabviewHeaderActiveBg: #2a323d;
-    --tabviewHeaderTextActiveColor: var(--textSecondaryColor);
+  --checkboxBorder: 1px solid #3f4b5b;
 
+  --tabviewNavBg: transparent;
+  --tabviewNavBorder: 1px solid #3f4b5b;
+  --tabviewNavBorderWidth: 0 0 1px 0;
+  --tabviewHeaderBg: #2a323d;
+  --tabviewHeaderBorder: solid;
+  --tabviewHeaderBorderColor: transparent transparent #3f4b5b transparent;
+  --tabviewHeaderBorderWidth: 1px 1px 2px 1px;
+  --tabviewHeaderHoverBg: #2a323d;
+  --tabviewHeaderTextHoverColor: var(--textColor);
+  --tabviewHeaderHoverBorderColor: #3f4b5b #3f4b5b #3f4b5b #3f4b5b;
+  --tabviewHeaderActiveBorderColor: #3f4b5b #3f4b5b #2a323d #3f4b5b;
+  --tabviewHeaderActiveBg: #2a323d;
+  --tabviewHeaderTextActiveColor: var(--textSecondaryColor);
 
+  --plainButtonTextColor: rgba(255, 255, 255, 0.6);
+  --plainButtonHoverBgColor: rgba(255, 255, 255, 0.04);
+  --plainButtonActiveBgColor: rgba(255, 255, 255, 0.04);
+  --linkButtonFocusShadow: 0 0 0 1px var(--focusOutlineColor);
+  --secondaryButtonBg: #6c757d;
+  --secondaryButtonTextColor: #ffffff;
+  --secondaryButtonBorder: 1px solid #6c757d;
+  --secondaryButtonHoverBg: #59626a;
+  --secondaryButtonTextHoverColor: #ffffff;
+  --secondaryButtonHoverBorderColor: #59626a;
+  --secondaryButtonActiveBg: #4f5860;
+  --secondaryButtonTextActiveColor: #ffffff;
+  --secondaryButtonActiveBorderColor: #4f5860;
+  --secondaryButtonFocusShadow: 0 0 0 1px hsl(208, 7%, calc(46% + 30%));
+  --successButtonBg: #9fdaa8;
+  --successButtonTextColor: var(--primaryTextColor);
+  --successButtonBorder: 1px solid #78cc86;
+  --successButtonHoverBg: #78cc86;
+  --successButtonTextHoverColor: var(--primaryTextColor);
+  --successButtonHoverBorderColor: #5ac06c;
+  --successButtonActiveBg: #5ac06c;
+  --successButtonTextActiveColor: var(--primaryTextColor);
+  --successButtonActiveBorderColor: #3cb553;
+  --successButtonFocusShadow: 0 0 0 1px hsl(129, 43%, calc(74% + 10%));
+  --infoButtonBg: #7fd8e6;
+  --infoButtonTextColor: var(--primaryTextColor);
+  --infoButtonBorder: 1px solid #4cc8db;
+  --infoButtonHoverBg: #4cc8db;
+  --infoButtonTextHoverColor: var(--primaryTextColor);
+  --infoButtonHoverBorderColor: #1c9588;
+  --infoButtonActiveBg: #26bdd3;
+  --infoButtonTextActiveColor: var(--primaryTextColor);
+  --infoButtonActiveBorderColor: #00b2cc;
+  --infoButtonFocusShadow: 0 0 0 1px hsl(188, 67%, calc(60% + 10%));
+  --warningButtonBg: #ffe082;
+  --warningButtonTextColor: var(--primaryTextColor);
+  --warningButtonBorder: 1px solid #ffd54f;
+  --warningButtonHoverBg: #ffd54f;
+  --warningButtonTextHoverColor: var(--primaryTextColor);
+  --warningButtonHoverBorderColor: #ffca28;
+  --warningButtonActiveBg: #ffca28;
+  --warningButtonTextActiveColor: var(--primaryTextColor);
+  --warningButtonActiveBorderColor: #ffc107;
+  --warningButtonFocusShadow: 0 0 0 1px hsl(45, 100%, calc(65% + 10%));
+  --helpButtonBg: #b7a2e0;
+  --helpButtonTextColor: var(--primaryTextColor);
+  --helpButtonBorder: 1px solid #9a7cd4;
+  --helpButtonHoverBg: #9a7cd4;
+  --helpButtonTextHoverColor: var(--primaryTextColor);
+  --helpButtonHoverBorderColor: #845fca;
+  --helpButtonActiveBg: #845fca;
+  --helpButtonTextActiveColor: var(--primaryTextColor);
+  --helpButtonActiveBorderColor: #6d43c0;
+  --helpButtonFocusShadow: 0 0 0 1px hsl(260, 56%, calc(66% + 10%));
+  --dangerButtonBg: #f19ea6;
+  --dangerButtonTextColor: var(--primaryTextColor);
+  --dangerButtonBorder: 1px solid #e97984;
+  --dangerButtonHoverBg: #e97984;
+  --dangerButtonTextHoverColor: var(--primaryTextColor);
+  --dangerButtonHoverBorderColor: #f75965;
+  --dangerButtonActiveBg: #f75965;
+  --dangerButtonTextActiveColor: var(--primaryTextColor);
+  --dangerButtonActiveBorderColor: #fd464e;
+  --dangerButtonFocusShadow: 0 0 0 1px hsl(354, 75%, calc(68% + 10%));
 
-    --plainButtonTextColor: rgba(255, 255, 255, 0.6);
-    --plainButtonHoverBgColor: rgba(255, 255, 255, 0.04);
-    --plainButtonActiveBgColor: rgba(255, 255, 255, 0.04);
-    --linkButtonFocusShadow: 0 0 0 1px var(--focusOutlineColor);
-    --secondaryButtonBg: #6c757d;
-    --secondaryButtonTextColor: #ffffff;
-    --secondaryButtonBorder: 1px solid #6c757d;
-    --secondaryButtonHoverBg: #59626A;
-    --secondaryButtonTextHoverColor: #ffffff;
-    --secondaryButtonHoverBorderColor: #59626A;
-    --secondaryButtonActiveBg: #4F5860;
-    --secondaryButtonTextActiveColor: #ffffff;
-    --secondaryButtonActiveBorderColor: #4F5860;
-    --secondaryButtonFocusShadow: 0 0 0 1px hsl(208, 7%, calc(46% + 30%));
-    --successButtonBg: #9fdaa8;
-    --successButtonTextColor: var(--primaryTextColor);
-    --successButtonBorder: 1px solid #78cc86;
-    --successButtonHoverBg: #78cc86;
-    --successButtonTextHoverColor: var(--primaryTextColor);
-    --successButtonHoverBorderColor: #5ac06c;
-    --successButtonActiveBg: #5ac06c;
-    --successButtonTextActiveColor: var(--primaryTextColor);
-    --successButtonActiveBorderColor: #3cb553;
-    --successButtonFocusShadow: 0 0 0 1px hsl(129, 43%, calc(74% + 10%));
-    --infoButtonBg: #7fd8e6;
-    --infoButtonTextColor: var(--primaryTextColor);
-    --infoButtonBorder: 1px solid #4cc8db;
-    --infoButtonHoverBg: #4cc8db;
-    --infoButtonTextHoverColor: var(--primaryTextColor);
-    --infoButtonHoverBorderColor: #1C9588;
-    --infoButtonActiveBg: #26bdd3;
-    --infoButtonTextActiveColor: var(--primaryTextColor);
-    --infoButtonActiveBorderColor: #00b2cc;
-    --infoButtonFocusShadow: 0 0 0 1px hsl(188, 67%, calc(60% + 10%));
-    --warningButtonBg: #ffe082;
-    --warningButtonTextColor: var(--primaryTextColor);
-    --warningButtonBorder: 1px solid #ffd54f;
-    --warningButtonHoverBg: #ffd54f;
-    --warningButtonTextHoverColor: var(--primaryTextColor);
-    --warningButtonHoverBorderColor: #ffca28;
-    --warningButtonActiveBg: #ffca28;
-    --warningButtonTextActiveColor: var(--primaryTextColor);
-    --warningButtonActiveBorderColor: #ffc107;
-    --warningButtonFocusShadow: 0 0 0 1px hsl(45, 100%, calc(65% + 10%));
-    --helpButtonBg: #b7a2e0;
-    --helpButtonTextColor: var(--primaryTextColor);
-    --helpButtonBorder: 1px solid #9a7cd4;
-    --helpButtonHoverBg: #9a7cd4;
-    --helpButtonTextHoverColor: var(--primaryTextColor);
-    --helpButtonHoverBorderColor: #845fca;
-    --helpButtonActiveBg: #845fca;
-    --helpButtonTextActiveColor: var(--primaryTextColor);
-    --helpButtonActiveBorderColor: #6d43c0;
-    --helpButtonFocusShadow: 0 0 0 1px hsl(260, 56%, calc(66% + 10%));
-    --dangerButtonBg: #f19ea6;
-    --dangerButtonTextColor: var(--primaryTextColor);
-    --dangerButtonBorder: 1px solid #e97984;
-    --dangerButtonHoverBg: #e97984;
-    --dangerButtonTextHoverColor: var(--primaryTextColor);
-    --dangerButtonHoverBorderColor: #f75965;
-    --dangerButtonActiveBg: #f75965;
-    --dangerButtonTextActiveColor: var(--primaryTextColor);
-    --dangerButtonActiveBorderColor: #fd464e;
-    --dangerButtonFocusShadow: 0 0 0 1px hsl(354, 75%, calc(68% + 10%));
-}
\ No newline at end of file
+  --radiobuttonBorder: 2px solid #3f4b5b;
+}
diff --git a/packages/core/src/themes/anywhere.theme.default.dark-purple.scss b/packages/core/src/themes/anywhere.theme.default.dark-purple.scss
index c04b162..fa83ba5 100644
--- a/packages/core/src/themes/anywhere.theme.default.dark-purple.scss
+++ b/packages/core/src/themes/anywhere.theme.default.dark-purple.scss
@@ -1,271 +1,274 @@
 :root[theme="anywhere-default-dark-purple"],
 :root[data-theme="anywhere-default-dark-purple"] {
-    --surface-a: #1e1e1e;
-    --surface-b: #121212;
-    --surface-c: rgba(255, 255, 255, 0.03);
-    --surface-d: #383838;
-    --surface-e: #1e1e1e;
-    --surface-f: #1e1e1e;
-    --text-color: rgba(255, 255, 255, 0.87);
-    --text-color-secondary: rgba(255, 255, 255, 0.6);
-    --primary-color: var(--primaryColor);
-    --primary-color-text: #ffffff;
-    --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
-    --surface-0: #121212;
-    --surface-50: #2a2a2a;
-    --surface-100: #414141;
-    --surface-200: #595959;
-    --surface-300: #717171;
-    --surface-400: #898989;
-    --surface-500: #a0a0a0;
-    --surface-600: #b8b8b8;
-    --surface-700: #d0d0d0;
-    --surface-800: #e7e7e7;
-    --surface-900: #ffffff;
-    --gray-50: #e7e7e7;
-    --gray-100: #d0d0d0;
-    --gray-200: #b8b8b8;
-    --gray-300: #a0a0a0;
-    --gray-400: #898989;
-    --gray-500: #717171;
-    --gray-600: #595959;
-    --gray-700: #414141;
-    --gray-800: #2a2a2a;
-    --gray-900: #121212;
-    --content-padding: 1rem;
-    --inline-spacing: 0.5rem;
-    --border-radius: 3px;
-    --surface-ground: #121212;
-    --surface-section: #121212;
-    --surface-card: #1e1e1e;
-    --surface-overlay: #1e1e1e;
-    --surface-border: #383838;
-    --surface-hover: rgba(255, 255, 255, .03);
-    --maskbg: rgba(0, 0, 0, 0.4);
-    --focus-ring: 0 0 0 1px #cf95d9;
+  --surface-a: #1e1e1e;
+  --surface-b: #121212;
+  --surface-c: rgba(255, 255, 255, 0.03);
+  --surface-d: #383838;
+  --surface-e: #1e1e1e;
+  --surface-f: #1e1e1e;
+  --text-color: rgba(255, 255, 255, 0.87);
+  --text-color-secondary: rgba(255, 255, 255, 0.6);
+  --primary-color: var(--primaryColor);
+  --primary-color-text: #ffffff;
+  --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica,
+    Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --surface-0: #121212;
+  --surface-50: #2a2a2a;
+  --surface-100: #414141;
+  --surface-200: #595959;
+  --surface-300: #717171;
+  --surface-400: #898989;
+  --surface-500: #a0a0a0;
+  --surface-600: #b8b8b8;
+  --surface-700: #d0d0d0;
+  --surface-800: #e7e7e7;
+  --surface-900: #ffffff;
+  --gray-50: #e7e7e7;
+  --gray-100: #d0d0d0;
+  --gray-200: #b8b8b8;
+  --gray-300: #a0a0a0;
+  --gray-400: #898989;
+  --gray-500: #717171;
+  --gray-600: #595959;
+  --gray-700: #414141;
+  --gray-800: #2a2a2a;
+  --gray-900: #121212;
+  --content-padding: 1rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 3px;
+  --surface-ground: #121212;
+  --surface-section: #121212;
+  --surface-card: #1e1e1e;
+  --surface-overlay: #1e1e1e;
+  --surface-border: #383838;
+  --surface-hover: rgba(255, 255, 255, 0.03);
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --focus-ring: 0 0 0 1px #cf95d9;
 }
 
 :root[theme="anywhere-default-dark-purple"],
 :root[data-theme="anywhere-default-dark-purple"] {
-    --blue-50: #f4fafe;
-    --blue-100: #cae6fc;
-    --blue-200: #a0d2fa;
-    --blue-300: #75bef8;
-    --blue-400: #4baaf5;
-    --blue-500: #2196f3;
-    --blue-600: #1c80cf;
-    --blue-700: #1769aa;
-    --blue-800: #125386;
-    --blue-900: #0d3c61;
-    --green-50: #f6fbf6;
-    --green-100: #d4ecd5;
-    --green-200: #b2ddb4;
-    --green-300: #90cd93;
-    --green-400: #6ebe71;
-    --green-500: #4caf50;
-    --green-600: #419544;
-    --green-700: #357b38;
-    --green-800: #2a602c;
-    --green-900: #1e4620;
-    --yellow-50: #fffcf5;
-    --yellow-100: #fef0cd;
-    --yellow-200: #fde4a5;
-    --yellow-300: #fdd87d;
-    --yellow-400: #fccc55;
-    --yellow-500: #fbc02d;
-    --yellow-600: #d5a326;
-    --yellow-700: #b08620;
-    --yellow-800: #8a6a19;
-    --yellow-900: #644d12;
-    --cyan-50: #f2fcfd;
-    --cyan-100: #c2eff5;
-    --cyan-200: #91e2ed;
-    --cyan-300: #61d5e4;
-    --cyan-400: #30c9dc;
-    --cyan-500: #00bcd4;
-    --cyan-600: #00a0b4;
-    --cyan-700: #008494;
-    --cyan-800: #006775;
-    --cyan-900: #004b55;
-    --pink-50: #fef4f7;
-    --pink-100: #fac9da;
-    --pink-200: #f69ebc;
-    --pink-300: #f1749e;
-    --pink-400: #ed4981;
-    --pink-500: #e91e63;
-    --pink-600: #c61a54;
-    --pink-700: #a31545;
-    --pink-800: #801136;
-    --pink-900: #5d0c28;
-    --indigo-50: #f5f6fb;
-    --indigo-100: #d1d5ed;
-    --indigo-200: #acb4df;
-    --indigo-300: #8893d1;
-    --indigo-400: #6372c3;
-    --indigo-500: #3f51b5;
-    --indigo-600: #36459a;
-    --indigo-700: #2c397f;
-    --indigo-800: #232d64;
-    --indigo-900: #192048;
-    --teal-50: #f2faf9;
-    --teal-100: #c2e6e2;
-    --teal-200: #91d2cc;
-    --teal-300: #61beb5;
-    --teal-400: #30aa9f;
-    --teal-500: #009688;
-    --teal-600: #008074;
-    --teal-700: #00695f;
-    --teal-800: #00534b;
-    --teal-900: #003c36;
-    --orange-50: #fff8f2;
-    --orange-100: #fde0c2;
-    --orange-200: #fbc791;
-    --orange-300: #f9ae61;
-    --orange-400: #f79530;
-    --orange-500: #f57c00;
-    --orange-600: #d06900;
-    --orange-700: #ac5700;
-    --orange-800: #874400;
-    --orange-900: #623200;
-    --bluegray-50: #f7f9f9;
-    --bluegray-100: #d9e0e3;
-    --bluegray-200: #bbc7cd;
-    --bluegray-300: #9caeb7;
-    --bluegray-400: #7e96a1;
-    --bluegray-500: #607d8b;
-    --bluegray-600: #526a76;
-    --bluegray-700: #435861;
-    --bluegray-800: #35454c;
-    --bluegray-900: #263238;
-    --purple-50: #faf4fb;
-    --purple-100: #e7cbec;
-    --purple-200: #d4a2dd;
-    --purple-300: #c279ce;
-    --purple-400: #af50bf;
-    --purple-500: #9c27b0;
-    --purple-600: #852196;
-    --purple-700: #6d1b7b;
-    --purple-800: #561561;
-    --purple-900: #3e1046;
+  --blue-50: #f4fafe;
+  --blue-100: #cae6fc;
+  --blue-200: #a0d2fa;
+  --blue-300: #75bef8;
+  --blue-400: #4baaf5;
+  --blue-500: #2196f3;
+  --blue-600: #1c80cf;
+  --blue-700: #1769aa;
+  --blue-800: #125386;
+  --blue-900: #0d3c61;
+  --green-50: #f6fbf6;
+  --green-100: #d4ecd5;
+  --green-200: #b2ddb4;
+  --green-300: #90cd93;
+  --green-400: #6ebe71;
+  --green-500: #4caf50;
+  --green-600: #419544;
+  --green-700: #357b38;
+  --green-800: #2a602c;
+  --green-900: #1e4620;
+  --yellow-50: #fffcf5;
+  --yellow-100: #fef0cd;
+  --yellow-200: #fde4a5;
+  --yellow-300: #fdd87d;
+  --yellow-400: #fccc55;
+  --yellow-500: #fbc02d;
+  --yellow-600: #d5a326;
+  --yellow-700: #b08620;
+  --yellow-800: #8a6a19;
+  --yellow-900: #644d12;
+  --cyan-50: #f2fcfd;
+  --cyan-100: #c2eff5;
+  --cyan-200: #91e2ed;
+  --cyan-300: #61d5e4;
+  --cyan-400: #30c9dc;
+  --cyan-500: #00bcd4;
+  --cyan-600: #00a0b4;
+  --cyan-700: #008494;
+  --cyan-800: #006775;
+  --cyan-900: #004b55;
+  --pink-50: #fef4f7;
+  --pink-100: #fac9da;
+  --pink-200: #f69ebc;
+  --pink-300: #f1749e;
+  --pink-400: #ed4981;
+  --pink-500: #e91e63;
+  --pink-600: #c61a54;
+  --pink-700: #a31545;
+  --pink-800: #801136;
+  --pink-900: #5d0c28;
+  --indigo-50: #f5f6fb;
+  --indigo-100: #d1d5ed;
+  --indigo-200: #acb4df;
+  --indigo-300: #8893d1;
+  --indigo-400: #6372c3;
+  --indigo-500: #3f51b5;
+  --indigo-600: #36459a;
+  --indigo-700: #2c397f;
+  --indigo-800: #232d64;
+  --indigo-900: #192048;
+  --teal-50: #f2faf9;
+  --teal-100: #c2e6e2;
+  --teal-200: #91d2cc;
+  --teal-300: #61beb5;
+  --teal-400: #30aa9f;
+  --teal-500: #009688;
+  --teal-600: #008074;
+  --teal-700: #00695f;
+  --teal-800: #00534b;
+  --teal-900: #003c36;
+  --orange-50: #fff8f2;
+  --orange-100: #fde0c2;
+  --orange-200: #fbc791;
+  --orange-300: #f9ae61;
+  --orange-400: #f79530;
+  --orange-500: #f57c00;
+  --orange-600: #d06900;
+  --orange-700: #ac5700;
+  --orange-800: #874400;
+  --orange-900: #623200;
+  --bluegray-50: #f7f9f9;
+  --bluegray-100: #d9e0e3;
+  --bluegray-200: #bbc7cd;
+  --bluegray-300: #9caeb7;
+  --bluegray-400: #7e96a1;
+  --bluegray-500: #607d8b;
+  --bluegray-600: #526a76;
+  --bluegray-700: #435861;
+  --bluegray-800: #35454c;
+  --bluegray-900: #263238;
+  --purple-50: #faf4fb;
+  --purple-100: #e7cbec;
+  --purple-200: #d4a2dd;
+  --purple-300: #c279ce;
+  --purple-400: #af50bf;
+  --purple-500: #9c27b0;
+  --purple-600: #852196;
+  --purple-700: #6d1b7b;
+  --purple-800: #561561;
+  --purple-900: #3e1046;
 }
 
-
 :root[theme="anywhere-default-dark-purple"],
 :root[data-theme="anywhere-default-dark-purple"] {
-    //main color scheme
-    --primaryColor: #966fd6;
-    --primaryColorRGBValue: 150, 111, 214;
-    --primaryDarkColor: #835CCC;
-    --primaryDarkColorRGBValue: 131, 92, 204;
-    --primaryDarkerColor: #6840BC;
-    --primaryDarkerColorRGBValue: 104, 64, 188;
-    --primaryTextColor: #ffffff;
-    //hsl colors
-    --primary-color-h: 263;
-    --primary-color-s: 44%;
-    --primary-color-l: 64%;
-
+  //main color scheme
+  --primaryColor: #966fd6;
+  --primaryColorRGBValue: 150, 111, 214;
+  --primaryDarkColor: #835ccc;
+  --primaryDarkColorRGBValue: 131, 92, 204;
+  --primaryDarkerColor: #6840bc;
+  --primaryDarkerColorRGBValue: 104, 64, 188;
+  --primaryTextColor: #ffffff;
+  //hsl colors
+  --primary-color-h: 263;
+  --primary-color-s: 44%;
+  --primary-color-l: 64%;
 
-    --textColor: rgba(255, 255, 255, 0.87);
-    --textSecondaryColor: rgba(255, 255, 255, 0.6);
+  --textColor: rgba(255, 255, 255, 0.87);
+  --textSecondaryColor: rgba(255, 255, 255, 0.6);
 
-    --focusOutlineColor: hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) + 10%));
-    --focusShadow: 0 0 0 0.2rem var(--focusOutlineColor);
+  --focusOutlineColor: hsl(
+    var(--primary-color-h),
+    var(--primary-color-s),
+    calc(var(--primary-color-l) + 10%)
+  );
+  --focusShadow: 0 0 0 0.2rem var(--focusOutlineColor);
 
-    --inputBgColor: #121212;
-    --inputBorder: 1px solid #383838;
-    --inputHoverBorderColor: var(--primaryDarkColor);
-    --inputPlaceholderTextColor: var(--textSecondaryColor);
+  --inputBgColor: #121212;
+  --inputBorder: 1px solid #383838;
+  --inputHoverBorderColor: var(--primaryDarkColor);
+  --inputPlaceholderTextColor: var(--textSecondaryColor);
 
-    --inputListBg: #1e1e1e;
-    --inputListItemHoverBgColor: rgba(255, 255, 255, 0.04);
-    --inputListItemHoverTextColor: var(--textColor);
+  --inputListBg: #1e1e1e;
+  --inputListItemHoverBgColor: rgba(255, 255, 255, 0.04);
+  --inputListItemHoverTextColor: var(--textColor);
 
-    --inputSwitchSliderOffBg: #383838;
-    --inputSwitchSliderOffHoverBg: rgba(255, 255, 255, 0.03);
-    --inputSwitchHandleOffBg: var(--textSecondaryColor);
-    --inputSwitchHandleOnBg: var(--textColor);
+  --inputSwitchSliderOffBg: #383838;
+  --inputSwitchSliderOffHoverBg: rgba(255, 255, 255, 0.03);
+  --inputSwitchHandleOffBg: var(--textSecondaryColor);
+  --inputSwitchHandleOnBg: var(--textColor);
 
+  --checkboxBorder: 2px solid #383838;
 
-    --checkboxBorder: 2px solid #383838;
+  --panelContentBg: #1e1e1e;
 
-    --panelContentBg: #1e1e1e;
+  --tabviewNavBg: transparent;
+  --tabviewNavBorder: 2px solid #383838;
+  --tabviewHeaderBg: #1e1e1e;
+  // --tabviewHeaderBorder: solid #383838;
+  --tabviewHeaderBorderColor: transparent transparent #383838 transparent;
+  --tabviewHeaderHoverBg: #1e1e1e;
+  --tabviewHeaderActiveBg: #1e1e1e;
+  --tabviewHeaderHoverBorderColor: var(--primaryColor);
+  --tabviewHeaderTextHoverColor: var(--textColor);
 
-    --tabviewNavBg: transparent;
-    --tabviewNavBorder: 2px solid #383838;
-    --tabviewHeaderBg: #1e1e1e;
-    // --tabviewHeaderBorder: solid #383838;
-    --tabviewHeaderBorderColor: transparent transparent #383838 transparent;
-    --tabviewHeaderHoverBg: #1e1e1e;
-    --tabviewHeaderActiveBg: #1e1e1e;
-    --tabviewHeaderHoverBorderColor: var(--primaryColor);
-    --tabviewHeaderTextHoverColor: var(--textColor);
+  // buttons
+  --plainButtonTextColor: var(--textSecondaryColor);
+  --plainButtonHoverBgColor: rgba(255, 255, 255, 0.03);
+  --plainButtonActiveBgColor: rgba(255, 255, 255, 0.16);
+  --secondaryButtonBg: #78909c;
+  --secondaryButtonTextColor: #ffffff;
+  --secondaryButtonBorder: 1px solid #78909c;
+  --secondaryButtonHoverBg: #657d8a;
+  --secondaryButtonTextHoverColor: #ffffff;
+  --secondaryButtonHoverBorderColor: #657d8a;
+  --secondaryButtonActiveBg: #48616e;
+  --secondaryButtonTextActiveColor: #ffffff;
+  --secondaryButtonActiveBorderColor: #48616e;
+  --secondaryButtonFocusShadow: 0 0 0 0.2rem hsl(200, 15%, calc(54% + 10%));
+  --successButtonBg: #c5e1a5;
+  --successButtonTextColor: #121212;
+  --successButtonBorder: 1px solid #c5e1a5;
+  --successButtonHoverBg: #b8d993;
+  --successButtonTextHoverColor: #121212;
+  --successButtonHoverBorderColor: #b8d993;
+  --successButtonActiveBg: #a3cd79;
+  --successButtonTextActiveColor: #121212;
+  --successButtonActiveBorderColor: #a3cd79;
+  --successButtonFocusShadow: 0 0 0 0.2rem hsl(88, 50%, calc(76% + 10%));
+  --infoButtonBg: #81d4fa;
+  --infoButtonTextColor: #121212;
+  --infoButtonBorder: 1px solid #81d4fa;
+  --infoButtonHoverBg: #6ec9f9;
+  --infoButtonTextHoverColor: #121212;
+  --infoButtonHoverBorderColor: #6ec9f9;
+  --infoButtonActiveBg: #51b9f6;
+  --infoButtonTextActiveColor: #121212;
+  --infoButtonActiveBorderColor: #51b9f6;
+  --infoButtonFocusShadow: 0 0 0 0.2rem hsl(199, 92%, calc(74% + 10%));
+  --warningButtonBg: #ffe082;
+  --warningButtonTextColor: #121212;
+  --warningButtonBorder: 1px solid #ffe082;
+  --warningButtonHoverBg: #ffd86f;
+  --warningButtonTextHoverColor: #121212;
+  --warningButtonHoverBorderColor: #ffd86f;
+  --warningButtonActiveBg: #ffcb52;
+  --warningButtonTextActiveColor: #121212;
+  --warningButtonActiveBorderColor: #ffcb52;
+  --warningButtonFocusShadow: 0 0 0 0.2rem hsl(45, 100%, calc(51% + 30%));
+  --helpButtonBg: #ce93d8;
+  --helpButtonTextColor: #121212;
+  --helpButtonBorder: 1px solid #ce93d8;
+  --helpButtonHoverBg: #c280ce;
+  --helpButtonTextHoverColor: #121212;
+  --helpButtonHoverBorderColor: #c280ce;
+  --helpButtonActiveBg: #b064bf;
+  --helpButtonTextActiveColor: #121212;
+  --helpButtonActiveBorderColor: #b064bf;
+  --helpButtonFocusShadow: 0 0 0 0.2rem hsl(291, 64%, calc(42% + 30%));
+  --dangerButtonBg: #f48fb1;
+  --dangerButtonTextColor: #121212;
+  --dangerButtonBorder: 1px solid #f48fb1;
+  --dangerButtonHoverBg: #f17ca1;
+  --dangerButtonTextHoverColor: #121212;
+  --dangerButtonHoverBorderColor: #f17ca1;
+  --dangerButtonActiveBg: #ec6088;
+  --dangerButtonTextActiveColor: #121212;
+  --dangerButtonActiveBorderColor: #ec6088;
+  --dangerButtonFocusShadow: 0 0 0 0.2rem hsl(4, 90%, calc(58% + 30%));
 
+  --badgeTextColor: var(--textColor);
 
-    // buttons
-    --plainButtonTextColor: var(--textSecondaryColor);
-    --plainButtonHoverBgColor: rgba(255, 255, 255, 0.03);
-    --plainButtonActiveBgColor: rgba(255, 255, 255, 0.16);
-    --secondaryButtonBg: #78909C;
-    --secondaryButtonTextColor: #ffffff;
-    --secondaryButtonBorder: 1px solid #78909C;
-    --secondaryButtonHoverBg: #657D8A;
-    --secondaryButtonTextHoverColor: #ffffff;
-    --secondaryButtonHoverBorderColor: #657D8A;
-    --secondaryButtonActiveBg: #48616E;
-    --secondaryButtonTextActiveColor: #ffffff;
-    --secondaryButtonActiveBorderColor: #48616E;
-    --secondaryButtonFocusShadow: 0 0 0 0.2rem hsl(200, 15%, calc(54% + 10%));
-    --successButtonBg: #C5E1A5;
-    --successButtonTextColor: #121212;
-    --successButtonBorder: 1px solid #C5E1A5;
-    --successButtonHoverBg: #B8D993;
-    --successButtonTextHoverColor: #121212;
-    --successButtonHoverBorderColor: #B8D993;
-    --successButtonActiveBg: #A3CD79;
-    --successButtonTextActiveColor: #121212;
-    --successButtonActiveBorderColor: #A3CD79;
-    --successButtonFocusShadow: 0 0 0 0.2rem hsl(88, 50%, calc(76% + 10%));
-    --infoButtonBg: #81D4FA;
-    --infoButtonTextColor: #121212;
-    --infoButtonBorder: 1px solid #81D4FA;
-    --infoButtonHoverBg: #6EC9F9;
-    --infoButtonTextHoverColor: #121212;
-    --infoButtonHoverBorderColor: #6EC9F9;
-    --infoButtonActiveBg: #51B9F6;
-    --infoButtonTextActiveColor: #121212;
-    --infoButtonActiveBorderColor: #51B9F6;
-    --infoButtonFocusShadow: 0 0 0 0.2rem hsl(199, 92%, calc(74% + 10%));
-    --warningButtonBg: #FFE082;
-    --warningButtonTextColor: #121212;
-    --warningButtonBorder: 1px solid #FFE082;
-    --warningButtonHoverBg: #FFD86F;
-    --warningButtonTextHoverColor: #121212;
-    --warningButtonHoverBorderColor: #FFD86F;
-    --warningButtonActiveBg: #FFCB52;
-    --warningButtonTextActiveColor: #121212;
-    --warningButtonActiveBorderColor: #FFCB52;
-    --warningButtonFocusShadow: 0 0 0 0.2rem hsl(45, 100%, calc(51% + 30%));
-    --helpButtonBg: #CE93D8;
-    --helpButtonTextColor: #121212;
-    --helpButtonBorder: 1px solid #CE93D8;
-    --helpButtonHoverBg: #C280CE;
-    --helpButtonTextHoverColor: #121212;
-    --helpButtonHoverBorderColor: #C280CE;
-    --helpButtonActiveBg: #B064BF;
-    --helpButtonTextActiveColor: #121212;
-    --helpButtonActiveBorderColor: #B064BF;
-    --helpButtonFocusShadow: 0 0 0 0.2rem hsl(291, 64%, calc(42% + 30%));
-    --dangerButtonBg: #F48FB1;
-    --dangerButtonTextColor: #121212;
-    --dangerButtonBorder: 1px solid #F48FB1;
-    --dangerButtonHoverBg: #F17CA1;
-    --dangerButtonTextHoverColor: #121212;
-    --dangerButtonHoverBorderColor: #F17CA1;
-    --dangerButtonActiveBg: #EC6088;
-    --dangerButtonTextActiveColor: #121212;
-    --dangerButtonActiveBorderColor: #EC6088;
-    --dangerButtonFocusShadow: 0 0 0 0.2rem hsl(4, 90%, calc(58% + 30%));
-
-    --badgeTextColor: var(--textColor);
-}
\ No newline at end of file
+  --radiobuttonBorder: 2px solid #383838;
+}
diff --git a/packages/core/src/themes/anywhere.theme.default.dark-violet.scss b/packages/core/src/themes/anywhere.theme.default.dark-violet.scss
index c74cd2f..bdcff1e 100644
--- a/packages/core/src/themes/anywhere.theme.default.dark-violet.scss
+++ b/packages/core/src/themes/anywhere.theme.default.dark-violet.scss
@@ -1,269 +1,272 @@
 :root[theme="anywhere-default-dark-violet"],
 :root[data-theme="anywhere-default-dark-violet"] {
-    --surface-a: #1e1e1e;
-    --surface-b: #121212;
-    --surface-c: rgba(255, 255, 255, 0.03);
-    --surface-d: #383838;
-    --surface-e: #1e1e1e;
-    --surface-f: #1e1e1e;
-    --text-color: rgba(255, 255, 255, 0.87);
-    --text-color-secondary: rgba(255, 255, 255, 0.6);
-    --primary-color: var(--primaryColor);
-    --primary-color-text: #ffffff;
-    --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
-    --surface-0: #121212;
-    --surface-50: #2a2a2a;
-    --surface-100: #414141;
-    --surface-200: #595959;
-    --surface-300: #717171;
-    --surface-400: #898989;
-    --surface-500: #a0a0a0;
-    --surface-600: #b8b8b8;
-    --surface-700: #d0d0d0;
-    --surface-800: #e7e7e7;
-    --surface-900: #ffffff;
-    --gray-50: #e7e7e7;
-    --gray-100: #d0d0d0;
-    --gray-200: #b8b8b8;
-    --gray-300: #a0a0a0;
-    --gray-400: #898989;
-    --gray-500: #717171;
-    --gray-600: #595959;
-    --gray-700: #414141;
-    --gray-800: #2a2a2a;
-    --gray-900: #121212;
-    --content-padding: 1rem;
-    --inline-spacing: 0.5rem;
-    --border-radius: 3px;
-    --surface-ground: #121212;
-    --surface-section: #121212;
-    --surface-card: #1e1e1e;
-    --surface-overlay: #1e1e1e;
-    --surface-border: #383838;
-    --surface-hover: rgba(255, 255, 255, .03);
-    --maskbg: rgba(0, 0, 0, 0.4);
-    --focus-ring: 0 0 0 1px #cf95d9;
+  --surface-a: #1e1e1e;
+  --surface-b: #121212;
+  --surface-c: rgba(255, 255, 255, 0.03);
+  --surface-d: #383838;
+  --surface-e: #1e1e1e;
+  --surface-f: #1e1e1e;
+  --text-color: rgba(255, 255, 255, 0.87);
+  --text-color-secondary: rgba(255, 255, 255, 0.6);
+  --primary-color: var(--primaryColor);
+  --primary-color-text: #ffffff;
+  --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica,
+    Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --surface-0: #121212;
+  --surface-50: #2a2a2a;
+  --surface-100: #414141;
+  --surface-200: #595959;
+  --surface-300: #717171;
+  --surface-400: #898989;
+  --surface-500: #a0a0a0;
+  --surface-600: #b8b8b8;
+  --surface-700: #d0d0d0;
+  --surface-800: #e7e7e7;
+  --surface-900: #ffffff;
+  --gray-50: #e7e7e7;
+  --gray-100: #d0d0d0;
+  --gray-200: #b8b8b8;
+  --gray-300: #a0a0a0;
+  --gray-400: #898989;
+  --gray-500: #717171;
+  --gray-600: #595959;
+  --gray-700: #414141;
+  --gray-800: #2a2a2a;
+  --gray-900: #121212;
+  --content-padding: 1rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 3px;
+  --surface-ground: #121212;
+  --surface-section: #121212;
+  --surface-card: #1e1e1e;
+  --surface-overlay: #1e1e1e;
+  --surface-border: #383838;
+  --surface-hover: rgba(255, 255, 255, 0.03);
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --focus-ring: 0 0 0 1px #cf95d9;
 }
 
 :root[theme="anywhere-default-dark-violet"],
 :root[data-theme="anywhere-default-dark-violet"] {
-    --blue-50: #f4fafe;
-    --blue-100: #cae6fc;
-    --blue-200: #a0d2fa;
-    --blue-300: #75bef8;
-    --blue-400: #4baaf5;
-    --blue-500: #2196f3;
-    --blue-600: #1c80cf;
-    --blue-700: #1769aa;
-    --blue-800: #125386;
-    --blue-900: #0d3c61;
-    --green-50: #f6fbf6;
-    --green-100: #d4ecd5;
-    --green-200: #b2ddb4;
-    --green-300: #90cd93;
-    --green-400: #6ebe71;
-    --green-500: #4caf50;
-    --green-600: #419544;
-    --green-700: #357b38;
-    --green-800: #2a602c;
-    --green-900: #1e4620;
-    --yellow-50: #fffcf5;
-    --yellow-100: #fef0cd;
-    --yellow-200: #fde4a5;
-    --yellow-300: #fdd87d;
-    --yellow-400: #fccc55;
-    --yellow-500: #fbc02d;
-    --yellow-600: #d5a326;
-    --yellow-700: #b08620;
-    --yellow-800: #8a6a19;
-    --yellow-900: #644d12;
-    --cyan-50: #f2fcfd;
-    --cyan-100: #c2eff5;
-    --cyan-200: #91e2ed;
-    --cyan-300: #61d5e4;
-    --cyan-400: #30c9dc;
-    --cyan-500: #00bcd4;
-    --cyan-600: #00a0b4;
-    --cyan-700: #008494;
-    --cyan-800: #006775;
-    --cyan-900: #004b55;
-    --pink-50: #fef4f7;
-    --pink-100: #fac9da;
-    --pink-200: #f69ebc;
-    --pink-300: #f1749e;
-    --pink-400: #ed4981;
-    --pink-500: #e91e63;
-    --pink-600: #c61a54;
-    --pink-700: #a31545;
-    --pink-800: #801136;
-    --pink-900: #5d0c28;
-    --indigo-50: #f5f6fb;
-    --indigo-100: #d1d5ed;
-    --indigo-200: #acb4df;
-    --indigo-300: #8893d1;
-    --indigo-400: #6372c3;
-    --indigo-500: #3f51b5;
-    --indigo-600: #36459a;
-    --indigo-700: #2c397f;
-    --indigo-800: #232d64;
-    --indigo-900: #192048;
-    --teal-50: #f2faf9;
-    --teal-100: #c2e6e2;
-    --teal-200: #91d2cc;
-    --teal-300: #61beb5;
-    --teal-400: #30aa9f;
-    --teal-500: #009688;
-    --teal-600: #008074;
-    --teal-700: #00695f;
-    --teal-800: #00534b;
-    --teal-900: #003c36;
-    --orange-50: #fff8f2;
-    --orange-100: #fde0c2;
-    --orange-200: #fbc791;
-    --orange-300: #f9ae61;
-    --orange-400: #f79530;
-    --orange-500: #f57c00;
-    --orange-600: #d06900;
-    --orange-700: #ac5700;
-    --orange-800: #874400;
-    --orange-900: #623200;
-    --bluegray-50: #f7f9f9;
-    --bluegray-100: #d9e0e3;
-    --bluegray-200: #bbc7cd;
-    --bluegray-300: #9caeb7;
-    --bluegray-400: #7e96a1;
-    --bluegray-500: #607d8b;
-    --bluegray-600: #526a76;
-    --bluegray-700: #435861;
-    --bluegray-800: #35454c;
-    --bluegray-900: #263238;
-    --purple-50: #faf4fb;
-    --purple-100: #e7cbec;
-    --purple-200: #d4a2dd;
-    --purple-300: #c279ce;
-    --purple-400: #af50bf;
-    --purple-500: #9c27b0;
-    --purple-600: #852196;
-    --purple-700: #6d1b7b;
-    --purple-800: #561561;
-    --purple-900: #3e1046;
+  --blue-50: #f4fafe;
+  --blue-100: #cae6fc;
+  --blue-200: #a0d2fa;
+  --blue-300: #75bef8;
+  --blue-400: #4baaf5;
+  --blue-500: #2196f3;
+  --blue-600: #1c80cf;
+  --blue-700: #1769aa;
+  --blue-800: #125386;
+  --blue-900: #0d3c61;
+  --green-50: #f6fbf6;
+  --green-100: #d4ecd5;
+  --green-200: #b2ddb4;
+  --green-300: #90cd93;
+  --green-400: #6ebe71;
+  --green-500: #4caf50;
+  --green-600: #419544;
+  --green-700: #357b38;
+  --green-800: #2a602c;
+  --green-900: #1e4620;
+  --yellow-50: #fffcf5;
+  --yellow-100: #fef0cd;
+  --yellow-200: #fde4a5;
+  --yellow-300: #fdd87d;
+  --yellow-400: #fccc55;
+  --yellow-500: #fbc02d;
+  --yellow-600: #d5a326;
+  --yellow-700: #b08620;
+  --yellow-800: #8a6a19;
+  --yellow-900: #644d12;
+  --cyan-50: #f2fcfd;
+  --cyan-100: #c2eff5;
+  --cyan-200: #91e2ed;
+  --cyan-300: #61d5e4;
+  --cyan-400: #30c9dc;
+  --cyan-500: #00bcd4;
+  --cyan-600: #00a0b4;
+  --cyan-700: #008494;
+  --cyan-800: #006775;
+  --cyan-900: #004b55;
+  --pink-50: #fef4f7;
+  --pink-100: #fac9da;
+  --pink-200: #f69ebc;
+  --pink-300: #f1749e;
+  --pink-400: #ed4981;
+  --pink-500: #e91e63;
+  --pink-600: #c61a54;
+  --pink-700: #a31545;
+  --pink-800: #801136;
+  --pink-900: #5d0c28;
+  --indigo-50: #f5f6fb;
+  --indigo-100: #d1d5ed;
+  --indigo-200: #acb4df;
+  --indigo-300: #8893d1;
+  --indigo-400: #6372c3;
+  --indigo-500: #3f51b5;
+  --indigo-600: #36459a;
+  --indigo-700: #2c397f;
+  --indigo-800: #232d64;
+  --indigo-900: #192048;
+  --teal-50: #f2faf9;
+  --teal-100: #c2e6e2;
+  --teal-200: #91d2cc;
+  --teal-300: #61beb5;
+  --teal-400: #30aa9f;
+  --teal-500: #009688;
+  --teal-600: #008074;
+  --teal-700: #00695f;
+  --teal-800: #00534b;
+  --teal-900: #003c36;
+  --orange-50: #fff8f2;
+  --orange-100: #fde0c2;
+  --orange-200: #fbc791;
+  --orange-300: #f9ae61;
+  --orange-400: #f79530;
+  --orange-500: #f57c00;
+  --orange-600: #d06900;
+  --orange-700: #ac5700;
+  --orange-800: #874400;
+  --orange-900: #623200;
+  --bluegray-50: #f7f9f9;
+  --bluegray-100: #d9e0e3;
+  --bluegray-200: #bbc7cd;
+  --bluegray-300: #9caeb7;
+  --bluegray-400: #7e96a1;
+  --bluegray-500: #607d8b;
+  --bluegray-600: #526a76;
+  --bluegray-700: #435861;
+  --bluegray-800: #35454c;
+  --bluegray-900: #263238;
+  --purple-50: #faf4fb;
+  --purple-100: #e7cbec;
+  --purple-200: #d4a2dd;
+  --purple-300: #c279ce;
+  --purple-400: #af50bf;
+  --purple-500: #9c27b0;
+  --purple-600: #852196;
+  --purple-700: #6d1b7b;
+  --purple-800: #561561;
+  --purple-900: #3e1046;
 }
 
-
 :root[theme="anywhere-default-dark-violet"],
 :root[data-theme="anywhere-default-dark-violet"] {
-    //main color scheme
-    --primaryColor: #c75aae;
-    --primaryColorRGBValue: 199, 90, 174;
-    --primaryDarkColor: #BA489D;
-    --primaryDarkColorRGBValue: 114, 0, 204;
-    --primaryDarkerColor: #A62E84;
-    --primaryDarkerColorRGBValue: 85, 0, 153;
-    --primaryTextColor: #ffffff;
-    //hsl colors
-    --primary-color-h: 314;
-    --primary-color-s: 49%;
-    --primary-color-l: 57%;
-
+  //main color scheme
+  --primaryColor: #c75aae;
+  --primaryColorRGBValue: 199, 90, 174;
+  --primaryDarkColor: #ba489d;
+  --primaryDarkColorRGBValue: 114, 0, 204;
+  --primaryDarkerColor: #a62e84;
+  --primaryDarkerColorRGBValue: 85, 0, 153;
+  --primaryTextColor: #ffffff;
+  //hsl colors
+  --primary-color-h: 314;
+  --primary-color-s: 49%;
+  --primary-color-l: 57%;
 
-    --textColor: rgba(255, 255, 255, 0.87);
-    --textSecondaryColor: rgba(255, 255, 255, 0.6);
+  --textColor: rgba(255, 255, 255, 0.87);
+  --textSecondaryColor: rgba(255, 255, 255, 0.6);
 
-    --focusOutlineColor: hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) + 10%));
-    --focusShadow: 0 0 0 0.2rem var(--focusOutlineColor);
+  --focusOutlineColor: hsl(
+    var(--primary-color-h),
+    var(--primary-color-s),
+    calc(var(--primary-color-l) + 10%)
+  );
+  --focusShadow: 0 0 0 0.2rem var(--focusOutlineColor);
 
-    --inputBgColor: #121212;
-    --inputBorder: 1px solid #383838;
-    --inputHoverBorderColor: var(--primaryDarkColor);
-    --inputPlaceholderTextColor: var(--textSecondaryColor);
+  --inputBgColor: #121212;
+  --inputBorder: 1px solid #383838;
+  --inputHoverBorderColor: var(--primaryDarkColor);
+  --inputPlaceholderTextColor: var(--textSecondaryColor);
 
-    --inputListBg: #1e1e1e;
-    --inputListItemHoverBgColor: rgba(255, 255, 255, 0.04);
-    --inputListItemHoverTextColor: var(--textColor);
+  --inputListBg: #1e1e1e;
+  --inputListItemHoverBgColor: rgba(255, 255, 255, 0.04);
+  --inputListItemHoverTextColor: var(--textColor);
 
-    --inputSwitchSliderOffBg: #383838;
-    --inputSwitchSliderOffHoverBg: rgba(255, 255, 255, 0.03);
-    --inputSwitchHandleOffBg: var(--textSecondaryColor);
-    --inputSwitchHandleOnBg: var(--textColor);
+  --inputSwitchSliderOffBg: #383838;
+  --inputSwitchSliderOffHoverBg: rgba(255, 255, 255, 0.03);
+  --inputSwitchHandleOffBg: var(--textSecondaryColor);
+  --inputSwitchHandleOnBg: var(--textColor);
 
+  --checkboxBorder: 2px solid #383838;
 
-    --checkboxBorder: 2px solid #383838;
+  --panelContentBg: #1e1e1e;
 
-    --panelContentBg: #1e1e1e;
+  --tabviewNavBg: transparent;
+  --tabviewNavBorder: 2px solid #383838;
+  --tabviewHeaderBg: #1e1e1e;
+  // --tabviewHeaderBorder: solid #383838;
+  --tabviewHeaderBorderColor: transparent transparent #383838 transparent;
+  --tabviewHeaderHoverBg: #1e1e1e;
+  --tabviewHeaderActiveBg: #1e1e1e;
+  --tabviewHeaderHoverBorderColor: var(--primaryColor);
+  --tabviewHeaderTextHoverColor: var(--textColor);
 
-    --tabviewNavBg: transparent;
-    --tabviewNavBorder: 2px solid #383838;
-    --tabviewHeaderBg: #1e1e1e;
-    // --tabviewHeaderBorder: solid #383838;
-    --tabviewHeaderBorderColor: transparent transparent #383838 transparent;
-    --tabviewHeaderHoverBg: #1e1e1e;
-    --tabviewHeaderActiveBg: #1e1e1e;
-    --tabviewHeaderHoverBorderColor: var(--primaryColor);
-    --tabviewHeaderTextHoverColor: var(--textColor);
+  // buttons
+  --plainButtonTextColor: var(--textSecondaryColor);
+  --plainButtonHoverBgColor: rgba(255, 255, 255, 0.03);
+  --plainButtonActiveBgColor: rgba(255, 255, 255, 0.16);
+  --secondaryButtonBg: #78909c;
+  --secondaryButtonTextColor: #ffffff;
+  --secondaryButtonBorder: 1px solid #78909c;
+  --secondaryButtonHoverBg: #657d8a;
+  --secondaryButtonTextHoverColor: #ffffff;
+  --secondaryButtonHoverBorderColor: #657d8a;
+  --secondaryButtonActiveBg: #48616e;
+  --secondaryButtonTextActiveColor: #ffffff;
+  --secondaryButtonActiveBorderColor: #48616e;
+  --secondaryButtonFocusShadow: 0 0 0 0.2rem hsl(200, 15%, calc(54% + 10%));
+  --successButtonBg: #c5e1a5;
+  --successButtonTextColor: #121212;
+  --successButtonBorder: 1px solid #c5e1a5;
+  --successButtonHoverBg: #b8d993;
+  --successButtonTextHoverColor: #121212;
+  --successButtonHoverBorderColor: #b8d993;
+  --successButtonActiveBg: #a3cd79;
+  --successButtonTextActiveColor: #121212;
+  --successButtonActiveBorderColor: #a3cd79;
+  --successButtonFocusShadow: 0 0 0 0.2rem hsl(88, 50%, calc(76% + 10%));
+  --infoButtonBg: #81d4fa;
+  --infoButtonTextColor: #121212;
+  --infoButtonBorder: 1px solid #81d4fa;
+  --infoButtonHoverBg: #6ec9f9;
+  --infoButtonTextHoverColor: #121212;
+  --infoButtonHoverBorderColor: #6ec9f9;
+  --infoButtonActiveBg: #51b9f6;
+  --infoButtonTextActiveColor: #121212;
+  --infoButtonActiveBorderColor: #51b9f6;
+  --infoButtonFocusShadow: 0 0 0 0.2rem hsl(199, 92%, calc(74% + 10%));
+  --warningButtonBg: #ffe082;
+  --warningButtonTextColor: #121212;
+  --warningButtonBorder: 1px solid #ffe082;
+  --warningButtonHoverBg: #ffd86f;
+  --warningButtonTextHoverColor: #121212;
+  --warningButtonHoverBorderColor: #ffd86f;
+  --warningButtonActiveBg: #ffcb52;
+  --warningButtonTextActiveColor: #121212;
+  --warningButtonActiveBorderColor: #ffcb52;
+  --warningButtonFocusShadow: 0 0 0 0.2rem hsl(45, 100%, calc(51% + 30%));
+  --helpButtonBg: #ce93d8;
+  --helpButtonTextColor: #121212;
+  --helpButtonBorder: 1px solid #ce93d8;
+  --helpButtonHoverBg: #c280ce;
+  --helpButtonTextHoverColor: #121212;
+  --helpButtonHoverBorderColor: #c280ce;
+  --helpButtonActiveBg: #b064bf;
+  --helpButtonTextActiveColor: #121212;
+  --helpButtonActiveBorderColor: #b064bf;
+  --helpButtonFocusShadow: 0 0 0 0.2rem hsl(291, 64%, calc(42% + 30%));
+  --dangerButtonBg: #f48fb1;
+  --dangerButtonTextColor: #121212;
+  --dangerButtonBorder: 1px solid #f48fb1;
+  --dangerButtonHoverBg: #f17ca1;
+  --dangerButtonTextHoverColor: #121212;
+  --dangerButtonHoverBorderColor: #f17ca1;
+  --dangerButtonActiveBg: #ec6088;
+  --dangerButtonTextActiveColor: #121212;
+  --dangerButtonActiveBorderColor: #ec6088;
+  --dangerButtonFocusShadow: 0 0 0 0.2rem hsl(4, 90%, calc(58% + 30%));
 
-
-    // buttons
-    --plainButtonTextColor: var(--textSecondaryColor);
-    --plainButtonHoverBgColor: rgba(255, 255, 255, 0.03);
-    --plainButtonActiveBgColor: rgba(255, 255, 255, 0.16);
-    --secondaryButtonBg: #78909C;
-    --secondaryButtonTextColor: #ffffff;
-    --secondaryButtonBorder: 1px solid #78909C;
-    --secondaryButtonHoverBg: #657D8A;
-    --secondaryButtonTextHoverColor: #ffffff;
-    --secondaryButtonHoverBorderColor: #657D8A;
-    --secondaryButtonActiveBg: #48616E;
-    --secondaryButtonTextActiveColor: #ffffff;
-    --secondaryButtonActiveBorderColor: #48616E;
-    --secondaryButtonFocusShadow: 0 0 0 0.2rem hsl(200, 15%, calc(54% + 10%));
-    --successButtonBg: #C5E1A5;
-    --successButtonTextColor: #121212;
-    --successButtonBorder: 1px solid #C5E1A5;
-    --successButtonHoverBg: #B8D993;
-    --successButtonTextHoverColor: #121212;
-    --successButtonHoverBorderColor: #B8D993;
-    --successButtonActiveBg: #A3CD79;
-    --successButtonTextActiveColor: #121212;
-    --successButtonActiveBorderColor: #A3CD79;
-    --successButtonFocusShadow: 0 0 0 0.2rem hsl(88, 50%, calc(76% + 10%));
-    --infoButtonBg: #81D4FA;
-    --infoButtonTextColor: #121212;
-    --infoButtonBorder: 1px solid #81D4FA;
-    --infoButtonHoverBg: #6EC9F9;
-    --infoButtonTextHoverColor: #121212;
-    --infoButtonHoverBorderColor: #6EC9F9;
-    --infoButtonActiveBg: #51B9F6;
-    --infoButtonTextActiveColor: #121212;
-    --infoButtonActiveBorderColor: #51B9F6;
-    --infoButtonFocusShadow: 0 0 0 0.2rem hsl(199, 92%, calc(74% + 10%));
-    --warningButtonBg: #FFE082;
-    --warningButtonTextColor: #121212;
-    --warningButtonBorder: 1px solid #FFE082;
-    --warningButtonHoverBg: #FFD86F;
-    --warningButtonTextHoverColor: #121212;
-    --warningButtonHoverBorderColor: #FFD86F;
-    --warningButtonActiveBg: #FFCB52;
-    --warningButtonTextActiveColor: #121212;
-    --warningButtonActiveBorderColor: #FFCB52;
-    --warningButtonFocusShadow: 0 0 0 0.2rem hsl(45, 100%, calc(51% + 30%));
-    --helpButtonBg: #CE93D8;
-    --helpButtonTextColor: #121212;
-    --helpButtonBorder: 1px solid #CE93D8;
-    --helpButtonHoverBg: #C280CE;
-    --helpButtonTextHoverColor: #121212;
-    --helpButtonHoverBorderColor: #C280CE;
-    --helpButtonActiveBg: #B064BF;
-    --helpButtonTextActiveColor: #121212;
-    --helpButtonActiveBorderColor: #B064BF;
-    --helpButtonFocusShadow: 0 0 0 0.2rem hsl(291, 64%, calc(42% + 30%));
-    --dangerButtonBg: #F48FB1;
-    --dangerButtonTextColor: #121212;
-    --dangerButtonBorder: 1px solid #F48FB1;
-    --dangerButtonHoverBg: #F17CA1;
-    --dangerButtonTextHoverColor: #121212;
-    --dangerButtonHoverBorderColor: #F17CA1;
-    --dangerButtonActiveBg: #EC6088;
-    --dangerButtonTextActiveColor: #121212;
-    --dangerButtonActiveBorderColor: #EC6088;
-    --dangerButtonFocusShadow: 0 0 0 0.2rem hsl(4, 90%, calc(58% + 30%));
-}
\ No newline at end of file
+  --radiobuttonBorder: 2px solid #383838;
+}
diff --git a/packages/core/src/themes/anywhere.theme.default.scss b/packages/core/src/themes/anywhere.theme.default.scss
index 1840e7f..41dbdfa 100644
--- a/packages/core/src/themes/anywhere.theme.default.scss
+++ b/packages/core/src/themes/anywhere.theme.default.scss
@@ -1,409 +1,426 @@
 :root {
-    --surface-a: #ffffff;
-    --surface-b: #f8f9fa;
-    --surface-c: #e9ecef;
-    --surface-d: #dee2e6;
-    --surface-e: #ffffff;
-    --surface-f: #ffffff;
-    --text-color: #212529;
-    --text-color-secondary: #6c757d;
-    --primary-color: var(--primaryColor);
-    --primary-color-text: #ffffff;
-    --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica,
-        Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
-    --surface-0: #ffffff;
-    --surface-50: #f9fafb;
-    --surface-100: #f8f9fa;
-    --surface-200: #e9ecef;
-    --surface-300: #dee2e6;
-    --surface-400: #ced4da;
-    --surface-500: #adb5bd;
-    --surface-600: #6c757d;
-    --surface-700: #495057;
-    --surface-800: #343a40;
-    --surface-900: #212529;
-    --content-padding: 1.25rem;
-    --inline-spacing: 0.5rem;
-    --cog-icon: url('https://api.iconify.design/fa-solid/cog.svg?color=%23ffffff&height=26');
-    --times-icon: url('https://api.iconify.design/fa-solid/times.svg?color=%23ffffff&height=20');
+  --surface-a: #ffffff;
+  --surface-b: #f8f9fa;
+  --surface-c: #e9ecef;
+  --surface-d: #dee2e6;
+  --surface-e: #ffffff;
+  --surface-f: #ffffff;
+  --text-color: #212529;
+  --text-color-secondary: #6c757d;
+  --primary-color: var(--primaryColor);
+  --primary-color-text: #ffffff;
+  --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica,
+    Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --surface-0: #ffffff;
+  --surface-50: #f9fafb;
+  --surface-100: #f8f9fa;
+  --surface-200: #e9ecef;
+  --surface-300: #dee2e6;
+  --surface-400: #ced4da;
+  --surface-500: #adb5bd;
+  --surface-600: #6c757d;
+  --surface-700: #495057;
+  --surface-800: #343a40;
+  --surface-900: #212529;
+  --content-padding: 1.25rem;
+  --inline-spacing: 0.5rem;
+  --cog-icon: url("https://api.iconify.design/fa-solid/cog.svg?color=%23ffffff&height=26");
+  --times-icon: url("https://api.iconify.design/fa-solid/times.svg?color=%23ffffff&height=20");
 }
 
 :root {
-    --blue-50: #f3f8ff;
-    --blue-100: #c5dcff;
-    --blue-200: #97c1fe;
-    --blue-300: #69a5fe;
-    --blue-400: #3b8afd;
-    --blue-500: #0d6efd;
-    --blue-600: #0b5ed7;
-    --blue-700: #094db1;
-    --blue-800: #073d8b;
-    --blue-900: #052c65;
-    --green-50: #f4f9f6;
-    --green-100: #c8e2d6;
-    --green-200: #9ccbb5;
-    --green-300: #70b595;
-    --green-400: #459e74;
-    --green-500: #198754;
-    --green-600: #157347;
-    --green-700: #125f3b;
-    --green-800: #0e4a2e;
-    --green-900: #0a3622;
-    --yellow-50: #fffcf3;
-    --yellow-100: #fff0c3;
-    --yellow-200: #ffe494;
-    --yellow-300: #ffd965;
-    --yellow-400: #ffcd36;
-    --yellow-500: #ffc107;
-    --yellow-600: #d9a406;
-    --yellow-700: #b38705;
-    --yellow-800: #8c6a04;
-    --yellow-900: #664d03;
-    --cyan-50: #f3fcfe;
-    --cyan-100: #c5f2fb;
-    --cyan-200: #97e8f9;
-    --cyan-300: #69def6;
-    --cyan-400: #3bd4f3;
-    --cyan-500: #0dcaf0;
-    --cyan-600: #0baccc;
-    --cyan-700: #098da8;
-    --cyan-800: #076f84;
-    --cyan-900: #055160;
-    --pink-50: #fdf5f9;
-    --pink-100: #f5cee1;
-    --pink-200: #eda7ca;
-    --pink-300: #e681b3;
-    --pink-400: #de5a9b;
-    --pink-500: #d63384;
-    --pink-600: #b62b70;
-    --pink-700: #96245c;
-    --pink-800: #761c49;
-    --pink-900: #561435;
-    --indigo-50: #f7f3fe;
-    --indigo-100: #dac6fc;
-    --indigo-200: #bd98f9;
-    --indigo-300: #a06bf7;
-    --indigo-400: #833df4;
-    --indigo-500: #6610f2;
-    --indigo-600: #570ece;
-    --indigo-700: #470ba9;
-    --indigo-800: #380985;
-    --indigo-900: #290661;
-    --teal-50: #f4fcfa;
-    --teal-100: #c9f2e6;
-    --teal-200: #9fe8d2;
-    --teal-300: #75debf;
-    --teal-400: #4ad3ab;
-    --teal-500: #20c997;
-    --teal-600: #1bab80;
-    --teal-700: #168d6a;
-    --teal-800: #126f53;
-    --teal-900: #0d503c;
-    --orange-50: #fff9f3;
-    --orange-100: #ffe0c7;
-    --orange-200: #fec89a;
-    --orange-300: #feaf6d;
-    --orange-400: #fd9741;
-    --orange-500: #fd7e14;
-    --orange-600: #d76b11;
-    --orange-700: #b1580e;
-    --orange-800: #8b450b;
-    --orange-900: #653208;
-    --bluegray-50: #f8f9fb;
-    --bluegray-100: #e0e4ea;
-    --bluegray-200: #c7ced9;
-    --bluegray-300: #aeb9c8;
-    --bluegray-400: #95a3b8;
-    --bluegray-500: #7c8ea7;
-    --bluegray-600: #69798e;
-    --bluegray-700: #576375;
-    --bluegray-800: #444e5c;
-    --bluegray-900: #323943;
-    --purple-50: #f8f6fc;
-    --purple-100: #dcd2f0;
-    --purple-200: #c1aee4;
-    --purple-300: #a68ad9;
-    --purple-400: #8a66cd;
-    --purple-500: #6f42c1;
-    --purple-600: #5e38a4;
-    --purple-700: #4e2e87;
-    --purple-800: #3d246a;
-    --purple-900: #2c1a4d;
+  --blue-50: #f3f8ff;
+  --blue-100: #c5dcff;
+  --blue-200: #97c1fe;
+  --blue-300: #69a5fe;
+  --blue-400: #3b8afd;
+  --blue-500: #0d6efd;
+  --blue-600: #0b5ed7;
+  --blue-700: #094db1;
+  --blue-800: #073d8b;
+  --blue-900: #052c65;
+  --green-50: #f4f9f6;
+  --green-100: #c8e2d6;
+  --green-200: #9ccbb5;
+  --green-300: #70b595;
+  --green-400: #459e74;
+  --green-500: #198754;
+  --green-600: #157347;
+  --green-700: #125f3b;
+  --green-800: #0e4a2e;
+  --green-900: #0a3622;
+  --yellow-50: #fffcf3;
+  --yellow-100: #fff0c3;
+  --yellow-200: #ffe494;
+  --yellow-300: #ffd965;
+  --yellow-400: #ffcd36;
+  --yellow-500: #ffc107;
+  --yellow-600: #d9a406;
+  --yellow-700: #b38705;
+  --yellow-800: #8c6a04;
+  --yellow-900: #664d03;
+  --cyan-50: #f3fcfe;
+  --cyan-100: #c5f2fb;
+  --cyan-200: #97e8f9;
+  --cyan-300: #69def6;
+  --cyan-400: #3bd4f3;
+  --cyan-500: #0dcaf0;
+  --cyan-600: #0baccc;
+  --cyan-700: #098da8;
+  --cyan-800: #076f84;
+  --cyan-900: #055160;
+  --pink-50: #fdf5f9;
+  --pink-100: #f5cee1;
+  --pink-200: #eda7ca;
+  --pink-300: #e681b3;
+  --pink-400: #de5a9b;
+  --pink-500: #d63384;
+  --pink-600: #b62b70;
+  --pink-700: #96245c;
+  --pink-800: #761c49;
+  --pink-900: #561435;
+  --indigo-50: #f7f3fe;
+  --indigo-100: #dac6fc;
+  --indigo-200: #bd98f9;
+  --indigo-300: #a06bf7;
+  --indigo-400: #833df4;
+  --indigo-500: #6610f2;
+  --indigo-600: #570ece;
+  --indigo-700: #470ba9;
+  --indigo-800: #380985;
+  --indigo-900: #290661;
+  --teal-50: #f4fcfa;
+  --teal-100: #c9f2e6;
+  --teal-200: #9fe8d2;
+  --teal-300: #75debf;
+  --teal-400: #4ad3ab;
+  --teal-500: #20c997;
+  --teal-600: #1bab80;
+  --teal-700: #168d6a;
+  --teal-800: #126f53;
+  --teal-900: #0d503c;
+  --orange-50: #fff9f3;
+  --orange-100: #ffe0c7;
+  --orange-200: #fec89a;
+  --orange-300: #feaf6d;
+  --orange-400: #fd9741;
+  --orange-500: #fd7e14;
+  --orange-600: #d76b11;
+  --orange-700: #b1580e;
+  --orange-800: #8b450b;
+  --orange-900: #653208;
+  --bluegray-50: #f8f9fb;
+  --bluegray-100: #e0e4ea;
+  --bluegray-200: #c7ced9;
+  --bluegray-300: #aeb9c8;
+  --bluegray-400: #95a3b8;
+  --bluegray-500: #7c8ea7;
+  --bluegray-600: #69798e;
+  --bluegray-700: #576375;
+  --bluegray-800: #444e5c;
+  --bluegray-900: #323943;
+  --purple-50: #f8f6fc;
+  --purple-100: #dcd2f0;
+  --purple-200: #c1aee4;
+  --purple-300: #a68ad9;
+  --purple-400: #8a66cd;
+  --purple-500: #6f42c1;
+  --purple-600: #5e38a4;
+  --purple-700: #4e2e87;
+  --purple-800: #3d246a;
+  --purple-900: #2c1a4d;
 }
 
-
 :root {
-    //main color scheme
-    --primaryColor: #8f00ff;
-    --primaryColorRGBValue: 143, 0, 255;
-    --primaryDarkColor: #7200cc;
-    --primaryDarkColorRGBValue: 114, 0, 204;
-    --primaryDarkerColor: #550099;
-    --primaryDarkerColorRGBValue: 85, 0, 153;
-    --primaryTextColor: #ffffff;
-    //hsl colors
-    --primary-color-h: 273.6;
-    --primary-color-s: 100%;
-    --primary-color-l: 50%;
+  //main color scheme
+  --primaryColor: #8f00ff;
+  --primaryColorRGBValue: 143, 0, 255;
+  --primaryDarkColor: #7200cc;
+  --primaryDarkColorRGBValue: 114, 0, 204;
+  --primaryDarkerColor: #550099;
+  --primaryDarkerColorRGBValue: 85, 0, 153;
+  --primaryTextColor: #ffffff;
+  //hsl colors
+  --primary-color-h: 273.6;
+  --primary-color-s: 100%;
+  --primary-color-l: 50%;
 
-    //Global
-    --fontFamily: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica,
-        Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
-    --fontSize: 1rem;
-    --fontWeight: normal;
-    --textColor: #495057;
-    --textSecondaryColor: #6c757d;
-    --borderRadius: 3px;
-    --transitionDuration: .2s;
-    --anyIconFontSize: 1rem;
-    --disabledOpacity: .6;
-    --errorColor: #e4677e;
-    --formElementTransition: background-color var(--transitionDuration), color var(--transitionDuration), border-color var(--transitionDuration), box-shadow var(--transitionDuration);
+  //Global
+  --fontFamily: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica,
+    Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --fontSize: 1rem;
+  --fontWeight: normal;
+  --textColor: #495057;
+  --textSecondaryColor: #6c757d;
+  --borderRadius: 3px;
+  --transitionDuration: 0.2s;
+  --anyIconFontSize: 1rem;
+  --disabledOpacity: 0.6;
+  --errorColor: #e4677e;
+  --formElementTransition: background-color var(--transitionDuration),
+    color var(--transitionDuration), border-color var(--transitionDuration),
+    box-shadow var(--transitionDuration);
 
-    //anchors
-    --linkColor: var(--primaryColor);
-    --linkHoverColor: var(--primaryDarkColor);
-    --linkActiveColor: var(--primaryDarkerColor);
+  //anchors
+  --linkColor: var(--primaryColor);
+  --linkHoverColor: var(--primaryDarkColor);
+  --linkActiveColor: var(--primaryDarkerColor);
 
-    //highlight
-    --highlightBgColor: var(--primaryColor);
-    --highlightColorText: var(--primaryTextColor);
+  //highlight
+  --highlightBgColor: var(--primaryColor);
+  --highlightColorText: var(--primaryTextColor);
 
-    //focus
-    --focusOutlineColor: hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) + 30%));
-    --focusOutline: 0 none;
-    --focusOutlineOffset: 0;
-    --focusShadow: 0 0 0 0.2rem var(--focusOutlineColor);
+  //focus
+  --focusOutlineColor: hsl(
+    var(--primary-color-h),
+    var(--primary-color-s),
+    calc(var(--primary-color-l) + 30%)
+  );
+  --focusOutline: 0 none;
+  --focusOutlineOffset: 0;
+  --focusShadow: 0 0 0 0.2rem var(--focusOutlineColor);
 
+  //input field (e.g. inputtext, spinner, inputmask)
+  --inputPadding: 0.429em;
+  --inputBgColor: #ffffff;
+  --inputBorder: 1px solid #ced4da;
+  --inputTextColor: var(--textColor);
+  --inputHoverBorderColor: var(--primaryColor);
+  --inputFocusBorderColor: var(--primaryColor);
+  --inputErrorBorder: 1px solid #a80000;
+  --inputPlaceholderTextColor: #6c757d;
+  --inputTransition: border-color var(--transitionDuration),
+    box-shadow var(--transitionDuration);
+  --inputFilledBg: #f8f9fa;
+  --inputFilledFocusBg: #ffffff;
+  --inputFilledHoverBg: #f8f9fa;
+  --inputIconColor: var(--textColor);
+  --inputErrorBorderColor: #ced4da #ced4da #ced4da var(--errorColor);
 
-    //input field (e.g. inputtext, spinner, inputmask)
-    --inputPadding: 0.429em;
-    --inputBgColor: #ffffff;
-    --inputBorder: 1px solid #ced4da;
-    --inputTextColor: var(--textColor);
-    --inputHoverBorderColor: var(--primaryColor);
-    --inputFocusBorderColor: var(--primaryColor);
-    --inputErrorBorder: 1px solid #a80000;
-    --inputPlaceholderTextColor: #6c757d;
-    --inputTransition: border-color var(--transitionDuration),
-        box-shadow var(--transitionDuration);
-    --inputFilledBg: #f8f9fa;
-    --inputFilledFocusBg: #ffffff;
-    --inputFilledHoverBg: #f8f9fa;
-    --inputIconColor: var(--textColor);
-    --inputErrorBorderColor: #ced4da #ced4da #ced4da var(--errorColor);
+  //input lists (e.g. dropdown, autocomplete, multiselect, orderlist)
+  --inputListMinWidth: 12.5em;
+  --inputListBg: #ffffff;
+  --inputListPadding: 0.5rem 0;
+  --inputListItemPadding: 0.5rem 1rem;
 
-    //input lists (e.g. dropdown, autocomplete, multiselect, orderlist)
-    --inputListMinWidth: 12.5em;
-    --inputListBg: #ffffff;
-    --inputListPadding: 0.5rem 0;
-    --inputListItemPadding: .5rem 1rem;
+  --inputListItemBgColor: transparent;
+  --inputListItemTextColor: #333333;
+  --inputListItemHoverBgColor: #e9ecef;
+  --inputListItemHoverTextColor: #070606;
+  --inputListItemHighlightBgColor: var(--highlightBgColor);
+  --inputListItemHighlightTextColor: var(--highlightColorText);
+  --inputListItemBorder: 0 none;
+  --inputListItemMargin: 0;
+  --inputListItemFocusShadow: inset var(--focusShadow);
+  --inputListItemTransition: background-color var(--transitionDuration),
+    box-shadow var(--transitionDuration);
+  --inputListItemDividerColor: #d8dae2;
+  --inputListHeaderPaddingTop: 0.429em;
+  --inputListHeaderPaddingLeft: 0.857em;
+  --inputListHeaderPaddingRight: 0.857em;
+  --inputListHeaderPaddingBottom: 0.429em;
+  --inputListHeaderMargin: 0;
+  --inputListHeaderBgColor: #ffffff;
+  --inputListHeaderTextColor: var(--textColor);
+  --inputListHeaderBorder: 1px solid #eaeaea;
+  --inputListHeaderSearchIconColor: var(--primaryColor);
+  --inputListHeaderCloseIconColor: var(--textSecondaryColor);
+  --inputListHeaderCloseIconHoverColor: var(--textColor);
+  --inputListHeaderCloseIconTransition: color var(--transitionDuration),
+    background-color var(--transitionDuration),
+    box-shadow var(--transitionDuration);
 
-    --inputListItemBgColor: transparent;
-    --inputListItemTextColor: #333333;
-    --inputListItemHoverBgColor: #e9ecef;
-    --inputListItemHoverTextColor: #070606;
-    --inputListItemHighlightBgColor: var(--highlightBgColor);
-    --inputListItemHighlightTextColor: var(--highlightColorText);
-    --inputListItemBorder: 0 none;
-    --inputListItemMargin: 0;
-    --inputListItemFocusShadow: inset var(--focusShadow);
-    --inputListItemTransition: background-color var(--transitionDuration),
-        box-shadow var(--transitionDuration);
-    --inputListItemDividerColor: #d8dae2;
-    --inputListHeaderPaddingTop: 0.429em;
-    --inputListHeaderPaddingLeft: 0.857em;
-    --inputListHeaderPaddingRight: 0.857em;
-    --inputListHeaderPaddingBottom: 0.429em;
-    --inputListHeaderMargin: 0;
-    --inputListHeaderBgColor: #ffffff;
-    --inputListHeaderTextColor: var(--textColor);
-    --inputListHeaderBorder: 1px solid #eaeaea;
-    --inputListHeaderSearchIconColor: var(--primaryColor);
-    --inputListHeaderCloseIconColor: var(--textSecondaryColor);
-    --inputListHeaderCloseIconHoverColor: var(--textColor);
-    --inputListHeaderCloseIconTransition: color var(--transitionDuration),
-        background-color var(--transitionDuration),
-        box-shadow var(--transitionDuration);
+  //inputs with panels (e.g. password)
+  --inputContentPanelPadding: 12px;
+  --inputContentPanelBgColor: #ffffff;
+  --inputContentPanelTextColor: var(--textColor);
 
-    //inputs with panels (e.g. password)
-    --inputContentPanelPadding: 12px;
-    --inputContentPanelBgColor: #ffffff;
-    --inputContentPanelTextColor: var(--textColor);
+  //static positioned input lists like listbox
+  --inputListBorder: var(--inputBorder);
 
-    //static positioned input lists like listbox
-    --inputListBorder: var(--inputBorder);
+  //inputs with overlays (e.g. autocomplete, dropdown, multiselect)
+  --inputOverlayBorder: 1px solid #c8c8c8;
+  --inputOverlayDownShadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  --inputOverlayUpShadow: 0 0 3px 6px rgba(0, 0, 0, 0.16);
+  --inputOverlayBg: var(--inputListBg);
 
-    //inputs with overlays (e.g. autocomplete, dropdown, multiselect)
-    --inputOverlayBorder: 1px solid #c8c8c8;
-    --inputOverlayDownShadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-    --inputOverlayUpShadow: 0 0 3px 6px rgba(0, 0, 0, 0.16);
-    --inputOverlayBg: var(--inputListBg);
+  //input dropdowns (e.g. multiselect, dropdown)
+  --inputDropdownIconColor: var(--textSecondaryColor);
 
-    //input dropdowns (e.g. multiselect, dropdown)
-    --inputDropdownIconColor: var(--textSecondaryColor);
+  //input switch
+  --inputSwitchWidth: 3rem;
+  --inputSwitchHeight: 1.75rem;
+  --inputSwitchBorderRadius: 30px;
+  --inputSwitchHandleWidth: 1.25rem;
+  --inputSwitchHandleHeight: 1.25rem;
+  --inputSwitchHandleBorderRadius: 50%;
+  --inputSwitchSliderPadding: 0.25rem;
+  --inputSwitchSliderOffBg: #ced4da;
+  --inputSwitchHandleOffBg: #ffffff;
+  --inputSwitchSliderOffHoverBg: #c3cad2;
+  --inputSwitchSliderOnBg: var(--primaryColor);
+  --inputSwitchSliderOnHoverBg: var(--primaryDarkColor);
+  --inputSwitchHandleOnBg: #ffffff;
 
-    //input switch
-    --inputSwitchWidth: 3rem;
-    --inputSwitchHeight: 1.75rem;
-    --inputSwitchBorderRadius: 30px;
-    --inputSwitchHandleWidth: 1.250rem;
-    --inputSwitchHandleHeight: 1.250rem;
-    --inputSwitchHandleBorderRadius: 50%;
-    --inputSwitchSliderPadding: .25rem;
-    --inputSwitchSliderOffBg: #ced4da;
-    --inputSwitchHandleOffBg: #ffffff;
-    --inputSwitchSliderOffHoverBg: #c3cad2;
-    --inputSwitchSliderOnBg: var(--primaryColor);
-    --inputSwitchSliderOnHoverBg: var(--primaryDarkColor);
-    --inputSwitchHandleOnBg: #ffffff;
+  --checkboxWidth: 20px;
+  --checkboxHeight: 20px;
+  --checkboxBorder: 2px solid #ced4da;
+  --checkboxIconFontSize: 14px;
+  --checkboxActiveBorderColor: var(--primaryColor);
+  --checkboxActiveBg: var(--primaryColor);
+  --checkboxIconActiveColor: var(--primaryTextColor);
+  --checkboxActiveHoverBg: var(--primaryDarkColor);
+  --checkboxIconActiveHoverColor: var(--primaryTextColor);
+  --checkboxActiveHoverBorderColor: var(--primaryDarkColor);
 
-    --checkboxWidth: 20px;
-    --checkboxHeight: 20px;
-    --checkboxBorder: 2px solid #ced4da;
-    --checkboxIconFontSize: 14px;
-    --checkboxActiveBorderColor: var(--primaryColor);
-    --checkboxActiveBg: var(--primaryColor);
-    --checkboxIconActiveColor: var(--primaryTextColor);
-    --checkboxActiveHoverBg: var(--primaryDarkColor);
-    --checkboxIconActiveHoverColor: var(--primaryTextColor);
-    --checkboxActiveHoverBorderColor: var(--primaryDarkColor);
+  //panels: tabview
+  --panelHeaderBorderColor: #dee2e6;
+  --panelHeaderBorder: 1px solid #dee2e6;
+  --panelHeaderBg: #f8f9fa;
+  --panelHeaderTextColor: var(--textColor);
+  --panelHeaderFontWeight: 600;
+  --panelHeaderPadding: 1rem;
+  --panelToggleableHeaderPadding: 0.5rem 1rem;
+  --panelHeaderHoverBg: #e9ecef;
+  --panelHeaderHoverBorderColor: #dee2e6;
+  --panelHeaderTextHoverColor: #495057;
+  --panelContentBorderColor: #dee2;
+  --panelContentBorder: 1px solid #dee2e6;
+  --panelContentBg: #ffffff;
+  --panelContentTextColor: var(--textColor);
+  --panelContentPadding: 1rem;
+  --panelFooterBorder: 1px solid #dee2e6;
+  --panelFooterBg: #ffffff;
+  --panelFooterTextColor: var(--textColor);
+  --panelFooterPadding: 0.5rem 1rem;
 
-    //panels: tabview
-    --panelHeaderBorderColor: #dee2e6;
-    --panelHeaderBorder: 1px solid #dee2e6;
-    --panelHeaderBg: #f8f9fa;
-    --panelHeaderTextColor: var(--textColor);
-    --panelHeaderFontWeight: 600;
-    --panelHeaderPadding: 1rem;
-    --panelToggleableHeaderPadding: .5rem 1rem;
-    --panelHeaderHoverBg: #e9ecef;
-    --panelHeaderHoverBorderColor: #dee2e6;
-    --panelHeaderTextHoverColor: #495057;
-    --panelContentBorderColor: #dee2;
-    --panelContentBorder: 1px solid #dee2e6;
-    --panelContentBg: #ffffff;
-    --panelContentTextColor: var(--textColor);
-    --panelContentPadding: 1rem;
-    --panelFooterBorder: 1px solid #dee2e6;
-    --panelFooterBg: #ffffff;
-    --panelFooterTextColor: var(--textColor);
-    --panelFooterPadding: 0.5rem 1rem;
+  --tabviewNavBorder: 1px solid #dee2e6;
+  --tabviewNavBorderWidth: 0 0 2px 0;
+  --tabviewNavBg: #ffffff;
+  --tabviewHeaderSpacing: 0;
+  --tabviewHeaderBorder: solid #dee2e6;
+  --tabviewHeaderBorderWidth: 0 0 2px 0;
+  --tabviewHeaderBorderColor: transparent transparent #dee2e6 transparent;
+  --tabviewHeaderBg: #ffffff;
+  --tabviewHeaderTextColor: var(--textSecondaryColor);
+  --tabviewHeaderFontWeight: var(--panelHeaderFontWeight);
+  --tabviewHeaderPadding: var(--panelHeaderPadding);
+  --tabviewHeaderMargin: 0 0 -2px 0;
+  --tabviewHeaderHoverBg: #ffffff;
+  --tabviewHeaderHoverBorderColor: #9ba2aa;
+  --tabviewHeaderTextHoverColor: var(--textSecondaryColor);
+  --tabviewHeaderActiveBg: #ffffff;
+  --tabviewHeaderActiveBorderColor: var(--primaryColor);
+  --tabviewHeaderTextActiveColor: var(--primaryColor);
+  --tabviewContentBorder: 0 none;
+  --tabviewContentBg: var(--panelContentBg);
+  --tabviewContentTextColor: var(--panelContentTextColor);
+  --tabviewContentPadding: var(--panelContentPadding);
 
-    --tabviewNavBorder: 1px solid #dee2e6;
-    --tabviewNavBorderWidth: 0 0 2px 0;
-    --tabviewNavBg: #ffffff;
-    --tabviewHeaderSpacing: 0;
-    --tabviewHeaderBorder: solid #dee2e6;
-    --tabviewHeaderBorderWidth: 0 0 2px 0;
-    --tabviewHeaderBorderColor: transparent transparent #dee2e6 transparent;
-    --tabviewHeaderBg: #ffffff;
-    --tabviewHeaderTextColor: var(--textSecondaryColor);
-    --tabviewHeaderFontWeight: var(--panelHeaderFontWeight);
-    --tabviewHeaderPadding: var(--panelHeaderPadding);
-    --tabviewHeaderMargin: 0 0 -2px 0;
-    --tabviewHeaderHoverBg: #ffffff;
-    --tabviewHeaderHoverBorderColor: #9ba2aa;
-    --tabviewHeaderTextHoverColor: var(--textSecondaryColor);
-    --tabviewHeaderActiveBg: #ffffff;
-    --tabviewHeaderActiveBorderColor: var(--primaryColor);
-    --tabviewHeaderTextActiveColor: var(--primaryColor);
-    --tabviewContentBorder: 0 none;
-    --tabviewContentBg: var(--panelContentBg);
-    --tabviewContentTextColor: var(--panelContentTextColor);
-    --tabviewContentPadding: var(--panelContentPadding);
+  // buttons
+  --outlinedButtonBorder: 1px solid;
+  --roundedButtonBorderRadius: 2rem;
+  --raisedButtonShadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  --textButtonHoverBgOpacity: 0.04;
+  --textButtonActiveBgOpacity: 0.16;
+  --plainButtonTextColor: #6c757d;
+  --plainButtonHoverBgColor: #e9ecef;
+  --plainButtonActiveBgColor: #dee2e6;
+  --buttonPadding: 0.5rem 1rem;
+  --buttonTextColor: var(--primaryTextColor);
+  --buttonBg: var(--primaryColor);
+  --buttonBorder: 1px solid var(--primaryColor);
+  --buttonHoverBg: var(--primaryDarkColor);
+  --buttonTextHoverColor: var(--primaryTextColor);
+  --buttonHoverBorderColor: var(--primaryDarkColor);
+  --buttonActiveBg: var(--primaryDarkerColor);
+  --buttonTextActiveColor: var(--primaryTextColor);
+  --buttonActiveBorderColor: var(--primaryDarkerColor);
+  --buttonIconOnlyWidth: 2.357rem;
+  --buttonIconOnlyPadding: 0.5rem 0;
+  --linkButtonColor: var(--primaryColor);
+  --linkButtonHoverColor: var(--primaryColor);
+  --linkButtonFocusShadow: 0 0 0 0.2rem var(--focusOutlineColor);
+  --linkButtonTextHoverDecoration: underline;
+  --secondaryButtonBg: #607d8b;
+  --secondaryButtonTextColor: #ffffff;
+  --secondaryButtonBorder: 1px solid #607d8b;
+  --secondaryButtonHoverBg: #546e7a;
+  --secondaryButtonTextHoverColor: #ffffff;
+  --secondaryButtonHoverBorderColor: #546e7a;
+  --secondaryButtonActiveBg: #455a64;
+  --secondaryButtonTextActiveColor: #ffffff;
+  --secondaryButtonActiveBorderColor: #455a64;
+  --secondaryButtonFocusShadow: 0 0 0 0.2rem hsl(200, 18%, calc(46% + 30%));
+  --successButtonBg: #4caf50;
+  --successButtonTextColor: #ffffff;
+  --successButtonBorder: 1px solid #4caf50;
+  --successButtonHoverBg: #43a047;
+  --successButtonTextHoverColor: #ffffff;
+  --successButtonHoverBorderColor: #43a047;
+  --successButtonActiveBg: #388e3c;
+  --successButtonTextActiveColor: #ffffff;
+  --successButtonActiveBorderColor: #388e3c;
+  --successButtonFocusShadow: 0 0 0 0.2rem hsl(122, 39%, calc(49% + 30%));
+  --infoButtonBg: #03a9f4;
+  --infoButtonTextColor: #ffffff;
+  --infoButtonBorder: 1px solid #03a9f4;
+  --infoButtonHoverBg: #039be5;
+  --infoButtonTextHoverColor: #ffffff;
+  --infoButtonHoverBorderColor: #039be5;
+  --infoButtonActiveBg: #0288d1;
+  --infoButtonTextActiveColor: #ffffff;
+  --infoButtonActiveBorderColor: #0288d1;
+  --infoButtonFocusShadow: 0 0 0 0.2rem hsl(199, 98%, calc(48% + 30%));
+  --warningButtonBg: #ffc107;
+  --warningButtonTextColor: var(--textColor);
+  --warningButtonBorder: 1px solid #ffc107;
+  --warningButtonHoverBg: #ffb300;
+  --warningButtonTextHoverColor: var(--textColor);
+  --warningButtonHoverBorderColor: #ffb300;
+  --warningButtonActiveBg: #ffa000;
+  --warningButtonTextActiveColor: var(--textColor);
+  --warningButtonActiveBorderColor: #ffa000;
+  --warningButtonFocusShadow: 0 0 0 0.2rem hsl(45, 100%, calc(51% + 30%));
+  --helpButtonBg: #9c27b0;
+  --helpButtonTextColor: #ffffff;
+  --helpButtonBorder: 1px solid #9c27b0;
+  --helpButtonHoverBg: #8e24aa;
+  --helpButtonTextHoverColor: #ffffff;
+  --helpButtonHoverBorderColor: #8e24aa;
+  --helpButtonActiveBg: #7b1fa2;
+  --helpButtonTextActiveColor: #ffffff;
+  --helpButtonActiveBorderColor: #7b1fa2;
+  --helpButtonFocusShadow: 0 0 0 0.2rem hsl(291, 64%, calc(42% + 30%));
+  --dangerButtonBg: #f44336;
+  --dangerButtonTextColor: #ffffff;
+  --dangerButtonBorder: 1px solid #f44336;
+  --dangerButtonHoverBg: #e53935;
+  --dangerButtonTextHoverColor: #ffffff;
+  --dangerButtonHoverBorderColor: #e53935;
+  --dangerButtonActiveBg: #d32f2f;
+  --dangerButtonTextActiveColor: #ffffff;
+  --dangerButtonActiveBorderColor: #d32f2f;
+  --dangerButtonFocusShadow: 0 0 0 0.2rem hsl(4, 90%, calc(58% + 30%));
 
-    // buttons
-    --outlinedButtonBorder: 1px solid;
-    --roundedButtonBorderRadius: 2rem;
-    --raisedButtonShadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-    --textButtonHoverBgOpacity: .04;
-    --textButtonActiveBgOpacity: .16;
-    --plainButtonTextColor: #6c757d;
-    --plainButtonHoverBgColor: #e9ecef;
-    --plainButtonActiveBgColor: #dee2e6;
-    --buttonPadding: .5rem 1rem;
-    --buttonTextColor: var(--primaryTextColor);
-    --buttonBg: var(--primaryColor);
-    --buttonBorder: 1px solid var(--primaryColor);
-    --buttonHoverBg: var(--primaryDarkColor);
-    --buttonTextHoverColor: var(--primaryTextColor);
-    --buttonHoverBorderColor: var(--primaryDarkColor);
-    --buttonActiveBg: var(--primaryDarkerColor);
-    --buttonTextActiveColor: var(--primaryTextColor);
-    --buttonActiveBorderColor: var(--primaryDarkerColor);
-    --buttonIconOnlyWidth: 2.357rem;
-    --buttonIconOnlyPadding: .5rem 0;
-    --linkButtonColor: var(--primaryColor);
-    --linkButtonHoverColor: var(--primaryColor);
-    --linkButtonFocusShadow: 0 0 0 0.2rem var(--focusOutlineColor);
-    --linkButtonTextHoverDecoration: underline;
-    --secondaryButtonBg: #607D8B;
-    --secondaryButtonTextColor: #ffffff;
-    --secondaryButtonBorder: 1px solid #607D8B;
-    --secondaryButtonHoverBg: #546E7A;
-    --secondaryButtonTextHoverColor: #ffffff;
-    --secondaryButtonHoverBorderColor: #546E7A;
-    --secondaryButtonActiveBg: #455A64;
-    --secondaryButtonTextActiveColor: #ffffff;
-    --secondaryButtonActiveBorderColor: #455A64;
-    --secondaryButtonFocusShadow: 0 0 0 0.2rem hsl(200, 18%, calc(46% + 30%));
-    --successButtonBg: #4CAF50;
-    --successButtonTextColor: #ffffff;
-    --successButtonBorder: 1px solid #4CAF50;
-    --successButtonHoverBg: #43A047;
-    --successButtonTextHoverColor: #ffffff;
-    --successButtonHoverBorderColor: #43A047;
-    --successButtonActiveBg: #388E3C;
-    --successButtonTextActiveColor: #ffffff;
-    --successButtonActiveBorderColor: #388E3C;
-    --successButtonFocusShadow: 0 0 0 0.2rem hsl(122, 39%, calc(49% + 30%));
-    --infoButtonBg: #03A9F4;
-    --infoButtonTextColor: #ffffff;
-    --infoButtonBorder: 1px solid #03A9F4;
-    --infoButtonHoverBg: #039BE5;
-    --infoButtonTextHoverColor: #ffffff;
-    --infoButtonHoverBorderColor: #039BE5;
-    --infoButtonActiveBg: #0288D1;
-    --infoButtonTextActiveColor: #ffffff;
-    --infoButtonActiveBorderColor: #0288D1;
-    --infoButtonFocusShadow: 0 0 0 0.2rem hsl(199, 98%, calc(48% + 30%));
-    --warningButtonBg: #FFC107;
-    --warningButtonTextColor: var(--textColor);
-    --warningButtonBorder: 1px solid #FFC107;
-    --warningButtonHoverBg: #FFB300;
-    --warningButtonTextHoverColor: var(--textColor);
-    --warningButtonHoverBorderColor: #FFB300;
-    --warningButtonActiveBg: #FFA000;
-    --warningButtonTextActiveColor: var(--textColor);
-    --warningButtonActiveBorderColor: #FFA000;
-    --warningButtonFocusShadow: 0 0 0 0.2rem hsl(45, 100%, calc(51% + 30%));
-    --helpButtonBg: #9C27B0;
-    --helpButtonTextColor: #ffffff;
-    --helpButtonBorder: 1px solid #9C27B0;
-    --helpButtonHoverBg: #8E24AA;
-    --helpButtonTextHoverColor: #ffffff;
-    --helpButtonHoverBorderColor: #8E24AA;
-    --helpButtonActiveBg: #7B1FA2;
-    --helpButtonTextActiveColor: #ffffff;
-    --helpButtonActiveBorderColor: #7B1FA2;
-    --helpButtonFocusShadow: 0 0 0 0.2rem hsl(291, 64%, calc(42% + 30%));
-    --dangerButtonBg: #f44336;
-    --dangerButtonTextColor: #ffffff;
-    --dangerButtonBorder: 1px solid #f44336;
-    --dangerButtonHoverBg: #e53935;
-    --dangerButtonTextHoverColor: #ffffff;
-    --dangerButtonHoverBorderColor: #e53935;
-    --dangerButtonActiveBg: #d32f2f;
-    --dangerButtonTextActiveColor: #ffffff;
-    --dangerButtonActiveBorderColor: #d32f2f;
-    --dangerButtonFocusShadow: 0 0 0 0.2rem hsl(4, 90%, calc(58% + 30%));
+  // Misc
+  --badgeBg: var(--primaryColor);
+  --badgeTextColor: var(--primaryTextColor);
+  --badgeMinWidth: 1.5rem;
+  --badgeHeight: 1.5rem;
+  --badgeFontWeight: 700;
+  --badgeFontSize: 0.75rem;
 
-    // Misc
-    --badgeBg: var(--primaryColor);
-    --badgeTextColor: var(--primaryTextColor);
-    --badgeMinWidth: 1.5rem;
-    --badgeHeight: 1.5rem;
-    --badgeFontWeight: 700;
-    --badgeFontSize: .75rem;
-}
\ No newline at end of file
+  // Radio button
+  --radiobuttonWidth: 20px;
+  --radiobuttonHeight: 20px;
+  --radiobuttonBorder: 2px solid #ced4da;
+  --radiobuttonIconSize: 12px;
+  --radiobuttonActiveBorderColor: var(--primaryColor);
+  --radiobuttonActiveBg: var(--primaryColor);
+  --radiobuttonIconActiveColor: var(--primaryTextColor);
+  --radiobuttonActiveHoverBg: var(--primaryDarkerColor);
+  --radiobuttonIconActiveHoverColor: var(--primaryTextColor);
+  --radiobuttonActiveHoverBorderColor: var(--primaryDarkerColor);
+}
diff --git a/packages/core/src/utils/config.ts b/packages/core/src/utils/config.ts
new file mode 100644
index 0000000..8f379b4
--- /dev/null
+++ b/packages/core/src/utils/config.ts
@@ -0,0 +1,51 @@
+import { /*getMode, setMode,*/ setPlatformHelpers } from "@stencil/core";
+
+export interface AnywhereUIConfig {
+  /**
+   * When it's set to `false`, it disables all material-design ripple-effects across the app.
+   * Defaults to `true`.
+   */
+  rippleEffect?: boolean;
+
+  /**
+   * The mode determines which platform styles to use for the whole application.
+   */
+  mode?: string;
+
+  persistConfig?: boolean;
+  _zoneGate?: (h: () => any) => any;
+  _ael?: (el: any, name: string, cb: any, opts: any) => any;
+  _rel?: (el: any, name: string, cb: any, opts: any) => any;
+  _ce?: (eventName: string, opts: any) => any;
+}
+
+export const setupConfig = (config: AnywhereUIConfig) => {
+  const win = window as any;
+  const AnywhereUI = win.AnywhereUI;
+  if (
+    AnywhereUI &&
+    AnywhereUI.config &&
+    AnywhereUI.config.constructor.name !== "Object"
+  ) {
+    return;
+  }
+
+  const platformHelpers: any = {};
+  if (config._ael) {
+    platformHelpers.ael = config._ael;
+  }
+  if (config._rel) {
+    platformHelpers.rel = config._rel;
+  }
+  if (config._ce) {
+    platformHelpers.ce = config._ce;
+  }
+  setPlatformHelpers(platformHelpers);
+
+  win.AnywhereUI = win.AnywhereUI || {};
+  win.AnywhereUI.config = {
+    ...win.AnywhereUI.config,
+    ...config,
+  };
+  return win.AnywhereUI.config;
+};
diff --git a/packages/core/src/utils/helpers.ts b/packages/core/src/utils/helpers.ts
index 743259b..517e915 100644
--- a/packages/core/src/utils/helpers.ts
+++ b/packages/core/src/utils/helpers.ts
@@ -36,3 +36,47 @@ export const renderHiddenInput = (
 export const hasShadowDom = (el: HTMLElement) => {
   return !!el.shadowRoot && !!(el as any).attachShadow;
 };
+
+export const addEventListener = (
+  el: any,
+  eventName: string,
+  callback: any,
+  opts?: any
+) => {
+  if (typeof (window as any) !== "undefined") {
+    const win = window as any;
+    const config = win && win.AnywhereUI && win.AnywhereUI.config;
+    if (config) {
+      const ael = config.get("_ael");
+      if (ael) {
+        return ael(el, eventName, callback, opts);
+      } else if (config._ael) {
+        return config._ael(el, eventName, callback, opts);
+      }
+    }
+  }
+
+  return el.addEventListener(eventName, callback, opts);
+};
+
+export const removeEventListener = (
+  el: any,
+  eventName: string,
+  callback: any,
+  opts?: any
+) => {
+  if (typeof (window as any) !== "undefined") {
+    const win = window as any;
+    const config = win && win.AnywhereUI && win.AnywhereUI.config;
+    if (config) {
+      const rel = config.get("_rel");
+      if (rel) {
+        return rel(el, eventName, callback, opts);
+      } else if (config._rel) {
+        return config._rel(el, eventName, callback, opts);
+      }
+    }
+  }
+
+  return el.removeEventListener(eventName, callback, opts);
+};
diff --git a/packages/core/src/utils/radiobutton-registry.ts b/packages/core/src/utils/radiobutton-registry.ts
new file mode 100644
index 0000000..779e4be
--- /dev/null
+++ b/packages/core/src/utils/radiobutton-registry.ts
@@ -0,0 +1,28 @@
+class RadioButtonRegistry {
+  public radioButtons: any[] = [];
+  constructor() {}
+  add(radioButton: any) {
+    this.radioButtons.push(radioButton);
+  }
+
+  remove(radioButton: any) {
+    this.radioButtons = this.radioButtons.filter((c) => {
+      return c !== radioButton;
+    });
+  }
+
+  select(radioButton: any) {
+    this.radioButtons.forEach((c) => {
+      if (this.isSameGroup(c, radioButton) && c !== radioButton) {
+        c.checked = false;
+        c.nativeInput.checked = false;
+      }
+    });
+  }
+
+  private isSameGroup(controlPair: any, radioButton: any): boolean {
+    return controlPair.name === radioButton.name;
+  }
+}
+
+export const Registry = new RadioButtonRegistry();
diff --git a/packages/core/stencil.config.ts b/packages/core/stencil.config.ts
index 91a8651..89c5fff 100644
--- a/packages/core/stencil.config.ts
+++ b/packages/core/stencil.config.ts
@@ -12,13 +12,18 @@ import { reactOutputTarget } from "@stencil/react-output-target";
 
 const angularValueAccessorBindings: ValueAccessorConfig[] = [
   {
-    elementSelectors: ["any-dropdown", "any-listbox", "any-virtual-scroller"],
+    elementSelectors: [
+      "any-dropdown",
+      "any-listbox",
+      "any-virtual-scroller",
+      "any-radio-group",
+    ],
     event: "valueChange",
     targetAttr: "value",
     type: "select",
   },
   {
-    elementSelectors: ["any-input-text[type=text]"],
+    elementSelectors: ["any-input-text:not([type=number])"],
     event: "valueChange",
     targetAttr: "value",
     type: "text",
@@ -29,21 +34,39 @@ const angularValueAccessorBindings: ValueAccessorConfig[] = [
     targetAttr: "checked",
     type: "boolean",
   },
+  {
+    elementSelectors: ["any-radio-button"],
+    event: "aOnSelect",
+    targetAttr: "checked",
+    type: "radio",
+  },
 ];
 
 const vueComponentModels: ComponentModelConfig[] = [
   {
-    elements: ["any-dropdown", "any-listbox", "any-input-text"],
-    event: "v-valueChange",
+    elements: [
+      "any-dropdown",
+      "any-listbox",
+      "any-input-text",
+      "any-radio-button",
+      "any-radio-group",
+    ],
+    event: "v-value-change",
     externalEvent: "valueChange",
     targetAttr: "value",
   },
   {
     elements: ["any-checkbox", "any-input-switch"],
-    event: "v-valueChange",
+    event: "v-value-change",
     targetAttr: "checked",
     externalEvent: "valueChange",
   },
+  // {
+  //   elements: ["any-radio-button"],
+  //   event: "v-a-on-select",
+  //   targetAttr: "checked",
+  //   externalEvent: "aOnSelect",
+  // },
 ];
 
 export const config: Config = {
@@ -69,6 +92,7 @@ export const config: Config = {
     { components: ["any-button"] },
     { components: ["any-badge", "any-badge-overlay"] },
     { components: ["any-ripple-effect"] },
+    { components: ["any-radio-button", "any-radio-group"] },
   ],
   plugins: [
     sass({
diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json
index 37ddb0e..9f733d4 100644
--- a/packages/react/package-lock.json
+++ b/packages/react/package-lock.json
@@ -1,28 +1,9 @@
 {
   "name": "@anywhere-ui/react",
-  "version": "0.1.1",
+  "version": "0.2.0+7",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
-    "@anywhere-ui/core": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/@anywhere-ui/core/-/core-0.1.1.tgz",
-      "integrity": "sha512-15Hl2XlwPgwczDAxP5zgJnoOYUSsSoa8sGoCopgWgdZq3vj84aHpAo1I3dwEr+2YCO5U5R9N0cSvyVcScJnlPw==",
-      "requires": {
-        "@types/jest": "^26.0.24"
-      },
-      "dependencies": {
-        "@types/jest": {
-          "version": "26.0.24",
-          "resolved": "https://registry.npmjs.org/@types/jest/-/jest-26.0.24.tgz",
-          "integrity": "sha512-E/X5Vib8BWqZNRlDxj9vYXhsDwPYbPINqKF9BsnSoon4RQ0D9moEuLD8txgyypFLH7J4+Lho9Nr/c8H0Fi+17w==",
-          "requires": {
-            "jest-diff": "^26.0.0",
-            "pretty-format": "^26.0.0"
-          }
-        }
-      }
-    },
     "@babel/code-frame": {
       "version": "7.12.13",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
@@ -1402,12 +1383,14 @@
     "@types/istanbul-lib-coverage": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz",
-      "integrity": "sha512-hRJD2ahnnpLgsj6KWMYSrmXkM3rm2Dl1qkx6IOFD5FnuNPXJIG5L0dhgKXCYTRMGzU4n0wImQ/xfmRc4POUFlg=="
+      "integrity": "sha512-hRJD2ahnnpLgsj6KWMYSrmXkM3rm2Dl1qkx6IOFD5FnuNPXJIG5L0dhgKXCYTRMGzU4n0wImQ/xfmRc4POUFlg==",
+      "dev": true
     },
     "@types/istanbul-lib-report": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz",
       "integrity": "sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==",
+      "dev": true,
       "requires": {
         "@types/istanbul-lib-coverage": "*"
       }
@@ -1452,7 +1435,8 @@
     "@types/node": {
       "version": "13.13.52",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-13.13.52.tgz",
-      "integrity": "sha512-s3nugnZumCC//n4moGGe6tkNMyYEdaDBitVjwPxXmR5lnMG5dHePinH2EdxkG3Rh1ghFHHixAG4NJhpJW1rthQ=="
+      "integrity": "sha512-s3nugnZumCC//n4moGGe6tkNMyYEdaDBitVjwPxXmR5lnMG5dHePinH2EdxkG3Rh1ghFHHixAG4NJhpJW1rthQ==",
+      "dev": true
     },
     "@types/normalize-package-data": {
       "version": "2.4.0",
@@ -1531,7 +1515,8 @@
     "@types/yargs-parser": {
       "version": "15.0.0",
       "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-15.0.0.tgz",
-      "integrity": "sha512-FA/BWv8t8ZWJ+gEOnLLd8ygxH/2UFbAvgEonyfN6yWGLKc7zVjbpl2Y4CTjid9h2RfgPP6SEt6uHwEOply00yw=="
+      "integrity": "sha512-FA/BWv8t8ZWJ+gEOnLLd8ygxH/2UFbAvgEonyfN6yWGLKc7zVjbpl2Y4CTjid9h2RfgPP6SEt6uHwEOply00yw==",
+      "dev": true
     },
     "abab": {
       "version": "2.0.5",
@@ -1665,7 +1650,8 @@
     "ansi-regex": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
-      "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg=="
+      "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+      "dev": true
     },
     "ansi-styles": {
       "version": "3.2.1",
@@ -4571,67 +4557,6 @@
         }
       }
     },
-    "jest-diff": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-26.6.2.tgz",
-      "integrity": "sha512-6m+9Z3Gv9wN0WFVasqjCL/06+EFCMTqDEUl/b87HYK2rAPTyfz4ZIuSlPhY51PIQRWx5TaxeF1qmXKe9gfN3sA==",
-      "requires": {
-        "chalk": "^4.0.0",
-        "diff-sequences": "^26.6.2",
-        "jest-get-type": "^26.3.0",
-        "pretty-format": "^26.6.2"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-        },
-        "diff-sequences": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-26.6.2.tgz",
-          "integrity": "sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q=="
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "jest-docblock": {
       "version": "26.0.0",
       "resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-26.0.0.tgz",
@@ -5016,7 +4941,8 @@
     "jest-get-type": {
       "version": "26.3.0",
       "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-26.3.0.tgz",
-      "integrity": "sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig=="
+      "integrity": "sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==",
+      "dev": true
     },
     "jest-haste-map": {
       "version": "26.6.2",
@@ -8160,95 +8086,6 @@
       "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=",
       "dev": true
     },
-    "pretty-format": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
-      "integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
-      "requires": {
-        "@jest/types": "^26.6.2",
-        "ansi-regex": "^5.0.0",
-        "ansi-styles": "^4.0.0",
-        "react-is": "^17.0.1"
-      },
-      "dependencies": {
-        "@jest/types": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-          "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-          "requires": {
-            "@types/istanbul-lib-coverage": "^2.0.0",
-            "@types/istanbul-reports": "^3.0.0",
-            "@types/node": "*",
-            "@types/yargs": "^15.0.0",
-            "chalk": "^4.0.0"
-          }
-        },
-        "@types/istanbul-reports": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-          "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-          "requires": {
-            "@types/istanbul-lib-report": "*"
-          }
-        },
-        "@types/yargs": {
-          "version": "15.0.14",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.14.tgz",
-          "integrity": "sha512-yEJzHoxf6SyQGhBhIYGXQDSCkJjB6HohDShto7m8vaKg9Yp0Yn8+71J9eakh2bnPg6BfsH9PRMhiRTZnd4eXGQ==",
-          "requires": {
-            "@types/yargs-parser": "*"
-          }
-        },
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
-        },
-        "react-is": {
-          "version": "17.0.2",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "prompts": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.1.tgz",
diff --git a/packages/react/package.json b/packages/react/package.json
index 5794c8f..9d02c3f 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@anywhere-ui/react",
   "sideEffects": false,
-  "version": "0.2.0+7",
+  "version": "0.2.0",
   "description": "React specific wrapper AnywhereUI Web Components library",
   "license": "MIT",
   "repository": {
@@ -33,9 +33,7 @@
     "react-dom": "^16.14.0",
     "typescript": "^4.3.2"
   },
-  "dependencies": {
-    "@anywhere-ui/core": "^0.1.1"
-  },
+  "dependencies": {},
   "peerDependencies": {
     "react": "^16.7.0",
     "react-dom": "^16.7.0"
@@ -48,5 +46,5 @@
       "dist"
     ]
   },
-  "buildnum": "7"
+  "buildnum": "8"
 }
\ No newline at end of file
diff --git a/packages/react/src/components.ts b/packages/react/src/components.ts
index 8295e65..f83684e 100644
--- a/packages/react/src/components.ts
+++ b/packages/react/src/components.ts
@@ -16,6 +16,8 @@ export const AnyDropdown = /*@__PURE__*/createReactComponent<JSX.AnyDropdown, HT
 export const AnyInputSwitch = /*@__PURE__*/createReactComponent<JSX.AnyInputSwitch, HTMLAnyInputSwitchElement>('any-input-switch');
 export const AnyInputText = /*@__PURE__*/createReactComponent<JSX.AnyInputText, HTMLAnyInputTextElement>('any-input-text');
 export const AnyListbox = /*@__PURE__*/createReactComponent<JSX.AnyListbox, HTMLAnyListboxElement>('any-listbox');
+export const AnyRadioButton = /*@__PURE__*/createReactComponent<JSX.AnyRadioButton, HTMLAnyRadioButtonElement>('any-radio-button');
+export const AnyRadioGroup = /*@__PURE__*/createReactComponent<JSX.AnyRadioGroup, HTMLAnyRadioGroupElement>('any-radio-group');
 export const AnyRippleEffect = /*@__PURE__*/createReactComponent<JSX.AnyRippleEffect, HTMLAnyRippleEffectElement>('any-ripple-effect');
 export const AnyTabPanel = /*@__PURE__*/createReactComponent<JSX.AnyTabPanel, HTMLAnyTabPanelElement>('any-tab-panel');
 export const AnyTabView = /*@__PURE__*/createReactComponent<JSX.AnyTabView, HTMLAnyTabViewElement>('any-tab-view');
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 099b463..9a672b7 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -1 +1,26 @@
-export * from './components';
\ No newline at end of file
+import {
+  AnywhereUIConfig /*, initialize*/,
+  // initialize,
+  setupConfig,
+} from "@anywhere-ui/core";
+
+export * from "./components";
+
+export const setupAnywhereUIReact = (config: AnywhereUIConfig = {}) => {
+  /**
+   * By default Ionic Framework hides elements that
+   * are not hydrated, but in the CE build there is no
+   * hydration.
+   * TODO: Remove when all integrations have been
+   * migrated to CE build.
+   */
+  if (typeof (document as any) !== "undefined") {
+    document.documentElement.classList.add("any-ce");
+  }
+  // initialize({
+  //   ...config,
+  // });
+  setupConfig({
+    ...config,
+  });
+};
diff --git a/packages/react/src/react-component-lib/createComponent.tsx b/packages/react/src/react-component-lib/createComponent.tsx
index c3be0b1..a5e3c37 100644
--- a/packages/react/src/react-component-lib/createComponent.tsx
+++ b/packages/react/src/react-component-lib/createComponent.tsx
@@ -1,10 +1,9 @@
-import React from 'react';
+import React, { createElement } from 'react';
 
 import {
   attachProps,
   createForwardRef,
   dashToPascalCase,
-  defineCustomElement,
   isCoveredByReact,
   mergeRefs,
 } from './utils';
@@ -30,9 +29,11 @@ export const createReactComponent = <
     originalProps: StencilReactInternalProps<ElementType>,
     propsToPass: any,
   ) => ExpandedPropsTypes,
-  customElement?: any,
+  defineCustomElement?: () => void,
 ) => {
-  defineCustomElement(tagName, customElement);
+  if (defineCustomElement !== undefined) {
+    defineCustomElement();
+  }
 
   const displayName = dashToPascalCase(tagName);
   const ReactComponent = class extends React.Component<StencilReactInternalProps<ElementType>> {
@@ -79,7 +80,14 @@ export const createReactComponent = <
         style,
       };
 
-      return React.createElement(tagName, newProps, children);
+      /**
+       * We use createElement here instead of
+       * React.createElement to work around a
+       * bug in Vite (https://github.com/vitejs/vite/issues/6104).
+       * React.createElement causes all elements to be rendered
+       * as <tagname> instead of the actual Web Component.
+       */
+      return createElement(tagName, newProps, children);
     }
 
     static get displayName() {
diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json
index f035177..352a23f 100644
--- a/packages/vue/package-lock.json
+++ b/packages/vue/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@anywhere-ui/vue",
-  "version": "0.1.1",
+  "version": "0.2.0+7",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -47,9 +47,9 @@
       }
     },
     "@types/node": {
-      "version": "15.12.2",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-15.12.2.tgz",
-      "integrity": "sha512-zjQ69G564OCIWIOHSXyQEEDpdpGl+G348RAKY0XXy9Z5kU9Vzv1GMNnkar/ZJ8dzXB3COzD9Mo9NtRZ4xfgUww==",
+      "version": "17.0.18",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.18.tgz",
+      "integrity": "sha512-eKj4f/BsN/qcculZiRSujogjvp5O/k4lOW5m35NopjZM/QwLOR075a8pJW5hD+Rtdm2DaCVPENS6KtSQnUD6BA==",
       "dev": true
     },
     "@vue/compiler-core": {
@@ -344,12 +344,12 @@
       }
     },
     "rollup": {
-      "version": "2.51.1",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.51.1.tgz",
-      "integrity": "sha512-8xfDbAtBleXotb6qKEHWuo/jkn94a9dVqGc7Rwl3sqspCVlnCfbRek7ldhCARSi7h32H0xR4QThm1t9zHN+3uw==",
+      "version": "2.67.3",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.67.3.tgz",
+      "integrity": "sha512-G/x1vUwbGtP6O5ZM8/sWr8+p7YfZhI18pPqMRtMYMWSbHjKZ/ajHGiM+GWNTlWyOR0EHIdT8LHU+Z4ciIZ1oBw==",
       "dev": true,
       "requires": {
-        "fsevents": "~2.3.1"
+        "fsevents": "~2.3.2"
       }
     },
     "rollup-plugin-terser": {
@@ -386,9 +386,9 @@
       "dev": true
     },
     "source-map-support": {
-      "version": "0.5.19",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
-      "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
       "dev": true,
       "requires": {
         "buffer-from": "^1.0.0",
@@ -413,14 +413,14 @@
       }
     },
     "terser": {
-      "version": "5.7.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.7.0.tgz",
-      "integrity": "sha512-HP5/9hp2UaZt5fYkuhNBR8YyRcT8juw8+uFbAme53iN9hblvKnLUTKkmwJG6ocWpIKf8UK4DoeWG4ty0J6S6/g==",
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.10.0.tgz",
+      "integrity": "sha512-AMmF99DMfEDiRJfxfY5jj5wNH/bYO09cniSqhfoyxc8sFoYIgkJy86G04UoZU5VjlpnplVu0K6Tx6E9b5+DlHA==",
       "dev": true,
       "requires": {
         "commander": "^2.20.0",
         "source-map": "~0.7.2",
-        "source-map-support": "~0.5.19"
+        "source-map-support": "~0.5.20"
       }
     },
     "to-fast-properties": {
diff --git a/packages/vue/package.json b/packages/vue/package.json
index a87e638..b1d6263 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@anywhere-ui/vue",
   "sideEffects": false,
-  "version": "0.2.0+7",
+  "version": "0.2.0",
   "description": "Vue specific wrapper AnywhereUI Web Components",
   "license": "MIT",
   "repository": {
@@ -42,5 +42,5 @@
       "dist"
     ]
   },
-  "buildnum": "7"
+  "buildnum": "8"
 }
\ No newline at end of file
diff --git a/packages/vue/src/anywhere-ui-vue.ts b/packages/vue/src/anywhere-ui-vue.ts
new file mode 100644
index 0000000..46c36d4
--- /dev/null
+++ b/packages/vue/src/anywhere-ui-vue.ts
@@ -0,0 +1,64 @@
+import { App, Plugin } from "vue";
+import { AnywhereUIConfig } from "@anywhere-ui/core";
+// import { initialize } from "@anywhere-ui/core";
+import { setupConfig } from "@anywhere-ui/core";
+import { applyPolyfills, defineCustomElements } from "@anywhere-ui/core/loader";
+
+/**
+ * We need to make sure that the web component fires an event
+ * that will not conflict with the user's @valueChange binding,
+ * otherwise the binding's callback will fire before any
+ * v-model values have been updated.
+ */
+const toKebabCase = (eventName: string) =>
+  eventName === "valueChange"
+    ? "v-value-change"
+    : eventName.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+
+const getHelperFunctions = () => {
+  return {
+    ael: (el: any, eventName: string, cb: any, opts: any) =>
+      el.addEventListener(toKebabCase(eventName), cb, opts),
+    rel: (el: any, eventName: string, cb: any, opts: any) =>
+      el.removeEventListener(toKebabCase(eventName), cb, opts),
+    ce: (eventName: string, opts: any) =>
+      new CustomEvent(toKebabCase(eventName), opts),
+  };
+};
+
+export const AnywhereUIVue: Plugin = {
+  async install(_: App, config: AnywhereUIConfig = {}) {
+    const win = window;
+    /**
+     * By default Ionic Framework hides elements that
+     * are not hydrated, but in the CE build there is no
+     * hydration.
+     * TODO: Remove when all integrations have been
+     * migrated to CE build.
+     */
+    const { ael, rel, ce } = getHelperFunctions();
+    if (win && typeof (document as any) !== "undefined") {
+      document.documentElement.classList.add("any-ce");
+      applyPolyfills().then(() => {
+        return defineCustomElements(win, {
+          syncQueue: true,
+          ael: ael,
+          rel: rel,
+          // _ce: ce,
+        });
+      });
+    }
+
+    setupConfig({
+      ...config,
+      ...{ _ael: ael, _rel: rel, _ce: ce },
+    });
+
+    // initialize({
+    //   ...config,
+    //   _ael: ael,
+    //   _rel: rel,
+    //   _ce: ce,
+    // });
+  },
+};
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
index b78ea2d..b927681 100644
--- a/packages/vue/src/index.ts
+++ b/packages/vue/src/index.ts
@@ -1 +1,3 @@
-export * from './proxies';
+export * from "./proxies";
+
+export { AnywhereUIVue } from "./anywhere-ui-vue";
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index 1e7c8f2..7ab7bd6 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -48,6 +48,7 @@ export const AnyCheckbox = /*@__PURE__*/ defineContainer<JSX.AnyCheckbox>('any-c
   'binary',
   'inputId',
   'name',
+  'anyTabIndex',
   'value',
   'label',
   'anyStyle',
@@ -60,7 +61,7 @@ export const AnyCheckbox = /*@__PURE__*/ defineContainer<JSX.AnyCheckbox>('any-c
   'aOnFocus',
   'aOnBlur'
 ],
-'checked', 'v-valueChange', 'valueChange');
+'checked', 'v-value-change', 'valueChange');
 
 
 export const AnyDropdown = /*@__PURE__*/ defineContainer<JSX.AnyDropdown>('any-dropdown', undefined, [
@@ -93,7 +94,7 @@ export const AnyDropdown = /*@__PURE__*/ defineContainer<JSX.AnyDropdown>('any-d
   'aOnBlur',
   'aOnClick'
 ],
-'value', 'v-valueChange', 'valueChange');
+'value', 'v-value-change', 'valueChange');
 
 
 export const AnyInputSwitch = /*@__PURE__*/ defineContainer<JSX.AnyInputSwitch>('any-input-switch', undefined, [
@@ -112,7 +113,7 @@ export const AnyInputSwitch = /*@__PURE__*/ defineContainer<JSX.AnyInputSwitch>(
   'aOnFocus',
   'aOnBlur'
 ],
-'checked', 'v-valueChange', 'valueChange');
+'checked', 'v-value-change', 'valueChange');
 
 
 export const AnyInputText = /*@__PURE__*/ defineContainer<JSX.AnyInputText>('any-input-text', undefined, [
@@ -129,7 +130,7 @@ export const AnyInputText = /*@__PURE__*/ defineContainer<JSX.AnyInputText>('any
   'leftIconClass',
   'valueChange'
 ],
-'value', 'v-valueChange', 'valueChange');
+'value', 'v-value-change', 'valueChange');
 
 
 export const AnyListbox = /*@__PURE__*/ defineContainer<JSX.AnyListbox>('any-listbox', undefined, [
@@ -147,7 +148,33 @@ export const AnyListbox = /*@__PURE__*/ defineContainer<JSX.AnyListbox>('any-lis
   'virtualScroll',
   'valueChange'
 ],
-'value', 'v-valueChange', 'valueChange');
+'value', 'v-value-change', 'valueChange');
+
+
+export const AnyRadioButton = /*@__PURE__*/ defineContainer<JSX.AnyRadioButton>('any-radio-button', undefined, [
+  'value',
+  'inputId',
+  'label',
+  'anyStyle',
+  'styleClass',
+  'labelStyleClass',
+  'disabled',
+  'name',
+  'anyTabIndex',
+  'aOnSelect',
+  'aOnFocus',
+  'aOnBlur'
+],
+'value', 'v-value-change', 'valueChange');
+
+
+export const AnyRadioGroup = /*@__PURE__*/ defineContainer<JSX.AnyRadioGroup>('any-radio-group', undefined, [
+  'allowEmptySelection',
+  'name',
+  'value',
+  'valueChange'
+],
+'value', 'v-value-change', 'valueChange');
 
 
 export const AnyRippleEffect = /*@__PURE__*/ defineContainer<JSX.AnyRippleEffect>('any-ripple-effect', undefined, [
diff --git a/packages/vue/src/vue-component-lib/utils.ts b/packages/vue/src/vue-component-lib/utils.ts
index 6f587d1..4ba80a2 100644
--- a/packages/vue/src/vue-component-lib/utils.ts
+++ b/packages/vue/src/vue-component-lib/utils.ts
@@ -51,7 +51,7 @@ const getElementClasses = (ref: Ref<HTMLElement | undefined>, componentClasses:
 */
 export const defineContainer = <Props>(
   name: string,
-  customElement: any,
+  defineCustomElement: any,
   componentProps: string[] = [],
   modelProp?: string,
   modelUpdateEvent?: string,
@@ -63,12 +63,8 @@ export const defineContainer = <Props>(
   * They refer to whatever properties are set on an instance of a component.
   */
 
-  if (
-    customElement !== undefined &&
-    typeof customElements !== 'undefined' &&
-    !customElements.get(name)
-  ) {
-    customElements.define(name, customElement);
+  if (defineCustomElement !== undefined) {
+    defineCustomElement();
   }
 
   const Container = defineComponent<Props & InputProps>((props: any, { attrs, slots, emit }) => {