@empathyco/x-components 4.1.0-alpha.20 → 4.1.0-alpha.21

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.1.0-alpha.21](https://github.com/empathyco/x/compare/@empathyco/x-components@4.1.0-alpha.20...@empathyco/x-components@4.1.0-alpha.21) (2024-02-20)
+
+
+### Features
+
+* migrate base-switch to use defineComponent sintax (#1415) ([0592ec9](https://github.com/empathyco/x/commit/0592ec94f7f47c91946d0e3a465dde134dd12021))
+
+
+
 ## [4.1.0-alpha.20](https://github.com/empathyco/x/compare/@empathyco/x-components@4.1.0-alpha.19...@empathyco/x-components@4.1.0-alpha.20) (2024-02-20)
 
 

package/design-system/deprecated-full-theme.css

@@ -494,29 +494,6 @@
 [dir="rtl"] .x-padding--left-20 {
   padding-right: var(--x-size-base-20) !important;
 }
-.x-line-height--none {
-  line-height: 1 !important;
-}
-
-.x-line-height--tight {
-  line-height: 1.25 !important;
-}
-
-.x-line-height--snug {
-  line-height: 1.375 !important;
-}
-
-.x-line-height--normal {
-  line-height: 1.5 !important;
-}
-
-.x-line-height--relaxed {
-  line-height: 1.625 !important;
-}
-
-.x-line-height--loose {
-  line-height: 2 !important;
-}
 .x-margin--auto {
   margin: auto !important;
 }
@@ -979,6 +956,29 @@
 [dir="rtl"] .x-margin--left-20 {
   margin-right: var(--x-size-base-20) !important;
 }
+.x-line-height--none {
+  line-height: 1 !important;
+}
+
+.x-line-height--tight {
+  line-height: 1.25 !important;
+}
+
+.x-line-height--snug {
+  line-height: 1.375 !important;
+}
+
+.x-line-height--normal {
+  line-height: 1.5 !important;
+}
+
+.x-line-height--relaxed {
+  line-height: 1.625 !important;
+}
+
+.x-line-height--loose {
+  line-height: 2 !important;
+}
 .x-line-clamp--2 {
   overflow: hidden !important;
   display: -webkit-box !important;
@@ -3578,18 +3578,6 @@
   --x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
   --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
 }
-:root {
-  --x-color-background-tag-ghost: transparent;
-  --x-color-border-tag-ghost: transparent;
-  --x-color-background-tag-selected-ghost: transparent;
-  --x-color-border-tag-selected-ghost: transparent;
-  --x-color-background-tag-curated-ghost: transparent;
-  --x-color-border-tag-curated-ghost: transparent;
-  --x-color-background-tag-curated-selected-ghost: transparent;
-  --x-color-border-tag-curated-selected-ghost: transparent;
-  --x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
-  --x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
-}
 :root {
   --x-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
   --x-size-border-radius-top-left-tag-pill: var(--x-size-border-radius-tag-pill);
@@ -3620,6 +3608,18 @@
   --x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
   --x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
 }
+:root {
+  --x-color-background-tag-ghost: transparent;
+  --x-color-border-tag-ghost: transparent;
+  --x-color-background-tag-selected-ghost: transparent;
+  --x-color-border-tag-selected-ghost: transparent;
+  --x-color-background-tag-curated-ghost: transparent;
+  --x-color-border-tag-curated-ghost: transparent;
+  --x-color-background-tag-curated-selected-ghost: transparent;
+  --x-color-border-tag-curated-selected-ghost: transparent;
+  --x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
+  --x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
+}
 
 .x-tag--ghost.x-tag,
 .x-tag--ghost .x-tag {
@@ -4677,6 +4677,14 @@
   --x-size-span-row-item: 1;
   --x-size-start-row-item: 0;
 }
+:root {
+  --x-size-gap-row: 0;
+  --x-size-padding-row: 0;
+  --x-size-justify-row: stretch;
+  --x-size-align-row: center;
+  --x-size-span-row-item: 1;
+  --x-size-start-row-item: 0;
+}
 
 .x-row {
   display: grid;
@@ -4797,14 +4805,6 @@
 .x-row--align-stretch {
   --x-size-align-row: stretch;
 }
-:root {
-  --x-size-gap-row: 0;
-  --x-size-padding-row: 0;
-  --x-size-justify-row: stretch;
-  --x-size-align-row: center;
-  --x-size-span-row-item: 1;
-  --x-size-start-row-item: 0;
-}
 :root {
   --x-color-border-result-default: var(--x-color-base-lead);
   --x-color-border-result-overlay-default: var(--x-color-border-result-default);
@@ -5093,6 +5093,21 @@
   --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
   --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
 }
+:root {
+  --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
+  --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
+  --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
+  --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
+}
+
+.x-picture--card.x-picture {
+  --x-size-border-radius-picture-default: var(--x-size-border-radius-picture-card);
+  --x-size-border-radius-top-picture-default: var(--x-size-border-radius-top-picture-card);
+  --x-size-border-radius-right-picture-default: var(--x-size-border-radius-right-picture-card);
+  --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-bottom-picture-card);
+  --x-size-border-radius-left-picture-default: var(--x-size-border-radius-left-picture-card);
+}
 :root {
   --x-color-background-option-list-button-default: transparent;
   --x-color-border-option-list-button-default: transparent;
@@ -5173,21 +5188,6 @@
   --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
   --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
 }
-:root {
-  --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
-  --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
-  --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
-  --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
-}
-
-.x-picture--card.x-picture {
-  --x-size-border-radius-picture-default: var(--x-size-border-radius-picture-card);
-  --x-size-border-radius-top-picture-default: var(--x-size-border-radius-top-picture-card);
-  --x-size-border-radius-right-picture-default: var(--x-size-border-radius-right-picture-card);
-  --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-bottom-picture-card);
-  --x-size-border-radius-left-picture-default: var(--x-size-border-radius-left-picture-card);
-}
 :root {
   --x-color-background-option-list-button-default: transparent;
   --x-color-border-option-list-button-default: transparent;
@@ -5560,6 +5560,15 @@
   --x-modal-overlay-color: rgb(0, 0, 0);
   --x-modal-overlay-opacity: 0.7;
 }
+:root {
+  --x-modal-overlay-color: rgb(0, 0, 0);
+  --x-modal-overlay-opacity: 0.7;
+}
+
+.x-modal__overlay {
+  background-color: var(--x-modal-overlay-color) !important;
+  opacity: var(--x-modal-overlay-opacity) !important;
+}
 :root {
   --x-string-justify-message-default: center;
   --x-size-gap-message-default: var(--x-size-base-03);
@@ -6717,6 +6726,32 @@
   );
   --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
 }
+:root {
+  --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
+  --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
+  --x-size-border-radius-bottom-right-input-group-pill: var(
+    --x-size-border-radius-input-group-pill
+  );
+  --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
+}
+
+.x-input-group--pill.x-input-group,
+.x-input-group--pill .x-input-group {
+  --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-pill);
+  --x-size-border-radius-top-left-input-group-default: var(
+    --x-size-border-radius-top-left-input-group-pill
+  );
+  --x-size-border-radius-top-right-input-group-default: var(
+    --x-size-border-radius-top-right-input-group-pill
+  );
+  --x-size-border-radius-bottom-right-input-group-default: var(
+    --x-size-border-radius-bottom-right-input-group-pill
+  );
+  --x-size-border-radius-bottom-left-input-group-default: var(
+    --x-size-border-radius-bottom-left-input-group-pill
+  );
+}
 :root {
   --x-size-padding-left-input-group-line: 0;
   --x-size-padding-right-input-group-line: 0;
@@ -7071,32 +7106,6 @@
   --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
   --x-size-border-width-left-input-line: 0;
 }
-:root {
-  --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
-  --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
-  --x-size-border-radius-bottom-right-input-group-pill: var(
-    --x-size-border-radius-input-group-pill
-  );
-  --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
-}
-
-.x-input-group--pill.x-input-group,
-.x-input-group--pill .x-input-group {
-  --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-pill);
-  --x-size-border-radius-top-left-input-group-default: var(
-    --x-size-border-radius-top-left-input-group-pill
-  );
-  --x-size-border-radius-top-right-input-group-default: var(
-    --x-size-border-radius-top-right-input-group-pill
-  );
-  --x-size-border-radius-bottom-right-input-group-default: var(
-    --x-size-border-radius-bottom-right-input-group-pill
-  );
-  --x-size-border-radius-bottom-left-input-group-default: var(
-    --x-size-border-radius-bottom-left-input-group-pill
-  );
-}
 :root {
   --x-size-padding-top-input-line: var(--x-size-base-03);
   --x-size-padding-right-input-line: 0;
@@ -7286,6 +7295,10 @@
   --x-size-width-icon-xl: var(--x-size-base-07);
   --x-size-height-icon-xl: var(--x-size-base-07);
 }
+:root {
+  --x-size-width-icon-xl: var(--x-size-base-07);
+  --x-size-height-icon-xl: var(--x-size-base-07);
+}
 
 .x-icon--xl {
   --x-size-width-icon-default: var(--x-size-width-icon-xl);
@@ -7295,10 +7308,6 @@
   --x-size-width-icon-s: var(--x-size-base-03);
   --x-size-height-icon-s: var(--x-size-base-03);
 }
-:root {
-  --x-size-width-icon-xl: var(--x-size-base-07);
-  --x-size-height-icon-xl: var(--x-size-base-07);
-}
 :root {
   --x-size-width-icon-s: var(--x-size-base-03);
   --x-size-height-icon-s: var(--x-size-base-03);
@@ -7312,6 +7321,10 @@
   --x-size-width-icon-m: var(--x-size-base-05);
   --x-size-height-icon-m: var(--x-size-base-05);
 }
+:root {
+  --x-size-width-icon-m: var(--x-size-base-05);
+  --x-size-height-icon-m: var(--x-size-base-05);
+}
 
 .x-icon--m {
   --x-size-width-icon-default: var(--x-size-width-icon-m);
@@ -7331,8 +7344,13 @@
   --x-size-height-icon-default: var(--x-size-height-icon-l);
 }
 :root {
-  --x-size-width-icon-m: var(--x-size-base-05);
-  --x-size-height-icon-m: var(--x-size-base-05);
+  --x-color-stroke-icon-default: currentColor;
+  --x-color-fill-icon-default: none;
+  --x-size-width-icon-default: var(--x-size-width-icon-m);
+  --x-size-height-icon-default: var(--x-size-height-icon-m);
+  --x-string-stroke-linecap-icon-default: butt;
+  --x-string-stroke-linejoin-icon-default: mitter;
+  --x-size-stroke-width-icon-default: 1px;
 }
 :root {
   --x-color-stroke-icon-default: currentColor;
@@ -7343,6 +7361,27 @@
   --x-string-stroke-linejoin-icon-default: mitter;
   --x-size-stroke-width-icon-default: 1px;
 }
+
+.x-icon {
+  stroke: var(--x-color-stroke-icon-default);
+  fill: var(--x-color-fill-icon-default);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  flex: 0 0 auto;
+  vertical-align: middle;
+  line-height: var(--x-size-height-icon-default);
+  width: var(--x-size-width-icon-default);
+  height: var(--x-size-height-icon-default);
+  font-size: var(--x-size-height-icon-default);
+  stroke-linecap: var(--x-string-stroke-linecap-icon-default);
+  stroke-linejoin: var(--x-string-stroke-linejoin-icon-default);
+  stroke-width: var(--x-size-stroke-width-icon-default);
+}
+.x-icon.x-filled {
+  stroke: none;
+  fill: var(--x-color-stroke-icon-default);
+}
 :root {
   --x-size-padding-grid: 0;
   --x-size-gap-grid: var(--x-size-base-03);
@@ -7387,36 +7426,6 @@
   --x-size-padding-bottom-filter-children: 0;
   --x-size-padding-left-filter-children: var(--x-size-base-05);
 }
-:root {
-  --x-color-stroke-icon-default: currentColor;
-  --x-color-fill-icon-default: none;
-  --x-size-width-icon-default: var(--x-size-width-icon-m);
-  --x-size-height-icon-default: var(--x-size-height-icon-m);
-  --x-string-stroke-linecap-icon-default: butt;
-  --x-string-stroke-linejoin-icon-default: mitter;
-  --x-size-stroke-width-icon-default: 1px;
-}
-
-.x-icon {
-  stroke: var(--x-color-stroke-icon-default);
-  fill: var(--x-color-fill-icon-default);
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  flex: 0 0 auto;
-  vertical-align: middle;
-  line-height: var(--x-size-height-icon-default);
-  width: var(--x-size-width-icon-default);
-  height: var(--x-size-height-icon-default);
-  font-size: var(--x-size-height-icon-default);
-  stroke-linecap: var(--x-string-stroke-linecap-icon-default);
-  stroke-linejoin: var(--x-string-stroke-linejoin-icon-default);
-  stroke-width: var(--x-size-stroke-width-icon-default);
-}
-.x-icon.x-filled {
-  stroke: none;
-  fill: var(--x-color-stroke-icon-default);
-}
 :root {
   --x-size-margin-filter-children: 0;
   --x-size-padding-top-filter-children: 0;
@@ -7481,13 +7490,45 @@
   );
   --x-size-line-height-filter-default: var(--x-size-line-height-text);
 }
-
-[dir="ltr"] .x-filter,[dir="ltr"]  .x-facet-filter {
-  padding-left: var(--x-size-padding-left-filter-default);
-}
-
-[dir="rtl"] .x-filter,[dir="rtl"]  .x-facet-filter {
-  padding-right: var(--x-size-padding-left-filter-default);
+:root {
+  --x-color-background-filter-default: transparent;
+  --x-color-border-filter-default: var(--x-color-background-filter-default);
+  --x-color-text-filter-default: var(--x-color-text-default);
+  --x-color-background-filter-default-selected: var(--x-color-background-filter-default);
+  --x-color-border-filter-default-selected: var(--x-color-border-filter-default);
+  --x-color-text-filter-default-selected: var(--x-color-text-filter-default);
+  --x-size-border-width-filter-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-filter-default: var(--x-size-border-width-filter-default);
+  --x-size-border-width-right-filter-default: var(--x-size-border-width-filter-default);
+  --x-size-border-width-bottom-filter-default: var(--x-size-border-width-filter-default);
+  --x-size-border-width-left-filter-default: var(--x-size-border-width-filter-default);
+  --x-size-border-radius-filter-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-filter-default: var(--x-size-border-radius-filter-default);
+  --x-size-border-radius-top-right-filter-default: var(--x-size-border-radius-filter-default);
+  --x-size-border-radius-bottom-right-filter-default: var(--x-size-border-radius-filter-default);
+  --x-size-border-radius-bottom-left-filter-default: var(--x-size-border-radius-filter-default);
+  --x-size-padding-top-filter-default: var(--x-size-base-03);
+  --x-size-padding-right-filter-default: 0;
+  --x-size-padding-bottom-filter-default: var(--x-size-base-03);
+  --x-size-padding-left-filter-default: 0;
+  --x-size-gap-filter-default: var(--x-size-base-03);
+  --x-font-family-filter-default: var(--x-font-family-text);
+  --x-size-font-filter-default: var(--x-size-font-text);
+  --x-number-font-weight-filter-default: var(--x-number-font-weight-base-regular);
+  --x-number-font-weight-filter-default-selected: var(--x-number-font-weight-base-bold);
+  --x-number-font-weight-filter-count-default: var(--x-number-font-weight-base-light);
+  --x-number-font-weight-filter-count-default-selected: var(
+    --x-number-font-weight-filter-count-default
+  );
+  --x-size-line-height-filter-default: var(--x-size-line-height-text);
+}
+
+[dir="ltr"] .x-filter,[dir="ltr"]  .x-facet-filter {
+  padding-left: var(--x-size-padding-left-filter-default);
+}
+
+[dir="rtl"] .x-filter,[dir="rtl"]  .x-facet-filter {
+  padding-right: var(--x-size-padding-left-filter-default);
 }
 
 [dir="ltr"] .x-filter,[dir="ltr"]  .x-facet-filter {
@@ -7562,38 +7603,6 @@
     --x-number-font-weight-filter-count-default-selected
   );
 }
-:root {
-  --x-color-background-filter-default: transparent;
-  --x-color-border-filter-default: var(--x-color-background-filter-default);
-  --x-color-text-filter-default: var(--x-color-text-default);
-  --x-color-background-filter-default-selected: var(--x-color-background-filter-default);
-  --x-color-border-filter-default-selected: var(--x-color-border-filter-default);
-  --x-color-text-filter-default-selected: var(--x-color-text-filter-default);
-  --x-size-border-width-filter-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-filter-default: var(--x-size-border-width-filter-default);
-  --x-size-border-width-right-filter-default: var(--x-size-border-width-filter-default);
-  --x-size-border-width-bottom-filter-default: var(--x-size-border-width-filter-default);
-  --x-size-border-width-left-filter-default: var(--x-size-border-width-filter-default);
-  --x-size-border-radius-filter-default: var(--x-size-border-radius-base-none);
-  --x-size-border-radius-top-left-filter-default: var(--x-size-border-radius-filter-default);
-  --x-size-border-radius-top-right-filter-default: var(--x-size-border-radius-filter-default);
-  --x-size-border-radius-bottom-right-filter-default: var(--x-size-border-radius-filter-default);
-  --x-size-border-radius-bottom-left-filter-default: var(--x-size-border-radius-filter-default);
-  --x-size-padding-top-filter-default: var(--x-size-base-03);
-  --x-size-padding-right-filter-default: 0;
-  --x-size-padding-bottom-filter-default: var(--x-size-base-03);
-  --x-size-padding-left-filter-default: 0;
-  --x-size-gap-filter-default: var(--x-size-base-03);
-  --x-font-family-filter-default: var(--x-font-family-text);
-  --x-size-font-filter-default: var(--x-size-font-text);
-  --x-number-font-weight-filter-default: var(--x-number-font-weight-base-regular);
-  --x-number-font-weight-filter-default-selected: var(--x-number-font-weight-base-bold);
-  --x-number-font-weight-filter-count-default: var(--x-number-font-weight-base-light);
-  --x-number-font-weight-filter-count-default-selected: var(
-    --x-number-font-weight-filter-count-default
-  );
-  --x-size-line-height-filter-default: var(--x-size-line-height-text);
-}
 :root {
   --x-color-border-facet-outlined: var(--x-color-base-neutral-70);
   --x-size-border-width-facet-outlined: var(--x-size-border-width-base);
@@ -7643,6 +7652,30 @@
   --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
   --x-size-border-width-left-facet-header-line: 0;
 }
+:root {
+  --x-color-border-facet-header-line: var(--x-color-base-neutral-10);
+  --x-size-border-width-facet-header-line: var(--x-size-border-width-base);
+  --x-size-border-width-top-facet-header-line: 0;
+  --x-size-border-width-right-facet-header-line: 0;
+  --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
+  --x-size-border-width-left-facet-header-line: 0;
+}
+
+.x-facet--line.x-facet,
+.x-facet--line .x-facet {
+  --x-color-border-facet-header-default: var(--x-color-border-facet-header-line);
+  --x-size-border-width-facet-header-default: var(--x-size-border-width-facet-header-line);
+  --x-size-border-width-top-facet-header-default: var(--x-size-border-width-top-facet-header-line);
+  --x-size-border-width-right-facet-header-default: var(
+    --x-size-border-width-right-facet-header-line
+  );
+  --x-size-border-width-bottom-facet-header-default: var(
+    --x-size-border-width-bottom-facet-header-line
+  );
+  --x-size-border-width-left-facet-header-default: var(
+    --x-size-border-width-left-facet-header-line
+  );
+}
 :root {
   --x-color-background-facet-default: transparent;
   --x-color-border-facet-default: var(--x-color-background-facet-default);
@@ -7676,30 +7709,6 @@
   --x-number-font-weight-facet-default: var(--x-number-font-weight-title3);
   --x-size-line-height-facet-default: var(--x-size-line-height-title3);
 }
-:root {
-  --x-color-border-facet-header-line: var(--x-color-base-neutral-10);
-  --x-size-border-width-facet-header-line: var(--x-size-border-width-base);
-  --x-size-border-width-top-facet-header-line: 0;
-  --x-size-border-width-right-facet-header-line: 0;
-  --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
-  --x-size-border-width-left-facet-header-line: 0;
-}
-
-.x-facet--line.x-facet,
-.x-facet--line .x-facet {
-  --x-color-border-facet-header-default: var(--x-color-border-facet-header-line);
-  --x-size-border-width-facet-header-default: var(--x-size-border-width-facet-header-line);
-  --x-size-border-width-top-facet-header-default: var(--x-size-border-width-top-facet-header-line);
-  --x-size-border-width-right-facet-header-default: var(
-    --x-size-border-width-right-facet-header-line
-  );
-  --x-size-border-width-bottom-facet-header-default: var(
-    --x-size-border-width-bottom-facet-header-line
-  );
-  --x-size-border-width-left-facet-header-default: var(
-    --x-size-border-width-left-facet-header-line
-  );
-}
 :root {
   --x-color-background-facet-default: transparent;
   --x-color-border-facet-default: var(--x-color-background-facet-default);
@@ -7839,6 +7848,18 @@
   --x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
   --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
 }
+:root {
+  --x-size-border-radius-facet-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-facet-card: var(--x-size-border-radius-facet-card);
+  --x-size-border-radius-top-right-facet-card: var(--x-size-border-radius-facet-card);
+  --x-size-border-radius-bottom-right-facet-card: var(--x-size-border-radius-facet-card);
+  --x-size-border-radius-bottom-left-facet-card: var(--x-size-border-radius-facet-card);
+  --x-size-padding-facet-header-card: var(--x-size-base-03);
+  --x-size-padding-top-facet-header-card: var(--x-size-padding-facet-header-card);
+  --x-size-padding-right-facet-header-card: var(--x-size-padding-facet-header-card);
+  --x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
+  --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
+}
 
 .x-facet--card.x-facet,
 .x-facet--card .x-facet {
@@ -7853,18 +7874,6 @@
   --x-size-padding-bottom-facet-header-default: var(--x-size-padding-bottom-facet-header-card);
   --x-size-padding-left-facet-header-default: var(--x-size-padding-left-facet-header-card);
 }
-:root {
-  --x-size-border-radius-facet-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-left-facet-card: var(--x-size-border-radius-facet-card);
-  --x-size-border-radius-top-right-facet-card: var(--x-size-border-radius-facet-card);
-  --x-size-border-radius-bottom-right-facet-card: var(--x-size-border-radius-facet-card);
-  --x-size-border-radius-bottom-left-facet-card: var(--x-size-border-radius-facet-card);
-  --x-size-padding-facet-header-card: var(--x-size-base-03);
-  --x-size-padding-top-facet-header-card: var(--x-size-padding-facet-header-card);
-  --x-size-padding-right-facet-header-card: var(--x-size-padding-facet-header-card);
-  --x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
-  --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
-}
 :root {
   --x-size-width-dropdown-xl: 282px;
 }
@@ -7878,6 +7887,13 @@
 :root {
   --x-size-width-dropdown-s: 74px;
 }
+:root {
+  --x-size-width-dropdown-s: 74px;
+}
+
+.x-dropdown.x-dropdown--s {
+  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-s);
+}
 :root {
   --x-size-gap-dropdown-pill: var(--x-size-base-03);
   --x-size-border-width-dropdown-list-pill: var(--x-size-border-width-base);
@@ -7886,13 +7902,6 @@
   --x-size-border-width-bottom-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
   --x-size-border-width-left-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
 }
-:root {
-  --x-size-width-dropdown-s: 74px;
-}
-
-.x-dropdown.x-dropdown--s {
-  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-s);
-}
 :root {
   --x-size-gap-dropdown-pill: var(--x-size-base-03);
   --x-size-border-width-dropdown-list-pill: var(--x-size-border-width-base);
@@ -7970,6 +7979,30 @@
   --x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
   --x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
 }
+:root {
+  --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
+  --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
+  --x-size-padding-top-dropdown-item-line: var(--x-size-base-03);
+  --x-size-padding-right-dropdown-item-line: 0;
+  --x-size-padding-bottom-dropdown-item-line: var(--x-size-base-03);
+  --x-size-padding-left-dropdown-item-line: 0;
+  --x-size-padding-top-dropdown-toggle-line: var(--x-size-base-03);
+  --x-size-padding-right-dropdown-toggle-line: 0;
+  --x-size-padding-bottom-dropdown-toggle-line: var(--x-size-base-03);
+  --x-size-padding-left-dropdown-toggle-line: 0;
+  --x-size-border-width-dropdown-toggle-line: var(--x-size-border-width-base);
+  --x-size-border-width-top-dropdown-toggle-line: 0;
+  --x-size-border-width-right-dropdown-toggle-line: 0;
+  --x-size-border-width-bottom-dropdown-toggle-line: var(
+    --x-size-border-width-dropdown-toggle-line
+  );
+  --x-size-border-width-left-dropdown-toggle-line: 0;
+  --x-size-border-width-dropdown-list-line: 0;
+  --x-size-border-width-top-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
+  --x-size-border-width-right-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
+  --x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
+  --x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
+}
 
 .x-dropdown--line {
   --x-size-padding-top-dropdown-item-default: var(--x-size-padding-top-dropdown-item-line);
@@ -8010,32 +8043,15 @@
   );
 }
 :root {
-  --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
-  --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
-  --x-size-padding-top-dropdown-item-line: var(--x-size-base-03);
-  --x-size-padding-right-dropdown-item-line: 0;
-  --x-size-padding-bottom-dropdown-item-line: var(--x-size-base-03);
-  --x-size-padding-left-dropdown-item-line: 0;
-  --x-size-padding-top-dropdown-toggle-line: var(--x-size-base-03);
-  --x-size-padding-right-dropdown-toggle-line: 0;
-  --x-size-padding-bottom-dropdown-toggle-line: var(--x-size-base-03);
-  --x-size-padding-left-dropdown-toggle-line: 0;
-  --x-size-border-width-dropdown-toggle-line: var(--x-size-border-width-base);
-  --x-size-border-width-top-dropdown-toggle-line: 0;
-  --x-size-border-width-right-dropdown-toggle-line: 0;
-  --x-size-border-width-bottom-dropdown-toggle-line: var(
-    --x-size-border-width-dropdown-toggle-line
-  );
-  --x-size-border-width-left-dropdown-toggle-line: 0;
-  --x-size-border-width-dropdown-list-line: 0;
-  --x-size-border-width-top-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
-  --x-size-border-width-right-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
-  --x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
-  --x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
+  --x-size-width-dropdown-l: 202px;
 }
 :root {
   --x-size-width-dropdown-l: 202px;
 }
+
+.x-dropdown.x-dropdown--l {
+  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-l);
+}
 :root {
   --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
   --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
@@ -8109,13 +8125,6 @@
   --x-string-overflow-dropdown-toggle-default: hidden;
   --x-string-overflow-dropdown-list-default: hidden;
 }
-:root {
-  --x-size-width-dropdown-l: 202px;
-}
-
-.x-dropdown.x-dropdown--l {
-  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-l);
-}
 :root {
   --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
   --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
@@ -8424,6 +8433,16 @@
   --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
   --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
 }
+:root {
+  --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
+  --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
+  --x-color-text-button-tertiary: var(--x-color-text-default);
+  --x-size-border-width-button-tertiary: var(--x-size-border-width-base);
+  --x-size-border-width-top-button-tertiary: var(--x-size-border-width-button-tertiary);
+  --x-size-border-width-right-button-tertiary: var(--x-size-border-width-button-tertiary);
+  --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
+  --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
+}
 
 .x-button--tertiary.x-button,
 .x-button--tertiary .x-button {
@@ -8435,16 +8454,6 @@
   --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-tertiary);
   --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-tertiary);
 }
-:root {
-  --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
-  --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
-  --x-color-text-button-tertiary: var(--x-color-text-default);
-  --x-size-border-width-button-tertiary: var(--x-size-border-width-base);
-  --x-size-border-width-top-button-tertiary: var(--x-size-border-width-button-tertiary);
-  --x-size-border-width-right-button-tertiary: var(--x-size-border-width-button-tertiary);
-  --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
-  --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
-}
 :root {
   --x-color-background-button-secondary: transparent;
   --x-color-border-button-secondary: var(--x-color-border-button-default);
@@ -8455,13 +8464,6 @@
   --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
   --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
 }
-:root {
-  --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
-  --x-size-border-radius-top-right-button-round: var(--x-size-border-radius-button-round);
-  --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
-  --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
-}
 :root {
   --x-color-background-button-secondary: transparent;
   --x-color-border-button-secondary: var(--x-color-border-button-default);
@@ -8490,6 +8492,13 @@
   --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
   --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
 }
+:root {
+  --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
+  --x-size-border-radius-top-right-button-round: var(--x-size-border-radius-button-round);
+  --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
+  --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
+}
 
 .x-button--round.x-button,
 .x-button--round .x-button {
@@ -8710,16 +8719,6 @@
   --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
   --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
 }
-:root {
-  --x-color-background-badge-default: var(--x-color-base-neutral-10);
-  --x-color-text-badge-default: var(--x-color-base-neutral-100);
-  --x-color-border-badge-default: var(--x-color-base-neutral-10);
-  --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
-  --x-size-border-width-badge-default: 0;
-  --x-size-width-badge-default: 1.5em;
-  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
-  --x-size-font-badge-default: var(--x-size-font-base-xs);
-}
 :root {
   --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
   --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
@@ -8752,6 +8751,16 @@
   --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
   --x-size-font-badge-default: var(--x-size-font-base-xs);
 }
+:root {
+  --x-color-background-badge-default: var(--x-color-base-neutral-10);
+  --x-color-text-badge-default: var(--x-color-base-neutral-100);
+  --x-color-border-badge-default: var(--x-color-base-neutral-10);
+  --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
+  --x-size-border-width-badge-default: 0;
+  --x-size-width-badge-default: 1.5em;
+  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
+  --x-size-font-badge-default: var(--x-size-font-base-xs);
+}
 
 [dir="ltr"] .x-badge {
   right: calc(var(--x-size-width-badge-default) / 4);
@@ -8832,13 +8841,4 @@
   --x-size-border-radius-base-m: var(--x-size-base-06);
   --x-size-border-radius-base-pill: 99999px;
   --x-size-border-width-base: 1px;
-}
-:root {
-  --x-modal-overlay-color: rgb(0, 0, 0);
-  --x-modal-overlay-opacity: 0.7;
-}
-
-.x-modal__overlay {
-  background-color: var(--x-modal-overlay-color) !important;
-  opacity: var(--x-modal-overlay-opacity) !important;
 }

package/docs/API-reference/api/x-components.baseswitch.md

@@ -2,20 +2,25 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [BaseSwitch](./x-components.baseswitch.md)
 
-## BaseSwitch class
+## BaseSwitch variable
 
 Basic switch component to handle boolean values. This component receives its selected state using a prop, and emits a Vue event whenever the user clicks it.
 
 **Signature:**
 
 ```typescript
-export default class BaseSwitch extends Vue 
+_default: import("vue").DefineComponent<{
+    value: {
+        type: BooleanConstructor;
+        required: true;
+    };
+}, {
+    cssClasses: import("vue").Ref<string | import("@empathyco/x-utils").Dictionary<boolean> | (string | import("@empathyco/x-utils").Dictionary<boolean>)[]>;
+    toggle: () => void;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, ("change" | "input")[], string, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: BooleanConstructor;
+        required: true;
+    };
+}>>, {}>
 ```
-**Extends:** Vue
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [value](./x-components.baseswitch.value.md) |  | boolean | The selected value of the switch. |
-

package/docs/API-reference/api/x-components.md

@@ -29,7 +29,6 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [BaseRating](./x-components.baserating.md) | Rating component. This component renders a set of elements filled based on the value passed as prop. |
 |  [BaseScroll](./x-components.basescroll.md) | Base scroll component that depending on the user interactivity emits different events for knowing when the user scrolls, the direction of scroll and if user reaches the start or end. |
 |  [BaseSuggestions](./x-components.basesuggestions.md) | Paints a list of suggestions passed in by prop. Requires a component for a single suggestion in the default slot for working. |
-|  [BaseSwitch](./x-components.baseswitch.md) | Basic switch component to handle boolean values. This component receives its selected state using a prop, and emits a Vue event whenever the user clicks it. |
 |  [BaseTabsPanel](./x-components.basetabspanel.md) | Base Tabs Panel. |
 |  [BaseVariableColumnGrid](./x-components.basevariablecolumngrid.md) | The <code>BaseVariableColumnGrid</code> component is a wrapper of the <code>BaseGrid</code> component that listens to the <code>UserClickedColumnPicker</code> and the <code>ColumnsNumberProvided</code> events and passes the selected number of columns to the grid. It also allows to customize the grid items using the available <code>scopedSlots</code>. |
 |  [BaseXAPI](./x-components.basexapi.md) | Default implementation for [XAPI](./x-components.xapi.md)<!-- -->. |
@@ -418,6 +417,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [BaseResultPreviousPrice](./x-components.baseresultpreviousprice.md) | Component that renders the [Result](./x-types.result.md) previous price. |
 |  [BaseResultRating](./x-components.baseresultrating.md) | This component renders a [BaseRating](./x-components.baserating.md) for a result passed as prop. |
 |  [BaseSuggestion](./x-components.basesuggestion.md) | <p>Renders a button with a default slot. It receives a query, which should be the query of the module using this component, a suggestion, the [XEvent](./x-components.xevent.md) that will be emitted on click with a given feature.</p><p>The default slot receives the suggestion and the matched query has props.</p> |
+|  [BaseSwitch](./x-components.baseswitch.md) | Basic switch component to handle boolean values. This component receives its selected state using a prop, and emits a Vue event whenever the user clicks it. |
 |  [BaseTogglePanel](./x-components.basetogglepanel.md) | Simple panel that receives its open state via prop, which is responsible of rendering default slot inside a configurable transition. |
 |  [bus](./x-components.bus.md) | Default  implementation. |
 |  [cancelFetchAndSaveControls](./x-components.cancelfetchandsavecontrols.md) | Default implementation for fetchAndSaveExperienceControls action. |

package/docs/API-reference/components/common/x-components.base-switch.md

@@ -11,15 +11,16 @@ prop, and emits a Vue event whenever the user clicks it.
 
 ## Props
 
-| Name               | Description                       | Type                 | Default       |
-| ------------------ | --------------------------------- | -------------------- | ------------- |
-| <code>value</code> | The selected value of the switch. | <code>boolean</code> | <code></code> |
+| Name               | Description | Type                 | Default       |
+| ------------------ | ----------- | -------------------- | ------------- |
+| <code>value</code> |             | <code>boolean</code> | <code></code> |
 
 ## Events
 
 | Event name | Properties | Description |
 | ---------- | ---------- | ----------- |
 | change     |            |
+| input      |            |
 
 ## Events
 

package/js/components/base-switch.vue.js

@@ -26,7 +26,7 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = undefined;
   /* scoped */
-  const __vue_scope_id__ = "data-v-5075e350";
+  const __vue_scope_id__ = "data-v-7245357a";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */

package/js/components/base-switch.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-switch.vue.js","sources":["../../../src/components/base-switch.vue"],"sourcesContent":["<template>\n  <button\n    @click=\"toggle\"\n    :aria-checked=\"value.toString()\"\n    :class=\"cssClasses\"\n    class=\"x-switch\"\n    role=\"switch\"\n  >\n    <div class=\"x-switch__handle\" />\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { VueCSSClasses } from '../utils/types';\n\n  /**\n   * Basic switch component to handle boolean values. This component receives\n   * its selected state using a prop, and emits a Vue event whenever the user\n   * clicks it.\n   *\n   * @public\n   */\n  @Component({\n    model: {\n      event: 'change'\n    }\n  })\n  export default class BaseSwitch extends Vue {\n    /**\n     * The selected value of the switch.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    public value!: boolean;\n\n    /**\n     * Dynamic CSS classes to add to the switch component\n     * depending on its internal state.\n     *\n     * @returns A boolean dictionary with dynamic CSS classes.\n     * @internal\n     */\n    protected get cssClasses(): VueCSSClasses {\n      return {\n        'x-switch--is-selected x-selected': this.value\n      };\n    }\n\n    /**\n     * Emits a change event with the desired value of the switch.\n     *\n     * @internal\n     */\n    protected toggle(): void {\n      this.$emit('change', !this.value);\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-switch {\n    --x-switch-height: 16px;\n    --x-switch-width: calc(2 * (var(--x-switch-height)) + 2 * var(--x-switch-padding));\n    --x-switch-background: #b3b3b3;\n    --x-switch-padding: 2px;\n    --x-switch-handle-size: var(--x-switch-height);\n    box-sizing: content-box;\n    height: var(--x-switch-height);\n    padding: var(--x-switch-padding);\n    border-radius: 99999px;\n    background: var(--x-switch-background);\n    width: var(--x-switch-width);\n    border: none;\n    transition: 0.25s ease-out background-color;\n    cursor: pointer;\n\n    &__handle {\n      background: #ffffff;\n      border-radius: 50%;\n      height: var(--x-switch-handle-size);\n      width: var(--x-switch-handle-size);\n      transition: 0.25s ease-out transform;\n      transform: translateX(var(--x-switch-translate-x, 0%));\n    }\n\n    &--is-selected {\n      --x-switch-translate-x: calc(var(--x-switch-padding) + var(--x-switch-width) / 2);\n      --x-switch-background: #1a1a1a;\n    }\n\n    &--sm {\n      --x-switch-height: 12px;\n    }\n\n    &--lg {\n      --x-switch-height: 24px;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nHere you have a basic example of how the switch is rendered.\n\n_Try clicking it to see how it changes its state_\n\n```vue live\n<template>\n  <BaseSwitch @change=\"value = !value\" :value=\"value\" />\n</template>\n\n<script>\n  import { BaseSwitch } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSwitchDemo',\n    components: {\n      BaseSwitch\n    },\n    data() {\n      return {\n        value: false\n      };\n    }\n  };\n</script>\n```\n\nThe switch component also supports using the `v-model` directive, to automatically handle its state\nchange:\n\n```vue live\n<template>\n  <BaseSwitch v-model=\"value\" />\n</template>\n\n<script>\n  import { BaseSwitch } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSwitchDemo',\n    components: {\n      BaseSwitch\n    },\n    data() {\n      return {\n        value: false\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-switch.vue.js","sources":["../../../src/components/base-switch.vue"],"sourcesContent":["<template>\n  <button\n    @click=\"toggle\"\n    :aria-checked=\"value.toString()\"\n    :class=\"cssClasses\"\n    class=\"x-switch\"\n    role=\"switch\"\n  >\n    <div class=\"x-switch__handle\" />\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, ref } from 'vue';\n  import { VueCSSClasses } from '../utils/types';\n\n  /**\n   * Basic switch component to handle boolean values. This component receives\n   * its selected state using a prop, and emits a Vue event whenever the user\n   * clicks it.\n   *\n   * @public\n   */\n\n  export default defineComponent({\n    name: 'BaseSwitch',\n    /**\n     * The selected value of the switch.\n     *\n     * @public\n     */\n    props: {\n      value: {\n        type: Boolean,\n        required: true\n      }\n    },\n    emits: ['change', 'input'],\n    setup(props, { emit }) {\n      /**\n       * Dynamic CSS classes to add to the switch component\n       * depending on its internal state.\n       *\n       * @returns A boolean dictionary with dynamic CSS classes.\n       * @internal\n       */\n      const cssClasses = ref<VueCSSClasses>({\n        'x-switch--is-selected x-selected': props.value\n      });\n\n      /**\n       * Emits a change and input event with the desired value of the switch.\n       *\n       * @internal\n       */\n      const toggle = (): void => {\n        const newValue = !props.value;\n        cssClasses.value = {\n          'x-switch--is-selected': newValue,\n          'x-selected': newValue\n        };\n\n        emit('input', newValue);\n        emit('change', newValue);\n      };\n\n      return {\n        cssClasses,\n        toggle\n      };\n    }\n  });\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-switch {\n    --x-switch-height: 16px;\n    --x-switch-width: calc(2 * (var(--x-switch-height)) + 2 * var(--x-switch-padding));\n    --x-switch-background: #b3b3b3;\n    --x-switch-padding: 2px;\n    --x-switch-handle-size: var(--x-switch-height);\n    box-sizing: content-box;\n    height: var(--x-switch-height);\n    padding: var(--x-switch-padding);\n    border-radius: 99999px;\n    background: var(--x-switch-background);\n    width: var(--x-switch-width);\n    border: none;\n    transition: 0.25s ease-out background-color;\n    cursor: pointer;\n\n    &__handle {\n      background: #ffffff;\n      border-radius: 50%;\n      height: var(--x-switch-handle-size);\n      width: var(--x-switch-handle-size);\n      transition: 0.25s ease-out transform;\n      transform: translateX(var(--x-switch-translate-x, 0%));\n    }\n\n    &--is-selected {\n      --x-switch-translate-x: calc(var(--x-switch-padding) + var(--x-switch-width) / 2);\n      --x-switch-background: #1a1a1a;\n    }\n\n    &--sm {\n      --x-switch-height: 12px;\n    }\n\n    &--lg {\n      --x-switch-height: 24px;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nHere you have a basic example of how the switch is rendered.\n\n_Try clicking it to see how it changes its state_\n\n```vue live\n<template>\n  <BaseSwitch @change=\"value = !value\" :value=\"value\" />\n</template>\n\n<script>\n  import { BaseSwitch } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSwitchDemo',\n    components: {\n      BaseSwitch\n    },\n    data() {\n      return {\n        value: false\n      };\n    }\n  };\n</script>\n```\n\nThe switch component also supports using the `v-model` directive, to automatically handle its state\nchange:\n\n```vue live\n<template>\n  <BaseSwitch v-model=\"value\" />\n</template>\n\n<script>\n  import { BaseSwitch } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseSwitchDemo',\n    components: {\n      BaseSwitch\n    },\n    data() {\n      return {\n        value: false\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/base-switch.vue2.js

@@ -1,6 +1,4 @@
-import { __decorate } from 'tslib';
-import Vue from 'vue';
-import { Prop, Component } from 'vue-property-decorator';
+import { defineComponent, ref } from 'vue';
 
 /**
  * Basic switch component to handle boolean values. This component receives
@@ -9,39 +7,51 @@ import { Prop, Component } from 'vue-property-decorator';
  *
  * @public
  */
-let BaseSwitch = class BaseSwitch extends Vue {
+var script = defineComponent({
+    name: 'BaseSwitch',
     /**
-     * Dynamic CSS classes to add to the switch component
-     * depending on its internal state.
+     * The selected value of the switch.
      *
-     * @returns A boolean dictionary with dynamic CSS classes.
-     * @internal
+     * @public
      */
-    get cssClasses() {
+    props: {
+        value: {
+            type: Boolean,
+            required: true
+        }
+    },
+    emits: ['change', 'input'],
+    setup(props, { emit }) {
+        /**
+         * Dynamic CSS classes to add to the switch component
+         * depending on its internal state.
+         *
+         * @returns A boolean dictionary with dynamic CSS classes.
+         * @internal
+         */
+        const cssClasses = ref({
+            'x-switch--is-selected x-selected': props.value
+        });
+        /**
+         * Emits a change and input event with the desired value of the switch.
+         *
+         * @internal
+         */
+        const toggle = () => {
+            const newValue = !props.value;
+            cssClasses.value = {
+                'x-switch--is-selected': newValue,
+                'x-selected': newValue
+            };
+            emit('input', newValue);
+            emit('change', newValue);
+        };
         return {
-            'x-switch--is-selected x-selected': this.value
+            cssClasses,
+            toggle
         };
     }
-    /**
-     * Emits a change event with the desired value of the switch.
-     *
-     * @internal
-     */
-    toggle() {
-        this.$emit('change', !this.value);
-    }
-};
-__decorate([
-    Prop({ required: true })
-], BaseSwitch.prototype, "value", void 0);
-BaseSwitch = __decorate([
-    Component({
-        model: {
-            event: 'change'
-        }
-    })
-], BaseSwitch);
-var script = BaseSwitch;
+});
 
 export { script as default };
 //# sourceMappingURL=base-switch.vue2.js.map

package/js/components/base-switch.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-switch.vue2.js","sources":["../../../src/components/base-switch.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { VueCSSClasses } from '../utils/types';\n\n  /**\n   * Basic switch component to handle boolean values. This component receives\n   * its selected state using a prop, and emits a Vue event whenever the user\n   * clicks it.\n   *\n   * @public\n   */\n  @Component({\n    model: {\n      event: 'change'\n    }\n  })\n  export default class BaseSwitch extends Vue {\n    /**\n     * The selected value of the switch.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    public value!: boolean;\n\n    /**\n     * Dynamic CSS classes to add to the switch component\n     * depending on its internal state.\n     *\n     * @returns A boolean dictionary with dynamic CSS classes.\n     * @internal\n     */\n    protected get cssClasses(): VueCSSClasses {\n      return {\n        'x-switch--is-selected x-selected': this.value\n      };\n    }\n\n    /**\n     * Emits a change event with the desired value of the switch.\n     *\n     * @internal\n     */\n    protected toggle(): void {\n      this.$emit('change', !this.value);\n    }\n  }\n"],"names":[],"mappings":";;;;AAiBE;;;;;;AAMG;AAMY,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,GAAG,CAAA;AASzC;;;;;;AAMG;AACH,IAAA,IAAc,UAAU,GAAA;QACtB,OAAO;YACL,kCAAkC,EAAE,IAAI,CAAC,KAAK;SAC/C,CAAC;KACH;AAED;;;;AAIG;IACO,MAAM,GAAA;QACd,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACnC;CACF,CAAA;AAvBC,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AACF,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAPJ,UAAU,GAAA,UAAA,CAAA;AAL9B,IAAA,SAAS,CAAC;AACT,QAAA,KAAK,EAAE;AACL,YAAA,KAAK,EAAE,QAAQ;AAChB,SAAA;KACF,CAAC;AACmB,CAAA,EAAA,UAAU,CA8B9B,CAAA;aA9BoB,UAAU;;;;"}
+{"version":3,"file":"base-switch.vue2.js","sources":["../../../src/components/base-switch.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n  import { defineComponent, ref } from 'vue';\n  import { VueCSSClasses } from '../utils/types';\n\n  /**\n   * Basic switch component to handle boolean values. This component receives\n   * its selected state using a prop, and emits a Vue event whenever the user\n   * clicks it.\n   *\n   * @public\n   */\n\n  export default defineComponent({\n    name: 'BaseSwitch',\n    /**\n     * The selected value of the switch.\n     *\n     * @public\n     */\n    props: {\n      value: {\n        type: Boolean,\n        required: true\n      }\n    },\n    emits: ['change', 'input'],\n    setup(props, { emit }) {\n      /**\n       * Dynamic CSS classes to add to the switch component\n       * depending on its internal state.\n       *\n       * @returns A boolean dictionary with dynamic CSS classes.\n       * @internal\n       */\n      const cssClasses = ref<VueCSSClasses>({\n        'x-switch--is-selected x-selected': props.value\n      });\n\n      /**\n       * Emits a change and input event with the desired value of the switch.\n       *\n       * @internal\n       */\n      const toggle = (): void => {\n        const newValue = !props.value;\n        cssClasses.value = {\n          'x-switch--is-selected': newValue,\n          'x-selected': newValue\n        };\n\n        emit('input', newValue);\n        emit('change', newValue);\n      };\n\n      return {\n        cssClasses,\n        toggle\n      };\n    }\n  });\n"],"names":[],"mappings":";;AAgBE;;;;;;AAMG;AAEH,aAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,YAAY;AAClB;;;;AAIG;AACH,IAAA,KAAK,EAAE;AACL,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;AAC1B,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,EAAA;AACnB;;;;;;AAMG;QACH,MAAM,UAAU,GAAG,GAAG,CAAgB;YACpC,kCAAkC,EAAE,KAAK,CAAC,KAAK;AAChD,SAAA,CAAC,CAAC;AAEH;;;;AAIG;QACH,MAAM,MAAM,GAAG,MAAW;AACxB,YAAA,MAAM,QAAQ,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC;YAC9B,UAAU,CAAC,KAAK,GAAG;AACjB,gBAAA,uBAAuB,EAAE,QAAQ;AACjC,gBAAA,YAAY,EAAE,QAAQ;aACvB,CAAC;AAEF,YAAA,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;AACxB,YAAA,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAC3B,SAAC,CAAC;QAEF,OAAO;YACL,UAAU;YACV,MAAM;SACP,CAAC;KACH;AACF,CAAA,CAAC;;;;"}

package/js/components/base-switch.vue3.js

@@ -1,6 +1,6 @@
 import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
 
-var css = ".x-switch[data-v-5075e350] {\n  --x-switch-height: 16px;\n  --x-switch-width: calc(2 * (var(--x-switch-height)) + 2 * var(--x-switch-padding));\n  --x-switch-background: #b3b3b3;\n  --x-switch-padding: 2px;\n  --x-switch-handle-size: var(--x-switch-height);\n  box-sizing: content-box;\n  height: var(--x-switch-height);\n  padding: var(--x-switch-padding);\n  border-radius: 99999px;\n  background: var(--x-switch-background);\n  width: var(--x-switch-width);\n  border: none;\n  transition: 0.25s ease-out background-color;\n  cursor: pointer;\n}\n.x-switch__handle[data-v-5075e350] {\n  background: #ffffff;\n  border-radius: 50%;\n  height: var(--x-switch-handle-size);\n  width: var(--x-switch-handle-size);\n  transition: 0.25s ease-out transform;\n  transform: translateX(var(--x-switch-translate-x, 0%));\n}\n.x-switch--is-selected[data-v-5075e350] {\n  --x-switch-translate-x: calc(var(--x-switch-padding) + var(--x-switch-width) / 2);\n  --x-switch-background: #1a1a1a;\n}\n.x-switch--sm[data-v-5075e350] {\n  --x-switch-height: 12px;\n}\n.x-switch--lg[data-v-5075e350] {\n  --x-switch-height: 24px;\n}";
+var css = ".x-switch[data-v-7245357a] {\n  --x-switch-height: 16px;\n  --x-switch-width: calc(2 * (var(--x-switch-height)) + 2 * var(--x-switch-padding));\n  --x-switch-background: #b3b3b3;\n  --x-switch-padding: 2px;\n  --x-switch-handle-size: var(--x-switch-height);\n  box-sizing: content-box;\n  height: var(--x-switch-height);\n  padding: var(--x-switch-padding);\n  border-radius: 99999px;\n  background: var(--x-switch-background);\n  width: var(--x-switch-width);\n  border: none;\n  transition: 0.25s ease-out background-color;\n  cursor: pointer;\n}\n.x-switch__handle[data-v-7245357a] {\n  background: #ffffff;\n  border-radius: 50%;\n  height: var(--x-switch-handle-size);\n  width: var(--x-switch-handle-size);\n  transition: 0.25s ease-out transform;\n  transform: translateX(var(--x-switch-translate-x, 0%));\n}\n.x-switch--is-selected[data-v-7245357a] {\n  --x-switch-translate-x: calc(var(--x-switch-padding) + var(--x-switch-width) / 2);\n  --x-switch-background: #1a1a1a;\n}\n.x-switch--sm[data-v-7245357a] {\n  --x-switch-height: 12px;\n}\n.x-switch--lg[data-v-7245357a] {\n  --x-switch-height: 24px;\n}";
            const isBrowser = /*#__PURE__*/ (function () {
              return (
                 Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "4.1.0-alpha.20",
+  "version": "4.1.0-alpha.21",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -143,5 +143,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "3fe4ca41c2cc2d3281d5fa76c4a61807afc3415b"
+  "gitHead": "fb1f2f29e0ab2fcbc6c32bd89450cee79aa985c4"
 }

package/report/x-components.api.json

@@ -8223,66 +8223,117 @@
           "implementsTokenRanges": []
         },
         {
-          "kind": "Class",
-          "canonicalReference": "@empathyco/x-components!BaseSwitch:class",
+          "kind": "Variable",
+          "canonicalReference": "@empathyco/x-components!BaseSwitch:var",
           "docComment": "/**\n * Basic switch component to handle boolean values. This component receives its selected state using a prop, and emits a Vue event whenever the user clicks it.\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
-              "text": "export default class BaseSwitch extends "
+              "text": "_default: "
+            },
+            {
+              "kind": "Content",
+              "text": "import(\"vue\")."
             },
             {
               "kind": "Reference",
-              "text": "Vue",
-              "canonicalReference": "vue!Vue:interface"
+              "text": "DefineComponent",
+              "canonicalReference": "vue!DefineComponent:type"
             },
             {
               "kind": "Content",
-              "text": " "
+              "text": "<{\n    value: {\n        type: "
+            },
+            {
+              "kind": "Reference",
+              "text": "BooleanConstructor",
+              "canonicalReference": "!BooleanConstructor:interface"
+            },
+            {
+              "kind": "Content",
+              "text": ";\n        required: true;\n    };\n}, {\n    cssClasses: import(\"vue\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "Ref",
+              "canonicalReference": "vue!Ref:interface"
+            },
+            {
+              "kind": "Content",
+              "text": "<string | import(\"@empathyco/x-utils\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "Dictionary",
+              "canonicalReference": "@empathyco/x-utils!Dictionary:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<boolean> | (string | import(\"@empathyco/x-utils\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "Dictionary",
+              "canonicalReference": "@empathyco/x-utils!Dictionary:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<boolean>)[]>;\n    toggle: () => void;\n}, {}, {}, {}, import(\"vue/types/v3-component-options\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "ComponentOptionsMixin",
+              "canonicalReference": "vue!ComponentOptionsMixin:type"
+            },
+            {
+              "kind": "Content",
+              "text": ", import(\"vue/types/v3-component-options\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "ComponentOptionsMixin",
+              "canonicalReference": "vue!ComponentOptionsMixin:type"
+            },
+            {
+              "kind": "Content",
+              "text": ", (\"change\" | \"input\")[], string, "
+            },
+            {
+              "kind": "Reference",
+              "text": "Readonly",
+              "canonicalReference": "!Readonly:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<import(\"vue\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "ExtractPropTypes",
+              "canonicalReference": "vue!ExtractPropTypes:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<{\n    value: {\n        type: "
+            },
+            {
+              "kind": "Reference",
+              "text": "BooleanConstructor",
+              "canonicalReference": "!BooleanConstructor:interface"
+            },
+            {
+              "kind": "Content",
+              "text": ";\n        required: true;\n    };\n}>>, {}>"
             }
           ],
           "fileUrlPath": "dist/types/components/base-switch.vue.d.ts",
+          "isReadonly": true,
           "releaseTag": "Public",
-          "isAbstract": false,
           "name": "BaseSwitch",
-          "preserveMemberOrder": false,
-          "members": [
-            {
-              "kind": "Property",
-              "canonicalReference": "@empathyco/x-components!BaseSwitch#value:member",
-              "docComment": "/**\n * The selected value of the switch.\n *\n * @public\n */\n",
-              "excerptTokens": [
-                {
-                  "kind": "Content",
-                  "text": "value: "
-                },
-                {
-                  "kind": "Content",
-                  "text": "boolean"
-                },
-                {
-                  "kind": "Content",
-                  "text": ";"
-                }
-              ],
-              "isReadonly": false,
-              "isOptional": false,
-              "releaseTag": "Public",
-              "name": "value",
-              "propertyTypeTokenRange": {
-                "startIndex": 1,
-                "endIndex": 2
-              },
-              "isStatic": false,
-              "isProtected": false,
-              "isAbstract": false
-            }
-          ],
-          "extendsTokenRange": {
+          "variableTypeTokenRange": {
             "startIndex": 1,
-            "endIndex": 2
-          },
-          "implementsTokenRanges": []
+            "endIndex": 22
+          }
         },
         {
           "kind": "Class",

package/report/x-components.api.md

@@ -885,13 +885,20 @@ export class BaseSuggestions extends BaseSuggestions_base {
 }
 
 // @public
-export class BaseSwitch extends Vue_2 {
-    // @internal
-    protected get cssClasses(): VueCSSClasses;
-    // @internal
-    protected toggle(): void;
-    value: boolean;
-}
+export const BaseSwitch: DefineComponent<    {
+value: {
+type: BooleanConstructor;
+required: true;
+};
+}, {
+cssClasses: Ref<string | Dictionary<boolean> | (string | Dictionary<boolean>)[]>;
+toggle: () => void;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("change" | "input")[], string, Readonly<ExtractPropTypes<    {
+value: {
+type: BooleanConstructor;
+required: true;
+};
+}>>, {}>;
 
 // Warning: (ae-forgotten-export) The symbol "BaseTabsPanel_base" needs to be exported by the entry point index.d.ts
 //

package/types/components/base-switch.vue.d.ts

@@ -1,5 +1,3 @@
-import Vue from 'vue';
-import { VueCSSClasses } from '../utils/types';
 /**
  * Basic switch component to handle boolean values. This component receives
  * its selected state using a prop, and emits a Vue event whenever the user
@@ -7,26 +5,19 @@ import { VueCSSClasses } from '../utils/types';
  *
  * @public
  */
-export default class BaseSwitch extends Vue {
-    /**
-     * The selected value of the switch.
-     *
-     * @public
-     */
-    value: boolean;
-    /**
-     * Dynamic CSS classes to add to the switch component
-     * depending on its internal state.
-     *
-     * @returns A boolean dictionary with dynamic CSS classes.
-     * @internal
-     */
-    protected get cssClasses(): VueCSSClasses;
-    /**
-     * Emits a change event with the desired value of the switch.
-     *
-     * @internal
-     */
-    protected toggle(): void;
-}
+declare const _default: import("vue").DefineComponent<{
+    value: {
+        type: BooleanConstructor;
+        required: true;
+    };
+}, {
+    cssClasses: import("vue").Ref<string | import("@empathyco/x-utils").Dictionary<boolean> | (string | import("@empathyco/x-utils").Dictionary<boolean>)[]>;
+    toggle: () => void;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, ("change" | "input")[], string, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: BooleanConstructor;
+        required: true;
+    };
+}>>, {}>;
+export default _default;
 //# sourceMappingURL=base-switch.vue?rollup-plugin-vue=script.d.ts.map

package/types/components/base-switch.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-switch.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../src/components/base-switch.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAaE,OAAO,GAAG,MAAM,KAAK,CAAC;AAEtB,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C;;;;;;GAMG;AAMH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,GAAG;IACzC;;;;OAIG;IAEI,KAAK,EAAG,OAAO,CAAC;IAEvB;;;;;;OAMG;IACH,SAAS,KAAK,UAAU,IAAI,aAAa,CAIxC;IAED;;;;OAIG;IACH,SAAS,CAAC,MAAM,IAAI,IAAI;CAGzB"}
+{"version":3,"file":"base-switch.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../src/components/base-switch.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAgBE;;;;;;GAMG;;;;;;;;kBAiCoB,IAAI;;;;;;;AA/B3B,wBA+CG"}

package/docs/API-reference/api/x-components.baseswitch.value.md

@@ -1,13 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [BaseSwitch](./x-components.baseswitch.md) &gt; [value](./x-components.baseswitch.value.md)
-
-## BaseSwitch.value property
-
-The selected value of the switch.
-
-**Signature:**
-
-```typescript
-value: boolean;
-```